# Recommended Design Systems and Style Guides for Developers
> Discover recommended design systems like Material Design Ant Design Carbon and Polaris from over 30 options in the Design Resources for Developers repo. Find the perfect system for your next project.
- Repository: [Brad Traversy/design-resources-for-developers](https://github.com/bradtraversy/design-resources-for-developers)
- Tags: tutorial
- Published: 2026-03-04
---
**The Design Resources for Developers repository curates over 30 production-ready design systems—including Material Design, Ant Design, Carbon, and Polaris—in its dedicated "Design Systems & Style Guides" section within [`readme.md`](https://github.com/bradtraversy/design-resources-for-developers/blob/main/readme.md).**
The `bradtraversy/design-resources-for-developers` repository serves as a comprehensive collection of UI/UX resources for software engineers. Among its most referenced sections is the **Design Systems & Style Guides** catalog, which aggregates enterprise-grade component libraries and visual languages from major technology companies. This guide enumerates every design system documented in the README and provides practical implementation code for the most widely adopted frameworks.
## Complete List of Recommended Design Systems
The design systems are cataloged in the [[`readme.md`](https://github.com/bradtraversy/design-resources-for-developers/blob/main/readme.md)](https://github.com/bradtraversy/design-resources-for-developers/blob/master/readme.md) file on the `master` branch under the anchor `#design-systems-&-style-guides`. The repository organizes these resources into a curated table spanning enterprise solutions, open-source component libraries, and specialized style guides.
### Enterprise and Company-Specific Systems
Major technology companies maintain these systems for their product ecosystems:
- **Material Design** – Google's comprehensive design language for Android, web, and Flutter applications. Available at [material.io](https://material.io/).
- **Carbon Design System** – IBM's open-source React and Angular component library for enterprise products. Available at [carbondesignsystem.com](https://www.carbondesignsystem.com/).
- **Ant Design** – Alibaba's design system optimized for enterprise-level React applications. Available at [ant.design](https://ant.design/).
- **Microsoft Fluent UI** – Microsoft's collection of UX frameworks for Office and Windows-compatible web apps. Available at [developer.microsoft.com/en-us/fluentui#/](https://developer.microsoft.com/en-us/fluentui#/).
- **Polaris** – Shopify's design system specifically crafted for merchant-facing applications. Available at [polaris.shopify.com](https://polaris.shopify.com/).
- **Primer** – GitHub's design system for building consistent GitHub-like interfaces. Available at [primer.style](https://primer.style/).
- **Spectrum** – Adobe's design system providing components and tools for Creative Cloud integrations. Available at [spectrum.adobe.com](https://spectrum.adobe.com/).
- **AtlasKit** – Atlassian's official UI library (now the Atlassian Design System) for Jira and Confluence-style interfaces. Available at [atlaskit.atlassian.com](https://atlaskit.atlassian.com/).
- **Apple Design Resources** – Official guides and UI templates for macOS and iOS application development. Available at [developer.apple.com/design/resources/](https://developer.apple.com/design/resources/).
- **Audi Design Resources** – Volkswagen Group's UI toolkit for Audi-branded automotive applications. Available at [audi.com/ci/en/guides/user-interface/introduction.html](https://www.audi.com/ci/en/guides/user-interface/introduction.html).
- **Alta UI** – Oracle's design system for enterprise middleware and cloud applications. Available at [oracle.com/webfolder/ux/middleware/alta/index.html](https://www.oracle.com/webfolder/ux/middleware/alta/index.html).
### Open-Source Component Libraries
These frameworks emphasize reusability and community contributions:
- **Clarity Design System** – VMware's open-source Angular-focused framework providing UX guidelines and HTML/CSS components. Available at [clarity.design](https://clarity.design/).
- **PatternFly** – Red Hat's open-source design system for Kubernetes and enterprise IT interfaces. Available at [www.patternfly.org](https://www.patternfly.org/).
- **Fundamental Library** – SAP's open-source UI library for business applications. Available at [sap.github.io/fundamental-styles](https://sap.github.io/fundamental-styles/).
- **Arco.design** – ByteDance's enterprise-level design system supporting React and Vue. Available at [arco.design/en-US](https://arco.design/en-US).
- **Mozilla Protocol** – Mozilla's design system specifically for Firefox and Mozilla web properties. Available at [protocol.mozilla.org](https://protocol.mozilla.org/).
- **Once UI** – A Next.js-specific open-source system featuring 100+ components. Available at [once-ui.com](https://once-ui.com/).
- **Done Design System** – An open-source collection of guides and UI components for general use. Available at [uilibrary.github.io/done-design-system/](https://uilibrary.github.io/done-design-system/).
### Specialized Style Guides and Resources
These entries focus on specific implementation patterns, brand guidelines, or utility collections:
- **Bolt** – A Twig and web-component powered UI system for Drupal and static sites. Available at [boltdesignsystem.com](https://boltdesignsystem.com/).
- **Rizzo** – Lonely Planet's style guide featuring UI components and travel-specific widgets. Available at [rizzo.lonelyplanet.com/styleguide/design-elements](https://rizzo.lonelyplanet.com/styleguide/design-elements).
- **Yelp Style Guide** – Component library and design principles for local business interfaces. Available at [yelp.com/styleguide](https://www.yelp.com/styleguide).
- **SendGrid Style Guide** – Email-focused UI library for consistent marketing and transactional interfaces. Available at [styleguide.sendgrid.com](http://styleguide.sendgrid.com/).
- **Lexicon** – Liferay's experience language for enterprise portal UIs. Available at [liferay.design/lexicon/](https://liferay.design/lexicon/).
- **Pulse** – Heartbeat Agency's React component library with accompanying design guides. Available at [pulse.heartbeat.ua](https://pulse.heartbeat.ua/).
- **Comet** – Discovery Education's scalable system for educational technology interfaces. Available at [comet.discoveryeducation.com](https://comet.discoveryeducation.com/).
- **ETrade Design System** – Finance-focused guides for trading and banking applications. Available at [etrade.design](https://etrade.design/).
- **Infor Design** – Guidelines for Infor's enterprise resource planning (ERP) software suite. Available at [design.infor.com](https://design.infor.com/).
- **Pluralsight Design System** – Educational technology components for course platforms. Available at [design-system.pluralsight.com](https://design-system.pluralsight.com/).
- **VTEX Styleguide** – E-commerce patterns for marketplace and checkout flows. Available at [styleguide.vtex.com](https://styleguide.vtex.com/).
- **Marvel Style Guide** – Design principles from the Marvel prototyping tool team. Available at [marvelapp.com/styleguide/overview/introduction](https://marvelapp.com/styleguide/overview/introduction).
- **Atomize** – Framework for collaborative design-to-development workflows. Available at [atomizecode.com](https://atomizecode.com/).
- **Skoda Brand System** – Automotive brand guidelines for Skoda-branded digital products. Available at [skoda-brand.com/explore-our-brand](https://skoda-brand.com/explore-our-brand).
- **Asphalt** – Gojek's design language system for ride-hailing and delivery applications. Available at [asphalt.gojek.io](https://asphalt.gojek.io/).
- **Patterns.dev** – Design patterns for vanilla JavaScript and React applications. Available at [patterns.dev](https://www.patterns.dev).
- **StyleGuides.io** – A meta-directory cataloging over 500 public style guides. Available at [styleguides.io](http://styleguides.io/).
### Design Principles and Methodologies
These resources focus on UX theory and ethical design practices:
- **Laws of UX** – A collection of psychological maxims governing user interface design. Available at [lawsofux.com](https://lawsofux.com/).
- **Checklist Design** – Curated checklists for page layouts, components, and branding consistency. Available at [checklist.design](https://www.checklist.design/).
- **Humane By Design** – Guidance for creating ethically humane digital products. Available at [humanebydesign.com](https://humanebydesign.com/).
- **Pr1mer Guidelines** – Open-source general guidelines inspired by Apple's Human Interface Guidelines. Available at [guidelines.pr1mer.tech](https://guidelines.pr1mer.tech).
## Practical Implementation Examples
The following snippets demonstrate how to integrate three of the most frequently referenced systems from the README into a web application.
### Material Design Integration
To implement **Material Design** via CDN without a build step:
```html
Material Design Demo
```
This approach loads the Roboto font and Material-UI CSS directly from unpkg, enabling rapid prototyping as recommended in the repository's documentation.
### Ant Design React Setup
For **Ant Design** in a React application, install the package via npm:
```bash
npm install antd
```
Then import components and styles in your application entry point:
```jsx
// src/App.jsx
import React from 'react';
import { Button, Card } from 'antd';
import 'antd/dist/antd.css';
function App() {
return (
Welcome to Ant Design!
);
}
export default App;
```
This configuration imports the complete Ant Design stylesheet and renders a primary button within a bordered card component.
### Carbon Design System React Configuration
To use IBM's **Carbon Design System**, install the necessary packages:
```bash
npm install carbon-components carbon-components-react carbon-icons
```
Implement components with explicit CSS imports:
```jsx
// src/CarbonDemo.jsx
import React from 'react';
import { Button } from 'carbon-components-react';
import 'carbon-components/css/carbon-components.min.css';
export const CarbonDemo = () => (
);
```
The `kind="primary"` prop applies IBM's signature blue styling to the button element.
## Summary
- The **Design Resources for Developers** repository catalogs **37 distinct design systems** in its [`readme.md`](https://github.com/bradtraversy/design-resources-for-developers/blob/main/readme.md) file under the "Design Systems & Style Guides" section.
- **Enterprise solutions** like Material Design, Carbon, and Ant Design provide comprehensive React and Angular component libraries.
- **Open-source alternatives** such as PatternFly, Clarity, and Fundamental Library offer community-driven options for enterprise applications.
- The README includes **specialized resources** like Laws of UX and Checklist Design for design methodology and UX best practices.
- Each entry links directly to official documentation, enabling immediate implementation in production codebases.
## Frequently Asked Questions
### What is the best design system for React developers in the list?
**Ant Design** and **Carbon Design System** are specifically optimized for React applications, offering extensive component libraries with TypeScript support. **Material Design** also provides robust React implementations through Material-UI (MUI), making it ideal for cross-platform applications requiring Android-like interfaces.
### Where exactly are the design systems located in the repository?
All design systems are documented in the **[readme.md](https://github.com/bradtraversy/design-resources-for-developers/blob/master/readme.md)** file on the `master` branch, specifically under the markdown heading `## Design Systems & Style Guides`. This section contains a table with direct links to each system's official website and documentation.
### Are these design systems free for commercial use?
Most listed systems—including **Carbon**, **Clarity**, **PatternFly**, and **Fundamental Library**—are open-source and free for commercial use under licenses like Apache 2.0 or MIT. However, company-specific systems like **Apple Design Resources** or **Spectrum** may have brand usage restrictions; always verify the license terms on the official website before deploying to production.
### How can I contribute a new design system to this repository?
Contributions follow the standard GitHub workflow: fork the repository, add the new design system to the appropriate table in [`readme.md`](https://github.com/bradtraversy/design-resources-for-developers/blob/main/readme.md) following the existing format (name, description, URL), and submit a pull request. The maintainers review submissions to ensure the resource is actively maintained and relevant to developers.