Style Guide
Definition
A document that defines the visual and written standards for a website, including colours, fonts, and tone of voice.
What is a Style Guide?
A style guide is a reference document that outlines the visual and written standards for your website or brand. It ensures everyone creating content or designs follows the same rules, keeping everything consistent.
Style guides can cover visual elements (colours, fonts, logos) and written content (tone of voice, grammar preferences, terminology).
Visual Style Guide Elements
Colours
- Primary and secondary brand colours with hex codes
- When to use each colour
- Colour combinations to avoid
Typography
- Font families for headings and body text
- Size scales and line heights
- When to use bold, italic, or different weights
Logo Usage
- Minimum sizes and clear space requirements
- Acceptable colour variations
- How not to use the logo
Imagery
- Photography style (light, moody, candid, staged)
- Illustration guidelines if applicable
- Image dimensions for different uses
Written Style Guide Elements
- Tone of voice - Professional, friendly, technical, casual?
- Grammar preferences - Oxford comma? UK or US spellings?
- Terminology - What you call things (customers vs clients vs users)
- Formatting - How to write dates, phone numbers, addresses
Why You Need One
Without a style guide, different team members make different choices. Your social posts look different from your website. Blog posts vary wildly in tone. Over time, your brand becomes diluted and confusing.
A style guide keeps everyone aligned, even as your team grows or changes.