Brand Guidelines

Brand Guidelines

Brand is not decoration — it is recognition. Every time a user encounters your product, email, presentation, or doc, they either build trust or erode it. Consistency builds trust. Inconsistency erodes it.

This skill applies brand identity across any artifact: presentations, documents, emails, landing pages, marketing copy, UI components, or any written content. It covers both visual identity (colors, fonts, spacing) and verbal identity (voice, tone, word choices).

---

Brand Guidelines Principles

• Consistency is the work. One perfectly on-brand artifact is easy. Applying the same standards to the 50th artifact in a quarter is the actual challenge. Document decisions so they can be applied without re-inventing each time.
• Brand is a system, not a vibe. "Make it feel premium" is not actionable. "Use Playfair Display at 40pt for headlines, #1A1A2E for text, and never use more than two typeface weights on a page" is actionable.
• Voice is harder than colors. Anyone can apply a hex code. Writing in a consistent voice — warm but not casual, authoritative but not cold — requires explicit rules and examples.
• Exceptions must be deliberate. Breaking brand rules is sometimes right (a playful social post, a technical doc for developers). But it must be a conscious choice, not an accident.
• When in doubt, ask for the guidelines. Never invent brand colors or voice. If the user hasn't shared guidelines, ask. A wrong brand color is worse than no color.

---

Step 0: Gather Brand Assets

Before applying anything, collect:

1. Color palette — primary, secondary, accent, neutral, semantic (success/error/warning)
2. Typography — headline font, body font, monospace font, sizes, weights, line heights
3. Logo — file format, clear space rules, do/don't use cases
4. Voice and tone guidelines — adjectives that describe the brand voice, examples of good/bad copy
5. Imagery style — photography direction, illustration style, icon style
6. Spacing and layout rules — grid system, margins, component spacing

If the user has a brand guide document, ask them to share it. If they only have partial guidelines, ask the targeted questions above and document what they provide.

---

Visual Identity Application

Color System

Define and apply colors as a semantic system — never use raw hex values scattered throughout:

PRIMARY PALETTE
━━━━━━━━━━━━━━
Primary:     #[hex]  — Main CTAs, key UI elements, headlines
Primary Dark:#[hex]  — Hover states, dark mode accents
Primary Light:#[hex] — Backgrounds, subtle highlights

SECONDARY PALETTE
━━━━━━━━━━━━━━━━
Secondary:   #[hex]  — Supporting elements, secondary CTAs
Accent:      #[hex]  — Highlights, callouts, badges

NEUTRAL PALETTE
━━━━━━━━━━━━━━
Text Primary:  #[hex]  — Body text, labels
Text Secondary:#[hex]  — Captions, metadata, muted text
Background:    #[hex]  — Page/slide background
Surface:       #[hex]  — Cards, panels, modal backgrounds
Border:        #[hex]  — Dividers, input borders

SEMANTIC COLORS
━━━━━━━━━━━━━━
Success: #[hex]  — Confirmations, completed states
Warning: #[hex]  — Caution states, pending items
Error:   #[hex]  — Errors, destructive actions
Info:    #[hex]  — Informational states, tips

Contrast requirements (WCAG AA minimum):

• Normal text (< 18pt): 4.5:1 contrast ratio against background
• Large text (≥ 18pt or 14pt bold): 3:1 contrast ratio
• UI components and icons: 3:1 contrast ratio

Check contrast: https://webaim.org/resources/contrastchecker/

Typography System

TYPEFACE STACK
━━━━━━━━━━━━━
Heading:    [Font Name], [fallback], sans-serif
Body:       [Font Name], [fallback], serif
Monospace:  [Font Name], [fallback], monospace

TYPE SCALE
━━━━━━━━━━
Display:    48–64px / 1.1 line-height / -0.02em tracking
H1:         36–40px / 1.15 line-height / -0.01em tracking
H2:         28–32px / 1.2 line-height / -0.01em tracking
H3:         22–24px / 1.25 line-height / 0em tracking
H4:         18–20px / 1.3 line-height / 0em tracking
Body Large: 18px / 1.6 line-height / 0em tracking
Body:       16px / 1.6 line-height / 0em tracking
Body Small: 14px / 1.5 line-height / 0em tracking
Caption:    12px / 1.4 line-height / 0.02em tracking

FONT WEIGHTS
━━━━━━━━━━━
Use maximum 2 weights per design:
Regular (400): body text
Medium (500):  labels, UI elements
SemiBold (600):subheadings
Bold (700):    headlines, emphasis

Applying to Presentations (PPTX)

from pptx.dml.color import RGBColor
from pptx.util import Pt

# Brand colors (never use # prefix in pptxgenjs)
BRAND = {
    "primary":     RGBColor(0x1A, 0x1A, 0x2E),
    "accent":      RGBColor(0xE9, 0x4F, 0x37),
    "light":       RGBColor(0xF8, 0xF9, 0xFA),
    "text":        RGBColor(0x21, 0x25, 0x29),
    "text_muted":  RGBColor(0x6C, 0x75, 0x7D),
}

def apply_brand_text(run, style: str = "body"):
    """Apply brand typography to a text run."""
    if style == "heading":
        run.font.name = "Poppins"       # or brand heading font
        run.font.bold = True
        run.font.color.rgb = BRAND["text"]
    elif style == "body":
        run.font.name = "Lora"          # or brand body font
        run.font.bold = False
        run.font.color.rgb = BRAND["text"]
    elif style == "accent":
        run.font.name = "Poppins"
        run.font.bold = True
        run.font.color.rgb = BRAND["accent"]

