Home
Bookmarks
Leagues
LEARN
Courses
Career Paths
Assessments
Tutorials
Arcade
Glossary
GROW
Certifications
Log in
Glossary
Log inSign up
Courses/UX Design Foundations/Atomic Design by Brad Frost/
Exercise #1

The Chemistry Metaphor in UI Architecture

In 2013, web designer Brad Frost introduced Atomic Design, a mental model and structural methodology for crafting scalable design systems inspired by natural chemistry.

In the physical world, all matter is composed of atoms that bond together into molecules, which combine into complex organisms. Similarly, digital user interfaces are constructed from a hierarchical taxonomy of modular components:

  1. Atoms
  2. Molecules
  3. Organisms
  4. Templates
  5. Pages

Atomic Design bridges the gap between abstract design tokens and concrete production applications, establishing a shared language for designers and software engineers.

Topics

The Chemistry Metaphor in UI Architecture
Level 1: Atoms — The Indivisible Building Blocks
Level 2: Molecules — Purpose-Built Functional Units
Level 3: Organisms — Complex Standalone Interface Sections
Level 4: Templates — Content-Agnostic Layout Skeletons
Level 5: Pages — Concrete Instances with Real-World Data
design
UX Design

From lesson

15

Atomic Design by Brad Frost

Level 4 · Principles of Design

Top contributors

Community contribution details will appear here once real learner activity is available.

Share