Designing Style Guidelines For Brands And Websites


A website is never done. Everyone has worked on a project that changed so much after it launched that they no longer wanted it in their portfolio. One way to help those who take over your projects is to produce a style guide.

Edward Tufte once said: “Great design is not democratic; it comes from great designers. If the standard is lousy, then develop another standard.” Although there’s no stopping some clients from making their website awful, by creating a style guide, you’re effectively establishing rules for those who take over from you.

Why Create A Style Guide?

  • You’ll have an easy guide to refer to when handing over the project.
  • Makes you look professional. They’ll know you did everything for a reason
  • You maintain control of the design. When someone does something awful, you can refer them to the document.
  • You avoid cheapening the design, message and branding.
  • Forces you to define and hone your style, making for a more cohesive design.

Branding Guidelines: What To Include?

Strategic Brand Overview

This should be short and sweet. In as few words as possible, make clear the vision for this design and any keywords people should keep in mind while designing. Most people will probably flip straight to the picture pages, but they may read a few sentences here.

Brand Essence: At the heart of our identity is our essence, encapsulated in the phrase ‘Creating Space to Grow’. This is not only about the Kew organisation, but also about the people who have contact with it and its work. Escape. Enrich. Enlighten. Enjoy. These are at the core of what we’re about. We represent the opportunity to escape from everyday worries, enrich the mind in a beautiful place, become enlightened about the natural world and, not least, enjoy ourselves in a unique environment. These are the benefits that everyone who engages with Kew can hope to experience. The focus of our identity is on science and conservation. To help communicate this we have created a consumer facing strapline – Plants People Possibilities. It defines what the brand stands for, ensuring consistency and credibility for all our key stakeholders and acting as an anchor for all communications and activities around the brand.1
See Kew’s branding guidelines2.

Kew uses strong photography in its “brand essence” message, with a few paragraphs that both inspire and define the brand. Even if you read only the first sentence, you get a sense of what it’s trying to do. While Kew has quite a few of these message pages, they are intertwined with beautiful photography that themselves define the photographic style and primary message.


For print and Web, most brands revolve around the logo. Make sure you provide logo variations and clarify minimum sizes.

Cunard logo options3
See Cunard’s branding guidelines4.

Cunard provides many variations on its minimum sizes. Because its crest can be displayed either on its own, with the name or with the tagline, specifying minimum sizes is important for legibility (for example, if the logo with the tagline is too small, it will be illegible).

Correct usage of the logo: The Think Brick logo has been specially designed as a unit and must not be recreated. These correct variations of the logos are supplied with the official brand aftwork. Consistent application of the logos will reinforce Think Brick as a brand.5
See Think Brick’s branding guidelines6.

Provide logos with different colors, and specify which colours are allowed. Think Brick gives designers a lot of options with its design. The point is to allow flexibility while maintaining consistency.

Show Examples of What and What Not to Do

You’re a professional, and you know better than to mess around with logos. But many others will try and think they’ve done a good job. They are so wrong. You must make clear what they can and cannot do with a design.

LOGO USAGE DON’TS 1. Don’t change the logo’s orientation. 2. Don’t bevel or emboss the logo. 3. Don’t place the logo on a busy photograph or pattern. 4. Don’t change the logo colors. 5. Don’t crop the logo in any way. 6. Don’t add “glow” effects to the logo. 7. Don’t present the logo on “vibrating” colored backgrounds. 8. Don’t present the logo in “outline only” fashion. 9. Don’t place the logo on similarly-colored backgrounds. 10. Don’t outline the logo in any color. 11. Don’t add “drop shadow” effects to the logo. 12. Don’t put a white box around the logo when placed on a dark or busy background. 13. Don’t reconfigure or change the size or placement of any logo elements. 14. Don’t stretch or squeeze the logo to distort proportions. 15. Don’t recreate elements or replace with something else.7
See I Love New York’s branding guidelines8.

I Love New York has done a great job defining all the things you shouldn’t do with its logo. It has also produced a beautiful (though bit wordy) document.


Many non-designers underestimate the need for white space. Include a spacing reference, especially for the logo. Rather than specifying inches or centimeters, use a portion of the logo (a letter or a shape) to set the clearance. This way, whether the logo is big or small, the space around it will be sufficient.

To preserve the BlackBerry logo’s integrity, always maintain a minimum clear space around the logo. This clear space isolates the logo from competing graphic elements such as other logos, copy, photography or background patterns that may divert attention. The minimum clear space for the BlackBerry logo and the alternate horizontal logo is defined as the height of the “B” in the wordmark. The minimum clear space for the alternate vertical logo is twice the height of “B.” This minimum space should be maintained as the logo is proportionally enlarged or reduced in size.9
See BlackBerry’s branding guidelines10 (PDF, 2.2 MB).

