By Quick answer: What are good examples of design systems?
- Platform — Material Design, Apple HIG.
- Enterprise — Carbon, Atlassian, Lightning, Fluent.
- Product-specific — Polaris, Primer, Spectrum, Base, Gestalt.
- Public sector — GOV.UK, US Web Design System.
- Learn from — tokens, guidance and governance, not just components.
Key takeaways
- A design system is shared decisions — tokens, components, patterns, content and governance.
- Great systems document when not to use a component.
- Accessibility guidance is a sign of a mature system.
- Start small: tokens and five core components beat an unused library.
- Adoption is the real measure — a system nobody uses is just documentation.
A design system is a company's design decisions, written down and made reusable: the colours, type, spacing, components and rules that let many teams build one coherent product. The best public systems are free masterclasses in product design. Here are fifteen worth studying, grouped by what they teach best.
Platform systems
Enterprise systems
Carbon (IBM)
Mature, open-source, data-dense enterprise UI with strong accessibility documentation3.
Atlassian Design System
Tokens, components and content guidance for complex collaboration tools5.
Lightning (Salesforce)
A pioneering enterprise system with detailed patterns for CRM-scale products.
Fluent 2 (Microsoft)
Cross-platform design across Windows, web and mobile Microsoft products.
Product-specific systems
Polaris (Shopify)
Excellent content and voice guidelines alongside components for merchant tools4.
Primer (GitHub)
Developer-focused UI with clear component guidance and accessibility notes.
Spectrum (Adobe)
Consistency across a huge family of creative and document products.
Base (Uber)
A system spanning rider, driver and internal tools.
Gestalt (Pinterest)
Thoughtful guidance on accessibility and inclusive design.
Paste (Twilio)
Clear documentation of when and how to use each component.
Ant Design
A widely used open-source system for enterprise web apps, popular in admin panels.
Public sector
GOV.UK Design System
Research-backed patterns for forms and services used by millions, with accessibility at the core6.
U.S. Web Design System
Accessible, mobile-friendly components for government websites.
What to learn from them
| Layer | What great systems document |
|---|---|
| Tokens | Colours, type, spacing, radii, elevation — as named, reusable values |
| Components | Variants, states, accessibility behaviour, code |
| Patterns | Forms, navigation, empty states, errors |
| Content | Voice, tone, terminology, error messages |
| Governance | Contribution, versioning, deprecation |
Start your own (small)
- Audit the screens you have — list repeated elements and inconsistencies.
- Define tokens for colour, type and spacing.
- Build five core components — button, input, card, list item, navigation.
- Document usage — when to use, when not to, accessibility notes.
- Ship it in code and measure adoption.
Build components in Figma with variants — see how to design an app in Figma — and bake in the accessibility checklist from the start.
Key terms, defined
Design system — shared standards, components and guidance for building products. Design token — a named value for a design decision. Component — a reusable UI element. Pattern — a reusable solution to a common design problem. Governance — how the system is maintained and evolved.
Frequently asked questions
What is a design system?
A shared set of standards for building products consistently: design tokens (colours, type, spacing), reusable components, patterns, content guidelines and the processes for maintaining them.
What's the difference between a design system and a UI kit?
A UI kit is a set of design files. A design system adds coded components, usage guidance, accessibility rules, content standards and governance so teams make consistent decisions.
Which design system should I base my app on?
For native apps, follow Material Design on Android and Apple's Human Interface Guidelines on iOS. For web products, many teams start from an open-source system and adapt it to their brand.
What are design tokens?
Named values for design decisions — colours, typography, spacing, radii, shadows — stored in a format both designers and code can use, so changes propagate consistently.
When should a startup build a design system?
Once you have repeated components and more than one designer or front-end team. Start with tokens and a few core components; grow it as needs appear.
How do you measure a design system's success?
Adoption across products, consistency and accessibility improvements, design and development time saved, and fewer one-off components.
Sources
- Google — Material Design 3
- Apple — Human Interface Guidelines
- IBM — Carbon Design System
- Shopify — Polaris
- Atlassian Design System
- GOV.UK Design System
- Checked October 23, 2026. Figures that change — fees, salaries, prices — are reviewed every six months; if something is out of date, tell us.
Where to go from here
- How to design an app in Figma — components and styles in practice
- App accessibility checklist — what mature systems bake in
- UI/UX designApp design trends for 2027 — what's changing, and what's worth adoptingMobile app design trends for 2027: Apple's Liquid Glass, Material 3 Expressive, AI in the flow, voice and vernacular, passkeys and accessibility.
- Design historyLogo evolution: how 20 famous logos changed, and why almost all of them got simplerLogo evolution of 20 brands from Coca-Cola (1886) to Air India (2023): who designed each, what changed, and the memory science behind simpler logos.
- Making moneyThe business model of Duolingo, Spotify and Tinder — three freemium playbooksThe business model of Duolingo, Spotify and Tinder: how each turns free users into payers, with Q2 2026 numbers, pricing tactics and lessons for your own app.
- How to make an appHow to make an app with zero coding experience (2027 guide)You can make an app without coding in 2027: validate the idea, design it, then build with no-code tools, AI app builders or a hired developer. Step by step.
- How to make an appHow to add "Login with Google" to your appAdd Sign in with Google to Android, iOS or web: Google Cloud setup, Credential Manager or Identity Services, ID-token checks and Apple's login rule.
- Career guidesHow to get a design systems job in 2027: tokens, components, documentation, governance, adoption and working between design and engineeringHow to get a design systems job in 2027: tokens, components, documentation, governance, adoption metrics, design-code parity, pay and a plan.
Get the ideas, not the noise.
Sign up with Google and we’ll send you short UX psychology tips by email — why people tap, stall and leave, and what to do about it. Unsubscribe anytime. Prefer something to keep? Get the free Laws of UX guide as a PDF.
See your product through your users' eyes.
A behavioral UX audit of your app or SaaS product: why users hesitate, stall and leave, and a prioritized fix list. Fixed price, 2–4 weeks.