# Atomic design *Atomic Design, a user interface design method that breaks down elements* Source: Atomic Design is a design approach formalised by Brad Frost in 2013. It aims to create consistent, reusable user interfaces by breaking elements down into five levels: “atoms”, “molecules”, “organisms”, “templates” and “pages”. The analogy comes from chemistry: matter is built from a few simple elements, combined according to stable rules. ## Five levels, from simplest to most complete ### Atoms Atoms are the basic elements: buttons, inputs, icons, headings, but also colour, typography and spacing tokens. On their own they mean little; yet they set the visual vocabulary of the whole system. ### Molecules Atoms combine into molecules, small groups that serve one purpose: a search field with its label and button, a menu item with its icon, a simple form. ### Organisms Organisms combine molecules into a self-contained, reusable component: a site header, a list of cards, a complete form. ### Templates and pages Templates arrange organisms into a layout, without real content; pages are those same templates filled with real content. This is where you check that the system holds up against long texts, missing images or translations. ## Why adopt it This approach promotes modularity and reusability, and encourages systematic design at scale. It gives designers and developers a shared language, fits naturally with component libraries and design systems, and makes changes safer: updating an atom carries through everywhere it is used. ### The limits of the metaphor The metaphor must not become a straitjacket. The line between molecule and organism is sometimes blurred; what matters is that the team shares the same conventions for splitting and naming.