BlackBerry not only explains its spacing policy, but also uses the capital B in the logo to define the clearance.


Always include color palettes and what the colors should be used for. And include formats for both print and Web: CMYK, Pantones (if they exist) and RGB (or HEX). Always include a CMYK alternative for Pantones because sometimes matching is hard (especially when Pantone printing is not possible). Specify primary and secondary colours and when and where to use them.

See Channel 4’s style guide12.

Channel 4 shows all of its Web and print colors, and it displays the swatches below an image that helps to define its color palette.

See the New School’s branding guidelines14.

The New School is clear about its primary colors and defines them for both print (Pantone and CMYK) and Web (RGB). Its brand guideline document is beautiful, too.

Chris Doyle's personal identity colour alternatives.15
See Christopher Doyle’s Personal Identity Guidelines16.

Okay, so this one isn’t a traditional branding guideline, but rather a personal identity guideline. Here Christopher Doyle shows off some alternative color palettes. He does a fantastic job of mocking branding guidelines; well worth a look (and chuckle).


You’ll need to define the typefaces to use: sizes, line height, spacing before and after, colors, headline versus body font, etc. Make sure to include Web alternatives for non-Web fonts.

See Yale’s typeface18.

Yale has its own typeface, which it provides to its designers.

See Yale’s Visual Identity20 page.

On the typeface section of its website, Yale also details when fonts should be used. It has a specific Web font section, detailing which fonts to use there.

Layouts and Grids

By setting up templates and guidelines for grids, you encourage best practices and promote consistency. In Web, preparing some generic templates can curb excessive creativity with the layout.

layouts graphic elements These are the two main shapes used for the site. - Square (rounded corners, 20 px radius) - Rectangle (rounded corners, 20 px radius) The width must follow the grid horizontally, but is more flexible vertically. elements > global > graphic_elements.psd21
See the Barbican’s branding, print and Web guidelines22.

For its website, the Barbican has set up building blocks that are both flexible and ordered—meaning they’re likely to remain in a grid.

Tone of Voice

A huge component of a brand’s personality is the copy, and defining the tone is a great way to keep a brand consistent. When multiple people are writing the copy, the brand can start to sound like it has multiple personalities.

lingo tone of voice Don’t over complicate. Tell it like it is. Be direct and get to the point. Always look for the simplest way to say what you want. We believe that a message is better read when it’s simple to understand. Be direct and talk the language of your customer. They will appreciate your honesty and simplicity. Do not be afraid to use colloquialisms – or should we say... Do not be afraid to use plain and simple phrases? We’re never sexist, after all, easyGroup is for the many, not the few but we’re often cheeky and always try to raise a smile. For example, easyJet cabin crew have said, “If you have enjoyed your flight today, thank you for choosing easyJet. If you haven’t thank you for flying Ryanair!” and “It is a routine regulation that we dim the cabin lights for landing, it also enhances the beauty of our senior cabin crew!”23
See easyJet’s branding guidelines24 (PDF, 2 MB).

easyJet has a well-defined personality, both verbal and written, and it gives examples for both.

Copy-Writing Guide

For those who require clients to write their own copy but want to maintain consistency, a copy-writing style guide can be helpful. Copy-writing is one of those things that most people register subconsciously. When reading, your brain automatically looks for consistency and patterns, and poor copy-writing can ruin the reading flow.

Corporate Communications: Dates and times Always write the date in full, without the use of commas: Thursday 25 March 2008 Only shorten the date to numerical form when labelling or naming documents. New chief executive appointed at The Mango Project (25.07.08) Always write out centuries in full: CAN Mezzanine was founded in the twenty-first century. Express the time using either the 12 hour or 24 hour clock: The meeting will run from 10.00am – 1.00 pm. Training begins promptly at 4.00. Do not use a combination of both: The centre opens at 10 o’clock and shuts at 16.00pm.25
See CAN’s branding guidelines26 (PDF, 845 KB).

CAN wants its number formats to look the same. On another page, it defines which spelling variants to use, reminds people of common mistakes and more.


Many designers have established a particular tone in their photographs and images. Show your clients examples, and explain why they are good choices. Show them in the context of your design, and explain why they were chosen for that context.

Key principles of Zopa's illustrative style27
See Zopa’s style sheet28 (PDF, 3.7 MB).

