# Design System Catalog / デザインシステムカタログ

> A bilingual catalog of 67 public design systems. Compare genuine component implementations with shared sample content. Maintained by @akiyan.

The catalog includes government, company and open-source systems. Public documentation does not imply unrestricted reuse. Check the original source and each system’s license.

Pages include Japanese and English feature descriptions, initial public-release evidence, implementation package versions and official-source links. Contextual dates are marked as references; repository creation is not treated as a confirmed public launch. Featured systems form a curated group informed by GitHub stars. Other systems follow descending public-release order.

Live component examples are isolated under /specimens/. Unstyled libraries retain their native appearance. Design-only and host-dependent entries are explicitly identified.

## Catalog

- [Browse all systems](https://design-system-catalog.akiyan.tokyo/): Thumbnail catalog with category filters and static individual paths.
- [Catalog source data](https://raw.githubusercontent.com/akiyan/design-system-catalog/main/src/data/systems.json): Bilingual descriptions, official URLs, licenses and publication evidence.
- [Implementation registry](https://raw.githubusercontent.com/akiyan/design-system-catalog/main/src/data/specimens.json): Available component specimens, versions and integration status.

## Government and public sector

- [GC Design System](https://design-system-catalog.akiyan.tokyo/canada/): Web Components for Canadian government services, with implementation examples and integrations including React.
- [Digital Agency Design System (DADS)](https://design-system-catalog.akiyan.tokyo/dads/): Japan’s design system for public services, with form implementation examples and accessibility guidance.
- [KoliBri](https://design-system-catalog.akiyan.tokyo/kolibri/): Developed by Germany’s ITZBund, KoliBri provides accessible Web Components for use across frontend frameworks.
- [Agriculture Design System (AgDS)](https://design-system-catalog.akiyan.tokyo/agds/): A React UI foundation for Australian agriculture services, with components for forms and structured data displays.
- [Système de Design de l’État (DSFR)](https://design-system-catalog.akiyan.tokyo/dsfr/): France’s government design system publishes shared UI implementations with specific conditions for use of state branding.
- [Czech Design System](https://design-system-catalog.akiyan.tokyo/czech/): A design system for Czech public websites, with shared components and examples of page structures.
- [SGDS](https://design-system-catalog.akiyan.tokyo/sgds/): A shared foundation for Singapore government services, with reusable components and website layouts.
- [CFPB Design System](https://design-system-catalog.akiyan.tokyo/cfpb/): The CFPB’s UI foundation combines interface components with guidance for presenting financial information clearly.
- [BC Design System](https://design-system-catalog.akiyan.tokyo/bc/): Design resources for British Columbia’s digital services, with guidance for accessible shared interfaces.
- [GOV.UK](https://design-system-catalog.akiyan.tokyo/govuk/): Tested guidance for UK public services, with patterns for application forms and end-to-end service journeys.
- [Europa Component Library](https://design-system-catalog.akiyan.tokyo/europa/): The European Commission’s component library supports consistent visual design and interaction across institutional websites.
- [Designers Italia](https://design-system-catalog.akiyan.tokyo/italia/): Guidance for Italian public-sector websites, with Bootstrap Italia components and reusable website models.
- [U.S. Web Design System (USWDS)](https://design-system-catalog.akiyan.tokyo/uswds/): A shared UI foundation for US federal websites, covering design tokens, reusable components and page templates.
- [WFP UI Kit](https://design-system-catalog.akiyan.tokyo/wfp/): The World Food Programme’s web UI kit publishes components and implementation guidance for its shared visual styles.
- [Bristol Design System](https://design-system-catalog.akiyan.tokyo/bristol/): Bristol City Council’s patterns for public websites, including forms and navigation for local services.

## Companies and open source

- [Ant Design](https://design-system-catalog.akiyan.tokyo/ant/): A React UI library for enterprise applications, with extensive components for complex data displays and forms.
- [Microsoft Fluent 2](https://design-system-catalog.akiyan.tokyo/fluent/): Microsoft’s second-generation Fluent system offers guidance for consistent experiences across web and native applications.
- [Astryx](https://design-system-catalog.akiyan.tokyo/astryx/): Meta’s customizable design system, with theme variations and working React component examples.
- [Adobe React Aria](https://design-system-catalog.akiyan.tokyo/reactaria/): Adobe’s accessible React primitives combine interaction and focus management with your own visual styling.
- [GitHub Primer](https://design-system-catalog.akiyan.tokyo/primer/): GitHub’s design system publishes information design guidance and React components for developer-facing interfaces.
- [Cloudflare Kumo](https://design-system-catalog.akiyan.tokyo/kumo/): Cloudflare’s React library builds on Base UI and provides components and theme styles for web applications.
- [Salesforce Lightning Design System 2](https://design-system-catalog.akiyan.tokyo/lightning/): The second generation of Salesforce’s Lightning UI foundation uses styling hooks for adaptable themes and consistent business interfaces.
- [Sansan One Design System](https://design-system-catalog.akiyan.tokyo/sansan/): Sansan’s UI guidance for B2B products documents interaction specifications for business forms and information ordering.
- [Coinbase Design System](https://design-system-catalog.akiyan.tokyo/coinbase/): Coinbase’s design system publishes React and React Native components for web and mobile product interfaces.
- [Serendie Design System](https://design-system-catalog.akiyan.tokyo/serendie/): Mitsubishi Electric’s public design system provides design tokens and React components for building service interfaces.
- [kaonavi sugao](https://design-system-catalog.akiyan.tokyo/sugao/): Kaonavi’s product design system publishes Figma assets and design guidance for HR service interfaces.
- [Ubie Vitals](https://design-system-catalog.akiyan.tokyo/vitals/): Ubie’s UI library offers input component examples and foundations such as semantic colors and typography.
- [freee vibes](https://design-system-catalog.akiyan.tokyo/vibes/): freee’s React UI foundation includes detailed form examples, input states and error presentation for business services.
- [Adobe Spectrum 2](https://design-system-catalog.akiyan.tokyo/spectrum/): The second generation of Adobe Spectrum guides interface hierarchy and controls for complex creative applications.
- [Ikyu Design Guideline](https://design-system-catalog.akiyan.tokyo/ikyu/): Ikyu’s design guide documents photography, typography and interface spacing with practical examples.
- [DBS Data Visualisation](https://design-system-catalog.akiyan.tokyo/dbs/): DBS Bank’s Figma toolkit provides chart components and guidance on chart selection, color and data visualization.
- [Bits UI](https://design-system-catalog.akiyan.tokyo/bitsui/): Headless UI components for Svelte provide behavior for controls such as Dialog while leaving visual styling to you.
- [Wise Design](https://design-system-catalog.akiyan.tokyo/wise/): Wise’s guidance supports its global brand experience through typography, illustration and other visual foundations.
- [Kobalte](https://design-system-catalog.akiyan.tokyo/kobalte/): Accessible headless UI primitives for SolidJS let you reuse component behavior without adopting a fixed visual style.
- [Cloudscape](https://design-system-catalog.akiyan.tokyo/cloudscape/): AWS’s system for cloud management interfaces, with data tables, complex configuration forms and application patterns.
- [pixiv Charcoal](https://design-system-catalog.akiyan.tokyo/charcoal/): pixiv’s design system supports content-focused experiences with public React components and shared web styles.
- [Cookpad Apron](https://design-system-catalog.akiyan.tokyo/apron/): Cookpad’s Figma design system provides shared assets for designing products related to cooking.
- [Tencent TDesign](https://design-system-catalog.akiyan.tokyo/tdesign/): Tencent’s UI foundation supports business applications across multiple implementations, including React and Vue.
- [SPEEDA FALCON](https://design-system-catalog.akiyan.tokyo/falcon/): SPEEDA’s public Figma assets include components and templates for consistent interfaces in its business intelligence service.
- [Arco Design](https://design-system-catalog.akiyan.tokyo/arco/): ByteDance’s design system provides React and Vue components for building business application interfaces.
- [Semi Design](https://design-system-catalog.akiyan.tokyo/semi/): A ByteDance React library for business applications, with advanced tables, forms and theme customization.
- [Spindle](https://design-system-catalog.akiyan.tokyo/spindle/): Ameba’s design foundation publishes component usage guidance and core styles with a focus on accessibility and brand consistency.
- [Finastra Design System](https://design-system-catalog.akiyan.tokyo/finastra/): Finastra’s UI foundation for financial services provides component examples and style configuration in its public Storybook.
- [Decathlon Vitamin](https://design-system-catalog.akiyan.tokyo/vitamin/): Decathlon’s Vitamin web implementation offers shared UI through CSS and framework-specific component packages.
- [monday.com Vibe](https://design-system-catalog.akiyan.tokyo/monday/): monday.com’s React library provides status indicators and interaction components for business application interfaces.
- [SmartHR Design System](https://design-system-catalog.akiyan.tokyo/smarthr/): SmartHR’s shared guidance spans product interfaces, accessibility, brand communication and writing.
- [Twilio Paste](https://design-system-catalog.akiyan.tokyo/paste/): Twilio’s product design system publishes React components and design token implementations in its official repository.
- [Airtable Blocks SDK UI](https://design-system-catalog.akiyan.tokyo/airtable/): Airtable’s extension UI components and style API expose shared colors and spacing for interfaces embedded in bases.
- [Esri Calcite Design System](https://design-system-catalog.akiyan.tokyo/calcite/): Esri’s UI foundation provides Web Components and guidance for interfaces around GIS and mapping applications.
- [ING Lion](https://design-system-catalog.akiyan.tokyo/lion/): ING’s white-label Web Components provide input behavior and accessibility foundations for custom visual designs.
- [Porsche Design System](https://design-system-catalog.akiyan.tokyo/porsche/): Porsche’s digital component system includes configurators for exploring Web Component behavior and appearance.
- [Contentful Forma 36](https://design-system-catalog.akiyan.tokyo/forma36/): Contentful’s React UI foundation supports content editors with form controls and field-state presentation.
- [Vaadin Design System](https://design-system-catalog.akiyan.tokyo/vaadin/): Vaadin’s UI components include data grids and examples for building business applications with Java or React.
- [Uber Base Web](https://design-system-catalog.akiyan.tokyo/baseweb/): Uber’s React component library includes customizable data tables, selection controls and other application building blocks.
- [Gestalt](https://design-system-catalog.akiyan.tokyo/gestalt/): Pinterest’s UI library provides React components and guidance for consistent content presentation and interaction.
- [Kiwi.com Orbit](https://design-system-catalog.akiyan.tokyo/orbit/): Kiwi.com’s React library includes building blocks for travel itineraries and booking interactions in its official repository.
- [Ariakit](https://design-system-catalog.akiyan.tokyo/ariakit/): A foundation for accessible React interfaces, with primitives such as Combobox and Dialog for custom designs.
- [Francfranc Design System](https://design-system-catalog.akiyan.tokyo/francfranc/): Francfranc’s design guide covers brand applications across websites, promotional materials and retail environments.
- [Segment Evergreen](https://design-system-catalog.akiyan.tokyo/evergreen/): Segment’s React UI library provides tables, selection controls and other building blocks for data-oriented applications.
- [Shopify Polaris](https://design-system-catalog.akiyan.tokyo/polaris/): Shopify’s UI foundation for embedded admin applications documents current Web Components and application layouts.
- [IBM Carbon Design System](https://design-system-catalog.akiyan.tokyo/carbon/): IBM’s design system provides components and patterns for data-intensive enterprise applications.
- [Audi Brand Guidelines](https://design-system-catalog.akiyan.tokyo/audi/): Audi’s guidance connects its brand foundations, including typography, with digital interface design.
- [GitLab Pajamas](https://design-system-catalog.akiyan.tokyo/pajamas/): GitLab’s design guidance covers component usage and interface writing for developer-facing products.
- [Orange Boosted](https://design-system-catalog.akiyan.tokyo/boosted/): Orange’s Bootstrap-based framework publishes accessible web components and page examples using its brand styles.
- [Liferay Lexicon](https://design-system-catalog.akiyan.tokyo/lexicon/): Liferay’s design language documents foundations and component usage for consistent portal product interfaces.
- [Red Hat PatternFly](https://design-system-catalog.akiyan.tokyo/patternfly/): Red Hat’s enterprise UI foundation provides tables and interaction patterns for administration consoles.
- [Atlassian Design System](https://design-system-catalog.akiyan.tokyo/atlassian/): The system behind Jira and Confluence supports business interfaces through shared components, status presentation and design tokens.

## Optional

- [GitHub repository](https://github.com/akiyan/design-system-catalog): Source code, contribution context and catalog license.

Catalog code: MIT. Copyright © 2026 @akiyan. Third-party components, assets and trademarks retain their own terms.