Restaurant menu page

Build brief for a coding agent. Rebuild this piece in the reader’s stack. If they haven’t said which stack, ask once, then default to semantic HTML + CSS + a little vanilla JS. Match the numbers below; don’t “improve” them.

What it is

The menu page of a fictional Norwich bistro, Lanterne. It looks like a riso-printed menu card: cream paper with a fine dot grain, an oxblood band at the top, mustard used as a second ink, and a 136px condensed serif name printed slightly off-register. Type for everything else is a typewriter mono. Under the hero, a category bar sticks to the top and follows your scroll. Dishes sit in two columns with dotted leaders running to the price, the way a printed menu does. The detail worth copying is the leader: a flex spacer with a dotted bottom border, so prices line up on the right at every width without a table.

Reference behaviour

1. First frame at 1280×800: 56px oxblood top bar, the hero band (name, today’s hours, address, Reserve a table), the category bar, and the first three rows of Small plates. Small plates is the current category.
2. The hero shows Open until 23:00 with a 10px mustard dot, then Saturday · kitchen 12:00–22:30, then 112 Carrow Street, Norwich NR1 2HQ.
3. Scroll down. When the category bar reaches the top it sticks there (top: 0). The current category follows the section under the bar: a section becomes current when its top passes 24px below the bar’s bottom edge. At the very bottom of the page, the last category (Drinks) is current.
4. Click a category. The page scrolls to that section (smooth unless reduced motion). The section heading lands 60px from the top, just under the bar. The category becomes current.
5. On narrow screens the bar scrolls sideways. When the current category changes, the bar scrolls so the current link sits in the middle.
6. Every dish row is: name (24px serif), a dotted leader, price (16px mono bold). Under it, one line of description in 13px mono and any dietary tags.
7. Dietary tags are small bordered text badges: V, VG, GF. Each is an abbr with a full-word title. A legend in the allergy note repeats what they mean.
8. The Grill section opens with one Chef’s pick: Whole grilled plaice, £26.00. It has a mustard tint, a 2px ink border, a 4px oxblood offset shadow, and an oxblood Chef's pick stamp tilted -2° over its top edge.
9. Click Reserve a table. A popover opens under the button (right-aligned on desktop, left-aligned under 820px) with a 220ms fade and 6px drop. Focus moves to the minus button.
10. In the popover: party size stepper (1–8, starts at 2; minus disables at 1, plus at 8), Date select (Sat 3 Oct first), Time select (19:30 selected), and Find a table.
11. Submit. No reload. A polite live line reads Held: 3 at 19:30, Sat 3 Oct. We will text to confirm. Any change clears it.
12. Esc closes the popover and returns focus to the button. A click outside closes it without moving focus. Clicking the button again closes it.
13. Reduced motion: no smooth scroll, no popover animation, transitions 1ms.

Structure

1280 × 800, content max 1280, side padding 56px
┌──────────────────────────────────────────────────────────────────────┐
│ Lanterne(italic 26)  MENU  WINE LIST  PRIVATE DINING  FIND US        │ 56 oxblood
├──────────────────────────────────────────────────────────────────────┤
│ BISTRO & WINE BAR · SINCE 2014                ─────────────────────── │
│                                               ● Open until 23:00      │
│ Lanterne.   (136px serif, mustard offset)     Saturday · kitchen …    │ hero ≈ 170
│                                               112 Carrow Street …     │ oxblood +
│                                               [ RESERVE A TABLE ]     │ halftone right
├──────────────────────────────────────────────────────────────────────┤
│ 01 SMALL PLATES | 02 GRILL | 03 SIDES | 04 DESSERTS | 05 DRINKS       │ 52 sticky, 2px ink rule
├──────────────────────────────────────────────────────────────────────┤
│ 01 Small plates (52px)                      Two or three per person   │
│ ──────────────────────────────────────────────────────────────────── │
│ Gildas ··························· £4.50  │ Burrata ··············· £9.00 │
│ Anchovy, guindilla pepper… [GF]           │ Blood orange… [V][GF]         │
│ … two columns, 56px gap, dashed row rules                             │
│ 02 Grill                                                              │
│ ┌ CHEF'S PICK ───────────────────────┐   Bavette, 250g ········ £22.00│
│ │ Whole grilled plaice ····· £26.00  │                                │
│ └────────────────────────────────────┘                                │
│ … Sides, Desserts, Drinks                                             │
│ [!] Allergies and intolerances … legend V / VG / GF                   │
└──────────────────────────────────────────────────────────────────────┘

