What is Atomic Design?
Definition
Atomic design is a design system methodology introduced by Brad Frost that builds interfaces through five levels: atoms, molecules, organisms, templates and pages. Borrowing from chemistry, it describes how the smallest pieces, such as labels, inputs and buttons, combine into progressively more complex components and finally into pages filled with real content. It is meant as a mental model, not a linear workflow.
Also known as: atomic design methodology, atoms molecules organisms, Brad Frost atomic design
Borrowing a vocabulary from chemistry
Brad Frost first described the approach in a 2013 blog post and expanded it into a book in 2016. His starting point was that web teams still talked about designing pages when they were really building systems of interconnected parts. Chemistry, where atoms bond into molecules and molecules into more complex organisms, offered a handy vocabulary for how those parts fit together.
Frost is explicit that atomic design is not a linear process. A team can work on a single button and a full page template on the same afternoon; the model simply names the level you are thinking at.
The five levels, with examples
| Level | What it is | Example |
|---|---|---|
| Atom | A basic UI element that cannot be broken down further | Label, text input, button, icon |
| Molecule | A simple group of atoms that does one job together | A search form made of a label, input and button |
| Organism | A more complex component forming a distinct section | A site header with logo, navigation and the search form |
| Template | Components placed in a layout to show the content structure | An article template: headline, cover slot, body, related posts |
| Page | A template filled with real content, showing its variations | A real article with a very long headline and no image |
Atoms map closely onto HTML elements, which is why getting them right with proper semantic HTML heads off most accessibility problems further up the hierarchy.
Why templates and pages are separate levels
A template shows structure: headline here, image there. A page is where that structure meets real content and either holds or breaks. A card that looks perfect with a three-word title may overflow with a sixty-character product name; a news story with no photo may leave the template's cover slot gaping. The page level exists to produce these variations on purpose and stress-test the template and the components beneath it. It carries forward the "design with real content" habit that should already start at the wireframe stage.
Where it gets awkward
- Classification debates. "Is this card a molecule or an organism?" can eat an entire meeting. The levels are a communication aid, not a taxonomy to defend.
- Folders named after levels. An
atoms/,molecules/,organisms/structure works for small codebases, but when a component's level changes, files have to move. Many teams keep a flatter structure in code and use the levels only in documentation. - Unfamiliar names. "Organism" is not intuitive for people outside design. Some teams apply the same idea with their own words, such as primitives, components, sections and templates.
How tokens and components fit in
The original model has no level below atoms, but in current practice colour, spacing and type values are defined first as design tokens, sometimes called the subatomic layer. Every level from atom to organism lives in code as a UI component, and those components, together with guidelines and governance, make up a design system. Frost's own explanation is free to read in chapter two of the book.