Awesome Design Systems

๐Ÿ’…๐Ÿป โš’ A collection of awesome design systems
Alternatives To Awesome Design Systems
Project NameStarsDownloadsRepos Using ThisPackages Using ThisMost Recent CommitTotal ReleasesLatest ReleaseOpen IssuesLicenseLanguage
Awesome Design Tools29,251
a month ago80mitJavaScript
The best design tools and plugins for everything ๐Ÿ‘‰
Awesome Design Systems15,984
6 days ago19unlicense
๐Ÿ’…๐Ÿป โš’ A collection of awesome design systems
Awesome Design14,697
3 months ago33
๐ŸŒŸ Curated design resources from all over the world.
Ui Buttons3,159
a year ago1mitCSS
100 Modern CSS Buttons. Every style that you can imagine.
Awesome Software Architecture2,248
13 days ago6cc0-1.0
A curated list of awesome articles, videos, and other resources to learn and practice software architecture, patterns, and principles.
Awesome Design Systems586
3 months agocc0-1.0
๐Ÿ“’ A curated list of bookmarks, resources and articles about design systems focused on developers.
Ui Design492
a year agocc-by-sa-4.0
:fire: A curated list of useful resources related to User Interface Design
Awesome React Design Systems385
4 years ago6cc0-1.0
A collection of awesome React-based design systems
Awesome Design Principles346
3 years agounlicense
โœจ A curated list of awesome design principles
Awesome Storybook296
10 months agocc0-1.0
A collection of awesome resources about @storybookjs ecosystem ๐ŸŽจ
Alternatives To Awesome Design Systems
Select To Compare


Alternative Project Comparisons
Readme

cover

