Atomic design builds interfaces out of small reusable parts that stack up into complete pages. It runs on five levels, and the whole idea hangs on how those levels relate.
Brad Frost described the model on his blog in 2013 and published a book of the same name in 2016. Design and development teams use it to organize components in a pattern library or component library, with tools such as Storybook and Figma. Pattern Lab, the tool Frost built for the method with Dave Olsen and Brian Muenzenmeyer, was archived in May 2026 and is no longer maintained.
Plenty of people read the levels as steps one through five. Frost’s own blog calls that a misinterpretation and describes them as a mental model for creating a final interface and its design system concurrently.
What is atomic design?
Frost wanted design systems built on an explicit hierarchy instead of a pile of one-off screens, so he sorted interface parts into five levels that run from single elements up to finished pages.
Under this model, a user interface is a set of parts that get built, tested and reused. It stops being a stack of finished pages.
The levels go atoms, molecules, organisms, templates and pages. Frost treats them as a mental model and not a sequence of steps, which means teams work on the whole and its parts at the same time.
Where the chemistry model comes from
The naming is borrowed from chemistry. Atoms bond into molecules, and molecules combine into organisms.
Frost’s original post points to Josh Duck’s HTML Periodic Table as a breakdown of the elements web designers already work with.
He wrote both the original post and the book. Atomic Design came out in 2016 and is free to read online (Frost’s books page). Pattern Lab came from his work with Dave Olsen and Brian Muenzenmeyer, and it was archived in May 2026.
Big Medium recounts that the first version of Pattern Lab came out of the TechCrunch website project in 2013.
Why the creation date varies between sources
Sources don’t agree on when atomic design started.
Sparkbox and CSS-Tricks both date Frost’s blog post to 2013, and his own books page lists the book as 2016.
A 2023 Medium explainer says 2012, and GoodBarber’s UX guide says 2015. A Sparkbox writer first heard the concept in a 2011 talk by Jeremy Keith at Breaking Development Nashville.
No source explains the 2012 date. The 2015 figure coincides with Frost’s An Event Apart Austin talk that year.
Use 2013 as the publication date and treat the others as secondhand.
The five levels of atomic design
Each level builds on the one below it, starting from a single form label and ending at a finished screen with real content.
| Level | Definition | Example | Chemistry analogue |
|---|---|---|---|
| Atoms | Smallest UI elements | Label, input, button | Chemical elements |
| Molecules | Small groups of atoms acting as one unit | Search form | Bonded atoms |
| Organisms | Distinct interface sections | Site header | Groups of molecules |
| Templates | Page layouts built from organisms | Article layout | None, the analogy ends |
| Pages | Templates filled with real content | One published article | None |
Atoms
Atoms are the smallest pieces of an interface that still do anything on their own.
On the web they map to individual HTML tags such as a form label, an input or a button.
- Label
- Input field
- Button
- Colors and fonts
Alone, an atom is abstract and rarely useful, which is why the next level exists.
Molecules
A molecule is a small group of atoms that works as one unit. The standard example is a label, an input field and a button that together become a search form.
Frost says building up from atoms pushes teams toward components that do one job well.
Molecules stay simple on purpose, because simple parts are the ones teams reuse.
Organisms
A site header is the standard example. It holds a logo and a navigation menu along with a search form, all in one distinct section.
An organism can repeat one molecule (a row of product cards) or mix several (a header), and either way the section works as a unit.
Organisms hold molecules and sometimes bare atoms, so the hierarchy is a guide and not a strict nesting rule.
Templates
Templates are where the chemistry analogy stops.
Frost says templates begin their life as HTML wireframes and gain fidelity until they become the final deliverable.
A template arranges organisms into a page layout with placeholder content, which gives abstract molecules and organisms a concrete context. It’s also the first level where clients see the design taking shape in place.
The catch is that a template shows where content goes, not how real content behaves.
Pages
A template is a blueprint for layout, filled with placeholder content. A page is one specific instance of that template with real content in place.
Pages are where the system gets tested, because real headlines and real images break assumptions that placeholder text hid. When a page exposes a problem, teams loop back and adjust the molecules, organisms or templates behind it.
Pages are also where template variations get compared.
How to decide whether a component is a molecule or an organism
Ask what the component does. If it handles one job, such as searching, it’s a molecule. If it’s a distinct interface section holding several jobs, it’s an organism.
Tracing one component through every level makes the rule concrete.
- A text input is the atom.
- Add a label and a button and you get a molecule, a search form.
- Put that search form in a site header with a logo and navigation, and the header is the organism.
- An article layout that places the header above a content area is the template.
- One real article rendered in that layout is the page.
The hard cases sit on the border.
Sparkbox’s “Iterating on Atomic Design” says every system it worked on had a handful of components that straddle two levels, with the icon button as its example. Its explanation is that teams abstract too soon, before anyone knows how a component will be used.
Frost defended the vocabulary in his reply, noting that atoms, molecules and organisms carry a built-in hierarchy. He also agreed that settling on terms the team understands matters most.
A workable rule is to pick one level per component, write it into the naming guide, and stop debating.
Pattern Lab’s own site says to use atomic design language or not, as the team prefers. The 2016 Smashing Magazine article by Frost, Dave Olsen and Brian Muenzenmeyer (who maintains Pattern Lab Node) called the model a helpful mental model and not rigid dogma.
Atomic design vs design system, pattern library and component library
Atomic design is a method for structuring components. A design system is the full set of principles, components, tokens and documentation around them.
| Term | What it holds | Link to atomic design |
|---|---|---|
| Design system | Principles, components, tokens, documentation | Atomic design structures its components |
| Pattern library | Reusable UI patterns in a working environment | Holds the built levels (the workshop) |
| Style guide | Visual and brand rules, a subset of the system | Shows a selection of patterns (the storefront) |
| Component library | Coded UI elements for production | Covers the lower levels in code |
Frost’s own definition keeps the roles apart. Atomic design is a methodology for building a design system, and it isn’t the system itself.
Pattern libraries and style guides get confused more than any other pair. Frost’s metaphor, relayed by Big Medium, calls the pattern library a workshop and the style guide a storefront.
The workshop is where designers and developers build and test patterns. The storefront presents a subset of those patterns to the whole organization.
Nathan Curtis draws the line at ownership. A style guide is an artifact of the design process, while a design system is a funded product with a roadmap and a backlog.
This breakdown of how a style guide differs from a design system covers the gap in more detail.
UXPin’s 2026 comparison describes the component library as the part developers import into production. It reads Frost’s hierarchy as components at the atom and molecule levels, and patterns at the organism and template levels.
Some sources call atomic design component-based design, since both treat reusable components as the unit of work. FFW Agency frames it as modular design’s philosophy applied to web development.
How to apply atomic design in a project
Start with an interface inventory of the product you already have, pick one pilot project, build atoms and shared variables first, then compose upward and check the result on real pages.
- Run an interface inventory. Collect every button, form, heading and card in the live product, grouped by type.
- Choose a pilot project. One product area gives the system a real test before it spreads.
- Define atoms and shared variables. Colors, type sizes and spacing go into one variables file that every component imports.
- Build molecules and organisms, beginning with the patterns the inventory shows repeating most often.
- Assemble templates and pages. Place organisms into layouts and fill them with real content.
- Document each pattern and assign an owner. Every pattern needs usage notes and a person responsible for changes.
Frost’s book outline lists the interface inventory among its getting-started techniques and gives maintenance its own chapter. His Skillshare class teaches the same order: inventory, pilot project, build, adapt as needs change.
The inventory comes first because it exposes duplicate buttons and near-identical forms before anyone designs a new one.
Skip the last step and the system decays quietly. Good design system documentation tells a new developer which pattern to reuse before they build a duplicate.
Tools and code structure for atomic design
Storybook and Figma handle the two jobs that still matter day to day. Storybook documents and tests components in isolation, and Figma is where reusable components get designed. Pattern Lab, which built pattern libraries in code, is now archived. In frameworks such as React, Vue and Angular the levels map to a component tree, with design tokens sitting beneath the atoms.
Design and build tools
| Tool | Role | Constraint |
|---|---|---|
| Pattern Lab | Static site generator for a pattern library (PHP or Node); archived in May 2026 | Expects patterns ordered smallest to largest; no longer maintained |
| Storybook | Builds and tests UI components in isolation | One story per component state |
| Figma | Components and variants for design files | Large component sets slow down imports |
Pattern Lab supported Mustache and Twig templates, according to Four Kitchens’ review of the tool. Pattern Lab 2 added Markdown for pattern documentation and YAML alongside JSON for dynamic data (Smashing Magazine, 2016).
Its lineage view showed where each pattern is used, which sped up impact checks before a molecule changed.
The maintainers archived the project and deprecated its packages in May 2026. The code stays available under the MIT license, and the maintainers point new projects to CSS custom properties, design tokens and framework-native component documentation.
Storybook saves each component state as a story in Component Story Format, an open standard built on ES modules. As of October 2026, its documentation lists version 10.6.
Figma comes into play once the atoms exist as components. Building those atoms as Figma components comes before variants, and the help center says each slash in a component name adds a level of hierarchy, so a name like atom/button/primary sorts itself in the assets panel.
Variant properties can be mapped to code components to ease handoff. The help center also warns that adding one instance imports every variant in its set.
Folder structure in React
Cheesecake Labs adopted atomic design on a React and PWA product to stop repeated code, inconsistent components and a missing style guide. It adapted the levels into a set of rules.
- One variables file is imported by every component.
- Atoms carry no margins or positions.
- Only molecules and organisms position atoms, and they hold no margin or position styles themselves.
- Templates set the page grid and never the position of a specific component.
- Pages render components inside a template and connect the system to the rest of the application.
A second Cheesecake Labs post disagrees on pages. It argues pages are instances of templates, not components, and belong closer to the service layer.
Shikhil Saxena (January 2026) keeps atoms, molecules and organisms under a shared UI folder and allows only interaction state there, such as isOpen or isHovered. Backend-synced data and global state stay out.
Design tokens and atoms
The Design Tokens Community Group published the first stable Design Tokens specification, version 2025.10, on October 28, 2025. Reference implementations include Style Dictionary, Tokens Studio and Terrazzo.
Terminology conflicts here. Style Dictionary’s documentation lists “atoms” as a synonym for design tokens, while Frost’s levels put HTML elements at the atom level.
Frost’s own token course is called Subatomic, which places tokens below atoms. Treat tokens as a layer that atoms consume, not as a replacement for them.
Style Dictionary, built at Amazon, turns one token source into CSS, iOS and Android output. In the design file, Figma variables can hold the same values through variables in Figma.
What does atomic design improve?
A simple form took a median 4.2 hours to code from scratch and 2 hours with IBM’s Carbon design system, 47% faster, in Sparkbox’s test of eight developers (as quoted by CSS-Tricks).
The test measured a design system’s component library, not atomic design itself, and Sparkbox counted the time developers spent learning Carbon. Keep both in mind before quoting the number.
Five of the eight developers produced more visually consistent forms with the design system.
Browser London found each pattern is built to work, and be tested, apart from the production application. Webstacks adds that a homepage, blog index and article page can share one pool of approved atoms and molecules, which speeds up building new pages.
Accessibility is the weak spot in the data. In Sparkbox’s review for web accessibility, 3 developers ranked about the same either way and 2 scored better coding from scratch.
The numbers back component reuse. Whether the five-level vocabulary adds anything beyond reuse is not something this data tests.
When atomic design stops working
It struggles on small projects, in applications where logic and data dominate the interface, and with any team that treats the five levels as a rulebook.
GeeksforGeeks says it fits large web applications and multi-platform work, and fits smaller projects, simple websites and heavily customized designs poorly.
Yan Levin (DEV Community, 2025) says it gives no clear place for business logic and points complex apps to Modular Architecture or Feature-Sliced Design.
Kevin Ross (DEV Community) describes generic TableRow and TableCell components that later tables did not fit. His fix is to keep new components internal and copy code until real cases reveal the shared pattern.
Sparkbox warns that changing one component alone can shift the perceived priority of an experience, so it adds content priority guides. Stackbit lists the effort of assembling large components from tiny blocks and the loss of guardrails for editors.
Saxena disagrees on the remedy for the logic problem. He keeps atomic design as the UI composition layer and adds a feature-driven structure beside it.
Both treat atomic design as a UI pattern, not an architecture for a whole frontend codebase.
Dan Balaban (Design Systems Collective) calls for using it as a guide, not a rulebook. He suggests grouping by function, such as one forms folder holding buttons, inputs and checkboxes.
On the plus side, reusable parts raise consistency, patterns get tested in isolation, designers and developers share one vocabulary, and new pages assemble from approved parts.
The downsides are real too:
- No guidance for business logic
- Overhead on small or simple sites
- Abstraction before anyone has real use cases
Atomic design FAQ
Is atomic design only for websites?
No. Frost’s book outline defines it as an interface design methodology, not a web-only one.
Cheesecake Labs notes that Storybook, a common companion tool, also works with React Native and Vue.
Who is responsible for atomic design on a team, designers or developers?
Both share it. Pigment’s lexicon says the design team usually holds primary responsibility on a web project.
Rules in code, such as Cheesecake Labs’ React conventions for atoms and templates, fall to developers.
How does the Atomic Design book differ from the original blog post?
The book expands the post into a full guide. According to its outline, one chapter explains why design systems matter and another defines atomic design.
Two chapters cover tools and techniques, including the interface inventory. A final chapter covers maintenance.
Is atomic design still in use?
Yes, though often as a shared vocabulary. In a Design System Leaders interview, Frost says even he does not use his own terminology in the design systems he makes.
Shikhil Saxena (January 2026) still ranks it among the most mentioned frontend patterns.
Can you build a design system without atomic design?
Yes. Atomic design is a method for creating design systems, not a requirement for having one.
A Sparkbox writer plans design system work without it and organizes components around the team’s own pain points.
Which Parts of Atomic Design to Adopt First
Teams adopting atomic design should start with the interface inventory and a shared variables file, because both pay off without a debate over atoms versus molecules. Documenting components in Storybook fits in early as well, and so do shared tokens.
Level names come last, once enough people touch the system that designers and developers need a shared vocabulary.
Skipping the names ends the molecule-or-organism arguments, but it costs you that shared vocabulary.
This order holds while the Design Tokens specification stays at its stable 2025.10 format (checked October 2026). A breaking revision would change the token step.
Teams that pass the pilot stage need ownership and upkeep rules, which design system best practices cover.
Many of his resources are available on various design marketplaces. Over the years, he's worked with a range of clients and contributed to design publications like Designmodo, WebDesignerDepot, and Speckyboy, Slider Revolution among others.
- How to Insert Image in Figma With Ease - November 3, 2026
- How to Download Figma Files Fast and Free - October 30, 2026
- Figma Keyboard Shortcuts That Will 10x Your Speed - October 25, 2026
