Living design system
Calm paper, on the record
Every value on this page is read live from the site's token layer, so the showcase can never drift from the code. The written rules live in the repo as an AI readable spec, and a deterministic audit script fails any change that invents values outside this set.
Tokens
Core colors
One blue, one navy, two grays, one border weight. AI tools pick from this closed set; the audit rejects anything else.
--background
Page background, the desk
--navy
Headings and primary text
--navy-mid
Secondary dark tone
--accent
The one blue: links, buttons, focus
--accent-light
Accent tinted fills
--gray
Secondary text
--gray-light
Placeholders and disabled only
--border
All rules and borders
--surface
Cards and paper
--tag-bg
Neutral pill background
--lavender
Soft tinted sections
--delight-pink
Sparkle particles only
Tokens
Paper family
Six pastels for sticky notes and card panels, never for text. They sit with the 3D illustration family on the work page.
--note-cream
--note-mint
--note-peach
--note-lavender
--note-yellow
--note-rose
--ink-rose on --note-rose
--ink-mustard on --note-cream
Ink colors exist only as pairs with their named paper and every pair is contrast checked to WCAG AA by the audit script.
Tokens
Positive and feedback colors
Green is reserved for success and diagram semantics. The interactive tools use the red, amber and emerald feedback families for severity, and nothing else from the default palette passes the audit.
--success
Success text and diagram strokes
--success-light
Success tinted fills
Tokens
Typography
Playfair Display for headings, Inter for everything else. One sanctioned off scale size: the pill text.
Serif headings settle the page
Inter carries body text, labels and interface copy at four weights.
Section label, uppercase and tracked
Secondary text uses gray, which passes AA on white and on the page background. Placeholder text may use gray-light because inputs carry visible labels.
Tokens
Motion and shadow
Two durations, one decelerating curve, one rise distance. Nothing bounces, and reduced motion is handled globally.
--motion-duration-micro
Hovers, presses, small state changes
--motion-duration-reveal
Scroll reveals and content entrances
--motion-duration-delight
Lifetime of one sparkle particle
--motion-ease-out
The only easing curve, decelerate without bounce
--motion-rise
Distance content travels while fading in
--shadow-note
Resting paper: notes, polaroids, cards
--shadow-lift
Hovered cards, slightly deeper
Components
Buttons and links
Three levels, no invented colors. Primary is accent, hover is navy, press nudges down one pixel.
Components
Pills
Four tones, each a contrast checked paper and ink pair. Pills are labels, never buttons.
Components
Paper elements
Sticky notes, tape, pins and polaroids carry the site's identity. They compose, they never restyle.
A sticky note with washi tape. It straightens quietly when hovered.
A note held by a push pin. Pins and tape are decorative and hidden from screen readers.
A taped polaroid
Components
The method card
The shared language of the games and tool pages, styled like a printed co-design methods handbook. Every part rules itself.
Showcase
Method card
Visual panel, title band, pill row, body and tip footer stack in clearly ruled sections.
Governance
How it stays honest
The system is enforced, not aspirational. AI tools read the spec before generating, and a deterministic script checks what they made.
- Spec files in the repo capture every decision: principles, tokens, components, patterns and what wins when rules conflict.
npm run audit:designscans the code for raw values, checks WCAG AA contrast on every declared pair, and fails if the spec and the token layer drift apart.- Proof: the same component generated without the spec produced 24 invented values; with the spec, zero.