Paths Subjects Questions Quizzes Pricing Search
Beginner Open Free

Where 'Organisms' Sit in the Atomic Design Hierarchy

Brad Frost's atomic design methodology orders UI components into five levels of increasing composition. Between "molecules" (a search field: label + input + button) and "templates" (page-level layout with placeholder content), which level comes next?

Solution

The correct answer is "Organisms — a distinct, recognizable section combining molecules/atoms."

Atomic design's five levels run atoms → molecules → organisms → templates → pages. Organisms are molecules (and atoms) combined into a distinct, complete section of an interface — a page header combining a logo, a nav molecule, and a search molecule is a classic organism example. It sits directly between molecules (still fairly generic, reusable building blocks) and templates (page-level layout structure using organisms with placeholder content).

The distractors are out of order or off-taxonomy: pages come after templates, not before organisms — a page is a template filled with real content, the final step, not the next one; atoms are the smallest level, already consumed to build the molecule in the question, not a level that comes later; and "tokens" aren't part of the five-level atomic design hierarchy at all — they're a separate concept (platform-agnostic named values) covered elsewhere in this subject.

Share this question

← Back to Design Systems, Components, and Dev Handoff practice

We use cookies for product analytics to improve OmniAtlas. See our Privacy Policy.