jianliao / awesome-design-systems

💅🏻 ⚒ A collection of awesome design systems

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

---

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 *	Components Library Framework	Icon System&Service	Online Playground Service	Built-in Analytics
Alfa-Bank	👍		👍		React
Alibaba Ant Design	👍	👍	👍		React Angular Vue	👍
Appear Here Styleguide	👍				React	👍
Apple Developer Design Guidelines			👍
Aragon UI	👍				React
Artsy Reaction	👍				React
AT UIKIT	👍				Vue
Atlassian Design Language	👍	👍	👍		React	👍		👍
Audi UI Kit	👍		👍		VanillaJs
Aurora (Government of Canada)	👍	👍	👍		React
Backpack (Skyscanner)	👍		👍		React
BBC GEL (Global Experience Language)	👍	👍	👍
Blueprint	👍		👍		React		👍
Bulb Design System	👍	👍			React
BuzzFeed Solid	👍		👍		CSS
eBay Skin	👍				CSS
Enigma Boundless	👍				React
CA Technologies Mineral UI	👍				React
Cards Binary Design	👍	👍	👍		React
Cedar	👍		👍		Vue	👍	👍
Cloudflare	👍				React
City of Boston Fleet	👍	👍			React	👍
Co-op Design Manual	👍	👍	👍		CSS
Duolingo Design Guidelines	👍		👍		N/A
Estonia Country Design Guidelines	👍	👍	👍		N/A
Evergreen	👍				React
Firefox Photon Design System	👍	👍	👍		Token	👍
FutureLearn Pattern Library	👍				Token
GitHub Primer	👍				CSS
GitLab Design System		👍	👍	🦊	Vue
Google Material Design	👍	👍	👍		Angular		👍
GOV.UK Design System	👍				CSS Nunjucks
Help Scout	👍	👍			CSS	👍
Heroku Purple3	👍				Atomic CSS	👍 Icon CDN
Hewlett Packard grommet	👍				React	👍	👍
HubSpot Canvas	👍	👍			React	👍	👍
Hudl Design System	👍	👍			React	👍
IBM Carbon	👍	👍	👍		React VanillaJs Angular		👍
IBM Design Language	👍	👍
IBM Northstar	👍	👍
Intuit Harmony	👍	👍	👍
JetBrains Ring UI	👍				React AngularJs			👍
Kiwi Orbit	👍		👍		React	👍	👍
Kontur	👍				React	👍
Lexicon	👍	👍				👍
Lonely Planet Rizzo	👍				VanillaJs	👍
Louder Than Ten Manual	👍	👍
Lost My Name Design System	👍				React
Mailchimp Content Styleguide		👍
Mailchimp Patterns	👍				CSS
Marvel Styleguide	👍				CSS
Mesosphere CNVS	👍				CSS
Microsoft Fluent	👍		👍		XAML
Mixpanel Design System	👍	👍			Panel(Web Components + Virtual DOM)	👍
MongoDB Design System	👍		👍		CSS React	👍
Monzo Tone of Voice		👍
Morningstar Design System	👍	👍	👍		CSS WebComponents	👍
NHS.UK Service Manual (Alpha)	👍	👍
nib Health Funds	👍				React	👍
Nordnet	👍	👍
Nutanix Prism	👍
Office UI Fabric	👍		👍		React
Opattern	👍	👍
Oracle Alta UI	👍
Pearson UX Framework	👍	👍	👍		React => Web Components	👍
Pinterest Gestalt	👍				React		👍
Pivotal	👍				React CSS	👍
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	👍
Teambition Clarity Design	👍
Trello - Nachos	👍		👍
Ubuntu Brand Guidelines	👍	👍
USPTO UI Design Library	👍		👍
uSwitch style guide	👍	👍
U.S. Web Design Standards	👍	👍	👍
U.S. CMS.gov Design System	👍
VMware Clarity Design System	👍	👍	👍
VTEX Styleguide	👍		👍
WeWork Plasma	👍
Workday Canvas	👍	👍
Yelp Styleguide	👍	👍
Zendesk Garden	👍

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