Contributions Welcome

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

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 *
Adobe Spectrum ๐Ÿ‘ ๐Ÿ‘ ๐Ÿ‘
Alaska Airlines ๐Ÿ‘ ๐Ÿ‘ ๐Ÿ‘
Alibaba Ant Design ๐Ÿ‘ ๐Ÿ‘ ๐Ÿ‘
Amplify UI ๐Ÿ‘ ๐Ÿ‘ ๐Ÿ‘
Appear Here Styleguide ๐Ÿ‘
Apple Developer Design Guidelines ๐Ÿ‘
Aragon UI ๐Ÿ‘
Artsy Palette ๐Ÿ‘
Astro UXDS ๐Ÿ‘ ๐Ÿ‘
AT UIKIT ๐Ÿ‘
Atlassian Design System ๐Ÿ‘ ๐Ÿ‘ ๐Ÿ‘ ๐Ÿ‘พ
Audi UI Kit ๐Ÿ‘ ๐Ÿ‘
Aurora (Government of Canada) ๐Ÿ‘ ๐Ÿ‘ ๐Ÿ‘
AutoGuru Overdrive ๐Ÿ‘
AWS Cloudscape Design System ๐Ÿ‘ ๐Ÿ‘ ๐Ÿ‘
Backpack (Skyscanner) ๐Ÿ‘ ๐Ÿ‘ ๐Ÿ‘
Barnardoโ€™s Design System ๐Ÿ‘ ๐Ÿ‘
Basis Design System ๐Ÿ‘
BBC GEL (Global Experience Language) ๐Ÿ‘ ๐Ÿ‘ ๐Ÿ‘
Bento DS ๐Ÿ‘ ๐Ÿ‘
BLiP ๐Ÿ‘
Blueprint ๐Ÿ‘ ๐Ÿ‘
Bold (Bridge Design System) ๐Ÿ‘ ๐Ÿ‘
Bolt Design System ๐Ÿ‘
Braid Design System ๐Ÿ‘
Brighte Spark Design System ๐Ÿ‘
British Gas Nucleus ๐Ÿ‘ ๐Ÿ‘
Buildit Gravity ๐Ÿ‘
Bulb Design System ๐Ÿ‘ ๐Ÿ‘
Bumbag UI ๐Ÿ‘
BuzzFeed Solid ๐Ÿ‘ ๐Ÿ‘
Buzzvil Design System ๐Ÿ‘ ๐Ÿ‘
CA Technologies Mineral UI ๐Ÿ‘
Cards Binary Design ๐Ÿ‘ ๐Ÿ‘ ๐Ÿ‘
CBRE Blocks ๐Ÿ‘ ๐Ÿ‘
Cedar ๐Ÿ‘ ๐Ÿ‘
censhare Zen ๐Ÿ‘ ๐Ÿ‘
Chakra UI ๐Ÿ‘
City of Boston Fleet ๐Ÿ‘ ๐Ÿ‘
Cloudflare ๐Ÿ‘
Co-op Design Manual ๐Ÿ‘ ๐Ÿ‘ ๐Ÿ‘
Contentful Forma 36 ๐Ÿ‘ ๐Ÿ‘ ๐Ÿ‘
Decathlon Design System - Vitamin ๐Ÿ‘ ๐Ÿ‘
Decentraland UI ๐Ÿ‘
Duet ๐Ÿ‘ ๐Ÿ‘
Duolingo ๐Ÿ‘
eBay Skin ๐Ÿ‘
Elastic UI Framework ๐Ÿ‘ ๐Ÿ‘ ๐Ÿ‘
ENGIE Fluid Design System ๐Ÿ‘ ๐Ÿ‘
Enigma Boundless ๐Ÿ‘
Estonia Country Design Guidelines ๐Ÿ‘ ๐Ÿ‘ ๐Ÿ‘
Evergreen ๐Ÿ‘
Figma UI Components ๐Ÿ‘
Financial Times Origami ๐Ÿ‘
Finastra Design System ๐Ÿ‘ ๐Ÿ‘
Finland Toolbox ๐Ÿ‘ ๐Ÿ‘
Firefox Photon Design System ๐Ÿ‘ ๐Ÿ‘ ๐Ÿ‘
Fish Tank Design System ๐Ÿ‘ ๐Ÿ‘ ๐Ÿ‘
Flame Design System Santander ๐Ÿ‘ ๐Ÿ‘ ๐Ÿ‘
Flowbite Design System ๐Ÿ‘ ๐Ÿ‘
Fluent UI ๐Ÿ‘ ๐Ÿ‘ ๐Ÿ‘
Foundation ๐Ÿ‘ ๐Ÿ‘ ๐Ÿ‘
Foyer Design System ๐Ÿ‘ ๐Ÿ‘ ๐Ÿ”
FutureLearn Pattern Library ๐Ÿ‘
GitHub Primer ๐Ÿ‘ ๐Ÿ‘
GitLab Design System - Pajamas ๐Ÿ‘ ๐Ÿ‘ ๐Ÿ‘ ๐ŸฆŠ
GoodBarber Design System ๐Ÿ‘
Google Material Design ๐Ÿ‘ ๐Ÿ‘ ๐Ÿ‘
GOV.UK Design System ๐Ÿ‘
Gympass Yoga ๐Ÿ‘ ๐Ÿ‘
Halstack ๐Ÿ‘ ๐Ÿ‘
HashiCorp Helios ๐Ÿ‘ ๐Ÿ‘ ๐Ÿ‘
Help Scout ๐Ÿ‘ ๐Ÿ‘
Heroku Purple3 ๐Ÿ‘
Hewlett Packard grommet ๐Ÿ‘
HubSpot Canvas ๐Ÿ‘ ๐Ÿ‘
Hudl Design System ๐Ÿ‘ ๐Ÿ‘
IBM Carbon ๐Ÿ‘ ๐Ÿ‘ ๐Ÿ‘
IBM Design Language ๐Ÿ‘ ๐Ÿ‘
IBM Northstar ๐Ÿ‘ ๐Ÿ‘
Intuit Harmony ๐Ÿ‘ ๐Ÿ‘ ๐Ÿ‘
JetBrains Ring UI ๐Ÿ‘
Jobber (๐Ÿ”ฑ Atlantis) ๐Ÿ‘
JotaDS ๐Ÿ‘ ๐Ÿ‘
Kaizen ๐Ÿ‘ ๐Ÿ‘
Kalo UI ๐Ÿ‘
Kiwi.com Orbit ๐Ÿ‘ ๐Ÿ‘
KoliBri (Public-UI) ๐Ÿ‘
Kontur ๐Ÿ‘ ๐Ÿ‘
Latitude ๐Ÿ‘ ๐Ÿ‘ ๐Ÿ‘
Lexicon ๐Ÿ‘ ๐Ÿ‘
Lost My Name Design System ๐Ÿ‘
Louder Than Ten Manual ๐Ÿ‘ ๐Ÿ‘
Mail.ru Group Paradigm ๐Ÿ‘ ๐Ÿ‘ ๐Ÿ‘
Mailchimp Content Styleguide ๐Ÿ‘
Mailchimp Patterns ๐Ÿ‘
Mantine ๐Ÿ‘
Marvel Styleguide ๐Ÿ‘
Meetup Swarm ๐Ÿ‘ ๐Ÿ‘ ๐Ÿ‘
Mesh Design System ๐Ÿ‘ ๐Ÿ‘
Mesosphere CNVS ๐Ÿ‘
Microsoft Fluent ๐Ÿ‘ ๐Ÿ‘
Mixpanel Design System ๐Ÿ‘ ๐Ÿ‘
MongoDB Design System ๐Ÿ‘ ๐Ÿ‘
Monzo Tone of Voice ๐Ÿ‘
Morningstar Design System ๐Ÿ‘ ๐Ÿ‘ ๐Ÿ‘
Mozilla Protocol ๐Ÿ‘
NASA Web Design System ๐Ÿ‘
NationBuilder Radius ๐Ÿ‘
NHS.UK Service Manual ๐Ÿ‘ ๐Ÿ‘
NetApp Luci ๐Ÿ‘
Nordhealth ๐Ÿ‘ ๐Ÿ‘
Nordnet ๐Ÿ‘ ๐Ÿ‘
Nutanix ๐Ÿ‘
Okta Odyssey Design System ๐Ÿ‘ ๐Ÿ‘
Opattern ๐Ÿ‘ ๐Ÿ‘
Oracle Alta UI ๐Ÿ‘
Oracle Redwood ๐Ÿ‘ ๐Ÿ‘
PatternFly ๐Ÿ‘ ๐Ÿ‘ ๐Ÿ‘
Persona Design System ๐Ÿ‘ ๐Ÿ‘
Pharos: JSTOR's Design System ๐Ÿ‘ ๐Ÿ‘
Pinterest Gestalt ๐Ÿ‘
Pivotal ๐Ÿ‘
Pluralsight Design System ๐Ÿ‘
Priceline Design System ๐Ÿ‘ ๐Ÿ‘
Pulse Design System ๐Ÿ‘ ๐Ÿ‘ ๐Ÿ‘
Pusher Chameleon ๐Ÿ‘
Radix ๐Ÿ‘
Rambler ๐Ÿ‘
Reach UI ๐Ÿ‘ ๐Ÿ‘
Rendition ๐Ÿ‘
Salesforce Lightning Design System ๐Ÿ‘ ๐Ÿ‘ ๐Ÿ‘
SAP Fiori ๐Ÿ‘
SAP Fundamental ๐Ÿ‘
SAP OpenUI ๐Ÿ‘
Scania Digital Design System ๐Ÿ‘ ๐Ÿ‘
Seeds ๐Ÿ‘ ๐Ÿ‘ ๐Ÿ‘
SEEK Style Guide ๐Ÿ‘
Semi Design ๐Ÿ‘ ๐Ÿ‘
Semrush Intergalactic Design System ๐Ÿ‘ ๐Ÿ‘
Shopify Polaris ๐Ÿ‘ ๐Ÿ‘ ๐Ÿ‘
Siemens iX ๐Ÿ‘ ๐Ÿ‘ ๐Ÿ‘
Singapore Government Design System ๐Ÿ‘ ๐Ÿ‘ ๐Ÿ‘
Sky Toolkit ๐Ÿ‘
Stacks โ€“ Stack Overflow ๐Ÿ‘ ๐Ÿ‘
Starbucks Style Guide ๐Ÿ‘
Teambition Clarity Design ๐Ÿ‘
Telefรณnica Mรญstica ๐Ÿ‘ ๐Ÿ‘
Thumbprint ๐Ÿ‘
Tizen CircularUI ๐Ÿ‘ ๐Ÿ‘
Twilio Paste ๐Ÿ‘ ๐Ÿ‘ ๐Ÿ‘
Uber's Base Web ๐Ÿ‘
Ubuntu Vanilla framework ๐Ÿ‘ ๐Ÿ‘ ๐Ÿ‘
USPTO UI Design Library ๐Ÿ‘ ๐Ÿ‘
uSwitch style guide ๐Ÿ‘ ๐Ÿ‘
U.S. Web Design Standards ๐Ÿ‘ ๐Ÿ‘ ๐Ÿ‘
U.S. CMS.gov Design System ๐Ÿ‘
Vimeo Design System ๐Ÿ‘
VMware Clarity Design System ๐Ÿ‘ ๐Ÿ‘ ๐Ÿ‘
VTEX Styleguide ๐Ÿ‘ ๐Ÿ‘
Vue Design System ๐Ÿ‘
Ray by WeWork ๐Ÿ‘
Welcome UI ๐Ÿ‘
West Midlands Network Design System ๐Ÿ‘ ๐Ÿ‘
Wix Style React ๐Ÿ‘
Vercel ๐Ÿ‘
Workday Canvas ๐Ÿ‘ ๐Ÿ‘
Yelp Styleguide ๐Ÿ‘ ๐Ÿ‘
Zendesk Garden ๐Ÿ‘
Materialize CSS ๐Ÿ‘ ๐Ÿ‘
Material Minimal ๐Ÿ‘ ๐Ÿ‘ ๐Ÿ‘

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

Popular Design System Projects
Popular Awesome List Projects
Popular User Interface Categories
Related Searches

Get A Weekly Email With Trending Projects For These Categories
No Spam. Unsubscribe easily at any time.
Awesome List
Ibm
Styleguide
Design System
Mailchimp