Best Public Design Systems to Study

Building a design system is easier when you've studied well-built ones. These seven are publicly documented and worth spending time with — not to copy, but to understand how they handle the hard problems.

Material Design — Google (m3.material.io)

What makes it notable: Scale and comprehensiveness. Material Design 3 (the current version) covers components, color system, typography, motion, and adaptive design across Android, web, and Flutter. It's one of the largest publicly documented design systems in existence.

What to learn from it: The color system in M3 uses generated "color roles" derived from a source color using the HCT color space — this is a sophisticated approach to accessible color theming. Study how they define semantic color roles (primary, secondary, tertiary, error, surface) and why they map this way. Also worth studying: how they document state layers (hover, pressed, focused states) consistently across all interactive components.

Polaris — Shopify (polaris.shopify.com)

What makes it notable: Exceptional documentation quality. Polaris doesn't just show you components — it explains when to use them, when not to, and what the alternatives are. The content design section is some of the best publicly available writing on UX copywriting.

What to learn from it: How to write useful component documentation. Most design systems show you what a component looks like; Polaris tells you why and when to use it. Also: how Shopify handles the complexity of a platform that's used across very different merchant contexts.

Carbon Design System — IBM (carbondesignsystem.com)

What makes it notable: Data-dense UI patterns. Carbon is designed for complex enterprise and data products — dashboards, data tables, charts, and analytical interfaces. It handles density in a way that lighter design systems don't need to address.

What to learn from it: How to design for information density without sacrificing usability. The data table component alone is worth studying — it handles sorting, filtering, pagination, inline editing, and batch actions with clear specifications for each. Also: Carbon's two-layer theme system (white, g10, g90, g100) and how they approach dark mode systematically.

Atlassian Design System (atlassian.design)

What makes it notable: One design system serving multiple products (Jira, Confluence, Bitbucket, Trello). The challenge of cross-product consistency with product-level flexibility is something Atlassian has documented openly.

What to learn from it: How to balance global consistency with product-specific needs. The tokens documentation is detailed and practical. Study how they define their spacing and layout tokens, and how they handle the difference between "design tokens" (semantic values) and "raw values" (the underlying scale).

Base Web — Uber (baseweb.design)

What makes it notable: Overrides system. Base Web is a React component library with a principled approach to component customization — you can override any style at any level without forking the component.

What to learn from it: How to think about component extensibility from a design perspective. The documentation is engineering-focused, but reading it as a designer teaches you how your component specs need to accommodate customization. Also: their approach to light/dark mode and RTL language support.

Primer — GitHub (primer.style)

What makes it notable: Primitives-first architecture. Primer starts with primitive tokens (colors, spacing, sizing, borders) and builds components from them. The system is designed to be predictable and composable.

What to learn from it: The token architecture. Primer's color mode system — defining colors as semantic roles that change values between light and dark mode — is one of the cleaner public examples of token-based theming. Their Octicons icon set (available in Figma) is also a good study in coherent icon design at scale.

Human Interface Guidelines — Apple (developer.apple.com/design/human-interface-guidelines)

What makes it notable: Depth of platform-specific guidance. Apple's HIG covers not just components but the full context of designing for each platform — iOS, macOS, watchOS, visionOS — including interactions, navigation patterns, and system behaviors.

What to learn from it: Platform conventions and why they exist. The HIG explains the reasoning behind iOS navigation patterns, gesture conventions, and system UI behaviors. Understanding why Apple made these decisions helps you make better decisions when you're working within or intentionally departing from them.