Zopa29 has done a fantastic job of making its illustrated style clear. Its online style guide is very good, and it offers further tips on how to construct pages around its illustrations in the online style sheet.

Bring It All Together

Show a few examples of what the logo, photography and text look like together and the preferred formats.

Skype showing text, illustration, photography together30
See Skype’s branding guidelines31.

Skype has done a fantastic job of showing how it want designers to use its illustrations and photography. It has examples of the subtle differences between good and bad usage. The whole guide is beautiful and well worth a look.

Web Guidelines: What To Include?

Many people create branding guidelines but forget to include important style guides for the Web. Just like branding guidelines, Web guidelines keep everything consistent, from button styles to navigation structure.

Button Hierarchy

You’ve carefully decided what all the buttons are for and meticulously defined their states. Unfortunately, the in-house designer hasn’t applied your hover states or has created their own, and they look terrible.

Create a page that shows what all links do (including the buttons), the appropriate behavior of each and when to use them (with examples of appropriate usage). If one button is dominant, make clear the maximum number of times it should be used per page (usually once at most). Define the hover, disabled and visited states for all buttons.

gumtree button states32

Gumtree has worked hard to define all button states, especially custom buttons (for example, Post an Ad has a + sign in front of it). These were defined for the Gumtree redesign, which is now live.


Defining size and spacing and where to use icons is another great way to promote consistency. If icons should be used only sparingly, make this clear.

See ZURB’s icon sizes35.

Here, the ZURB36 agency defines icon sizes and when to use them, and it provides clients with an online source from which to download them. ZURB also defines badges and explains their purpose. It believes that its guidelines are best shared online.

Navigation (Logged In/Out States)

On the Web, good consistent navigation can make or break a website. New pages are often added to a website after the designer is done with it. Have you left some space for this? Doing things like letting people know what to do with new navigation items and showing logged-in states make for a cleaner website.

The global masthead retains the current global navigation links with additional links in an overlay panel. BBC iD and accessibility preferences are positioned to the right of the BBC blocks. The masthead is black but 60% opaque.37
See the BBC’s Global Experience Language38.

This is one of the most beautiful guidelines I’ve seen. BBC shows what to do with long user names, how much space everything should have and more.

Basic Coding Guidelines

There’s no way to make someone else code like you, but you can offer others basic guidelines that will minimize the damage, such as:

  • CSS class naming conventions
    Should they use .camelCase or .words-with-dashes?
  • JavaScript integration
    Are you using jQuery? MooTools? How should new JavaScript be integrated?
  • Form styling
    Include the code, error states and more so that they understand what style conventions you expect.
  • Doc type and validation requirements
    Do you allow certain invalid items? Do you expect the CSS and HTML to validate?
  • Directory structure
    Make clear how you have organized it.
  • Accessibility standards
    Should people include alt tags? Is image replacement used for non-standard fonts?
  • Testing methods
    Which standard should they test with? Do you have staging and production websites?
  • Version control
    What system are you using? How should they check in new code?

How To Format

Some branding guidelines have been turned into beautiful books:

See the Truth brand guidelines40.

This beautiful example41, which was designed to go with a brand redesign, shows just how beautiful branding guidelines can be.

But this requires a substantial budget and a reprint every so often. For most companies with tight budgets, this is not practical. On the Web especially, content is constantly being refined and styles for elements are not set in stone.

Here are a few good practices for formatting your guidelines:

  • Include a cover
    This should include an example of best practices for the logo.
  • Make it beautiful
    Even if it won’t be printed as a book, you can still make sure the branding guidelines appeal to the viewer. After all, you’re trying to inspire them to use your designs to the highest standards!
  • Include contact details
    For when they have questions, so that you can prevent bad decisions from being made.
  • Make it easy to access and open
    Usually this means putting it online or in PDF format. Don’t make it too big; use images sparingly.
  • Make it printable
    For international companies especially, keep margins big so that the document can be printed in both A4 and US letter sizes. If it’s online, make sure your print style sheets render the document as expected. Don’t do white text on a black background, either: you don’t want the client to have to buy a new ink cartridge every time they print a copy.
  • Make it easy to change
    Updating, adding new pages and making changes should be easy, because it will happen!
  • Create a mini version
    Make a short handy guide that has just the basics, in addition to the full version. Both will get used in different instances.
  • Provide print templates whenever possible
    Things like letterheads, business cards and envelops should have their own templates. While guidelines will help people put things in the right spot, they usually won’t help them get the right resolution or color format.

