Bill of Fare

Display — Fraunces (Google Fonts, OFL) — variable, used at `font-variation-settings: 'opsz' 144, 'SOFT' 0, 'WONK' 0` for display and `'opsz' 24, 'SOFT' 0, 'WONK' 0` for section heads. WONK is pinned to 0 on purpose: the wonky axis is what makes Fraunces read as 2022 startup-editorial. At WONK 0 / SOFT 0 with the 144 optical size it draws as a crisp Scotch Roman with high stroke contrast and sharp bracketed serifs — a book face, not a brand face. Mobile display drops to `'opsz' 48`, which genuinely re-draws the letter (thicker hairlines, more open counters) instead of just scaling it down.

Body — IBM Plex Sans (Google Fonts, OFL) for all body copy, controls, labels and form fields, with IBM Plex Mono — its own superfamily sibling, so this is one type relationship rather than a third unrelated voice — reserved strictly for numerals and metadata: prices, per-person amounts, guest counts, folios, plate numbers, running heads, timestamps. Plex Sans body runs `font-feature-settings: 'tnum' 1` so figures inside prose align to the same rhythm as the mono column.

The brief demands editorial serif headlines plus an exceptionally readable sans, and the printed-book thesis demands that numbers set like a ledger. Fraunces at WONK 0 gives authority without reaching for Playfair Display, which is the default luxury-template serif and is therefore prohibited here. Plex Sans is warm-humanist rather than neutral-grotesque (Inter would make the estimator read like a SaaS dashboard, which is exactly the Apple-cosplay failure mode), it is genuinely excellent at 15px on a 390px screen, and its mono sibling makes the dot-leader price column align to the pixel without a table. Three weights ship: Fraunces 400/500, Plex Sans 400/500, Plex Mono 400 — subset to latin, `font-display: swap`, self-hosted woff2, roughly 96KB total.

A printer's device, not a coat of arms — the marks Renaissance printers stamped on a title page. The mark is a single versal capital C, drawn as one stroke of even 8-unit weight on a 120-unit grid, its two terminals cut flat at 15° (the same angle every hairline terminal on the site is cut). The C sits inside an upright oval keyline of 2 units. One horizontal hairline crosses the counter of the C and extends past the oval on both sides, breaking the frame — that hairline is the site's spine rule, so the logo is literally the same device the layout is built from. The aperture of the C is closed by three short strokes of decreasing length (34, 24, 14 units) fanning up and right: at seal size they read as flame over a hearth mouth; at 16px they read as a printer's ornament. The whole mark is built from three primitives — arch, rule, notch — and those same three primitives generate the seven category ideograms used in the placeholder plates, so the icon family is the crest's own alphabet. Reductions: FULL SEAL = oval + C + crossing rule + notches + 'CHARTIER · CATERING · COLORADO' set in Plex Mono small caps around the lower oval. MONOGRAM = a CC ligature where the second C's flat terminal butts the first's, sharing one cut; used in the header at 28px and as the PDF letterhead mark. FAVICON (16px) = drop the oval and the wordmark, keep the C and the three notches, stroke weight raised to 12 units so it survives; the crossing rule is dropped because a 1px rule dies at 16px. ONE-COLOUR STAMP / EMBOSS = all strokes at uniform weight, no fills anywhere in the mark by construction, so it debosses on paper, foils in gold, prints in oxblood on an invoice, and knocks out white on the colophon without a second artwork file. Ships as one SVG with a `data-variant` attribute switching between seal/monogram/mark; `currentColor` throughout.

