Atomic Design
A methodology organising an interface into five levels — atoms, molecules, organisms, templates and pages — so components compose predictably.
Process & MethodsAtomic design gives a vocabulary for composition. Atoms are the indivisible pieces — a label, an input, a button. Molecules combine a few atoms into something with a purpose, like a search field with its label and button. Organisms are self-contained sections such as a header or a product card. Templates arrange organisms into a layout, and pages are templates with real content. The value is a shared way to say what level a change belongs at.
In practice, the middle of the scale is where arguments live. Is a card a molecule or an organism? Teams lose real time on classification that changes nothing about the code. The productive version keeps the extremes — primitives and page-level compositions — and treats the middle as a naming convention rather than a taxonomy to defend. What matters is that a change to a primitive propagates predictably, which is a design system property, not an atomic one.
In practice
A team spent two sprints reclassifying a component library into strict atomic levels. The shipped interface did not change, and six months later nobody could say which level a new component belonged to without asking. The version that stuck was three tiers — primitives, patterns, pages — with a one-line rule for each.
Where teams get it wrong
- Debating whether something is a molecule or an organism, which never changes the output.
- Applying the full taxonomy to a product too small to need it.
- Treating the method as a design system. It is a naming convention, not governance or tokens.
- Building atoms nobody composes with, producing a library of unused primitives.
- Enforcing the hierarchy so strictly that legitimate one-off compositions have nowhere to live.
Learn more
You may ask
Frequently Asked Questions
What are the five levels of atomic design?
Atoms (indivisible elements), molecules (small functional groupings), organisms (self-contained sections), templates (layout structures) and pages (templates with real content).
Is atomic design still relevant?
The composition idea is, and it survives in most design systems. The strict five-level taxonomy is applied loosely by most teams, because classifying the middle tiers costs time and changes nothing.
Related terms
All terms- Design SystemThe single source of truth for how a product looks and behaves: tokens, components, patterns, usage rules and the process for changing them.
- Component LibraryA shared, versioned set of reusable interface components that designers and engineers build from instead of recreating elements per screen.
- Design TokenA named variable holding one design decision — a colour, spacing step, radius or type size — so the value can change everywhere from one place.
- Component InstanceA copy of a component that stays connected to its source, so a change at the source reaches every place the component is used.
Defined by Mara Last reviewed .
Let's talk about your product.
Happy to look at what you're building and say where design would move the needle.
Contact Us