Atomic Design

Every website consists of parts that keep appearing again and again: buttons, input fields, headings, search bars. Atomic Design is a way of working in which you don’t reinvent these parts for every page. Instead, you build them once, cleanly, and then assemble them everywhere afterward. The name comes from chemistry: small atoms form molecules, molecules form larger structures. In the same way, tiny building blocks are combined into ever larger units here, until a complete page emerges in the end. The method was developed and named in 2013 by the web designer Brad Frost.

Why large websites don’t fall apart

An online shop quickly grows to several hundred pages. Without fixed building blocks, the buy button looks different on every third page. Sometimes it’s dark blue, sometimes a bit lighter, sometimes the text sits in a different spot. To visitors, such a page feels messy and less trustworthy.

With Atomic Design, the button exists only once. If the company changes its color, someone adjusts that single building block. The change appears immediately on all pages that use it. This not only saves time but also prevents an old version from lingering somewhere.

A second advantage concerns collaboration. Designers and programmers talk about the same parts using the same names. When someone says “product card,” everyone knows what is meant. This shared language significantly reduces misunderstandings, especially in large teams.

The five stages from button to page

The lowest stage is called atoms. These are building blocks that cannot be broken down any further: a single button, an input field, an icon. On their own, they are usually useless. An input field without a label tells no one what they’re supposed to type into it.

The second stage consists of molecules. Here, a few atoms are combined into a meaningful small unit. A search field plus a label plus a search button together form a search bar. The third stage, organisms, combines several molecules into large sections. A complete header with logo, search bar, and menu is such an organism.

The fourth stage consists of templates. They define where on a page each section sits, though still without real content. Only at the fifth stage, pages, do real texts and images come in. There it becomes apparent whether the framework still works even with a very long product name.

Design systems at Google, SAP, and in job postings

The most visible results of this way of thinking are called design systems. These are public collections of all the building blocks of a company, often including sample code. Well-known examples are Material Design from Google, Fluent from Microsoft, and Fiori from SAP. Anyone who opens such pages sees exactly the order described: first individual buttons, then assembled elements.

The principle also shows up in software tools. In Figma, a widely used design program, building blocks are created as so-called components and reused multiple times. Programmers work with very similar components in tools like React. Both sides thereby build the same structure, just in different programs.

In job postings for frontend development and UI design, Atomic Design has by now become one of the standard terms. A common misconception, however, is to understand the five stages as a rigid set of rules. In practice, teams often argue about whether something is still a molecule or already an organism. Such discussions are a waste of time, since the actual purpose is reusability, not perfect classification.