DESIGN SYSTEM — LIVING DOCUMENT
The system, on the record.
Every color, type ramp, and texture on this site comes from one tokens file. This page renders straight from it — so if the site drifts, this page drifts with it.
Why publish this
A style guide that lives in a Figma file goes stale the day after it ships. This one can't. The CSS, the OG images, and the swatches below all read from the same tokens.json — one source of truth, three consumers. Publishing it does two things: it keeps me honest, and it doubles as a QA harness. Every block type in the CMS appears in the gallery below with real sample content, so if a block breaks, I see it here first.
The aesthetic is "national-park poster meets engineering notebook" — warm paper, evergreen ink, and just enough mountain to remember where it was built.
Front-end developer turned product builder.
Heading two — Fraunces
Heading three — Public Sans 600
Body copy set in Public Sans. The quick brown fox jumps over the lazy dog, then heads west on the Colorado Trail toward the divide.
MONO EYEBROW — JETBRAINS MONO · 39.7392° N
The never-combine rules
Four motifs, used with restraint. The rules that keep it from turning to soup:
- Topo and ridgelines share a viewport only in the hero and footer — nowhere else.
- Topo contours never sit under body copy, cards, or photos. Territory, not wallpaper.
- Duotone imagery never lands on top of topo or ridgeline fills.
- Never more than two non-grain motifs in a single view. Paper grain is atmosphere; it doesn't count.
Grain is atmosphere, topo is territory, ridgelines are punctuation, duotone is content.
- block:hero — Hero (11 fields)
- block:prose — Prose (2 fields)
- block:project_feature — Project feature (8 fields)
- block:project_grid — Project grid (4 fields)
- block:card_grid — Card grid (3 fields)
- block:stat_row — Stat row (2 fields)
- block:media — Media / gallery (3 fields)
- block:archive_grid — Client archive grid (5 fields)
- block:timeline — Timeline (2 fields)
- block:divider — Divider (3 fields)
- block:cta_band — CTA band (7 fields)
- block:code — Code (3 fields)
- block:embed — Embed (4 fields)
- block:project_meta — Project facts card (4 fields)
- block:form_contact — Contact form (2 fields)
- block:style_tokens — Style guide section (1 fields)