Atomic Design: Why a Corporate Style Guide is no longer needed

How can you keep your brand identity in place, while avoiding inconsistency in customer experiences? Our answer: you need to GLUE it with Atomic Design.

Companies struggling with this question typically have an international presence in different countries. They want to get their local marketing teams in various countries, aligned into using their corporate style guide. Because their brand identity is like their holy grail. But at the same time, they also want them to be able to add their local touch for their customer base. This goes beyond just language. They want a local approach, a different tone of voice or a certain differentiation with the visuals. So which methodology best suits these needs? In our experience working for companies like Carlsberg recently, that’s Atomic Design.

What is atomic design?

In 2016, a designer named Brad Frost, published his Atomic Design principles. While he was looking to construct a design system methodically, he bumped into chemistry. In the world of chemistry, atoms bond together to form molecules, which in turn combine into complex organisms, which ultimately create all matter in our universe.

So when he looked into his designs, he recognized that user interfaces are also made up of smaller components that we can break down into fundamental building blocks. This is the fundamental thinking behind Atomic Design.

The 5 levels of atomic design

Frost came up with 5 distinctive levels in Atomic Design:

  • Atoms: the basic building blocks, like a form label or a button;
  • Molecules: are a button and a form label put together giving them a specific function;
  • Organisms: molecules put together form a distinctive section of an interface, such as the masthead of a newspaper or a product grid;
  • Templates: groups of organisms that form a full page;
  • Pages: specific instances of templates. Pages show the final result with representative content to your users.

Apart from the consistency you built in for your brand identity, another huge advantage is that it allows the replication of a new or improved local website to take place in a couple of days. Rather than re- creating completely new pages from scratch.

Benefits of atomic design

So, while guarding and enhancing your corporate identity, Atomic Design also allows your local marketing teams to go ahead and create flawless local customer experiences. This improves engagement with local markets and creates happy marketing teams in your company because you allow them to apply the local look & feel to reach out to their own local market.

The key benefits that Atomic Design can give you, are:

  • Brand identity consistent in all relevant channels and markets;
  • Efficient use of marketing resources;
  • Happy marketing departments both locally and centrally;
  • Great and consistent (digital) customer experiences.

How do you implement atomic design? With glue

Next to applying the methodology of Atomic Design, you’ll also need to consider technological and organizational issues. Where do I store these components and make them accessible? How do I make sure every marketing department understands how to apply them? To help you get started we developed a framework called GLUE, an acronym for Generic Language – Local Experience. It consists of a repository to store all your design atoms, molecules, templates and pages and provides templates for the introduction, guidance and support of the framework. Special attention is giving to content production and research into local cultural and legislative differences. GLUE enables you to roll out the Atomic Design methodology rapidly and efficiently across many countries.

Are you ready to reap the benefits Atomic Design?


Get in touch to discuss how we can drive your digital success.