Mise

Best for

• Restaurants, wine bars and cafés. It covers table booking, menus with allergens and diets, set menus and functions with their deposit terms, and the kitchen team. It's written to the menu rules (see "Restaurants: what we build in").
• Anyone who sells seats or spaces and serves food:
  • cinemas (Bijou: a seat plan, and a candy bar with allergens)
  • coworking (Workroom: desks, pods and rooms, and a café)
  • theatres and event venues, function rooms, cooking schools
• Audiences: people booking for a group who want a good table, and anyone who has to ask "what's in that?".

Less suited to: quick-service ordering (Catalogue); a bakery or café with no bookings (Riso); clinical or professional services.

Personality and voice

Warm and generous, like a good front-of-house. Here's your table, here's what you can eat, here's what it costs (including on public holidays).

• Headlines: "Cooked over fire, shared at the table." · "What you can eat, at a glance." · "Feed a table, without the maths."
• Buttons: "Book a table" · "Request this table" · "Hold these seats" · "Send the enquiry"
• Microcopy:
  • "Now pick a table for 4."
  • "12 of 15 dishes suit you, 3 with a change."
  • "A surcharge of 15% applies on public holidays."
• Words to avoid on a restaurant site: "allergen-free" or "safe for allergies" (a shared kitchen can't promise that), hidden surcharges, a "from" price that isn't the price, and "booking fee".

Colour

Measured contrast (WCAG).

• Lunch:
  • ink on paper 16.3:1
  • muted on paper 6.2:1 (5.7:1 on well)
  • olive on paper 6.4:1 (5.9:1 on well, 5.8:1 on its soft fill)
  • white on olive 6.8:1
  • chilli on paper 6.0:1 (6.4:1 on card)
  • ink on saffron 10.4:1
• Dinner:
  • ink 16.2:1
  • muted 7.3:1 (6.7:1 on card)
  • olive 11.5:1
  • text on olive 10.3:1
  • olive on its soft fill 8.7:1
  • chilli on card 7.5:1
  • ink on saffron 8.6:1
• Example dials on paper (light / dark):
  • velvet red (Bijou) 8.3:1 / 9.3:1
  • lagoon teal (Workroom) 6.6:1 / 11.1:1
  • shiraz (Hearth & Vine) 10.4:1 / 9.9:1

Typography

• Display: Playfair Display, 400–600 with italics. Used for headlines, dish names and course titles in italics, and the brand.
• Body: Commissioner, 400–700. Warm and clear, for descriptions, prices, times and filters.

The signature move: the lit words turn olive italic, sitting on a smear of saffron like sauce across a plate. On load, the smear spreads.

Layout

• Frame: a 1200px wrap with a max(20px, 4vw) gutter. An ink top line carries a saffron pill (walk-ins, specials), and the header is sticky with the italic brand.
• Hero: copy on the left; the floor plan on the right, with party size, times, the plan, a legend and the request.
• Then:
  • the menu that listens, with the surcharge band
  • set menus and functions, with the deposit terms
  • the kitchen
  • visit facts and FAQ
  • an ink closing card with a plate and a candle's glow

Shape

• Soft corners: --r-s 6px, --r-m 12px, --r-l 20px; buttons are pills.
• Plates: the brand mark, faces and eyebrows are plates seen from above (rim and centre).
• Tables: drawn from above, with chairs. Round tables seat two, square ones four, and long ones six or eight. The room has a dashed window wall, counters for the kitchen and bar, and a green courtyard.

Motion language

• The floor plan: tables that fit fade up and the rest fall back; taken ones go dashed. Picking a table pops it in saffron.
• The menu: dishes you can't have dim and strike through; flags appear under each dish.
• Elsewhere: the lit words' smear spreads on load, and the closing card's candle glow shifts. Sections reveal with a 16px rise and fade over 700ms, and the phone menu drops in.
• Motion switch in the footer ([data-motion-toggle], html.calm, remembered as site-motion, with the default from prefers-reduced-motion). Calm stops the pop, the smear and the glow.
• Dinner switch ([data-theme-toggle]), remembered as site-theme; theme-color follows.

Imagery and illustration

The plan is the picture. Real photos of the room, the food and the people are welcome. Don't use stock plating, and don't use photos of dishes that aren't on the menu.

Signature components

• The floor plan: .floor[data-floor][data-mode="table"|"seats"][data-party][data-min][data-max][data-slack], containing:
  • the party stepper: [data-party-step], [data-party-out]
  • .times > button[data-time][data-start]
  • svg.plan (.room, .zone, .window, .counter, .plant, .area, and g.tbl[data-id][data-seats][data-area][data-label][data-taken] with .chair + .top + text)
  • .floor-legend
  • .floor-out with [data-floor-text] and [data-floor-go]
• The menu: .menu[data-menu][data-surcharge], containing:
  • .menu-filter (button.chip[data-avoid], button.chip[data-diet-pick])
  • [data-menu-count]
  • .surcharge (.switch[data-surcharge-toggle])
  • .courses > .course > h3 + ul > li.dish[data-has][data-can][data-diet][data-can-diet] (b + .diet, p, .has, strong[data-price], .flags)
  • .menu-note
• Supporting pieces: .card (.pick), .person (a plate .face), .facts (.stack), .notice (.warn), .topline, .faq, .licence, .close-card (--close-em).

Multi-page kit

• Phone menu: .menu-btn[aria-controls] opens .site-menu. Escape, an outside click or choosing a link closes it, and Tab stays inside while it's open.
• Current page: aria-current="page", shown as an olive-soft pill.
• Inner pages: .page-head, .crumbs, a .tag and a smaller .h1.
• Fields: .field, .fields, .field-wide, fieldset.field-set, .check, .form-card, [aria-invalid="true"]; form[data-template].
• Tiles: .choices › label.choice > input + span > b + small.
• Segmented control: .seg (filters work on [data-tags]).
• Gate: [data-gate] with button[data-show="panel-id"].
• Slider, switch, tables and layout: input.range, .switch[role=switch], .table / .table.stack, .r, .grid-2.lean.
• Events:
  • floor (detail.party, time, label, picks [{id, label, area, seats}])
  • request
  • menu (detail.avoid, diet, fit, adapt, surcharge)
• Helper: Mise.refresh(root).

Restaurants: what we build in

We checked these rules for restaurant menus and websites in October 2026, under the Australian Consumer Law and the Food Standards Code:

• Surcharges stated properly. A menu with a day surcharge must say "a surcharge of [percentage] applies on [the day or days]". The statement must be at least as prominent as the most prominent price on the menu. The surcharge band uses that wording at the same size and weight as the prices, and its switch shows the actual prices for the day.
• One price, including GST. Prices include GST, with no booking fee and no hidden card surcharge. Set menus show the price per person.
• Allergens on show. For unpackaged food, allergen information must be displayed with the food or given on request. Every dish lists its allergens, and the filter covers the mandatory allergens and sulphites. The note says plainly that a shared kitchen can't promise no traces, and asks people with severe allergies to tell staff when booking and on arrival.
• Deposits and cancellations in plain words. The functions page states the amount, when it's refundable, and that final numbers are charged.
• Liquor. The liquor licence number and a responsible service statement (no service to under-18s or intoxicated people) are in the footer.

These notes are design guidance, not legal advice.

• Restaurant menus misled consumers (ACCC)
• Declaring allergens (NSW Food Authority)

Do and don't

• Do let people pick the exact table, or seat.
• Do list allergens on every dish, and keep the filter one tap away.
• Do state any surcharge as prominently as the prices.
• Don't call anything allergen-free from a shared kitchen.
• Don't use chilli for anything except allergens and dishes people can't have.
• Don't put text on saffron unless it's ink.

Accessibility

• AA contrast throughout (measured above), a skip link and a 3px focus ring.
• Floor plan: every table or seat is a focusable button with a full label ("Table 4, 4 seats, by the window") and a pressed state. Taken tables and tables that don't fit say so, and Enter or Space picks. The party size has labelled buttons and announces the count politely, the times are buttons that say when nothing is free, and the summary is announced politely.
• Menu: the filter chips are toggle buttons. Each dish's flags and allergens are text, and the count is announced politely. The surcharge switch is a real switch.
• Forms: every field is labelled, errors are marked with aria-invalid, and an alert says what's missing.
• Testing: responsive to 360px, and tested with motion on and off, in Lunch and Dinner.

How to make it yours