Recommended Design Systems and Style Guides for Developers

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.

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/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.
• Carbon Design System – IBM's open-source React and Angular component library for enterprise products. Available at carbondesignsystem.com.
• Ant Design – Alibaba's design system optimized for enterprise-level React applications. Available at 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#/.
• Polaris – Shopify's design system specifically crafted for merchant-facing applications. Available at polaris.shopify.com.
• Primer – GitHub's design system for building consistent GitHub-like interfaces. Available at primer.style.
• Spectrum – Adobe's design system providing components and tools for Creative Cloud integrations. Available at 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.
• Apple Design Resources – Official guides and UI templates for macOS and iOS application development. Available at 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.
• Alta UI – Oracle's design system for enterprise middleware and cloud applications. Available at 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.
• PatternFly – Red Hat's open-source design system for Kubernetes and enterprise IT interfaces. Available at www.patternfly.org.
• Fundamental Library – SAP's open-source UI library for business applications. Available at sap.github.io/fundamental-styles.
• Arco.design – ByteDance's enterprise-level design system supporting React and Vue. Available at arco.design/en-US.
• Mozilla Protocol – Mozilla's design system specifically for Firefox and Mozilla web properties. Available at protocol.mozilla.org.
• Once UI – A Next.js-specific open-source system featuring 100+ components. Available at 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/.

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.
• Rizzo – Lonely Planet's style guide featuring UI components and travel-specific widgets. Available at rizzo.lonelyplanet.com/styleguide/design-elements.
• Yelp Style Guide – Component library and design principles for local business interfaces. Available at yelp.com/styleguide.
• SendGrid Style Guide – Email-focused UI library for consistent marketing and transactional interfaces. Available at styleguide.sendgrid.com.
• Lexicon – Liferay's experience language for enterprise portal UIs. Available at liferay.design/lexicon/.
• Pulse – Heartbeat Agency's React component library with accompanying design guides. Available at pulse.heartbeat.ua.
• Comet – Discovery Education's scalable system for educational technology interfaces. Available at comet.discoveryeducation.com.
• ETrade Design System – Finance-focused guides for trading and banking applications. Available at etrade.design.
• Infor Design – Guidelines for Infor's enterprise resource planning (ERP) software suite. Available at design.infor.com.
• Pluralsight Design System – Educational technology components for course platforms. Available at design-system.pluralsight.com.
• VTEX Styleguide – E-commerce patterns for marketplace and checkout flows. Available at styleguide.vtex.com.
• Marvel Style Guide – Design principles from the Marvel prototyping tool team. Available at marvelapp.com/styleguide/overview/introduction.
• Atomize – Framework for collaborative design-to-development workflows. Available at atomizecode.com.
• Skoda Brand System – Automotive brand guidelines for Skoda-branded digital products. Available at skoda-brand.com/explore-our-brand.
• Asphalt – Gojek's design language system for ride-hailing and delivery applications. Available at asphalt.gojek.io.
• Patterns.dev – Design patterns for vanilla JavaScript and React applications. Available at patterns.dev.
• StyleGuides.io – A meta-directory cataloging over 500 public style guides. Available at 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.
• Checklist Design – Curated checklists for page layouts, components, and branding consistency. Available at checklist.design.
• Humane By Design – Guidance for creating ethically humane digital products. Available at humanebydesign.com.
• Pr1mer Guidelines – Open-source general guidelines inspired by Apple's Human Interface Guidelines. Available at 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:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Material Design Demo</title>
  <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500"
        rel="stylesheet">
  <link href="https://unpkg.com/@material-ui/core@latest/dist/material-ui.min.css"
        rel="stylesheet">
</head>
<body>
  <button class="MuiButton-root MuiButton-contained">Material Button</button>
</body>
</html>

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:

npm install antd

Then import components and styles in your application entry point:

// src/App.jsx
import React from 'react';
import { Button, Card } from 'antd';
import 'antd/dist/antd.css';

function App() {
  return (
    <Card title="Ant Design Card" style={{ width: 300, margin: '2rem auto' }}>
      <p>Welcome to Ant Design!</p>
      <Button type="primary">Primary Button</Button>
    </Card>
  );
}

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:

npm install carbon-components carbon-components-react carbon-icons

Implement components with explicit CSS imports:

// src/CarbonDemo.jsx
import React from 'react';
import { Button } from 'carbon-components-react';
import 'carbon-components/css/carbon-components.min.css';

export const CarbonDemo = () => (
  <Button kind="primary">Carbon Primary Button</Button>
);

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 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 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 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.

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}