Studying public design systems is one of the fastest ways to get better at interface design. They show how mature teams make decisions about colour, type, spacing, components, accessibility and writing, and most of them explain why. Here are twelve worth studying, and what each one teaches best.
1. Material Design 3 (Google)
The most complete public system. Its colour system generates full tonal palettes from a single source colour, and its guidance covers motion, layout and adaptive design in depth. Study it for colour roles and theming.
2. Human Interface Guidelines (Apple)
Less a component library, more a philosophy for each Apple platform. Study it for platform conventions: navigation, gestures, typography and what feels native on iOS, macOS and visionOS.
3. Carbon (IBM)
Built for complex enterprise software. Study it for data-heavy interfaces: tables, dashboards, data visualisation and dense layouts.
4. Polaris (Shopify)
Excellent writing about why decisions were made, and strong content guidelines. Study it for voice, microcopy and merchant-friendly patterns.
5. Atlassian Design System
Powers Jira, Confluence and more. Study it for tokens and collaboration tools: how a large company keeps many products consistent.
6. Fluent 2 (Microsoft)
Covers web, Windows, iOS and Android from one system. Study it for cross-platform design and how one language adapts to different platforms.
7. Primer (GitHub)
A developer-focused system with clear, practical components. Study it for interfaces for technical users and how the system handles code and dense information.
8. Lightning (Salesforce)
One of the early large enterprise systems, and still a reference for design tokens, a term its team helped popularise.
9. Spectrum (Adobe)
Built for creative tools. Study it for tools and panels: how to keep a complex creative interface usable.
10. Base (Uber)
A clean, flexible system for React. Study it for theming and overrides in code.
11. GOV.UK Design System
Designed for everyone in a country, including people with low digital confidence and assistive technology. Every pattern is backed by research. Study it for accessibility and form design. It is probably the best guidance on forms anywhere.
12. Your own product
Your product already has an implicit design system, even if nobody wrote it down. Screenshot your own buttons, forms and empty states and put them side by side. The inconsistencies you find are your roadmap.
What to study in each system
Do not try to read a design system end to end. Pick one topic and compare it across three or four systems:
- How they name colour tokens.
- How they handle button hierarchy.
- How they design form validation.
- What their empty states and error messages say.
- How they document when *not* to use a component.
Comparing the same decision across systems teaches you more than reading any one of them.
Save what you learn
When a pattern in one of these systems answers a question you have, save the screenshot with the link and a note on the decision it shows. A small library of "how Carbon handles dense tables" and "how GOV.UK writes error messages" is worth more than bookmarking twelve websites. GetRef reads the text in each screenshot, so the guidance itself becomes searchable. See how to build a design library and UI design patterns.
Common questions
- What are the best design system examples?
- Widely studied public design systems include Google Material Design 3, Apple Human Interface Guidelines, IBM Carbon, Shopify Polaris, the Atlassian Design System, Microsoft Fluent 2, GitHub Primer, Salesforce Lightning, Adobe Spectrum, Uber Base and the GOV.UK Design System.
- What should a design system include?
- Foundations such as colour, type, spacing and tokens, a component library in design and code, usage guidelines for each component, content and accessibility guidance, and a way to contribute and track changes.
- Which design system is best for beginners to study?
- GOV.UK and Shopify Polaris are excellent starting points because their guidance explains why decisions were made, not just what the components look like. Material Design is the most complete reference.
- Are there design system examples in Figma?
- Yes. Many teams publish their libraries to the Figma Community, including Material Design 3 and several others, so you can inspect components, variants and tokens directly.
