Style guide and branding kit
What this deliverable is
A style guide is an internal document that codifies every visual and verbal decision for a brand. It exists so that anyone — a hired designer, a social media intern, an AI tool — could produce content that looks and sounds like it came from the same organization.
Without one, brand output drifts. Colors get slightly wrong. The font changes. The tone swings between formal and casual. The style guide prevents that.
What to include
1. Logo and mark rules
Document how the logo can and cannot be used. This means:
- The approved versions of the logo (full color, white-on-dark, black-on-light, icon-only)
- Minimum size requirements
- Clear space (the buffer zone around the logo where nothing else can appear)
- What not to do: stretch it, recolor it, add a drop shadow, place it on a busy background
Example:
The Grounds for Change wordmark must always appear in Espresso Brown (#3D2B1F) or white. The minimum width is 120px for digital use. Maintain at least 16px of clear space on all sides. Do not rotate, skew, or apply any effect to the logo.
2. Color palette
Define exact hex codes, not just “warm brown” or “cream.” Include:
- Primary colors (2-3 max)
- Secondary/accent colors (1-2)
- Neutral colors for backgrounds and text
- Usage notes for each
Example — Grounds for Change:
| Role | Color | Hex |
|---|---|---|
| Primary | Espresso brown | #3D2B1F |
| Secondary | Oat cream | #D4A96A |
| Background | Warm white | #F5F0E8 |
| Text | Near-black | #1A1A1A |
| Accent | Sage green | #5C7C5F |
Usage notes:
- Espresso brown: headlines, logos, dark backgrounds
- Oat cream: buttons, highlights, pull quotes
- Never use Espresso brown text on Sage green backgrounds — contrast ratio fails accessibility standards
3. Typography
Name the exact fonts and the rules for using them. Specify:
- Headline font — name, weight, and when to use it
- Body font — name, weight, and size range
- Any supporting fonts
- What’s forbidden (e.g., “never use more than two typefaces in a single design”)
Example:
| Role | Font | Weight | Size range |
|---|---|---|---|
| Headlines | Playfair Display | Bold (700) | 28–64px |
| Subheadings | Playfair Display | Regular (400) italic | 18–24px |
| Body copy | Inter | Regular (400) | 14–18px |
| Captions | Inter | Medium (500) | 11–13px |
Rules:
- Headlines are sentence case only — never ALL CAPS
- Body text line height: 1.6–1.7
- Never use Playfair Display below 16px — the serifs become unreadable
4. Voice and tone
This is often the most overlooked section — and the most important. Define what the brand sounds like in writing.
Break this into two parts:
Voice is consistent. It’s who the brand is, always.
Grounds for Change is knowledgeable without being pretentious, warm without being cloying, and direct without being blunt. We know a lot about coffee, but we never make you feel like you don’t.
Tone shifts by context. Define it for at least three situations:
| Situation | Tone | Example |
|---|---|---|
| Social media | Casual, curious | “Finally got the pH balance right on this cold brew. Game changer.” |
| Apology/issue | Sincere, accountable | “We made an error with Tuesday’s order. Here’s how we’re making it right.” |
| Product description | Sensory, specific | “Notes of dark chocolate and dried cherry, with a clean, bright finish.” |
5. Grammar and mechanics rules
Write down the decisions your brand has made about language. These feel small but matter enormously for consistency.
Example:
- Always lowercase “espresso” in body copy — it’s not a proper noun
- Use “latte” not “café latte” in product names
- Spell out numbers one through nine; use numerals for 10 and above
- No exclamation marks in product descriptions — they undercut the confident tone
- Oxford comma: yes, always
- Em dashes over parentheses for asides — this is how we build rhythm
6. Image and photography style
Describe the visual aesthetic for photos and graphics.
Example:
Photography: natural light only. No flash. Warm tones, never cool. Show hands, textures, steam — not staged smiles. Avoid stock photos. If we use a photo of a person, they should look like someone who actually comes here.
Graphics: flat illustration style. Limited color palette (max 3 colors per graphic). No gradients. No drop shadows.
What “done” looks like
A complete style guide should be a standalone document. Hand it to someone who knows nothing about your organization and they should be able to design a new flyer, write a new Instagram caption, or produce a new menu without asking you any questions.
Strong style guides run 10-20 pages. Weak ones say things like “keep it professional” — that means nothing.
Common mistakes
- Vague voice descriptors. “Friendly, professional, and approachable” describes every brand. Be specific about what you sound like and what you don’t.
- Missing negative examples. The most useful part of a logo guide is the “don’t do this” section. Include it.
- Skipping accessibility. Check that your color combinations meet WCAG AA contrast ratios. Tools like WebAIM Contrast Checker take 30 seconds.
- Fonts without sizes. “Use Playfair Display for headlines” is incomplete. What size? What weight? For web or print?
Tools
- Google Fonts — free, web-ready fonts
- Coolors — palette builder with hex export
- WebAIM Contrast Checker — accessibility testing
- Canva Brand Kit — store colors, fonts, and logos for quick access