atomic-design
Atomic Design — methodology for building scalable design systems
Atomic design is a mental model for decomposing interfaces into reusable, composable parts and reassembling them into screens. It is not a folder structure you copy blindly; it is a vocabulary for talking about granularity and composition so designers and engineers agree on what a "component" is and where it lives. Use it to make a design system legible, not to satisfy a taxonomy.
The core insight: interfaces are not pages, they are systems of components. Build the system, and pages fall out of it. The five stages give you a shared language for the spectrum from raw style primitive to fully-composed screen.
The five stages
| Stage | Definition | Composable? | UI examples (cross-platform) |
|---|---|---|---|
| Atoms | Smallest functional UI units; can't be broken down without losing meaning. | Building blocks | Button, input, label, icon, checkbox, avatar, badge, spinner, switch, a single Text style |
| Molecules | A small group of atoms bonded into a unit with one job. | Atoms → 1 unit | Search field (input + button + label), form field (label + input + error), list row (avatar + title + chevron), tag chip with remove icon |
| Organisms | Relatively complex, self-contained sections made of molecules/atoms. | Molecules → section | Nav bar, card, comment thread, product tile, data table, bottom tab bar, settings group |
| Templates | Page-level layout: organisms arranged into a structure, placeholder content only. | Layout skeleton | Article layout, dashboard grid, checkout scaffold, master-detail split |
| Pages | A template filled with real, representative content — the highest-fidelity artifact. | Instance | The actual article, a populated dashboard, a real product page |
Atoms
The irreducible primitives. An atom has a single responsibility and no internal layout decisions about other components. A Button is an atom; a button with an icon and a dropdown is not. Atoms are where your design tokens become visible — an atom is the smallest place a color, font size, radius, or spacing token gets applied.
Litmus test: if removing a child element changes what the thing fundamentally is, you've gone below the atom. A label without its text is still a label; a search field without its input is no longer a search field.