--- title: "Atomic Design" url: "https://www.insideuxdesign.com/en/glossar/atomic-design" language: "en" description: "What is Atomic Design? Brad Frost’s five stages explained in plain language, with an example and practical tips. Learn how to build UIs from components." published: "2026-10-14T15:20:01+02:00" updated: "2026-10-14T15:20:01+02:00" --- # Atomic Design Atomic Design is a method for building user interfaces from small, reusable building blocks, from single elements like buttons all the way up to complete pages. - **Buchstabe:** A - **Englischer Begriff:** Atomic Design UX glossary · engl. Atomic Design # Atomic Design Atomic Design is a method for building user interfaces from small, reusable building blocks, from single elements like buttons all the way up to complete pages. Imagine an online shop that has grown over a few years. By now it has eleven different buttons, three versions of the search field and two kinds of product cards. Nobody knows which one is the right one anymore, and every new page gets designed almost from scratch. Atomic Design is a way out of exactly this mess. ## Explained simply Atomic Design is a method for building user interfaces from small, reusable building blocks. Think of a box of Lego bricks: you can build a house, a car or a spaceship. The bricks stay the same. Only the way you combine them changes. The method comes from the American web designer Brad Frost. He presented the idea during a website project in 2013 and described it in detail in his 2016 book “Atomic Design”, which you can read online for free. The name is borrowed from chemistry: atoms combine into molecules, and molecules into larger organisms. Just as all matter can be traced back to a limited set of elements, an interface can be traced back to a limited set of basic building blocks. ## The five stages - **Atoms:** the smallest elements, such as a label, an input field or a button. Break them down further and they lose their purpose. - **Molecules:** simple groups of atoms that do one job together, for example a search form made of a label, an input field and a button. - **Organisms:** larger sections built from several molecules, like a website header with logo, navigation and search. - **Templates:** page layouts that arrange organisms and show the structure of a page, much like a [wireframe](https://www.insideuxdesign.com/en/glossar/wireframe). - **Pages:** templates filled with real content. This is where you see whether the system holds up with long names, missing images or lots of entries. One important point: Frost describes Atomic Design, in essence, not as a process you work through step by step but as a mental model. You look at an interface as a whole and as a collection of parts at the same time. You can read more in [What Is Atomic Design?](https://www.insideuxdesign.com/en/blog/what-is-atomic-design). ## An example Back to the online shop. Before, the team designs every category page on its own. When the button color changes, someone has to go through twenty screens and still misses a few. After, there is a single button as an atom. The product card is a molecule made of image, title, price and that button. The product grid is an organism made of many cards. A change to the button shows up everywhere, and new pages come together faster because the team combines existing blocks instead of starting over. ## Common misconceptions Atomic Design isn’t the same thing as a [design system](https://www.insideuxdesign.com/en/glossar/design-system). A design system includes components but also rules, tone of voice and documentation. Atomic Design is one way to organize the components inside it. You also don’t have to adopt the chemistry terms. What matters is the idea of thinking from small to large. ## In practice - **Start with an inventory.** Collect screenshots of every button, form field and card. Duplicate variants jump out right away. - **Test components with real content.** A card that looks great with placeholder text can fall apart with a long product name. - **Start small.** A few well maintained components do more than a huge library nobody uses. [Design Systems for Small Teams: When They Pay Off and How to Start Small](https://www.insideuxdesign.com/en/blog/design-systems-for-small-teams) shows how. ## Related terms [Design System](https://www.insideuxdesign.com/en/glossar/design-system), [Wireframe](https://www.insideuxdesign.com/en/glossar/wireframe), [Prototype](https://www.insideuxdesign.com/en/glossar/prototype), [Gestalt Principles](https://www.insideuxdesign.com/en/glossar/gestalt-principles) ## Sources - [Brad Frost: Atomic Design, Chapter 2: Atomic Design Methodology. Brad Frost, 2016](https://atomicdesign.bradfrost.com/chapter-2/) - [Brad Frost: Atomic Design, Foreword. Brad Frost, 2016](https://atomicdesign.bradfrost.com/foreword) ## More terms [ ### A/B Testing An A/B test is an experiment that shows two versions of a page or element at the same time to randomly split groups of visitors. It lets you decide with real data which version works better. ](https://www.insideuxdesign.com/en/glossar/a-b-testing) [ ### ARIA ARIA is a W3C standard that adds roles, states and properties to HTML. It tells screen readers what an element is and how it currently behaves. ](https://www.insideuxdesign.com/en/glossar/aria) [ ### Accessibility Accessibility means designing websites, apps and digital documents so that everyone can use them, including people with visual, hearing, motor or cognitive disabilities. ](https://www.insideuxdesign.com/en/glossar/accessibility) [ ### Affordance An affordance describes what action an object makes possible and whether people can recognize it: a button invites you to press it, a handle invites you to pull. ](https://www.insideuxdesign.com/en/glossar/affordance) [ ### Alt Text Alt text is a short text version of an image, stored in the HTML alt attribute. Screen readers read it aloud so people who can’t see the image get the same information. ](https://www.insideuxdesign.com/en/glossar/alt-text) [ ### BFSG The BFSG, Germany’s Accessibility Strengthening Act, has required many companies since 28 June 2025 to make certain products and digital services, such as online shops, accessible. ](https://www.insideuxdesign.com/en/glossar/bfsg) [ ### Card Sorting Card sorting is a research method in which people sort terms written on cards into groups. It shows you how they mentally organize content, so you can plan navigation that makes sense to them. ](https://www.insideuxdesign.com/en/glossar/card-sorting) [ ### Cognitive Load Cognitive load is the mental effort it takes to understand and use an interface. The less unnecessary thinking a design demands, the easier the actual task becomes. ](https://www.insideuxdesign.com/en/glossar/cognitive-load) [ ### Color Vision Deficiency A color vision deficiency means someone has a harder time telling certain colors apart than most people. The most common type is red-green deficiency. ](https://www.insideuxdesign.com/en/glossar/color-vision-deficiency) [ ### Contextual Inquiry Contextual inquiry is a research method where you observe and interview people in their real work environment. It shows you how they actually get tasks done, not just how they describe it. ](https://www.insideuxdesign.com/en/glossar/contextual-inquiry) [ ### Contrast Ratio The contrast ratio describes how much two colors differ in brightness, such as text and background. WCAG requires at least 4.5:1 for normal text. ](https://www.insideuxdesign.com/en/glossar/contrast-ratio) [ ### Conversion A conversion is a desired action on a website or in an app, such as a purchase or a signup. The conversion rate shows what share of visits leads to one. ](https://www.insideuxdesign.com/en/glossar/conversion)