Living Style Guides

Feb 3, 2017 • Jonny Arnold

We’ve recently rebranded - we hope you like it! One of the difficulties when rebranding is to communicate your branding to the rest of the team. This is often done with a style guide - a beautifully crafted catalogue of design bliss, showcasing the new brand for all that it can do. But is this the right way to do it?

Style is important. You can tell I mean it because I put it in bold. The style of a website is one of the first things that you’ll take in when you see it, so it needs to give off the right message. That’s one of the reasons why we rebranded - we wanted to be seen as professional and straightforward, so we changed our brand to reflect this.

The industry-standard way of defining a style is to create a style guide. Style guides are typically the hand of the design team, and culminate in a slick document that shows off the new brand.

But there are a few issues with style guides. Firstly, they often read as a set of rules, and as we both know rules aren’t fun to follow. For this reason, style guides are often ignored.

Maintaining consistency across a company’s brand is hard. Keeping track of everywhere your brand is used is an almost impossible task. For companies with a number of websites (like us!), even maintaining consistency across several websites is hard.

With all of this in mind, we started looking for alternatives to the traditional style guide for our rebrand.

Cool stuff happens when designers and developers collaborate. During our research we found Pact Coffee’s Component Library. We immediately liked the idea of having a style guide that can be used by developers incredibly easily. Also, the website that they built to showcase the components (which is no longer online, sadly) was a great way of educating developers in how to use their styles easily.

So we did what any self-respecting team would do and copied their idea.

We’re still working on it, but you can have a sneaky peek here. We aren’t using Web Components, but our version has a couple of integration options to give the integrator some flexibility. It can be installed as an NPM package, and provides all the nice front-end resources a developer may need. Plus, because it’s an NPM package we can upgrade our sites slowly and in a relatively easy-to-predict fashion.