Design system
A collection of reusable components, design tokens, and documented rules that define how a product looks and behaves consistently.
What it is
A design system is a single source of truth for a product's visual and interaction language. It includes a component library (buttons, inputs, cards), design tokens (colors, spacing, type scales), usage guidelines, and documentation. Well-known examples include Google's Material Design, Apple's Human Interface Guidelines, and Airbnb's Design Language System. A design system ensures that every screen in a product feels like it belongs to the same family.
When you would use it
When building products that need visual consistency across many screens, teams, or platforms.
Common operations
- Referencing the design system to pick the right component for a new screen.
- Adding a new component to the system with documented usage rules.
- Updating a color token and watching it propagate across the entire product.
Related terms
Where this is taught
No learning path uses this term yet. Browse the Learning Atlas for guided sequences through related ideas.