UX Glossary · A
Atomic design
A way of structuring a component library in five levels, from the smallest elements up to full pages.
Atomic design is a methodology for organising interface components, described by Brad Frost in 2013 and set out in his book of the same name. It borrows a chemistry metaphor and defines five levels:
- Atoms: the smallest elements. A label, an input, a button.
- Molecules: small functional groups. A label plus input plus button forming a search field.
- Organisms: larger composed sections. A header, a product card grid.
- Templates: page structures with placeholder content.
- Pages: templates filled with real content.
What it is genuinely good at
Providing a shared vocabulary for where a component sits and what it may depend on. Atoms should not know about organisms, which keeps dependencies pointing one way and makes the library maintainable.
The final level is the most underrated. Frost’s point about pages is that templates only prove a structure works with real content, which is where most component libraries turn out to have been designed for text of a convenient length.
The criticism
The metaphor breaks down under pressure. Teams spend real time arguing whether something is a molecule or an organism, which is effort spent on taxonomy rather than on the interface.
Many design systems now use simpler groupings, primitives, components and patterns, for that reason.
In practice
Take the dependency direction and the insistence on testing with real content. The chemistry labels are optional.