·

Systems

Start a design system with three tokens

A small, named foundation beats a large library nobody uses.

Teams often ask for a design system when what they want is fewer arguments. Every new screen reopens the same questions about color, spacing and type. A system can settle those questions, but only if people actually reach for it.

That’s why I start smaller than most people expect. Three color tokens, a handful of spacing steps and two text styles. Enough to build one real screen, and nothing that hasn’t been used yet.

Names before values

I spend more time on names than on values. A token called “blue 500” tells you nothing about when to use it. A token called “text secondary” tells you exactly that, and it keeps working when the brand color changes next year.

Good names also make reviews faster. Instead of debating whether a gray is slightly off, we can ask a simpler question. Is this a label, or is it body copy? Once that’s answered, the value follows.

Write down the why

Every token gets one sentence explaining when to use it. It sounds like overhead, but it’s the part people read most. When someone isn’t sure whether a gray is for borders or for disabled text, the sentence settles it in a few seconds.

Those notes live right next to the tokens, not in a separate document. A guide in another tab is out of date within a month. One that sits beside the thing it describes gets fixed whenever the thing changes.

The notes also make it easier to say no. If a request doesn’t fit any existing sentence, we’re adding something new, and that deserves a short conversation rather than a quiet extra token.

Grow it from the work

After the first screen ships, the system grows only when a real need appears twice. A second card layout, a new state for a button, a heading size that keeps getting set by hand. Each addition comes with a note on where it’s used.

A small system that people trust gets used. A large one assembled in advance tends to sit in a file while the product drifts away from it. I’d rather have three tokens that everyone uses than three hundred that nobody remembers.

Portrait of Remy Varga

Written by

I’m Remy, a designer working across product, brand and systems. These notes are where I think things through between projects.

Create a free website with Framer, the website builder loved by startups, designers and agencies.