Awesome Design Systems Overview

๐Ÿ’…๐Ÿป โš’ A collection of awesome design systems

๐Ÿ  Home ยท ๐Ÿ”ฅ Feed ยท ๐Ÿ“ฎ Subscribe ยท โค๏ธ Sponsor ยท ๐Ÿ˜บ alexpate/awesome-design-systems ยท โญ 17K ยท ๐Ÿท๏ธ Front-End Development

[ Daily / Weekly / Overview ]

cover

Contributions Welcome

Know a resource that isn't listed below? Feel free to create a new pull request (โญ17k).

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 Voice & Tone Designers Kit Source code *
Aalto University ๐Ÿ‘ ๐Ÿ‘ ๐Ÿ‘
Adobe Spectrum ๐Ÿ‘ ๐Ÿ‘ ๐Ÿ‘ :octocat: (โญ13k)
Adjust Atlas ๐Ÿ‘ ๐Ÿ‘ ๐Ÿ‘
Alaska Airlines ๐Ÿ‘ ๐Ÿ‘ ๐Ÿ‘ :octocat:
Alibaba Ant Design ๐Ÿ‘ ๐Ÿ‘ ๐Ÿ‘ :octocat: (โญ93k)
Amplify UI ๐Ÿ‘ ๐Ÿ‘ ๐Ÿ‘ :octocat: (โญ935)
Appear Here Styleguide ๐Ÿ‘ :octocat: (โญ51)
Apple Developer Design Guidelines ๐Ÿ‘
Aragon UI ๐Ÿ‘ :octocat: (โญ343)
Artsy Palette ๐Ÿ‘ :octocat: (โญ215)
Astro UXDS ๐Ÿ‘ ๐Ÿ‘ :octocat: (โญ24)
AT UIKIT ๐Ÿ‘ :octocat: (โญ2.3k)
Atlassian Design System ๐Ÿ‘ ๐Ÿ‘ ๐Ÿ‘ :space_invader:
Audi UI Kit ๐Ÿ‘ ๐Ÿ‘ :octocat: (โญ317)
Aurora (Government of Canada) ๐Ÿ‘ ๐Ÿ‘ ๐Ÿ‘ :octocat: (โญ91)
AutoGuru Overdrive ๐Ÿ‘ :octocat: (โญ43)
AWS Cloudscape Design System ๐Ÿ‘ ๐Ÿ‘ ๐Ÿ‘ :octocat: (โญ2.4k)
Backpack (Skyscanner) ๐Ÿ‘ ๐Ÿ‘ ๐Ÿ‘ :octocat: (โญ501)
Barnardoโ€™s Design System ๐Ÿ‘ ๐Ÿ‘ :octocat: (โญ29)
Basis Design System ๐Ÿ‘ :octocat: (โญ57)
BBC GEL (Global Experience Language) ๐Ÿ‘ ๐Ÿ‘ ๐Ÿ‘
Bento DS ๐Ÿ‘ ๐Ÿ‘ :octocat: (โญ119)
BLiP ๐Ÿ‘ :octocat: (โญ4)
Blueprint ๐Ÿ‘ ๐Ÿ‘ :octocat: (โญ21k)
Bold (Bridge Design System) ๐Ÿ‘ ๐Ÿ‘ :octocat: (โญ76)
Bolt Design System ๐Ÿ‘ :octocat: (โญ291)
Braid Design System ๐Ÿ‘ :octocat: (โญ1.5k)
Brighte Spark Design System ๐Ÿ‘ :octocat:
British Gas Nucleus ๐Ÿ‘ ๐Ÿ‘
Buildit Gravity ๐Ÿ‘ :octocat: (โญ20)
Bulb Design System ๐Ÿ‘ ๐Ÿ‘
Bumbag UI ๐Ÿ‘ :octocat: (โญ1k)
BuzzFeed Solid ๐Ÿ‘ ๐Ÿ‘ :octocat: (โญ135)
Buzzvil Design System ๐Ÿ‘ ๐Ÿ‘
CA Technologies Mineral UI ๐Ÿ‘ :octocat: (โญ559)
Cards Binary Design ๐Ÿ‘ ๐Ÿ‘ ๐Ÿ‘ :octocat:
CBRE Blocks ๐Ÿ‘ ๐Ÿ‘
Cedar ๐Ÿ‘ ๐Ÿ‘ :octocat: (โญ27)
censhare Zen ๐Ÿ‘ ๐Ÿ‘
Chakra UI ๐Ÿ‘ :octocat: (โญ38k)
City of Boston Fleet ๐Ÿ‘ ๐Ÿ‘ :octocat: (โญ22)
Cloudflare ๐Ÿ‘ :octocat: (โญ1.3k)
Co-op Experience Library ๐Ÿ‘ ๐Ÿ‘ ๐Ÿ‘ :octocat: (โญ5)
Contentful Forma 36 ๐Ÿ‘ ๐Ÿ‘ ๐Ÿ‘ :octocat: (โญ335)
Decathlon Design System - Vitamin ๐Ÿ‘ ๐Ÿ‘ :octocat: (โญ282)
Decentraland UI ๐Ÿ‘ :octocat: (โญ211)
Documenso Design System ๐Ÿ‘ ๐Ÿ‘ :octocat: (โญ8.8k)
Duet ๐Ÿ‘ ๐Ÿ‘
Duolingo ๐Ÿ‘
eBay Skin ๐Ÿ‘ :octocat: (โญ179)
Elastic UI Framework ๐Ÿ‘ ๐Ÿ‘ ๐Ÿ‘ :octocat: (โญ6.1k)
ENGIE Fluid Design System ๐Ÿ‘ ๐Ÿ‘
Enel ๐Ÿ‘
Enigma Boundless ๐Ÿ‘ :octocat: (โญ236)
Estonia Country Design Guidelines ๐Ÿ‘ ๐Ÿ‘ ๐Ÿ‘
Evergreen ๐Ÿ‘ :octocat: (โญ12k)
Figma UI Components ๐Ÿ‘ :octocat: (โญ37)
Financial Times Origami ๐Ÿ‘ :octocat: (โญ58)
Finastra Design System ๐Ÿ‘ ๐Ÿ‘ :octocat: (โญ124)
Finland Toolbox ๐Ÿ‘ ๐Ÿ‘
Firefox Photon Design System ๐Ÿ‘ ๐Ÿ‘ ๐Ÿ‘ :octocat: (โญ275)
Fish Tank Design System ๐Ÿ‘ ๐Ÿ‘ ๐Ÿ‘ :octocat: (โญ17)
Flame Design System Santander ๐Ÿ‘ ๐Ÿ‘ ๐Ÿ‘
Flowbite Design System ๐Ÿ‘ ๐Ÿ‘ :octocat: (โญ8k)
Fluent UI ๐Ÿ‘ ๐Ÿ‘ ๐Ÿ‘ :octocat: (โญ19k)
Foundation ๐Ÿ‘ ๐Ÿ‘ ๐Ÿ‘ :octocat: (โญ30k)
Foyer Design System ๐Ÿ‘ ๐Ÿ‘ :closed_lock_with_key:
French Government Design System ๐Ÿ‘ ๐Ÿ‘ ๐Ÿ‘ :octocat: (โญ248)
FutureLearn Pattern Library ๐Ÿ‘
GitHub Primer ๐Ÿ‘ ๐Ÿ‘ :octocat:
GitLab Design System - Pajamas ๐Ÿ‘ ๐Ÿ‘ ๐Ÿ‘ :fox_face:
GoodBarber Design System ๐Ÿ‘
Google Material Design ๐Ÿ‘ ๐Ÿ‘ ๐Ÿ‘ :octocat: (โญ1.1k)
GOV.UK Design System ๐Ÿ‘ :octocat: (โญ518)
Gympass Yoga ๐Ÿ‘ ๐Ÿ‘ :octocat: (โญ226)
Halstack ๐Ÿ‘ ๐Ÿ‘ :octocat: (โญ7)
HashiCorp Helios ๐Ÿ‘ ๐Ÿ‘ ๐Ÿ‘ :octocat: (โญ444)
Help Scout ๐Ÿ‘ ๐Ÿ‘ :octocat: (โญ37)
Heroku Purple3 ๐Ÿ‘
Hewlett Packard grommet ๐Ÿ‘ :octocat: (โญ8.3k)
HubSpot Canvas ๐Ÿ‘ ๐Ÿ‘ :octocat: (โญ32)
Hudl Design System ๐Ÿ‘ ๐Ÿ‘
IBM Carbon ๐Ÿ‘ ๐Ÿ‘ ๐Ÿ‘ :octocat: (โญ7.9k)
IBM Design Language ๐Ÿ‘ ๐Ÿ‘
IBM Northstar ๐Ÿ‘ ๐Ÿ‘
Intuit Harmony ๐Ÿ‘ ๐Ÿ‘ ๐Ÿ‘
JetBrains Ring UI ๐Ÿ‘ :octocat: (โญ3.6k)
Jobber (๐Ÿ”ฑ Atlantis) ๐Ÿ‘ :octocat: (โญ27)
JotaDS ๐Ÿ‘ ๐Ÿ‘ :octocat:
Just Eat Takeaway.com PIE Design System ๐Ÿ‘ ๐Ÿ‘ :octocat: (โญ27)
Kaizen ๐Ÿ‘ ๐Ÿ‘ :octocat: (โญ162)
Kalo UI ๐Ÿ‘ :octocat: (โญ26)
Kiwi.com Orbit ๐Ÿ‘ ๐Ÿ‘ :octocat: (โญ1.4k)
KoliBri (Public-UI) ๐Ÿ‘ :octocat: (โญ175)
Kontur ๐Ÿ‘ ๐Ÿ‘ :octocat: (โญ254)
Latitude ๐Ÿ‘ ๐Ÿ‘ ๐Ÿ‘ :octocat: (โญ20)
Lexicon ๐Ÿ‘ ๐Ÿ‘
Lost My Name Design System ๐Ÿ‘
Louder Than Ten Manual ๐Ÿ‘ ๐Ÿ‘
Mail.ru Group Paradigm ๐Ÿ‘ ๐Ÿ‘ ๐Ÿ‘
Mailchimp Content Styleguide ๐Ÿ‘
Mailchimp Patterns ๐Ÿ‘
Mantine ๐Ÿ‘ :octocat: (โญ27k)
Marvel Styleguide ๐Ÿ‘
Material Minimal ๐Ÿ‘ ๐Ÿ‘ ๐Ÿ‘ :octocat: (โญ24k)
Materialize CSS ๐Ÿ‘ ๐Ÿ‘ :octocat: (โญ39k)
Meetup Swarm ๐Ÿ‘ ๐Ÿ‘ ๐Ÿ‘ :octocat: (โญ21)
Mesh Design System ๐Ÿ‘ ๐Ÿ‘
Mesosphere CNVS ๐Ÿ‘ :octocat: (โญ28)
Microsoft Fluent ๐Ÿ‘ ๐Ÿ‘ :octocat: (โญ19k)
Mixpanel Design System ๐Ÿ‘ ๐Ÿ‘
MongoDB Design System ๐Ÿ‘ ๐Ÿ‘ :octocat: (โญ36)
Monzo Tone of Voice ๐Ÿ‘
Morningstar Design System ๐Ÿ‘ ๐Ÿ‘ ๐Ÿ‘
Mozilla Protocol ๐Ÿ‘ :octocat: (โญ261)
NASA Web Design System ๐Ÿ‘ :octocat: (โญ115)
NationBuilder Radius ๐Ÿ‘
NHS.UK Service Manual ๐Ÿ‘ ๐Ÿ‘
NetApp Luci ๐Ÿ‘
Nordhealth ๐Ÿ‘ ๐Ÿ‘
Nordnet ๐Ÿ‘ ๐Ÿ‘
Nutanix ๐Ÿ‘
Okta Odyssey Design System ๐Ÿ‘ ๐Ÿ‘ :octocat: (โญ106)
Ontario Design System ๐Ÿ‘ ๐Ÿ‘ :globe_with_meridians:
Opattern ๐Ÿ‘ ๐Ÿ‘
Oracle Alta UI ๐Ÿ‘
Oracle Redwood ๐Ÿ‘ ๐Ÿ‘
PatternFly ๐Ÿ‘ ๐Ÿ‘ ๐Ÿ‘ :octocat:
Persona Design System ๐Ÿ‘ ๐Ÿ‘ :octocat: (โญ57)
Pharos: JSTOR's Design System ๐Ÿ‘ ๐Ÿ‘ :octocat: (โญ123)
Pinterest Gestalt ๐Ÿ‘ :octocat: (โญ4.3k)
Pivotal ๐Ÿ‘ :octocat: (โญ638)
Pluralsight Design System ๐Ÿ‘ :octocat: (โญ295)
Porsche Design System ๐Ÿ‘ ๐Ÿ‘ :octocat: (โญ494)
Priceline Design System ๐Ÿ‘ ๐Ÿ‘ :octocat: (โญ722)
Pulse Design System ๐Ÿ‘ ๐Ÿ‘ ๐Ÿ‘ :octocat: (โญ115)
Pusher Chameleon ๐Ÿ‘ :octocat: (โญ35)
Radix ๐Ÿ‘ :octocat: (โญ2.3k)
Rambler ๐Ÿ‘ :octocat: (โญ191)
Reach UI ๐Ÿ‘ ๐Ÿ‘ :octocat: (โญ6k)
Rendition ๐Ÿ‘ :octocat: (โญ214)
Salesforce Lightning Design System ๐Ÿ‘ ๐Ÿ‘ ๐Ÿ‘ :octocat: (โญ3.6k)
Sage by Kajabi ๐Ÿ‘ :octocat: (โญ20)
SAP Fiori ๐Ÿ‘
SAP Fundamental (โญ270) ๐Ÿ‘ :octocat: (โญ270)
SAP OpenUI (โญ3k) ๐Ÿ‘ :octocat: (โญ3k)
Scania Digital Design System ๐Ÿ‘ ๐Ÿ‘ :octocat: (โญ30)
Seeds ๐Ÿ‘ ๐Ÿ‘ ๐Ÿ‘
SEEK Style Guide ๐Ÿ‘ :octocat: (โญ307)
Semi Design ๐Ÿ‘ ๐Ÿ‘ :octocat: (โญ8.6k)
Semrush Intergalactic Design System ๐Ÿ‘ ๐Ÿ‘ :octocat: (โญ146)
Shoelace ๐Ÿ‘ ๐Ÿ‘ :octocat: (โญ13k)
Shopify Polaris ๐Ÿ‘ ๐Ÿ‘ ๐Ÿ‘ :octocat: (โญ5.8k)
Shadcn/ui ๐Ÿ‘ :octocat:
Siemens iX ๐Ÿ‘ ๐Ÿ‘ ๐Ÿ‘ :octocat: (โญ211)
Singapore Government Design System ๐Ÿ‘ ๐Ÿ‘ ๐Ÿ‘ :octocat: (โญ21)
Sky Toolkit ๐Ÿ‘ :octocat:
Stacks โ€“ Stack Overflow ๐Ÿ‘ ๐Ÿ‘ :octocat: (โญ616)
Starbucks Style Guide ๐Ÿ‘
Strapi Design System ๐Ÿ‘ :octocat: (โญ480)
Teambition Clarity Design ๐Ÿ‘
Telefรณnica Mรญstica ๐Ÿ‘ ๐Ÿ‘ :octocat: (โญ24)
Thumbprint ๐Ÿ‘ :octocat: (โญ202)
Tizen CircularUI ๐Ÿ‘ ๐Ÿ‘ :octocat: (โญ80)
Twilio Paste ๐Ÿ‘ ๐Ÿ‘ ๐Ÿ‘ :octocat: (โญ448)
Uber's Base Web ๐Ÿ‘ :octocat: (โญ8.7k)
Ubuntu Vanilla framework ๐Ÿ‘ ๐Ÿ‘ ๐Ÿ‘ :octocat: (โญ850)
USPTO UI Design Library ๐Ÿ‘ ๐Ÿ‘ :octocat:
uSwitch style guide ๐Ÿ‘ ๐Ÿ‘ :octocat: (โญ19)
U.S. Web Design Standards ๐Ÿ‘ ๐Ÿ‘ ๐Ÿ‘ :octocat: (โญ6.8k)
U.S. CMS.gov Design System ๐Ÿ‘
Vibe ๐Ÿ‘ ๐Ÿ‘ :octocat: (โญ450)
Vimeo Design System ๐Ÿ‘ :octocat: (โญ46)
VMware Clarity Design System ๐Ÿ‘ ๐Ÿ‘ ๐Ÿ‘ :octocat: (โญ6.4k)
VTEX Styleguide ๐Ÿ‘ ๐Ÿ‘ :octocat: (โญ166)
Vue Design System ๐Ÿ‘ :octocat: (โญ2.2k)
Ray by WeWork ๐Ÿ‘ :octocat: (โญ55)
Welcome UI ๐Ÿ‘ :octocat: (โญ631)
West Midlands Network Design System ๐Ÿ‘ ๐Ÿ‘ :octocat: (โญ5)
Wix Style React ๐Ÿ‘ ___
Vercel ๐Ÿ‘
Workday Canvas ๐Ÿ‘ ๐Ÿ‘ :octocat: (โญ302)
Yelp Styleguide ๐Ÿ‘ ๐Ÿ‘
Zendesk Garden ๐Ÿ‘ :octocat:

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