Atomic Design (Atoms / Molecules / Organisms)

Atomic Design is a methodology for creating design systems by breaking interfaces into a hierarchy of components: atoms (basic elements), molecules (simple combinations), organisms (complex sections), templates (layouts), and pages (specific instances).

Category: Design (also: Architecture)

Author: Atomic Glue Editorial Team

## Definition

Atomic Design is a design methodology created by Brad Frost that organizes UI components into a hierarchical system inspired by chemistry. The five levels are: Atoms (the smallest building blocks: HTML elements like buttons, inputs, labels, headings, and icons), Molecules (simple groups of atoms working together: a search form combining a label, input, and button), Organisms (complex UI sections composed of molecules and atoms: a header with navigation, search, and logo), Templates (page-level layouts that arrange organisms into a structure, using placeholder content), and Pages (specific instances of templates with real content applied). This mental model helps teams think in systems rather than pages, and creates a shared vocabulary between designers and developers.

## The Five Levels Explained

Atoms: form labels, inputs, buttons, color palettes, fonts, animations. They serve as the foundational palette of your design system. Molecules: a form group (label + input + validation message), a card (image + heading + text), a search bar (input + button). These are simple, reusable combos. Organisms: a product grid (multiple cards arranged together), a page header (logo + navigation + search), a checkout form (multiple form molecules arranged in a layout). Organisms are the largest reusable components. Templates: a product listing page layout, an article page layout. Templates place organisms into a structure but use placeholder content. Pages: the actual product listing page with real products, the actual article page with the published content. Pages test the template with real data.

## Why the Chemistry Analogy Works

The chemistry metaphor gives designers and developers a shared mental model and vocabulary. Instead of saying "the thing with the picture and text" or "that blocky component at the top," teams say "the product card molecule" or "the page header organism." This precision reduces miscommunication. The hierarchy also enforces a natural dependency: atoms do not depend on organisms, but organisms depend on atoms. This makes it clear which components can be reused where.

## Atomic Design in Practice

Atomic Design is a mental model, not a strict rulebook. Some teams combine molecules and organisms into a single "components" level. Others add a "layouts" level between templates and pages. The key insight is the hierarchy, not the exact categories. Adopt the levels that make sense for your team and product complexity. The methodology works best when paired with a design system tool like Storybook, where each level maps to a documentation category.

## In code

<!-- Atom: Button -->
<button class="btn btn-primary">Submit</button>

<!-- Molecule: Search Form (input + button) -->
<form class="search-form">
  <input type="text" class="search-input" placeholder="Search...">
  <button class="btn btn-primary search-btn">Go</button>
</form>

<!-- Organism: Header (logo + nav + search) -->
<header class="site-header">
  <a href="/" class="logo">AtomicGlue</a>
  <nav class="main-nav"><!-- nav links --></nav>
  <form class="search-form"><!-- search molecule --></form>
</header>

## Common questions

Q: Is Atomic Design only for large design systems?

A: No. The atomic hierarchy is useful even for a single-page site. It trains you to think in reusable pieces rather than recreating similar elements with slightly different styles. The discipline of making an atom (a button), combining it into a molecule (a card), and then assembling organisms pays off even on small projects.

Q: Can a component be both a molecule and an organism?

A: The boundary between molecule and organism is the most debated level. A good rule of thumb: if a component combines multiple types of atoms and molecules into a distinct, reusable section, it is an organism. If it simply pairs a couple of atoms together (label + input), it is a molecule. Do not overthink it. Consistency across your system matters more than perfect categorization.

## Key takeaways

• Atomic Design organizes UI components into a five-level hierarchy: atoms, molecules, organisms, templates, pages.
• Created by Brad Frost to help teams build systems, not pages.
• The hierarchy gives designers and developers a shared vocabulary.
• Atoms are the smallest elements. Molecules combine atoms. Organisms combine molecules into complex sections.
• Templates arrange organisms into layouts. Pages apply real content to templates.

## Related entries

• [Design System](atomicglue.co/glossary/design-system-front-end)
• [Design Tokens](atomicglue.co/glossary/design-tokens)
• [UI (User Interface)](atomicglue.co/glossary/ui-user-interface)

Last updated July 2026. Permalink: atomicglue.co/glossary/atomic-design-atoms-molecules-organisms