Design Systems Directory
169 design systems, component libraries, and UI toolkits with tech stack, features, and links to GitHub, Figma, and Storybook. Curated from Component Gallery plus hand-picked token-rich systems.
A curated directory of 169 design systems from around the world. Use these as references for your own design system work, or to study how other teams solve common component and token challenges.
Base list curated from Component Gallery, extended with additional token-rich systems.
All Design Systems
| Name | Tech | Features | Links |
|---|---|---|---|
| Elastic UI framework | React, CSS-in-JS | Code examples, Open source | GitHub Figma |
| Sainsbury’s Design System | React, Sass | Usage guidelines, Code examples, Tone of voice | Storybook |
| Ariakit | React | Code examples, Open source, Accessibility | GitHub |
| SubZero | - | Accessibility issues | Figma Storybook |
| Web Awesome | Web Components | Open source, Code examples | GitHub |
| Red Hat design system | Web Components | Code examples, Usage guidelines | GitHub |
| HeroUI | React, Tailwind CSS | Code examples, Open source | GitHub |
| Morningstar Product System | Vue | Usage guidelines | - |
| Visa Product Design System | Angular, React, CSS, Mobile | Code examples, Usage guidelines, Accessibility, Open source | GitHub |
| Elisa Design System | React | Usage guidelines, Code examples, Accessibility | Storybook |
| NewsKit | React, CSS-in-JS | Code examples, Usage guidelines, Open source | GitHub |
| Momentum Design | React, Web Components | Usage guidelines, Open source | GitHub Storybook |
| Chakra UI | React, CSS-in-JS | Code examples, Open source | GitHub Figma Storybook |
| Blueprint | React, Sass | Open source | GitHub |
| eBay Playbook | Web Components | Code examples, Open source, Usage guidelines, Accessibility, Tone of voice | GitHub Figma Storybook |
| Flowbite | Tailwind CSS | Open source, Code examples | GitHub Figma |
| Cauldron | React, CSS | Code examples, Usage guidelines, Accessibility, Open source | GitHub |
| Nessie | Web Components, Tailwind CSS | Usage guidelines, Code examples | Storybook |
| PatternFly | React, Sass | Tone of voice, Open source, Usage guidelines | GitHub Figma |
| Cedar | Vue, Sass, CSS Modules | Usage guidelines, Code examples, Open source | GitHub [Figma]((from designsystems.surf)) |
| Headless UI | React, Vue | Code examples, Accessibility, Open source | GitHub |
| Gestalt | React, CSS | Code examples, Open source, Usage guidelines | GitHub |
| Geist Design System | React | Code examples | - |
| Pajamas | Vue | Usage guidelines, Code examples, Open source | [GitHub]((from designsystems.surf)) Figma Storybook |
| Base Web | React, CSS-in-JS | Code examples, Usage guidelines, Open source | GitHub Figma |
| Porsche Design System | Web Components, Angular, React, Vue | Code examples, Open source | GitHub [Figma]((from designsystems.surf)) |
| shadcn/ui | React, Tailwind CSS | Code examples, Open source | GitHub Figma |
| Clarity Design System | CSS, Angular, Web Components | Code examples, Usage guidelines, Open source | GitHub Figma |
| Wanda | React, CSS Modules | Code examples, Open source | GitHub Storybook |
| Coral | React | Code examples, Tone of voice, Open source | GitHub Storybook |
| Backpack | Mobile, React | Code examples, Usage guidelines, Open source, Tone of voice | GitHub Storybook |
| Polaris | React | Code examples, Usage guidelines, Accessibility, Tone of voice, Open source | GitHub Figma Storybook |
| Primer | React | Code examples, Open source | GitHub Figma Storybook |
| Nord Design System | Web Components | Code examples, Usage guidelines | [GitHub]((from designsystems.surf)) |
| Material Design | Mobile, Web Components, Sass | Usage guidelines, Open source, Accessibility | GitHub Figma |
| Carbon Design System | React, Vanilla JS, Angular, Vue, Svelte, Web Components | Code examples, Usage guidelines, Accessibility, Open source | GitHub Figma Storybook |
| Wise Design | Mobile | Usage guidelines, Tone of voice | - |
| Ant Design | React | Code examples, Accessibility issues, Open source | GitHub Figma |
| Decathlon Design System | CSS, React, Svelte, Vue, Web Components | Usage guidelines, Code examples, Accessibility, Open source | GitHub Figma |
| Helios | Ember, Sass | Code examples, Usage guidelines, Accessibility, Open source | GitHub |
| Mozilla Protocol | Handlebars, Sass | Usage guidelines, Open source | GitHub |
| ONS Design System | HTML, Nunjucks, Sass | Code examples, Usage guidelines, Accessibility, Open source | GitHub |
| giffgaff design system | - | Usage guidelines, Code examples | - |
| Crayons | Web Components | Code examples, Open source | GitHub |
| Workday Canvas Design System | React | Usage guidelines, Accessibility, Tone of voice, Open source | GitHub Storybook |
| GOLD Design System | React, Sass | Code examples, Usage guidelines, Accessibility, Open source, Unmaintained | GitHub |
| Evergreen | React | Open source | GitHub Figma |
| Dell Design System | Vanilla JS | Code examples, Usage guidelines | [Storybook]((from designsystems.surf)) |
| Fluent UI | React, Web Components, Mobile | Usage guidelines, Code examples, Accessibility, Open source | GitHub Figma Storybook |
| Quasar Framework | Vue | Accessibility issues, Code examples, Open source | GitHub |
| Jøkul Designsystem | React, Sass | Code examples, Usage guidelines, Open source | GitHub |
| Atlassian Design System | React | Code examples, Usage guidelines, Tone of voice, Accessibility | [GitHub]((from designsystems.surf)) Figma [Storybook]((from designsystems.surf)) |
| Forma 36 | React, CSS-in-JS | Code examples, Open source | GitHub Figma |
| Auro | Web Components, Sass | Code examples, Usage guidelines, Open source | GitHub |
| Source | React | Code examples, Usage guidelines, Open source | GitHub Storybook |
| Spectrum | CSS, Web Components, React | Code examples, Usage guidelines, Tone of voice, Open source | GitHub Storybook |
| W3C design system | Sass, Vanilla JS | Code examples, Usage guidelines, Open source, Accessibility | GitHub |
| Pharos | Web Components, Sass | Usage guidelines, Open source, Code examples, Accessibility, Tone of voice | GitHub Storybook |
| Bolt Design System | Sass, Twig, Web Components | Code examples, Tone of voice, Open source | GitHub |
| Ontario Design System | HTML, Sass | Code examples, Usage guidelines, Accessibility | [GitHub]((from designsystems.surf)) |
| Nucleus Design System | Web Components | Usage guidelines | Storybook |
| West Midlands Network Design System | HTML, Nunjucks, Sass | Code examples, Usage guidelines, Open source | GitHub |
| Helsinki Design System | React, CSS | Code examples, Usage guidelines, Accessibility, Open source | GitHub [Figma]((from designsystems.surf)) [Storybook]((from designsystems.surf)) |
| Radix Primitives | React | Code examples, Open source | GitHub [Figma]((from designsystems.surf)) |
| NHS Digital service manual | Nunjucks | Code examples, Usage guidelines, Research, Tone of voice, Open source | GitHub |
| No Style Design System | Sass, jQuery | Open source, Unmaintained | GitHub |
| Instructure-UI | React, CSS-in-JS | Code examples, Accessibility, Open source | GitHub |
| Shoelace | Web Components | Code examples, Open source | GitHub |
| generic-components | Web Components | Code examples, Accessibility, Open source | GitHub |
| Purple3 | CSS | Code examples, Unmaintained | - |
| Aurora | CSS | Code examples, Tone of voice, Open source, Unmaintained | GitHub |
| Paste | React, CSS-in-JS | Usage guidelines, Code examples, Tone of voice, Accessibility, Open source | GitHub Figma Storybook |
| uStyle | Sass | Tone of voice, Code examples, Usage guidelines, Open source, Unmaintained | GitHub |
| 98.css | CSS | Code examples, Open source | GitHub |
| Ruter Components | React | Code examples, Unmaintained | - |
| eBay MIND Patterns | - | Accessibility, Usage guidelines, Open source | GitHub |
| BBC Global Experience Language | - | Accessibility, Usage guidelines, Unmaintained | - |
| Seeds | React | Code examples, Usage guidelines, Tone of voice | [GitHub]((from designsystems.surf)) |
| Thumbprint | React, Sass | Code examples, Open source | GitHub |
| Duet Design System | Angular, Vue, React | Code examples | [GitHub]((from designsystems.surf)) |
| SEB Design Library | Sass, React, Angular | Code examples, Usage guidelines | - |
| Bulma | Sass | Code examples, Accessibility issues, Open source | GitHub |
| Bootstrap | Sass | Code examples, Accessibility, Open source | GitHub |
| Grommet | React | Code examples, Open source | GitHub Storybook |
| Seek style guide | React | Code examples, Unmaintained | - |
| United States Web Design System | Nunjucks | Code examples, Usage guidelines, Open source | GitHub [Figma]((from designsystems.surf)) |
| Stacks | Stimulus | Code examples, Usage guidelines, Tone of voice, Open source | GitHub |
| Brighton & Hove City Council Website pattern library | - | Unmaintained | - |
| Lightning Design System | React | Code examples, Usage guidelines, Tone of voice, Open source | GitHub Figma Storybook |
| A11Y Style Guide | jQuery | Code examples, Usage guidelines, Accessibility, Unmaintained, Open source | GitHub |
| Inclusive Components | - | Code examples, Accessibility, Unmaintained | - |
| GOV.UK Design System | Nunjucks | Code examples, Usage guidelines, Research, Open source | GitHub Figma Storybook |
| FutureLearn design system | React | Usage guidelines, Tone of voice, About, Contribute, Changelog | - |
| MUI (Material UI) | React | Open source, Code examples, Accessibility, Usage guidelines | GitHub Figma |
| Mantine | React | Open source, Code examples, Accessibility | GitHub |
| Radix UI | React | Open source, Code examples, Accessibility | GitHub |
| daisyUI | Tailwind CSS | Open source, Code examples | GitHub |
| Storybook Design System | React | Open source, Code examples | GitHub Storybook |
| Tremor | React, Tailwind CSS | Open source, Code examples | GitHub |
| Park UI | React, Vue, Tailwind CSS | Open source, Code examples | GitHub |
| Reshaped | React | Code examples, Usage guidelines, Accessibility | Figma Storybook |
| Nuxt UI | Vue, Tailwind CSS | Open source, Code examples | GitHub |
| KoliBri | Web Components | Open source, Accessibility, Code examples | GitHub Storybook |
| Aalto University | - | Code examples | [Storybook]((from designsystems.surf)) |
| AWS Cloudscape | - | Code examples | [GitHub]((from designsystems.surf)) [Figma]((from designsystems.surf)) |
| Apple | - | Code examples | [Figma]((from designsystems.surf)) |
| Audi | - | Code examples | - |
| Australian Gov | - | Code examples | [GitHub]((from designsystems.surf)) |
| Aviva | - | Code examples | - |
| Basis | - | Code examples | [Storybook]((from designsystems.surf)) |
| BBC | - | Code examples | [GitHub]((from designsystems.surf)) [Storybook]((from designsystems.surf)) |
| Biings | - | Code examples | - |
| Brainly | - | Code examples | [Figma]((from designsystems.surf)) [Storybook]((from designsystems.surf)) |
| Carrefour | - | Code examples | - |
| Cash App | - | Code examples | - |
| Datadog | - | Code examples | [Figma]((from designsystems.surf)) |
| Denmark | - | Code examples | [GitHub]((from designsystems.surf)) [Figma]((from designsystems.surf)) |
| Docplanner | - | Code examples | [GitHub]((from designsystems.surf)) |
| Esri | - | Code examples | [GitHub]((from designsystems.surf)) [Figma]((from designsystems.surf)) |
| General Electric | - | Code examples | - |
| Ideagen | - | Code examples | - |
| INPS | - | Code examples | [GitHub]((from designsystems.surf)) [Figma]((from designsystems.surf)) |
| Kajabi | - | Code examples | [GitHub]((from designsystems.surf)) [Storybook]((from designsystems.surf)) |
| Lemon Squeezy | - | Code examples | [GitHub]((from designsystems.surf)) [Figma]((from designsystems.surf)) |
| Line | - | Code examples | - |
| Michelin | - | Code examples | [GitHub]((from designsystems.surf)) |
| Monday.com | - | Code examples | [GitHub]((from designsystems.surf)) [Figma]((from designsystems.surf)) [Storybook]((from designsystems.surf)) |
| MongoDB | - | Code examples | [GitHub]((from designsystems.surf)) [Storybook]((from designsystems.surf)) |
| Morningstar | - | Code examples | - |
| Motorway | - | Code examples | [Storybook]((from designsystems.surf)) |
| NS | - | Code examples | [Storybook]((from designsystems.surf)) |
| NSW | - | Code examples | [GitHub]((from designsystems.surf)) [Figma]((from designsystems.surf)) |
| NYS | - | Code examples | [GitHub]((from designsystems.surf)) [Figma]((from designsystems.surf)) |
| Orange | - | Code examples | [GitHub]((from designsystems.surf)) |
| Palantir | - | Code examples | [GitHub]((from designsystems.surf)) |
| Pluralsight | - | Code examples | [GitHub]((from designsystems.surf)) |
| Playbook (Power Home Remodeling) | - | Code examples | [GitHub]((from designsystems.surf)) [Figma]((from designsystems.surf)) |
| Razorpay | - | Code examples | [GitHub]((from designsystems.surf)) [Figma]((from designsystems.surf)) |
| Samsung | - | Code examples | - |
| SAP | - | Code examples | [GitHub]((from designsystems.surf)) [Figma]((from designsystems.surf)) |
| Seek | - | Code examples | [GitHub]((from designsystems.surf)) |
| ServiceNow | - | Code examples | [Figma]((from designsystems.surf)) |
| Sigma | - | Code examples | [Figma]((from designsystems.surf)) |
| Skoda | - | Code examples | [Storybook]((from designsystems.surf)) |
| SumUp | - | Code examples | [GitHub]((from designsystems.surf)) [Storybook]((from designsystems.surf)) |
| Sunrise | - | Code examples | - |
| Tailwind | - | Code examples | [GitHub]((from designsystems.surf)) [Figma]((from designsystems.surf)) |
| Teamleader | - | Code examples | [GitHub]((from designsystems.surf)) [Figma]((from designsystems.surf)) [Storybook]((from designsystems.surf)) |
| UAE | - | Code examples | [GitHub]((from designsystems.surf)) |
| Vercel | - | Code examples | - |
| Visa | - | Code examples | [GitHub]((from designsystems.surf)) [Figma]((from designsystems.surf)) |
| VTS | - | Code examples | - |
| Washington Post | - | Code examples | [Figma]((from designsystems.surf)) |
| Wikimedia | - | Code examples | [GitHub]((from designsystems.surf)) [Figma]((from designsystems.surf)) |
| Zendesk | - | Code examples | [GitHub]((from designsystems.surf)) [Figma]((from designsystems.surf)) |
| Mews Design System | React | Code examples, Usage guidelines, Accessibility | GitHub [Figma]((Figma libraries in Resources)) Storybook |
| Telekom Scale | Web Components, React, Angular | Code examples, Usage guidelines, Open source, Accessibility | GitHub |
| Element Plus | Vue, Sass, CSS | Code examples, Open source | GitHub |
| Arco Design | React, Vue, Mobile | Code examples, Usage guidelines, Open source | GitHub Figma |
| Semi Design | React, Sass | Code examples, Usage guidelines, Open source, Accessibility | GitHub |
| TDesign | React, Vue, Mobile, CSS | Code examples, Usage guidelines, Open source | GitHub |
| PrimeReact | React, Tailwind CSS, CSS | Code examples, Open source, Accessibility | GitHub |
| Naive UI | Vue | Code examples, Open source | GitHub |
| DSFR (Système de Design de l’État) | CSS, Sass, Web Components | Code examples, Usage guidelines, Open source, Accessibility | GitHub |
| NL Design System | CSS, Web Components, React | Code examples, Usage guidelines, Open source, Accessibility | GitHub Storybook |
| SGDS (Singapore Government Design System) | Web Components, React, Vue, Angular, Tailwind CSS | Code examples, Usage guidelines, Open source, Accessibility | GitHub Storybook |
| Designsystemet (Norway) | React, CSS, Web Components | Code examples, Usage guidelines, Open source, Accessibility | GitHub |
| Emplifi Soul | React | Usage guidelines, Tone of voice | Figma Storybook |
| Microsoft Power Platform | Power Fx | Usage guidelines | - |
Notable Systems by Tech Stack
React (65 systems)
Web Components (26 systems)
Vue (16 systems)
Tailwind CSS (10 systems)
Angular (8 systems)
- Visa Product Design System
- Porsche Design System
- Clarity Design System
- Carbon Design System
- Duet Design System
Accessibility-First Systems
- Ariakit - React
- Visa Product Design System - Angular, React, CSS, Mobile
- Elisa Design System - React
- eBay Playbook - Web Components
- Cauldron - React, CSS
- Headless UI - React, Vue
- Polaris - React
- Material Design - Mobile, Web Components, Sass
- Carbon Design System - React, Vanilla JS, Angular, Vue, Svelte, Web Components
- Decathlon Design System - CSS, React, Svelte, Vue, Web Components
- Helios - Ember, Sass
- ONS Design System - HTML, Nunjucks, Sass
- Workday Canvas Design System - React
- GOLD Design System - React, Sass
- Fluent UI - React, Web Components, Mobile
- Atlassian Design System - React
- W3C design system - Sass, Vanilla JS
- Pharos - Web Components, Sass
- Ontario Design System - HTML, Sass
- Helsinki Design System - React, CSS
- Instructure-UI - React, CSS-in-JS
- generic-components - Web Components
- Paste - React, CSS-in-JS
- eBay MIND Patterns - Various
- BBC Global Experience Language - Various
- Bootstrap - Sass
- A11Y Style Guide - jQuery
- Inclusive Components - Various
- MUI (Material UI) - React
- Mantine - React
- Radix UI - React
- Reshaped - React
- KoliBri - Web Components
- Mews Design System - React
- Telekom Scale - Web Components, React, Angular
- Semi Design - React, Sass
- PrimeReact - React, Tailwind CSS, CSS
- DSFR (Système de Design de l’État) - CSS, Sass, Web Components
- NL Design System - CSS, Web Components, React
- SGDS (Singapore Government Design System) - Web Components, React, Vue, Angular, Tailwind CSS
- Designsystemet (Norway) - React, CSS, Web Components
Try with Prompts
Ready-to-use prompts related to this guide
Accessibility Review
Review a component or page for WCAG 2.1 compliance, covering contrast, keyboard navigation, screen readers, and motion.
Prompt
Figma-to-Code Review
Review AI-generated or hand-written code against a Figma design to catch visual mismatches, missing states, and token drift.
Prompt
Component Deprecation Notice
Write a clear, actionable component deprecation notice with migration steps, timeline, and replacement guidance.
Prompt