A title page. 100dvh of `--paper`, no image, no video, no dark scrim, nothing to load. The page grid is literal: `grid-template-columns: minmax(1rem,1fr) [marg] minmax(0,10rem) [spine] 1px [text] minmax(0,42rem) minmax(1rem,1fr)` — the gold spine is a real 1px column, so it can never drift between routes, and every heading hangs in the marginal column to its left while every line of prose starts to its right. Top of the viewport: a running head in Plex Mono 11px / +0.18em / `--gold-ink` reading `CHARTIER CATERING — DENVER, COLORADO — BILL OF FARE`, under a full-measure `--rule-faint` hairline. Then roughly 16vh of empty paper, which is the single most expensive element on the page and is not negotiable. Then the display line in Fraunces `opsz 144`, `clamp(3.25rem, 8.6vw, 8rem)`, line-height 0.92, tracking -0.02em, `--ink`, ragged right, broken deliberately across three lines with the third indented to the spine: 'Cooked by one family, / for one table / at a time.' Beneath it a full-measure 1px `--rule-gold` — the only gold on the screen. Below the rule, hanging in the margin: the folio `I.` in Plex Mono `--gold-ink`. In the text column beside it: two sentences of standfirst, Plex Sans 18/1.6 `--ink-muted`, max 62ch, naming Colorado, staffed buffet service, and a 50-guest minimum in plain words. Then 6rem of paper, then the actions, set as editorial links rather than buttons: 'Build your menu' in Fraunces 24px with a 1px `--ink` underline that thickens to 2px `--oxblood` on hover and focus-visible, a hairline-drawn `→` after it; below it, 'Request a consultation' at 17px in Plex Sans with a `--rule-faint` underline. Pinned to the bottom margin: the imprint line in Plex Mono 10px — 'Estd. by Robert Chartier · Rough estimates, never priced offers · Set in Fraunces & IBM Plex' — and the folio 'page 1' at the right. No scroll cue, no bouncing chevron: the spine rule's drawn length is the scroll indicator, and it is already visible. On mobile the marginal column collapses, the spine becomes a 12px left inset rule running the full document, the running head and folio stack above the display line as one mono row, and the display drops to `opsz 48` at `clamp(2.5rem, 11vw, 3.5rem)`. The hero's honesty is structural: it needs no photograph now and will not be redesigned when photographs arrive, because photographs were never its job.

There are no cards. A dish is an ENTRY in a bill of fare, and the family is a single row type used identically on /menus, /build and the PDF. One entry: in the marginal column, the plate number (`XII`) and the category in Plex Mono 10px `--gold-ink`. In the text column, line one is the dish name in Fraunces 20px `--ink`, followed by a dot leader — a `flex:1` span with `border-bottom: 1px dotted var(--rule-faint)` sitting on the baseline — running to the price in Plex Mono tabular, `--ink`, right-aligned to the measure, always suffixed '/ guest'. Line two is one sentence of description, Plex Sans 15/1.55 `--ink-muted`, clamped to 2 lines at 58ch. Line three is dietary tags as letterspaced small caps in `--gold-ink` — 'VEGETARIAN · GLUTEN-FREE' — not pills, because a pill is a card in miniature. Entries are separated by a single `--rule-faint` hairline edge to edge. No image is shown by default: on desktop, hover or keyboard focus reveals the dish's plate at 96px in the marginal column (opacity only, no layout change); on mobile, tapping the row's caret expands it inline to reveal a 3:2 plate plus holding notes and pairings. That is the progressive-disclosure answer — you read a menu, you don't scroll a photo wall. THE 150-ITEM ANSWER is that a list is the only form that gets better with volume. An entry is ~76px tall against a card's ~320px, so 150 entries are a browsable index rather than an endless grid, and the page gains the apparatus of a real set book: sticky section heads with a count ('ENTRÉES · 30'), a running head that updates as you pass through a section, a printed thumb index down the right edge (categories as vertical small caps against a hairline, the way a dictionary is thumbed) that is a real anchor list and keyboard-navigable, and a persistent 'Your selections' recto. Curation is built into the form, not bolted on: every category opens with 'Robert's four' — four entries typographically promoted to Fraunces 28px with their plates shown by default and a one-line reason in italic — followed by a `--rule-gold` hairline and then the full list at standard density. Hierarchy, curation and guided decision-making are therefore structural properties of the page, which is exactly what the card-warehouse failure mode lacks. The same entry row, unstyled to two colours, is what prints in the customer estimate PDF, so the artefact the customer keeps is the artefact they built.

