how to make a style guide

How to Make a Style Guide and Why Your Website Needs One

The point of a website is to share yourself and your company with other people. The problem is that the more you share your company, the more you create room for error.

Branding is one of the most important marketing tools a company has. Using consistent branding creates recognition and trust with your audience. Once your business starts growing, you can start inviting other people to work with you.

But when you grow your business, it’s vital that your brand looks, sounds, and feels the same. The easiest way to keep your brand on point is to create website branding guidelines with a style guide.

If you’re not sure what a style guide is, don’t worry. We’ll show you how to make a style guide that will help you and your company’s brand.

What is a Style Guide?

A style guide contains the building blocks of your company’s brand. It breaks it down one component at a time so that anyone can replicate the look and feel of your company website.

Big companies use style guides when they have individually owned branches. Century 21, a realtor company, has a website where their brokers can access information about fonts, colors, and slogans.

The publisher Penguin Random House uses style guides for both content and branding. It’s easy to spot one of their books because they’ve created such a strong brand for all their materials.

Style guides are useful if you’re working with

  • Freelancers whom you’ve hired to work on your website or social media.
  • Graphic designers for your company or website
  • New members of staff who will be working with your brand.
  • Anyone who is creating images or writing content for your brand.

Why Do You Need a Style Guide?

Let’s say you were going on a long journey through the jungle. Your guide hands you an amulet that is the symbol of the jungle and tells you to “follow your heart.”

You’d be much happier with a detailed map, wouldn’t you?

But that’s how some people handle their branding process. They might have a site name and a logo, but when it comes to the nitty gritty they go with whatever feels best. The result is inconsistent branding, poor design, and a confused audience.

Having a web branding guide is like having that detailed map of the jungle. When you or an employee is trying to remember which font to use, style guides spell it out.

Style guides are also important for content creation. If you’re writing content for your website, it’s important that it all sounds the same. The For Dummies book series is a great style guide example of content branding done well. All of the books have the same way of presenting information on a wide-variety of topics.

A style guide is also helpful for creating social media campaigns. You want everyone to recognize your brand, whether they see it on Facebook, Twitter, or Instagram.

To break it down even further, a style guide makes your website content easier to create, easier to edit, and easier to share.

How to Make a Style Guide

There are many ways to make the actual style guide itself. You can use Word, PowerPoint, or even Photoshop. For some great style guide examples, click here.

However you decide to make your style guide, there are some key components you need to add to it.


The most important aspect of your style guide is the logo. You can have several variations of the logo, including color and size, but they should all look and feel the same.

Color Palette

The second most important thing to list in your style guide is your website color palette. Just like decorating a home, a color palette brings the whole brand together. Colors evoke certain emotions, and you want to make sure your colors are always on brand.


Your font plays a quiet, but important role for your brand. Don’t believe it? Think about an example of horror movie fonts. What about the font from an 80s movie?

Having the right kind of font, or typography, is a great way to make your brand stand out. It’s also a subtle way of indicating to your audience what kind of company you are.


This is like the logo but covers a more broad range of images.

Think of the difference between an Android emoji keyboard and an Apple emoji keyboard. Both sets of emojis have similar images. But the graphics teams are very particular about what images go with which keyboard.

Buttons and Links

The same logic applies here as it does to the graphics. The links and buttons on a Google+ profile are different from Facebook. You can thank the branding style guide for that.


Slogans can be as iconic as logos, so you’d better make sure they’re all the same.

Spelling and Punctuation

Spelling is especially vital if you’re working with freelancers from around the globe. You don’t want your design website to say “Colour” if you’re working with people from the United States.

Punctuation is also important. There’s a huge difference between Nike’s “Just Do It.” and “Just Do It?”

Want to Improve Your Website?

These are a few examples of things you should include in your style guide. For more specific guidelines on how to make a style guide, look up style guides for other companies in your industry.

For more tips on improving your website brand, check out our blog. We have a ton of great tips and post about how to make the most of your web design.