Drawn to Spec

Display — Fraunces (Google Fonts, OFL, variable — used with WONK=1 and SOFT=0 at display sizes, opsz tracking the actual size)

Body — IBM Plex Sans (Google Fonts, OFL)

Fraunces is a punch-cut-feeling old-style with real optical and WONK axes, so headlines carry letterpress bite and hand-cut irregularity instead of the Playfair/Cormorant 'luxury template' signature the blueprint rejects; its optical-size axis lets 14px running heads and 88px hero lines belong to the same cut. IBM Plex Sans is the specification face — engineered, generous x-height, unmistakably not Inter, and its family gives me the two support faces the thesis needs for free: IBM Plex Mono carries EVERY measured value (oz, lb, hours, folio numbers, and all currency, tabular-lining, right-aligned on the decimal like a real ledger column), and Kalam (Google Fonts, OFL, 300/400/700 — a natural pressure-varying pen, not a marker or a novelty script) carries Robert's marginalia. Three-face split is the whole warmth argument: Fraunces states, Plex measures, Kalam speaks. Fluid scale is baseline-locked to the 28px desktop / 24px mobile lattice, so every line-height is an exact multiple and the ruled grid never drifts.

\"The Struck Cartouche\" — a maker's mark stamped inside the cover of a working book, not a shield. An original hand-cut rectangle with clipped corners (the silhouette of a letterpress slug / a stamped ingot). Inside it, two interlocking elements: a C drawn as one unclosed stroke that thickens and terminates in a fine point, reading simultaneously as the letter, as the bowl of a ladle, and as the lip of a chafing lid; and bisecting it a horizontal rule with two terminal serifs — the ledger rule — which doubles as the ladle's handle line and as the equals-bar of a balanced account. Three short vertical tally ticks sit above the rule: the measure, deliberately not a flame. Everything is one stroke weight, so it survives at any size in one colour. Reductions: FULL SEAL = cartouche inside a ring bearing CHARTIER CATERING · COLORADO · EST. with a blank ruled date panel where the year goes — it ships blank because Robert has not supplied one, and ledger honesty as identity is the point. MONOGRAM = cartouche alone, 32–64px. FAVICON 16px = solid oxblood slug with the rule knocked out in stock; reads as a distinct bar-through-block silhouette at tab size. ONE-COLOUR STAMP = works as oxblood-on-stock, gold-foil-on-night, or blind emboss (ink at 0 with a 1px offset rule). PDF MARK = seal blind-debossed at the head of the estimate, with the required oxblood cancellation stamp struck across the folio beside it.

