Atomic Design

Atomic Design is a methodology for structuring design systems into hierarchical components (atoms, molecules, organisms, templates, pages). It promotes reuse, consistent interfaces, and efficient collaboration between design and development. Suitable for teams aiming to scale UI systems and maintain visual quality across products.

Use this profile to understand the building block briefly, place it in the model, and switch to the 360° assessment when needed.

Content type

Concept

Theoretical construct: explains a term, principle, or mental model.

Classification level

Structure

What organizes, connects, or makes decisions possible.

Available perspectives

Open this building block directly in an already curated view.

360°

In brief

Atomic design in brief

Atomic Design is Brad Frost’s method for developing interfaces from reusable levels of atoms, molecules, organisms, templates, and pages.

Where does it come from?

Brad Frost introduced Atomic Design in 2013 in response to the growing variety of responsive interfaces and applied the metaphor of chemical building blocks to design systems.

The mental model

An interface grows like a construction kit: parts combine into groups, sections, and complete pages.

Key building blocks

Core idea

Hierarchical building blocks combine visual consistency with reusable implementation.

Use

Teams maintain components across multiple pages and products.

Practice context

Component libraries, tokens, and patterns support design and development.

When is it useful?

Atomic Design provides shared vocabulary for scalable interfaces and design systems.

Brad Frost: Atomic Web Design Atomic Design book

Why is this building block relevant?

Atomic Design breaks UI systems into reusable, hierarchical components (atoms → pages) to improve consistency and enable efficient collaboration between design and development.