UX glossary
Design System
A design system is a shared toolkit of reusable building blocks and rules. It helps teams design and build interfaces that look and behave consistently everywhere.
Imagine an online bank whose app, website and customer portal are built by three different teams. On the website, the most important button is blue and square. In the app, it’s green and rounded. In the portal, it says “Submit” instead of “Transfer.” Each team did solid work on its own. Put together, the product still feels like a patchwork quilt.
This is exactly the problem a design system solves: it makes sure everyone builds with the same parts and follows the same rules.
Explained simply
A design system is like a well-organized box of building blocks that comes with instructions. The blocks are ready-made interface elements such as buttons, input fields or notification boxes. The instructions explain when to use which block and how it behaves. Anyone building something new reaches into the box instead of carving every piece from scratch.
The Nielsen Norman Group describes a design system, in essence, as a complete set of standards for managing design at scale: reusable components and patterns that cut down on duplicate work and give teams a shared language.
What a design system is made of
Most design systems have three layers. The style guide sets the foundations: colors, typography, logo, tone of voice and rules for accessibility. The component library holds the individual building blocks, each with a name, a description, its states (such as “disabled” or “error”) and, ideally, the matching code. The pattern library shows how components work together, for example in a sign-up form or a product list.
Underneath, you’ll often find design tokens. These are named values that store design decisions, such as “primary color” or “spacing small.” If the primary color changes, you update one token and every place that uses it follows. Since October 2025, there’s a first stable, vendor-neutral standard for this: the Design Tokens Specification 2025.10, published by a W3C community group.
A closely related idea is Atomic Design, a method for building components from the smallest element up to the full page. You can read more in What Is Atomic Design?
An example
Back to the online bank. Before: every team builds its own forms. Error messages appear at the top, below the field or not at all. A new screen takes days because every little detail gets debated.
After: there’s one shared input field with defined states, one error pattern and one rule for button labels. New screens are assembled from existing parts, and when the bank updates its brand color, the team changes a single token instead of hundreds of files.
Why it matters
A design system saves time on routine work, so more energy goes into the genuinely hard questions: flows, content, priorities. It makes onboarding new team members easier. And it creates a shared language between design and engineering, because everyone means the same thing by “primary button.” For smaller teams, a lean start often makes the most sense. Design Systems for Small Teams: When They Pay Off and How to Start Small shows how.
In practice
- Start with what you have. Collect screenshots of every existing button, color and form field. The inconsistencies show you where a shared standard will help most.
- Treat design and code as one. A component that only exists in the design tool will quickly drift in code. Maintain both together with your developers.
- Decide who owns it. A design system is never finished. Agree on who reviews, documents and announces changes.
Related terms
Wireframe, Prototype, Microcopy