Resources / Design Systems
Study how the best teams do it: Google Material, IBM Carbon, Shopify Polaris, and Adobe Spectrum are all here alongside 30 more real-world systems from companies like Atlassian, GitHub, and Mozilla.
Quick Guide
Use CodeHelper's tools when you need:
- •Privacy & offline processing
- •No account or signup required
- •Fast, client-side operations
Use external tools when you need:
- •Team collaboration features
- •Cloud storage & synchronization
- •Extensive template libraries
All Tools
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.
Best Design Systems & Style Guides for Developers & Designers
Design systems are the source of truth for product design and development teams. They codify visual decisions into reusable components and guidelines that ensure consistency across every screen, platform, and team member. Studying established design systems accelerates both design and development work.
CodeHelper's curated design systems collection includes famous examples from Google, Apple, IBM, Microsoft, Salesforce, and more : plus resources for building and maintaining your own design language and style guides.
What to look for when studying design systems
- Design token structure: How the system defines and names colors, spacing, typography, and elevation scales is instructive for building your own.
- Component documentation: Well-documented systems explain not just how components look, but when and why to use each one.
- Accessibility standards: Leading design systems explicitly document their accessibility approach and include guidance for keyboard, screen reader, and motion preferences.
How to use this resource collection
- Browse the curated list of design systems below.
- Click any system to open its documentation in a new tab.
- Use the search bar to filter by name or description.
Whether you are building a new design system from scratch, studying material design guidelines, or looking for brand guidelines inspiration, this collection is the ideal reference.