The design system
This site is its own style guide. Everything below is rendered from the same tokens and components the rest of the site uses: three tiers (primitive → semantic → component), composed with CSS cascade layers.
Colophon
Who made this, and how.
Anthropic's Claude wrote most of this site's code and copy, working under my direction: a written voice guide the drafts are audited against, three tiers of design tokens with components touching only the semantic tier, an edge worker with a signed session cookie gating the confidential work, and types, lint, formatting, and a full build on every change. I reviewed every line and decided what shipped.
Some things I rejected on purpose: a server-rendering framework for a fully static site, Tailwind in place of the token system, trackers of any kind, web fonts that cost load time and trip corporate network filters, and the numbered-section tropes of template landing pages. The diagrams in the case studies are inline SVG drawn from the same tokens as everything else, so they re-theme like any component.
Color
Authored in OKLCH. Components consume the semantic tier.
Semantic roles
--color-bg --color-surface-sunken --color-text --color-text-muted --color-border --color-accent --color-success --color-warning --color-danger Neutral ramp
Accent ramp
Typography
A 1.20 fluid scale that adapts between mobile and desktop.
--text-display Display — Handgloves 0123
--text-h1 Heading 1 — Handgloves 0123
--text-h2 Heading 2 — Handgloves 0123
--text-h3 Heading 3 — Handgloves 0123
--text-h4 Heading 4 — Handgloves 0123
--text-body Body — Handgloves 0123
--text-small Small — Handgloves 0123
--text-caption Caption — Handgloves 0123
Space & radii
One scale drives rhythm everywhere.
Spacing
--space-3xs --space-2xs --space-xs --space-sm --space-md --space-lg --space-xl --space-2xl --space-3xl --space-4xl --space-5xl Radii
--radius-sm 0 --radius-md 0 --radius-lg 0 --radius-xl 0 --radius-pill 0 Components
Built from the tokens above, scoped in the components layer.
Buttons
Tags
Eyebrow & lead
Section label
A lead paragraph, used to set up a section with slightly larger, muted type.
Signature
Borrowed from print: department heads, standfirst deks, drop caps,
pull quotes, folios, and a single deliberate accent (one hue token,
--accent-h). Numerals appear only as folios, never as
decorative section indices.
Department head & dek
A department head
The standfirst: a larger lead-in line under a headline that sets up what follows, set apart from body text.
Folio
Josh Crow · Portfolio · 2026
Pull quote
The constraints arrived first, and the brief was to build inside them. — specimen text
Caption
Figure 1 — a caption, set small and italic.
Motion
Sections fade and lift once as they enter view, disabled under
prefers-reduced-motion.