Design Systems
Screenshots, tokens, and breakdowns from the world’s leading companies. Compare patterns, components, and practices. New to the topic? Start with what a design system is.
Suggest a system119 of 119 systems
A design system by Google that helps teams build high-quality digital experiences.
Microsoft's design system for creating adaptive, coherent, and inclusive user experiences.
IBM's open-source design system for products and digital experiences.
A framework for creating unified enterprise experiences, design patterns, and accessible interfaces.
A collection of UI patterns and components used across Atlassian products.
A design system that helps Shopify build better experiences for merchants.
GitHub's design system for creating cohesive, accessible, and responsive interfaces.
Zendesk
Zendesk's design system for creating consistent, accessible customer experiences.
The design system behind Creative Cloud, built on React Aria — Adobe's accessibility primitives, now used well beyond Adobe.
A design system for enterprise-level products with a set of high-quality React components.
A simple, modular and accessible component library for React applications.
Professional, hand-crafted UI components and templates built with Tailwind CSS (formerly Tailwind UI).
Bootstrap Team
The world's most popular framework for building responsive, mobile-first sites.
Bulma
Bulma Team
Bulma Team
A free, open source CSS framework based on Flexbox.
ZURB
The most advanced responsive front-end framework in the world.
Semantic UI
A development framework that helps create beautiful, responsive layouts.
Segment
A React UI Framework for building ambitious products on the web.
A set of React UI components that supports Pinterest's design language.
Uber
A React Component library implementing the Base design language.
JetBrains
A collection of UI components for web applications.
A design system for building consistent, accessible UIs at Twilio.
Unstyled, accessible components for building high‑quality design systems.
A fully featured React components library with 100+ customizable components.
HeroUI
Beautiful, fast and modern React UI library (formerly NextUI).
React components for faster and easier web development based on Material Design.
Beautifully designed components built with Radix UI and Tailwind CSS.
Radian
Open-source component library built with Radix UI and Tailwind CSS, with a free Figma UI kit and a growing set of UI blocks.
Bank of Canada
The Bank of Canada's design system for the public-facing sites of Canada's central bank.
An open source design system for the cloud, built by Amazon Web Services (AWS) to create web applications.
eBay Evo is a design system that connects people with passions, and enables eBay to build great experiences for customers.
Design system for BBC's digital products and services.
Design system for the U.S. federal government's digital services.
Design system for UK government services and websites.
.svg?width=200){kind=small}
Government of Canada
Design system for Government of Canada websites and digital services.
Australian Government Design System
Australian Government
Australian Government
Design system for Australian Government websites and digital services.
Singapore Government
Design system for Singapore Government digital services.
Airbnb Design System
Airbnb
Design system for Airbnb's accommodation booking platform.
The Washington Post
Design system for The Washington Post's digital news platforms.
European Commission
Design system for European Commission digital services.
Yale University
Design system for Yale University's digital platforms.
UC Berkeley
Design system for UC Berkeley's digital platforms.
Columbia Design System
Columbia University
Columbia University
Design system for Columbia University's digital platforms.
Asana
Design system for Asana's project management platform.
Johns Hopkins Medicine
Design system for Johns Hopkins' healthcare platforms.
Design system for the UK's National Health Service digital platforms.
Alibaba
Design system for Alibaba's e-commerce platforms.
Rakuten
Design system for Rakuten's e-commerce platforms.
Comprehensive design system for iOS, macOS, watchOS, and tvOS applications with guidelines for creating intuitive experiences.
Vuetify Team
Material Design Component Framework for Vue.js with over 100 components.
Palantir
React-based UI toolkit for the web, optimized for building complex data-dense interfaces.
Ariakit
Toolkit for building accessible rich web applications with React (formerly Reakit).
Hewlett Packard Enterprise
React-based framework providing accessibility, modularity, responsiveness, and theming.
Elastic
Framework for creating accessible, composable, and beautiful user interfaces.
Canvas Design System
Workday
Design system for building consistent, accessible, and high-quality experiences at Workday.
Design system for REI's outdoor retail experiences, focusing on accessibility and sustainability.
Design system for Audi's digital automotive experiences and connected car interfaces.
Design system for Mailchimp's email marketing and automation platform.
monday.com
monday.com's design system for work management platform with accessible components.
.svg?width=200){kind=logo}
Duolingo
Design system for Duolingo's language learning platform with playful, engaging interfaces.
GitLab's open-source design system that powers GitLab.com and the GitLab platform.
Skyscanner's open-source design system for native iOS, Android, and the web.
HashiCorp's open-source design system used across Terraform, Vault, Consul, and HashiCorp Cloud.
The opinionated productivity-tool visual language whose keyboard-first command bar and motion timing became the template for indie SaaS.
Vercel's design system — the visual language behind the Vercel dashboard, marketing, and Next.js docs.
Red Hat's open-source design system for enterprise web applications and operator consoles.
Liferay
Liferay's design language for digital experience platforms.
Stack Overflow
Stack Overflow's open-source design system documenting the patterns behind Stack Overflow and Teams.
Khan Academy
Khan Academy's open-source React component library for building consistent learning experiences.
City of Helsinki
Open-source design system for the City of Helsinki's digital services.
Government of Ontario
Design system for Ontario.ca and the Government of Ontario's digital services.
Cisco / Webex
Cisco's shared design language and component libraries powering the Webex suite of collaboration products across web.
SAP Fiori
SAP
SAP
SAP's enterprise design language and guidelines, implemented through UI5 web components for consistent business application interfaces.
Porsche
Porsche's branded system of web components with React, Angular, and Vue wrappers plus UX guidelines.
SEEK
SEEK's themeable React component library built with vanilla-extract, emphasizing simple, composable, accessible building blocks.
Orbit
Kiwi.com
Kiwi.com
Kiwi.com's open-source React component library and pattern guidelines tailored for building travel booking interfaces.
Nordhealth
Nordhealth's framework-agnostic system of Lit web components, tokens, and themes for healthcare software products.
Sprout Social
Sprout Social's design system documentation, tokens, and Figma resources supporting their social media management platform.
Splunk
Splunk's React component toolkit and design language for building consistent enterprise data and dashboard interfaces.
Mozilla / Firefox
Mozilla's public design system documenting foundations, components, and patterns for the Firefox desktop and mobile browsers.
Instructure (Canvas LMS)
Instructure's accessible React component library and design tokens underpinning the Canvas learning management platform.
Priceline
Priceline's actively maintained React component library built with styled-system, styled-components, and TypeScript.
Okta
Okta's accessible design system of MUI-based React components and design tokens for building Okta product UIs.
WordPress / Automattic
The @wordpress/components React library providing the reusable UI primitives behind the WordPress block editor.
Decathlon
Decathlon's open-source design system offering React, Vue, and Svelte components plus Tailwind-based CSS and tokens.
Skapa
IKEA
IKEA
IKEA's internal design system spanning web, iOS, Android, and in-store devices.
MongoDB
MongoDB's open-source React design system and component library for its product and documentation surfaces.
Cloudflare
Cloudflare's open-source React component library, built on Base UI and Tailwind, for its dashboard and developer-facing products.
Oracle
Oracle's UX design language and Oracle JET-based theme unifying the interface across its Fusion Cloud Applications.
Horizon
ServiceNow
ServiceNow
ServiceNow's design system for the Now Platform, providing components, patterns, and official Figma libraries for building enterprise experiences.
Canvas
HubSpot
HubSpot
HubSpot's design system for its CRM and marketing products, including a public component showcase and a React-based SDK for third-party app developers.
Deutsche Telekom
Deutsche Telekom's open-source design system for digital products, built on Stencil web components.
Digdir (Norwegian Digitalisation Agency)
Norway's cross-government design system, providing shared components, CSS, and tokens for public digital services.
Danish Government
Denmark's shared design system for public self-service solutions, jointly run by the country's digital-government and business agencies.
ICTU, on behalf of the Dutch Ministry of the Interior (BZK)
A shared, open-source design-system architecture that Dutch government organizations build their own component libraries and design tokens on top of, rather than one shared component library.
Department of Internal Affairs, New Zealand Government
An alpha-stage, all-of-government design system providing shared HTML/CSS/React/Vue components and content guidance for New Zealand public-sector digital services.
Siemens
Siemens' MIT-licensed design system for industrial software, shipping Stencil web components with React, Angular, and Vue bindings.
Telefónica
Telefónica's open design system for its digital products, with React, iOS, and Android implementations sharing one token set.
Canadian Digital Service
The Canadian Digital Service's open-source web-component design system for Government of Canada services — distinct from, and newer than, the Canada.ca design system.
SBB (Swiss Federal Railways)
Swiss Federal Railways' MIT-licensed design system, shipping Lit-based web components with React wrappers for the SBB digital estate.
LINE's public design guidelines for its messenger and global services — foundations, components, and interaction patterns, documented without a public component library.
J.P. Morgan
J.P. Morgan's Apache-2.0 React design system, built around accessibility, theming, and the multiple UI densities financial interfaces need.
Deutsche Bahn
Deutsche Bahn's Apache-2.0 design system for its web estate, shipping React, Angular, Vue, web-component, and CSS-only builds from one core.
Poncho
Government of Argentina
Government of Argentina
The official style and component library for designing and building the websites and mobile apps of the Argentine national government.
Shoreline
VTEX
VTEX
VTEX Design System for back-office experiences.
VTEX Styleguide
VTEX
VTEX
The VTEX Design System and React component library.
TDesign
Tencent
Tencent
Tencent's open-source enterprise design system: one set of values, a consistent design language and visual style, and component libraries that work out of the box.
Semi Design
ByteDance
ByteDance
An easy-to-customize modern design system that helps designers and developers create high-quality products.
Fusion Design
Alibaba
Alibaba
An enterprise-level solution for building web products by improving designer-developer collaboration, product experience consistency, and development efficiency.
Vant
Youzan
Youzan
A lightweight, customizable Vue UI library for mobile web apps.
Element Plus
Element Plus
Element Plus
A Vue 3 based component library for designers and developers.
Naive UI
TuSimple
TuSimple
A Vue 3 component library — fairly complete, theme-customizable, written in TypeScript, and fast.
Spindle
CyberAgent
CyberAgent
The conventions everyone building Ameba uses to create a recognisably Ameba feel, along with the tools and guidelines that help them do it.
SmartHR Design System
SmartHR
SmartHR
A design system for expressing SmartHR's character — usable by anyone, efficient, and without second-guessing.
Design System for Digital Agency
Digital Agency, Government of Japan
Digital Agency, Government of Japan
A design asset in three parts: a design language covering how to think about styling, UI components that give form to information and interaction, and guidelines for designing and building with usability and accessibility in mind.
This is a design systems library and directory of 119 real-world examples — enterprise systems like Carbon and Polaris, open-source component libraries like shadcn/ui and Ant Design, government standards like GOV.UK and USWDS, and startup systems. Unlike a plain list of links, every entry in the collection carries engineering facets (stack, token pipeline, source model), a screenshot, and a downloadable design.md — and the anchor systems get full editorial breakdowns.
Those design.md files are restated from each system's own documentation and token packages, never extracted from a rendered page. Each one opens with a provenance block listing the sources it was written from, the date those links were last checked, and how confident the values are — and says so plainly when a system publishes too little to be confident. They are re-checked each quarter alongside the Agent-Ready audit.
Use it as a showcase for inspiration, a catalogue for evaluation, or a research directory: filter by stack above, check which systems are agent-ready, or get a straight recommendation in which one to build on. The library is updated continuously and re-audited quarterly.
.svg?width=200){kind=logo}
.svg?width=200){kind=logo}
