LogoLogo
HomeBlogResources
  • README
  • Design
    • Awesome Design Tools
      • Awesome Design Tools
    • Awesome-UI-Templates
      • README-en
    • awesome-design-systems
      • Awesome Design System
    • Awesome Figma
      • Awesome Figma
    • awesome-styleguides
      • README-en
    • awesome-typography
      • Awesome Typography
    • awesome-ui
      • README-en
    • Awesome UX Design Styleguides
      • Awesome UX Design Styleguides
    • awesome-ux-designer
      • README-en
      • Reading list
    • awesome-ux
      • README-en
    • Awesome Webflow
      • webflow-masterclass
        • Webflow + Firebase用戶認證
    • webflow-masterclass
      • Webflow + Firebase用戶認證
  • Devops
    • Awesome SaaS boilerplate
    • Free for Dev
    • Mega Awesome List
    • Awesome-WordPress-Plugins
      • Awesome WordPress Plugins List
    • Awesome Wordpress Plugin List
    • Awesome CMS
    • awesome-flutter-cn
    • awesome-headless-cms
      • readme-en
    • Awesome-jamstack-resources
      • Awesome-jamstack-resources
    • Awesome Laravel
      • Awesome Laravel
    • awesome-list
      • The awesome manifesto
      • Contributor Covenant Code of Conduct
      • Contribution Guidelines
      • Creating Your Own List
      • pull_request_template
      • Media
    • Awesome Minio
    • awesome-react
      • README-en
    • Awesome Stack
      • Awesome Stacks
    • Awesome UI component library
      • Awesome UI component library
    • awesome-uikit
      • README-en
    • awesome-vercel
      • Awesome Vercel (Previously ZEIT )
    • Awesome WooCommerce
      • Awesome WooCommerce
    • Awesome WordPress
      • Awesome WordPress
    • Awesome Wordpress Developer Tools
      • Awesome WP Developer Tools
  • Marketing
    • Awesome ADTech
      • Awesome AdTech
    • awesome-discord-communities
      • Contributor Covenant Code of Conduct
      • CONTRIBUTING
      • FAQ
      • Server Badges and Tags
      • .github
        • ISSUE_TEMPLATE
          • custom
        • ISSUE_TEMPLATE
          • issue--exisiting-community
        • ISSUE_TEMPLATE
    • HubSpot CMS Boilerplate
      • HubSpot CMS Boilerplate
    • Awesome HubSpot
    • Awesome Marketing
    • awesome-seo
    • marketing-for-engineers
      • README-en
    • Tech-Marketer
  • Nocode
    • Awesome NoCode / LowCode
      • readme-en
  • Server
    • Awesome Cloudflare
      • Awesome Cloudflare
    • Awesome-Selfhosted
      • Awesome-Selfhosted
  • shopify
    • Awesome Shopify
      • Awesome Shopify
    • Shopify Awesome 真棒!
      • Awesome Shopify
  • Tools
    • Awesome VS Code
    • Awesome Mac
      • Awesome Mac
      • editor-plugin-zh
      • editor-plugin
    • Awesome Nomad
      • Awesome Nomad
    • Awesome-notion
      • Awesome Notion (Eng)
    • awesome-tools-for-startups
      • Awesome list of FREE tools Startups should be using
  • web3
    • Blockchain-stuff
      • CONTRIBUTE
    • Blockchain-stuff
    • Web3.0_Vault-main
    • Web3.0_Vault-main
      • basics
    • awesome-discord-communities
      • Contributor Covenant Code of Conduct
      • CONTRIBUTING
      • FAQ
      • Server Badges and Tags
      • .github
        • ISSUE_TEMPLATE
          • custom
        • ISSUE_TEMPLATE
          • issue--exisiting-community
        • ISSUE_TEMPLATE
    • awesome-ethereum
    • awesome-solidity-gh-pages
      • Contributor Covenant Code of Conduct
      • Contribution Guidelines
      • PULL_REQUEST_TEMPLATE
    • Awesome Web3
      • Awesome Web3 Code of Conduct
      • Contribution Guidelines
      • PULL_REQUEST_TEMPLATE
    • free-Web3-resources
      • Contributor Covenant Code of Conduct
    • free-Web3-resources
      • Contributing Guidelines
    • free-Web3-resources
    • free-Web3-resources
      • Intro to Solidity
    • free-Web3-resources
      • 200-days-of-Web3
    • free-Web3-resources
    • free-Web3-resources
    • Free Web3 Resources
    • free-Web3-resources
      • .github
    • free-Web3-resources
      • .github
        • ISSUE_TEMPLATE
    • free-Web3-resources
      • .github
        • ISSUE_TEMPLATE
    • Web3.0_Vault-main
    • web3together-main
      • CODE_OF_CONDUCT
      • sessions
        • Getting Started in Smart Contract Development with Solidity
    • free-Web3-resources
      • .github
        • PULL_REQUEST_TEMPLATE
    • free-Web3-resources
      • .github
        • ISSUE_TEMPLATE
          • bug_report
    • free-Web3-resources
      • .github
        • ISSUE_TEMPLATE
          • feature_request
  • webgl
    • Awesome-threejs
      • docs
        • Hellow Three.js 之 三维空间中观察物体的方法--照相机
        • 创建自己的全景图
        • Hellow Three.js 之 创建各种几何形状
        • hello-light-pro
        • Hellow Three.js 之 光影之谜
        • Hellow Three.js 之 加载外部3D模型
        • Hellow Three.js 之 给创建的物体赋予材质
        • hello-obj-mtl
        • P5
        • Hellow Three.js 之 有趣的着色器
        • Hellow Three.js 之 运动物体的性能监测
        • Hellow Three.js 之 让物体动起来
        • Hello Three.js 之 Hello world!
        • what-webgl
        • glsl
          • GLSL 中文手册
          • OpenGL GLSL 语法和函数详解
          • The book of shaders 记录
          • 各种 Shaders 效果
      • demo
        • 有趣的 three.js Demo
          • Decorative WebGL Backgrounds
          • Infinite Tubes
          • The Aviator
        • P5.js Demo
        • Learning-Threejs
          • learning-threejs
        • Learning-Threejs
          • master
            • learning-threejs
        • Learning-Threejs
          • master
            • learning-threejs
        • Learning-Threejs
          • master
            • learning-threejs
        • Learning-Threejs
          • master
            • learning-threejs
        • Learning-Threejs
          • master
            • learning-threejs
        • Learning-Threejs
          • master
            • learning-threejs
        • Learning-Threejs
          • master
            • learning-threejs
        • Learning-Threejs
          • master
            • learning-threejs
        • Learning-Threejs
          • master
            • learning-threejs
        • Learning-Threejs
          • master
            • learning-threejs
        • Learning-Threejs
          • master
            • learning-threejs
        • Learning-Threejs
          • master
            • assets
              • models
                • ogre
                  • ogro
    • awesome-threejs
      • README-en
      • Contributor Covenant Code of Conduct
      • Contribution Guidelines
    • Awesome WebGL
      • CONTRIBUTING
      • Awesome WebGL
      • Contributor Covenant Code of Conduct
      • Libraries
        • CONTRIBUTING
      • Libraries
        • WebGL Libraries - Features
      • Libraries
        • WebGL Libraries - File Size
      • Awesome WebGL - Libaries/Frameworks
  • AI
    • ChatGPT 中文指南
    • 生成式 AI 項目、工具、藝術作品和模型的精選列表
    • 精選 GPT-4 指南
    • ChatGPT 工具收錄
      • Awesome ChatGPT
    • ChatGPT 中文調教指南
    • GPT 開放原始碼項目合集
    • ChatGPT 應用收藏
    • Awesome OpenAI - 超酷的 OpenAI 蒐藏
      • Awesome-openAI
    • Awesome GPT-3 應用集
      • Awesome GPT-3
    • ChatGPT 提示指令庫
      • Awesome ChatGPT Prompts
  • SaaS
    • awesome-saas-boilerplates
