The tokens this site is actually built from, read out of the stylesheet at build time.

Nothing here is transcribed. The page parses site/assets/style.css during the build, so a token that is renamed or removed changes this sheet in the same pass. The specimens are live elements, not screenshots: resize the window and the type scale moves, because every step is a clamp rather than a fixed size.

Type scale

A perfect fourth at the top of the viewport range easing to a minor third at the bottom, so the headline cannot bully the rest of the page on a phone.

Colour

Each token in light and dark. Both themes are audited against WCAG AA on every build by npm run contrast.

Components

Everything else

--sans	"Instrument Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif
--serif	"Newsreader", Georgia, "Times New Roman", serif
--mono	"JetBrains Mono", ui-monospace, "Cascadia Mono", Menlo, monospace
--pad	clamp(1.15rem, 4.5vw, 4rem)
--maxw	1180px
--readw	68ch
--ease	cubic-bezier(0.2, 0.8, 0.2, 1)

The header's own height, named once so anything that has to clear it (the sticky rail, scroll-margin on anchor targets) stays correct if it ever changes.

--hdr-h	3.4rem

Named roles, so components ask for meaning rather than a number.

--t-hero	var(--step-7)
--t-sec	var(--step-4)
--t-item	var(--step-2)
--t-body	var(--step-0)
--t-small	var(--step--1)
--t-micro	var(--step--2)

Line heights tighten as type grows, which is how it stays readable at both ends instead of loose at the top and cramped at the bottom.

--lh-display	1.02
--lh-heading	1.15
--lh-body	1.65
--lh-tight	1.35

Tracking follows size in the opposite direction.

--tr-display	-0.032em
--tr-heading	-0.018em
--tr-body	-0.003em
--tr-caps	0.16em