Skip to content

Design & branding

What is Atomic design?

Atomic design is a methodology for building interfaces from the smallest elements (atoms – button, field, label), through their combinations (molecules, organisms), up to templates and finished pages.

Brad Frost's metaphor organises interface thinking the way chemistry organises matter: atoms (button, icon, text field) combine into molecules (a search box = field + button), molecules into organisms (a page header), and organisms fill templates and pages.

The practical benefit: a change to an atom propagates everywhere it's used – you fix a button once, not on forty screens. It's also a shared team language: "this should be a molecule" says more than an hour of discussion.

Atomic design leads naturally to a design system and vice versa: most design systems are organised in its spirit.

Have an idea in mind? Let's talk.

Tell us about your idea and we'll recommend the best route from concept to a working product.

Get in touch