A guide for your business

Your website under the microscope

Brainchild of Brad Frost, the Atomic Design web-building method allows flexibility and consistency from the very beginning.

It uses ‘atoms’, ‘molecules’ and ‘organisms’ to create a website that’s completely scalable.

In chemistry, atoms are your most basic components which form everything. Buttons, fonts, search fields – these are the ‘atoms’ of your website design.


A number of atoms together form molecules. These could be heroes, alerts or search navigations. They’re still portable, and can be dropped in anywhere on your site.


Multiple molecules, or atoms and molecules together, form organisms. Think headers, footers and stack forms.


Consist mostly of groups of organisms stitched together to form pages.

When we get to this stage, we can start to see our design system coming together and our layout in action. Templates are concrete, and they provide context for all of those relatively abstract molecules and organisms. The design can evolve from wireframes to visual design comps and/or prototypes.


Specific instances of templates with actual content.

This stage has the highest level of fidelity, and it’s essential. This is our chance to test our design system’s effectiveness. Viewing everything in context allows us to loop back to modify our molecules, organisms and templates to better address the real context of the design. Here, we can also test variations in templates.

The beauty of this system? Applying changes to one atom will apply the changes throughout all atoms on your website. The same goes for your molecules, your organisms, and so on.

Millions of products, thousands of pages – with just one change at atom level, they can all be updated in an instant.

The benefits of Atomic Design

  • Saves time
  • Saves resources
  • Improves consistency
  • Sites are fully and easily scalable – up or down
  • Provides a much simpler, more seamless process for design changes
  • Creates a cohesive brand