The usual objection to design systems is that they are a luxury for companies with a spare quarter. In practice the opposite is true: the smaller and faster your team, the less you can afford to re-decide spacing every time someone builds a page.
Most of the value sits in about thirty decisions
You do not need a component library with ninety documented variants. You need a small set of decisions made once, written down, and then not revisited.
- A type scale — five or six sizes, with the line heights already paired to them.
- A colour set with contrast pairings pre-checked, so nobody has to think about accessibility in the moment.
- A spacing scale, ideally one geometric progression rather than arbitrary pixel values.
- Two or three elevation levels. Not seven.
- One border radius family and one motion easing curve.
That is roughly thirty decisions. Encode them as tokens and the majority of visual inconsistency disappears — not because people became more disciplined, but because the inconsistent option stopped being convenient.
Name tokens for meaning, not appearance
The single most common mistake we see is naming by value. A token called blue-500 is a liability the moment the brand shifts blue, or the moment you add a dark theme.
Name for role instead: surface, ink, ink-muted, accent, line. Now the mapping between meaning and value can change in one place. A rebrand becomes an afternoon of updating token values rather than a month of search and replace across every file anyone has ever touched.
Build components when the pattern repeats, not before
Premature component abstraction produces a library full of things used once, each with four configuration props nobody remembers. Our rule is simple: the third time a pattern appears, it becomes a component. The first two times, it is just markup.
This keeps the library small enough that people actually read it, which is the only property that determines whether a design system gets used or quietly abandoned.
Document what breaks, not what works
Nobody reads a guidelines document that explains what a primary button is. People read the page that says do not put the gold accent on the teal panel, here is what that looks like, here is what to use instead.
Guidelines that only show the correct answer are a gallery. Guidelines that show the tempting wrong answer are a tool.
Keep it to a handful of pages. A system that fits in someone's head on the first read is worth more than an exhaustive one they skim once and never open again.
