Living style guide
Optical Instrument
Every value on this page is read from the site’s own computed styles at runtime — nothing here is a hand-typed copy of a token, so this page cannot quietly drift out of sync with what actually ships. This is how Lighthouse Café’s redesign is actually built.
Surfaces & ink
“Obsidian” — a four-step surface ladder, plus --surface-header, a fifth step reserved for the most-elevated chrome only — and a three-step ink ladder tuned to hold contrast against every step of it.
--surface-sunken…--surface-page…--surface-overlay…--surface-raised…--surface-header…--ink…--ink-2…--ink-3…--ink-etch isn’t a fourth rung of that ladder — a separate, cooler tone reserved for engraved micro-labels only.
--ink-etch…Rust, lamp & status
The rust/lamp accent is unchanged from the café’s own physical signage — confirmed explicitly, not assumed, when this program moved off the retired navy palette.
--rust…--rust-text…--lamp…--ok-text…--warn-text…--danger-text…--info-text…Typographic voices
Fraunces exposes wght + opsz only. Five voices, each an override of the automatic opsz interpolation where it’s wrong for the job — rendered here with live font-variation-settings, not a screenshot.
Icon system
All 36 hand-drawn menu icons, on the same disc backdrop (--disc-highlight / --shadow-disc) the menu itself uses, at 56px — the size they read best at on an item card.
Stroke weight is size-aware, not a flat scale-up — a sample across every size the icons actually render at.
Machined Glass
The default control language for every button, chip, and stepper site-wide — a real glass material (backdrop-blur, translucency) with a detent’s structural feel: rest sits in a shallow well, hover catches light on the rim in place (no float), press sinks it deeper.
The engraved micro-label primitive (.plate / .plate-bare) used on every field name, every surface.
Fault codes
Every error/offline state ships a fault code (LH-C<class>-<serial>) instead of a bare “something went wrong” — legible enough to read over the phone to staff.
not-found.tsx
Page not found
LH-C4-04
The mark itself, rendered unlit — the same signature every lit surface uses, dark instead of lit.
error.tsx
Something went wrong
LH-C5-00
Ref: a1b2c3d4 (sample)
Carries a reference number when one exists — readable over the phone to staff, not just logged.
global-error.tsx
Fatal error
LH-C5-99
Replaces the entire page on a truly fatal error, so it can’t reach any of the site’s own styling or fonts — plain colors and system type, by necessity.
The lighting engine
One light source, three tiers, the same five published properties every time — flip between them below and watch the panels respond continuously, not just the beam itself.
Same five properties (--lh-beam-angle/-x/-y/-power/-aspect), published by a different source per tier — the WebGL renderer at Live, a CSS @keyframes sweep at Lamp, a fixed value at Still. Watch the wash behind the discs: it tracks --lh-beam-angle, so Live and Lamp sweep and Still holds it fixed. Each disc has its own measured position, so its glow also tracks the beam’s angle independently of the other two — the one nearest wherever the beam currently points brightens, and dims again as the sweep moves on, the same as a real, physically rotating lamp lighting up whatever it passes over.