Stop 08 · Design SystemsTopics · 4/9

Atomic Design Methodology

In short

Brad Frost borrowed an idea from chemistry: big things are made of small things. Atomic Design gives you five levels to organise every piece of UI, from a single label to a full page.

Brad Frost's framework for structuring a design system — atoms (basic elements like a button), molecules (small combinations like a search bar), organisms (larger sections), templates, and pages.

The jaadu, as a cook, adds spices from small bowls into a pot next to a ready thali.

Think of it like this

From spices to a full thali

Jeera, haldi and salt are the basics. Mix them with dal and you get a tadka dal. Put dal, rice and roti together and you have a meal. Arrange it on a thali for a guest and it's served. Small pieces, combined level by level.

Watch it happen

Five levels of Atomic Design

Atoms

Molecules

Organisms

Templates

Pages

1/5Atoms: the smallest pieces. A label, an input box, a button, an icon.

The big ideas

What you need to know

A way to think

It's a mental model for breaking UI into parts, not a strict rule every team must follow.

Build up, test down

Build from atoms upward, but check pages with real content to catch problems with long names or empty data.

Helps organise files

Many teams use these levels to arrange their Figma pages or code folders.

Shared vocabulary

'Is this a molecule or an organism?' gets the team talking about reuse.

Save yourself the pain

Common mistakes

Oops

Arguing for hours whether a card is a molecule or an organism.

Do this instead

The labels are a guide. Pick one, stay consistent, and move on.

Oops

Only reviewing components in isolation.

Do this instead

Always check them on a real page. A perfect atom can still look wrong in context.

Your mission

Break a screen into atoms

~25 min

Quick check

A search bar made of an input field, an icon and a button is best described as a...

Go deeper

1Classify 5 UI elements from a real app into atoms, molecules, and organisms.
2Learn why this hierarchy helps teams talk about component complexity consistently.
3Structure a practice component library loosely following this atomic hierarchy.