Atomic Design
A methodology organising an interface into five levels — atoms, molecules, organisms, templates and pages — so components compose predictably.
Atomic 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 )
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.