A design system is the single source of truth that pairs reusable UI components with the underlying visual rules — color, type, spacing, motion — that keep a product consistent across screens, platforms, and teams. Design tokens are the atomic layer underneath it: named, platform-agnostic values (like color-action-primary instead of a raw #0066CC) that let a single design decision propagate automatically into Figma, CSS, iOS, and Android without anyone hand-editing five places. Teams adopt this pairing because it turns "does this look right?" into "does this reference the right token?" — a question tooling can answer instead of a human eyeballing pixels. The non-obvious part: most design system failures aren't visual, they're taxonomic — a token named blue-500 instead of color-action-primary looks identical today but breaks the moment the brand changes blue, because nothing in the name says why that color exists.
What This Cheat Sheet Covers
This topic spans 15 focused tables and 143 indexed concepts. Below is a complete table-by-table outline of this topic, spanning foundational concepts through advanced details.
A jump-to index of every table row in this cheat sheet.
An interactive map of every table and concept in this topic.
Table 1: Design System Foundations & Building Blocks
Before tokens or components exist, a team needs shared vocabulary for what a design system actually is and how its pieces relate — this table lays that groundwork.
| Concept | Example | Description |
|---|---|---|
Material Design 3, IBM Carbon, Shopify Polaris | A living collection of reusable components, design tokens, and usage guidelines that keeps a product visually and functionally consistent. | |
A coded <Button>, <Modal>, <Select> published as an npm package | The implemented (coded) building blocks a design system ships; consumed directly by product engineering. | |
color-action-primary → #0066CC | A named, reusable design decision stored once and referenced everywhere instead of hardcoded. | |
Token JSON file feeding both Figma variables and the CSS build | The one place a value is defined; every design and code surface pulls from it rather than duplicating it. | |
Atoms (label, input) → Molecules (search form) → Organisms (header) → Templates → Pages | A five-stage mental model for composing UI from indivisible parts up to full pages; not a linear build order. |