The Brand Guideline Essentials We’ve Learned from Working with 100s of B2B Brands

Every brand has a specific aesthetic that represents it. When you see red and yellow together, you may think of McDonald’s.

When you think of purple and orange or brown and orange together, FedEx or UPS may come to mind. It’s essential for brands to stick to their trademark and make sure that it stays cohesive and consistent across the board.

As a web designer (for HIPB2B) who creates landing pages for brands from the ground up, it’s important for me to specifically construct each page around each brand style guidelines.

This includes making sure each landing page has corresponding copy and tone, color palettes, logos and images, typography, analytics, and form fields. Some brands even provide a specific style guide.

Brand style guides the composition, design, and general look-and-feel that a brand is trying to achieve. In this blog post, we’ll go over what you can find in a typical brand style guide.

Visuals

Logo

Sizing

• Adobe has specifications for their logos. Their red tag logo is reserved for Adobe use only, which means they provide a different logo for non-Adobe use. That logo also has its own specifications.
• If there is a specific maximum and minimum width your brand prefers for your logo, make sure to put this in your style guide.

Positioning

• Oracle has multiple specifications for logo positions. They prefer their logo to be placed in the footer and specify how far from the trim edge it should be.
• In my landing page template, I have two locations for logos, one in the header and one in the footer. I try to utilize multiple logo variations that reflect the brand, to make the page appear more dynamic. If you have multiple logos with multiple preferred positions, add this to your style guide.

Clear Space

• Clear space refers to the area immediately surrounding the logo, which should be free of any other text or graphics. Clear space is important in ensuring your logo has optimal visibility. Apple’s requirements on minimum clear space can be seen below.
• Including specific margins for your logo can help your logo stand out to your specifications.

What Not to Do

• Twitter covers what not to do with their logo. They know exactly what they don’t want you to do, from adding a drop shadow to containing the logo inside a shape. These are understandable specifications as they could misrepresent Twitter’s brand and brand style.
• If your logo needs to be displayed in specific colors or orientation, specify this. If you have multiple versions of your logo, specify which logo you’d prefer to be used.

(Twitter’s brand guidelines)

Colors

Palette — Hex/RGB codes and complementary colors

• Shopify’s color palette is what most brand style guide palettes look like, which include HEX codes and complementary colors. This assures that everything from secondary colors to brand colors are used and not close approximations.
• By providing your brand’s primary colors and secondary colors, your landing pages can better reflect your brand identity. Even though providing specific shades of white and grey may seem unimportant, they’re colors that are used quite a bit for the background color of the copy.

(Shopify’s style guide)

Fonts and Typography

Typography and Treatments

• Illinois College includes two font families that they use both digitally and in print. Some brand guidelines will include a primary and secondary font, with an extra font in case the first two don’t work.
• If there is a font that your brand uses frequently, provide the type name in your style guide.

(Illinois College style guide)

Font Hierarchy

• The font hierarchy describes everything from main headings to footnotes. Google’s typographic hierarchy includes several preferred different fonts and font sizes for each element.
• In your style guide, be sure to include your preferred font type and size for each element, from main headers to footnotes.

(Google Ads brand guidelines)

Graphics and Images

Many brand style guides describe the minimum and maximum width that each image should be, as well as how much clear space should surround it.

Graphics and images should also be responsive. If images should be any less than 100% width, make sure to include this in your style guide.

(USPS Digital Style Guide)

Photography

Images provide a visual representation of content. Google Ads guidelines for photography cover what sort of feeling or mood they’d like their photography to convey. They prefer to maintain meaningful authenticity. Some style guides also include how they’d like products photographed, from positioning to how much light to use.

If you’re including photographs to use in your landing page, make sure they reflect your brand and how you’d like them to be used.

(Google Ads design guidelines)

Copy

Brand Use Guidelines

The brand use policy describes how a brand would like you to reference their brand and their products.

This should be included with your legal and brand trademark guidelines.

(Liftoff Brand Guidelines)

(Instagram’s Brand Guidelines)

Tone and Voice

According to MailChimp’s style guide:

“What’s the difference between voice and tone? Think of it this way: You have the same voice all the time, but your tone changes. You might use one tone when you’re out to dinner with your closest friends, and a different tone when you’re in a meeting with your boss.

Your tone also changes depending on the emotional state of the person you’re addressing. You wouldn’t want to use the same tone of voice with someone who’s scared or upset as you would with someone who’s laughing.

The same is true for Mailchimp. Our voice doesn’t change much from day to day, but our tone changes all the time.”

In your brand style guide, specify what your tone usually is and what your voice is. Is your brand’s tone more formal or informal? The copy we write for each abstract provided should reflect your tone.

(MailChimp Content Style Guide)

(GatherContent’s Style Guide Development)

(Salesforce style guide)

Structure

IBM specifies their copy structure in order to “communicate economically and clearly.” They cover everything from sentence structure to gerunds and participles.

If your brand prefers sentences and paragraphs of certain lengths or other certain copy structure, make sure this is specified in your style guide.

(IBM developerWorks Editorial Style Guide)

Grammar

MailChimp goes very in-depth in their grammar and mechanics section, covering everything from abbreviations to punctuation to slang.

Whether it’s active or passive voice, specific abbreviations or acronyms, text formatting, or something else entirely, be sure to specify this in your style guide.

(MailChimp Content Style Guide)

In this blog post, we’ve covered the most common elements of a brand style guide. Not every element is necessary for every brand, although the more in-depth of a style guide you provide, the more true-to-brand and consistent your designs will be. This guide can be used as a checklist to assure you include everything you need in your brand style guide.