Atomic Design

Atomic design is an interface design method by Brad Frost that builds a user interface the way matter is built: small parts combine into larger ones until you reach a full page. Its aim is practical. You get consistent screens, components that can be reused, and a product that is easier to change without breaking things.

A concrete walk through the stages

Take a newsletter signup block that sits at the bottom of every article on a site.

• At the atom level you find the label “Your email”, the input field, the button, the brand color and the font size. None of them does anything alone.
• A molecule groups a few atoms into one job: the field with its label and error message, or a button paired with a loading icon.
• The organism is the whole signup block: heading, one line of copy, the field-and-button molecule, and a privacy notice.
• The template is the article layout that reserves a slot for that block, with placeholder content. You judge structure there.
• The page is the published article with its real headline, real images and real length.

Ten atoms you can spot in any interface

Atoms are easier to recognize than to define. Look at any screen and you will find: a heading style, a paragraph style, a link, a text input, a checkbox, a radio button, a button, an icon, an avatar frame and a divider. Add the invisible ones, such as color, spacing and corner radius, and you have the raw material of most design systems.

Where the stages come from, and what they are not

Frost first described the idea in a 2013 post titled “Atomic Web Design” and expanded it in a 2016 book. One line from his own site (consulted in October 2026) is worth keeping in mind: atomic design is not a linear process. The five names are a mental model for seeing an interface as both a whole and a set of parts. Nobody has to build every atom before drawing a page.

Is atomic design still relevant?

Yes, but as a way of thinking more than a rulebook. Tools have caught up with the idea: Figma has variables, components and variants, and Webflow has variables, base classes, combo classes and components. Those features make the method cheap to apply, which is probably why teams use it without always calling it atomic design.

What has changed is the layer under the atoms. Colors, spacing, type scales and radii now live as design tokens, named once and inherited everywhere. Change a token, and every component that uses it follows.

How to start: take an interface inventory

Frost suggests starting from what exists. Capture every button, heading, form and card in the current site or app, line them up side by side and count. Teams regularly find a dozen near-identical buttons, each with its own radius and a slightly different blue. Grouping, choosing and naming them gives you the first version of the library, and a persuasive exhibit for anyone who doubts the effort.

What each role gets out of it

Designers stop redrawing the same button on every screen and spend their time on use cases. Developers build each component once, with its variants, instead of maintaining copies that drift apart. Marketing and content teams assemble new pages from approved blocks without filing a mockup request each time, which is what a well-structured Webflow site is meant to allow. And product managers get more predictable timelines, since adding a screen mostly means recombining existing parts.

Where the method struggles

• Boundaries blur. Is an input with its label an atom or a molecule? It hardly matters as long as the team decides the same way every time.
• The chemistry vocabulary can put people off. Some teams keep the logic but say elements, components and sections.
• It is too heavy for a small site. A single landing page does not need five levels of documentation.
• It is more than tidy folders. Putting components in folders called atoms and molecules is not enough. Each level has to build on the one below instead of redefining its own styles.

Atomic design next to design systems and UI kits

A design system is what you ship: components, rules, documentation. Atomic design is one way to organize it. A UI kit is the ready-to-use set of visual components inside your design tool, often the starting point of a fuller system.

We cover the practical side, from Figma components to Webflow classes, in our article on atomic design and the design systems that scale. If you want to structure your components before a redesign or a new product multiplies them, that sits within our UX/UI and Product design expertise.