A Silk Road restaurant with a menu you turn like a book

Plov, shashlik and dumplings from Samarkand to Beirut, cooked over coals in Canggu.

IKAT bills itself as the first Silk Road restaurant in Bali. It takes its name from the Indonesian word for a way of dyeing and weaving cloth that turns up in silks from Bali to Bukhara. Its head chef trained in Uzbekistan and then Moscow, the kitchen runs from nine in the morning until one at night, and there is live oud on Fridays.

The restaurant came to us with a brand book, 145 food and drink photographs, and English and Russian copy for every page. Our job was to turn that into a website that feels like the restaurant, in either language.

A story told in five chapters, a photo library of one subject, and a menu that had to feel real.

The brand tells its history in five chapters, from the trade route to the legend of the building and its merchant. That story had to read well, and read the same, in English and in Russian.

All 145 photographs were portrait, and every one showed food or drink. Rather than invent gallery categories the pictures could not fill, we built them around what the camera had captured: The table, Mangal and Bar.

And the menu could not be a PDF. It needed to feel like the object a guest is handed at the table.

A leather-bound menu on the home page, with pages you turn by hand.

The home page opens a menu book with a leather cover and endpapers. Visitors turn its pages by dragging a corner or tapping a page, or with the arrow buttons and the keyboard. The full menu, all eight courses of it, has a page of its own.

Four short steps to a table, from breakfast to the late sitting.

Guests pick a day from the next seven, shown in Bali time, then a service: breakfast, lunch, dinner or late. Next comes the size of the party, then their contact details. Entries are checked on the page as they go, and the form is ready to connect to whichever form service the restaurant chooses.

Built for the phone in a guest's hand, not shrunk to fit it.

On phones, a Reserve and Call bar stays pinned to the bottom of every page, so booking is always one tap away. The gallery's 18 photographs can be filtered by category and open in a lightbox.

Scroll reveals and parallax give the pages depth, and all of it switches off for visitors who prefer reduced motion.

Two languages from one set of pages, and a site that runs anywhere.

English and Russian share the same markup. The language switcher remembers each visitor's choice, and with JavaScript turned off the site still reads correctly in English.

The brand book became a web design system: Cormorant Garamond italic paired with Oswald, an eight-point star pattern and a set of colour tokens. It is written up in the docs and shown on a live page, so anyone extending the site can see the rules at work.