process & strategy
Design system
What is a design system?
A design system is the single source of truth for an interface: the design tokens, reusable components and written guidelines that let many people build a consistent product quickly. Define something once, use it everywhere, change it in one place.
Also known as: design system, component library and tokens
The demo
Three components, two shared tokens. Change a token and watch every component move together - that single source of truth is what a design system buys you.
One accent token and one radius token, shared by all three components.
What this demo shows (text version)
A button, a tag and a card each read two shared design tokens: an accent colour and a corner radius. Choosing a different accent swatch, or switching the radius between sharp and round, updates all three components at the same time.
Nothing about the components is edited individually - they reference the tokens rather than holding their own fixed values. That is the core idea of a design system: a single source of truth means consistency by default and changes that propagate everywhere from one place, instead of being copied and re-copied across a product.
You moved one control and the button, the tag and the card all changed together - because they read from the same source, not from copies. That is the payoff: the consistency comes for free, and a change lands everywhere at once.
A design system is more than a component library. The components are the visible part, but the value lives in the shared tokens beneath them - colour, spacing, type - and the guidelines above them: when to use what. Ship components without the rules and you get a kit that is still used inconsistently.
It earns its keep at scale, and can be pure overhead before that. For one small product a "system" might be a few tokens and a handful of components; the full apparatus of governance and documentation is for when many teams must stay in step. Build the system to the size of the problem.