Brand recognition depends on consistency, and a style guide is the manual that helps your brand achieve and maintain that consistency, as well as a pulled-together look in general.

Usability is also helped by consistency; as an extreme example, if your menu is in a different place on each page it will be a lot more difficult for visitors to navigate. However, rigid uniformity is not desirable either. You want designs that are distinct but hang together, and a style guide tells you the bounds of the variation.

To distinguish this kind of style guide from the kind of guide you might have used to create bibliographies for term papers, they may also be called “brand guidelines,” “corporate identity guides,” or similar. Those specific to websites are increasingly being called “pattern libraries,” as they give the rules, or patterns, you follow to style each kind of website element, however it might be fleshed out on the page.

If there are multiple people creating items that represent your brand, a style guide should be created to collate all the information they need to do so: how is the business name to be written? What fonts and colors are used? What versions of the logo are appropriate for various uses? Are there CSS classes pre-created to do certain formatting in a fixed, consistent way? Colleges and universities often have extensive style guides because of the number of people in different departments – not to mention alumni associations and other groups – who are representing the school (North Carolina State University’s brand site is a good example).

If outside people might want to use your logo and other materials, a style guide is vital. For example, a credit card company will want to give “do” and “don’t” rules for the use of their logo by retailers who accept their card as payment.

However, a style guide can be useful internally no matter how small the team. I am the only person who might make pattern PDFs for my crochet designs, but I created a style guide to help me remember what I put in bold, whether and how I abbreviate certain terms, and even data like font sizes and hex color codes, in case my pattern template file were ever corrupted.

I’ve chosen some style guide creation resources and example style guides to get you going.

More Advice:

• Codrops’ “Do I Really Need a Style Guide?” aims to help you answer that question and the question “What do I put in it?”
• Intelligent Editing’s style guide article is aimed more at documents than graphics, but includes good practical thoughts about organization and how you should expect the guide to be used.
• Smashing Magazine’s “Designing Style Guides for Brands and Websites” gives some whys and a lot of hows.
• A List Apart’s “Creating Style Guides” gives practical direction for website style guides.
• Get a head start on a style guide for a new project by designing using Style Tiles, an approach that is more specific than a moodboard but less finished than a mockup.

Style Guide Utilities:

• Stylify Me pulls color, font, and image size information from existing websites, giving you a starting point for your style guide (and meanwhile showing you if you’ve accidentally used two not-quite-identical colors).
• Adactio’s Pattern Primer allows you to automate creation of a webpage demonstrating all of your styles, via a CSS file and a folder full of HTML snippets (examples of each are included, but meant to be replaced with your own).

Short and Sweet Examples:

• be.Macmillan: About Our Brand
• Clearleft Styleguide, showing HTML elements and how they ought to be used
• Channel 4 Mini Style Guide (up to date version, more thorough version, and style guides for other brands in the Channel 4 group available from Channel 4’s Identity Style Guides page)
• MailChimp: About Brand Assets

Exceptionally Thorough Examples:

• BBC GEL: Global Experience Language (look under Guidelines in particular)
• British Rail Corporate Identity 1965-1994
• The easyGroup Brand Manual (latest version downloadable from easy.com: The Brand)
• Mac OS X Human Interface Guidelines: gives visual and interaction guidelines for creating apps that blend in with OS X
• Ubuntu design, a style guide for an open source software project
• University of Cambridge brand resources: Guidelines

If you can’t get enough of style guides, check out styleguides.io, a crowdsourced collection of articles, examples, books, and utilities for style guides.

---

Photo of vintage paper doll by Patricia M on Flickr.