Start below the button
Most design systems start with a component library: buttons, inputs, cards. They look finished quickly and fall apart the first time the product needs a second brand, a dark mode or a denser table.
We start one level lower, with tokens: the named values every component is built from.
What a token is
- Colour, named by purpose rather than by hue: surface, text, border, the colour of an error.
- Space and size, on one scale, so eight pixels means the same thing everywhere.
- Type, as a short list of roles instead of a long list of sizes.
Once those are agreed in design and in code, a component is mostly a decision about which tokens to use. A second theme is a second set of values, not a second set of components.
A design system is a set of agreements. The components are what the agreements look like.
Why it is cheaper
On the Hartwell project the ticket app, the machines on the platforms and the station displays share one set of tokens. A colour change for accessibility took an afternoon and reached all three.
