Atomic Design
Atomic Design is a method for organizing interface elements from the smallest reusable parts to complete pages.
It is useful for Design System work because it gives a shared language for describing how simple interface decisions become complex product screens.
Core Idea
Any interface can be decomposed into smaller parts.
Those parts can then be recombined into larger structures.
flowchart LR A["Design Tokens"] --> B["Atoms"] B --> C["Molecules"] C --> D["Organisms"] D --> E["Templates"] E --> F["Pages"]
The Five Levels
| Level | Meaning | Example |
|---|---|---|
| atoms | smallest interface elements or visual foundations | label, input, icon, button text, color style |
| molecules | small groups of atoms that perform one function | search field with button, input with label |
| organisms | larger groups of molecules that form a reusable section | header, product card, checkout form |
| templates | reusable page structures without final content | product detail layout, dashboard layout |
| pages | real instances of templates with actual content | a specific product page or account page |
Where Design Tokens Fit
Design Tokens sit before atoms.
Tokens define the values that shape atoms:
- color
- type
- spacing
- radius
- shadow
- motion
For example, a button atom may use tokens for background color, text color, padding, radius, and focus ring. The atom is visible in the interface; the tokens are the named decisions behind it.
How To Use Atomic Design
Use Atomic Design to ask:
- what is the smallest reusable part?
- which elements should become components?
- which groups of elements perform a single function?
- which sections repeat across the product?
- which pages share the same structure?
- where should a rule live: token, atom, component, template, or page?
Molecule Or Organism?
A practical test:
- If splitting the element gives basic parts, it is probably a molecule.
- If splitting the element gives smaller components, it is probably an organism.
Example:
| Element | Likely level | Why |
|---|---|---|
| text input + label | molecule | combines basic parts into one input function |
| navigation bar | organism | combines logo, links, buttons, menu behavior |
| card grid section | organism | combines repeated card molecules into a section |
| full landing page | page | final instance with real content |
What It Is Not
Atomic Design is not a rigid production order.
You do not need to design every atom first, then every molecule, then every organism. In real projects, designers move back and forth between screens and components.
The method is most useful as:
- a classification system
- a communication tool
- a way to document reusable UI
- a way to avoid rebuilding the same decisions
Why It Matters
Atomic Design helps a team:
- reduce interface inconsistency
- identify reusable components
- organize a Design Library
- document the relationship between small decisions and full screens
- scale UI work without losing coherence