Colophon

how this site is made.

type

Everything is set in Instrument Sans โ€” display, headings, and body โ€” with Sometype Mono handling eyebrows, tags, and the small utility text like the line at the bottom of this page. Two families, no exceptions.

colour & tokens

No component on this site knows a hex value. Everything reads semantic tokens โ€” --background, --card, --primary โ€” which in turn reference a warm-neutral ramp and one loud orange. Dark is the default mode; light is the same system inverted.

how it's made

Designed in Figma (a Foundations file holds the primitives, semantics, and components), built with Claude Code and Next.js โ€” App Router, Tailwind v4, shadcn/ui. The /design-system page is the living catalogue: every component in the codebase, linked back to its Figma node.

this site rewards keyboard mashing.

ยฉ 2026 James Newton. Product Design

b1eb0d6 ยท 2 aug 2026 ยท colophon ยท design system

secrets found: 0/6