playbook/ui-ux-pro-max/.claude/skills/brand/references/brand-guideline-template.md

Brand Guidelines Template

Use this template to create comprehensive brand guidelines for any project.

Document Structure

# Brand Guidelines v{X.Y}

## Quick Reference
- **Primary Color:** #XXXXXX
- **Secondary Color:** #XXXXXX
- **Primary Font:** {font-family}
- **Voice:** {3 key traits}

## 1. Color Palette

### Primary Colors
| Name | Hex | RGB | Usage |
|------|-----|-----|-------|
| {Name} | #{hex} | rgb({r},{g},{b}) | Primary brand color, CTAs, headers |
| {Name} | #{hex} | rgb({r},{g},{b}) | Supporting accent |

### Secondary Colors
| Name | Hex | RGB | Usage |
|------|-----|-----|-------|
| {Name} | #{hex} | rgb({r},{g},{b}) | Secondary elements |
| {Name} | #{hex} | rgb({r},{g},{b}) | Highlights |

### Neutral Palette
| Name | Hex | RGB | Usage |
|------|-----|-----|-------|
| Background | #{hex} | rgb({r},{g},{b}) | Page backgrounds |
| Text Primary | #{hex} | rgb({r},{g},{b}) | Body text |
| Text Secondary | #{hex} | rgb({r},{g},{b}) | Captions, muted text |
| Border | #{hex} | rgb({r},{g},{b}) | Dividers, borders |

### Accessibility
- Text/Background Contrast: {ratio}:1 (WCAG {level})
- CTA Contrast: {ratio}:1
- All interactive elements meet WCAG 2.1 AA

## 2. Typography

### Font Stack
```css
--font-heading: '{Font}', sans-serif;
--font-body: '{Font}', sans-serif;
--font-mono: '{Font}', monospace;

Type Scale

Element	Font	Weight	Size (Desktop/Mobile)	Line Height
H1	{font}	700	48px / 32px	1.2
H2	{font}	600	36px / 28px	1.25
H3	{font}	600	28px / 24px	1.3
H4	{font}	600	24px / 20px	1.35
Body	{font}	400	16px / 16px	1.5
Small	{font}	400	14px / 14px	1.5
Caption	{font}	400	12px / 12px	1.4

3. Logo Usage

Variants

• Primary: Full horizontal logo with wordmark
• Stacked: Vertical arrangement for square spaces
• Icon: Symbol only for favicons, app icons
• Monochrome: Single color for limited palettes

Clear Space

Minimum clear space = height of logo mark

Minimum Size

• Digital: 80px width minimum
• Print: 25mm width minimum

Don'ts

• Don't rotate or skew
• Don't change colors outside approved palette
• Don't add effects (shadows, gradients)
• Don't crop or modify proportions
• Don't place on busy backgrounds

4. Voice & Tone

Brand Personality

{Trait 1}: {Description} {Trait 2}: {Description} {Trait 3}: {Description}

Voice Chart

Trait	We Are	We Are Not
{Trait}	{Description}	{Anti-description}

Tone by Context

Context	Tone	Example
Marketing	{tone}	"{example}"
Support	{tone}	"{example}"
Error Messages	{tone}	"{example}"
Success	{tone}	"{example}"

Prohibited Terms

• {term 1} (reason)
• {term 2} (reason)

5. Imagery Guidelines

Photography Style

• {Lighting preference}
• {Subject guidelines}
• {Color treatment}

Illustrations

• Style: {description}
• Colors: Brand palette only
• Stroke: {weight}px

Icons

• Style: {outlined/filled/duotone}
• Size: 24px base grid
• Corner radius: {value}px

## Usage

1. Copy template above
2. Fill in brand-specific values
3. Save as `docs/brand-guidelines.md`
4. Reference in content workflows

## Extractable Fields

Scripts can extract:
- `colors.primary`, `colors.secondary`, `colors.neutral`
- `typography.heading`, `typography.body`
- `voice.traits`, `voice.prohibited`
- `logo.variants`, `logo.minSize`