brand-guidelines

Original source / Raw SKILL.md

---
name: brand-guidelines
description: Create and maintain brand guidelines including visual identity, voice and tone, and usage rules. Use for establishing brand standards, style guides, and ensuring brand consistency across materials.
version: 2.0.0
category: communication
last_updated: 2026-01-02
related_skills:
  - theme-factory
  - frontend-design
  - internal-comms
---

# Brand Guidelines Skill

## Overview

This skill guides the creation of comprehensive brand guidelines that ensure consistency across all brand touchpoints. A strong brand guideline document serves as the single source of truth for brand expression.

## When to Use

- Establishing new brand identity
- Documenting existing brand standards
- Creating style guides for teams
- Ensuring brand consistency across materials
- Onboarding designers and content creators
- Rebranding projects

## Quick Start

1. **Define brand foundation** (mission, vision, values, personality)
2. **Document visual identity** (logo, colors, typography)
3. **Establish voice and tone** (writing style, tone variations)
4. **Create usage examples** (do's and don'ts)
5. **Compile assets** (logos, fonts, templates)

```markdown
# [Brand Name] Brand Guidelines

## Brand Foundation
- **Mission:** [Why we exist]
- **Vision:** [Future state we aim to create]
- **Values:** [3-5 core values]
- **Personality:** Confident not arrogant, Expert not elitist

## Visual Identity
- **Primary Color:** #[HEX] (Pantone [XXX])
- **Primary Font:** [Font Name] for headings
- **Logo Usage:** Minimum clear space = logo height

## Voice
- Clear, not clever
- Confident, not arrogant
- Human, not robotic
```

## Brand Guidelines Structure

### Complete Guidelines Template

```markdown
# [Brand Name] Brand Guidelines

**Version:** 1.0
**Last Updated:** [Date]
**Contact:** [Brand Team Contact]

---

## Table of Contents
1. Brand Foundation
2. Logo Usage
3. Color System
4. Typography
5. Imagery & Photography
6. Voice & Tone
7. Applications
8. Do's and Don'ts

---
```

## 1. Brand Foundation

### Mission Statement

```markdown
## Our Mission

[One sentence that captures why the brand exists]

**Example:**
"To empower every person and every organization on the planet to achieve more."
```

### Vision Statement

```markdown
## Our Vision

[One sentence describing the future state the brand aims to create]

**Example:**
"A world where technology adapts to people, not the other way around."
```

### Brand Values

```markdown
## Our Values

### [Value 1]: [One Word]
[2-3 sentences explaining what this means in practice]

### [Value 2]: [One Word]
[2-3 sentences explaining what this means in practice]

### [Value 3]: [One Word]
[2-3 sentences explaining what this means in practice]
```

### Brand Personality

```markdown
## Brand Personality

Our brand is:
- **[Trait 1]** not [opposite]
- **[Trait 2]** not [opposite]
- **[Trait 3]** not [opposite]
- **[Trait 4]** not [opposite]

**Example:**
- **Confident** not arrogant
- **Innovative** not reckless
- **Approachable** not casual
- **Expert** not elitist
```

## 2. Logo Usage

### Primary Logo

```markdown
## Logo

### Primary Logo
[Image of primary logo]

The primary logo should be used in most applications. It includes the full wordmark and icon.

### Logo Variations
- **Full color:** For light backgrounds
- **Reversed:** For dark backgrounds
- **Monochrome:** For single-color applications
- **Icon only:** For small spaces and favicons

### Clear Space
Maintain minimum clear space equal to [X] around all sides of the logo.
[Diagram showing clear space]

### Minimum Size
- **Print:** Minimum width of [X] inches
- **Digital:** Minimum width of [X] pixels
```

### Logo Don'ts

```markdown
## Logo Misuse

Never:
- [X] Stretch or distort the logo
- [X] Change logo colors
- [X] Add effects (shadows, outlines, gradients)
- [X] Rotate the logo
- [X] Place on busy backgrounds
- [X] Recreate or modify the logo
- [X] Use outdated versions

[Include visual examples of each misuse]
```

## 3. Color System

### Color Palette Definition

