A token-first design system built from scratch while the products kept shipping. No systems team - a shared Figma library and the discipline to treat consistency as a feature.

Overview
Every product team was solving the same visual problem from scratch. Inconsistency was slowing shipping and wearing down trust in the product.
The problem
And one constraint: no team, no pause in product work.
Five button radii. Three versions of the same status badge.
No single source of truth, so every handoff was renegotiated.
Teams rebuilt patterns that should have been reusable.
Approach
Every colour, space and shadow is a named token. Change the token, every instance follows.
Each component ships with its props, states and rules. Nothing left to guess in handoff.
Tokens and components arrived with real features, never in a silo.
Annotations live inside the frames, not in a page nobody reads.
Architecture
A raw value never reaches a component. It is named for its intent first, so a whole theme moves by changing one primitive.
Colour
Primitives here; components only ever see the semantic names.
Backgrounds, text, surfaces, separators
Calls to action, links, active states
Destructive actions, validation
Confirmation, completed, available
Caution, pending, time-sensitive
Typography
Lato in three weights, each size a named token.
Space and shape
On an 8pt rhythm, every value a reusable token.
Icons
Seven functional sets on a 24px grid, one stroke and round caps - replacing a third-party set whose mixed styles made the product feel assembled rather than designed.

Components
If hover is not designed, engineering invents it. If loading is not specified, it gets cut. So each component ships with every state it can be in.
Button
Input
Selection
Primary, secondary, tertiary and ghost. Every state, no one-off styles.
Seven states, three sizes. Error and helper text built in, not detached layers.
The indeterminate state handled up front - the gap most teams find in production.
Single, multi and searchable, on the input's own anatomy and tokens.
Line and pill. The active state is the accent token, so a theme swap updates every tab.
Built for travel: ranges, blocked dates, a time picker.
Handover. A Figma component library and a developer handover document, with the rules annotated inside the frames.
Impact
After three months in production.
Before
After
A system nobody uses does not exist. Ship an imperfect v1 fast and grow it from real use.
Components can be rebuilt; tokens carry the weight. Naming them well early saved weeks of migration later.