Design System

The tokens and components behind this site, rendered from the real stylesheet.

This page uses css/styles.css directly. Nothing here is a screenshot or a separate design file. If it looks wrong here, it looks wrong in production. See the Brand Identity page for the thinking behind these choices.

Color

--color-ink#16324A · 13.2:1

--color-ink-dim#4A5568 · 7.5:1

--color-muted#6B7680 · 4.6:1

--color-bg#FFFFFF

--color-surface#F7F8F9

--color-accent#8C5A1E · 5.8:1

--color-accent-strong#B5762A · 3.8:1, large-text only

--color-border#EAEAEA

Typography

Space Grotesk

--font-headingHeadings, 500/600/700

Public Sans

--font-bodyBody copy, 400/500/600

JetBrains Mono

--font-monoEyebrows, labels

.label-mono { font-family: var(--font-mono); font-size: var(--label-size); text-transform: uppercase; letter-spacing: var(--label-tracking); color: var(--color-accent); }

Spacing & Radius

--radius-sm4px

--radius-md8px

--radius-lg12px

--radius-xl16px

--radius-pill999px

--section-padding-xclamp(24px, 6vw, 96px)

--section-padding-yclamp(56px, 9vh, 100px)

--content-max-width1120px

Buttons

Primary button Outline button

View markup

<a href="#" class="btn btn--primary">Primary button</a> <a href="#" class="btn btn--outline">Outline button</a>

Cards

40+

Stat card

90%

Stat card

Used across case studies (.cs-stat) and the About/Brand Identity pages (.tools-grid__col).

Navigation

Full-width bar, centered 1120px inner wrap (.site-nav / .site-nav__wrap). Mobile collapses to a hamburger-triggered dropdown below 780px, using inert to remove the closed menu from the tab order and accessibility tree.

States & Feedback

Every interactive element (.btn, .site-nav__link, .work-list__link, .cs-next__link, .cta-band__link) pairs :hover with :focus-visible so keyboard users get the same feedback as mouse users. The stat counter ([data-count-to]) respects prefers-reduced-motion and jumps straight to the final value rather than animating for users who've opted out.

Future Components

Not yet built, but the visual language already implies these if they're ever needed: a form/input pattern (this site has no forms yet: contact is mailto-only, deliberately, to avoid collecting data this site has no server to handle securely), a loading/skeleton state for the stat counter's pre-animation moment, and a toast/inline-confirmation pattern for a future "copy to clipboard" affordance on the microcopy specimens.