Build a Brand Style Guide for Your Website

Having a brand style guide page for your website will give you and your team a place to keep up with your brand standards, in one easy to access place. It will also make it easier for your team and followers to promote your brand on social media. This is a win, win!

One of the best example of this from a corporate company is Starbucks. They use the Starbucks Creative Expression subdomain and have a whole website dedicated to their branding standards.

Your brand style guide doesn't need to be overly thought out and can be a living document. Start simple and add to it as needed. You can also add dates to show when the latest updates to the guide where made.

Below I give examples and on how to create a simple brand style guide to get started with for your website.

Mission Statement

This is the brands statement from a design perspective that helps tell your branding story. It should be a friendly hello that gives the look and feel of what to expect from the designs of the brand.

For example here at Design 2 SEO:

I aim for simple and effective design with an edge of technology and bring common, practical view points from a creative perspective.

Typography

Break down the primary elements about your typography and add in the more granular elements as you go.

Details

• Logo: Helvetica Rounded
• Body: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
• Weight: font-weight: normal;

Setup a Font Ramp

Example of the min width media query for larger screen sizes. Using the CSS pseudo-class we can easily setup a font ramp.

@media (min-width: 35em) {
    :root {
        --fs-p-sm: 16px;
        --fs-p: 20px;
        --fs-h3: 1.5rem;
        --fs-h2: 2.20rem;
        --fs-h1: 3rem;
        --fs-home-h1: 110px;
    }
}

Create your you class names starting with --name-of-style. Then use it in your CSS property with the var('') function.

h2,
.h2 {
    color: var(--clr-primary);
    font-weight: var(--fw-light);
    font-size: var(--fs-h2)
}

Setting up you font ramp with CSS media queries and the root pseudo-class is a good way to visualize your and chart the properties.

Colors

Show the primary, secondary and neutral colors or your brand and website. Add some context to tell why you are using these colors and how they represent your brand.

For me this brand says trust and knowledge with a calm inviting atmosphere. I want to convey that the Design 2 SEO content uses core design standards with a edge of creatively.

Primary Color

• Logo
• Homepage H1's and posts H2's.
• Posts pagination icons.

Secondary Color

• Call-to-actions.
• Scroll navigation.
• Hover and active states.

Neutral Color

• Body background.
• Offset color on homepage.

Black Color

• H1's, paragraph and H3's and up for posts.
• To be used on white background.
• Underline links color in page body.

We can continue to go into detail on how the colors are designed to be used by listing out each of the rules.

You can also represent the percent of color to be used in layout on pages and marketing suites. This example uses the 60-30-10 rule, and is a good start to create professional user experiences.

I have a Designing with Three Base Colors post that covers this in detail.

This is also a good place to test your type overlay contrast. You can test for web accessibility sufficient contrast ratio by run a Google Lighthouse test on this page.

Post Images

Having consitant image alignment, sizes and drop shadow is cursual to branding.

Image center alignment example

<img src="/assets/blog/html-and-css/following-hover.jpg" class="center shadow" alt="cat working on computer" width="418" height="auto">

Links

There are many different types of links to keep track of like internal, out going and navigation. Beyond branding we can use the style guide to help with SEO as well.

Internal

This is an internal link.

<a href="#" target="_blank">This is an internal link.</a>

External

This is an external link

<a href="#" target="_blank" rel="noopener">This is an external link</a>

In text link

This is a link inside a paragraph

<a href="#" class="under--clr" target="_blank">This is an external link</a>

Use the rel="noopener" for external links.

Combinations

Standard for how content combinations are spaced using padding or margin.

Logo

Start with the primary logo and then list any logo versions. Give a brief description and instructions on how it should be used and any limitations.

Instructions:

• Font - Helvetica Rounded Bold Condensed.
• Use a SVG for the website logo and a PNG for the marketing suite.
• Use a width of 130px for site logo.

Site logo example

<img src="/assets/logo.svg" alt="design 2 Seo logo" width="130" height="auto">

Favicon

Use a PNG file at 512px by 512px.

Social Media Profile Image

Use for all social media profiles images at 400px by 400px.

HTML & CSS

Center with grid CSS to continue to use a border to show the edge of the design. It should be assumed that the boarder is just for guide purposes.

<div class="logo--container">
	<div class="brand-border">
		<img src="/assets/logo.svg" alt="" width="140" height="auto">
	</div>
</div>

.logo--container {
	display: grid;
	justify-items: center;
}
.brand-border{
	border: solid gray 1px;
	padding: 22px;
}

Social Media Banners

Display each of the social media banners and dimensions. This is a great resource as each social media has different size and types of banners.

Twitter Banner

Follow the 60-30-10 rule for design to mirror the websites look and feel. Use at 1500px by 500px.

Final Thoughts

I have seen so many situations where an easy to access public style guide would have saved the team so much time.

First the project manages asks if you can update the logo, but you need the font and colors before you can get started. Two days later the account manager is sending you a list of fonts and colors they think is what was originally used. Anyway, I digress.

Basically putting a style guide in place that is easy to manage and access will make for a more cohesive looking web presents.