skip to content

In atomic design, what does bottom-up composition mean, and why does Brad Frost call the five levels a mental model rather than a linear process?

level: juniorimportance: must knowfreq 50%

answer

  1. small parts build larger ones
  2. atoms to pages
  3. not step one to five
  4. part and whole together
  5. the painter steps back

basics

~20 s

Bottom-up composition means larger interface parts are assembled from smaller ones: atoms into molecules, organisms, templates and finally pages. Frost stresses the levels are a lens for working on parts and whole at the same time, not five sequential steps.

solid answer

~50 s

In Brad Frost's atomic design, **atoms** (a label, an input, a button) combine into **molecules** with one focused job, molecules and atoms form **organisms** that are distinct sections of a screen, organisms are arranged into **templates**, and templates filled with real content become **pages**. That is bottom-up composition: each level is built from the ones beneath it, so a fix to a small part reaches every screen using it. But Frost is explicit that this is *not* a linear process — not "step 1: atoms … step 5: pages". Parts designed in isolation can each look right and still fail together, and real content on a page sends changes back down. So the levels are a mental model for moving between the parts and the whole concurrently, designing the final screens and the system beneath them at the same time.

go deeper

for a junior

Recall the five levels in order and one example of each, and remember Frost's point that they describe scale, not a sequence of steps.

for a middle

Explain why working strictly bottom-up fails: parts that look right alone fail together, and real content on pages sends changes back down the hierarchy.

for a senior

Describe how your team actually moved between screens and parts, and which lower-level components changed because of what a screen revealed.

for a principal

Weigh how much the atomic vocabulary helps a multi-platform organisation communicate versus the cost of training everyone in it.

## The five levels as one hierarchy Brad Frost's **atomic design** describes an interface at five levels of granularity. **Bottom-up composition** means that each level is assembled from the levels beneath it. Take a warehouse scanner app, the handheld tool a picker uses to collect items from shelves: | Level | What it is | Scanner app example | |---|---|---| | **Atom** | The smallest functional element; splitting it further stops it working | A text label, a numeric input, an icon, a button | | **Molecule** | A small group of atoms with one focused job | A quantity stepper: decrease button, number, increase button | | **Organism** | A distinct section of the interface, built from molecules, atoms and even other organisms | A pick-item row: item code, bin location, quantity stepper, confirm action | | **Template** | Organisms placed in a layout, showing content structure | The pick-list screen: header, scrolling list of item rows, bottom action bar | | **Page** | A template with real, representative content | Today's pick list for one picker, with real item codes and bins | The first three names come from chemistry. Frost deliberately leaves the metaphor behind at templates, because stakeholders understand "template" and "page" and would be confused by more chemistry. ## What bottom-up composition buys you - **Consistency.** The same quantity stepper appears wherever a quantity is entered, so pickers learn it once. - **Containment of change.** Fix the stepper once and every row and screen that uses it receives the fix. - **A sense of scale in the names.** Words like *module* or *component* say nothing about size; atom, molecule and organism imply a hierarchy anyone can follow. - **Single responsibility.** Frost ties small molecules to the principle of doing one thing well: simpler parts are easier to test, reuse and reason about. ## Why it is not a linear process The hierarchy invites a misreading: design every atom first, then every molecule, and so on up to pages. Frost rejects this directly. He writes that atomic design "is not a linear process" and that the stages should be seen as "a mental model that allows us to concurrently create final UIs and their underlying design systems". The reasons are practical: 1. **Parts fail together, not alone.** A stepper and a scan input can each look right in isolation and still compete for the same width on a narrow handheld screen. You only see that at the organism or template level. 2. **Real content sends work back down.** A bin location code longer than anyone expected changes the item row, and then perhaps the label atom inside it. 3. **Designing in a vacuum wastes effort.** Frost calls it foolish to design buttons in isolation and hope everything comes together into a cohesive whole. 4. **Context gives parts their purpose.** An atom only means something once it is applied; the template and page are where that meaning is checked. ## Moving between the part and the whole Frost borrows an image from Frank Chimero: a painter works close to the canvas on one stroke, then steps back to judge the whole composition, then steps in again. Atomic design gives a team the vocabulary for that back-and-forth. In one working week the scanner team might draft the pick screen, notice it needs a stepper, build the stepper, see it crowd the row on real data, and adjust both the row and the stepper. Top and bottom of the hierarchy move together. ## Not a web rule and not a code rule - Frost says the method applies to **all user interfaces**, not only web ones: a native handheld app, a kiosk, a desktop tool. - It describes **interface granularity**, not a technology. Frost states that it has nothing to do with web-specific stylesheet or script architecture, and it does not dictate how code must be organised. - A design editor, a native codebase and a web codebase can all speak the same five words while structuring their files differently. ## Common misreadings - **"Atomic design is a build order."** It is a way of seeing the interface at several scales at once. - **"Each level may only contain the level directly below."** Frost lets organisms contain atoms, molecules and other organisms. - **"The levels must map one-to-one onto code."** They are a shared vocabulary; code structure can follow other rules.

  • If the process is not linear, what is the point of the hierarchy?
    The hierarchy is for thinking and talking, not for scheduling. It gives the team words for scale, so they can say the stepper molecule is wrong rather than the screen looks off, and it makes clear which parts a change will reach. The order in which parts get built is left to the work.
  • Can an organism contain another organism?
    Yes. Frost defines organisms as groups of molecules and/or atoms and/or other organisms. A pick-list section containing several item-row organisms is a normal example. The hierarchy describes composition by scale, not a strict rule that each level may only hold the one directly below.

Frost's own image: a painter works close to the canvas on a single stroke, then steps back to judge the whole picture, then steps in again. Atomic design names the distances the team moves between, rather than a sequence of paintings finished one after another.

saying these in an interview costs you the question

  • Atomic design means finishing all atoms before starting any molecule.
  • Each level may only contain components from the level directly below it.
  • Atomic design is a web technique for organising stylesheets.
  • Pages are designed last, once every smaller part is final.
  • The chemistry names are required; renaming the levels breaks the method.