6 August 2026

Open source design systems: 10 worth using in 2026

The best open source design systems in 2026 are IBM Carbon, Google Material Design 3, GitHub Primer, Adobe Spectrum, and AWS Cloudscape: complete systems where the tokens, components, and usage guidelines are all published under a permissive license. Plenty of lists pad this category with component libraries that ship code but no design decisions. This list sticks to actual systems, ranks them by how much you can use in a real product, and flags the two big 2025 status changes (Material Web and Polaris) that most roundups still miss.

Why open source design systems matter

An open source design system is a company's entire design operating manual, published for free: color and spacing tokens, a type scale, component code, and the written rules for using them.

You inherit thousands of solved decisions. Focus states, error patterns, table density, contrast ratios. Systems like Carbon and Spectrum encode years of enterprise UI work you don't have to redo.
The license lets you ship. Apache 2.0 and MIT (and CC0 for USWDS) allow commercial use, modification, and redistribution. No design tool subscription required to read the source.
They are the best structural reference available. Even if you never install the components, seeing how IBM names tokens or how GOV.UK documents a pattern teaches you how to organize your own system.
Accessibility comes built in. Primer, Spectrum, and the government systems treat WCAG conformance as a component requirement, not an afterthought.
Maintenance status is public. Open repos mean you can see whether a system is actively developed before betting on it. Two systems on this list changed status recently; the commit history told the story before the announcements did.

1. IBM Carbon

Carbon is IBM's design system, published under Apache 2.0 with over 120 repositories of components, tooling, and guidelines.

What it does:

Full React component library (carbon-design-system/carbon, Apache 2.0) plus Web Components, Angular, Vue, and Svelte implementations
Complete token architecture: color, spacing, typography, and motion tokens with light and dark themes
Carbon Charts and the most thorough data visualization guidelines of any open system
IBM Plex, the system's typeface family, is itself open source under the SIL Open Font License
Figma libraries, usage guidelines, and content guidelines all public

Best for: data-heavy enterprise products and teams studying how a complete system is organized

Why it makes the list: Carbon is the most complete open source design system, full stop. Code, tokens, guidelines, charts, and typeface are all open. Our design system examples roundup uses it as the organization benchmark.

2. Google Material Design 3

Material Design 3 is the most influential design system ever published: full guidelines, an open token system, and component specs for web, Android, and Flutter.

What it does:

Complete public guidelines: color roles, type scale, elevation, motion, and adaptive layouts
Dynamic color system that generates a full palette from a single seed color
Material Web (@material/web) provides Web Components under Apache 2.0
Material Symbols icon set, free under Apache 2.0
Design tokens exposed as CSS custom properties

Best for: learning system architecture, Android-adjacent products, and Flutter apps

Why it makes the list: the guidelines remain the most comprehensive free design education available. One honest caveat: Google is no longer actively staffing Material Web, and the repo describes itself as in maintenance mode pending new maintainers. The M3 spec and Android/Flutter implementations remain active; the web components do not. Treat Material on the web as a reference, not a dependency.

3. GitHub Primer

Primer is GitHub's design system: the components, primitives, and interface guidelines behind github.com, published under MIT.

What it does:

primer/react, the maintained implementation used in production on GitHub
Design tokens ("primitives") for color, spacing, and typography with light, dark, and colorblind-friendly themes
Interface guidelines covering UI patterns, accessibility, and content
Octicons icon set, also MIT
primer/css still exists but is in keep-the-lights-on mode; the React package is where development happens

Best for: developer tools and products that want GitHub's calm, text-dense aesthetic

Why it makes the list: Primer is the reference for developer-facing UI. Dense information display, first-class dark mode, and accessibility baked into component APIs. It is also a live lesson in system evolution: watch which packages GitHub invests in.

Tip: Primer's look is GitHub's brand. If you want the structure without the identity, extract your own values into a DESIGN.md and keep Primer as the structural reference.

4. Adobe Spectrum and React Aria

Spectrum is Adobe's design system, and its open source implementation (adobe/react-spectrum, Apache 2.0) is really three libraries in one.

What it does:

React Spectrum: fully styled components implementing Adobe's design language
React Aria: unstyled hooks and components providing accessibility, keyboard navigation, and internationalization for your own design system
React Stately: cross-platform state management for complex components
Public guidelines covering color science, platform scale (desktop vs touch), and internationalization for 30+ locales

