https://github.com/anubhavsrivastava/awesome-ux-design-styles
Curated list of UX styleguides and design systems
https://github.com/anubhavsrivastava/awesome-ux-design-styles
List: awesome-ux-design-styles
awesome awesome-list design-guideline design-principles design-systems guidelines styleguide ux ux-design ux-framework ux-patterns
Last synced: 4 months ago
JSON representation
Curated list of UX styleguides and design systems
- Host: GitHub
- URL: https://github.com/anubhavsrivastava/awesome-ux-design-styles
- Owner: anubhavsrivastava
- License: cc0-1.0
- Created: 2019-03-16T19:15:08.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2022-03-31T23:44:31.000Z (almost 3 years ago)
- Last Synced: 2024-05-19T17:39:12.548Z (9 months ago)
- Topics: awesome, awesome-list, design-guideline, design-principles, design-systems, guidelines, styleguide, ux, ux-design, ux-framework, ux-patterns
- Language: JavaScript
- Homepage:
- Size: 54.7 KB
- Stars: 76
- Watchers: 4
- Forks: 13
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- Funding: .github/FUNDING.yml
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
- ultimate-awesome - awesome-ux-design-styles - Curated list of UX styleguides and design systems. (Other Lists / Julia Lists)
README
# Awesome UX Design Styleguides
[](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/) [](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/) [](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) [](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/) [](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/) [](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) [](https://github.com/auth0/cosmos) by auth0 - Cosmos is a Design System to build Auth0 products.
- [auth0 Styleguide](https://styleguide.auth0.com/) [](https://github.com/auth0/styleguide) by auth0 - Conjunction of design patterns, components and resources used across auth0's products.
- [Backpack](https://backpack.github.io/) [](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) [](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/) [](https://github.com/rei/rei-cedar) by Rei - REI Digital Design System presentation framework
- [CFPB Design Manual](https://cfpb.github.io/design-manual/) [](https://github.com/cfpb/capital-framework) - The Consumer Financial Protection Bureau's user interface framework
- [Chameleon](https://pusher.github.io/chameleon/) [](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/) [](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/) [](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/) [](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) [](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/) [](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/) [](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/) [](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/) [](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/) [](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/) [](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) [](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/) [](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/) [](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/) [](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) [](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/) [](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) [](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/) [](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/) [](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/) [](https://github.com/FirefoxUX/photon) by Mozilla Firefox - Firefox’s Photon Design System
- [Plasma](http://plasma.guide/) [](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/) [](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) [](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/) [](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/) [](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/) [](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/) [](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/) [](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 [](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/) [](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/) [](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/) [](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/) [](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/) [](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/) [](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/) [](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/) [](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/) [](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](CONTRIBUTING.md) to get started.
[](http://hits.dwyl.io/anubhavsrivastava/awesome-ux-design-styles)
---
## License
Creative Commons Zero v1.0 Universal
[](https://creativecommons.org/publicdomain/zero/1.0/)