The chemistry of a living style guide

A living style guide is the ideal, agile and futureproof tool for translating a brand image into a visual (digital) representation. Learn what it is and how we've implemented it into our offering towards our customers.

The 'coming together' of a digital project requires a close collaboration of a diverse set of team members. We're not just talking "designers" and "developers" here, but that shouldn't surprise you. We're talking the big picture: strategist, analysts, designers, developers, testers,... and the customers of course.

All of these stakeholders interact and define the final solutions we build. It often is a very fluent process that requires an efficient workflow. In the old days this was a very rigid process, but given the ever-changing nature of digital, a rigid process is not always a good idea. We need to remain agile. We also need to think future proof. What is 'only a website' today, might evolve into a platform, or a mobile app, or an app on TV, or a VR experience. Hey, look at that, we got the VR buzzword in there. Note to ourselves: ‘way to go, guys!’.

Long story short: we adapted a set of tools and methodologies that help us cope with this volatile digital world. One of these tools helps us to translate a brand image into a visual representation that can be used by all parties involved in the digital project: a living style guide.

Excuse me: a what?

 A living style guide is a single referencepoint for all project stakeholders to understand how a digital project will look, feel and act.

With this tool, the development and design teams can move at a faster pace. It allows a developer to quickly build a feature that blends in seamlessly with the rest of the project whilst remaining true to the defined visual branding.

In favor of agility, it allows a team to simply adapt rather than start completely from scratch when new features are requested, eliminating the risk of inconsistencies.

Style guides also help designers translate existing brand guidelines to the complex context of websites and apps that need to be perfect on any screen.

The same goes for the developer. This guide helps to avoid rewriting the same lines of code. Avoiding duplicate CSS makes for a cleaner code and will help to avoid mysterious bugs. In this way it also saves us time. Our living style guide is also a bootstrap for other teams to pick up, work with, and build upon.

It can also provide a referencepoint for the client. They can lean on the styleguide to implement the elements of it in other digital projects they might be working on. Due to its digital nature, they can also rest assured that the style guide is always up-to-date.

And in the end, it allows us to offer a consistent user experience towards your customers.

The approach: the chemistry of a styleguide

We’re not designing pages, we’re designing systems of components.
Stephen Hay

We implement the styleguide creation at the start of all of our new projects. The styleguide rephrases design elements into a responsive modular component set containing atoms, molecules, organisms and pages.


 Atomic design - atoms

Atoms are the core building blocks. They consist of basic items like colors, buttons and other typographic elements like headers or lists.

Atomic design - atoms - animated example



Atomic design - molecules 

Molecules are small combinations of two or more atoms. Think of a single article teaser for example.

Atomic design - molecules - animated example



Atomic design - organisms 

Organisms consist of a combination of molecules and atoms. Think of a whole header section, or a "latest blogpost" block on the homepage.

Atomic design - organisms - animated example


Atomic design - pages 

Pages form a more complete picture where combinations of organisms construct a final full page representation.

Atomic design - pages - animated example

The final result: advantages all the way

Atomic design overview 

This buildingblock methodology is nothing new of course. Many big companies work with a live styleguide. We gained a lot of inspiration from existing PHP frameworks like Patternlab, but we also found a way to seamlessly incorporate this methodology into our workflow and development environment (.NET), and we are very proud of that.

Our implementation:

  • helps our teams to perform better and deliver high quality products in an efficient manner
  • enables you, as our client, to have a clear vision on your digital representation, and to have a reference for future endeavors
  • helps your customers, since they reap the benefits from having a consistent user experience throughout all touchpoints with your company.

In the theme of "Eat your own dogfood" we prove that we're not shy of using this catchphrase. The screenshots above are taken from our own Living Style guide which we also used for the creation of this very website.

Interested in creating your own living style guide?

Don't miss out

The Reference has its office in the heart of Manhattan.
“I want to wake up in that city that never sleeps, and find I'm king of the hill, top of the list, head of the heap” – Frank Sinatra