Best for: teams building their own component layer who want enterprise-grade accessibility for free

Why it makes the list: React Aria has quietly become the accessibility engine of the modern web. Component systems across the ecosystem build on it rather than reimplementing focus management and ARIA semantics. Even if Spectrum's visual style is not yours, the underlying libraries probably should be.

5. AWS Cloudscape

Cloudscape is the design system behind the AWS Console, open sourced in 2022 under Apache 2.0.

What it does:

60+ React components and 30+ pattern guidelines built for consoles and dashboards, supporting 220+ AWS services in production
Dashboard-specific components: property filters, configurable tables, split panels, board layouts with drag and drop
Full chart library with accessible color sequences
Comfortable and compact density modes, switchable at runtime

Best for: enterprise SaaS consoles and internal tools with heavy data display

Why it makes the list: no other open system ships this much dashboard-specific machinery. It tops our best design systems for dashboards list for exactly that reason. The trade-off: your product will look like AWS unless you retheme deliberately.

6. Microsoft Fluent UI

Fluent UI is Microsoft's design system implementation, MIT licensed, spanning React and Web Components plus native libraries for iOS/macOS and Android.

What it does:

Fluent UI React v9 with a full design token system and runtime theming
The component stack behind Microsoft 365 and Teams, so it is battle-tested at extreme scale
Fluent UI System Icons, a full icon set under MIT
Cross-platform coverage: web, Windows, Apple platforms, Android

Best for: products in the Microsoft ecosystem and teams needing one system across web and native

Why it makes the list: few open systems cover this many platforms with official first-party libraries. If your product lives anywhere near Microsoft 365, Fluent is the native choice.

7. Ant Design

Ant Design from Ant Group is the deepest open source component catalog in the React ecosystem, MIT licensed.

What it does:

60+ production components: virtual-scrolling tables, tree selects, cascaders, transfer lists
Design token system with 400+ tokens and compact density mode
The AntV charting ecosystem (G2, G6, S2) for data visualization
Built-in i18n for 60+ locales
Published design guidelines, not just component docs

Best for: enterprise B2B products with complex forms and dense data tables

Why it makes the list: for CRM, ERP, and admin-panel work, nothing matches the breadth. The visual style is recognizable, but the token system has made retheming genuinely viable.

8. Shopify Polaris

Polaris is Shopify's design system: excellent public guidelines and an admin-UI component set, currently mid-transition.

What it does:

Public guidelines covering content, patterns, and design foundations for commerce admin UIs
Token system for color, spacing, typography, and motion
The MIT-licensed React implementation is now deprecated and archived; Shopify no longer accepts contributions there
Its replacement, Polaris Web Components, shipped for Shopify app developers in late 2025

Best for: Shopify app developers, and anyone studying token naming and content guidelines

Why it makes the list: with a caveat. The guidelines remain among the best published anywhere, and for building inside Shopify's admin the new web components are the path. As a general-purpose open system for non-Shopify products, its deprecated React layer makes it a study reference rather than a foundation. Most 2026 lists have not caught up with this change.

9. U.S. Web Design System (USWDS)

USWDS is the United States federal government's design system, and the most permissively licensed entry here: public domain under CC0 1.0.

What it does:

Components tested against federal accessibility requirements (Section 508 / WCAG)
A color token system with built-in contrast math: every color has a 0 to 100 grade, and a grade difference of 50+ between two colors guarantees WCAG AA contrast (the "magic number")
Pattern guidance for the hard parts of civic UI: complex forms, address entry, identity verification
No attribution required, for anything, ever

Best for: forms-heavy applications and teams that must prove accessibility compliance

Why it makes the list: the CC0 dedication removes even the minimal obligations of MIT. And because it serves users across every device and ability level by legal mandate, its form patterns are more rigorously tested than most commercial systems'.

10. GOV.UK Design System

The GOV.UK Design System powers British government services, with code freely available under MIT.

What it does:

Components and patterns validated by user research at national scale, with the research findings summarized per pattern
The famous GOV.UK typography and layout approach: radical clarity, minimal decoration
Frontend implementation (govuk-frontend) in plain HTML/CSS/JS, framework-agnostic
Each component page documents when to use it, when not to, and known accessibility issues

