How to build a brand style guide that works

cover

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

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.

brand style guide

Modern, interactive brand style guide – Marvel

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 links to download your design assets like logo files, press photos and fonts (if license allows 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.

frontify logo brand guidelines

Frontify logo instructions include spacing and minimum size guidelines

logo brand guidelines

Atlassian includes quick download links for their logos

Add examples of what’s not allowed as well.

logo brand guidelines

Firebrand includes examples of bad use cases for their logo

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.

typography guidelines

Mailchimp typography guidelines

typography guidelines

Atlassian typography guidelines

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.

brand color guidelines

Marvel brand color guidelines

 color usage guide

Shopify includes an interactive color usage guide

5. Icons and illustration

There’s a huge variety of icons out there so, to keep your brand consistent, it’s important to clearly specify what is the icon style you’re using, their recommended sizes and color and use cases.

icon set guidelines

Nordnet makes their icon set easy to access

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.

illustration usage instructions

Shopify illustration usage instructions

Icon spacing instructions

Icon spacing instructions on Atlassian

 graphics instructions

Nordnet graphics instructions

6. Image styles

Images are very important in the way you communicate with your clients. They should have similar composition and subjects and visual style, that tie in with your brand voice.

Nordnet photo guidelines

Include some negative examples as well.

Sweedish Armed Forces photo guidelines

Jamie Oliver branding document shows negative examples as well

7. Branding collaterals

Include links to branding collaterals like email templates, presentation slides, document templates.

 branded templates

UCLA has easy access to their branded templates

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.

 pattern library

LonelyPlanet pattern library

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.