How to Create a Website Style Guide (With Free Template)

When you think of Google, what comes to mind?

Many things, probably, but one of them is an image of their branding. Their web pages are generally white or slightly off-white, with black and gray text.  Each Google service has a distinct logo, a shape made of smaller overlapping shapes using their primary red/blue/yellow/green colors. Everything from the letter “G” to the “M” of Gmail to the triangle of Google Drive; all have a consistent visual language to them.

Consider Microsoft.

The Microsoft Office suite has its visual language, with flat logos and a single letter to indicate the app you’re looking at, recognizable by its logo.

You find this trend repeated across the corporate world. Facebook uses the same shade of blue everywhere; they don’t just pick a “close enough” blue, right? Neither can you, in terms of your visual guidelines. Iconography, color choice, and font style; are all elements of design that need to be determined by the decision-makers in your team and implemented consistently across your branding.

It would help if you produced a style guide for your website to distribute amongst your team. How can you guide and regulate all your team members to ensure they create content that fits the same visual style? Here’s how.

What Goes into a Website Style Guide?

A website style guide should be a definitive resource for anyone who works with you, whether independent contractors, freelancers hired for a single project, or full-time employees in your internet marketing department.

So, what should you have in your website style guide?

1. Your Logo and Its Variations

First of all, you want your logo. This logo is your canonical logo, though the basic version in your style guide can be something other than the one distributed to your team.

Facebook, for example, has its full “Facebook” logo, the singular F logo, and a couple of color variations, but they don’t have a red F or a green Facebook because that’s not within its brand scope.

At the same time, you should include any requirements and negative logo usage guidelines.

For example, you might not want your logo to be in other colors, skewed or stretched in some way, or otherwise disproportioned. Some website style guides include horizontal and vertical versions of their logo or a square version for social media profile images. If some of your web pages are dark and others are light, or if you want your website or app to detect if a visitor is using dark mode, you should include both a light and dark version of your logo. It’s better to define these things and have them in your style guide than leave them up to chance and risk a messy or poor execution.

2. Your Font Style and Format

Throughout content on your site, you want to use a consistent font. That’s fine; that’s easy, you can set a font for site-wide styling, and it’ll work fine.

While you can set most of this from site-wide CSS, you still want to specify it in your style guide.

There are two reasons for this.

First, some people might design a website in a local environment and must ensure their options are configured correctly.

Second, this text styling will be used in locations other than your site (like print marketing materials) and should be kept consistent across those alternatives.

3. Color Choices and Palettes

No site is monochrome, just black and white, at least not without it being a deliberate choice.

Color makes different elements on your pages pop. You’ll also want to use complementary colors and whole palettes to work as additional resources for your graphic designers.

It’s usually a good idea to specify a primary color palette and a secondary palette for alternative uses.

You’ll want 4-6 colors each, and keep in mind where you can use different colors. Your header and footer, your sidebars or background, your font color, the colors of your links, and other CTAs need an appropriate amount of contrast to meet web accessibility guidelines.

For each color, provide both the hex code and RGB values. Please specify the CMYK values if you’re working with print reasonably often. Remove as much potential confusion as possible.

4. Buttons and Added Element Behaviors

Modern websites are full of little CSS tricks to spice them up. These tricks can be anything from the color and style of your buttons to the subtle animations and color changes that happen when a user hovers over or clicks them.

This section is one of the most frequently changing aspects of a style guide, simply because these behaviors are part of marketing and call-to-action visibility, which means they are often split-tested to find which variations work best, which are then applied across the site.

5. Visual Language Guidelines

Another decision you must make is what kinds of images you’ll use throughout your site.

For example, Coca-Cola’s website is covered with pictures of people, primarily happy, to convey their part in the global social order.  AdEspresso has a distinct character mascot and a graphic design that accompanies him, with flat colors, particular shapes, and a style recognizable across each image in each blog post they create.

Now consider something like Wordstream. Each image on their blog posts is different. Some are photographs, some are more artistic, some are abstract, and some are iconographic. There’s no cohesion across them all, so their blog loses a little oomph.

These guidelines are essential when working with multiple graphic designers for content creation. Your style guide is necessary if you want a cohesive style across various media and other formats.

6. Brand Voice

Your brand voice guidelines should be part of your general style guide and developed into a specific writing style guide for anyone producing content for you.

