Design Atlas
한국어
⟳ Design process

Atomic design

아토믹 디자인

Brad Frost's chemistry metaphor for assembling interfaces bottom-up: atoms, then molecules, then organisms.

Also known as: Atoms molecules organismsBrad Frost
···
html
<div class="stage">
  <div class="lbl" id="lbl">atoms</div>
  <div class="canvas" id="canvas"></div>
</div>
css
.stage{width:94%;height:88%;display:flex;flex-direction:column;gap:8px}
.lbl{font:700 11px/1 monospace;color:var(--muted);letter-spacing:.05em;text-transform:uppercase}
.canvas{flex:1;position:relative;border:1px dashed var(--line);border-radius:10px;overflow:hidden}
.pc{position:absolute;border-radius:5px;transition:left .7s ease,top .7s ease,width .7s ease,height .7s ease,background .7s ease;}
.atomc{background:var(--accent)}
.atomc.alt{background:var(--accent-2)}
.atomc.alt2{background:var(--accent-3)}
.molc{background:transparent;border:1.5px dashed var(--muted);border-radius:8px}
.orgc{background:var(--surface);border:1px solid var(--line);border-radius:10px}
js
const canvas = document.getElementById('canvas');
const lbl = document.getElementById('lbl');
function box(cls, l, t, w, h) {
  const d = document.createElement('div');
  d.className = 'pc ' + cls;
  d.style.left = l + '%'; d.style.top = t + '%'; d.style.width = w + '%'; d.style.height = h + '%';
  canvas.appendChild(d);
  return d;
}
const a1 = box('atomc', 10, 15, 8, 14);
const a2 = box('atomc alt', 22, 15, 8, 14);
const a3 = box('atomc alt2', 34, 15, 8, 14);
const stages = [
  function () { lbl.textContent = 'atoms'; },
  function () {
    lbl.textContent = 'molecules';
    a1.style.left = '8%'; a1.style.top = '40%'; a1.style.width = '10%'; a1.style.height = '20%';
    a2.style.left = '20%'; a2.style.top = '40%'; a2.style.width = '10%'; a2.style.height = '20%';
    a3.style.left = '32%'; a3.style.top = '40%'; a3.style.width = '10%'; a3.style.height = '20%';
  },
  function () {
    lbl.textContent = 'organisms';
    a1.style.left = '10%'; a1.style.top = '65%'; a1.style.width = '34%'; a1.style.height = '22%';
    a2.style.left = '10%'; a2.style.top = '65%'; a2.style.width = '34%'; a2.style.height = '22%';
    a2.style.background = 'transparent';
    a3.style.left = '10%'; a3.style.top = '65%'; a3.style.width = '34%'; a3.style.height = '22%';
    a3.style.background = 'transparent';
  },
  function () {
    lbl.textContent = 'atoms';
    a1.style.left = '10%'; a1.style.top = '15%'; a1.style.width = '8%'; a1.style.height = '14%'; a1.style.background = '';
    a2.style.left = '22%'; a2.style.top = '15%'; a2.style.width = '8%'; a2.style.height = '14%'; a2.style.background = '';
    a3.style.left = '34%'; a3.style.top = '15%'; a3.style.width = '8%'; a3.style.height = '14%'; a3.style.background = '';
  },
];
let s = 0;
setInterval(function () { stages[s % stages.length](); s++; }, 1600);

A five-stage model from Brad Frost. Atoms are the smallest indivisible pieces — a label, an input, a button. Molecules are a few atoms combined into one functional unit (label + input + button = a search form). Organisms are molecules and atoms combined into a standalone section of a screen (a header, a product-card grid). Above those sit templates (layout skeletons with no real content) and pages (the final screen filled with real content).

It overlaps with a design system's component hierarchy but isn't the same thing. A design system is the inventory of what to build; atomic design is more a mental model for how to tier and name that inventory. Plenty of teams never adopt the literal atom/molecule/organism vocabulary.

The key point is that atom → molecule → organism isn't a linear process you walk in order. In practice, teams often sketch the organism first and work backward to figure out which atoms it needs.

When to use

Reach for the vocabulary when naming and tiering a component inventory, especially early in designing a system, to debate how small a component should be to stay reusable.