# awesome-ux-design-styles

**Repository Path**: studvc/awesome-ux-design-styles

## Basic Information

- **Project Name**: awesome-ux-design-styles
- **Description**: Curated list of UX styleguides and design systems
- **Primary Language**: Unknown
- **License**: CC0-1.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2020-12-19
- **Last Updated**: 2020-12-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 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

<!-- toc -->

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

<!-- tocstop -->

---

## 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

-   [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](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/)