design system
/dɪˈzaɪn ˌsɪstəm/noun
A design system is a collection of reusable interface components, design rules and documentation that teams use to design and build consistent digital products.
For the new customer portal, the team defined buttons, forms and colour usage in a design system.
A design system defines how a digital interface looks and works. It includes conventions for colour, typography, spacing and language. It also describes reusable elements such as buttons, input fields, notifications and navigation. Designers and developers use the same building blocks and principles.
What does a design system contain?
The details vary between organizations and products. A design system often includes design principles, style conventions, Glossary · In briefcomponentA component is a distinct part of software with its own task and a clear way of interacting with other parts.Read more and guidance on their use. A component needs more than a visual example. Its variants, states, interactions and accessibility can also be documented, clarifying how a button responds to keyboard input or when an error message appears.
A design system stays useful when it evolves with the product. New patterns are added when they are needed repeatedly, while outdated choices can be phased out. This requires clear agreements on maintenance and changes.
How it differs from a component library
A component library usually contains reusable elements in design files or code. A design system also includes rules and documentation explaining when and why to use those elements. It helps teams solve similar problems consistently.
Components can have variants for different uses. The system keeps those variants consistent with one another, making the product recognizable and understandable without revisiting every decision.