Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

awesome-ux-design-styles

Curated list of UX styleguides and design systems
https://github.com/anubhavsrivastava/awesome-ux-design-styles

Last synced: 6 days ago
JSON representation

  • Guidelines/Styleguides

    • U.S. Web Design System - The U.S. Web Design System helps the federal government build fast, accessible, mobile-friendly websites.
    • Ant Design - 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 - Atlassian Design Guidelines used across Atlassian products.
    • Audi UI - 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 - 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 - 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 - Cosmos is a Design System to build Auth0 products.
    • auth0 Styleguide - Conjunction of design patterns, components and resources used across auth0's products.
    • Backpack - Backpack is a collection of design resources, reusable components and guidelines for creating Skyscanner products.
    • Blackboard Design - Designs for the educational experience
    • Brand Estonia - The visual language of Brand Estonia created by Estonian Design Team
    • Brainly style guide - 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.
    • Clarity Design System - UX guidelines, HTML/CSS framework, and Angular components working together to craft exceptional experiences
    • COOP Design Manual - 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 - Design Language is a shared design system that unifies Royal Canin's global digital style.
    • Duolingo Design - Design language by [Duolingo Design Team](https://medium.com/duolingo-design)
    • Eurostar GLU - Building blocks for Eurostar web UI.
    • Fabric UI - 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 - laboratory/arui-feather.svg?label=&style=social)](https://github.com/alfa-laboratory/arui-feather) by Alfa-Bank - Design system in Alfa-Bank
    • Feelix - collection of front-end interface elements that can be reused across the MYOB browser-based products.
    • Frontier - Global styles for the FamilySearch.org website
    • Foundation Design System - 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.
    • GOV.UK Design System - The GOV.UK Design System is maintained by the Government Digital Service
    • Grommet - Part design system, part framework (react) that provides accessibility, modularity, responsiveness, and theming
    • Hedwig - Collection of design components that can be assembled together to build any number of applications.
    • Help Scout Style Guide - 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 - HubSpot Canvas is the design system that HubSpot uses to build products.
    • 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 - 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 - Guidelines by Mailchimp for their product line
    • Marvel Styleguide - live inventory of UI components, design patterns, brand assets and code guidelines for Marvel products
    • Material design - 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 - 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)
    • Morningstar Design System - 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 - A design system for Mozilla websites
    • OPattern - Opattern is a design system and style guide for everyone who creates Opower products.
    • Origami - 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 - Also know as GitLab's open source Design System acts as Resources, components, and design guidelines behind GitLab
    • Pattern Library - This is the FutureLearn design system.
    • Photon - Firefox’s Photon Design System
    • Plasma - Plasma is a design system for creating sensible, modern interfaces by WeWork
    • Pluralsight Design System - 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.
    • Polaris - practical guides to help one understand how to design for the Shopify platform using Polaris.
    • Predix Design System - The Predix Design System is built using modern web component standards so developers can start using our building blocks with minimal ramp-up.
    • Primer - Resources, tooling, and design guidelines for building websites with Primer, GitHub's front-end framework.
    • Purple3 - Purple provides guidelines for the aesthetic, function, and form of user interfaces to provide a consistent experience.
    • Rizzo - Rizzo is the UI layer for lonelyplanet.com. Rizzo also serves LP's header and footer, assets and Style Guide.
    • Solid - 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 - SpareBank1's common language across disciplines, to ensure consistent design in SpareBank1 solutions.
    • Spark Design System - 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 - Stacks provides everything you need to quickly design, build, and ship coherent experiences across all of Stack Overflow
    • Starling Design System - The Starling Design System is an integral part of accomplishing consistency, better documented patterns, and a vision for our future.
    • StudyPortals styleguide - Design based on StudyPortal's Design priniples.
    • uStyle - uStyle includes documentation and guidelines relating to uSwitch's core design principles
    • VTEX Styleguide - The VTEX Design System backed by React component library
    • Wonderbly Design System - Design System based on Wonderbly Design principles
    • Workday Canvas Design System - Delve into Workday design standards, writing guidelines, and playbook to create exceptional enterprise experiences.
    • Zendesk Garden - components.svg?label=&style=social)](https://github.com/zendeskgarden/css-components) by Zendesk - Garden is where user interface components for Zendesk products.
    • Altinn Design System - 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.
    • Plasma - Plasma is a design system for creating sensible, modern interfaces by WeWork
    • Plasma - Plasma is a design system for creating sensible, modern interfaces by WeWork
    • Plasma - Plasma is a design system for creating sensible, modern interfaces by WeWork
    • Plasma - Plasma is a design system for creating sensible, modern interfaces by WeWork
    • Plasma - Plasma is a design system for creating sensible, modern interfaces by WeWork
    • Plasma - Plasma is a design system for creating sensible, modern interfaces by WeWork
    • Plasma - Plasma is a design system for creating sensible, modern interfaces by WeWork
    • Pattern Library - This is the FutureLearn design system.
    • auth0 Styleguide - Conjunction of design patterns, components and resources used across auth0's products.
    • Plasma - Plasma is a design system for creating sensible, modern interfaces by WeWork
    • Plasma - Plasma is a design system for creating sensible, modern interfaces by WeWork
    • Plasma - Plasma is a design system for creating sensible, modern interfaces by WeWork
    • Plasma - Plasma is a design system for creating sensible, modern interfaces by WeWork
    • Altinn Design System - 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.
    • Plasma - Plasma is a design system for creating sensible, modern interfaces by WeWork
    • Plasma - Plasma is a design system for creating sensible, modern interfaces by WeWork
    • Uniform - Uniform is Hudl’s design system. It exists to unify Hudl’s products through design and code implementation.

  • Resources

    • AgnosticUI - 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))
    • Google Design - 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

Programming Languages
CSS 1
Categories
Guidelines/Styleguides 76 Resources 2 License 2 Contribution 1
Sub Categories