systems
Atomic design
Brad Frost's five-level model – atoms → molecules → organisms → templates → pages – describing how interface pieces combine hierarchically.
The canonical framework for composability (2013, still the standard reference), deliberately borrowing chemistry as its metaphor. Atoms are the smallest indivisible pieces – a label, an input, a button; in Frost’s words they “serve as the foundational building blocks that comprise all our user interfaces.” Molecules are atoms bonded into a simple functional unit – label + search input + button become a search form, something none of the three could do alone. Organisms combine molecules and atoms into distinct interface sections (a full site header). Templates arrange organisms into a page-level skeleton with placeholder content; pages fill the template with the real thing.
Frost is explicit that this isn’t a one-way assembly line: “The parts of our designs influence the whole, and the whole influences the parts” – composition is an iterative, two-way relationship, not a packaging step. The chemistry framing was chosen precisely to make the nesting-and-bonding relationship vivid, against the persistent misreading of composable as merely portable.