• header.top holds the wordmark link and nav aria-label="Primary". Menu is aria-current="page".
• section.hero is labelled by the h1. Its inner grid is minmax(0,1fr) 340px, gap 40px, align-items: end, padding 28px top and 34px bottom.
• The booking block is a div.bk (position relative) with the trigger button and the popover div role="dialog".
• nav.cats aria-label="Menu sections" is a sibling of the hero, so it sticks across the whole page. It holds a ul of five anchor links.
• main holds five section.menu elements, each with id, scroll-margin-top: 60px, and an h2. Dishes are li.it in a ul.items grid with an h3 name.
• The allergy note is an aside at the end of main.

Tokens

:root {
  --cream: #f2e6cf;      /* page paper */
  --paper: #f8efdc;      /* category bar, popover, note */
  --ox: #6b1e23;         /* oxblood: bands, headings, tags, focus on cream */
  --ox-2: #86292f;       /* oxblood hover */
  --ink: #2a1a17;        /* text, rules, offset shadows */
  --ink-2: #5b4440;      /* descriptions, labels */
  --mustard: #d79b22;    /* second ink: misregister, CTA, dot, halftone, focus on oxblood */
  --mustard-t: #f0d79a;  /* Chef's pick fill, eyebrow on oxblood */
  --rule: #d8c6a6;       /* section and row rules */

  --display: "Instrument Serif", Georgia, serif;
  --mono: "Courier Prime", "Courier New", monospace;

  --fs-10: 10px; --fs-11: 11px; --fs-12: 12px; --fs-13: 13px; --fs-15: 15px; --fs-16: 16px;
  --fs-22: 22px; --fs-24: 24px; --fs-30: 30px; --fs-52: 52px; --fs-136: 136px;

  --s-4: 4px; --s-8: 8px; --s-16: 16px; --s-24: 24px; --s-40: 40px; --s-56: 56px;

  --r: 3px;
  --offset-sm: 3px 3px 0 var(--ink);   /* CTA */
  --offset-md: 4px 4px 0 var(--ox);    /* Chef's pick */
  --offset-lg: 6px 6px 0 var(--ox);    /* popover */
  --t-micro: 150ms; --t-pop: 220ms;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

Grain: background: var(--cream) radial-gradient(rgba(107,30,35,.07) .7px, transparent .8px) 0 0 / 4px 4px on body.

Halftone: a ::before on the hero, right-aligned, 520px wide, full height, with radial-gradient(var(--mustard) 1.6px, transparent 1.9px) 0 0 / 9px 9px, masked by a radial fade, opacity 0.55.

Typography

Role	Family	Size	Weight	Line-height	Tracking	Case
Name h1	Instrument Serif	136px	400	0.86	-0.02em	Title, mustard shadow 4px 3px
Open line	Instrument Serif	30px	400	1	0	Sentence
Section h2	Instrument Serif	52px	400	1	0	Sentence, --ox
Dish h3	Instrument Serif	24px	400	1.15	0	Sentence
Popover title	Instrument Serif	30px	400	1	0	Sentence
Body	Courier Prime	15px	400	1.55	0	Sentence
Description	Courier Prime	13px	400	1.55	0	Sentence, max 44ch
Price	Courier Prime	16px	700	1	0	£0.00
Category link	Courier Prime	13px	400, current 700	1	0.1em	UPPER
Eyebrow, labels	Courier Prime	11–12px	400	1.4	0.14–0.18em	UPPER
Tag badge	Courier Prime	10px	700	16px	0.06em	UPPER

Always print prices with two decimals so the leaders end at the same visual width. The serif is display only; never set a description in it.

Motion

Thing	Trigger	Property	From → to	Duration	Easing	Reduced motion
Popover	open	opacity, transform	0, translateY(-6px) scale(.98) → 1, none	220ms	--ease	none
Category jump	link click	scroll position	current → section	browser smooth	native	instant
Current category	scroll	color, border-bottom-color	ink-2, transparent → ink, oxblood	150ms	--ease	1ms
CTA hover	pointer	transform, box-shadow	0, 3px → -1px, 4px	150ms	--ease	1ms
CTA press	active	transform, box-shadow	→ 2px, 1px	150ms	--ease	1ms

The press looks like a stamp pushed into paper: the button moves toward its shadow. Do not add a loop, a marquee, or a reveal on the dish rows.

States

• Category link resting: --ink-2, 4px transparent bottom border. Hover: --ink. Current: aria-current="true", --ink, weight 700, 4px oxblood bottom border that overlaps the bar’s 2px rule (margin-bottom: -2px).
• CTA resting: mustard fill, ink text, 3px ink offset shadow. Hover lifts 1px. Active presses 2px.
• Popover closed: hidden. Open: visible, trigger aria-expanded="true".
• Stepper at 1: minus disabled, opacity 0.35. At 8: plus disabled.
• Find a table hover: --ox-2.
• Confirmation: 13px ink line under the button. Cleared on any change.
• Chef’s pick: mustard-tint card, 2px ink border, oxblood offset, stamp. Its leader turns ink, not ink-2.
• Focus-visible: 2px outline, offset 2px. Oxblood on cream areas, mustard inside the oxblood bands. Set it with a --focus variable per region.

Accessibility

• One h1 (the name). Each menu section is labelled by its h2. Dish names are h3.
• The category bar is a nav with a label. The current link has aria-current="true" (a location in the page, not a new page).
• Dietary badges are abbr elements with title="Vegetarian", "Vegan", "Gluten free". The legend spells them out as plain text, so meaning is not hover-only.
• The trigger has aria-haspopup="dialog", aria-expanded, and aria-controls pointing to the popover.
• The popover has role="dialog" and aria-labelledby on its title. It is not modal: the page behind stays usable, so no focus trap. Esc closes it and returns focus to the trigger.
• The stepper is a role="group" labelled Party size. The buttons are Fewer guests and More guests. The count is an output with aria-live="polite".
• The booking result line is aria-live="polite".
• The open dot is decorative and aria-hidden; the words say Open.
• Contrast: cream on oxblood is about 10:1. Ink on cream about 14:1. #5b4440 on cream passes 7:1. Mustard is never used for small text on cream; on oxblood the eyebrow uses the lighter #f0d79a.
• Hit targets: category links 52px tall, stepper buttons 44px, selects 44px, CTA 46px.

Responsive rules

• ≥1280: as drawn. Padding 56px. Hero grid minmax(0,1fr) 340px. Two dish columns, 56px gap.
• 1024 (max-width 1100px): padding 40px. Name 112px. Hero right column 300px. Dish gap 36px.
• 768 (max-width 820px): top-bar links hide; the wordmark stays. Hero stacks: name, then the today block. Name 96px. One dish column. Popover aligns to the left edge of the button.
• <640: padding 18px. Name 72px with a 3px 2px shadow. Section headings 40px; their side note hides. Category bar padding 8px, links 48px tall and 12px side padding, scrolling sideways with no visible scrollbar. Dish names 21px. Popover width min(320px, 100vw - 36px).
• Never scroll the page sideways at 390px. Only the category bar may scroll on the x axis.

Acceptance checklist

Always

• The category bar is a sibling of the hero and sticks at top: 0 for the whole page.
• Exactly one category is current; it changes as sections pass under the bar, and the last one is current at the page end.
• Section anchors use scroll-margin-top so headings land under the bar, not behind it.
• Every price is right-aligned by a dotted leader that fills the remaining width.
• Dietary tags are text badges with full-word titles, plus a legend in text.
• One highlighted dish per menu, with a stamp label.
• The booking popover opens from the trigger, moves focus inside, closes on Esc (focus back to trigger) and on outside click.
• Party size is clamped with disabled ends.
• body uses min-height: 100%, not a fixed height, or sticky stops after one screen.
• No horizontal page scroll at 390px.

This demo

• The name is Lanterne. at 136px with a 4px 3px mustard shadow.
• Hero reads Open until 23:00, Saturday · kitchen 12:00–22:30, 112 Carrow Street, Norwich NR1 2HQ.
• Categories are numbered 01–05: Small plates, Grill, Sides, Desserts, Drinks.
• Chef’s pick is Whole grilled plaice at £26.00.
• Popover starts at 2 guests, Sat 3 Oct, 19:30.

Implementation notes

1. Dotted leaders. Use flex with a growing spacer. Nudge the spacer up so the dots sit near the baseline of the name, not under the descenders.

.row { display: flex; align-items: baseline; gap: 8px; }
.row h3 { margin: 0; font: 400 24px/1.15 var(--display); }
.lead {
  flex: 1; min-width: 16px;
  border-bottom: 2px dotted var(--ink-2);
  transform: translateY(-5px);
}
.pr { font: 700 16px var(--mono); }

Do not fill the gap with a string of . characters. It breaks at every width and is read aloud.

2. Scrollspy. Measure on scroll inside requestAnimationFrame. Compare each section’s top to the bar’s bottom edge. Only touch the DOM when the current index changes.

function spy() {
  const y = bar.getBoundingClientRect().bottom + 24;
  let cur = 0;
  sections.forEach((s, i) => { if (s.getBoundingClientRect().top <= y) cur = i; });
  if (innerHeight + scrollY >= document.documentElement.scrollHeight - 2) cur = sections.length - 1;
  if (links[cur].getAttribute('aria-current') === 'true') return;
  links.forEach((a, i) => a.setAttribute('aria-current', i === cur ? 'true' : 'false'));
  const ul = bar.querySelector('ul'), a = links[cur];
  ul.scrollLeft = a.offsetLeft - (ul.clientWidth - a.offsetWidth) / 2;
}
let tick = false;
addEventListener('scroll', () => {
  if (!tick) { tick = true; requestAnimationFrame(() => { spy(); tick = false; }); }
}, { passive: true });

The bottom-of-page rule matters: a short last section can never reach the bar, so without it Drinks is never current.

3. Off-register name and halftone. The riso feel is two inks slightly out of line. One text shadow does it. Keep the halftone in a ::before that stays inside the hero box, so the hero does not need overflow: hidden (which would clip the popover).

h1 { font: 400 136px/.86 var(--display); color: var(--cream);
     text-shadow: 4px 3px 0 var(--mustard); }
.hero { position: relative; background: var(--ox); }
.hero::before {
  content: ""; position: absolute; right: 0; top: 0;
  width: min(520px, 100%); height: 100%; pointer-events: none; opacity: .55;
  background: radial-gradient(var(--mustard) 1.6px, transparent 1.9px) 0 0 / 9px 9px;
  mask: radial-gradient(closest-side, #000, transparent);
}

Common mistakes:

• overflow: hidden on the hero. The popover is clipped at the hero’s bottom edge.
• html, body { height: 100% } left as is. The sticky bar scrolls away after 800px.
• Putting the category bar inside the hero or inside main’s first section. Sticky only works inside its parent.
• Emoji or leaf icons for vegan. Use text badges.
• A drop shadow with blur. Every shadow here is a hard offset, like a misprinted second ink.
• Mustard text on cream. It fails contrast. Mustard is a fill and a shadow only.
• A modal for booking. This is a small non-modal popover.
• Prices without decimals next to prices with decimals.

Rebuild order:

1. Set tokens, grain, and the top bar.
2. Build the hero with the halftone and the off-register name.
3. Add the sticky category bar after the hero.
4. Build one section with the leader rows, then copy for all five.
5. Add the Chef’s pick card and the allergy note.
6. Wire scrollspy.
7. Build the popover and its keyboard rules.
8. Check 1024, 768 and 390.