Complete the lesson quiz and earn 250 XP.
In 2013, web designer Brad Frost introduced Atomic Design, a mental model and structural methodology for crafting scalable design systems inspired by natural chemistry.
In the physical world, all matter is composed of atoms that bond together into molecules, which combine into complex organisms. Similarly, digital user interfaces are constructed from a hierarchical taxonomy of modular components:
Atomic Design bridges the gap between abstract design tokens and concrete production applications, establishing a shared language for designers and software engineers.
Atoms are the foundational, indivisible elements of a user interface. They cannot be broken down further without losing their functional identity:
#3B82F6), typography styles, raw input fields, buttons, icons, avatars, and labels.Molecules are relatively simple groups of UI atoms bonded together to function as a single unit:
Combine three distinct atoms:
<input type="text">)<button>)Individually, these atoms are inert. Bonded together, they form a Search Form Molecule with a clear, single purpose: submitting a search query.
Molecules are designed for high reusability across headers, footers, sidebars, and empty states.
Organisms are relatively complex, distinct UI sections composed of groups of molecules, atoms, and sometimes other organisms:
With templates, Atomic Design shifts from the chemistry metaphor to page construction:
Pages are specific, concrete instances of templates populated with authentic production text, images, and live data feeds:
Pages test the structural integrity of the design system under realistic edge cases:
By populating templates with real data, teams validate whether the underlying atoms and molecules hold up in the real world.