Atomic Design: Atoms Molecules Organisms
Categorise components into atoms, molecules, organisms, templates, and pages to create a shared vocabulary between design and engineering.
What Is Atomic Design?
Atomic Design (Brad Frost, 2013) is a mental model for organising UI components into five levels of complexity: Atoms, Molecules, Organisms, Templates, and Pages. It gives designers and engineers a shared vocabulary.
Atoms — The Smallest Building Blocks
Single-purpose components that can't be broken down further. Buttons, input fields, icons, labels, colour swatches. They're abstract and reusable in any context.
// Atoms (examples)
<Button variant="primary">Save</Button>
<Input type="email" name="email" />
<Icon name="chevron-right" />
<Label htmlFor="email">Email</Label>All lessons in this course
- Atomic Design: Atoms Molecules Organisms
- Monorepo Setup with Turborepo
- Micro-frontends: Module Federation
- Feature-Based Folder Structure