Atomic Design

To sum up atomic design in a nutshell: Atoms are UI elements that can’t be broken down any further and serve as the elemental building blocks of an interface. Molecules are collections of atoms that form relatively simple UI components. Organisms are relatively complex components that form discrete sections of an interface. Templates place components within a layout and demonstrate the design’s underlying content structure. Pages apply real content to templates and articulate variations to demonstrate the final UI and test the resilience of the design system.