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

secrets found: 0/6