All Tools/Design Systems & Style Guides

Design Systems & Style Guides

Explore top design systems from Google, Apple, and Microsoft. Learn from industry-leading style guides and open-source UI component libraries.

24 tools✦3 best picks

Sort by

✦
Checklist Design
checklist.design
Checklist Design is a curated list of checklists ranging from website pages, to UI components, all the way to branding assets.
(opens in a new tab)
Material Design
material.io
Google's Material Design
(opens in a new tab)
Ant Design
ant.design
Design system for enterprise-level products
(opens in a new tab)
Apple Design Resources
developer.apple.com/design/resources
Guides and templates for using Apple design and UI
(opens in a new tab)
Lexicon
liferay.design/lexicon
An experience language for crafting beautiful UI
(opens in a new tab)
Primer
primer.style
Design, build, and create with GitHub’s design system
(opens in a new tab)
✦
AtlasKit
atlassian.design/components
Atlassian's official UI library, built according to the Atlassian Design Guidelines
(opens in a new tab)
Carbon Design Systems
carbondesignsystem.com
Carbon is IBM’s open-source design system for products and experiences
(opens in a new tab)
✦
StyleGuides.io
styleguides.io
A directory of 500+ styleguides
(opens in a new tab)
Yelp Style Guide
yelp.com/styleguide
Yelp style guide, components and toolkit
(opens in a new tab)
Microsoft Fluent UI
developer.microsoft.com/en-us/fluentui
Collection of UX frameworks from Microsoft
(opens in a new tab)
Material Design Resources
material.io/resources
Use Material tools, downloads, and interactive projects to simplify your workflow.
(opens in a new tab)
Pluralsight Design System
design-system.pluralsight.com
Design guide with components for designing with Pluralsight
(opens in a new tab)
VTEX Styleguide
styleguide.vtex.com
Reusable patterns, components and assets related to product design in VTEX
(opens in a new tab)
Clarity Design System
clarity.design/documentation/get-started
UX guidelines, HTML/CSS framework, and Angular components working together to craft exceptional experiences
(opens in a new tab)
Atomize
atomizecode.com
UI framework that helps developers collaborate with designers and build consistent user interfaces effortlessly
(opens in a new tab)
Asphalt
asphalt.gojek.io
Gojek’s design language system. A collection of guidelines and components to create amazing user experiences.
(opens in a new tab)
Humane By Design
humanebydesign.com
A resource that provides guidance for designing ethically humane digital products through patterns focused on user well-being.
(opens in a new tab)
Patterfly
patternfly.org
PatternFly is an open source design system from Red Hat, Inc.
(opens in a new tab)
Google Style Guides
google.github.io/styleguide
Code design style guide from google
(opens in a new tab)
Duet Design System
duetds.com
Duet provides a set of organized tools, patterns and practices that work as the foundation for LocalTapiola and Turva digital products and experiences.
(opens in a new tab)
Gestalt
gestalt.pinterest.systems
A set of React UI components that supports Pinterest’s design language
(opens in a new tab)
Paste
paste.twilio.design
Paste is a design system for designing and building consistent experiences at Twilio.
(opens in a new tab)
Base Web
baseweb.design
A React Component library implementing the Base design language
(opens in a new tab)

Design Systems & Style Guides Guide & FAQ

Everything you need to know about choosing and using free design systems & style guides resources.

Related Categories