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'.
- 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 * | |
---|---|---|---|---|
π Aalto University | π | π | π | |
π Adobe Spectrum | π | π | π | Β 12976β Β Β 1127π΄ ) |
π Adjust Atlas | π | π | π | |
π Alaska Airlines | π | π | π | |
π Alibaba Ant Design | π | π | π | Β Β Β Β Β ?β Β Β Β Β Β ?π΄ ) |
π Amplify UI | π | π | π | Β Β Β Β Β ?β Β Β Β Β Β ?π΄ ) |
π Appear Here Styleguide | π | Β Β Β Β 51β Β Β Β Β Β 9π΄ ) |
||
π Apple Developer Design Guidelines | π | |||
π Aragon UI | π | Β Β Β 343β Β Β Β 127π΄ ) |
||
π Artsy Palette | π | Β Β Β 215β Β Β Β Β 45π΄ ) |
||
π Astro UXDS | π | π | Β Β Β Β 24β Β Β Β Β Β 8π΄ ) |
|
π AT UIKIT | π | Β Β 2337β Β Β Β 229π΄ ) |
||
π Atlassian Design System | π | π | π | π πΎ |
π Audi UI Kit | π | π | Β Β Β 316β Β Β Β Β 49π΄ ) |
|
π Aurora (Government of Canada) | π | π | π | Β Β Β Β 91β Β Β Β Β Β 8π΄ ) |
AutoGuru Overdrive | π | Β Β Β Β 42β Β Β Β Β Β 3π΄ ) |
||
π AWS Cloudscape Design System | π | π | π | Β Β 2357β Β Β Β 156π΄ ) |
π Backpack (Skyscanner) | π | π | π | Β Β Β 497β Β Β Β 186π΄ ) |
π Barnardoβs Design System | π | π | Β Β Β Β 29β Β Β Β Β Β 4π΄ ) |
|
π Basis Design System | π | Β Β Β Β 57β Β Β Β Β 10π΄ ) |
||
π BBC GEL (Global Experience Language) | π | π | π | |
π Bento DS | π | π | Β Β Β 115β Β Β Β Β 12π΄ ) |
|
π BLiP | π | Β Β Β Β Β 4β Β Β Β Β Β 7π΄ ) |
||
π Blueprint | π | π | Β 20730β Β Β 2175π΄ ) |
|
π Bold (Bridge Design System) | π | π | Β Β Β Β 76β Β Β Β Β Β 9π΄ ) |
|
π Bolt Design System | π | Β Β Β 292β Β Β Β Β 45π΄ ) |
||
π Braid Design System | π | Β Β 1521β Β Β Β Β 99π΄ ) |
||
π Brighte Spark Design System | π | Β Β Β Β Β ?β Β Β Β Β Β ?π΄ ) |
||
π British Gas Nucleus | π | π | ||
Buildit Gravity | π | Β Β Β Β 20β Β Β Β Β Β 6π΄ ) |
||
π Bulb Design System | π | π | ||
π Bumbag UI | π | Β Β 1005β Β Β Β Β 50π΄ ) |
||
π BuzzFeed Solid | π | π | Β Β Β 135β Β Β Β Β 30π΄ ) |
|
π Buzzvil Design System | π | π | ||
π CA Technologies Mineral UI | π | Β Β Β 558β Β Β Β Β 46π΄ ) |
||
Β Β Β Β Β ?β Β Β Β Β Β ?π΄ Cards Binary Design) |
π | π | π | Β Β Β Β Β ?β Β Β Β Β Β ?π΄ ) |
π CBRE Blocks | π | π | ||
π Cedar | π | π | Β Β Β Β 26β Β Β Β Β Β 5π΄ ) |
|
π censhare Zen | π | π | ||
π Chakra UI | π | Β 37866β Β Β 3267π΄ ) |
||
π City of Boston Fleet | π | π | Β Β Β Β 22β Β Β Β Β 10π΄ ) |
|
π Cloudflare | π | Β Β 1291β Β Β Β Β 81π΄ ) |
||
π Co-op Experience Library | π | π | π | Β Β Β Β Β 5β Β Β Β Β Β 1π΄ ) |
π Contentful Forma 36 | π | π | π | Β Β Β 335β Β Β Β Β 81π΄ ) |
π Decathlon Design System - Vitamin | π | π | Β Β Β 282β Β Β Β Β 76π΄ ) |
|
π Decentraland UI | π | Β Β Β 209β Β Β Β Β 92π΄ ) |
||
π Documenso Design System | π | π | Β Β 8549β Β Β 1212π΄ ) |
|
π Duet | π | π | ||
π Duolingo | π | |||
π eBay Skin | π | Β Β Β 178β Β Β Β Β 67π΄ ) |
||
π Elastic UI Framework | π | π | π | Β Β Β Β 51β Β Β Β 841π΄ ) |
π ENGIE Fluid Design System | π | π | ||
π Enigma Boundless | π | Β Β Β 236β Β Β Β Β 13π΄ ) |
||
π Estonia Country Design Guidelines | π | π | π | |
π Evergreen | π | Β 12390β Β Β Β 832π΄ ) |
||
π Figma UI Components | π | Β Β Β Β 37β Β Β Β Β Β 6π΄ ) |
||
π Financial Times Origami | π | Β Β Β Β 58β Β Β Β Β 14π΄ ) |
||
π Finastra Design System | π | π | Β Β Β 123β Β Β Β Β 44π΄ ) |
|
π Finland Toolbox | π | π | ||
π Firefox Photon Design System | π | π | π | Β Β Β 274β Β Β Β Β 74π΄ ) |
π Fish Tank Design System | π | π | π | Β Β Β Β 17β Β Β Β Β 16π΄ ) |
π Flame Design System Santander | π | π | π | |
π Flowbite Design System | π | π | Β Β 7912β Β Β Β 744π΄ ) |
|
π Fluent UI | π | π | π | Β 18513β Β Β 2732π΄ ) |
π Foundation | π | π | π | Β 29656β Β Β 5483π΄ ) |
π Foyer Design System | π | π | π | |
π FutureLearn Pattern Library | π | |||
π GitHub Primer | π | π | Β Β Β Β Β ?β Β Β Β Β Β ?π΄ ) |
|
π GitLab Design System - Pajamas | π | π | π | π π¦ |
π GoodBarber Design System | π | |||
π Google Material Design | π | π | π | Β Β 1071β Β Β Β 169π΄ ) |
π GOV.UK Design System | π | Β Β Β 510β Β Β Β 232π΄ ) |
||
π Gympass Yoga | π | π | Β Β Β 225β Β Β Β Β 47π΄ ) |
|
π Halstack | π | π | Β Β Β Β Β 7β Β Β Β Β 11π΄ ) |
|
π HashiCorp Helios | π | π | π | Β Β Β 442β Β Β Β Β 44π΄ ) |
π Help Scout | π | π | Β Β Β Β 37β Β Β Β Β 13π΄ ) |
|
π Heroku Purple3 | π | |||
π Hewlett Packard grommet | π | Β Β 8347β Β Β 1034π΄ ) |
||
π HubSpot Canvas | π | π | Β Β Β Β 32β Β Β Β Β Β 8π΄ ) |
|
π Hudl Design System | π | π | ||
π IBM Carbon | π | π | π | Β Β 7851β Β Β 1813π΄ ) |
π IBM Design Language | π | π | ||
π IBM Northstar | π | π | ||
π Intuit Harmony | π | π | π | |
π JetBrains Ring UI | π | Β Β 3610β Β Β Β 187π΄ ) |
||
π Jobber (π± Atlantis) | π | Β Β Β Β 27β Β Β Β Β 30π΄ ) |
||
π JotaDS | π | π | Β Β Β Β Β ?β Β Β Β Β Β ?π΄ ) |
|
π Kaizen | π | π | Β Β Β 161β Β Β Β Β 23π΄ ) |
|
π Kalo UI | π | Β Β Β Β 26β Β Β Β Β Β 4π΄ ) |
||
π 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 | π | Β 26730β Β Β 1888π΄ ) |
||
π Marvel Styleguide | π | |||
π Material Minimal | π | π | π | Β 24200β Β Β 3525π΄ ) |
π Materialize CSS | π | π | Β 38861β Β Β 4739π΄ ) |
|
π Meetup Swarm | π | π | π | Β Β Β Β Β ?β Β Β Β Β Β ?π΄ ) |
π Mesh Design System | π | π | ||
π Mesosphere CNVS | π | Β Β Β Β Β ?β Β Β Β Β Β ?π΄ ) |
||
π Microsoft Fluent | π | π | Β 18513β Β Β 2732π΄ ) |
|
π Mixpanel Design System | π | π | ||
MongoDB Design System | π | π | Β Β Β Β 36β Β Β Β Β Β 9π΄ ) |
|
π Monzo Tone of Voice | π | |||
Morningstar Design System | π | π | π | |
π Mozilla Protocol | π | Β Β Β 260β Β Β Β Β 77π΄ ) |
||
π NASA Web Design System | π | Β Β Β 114β Β Β Β Β 12π΄ ) |
||
π NationBuilder Radius | π | |||
π NHS.UK Service Manual | π | π | ||
π NetApp Luci | π | |||
π Nordhealth | π | π | ||
π Nordnet | π | π | ||
π Nutanix | π | |||
π Okta Odyssey Design System | π | π | Β Β Β 106β Β Β Β Β 32π΄ ) |
|
π Ontario Design System | π | π | π π | |
π Opattern | π | π | ||
π Oracle Alta UI | π | |||
π Oracle Redwood | π | π | ||
π PatternFly | π | π | π | |
π Persona Design System | π | π | Β Β Β Β 55β Β Β Β Β 14π΄ ) |
|
π Pharos: JSTOR's Design System | π | π | Β Β Β 123β Β Β Β Β 16π΄ ) |
|
π Pinterest Gestalt | π | Β Β 4244β Β Β Β 349π΄ ) |
||
π Pivotal | π | Β Β Β 638β Β Β Β Β 90π΄ ) |
||
π Pluralsight Design System | π | Β Β Β 296β Β Β Β Β 69π΄ ) |
||
π Porsche Design System | π | π | Β Β Β 484β Β Β Β Β 25π΄ ) |
|
π Priceline Design System | π | π | Β Β Β 721β Β Β Β 119π΄ ) |
|
π Pulse Design System | π | π | π | Β Β Β 115β Β Β Β Β 11π΄ ) |
π Pusher Chameleon | π | Β Β Β Β 35β Β Β Β Β Β 4π΄ ) |
||
π Radix | π | Β Β 2277β Β Β Β 177π΄ ) |
||
π Rambler | π | Β Β Β 191β Β Β Β Β 13π΄ ) |
||
π Reach UI | π | π | Β Β 5972β Β Β Β 560π΄ ) |
|
π Rendition | π | Β Β Β Β Β ?β Β Β Β Β Β ?π΄ ) |
||
π Salesforce Lightning Design System | π | π | π | Β Β 3568β Β Β Β 827π΄ ) |
π SAP Fiori | π | |||
Β Β Β 269β Β Β Β Β 56π΄ SAP Fundamental) |
π | Β Β Β 269β Β Β Β Β 56π΄ ) |
||
Β Β 2963β Β Β 1243π΄ SAP OpenUI) |
π | Β Β 2963β Β Β 1243π΄ ) |
||
π Scania Digital Design System | π | π | Β Β Β Β 30β Β Β Β Β 22π΄ ) |
|
π Seeds | π | π | π | |
π SEEK Style Guide | π | Β Β Β 307β Β Β Β Β 46π΄ ) |
||
π Semi Design | π | π | Β Β 8454β Β Β Β 715π΄ ) |
|
π Semrush Intergalactic Design System | π | π | Β Β Β 143β Β Β Β Β 54π΄ ) |
|
π Shoelace | π | π | Β 12926β Β Β Β 825π΄ ) |
|
π Shopify Polaris | π | π | π | Β Β 5804β Β Β 1171π΄ ) |
π Shadcn/ui | π | |||
π Siemens iX | π | π | π | Β Β Β 203β Β Β Β Β 69π΄ ) |
π Singapore Government Design System | π | π | π | Β Β Β Β 22β Β Β Β Β Β 4π΄ ) |
π Sky Toolkit | π | Β Β Β Β Β ?β Β Β Β Β Β ?π΄ ) |
||
π Stacks β Stack Overflow | π | π | Β Β Β 610β Β Β Β Β 90π΄ ) |
|
π Starbucks Style Guide | π | |||
π Strapi Design System | π | Β Β Β 470β Β Β Β 164π΄ ) |
||
π Teambition Clarity Design | π | |||
π TelefΓ³nica MΓstica | π | π | Β Β Β Β 23β Β Β Β Β Β 2π΄ ) |
|
π Thumbprint | π | Β Β Β 201β Β Β Β Β 27π΄ ) |
||
π Tizen CircularUI | π | π | Β Β Β Β 80β Β Β Β Β 32π΄ ) |
|
π Twilio Paste | π | π | π | Β Β Β 443β Β Β Β 116π΄ ) |
π Uber's Base Web | π | Β Β 8731β Β Β Β 826π΄ ) |
||
π Ubuntu Vanilla framework | π | π | π | Β Β Β 838β Β Β Β 167π΄ ) |
π USPTO UI Design Library | π | π | Β Β Β Β Β ?β Β Β Β Β Β ?π΄ ) |
|
π uSwitch style guide | π | π | Β Β Β Β 19β Β Β Β Β Β 5π΄ ) |
|
π U.S. Web Design Standards | π | π | π | Β Β 6811β Β Β Β 932π΄ ) |
π U.S. CMS.gov Design System | π | |||
π Vibe | π | π | Β Β Β 443β Β Β Β 315π΄ ) |
|
π Vimeo Design System | π | Β Β Β Β 46β Β Β Β Β 21π΄ ) |
||
π VMware Clarity Design System | π | π | π | Β Β 6426β Β Β Β 761π΄ ) |
π VTEX Styleguide | π | π | Β Β Β 166β Β Β Β Β 33π΄ ) |
|
π Vue Design System | π | Β Β 2176β Β Β Β 224π΄ ) |
||
π Ray by WeWork | π | Β Β Β Β 55β Β Β Β Β 13π΄ ) |
||
Welcome UI | π | Β Β Β 625β Β Β Β Β 48π΄ ) |
||
π West Midlands Network Design System | π | π | Β Β Β Β Β 5β Β Β Β Β Β 3π΄ ) |
|
π Wix Style React | π | |||
π Vercel | π | |||
π Workday Canvas | π | π | Β Β Β 301β Β Β Β 221π΄ ) |
|
π Yelp Styleguide | π | π | ||
π Zendesk Garden | π |
*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.
Cover icon: 'Solar System' by Andrejs Kirma from the Noun Project
Β 17306β
Β Β 1099π΄
alexpate/awesome-design-systems)