Back to Glossary 
Design System
Synonyms: UI system, component system, design language system, product design system
Do not index
Definition
A design system is the shared set of rules, reusable parts, and processes a team uses to build a product's interface consistently. It includes:
- Design tokens: named values for color, type, spacing, and radius
- Components: reusable UI pieces such as buttons and modals, in both design files and code
- Patterns: guidance for combining components to solve tasks, such as form errors or empty states
- Documentation: usage guidance, accessibility rules, and content guidelines
A style guide or component library is one part of a design system. The full system also includes the people and processes that maintain it.
Use cases
Without a system, teams duplicate work and interfaces drift apart.
- Duplicate work: 4 squads each build their own dropdown. Each has different keyboard behavior, and 2 fail accessibility checks.
- Rebrand pain: Marketing changes the brand blue. With no tokens, engineers hunt through 300 hardcoded hex values.
How it's used in practice
- Start with tokens. Define color, type, and spacing as tokens so changes can propagate across components.
- Match design and code. Map each Figma component to a coded component with consistent names and properties.
- Govern contributions. Give product teams a clear process for proposing, reviewing, and maintaining new components.
- Track adoption. Measure how much of the product uses system components and identify areas that still rely on custom UI.
Pro-tip: Treat the design system as a product. Give it users, owners, feedback channels, and measurable adoption goals
Challenges & limitations
- Maintenance cost: A system needs ongoing ownership. Without dedicated maintenance, components and documentation become outdated.
- Adoption: Teams may bypass the system when its components don't meet their needs or are slower to use than custom solutions.
- Over-rigidity: Strict rules can limit experimentation, leading teams to create unofficial variations and reintroduce inconsistency.
Free resources
- NN/g: Design Systems 101 — what a design system contains, from style guides to component and pattern libraries
- NN/g: Design Guidance: Principles, Patterns, Heuristics, and Team Charters — how the different types of design guidance fit together
- Jina Anne: The Salesforce Team Model for Scaling a Design System — how Salesforce mixed centralized and federated models for Lightning
