Best Design System Examples · Visual Playground

Start here

What is a design system?

It's more than a style guide. A design system bundles the reusable building blocks of a product — buttons, inputs, cards — with the tokens (color, spacing, type) they're built from and the guidelines for using them. Designers and developers pull from the same kit, so a hundred screens still feel like one product.

Consistency

Every button, color, and spacing value comes from one place, so the product feels unified across teams and time.

Speed

Reuse beats rebuild. Designers and devs assemble screens from ready-made parts instead of starting from scratch.

Scale

Change a token once — the new brand blue — and it updates everywhere the token is used.

Built-in quality

Accessibility, states, and edge cases are solved once in the component, not re-litigated on every screen.

The parts

Anatomy of a design system

Almost every published system is built in the same four layers, from the smallest decisions up to the documentation that ties it together.

1 · Foundations / tokens

The raw decisions: color, type scale, spacing, radius, shadow, motion. Named values like color-primary everything else references.

2 · Components

Reusable UI parts built from tokens — buttons, inputs, cards, modals — each with its states documented.

3 · Patterns

How components combine to solve recurring jobs: a form layout, an empty state, a checkout flow.

4 · Guidelines & docs

The written rules — when to use what, do's and don'ts, voice, and accessibility notes — so everyone applies it the same way.

Foundations first: the whole system rests on tokens. Get color, type, and spacing right and the components almost design themselves. See the Design Tokens page to build that layer.

The gallery

Famous design systems to study

The best way to learn is to read real ones — most of these are public and free to explore. Each took a different stance, so notice what each optimizes for. (Links open the official docs.)

M3

Google

Material Design 3

The most influential system on the web. Famous for "Material You" dynamic color, deep theming, and exhaustive component specs.

Explore docs

Apple

Human Interface Guidelines

Less a component kit, more a philosophy: clarity, deference, depth. The reference for native iOS/macOS feel.

Explore docs

C

IBM

Carbon

An open-source, enterprise-grade system with a strict 2px grid and superb accessibility — a gold standard for data-heavy apps.

Explore docs

P

Shopify

Polaris

Built for merchants. Renowned for its plain-spoken content guidelines — how words, not just pixels, should behave.

Explore docs

A

Atlassian

Atlassian Design System

Powers Jira, Trello, and Confluence. Strong on tokens, theming, and writing one system for many products.

Explore docs

F

Microsoft

Fluent 2

One language across Windows, Office, and the web. Known for layered "materials", depth, and cross-platform reach.

Explore docs

GitHub

Primer

The system behind GitHub itself. Pragmatic, code-first, with tokens and React/CSS that ship the real product.

Explore docs

L

Salesforce

Lightning

One of the first enterprise systems to popularize design tokens at scale across a huge product suite.

Explore docs

An

Ant Group

Ant Design

The go-to React system for enterprise dashboards — a vast, battle-tested component library used worldwide.

Explore docs

How to read one: open any system's "Components → Button" page. Notice how they document every state (default, hover, focus, disabled, loading) and when to use each variant. That's the level of detail that makes a system usable.

Inside one

The building blocks, live

Strip any system down and you find the same foundations. Here they are as you'd actually define them — with the CSS custom properties (tokens) underneath.

Color tokens

--primary#6d28d9

--accent#06b6d4

--success#16a34a

--danger#dc2626

--ink#1d1d1f

--surface#f5f5f7

CSS

:root {
  --primary: #6d28d9;
  --accent:  #06b6d4;
  --success: #16a34a;
  --danger:  #dc2626;
  --ink:     #1d1d1f;
  --surface: #f5f5f7;
}
/* every component references the token, never a raw hex */
.btn { background: var(--primary); }

Type scale

--text-xsThe quick brown fox

--text-baseThe quick brown fox

--text-lgThe quick brown fox

--text-2xlThe quick brown fox

--text-4xlThe quick brown

CSS

:root {
  --text-xs:   0.75rem;   /* 12px */
  --text-base: 1rem;      /* 16px */
  --text-lg:   1.25rem;   /* 20px */
  --text-2xl:  1.75rem;   /* 28px */
  --text-4xl:  2.5rem;    /* 40px */
}
h1 { font-size: var(--text-4xl); }

Spacing scale

--space-1 · 4px

--space-2 · 8px

--space-4 · 16px

--space-6 · 24px

--space-8 · 32px

--space-12 · 48px

CSS

:root {
  --space-1: 4px;  --space-2: 8px;  --space-4: 16px;
  --space-6: 24px; --space-8: 32px; --space-12: 48px;
}
.card { padding: var(--space-6); gap: var(--space-4); }
/* a fixed scale stops random 13px / 17px / 23px spacing */

