Overview
Atomic design (Brad Frost) is a mental model for building UIs as composed systems rather than collections of pages: interfaces break down into atoms (buttons, inputs, labels), which compose into molecules (a search form), organisms (a header), templates (page-level layout with placeholder content), and pages (templates with real content). Its lasting value is the inventory mindset — designing the system of parts, not screens — which is the intellectual foundation of modern design systems.
Key points
- The five levels: atoms → molecules → organisms → templates → pages; the chemistry metaphor matters less than the discipline of composition and reuse.
- Templates vs. pages: templates prove the structure works; pages prove it survives real content (long names, empty states, translations) — test the system with both.
- Maps cleanly onto component frameworks: React/Vue/Svelte components are the natural implementation unit; Storybook is the natural workbench for the lower levels.
- Known frictions: teams argue over molecule-vs-organism taxonomy (naming debates add little value — pick and move on), and business logic doesn't map to atomic levels; many teams keep the mindset but flatten the taxonomy.
- Feeds the design system: the atomic inventory becomes the component library; tokens sit below atoms as the sub-atomic layer (design systems).
- To explore: Frost's Atomic Design (free online), pattern-lab tooling, how micro-frontends slice the same hierarchy vertically.
Practice
- Interface inventory (source) — decompose a product you use daily into atoms/molecules/organisms on paper; the taxonomy debates you have with yourself are the lesson.
- Frontend Mentor, atomically (source) — build a multi-section challenge as a composed hierarchy (atoms up, pages last) instead of top-down screens; test templates with placeholder and real content.
- Design system from scratch (source) — the full build: tokens as the sub-atomic layer, then the atomic inventory as a documented component library.
Related
- Design systems — atomic design is a methodology; a design system is the product it helps build.
- Clean code — composition and single responsibility, applied to UI.
- Component architecture & state management — the code-side composition patterns the hierarchy maps onto.
- Hexagonal reference implementation — Frontend — where each atomic level lives in the house architecture: domain-blind levels in the design-system package, port-bound organisms and above in their deployment unit.