Brand Guidelines

Brand Guidelines Skill

Create comprehensive, platform-agnostic brand guidelines using Jungian archetypes and color psychology.

Purpose

Define brand IDENTITY that works across ALL platforms:

• Web (any framework)
• Mobile (iOS, Android, Flutter)
• Print (marketing materials)
• Social media

Output: HEX colors and font names, NOT framework-specific code.

The 12 Brand Archetypes

Archetype Selection by Product Type

Color Palette Creation

Step 1: Choose Primary Color

Based on archetype, select a primary hue:

Step 2: Generate 9-Shade Scale

Use HSL to create shades from a base color:

Step 3: Add Semantic Colors

Step 4: Create Neutral Grays

Add brand tint to neutral grays:

• Cool tint (blue): Professional, tech
• Warm tint (yellow/brown): Friendly, approachable

Typography Guidelines

Font Pairing by Archetype

Type Scale (4px Baseline)

Voice & Tone by Archetype

Sage Voice

• Tone: Expert but accessible
• Do: Explain complex topics simply, cite evidence, be precise
• Don't: Be condescending, use jargon without explanation

Magician Voice

• Tone: Visionary and inspiring
• Do: Paint possibilities, use transformative language
• Don't: Over-promise, be vague about how

Hero Voice

• Tone: Empowering and confident
• Do: Challenge and motivate, celebrate achievement
• Don't: Be aggressive, diminish struggles

Ruler Voice

• Tone: Authoritative and refined
• Do: Be confident, use premium language
• Don't: Be elitist, talk down to users

Creator Voice

• Tone: Imaginative and expressive
• Do: Inspire creativity, celebrate uniqueness
• Don't: Be pretentious, dismiss simplicity

Everyman Voice

• Tone: Relatable and honest
• Do: Use everyday language, be authentic
• Don't: Try too hard to be cool, be generic

brand.md Output Format

# Brand Guidelines

> [Project Name] Brand Identity

## Brand Personality

**Primary Archetype**: [Name] (70%)
[Brief description]

**Secondary Archetype**: [Name] (30%)
[Brief description]

## Core Values

1. **[Value]**: [What it means]
2. **[Value]**: [What it means]
3. **[Value]**: [What it means]

## Color Palette

### Primary Colors

| Name | HEX | Usage |
|------|-----|-------|
| Primary | #XXXXXX | CTAs, key elements |
| Secondary | #XXXXXX | Supporting elements |
| Accent | #XXXXXX | Highlights |

### Primary Scale

| Shade | HEX | Usage |
|-------|-----|-------|
| 50 | #XXXXXX | Lightest backgrounds |
| ... | ... | ... |
| 900 | #XXXXXX | Darkest |

### Semantic Colors

| Role | HEX | Usage |
|------|-----|-------|
| Success | #XXXXXX | Confirmations |
| Warning | #XXXXXX | Cautions |
| Error | #XXXXXX | Errors |
| Info | #XXXXXX | Information |

## Typography

### Font Stack
- **Headings**: [Font Name]
- **Body**: [Font Name]
- **Monospace**: [Font Name]

### Type Scale
[Type scale table]

## Voice & Tone

### Brand Voice
- [Attribute]: [Description]

### Tone by Context
| Context | Tone | Example |
|---------|------|---------|
| Marketing | [Tone] | "[Example]" |
| UI | [Tone] | "[Example]" |
| Errors | [Tone] | "[Example]" |

### Writing Guidelines

**Do:**
- [Guideline]

**Don't:**
- [Anti-pattern]

Color Accessibility

Ensure WCAG AA compliance:

• Normal text: 4.5:1 contrast ratio
• Large text: 3:1 contrast ratio
• UI elements: 3:1 contrast ratio

Test combinations:

• Light text on dark backgrounds
• Dark text on light backgrounds
• Buttons and interactive elements

References

For detailed archetype color palettes and examples:

• references/brand-archetypes.md