Design Systems — A Comprehensive Visual Lesson

Step 1

What a design system actually is

A design system is more than a color palette or a folder of components. It's three layers working together as the single source of truth for how a product looks and behaves:

TokensThe raw values: colors, spacing, type, radius.

ComponentsReusable buttons, cards, inputs built from tokens.

GuidelinesThe rules & docs for when and how to use them.

Why it matters: without a system, ten designers make ten slightly different blue buttons. With one, everyone pulls the same button — products stay consistent, teams move faster, and a single change (a new brand color) updates everywhere at once.

Step 2

Design tokens: the atoms

Tokens are named design decisions stored as variables — one place to define every color, space, and size. In CSS they're custom properties; components reference the name, never a raw value.

:root {
  --color-brand: #7c3aed;
  --color-text: #0f172a;
  --space-2: 8px;
  --radius: 10px;
  --font-body: 'Inter', sans-serif;
}
.button { background: var(--color-brand); border-radius: var(--radius); }

--color-brand#7c3aed

--color-text#0f172a

--color-success#22c55e

--color-danger#ef4444

--color-border#e2e8f0

The payoff: change --color-brand once and every button, link, and badge that references it updates instantly. You'll see exactly that in the live demo in Step 6.

Step 3

A color system, not just colors

Systems organize color two ways. A scale gives each hue numbered steps (50 lightest → 900 darkest). Semantic tokens map meaning to those steps (“primary,” “danger,” “surface”) so components ask for a role, not a raw color.

A brand scale

violet-50

violet-200

violet-400

violet-600

violet-800

Semantic roles

Semantic token	Points at	Used for
--color-primary	violet-600	Main actions, links.
--color-surface	white / slate-50	Card & page backgrounds.
--color-danger	red-600	Errors, destructive actions.

Semantic naming is what makes dark mode and re-branding easy: you remap a few role tokens to different scale steps, and the whole UI follows — no component edits.

Step 4

The typography scale

Pick a base size (usually 16px) and a ratio, and generate a type scale — a fixed set of sizes. Designers choose from the scale instead of inventing arbitrary sizes, so headings and body text stay in harmony.

--text-xs · 12pxThe quick brown fox

--text-base · 16pxThe quick brown fox

--text-lg · 20pxThe quick brown fox

--text-2xl · 28pxThe quick brown fox

--text-4xl · 40pxQuick fox

A type system also fixes weights (e.g. 400/600/800), line-heights, and font families as tokens — --font-heading, --leading-tight — so type is never a one-off guess.

Step 5

The spacing scale

Consistent spacing is what makes a UI feel calm and deliberate. Systems base spacing on a unit — usually 4px or 8px — and only use multiples of it. No random 13px margins.

--space-1 · 4px

--space-2 · 8px

--space-4 · 16px

--space-6 · 24px

--space-8 · 32px

--space-12 · 48px

The 8-point grid is an industry default: padding, gaps, and margins all snap to multiples of 8 (with 4 for fine adjustments). It removes a thousand tiny decisions and keeps everything aligned.

Step 6

Components built from tokens

Components assemble tokens into reusable parts. Because they reference token names, re-theming is instant. Click a brand color below — one token changes, and the button variants, the link, and the badge all update together:

New

Card component

This card, its badge, and the buttons all read from one --brand token.

Learn more →

--brand: #7c3aed

This is the core promise of a design system in action: components don't hard-code values, so a brand refresh is a token change — not a hunt through hundreds of files.

Step 7

Variants & states

A real component isn't one appearance — it's a documented set of variants (primary, secondary, ghost) and states. Every interactive component should define all of these:

State	Must show
default	The resting appearance.
hover	Feedback that it's interactive (darken, lift).
focus	A visible focus ring — essential for keyboard users.
active	The pressed moment.
disabled	Clearly non-interactive, lower contrast.

Try it in the Step 6 demo: hover the primary button (it darkens to --brand-d) and tab to it (a focus ring appears). The disabled button shows the non-interactive state. Documenting all states is what separates a system from a sketch.

Step 8

Documentation & naming

A system is only as good as its docs. Each component needs: what it is, when to use it (and when not), its variants and props, accessibility notes, and do/don't examples. Clear, predictable naming ties it together.

Token naming: go from general to specific — color-bg-surface, space-inset-lg. Consistent prefixes make tokens discoverable.
Component naming: name by role, not appearance — Button / Alert, not GreenBox.
Do / Don't: pair every guideline with a visual example of the right and wrong way.

The most common failure isn't bad components — it's no docs, so nobody knows the system exists and everyone rebuilds their own button anyway. Documentation is what makes a system get used.

Step 9

Systems you can learn from

The biggest companies publish their design systems openly — a goldmine for seeing how tokens, components, and guidelines fit together at scale:

System	By	Known for
Material Design	Google	The most widespread; deep guidelines & theming.
Human Interface	Apple	Platform-native clarity across iOS/macOS.
Polaris	Shopify	Exemplary component docs & content guidelines.
Carbon	IBM	Open-source, token-driven, enterprise scale.
Primer	GitHub	Practical, developer-focused, fully open.

Most modern systems are built and maintained in Figma (design side) synced with a coded component library (React, Web Components) — the two halves share the same token names so design and code never drift apart.

Step 10

Design system checklist

Values live as tokens (CSS variables), never hard-coded in components
Color has a scale + semantic roles (primary, surface, danger)
Type and spacing follow fixed scales (e.g. an 8-point grid)
Components define every variant & state (incl. focus & disabled)
Naming is consistent and role-based; everything is documented
Design (Figma) and code share the same token names

Where next

Keep going

Design SystemsFamous examples & what they share. Reference LibraryEvery style & system, searchable. Color LabBuild the color tokens. CSS LessonCustom properties & the box model.