Design systems: what to build first and what to leave out
Most design systems fail by being too ambitious in month one.
Start a design system with tokens — type scale, colour, spacing, radius — then the eight or nine components you use on every screen. Documentation and exhaustive component coverage come later. Systems fail when they are built as a project rather than grown alongside the product.
Key takeaways
- Tokens first: type, colour, spacing, radius, shadow. Everything else assembles from those.
- Build the components the product uses today, not the ones a design system 'should' have.
- The system must exist in code and in Figma, or the two will drift within a quarter.
- Name components for what they are, not for where they first appeared.
A design system is not a deliverable you finish. It is a habit with a file attached, and the most common failure is treating it as a six-week project that produces ninety components, forty of which nobody ever uses.
Start with tokens
- Type scale — five or six sizes with line heights, not eleven that are two pixels apart.
- Colour — semantic names (surface, border, muted, accent) rather than 'grey-3', so a theme change is possible.
- Spacing — one scale, used everywhere. This alone fixes most 'it looks off' feedback.
- Radius, shadow, motion — small sets, applied consistently.
Tokens are where the consistency actually comes from. A team with good tokens and no component library still produces a coherent product; the reverse is not true.
Then the components you use daily
Button, input, select, checkbox, card, modal, table row, toast, nav item. That is most products. Build those properly — every state, every size, keyboard behaviour defined — and add others when the second use case appears, not when someone imagines it.
It has to exist in code
A Figma library with no code counterpart drifts within a quarter, because engineers build what they need and nobody updates the file. Define tokens once, export them into the styling layer, and build the components in React alongside the Figma versions.
Accessibility, decided once
Contrast, focus states and touch targets belong in the component, not in a checklist somebody runs before launch. Decided once at the system level, they are free forever. Decided per screen, they are skipped under deadline every time.