> For the complete documentation index, see [llms.txt](https://docs.tenten.co/awesome/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.tenten.co/awesome/design/awesome-ux-design-styles/readme-en.md).

# Awesome UX Design Styleguides

[![Awesome](https://awesome.re/badge.svg)](https://awesome.re)

> Curated list of UX styleguides and design systems and toolkits

Design System - [A comprehensive guide to design systems](https://www.invisionapp.com/inside-design/guide-to-design-systems/)

### Related List - [Awesome UI component library](https://github.com/anubhavsrivastava/awesome-ui-component-library) for component library implementation (React, Vue, Angular, etc) for styleguides

## Contents

* [Styleguides](#styleguides)
* [Resources](#resources)
* [Contribution](#contribution)
* [License](#license)

***

## Guidelines/Styleguides

* [Altinn Design System](https://altinn.github.io/designsystem-styleguide/) [![Repo Star](https://img.shields.io/github/stars/Altinn/DesignSystem.svg?label=\&style=social)](https://github.com/Altinn/DesignSystem) by Altinn- The design system is based on so-called atomic design methodology, where instead of designing pages design components that can be assembled and reused in different web solutions.
* [Ant Design](https://ant.design/) [![Repo Star](https://img.shields.io/github/stars/ant-design/ant-design.svg?label=\&style=social)](https://github.com/ant-design/ant-design/) by Ant Financial - A design system with values of Nature and Determinacy for better user experience of enterprise applications.
* [Atlassian Design](https://atlassian.design/) by Atlassian - Atlassian Design Guidelines used across Atlassian products.
* [Audi UI](https://www.audi.com/ci/en/guides/user-interface/introduction.html) [![Repo Star](https://img.shields.io/github/stars/audi/audi-ui.svg?label=\&style=social)](https://github.com/audi/audi-ui) by Audi - based on the principles of the Audi look: variety, honesty and balance.
* [Aurora design system](https://design.gccollab.ca/) [![Repo Star](https://img.shields.io/github/stars/gctools-outilsgc/aurora-website.svg?label=\&style=social)](https://github.com/gctools-outilsgc/aurora-website) by Government of Canada - Aurora design system is a central design guide created by the Digital Collaboration Division within the Government of Canada for their digital products.
* [Australian Government Design System](https://designsystem.gov.au/) [![Repo Star](https://img.shields.io/github/stars/govau/design-system-components.svg?label=\&style=social)](https://github.com/govau/design-system-components) by Commonwealth of Australia - The Australian Government Design System provides a framework and a set of tools to help designers and developers build government products and services more easily
* [auth0 Cosmos](https://auth0-cosmos.now.sh) [![Repo Star](https://img.shields.io/github/stars/auth0/cosmos.svg?label=\&style=social)](https://github.com/auth0/cosmos) by auth0 - Cosmos is a Design System to build Auth0 products.
* [auth0 Styleguide](https://styleguide.auth0.com/) [![Repo Star](https://img.shields.io/github/stars/auth0/styleguide.svg?label=\&style=social)](https://github.com/auth0/styleguide) by auth0 - Conjunction of design patterns, components and resources used across auth0's products.
* [Backpack](https://backpack.github.io/) [![Repo Star](https://img.shields.io/github/stars/backpack/backpack.github.io.svg?label=\&style=social)](https://github.com/backpack/backpack.github.io) by Skyscanner - Backpack is a collection of design resources, reusable components and guidelines for creating Skyscanner products.
* [Blackboard Design](https://design.blackboard.com/) by Blackboard - Designs for the educational experience
* [Bloom](http://bloom.appearhere.co.uk/) by Appear Here - Bloom is Appear Here’s central repository for design patterns and guidelines.
* [Brand Estonia](https://brand.estonia.ee/) by estonia - The visual language of Brand Estonia created by Estonian Design Team
* [Brainly style guide](https://styleguide.brainly.com) [![Repo Star](https://img.shields.io/github/stars/brainly/style-guide.svg?label=\&style=social)](https://github.com/brainly/style-guide) by Brainly - This style guide is being used across all language versions of the Brainly website.
* [Carbon](http://carbondesignsystem.com/) By IBM - Carbon is IBM's open-source design system for digital products and experiences.
* [Cedar](http://rei.github.io/rei-cedar/) [![Repo Star](https://img.shields.io/github/stars/rei/rei-cedar.svg?label=\&style=social)](https://github.com/rei/rei-cedar) by Rei - REI Digital Design System presentation framework
* [CFPB Design Manual](https://cfpb.github.io/design-manual/) [![Repo Star](https://img.shields.io/github/stars/cfpb/capital-framework.svg?label=\&style=social)](https://github.com/cfpb/capital-framework) - The Consumer Financial Protection Bureau's user interface framework
* [Chameleon](https://pusher.github.io/chameleon/) [![Repo Star](https://img.shields.io/github/stars/pusher/chameleon.svg?label=\&style=social)](https://github.com/pusher/chameleon) by Pusher - Chameleon is a library of front-end patterns, variables, and helpers used by Pusher
* [Clarity Design System](https://clarity.design/) [![Repo Star](https://img.shields.io/github/stars/vmware/clarity.svg?label=\&style=social)](https://github.com/vmware/clarity) by VMWare - UX guidelines, HTML/CSS framework, and Angular components working together to craft exceptional experiences
* [CNVS UI System](http://mesosphere.github.io/cnvs/) [![Repo Star](https://img.shields.io/github/stars/mesosphere/cnvs.svg?label=\&style=social)](https://github.com/mesosphere/cnvs) by Mesosphere - CNVS (pronounced "Canvas") is a system of user interface elements and components built for use across Mesosphere sites and products
* [COOP Design Manual](https://coop-design-system.herokuapp.com/) [![Repo Star](https://img.shields.io/github/stars/coopdigital/coop-frontend-toolkit.svg?label=\&style=social)](https://github.com/coopdigital/coop-frontend-toolkit) by COOP - A front-end toolkit containing styles and static assets for building Co-op-branded digital content.
* [Design Language](http://developer.royalcanin.com/) by Royal Canin - Design Language is a shared design system that unifies Royal Canin's global digital style.
* [Duolingo Design](https://www.duolingo.com/design/) by Duolingo - Design language by [Duolingo Design Team](https://medium.com/duolingo-design)
* [Eurostar GLU](https://style.eurostar.com/) by Eurostar - Building blocks for Eurostar web UI.
* [Fabric UI](https://developer.microsoft.com/en-us/fabric) [![Repo Star](https://img.shields.io/github/stars/OfficeDev/office-ui-fabric-core.svg?label=\&style=social)](https://github.com/OfficeDev/office-ui-fabric-core) by Microsoft - The official front-end framework for building experiences that fit seamlessly into Office and Office 365.
* [Feather](https://design.alfabank.ru/) [![Repo Star](https://img.shields.io/github/stars/alfa-laboratory/arui-feather.svg?label=\&style=social)](https://github.com/alfa-laboratory/arui-feather) by Alfa-Bank - Design system in Alfa-Bank
* [Feelix](https://feelix.myob.com/) by MYOB - collection of front-end interface elements that can be reused across the MYOB browser-based products.
* [Frontier](https://www.familysearch.org/frontier/styleguide/) by Family search - Global styles for the FamilySearch.org website
* [Foundation Design System](https://envato.github.io/foundation-design-system/) [![Repo Star](https://img.shields.io/github/stars/envato/foundation-design-system-tokens.svg?label=\&style=social)](https://github.com/envato/foundation-design-system-tokens) by Envato - The Foundation Design System is a collection of predefined tokens, user interface components and guidelines for their usage.
* [Fuse Design System](https://ni.github.io/design-system/) [![Repo Star](https://img.shields.io/github/stars/ni/design-system.svg?label=\&style=social)](https://github.com/ni/design-system) by National Instruments - A system for designing and developing National Instruments Software
* [Gel](http://www.bbc.co.uk/gel/) [![Repo Star](https://img.shields.io/github/stars/bbc/gel-foundations.svg?label=\&style=social)](https://github.com/bbc/gel-foundations) by BBC - Global Experience Language(GEL) is the BBC’s shared design framework. A system of reusable interaction patterns used to assemble the BBC’s entire online output.
* [Gestalt](https://pinterest.github.io/gestalt/) [![Repo Star](https://img.shields.io/github/stars/pinterest/gestalt.svg?label=\&style=social)](https://github.com/pinterest/gestalt) by Pinterest - Pinterest’s design language used across products
* [GOV.UK Design System](https://design-system.service.gov.uk/) by GOV.UK - The GOV.UK Design System is maintained by the Government Digital Service
* [Grommet](https://v2.grommet.io/) [![Repo Star](https://img.shields.io/github/stars/grommet/grommet.svg?label=\&style=social)](https://github.com/grommet/grommet) by HP Enterprise - Part design system, part framework (react) that provides accessibility, modularity, responsiveness, and theming
* [Hedwig](https://hedwig-docs.herokuapp.com) [![Repo Star](https://img.shields.io/github/stars/bring/hedwig.svg?label=\&style=social)](https://github.com/bring/hedwig) by Bring & Posten - Collection of design components that can be assembled together to build any number of applications.
* [Help Scout Style Guide](http://style.helpscout.com/) [![Repo Star](https://img.shields.io/github/stars/helpscout/seed-base.svg?label=\&style=social)](https://github.com/helpscout/seed-base) by Help Scout - This style guide is a way to empower members of the Help Scout team to move quickly and have consistent experience
* [HubSpot Canvas](https://canvas.hubspot.com/) by HubSpot - HubSpot Canvas is the design system that HubSpot uses to build products.
* [Lexicon](https://lexicondesign.io/) [![Repo Star](https://img.shields.io/github/stars/liferay/lexicon-site.svg?label=\&style=social)](https://github.com/liferay/lexicon-site) by Liferay - Lexicon is a design language that provides a common framework for building interfaces within the Liferay product ecosystem.
* [Lightning Design System](https://www.lightningdesignsystem.com/) [![Repo Star](https://img.shields.io/github/stars/salesforce-ux/design-system.svg?label=\&style=social)](https://github.com/salesforce-ux/design-system) by Salesforce - The Salesforce Lightning Design System includes the resources to create user interfaces consistent with the Salesforce Lightning principles, design language, and best practices
* [Mailchimp Pattern](https://ux.mailchimp.com/patterns) by Mailchimp - Guidelines by Mailchimp for their product line
* [Marvel Styleguide](https://marvelapp.com/styleguide/) by Marvel - live inventory of UI components, design patterns, brand assets and code guidelines for Marvel products
* [Material design](https://material.io/design) [![Repo Star](https://img.shields.io/github/stars/mui-org/material-ui.svg?label=\&style=social)](https://github.com/mui-org/material-ui) by Google - Material is an adaptable system of guidelines, components, and tools that support the best practices of user interface design
* [Mineral UI](https://mineral-ui.com/) [![Repo Star](https://img.shields.io/github/stars/mineral-ui/mineral-ui.svg?label=\&style=social)](https://github.com/mineral-ui/mineral-ui) - A design system for the web that lets you quickly build high-quality, accessible apps. Created by [CA Technologies](https://www.ca.com)
* [MongoDB's UI Design System](http://mongodb.design/#/ui-design-system/welcome) [![Repo Star](https://img.shields.io/github/stars/mongodb/design.svg?label=\&style=social)](https://github.com/mongodb/design) by MongoDB - The MongoDB Design System contains the UI building blocks that make up the user experience across all MongoDB products.
* [Morningstar Design System](http://designsystem.morningstar.com/) by Morningstar - A collection of brand, visual, UX, and technical standards built into a central library so that teams can quickly build high-quality, consistent experiences.
* [Mozilla Protocol](https://protocol.mozilla.org/) [![Repo Star](https://img.shields.io/github/stars/mozilla/protocol.svg?label=\&style=social)](https://github.com/mozilla/protocol) by Mozilla - A design system for Mozilla websites
* [Nachos](https://design.trello.com/) by Trello - Nachos is Trello's design system used across product
* [OPattern](https://ux.opower.com/opattern) by Opower - Opattern is a design system and style guide for everyone who creates Opower products.
* [Origami](https://origami.ft.com/) [![Repo Star](https://img.shields.io/github/stars/Financial-Times/origami.svg?label=\&style=social)](https://github.com/Financial-Times/origami) by Financial Times - Origami is a group of services, components, and tools used to help build websites.
* [Pajamas Design System](https://design.gitlab.com/) by Gitlab - Also know as GitLab's open source Design System acts as Resources, components, and design guidelines behind GitLab
* [Pattern Library](https://www.futurelearn.com/pattern-library) by FutureLearn - This is the FutureLearn design system.
* [Photon](https://design.firefox.com/photon/) [![Repo Star](https://img.shields.io/github/stars/FirefoxUX/photon.svg?label=\&style=social)](https://github.com/FirefoxUX/photon) by Mozilla Firefox - Firefox’s Photon Design System
* [Plasma](http://plasma.guide/) [![Repo Star](https://img.shields.io/github/stars/wework/plasma.svg?label=\&style=social)](https://github.com/wework/plasma) by WeWork - Plasma is a design system for creating sensible, modern interfaces by WeWork
* [Pluralsight Design System](https://design-system.pluralsight.com/) [![Repo Star](https://img.shields.io/github/stars/pluralsight/design-system.svg?label=\&style=social)](https://github.com/pluralsight/design-system) by Pluralsight - The UI building blocks for creating a cohesive design across Pluralsight products.
* [Pivotal UI](https://styleguide.pivotal.io) [![Repo Star](https://img.shields.io/github/stars/pivotal-cf/pivotal-ui.svg?label=\&style=social)](https://github.com/pivotal-cf/pivotal-ui) by Pivotal Software - Pivotal UI is a collection of React components that are styled for the Pivotal brand
* [Polaris](https://polaris.shopify.com/) [![Repo Star](https://img.shields.io/github/stars/Shopify/polaris.svg?label=\&style=social)](https://github.com/Shopify/polaris) by Shopify - practical guides to help one understand how to design for the Shopify platform using Polaris.
* [Predix Design System](https://www.predix-ui.com/#/home) By GE Digital - The Predix Design System is built using modern web component standards so developers can start using our building blocks with minimal ramp-up.
* [PricelineOne](https://pricelinelabs.github.io/design-system/) [![Repo Star](https://img.shields.io/github/stars/pricelinelabs/design-system.svg?label=\&style=social)](https://github.com/pricelinelabs/design-system/) by Priceline - Priceline.com Design System to create a consistently great experience for users
* [Primer](https://styleguide.github.com/primer/) [![Repo Star](https://img.shields.io/github/stars/primer/css.svg?label=\&style=social)](https://github.com/primer/css) by Github - Resources, tooling, and design guidelines for building websites with Primer, GitHub's front-end framework.
* [Purple3](https://design.herokai.com/purple3) by Heroku - Purple provides guidelines for the aesthetic, function, and form of user interfaces to provide a consistent experience.
* [Quickbooks](https://designsystem.quickbooks.com/) by Intuit - The QuickBooks Design System mission is to deliver delightful customer experiences that elevate Intuit brand.
* [RingUI](https://jetbrains.github.io/ring-ui/) [![Repo Star](https://img.shields.io/github/stars/JetBrains/ring-ui.svg?label=\&style=social)](https://github.com/JetBrains/ring-ui) by JetBrains - This collection of UI components aims to provide all of the necessary building blocks for web-based products built inside JetBrains
* [Rizzo](https://rizzo.lonelyplanet.com/styleguide/) [![Repo Star](https://img.shields.io/github/stars/lonelyplanet/rizzo.svg?label=\&style=social)](https://github.com/lonelyplanet/rizzo) by Lonely Planet - Rizzo is the UI layer for lonelyplanet.com. Rizzo also serves LP's header and footer, assets and Style Guide.
* [Seek Style Guide](https://seek-oss.github.io/seek-style-guide/) by Seek [![Repo Star](https://img.shields.io/github/stars/seek-oss/seek-style-guide.svg?label=\&style=social)](https://github.com/seek-oss/seek-style-guide) - Living style guide for SEEK, powered by React, webpack, CSS Modules and Less
* [Snacks](https://instacart.github.io/Snacks/) [![Repo Star](https://img.shields.io/github/stars/instacart/Snacks.svg?label=\&style=social)](https://github.com/instacart/Snacks) by Instacart - Snacks is a JavaScript and React based component library. It has a default theme matching Instacart's styles.
* [Solid](https://solid.buzzfeed.com/) by Buzzfeed - Solid is BuzzFeed's CSS style guide. You can read more about Solid in [blog post](https://medium.com/buzzfeed-design/introducing-solid-1c16b1bf4868#.b8sqi9a73).
* [SpareBank1 Designsystem](https://design.sparebank1.no/) by SpareBank1 - SpareBank1's common language across disciplines, to ensure consistent design in SpareBank1 solutions.
* [Spark Design System](https://sparkdesignsystem.com/) [![Repo Star](https://img.shields.io/github/stars/sparkdesignsystem/spark-design-system.svg?label=\&style=social)](https://github.com/sparkdesignsystem/spark-design-system) by Quicken Loans - Spark Design System is a system of patterns and components used to create the user interface for the Quicken Loans family of Fintech products
* [Stacks](https://stackoverflow.design/) [![Repo Star](https://img.shields.io/github/stars/StackExchange/Stacks.svg?label=\&style=social)](https://github.com/StackExchange/Stacks) by Stack Overflow - Stacks provides everything you need to quickly design, build, and ship coherent experiences across all of Stack Overflow
* [Starling Design System](https://design.acl.com/page/Home) by ACL - The Starling Design System is an integral part of accomplishing consistency, better documented patterns, and a vision for our future.
* [StudyPortals styleguide](https://styleguide.studyportals.com) by StudyPortals - Design based on StudyPortal's Design priniples.
* [Swarm Design System](https://meetup.github.io/swarm-design-system/) [![Repo Star](https://img.shields.io/github/stars/meetup/swarm-design-system.svg?label=\&style=social)](https://github.com/meetup/swarm-design-system) by Meetup - Guidelines for product design at Meetup. Includes our design team’s processes and principles as well as visual design
* [Uniform](http://uniform.hudl.com/) by Hudl - Uniform is Hudl’s design system. It exists to unify Hudl’s products through design and code implementation.
* [U.S. Web Design System](https://designsystem.digital.gov/) [![Repo Star](https://img.shields.io/github/stars/uswds/uswds.svg?label=\&style=social)](https://github.com/uswds/uswds) by United States government - The U.S. Web Design System helps the federal government build fast, accessible, mobile-friendly websites.
* [USAJOBS Design System](https://usajobs.github.io/design-system/) [![Repo Star](https://img.shields.io/github/stars/USAJOBS/design-system.svg?label=\&style=social)](https://github.com/USAJOBS/design-system) by USAJOBS- Describes the design language and reusable components of USAJOBS, Open Opportunities, and Agency Talent Portal
* [uStyle](https://ustyle.guide/) [![Repo Star](https://img.shields.io/github/stars/uswitch/ustyle.svg?label=\&style=social)](https://github.com/uswitch/ustyle) by uSwitch- uStyle includes documentation and guidelines relating to uSwitch's core design principles
* [VTEX Styleguide](https://styleguide.vtex.com/) [![Repo Star](https://img.shields.io/github/stars/vtex/styleguide.svg?label=\&style=social)](https://github.com/vtex/styleguide) by VTEX - The VTEX Design System backed by React component library
* [Wonderbly Design System](http://design-system.lostmy.name/) by Wonderbly - Design System based on Wonderbly Design principles
* [Workday Canvas Design System](https://design.workday.com/) by Workday - Delve into Workday design standards, writing guidelines, and playbook to create exceptional enterprise experiences.
* [Zendesk Garden](https://garden.zendesk.com/) [![Repo Star](https://img.shields.io/github/stars/zendeskgarden/css-components.svg?label=\&style=social)](https://github.com/zendeskgarden/css-components) by Zendesk - Garden is where user interface components for Zendesk products.

## Resources

* [AgnosticUI](https://www.agnosticui.com/) - Accessible React component primitives that also work with Vue 3, Svelte, and Angular! ([GitHub](https://github.com/AgnosticUI/agnosticui), [Demo](https://developtodesign.com/agnosticui-examples))
* [Awesome UI component library](https://github.com/anubhavsrivastava/awesome-ui-component-library) for component library implementation (React, Vue, Angular, etc) for styleguides
* [Google Design](https://design.google/) - Cooperative effort led by a group of designers, writers, and developers at Google to publish original content, produce events, and foster creative and educational partnerships that advance design and technology.

## Contribution

Suggestions and PRs are welcome!

Please read the [contribution guidelines](https://github.com/tentenco/awesome/blob/main/design/awesome-ux-design-styles/CONTRIBUTING.md) to get started.

[![HitCount](http://hits.dwyl.io/anubhavsrivastava/awesome-ux-design-styles.svg)](http://hits.dwyl.io/anubhavsrivastava/awesome-ux-design-styles)

***

## License

Creative Commons Zero v1.0 Universal [![CC0](http://mirrors.creativecommons.org/presskit/buttons/88x31/svg/cc-zero.svg)](https://creativecommons.org/publicdomain/zero/1.0/)


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.tenten.co/awesome/design/awesome-ux-design-styles/readme-en.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.