Tokens, components, patterns. How a maintained system makes design and code speak the same language.
Category · Frontend & UI
One language for design and code.
A design system is more than a component library. It has three layers: tokens (colours, spacing, typography as named values), components (button, input, card as reusable building blocks) and patterns (how you combine them into layouts and flows).
The crux is that the same tokens hold in Figma and in code — one blue is the same blue everywhere.
What it delivers in operation.
For products we develop and operate over years, a well-maintained system is the lever against drift. New features look like what's already there, design changes flow through tokens in one place, and onboarding new developers takes days rather than weeks.
The honest price.
A design system is an investment that only pays off above a certain size and lifespan. For a one-off project, building one isn't worth it. And a system nobody maintains quickly becomes a collection of outdated components that confuses more than it helps.