Design system examples: 10 public systems worth studying in 2026
Material, Apple, Carbon, Fluent, Atlassian, Lightning, Polaris, Primer, Spectrum, and GOV.UK, with the one thing each does best.
On October 1, 2025, Shopify made Polaris web components generally available for Admin, Checkout, Customer Accounts, and Point of Sale. If your team modeled its component library on the React version of Polaris, the thing you copied has moved on. Copy the reasoning, because the code will change.
The design system examples worth studying are the public ones that publish their components, patterns, and reasoning in the open. The ten below are the most instructive as of October 2026, each for one specific thing it does better than the rest.
Key takeaways
- Study each public design system for one lesson, because no single system is the right template for your product.
- Shopify's Polaris web components went generally available on October 1, 2025, across Admin, Checkout, Customer Accounts, and Point of Sale.
- As of October 2026, the Compose Material 3 1.5.0 pre-releases move Material 3 Expressive components out of experimental status.
- Atlassian's design system is public, but its license covers software that works with Atlassian products, so treat it as a reference rather than a dependency.
- The parts most worth copying are task patterns, code structure, and migration practices, not anyone's visual style.
Which design systems are worth studying in 2026?
We picked systems that are public, actively maintained, and different from each other. Notable changes and licensing were checked against official documentation in October 2026.
| System | Owner | Study it for |
|---|---|---|
| Material Design 3 | Shipping inside the platform toolkit | |
| Human Interface Guidelines | Apple | Reasoning from platform behavior |
| Carbon | IBM | Serving two code targets from one system |
| Fluent 2 | Microsoft | One design language across many products |
| Atlassian Design System | Atlassian | Saying plainly who may use it |
| Lightning Design System 2 | Salesforce | Migration honesty on a platform customers extend |
| Polaris | Shopify | Changing foundations in public |
| Primer | GitHub | Consistency inside one large, long-lived product |
| Spectrum | Adobe | Separating behavior from styling |
| GOV.UK Design System | UK government | Patterns for whole tasks |
Platform systems: Material Design 3 and Apple's HIG
Material Design 3
Google ships Material 3 as the material3 library for Jetpack Compose. As of October 2026, 1.4.0 is the stable release, and the 1.5.0 pre-releases graduate Material 3 Expressive APIs such as SplitButton and FloatingToolbar out of experimental status. The lesson: a design language lands hardest when it is the default in the toolkit developers already use.
Apple Human Interface Guidelines
The HIG argues from platform behavior rather than from a component inventory, and that reasoning is its value. Apple introduced Liquid Glass at WWDC25 in June 2025, reintroduced its design principles at WWDC26 in June 2026, and published iOS and iPadOS 27 and macOS 27 UI kits for Figma in September 2026. There is no component package to install. Read it for the why.
Enterprise systems: Carbon, Fluent 2, Atlassian, and Lightning
IBM Carbon
Carbon's repository publishes @carbon/react and @carbon/web-components under the Apache 2.0 license. React teams and framework-agnostic teams consume the same design decisions from one source. If your company runs more than one front-end stack, this is the structure to copy.
Microsoft Fluent 2
Fluent 2 is Microsoft's design system, and it faces a problem most growing companies meet eventually: keeping one design language recognizable across products and platforms that cannot look identical. Read it with one question in mind: which decisions should every product share, and which should each product make for itself?
Atlassian Design System
Atlassian publishes its system openly, but its license grants use for building software that interoperates with Atlassian's products and bars any use it does not expressly permit. Public is not the same as open. The lesson cuts both ways: read the license of anything you plan to depend on, and write an equally clear usage policy for your own internal system.
Salesforce Lightning Design System 2
Salesforce's Trailhead documentation states that SLDS 2 features, including the Cosmos theme, are generally available in all Salesforce editions as of Winter '26. It also warns that custom components may need manual uplift. That honesty about migration cost is the lesson for any team planning a visual refresh.
Developer and public-sector systems: Polaris, Primer, Spectrum, and GOV.UK
Shopify Polaris
Polaris is now a unified set of web components, kept up to date through Shopify's CDN and covering Admin, Checkout, Customer Accounts, and Point of Sale. Few teams are willing to change foundations that publicly.
GitHub Primer
Primer is GitHub's design system, built for one very large, long-lived product. That makes it a useful counterweight to systems built for dozens of products. In a mature single product, much of the work is keeping old and new screens consistent rather than adding components.
Adobe Spectrum
Adobe's repository holds React Aria, a library of unstyled components and hooks for building accessible UI, alongside React Spectrum, the styled implementation of Adobe's design system, all under Apache 2.0. Separating behavior from style lets other teams reuse the hard accessibility work without adopting Adobe's look.
GOV.UK Design System
GOV.UK documents patterns for whole tasks, such as asking for names and addresses, filling in forms, and creating accounts, not just components. GOV.UK Frontend v6.6.0 shipped on 15 October 2026, and GOV.UK began a brand refresh in June 2025.
If you copy one thing from any system on this list, copy this pattern layer.
What should a product team copy from these design systems?
Copying a public system's visual style gets you someone else's brand. Copying its structure gets you their years of mistakes for free. Use this steal sheet, one item per sprint.
The five-part steal sheet
- Task patterns from GOV.UK. Document your three most common flows, such as sign-up or checkout, as patterns with guidance.
- One source for every stack, from Carbon. Publish the same decisions to each front-end stack you run, so none of them drifts.
- Layering from Spectrum. Keep accessible behavior separate from visual styling in code, so a rebrand never touches keyboard logic.
- Migration honesty from Lightning and Polaris. When you change foundations, publish what breaks, what to do, and by when.
- A usage policy from Atlassian. Write down who may use your system, for what, and who to ask when the answer is unclear.
What not to copy: their component count. A system built for thousands of engineers carries components your product will never need, and each one is something you would maintain.
Where Pegasus fits
Most of the systems above are built for one company's products. Pegasus is built to be adopted and rethemed. It ships one design system on two synchronized surfaces: a Figma library with 1,540 components for web and native mobile, and React components in TypeScript built on shadcn/ui, Base UI primitives, recharts, and Tailwind CSS. Component names, variant structure, and tokens are the same on both.
The steal sheet maps onto it directly. Its 470 design tokens live as Figma variables in light and dark modes, and one token source themes both Figma and the code's theme object. Each component is documented with anatomy, properties, and layout and spacing, and Storybook ships with stories and tests. Accessibility is built to WCAG 2.1 AA, with keyboard paths, focus states, and contrast documented per component.
FAQ
What is the best design system example to learn from?
There is no single best one. Study GOV.UK for task patterns, Carbon for serving several frameworks from one source, Spectrum for separating accessible behavior from styling, and Apple's Human Interface Guidelines for reasoning about platform behavior. Pick the system whose problem most resembles yours, then copy its structure rather than its visual style.
Can I use Material Design or Carbon in my own product?
Carbon's React and Web Components packages are published under the Apache 2.0 license, and Google publishes Material 3 as the material3 library for Jetpack Compose. Check each project's license and maintenance status before you depend on it, and note that some public systems, such as Atlassian's, license their use only for specific purposes.
Is Shopify Polaris still a React library?
Shopify's current Polaris is a unified set of web components, generally available since October 1, 2025, kept up to date through Shopify's CDN, and covering Admin, Checkout, Customer Accounts, and Point of Sale. If your codebase still uses the React version of Polaris, check Shopify's developer documentation before you build new features on it.
Sources
- Polaris unified web components are now stable, Shopify (2025)
- Compose Material 3 releases, Android Developers (2026)
- What's new in design, Apple Developer (2026)
- Carbon repository README, IBM (2026)
- Atlassian Design System license, Atlassian (2026)
- Plan your transition from SLDS 1 to SLDS 2, Salesforce Trailhead (2026)
- React Spectrum repository README, Adobe (2026)
- GOV.UK Design System, Government Digital Service (2026)
One system. In Figma and in code.
Pegasus ships 1,540 components, 470 tokens, matching React code, Storybook, and a local MCP server. $149, one-time.
Get the full system