Here’s a useful template43 for a one-page branding guideline.


Remember, people should be able to follow branding guidelines. A 100-page book will engage none but the most diligent designer. Many believe that a concise three-page overview is best for daily use, with a more in-depth 20-page document for more complex tasks. Less is more, usually!

bbc poster44
See the BBC’s branding guidelines and poster45.

The BBC has created a detailed 38-page guideline. But it has also produced a beautiful poster for quick reference. It’s a brilliant idea, and it keeps the guidelines at the front of mind.


Related Posts

You may be interested in the following related posts:



  1. 1
  2. 2
  3. 3
  4. 4
  5. 5
  6. 6
  7. 7
  8. 8
  9. 9
  10. 10
  11. 11
  12. 12
  13. 13
  14. 14
  15. 15
  16. 16
  17. 17
  18. 18
  19. 19
  20. 20
  21. 21
  22. 22
  23. 23
  24. 24
  25. 25
  26. 26
  27. 27
  28. 28
  29. 29
  30. 30
  31. 31
  32. 32
  33. 33
  34. 34
  35. 35
  36. 36
  37. 37
  38. 38
  39. 39
  40. 40
  41. 41
  42. 42
  43. 43
  44. 44
  45. 45
  46. 46
  47. 47
  48. 48
  49. 49
  50. 50
  51. 51
  52. 52
  53. 53
  54. 54
  55. 55

↑ Back to top Tweet itShare on Facebook