```markdown
## Color Palette

### Primary Colors

#### [Primary Color Name]
The primary brand color used for key brand elements.

| Format | Value |
|--------|-------|
| HEX | #[XXXXXX] |
| RGB | R, G, B |
| CMYK | C, M, Y, K |
| Pantone | PMS [XXX] |

**Usage:** Logos, primary buttons, key headlines

#### [Secondary Color Name]
Supporting color for accents and variety.

| Format | Value |
|--------|-------|
| HEX | #[XXXXXX] |
| RGB | R, G, B |
| CMYK | C, M, Y, K |
| Pantone | PMS [XXX] |

**Usage:** Secondary buttons, icons, accents

### Neutral Colors

#### [Neutral 1]
| Format | Value |
|--------|-------|
| HEX | #[XXXXXX] |

**Usage:** Body text, backgrounds

[Continue for each neutral shade]

### Semantic Colors

| Purpose | Color | HEX |
|---------|-------|-----|
| Success | [Name] | #[XXXXXX] |
| Warning | [Name] | #[XXXXXX] |
| Error | [Name] | #[XXXXXX] |
| Info | [Name] | #[XXXXXX] |
```

### Color Ratios

```markdown
## Color Usage Ratios

For balanced brand expression:

- **Primary color:** 60% of visual space
- **Secondary color:** 30% of visual space
- **Accent color:** 10% of visual space

### Accessibility
All color combinations must meet WCAG 2.1 AA standards:
- Normal text: 4.5:1 contrast ratio minimum
- Large text: 3:1 contrast ratio minimum
- UI components: 3:1 contrast ratio minimum
```

## 4. Typography

### Type System

```markdown
## Typography

### Primary Typeface: [Font Name]

**Usage:** Headlines, titles, key messaging
**Weights available:** Light, Regular, Medium, Bold, Black
**License:** [License type and restrictions]

**Fallback stack:** [Primary], [System fallback], sans-serif

### Secondary Typeface: [Font Name]

**Usage:** Body copy, long-form content
**Weights available:** Regular, Italic, Bold, Bold Italic
**License:** [License type and restrictions]

**Fallback stack:** [Secondary], [System fallback], serif

### Monospace Typeface: [Font Name]

**Usage:** Code, technical content
**Fallback stack:** [Mono], Menlo, monospace
```

### Type Scale

```markdown
## Type Scale

| Element | Size | Weight | Line Height | Letter Spacing |
|---------|------|--------|-------------|----------------|
| H1 | 48px / 3rem | Bold | 1.2 | -0.02em |
| H2 | 36px / 2.25rem | Bold | 1.25 | -0.01em |
| H3 | 28px / 1.75rem | Medium | 1.3 | 0 |
| H4 | 22px / 1.375rem | Medium | 1.35 | 0 |
| H5 | 18px / 1.125rem | Medium | 1.4 | 0.01em |
| Body | 16px / 1rem | Regular | 1.5 | 0 |
| Small | 14px / 0.875rem | Regular | 1.5 | 0.01em |
| Caption | 12px / 0.75rem | Regular | 1.4 | 0.02em |
```

## 5. Imagery & Photography

### Photography Style

```markdown
## Photography Guidelines

### Style Attributes
- **Lighting:** Natural, warm, authentic
- **Composition:** Rule of thirds, breathing room
- **Color treatment:** Slightly desaturated, warm tones
- **Subjects:** Real people in genuine moments

### Photography Do's
[check] Show diverse, authentic people
[check] Capture genuine emotions
[check] Use natural lighting when possible
[check] Include environmental context
[check] Maintain consistent color treatment

### Photography Don'ts
[X] Overly staged or stock-looking images
[X] Heavy filters or effects
[X] Isolated subjects on white backgrounds
[X] Outdated technology or fashion
[X] Images that could be any brand
```

### Illustration Style

```markdown
## Illustration Guidelines

### Style Characteristics
- **Line weight:** [X]px consistent stroke
- **Corners:** [Rounded/Sharp]
- **Colors:** Limited to brand palette
- **Detail level:** [Minimal/Moderate/Detailed]
- **Perspective:** [Flat/Isometric/3D]

### Icon Style
- **Grid:** [X]px x [X]px
- **Stroke:** [X]px
- **Corners:** [X]px radius
- **Style:** [Outlined/Filled/Duotone]
```

## 6. Voice & Tone

### Brand Voice

```markdown
## Voice & Tone

### Our Voice

We speak with one voice that is:

#### [Voice Attribute 1]: [e.g., Clear]
- We use plain language
- We avoid jargon and buzzwords
- We explain complex ideas simply

**Example:**
- [check] "Connect your accounts in 3 steps"
- [X] "Leverage our seamless integration capabilities"

#### [Voice Attribute 2]: [e.g., Confident]
- We know our value
- We make direct statements
- We avoid hedging language

**Example:**
- [check] "The best way to manage your finances"
- [X] "We think we might be a good option"

#### [Voice Attribute 3]: [e.g., Human]
- We write like we speak
- We use contractions
- We show empathy

**Example:**
- [check] "We're here to help"
- [X] "The company is available to assist"
```

