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 the HTML/CSS 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.

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.

HTML and CSS

We can use CSS grid to create the circle layout for the colors. Start by wrapping the circles in a container div using a three column grid with a max width of 100px. Then you can easily center the content and its items.

<div class="circle--container">
	<div>
		<div class="circle blue"></div>
			<p class="small">#2c89d2</p>
	</div>
	<div>
		<div class="circle teal"></div>
			<p class="small">#75e9e9</p>
	</div>
	<div>
		<div class="circle lt-gray"></div>
			<p class="small">#f0f0f0</p>
	</div>
</div>

.circle--container {
	display: grid;
	grid-template-columns: repeat(4, max(100px));
	grid-column-gap: 12px;
	justify-content: center;
	justify-items: center;
}
.circle {
	width: 70px;
	height: 70px;
	border-radius: 50%;
	-moz-border-radius: 50%;
	-webkit-border-radius: 50%;
	border: solid grey 1px;
	align-items: center;
}
.circle + p {
	text-align: center;
	width: 100%
}

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.

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.

HTML & CSS

Continue with CSS grid as it gives us flexible percentages to easily work with. Again we wrap the colors in a three column grid with the fraction (fr) of the percents that we want for each color. Then in the boxes we set our background color and center the text using grid.

<div class="three-clr-box--brand">
<div class="clr--primary-bg">
<p class="text-white small">Primary Color 30%</p>
</div>
<div class="clr--secondary-bg">
<p class="small">Sec. Color 10%</p>
</div>
<div class="clr--neutral-bg">
<p class="small">Neutral Color 60%</p>
</div>
</div>

.three-clr-box--brand {    
display: grid;
grid-template-columns: 30fr 10fr 60fr;
}
.clr--primary-bg {
display: grid;
place-items: center;
background-color: var(--clr-primary);
}
.clr--secondary-bg {
display: grid;
place-items: center;
background-color: var(--clr-secondary);
}
.clr--neutral-bg {
display: grid;
place-items: center;
background-color: var(--clr-light-gray);
}

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 140px for site logo.

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 Brand Style Guide Template

See the Pen Build a Brand Style Guide For Your Website by Jeremy Faucher (@jeremyfaucher) on CodePen.

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.