Why your brand needs a style guide, and how to create one

Default avatar.
August 05, 2014
Why your brand needs a style guide, and how to create one.

Style guidesA lot of designers and creatives overlook the need for a brand style guide (also called a brand bible by some, or included as part of a brand bible) — something that gives a clear set of rules for how the marketing materials online, and off, should look.

Style guides can save you time, money, and tons of frustration down the road, making your marketing materials easier to maintain and create. Consider it like an extension of well-commented markup; it gives you instructions for exactly how things should be done, and sometimes even insight into why.

If you're not convinced you need one for pretty much every brand or company you work with, or if you're not sure how to create one, read on…

Why every brand should have a style guide

A style guide might seem unnecessary for a small company, or when there's only one designer. But really, every brand out there should have a style and branding guide to make sure that every visual element they produce is consistent.

Let's take the one designer idea first. So you're the lone designer on a project for your company. You design their logo, website, business cards, and every other bit of marketing material they need. You know all of the elements by heart.

Now, a year later the company has tripled in size, and suddenly they need to hire a second designer to handle some of your workload. You get the fun of teaching this new person all of the guidelines for the brand from memory. Including a lot of things you haven't even thought of in the past year.

And of course if something important doesn't get conveyed, they'll blame you for not properly training the new employee.

It would be infinitely easier if you could simply hand over a style guide that contains everything they need to know: colors, logo sizes and placement, fonts used, etc.

Or lets say you're a freelancer working with multiple clients. A style guide makes it easy for you to return to work you've done months or years down the road, without having to comb through your old files to figure out which exact font you used or exactly what the hex values were for certain colors. Instead, you can pull up a single file and see everything you need to know in a matter of seconds.

Style guides can also help ensure that work you've done for a brand isn't ruined by some new, less-skilled designer who doesn't understand how your design is supposed to work. The last thing you want is for your perfectly-constructed logo to be used way too small or placed too close to other elements, effectively killing its impact (or worse, having elements created with negative space be ruined entirely).

By having a style guide for every brand you work with, you'll make your job easier and your work more consistent (which results in a more professional image for all involved). Constructing a basic style guide when you're initially working on a project isn't time-consuming, yet can save hours of work and endless frustration down the road.

The basic elements

Every style guide is going to be a little bit different, as it depends on how complex a brand is, and how many different kinds of marketing materials they might have. There are a few basic elements that are likely to make an appearance in virtually every style guide, though.

Fonts

Every brand should have a consistent set of fonts being used in all of their marketing materials, online and off. Listing out these fonts, with examples and character sets, is hugely important.

fonts

Don't forget that beyond just the font faces used, you may also want to specify sizes for things like headings or photo captions. It's also a good idea to specify if any particular styles or weights within the font family shouldn't be used, if ligatures or alternate characters should or shouldn't be used, and the like.

Colors

The colors used by a brand should be spelled out with as much detail as possible. That means offering up not only hex codes for web use, but also equivalent CMYK and even Pantone color values for print. Not every color can be perfectly transferred between web and print usage, so it's a good idea to specify your preferences so that you don't end up with a color that clashes with your original design.

colors

Straight conversions of a lot of hues in RGB color space can vary drastically in CMYK without manual tweaking (certain blues commonly become muted and darker, reds may appear more orange or pink, etc.). Take the time to verify and manipulate each color space so that you get the best results possible. And be sure to verify your CMYK colors in print, not just on screen.

Logo size and placement

Generally, most logos will lose their effect if displayed too small. You may either have alternate (usually simplified) logos to be used at small sizes, or just a minimum size at which the logo should be displayed.

logos

You should also specify how much empty space needs to surround the logo so that it doesn't lose its effect. Specify whether the logo can be displayed in alternate colors (particularly if it can be displayed in grayscale), and whether it should appear only on a neutral background or if colored backgrounds are okay. Also specify whether the logo can be placed inside a border or box, and how much clear space needs to be left around it in those cases.

Icons or other imagery

If there are specific icons (or icon sets) that should be used exclusively, or specific images that are commonly used, then be sure to specify these in your guide. Including a link to the exact icon set is a good idea, since icon names are not always 100% unique and can be easily confused.

You should also specify here if only certain types or styles of imagery should be used. For example, you might specify that every photo used needs to include a specific color, or needs to have a vintage filter applied, or needs to be black and white.

Copy-writing guidelines

While not every style guide is going to need instructions on how copy should be written, it can be a good idea if your brand strives to present a certain tone in written communication.

