Brad Frost's Atomic Design Methodology

In 2013, web designer Brad Frost introduced Atomic Design, a mental model inspired by chemistry for creating modular interface design systems.

Atomic Design organizes user interfaces into five progressive stages:

1. Atoms: The basic visual building blocks that cannot be broken down further without losing their meaning (Buttons, Inputs, Icons, Colors, Labels).
2. Molecules: Simple groups of UI atoms functioning together as a unit (a Search Input + Search Button + Label).
3. Organisms: Relatively complex, distinct UI sections composed of molecules and atoms (a Site Header bar, a Product Card Grid, a Checkout Form).
4. Templates: Page-level wireframe scaffolds that establish layout structure and content hierarchy without actual production data.
5. Pages: Specific instances of templates populated with real text, images, and user data to test edge cases.