Light on the Pass

Display — Fraunces (Google Fonts, OFL) — variable, axes opsz / wght / SOFT / WONK. Set at wght 500-600, opsz pushed to its optical maximum on headlines, SOFT raised ~40 to warm the terminals, WONK on for display sizes and off below 24px.

Body — IBM Plex Sans (Google Fonts, OFL) at 400/500/600, with IBM Plex Mono (OFL) as the third, numeric role — every price, guest count, per-person figure and the entire estimate ticket.

The luxury-template serif is a Didone (Playfair, Bodoni). On a #0B0A09 ground it does not just look generic, it technically fails: high-stroke-contrast hairlines get eaten by halation on OLED and by subpixel rendering at body-adjacent sizes, so the headline smears and thins. Fraunces is a low-contrast old-style with substantial hairstrokes that HOLD as ivory-on-black, and its SOFT/WONK axes give genuine old-world craft character without a single wedding-invitation flourish — it is a variable typeface, so one file gives us both the warm display voice and a tighter, quieter form for subheads. IBM Plex Sans over Inter for two reasons: Inter's light weights are too fine on dark grounds at 14-16px (same halation problem), and Inter is the default of every well-made SaaS product — using it would be exactly the 'assembled rather than authored' signal the blueprint's template-detection critique hunts for. Plex's slightly squared humanist forms read as working operations rather than startup, ship true tabular figures, and stay legible at 12px in ivory-dim. Plex Mono carries the numbers because the customer estimate in this direction is styled as a kitchen ticket — the printed chit that comes off the printer at the pass — which is simultaneously a distinctive artefact, an honest one (a ticket cannot be mistaken for a contract the way a gold-sealed certificate can), and the reason the family must be a superfamily so the ticket and the site are visibly the same voice.

THE LAMP SHIELD — a crest that is a light source, not a shield full of ornament. Construction (all one constant stroke weight, no fills, so it survives foil emboss, one-colour PDF, and 16px): (1) A capital C built as a single monoline stroke with the aperture opened unusually wide and the whole letter rotated 18 degrees clockwise, so the gap faces down-right — the direction light travels everywhere else on the site. The C's inner counter is therefore not a letter counter, it is a reflector. (2) From the C's lower terminal, three hairlines rake down-right at exactly 18deg, in decreasing length: the beam. (3) Beneath, one horizontal bar with two small notches at its ends — the pass. Where the three rakes meet the bar, the bar's stroke thickens by 0.5px: light landing on steel. That is the entire mark. Nothing else. REDUCTIONS: Full seal — a vertical OVAL (not a circle; circles read coffee-shop badge) with a gold-hairline engraved border plus a second inner hairline offset 3px, oxblood field, monogram centred, CHARTIER set in Plex Sans small caps letterspaced +0.22em along the lower arc. No 'est.' date, because the founding year is not a confirmed owner input and we do not invent one. Monogram — C plus rakes plus bar, no oval, the app/nav lockup. Favicon at 16px — drop the rakes and the oval; the rotated C over the notched bar survives as a bracket above a line, which is distinctive at thumbnail size and cannot be mistaken for a generic laurel or fork-and-knife. One-colour stamp — identical geometry, single ivory or single black; because there are no fills and no gradients it is already a stamp. Emboss/deboss — the three rakes ARE the highlight geometry, so the mark embosses correctly by construction rather than by a separate artwork. PDF/letterhead — seal at 18mm top-left, with the same 18deg rake continuing off the mark as a 0.25pt rule across the page: the crest and the page share one light source.