This guide section should include tangible information that is as specific as possible. For example:

• First-person, plural: you use “we” when referring to your brand rather than something impersonal or singular.
• Casual: your writing is less formal, with more slang, casual language, humor, and other elements.

If your copy switches from first-person to third-person, depending on the writer, your content can end up feeling disjointed, confusing both search engines and people. You should know if your writers are talking from their experience (me, I, myself) or as an organization (we, us, ourselves).

Various elements of your brand concepts and overall resonance will come through in this brand voice guide. Developing a consistent voice for all of your website copy, from landing pages to product pages to blog posts, is essential.

How to Develop Your Website Style Guide

When putting together your website style guide, you’ll want to follow a process that considers each specific aspect of your brand and what each element conveys.

The first step is to examine your brand in detail. What are your core values and your ideals? What emotions do you want to convey, and what is your intended visual language?

This section is where an exciting amount of psychology comes into play. For example, picking the specific colors in your style can be hugely impactful.

Color psychology can play a significant role.

• Red can signify power, strife, passion, energy, determination, and attention.
• Green can signify growth, money, value, freshness, fertility, and tranquility.
• Blue can signify authority, value, authenticity, idealism, cleanliness, water, and peace.

These are just a few of a color’s many possible implications. A lot comes from the color’s shade, the color, the context of the color, and even the reader’s culture.

Studying your brand can also help you pick broad-strokes categories for various elements of your website, which you can narrow down later. For example, do you want a block print, a fancy script, a serif, or a sans-serif font?

Do you want to use Drop Capitals at starting paragraphs or sections? These are impactful decisions.

In general, you want to start with broad strokes. Your brand signifies this, that, and the other thing; to reflect these, you pick this handful of colors, spectrum, typeface, and spacing. Progressively narrow down each element until you have it where you want it.

Just don’t go overboard. Otherwise, you end up with something like the infamous Pepsi logo redesign documentation, which (if you haven’t seen it yet) is 27 pages of near-nonsense.

Build Secondary Style Guides

Only some people need a complete brand website style guide. Your graphic designers don’t necessarily need to know about the H4 headline typography rules if they aren’t working with your content.

Conversely, your content writers may not need to know anything about your website’s color and graphic design elements, just your rules and conventions for point of view, tone, and perspective in your content.

Many brands start with one singular, comprehensive style guide for their entire brand, offline and online. This guide is usually called a design system and encompasses everything you can pin down about your brand. Then, your website style guide is a sub-guide of the design system, which you can use for all of your web design guidelines.

You can then create other style guides, like a content style guide for writers you hire, a graphic design guide for the people making your graphics, and so on.

Pro Tips for a Website Style Guide

Before we wrap up, here are some top-tier tips to ensure your website style guide is a consistent.

These four will help you create a powerful document for your brand building:

• Tip: Keep your style guide in a central location rather than handing a new one out to everyone who needs it. That way, if you need to change something, whether it’s updating a hex code for a color, changing a logo variation, or something more substantial, you have one canonical source of information rather than a bunch of people with different versions of the style guide.
• Tip: Provide additional resources as necessary. This section is similar to the “additional resources” you might include in a press kit. For example, your style guide may be a self-contained PDF, but you may also want links to a zip file with the full-size images for your logo for your graphic designers to work with.
• Tip: Don’t just write concepts and emotional resonance into your design doc. Ensure your style guide has tangible, helpful information about colors, shapes, styles, and other critical elements of design. It’s OK to have an introduction about how your brand radiates nonchalant energy and curiosity matched only by its confidence, but that is only sometimes translatable into something meaningful.
• Tip: Don’t be afraid to check out the competition. Many brands produce their style guides as publicly available for anyone who wants to create content about the brand. You can look for things like press kits and style guides. Download the guides from your competition to see what kind of thoughts they’re going for, what emotions and resonance they’re using, and more. All of this information can help you develop your own.

Finally, don’t worry about getting all this pinned down in short order or immediately. Design documents and style guides are living documents. They reflect how your brand is positioned within your industry and with your audience; those perspectives can change over time. As such, you’ll be adding and editing the document over time, which is a big part of why keeping it in a central location is a good idea.

Do you need help developing your brand’s website, visual style, or design? If so, feel free to reach out to us. We’re experts in web design, and as a top-notch design service, we’re here for you.