The system that runs the site.

Every visible piece of joel.design is documented here. Tokens, components, patterns, and the voice rules behind every word. I built this as a living specimen of the brand it documents.

What’s in here.

Why this exists.

Most design systems live somewhere else. A separate site, a Storybook, a Figma library you have to leave the product to look at. This one lives inside the product. The same components shown here are the ones rendering everything else on joel.design.

The site is the system. The system is the site. Whatever you see on the homepage, on a case study, in a footer, you can inspect it from where it lives, see its tokens, and trace it back to the canonical entry here.

How it’s built.

Type stack: Calibre + Tiempos from Klim Type Foundry. Color anchored on a single warm orange. Numerals use old-style figures in body and tabular lining figures in tables. Voice rules: period-terminated, two clauses max, no em dashes.

Five decisions produce most of the brand: the type stack, the numerals rule, the voice cadence, the period-as-mark, and the personality framework underneath it all (“Quiet Specimen,” meaning the brand reads as a typeface specimen book). Each is documented in Foundations.