A component with its states

CSS

.btn { padding: 10px 20px; border-radius: 8px; font-weight: 600; }
.btn.primary   { background: var(--primary); color: #fff; }
.btn.secondary { background: #fff; color: var(--primary); border: 1.5px solid var(--primary); }
.btn.subtle    { background: #f3e8ff; color: var(--primary); }
.btn.danger    { background: var(--danger); color: #fff; }
/* document every variant + state: hover, focus, disabled, loading */

Your turn

How to start your own

You don't need a hundred components on day one. A tiny, consistent system beats a huge inconsistent one. Start here:

Audit what you have

Screenshot every button, color, and font size already in your project. You'll find ten shades of "grey" that should be one.

Define your tokens

Settle on a color palette, a type scale, and a spacing scale as CSS custom properties. This is the foundation everything else uses.

Build the core components

Button, input, card, and link first — the parts you use on every page. Style them only from tokens.

Document each one

Show every variant and state, with a line on when to use it. A simple page of live examples (like this one) is plenty to start.

Reuse and refine

Build new screens only from your kit. When something's missing, add it to the system — not as a one-off.

Beginner-friendly start: a single CSS file of :root tokens plus a handful of component classes is a design system. Tools like Figma variables and Storybook scale it later — see Figma and Design Tokens.

Reference

Characteristics & components

The signals that make something a real design system:

Consistent UI library Reusable components

Core components every system ships

Here's a minimal kit — buttons, a card, a form field, alerts, navigation, and a type scale — all built from the same tokens. Live first, then the code.

BUTTONS

CARD & FORM

Card title

Built only from spacing, radius & shadow tokens.

Email

ALERTS

✓ Saved successfully

! Check your input

✕ Something went wrong

NAVIGATION

TYPOGRAPHY

Display Heading Body Caption

HTML

<button class="btn primary">Primary</button>
<button class="btn secondary">Secondary</button>
<button class="btn subtle">Subtle</button>
<button class="btn danger">Danger</button>

<article class="card"><h3>Card title</h3><p>Built only from spacing, radius &amp; shadow tokens.</p></article>

<label>Email</label>
<input type="email" class="input" placeholder="you@example.com">

<div class="alert success">✓ Saved successfully</div>
<div class="alert warn">! Check your input</div>
<div class="alert danger">✕ Something went wrong</div>

<nav class="nav">
  <strong>Acme</strong>
  <a href="#">Product</a><a href="#">Docs</a><a href="#" class="cta">Sign up</a>
</nav>

<p class="type">
  <span class="display">Display</span>
  <span class="heading">Heading</span>
  <span class="body">Body</span>
  <span class="caption">Caption</span>
</p>

CSS

:root {
  --primary: #6d28d9; --danger: #dc2626;
  --radius: 8px; --space: 12px; --surface: #fff; --line: #e5e7eb;
}
/* every component reads the same tokens */
.btn          { border-radius: var(--radius); padding: 10px 18px; font-weight: 600; border: none; }
.btn.primary  { background: var(--primary); color: #fff; }
.btn.secondary{ background: #fff; color: var(--primary); border: 1.5px solid var(--primary); }
.btn.danger   { background: var(--danger); color: #fff; }

.card  { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 18px; }
.input { padding: 10px 12px; border: 1px solid #d1d5db; border-radius: var(--radius); }

.alert         { border-radius: var(--radius); padding: 10px 14px; border-left: 4px solid; }
.alert.success { background: #ecfdf5; color: #065f46; border-color: #10b981; }
.alert.warn    { background: #fffbeb; color: #92400e; border-color: #f59e0b; }
.alert.danger  { background: #fef2f2; color: #991b1b; border-color: #ef4444; }

.nav     { display: flex; justify-content: space-between; align-items: center; }
.nav .cta{ color: var(--primary); font-weight: 600; }

In practice

Do & don't

Do

Build on tokens, never raw hex values
Start small — tokens + a few core components
Document every state and when to use each variant
Name things clearly (--space-4, not --m)
Bake accessibility into the component once
Let the system grow from real needs

Don't

Hard-code colors and sizes per component
Try to design all 80 components up front
Ship components with no usage guidance
Invent a new "grey" every time you need one
Treat the docs as an afterthought
Fork the system for one-off screens

Keep going: pair this with Design Tokens, Design Principles, and UX Best Practices to round out the foundations.

Recap

The takeaway

A design system is tokens + components + patterns + docs working as one source of truth. The famous ones — Material, Carbon, Polaris, Fluent, Primer — are public; read how they document a single button and you've learned most of the craft. To start your own: audit, define tokens, build a few core components from those tokens, document them, and only ever build from your kit.