Kat Neville is a freelance Canadian web designer (living in the UK) who is constantly coming up with too many ideas for new websites. She also loves arts and crafts, gardening and going on adventures. You can find her design work at

  1. 1

    I ejoyed your article!

    Thank youi!

  2. 52

    Skype’s guidelines are definitely the best I’ve worked with.

  3. 103

    Excellent article and very well organized!!! Designers should try their very best to keep up with a systematic way of presenting their branding philosophy to ensure consistency.

  4. 154

    Really good stuff…

  5. 205

    good article…

  6. 256

    Great article. Very helpful and informative!

  7. 307

    Great article! But where is the BBC GEL Poster? You can download the whole styleguide on their site but I can’t find the poster you refer to anywhere.

  8. 358

    really good article ! Of course it’s written by a Canadian ;)

  9. 409
  10. 460

    Very good article, congrats.

  11. 511

    Simply superb. Thank you very much :)

  12. 562

    Great reading here. Thank you.

  13. 613

    Awesome article!

  14. 664

    Really! Good! Article.

  15. 715

    Awesome article :)

  16. 766

    A new world to me. Thank you for the links and the knowledge shared.

  17. 817

    great great great article…i was looking for.

  18. 868

    Interesting article. One of the questions I got from this article is that before a website is made, usually the branding of a company is already established. So, often a web designer applies the brand guideline set out by a design agency rather than creating it from scratch. I think very rarely does a website act as the starting point for establishing the visual identity of a brand. So, does it mean that a style guide for a website is not really about defining the visual branding of a company, but rather, defining the visual elements of a website so that it represents its branding?

    Anyhow, I really like the bottom half of your articles, because it’s very specific to web designers. But another question sets in – specific details such as leading, font-size, column width, are very much implementation details. Therefore, besides designers, these pieces of information are also very useful for front-end developers, because they can highlight visual details, which could be easily overlooked. So, should a style guide be written and designed in such a way that it contains more implementation details rather than defining the general tone of a brand, acting as a documentation rather than a guide?

    These questions got me thinking, thanks for the article.

  19. 919

    Absolutely brilliant excellent reference to draw on

  20. 970

    This is a great post and very timely as we update our brand direction. Thank you Smashing Magazine!

  21. 1021

    Very useful… Thanks a bunch!

  22. 1072

    Just what I needed!

  23. 1123

    What a lot of credits for this article! So here is mine ;-) Thank you very much! I like the way you people discuss. Just one big happy designers family huh!

  24. 1174

    I created brand guidelines for a property site I worked on last year and despite being clear, concise and sensible they were completely ignored. The site now looks bland and directionless

  25. 1225

    In over a year of reading Smashing, this may be the best article so far. Fantastic job! Extremely useful.

  26. 1276

    Very good article !
    where do you find all this style guide ?

  27. 1327

    A very interesting article! Another great read from SM. Thanks!

  28. 1378

    Very helpful and useful! thanks for posting these resources and guidelines!

  29. 1429

    Thanks for sharing these great resources, I think we should all create a style guide for the companies we work for. These guide could be essential for vendors and even new staff to get up to speed and moving in the right direction immediately.

  30. 1480

    Bryant Littrean

    August 3, 2010 8:57 am

    This was great, thanks for putting all of this together. It could have been broken up into a “part 1″, “part 2″ post because it was so massive and filled with information. After clicking through to each of the brand guides and reading a few of the pages by each brand offered, about 75% through this article I felt like I needed a rest. I intend to print out the the BlackBerry guideline and possibly the Cunard guideline to explore further because those were so well put together.

    The current guideline I offer to my clients is in no way as elaborate as these examples but I plan on offering an option for an additional cost if someone wishes to have a branding guideline like these designed.

    I really enjoyed this article, thanks again.

  31. 1531

    Nice article. It’s Very useful for designers. I had implemented something like this in my company but later realized that only designers are able to follow it. Non designers find it difficult and time consuming job. But anyways it’s always good to have something like this rather than nothing.

  32. 1582

    Hi Kate, You are really great writer. This is a best article I ever seen. I have learned something on this. waiting for more.

  33. 1633

    This is the best guide I’ve read. Thank you Kat. I’m just setting up my own company and I’m going to try and follow all your guidelines. Don’t look at my website! I’m not there yet! Thanks again. Excellent.

  34. 1684

    this is really great post

  35. 1735

    A website is never done. Everyone has worked on a project that changed so much after it launched that they no longer wanted it in their portfolio. One way to help those who take over your projects is to produce a style guide.

  36. 1786

    I was just going to design a logo and found these guidelines, thank you so much!

  37. 1837

    Does anyone have any examples of executing your style guide online? Using HTML/CSS instead of a PDF? Thanks!

    • 1888

      I would imagine it’s the same except you separate it by page tabbed navigation rather than physical pages. That way a user can click through it and see what you are trying to convey.

  38. 1939

    Wow!! this is what i’ve been looking for!!
    Thank you! :D

  39. 1990

    Kat this article indeed has great points and very few designers or even client understands the need for brand guideline. At times I feel this should be a mandatory part of our design deliverable’ and project estimates should be planned accordingly :-)
    I usually tell everyone around that brand document is not just for keepsake but should work as a “BIBLE” for whoever is associated with that brand – designers, developers and even client.

  40. 2041

    This is the best part of my day..! Great discovery!

  41. 2092

    Great article, great resource.

    Thank you!

  42. 2143

    I have a question along the same lines as Bryant Littrean’s comment.

    Obviously these brand guidelines are beautiful and incredibly instructive… They also look like hours upon hours of additional work.

    I currently offer a rudimentary “don’t stretch the logo” set of guidelines, and I provide the logo in several layouts… However, if I were to want to create something more thorough, does anyone have suggestions as to how to charge for that additional time and how to sell it?

    • 2194

      I think the way to do is it up front, and break your work out in phases. Set up a template (in InDesign or something of your choice) that you can use for people who don’t want to pay for it or have smaller businesses and don’t necessarily need a 60 page guide, and when you also don’t want them messing up your work by stretching your logo, etc…. That way it doesn’t take you much work (it’s a drag and drop), and for those that have a larger company or business in which you know that it’s needed, spend the extra hours of work, and include those hours in the ‘Branding’ (or whatever you want to call it) phase estimate of your project.

    • 2245

      I think charging for guidelines is a big topic. Some clients see the positives and they are prepared to pay. Others are not. I personally like to charge about 1-2 hours for each page in the manual. I use for online guidelines. I generally start with about 10 pages but most of the clients expand on their manual eventually.

  43. 2296

    This is PERFECT! Such an in depth article, and helpful with resources. Thanks so much for this, I am in the process of doing my own style guidelines for my company, and I always get intimidated, but this made it something I look forward to doing.

  44. 2347

    thanks a billion times over smashing magazine.

  45. 2398

    hi !
    Its such a great to have a great inspirations on brand guidelines .
    thanx smashing magazine.

  46. 2449

    Jessica Clements

    April 12, 2012 7:27 pm

    I love the slam on in-house designers, as though they were somehow less skilled??? Really???

    A tad thoughtless.

  47. 2500

    Hi! I found this very useful.

    I was wondering if others here have a more detailed example of Basic Coding Guidelines for a specific company.

    I’ve been tasked with one but I am unsure how to go about it.

    Thanks in advance!

  48. 2551

    Fantastic! One of the best written style guides. Cheers! M.

  49. 2602

    I’m currently creating a brand guide book for a uni project and this came in very handy, thanks

  50. 2653

    Really helpful article!


↑ Back to top