What Is A Brand Style Guide and Why Does My Business Need One?

Your brand is the public face of your business; the “skin” that projects your company’s identity and defines how your clients, customers and partners view your business. 

A brand style guide is the primary visual DNA of your company’s branding, though it can also reference grammar, tone, word usage and point of view. Essentially, it’s a document that describes, defines and presents examples of what your brand looks like in various visual media such as print, Internet and broadcast. To be effective it must clearly define the rules around your online presence in all channels such as websites, landing pages, mobile sites, online ads, blogs, social media channels and email communications (including email signatures!).

Want help with your style guide (or lack of one)? Please fill out our Inquiry Form and we’ll respond within 12 hours. 

Too few businesses take the time to create a company brand style guide. In the absence of a unifying style guide, incorrect or inconsistent content and branding may be applied. Over time this results in mixed marketing messages that lead to confusion among your followers. It may also undermine material that is hard to retract once posted online. In the end, the brand you have worked so hard to create becomes diluted in the eyes of your target audience.

style guide examples

More Style Guide examples at the bottom of this post.

One Guide to Bind Them

It is imperative not only that you create a brand style guide, but that you keep it up-to-date and in the hands of everyone who touches your brand. If your company is like most, your brand – meaning your logo, tagline, graphics and text elements – is touched by many entities before content is delivered to the public. These entities include distinct departments within your company as well as one or more outside resources managing various aspects of online content creation and delivery. For example, a business may have one company updating website content, a marketing company working on SEO and online ads, and other companies working on social media and blog management.

To assure that your brand is handled consistently, each one of these entities must adhere to the same set of guidelines when touching your brand. Your brand style guide will accomplish this purpose. With a common style guide to bind all who touch the inner sanctum of your brand, your followers will experience a cohesive, unified marketing message across all channels. See examples of our branding work here.

Website Style Guide Essentials

The following items are just a few examples of the various formats and information you can choose to include in your brand style guide.

Logo

Define and give examples of your logo. Show how your logo should be used in various formats including full color, black and white, transparent, or on different backgrounds. You should also provide logo files for users in .png, .jpg and vector-based formats. If you have a tagline, make sure there are rules around placement, font, color and size in relationship to the logo.

Styleguide_logo

Color Palette

Provide HEX and RBG color values for each color in your palette. Include recommended color combinations. Many brands have primary and secondary color palettes to define the main colors to be used and accent colors.

colors-style-guide

Typography

Define the font families, sizes, kerning, line spacing, colors for various content types; header, sub-head, paragraph, cite, block quote, labels, form headers or any other formatted text that will be used.

Styleguide-typography

Layout

Define where and how HTML and other elements are positioned on the page and how they relate to each other. Define margins, padding, gutters or grid patterns of the overall layout as well as any specific elements if different. If necessary, provide examples of the layout to show the differences in pages or layout templates, such as landing pages, product pages and email communications.

website-layout-styleguide

Links and Buttons

Define the colors and styles for all links and buttons that will be used. Show examples and hex values for content links, sidebar link styles, submit buttons, form buttons, info buttons or any other link or button.

styleguide-website-links-buttons

Navigation 

Define the main and sub navigation styles as well as the interactivity of them. Define what happens when nested or parent/child navigation is used and show examples of how the navigation should be used and/or created.

style guide navigation example

Visual Hierarchy

Define and show examples of how headers, images, titles, paragraphs and other elements relate to each other on the page. Provide examples that define the visual hierarchy you should achieve. You can even provide a rationale of why this hierarchy is important to the look and feel of the site.

visual-hirearchy

Graphics and Icons

Define what type, sizes, file sizes, dimensions, and styles should be used for graphics and icons on your site. Do you have specific icon sets that need to be used? Show examples or have a library of graphics and icons prepared for usage. In a perfect world, your graphic designer can customize or design icons for you. That way you won’t have generic looking icons. Below are custom icons we designed for Hourglass Angel.

style guide icons example

Imagery / Photography

Photography usage is one of the most prominent components of communications. So many brands are cheapened by the usage of mediocre or unsupportive stock art or inconsistent photo usage. Define the style for use of imagery. Would you want them to be all soft focus? Is it ok to show people’s faces? Real people or stock images? Black and white or color? What kinds of people represent your target demographic? What should these people be doing? Some companies even define the type of dogs to be used based on their market research. Build a photo library and make sure to have the usage rights to all the images you use.

stockart

Does your company need any assistance in building a brand style guide? If you’d like some tips on creating your own consistent, and identifiable branding materials contact us today for a free consultation.

Sample online style guides.

These style guide examples were created by Executionists – these are smaller than actual size.

Style tile, example style guide
brand style guide example
style guide for website examples
website style tile example brand style guide
Richard Parr
by Richard Parr
Posted: June 12, 2015

estimate