There may be certain words or phrases that should be incorporated often, while there may be others that should be avoided at all costs (sometimes because they're strongly associated with a competitor). These are important to specify.

There might also be specific guidelines that copy should always be upbeat and positive, or professional, or make use of language that will appeal to a certain demographic.

Web-specific elements

While there are a lot of elements that carry over between print and web, there are some web-specific elements that you won't find in print materials, but that will be common online.

This would include things like button style and hierarchy or how form elements should appear. Keeping these things consistent across multiple pages (or even multiple sites) is a challenge without a clear set of rules to follow.

Other elements to consider

You may also want to consider adding guidelines for the following:

  • Brand history, vision, and personality information. This is more common in a brand bible and might be absent from a standard style guide.
  • Social media guidelines, including the types of posts that should be shared and how various branding elements should be used on social media sites.
  • Design layouts and grid standards used online and sometimes in print advertising.
  • Guidelines for other materials like brochures or business cards.
  • Examples of usage for all of the included elements.

If you want to check out examples of some inspiring style guides, check out our 20 inspiring branding guides from last fall.

How long should your style guide be?

Style guides can range from a single page to dozens of pages, depending on how complex your branding is and how many different types of marketing materials are regularly produced.

A minimalist website with a single logo design, well-defined typography and color usage, and no offline materials can likely get by with a single page worth of style guidelines.

However, a large multinational corporation with numerous divisions and marketing and advertising across many mediums is likely going to need something that resembles a book to clarify all of their usage guidelines.

In either case, your style guide should be no longer than necessary, but long enough to accurately convey all of the necessary information about the brand's visual style.

A living document

Your style guide is not set in stone. Brands evolve. New logos are created. Websites are redesigned. Marketing materials are updated. It's important to make sure that your style guides are updated alongside other updates.

middlecap

Your style guide can also help to ensure that brand updates are done in a way that's seamless and less likely to alienate your users. By looking at where the brand has been, you can point it in a direction that seems like a natural evolution, rather than a stark contrast.

Even though your style guide should be somewhat fluid and change with the times, be sure to keep old style guides to refer back to. And make sure that any changes you make to the guide are well thought out and not simply tacked on as an excuse to not follow the carefully planned guidelines that already exist.

Because style guides can change over time, it's important to make sure that everyone who needs the guide always has access to an updated version. Hosting the file on a cloud server or other central location is a good idea, as is dating or versioning the guide.

Integrating your style guide

Elements of your style guide can be integrated into a website. Including comments at the beginning of your CSS files that outline the colors and fonts used is a great way to make sure these guidelines are adhered to down the road.

A full style guide should be easily available to anyone who may be using design elements within the brand. Making it accessible on a company server or cloud service is a good idea, too. You can include a link to it within your CSS files or elsewhere if you choose (though realize that unless it's password-protected or on an internal server, that's effectively making it publicly-accessible).

Internal or public document?

A growing number of companies are making their brand style guide public. This makes sense for a few reasons:

  1. It makes it easy to get the information to the people (designers) who need it. You can just give them a link instead of having to send files or provide passwords.
  2. It adds to a sense of brand transparency.
  3. It can be useful if your brand gets media coverage, as journalists can access information about how to use your logo, etc. without having to wait for your PR department (or person) to get back to them.

Of course, if you do decide to make your brand style guide public, you'll want to make sure that it's as well-designed as any of your promotional or marketing materials. This can add undue costs and time to the creation of the guide, and make it more difficult to change down the road.

well above

A public style guide can also make it easier for other brands to rip off your branding. While nothing you do can stop someone determined to do this (short of legal action), a style guide does make it that much simpler. It eliminates steps in the process for the brand thief.

However, as long as you're confident in your brand and your business, this shouldn't be a deciding factor in whether to make your guide public or not.

Keeping the document internal can make it easier to update and change, which may be particularly important in a start-up environment. It also eliminates the need for the guide itself to be "designed" beyond making it as functional as possible. That alone can be a huge benefit to keeping it internal if you've already got designers with a heavy workload.

The point of a style guide is to simplify and expedite the design process for all involved. Make sure that it lives up to that function, whether internal or public.

Cameron Chapman

Cameron Chapman is a freelance writer and designer from New England. You can visit her site or follow her on Twitter.

Read Next

LimeWire Developer APIs Herald a New Era of AI Integration

Generative AI is a fascinating technology. Far from the design killer some people feared, it is an empowering and…

20 Best New Websites, March 2024

Welcome to our pick of sites for March. This month’s collection tends towards the simple and clean, which goes to show…

Exciting New Tools for Designers, March 2024

The fast-paced world of design never stops turning, and staying ahead of the curve is essential for creatives. As…

Web Tech Trends to Watch in 2024 and Beyond

It hardly seems possible given the radical transformations we’ve seen over the last few decades, but the web design…

6 Best AI Productivity Apps in 2024

There’s no escaping it: if you want to be successful, you need to be productive. The more you work, the more you…

3 Essential Design Trends, February 2024

From atypical typefaces to neutral colors to unusual user patterns, there are plenty of new website design trends to…

Surviving the Leap from College to Real-World Design

So, you’ve finished college and are ready to showcase your design skills to the world. This is a pivotal moment that…

20 Mind-Bending Illusions That Will Make You Question Reality

Mind-bending videos. Divisive Images. Eye-straining visuals. This list of optical illusions has it all. Join us as we…

15 Best New Fonts, February 2024

Welcome to February’s roundup of the best new fonts for designers. This month’s compilation includes some innovative…

The 10 Best WordPress Quiz Plugins in 2024

Whether it’s boosting your organic search visibility or collecting data for targeted email marketing campaigns, a great…

20 Best New Websites, February 2024

It’s almost Valentine’s Day, so this latest collection is a billet-doux celebrating the best of the web this month.

Everything You Need to Know About Image Formats In 2024

Always trying to walk the tightrope between image quality and file size? Looking to branch out from JPGs and PNGs this…