Work1 min read
Building a design system for my own site
Why I wrote down the rules before writing any pages, and how a handful of tokens and seven components now run the whole site.
Before writing a single page, I wrote down the rules. A dark theme first. One accent, used for the thing you can act on. Monospace for anything that is data: dates, versions, durations. Thin hairlines to separate things instead of shadows.
That list sounds small, but it answered most of the design questions before they came up.
Tokens first
Every colour, size and gap on this site comes from a small set of named tokens. The dark and light themes use the same names with different values.
:root {
--bg: #050505;
--ink: #e8e2d6;
--accent: #8e0f22;
}A few components, used everywhere
A handful of components cover the whole site. Adding a page means arranging those, not designing something new. It’s the same idea I use at work: a small set of well-understood building blocks beats a large set of one-offs.