Powered by GitBook
On this page
Export as PDF
  1. Design
  2. awesome-design-systems

Awesome Design System

Previousawesome-design-systemsNextAwesome Figma

Last updated 2 years ago

Know a resource that isn't listed below? Feel free to create a new .

A design system is a collection of documentation on principles and best practices, that helps guide a team to build digital products. They are often embodied in UI libraries and pattern libraries, but can extend to include guides on other areas such as 'Voice and Tone'.


Tags

  • Components: Contains coded patterns and examples.

  • Voice & Tone: Provides guidance on how language should be used.

  • Designers Kit: Includes a Sketch/Photoshop/Figma/etc. file for designers.

  • Source code: Publically viewable source code


Components
Voice & Tone
Designers Kit
Source code *

👍

👍

👍

👍

👍

👍

👍

👍

👍

👍

👍

👍

👍

👍

👍

👍

👍

👍

👍

👍

👍

👍

👍

👍

👍

👍

👍

👍

👍

👍

👍

👍

👍

👍

👍

👍

👍

👍

👍

👍

👍

👍

👍

👍

👍

👍

👍

👍

👍

👍

👍

👍

👍

👍

👍

👍

👍

👍

👍

👍

👍

👍

👍

👍

👍

👍

👍

👍

👍

👍

👍

