How to Create a Brand Style Guide for Your Business
One of the things we regularly do for the small businesses and entrepreneurs we work with on custom web design projects is develop a brand style guide for both their website and their marketing in general.
A cohesive set of brand guidelines helps to create both a visual identity and a professional presence for your brand.
Elements of your brand style guide
Depending on your business type and needs, you may have some different elements to consider for your own brand style guide, but here’s what we recommend including as a basic starting point for your brand guidelines:
Font is one of the most important (and, surprisingly, most overlooked 🙀) elements of branding. The font(s) you choose to represent your brand should be thoughtfully selected to reflect your brand identity and how you’d like to be perceived by your clients.
We often describe fonts in terms of their general character: playful, modern, classic, rustic, feminine, fresh—the type of impression your brand seeks to make on your audience.
In general, it’s best to stick to just two fonts—for web design in particular we often recommend one serif and one sans-serif font.
This is a serif font (it has little lines on the ends of its characters). And this is a sans-serif font (no little lines on the ends of its characters).
In general, serif fonts are easier to read in large blocks of text (think of a book—most are printed in serif fonts) and sans-serif fonts are crisper to read in headlines. Of course, these distinctions can be mixed and matched for stylistic effect. And, sans-serif tends to be a little more screen-friendly, so tends to be used more in web design.
Web design can also incorporate script fonts designed to look like handwriting:
here’s an example script font!
Script fonts are useful for stylistic accents, but are typically not great options for large blocks of text or essential headlines, as they’re not as legible as other types of font.
Different font styles to customize and coordinate around your Squarespace website:
Site title (if you’re not using an image-based logo)
Blog fonts (title, body)
Blog meta data (date, author, category, etc.)
Image captions (if used)
E-commerce checkout process (if used)
While the appropriate font for your particular business and website will vary depending on many factors (industry, brand voice and tone, target demographic, types of marketing materials you’ll be using), here are some of our favorite font combinations for Squarespace websites:
Your brand colors are some of the most recognizable aspects of your overall branding.
How many colors to incorporate in your branding is up to you, and varies depending on other aspects of your business and brand identity—for example, if your overall brand aesthetic is modern and sleek, you may want to stick to minimal use of color; but if your brand aesthetic is bright and cheerful, that could be enhanced with the use of multiple complementary brand colors.
When choosing your brand colors you’ll want to document and save your color codes: the specific alphanumerical codes that tell computers how to display the appropriate color. Web design often works with Hex codes (six alphanumerical characters following a pound sign; for example, #000000 is black).
Here are a few useful tools for developing your brand colors:
ColorPick Eyedropper is a Google Chrome extension that grabs the color code from anything you hover over. It’s useful for pulling specific color codes off of imagery or other branded materials you’d like to complement or use as inspiration. Here’s an example of pulling the color code from the area we’re hovering over on our homepage:
Coolors.co is a color palette generator that helps to compile potential color schemes. You can either browse new potential palettes based on certain established color codes you’d like to include (for example, if you have an existing color in your palette and would like to incorporate complementary colors), or you can browse a curated collection of color palettes compiled by other Coolors users. For example, here are some of the top color schemes as voted on by Coolors users:
We definitely preach that it’s important to curate cohesive professional imagery for your website. But in addition to the imagery you use throughout your website, establishing image guidelines for your brand as a whole helps to maintain consistency across other areas of your business as well—this extends to imagery that’s used in email marketing, social media, and print marketing materials.
While it’s awesome if you have the resources to commission a professional photoshoot for your brand (yay!), in reality, many small businesses and entrepreneurs (especially those just starting out) don’t have the resources to do that.
Another option is to use free (or paid) professional stock photography. In particular, we like Unsplash, which offers an extensive collection of free, “non-stock-y” photography from independent artists around the world. These images are available for use via a creative common license and Unsplash even has a seamless integration with Squarespace—in an image block or thumbnail image editor, simply click Search for Images and you’ll be able to search Unsplash’s database directly in your Squarespace content editor.
Establishing the tone of voice used in your branding can be one of the more complicated and lengthy parts of the branding process. A few questions to work off of as a starting point:
Whose point of view are you speaking from? (The business entity? The founder or CEO? The brand mascot? The whole team?)
What style of communication does this voice have? (Witty? Brief and direct? Friendly and conversational?)
What type of vocabulary does this voice use? (Formal, high-level industry jargon? Slang? Common keywords and phrases? Multi-lingual?)
Who does the voice speak to? Does it speak directly to a single person (potential client), or to a broad audience in general?
There are certain grammatical conventions that help tie together your overall branding. For example, the capitalization of your business and product names. This also includes your use of bold and italic font across your website and other brand materials—consistently used, these elements of written communication can begin to carry specific meaning or emphasis for your brand.
Be sure your use of grammatical conventions is consistent across your brand materials (including your website).
Applying your brand style guide to your Squarespace website
Once you’ve created your own brand style guide, you can easily apply it to your Squarespace website via the Site Styles editor—that’s where you’ll update your site fonts, colors, and more.
Need help developing your brand guidelines or incorporating them into your Squarespace website?