Atomic Design
Brad Frost’s foundational methodology for constructing user interface design systems. Published 2016.
Core Argument
The web has evolved beyond the page metaphor that defined its early years. Modern interfaces require systematic, modular thinking, breaking UIs into their constituent parts while maintaining awareness of how those parts compose into wholes.
Key Concepts
The Five Stages: Atoms → Molecules → Organisms → Templates → Pages
The chemistry metaphor provides hierarchy that terms like “modules” and “components” lack. Templates and pages translate the abstract chemistry metaphor into client-friendly language while addressing the need to see patterns in context.
Not a Linear Process: Atomic design is a mental model, not a step-by-step workflow. Designers traverse between abstract and concrete continuously, like a painter stepping back from the canvas to assess, then stepping forward to make marks.
Pattern Libraries: The practical implementation of atomic design thinking. They promote consistency, speed development, establish shared vocabulary, and serve as living documentation.
Atoms Extracted
- 02-atom—page-metaphor-problem
- 02-atom—hierarchy-through-naming
- 01-atom—not-a-linear-process
- 01-atom—tiny-bootstraps-for-every-client
- 01-atom—design-systems-over-pages
Molecules Extracted
- 01-molecule—atomic-design-methodology
- 01-molecule—part-and-whole-traversal
- 02-molecule—structure-vs-content
Cross-Domain Connections
- Directly inspired heyMHK’s atom/molecule/organism taxonomy
- Connects to information architecture through systematic organization
- Connects to knowledge engineering through compositional hierarchy
- Anticipates component-based development patterns now standard in React, Vue, etc.
Notable Quotations
“We’re not designing pages, we’re designing systems of components.” — Stephen Hay (quoted)
“The hard part is building the machine that builds the product.” — Dennis Crowley (quoted)
“Responsive deliverables should look a lot like fully-functioning Twitter Bootstrap-style systems custom tailored for your clients’ needs.” — Dave Rupert (quoted)