How to create a brand style guide

Creating a brand style guide is a great way of determining not just the look and feel of a business, but defining the tone and language of the overall brand. It might seem a bit daunting at first, but there are a few easy steps you can take to create a brand style guide!

What is a brand style guide?

A brand style guide, also referred to as a brand guide, defines the way in which a brand should communicate and present itself. This can be through written content, the design choices of their website, or even something as basic as using the correct logo in a word document.

For companies big or small, it is a great way to ensure that every team member understands the brand’s values so they can consistently and effectively communicate that to their clients and greater audience across all media.

You can now gather why a brand style guide is also referred to as The Bible of a brand!

Although, while it is the foundation for the brand, it is never set in stone. A brand style guide needs to reflect the brand, therefore if the brand’s values change, so does the style guide.

Before you start! Designing for digital vs print

In this day and age, creating a brand style guide for businesses means that you have to consider both digital and print mediums.

The difference between digital and print is the pretty simple;

• For measurements, digital will use px and print will use mm.
• For font sizing, digital will use px and print will use pt.
• For resolutions and sizes, digital will refer to Desktop, Tablet and Mobile screen sizes and print will refer to A5, A4, A3 paper sizes.

While you can define both web and print usage in a single brand style guide, it is something which should be clearly defined within your scope of work!

The 7 things you should include in a brand style guide

There are 7 things you should include in a brand style guide;

• Mission and Vision statements, also known as the Brand Story
• Brand voice
• Logo
• Colour palette
• Typography
• Imagery and Iconography
• Collateral material

Throughout these steps, we are going to be going through the brand style guide I helped develop for Lenscape at Xugar. If you want to check out the project, click here to see more.

Mission and Vision statements, or Brand Story

You should always start your brand style guide with their story. This introduces the brand through a mission and vision statement, while simultaneously defining the target audience and brand’s voice.

Now I know that this is a lot of points to group in the first step, however, all these elements are key in defining the brand’s identity! They can also be answered in 3 simple questions;

• What do you do?
• Why do you do it?
• Who are you doing it for?

Now let me break them all down.

A mission statement defines what the business actually does. For example;

“Lenscape is an optometrist, currently located in Manor Lakes.”

A vision statement however is why they do what they do. This often reveals the core values of the business, and therefore the overall brand. For example;

“The average customer traditionally visits their optometrist when their vision is already blurry. At Lenscape, we want to get ahead of it and prevent their vision from getting worse.”

Lastly, asking who they are targeting is key. You can’t please everyone and a design always needs to be tailored towards an audience. For example;

“As we are located in a shopping centre, we have a wide target audience due to the foot traffic. This includes 20-35 year olds who need blue light glasses for work, 40-60 year olds who need reading glasses and families.”

Brand Voice

Defining a brand’s voice is something which is answered throughout all these questions, and throughout your initial discover meeting with the client. It’s their personality and character. This is important as every asset of the brand needs to be consistent.

While you can pick up these points throughout these questions, if you are having difficulty establishing a brand’s voice, a quick and easy branding exercise is to list off a few adjectives or general descriptors of what your brand values, and a few your brand does not. For example –

Good: Educational, Ethical, Conscious
Bad: Close minded, Short of time, Wasteful

Writing down these two lists will help you expand upon your design reasoning throughout the brand style guide, but also help the business in learning how to effectively communicate the brand’s values.

Logo

The face of any branding; the logo. If you are creating a new logo, redesigning an existing one, or building a brand style guide, you should introduce the logo and share its meaning.

However, what this section should further explore is its usage. This includes;

• Arrangements: Are there other arrangements of the logo?
• Size: What is the minimum size the logo should be?
• Placement: Where should the logo be placed?
• Spacing: Does the logo require empty space around it? If so, how much?
• Colour variations and usage: Does the logo have colour variations? When should they be used?
• Lockups: If it is used in conjunction with another logo, how should it be displayed?
• The Don’ts: Ways the logo should not be used. For example: Can it be rotated, stretched or altered in any way?

Colour palette

Next comes the colour palette. Once the logo is created, then defining your colour palette is not too difficult as it has already been defined in the logo!

