Curated list of UX styleguides and design systems and toolkits
Design System - A comprehensive guide to design systems
Altinn Design System by Altinn- The design system is based on so-called atomic design methodology, where instead of designing pages design components that can be assembled and reused in different web solutions.
Ant Design by Ant Financial - A design system with values of Nature and Determinacy for better user experience of enterprise applications.
Atlassian Design by Atlassian - Atlassian Design Guidelines used across Atlassian products.
Audi UI by Audi - based on the principles of the Audi look: variety, honesty and balance.
Aurora design system by Government of Canada - Aurora design system is a central design guide created by the Digital Collaboration Division within the Government of Canada for their digital products.
Australian Government Design System by Commonwealth of Australia - The Australian Government Design System provides a framework and a set of tools to help designers and developers build government products and services more easily
auth0 Cosmos by auth0 - Cosmos is a Design System to build Auth0 products.
auth0 Styleguide by auth0 - Conjunction of design patterns, components and resources used across auth0's products.
Backpack by Skyscanner - Backpack is a collection of design resources, reusable components and guidelines for creating Skyscanner products.
Blackboard Design by Blackboard - Designs for the educational experience
Bloom by Appear Here - Bloom is Appear Here’s central repository for design patterns and guidelines.
Brand Estonia by estonia - The visual language of Brand Estonia created by Estonian Design Team
Brainly style guide by Brainly - This style guide is being used across all language versions of the Brainly website.
Carbon By IBM - Carbon is IBM's open-source design system for digital products and experiences.
Cedar by Rei - REI Digital Design System presentation framework
CFPB Design Manual - The Consumer Financial Protection Bureau's user interface framework
Chameleon by Pusher - Chameleon is a library of front-end patterns, variables, and helpers used by Pusher
Clarity Design System by VMWare - UX guidelines, HTML/CSS framework, and Angular components working together to craft exceptional experiences
CNVS UI System by Mesosphere - CNVS (pronounced "Canvas") is a system of user interface elements and components built for use across Mesosphere sites and products
COOP Design Manual by COOP - A front-end toolkit containing styles and static assets for building Co-op-branded digital content.
Design Language by Royal Canin - Design Language is a shared design system that unifies Royal Canin's global digital style.
Duolingo Design by Duolingo - Design language by Duolingo Design Team
Eurostar GLU by Eurostar - Building blocks for Eurostar web UI.
Fabric UI by Microsoft - The official front-end framework for building experiences that fit seamlessly into Office and Office 365.
Feather by Alfa-Bank - Design system in Alfa-Bank
Feelix by MYOB - collection of front-end interface elements that can be reused across the MYOB browser-based products.
Frontier by Family search - Global styles for the FamilySearch.org website
Foundation Design System by Envato - The Foundation Design System is a collection of predefined tokens, user interface components and guidelines for their usage.
Fuse Design System by National Instruments - A system for designing and developing National Instruments Software
Gel by BBC - Global Experience Language(GEL) is the BBC’s shared design framework. A system of reusable interaction patterns used to assemble the BBC’s entire online output.
Gestalt by Pinterest - Pinterest’s design language used across products
GOV.UK Design System by GOV.UK - The GOV.UK Design System is maintained by the Government Digital Service
Grommet by HP Enterprise - Part design system, part framework (react) that provides accessibility, modularity, responsiveness, and theming
Hedwig by Bring & Posten - Collection of design components that can be assembled together to build any number of applications.
Help Scout Style Guide by Help Scout - This style guide is a way to empower members of the Help Scout team to move quickly and have consistent experience
HubSpot Canvas by HubSpot - HubSpot Canvas is the design system that HubSpot uses to build products.
Lexicon by Liferay - Lexicon is a design language that provides a common framework for building interfaces within the Liferay product ecosystem.
Lightning Design System by Salesforce - The Salesforce Lightning Design System includes the resources to create user interfaces consistent with the Salesforce Lightning principles, design language, and best practices
Mailchimp Pattern by Mailchimp - Guidelines by Mailchimp for their product line
Marvel Styleguide by Marvel - live inventory of UI components, design patterns, brand assets and code guidelines for Marvel products
Material design by Google - Material is an adaptable system of guidelines, components, and tools that support the best practices of user interface design
Mineral UI - A design system for the web that lets you quickly build high-quality, accessible apps. Created by CA Technologies
MongoDB's UI Design System by MongoDB - The MongoDB Design System contains the UI building blocks that make up the user experience across all MongoDB products.
Morningstar Design System by Morningstar - A collection of brand, visual, UX, and technical standards built into a central library so that teams can quickly build high-quality, consistent experiences.
Mozilla Protocol by Mozilla - A design system for Mozilla websites
Nachos by Trello - Nachos is Trello's design system used across product
OPattern by Opower - Opattern is a design system and style guide for everyone who creates Opower products.
Origami by Financial Times - Origami is a group of services, components, and tools used to help build websites.
Pajamas Design System by Gitlab - Also know as GitLab's open source Design System acts as Resources, components, and design guidelines behind GitLab
Pattern Library by FutureLearn - This is the FutureLearn design system.
Photon by Mozilla Firefox - Firefox’s Photon Design System
Plasma by WeWork - Plasma is a design system for creating sensible, modern interfaces by WeWork
Pluralsight Design System by Pluralsight - The UI building blocks for creating a cohesive design across Pluralsight products.
Pivotal UI by Pivotal Software - Pivotal UI is a collection of React components that are styled for the Pivotal brand
Polaris by Shopify - practical guides to help one understand how to design for the Shopify platform using Polaris.
Predix Design System By GE Digital - The Predix Design System is built using modern web component standards so developers can start using our building blocks with minimal ramp-up.
PricelineOne by Priceline - Priceline.com Design System to create a consistently great experience for users
Primer by Github - Resources, tooling, and design guidelines for building websites with Primer, GitHub's front-end framework.
Purple3 by Heroku - Purple provides guidelines for the aesthetic, function, and form of user interfaces to provide a consistent experience.
Quickbooks by Intuit - The QuickBooks Design System mission is to deliver delightful customer experiences that elevate Intuit brand.
RingUI by JetBrains - This collection of UI components aims to provide all of the necessary building blocks for web-based products built inside JetBrains
Rizzo by Lonely Planet - Rizzo is the UI layer for lonelyplanet.com. Rizzo also serves LP's header and footer, assets and Style Guide.
Seek Style Guide by Seek - Living style guide for SEEK, powered by React, webpack, CSS Modules and Less
Snacks by Instacart - Snacks is a JavaScript and React based component library. It has a default theme matching Instacart's styles.
SpareBank1 Designsystem by SpareBank1 - SpareBank1's common language across disciplines, to ensure consistent design in SpareBank1 solutions.
Spark Design System by Quicken Loans - Spark Design System is a system of patterns and components used to create the user interface for the Quicken Loans family of Fintech products
Stacks by Stack Overflow - Stacks provides everything you need to quickly design, build, and ship coherent experiences across all of Stack Overflow
Starling Design System by ACL - The Starling Design System is an integral part of accomplishing consistency, better documented patterns, and a vision for our future.
StudyPortals styleguide by StudyPortals - Design based on StudyPortal's Design priniples.
Swarm Design System by Meetup - Guidelines for product design at Meetup. Includes our design team’s processes and principles as well as visual design
Uniform by Hudl - Uniform is Hudl’s design system. It exists to unify Hudl’s products through design and code implementation.
U.S. Web Design System by United States government - The U.S. Web Design System helps the federal government build fast, accessible, mobile-friendly websites.
USAJOBS Design System by USAJOBS- Describes the design language and reusable components of USAJOBS, Open Opportunities, and Agency Talent Portal
uStyle by uSwitch- uStyle includes documentation and guidelines relating to uSwitch's core design principles
VTEX Styleguide by VTEX - The VTEX Design System backed by React component library
Wonderbly Design System by Wonderbly - Design System based on Wonderbly Design principles
Workday Canvas Design System by Workday - Delve into Workday design standards, writing guidelines, and playbook to create exceptional enterprise experiences.
Zendesk Garden by Zendesk - Garden is where user interface components for Zendesk products.
AgnosticUI - Accessible React component primitives that also work with Vue 3, Svelte, and Angular! (GitHub, Demo)
Awesome UI component library for component library implementation (React, Vue, Angular, etc) for styleguides
Google Design - Cooperative effort led by a group of designers, writers, and developers at Google to publish original content, produce events, and foster creative and educational partnerships that advance design and technology.
Suggestions and PRs are welcome!
Please read the contribution guidelines to get started.
用戶體驗風格指南和設計系統和工具包的精選列表
設計系統 - 設計系統綜合指南
＃＃ 內容
Altinn 設計系統  by Altinn- 設計系統基於所謂的原子設計方法，而不是設計頁面設計組件，可以在不同的環境中組裝和重用網絡解決方案。
螞蟻設計  by Ant Financial - 一個具有自然和確定性價值的設計系統，用於更好的企業應用程序用戶體驗。
Atlassian Design by Atlassian - Atlassian 產品中使用的 Atlassian 設計指南。
奧迪 UI  由奧迪 - 基於奧迪外觀的原則：多樣性、誠實和平衡。
極光設計系統  由加拿大政府提供 - Aurora 設計系統是由加拿大政府數字合作部為其數字化設計的核心設計指南產品。
澳大利亞政府設計系統  by Commonwealth of Australia - 澳大利亞政府設計系統提供了一個框架和一套工具來幫助設計師和開發人員構建政府產品和服務更輕鬆
auth0 Cosmos by auth0 - Cosmos 是一個用於構建 Auth0 產品的設計系統。
auth0 Styleguide by auth0 - auth0 產品中使用的設計模式、組件和資源的結合。
背包  Skyscanner - Backpack 是設計資源、可重用組件和創建 Skyscanner 產品的指南的集合。
Blackboard 的 Blackboard Design - 為教育體驗而設計
Bloom by Appear Here - Bloom 是 Appear Here 的設計模式和指南的中央存儲庫。
愛沙尼亞品牌 by estonia - 愛沙尼亞設計團隊創建的愛沙尼亞品牌視覺語言
Brainly 風格指南 由 Brainly - 此風格指南用於 Brainly 網站的所有語言版本。
Carbon 由 IBM - Carbon 是 IBM 的開源數字產品和體驗設計系統。
Cedar  by Rei - REI 數字設計系統演示框架
變色龍 by Pusher - Chameleon 是 Pusher 使用的前端模式、變量和助手庫
Clarity 設計系統 [] (https://github.com/vmware/clarity) 由 VMWare 提供 - UX 指南、HTML/CSS 框架和 Angular 組件協同工作以創造卓越的體驗
CNVS UI 系統  由 Mesosphere - CNVS（發音為“Canvas”）是一個用戶界面元素和組件系統，用於跨 Mesosphere 站點和產品使用
COOP 設計手冊  by COOP - 包含樣式和靜態資產的前端工具包，用於構建 Co-op 品牌的數字內容。
Design Language by Royal Canin - Design Language 是一個共享設計系統，統一了 Royal Canin 的全球數字風格。
Duolingo Design by Duolingo - Duolingo Design Team 的設計語言
Eurostar 的 Eurostar GLU - Eurostar Web UI 的構建塊。
Fabric UI  by Microsoft - 用於構建無縫融入 Office 和 Office 的體驗的官方前端框架365.
羽毛  by Alfa-Bank - Alfa-Bank 中的設計系統
Feelix by MYOB - 前端界面元素的集合，可以在 MYOB 基於瀏覽器的產品中重複使用。
家庭搜索的 Frontier - FamilySearch.org 網站的全球風格
基礎設計系統  by Envato - 基礎設計系統是預定義令牌、用戶界面組件的集合及其使用指南。
保險絲設計系統  by National Instruments - 用於設計和開發 National Instruments 軟件的系統
凝膠  by BBC - Global Experience Language(GEL) 是 BBC 的共享設計框架。一個可重複使用的交互模式系統，用於組裝 BBC 的整個在線輸出。
格式塔 by Pinterest - Pinterest 跨產品使用的設計語言
GOV.UK 設計系統 by GOV.UK - GOV.UK 設計系統由政府數字服務維護
Grommet [] (https://github.com/grommet/grommet) 由 HP Enterprise - 提供可訪問性、模塊化、響應性和主題的部件設計系統、部件框架 (react)
Hedwig by Bring & Posten - 可以組裝在一起以構建任意數量的應用程序的設計組件的集合。
Help Scout 風格指南  由 Help Scout 提供 - 本風格指南是幫助 Help Scout 團隊成員快速行動並獲得一致體驗的一種方式
HubSpot Canvas by HubSpot - HubSpot Canvas 是 HubSpot 用於構建產品的設計系統。
Lexicon [] (https://github.com/liferay/lexicon-site) 由 Liferay - Lexicon 是一種設計語言，為在 Liferay 產品生態系統中構建接口提供通用框架。
閃電設計系統  by Salesforce - Salesforce Lightning 設計系統包括創建符合 Salesforce Lightning 原則、設計語言和最佳用戶界面的資源實踐
Mailchimp 的 Mailchimp 模式 - Mailchimp 的產品線指南
Marvel 的 Marvel Styleguide - Marvel 產品的 UI 組件、設計模式、品牌資產和代碼指南的實時清單
材質設計  by Google - Material 是一個適應性強的指南、組件和工具系統，支持用戶界面設計的最佳實踐
Mineral UI  - 一個網絡設計系統，可讓您快速構建高質量、可訪問的應用程序。由 CA Technologies 創建
MongoDB的UI設計系統  by MongoDB - MongoDB 設計系統包含構成所有 MongoDB 產品用戶體驗的 UI 構建塊。
Morningstar Design System by Morningstar - 品牌、視覺、用戶體驗和技術標準的集合，內置於中央庫中，以便團隊可以快速構建高質量、一致的體驗.
Mozilla 協議 by Mozilla - Mozilla 網站的設計系統
Nachos by Trello - Nachos 是跨產品使用的 Trello 設計系統
Opower 的 OPattern - Opattern 是一個設計系統和風格指南，適用於所有創建 Opower 產品的人。
Origami by Financial Times - Origami 是一組用於幫助構建網站的服務、組件和工具。
Pajamas Design System by Gitlab - 也稱為 GitLab 的開源設計系統，作為 GitLab 背後的資源、組件和設計指南
FutureLearn 的 模式庫 - 這是 FutureLearn 設計系統。
Photon by Mozilla Firefox - Firefox 的光子設計系統
Plasma [](https ://github.com/wework/plasma) 由 WeWork - Plasma 是 WeWork 用於創建合理、現代界面的設計系統
Pluralsight 設計系統  由 Pluralsight - 用於跨 Pluralsight 產品創建有凝聚力的設計的 UI 構建塊。
Pivotal UI  由 Pivotal Software - Pivotal UI 是為 Pivotal 品牌設計的 React 組件的集合
Polaris [] (https://github.com/Shopify/polaris) 由 Shopify - 實用指南，幫助人們了解如何使用 Polaris 為 Shopify 平台進行設計。
Predix 設計系統 由 GE Digital 提供 - Predix 設計系統是使用現代 Web 組件標準構建的，因此開發人員可以以最小的坡度開始使用我們的構建塊-向上。
PricelineOne  by Priceline - Priceline.com 設計系統，為用戶創造始終如一的出色體驗
Primer 由 Github - 使用 GitHub 的前端框架 Primer 構建網站的資源、工具和設計指南。
Heroku 的 Purple3 - Purple 為用戶界面的美學、功能和形式提供了指導，以提供一致的體驗。
Intuit 的 Quickbooks - QuickBooks 設計系統的使命是提供提升 Intuit 品牌的令人愉悅的客戶體驗。
RingUI  by JetBrains - 這個 UI 組件集合旨在為 JetBrains 內部構建的基於 Web 的產品提供所有必要的構建塊
Rizzo by Lonely Planet - Rizzo 是lonelyplanet.com 的 UI 層。Rizzo 還為 LP 的頁眉和頁腳、資產和样式指南提供服務。
Seek 風格指南 by Seek  - SEEK 的生活方式指南，由 React、webpack、 CSS 模塊和更少
小吃 by Instacart -Snacks 是一個基於 JavaScript 和 React 的組件庫。它有一個與 Instacart 風格相匹配的默認主題。
SpareBank1 的 SpareBank1 設計系統 - SpareBank1 跨學科的通用語言，以確保 SpareBank1 解決方案中的設計一致。
Spark 設計系統  by Quicken Loans - Spark Design System 是一個模式和組件系統，用於為 Quicken Loans 金融科技產品系列創建用戶界面
Stacks [](https ://github.com/StackExchange/Stacks) by Stack Overflow - Stacks 提供您在整個 Stack Overflow 中快速設計、構建和交付連貫體驗所需的一切
ACL 的 Starling 設計系統 - Starling 設計系統是實現一致性、更好地記錄模式和展望我們未來的一個組成部分。
StudyPortals 的 StudyPortals 風格指南 - 基於 StudyPortal 的設計原則進行設計。
Swarm 設計系統  由 Meetup - Meetup 產品設計指南。包括我們設計團隊的流程和原則以及視覺設計
Uniform by Hudl - Uniform 是 Hudl 的設計系統。它的存在是為了通過設計和代碼實現來統一 Hudl 的產品。
美國網頁設計系統  美國政府 - 美國網頁設計系統幫助聯邦政府建立快速、可訪問、適合移動設備的網站。
USAJOBS 設計系統  by USAJOBS - 描述 USAJOBS、Open Opportunities 和 Agency Talent Portal 的設計語言和可重用組件
uStyle [](https uSwitch-uStyle 包含與 uSwitch 核心設計原則相關的文檔和指南
VTEX 風格指南 by VTEX - 由 React 組件庫支持的 VTEX 設計系統
Wonderbly Design System by Wonderbly - 基於 Wonderbly 設計原則的設計系統
Workday Canvas Design System by Workday - 深入研究 Workday 設計標準、寫作指南和劇本，以創造卓越的企業體驗。
Zendesk Garden [
Awesome UI 組件庫 用於樣式指南的組件庫實現（React、Vue、Angular 等）
Google 設計 - 由 Google 的一組設計師、作家和開發人員領導的合作努力，以發布原創內容、舉辦活動並促進促進設計和技術的創意和教育合作夥伴關係.
＃＃ 貢獻
歡迎提出建議和 PR！
請閱讀 貢獻指南 以開始使用。
＃＃ 執照
