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.

Brand Guidelines Structure

Complete Guidelines Template

# [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

## 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

## 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

## 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

## 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

## 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

## Logo Misuse

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

[Include visual examples of each misuse]

3. Color System

Color Palette Definition

## 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

## 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

## 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

## 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

## 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
✅ Show diverse, authentic people
✅ Capture genuine emotions
✅ Use natural lighting when possible
✅ Include environmental context
✅ Maintain consistent color treatment

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

Illustration Style

## 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]px
- **Stroke:** [X]px
- **Corners:** [X]px radius
- **Style:** [Outlined/Filled/Duotone]

6. Voice & Tone

Brand Voice

## 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:**
- ✅ "Connect your accounts in 3 steps"
- ❌ "Leverage our seamless integration capabilities"

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

**Example:**
- ✅ "The best way to manage your finances"
- ❌ "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:**
- ✅ "We're here to help"
- ❌ "The company is available to assist"

Tone Variations

## 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

## 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

## 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

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

### Do ✅
- 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 ❌
- Modify the logo
- Create new color variations
- Use unapproved fonts
- Write in passive voice
- Use stock photography clichés
- Ignore contrast requirements
- Deviate without approval

Governance

## 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]

File Resources

## Brand Assets

### Download Links
- Logo package: [Link]
- Color swatches: [Link]
- Font files: [Link/instructions]
- Templates: [Link]
- Photography: [Link]
- Icons: [Link]

### File Naming Convention
`[brand]_[asset-type]_[variant]_[size].[format]`

Example: `acme_logo_primary_fullcolor.svg`

Version History

• 1.0.0 (2024-10-15): Initial release with complete guidelines template, logo usage, color system, typography, imagery, voice and tone, applications