Applying to HTML/CSS

/* Brand Design Tokens */
:root {
  /* Colors */
  --color-primary:       #1A1A2E;
  --color-primary-dark:  #0F0F1A;
  --color-accent:        #E94F37;
  --color-background:    #FFFFFF;
  --color-surface:       #F8F9FA;
  --color-text:          #212529;
  --color-text-muted:    #6C757D;
  --color-border:        #DEE2E6;

  /* Typography */
  --font-heading:        'Poppins', Arial, sans-serif;
  --font-body:           'Lora', Georgia, serif;

  /* Spacing scale (4px base) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  color: var(--color-primary);
  line-height: 1.2;
}

body, p, li {
  font-family: var(--font-body);
  color: var(--color-text);
  line-height: 1.6;
}

---

Verbal Identity (Voice & Tone)

Visual brand is only half the work. Voice consistency is what makes written content feel on-brand.

Defining Brand Voice

Document voice along four axes. Rate each 1–5:

| Axis | 1 | 5 | |---|---|---| | Formal ↔ Casual | Legal/corporate | Conversational/friendly | | Serious ↔ Playful | Clinical precision | Wit and humor | | Authoritative ↔ Humble | Expert pronouncements | Collaborative, asking | | Technical ↔ Accessible | Deep jargon | Plain language |

Example: Stripe = Formal(3) Serious(3) Authoritative(4) Technical(3) — precise but human, expert but not arrogant.

Voice Application Rules

For each brand voice, create explicit do/don't rules:

BRAND VOICE: [Company Name]
━━━━━━━━━━━━━━━━━━━━━━━━━
We are:   [3 adjectives]
We aren't:[3 adjectives]

DO:
✅ Use active voice: "We help teams ship faster" not "Teams are helped to ship faster"
✅ Lead with user benefit: "You get X" not "We provide X"
✅ Be specific: "Reduces deploy time by 40%" not "Significantly faster"
✅ Use contractions: "you'll", "we're", "it's" — sounds human
✅ Address the reader as "you" — direct, personal

DON'T:
❌ Use filler superlatives: "amazing", "incredible", "game-changing"
❌ Use passive voice in marketing copy
❌ Start sentences with "We are excited to announce..."
❌ Use jargon without explanation in user-facing copy
❌ Use ALL CAPS for emphasis — use bold instead
❌ Use more than one exclamation point per page

Tone Adaptation by Context

Brand voice stays constant. Tone adapts to context:

| Context | Tone shift | Example | |---|---|---| | Marketing copy | More energetic, aspirational | "Ship with confidence." | | Error messages | More direct, helpful, calm | "Your session expired. Sign in again to continue." | | Onboarding | Warmer, encouraging | "You're almost ready — just one more step." | | Technical docs | More precise, less personality | "The API returns a 401 status code when..." | | Crisis / incident | Calm, factual, direct | "We identified an issue affecting X users at HH:MM UTC." |

---

Brand Audit Checklist

Run this on any artifact before delivering:

Visual

• [ ] All colors are from the brand palette — no off-brand hex values
• [ ] All fonts are brand-specified fonts (or approved fallbacks)
• [ ] Font sizes follow the type scale — no arbitrary sizes
• [ ] Contrast ratios meet WCAG AA on all text
• [ ] Logo used correctly — correct version, correct clear space
• [ ] No unapproved color combinations (e.g., accent on accent)
• [ ] Spacing follows the grid/scale — no random padding values
• [ ] Images match the brand photography/illustration direction

Verbal

• [ ] Voice matches the brand voice profile (formal/casual, serious/playful)
• [ ] No banned words or phrases (per do/don't list)
• [ ] CTAs are specific and active ("Start your free trial" not "Get started")
• [ ] No filler superlatives ("amazing", "revolutionary", "game-changing")
• [ ] Contractions used appropriately for the voice
• [ ] Technical terms defined or linked on first use
• [ ] All copy reviewed for tone match to context

Consistency

• [ ] Same terminology used throughout — no synonym drift ("workspace" vs "project" vs "board")
• [ ] Product names spelled and capitalized correctly every time
• [ ] Date/number formats consistent (US vs EU, $1,000 vs $1.000)

---

Brand Style Reference Card

When guidelines are provided by the user, document them here for reference:

## [Company] Brand Quick Reference

### Colors
| Name | Hex | Use |
|---|---|---|
| Primary | #______ | [use case] |
| Accent | #______ | [use case] |
| Background | #______ | [use case] |
| Text | #______ | [use case] |

### Typography
| Element | Font | Size | Weight |
|---|---|---|---|
| Headline | | | |
| Subheading | | | |
| Body | | | |
| Caption | | | |

### Voice
- Tone: [adjectives]
- Do: [key dos]
- Don't: [key don'ts]

### Logo Rules
- Minimum size: [px or mm]
- Clear space: [measurement]
- Approved on: [white / dark / brand color]
- Never: [common misuses]

---

Definition of Done — Brand Guidelines

• [ ] Brand palette documented with named tokens and hex values
• [ ] Typography stack documented with sizes, weights, and line heights
• [ ] Voice profile documented with do/don't examples
• [ ] Tone adaptation defined for at least 3 key contexts
• [ ] All artifacts pass the visual brand audit checklist
• [ ] All copy passes the verbal brand audit checklist
• [ ] Consistency audit done — no synonym drift, no off-brand terminology
• [ ] Brand style reference card updated with any new decisions

Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

• Author: CODE-SAURABH
• Source: CODE-SAURABH/OpenSkills
• License: MIT

Install and usage instructions live in the source repository linked above.