Creating a styleguide and keeping it up-to-date should not be a hassle and take extra work from your daily tasks, other resources or block other teams. Here's how we created ours and launched it.


Before we created a styleguide we did rely on sending screens through Invision, Zeplin or sometimes even just a screenshot in Slack. This meant that across the company teams all had their own interpretation of the visual and brand style. As we did progress and started to redesign our logo it was time to make it easier for the whole company to access these resources, colours and stay aligned with the new brand.

Our very first styleguide was a simple page in Conflurence, featuring a download to all the logos, colours and a short list of do's and don'ts. We realised that mainting this page would be a struggle but we also did not have the development resources to build our own guide such as IBM, UK Government, Dropbox, Material Design and others to name a few.

Our very first styleguide, a few simple pages in Conflurence with images to illustrate examples

This was a great first step towards creating a styleguide. Although we realised that updating the page was cumbersome and even accessing the page proved to be a bit of a hassle.


Making it real

While we had our mini-styleguide it sort of was just a static place with little information, that is until we were discussing styles in the app team with the devs and saw this open source project, Catalog. (Thank you, Abhi!) This project aims to solve all the pain points mentioned above, and more.

Benefits of Catalog (Source: https://www.catalog.style)

After seeing Catalog's live demo I was convinced that this would be the way to go forward. Since it would not require any additional work from developers, or spend extra time designing our own custom styleguide page, we decided to set it as one of our quarterly design targets to see if this would be the solution for us.

To get it started all we had to do is purchase our domain, a hosting package and install Catalog through NPM.

The installation did prove to be a bit of a challenge, but with a decent documentation and some tinkering with the CSS to match our branding we had our first and real styleguide online:

And here it is! 🥳Our lovely styleguide homepage! (https://styleguide.holidu.design)

Using Catalog meant adding pages, entries and new images was as simple as editing markdown in the desired .MD file. This means that anyone could write a create, edit and update pages with absolutely no development effort needed.

Having this fast way to create a documentation, it was extremely fast to start writing pages for almost each important component of the website.

Left to right: FORM.MD (Atom) to Styleguide (Safari)

The benefits of having a styleguide

One of the biggest benefits was, that we finally had a simple URL to share with everyone, making the styleguide accessible with no clicking around a cluttered wiki page.

On the other side, the developers did really appreciate the fact that they now have one central place to reference styles, colours, borders and components instead of having to write a slack message to a designer or even create something from scratch.

Summary

Using a styleguide you can have a quick and effective way of communicating design specifications across multiple teams.

  • Easy to maintain
  • Helps both designers & developers stay aligned across teams
  • Brand consistency and trust increases

Here's a collection if you also want to get started with creating your own styleguide

Living Style Guides for Digital Products
With Catalog you combine design documentation with real, live components in one single place, making collaboration between designers and developers seamless.
Sketch tips & plugins to improve the accessibility of our designs
On Thursday we went to the Munich Google offices to speak about how designers can ensure accessibility in their designs, during the Sketch Meetup. It’s a common misconception that only developers can influence accessibility when building digital products, but that’s not the case. Also, designers ca…