What is atomic design?
Atomic design is a methodology for creating design systems developed by Brad Frost. It borrows from chemistry the idea that matter is composed of atoms that combine into molecules, which combine into more complex organisms. Applied to interface design, atoms are the smallest indivisible elements: a button, an input field, a label, an icon. Molecules are simple combinations of atoms that form functional units: a search field combining an input atom and a button atom. Organisms are complex components made of molecules and atoms: a navigation bar, a product card, a form section. Templates are page-level layouts showing how organisms fit together. Pages are specific instances of templates with real content.
Why is atomic design useful for design systems?
Atomic design provides a shared vocabulary and structure for teams building design systems. By agreeing on which elements are atoms, molecules, and organisms, designers and developers can communicate precisely about components and their relationships. The hierarchical structure also makes it clear where a new component should live in the system and what it should be built from. Building organisms from molecules and molecules from atoms enforces consistency at every level of the hierarchy because all higher-level components are composed of the same lower-level elements.
How does atomic design relate to component libraries?
A component library organized according to atomic design principles groups components by their level in the hierarchy, making it easier for teams to find and understand the relationships between components. When a designer needs to update a button style, they update the atom and the change propagates through all molecules and organisms that contain it. When a developer needs to build a new page, they can assemble it from existing organisms and templates rather than building from scratch. This composability is the primary practical benefit of applying atomic design principles to a component library.