### Tone Variations

```markdown
## Tone by Context

Our tone adapts to the situation while maintaining our voice:

| Context | Tone | Example |
|---------|------|---------|
| Marketing | Inspiring, enthusiastic | "Transform how you work" |
| Product | Helpful, instructive | "Click 'Save' to continue" |
| Support | Empathetic, reassuring | "We understand this is frustrating" |
| Legal | Clear, precise | "Your data is protected by..." |
| Error | Calm, solution-focused | "Let's fix this together" |
| Success | Celebratory, encouraging | "Great job! You're all set" |
```

## 7. Applications

### Digital Applications

```markdown
## Digital Applications

### Website
- Primary navigation: [Font], [Size], [Color]
- Hero headlines: [Font], [Size], [Weight]
- Button style: [Specifications]
- Link color: [HEX]

### Email
- Header: [Template specifications]
- Body font: [Font], [Size]
- Button color: [HEX]
- Footer: [Standard footer text]

### Social Media
- Profile image: [Icon/Logo usage]
- Cover dimensions: [Platform-specific]
- Post templates: [Link to templates]
- Hashtag style: [#BrandHashtag]
```

### Print Applications

```markdown
## Print Applications

### Business Cards
- Size: [Standard or custom]
- Paper: [Stock, weight, finish]
- Layout: [One-sided or two-sided]
[Include template/mockup]

### Letterhead
- Paper: [Stock, weight]
- Logo placement: [Position]
- Margins: [Specifications]
[Include template]

### Presentation Templates
- Aspect ratio: [16:9 or 4:3]
- Title slide: [Layout]
- Content slides: [Layouts]
[Include template link]
```

## 8. Do's and Don'ts Summary

```markdown
## Quick Reference: Do's and Don'ts

### Do [check]
- Use approved logo files only
- Maintain minimum clear space
- Follow the color system
- Use approved fonts
- Write in brand voice
- Use authentic photography
- Check accessibility

### Don't [X]
- Modify the logo
- Create new color variations
- Use unapproved fonts
- Write in passive voice
- Use stock photography cliches
- Ignore contrast requirements
- Deviate without approval
```

## Governance

```markdown
## Brand Governance

### Approval Process
All brand materials require approval from [Brand Team/Contact].

### Requesting Exceptions
For uses not covered in these guidelines:
1. Submit request to [email]
2. Include context and mockups
3. Allow [X] business days for review

### Updating Guidelines
These guidelines are updated [quarterly/annually].
Version history and changelog maintained at [location].

### Questions
Contact: [Brand Team Email]
Slack: #[brand-channel]
```

## Execution Checklist

- [ ] Defined mission, vision, and values
- [ ] Documented brand personality traits
- [ ] Created logo usage guidelines with examples
- [ ] Defined complete color system with accessibility
- [ ] Established typography hierarchy
- [ ] Set photography and illustration style
- [ ] Documented voice attributes with examples
- [ ] Created tone variations by context
- [ ] Provided application examples
- [ ] Included do's and don'ts
- [ ] Established governance process
- [ ] Compiled downloadable assets

## Error Handling

### Common Issues

**Issue: Brand inconsistency across teams**
- Cause: Guidelines not accessible or unclear
- Solution: Central asset library, regular training sessions

**Issue: Logo misuse**
- Cause: Wrong files or unclear rules
- Solution: Provide multiple approved formats, visual misuse examples

**Issue: Off-brand writing**
- Cause: Voice guidelines too abstract
- Solution: Add concrete examples for each voice attribute

**Issue: Color accessibility failures**
- Cause: Using brand colors without checking contrast
- Solution: Pre-approved color combinations, automated checks

## Metrics

| Metric | Target | How to Measure |
|--------|--------|----------------|
| Brand Consistency Score | > 90% | Quarterly audit |
| Asset Library Usage | > 80% of team | Download analytics |
| Guideline Awareness | > 95% | Team survey |
| Accessibility Compliance | 100% | Automated testing |

## Related Skills

- [theme-factory](../../content-design/theme-factory/SKILL.md) - Quick color/font themes
- [frontend-design](../../content-design/frontend-design/SKILL.md) - Web implementation
- [internal-comms](../internal-comms/SKILL.md) - Brand voice in communications

---

## Version History

- **2.0.0** (2026-01-02): Upgraded to v2 template - added Quick Start, When to Use, Execution Checklist, Error Handling, Metrics sections
- **1.0.0** (2024-10-15): Initial release with complete guidelines template, logo usage, color system, typography, imagery, voice and tone, applications