👍

👍

👍

👍

👍

👍

👍

👍

👍

👍

👍

👍

👍

👍

👍

👍

👍

👍

👍

👍

👍

👍

👍

👍

👍

👍

👍

👍

👍

👍

👍

👍

👍

👍

👍

👍

👍

👍

👍

👍

👍

👍

👍

👍

👍

👍

👍

👍

👍

👍

👍

👍

👍

👍

👍

👍

👍

👍

👍

👍

👍

👍

👍

👍

👍

👍

👍

👍

👍

👍

👍

👍

👍

👍

👍

👍

👍

👍

👍

👍

👍

👍

👍

👍

👍

👍

👍

👍

👍

👍

👍

👍

👍

👍

👍

👍

👍

👍

👍

👍

👍

👍

👍

👍

👍

👍

👍

👍

👍

👍

👍

👍

👍

👍

👍

👍

👍

👍

👍

👍

👍

👍

👍

👍

👍

👍

👍

👍

👍

👍

👍

👍

👍

👍

👍

👍

👍

👍

👍

👍

👍

👍

👍

👍

👍

👍

👍

👍

👍

👍

👍

👍

👍

👍

👍

👍

👍

👍

👍

👍

👍

👍

👍

👍

👍

👍

👍

👍

👍

👍

👍

👍

👍

👍

👍

👍

👍

👍

👍

👍

👍

👍

👍

👍

👍

👍

👍

👍

👍

👍

👍

👍

👍

👍

👍

👍

👍

👍

👍

👍

👍

👍

👍

👍

👍

👍

👍

👍

👍

👍

👍

👍

👍

👍

Notes

*Projects marked as open source may not always be open to use. Always check the license of these projects before using them.

Although 'design systems', 'ui libraries', and 'pattern libraries' are different things, they are often used interchangeably. This list contains all three.

Credits

Cover icon: 'Solar System' by Andrejs Kirma from the Noun Project

