The design system behind everything I ship

6 apps on 4 different stacks. They can't share a component library: one's a static site, one keeps its styles in a template string, two are Next on Tailwind, and one's a script that draws an SVG. So they share tokens instead.

What every app shares

Spacing, the type scale, line heights, motion, focus rings, shadow shape, control heights and z-index layers. These live in src/primitives.json and are identical in every app. Change one and all 6 sites change with it.

What each app changes

Colour, its type pair, --ds-radius-base and --ds-density. All 5 radius steps are worked out from the base, so Brookwood sets 4px and gets near-square paper while Condimental sets 16px and gets soft cards. Density does the same for control heights and padding.

Every theme declares the same 31 tokens. The build fails if one is missing, so a theme can't drop a token and inherit whatever the last one left behind.

The themes

Reference Core Bricolage Grotesque and IBM Plex Sans Condiment Gallery Condimental Young Serif and Figtree Time Dissonance Dissonance Libre Baskerville and Libre Franklin Household app Household SF Pro Rounded and SF Pro Text Ritual Routine Fraunces and Hanken Grotesk Eye for Type Specimen Source Serif 4 and Source Sans 3 Brookwood Hunt Parchment IM Fell English and Instrument Sans

What's in it

7 themes, 13 CSS components with a small behaviours module for the parts CSS can't do, and 4 React components served as a shadcn registry. There's also a Tailwind v4 bridge, a shadcn bridge, a JS export of every token for canvas and OG images, and an audit script that counts how much of an app goes around the system.

The Claude skills I build with are here too.

Add it to an app