Last Updated: April 2024 | Stage 2: Get Online | Blueprint Step 2.19
---
You've just spent £300 on new business cards. They arrive, and the blue doesn't match your website. Your social media graphics use a different font from your email signature. A freelance designer asks, "What's your brand colour?" and you reply, "Um... blue-ish?"
This isn't a branding crisis. It's a documentation problem.
Every time someone creates something for your business—whether it's you, a contractor, or a printing company—they're making visual decisions. Without a simple reference document, those decisions are guesses. Different guesses create inconsistency. Inconsistency erodes trust.
The solution isn't a 50-page corporate brand manual. It's a single-page style guide that answers five essential questions: What does our logo look like? What are our exact colours? What fonts do we use? What kind of images represent us? How do we sound?
This guide will help you create that document in under an hour. Not a design degree required. Not a corporate rebrand. Just a practical reference that stops the guessing and starts the consistency.
What You'll Have When Done:
A 1-page Brand Style Guide populated with your logo, colours (with HEX codes), fonts, and tone of voice.
Time Needed: 45 minutes
Difficulty: Confident
Prerequisites:
On this page:
---
Before You Start, Make Sure You Have:
If you just need the framework populated quickly, follow these five steps:
Step 1: Download the Template
Grab the Simple Brand Style Guide Template (available as a Google Doc or Canva template). This gives you the structure—you just fill in the blanks.
Step 2: Add Your Logo
Paste your logo into the designated section. If you have multiple versions (full colour, black, white), include all of them with a note about when to use each.
Step 3: Extract Your Colour Codes
Open your logo or website in Canva's colour picker or use a Chrome extension like ColorZilla. Click on your primary brand colour and copy the HEX code (it looks like #3B82F6). Paste it into the template.
Do the same for your secondary colour if you have one.
Step 4: Document Your Fonts
Write down the name of your header font (the one used for titles) and your body font (the one used for paragraphs). If you're not sure, check your website's settings or use a browser extension like WhatFont.
Step 5: Add Your Tone of Voice
Copy your one-sentence tone of voice statement from Choose Your Tone of Voice into the template. This reminds anyone using the guide how your brand should sound, not just look.
Quick Validation Checklist:
Test: Could you send this to a freelance designer right now and they'd know what colours and fonts to use? If yes, you're done with the quick version.
✅ Completed the quick version? If you only needed the placeholders, move on to Choose Photos & Visuals That Don't Look Cheap or continue below for the detailed walkthrough on defining usage rules and ensuring nothing gets misused.
---
The quick version gives you a functional document. This section makes it bulletproof—clear enough that even someone who's never worked with your business before can create on-brand materials without asking follow-up questions.
Your logo is the most recognisable element of your brand. It's also the most commonly misused.
What to Document:
Minimum Size: Specify the smallest size your logo should ever appear. For print, this is usually 25mm wide. For digital, 150 pixels wide. Below this, details become illegible.
Clear Space: Define the minimum empty space that must surround your logo. A common rule is to use the height of one letter from your logo name as the buffer zone. This prevents other elements from crowding it.
Acceptable Variations: If you have a full-colour version, a black version, and a white version, show all three. Label when to use each:
Unacceptable Uses: Show examples of what NOT to do:
[MEDIA:IMAGE:logo-usage-do-dont]
Caption: Examples of correct logo application (left) vs. incorrect usage (right). Notice how stretching, wrong backgrounds, and colour changes damage brand recognition.
If you're still developing your understanding of how branding works at a foundational level, review Brand Basics for Micro Businesses for context on why these rules matter.
---
Colours are where inconsistency becomes most obvious. "Blue" isn't specific enough. There are thousands of blues. Your brand uses one specific blue, and it has a code.
What to Document:
Primary Colour: This is your main brand colour. The one that appears in your logo, on your website header, in your social media graphics.
For this colour, document three codes:
How to Find These Codes:
If you already have a logo or website, use a colour picker tool:
If you're choosing colours from scratch, read Colour Psychology for Small Businesses to understand why you chose that colour in the first place. Colour isn't arbitrary—it communicates emotion and industry positioning.
[MEDIA:SCREENSHOT:color-picker-hex]
Caption: Using Canva's colour picker to extract exact HEX codes from an existing logo. The tool automatically provides HEX, RGB, and CMYK values.
Secondary Colour (Optional): If you use a second colour regularly (for buttons, accents, or highlights), document it the same way. Most micro businesses only need one or two colours. More than three becomes difficult to manage consistently.
Neutral Colours: Document your standard text colour (usually a dark grey, not pure black) and your background colour (usually white or a very light grey). These seem obvious, but specifying them prevents designers from making arbitrary choices.
---
Fonts communicate as much as colours. A law firm using Comic Sans would lose credibility instantly. A children's entertainer using Times New Roman would seem boring.
What to Document:
Primary Font (Headers): This is the font used for titles, headings, and any large text. It's usually more distinctive and personality-driven.
Example: "Montserrat Bold for all H1 and H2 headings"
Secondary Font (Body Copy): This is the font used for paragraphs, descriptions, and any text people need to read in quantity. It should be highly legible.
Example: "Open Sans Regular for all body text"
Where to Find Professional Fonts:
Don't use obscure fonts that only exist on your computer. Use web-safe fonts or Google Fonts—they're free, professional, and work across all platforms.
If your chosen fonts clash or look unprofessional together, use a tool like FontJoy to find complementary pairings automatically.
Font Sizes and Weights:
Specify the hierarchy:
This prevents the common mistake of making everything the same size, which eliminates visual hierarchy and makes content harder to scan.
For a deeper understanding of why font choices matter, read Typography Fundamentals.
NetNav Integration: Since typography and colour contrast are crucial for accessibility, this is one of the checks NetNav runs automatically across your whole site. If you use the wrong colour against a white background, or if your font size is too small for readability, NetNav will flag it immediately during your 60-second audit.
---
Your photos and graphics need to feel consistent too. Are they bright and energetic, or calm and professional? Are they stock photos or real images of your work?
What to Document:
Image Style: Describe the look and feel in 2-3 sentences.
Example: "Bright, natural-light photos featuring real people. Avoid overly staged corporate stock photos. Prefer candid moments over posed portraits."
Colour Treatment: Should images be full-colour, black and white, or filtered with a specific tone?
Subject Matter: What should images show? Your products? Your customers using your products? Your team? Your workspace?
Stock vs. Real: Decide your policy. Stock photos are faster and cheaper, but real photos build more trust. For guidance on when to use which, read Stock Photos vs. Real Photos: When to Use Which.
Consistency Rule: Whatever you choose, apply it everywhere. Don't mix black-and-white photos on your website with full-colour photos on social media. The style should be recognisable across all platforms.
---
Your style guide isn't just visual—it's verbal too. How your brand sounds is as important as how it looks.
What to Document:
Copy your tone of voice statement from Choose Your Tone of Voice into this section.
Example: "Friendly and approachable, but knowledgeable. We explain complex ideas in simple language. We never talk down to customers or use jargon without explanation."
Add 3-5 specific language rules:
This ensures that anyone writing for your business—whether it's a social media post, a website page, or an email—sounds like the same brand.
---
Complete Guide Validation Checklist:
Test: Could you hand this guide to a freelance designer, a printer, and a copywriter, and all three would create materials that look and sound like the same brand? If yes, your style guide is complete.
🎉 Completed? Your style guide is formalised, documented, and ready to be implemented. You're now ready to move on to Choose Photos & Visuals That Don't Look Cheap, where you'll start selecting the actual imagery that aligns with the rules you've just defined.
---
Common Problems and Fixes:
Problem: "I don't know my exact HEX or RGB codes—I just know it's 'blue.'"
Fix: Use a free online colour picker tool. Upload your logo to Canva, click on the colour, and it will show you the exact HEX, RGB, and CMYK codes. Alternatively, use the ColorZilla Chrome extension to click directly on your website and extract the colour code from any element.
---
Problem: "I included too many rules and now it feels like a 50-page corporate manual."
Fix: Cut it back to the five essentials: Logo, Primary Colour, Secondary Colour, Header Font, Body Font. If you're writing more than one page, you're overthinking it. The goal is a quick reference, not a comprehensive brand bible. Save the detailed guidelines for when you're a £10M company with a full marketing team.
---
Problem: "My chosen fonts clash or look unprofessional together."
Fix: Limit yourself to Google Fonts or system fonts (Arial, Georgia, Helvetica). Use a tool like FontJoy to automatically generate complementary font pairings. A safe rule: pair a distinctive header font with a simple, readable body font. Don't use two decorative fonts together.
---
Problem: "I've documented everything, but my existing website and social media don't match the new rules."
Fix: That's normal. This guide is your new standard going forward. You don't need to redesign everything overnight. Start applying the new rules to new materials, and update old materials gradually as you have time. Prioritise high-visibility items first (homepage, social media profile images, email signature).
---
You've completed one of the most valuable foundational steps in building a professional online presence. Your brand now has documented visual and verbal rules that ensure consistency across every customer touchpoint.
Immediate Next Step:
Move on to Choose Photos & Visuals That Don't Look Cheap. Now that you've defined your visual style, you need to select or create the actual images that bring it to life.
Apply Your Style Guide:
Once you have your images, you'll use this guide to ensure everything you create—from your homepage to your social media posts—looks and sounds like the same brand. For practical application, review DIY Graphic Design with Canva to learn how to use a simple free tool to create on-brand graphics.
---
Anatomy of a High-Converting Homepage
For a deeper look at how a consistent style guide translates to high-performing web pages, review the anatomy of what makes a homepage convert visitors into customers.
How to Do a Simple Website Audit Yourself
Once your style guide is complete, use a self-audit checklist to verify that your existing website assets comply with the new rules. This helps you identify inconsistencies before customers notice them.
---
Building your online presence is a step-by-step process. Here are the other guides in this stage:
---
You've completed the critical step of defining your brand style. Now, make sure your actual website assets comply.
NetNav can audit your entire site across 9 pillars in 60 seconds—checking for colour contrast issues, inconsistent fonts, broken images, and dozens of other technical and branding problems that damage credibility.
See what else needs immediate attention before launch.
Run Your Free 60-Second Audit →
---
Next Article: Choose Photos & Visuals That Don't Look Cheap
Previous Article: Create Simple Consistent Key Messages
Previous in sequence
Next in sequence
Other Start Here Guides:
Not sure where to start? Get a free audit of your current online presence and discover your biggest opportunities.
Run Your Free NetNav Audit Now →