What is Atomic Design?
Brad Frost's methodology for composing interfaces hierarchically from atoms, molecules, organisms, templates, and pages.
Definition
Atomic design decomposes UI into five levels: atoms (buttons, inputs, labels), molecules (a search field combining input and button), organisms (a site header), templates (page-level layout with placeholder content), and pages (templates with real data). The chemistry metaphor gives teams shared vocabulary for component granularity and maps naturally onto component-driven tools like Storybook, where each level is developed and tested in isolation. In practice, many teams simplify to two or three tiers—primitives and patterns—but the core insight endures: build the system's smallest parts first, then compose upward rather than designing pages monolithically.