A design system is an engineering product whose users are the people building the product: a vocabulary (tokens), a set of parts (components), rules for combining them (patterns), and a process for changing them (governance). It succeeds when a feature team ships a screen that looks and behaves like the rest of the product without asking anyone, and it fails in predictable ways: a component library nobody adopts, tokens that are just variables, a governance process that is a queue.
Eleven parts: what a design system is for and its economics; tokens as the layered vocabulary with theming and dark mode as a token problem; primitives and components with composition, variants, headless foundations and accessibility built in; versioning, adoption and governance; the thinking patterns of UI (hierarchy, typography, spacing, colour, motion, density, states); the thinking patterns of UX (flows, friction, error design, affordance, disclosure, trust in money products); working with Product and UX including when and how to push back; and documenting and tooling. Three further parts cover what money products depend on most: designing forms, content design and microcopy, and numbers, tables and charts.
economicsWhen a system pays for itself, the failure modes, who it serves and who pays.
tokensPrimitive, semantic and component tiers; theming and dark mode as a token problem; distribution to every platform.
componentsLayering from primitives to composites, variants without explosion, headless foundations, accessibility that cannot be forgotten.
governanceSemver for components, migration tooling, contribution models, adoption measured rather than assumed.
UI patternsHierarchy, type scales, spacing systems, colour, motion, density, and every state a component can be in.
UX patternsFlows and friction, error design, affordance, progressive disclosure, and trust signals where money is involved.
the triadEngineering, Product and UX: design review, feasibility, and pushing back on unsafe, misleading or inaccessible designs.
toolingStorybook, documentation sites, Figma to code, design lint, and the tests that keep the system honest.
Paired with the Trust and Architecture coursesThe Trust course set the bar for screens where mistakes cost money; the Architecture and Big-company FE courses covered distributing a design system at scale. This course is the design system itself: what is in it, how it is thought about, and how the people around it work together.