Design System
A reusable set of components, patterns, and rules for building product UI.
A design system is the single source of truth for how a product looks and behaves — reusable components, design tokens, patterns, and documentation that keep teams consistent and fast. It's the difference between every screen being a one-off and the product feeling coherent.
Beyond consistency, a design system speeds up design and development, eases scaling, and makes onboarding new team members far easier.
Key characteristics
- Combines design tokens, reusable components, patterns and usage guidelines.
- A single source of truth shared across design and code for consistency at scale.
- Speeds delivery — teams assemble from tested parts instead of rebuilding.
- Famous examples: Google Material, Atlassian, Shopify Polaris, IBM Carbon.
Example
When a team updates the primary button's radius once in the design system, every product surface using that component updates consistently — no manual hunting.
Frequently asked questions
What is the difference between a design system and a component library?
A component library is the set of reusable UI building blocks. A design system is broader — it also includes tokens, principles, content and accessibility guidelines, and governance for how everything is used.
Does a small team need a design system?
Even a lightweight one helps: shared tokens and a handful of components prevent drift and speed work. The system should match the team's size — it can grow over time.
Related terms
Need this done, not just defined?
I design and build it — Framer sites, product UI/UX, and more.