pull request
🔐
Adobe Spectrum
:octocat:
Alfa-Bank
:octocat:
Alibaba Ant Design
:octocat:
Amplify UI
:octocat:
Appear Here Styleguide
:octocat:
Apple Developer Design Guidelines
Aragon UI
:octocat:
Artsy Palette
:octocat:
Astro UXDS
:octocat:
AT UIKIT
:octocat:
Atlassian Design System
Audi UI Kit
:octocat:
Aurora (Government of Canada)
:octocat:
Australian Government Design System
:octocat:
AutoGuru Overdrive
:octocat:
Backpack (Skyscanner)
:octocat:
Barnardo’s Design System
:octocat:
Basis Design System
:octocat:
BBC GEL (Global Experience Language)
BCC - Design System
:octocat:
BLiP
:octocat:
Bolt Design System
:octocat:
Bold (Bridge Design System)
:octocat:
Blueprint
:octocat:
Braid Design System
:octocat:
British Gas Nucleus
Buildit Gravity
:octocat:
Bulb Design System
BuzzFeed Solid
:octocat:
Bumbag UI
:octocat:
eBay Skin
:octocat:
Enigma Boundless
:octocat:
CA Technologies Mineral UI
:octocat:
Cards Binary Design
:octocat:
CBRE Blocks
Cedar
:octocat:
censhare Zen
Chakra UI
:octocat:
Cloudflare
:octocat:
City of Boston Fleet
:octocat:
Co-op Design Manual
:octocat:
Contentful Forma 36
:octocat:
Decathlon Design System - Vitamin
:octocat:
Decentraland UI
:octocat:
Duet
Duolingo
ENGIE Fluid Design System
Estonia Country Design Guidelines
Elastic UI Framework
:octocat:
Evergreen
:octocat:
Figma UI Components
:octocat:
Financial Times Origami
:octocat:
Finastra Design System
:octocat:
Finland Toolbox
Firefox Photon Design System
:octocat:
Fish Tank Design System
:octocat:
Flame Design System Santander
Foyer Design System
FutureLearn Pattern Library
Foundation
:octocat:
GitHub Primer
:octocat:
GitLab Design System - Pajamas
:fox_face:
Google Material Design
:octocat:
GOV.UK Design System
:octocat:
Gympass Yoga
:octocat:
Halstack
:octocat:
Help Scout
:octocat:
Heroku Purple3
Hewlett Packard grommet
:octocat:
HubSpot Canvas
:octocat:
Hudl Design System
IBM Carbon
:octocat:
IBM Design Language
IBM Northstar
Intuit Harmony
JetBrains Ring UI
:octocat:
Kalo UI
:octocat:
Kiwi.com Orbit
:octocat:
Kontur
:octocat:
Latitude
:octocat:
Lexicon
Lonely Planet Rizzo
:octocat:
Louder Than Ten Manual
Lost My Name Design System
Mailchimp Content Styleguide
Mailchimp Patterns
Mantine
:octocat:
Marvel Styleguide
Meetup Swarm
:octocat:
Mesh Design System
Mesosphere CNVS
:octocat:
Microsoft Fluent
:octocat:
Mixpanel Design System
MongoDB Design System
:octocat:
Monzo Tone of Voice
Morningstar Design System
Mozilla Protocol
:octocat:
NASA Web Design System
:octocat:
NationBuilder Radius
NHS.UK Service Manual (Beta)
Nordnet
Nutanix Prism
Okta Odyssey Design System
:octocat:
Fluent UI
:octocat:
Opattern
Oracle Alta UI
Mail.ru Group Paradigm
PatternFly
:octocat:
Pearson UX Framework
:octocat:
Pharos: JSTOR's Design System
:octocat:
Pinterest Gestalt
:octocat:
Pivotal
:octocat:
Pluralsight Design System
:octocat:
Predix Design System
Priceline Design System
:octocat:
Pulse Design System
:octocat:
Pusher Chameleon
:octocat:
Radix
:octocat:
Rambler
:octocat:
Rendition
:octocat:
Salesforce Lightning Design System
:octocat:
SAP Fiori
SAP Fundamental
:octocat:
SAP OpenUI
:octocat:
Seeds
SEEK Style Guide
:octocat:
Semi Design
:octocat:
Semrush Intergalactic Design System
:octocat:
Shopify Polaris
:octocat:
Singapore Government Design System
:octocat:
Stacks – Stack Overflow
:octocat:
Starbucks Style Guide
Sky Toolkit
:octocat:
The University of Melbourne Design System
:octocat:
Teambition Clarity Design
Telefónica Mística
:octocat:
Thumbprint
:octocat:
Tizen CircularUI
:octocat:
Twilio Paste
:octocat:
Uber's Base Web
:octocat:
Ubuntu Vanilla framework
:octocat:
USPTO UI Design Library
:octocat:
uSwitch style guide
:octocat:
U.S. Web Design Standards
:octocat:
U.S. CMS.gov Design System
Vimeo Design System
:octocat:
VMware Clarity Design System
:octocat:
VTEX Styleguide
:octocat:
Vue Design System
:octocat:
WeWork Plasma
Ray by WeWork
:octocat:
Welcome UI
:octocat:
West Midlands Network Design System
:octocat:
Vercel
Workday Canvas
:octocat:
Yelp Styleguide
Zendesk Garden
:octocat:
Page cover image