A brand style guide (also called a brand guideline) is the single document that collects a brand's visual rules: how the logo may be used, which colors are valid, how typography is applied and what should never be done. A well-made guide takes the brand identity out of one designer's head and turns it into a reproducible system that anyone can follow. In this article I walk through how to build such a guide from scratch — which sections it needs and how much detail each one deserves.
What a style guide is for
A brand is rarely applied by a single person; over time many hands touch it. A social post, an invoice, a website, a sign or an ad all come from different sources. Without written rules, everyone picks a slightly different logo color, a slightly different spacing and whatever font they like — and the brand slowly falls apart. A style guide prevents that drift:
- Consistency: the brand looks the same at every touchpoint, which builds recognition and trust.
- Speed: when you create a new design or piece of content, the decisions are already made; you don't re-argue them from scratch.
- Hand-off: a new team member, agency or printer can open the document and stay faithful to the brand.
You can publish the guide as a PDF, a shared page (Figma, Notion) or a simple web page. The format matters less than having content that is clear and backed by examples.
Logo usage rules
The logo section is usually the heart of the guide, because that's where most mistakes happen. Start by showing every valid version of the logo: horizontal and vertical lockups, the symbol alone, light-background and dark-background variants, and a single-color (black/white) version if needed. State in one line where each one should be used.
Two rules appear in almost every guide and should be shown visually:
- Clear space: the minimum empty space that must surround the logo. It's usually defined relative to an element of the logo (for example the height of the symbol or a letter's x-height), so the rule stays valid when the logo is scaled up or down.
- Minimum size: the smallest size at which the logo stays legible (for example 24px height on screen, 15mm width in print). Below that the logo breaks down.
Also add a misuse ("don'ts") list and show it with visual examples: stretching the logo, distorting its proportions, changing its color without permission, adding shadows or effects, placing it on a busy photo with no contrast, or rotating it. "Don't" examples are often more effective than long explanations.
Color palette and color codes
The color section defines the brand's colors with exact values for both screen and print. If you want the same blue to look identical on the web and in a brochure, you have to specify each color in different color spaces:
- HEX and RGB — digital (web, apps, screens).
- CMYK — print (brochures, business cards, signage).
- If needed, Pantone (PMS) — a reference for spot-color and single-color print jobs.
Organize the palette by role: one or two primary colors, an accent color, and a few neutrals (for text and background). On the web side, defining these colors as variables is a practical way to keep both the document and the code in one source:
:root {
--brand-primary: #1f6feb; /* primary */
--brand-accent: #ffb020; /* accent */
--brand-ink: #11151c; /* text */
--brand-paper: #f7f8fa; /* surface */
}Make accessibility part of the rules too: the contrast ratio between text and background is critical for legibility. WCAG recommends a contrast of at least 4.5:1 for normal-size text. State clearly in the guide which color combinations may be used for text and which are decorative only.
Typography rules
The typography section defines the brand's fonts and how to use them. First list the typefaces: one for headings, one for body text (two are usually enough). If you need different fonts for web and print, note the equivalents. Then provide a typographic scale so every page shares the same hierarchy:
- Font families: with their names, weights (light/regular/bold) and license details.
- Hierarchy: size and weight values for headings, subheadings, body and small text.
- Line height and spacing: details that drive legibility but are often skipped.
On the web, tying typography to code is a good habit:
:root {
--font-head: "Sora", system-ui, sans-serif;
--font-body: "Inter", system-ui, sans-serif;
--step-h1: 2rem; /* 32px */
--step-h2: 1.5rem; /* 24px */
--step-body: 1rem; /* 16px */
--leading-body: 1.6;
}Watch the license on fonts: sources like Google Fonts are free for web and most commercial use, but if you bought a typeface, note its usage scope in the guide so the team doesn't accidentally step outside the license.
Supporting elements and tone of voice
Logo, color and typography are the core, but a few extra sections make a guide complete. Depending on the brand you can add:
- Iconography: the icon style (line or filled, corner radius, stroke weight), so icons from different sources still look like one set.
- Photo / illustration style: examples of the tone and atmosphere of imagery to use.
- Spacing and grid: the base unit used for layout (for example an 8px-based system).
- Tone of voice: how the brand speaks — with "we say this / we don't say that" examples.
These sections turn the brand into a whole that not only "looks right" but "feels right." Feeding them all from the same personality (the brand's three to five adjectives) is the key to consistency.
Keeping the guide alive
A style guide is not a document that's done the day it's written. As the brand grows, new situations appear: a new social platform, a new product, a new language. Put a version number and date on the guide, log the changes, and keep the file in one place the team can easily reach. The single-source-of-truth principle applies here too: everyone should look at the same, up-to-date document.
The point of the guide isn't to enforce rules like a strict police officer; it's to remove the uncertainty that stands in the way of building a consistent, strong and recognizable brand. Clear rules, paradoxically, make creativity easier, because the foundational decisions are made and you can spend your energy on the actual work.
Frequently Asked Questions
Is a brand style guide the same as a brand identity?
No. The brand identity is the whole made up of elements like logo, color, typography and tone of voice; the style guide is the rules file that documents how those elements are used. Identity answers "what," the guide answers "how."
Does a small brand really need a comprehensive guide?
No, the scope scales with the brand. For a small brand, even a few-page document covering logo variants, clear space, color codes and a typographic scale makes a big difference. What matters is not the page count but the clarity of the rules.
What format should I make the guide in?
It depends on the brand and the team. A PDF is easy to share; a live page like Figma or Notion makes updates easier; a web page becomes a direct reference for the web team. In most cases a combination of a PDF plus a shared live file works well.
Need a style guide for your brand from scratch? I can capture logo usage, color codes and typography rules in a consistent, usable document so your team can stay on brand with ease. To talk through your project, get in touch.