How to Get Design Systems Right
A shared library of components, tokens and usage rules that a design team and a development team both build from, so the same button is the same button everywhere.
Marcus Adeyemi
Where most projects go wrong
The usual mistakes:
- Designing components nobody has asked for yet
- Letting the design file and the coded component drift apart with no check on either
- Treating the system as finished at launch
- Locking components down so hard that teams fork them instead
What good looks like instead
- Start from an audit of what already exists rather than a blank page
- Name tokens by role rather than appearance, so color-primary survives a rebrand that color-blue does not
- Ship documentation alongside the component, because an undocumented component gets rebuilt
- Build accessibility into the component once instead of asking every consumer to remember it
- Give the system an owner; a system belonging to everyone belongs to nobody
Why it matters
Without one, every new page re-decides the same questions and the answers drift, which is how a site ends up with eleven shades of the primary color and four different date formats.
The specs that matter
| Measure | Figure |
|---|---|
| What a token holds | a named decision such as color, spacing, radius or type scale |
| Typical first components | button, input, select, modal, card, table, alert |
| Where systems usually fail | documentation and adoption, not component code |
| Version discipline | semantic versioning, so a breaking change is visible to consumers |
| Contrast floor for components | 3:1 for non-text UI elements under WCAG 2.2 AA |
Knowing when to hand it over
Tip: Bring in help when two teams have built parallel systems, when adoption has stalled below half the product, or when a rebrand needs to land across a system that was never tokenised.
Where this comes from
- Material Design — Design system foundations
- GOV.UK Design System — Community and contribution
- Figma Help Center — Libraries and components
The figures and practices above come from the sources listed.
Working on something like this?
We take on Web Design & Development work for teams who want it done once, properly. Tell us what you are building and we will tell you honestly whether we are the right studio for it. Start a project.
Where to go next
Spotted something wrong? Report an error on this page. We correct on the page and say what changed.
