Atomic design

Atomic design is Brad Frost's 2013 methodology for breaking an interface into five layers: atoms (a label, an input, a colour), molecules (a search field), organisms (a header), templates (page layouts) and pages (templates with real content). It gave the industry a shared language for components — before it, every team invented its own.

Few teams enforce strict atom-molecule-organism naming today, but the layered thinking survives in every modern design system — Material, Carbon, Polaris, Atlassian — even when the layers are renamed "primitives", "elements" and "patterns". The framework's other gift was the idea that components compose, which underpins how Figma libraries and React component libraries are structured. We use the same layering when we build design systems for clients.

Related: Design system · Component library · Pattern library · Foundations