Internal · living reference
Design system
Every value on this page comes from src/styles/tokens.css — the single
source of truth for color, type, and spacing. Edit tokens there; this page (and the whole
site) follows. Brand rationale lives in docs/brand-lost-clip-society.md.
The paint chart — real pre-1990 paints, one job each
--paint-mexicoMexico Blue · Porsche '70s — ACTION: buttons, CTAs --paint-signalSignal Orange · Porsche 914 — PUNCH: eyebrows, nav, Join --paint-grabberGrabber Blue · Mustang 1970 — LINKS --paint-plumPlum Crazy · Dodge 1970 — DEEP GROUND: footer --paint-sublimeSublime · Dodge 1970 — MARKER: highlights only --paint-sunflowerSunflower · Porsche '70s — STRIPE band --paint-bahiaBahia Red · Porsche 914 — STATUS: requested --paint-irishIrish Green · Porsche '60s — STATUS: measured Badge ingredients (crest & member card only — never site chrome)
--brand-oxbloodOxblood — badge enamel --brand-brassBrass — badge metal --brand-charcoalCharcoal — badge center --brand-creamCream — member card stock Status colors (semantic — keep distinct)
--status-requestedRequested --status-developmentIn development --status-measuredMeasured / Fitted Type
Display / the Society’s voice — Aa Bb 0123
--font-displayBody — quiet, for reading. Aa Bb 0123
--font-bodyMONO — ANYTHING EVIDENTIARY: DIMS, OEM №, STAMPS · 37.01 mm
--font-monoComponents
Requested In development Measured Fitted on a real car
Voice cheat-sheet (from the brand book)
- Plain language explains; the Society fiction makes it memorable. Never the reverse.
- Data copy gets zero jokes. Mono type = trust signal.
- One dry joke per section, max. The villain is discontinuation, never the reader’s car.