92svh (svh, not vh — the mobile URL-bar collapse must not shift the horizon), ground pass-void. THE HORIZON: one full-bleed 1px char-line rule at exactly 62% of the hero height. Above it is air, unlit. Below it is the pass — a linear-gradient(pass-steel-lit to pass-steel) with an 18deg-rotated overlay gradient so the light demonstrably rakes in from the upper right. This single line is the layout grammar of the entire site and it is visible in a 10%-scale thumbnail. TYPE, in the air, LEFT-aligned, starting 8% from the left edge and 30% down — not centred, not viewport-filling. Eyebrow: IBM Plex Sans 400, 0.78rem, tracking +0.14em, uppercase, ivory-dim — 'COLORADO / STAFFED BUFFET CATERING / FAMILY RUN'. Headline: Fraunces 500, clamp(2.6rem, 6vw, 5.2rem), line-height 1.02, ivory, two lines maximum, WONK on. Standfirst: Plex Sans 400, 1.05rem, ivory-dim, max-width 34ch. Then two CTAs on the air side: 'Build your menu' as a 1px ember rectangle (radius 2px) with ivory label, filling to solid ember over 140ms on hover/focus; 'Request a consultation' as ivory text over a 1px gold-hairline underline. No pills, no gradients on buttons, no icon decoration. THE LAMP BLOOM sits BEHIND the type at 84%/38%, so the headline occupies the dark side of the falloff and its 16:1 contrast is guaranteed by geometry — there is NO scrim, no overlay panel, no darkened image band, and adding one would be a defect. ON THE PASS, below the horizon: three objects sit in an asymmetric rhythm (not a symmetric three-up), each a real menu object — placeholder tile, name, per-person price — each with a contact shadow (box-shadow: 0 14px 30px -12px #000) and a 1px lamp-at-8% top edge where the light strikes. They are SITTING ON the pass, not floating over a background. That one detail is the entire anti-glass-card argument made visible in the first viewport, and it is why a visitor understands the physics of the site before reading a word. Bottom-left corner, tiny: the seal at 22px with 'Preliminary estimates only — never a priced offer' in Plex Mono 0.68rem ivory-dim, so the honesty rule is present in the hero rather than buried in a footer.

The unit is not a card, it is A PLATE ON THE PASS — wide, short, horizontal, opaque. Structure at any width: left, a 96px square placeholder tile; centre, name (Fraunces 500, 1.15rem, ivory) over one clause of description (Plex Sans 0.86rem, ivory-dim, clamped to one line below 640px and two above); right, per-person price in Plex Mono tabular ivory with up to three engraved dietary glyphs stacked above it; far right, a 44px selection target. Surface is pass-steel, top edge 1px lamp at 10%, bottom a contact shadow, border-radius 2px maximum. No blur, no translucency, no backdrop-filter, no second surface colour, no hover elevation change (hover raises the lamp edge from 10% to 24% — the light gets brighter, the object does not levitate). ANTI-WAREHOUSE AT 150: the catalog is never a grid, it is a pass with sections, and hierarchy is delivered as EXPOSURE. Level 1 — seven category bands, each opening with a lit full-width header (1px gold hairline, Fraunces category name, count in Plex Mono) followed by a horizontally thumb-scrollable strip of the six dishes actually recommended for the protein you chose: full lit plate objects with tiles, 78% viewport width each so the seventh peeks and the gesture affords itself. Level 2 — directly beneath that strip, the REMAINDER of the category as a dense, image-free list: one 44px row per dish, name and price only, ivory-dim on pass-void with no lamp edge at all. Unlit. Tapping a row lights it and expands it IN PLACE into the full plate object, no modal, no navigation. So 150 dishes present as roughly 40 lit objects and 110 quiet lines, and the falloff is literal rather than metaphorical: the customer never confronts 150 equal things because equal brightness is precisely what this direction forbids. THE ENFORCEABLE LAW: no more than nine lit objects per viewport at any width. If a composition would exceed nine, something must go to the dim list. That is a rule a design critic can count in a screenshot, which is exactly what the blueprint's evidence-backed scorecard demands — 'not a card warehouse' becomes a measurement, not an adjective.

STEP 4 — DISH SELECTION, designed at 390px first (this is the primary product surface). TOP: a 4px progress strip that is not a bar but four unequal segments of light — current segment lamp, completed segments gold-hairline, future segments char-line. Beneath, a 48px sticky header: back chevron, 'Choose your dishes' (Fraunces 500, 1.05rem), and right-aligned '6 on the pass' in Plex Mono. Then a sticky single-line control row: instant-search field (pass-steel ground, 1px char-line, focus = 2px solid lamp ring, never a glow) followed by dietary tokens rendered as ENGRAVED tokens — 1px gold-hairline outline with an ivory-dim label; active state is a 1px ember outline, ivory label, and a filled 4px ember dot. Not pills, not chips with rounded fills. BODY: the category bands and dim lists described in the card family. BOTTOM, above the safe area: THE PASS RAIL — 88px plus env(safe-area-inset-bottom), full-bleed, pass-steel-lit to pass-steel gradient, top edge a 1px lamp at 30% (the lamp line). Left 70% is a horizontally scrolling strip of 36px selected-dish chips; right 30% is the live figure in Plex Mono 1.35rem ivory with 'per person / 100 guests' beneath in 0.68rem ivory-dim. Tapping the rail raises a full sheet — never a modal floating over the grid — with the itemised summary, the standard-buffet-service line held separate, and the exclusions list. The rail never covers content: the scroll container carries padding-bottom of 88px + safe-area, and the rail retracts after 240px of downward travel, returning on any upward scroll or on any selection. DESIGNED STATES, all of them: EMPTY — the rail is present but UNLIT (pass-steel only, no lamp edge) and reads 'The pass is empty. Start with a main.' in Fraunces 400 italic ivory-dim; simultaneously the entree band is the only lit band and every other band collapses to its header line. Progressive disclosure expressed as light. PROTEIN CHOSEN / REORDER — compatible dishes move to the front of each strip via a 220ms transform-only FLIP, and each moved item gets a 400ms lamp top-edge fade so you can see WHAT moved; reduced motion drops the FLIP entirely, renders the new order instantly, and gives each newly promoted item a 'Pairs with Chicken Parmesan' caption in ivory-dim — the information (what changed and why) is in text in both modes. Nothing is ever hidden by a reorder. WHOLE-EVENT DIETARY CONFLICT — incompatible dishes are not removed, they drop to the dim list with a struck-through price and a reason line ('Contains dairy — hidden by your dairy-free setting'), and every band header carries a persistent 'Show 23 unavailable' text link. INDIVIDUAL ACCOMMODATIONS — main menu untouched, a counter row appears in the sheet, and the incremental amount renders as 'pending Robert's review' in ivory-dim, never as a number. OUT OF RANGE 151+ — the rail's figure area swaps from a dollar amount to 'Custom pricing' in ember, and a one-line banner DOCKS directly above the rail (not a toast, which can be missed): 'Above 150 guests we price by consultation. Dish prices below are reference only.' Dish prices stay visible; no decision-ready total can render. UNDER 50 — the rail shows the real figure with '/ charged at 50' appended in ivory-dim, and the sheet explains that a consultation may produce a lower custom arrangement. SAVED DRAFT — on return, a 40px strip below the header on oxblood-at-20%: 'Picking up where you left off — 6 dishes, saved 2 days ago', with 'Start over' as a text button. LOADING — no spinners anywhere: category headers render immediately because they are static, and dish rows render as char-line 1px skeleton rules at the exact final row height, so layout shift is zero and the lamp edge does not appear until real data does. Lit means real. ERROR — the band keeps its header and shows one line, 'We could not load the salads. Retry.', with Retry a real focusable button; nothing else on the page changes. SUCCESS — the page dims to pass-void over 300ms except the estimate ticket, which arrives lit; instant under reduced motion. Throughout, 'Preliminary Catering Estimate' and the exclusions sit wherever a total sits, and no screen uses the word priced offer outside the three approved strings.

The phone is where this direction was designed; the desktop is the derived layout. Seven things the phone gets that no squeezed desktop could produce: (1) THE PASS RAIL IS A PHONE-NATIVE OBJECT. Bottom-anchored, thumb-reachable, safe-area-aware, retract-on-scroll-down, keyboard-aware. On desktop it becomes a right-hand column — a demotion, not a promotion. The primary control was born at 390px. (2) THUMB-ARC LAW. Every committing action (select, add, next, submit, request consultation) lives in the bottom 30% of the viewport. Every rare or destructive action (remove all, start over, change guest count) lives inside the sheet ABOVE the fold, requiring a deliberate reach. This is never inverted, and it is auditable from a screenshot. (3) THE DARKNESS IS A PHONE DECISION. #0B0A09 is near pixels-off on OLED. The direction spends less battery and less glare on the surface people actually use — a phone, in bed, at night, comparing wedding vendors. That is a non-decorative reason for the low key, and it is the reason this direction cannot be dismissed as taste. (4) HORIZONTAL STRIPS INSTEAD OF GRIDS. A two-column grid of 150 dishes at 390px is 75 rows of vertical scroll. Category strips scrolling sideways at six visible dishes each traverse the entire catalog in seven vertical gestures. The grid is the desktop compromise; the strip is the phone's native form. (5) THE ESTIMATE IS A PHONE DOCUMENT. The customer estimate renders as a narrow mono-set kitchen ticket at a 58mm receipt ratio, ivory ground, designed to be screenshotted and texted to a fiance — because that is what actually happens to catering estimates. The desktop print stylesheet is derived from the phone ticket, not the other way round. (6) KEYBOARD BEHAVIOUR IS DESIGNED, NOT INHERITED. inputmode and autocomplete are set correctly on email/tel/name; and when the soft keyboard opens, the Pass Rail is measured off the visualViewport and un-sticks so it can never sit on top of the field being typed into. That single failure is the most common broken thing on catering forms and it is designed out at 390px first. (7) NO HOVER-DEPENDENT INFORMATION EXISTS ANYWHERE IN THE SYSTEM. Dietary marks, pairing reasons, allergen warnings and prices are on the object or one tap away — never revealed by a pointer the primary device does not have. Additionally, the homepage scroll-scrub does not run on /build at any width, and on phones reporting a low-end deviceMemory the hero bloom renders as its static 72% frame — the same output as reduced motion, so there is one degraded state to test rather than three.

SERVICE LIGHT — the homepage scroll-driven lamp bloom, which is also the Phase-A honest stand-in for Robert's non-existent flambe footage. We never show fire. We show what fire does to a room. Mechanism: one fixed-position div, 140vmax, a single radial-gradient of lamp #FFB661 to transparent, mix-blend-mode: screen, positioned at 84% / 38% (upper right, off the type). Two custom properties — --intensity (opacity) and --spread (background-size) — are driven by a scroll-linked animation over the first 100vh (ScrollTimeline where supported, IntersectionObserver + rAF elsewhere). Keyframe map: 0-35% scroll, intensity .06 / spread 60% (the room before service, one pilot light); 35-72%, intensity ramps to .55 and spread to 130% while a SECOND layer of ember #C8562B at 12% alpha rises from the bottom-right and decays over 400ms — that is the ignition, and it reads unmistakably as a pan going up just off-frame; 72-100%, intensity decays to .18 and settles, and the pass surface below the horizon is now lit with the first three menu objects visible on it. Constraints that make it not a motion demo: only opacity and background-size animate, so it is one composited layer with zero reflow and zero layout shift; the headline never moves, never fades, never tracks — text is static by law; total media weight is zero bytes because it is CSS; it runs only on / and /weddings, never on /build. REDUCED MOTION: @media (prefers-reduced-motion: reduce) freezes the layer at the 72% keyframe — intensity .55, spread 130% — applied immediately as a static gradient. That is the peak frame, the most beautiful state, so the reduced-motion user gets the best composition rather than a degraded one. Zero information loss is structural, not a claim: the ramp encoded no content, only mood; every word, price, link and CTA is in the DOM identically in both modes; nothing appears, unhides, or becomes reachable as a function of scroll position. The no-JS fallback is a 4KB static AVIF poster of the same 72% frame. FORWARD PATH: when Robert's footage arrives, the identical --intensity/--spread timeline drives a muted, playsinline <video> currentTime scrub against the same keyframe map, with the poster attribute set to frame 72%. The mechanism does not change; only the layer it drives does. SECONDARY MICRO-MOTION (the one the customer feels most): 'plate lands on the pass' — adding a dish travels its chip 6px into the rail over 180ms on cubic-bezier(.2,.8,.2,1) with a 120ms warm flash of the rail's top lamp edge, and only the digits that changed roll in the tabular price. Reduced motion: no travel, no flash; the chip appears with a 1px ember left-border and the aria-live polite region announces 'Baked Ziti added. $14.20 per person. 5 dishes on the pass.' — which it also announces in the animated mode, so the two are informationally identical.

CHIT TILES — a deterministically generated SVG per dish, built server-side from the dish record, roughly 1.5KB, no binary assets, no AI imagery, nothing scraped. Composition, identical for all 150: ground pass-steel; a 1px char-line inset border 4px from the edge (the plate rim); centred in the middle 40%, a single category glyph from a CUSTOM eight-mark line family drawn at 1.25px stroke in gold-hairline. The glyphs are not clip-art food — each abstracts the SERVICE VESSEL and its motion, which is why they belong to a catering brand rather than a recipe blog: entree = a shallow oval with three rake lines (a plate under the lamp); starch = a hotel pan in perspective, two nested rectangles with a diagonal; vegetable = two crossed stems; appetizer = a small circle riding a long horizontal (a passed tray); salad = three arcs of decreasing radius; bread = a scored oval; dessert = a wedge with one dot; sauce = a droplet with a ripple. Under the glyph, in Plex Mono 8px letterspaced ivory-dim at 55%: NO PHOTOGRAPH ON FILE. The honesty is printed on the face of the artefact, not buried in a tooltip or a data attribute — this is the direction's answer to 'polished misinformation'. VARIATION WITHOUT CHAOS, which is the whole problem at 150: the light rake is locked at 18 degrees on every single tile — that fixed angle is what makes 150 tiles read as one library on a contact sheet — but the WARMTH STOP POSITION of the tile's background gradient is derived from a hash of the dish id, so tiles vary by a few percent of light placement. Enough that a 150-up contact sheet does not look like 150 photocopies; controlled enough that it reads as one shoot on one afternoon. Nothing else varies, ever: no colour variation, no glyph rotation, no random ornament, no per-dish 'personality'. ALT TEXT RULE: alt='Placeholder mark for Chicken Parmesan — no photograph on file yet'. We never write a sensory description of a dish nobody has photographed, because that is fabrication in an accessibility affordance. SWAP PATH: the tile component takes the dish record, so the day provenance flips to owner_photo it renders the photograph at the same aspect, the same 4px rim inset, the same contact shadow, the same lamp top edge, in the same slot — the layout does not move by one pixel and no code changes. And because the direction already declares a light source, the grading target for Robert's photography is specifiable in advance rather than negotiated later: shadows lifted to #17130F, highlight roll-off beginning at 92%, 3200-3600K, key from upper right at 18 degrees, one background surface. Robert's photos JOIN this library instead of replacing it — which is the only way a mixed catalog of real and placeholder images survives the blueprint's contact-sheet audit during the months when only some dishes have been shot.

Five things, and each of them is a RULE rather than a style, which is why a competitor copying the CSS variables gets a dark website and not this one. (1) THE 18-DEGREE RAKE. One fixed light direction, declared once and enforced in the hero gradient, every object's top edge, every one of 150 placeholder tiles, the crest's three rake lines, the PDF letterhead rule, and the specified grading target for Robert's future photography. Anyone can copy 'dark and warm'; nobody accidentally arrives at a consistent light source, because it requires choosing an angle and then defending it in every component review. (2) THE HORIZON. Every page has exactly one full-bleed horizontal rule where the air meets the pass. Titles live above it, objects sit below it. That is the layout grammar of the entire site and it is legible in a favicon-sized thumbnail — which is the blueprint's own test for 'recognisable without the logo'. (3) BRIGHTNESS AS INFORMATION ARCHITECTURE. Priority is exposure. Squint at any page at 10% scale and the thing that matters is the thing that is lit, with the nine-lit-objects law making that checkable rather than rhetorical. This is not a visual effect; it is the reason the 150-dish catalog does not become a warehouse, and it cannot be lifted without re-deriving the underlying content hierarchy. (4) PHYSICS INSTEAD OF CHROME. Opaque objects with contact shadows resting on a surface — never translucent panes floating in undefined space. That is precisely, provably the opposite of the black-gold-serif-glass-card template: the template's cards have no surface to sit on and no light to catch, which is exactly why they need gold borders to look expensive. We removed the gold and kept the light, and the objects still read as premium because they read as REAL. (5) THE TICKET, NOT THE CERTIFICATE. The most-photographed screen — the estimate — is a mono-set kitchen chit, not a foil-sealed document. That is an anti-luxury artefact in a luxury category, it is unmistakably Chartier, and it does load-bearing legal work: a ticket cannot be mistaken for a contract the way a gold-bordered certificate can. AND THE CHARGE ANSWERED DIRECTLY: this is not black-gold-serif-glass because gold is capped at one pixel and never fills a shape; the serif is a LOW-contrast old-style chosen because Didone hairlines halate and thin on dark grounds, which is a technical rejection rather than a taste one; translucency is banned outright, so glass cards are structurally impossible; type is left-aligned against a horizon rather than centred over a scrim; and the crest is a light cone, not an ornamented shield. Every rejection descends from the thesis rather than from taste — and, decisively, the direction is DESIGNED FOR THE ABSENCE OF PHOTOGRAPHY. It shows what light does to a room, not pictures of food, which means it is at its strongest on the exact day Robert has sent nothing.