Atomic Design Methodology
Overview
A five-stage framework for constructing interface design systems by thinking simultaneously about components at multiple levels of abstraction.
The Five Stages
Atoms: The basic building blocks that can’t be broken down further without losing functionality. Form labels, inputs, buttons, headings, images. In isolation, atoms aren’t particularly useful. They only come alive through application.
Molecules: Simple groups of atoms functioning together as a unit. A label, input, and button become a search form. Each molecule does one thing well. The discipline of keeping molecules simple makes them portable and reusable.
Organisms: Relatively complex components composed of groups of molecules and/or atoms. A header organism might contain a logo atom, primary navigation molecule, and search form molecule. Organisms form distinct sections of an interface.
Templates: Page-level objects that place components into a layout and articulate the underlying content structure. Templates focus on the skeleton, image sizes, character lengths, content blocks, not the actual content.
Pages: Specific instances of templates with real representative content. This is what users see. It’s also where you test whether your design system actually works when real content is applied.
When to Use
Use atomic design as a mental model whenever building interface systems that need to be consistent, scalable, and maintainable. The methodology applies to any UI, web, mobile, desktop applications.
Key Principle
The stages are not sequential steps. They’re lenses for viewing the same system at different magnifications. Move between abstract and concrete continuously. Design a button, then see it in a page layout. Adjust the layout, then return to refine the button.
Limitations
The chemistry metaphor breaks down at templates and pages, which is intentional. Those terms translate the abstract methodology into language clients and stakeholders understand. Adapt the vocabulary if atoms/molecules/organisms doesn’t resonate with your organization. GE used “Principles, Basics, Components, Templates, Features, Applications.”
The framework doesn’t prescribe implementation details. It has nothing to do with CSS architecture, JavaScript patterns, or specific tooling. Those are separate concerns.
Related: 01-molecule—part-and-whole-traversal, 02-molecule—structure-vs-content, 02-molecule—pattern-libraries-shared-vocabulary, 01-atom—design-systems-over-pages