by As designers you’ll surely be aware about the importance of design systems, style guides, and toolkits in the world of design. A design system is a set of components and or guidelines which designers use cohesive and consistent designs, branding and interfaces. Style guides serve as documentation for these systems. We sourced a list of some of the most useful design system and style guide tools and inspiration available on the web. The list is updated regularly. Email over the URL, if you wish to be included.
Design Systems & Style Guides
Design systems, style guides, toolkits, docs. Some of these are design guides are for top companies/websites
| Website | Description |
|---|---|
| Material Design | Google’s Material Design |
| Ant Design | Design system for enterprise-level products |
| Apple Design Resources | Guides and templates for using Apple design and UI |
| Primer | Design, build, and create with GitHub’s design system |
| Arco.design | An enterprise-level design system jointly launched by the Bytedance GIP UED team and the architecture front-end team. |
| Alta UI | Oracle’s design system and toolkit |
| Pulse | Design system, guides and React component library |
| Bolt | Robust Twig and web component powered UI components |
| Clarity Design System | UX guidelines, HTML/CSS framework, and Angular components |
| AtlasKit | Atlassian’s official UI library, built according to the Atlassian Design Guidelines |
| Audi Design Resources | Audi UI design system and toolkit |
| Carbon Design Systems | Carbon is IBM’s open-source design system for products and experiences |
| Yelp Style Guide | Yelp style guide, components and toolkit |
| Comet | Scalable design system of visual language, components, and design assets |
| ETrade Design System | Guides and toolkits that blend finance with simplicity and ease of use |
| Fundamental Library | Open source and community driven project for consistent user interfaces |
| Infor Design | Guidelines and resources to create meaningful experiences for Infor’s products |
| Lexicon | An experience language for crafting beautiful UI |
| Mailchimp UI/UX | Style guide and components from Mailchimp |
| Marvel Style Guide | Set of design principles and components |
| Microsoft Fluent UI | Collection of UX frameworks from Microsoft |
| Pluralsight Design System | Design guide with components for designing with Pluralsight |
| Polaris | Design system that creates great experiences for all of Shopify’s merchants |
| Mozilla Protocol | Protocol is a design system for Mozilla and Firefox websites |
| SendGrid Style Guide | UI library for developing consistent UI/UX at SendGrid |
| VTEX Styleguide | Reusable patterns, components and assets related to product design in VTEX |
| Rizzo | Style guide with UI components, JS components, widgets, etc |
| Atomize | UI framework that helps developers collaborate with designers and build consistent user interfaces effortlessly |
| StyleGuides.io | A directory of 500+ styleguides |
| Done Design System | Open source design system, guides & components |
| Skoda Brand System | Design guideline for developing applications under the Skoda brand |
| Spectrum | Adobe’s design system that provides components and tools to help product teams work more efficiently, and to make Adobe’s applications more cohesive. |
| Asphalt | Gojek’s design language system. A collection of guidelines and components to create amazing user experiences. |
| Laws of UX | A collection of the key maxims that designers must consider when building user interfaces. |
| Checklist Design | Checklist Design is a curated list of checklists ranging from website pages, to UI components, all the way to branding assets. |
| Humane By Design | A resource that provides guidance for designing ethically humane digital products through patterns focused on user well-being. |
| Pr1mer Guidelines | An open source set of very general guidelines, inspired by Human Interface. Created and maintained by Pr1mer Tech |
| Patterfly | PatternFly is an open source design system from Red Hat, Inc. |
| Patterns | A resource to improve on design patterns and component patterns for building powerful web apps with vanilla JavaScript and React. |
License: MIT license
Tags: style guides, design systems, toolkits, guidelines, brand guidelines, design patterns, component patterns, UI, UX, design guide, style guides,
