The Brand Guideline Essentials I’ve Learned From Working With 100s of B2B Brands
Every brand has a specific aesthetic that represents it. You may think of McDonald's when you see red and yellow together.
FedEx or UPS may come to mind when you think of purple and orange or brown and orange together. Brands must stick to their trademark and ensure it stays cohesive and consistent across the board.
As a web developer who creates landing pages for brands from the ground up, I need to construct each page around each brand style guidelines specifically.
This includes ensuring 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 feels a brand tries to achieve. In this blog post, we’ll review what you can find in a typical brand style guide.
VISUALS
Logo Sizing
- Adobe has specifications for its 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 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.
Logo Positioning
- Oracle has multiple specifications for logo positions. They prefer their logo 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 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.
Logo Clear Space
- Clear space refers to the area surrounding the logo, which should be free of other text or graphics. Clear space is important in ensuring your logo has optimal visibility. Apple‘s requirements for 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 its 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 style.
- Specify if your logo needs to be displayed in specific colors or orientations. If you have multiple versions of your logo, specify which logo you’d prefer to be used.
Colors
Palette — Hex/RGB codes and complementary colors
- Shopify’s color palette is what most brand style guide palettes look like, which includes HEX codes and complementary colors. This assures that everything from secondary colors to brand colors is used and not close approximations.
- By providing your brand’s primary 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 used quite a bit for the background color of the copy.
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.
Font Hierarchy
- The font hierarchy describes everything from main headings to footnotes. Google’s typographic hierarchy includes several preferred fonts and font sizes for each element.
- In your style guide, include your preferred font type and size for each element, from main headers to footnotes.
Graphics and Images
Many brand style guides describe the minimum and maximum width of each image and how much clear space should surround it.
Graphics and images should also be responsive. If images should be any less than 100% width, include this in your 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 include photographs to use in your landing page, make sure they reflect your brand and how you’d like them to be used.
Copy
Brand Use Guidelines
The brand use policy describes how a brand would like you to reference its brand and its products.
This should be included with your legal and brand trademark guidelines.
Tone and Voice
According to MailChimp’s style guide:
“What’s the difference between voice and tone? Think of it this way: You always have the same voice, but your tone changes. You might use one tone when you’re out to dinner with your closest friends and another when you’re 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 scared or upset as you would with someone who’s laughing.
The same is true for Mailchimp. Our voice doesn’t change much daily, but our tone changes constantly.”
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.
Structure
IBM specifies its 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 structures, make sure this is specified in your style guide.
Grammar
MailChimp goes very in-depth in its grammar and mechanics section, covering everything from abbreviations to punctuation to slang.
Be sure to specify this in your style guide, whether it’s active or passive voice, specific abbreviations or acronyms, text formatting, or something else entirely.
In this blog post, I’ve covered the most common elements of a brand style guide. Not every element is necessary for every brand, although the more in-depth 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 ensure you include everything you need in your brand style guide.
Let me know what you think:
- Do you have a set of brand style guidelines?
- Do you cover all of these variables in your style guide?
- Did we miss a brand styling variable?
