Skip to content
UX Atlas
Plate TERM·086 · TermGrid C6 · Rev. 2026-08-14

Atomic Design

A way of naming components by how small or composite they are.

TermCraft conventionFoundational

Definition

Brad Frost's methodology organising interfaces into atoms, molecules, organisms, templates and pages.

Craft convention. True because the industry converged on it. Breaking it costs familiarity, not correctness.

On this plate
  1. 1Definition
  2. 2Local chart
  3. 3Continue from here

In plain language

A way of naming components by how small or composite they are.

Example

An input is an atom, a labelled field is a molecule, a form is an organism.

Local chart

TERM·086 · Region X · Grid C6

This entry and the entries it is stated to connect with. Each line is labelled with what the connection means.

Each link says what the connection is, so you can tell a principle from an alternative from a thing people mix this up with.

Deeper reading

The full entry behind this definition.

Related concept

Connected closely enough to change how you apply this.

Nearby in the Atlas

Adjacent territory, found through shared tags rather than a stated link.