Most sites built without a designer don't look undesigned — they look over-designed: five grays that almost match, three button radii, an accent color that mutates between sections. Each decision was reasonable in the moment it was made; the page is the archaeology of those moments. The fix is not hiring taste. It is making every visual decision once, giving it a name, and refusing to make it again at midnight inside some component file.
That is all design tokens are: opinions with names. Ours live in a dozen CSS custom properties, and they are the reason a deliberately loud, eclectic site stays coherent while being maintained by people who write SQL for a living.
The dozen decisions
- Two grounds. A paper and an ink — ours are a warm off-white and a near-black with the chill taken out. Never pure white on pure black; the slight tint is the difference between “chose it” and “left the default”.
- One loud accent, one or two quiet ones. Ours is an orange that behaves like a punk sticker — which is exactly why it must be rationed. The quiet ones (an acid green, a powder blue) do backgrounds and moods, never competition.
- One line color. Every border on the site is the same translucent ink. This single token does more for coherence than any other — mismatched borders are the fastest tell of tokenless CSS.
- One spacing rhythm. A padding variable with
clamp()so the layout breathes with the viewport, plus gaps picked from one short scale. - Two radii. One for cards, one for pills. The third radius is where identities go to die.
- Two type families, committed. A characterful display face that carries the personality; a workhorse body that carries the reading.
The rules that do the designing
- The accent is a budget, not a paint bucket. One loud element per screen. If everything is orange, nothing is — spend it on the single thing you want remembered, exactly like a real budget.
- Weird needs a straight man. Our tiles ripple and whole sections grow as you scroll — and they can afford to because the type is disciplined and the grid is boring. Eclectic-on-eclectic reads as chaos; eclectic-on-rigor reads as intent. When we add an unusual effect, something nearby gets calmer the same day.
- New value, new conversation. The moment a hex code appears in a component instead of a token, it is either promoted to a named token — a real decision — or replaced with an existing one. The linter for this is
grepand honesty.
Borrowing taste, legally
The initial decisions still require taste, and taste can be borrowed deliberately: pick one site whose mood matches your ambition and reverse-engineer its restraint — count its colors (fewer than you think), measure its spacing, notice what it refuses to do. One source is inspiration with discipline; five sources is the mud you were escaping. We did exactly this: studied the energy we wanted, then rebuilt it from our own tokens, with our own weirdness where it pays rent.
A developer team with twelve named decisions and three rules ships something coherent enough that visitors assume there is a design team. There is — it just met once, wrote everything down as variables, and went back to shipping.