The five levels
- Atoms: the smallest usable parts, such as a label, an input, or a button
- Molecules: small groups that do one job, such as a search field with its button
- Organisms: larger sections, such as a site header or a pricing table
- Templates: page-level arrangements of organisms, without real content
- Pages: templates filled with the real thing, where the design gets tested
| Level | What it is | Example |
|---|---|---|
| Atom | The smallest usable part | A button, a label, an input |
| Molecule | A small group doing one job | A search field with its button |
| Organism | A larger section | A site header, a pricing table |
| Template | A page-level arrangement | A case-study layout, unfilled |
| Page | A template with real content | The Klipboard case study |
What it gets right
It replaces designing pages with designing parts, which is the only approach that survives a site growing from twenty pages to a thousand. Build a page at a time and every new page becomes bespoke work.
Where teams overdo it
The taxonomy is a thinking tool, not a filing requirement. Arguing about whether a card is a molecule or an organism produces no better interface. The useful half is building upward from reusable parts; the naming is scaffolding you can discard once the habit sticks.
Why it matters for B2B marketing teams
Useful to B2B teams as a hiring and briefing vocabulary more than as a filing system. When a marketer, a designer, and a developer all mean the same thing by component, the handoffs get shorter and fewer things get rebuilt.