designcommunication
Brand Guidelines
Create brand guidelines documents — defining logo usage, color palettes, typography, voice/tone, imagery style, and application rules that maintain brand consistency across all touchpoints.
brandguidelinesidentityvisual-designvoice-toneconsistency
Works well with agents
Works well with skills
brand-guidelines/
SKILL.md
Markdown| 1 | |
| 2 | # Brand Guidelines |
| 3 | |
| 4 | ## Before you start |
| 5 | |
| 6 | Gather the following from the user. If anything is missing, ask before proceeding: |
| 7 | |
| 8 | 1. **What is the brand?** (Company name, product name, or sub-brand) |
| 9 | 2. **Does a brand exist already?** (Existing assets, logos, colors, or greenfield) |
| 10 | 3. **Who is the target audience?** (Demographics, psychographics, B2B vs. B2C) |
| 11 | 4. **What are the brand values?** (3-5 core values the brand should communicate) |
| 12 | 5. **Who will use these guidelines?** (Internal team, agencies, partners, community) |
| 13 | 6. **What touchpoints must be covered?** (Web, mobile, print, social, email, packaging) |
| 14 | |
| 15 | If the user only provides a logo and says "write guidelines around this," push back: guidelines without defined brand values and audience produce rules without rationale. |
| 16 | |
| 17 | ## Brand guidelines template |
| 18 | |
| 19 | ### 1. Brand Foundation |
| 20 | |
| 21 | ``` |
| 22 | Brand Mission: [One sentence — what the brand exists to do] |
| 23 | Brand Values: [3-5 values with one-line descriptions] |
| 24 | Brand Personality: [3-5 adjectives that describe how the brand feels] |
| 25 | Positioning: [One sentence — how the brand differs from alternatives] |
| 26 | ``` |
| 27 | |
| 28 | Place the brand on each personality axis: |
| 29 | |
| 30 | ``` |
| 31 | | Axis | Left End | Position | Right End | |
| 32 | |------------|---------------|------------|---------------| |
| 33 | | Tone | Formal | [ X ] | Casual | |
| 34 | | Energy | Calm | [ X] | Energetic | |
| 35 | | Approach | Traditional | [X ] | Innovative | |
| 36 | | Warmth | Professional | [ X ] | Friendly | |
| 37 | ``` |
| 38 | |
| 39 | ### 2. Logo Usage |
| 40 | |
| 41 | Define the logo system: primary logo, logo mark (icon only), wordmark (text only). Specify minimum size, clear space (defined by a unit like "height of the letter X"), and approved variations (full color, single color, reversed, monochrome). |
| 42 | |
| 43 | Document what is not allowed: do not rotate, skew, recolor, add effects, place on busy backgrounds, or recreate the logo. Use provided files only. |
| 44 | |
| 45 | ### 3. Color Palette |
| 46 | |
| 47 | ``` |
| 48 | | Color Name | Role | HEX | RGB | Usage | |
| 49 | |--------------|------------|---------|---------------|---------------------------------| |
| 50 | | Brand Blue | Primary | #1A56DB | 26, 86, 219 | CTAs, headings, key UI elements | |
| 51 | | Brand Navy | Primary | #0B1F45 | 11, 31, 69 | Backgrounds, text | |
| 52 | | Neutral 900 | Neutral | #111827 | 17, 24, 39 | Body text | |
| 53 | | Neutral 100 | Neutral | #F3F4F6 | 243, 244, 246 | Backgrounds | |
| 54 | | Success Green| Functional | #059669 | 5, 150, 105 | Success states only | |
| 55 | | Error Red | Functional | #DC2626 | 220, 38, 38 | Error states only | |
| 56 | ``` |
| 57 | |
| 58 | Rules: primary colors dominate (60-70%), secondary accent (20-30%), functional colors reserved for UI states only. All text-on-background combinations must meet WCAG 2.1 AA contrast ratios (4.5:1 body, 3:1 large text). |
| 59 | |
| 60 | ### 4. Typography |
| 61 | |
| 62 | ``` |
| 63 | | Use Case | Typeface | Weight | Size Range | Line Height | |
| 64 | |--------------|----------|------------|------------|-------------| |
| 65 | | H1 headings | Inter | Bold (700) | 36-48px | 1.1 | |
| 66 | | H2 headings | Inter | Semibold | 28-32px | 1.2 | |
| 67 | | Body text | Inter | Regular | 16-18px | 1.5 | |
| 68 | | Code | JetBrains Mono | Regular | 14-16px | 1.6 | |
| 69 | ``` |
| 70 | |
| 71 | Specify fallback font stacks. Define hierarchy rules: never skip heading levels, maintain consistent spacing. |
| 72 | |
| 73 | ### 5. Voice and Tone |
| 74 | |
| 75 | Voice is constant; tone adjusts by context. |
| 76 | |
| 77 | ``` |
| 78 | Voice (always): |
| 79 | - Clear over clever — say what we mean without jargon |
| 80 | - Confident but not arrogant — know our strengths without belittling alternatives |
| 81 | - Helpful first — every communication leaves the reader better informed |
| 82 | |
| 83 | Tone by context: |
| 84 | | Context | Tone | Example | |
| 85 | |-----------------|-------------------------------|-----------------------------------| |
| 86 | | Marketing | Energetic, aspirational | "Ship faster with confidence" | |
| 87 | | Error message | Calm, helpful, blame-free | "Something went wrong. Try again."| |
| 88 | | Documentation | Precise, neutral | "Run the following command to..." | |
| 89 | | Crisis comms | Direct, empathetic, factual | "Here is what happened and..." | |
| 90 | ``` |
| 91 | |
| 92 | Include a "We say / We don't say" table with 4-6 concrete examples. |
| 93 | |
| 94 | ### 6. Application Rules |
| 95 | |
| 96 | Show how elements combine across touchpoints: website header, email signature, social avatar, presentations, print. Specify which logo variant, colors, and typography apply to each. |
| 97 | |
| 98 | ## Quality checklist |
| 99 | |
| 100 | Before delivering brand guidelines, verify: |
| 101 | |
| 102 | - [ ] Brand values and personality are defined before visual rules |
| 103 | - [ ] Logo usage includes minimum size, clear space, approved variations, and don'ts |
| 104 | - [ ] Color palette includes exact values (HEX, RGB) and usage rules |
| 105 | - [ ] All text/background combinations meet WCAG 2.1 AA contrast ratios |
| 106 | - [ ] Typography specifies typeface, weights, sizes, and fallback stacks |
| 107 | - [ ] Voice is defined as constants and tone adjusts by context with examples |
| 108 | - [ ] Guidelines are usable by someone outside the core team without additional context |
| 109 | |
| 110 | ## Common mistakes |
| 111 | |
| 112 | - **Rules without rationale.** "Use Brand Blue for CTAs" is a rule. "Use Brand Blue for CTAs because it provides the highest contrast" is a guideline. Explain why. |
| 113 | - **Colors without exact values.** "Our blue" means different things on every screen. Provide HEX, RGB, and HSL. |
| 114 | - **Ignoring dark mode and accessibility.** If your product has dark mode, guidelines must cover both themes. |
| 115 | - **Voice guidelines as personality traits.** "We are innovative" tells a writer nothing. Show before/after copy examples. |
| 116 | - **Static PDF nobody updates.** Brand guidelines in a PDF from 2019 are not followed. Make them accessible and maintained. |
| 117 | - **No don'ts.** Guidelines that only show correct usage leave room for creative misinterpretation. |
| 118 |