A design system is the single source of truth for how a product looks and behaves — learn what goes in one, why teams build them, and how tokens, components, and guidelines fit together.
Why: a design system is the single, shared source of truth for how a product looks and behaves — the reusable building blocks plus the rules for using them. It is not just a folder of components: it bundles design tokens (the raw values), components (the UI pieces), and guidelines (when and how to use each). Note: think "the LEGO set and the instruction booklet," not just "a pile of bricks."
Why: without a system, every screen reinvents buttons, colors, and spacing — so the product looks inconsistent, designers and developers redo the same work, and a brand change means hunting through hundreds of files. A design system fixes the look once, in one place, and every screen inherits it. Note: the payoff grows with the team — the more people building UI, the more a shared system saves.
Why: most design systems stack three layers, each built on the one below. Tokens are the raw decisions (this blue, this spacing step). Components combine tokens into reusable pieces (a Button, a Card). Patterns combine components into common solutions (a sign-up form, a data table). Note: the rest of this course covers the bottom two layers — tokens, then components.
Tokens the raw values: colors, spacing, font sizes, radii
↓ (e.g. color-primary = #2563eb, space-4 = 16px)
Components reusable UI built from tokens: Button, Input, Card
↓
Patterns components composed into solutions: a search bar, a checkout formWhy: you don't have to imagine this — most large products publish their design systems, and reading one is the fastest way to see the pieces in practice. Note: look at Material Design (Google), Carbon (IBM), Polaris (Shopify), and Atlassian Design System — each documents tokens, components, and usage guidelines openly.