--- name: awesome-design-systems summary: "A long-running, community-curated \"awesome list\" cataloging public design systems, UI/pattern libraries, and style guides from companies, governments, and open-source projects. Each entry is tagged for whether it includes coded components, voice & tone guidance, designer kits, and public source code." license: Unlicense repo: https://github.com/alexpate/awesome-design-systems source: https://opensources.dev/resource/awesome-design-systems health: 87 --- # awesome-design-systems A long-running, community-curated "awesome list" cataloging public design systems, UI/pattern libraries, and style guides from companies, governments, and open-source projects. Each entry is tagged for whether it includes coded components, voice & tone guidance, designer kits, and public source code. ![cover](/cover.png) ![Contributions Welcome](https://img.shields.io/badge/Contributions-welcome-blue.svg) Know a resource that isn't listed below? Feel free to create a new [pull request](https://github.com/alexpate/awesome-design-systems/pulls). > 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: Publicly viewable source code --- ComponentsVoice & ToneDesigners KitSource code *[Aalto University](https://brand.aalto.fi/)πŸ‘πŸ‘πŸ‘[Adobe Spectrum](https://spectrum.adobe.com)πŸ‘πŸ‘πŸ‘[:octocat:](https://github.com/adobe/react-spectrum)[Adjust Atlas](https://atlas.adeven.com)πŸ‘πŸ‘πŸ‘[Alaska Airlines](https://auro.alaskaair.com/)πŸ‘πŸ‘πŸ‘[:octocat:](https://github.com/AlaskaAirlines)[Alibaba Ant Design](https://ant.design)πŸ‘πŸ‘πŸ‘[:octocat:](https://github.com/ant-design/ant-design/)[Amplify UI](https://ui.docs.amplify.aws/)πŸ‘πŸ‘πŸ‘[:octocat:](https://github.com/aws-amplify/amplify-ui/)[Appear Here Styleguide](https://bloom.appearhere.co.uk/)πŸ‘[:octocat:](https://github.com/appearhere/bloom)[Apple Developer Design Guidelines](https://developer.apple.com/design/)πŸ‘[Aragon UI](https://ui.aragon.org/)πŸ‘[:octocat:](https://github.com/aragon/ui)[Artsy Palette](https://palette.artsy.net/)πŸ‘[:octocat:](https://github.com/artsy/palette)[Astro UXDS](https://astrouxds.com/)πŸ‘πŸ‘[:octocat:](https://github.com/RocketCommunicationsInc/astro-components)[AT UIKIT](https://at-ui.github.io/at-ui/#/en)πŸ‘[:octocat:](https://github.com/at-ui/at-ui)[Atlassian Design System](https://atlassian.design)πŸ‘πŸ‘πŸ‘[:space_invader:](https://bitbucket.org/atlassian/atlassian-frontend-mirror/)[Audi UI Kit](https://www.audi.com/ci/en/guides/user-interface/introduction.html)πŸ‘πŸ‘[:octocat:](https://github.com/audi/audi-ui)[Aurora (Government of Canada)](https://design.gccollab.ca/)πŸ‘πŸ‘πŸ‘[:octocat:](https://github.com/gctools-outilsgc/design-system)[AutoGuru Overdrive](http://overdrive.autoguru.io/)πŸ‘[:octocat:](https://github.com/autoguru-au/overdrive)[AWS Cloudscape Design System](https://cloudscape.design/)πŸ‘πŸ‘πŸ‘[:octocat:](https://github.com/cloudscape-design/components)[Backpack (Skyscanner)](https://skyscanner.design/)πŸ‘πŸ‘πŸ‘[:octocat:](https://github.com/skyscanner/backpack)[Basis Design System](https://basis.now.sh)πŸ‘[:octocat:](https://github.com/moroshko/basis)[BBC GEL (Global Experience Language)](https://www.bbc.co.uk/gel)πŸ‘πŸ‘πŸ‘[Bento DS](https://bento-ds.com)πŸ‘πŸ‘[:octocat:](https://github.com/buildo/bento-design-system)[BLiP](https://design.take.net/)πŸ‘[:octocat:](https://github.com/takenet/blip-toolkit)[Blueprint](https://blueprintjs.com/)πŸ‘πŸ‘[:octocat:](https://github.com/palantir/blueprint)[Bold (Bridge Design System)](https://bold.bridge.ufsc.br/)πŸ‘πŸ‘[:octocat:](https://github.com/laboratoriobridge/bold)[Bolt Design System](https://boltdesignsystem.com/)πŸ‘[:octocat:](https://github.com/boltdesignsystem/bolt)[Braid Design System](https://seek-oss.github.io/braid-design-system/)πŸ‘[:octocat:](https://github.com/seek-oss/braid-design-system)[British Gas Nucleus](https://britishgas.design/)πŸ‘πŸ‘[Buildit Gravity](http://style.buildit.digital/)πŸ‘[:octocat:](https://github.com/buildit/gravity-ui-web)[Bumbag UI](https://bumbag.style/)πŸ‘[:octocat:](https://github.com/bumbag/bumbag-ui)[BuzzFeed Solid](https://solid.buzzfeed.com/)πŸ‘πŸ‘[:octocat:](https://github.com/buzzfeed/solid)[Buzzvil Design System](https://design.buzzvil.com/)πŸ‘πŸ‘[CA Technologies Mineral UI](https://mineral-ui.netlify.app/)πŸ‘[:octocat:](https://github.com/mineral-ui/mineral-ui)[CBRE Blocks](https://blocks.cbrebuild.com/)πŸ‘πŸ‘[Cedar](https://rei.github.io/rei-cedar-docs/)πŸ‘πŸ‘[:octocat:](https://github.com/rei/rei-cedar)[Chakra UI](https://chakra-ui.com/)πŸ‘[:octocat:](https://github.com/chakra-ui/chakra-ui)[City of Boston Fleet](https://patterns.boston.gov/)πŸ‘πŸ‘[:octocat:](https://github.com/CityOfBoston/digital)[Cloudflare](https://cloudflare.github.io/cf-ui/)πŸ‘[:octocat:](https://github.com/cloudflare/cf-ui)[Co-op Experience Library](https://www.coop.co.uk/experience-library/)πŸ‘πŸ‘πŸ‘[:octocat:](https://github.com/coopdigital/experience-library)[Contentful Forma 36](https://f36.contentful.com/)πŸ‘πŸ‘πŸ‘[:octocat:](https://github.com/contentful/forma-36)[Decathlon Design System - Vitamin](https://decathlon.design/)πŸ‘πŸ‘[:octocat:](https://github.com/decathlon/vitamin-web)[Decentraland UI](https://ui.decentraland.org/)πŸ‘[:octocat:](https://github.com/decentraland/ui)[Duet](https://www.duetds.com)πŸ‘πŸ‘[Duolingo](https://design.duolingo.com/)πŸ‘[eBay Skin](https://ebay.github.io/skin/)πŸ‘[:octocat:](https://github.com/eBay/skin)[Elastic UI Framework](https://elastic.github.io/eui/)πŸ‘πŸ‘πŸ‘[:octocat:](https://github.com/elastic/eui)[ENGIE Fluid Design System](https://www.engie.design)πŸ‘πŸ‘[Enel](https://dsyui.enelx.com/)πŸ‘[Enigma Boundless](https://boundless.js.org/)πŸ‘[:octocat:](https://github.com/enigma-io/boundless)[Estonia Country Design Guidelines](https://brand.estonia.ee)πŸ‘πŸ‘πŸ‘[Evergreen](https://evergreen.surge.sh)πŸ‘[:octocat:](https://github.com/segmentio/evergreen)[Financial Times Origami](https://origami.ft.com/)πŸ‘[:octocat:](https://github.com/Financial-Times/origami)[Finland Toolbox](https://toolbox.finland.fi/)πŸ‘πŸ‘[Firefox Photon Design System](https://design.firefox.com/photon)πŸ‘πŸ‘πŸ‘[:octocat:](https://github.com/FirefoxUX/photon)[Flowbite Design System](https://www.figma.com/community/file/1179442320711977498)πŸ‘πŸ‘[:octocat:](https://github.com/themesberg/flowbite)[Fluent UI](https://developer.microsoft.com/en-us/fluentui#/)πŸ‘πŸ‘πŸ‘[:octocat:](https://github.com/microsoft/fluentui)[Foundation](https://get.foundation/)πŸ‘πŸ‘πŸ‘[:octocat:](https://github.com/foundation/foundation-sites)[Foyer Design System](https://design.foyer.lu/)πŸ‘πŸ‘:closed_lock_with_key:[French Government Design System](https://www.systeme-de-design.gouv.fr/)πŸ‘πŸ‘πŸ‘[:octocat:](https://github.com/GouvernementFR/dsfr)[FutureLearn Pattern Library](https://www.futurelearn.com/pattern-library)πŸ‘[GitHub Primer](https://primer.style/)πŸ‘πŸ‘[:octocat:](https://github.com/primer/)[GitLab Design System - Pajamas](https://design.gitlab.com/)πŸ‘πŸ‘πŸ‘[:fox_face:](https://gitlab.com/gitlab-org/design.gitlab.com)[GoodBarber Design System](https://www.goodbarber.com/uxdesign/)πŸ‘[Google Material Design](https://material.io/guidelines/#introduction-goals)πŸ‘πŸ‘πŸ‘[:octocat:](https://github.com/material-components/material-components)[GOV.UK Design System](https://www.gov.uk/design-system)πŸ‘[:octocat:](https://github.com/alphagov/govuk-design-system)[Gympass Yoga](https://gympass.github.io/yoga/)πŸ‘πŸ‘[:octocat:](https://github.com/gympass/yoga)[HashiCorp Helios](https://helios.hashicorp.design)πŸ‘πŸ‘πŸ‘[:octocat:](https://github.com/hashicorp/design-system)[Help Scout](https://style.helpscout.com/)πŸ‘πŸ‘[:octocat:](https://github.com/helpscout/seed-framework)[Heroku Purple3](https://design.herokai.com/)πŸ‘[Hewlett Packard grommet](https://grommet.github.io)πŸ‘[:octocat:](https://github.com/grommet/grommet)[HubSpot Canvas](https://canvas.hubspot.com/)πŸ‘πŸ‘[:octocat:](https://github.com/HubSpot/canvas)[Hudl Design System](https://uniform.hudl.com/)πŸ‘πŸ‘[IBM Carbon](https://www.carbondesignsystem.com/)πŸ‘πŸ‘πŸ‘[:octocat:](https://github.com/ibm/carbon-components)[IBM Design Language](https://www.ibm.com/design/language/)πŸ‘πŸ‘[IBM Northstar](https://www.ibm.com/standards/web/)πŸ‘πŸ‘[Intuit Harmony](https://designsystem.quickbooks.com/)πŸ‘πŸ‘πŸ‘[Italia Design System](https://designers.italia.it/design-system/)πŸ‘πŸ‘πŸ‘[:octocat:](https://github.com/italia)[JB Design System](https://javadbat.github.io/design-system)πŸ‘πŸ‘[:octocat:](https://javadbat.github.io/design-system)[JetBrains Ring UI](https://jetbrains.github.io/ring-ui)πŸ‘[:octocat:](https://github.com/JetBrains/ring-ui)[Jobber](https://atlantis.getjobber.com) (πŸ”± Atlantis)πŸ‘[:octocat:](https://github.com/GetJobber/atlantis)[Just Eat Takeaway.com PIE Design System](https://pie.design/)πŸ‘πŸ‘[:octocat:](https://github.com/justeattakeaway/pie)[Kaizen](https://cultureamp.design/)πŸ‘πŸ‘[:octocat:](https://github.com/cultureamp/kaizen-design-system)[KoliBri](https://public-ui.github.io/) (Public-UI)πŸ‘[:octocat:](https://github.com/public-ui/kolibri/)[Kontur](https://guides.kontur.ru/)πŸ‘πŸ‘[:octocat:](https://github.com/skbkontur/retail-ui/)[Korea Design System](https://www.krds.go.kr)πŸ‘πŸ‘πŸ‘[:octocat:](https://github.com/KRDS-uiux/krds-uiux)[Lexicon](https://lexicondesign.io/)πŸ‘πŸ‘[Louder Than Ten Manual](https://www.louderthanten.com/manual)πŸ‘πŸ‘[Mail.ru Group Paradigm](https://design.mail.ru/)πŸ‘πŸ‘πŸ‘[Mailchimp Content Styleguide](https://styleguide.mailchimp.com/)πŸ‘[Mantine](https://mantine.dev/)πŸ‘[:octocat:](https://github.com/mantinedev/mantine)[Marvel Styleguide](https://marvelapp.com/styleguide)πŸ‘[Material Minimal](https://material-minimal.com/)πŸ‘πŸ‘πŸ‘[:octocat:](https://github.com/mdbootstrap/mdb-ui-kit)[Materialize CSS](https://materializecss.com/)πŸ‘πŸ‘[:octocat:](https://github.com/Dogfalo/materialize)[Mesh Design System](https://www.meshdesignsystem.com/)πŸ‘πŸ‘[Microsoft Fluent](https://www.microsoft.com/design/fluent/)πŸ‘πŸ‘[:octocat:](https://github.com/microsoft/fluentui)[Mixpanel Design System](https://design.mixpanel.com)πŸ‘πŸ‘[MongoDB Design System](http://mongodb.design)πŸ‘πŸ‘[:octocat:](https://github.com/mongodb/design)[Monzo Tone of Voice](https://monzo.com/tone-of-voice/)πŸ‘[Morningstar Design System](http://designsystem.morningstar.com/)πŸ‘πŸ‘πŸ‘[Mozilla Protocol](https://protocol.mozilla.org/)πŸ‘[:octocat:](https://github.com/mozilla/protocol)[NASA Web Design System](https://nasa.github.io/nasawds-site/)πŸ‘[:octocat:](https://github.com/nasa/nasawds)[NationBuilder Radius](https://www.nationbuilder.design/)πŸ‘[NHS.UK Service Manual](https://service-manual.nhs.uk/)πŸ‘πŸ‘[Nordhealth](https://nordhealth.design/)πŸ‘πŸ‘[New York State Design System](https://designsystem.ny.gov/components/)πŸ‘πŸ‘[:octocat:](https://github.com/ITS-HCD/nysds)[Nordnet](https://brand.nordnet.se/)πŸ‘πŸ‘[Okta Odyssey Design System](https://odyssey.okta.design)πŸ‘πŸ‘[:octocat:](https://github.com/okta/odyssey)[Ontario Design System](https://designsystem.ontario.ca/)πŸ‘πŸ‘[:globe_with_meridians:](https://designsystem.ontario.ca/docs/documentation/release-notes.html#latest)[Oracle Redwood](https://redwood.oracle.com)πŸ‘πŸ‘[Persona Design System](https://privy-open-source.github.io/design-system/)πŸ‘πŸ‘[:octocat:](https://github.com/privy-open-source/design-system)[Pharos: JSTOR's Design System](https://pharos.jstor.org)πŸ‘πŸ‘[:octocat:](https://github.com/ithaka/pharos)[Pinterest Gestalt](https://pinterest.github.io/gestalt/#/)πŸ‘[:octocat:](https://github.com/pinterest/gestalt)[Pivotal](https://styleguide.pivotal.io/)πŸ‘[:octocat:](https://github.com/pivotal-cf/pivotal-ui)[Pluralsight Design System](https://design-system.pluralsight.com/)πŸ‘[:octocat:](https://github.com/pluralsight/design-system)[Porsche Design System](https://designsystem.porsche.com)πŸ‘πŸ‘[:octocat:](https://github.com/porsche-design-system/porsche-design-system)[Priceline Design System](https://priceline.github.io/design-system/)πŸ‘πŸ‘[:octocat:](https://github.com/priceline/design-system)[Pusher Chameleon](https://pusher.github.io/chameleon/)πŸ‘[:octocat:](https://github.com/pusher/chameleon)[Radix](https://www.radix-ui.com/)πŸ‘[:octocat:](https://github.com/radix-ui)[Rambler](https://rambler-digital-solutions.github.io/rambler-ui/)πŸ‘[:octocat:](https://github.com/rambler-digital-solutions/rambler-ui)[Rendition](https://balena-io-modules.github.io/rendition/)πŸ‘[:octocat:](https://github.com/balena-io-modules/rendition/)[Reshaped](https://reshaped.so)πŸ‘πŸ‘[Salesforce Lightning Design System](https://www.lightningdesignsystem.com)πŸ‘πŸ‘πŸ‘[:octocat:](https://github.com/salesforce-ux/design-system)[Sage by Kajabi](https://sage.kajabi.com)πŸ‘[:octocat:](https://github.com/Kajabi/sage-lib)[SAP Fiori](https://experience.sap.com/fiori-design/)πŸ‘[SAP Fundamental](https://github.com/SAP/fundamental)πŸ‘[:octocat:](https://github.com/SAP/fundamental)[SAP OpenUI](https://github.com/SAP/openui5)πŸ‘[:octocat:](https://github.com/SAP/openui5)[Scania Digital Design System](https://digitaldesign.scania.com/home)πŸ‘πŸ‘[:octocat:](https://github.com/scania-digital-design-system/sdds)[Seeds](https://sproutsocial.com/seeds)πŸ‘πŸ‘πŸ‘[SEEK Style Guide](https://seek-oss.github.io/seek-style-guide/)πŸ‘[:octocat:](https://github.com/seek-oss/seek-style-guide)[Semi Design](https://semi.design/en-US)πŸ‘πŸ‘[:octocat:](https://github.com/DouyinFE/semi-design)[Semrush Intergalactic Design System](https://i.semrush.com/)πŸ‘πŸ‘[:octocat:](https://github.com/semrush/intergalactic)[Shoelace](https://shoelace.style)πŸ‘πŸ‘[:octocat:](https://github.com/shoelace-style/shoelace)[Shopify Polaris](https://polaris.shopify.com)πŸ‘πŸ‘πŸ‘[:octocat:](https://github.com/Shopify/polaris)[Shadcn/ui](https://ui.shadcn.com/)πŸ‘[:octocat:](https://github.com/shadcn-ui)[Siemens iX](https://ix.siemens.io/)πŸ‘πŸ‘πŸ‘[:octocat:](https://github.com/siemens/ix)[Singapore Government Design System](https://www.designsystem.tech.gov.sg/)πŸ‘πŸ‘πŸ‘[:octocat:](https://github.com/govtechsg/sgds)[Stacks – Stack Overflow](https://stackoverflow.design/)πŸ‘πŸ‘[:octocat:](https://github.com/StackExchange/Stacks)[Starbucks Style Guide](https://creative.starbucks.com)πŸ‘πŸ‘[Strapi Design System](https://design-system.strapi.io/)πŸ‘[:octocat:](https://github.com/strapi/design-system)[Teambition Clarity Design](https://design.teambition.com/)πŸ‘[TelefΓ³nica MΓ­stica](https://brandfactory.telefonica.com/mistica)πŸ‘πŸ‘[:octocat:](https://github.com/Telefonica/mistica)[Thumbprint](https://thumbprint.design/)πŸ‘[:octocat:](https://github.com/thumbtack/thumbprint)[Tizen CircularUI](https://developer.samsung.com/one-ui-watch-tizen)πŸ‘πŸ‘[:octocat:](https://github.com/Samsung/Tizen.CircularUI)[Twilio Paste](https://paste.twilio.design/)πŸ‘πŸ‘πŸ‘[:octocat:](https://github.com/twilio-labs/paste)[Uber's Base Web](https://baseweb.design/)πŸ‘[:octocat:](https://github.com/uber-web/baseui)[Ubuntu Vanilla framework](https://vanillaframework.io/)πŸ‘πŸ‘πŸ‘[:octocat:](https://github.com/canonical-web-and-design/vanilla-framework)[Uiverse](https://uiverse.io)πŸ‘πŸ‘πŸ‘[:octocat:](https://github.com/uiverse-io/galaxy)[Untitled UI](https://www.untitledui.com/react/)πŸ‘πŸ‘[:octocat:](https://github.com/untitleduico/react/)[uSwitch style guide](https://ustyle.guide/)πŸ‘πŸ‘[:octocat:](https://github.com/uswitch/ustyle)[U.S. Web Design Standards](https://designsystem.digital.gov/)πŸ‘πŸ‘πŸ‘[:octocat:](https://github.com/uswds/uswds)[U.S. CMS.gov Design System](https://design.cms.gov/)πŸ‘[Vibe](https://style.monday.com/)πŸ‘πŸ‘[:octocat:](https://github.com/mondaycom/vibe)[Vimeo Design System](https://vimeo.github.io/iris/)πŸ‘[:octocat:](https://github.com/vimeo/iris)[VMware Clarity Design System](https://clarity.design/)πŸ‘πŸ‘πŸ‘[:octocat:](https://github.com/vmware/clarity)[VTEX Styleguide](https://styleguide.vtex.com/)πŸ‘πŸ‘[:octocat:](https://github.com/vtex/styleguide)[Vue Design System](https://vueds.com/)πŸ‘[:octocat:](https://github.com/viljamis/vue-design-system)[Ray by WeWork](https://ray.wework.com)πŸ‘[:octocat:](https://github.com/wework/ray)[Welcome UI](http://www.welcome-ui.com/)πŸ‘[:octocat:](https://github.com/WTTJ/welcome-ui)[West Midlands Network Design System](https://designsystem.wmnetwork.co.uk/)πŸ‘πŸ‘[:octocat:](https://github.com/wmcadigital/wmn-design-system)[Wix Style React](https://www.wix-style-react.com/storybook/)πŸ‘[Vercel](https://vercel.com/geist)πŸ‘[Workday Canvas](https://design.workday.com/)πŸ‘πŸ‘[:octocat:](https://github.com/Workday/canvas-kit)[Yelp Styleguide](https://www.yelp.com/styleguide)πŸ‘πŸ‘[Zendesk Garden](https://garden.zendesk.com/)πŸ‘[:octocat:](https://github.com/zendeskgarden) ### 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