STEP 4 — CHOOSE DISHES, designed at 390px first and derived upward. `data-testid="estimator-root"` wraps the page; the list is `data-testid="dish-grid"` and is a `<ul>` of entries, not a grid, despite the pinned harness name. TOP, fixed, 44px, `--paper` with a bottom `--rule-faint`: left, `IV · CHOOSE DISHES` in Plex Mono 11px `--gold-ink`; right, progress as five 10px hairline dashes, filled ones `--ink`, unfilled `--rule-faint`, wrapped in `role="progressbar"` with `aria-valuenow`/`aria-valuetext="Step 4 of 5"`. When a draft exists the left slot appends `· DRAFT SAVED 14:22` — the saved-draft state is a line of running head, not a toast. BELOW: a horizontally scrollable category strip in small caps, active item marked by a 2px `--ink` underline (no pill, no fill), `scroll-snap` per item. Then search: no box, just a 44px-tall field with a 1px `--ink` bottom rule, Plex Mono placeholder 'Search 12 dishes'; on focus the rule becomes 2px `--oxblood` and the label rises to 11px above it. Then the entry list described in the menu-card family, at 76–88px per row with a 48px minimum tap target. SELECTION IS A MARGINAL MARK — the gesture of someone marking a printed menu with a pen. Selecting a dish paints a 3px `--oxblood` bar in the left margin beside the row, shifts the dish name from 400 to 500 weight, moves the price from `--ink-muted` to `--ink`, and replaces the dot leader with the word 'SELECTED' in small caps. Four redundant channels — colour, position, weight, text — so it survives greyscale, low vision and a screen reader (`aria-pressed`, and the row is a `<button>` wrapping the whole entry). BOTTOM, sticky, 72px + `env(safe-area-inset-bottom)`, `--paper-stock-2` with a top `--rule-gold`, `data-testid="selection-summary"`: left, `6 dishes · $41.20 / guest` in Plex Mono tabular; right, 'Review' as a ruled text action. The list carries 72px of bottom padding equal to the bar, so the bar never covers content — the blueprint's requirement, satisfied by arithmetic rather than by hope. Tapping 'Review' raises a 60vh sheet (never full-screen, so context is never lost) containing the chosen dishes as dot-leader lines with prices, the standard buffet service line kept visibly separate, the total per person, and `data-testid="estimate-disclaimer"` carrying 'Preliminary Catering Estimate' and the exclusions list. STATES, all designed: EMPTY — 'No dishes chosen yet. Your bill of fare begins on the next line.' above one genuinely empty ruled leader line, which is beautiful and honest. LOADING — three un-inked ruled lines pulsing opacity 0.55→1 at 1.4s; the page looks like paper waiting to be set, never a grey blob skeleton. DIETARY CONFLICT — beneath the row, an inline note with a 1px `--oxblood` left rule: 'Not compatible with a dairy-free event — contains dairy', plus a 'Show anyway, with the reason' text link, satisfying the show-unavailable requirement. 1–49 GUESTS — a ruled panel: 'Your 32 guests, priced on our 50-guest minimum. A consultation may produce a lower custom arrangement.' with both numbers shown. 151+ — a panel with a `--oxblood` top rule; the event total renders as an em dash with 'Custom pricing required — beyond our validated range', while every dish-level reference price stays fully visible and the price is never struck through. ERROR — 'This step didn't save. Your selections are still on this device.' with a ruled 'Try again'. SUCCESS — the running head folio advances and the sheet becomes the printed estimate. DESKTOP is derived, not primary: the same single 620px column of entries, with the summary relocated out of the sticky bar into the right margin as a sticky printed docket — same content, same type, no overlay, no second design.

