Atomic Design

Credit: Brad Frost and Matt Tyas

I’m loving the theory and practice of Atomic Design at present; where entire interfaces can be broken down into fundamental building blocks and then built back up (Atomic units > molecules > organisms > all matter in the universe).

This type of design principle can minimises subjectivity and allows interfaces to be designed / constructed in a more methodical way.

The 5 elements of Atomic Design being:


The basic building blocks of matter/web interfaces and include HTML tags (form label, input or button), colour palettes and fonts.


By combining atoms together you get molecules which start to take on their own properties and serve as the design system vertebrae (that ultimately combine into a spine). Here if you were to combine atoms (form label, input or button) you would achieve a form which is infinitively more useful than the elements in their singular atomic state.


Organisms then group / join molecules together to form a relatively complex, distinct section of an interface. An organism example would be a masthead which might consist of diverse components like a logo, primary navigation, search form, and list of social media channels. Another example would be a “product grid” that might consist of the same molecule (e.g product image, product title and product price) repeated over and over again.


Templates group and stitch organisms together to form pages and often form html wireframes where you start to see the final design taking shape.


Here the design becomes crystal clear on what the end user will actually see and where things like placeholder content gets replaced with the real thing.

More info

Video on Atomic Design 

Tim Berners-Lee talking about the related modularity 

Check out Pattern Lab to actually create Atomic Design systems

Leave a Comment