Atomic design in 2026: what still works and what teams change
Brad Frost's five stages explained, where they came from, the critiques that stuck, and how teams adapt the model in Figma and React.
In 2023, Brad Frost gave a conference talk titled "Is Atomic Design Dead?" His answer was no, but when the creator of a method has to ask the question on stage, the method has reached an interesting age. More than a decade of real teams has shown which parts carry weight and which were scaffolding.
Atomic design is a methodology for building interfaces as a hierarchy of five stages: atoms, molecules, organisms, templates, and pages. Brad Frost introduced it in a blog post on June 10, 2013, and expanded it into the book Atomic Design, copyright 2016. Its core idea is that you design the parts and the whole at the same time, moving between small components and real pages.
Key takeaways
- Atomic design has five stages: atoms, molecules, organisms, templates, and pages, borrowed loosely from chemistry.
- Brad Frost says the stages are a mental model for moving between parts and wholes, not a linear five-step process.
- The most common critique is that the line between a molecule and an organism is hard to draw consistently.
- Pattern Lab, the tool Frost built with Dave Olsen for atomic design, has its Node repository archived on GitHub as of October 2026.
- Teams that keep atomic design usually keep the hierarchy and rename the levels to words their colleagues already use.
What are the five stages of atomic design?
Frost's book defines each stage by what it does, not by its size.
- Atoms are the basic building blocks, such as labels, inputs, and buttons, that cannot be broken down further without losing their function.
- Molecules are small groups of atoms that work together as a unit, such as a search form made of a label, an input, and a button.
- Organisms are larger, distinct sections of an interface, such as a site header or a product grid, built from molecules, atoms, or other organisms.
- Templates are page-level layouts that place components in context and show the content structure, without final content.
- Pages are templates filled with realistic content, which test whether the system holds up against real data.
The last two stages are the ones teams forget. In the original 2013 post, Frost presents pages as the place where you see whether the system actually works with real content.
Where did atomic design come from?
Frost's June 2013 post compared interfaces to matter: atoms bond into molecules, which combine into more complex organisms. The same post introduced Pattern Lab, a tool he built with Dave Olsen for creating atomic design systems.
The book followed. Its five chapters cover designing systems, the methodology itself, tools, workflow, and maintaining design systems, and the online edition carries a 2016 copyright. In chapter 2, Frost is careful about the metaphor. He notes that chemical atoms can be split further, that stakeholders may find the chemistry terms confusing at the template and page level, and that teams can rename the stages as long as the names help people communicate.
Tooling has moved on. The Node version of Pattern Lab is archived on GitHub, and its last tagged release, v6.1.0, dates from December 2023. Many teams now do the same job with Figma libraries and a component workshop such as Storybook.
What holds up in 2026
Three ideas from atomic design have aged well, whatever a team calls its levels.
- Build systems, not pages. Composing pages from reusable parts no longer needs arguing for.
- Parts and whole at the same time. Frost's point that the stages are not sequential is the most useful sentence in the method. Teams that design atoms in isolation for months ship components nobody needs.
- Real content as the test. Templates and pages exist to break your components with long names, empty states, and missing images. It is still the cheapest QA available.
Teams that design atoms in isolation for months ship components nobody needs.
What are the common critiques of atomic design?
The critiques are mostly about naming and classification, not about the idea of composition.
Molecule or organism?
In 2015, Alla Kholmatova wrote about how her team struggled to decide whether a component was a molecule or an organism. Frost responded with a rule of thumb: break the component down and look at what remains. If the pieces are basic elements such as an image, a heading, or a button, it is a molecule. If the pieces are themselves components, such as cards or share lists, it is an organism. The rule helps, but teams still spend meetings on edge cases.
Labels that outlive their usefulness
In a November 2025 article for Qt, Peter Rohles reported that Frost told him by email that the specific labels were never the point and that his team does not really use them, though he still finds them useful as a mental model. Many teams reach the same place: they keep the hierarchy and drop the chemistry.
Rigid folder structures
Codebases that mirror the five levels as folders (atoms/, molecules/, organisms/) force a reclassification every time a component grows. A button that gains an icon and a dropdown has not changed its job, but it may change its folder.
How teams adapt atomic design in Figma and React
The practical adaptation is to keep three levels for components, keep templates and pages as examples, and sort components by job rather than size. Use the three-question sort below whenever a new component shows up.
The three-question sort
- Does it do one job with no child components? It is a primitive (atom):
Button,Input,Badge. - Does it combine primitives into a reusable unit that works in many places? It is a composite (molecule):
SearchField,FormRow,Card. - Does it own a region of the screen or a slice of data? It is a section (organism):
AppHeader,DataTable,PricingGrid.
| Atomic stage | Common rename | In Figma | In React |
|---|---|---|---|
| Atoms | Primitives, foundations | Base components bound to variables | Small components and tokens |
| Molecules | Composites | Components with nested instances | Components that accept children |
| Organisms | Sections, blocks | Components with slots | Feature components with their own data |
| Templates | Layouts | Example screens | Route layouts |
| Pages | Examples | Filled example screens | Stories with realistic data |
Figma made the organism level easier this year. Its plugin API update of June 10, 2026 announced the general availability of slots, and Figma's help center explains that slots let designers add and rearrange content inside an instance while it keeps receiving library updates, and that variants remain the tool for states and sizes. In React, the equivalent move is composition: a Card that accepts children instead of a growing list of props.
Where Pegasus fits
Pegasus gives you the parts of the hierarchy that are expensive to build and leaves the naming to you. Below the atom level, it ships 470 design tokens as Figma variables for color, type, spacing, radius, and shadow, in light and dark modes. Above that sit 1,540 components with Auto Layout throughout, and 84 example templates, including landing pages, dashboards, native app screens, and sign-up and login flows, which play the template and page roles.
The Figma library and the React code use the same component names and the same variant structure, so whichever hierarchy you choose applies to both surfaces at once. Storybook ships with stories and tests for the components. A local MCP server exposes the component catalog to clients such as Claude Code and Cursor, so AI tools assemble pages from your existing components instead of inventing new ones.
FAQ
What is atomic design in simple terms?
Atomic design is a way to build user interfaces from small, reusable parts. Brad Frost defined five stages: atoms such as buttons and inputs, molecules such as a search form, organisms such as a header, templates that arrange components into layouts, and pages that fill templates with real content.
Who created atomic design and when?
Brad Frost created atomic design. He introduced it in a blog post published on June 10, 2013, and expanded it into the book Atomic Design, which carries a 2016 copyright and can be read online at atomicdesign.bradfrost.com. He also built Pattern Lab with Dave Olsen as a tool for creating atomic design systems.
Is atomic design still relevant in 2026?
Its core ideas are. Composing pages from reusable components, working on parts and wholes together, and testing with real content remain standard practice. What teams often drop is the chemistry vocabulary and the folder structures that mirror it. Frost argued in a 2023 talk that atomic design is not dead.
Sources
- Atomic Web Design, Brad Frost (2013)
- Atomic Design, chapter 2: Atomic Design Methodology, Brad Frost (2016)
- Is Atomic Design Dead?, Big Medium (2023)
- Making sense of atomic design: molecules and organisms, Brad Frost (2015)
- Atomic design systems: why the labels don't matter, Qt (2025)
- patternlab-node repository, Pattern Lab (2026)
- Updates for 2026-06-10, Figma Plugin API (2026)
- The difference between slots, instance swaps, and variants, Figma Help Center (2026)
One system. In Figma and in code.
Pegasus ships 1,540 components, 470 tokens, matching React code, Storybook, and a local MCP server. $149, one-time.
Get the full system