No. 007
Design Systems
Atomic Design
Atomic design is a methodology for building interfaces from the smallest pieces up: atoms, molecules, organisms, templates, and pages.
Why it matters
It gives teams a shared mental model and vocabulary for structuring a design system from simple parts into complex screens.
In depth
Created by Brad Frost, atomic design borrows from chemistry as a metaphor. Atoms are basic elements like buttons and labels; molecules and organisms combine them; templates and pages provide context. The framework encourages reuse and a clear hierarchy of components.
Real-world example
A label and input (atoms) combine into a search field (molecule), which sits in a header (organism), within a page template.
Related terms