The decisions a
system has to lock first.
A design system is a set of constraints, not a component library. Foundations are the constraints — color, type, spacing, motion, accessibility, voice, naming. Lock them before you build a Button, and the Button writes itself. Skip them, and every component is a fresh argument.
Foundations
10
Clusters
03
Interactive tools
06
Reading time
~45m
How to read this section
Three clusters, ten foundations. Visual language first — color and type, the layer people argue about in design review. System mechanics second — spacing, layout, motion, easing, the invisible rules that make everything compose. Practice last — principles, accessibility, voice, naming, the operating manual that turns the system from a Figma file into a way of working.
You don't need to read them in order. If you're bootstrapping a system from scratch, color and spacing are the highest-leverage starting points. If you're inheriting one, accessibility and naming conventions are where you'll find the most cleanup work.
01 — Visual language
How the system looks
The visible layer. Color, type, and shape decisions that show up on every screen. Get these calibrated and the rest of the system has a register to compose against.
Color
Palettes, semantic tokens, contrast
Frameworks (Material, atomic, HSL-based, brand-first), eleven-step scales, semantic vs primitive tokens, dark mode, color-blindness.
Typography
Typefaces, scale, hierarchy
Modular scales, line-height rules, heading hierarchy, font pairing, readability, and the interactive type tester.
02 — System mechanics
How the system spaces, moves, and structures itself
The invisible layer. Spacing rhythm, layout grids, motion budget, and easing curves — the rules that make a hundred screens feel like the work of one designer instead of fifteen.
Spacing
Scale, rhythm, density
The 4px scale anatomy, padding vs gap vs margin, density modes, responsive shrink, and the three anti-patterns every team falls into.
Layout
Grids, breakpoints, containers
Twelve-column grids, breakpoint logic, container widths, responsive layout patterns, and when to ignore the grid entirely.
Motion
Principles, choreography, intent
What motion is for (feedback, continuity, hierarchy), the motion budget, reduced-motion support, and choreography across surfaces.
Duration & easing
The two tokens motion runs on
Five duration tiers, four standard easing curves, cubic-bezier values, pairing rules, and the CSS that ships them.
03 — Practice
How the system gets used
The operating manual. Principles people argue from, accessibility constraints they design against, language they write inside, and naming patterns that keep the token catalog from becoming a guessing game.
Principles
What the system stands for
Why principles exist, how to write the kind that survive contact with sprint planning, and how the canonical systems word theirs.
Accessibility
POUR, WCAG, the system-level audit
Perceivable, operable, understandable, robust. Token-level, component-level, and composition-level a11y. The checklist most systems skip.
Voice & tone
How the product talks
Brand voice constants, contextual tone shifts (onboarding, error, empty), UX copy patterns, and the do/don't pairs that teach faster than rules.
Naming conventions
Tokens, components, code
Audience-first naming (designer, developer, agent), role-based token names, the generator, and patterns that scale past 500 tokens.
Next step
Foundations are decisions. Tokens are the artifact.
Once these choices are locked, the token generator turns them into a portable file — eleven-step scales, type ramps, spacing units, radius and shadow systems, all exported to Tokens Studio, Tailwind, CSS variables, or Style Dictionary in one click.