Atomic Design: building a design system from atoms to pages

Atomic Design is a method proposed by Brad Frost for building interface systems level by level, borrowing its metaphor from chemistry.

Five levels

Atoms are the smallest elements such as buttons, labels and inputs. Molecules combine atoms into functional groups, for example a search box made of a label, an input and a button. Organisms are more complex clusters such as a header. Templates arrange organisms into page layouts, and Pages are templates filled with real content to test in practice.

The value it brings

This way of thinking helps reuse components, keep things consistent and lets teams discuss at the right level of detail. It is a mental model, not a rigid process, so it can be adapted to each product.