Table of Contents
What is a Website Style Guide?
A website style guide is an in-depth design and branding document. It typically covers the code of standards and rules for representing a brand on a website’s user interface (UI), and should be used as a reference by anyone who works on the website.
A web design style guide (or website style guide) is created specifically for website elements. A brand style guide is a more comprehensive document that include the full usage of elements, including print and other media.
This collection of completed design elements, graphics, and rule sets, helps developers, designers, and content creators express your brand style with consistency.
Difference Between Style Guide, Design System, Style Sheet, and Brand Guidelines
It’s important to note that a design system is not the same thing as a style guide. Design systems have more defined rule sets and usually include a development sandbox with interactive components – in essence, they are more complex.
A style sheet, on the other hand, is a web development term which refers to the code that applies the styling to a website, usually CSS (which translates to Cascading Style Sheet).
A website’s style guide is generally used by developers to make building style sheets faster, easier, and far more efficient because all of the styles have been defined ahead of time.
Another common question that’s asked of style guides is:
What’s the difference between brand guidelines and a website style guide?
Probably You, Right Now
Typically, brand guidelines document information on how to best use the brand in any form of marketing or advertising, including digital AND print. For example, check out Slack’s brand guidelines. Notice how they don’t really mention usage for the web?
A website style guide is specific to how a brand should be represented on their website, so it’s specifically meant for web designers and developers, as well as anyone creating content on a site.
Ultimately, what you call it isn’t all that important. Work out the key elements you need to include so that everyone working on your website is on the same page, and create the guide from there.
What is the Purpose of a Website Style Guide?
The main purpose is of a website style guide is to maintain brand consistency across the site so that the overall impression is professional, structured, and easy to recognize. A typical brand will usually have multiple professionals working with it, such as a range of marketing personnel, designers and developers, and content creators.
The web design style guide gives everyone who expresses the brand in some way a single reference source to communicate the consistent vision. For a website, that means all pages and elements will adhere to the same visual style, with the content reflecting the voice and tone of the brand.
Website style guides makes it easier for all collaborators to design and communicate the brand with the guidance of clear instruction and documentation.
It’s hugely beneficial for all brands to have a comprehensive website style guide so that new team members – like designers or writers – can refer to the document as they communicate the brand’s message.
It also reduces the amount of time it takes for new designers and developers to be able to contribute to your website, since they will have everything they need to start building right away.
Get A Free Quick Win For Your Website
Want to get more conversions on your website but not sure where to start? Give us a URL you want to improve and we’ll put together a few suggestions for how to optimize it, absolutely free!
Benefits of Creating Style Guides
When all brand collaborators have access to a complete website style guide, there are many benefits for internal design, content creation, and brand marketing. These include:
- More efficient graphic design – faster time to design and create content with clear rules to follow.
- Maintaining design consistency, especially with multiple collaborators and deliverables is much easier.
- Code for web development can be standardized (CSS, JS, HTML) and kept DRY (Don’t Repeat Yourself) which reduces file sizes by avoiding redundancy.
- Decision-making for content creation is faster and easier with many decisions already being made in the style guide.
- Marketing strategy can be built upon the style guide and refer to these elements, especially the brand tone of voice.
- Increases customer brand recognition as the style remains consistent across platforms.
- The ease of having a sharable asset makes communication between clients, affiliates, and employees more smooth and concise.
- New employees need less training to design, develop, write, and create content when they can reference the style guide.
What Should a Website Style Guide Include?
Depending on the needs of your company, and even the industry that you are in, the web design style guide will have differences in the components that are included. The following list demonstrates a comprehensive brand style guide for the website that contains all elements.
- Guide for the logo (usage, color options, sizing)
- Color schemes (the brand colors, including gradients and contrast ratios)
- Image & icon usages (including animations and use cases)
- Typography (brand fonts & when to use them i.e. headings, body text, links, etc.)
- Components like Buttons and Forms (including interactions like hover states)
- Grid Systems & Spacing (most websites use a 12 column grid)
- Template designs (examples of different templates and their components)
- Web guidelines for different platforms (website examples & design rules for CMS like WordPress, etc.)
- Voice (personality of written & visual content, the tone & brand identity)
- Marketing guides (how to advertise & communicate the brand, including on social media, email, and sales pages)
- Mission, purpose & values (defining the narrative of the brand, differentiations, & purpose)
- Target audience definitions (getting clear on who the audience is).
How to Create a Website Style Guide
Below is a 12-step outline of the core elements of the website style guide. You can do them in the order that feels right for the brand development, however, the first two points should always be where you start.
- Describe your brand and define your brand ethos
- Study your existing brand and major competitors
- Set logo and brand usage rules
- Define your color palette
- Create typography rules
- Define iconography style
- Define best practices for images and illustrations
- Choose a grid system and set spacing rules
- Create Button and Form Styles
- Document Additional Styles & UI Components
- Develop your Brand Voice
- Outline DOs and DON’Ts
Let’s go into each of these in more detail.
1. Set up a project brief and define your brand ethos
Whether you’re creating a website style guide for another brand or your own, the starting point is to understand the brand’s core message. This is where the mission needs to be clear, the values, and the tone.
This will be outlined through communication and meetings with stakeholders so that everyone is on the same page. Usually, the brand mission statement, narrative, purpose, and target audience are outlined first.
Defining your brand ethos will create a strong foundation to determine the way to communicate the brand through the visual and written elements that are later outlined in the website style guide.
2. Study the Brand (and Competitors)
This goes deeper than those foundational points above. This step involves not only studying the brand’s message and deciding on the best means of communicating it, but also studying other brands in the industry and how they communicate online.
Part of studying your brand is getting clear on what makes your brand different. Market research for your industry design trends is important to understand what is currently on offer, what people need, and how you can best interact with the audience.
Seeing how people have outlined their brand can give clarity on how to approach this brand development. You can take a look at Styleguides.io to get a feel for what can be created in the realm of web design style guides.
I also like to keep a folder of really great website patterns I’ve seen out in the wild or on competitor’s websites to serve as inspiration.
3. Set Logo and Brand Usage Rules
Your brand will likely have more than one logo.
It’s likely you’ll have quite a few logo variations, including the wordmark, the symbol, and lockups for different use cases and platforms.
In fact, this is so common, most brand designers have stopped selling logos and started selling brand systems.
How your brand looks depends a lot about where it’s being viewed, and a style guide can help you set the rules for when and where to use different versions of your brand.
By building a website style guide we’ll be able to standardize how your brand will be represented online so that your brand communication is consistent.
You’ll want to include directions on which logo to use on dark backgrounds vs light backgrounds, websites vs apps, and even different lockups like horizontal vs vertical logos.
Rules for how the logo can be used might also be in this section, such as guidelines for spacing, minimum size recommendations, or dos and don’ts for third-party usages, like when affiliates are sharing your brand.
If possible, try to include an easy way for your team and partners to easily download approved logos to prevent them from pulling any random logo from a Google search.
4. Define the Color Palette
A very important part of the web design process is to define the brand colors.
This means building a clearly defined color palette to guide the UI design of your website.
Typically you’ll want to include colors and their corresponding HEX, RGB, and HSB values. This way anyone who is working on your website can quickly find the correct color values without much effort. I also like to include the SASS variable name to help our developers stay on the same page.
The visual aspect of a brand is what people perceive first, and is often what stays as the lasting impression of the brand personality. For example – you know the exact tone of Coca-Cola’s red, Starbuck’s green, or McDonald’s bright yellow, right? That sticks with you to the point of even thinking of the brand when you see that color used elsewhere.
I recommend grouping your colors into Primary colors (most common), Secondary colors (least common), Contextual Colors (i.e. Success, Warning, or Error states) and Gradients, along with any instructions for use on your website.
Start with outlining the primary colors, which should be generally no more than three shades. Some brands will choose to have secondary colors which may be used in different instances, like page backgrounds on the web, or social media posts.
Including neutral colors is also a way to show how the brand can be expressed in more minimal ways (like black-and-white or off-white palates).
When adding the colors to the style guide, it’s important to also test different combinations to make sure they are accessible and pass contrast check. Otherwise, some people may have a hard time seeing your website clearly if they have some level of color blindness.
You can test each combination using a tool like getstark.co or using a website like WebAIM’s color contract checker. Make sure to document approved color combinations as well as which color combinations to avoid so that you can avoid easily preventable accessibility issues on your website.
5. Create Typography Rules
There needs to be a consistent typography style in your brand’s communication materials, especially on the brand’s website. This relates not only to the fonts that will be used, but also spacing and typography hierarchy for elements such as headings (h1, h2, h3, etc.), body text, links, and labels.
Additionally, how the brand will use bold, italics, lists, quotes, and callouts should also be outlined in this section. Typography will also be used in components on your website like forms, buttons, alert messages, and more.
I like to use tools like type-scale.com to help set up the initial size for my website headings, and adjust them as needed to make sure content is as easy to read as possible, regardless of device.
If possible, make sure to include sizing information for both desktop and mobile screen sizes, as well as attributes your developers can easily find and copy when setting up typography rules for your website.
6. Define Iconography Style
Icons are a simple visual communication tool that will make it easier and more interesting for the audience to understand your brand’s message. They typically include visual elements like arrows and lines or more detailed representations of a key element in the form of a symbol.
The iconography style should define the sizes, style, and color combinations that you can use for icons on your website.
There are a ton of places you can go online to get free icons like thenounproject.com, but I generally purchase icon packs from vendors like shutterstock.com, flaticon.com, or fontawesome.com so that all of my icons can look consistent (same style, line weight, etc.).
7. Define best practices for images and illustrations
Images are very important in your brand’s communication. The style, sizing, and tones of the brand’s imagery and illustrations should be defined in a style guide.
Images will spark emotion in the audience and help people relate to the brand. Using the right images on your website is shown to increase conversion rates by providing context while building trust with users.
However, using the wrong image can have the opposite effect – it can make users want to bounce and never return.
That’s why you should take the time to define what kind of images and illustrations should be used to best represent your brand online.
In this section, include dos and don’ts for the imagery, as well as mood boards with examples of stock images or professional brand imagery that is used and why.
Include the rules of usage, like filters, overlays, photoshop instructions, and other stylistic decisions.
8. Choose a Grid System and set Spacing Rules
Using a grid to depict how elements should be spaced, organized, and stacked on a website will help designers format your website’s layouts more efficiently.
Space and layout rules keep the visual elements consistently expressed with breathing room, to make the overall look be more professional and structured.
You’ll want to include spacing rules that include margin and padding for UI elements like headlines, buttons, forms, images, and more.
This section can also include more complex layout, grid, and spacing considerations when using HTML and CSS so that developers can refer to this structure. Usually this would include a list of classes to make building grids easier and faster for your developers.
You’ll also want to consider what your grid will look like on tablet and mobile devices, as well as how your spacing may change when designing a responsive layout.
9. Create Button and Form Styles
The components of a website that are most commonly seen are forms and buttons, and they are key elements for building your user interface.
Establish the interactive decisions for website buttons, by defining the active, hover, click, dropdown, and animated elements that will be used.
This creates interactive consistency throughout the website so you can avoid having 12 different button styles (which is honestly way too common).
For your forms, you’ll need to define what it looks like in it’s default state, including labels and buttons. But you also need to show what your form looks like when it’s been clicked, when there’s an error, or when a field is disabled.
Another aspect of form design that often gets ignored is the success message. What happens when a form is submitted successfully? Does the form disappear, or is there a popup that alerts users their action was completed successfully?
The form and button styles should also build off of the color palette, typefaces, brand voice, and everything else that was defined in the website style guide up until now.
10. Document Additional Styles & UI Components
Once the basic styles have been established with the elements we have already mentioned, you can begin to introduce more in-depth stylistic considerations for the user experience of your website.
When working on the web development of a brand, there are multiple decisions that need to be made beyond just the core layout and visual features of the website. This will include menu navigation, tabs, accordions, and other types of interactions and functionality that may be unique to your website.
It would be valuable to include examples of different pages in more detail by including templates their building blocks. Beyond the color palette, additional stylistic decisions should also be documented for things like texture, animation, artistic influence, and general art direction that needs to be communicated to your designers and developers to fully grasp your brand’s vision for your website.
You may even want to try including a dark mode feature, which means making 2 versions of your style guide: a light version and a dark version.
11. Develop the Brand Voice
A huge aspect of establishing a strong brand identity that the audience will relate to is the brand voice. This is the personality of the brand that is expressed through the writing style and other verbal communication.
The copy for web, emails, marketing materials, social media platforms, and even in-person interactions needs to be driven by a clear brand voice. Consider MailChimp’s brand identity. Some examples of how the company defines its voice include “fun, but not childish, informal, but not sloppy, and cool, but not alienating.”
Start by writing a list of adjectives to describe the company, and then branch out from there with key phrases and tagline options that could be used in different instances. For example, if the web user comes to a 404 error page, would it say simply “there is a 404 error” or, “Woops! Looks like an internet gremlin moved this page.”
The difference between the two is minimal, clean, professional language, versus a more animated, playful voice. A tip to help direct you to find the most relevant brand voice is to consider the customer’s demographic and how they speak.
12. Outline Dos and Don’ts for Usage
Finally, include a section on dos and don’ts for the brand assets that have been included in the style guide. This reveals the correct and incorrect functionality of the rule sets that have been defined in the guide in practice.
The most effective way to express these is through example imagery. For example, show the logo usage correctly next to an incorrect color/background placement. Or show the correct line-height and spacing for text, next to a format that isn’t right.
This is also where you want to test color combinations and document which ones pass contrast check. This is a critical part of keeping your website accessible and your brand’s marketing legible.
Common Website Style Guide Mistakes
Not every style guide is created equal. Some will be more effective at intelligently expressing the brand’s identity, whereas others will fall short.
The common pitfalls of web design style guides generally come back to the core issue of not including enough information, or not enough of the RIGHT information.
Firstly, the mistake some brand developers will make is to not invest time in researching the competitor’s branding and determining how this brand can offer more value and stand out.
Creating a brand style guide for your website without taking into account the style, voice, and design conventions that other brands in the space are using can be pretty reckless.
This can result in:
- not connecting with your desired audience
- getting lost in the noise of the other brands on the market without a clear differentiator
- coming up against challenges in how to make branding decisions later in the guide.
When the style guide has missing elements, like not defining the iconography or functionality of the website’s interactive elements, there is a missed opportunity to create efficiency in the web design and web development process.
You might have all of the elements that we outlined above in the style guide, but if there aren’t detailed rulesets for those elements, that’s another mistake. Sure, it’s great to have decided on the font, but without clear typography guidelines, it will be difficult for designers to know how to format the content.
Another common pitfall is when the style guide creator skips the brand narrative, mission, and purpose section. Although this content may never be read by the audience, it is fundamental for the writers and other content marketing creators to understand what the brand’s goals are.
Essentially, the less detail that a brand style guide has, the more difficult it will be for anyone working on the brand to maintain consistency, especially as your website team starts to grow and change over time.
Finally, one last mistake is not updating the web design style guide as goals shift or redesigns occur. It would be detrimental to future brand development to have an outdated website style guide circulating as an internal document.
To help prevent this issue, I recommend archiving older versions and adding both a release date and a version number to your website style guide.
Website Style Guide Examples
It’s beneficial to explore different style guide formats by learning what others are doing or examining templates of style guides.
Some valuable resources and examples include:
Get Help with your Website Style Guide
Creating a style guide for your brand’s website can be a lot of work. Hopefully, by now, you understand how valuable it is to invest your time and resources into creating a comprehensive web design style guide.
The good news is, you don’t have to do it on your own. Save time and give it to the experts. We can handle this stage of your website design process for you.
To learn how we can help you, schedule an introductory call with our founder, David.