When defining your colours however, regardless of whether you are creating a digital or print brand style guide, you need to define your colours across both mediums as the brand presence will eventually move from one to another. Remember, consistency is key!

In the brand style guide, for each colour you should list them in;

• HEX: HEX is a digital colour system constructed of a hash (#) followed by 3 pairs of characters, representing the intensity of their RGB values.
• RGB: RGB stands for Red, Green and Blue, each value ranging from 0 to 255. This value is used for digital colours.
• CMYK: CMYK stands for Cyan, Magenta, Yellow and Key (Black), each value ranging from 0 to 100. This colour type is used for print.
• PANTONE U: This is for Uncoated PANTONE prints, like matte finishes.
• PANTONE C: This is for Coated PANTONE prints, like gloss finishes.

After picking your colours, you also need to include your tones – the lights and darks of each colour. For this, I usually use the Material Design Colour Tool to help me choose the secondary and tertiary colours. It is also a great tool to help with text legibility, showing you how black and white text will be on your colours, as well as the minimum opacity you should be displaying them at.

To discover the right Pantone colour for your chosen colours, use the Pantone Colour Finder to convert your HEX, RGB or CMYK colours to PANTONE Coated and Uncoated.

Typography

Next up is the typography, something which to many designers, may seem quite daunting. However when choosing typefaces for your brand, there are two main usages you need to consider – Headings and Body text.

Heading fonts typically are more bold and extravagant, displaying character that resembles the brand’s values that have been determined in the Mission and Vision statements.

Body fonts on the other hand should sit further down in the hierarchy with legibility being their top priority.

Once you have chosen your Heading and Body typefaces, you need to define how to use them in the brand style guide;

• Font: This defines the specific font you have chosen within the font family.
• Font weight: While this is often pre-defined within the Font’s name, like Roboto Light, when designing for digital and web, developers will easily understand this value.
• Kerning: In web design, this is also known as the letter spacing.
• Leading: In web design, this is also referred to as line height. For many fonts, the optimal line height is considered as 120-140% of the font’s size.
• Text transformation: Should headings be written in UPPERCASE, Title Case or Sentence case? Define how content should be formatted in basic scenarios common for the brand.
• Web-safe and System font alternatives: It is important to choose which web-safe and system fonts should be used when your chosen typeface is not available. Remember, for emails and 3rd-party softwares, you often cannot import/embed fonts!

There are two other points which we have not yet covered, font sizes and colours. Choosing a font’s size and colours are all dependent on the design itself. If you are creating any collateral material such as document templates or web design mockups, then it is a great addition to your brand style guide! If not, determine whether these definitions are within the scope of your project.

Imagery and Iconography

You’ll be surprised how many businesses, big or small, are using free stock photos. Some of them are good and some of them… not so much…

With so many stock photo libraries out there, both paid and free, you want to make sure that any photo selected is consistent with the brand and matches their values and overall aesthetic!

Defining the brand’s imagery is essentially creating a mood board of images. After selecting a few images, in the brand style guide it is great to describe what others should look for when choosing images;

• What is the lighting like?
• Should they be monochromatic or should a colour treatment be applied?
• If there are faces, what feelings should the characters be emoting?

The same goes for icons. If there is an icon library, advise them where they can find them, if not, find a few icons that best suit the brand. Other points to note on;

• Should they be monochromatic or should a colour palette be applied?
• Should they be used for navigational items?
• How large can they be displayed?

Collateral Material

This is a great way that you can upgrade your project and build a brand style guide that can be commonly referred to for other designs in the industry. Get their files ready so that their assets can be visually consistent. Templates, templates, templates!

• Collateral print material
  • Business cards
  • Brochures
  • Advertising Material
• Collateral digital material
  • Email footers
  • Global web elements (Buttons, Text Fields, Navigational elements)
  • Social Posts
• Global collateral
  • Icon sets
  • Photo shoot
  • Document templates (Word, Pages, inDesign, Google Docs/G Suite)

Now, go create your brand style guide!

Now begins the fun part – go out and create your brand style guide! Whether it is a short document or hundreds of pages long, this will be the foundation of how the brand and their team will present themselves. It all depends on the scope of the project and the needs of the business!