Style Guide 101: How to Get Started
A style guide is something discussed in every initial website design, as well as any redesign you may undergo. This document is your design source of truth when it comes to your brand. Your style guide is also critical in working with vendors to ensure your typography, colors, logo format, and more are utilized appropriately. Additionally, your guide can be helpful when training new marketing staff, or to remind long-time staffers exactly how to craft the elements that are uniquely your brand.
We are making an assumption here that you either do not have, or are revamping, your style guide. Let’s dive in!
1. Choosing Your Color Palette
First, you need to define your primary and secondary colors. Your primary colors are those specific to your company and logo. Secondary colors can be used as compliments throughout your website and in marketing collateral.
It is generally recommended you select a darker color for your primary color and use softer colors for the secondary. The Pantone Color Finder is a useful tool for reviewing colors and flushing out a palette. You can also look into the Psychology of Color to select those colors with positive meanings that support your brand.
Below you can see the Digitiv color Palette. Our primary colors are listed as the ‘background’ and ‘foreground’. We then define three accent, secondary, colors. We often play with these in our marketing and website by adjusting the saturation levels and opacity. You would define where to draw the line in adjusting colors when creating your guide.
2. Typography (Your Fonts)
For the average website, typography makes up the majority of content a visitor is seeing. There are a handful of basic must have items when it comes to typography. You need to define the size, weight and font of your H tags (H1 – H6). H1 being the largest, and getting progressively smaller until your reach H6.
Also, you need your title font, weight and style. You can see in the image below, we have set our title font, which is the default for all copy on our website as: Montserrat Light, 300 weight, Normal styling. Our H1 tag is 18pt font, reducing by 2pt with each tag on the list.
These are your starting points. This is not to say you won’t bold your title font in some areas of your website, or possibly take advantage of some additional fonts for campaigns and specific styling. Again, this is setting a design standard for anyone who is working on your website to understand your brand.
3. Define an Easy-to-Scan Grid Layout
The best way to achieve a well organized website layout and design is to apply a grid system. A grid system is a way of organizing content in two or more columns and cells arranged in a vertical and horizontal layout. For example, think of how videos are formatted on YouTube. They are in an easy to scan grid that allows you to see a decent amount of video content quickly.
Many modern CMS tools offer pre-defined layout options to help you jump start page formatting.
Gutters are another important component of any grid layout. A 20px gutter is a common size and fulfills the role of helping to create negative space between the rows and columns (see the image below, blue areas). The gutter size can be larger or smaller, depending on what is best for your brand. For example, photography websites often use a very small gutter to bring images close together for a portfolio presentation view, while clothing websites often use larger gutters to focus attention on the product and avoid distraction.
You also need to define the margins of your page. 20-30px is common on a mobile device and can vary widely on a desktop and tablet depending on your brand and page layout preferences (see image below, pink areas).
With your grid format set, you can also determine the required spacing which needs to exist around your logo and call to action buttons. For the Digitiv brand, we maintain spacing of at least ‘R’ around the logo and icon. Where R = 1/3 times the smallest logo dimension (smaller of logo width or logo height). You can make this even more strictly defined by setting a certain number of required pixels around logos, buttons and images.