The phone gets a POCKET EDITION — the same book, re-set for a narrow measure, with the desktop layout derived from it rather than the reverse. Concretely: (1) THE SPINE MIGRATES INSTEAD OF DISAPPEARING. Desktop's `[marg] 10rem [spine] 1px [text]` grid collapses to `12px 1px 1fr`; the gold spine survives as a full-document left inset rule, and the marginalia that hung beside it — folio, category, plate number — re-set as a single Plex Mono line above each block. The signature device is intact at 390px, which is what stops this being a squeezed desktop. (2) THE TYPE IS RE-DRAWN, NOT SCALED. Fraunces moves from `opsz 144` to `opsz 48`, a real change in letterform — thicker hairlines, more open counters, shorter extenders — because a 144-optical display face at 32px goes spindly and cheap on a phone screen. Measure targets 38–42 characters on mobile against 62–66 on desktop, achieved through `clamp()` on size and a 20px page margin, so the text block keeps genuine gutters instead of running to the bezel. (3) THE ESTIMATOR IS THE CANONICAL LAYOUT. The single 620px column of entries plus a sticky 72px summary IS the design; desktop simply moves that summary into the right margin as a printed docket. Nothing on the phone is a fallback for something better. (4) THUMB ECONOMY. Every action lives in the bottom 40%: the summary bar, 'Review', 'Next'. The top 44px bar is informational only and is never tappable except for a 48px back target. Entries are 76–88px with a 48px minimum hit area, and the whole row is the target, not a 20px checkbox. (5) REAL DEVICE BEHAVIOUR IS DESIGNED, NOT DISCOVERED. All inputs are 16px+ to defeat iOS zoom; guest count is `inputmode="numeric" pattern="[0-9]*"`; the date field is native; `env(safe-area-inset-bottom)` pads the sticky bar above the home indicator; a `visualViewport` listener hides the sticky bar while the soft keyboard is open so it can never sit on top of the field being filled; `scroll-margin-top: 60px` on every section keeps anchor jumps clear of the running head; `overscroll-behavior: contain` on the review sheet stops the page scrolling behind it. (6) BUTTONS CHANGE FORM, NOT LANGUAGE. Desktop's ruled editorial links become full-width 56px keyline blocks — 1px `--ink` border, `--paper` fill, square corners, no shadow — which still read as printed coupons rather than app chrome. (7) WEIGHT. The homepage on a phone is type, rules and one SVG crest: no hero image, no video, no icon font, ~96KB of subset webfonts and no third-party script. The cheapest page to load is also the most expensive-looking one, which is the whole argument of this direction.

THE RULE DRAWS. A single 1px `--rule-gold` element occupies a real 1px grid column running the full height of the document — the spine. As you scroll, it draws downward: `transform-origin: top; transform: scaleY(var(--p))` where `--p` is scroll progress, set by one rAF-throttled scroll listener (or `animation-timeline: scroll()` where supported, with the listener as fallback). Each section's opening horizontal rule draws left-to-right on entry via IntersectionObserver: `scaleX 0→1`, 420ms, `cubic-bezier(.2,.7,.2,1)`, staggered 60ms behind its small-caps eyebrow fading 0→1. The effect is that the page appears to be typeset as you read it — a compositor setting the bill of fare a rule at a time. It touches only `transform` and `opacity` on 1px elements, so it is compositor-only, cannot shift layout, and holds 60fps on a mid-range Android because there is nothing to repaint. The estimator inherits the same grammar at micro scale: when the running total changes, a 2px oxblood underline draws under the numeral (scaleX 0→1, 180ms) and the numeral itself crossfades at 120ms — never a count-up, because a count-up delays reading the price, and the price is the product. REDUCED MOTION (`@media (prefers-reduced-motion: reduce)`): every rule renders at scale 1 on first paint, the underline appears instantly, the numeral swaps with no fade, and the flambé plate freezes to its poster frame. Zero information is lost because the rules never carried any: scroll position is stated in text by the running head ('BILL OF FARE — ENTRÉES — XII of XXX') and the folio, estimator progress is stated by five hairline dashes whose filled/unfilled state is a static style plus `aria-valuenow`, the total is a number you can read either way, and the flambé narrative lives in the plate's printed caption, not in the frames. The reduced-motion build is the same page, already typeset.

