Atomic design
Atomic Design is a user interface design method that breaks down elements into atoms, molecules, organisms, templates and pages to create coherent and reusable interfaces.
Atomic Design is a design approach formalised by Brad Frost in 2013. It aims to create consistent, reusable user interfaces by breaking elements down into five levels: “atoms”, “molecules”, “organisms”, “templates” and “pages”. The analogy comes from chemistry: matter is built from a few simple elements, combined according to stable rules.
Five levels, from simplest to most complete
Atoms
Atoms are the basic elements: buttons, inputs, icons, headings, but also colour, typography and spacing tokens. On their own they mean little; yet they set the visual vocabulary of the whole system.
Molecules
Atoms combine into molecules, small groups that serve one purpose: a search field with its label and button, a menu item with its icon, a simple form.
Organisms
Organisms combine molecules into a self-contained, reusable component: a site header, a list of cards, a complete form.
Templates and pages
Templates arrange organisms into a layout, without real content; pages are those same templates filled with real content. This is where you check that the system holds up against long texts, missing images or translations.
Why adopt it
This approach promotes modularity and reusability, and encourages systematic design at scale. It gives designers and developers a shared language, fits naturally with component libraries and design systems, and makes changes safer: updating an atom carries through everywhere it is used.
The limits of the metaphor
The metaphor must not become a straitjacket. The line between molecule and organism is sometimes blurred; what matters is that the team shares the same conventions for splitting and naming.