Atomic Design
A methodology by Brad Frost for building design systems from the smallest parts up: atoms, molecules, organisms, templates, and pages.
Why it matters
Its real gift is a shared vocabulary: when a team can say "this is an organism, not a molecule", debates about where a component belongs get short. Systems built without some version of this hierarchy tend to grow a drawer of one-off components nobody dares delete.
See it
A button and a field become a search bar; the search bar joins a header. Systems compose upward.
The numbers
- 5 levels — atoms, molecules, organisms, templates, pages
- Atoms — the irreducible bits: labels, inputs, buttons
Related terms
Ask your assistant
Define "Atomic Design" using uxspot. Works in Claude, Cursor or any MCP client — connect the uxspot MCP.
Think it stuck? A 20-second round of Spot Check will tell you.