THE PLATE — a book's tipped-in illustration plate, empty and saying so. Fixed 3:2 aspect. Fill `--plate-tint` with a zero-byte CSS laid-paper grain: `repeating-linear-gradient(0deg, rgba(26,23,20,.035) 0 1px, transparent 1px 3px)` composited with the same at 90deg at .02 opacity, so it reads as paper stock rather than an empty div. Inset 8px sits the classic printed double frame: a 1px `--rule-gold` keyline, a 3px gap, a 1px `--rule-faint` keyline. Centred at 20% of the plate width, one of exactly SEVEN category ideograms — entrée, starch, vegetable, appetizer, salad, bread, dessert — drawn at 1.25px stroke in `--gold-ink` at 60% opacity, each built only from the crest's three primitives (arch, rule, notch), so the icon family and the logo are provably the same hand. Inside the keyline, bottom left: `PLATE XII` in Plex Mono 10px. Bottom right: `PHOTOGRAPH PENDING` in Plex Mono 10px `--ink-muted`. Below the frame, outside it, a real book caption in Fraunces italic 13px `--ink-muted`: 'Chicken Parmesan — placeholder plate; no photograph has been supplied by the kitchen.' The `alt` text is that same sentence, so the honesty is identical to sighted and screen-reader users, and no image ever claims to depict a dish it does not depict. WHY IT HOLDS AT 150: it is one composition multiplied by seven marks, not 150 illustrations, so the full contact sheet reads as a designed plate list in a single book — the exact opposite of the AI-collage failure, since there is no lighting, no plating, no camera angle and no ingredient to be inconsistent about. Per-dish differentiation comes only from the caption and the Roman plate number, which is variation the system can absorb infinitely. Density discipline keeps it from becoming wallpaper: plates are hidden by default in browse contexts and revealed on hover, focus or tap, so a 150-item page shows at most one or two at a time. AND CRITICALLY, THE FRAME OUTLIVES THE PLACEHOLDER: when Robert's photography arrives, the photograph goes inside the same double keyline, in the same 3:2, with the same caption slot and the same plate number — the placeholder is a frame with nothing in it yet, not a thing that must be torn out. Migration is a `provenance` switch from `placeholder` to `owner_photo` in the dish record; the layout does not move by one pixel, and the art direction was never contingent on the photograph being good.

Strip the crest and six things still say Chartier. (1) THE SPINE. A 1px antique-gold rule occupying a real grid column at the same x-position on every route, from the title page through the estimator to the printed estimate, with headings hanging left of it and prose starting right of it. Nobody arrives at a persistent vertical hairline by accident, and once it is there every page is visibly the same document. (2) DOT LEADERS AS THE PRIMARY STRUCTURE. Dish name … price, on a ruled line, is the atom of this site — there is no card anywhere, and the absence is enforced by the tokens themselves (no radius, no shadow, no elevation scale). A competitor copying the palette gets ivory and gold; they do not get a site with no cards in it, because removing cards means rebuilding the information architecture around a measure. (3) THE MARGINAL SELECTION MARK. Choosing a dish paints a 3px oxblood bar in the margin and shifts the name half a weight — the gesture of a person marking a printed menu with a pen. It is the single most-repeated interaction in the product and it looks like nothing else in catering software. (4) APPARATUS. Running heads, folios in Roman numerals, plate numbers, a thumb index, an imprint line, a colophon in the footer. Book furniture used honestly, not as decoration — it also happens to solve wayfinding at 150 items, which is why it survives review. (5) IT IS DEFINED BY WHAT IT REFUSES, AND THE REFUSALS ARE EXPENSIVE. No hero photograph, no dark luxury, no gold fills, no motion that moves content, one dark surface per page. A direction can be cloned; a discipline has to be maintained on every screen, and the first lazy card, pill or gradient visibly breaks it. (6) THE ARGUMENT IT SETTLES. Every other caterer reaches for black, gold, serif and a glowing plate. This one is a warm ivory page with a hairline, and it feels more expensive because restraint at this density reads as confidence — a small family kitchen that does not need to shout, which is the truthful positioning for Robert. And it is the only one of the three directions that is genuinely stronger with zero photography today and unchanged in layout when the photography finally arrives.