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 once, use everywhere, change in one place.
Also known as: design system, component library and tokens
Prefer to watch?
Watch the recap 0:37
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.
A design system is the single source of truth for an interface - the tokens, reusable components and guidelines that let many people build a consistent product fast. Define something once and reference it everywhere, and a single change ripples out to every screen instead of being redone by hand.
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.
Try the hands-on UX design system examples on this page to see how tokens, components, and guidelines create consistency across interfaces. You don’t need to guess how it works - interact with the live demo to understand how a single change ripples through a design system.
UX design system examples let you build interfaces consistently, change one thing and update everything. Try the interactive demo here to see how it works. You can see UX design system examples in action on this page - no screenshots or external tools - just hands-on, live components you can tweak and test.