themes.aaronnorling.com
A specimen book for design themes.
Every theme below renders the same page: the same hero, the same cards, the same nine hundred words of body copy, the same table with the same broken email field. Only the tokens change. That is the whole idea — comparison needs exactly one variable.
This page itself is rendered in Nord.
Next theme
Add src/themes/<slug>.ts, register it in
src/themes/index.ts, and a full specimen page
builds itself.
How this works
A theme is one TypeScript file. It declares its raw palette — grouped and annotated the way its own authors group it — and then two sets of semantic tokens, one for light and one for dark. Nothing else.
Those tokens become CSS custom properties on :root, which Tailwind re-exports
as ordinary utilities: bg-surface, text-ink-muted,
border-line, bg-green-tint. No component on this site contains a
color literal, so adding a theme never touches a component.
Dark variants are written by hand rather than derived. Algorithmic dark mode passes contrast checks and still comes out feeling wrong.