Full viewport on night (#15120F) — the closed ledger, leather-dark — carrying the inverted lattice in night-rule so it still reads as ruled paper seen edge-on, never as a black slab. Composition is a two-page ledger spread, not a centred stack. LEFT 58%: the single h1 in Fraunces at clamp(2.75rem, 7vw, 5.5rem), maximum three lines, ranged left, baseline-locked to the lattice, in stock ivory; beneath it one Plex Sans sentence at 18px/ink-soft-inverted stating what the company actually is. RIGHT 42%: the sauté-pan plate diagram in stock-at-85% linework inside its tick-marked rim, with three leader lines running left INTO the type column's margin, where three Kalam annotations sit on the oxblood margin rule in Robert's first person. BOTTOM, exactly one lattice unit above the viewport edge: a running foot — hairline rule, then in 12px Plex Mono letterspaced 0.14em, CHARTIER CATERING · STAFFED BUFFET · COLORADO · FOLIO 01, and the two CTAs as stamped buttons (2px radius max, oxblood fill, 1px ivory inset at the top edge for letterpress bite): \"Build your menu\" and \"Request a consultation\". No glass, no blur, no gradient, no scrim over an image because there is no image. One idea per viewport: statement, drawing, foot. On scroll out, the night ground turns to stock — the page literally opens — as a vertical wipe led by a 2px ink rule tied to scroll progress; under prefers-reduced-motion this is a hard cut at the section boundary with identical colours and identical content.

Two units, and the switch between them is the anti-warehouse rule: CARDS WHERE THERE ARE FEW, LEDGER WHERE THERE ARE MANY — cards above ~24 items are banned outright. (1) THE BILL OF FARE, used for the 14 presets on /menus, where 14 tall paper cards read as a menu book rather than a grid: stock ground, 2px radius, no shadow — separation comes from a 1px ink rule and the stock-deep gutter between them; preset name in Fraunces 28px, a full-width rule, the composed dishes as a ruled Plex Sans list with dot leaders, and the indicative per-person figure in Plex Mono at the foot on its own double-ruled line, with an oxblood \"UNAPPROVED · INDICATIVE\" stamp rotated -3.5° across the corner because Robert has approved none of them. (2) THE LEDGER ROW, the default for the 150-dish catalog and the estimator: one dish = one row on the lattice, 56px mobile / 64px desktop — [28px drawn plate glyph, single stroke, no rim] [name in Fraunces 17px] [dietary state as three tiny ink marks] [per-person figure in Plex Mono, right-aligned on the decimal] [20px tick box in a 44px hit area]. Every fifth row bands in stock-deep, so 150 rows scan the way an accountant's book scans — the eye counts in fives. Category running heads stick to the top with a 2px ink rule and a folio count (ENTRÉES · 30 / STARCHES · 40), so position is never lost in a long catalog. The SPEC CARD is the expanded state, opened in place, never a modal: full plate diagram left, description in Plex Sans, recipe facts in a ruled two-column table (portion 6 oz · hold 60 min · yield 50), allergens set as struck-through ink words, and Robert's note in Kalam in the margin. Curation lives above the ledger as editor's picks and pairing brackets, so the 150 arrive guided, not dumped.

STEP 4 — \"Folio 04 · Choose your dishes\", designed phone-first at 390px. TOP: a 44px sticky running head, hairline rule beneath — left \"FOLIO 04/06 · DISHES\", right \"× 80 GUESTS\" in Plex Mono. The progress model is a folio number, not a progress bar: persistent, quiet, costs 44px. BELOW: a 40px search-and-filter strip — the search is a ruled underline with an 11px Plex Mono label above it, no input box anywhere on this site; dietary filters are small ink-stamped rectangles that go outline → filled-checked when active. BODY: ledger rows under sticky category heads. When a protein is ticked, compatible dishes FLIP to the top in 260ms cubic-bezier(0.2,0,0,1), and the promotion is explained as a ledger correction, not as an animation: promoted rows get an oxblood bracket in the left margin rule plus a Kalam note — \"moved up — pairs with Chicken Parmesan\". Nothing unrelated is ever hidden. FOOT: the running ledger, 64px + env(safe-area-inset-bottom), sticky — \"7 dishes · $34.12 per person\" left, a stamped \"Review\" button right where a thumb lands. It never covers content because the scroll container reserves its height as bottom padding. Dragging or tapping it expands to a 60vh ruled tally: each dish with a dot leader to its figure, a ruled subtotal, the \"Standard buffet service\" line as its own single row per the pricing contract, then a double rule and the total, then the exclusions list. STATES, all designed: EMPTY = the tally rules are already drawn with the columns unfilled — an unwritten ledger page — plus one Kalam line, \"Start with a protein; the rest will sort itself.\" LOADING = rules draw first and content sets after, so skeletons are ruled lines rather than grey blobs, suppressed for the first 250ms so fast loads never flash. DIETARY CONFLICT = the dish is struck through with a fine oxblood rule and given a margin reason (\"contains dairy — whole-event dairy-free\"), aria-disabled with that reason in its accessible name; a \"show unavailable\" toggle controls whether struck rows render at all. OUT OF RANGE 151+ = an oxblood cancellation band across the total reading \"NOT DECISION-READY · CUSTOM PRICING\" while every dish-level figure stays fully legible. UNDER 50 = the actual count stays in the running head with a Kalam note that the 50-guest chargeable minimum is being applied and a consultation may produce a lower arrangement. SAVED DRAFT = a gold-leaf corner tab, \"Saved · 14:02\", and on return a Kalam line at the head, \"picked up where you left off.\" ERROR = an oxblood margin bracket and a plain sentence that stays on the page; never a toast that vanishes. Reduced motion: rows reorder with no transition, the bracket and the margin note still render — the reason for every change is text, so it survives.

The phone gets a different object, not a narrower one: the POCKET SPEC BOOK rather than the two-page ledger spread. (1) ANATOMY CHANGE, not a squeeze: desktop puts annotations in a left margin gutter riding the oxblood rule; the phone has no gutter, so annotations re-anatomise as indented Kalam lines directly beneath the thing they annotate, prefixed by a 12px drawn bracket glyph. Same content, same voice, different body plan. (2) The lattice re-pitches from 28px to 24px and the whole type scale rebases onto it, so baseline-locking survives — the ruled grid is never approximated on small screens. One column, always; there is no responsive two-column fallback to break. (3) THUMB GEOGRAPHY: everything that acts lives in the bottom quarter — the 64px running ledger, its drag-to-expand handle, and the Review stamp on the right. The sticky running head is informational only, with a single 44px back affordance. Ledger tick boxes sit on the ROW'S RIGHT EDGE (thumb side) with 44×44 hit areas around a 20px drawn box. (4) TABLES NEVER SCROLL SIDEWAYS: the tally becomes two-line rows on mobile — dish name on line one, figure right-aligned on line two joined by a real dotted leader (border-bottom: 1px dotted on a flex spacer). Dot leaders are the mobile-native ledger form and they are more legible on a phone than any horizontal table. (5) KEYBOARD: email and guest-count are ruled underlines with correct inputmode; the running ledger hides on visualViewport resize so the sticky tally never fights the keyboard, and scroll position plus any expanded spec card survive open/close. (6) TWO SPEEDS: tap expands a spec card in place, long-press peeks it as a bottom sheet — a gesture affordance the desktop layout does not have and does not need. (7) Safe areas, 16px minimum side margins that the lattice respects, and no hover-only information anywhere in the estimator.

\"The Ink Draw.\" The homepage hero's central artwork is a sauté pan in plan view, and it draws itself as you scroll the first viewport — SVG stroke-dashoffset scrubbed by scroll progress: the pan rim lays down, then the pan's contents, then three leader lines snap out to the margin annotations, which set one lattice rule at a time. At the end of the scrub the flame arcs in as a hand-drawn oxblood contour with gold-foil hatching — the ONLY colour event on the entire site, which is how this direction answers the flambé brief honestly with zero footage: the mechanism ships, the drawing is the poster frame, and Robert's video later dissolves in on the same scroll-scrub track at the same beat. Implementation: ~40 paths batched into 6 groups, one stroke-dashoffset write per group per rAF frame, scroll read once per frame via a passive listener, IntersectionObserver pauses everything off-screen; ~14KB of inline SVG instead of a 4MB video, so there is no layout shift and no blocking media on mobile. REDUCED MOTION: the drawing renders complete — every path at dashoffset 0, flame included — on first paint, and the three margin annotations are the same static text nodes in the same DOM order they always occupy. Nothing is opacity:0 in the reduced branch. Information loss is zero because no path, label, figure or annotation exists only as an animation target; the animation controls timing, never existence. Secondary signature: \"the tick\" — selecting a dish draws an inked check into its ledger tick box (180ms, slight elbow overshoot) while its figure writes into the running tally, the old total takes a 1px oxblood strike and the new one sets below it (220ms). Under reduce: check present instantly, total swapped with no strike drawn, new total announced via aria-live.

THE PLATE DIAGRAM — a deterministic, authored drawing system, not a generated image. Fixed 400×400 viewBox: a plate circle at r=170 in 1.25px ink, twelve tick marks at the rim like a protractor, and a small registration cross at the frame's top-left. Inside sit two to four FORM GLYPHS pulled from an authored vocabulary of ~22 hand-drawn ink shapes — coil (pasta/risotto), fillet with cross-hatched skin, breaded cutlet slab, wedge, leaf cluster, tumble of roast cubes, scored boule, layered slab, quenelle, ring, fanned slices — each a real drawn path with the house cross-hatch at a fixed 45°/3px pitch. Composition is chosen by a tiny hash of dish.id: glyph set constrained by category, rotation within ±7°, hatch density from the recipe's complexity tier. So 150 dishes look like one hand drew them in one sitting, yet no two are identical, and adding dish 151 requires no art request. WHY THIS BEATS PHOTOGRAPHY HERE: there is no lighting, white balance, plating style or camera angle to be inconsistent about, so the blueprint's 150-image contact-sheet test and its \"AI image collage\" failure mode are passed by construction rather than by discipline. HONESTY: a rotated -4° oxblood letterpress stamp in the lower-right of every frame reads \"DRAWN TO SPEC · PHOTOGRAPH PENDING\", and the alt text says the same thing plainly (\"Ink line drawing of a breaded cutlet under melted cheese, drawn to specification; no photograph on file\"). Nothing is passed off as a photo of Robert's food. COST: each diagram is an inline SVG component at 2–4KB with zero network requests, so a 150-row ledger of 28px glyphs still ships one HTML document. UPGRADE PATH: a real photograph drops into the identical circular tick-marked frame with the identical margin annotations and the stamp removed — the system absorbs photography as an upgrade instead of being replaced by it.

Crop the wordmark out and the screenshot is still unmistakably Chartier, because the identity lives in structure and semantics rather than in a logo or a colour. (1) THE VISIBLE LATTICE is a systemic commitment, not a skin: every line-height, component height, glyph frame and image ratio is an exact multiple of 28px desktop / 24px mobile, and the rules are drawn where you can see them. You cannot retrofit that onto a Tailwind template — it constrains everything, which is exactly why nobody does it. (2) THE DRAWN VOCABULARY is authored artwork Chartier owns: 22 ink glyphs, a fixed 45°/3px house hatch, tick-marked plate rims and a deterministic composition rule. A competitor cannot buy it, and a stock library will not match it. (3) THE MARGIN VOICE: a fixed oxblood-ruled gutter carrying Kalam annotations in Robert's first person — \"make this the day before\", \"my grandmother's ratio, don't argue\" — is the warmth that keeps documentation from going clinical, and copying it means copying a specific person's handwriting-voice, which reads as theft immediately. (4) SEMANTIC COLOUR: oxblood appears only where the editor touched something (struck, corrected, cancelled, unverified) and gold only where something is approved. The site therefore reads warm-neutral, the two accents carry meaning, and the blueprint's black-gold-serif-glass template look is unreachable from here. (5) HONESTY AS ORNAMENT: the blank EST. panel in the seal, the struck unverified prices, the \"UNAPPROVED · INDICATIVE\" stamp on all 14 presets, the \"DRAWN TO SPEC · PHOTOGRAPH PENDING\" mark — the constraints Robert's missing inputs impose are rendered as the most characterful marks on the page rather than as apologies, which is a position no competitor with a full photo library would ever choose to imitate. The tells at a glance: zebra fives, dot leaders, struck allergens, ticked plate rims, one rotated stamp.