process & strategy

Atomic design

By Chris Daniels, UX designer & frontend developer Published 19 September 2026

What is atomic design?

Atomic design is a methodology for building interfaces from small, reusable parts that combine into bigger ones - a mental model borrowed from chemistry. The smallest pieces (atoms) combine into molecules, then organisms, then templates, then whole pages. It gives design systems a clear, consistent structure where everything is built from the same shared building blocks.

Also known as: atomic design, atomic design methodology, design system structure

Prefer to watch? Watch the recap 1:15

The demo

Watch an interface get built from the bottom up - atoms into molecules into organisms into a page. Step through the levels and see how everything is made from the same small, reusable parts.

What this demo shows (text version)

A stepper builds an interface up through atomic design's five levels. Atoms: the basic building blocks, like a button and an input. Molecules: simple groups of atoms, like a search field made from an input plus a button. Organisms: larger sections, like a header combining a logo and the search molecule. Templates: a page-level layout arranging organisms with placeholder content. Pages: the template filled with real content. Each level is visibly composed from the one below.

That's atomic design: building interfaces from a hierarchy of small, reusable parts - atoms, molecules, organisms, templates, pages. The payoff is consistency and reuse: change the button atom once and it updates everywhere, and new screens are assembled from existing components rather than reinvented. It's the conceptual backbone of component-based design systems.

Atomic design builds interfaces from a hierarchy of reusable parts, so a whole product stays consistent because it's assembled from the same components. The five levels: atoms (the basic building blocks - a button, an input, a label), molecules (simple groups - a search field = input + button + label), organisms (complex sections - a header, a product card), templates (page-level layouts with placeholder content), and pages (templates filled with real content). The payoff is consistency and reuse: fix the button atom once and it updates everywhere; build new screens by composing existing parts rather than reinventing them. It's the conceptual backbone of component-based design systems - think in reusable parts, not one-off screens.

Brad Frost's atomic design defines five stages. Atoms are the foundational, indivisible UI elements - a button, an input, an icon, a colour or type token. Molecules are simple, functional groups of atoms (a label + input + button forms a search field). Organisms are relatively complex, distinct sections built from molecules and atoms (a site header, a product grid). Templates arrange organisms into a page-level layout with placeholder content. Pages are specific instances of templates filled with real content, where the system is tested against reality.

The value is a consistent, maintainable, reusable system. Because everything is composed from shared components, a change to an atom (say, the button's style) propagates everywhere it's used, enforcing consistency and slashing rework. New screens are assembled from existing molecules and organisms rather than designed from scratch, which speeds work and keeps the experience coherent - the core promise of a component-based design system.

Atomic design is a mental model, not a rigid rulebook: the boundaries between molecules and organisms can be fuzzy, and teams adapt the vocabulary. What matters is the principle - think in a hierarchy of reusable parts, build the small pieces well, and compose larger structures from them - which underpins modern design systems and component libraries, supports consistency (a key usability and brand benefit), and makes design and code share the same building blocks.