How to build a brand style guide that works

posted on November 5, 2017

Even for a small company, a brand style guide – a document that contains guidelines about how your brand should be presented, from logo to colors, to typography, images and tone of voice – can be really useful by helping you save time spent creating design assets, staying consistent and always looking professional to your clients.

Brand style guides have a long history in design, dating back to the beginnings of professional corporate identity design over a century ago, during the industrial revolution. Over time they have evolved from printed paper books to fully-interactive web applications.

NASA Brand book, mid 1970s

Modern style guides include a more varied type of information compared to early ones. Besides the usual logo, typography, and brand colors guidelines, it’s quite common for web-focused companies to include in their style guide also code snippets for common elements like forms, buttons, overlays, modules and more, creating what’s known as a code pattern library, based on popular design systems concepts like Atomic design.

Style guide design best practices

While you can include pretty much what you want in your style guide these days, for people to actually use it, you need to:

Make it easy to create and maintain

One of the biggest reason most companies today don’t have a brand style guide is that they can be time-consuming to create. Here’s how to get around that:

Start small, by including only the essential blocks, and add more information to your style guide as your team grows or you start spotting inconsistencies in the way your brand is presented. Generally speaking, the bigger your company is and larger the number of external partners that need to use your branding materials, the more detailed your branding style guide needs to be.

Build a living style guide that you can grow over time by using an online service like Frontify or OpenBrand or if you have an in-house development team, use an existing tool or build your own custom solution, specific to your needs.

Make it easy to use

A style guide document is a tool. Its purpose is not to admire the designer’s work or how clever the brand concept is, the purpose is to open it, get what information you need then get out in a short time as possible. Here are some tips to make sure your brand document is easy to use:

Use a simple structure with clearly labelled navigation, add search functionality if your document is big

Host it online for easy access. A lot of companies like Marvel and Shopify have their brand style guide freely accessible online. Consider taking a similar approach instead of hiding it behind passwords. The easier it is to access, the more people will use it.

Use visual examples instead of text to show proper usage of your brand assets. Include negative examples as well to cover common errors.

When adding instructions, keep them short and to the point.

Make sure the design is functional, easy to read and scan, avoid overly-complicated or clever designs. Keep it plain and simple with a focus on the content.

Getting started with your brand style guide

When starting out your style guide document, the most important guidelines it should contain are:

Brand positioning

Logo use cases

Typography details

Color scheme

Icons and illustrations styles

Achieving consistency in these areas alone can make a huge difference in the way your company is perceived by your clients.

Other important elements to include are:

Image style

Web elements

Branding collaterals

Tone of voice

1. Brand positioning

Add a short intro to describe what your brand is (and is not). A useful exercise is to think of your brand as a person – what is the personality of your brand? Fun or serious, spontaneous or meticulous, friendly and personable or corporate and professional? The answers to these questions are the foundation of your whole brand. Try to be as concise as possible and write in an easy to understand style that people will actually read.

Adobe describes their brand personality clearly

2. Logo guidelines

Show how you want your logo to be used (relative size on a document, positioning, spacing around it) and what are the allowed modifications. Be sure to include links to the files for quick downloading.

3. Typography

Describe typography best practices, like recommended font sizes for different settings, what font and weight to use for headers and body text. Make sure to include a link to the font files as well, for easy access.

4. Color scheme

Add your color scheme in different format like HEX, RGB and Pantone (if you have printed materials.) Also, make sure the color code is easy to copy. It’s a good idea to clearly describe the use case for each color as well and how they can best be combined together.

If using illustrations or other types of graphics, add guidelines for using them and for creating new ones. This way newly created illustrations will fit in with the rest of your design assets and external designers you might hire have an easier time understanding your brand.

7. Branding collaterals

8. Web-specific elements

For companies that do most of their business online, their website is a very important marketing tool that needs to be constantly updated and improved. To make sure the new additions are seamless, best practices are to develop a detailed catalogue of commonly used design patterns within the website, like button styles, modal windows, forms, content blocks. This way adding new pages is much quicker and the overall design is consistent.

Conclusion

A brand style guide is not just for big companies, small companies can see great benefits from using one as well. It can help you save time, present your brand in a consistent, professional manner and quickly onboard new members of your team. To make sure a style guide is successful, make sure it’s easy to update and access and it’s built on a flexible platform that allows it to grow with your company.

Did you enjoy this article?

Sign up to receive updates about business website design best practices.