tomcon / awesome-design-systems

πŸ’…πŸ» βš’ A collection of awesome design systems

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool


Awesome Contributions Welcome

Know a resource that isn't listed below? Feel free to create a new pull request, or open an issue.

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'.


  • 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.
  • Storybook: Provides components with relevant stories for React Storybook.

Components Voice & Tone Designers Kit Storybook
Alfa-Bank πŸ‘ πŸ‘ πŸ‘
Alibaba Ant Design πŸ‘ πŸ‘ πŸ‘ πŸ‘
Appear Here Styleguide πŸ‘ πŸ‘
Apple Developer Design Guidelines πŸ‘
Artsy Reaction πŸ‘
Atlassian Design Language πŸ‘ πŸ‘ πŸ‘ πŸ‘
Audi UI Kit πŸ‘ πŸ‘
Backpack (Skyscanner) πŸ‘ πŸ‘
BBC GEL (Global Experience Language) πŸ‘ πŸ‘ πŸ‘
Blueprint πŸ‘ πŸ‘
Bulb Design System πŸ‘ πŸ‘
BuzzFeed Solid πŸ‘ πŸ‘
eBay Skin πŸ‘
Enigma Boundless πŸ‘
CA Technologies Mineral UI πŸ‘
Cards Binary Design πŸ‘ πŸ‘ πŸ‘ πŸ‘
Cloudflare πŸ‘
City of Boston Fleet πŸ‘ πŸ‘
Code School πŸ‘
Co-op Design Manual πŸ‘ πŸ‘ πŸ‘
Duolingo Design Guidelines πŸ‘ πŸ‘
Estonia Country Design Guidelines πŸ‘ πŸ‘ πŸ‘
Firefox Photon Design System πŸ‘ πŸ‘ πŸ‘
FutureLearn Pattern Library πŸ‘
GitHub Primer πŸ‘ πŸ‘
GitLab Design System πŸ‘ πŸ‘
Google Material Design πŸ‘ πŸ‘ πŸ‘
GOV.UK Design System πŸ‘
Help Scout πŸ‘ πŸ‘
Heroku Purple3 πŸ‘
Hewlett Packard grommet πŸ‘
HubSpot Canvas πŸ‘ πŸ‘
Hudl Design System πŸ‘ πŸ‘
IBM Carbon πŸ‘ πŸ‘ πŸ‘ πŸ‘
IBM Design Language πŸ‘ πŸ‘
IBM Northstar πŸ‘ πŸ‘
Intuit Harmony πŸ‘ πŸ‘ πŸ‘
JetBrains Ring UI πŸ‘
Lexicon πŸ‘ πŸ‘
Lonely Planet Rizzo πŸ‘
Louder Than Ten Manual πŸ‘ πŸ‘
Lost My Name Design System πŸ‘
Mailchimp Content Styleguide πŸ‘
Mailchimp Patterns πŸ‘
Marvel Styleguide πŸ‘
Mesosphere CNVS πŸ‘
Microsoft Fluent πŸ‘ πŸ‘
Mixpanel Product Styleguide πŸ‘
MongoDB Design System πŸ‘ πŸ‘
Monzo Tone of Voice πŸ‘
Morningstar Design System πŸ‘ πŸ‘ πŸ‘
NHS.UK Service Manual (Alpha) πŸ‘ πŸ‘
nib Health Funds πŸ‘
Nordnet πŸ‘ πŸ‘ πŸ‘
Nutanix Prism πŸ‘
Office UI Fabric πŸ‘
Opattern πŸ‘ πŸ‘
Oracle Alta UI πŸ‘
PatternFly Open Interface Project πŸ‘ πŸ‘
Pearson UX Framework πŸ‘ πŸ‘ πŸ‘
Pinterest Gestalt πŸ‘ πŸ‘
Pivotal πŸ‘
Pluralsight Design System πŸ‘ πŸ‘
Predix Design System πŸ‘ πŸ‘ πŸ‘
Priceline Design System πŸ‘ πŸ‘ πŸ‘
Pusher Chameleon πŸ‘
Rambler πŸ‘ πŸ‘
Salesforce Lightning Design System πŸ‘ πŸ‘ πŸ‘
SAP Fiori πŸ‘
SEEK Style Guide πŸ‘
Shopify Polaris πŸ‘ πŸ‘ πŸ‘
Stack Exchange: Stacks UI πŸ‘
Starbucks Style Guide πŸ‘
Sky Toolkit πŸ‘
The University of Melbourne Design System πŸ‘
Trello - Nachos πŸ‘ πŸ‘
Ubuntu Brand Guidelines πŸ‘ πŸ‘
USPTO UI Design Library πŸ‘ πŸ‘
uSwitch style guide πŸ‘ πŸ‘
U.S. Web Design Standards πŸ‘ πŸ‘ πŸ‘
U.S. Design System πŸ‘
VMware {code} πŸ‘
VMware Clarity Design System πŸ‘ πŸ‘ πŸ‘
VMware UI Pattern Library πŸ‘ πŸ‘
WeWork Plasma πŸ‘
Yelp Styleguide πŸ‘ πŸ‘
Zendesk Garden πŸ‘ πŸ‘


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


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

ezoic increase your site revenue


πŸ’…πŸ» βš’ A collection of awesome design systems

License:The Unlicense