Best for: content-heavy services, and anyone learning to write usage guidelines

Why it makes the list: it is the best-documented design system in the world per component. The "when not to use this" sections alone are a masterclass. Visually minimal by design, so it doubles as a neutral base.

What about shadcn/ui, MUI, and Chakra?

They are open source (MIT) and excellent, but they are component libraries, not design systems: they ship working code without design decisions. No brand palette logic, no type scale rationale, no usage rules. The r/DesignSystems community makes exactly this distinction when people ask for recommendations. Install shadcn/ui or MUI as your implementation layer, then supply the decisions yourself: design tokens, a type scale, and written rules.

The license covers the code, not your identity

Here is the catch with every system above: an open source license means you may use the design decisions, not that you should. Carbon encodes IBM's brand. Primer encodes GitHub's. Adopt one wholesale and your product wears their identity, which is fine for an internal tool and a problem for anything customer-facing.

The practical split:

Structure from the famous systems. Token naming, component organization, documentation scope. Study Carbon and GOV.UK for this.
Implementation from the ecosystem. shadcn/ui, React Aria, or a full system's components if the look fits.
Values from a product whose look you actually want. This is the layer no open source system gives you, because their values are their brand.

That third layer is what the duply library provides: 250+ shipped products (Linear, Stripe, Vercel, Ramp, Notion) extracted into DESIGN.md files with exact tokens, type scales, spacing systems, and written rules. Open a Linear, Stripe, or Vercel DESIGN.md and you get the design decisions of a real product in a single readable file.

How to get started

Pick your structural reference from this list (Carbon if unsure) and skim how it organizes tokens and components.
Pick your implementation layer: a full system's components, or shadcn/ui plus React Aria if you want control.
Get your values from the library: choose a product whose look fits yours and copy its DESIGN.md into your repo root.
If an AI agent writes your UI, point it at the file: how to give your AI agent a real design system has the per-tool setup for Claude Code, Cursor, v0, Lovable, and Bolt.

FAQ

Are open source design systems free for commercial use? Yes. Everything on this list ships under Apache 2.0, MIT, or CC0, all of which permit commercial use and modification. The code and design tokens are open; company logos and trademarks are not, so you can use Carbon's components but not IBM's logo.

What is the most popular open source design system? By influence, Material Design; by GitHub adoption among full systems, Ant Design and Material's implementations lead. But "popular" splits by category: shadcn/ui dominates new React projects while not being a design system in the strict sense.

What is the difference between an open source design system and a component library? A component library (MUI, Chakra, shadcn/ui) is installable code. A design system is decisions plus code: tokens, scales, usage rules, content guidelines. Carbon and Spectrum are systems; most things on npm are libraries.

Is Material Design still maintained? The Material 3 guidelines and the Android and Flutter implementations are active. The Material Web components are in maintenance mode: Google reassigned the team and the repo is pending new maintainers. For new web projects, treat it as a spec to reference rather than a component dependency.

Which open source design system is best for dashboards? Cloudscape, then Carbon and Ant Design. All three are built for data density and ship real table, filter, and chart components. Our dashboard-specific ranking covers ten options in depth.

Can I build my own brand on top of an open source design system? Yes, if you separate structure from values. Keep the token architecture and components, replace the palette, type scale, and spacing with your own. The failure mode is skipping that second step and shipping something that looks like a Google or AWS product.

Which open source design system works best with AI coding agents? None of them directly: documentation sites are too large and diffuse for an agent's context window. What works is compressing the decisions into one file the agent reads every session, which is the DESIGN.md format. Pair any implementation layer from this list with a concrete DESIGN.md from the library.

The list, ranked

IBM Carbon: the most complete open system; code, tokens, charts, and typeface all open
Material Design 3: the best free design education; web components in maintenance mode
GitHub Primer: the developer-tool reference, MIT, actively developed in primer/react
Adobe Spectrum / React Aria: the accessibility engine to build your own system on
AWS Cloudscape: the dashboard specialist
Fluent UI: the multi-platform one
Ant Design: the deepest component catalog
Polaris: world-class guidelines, code mid-transition
USWDS: public domain, compliance-grade forms
GOV.UK: the documentation masterclass

Structure from these systems, implementation from whichever fits your stack, values from a product you actually admire: browse the library and hand your next build a real system instead of a default look.

Related reading