Brand Guidelines: Creating Standards for Consistent Branding

# Brand Guidelines

## About Our Brand

### Our Mission
[One sentence about what you do]

### Our Vision
[What you want to become]

### Our Values
- Innovation: [description]
- Integrity: [description]
- Excellence: [description]

### Brand Promise
[Your unique value proposition]

### Target Audience
- Primary: [description]
- Secondary: [description]

## Logo

### Logo Variations
We have several logo versions:

1. Full Logo
   - Primary version with symbol + wordmark
   - Use for most applications

2. Symbol Only
   - When space is limited
   - Use for favicons, app icons

3. Horizontal
   - When height is limited
   - Use for headers, banners

### Clear Space
Always maintain clear space around the logo:

[Diagram showing clear space]

The clear space equals the height of the letter "X" in the logo.

### Minimum Size
- Print: [X]mm
- Digital: [X]px

### Logo Don'ts
- Don't stretch the logo
- Don't change colors
- Don't add effects
- Don't rotate
- Don't place on busy backgrounds

[Show examples of wrong usage]

## Colors

### Primary Colors
Our primary color is [Color Name]:

- HEX: #XXXXXX
- RGB: R, G, B
- CMYK: C%, M%, Y%, K%
- Pantone: PMS XXXX

### Secondary Colors
[Color Name]:
- HEX: #XXXXXX
- RGB: R, G, B

### Accent Colors
[Color Name]:
- HEX: #XXXXXX

### Neutral Colors
- Dark: #XXXXXX
- Light: #XXXXXX

### Color Usage
- Use primary for main elements
- Use secondary for support
- Use accent for calls-to-action

### Accessibility
Ensure [X] contrast ratio for text.

## Typography

### Primary Typeface
[Font Name]

### Headings
- H1: [Font], [Weight], [Size]
- H2: [Font], [Weight], [Size]
- H3: [Font], [Weight], [Size]

### Body Text
- Regular: [Font], [Weight], [Size]
- Small: [Font], [Weight], [Size]

### Usage Examples
[Show examples of type hierarchy]

### Web Fonts

## Voice & Tone

### Brand Voice
Our voice is:
- [Adjective 1]
- [Adjective 2]
- [Adjective 3]

### Tone Guidelines
- Professional contexts: [tone description]
- Social media: [tone description]
- Customer service: [tone description]

### Writing Rules
- Use active voice
- [Other rules]

### Examples
[Show examples of on-brand writing]

## Applications

### Business Cards
[Show design and specifications]

### Letterhead
[Show design]

### Website
[Show header, footer, patterns]

### Social Media
[Show profile images, banners]

### Email Signature
[Show format]

# Can be delivered as:

1. PDF Document
   - Print-ready
   - Universal access
   
2. Website/Hub
   - Always accessible
   - Easy to update
   - Interactive
   
3. Figma/Sketch
   - Design-focused
   - Live components

Essential:
- Logo usage
- Colors
- Typography

Important:
- Imagery
- Voice/tone
- Do's and don'ts

Nice to have:
- Templates
- More applications
- History/story

Review existing materials:
- What logo versions exist?
- What colors are used?
- What fonts are used?
- What's working?
- What's inconsistent?

Write clear rules for:
- What is allowed
- What is not allowed
- How to use each element
- Why these choices matter

Show, don't just tell:
- Correct usage examples
- Incorrect usage examples
- Real application mockups

Make it:
- Easy to navigate
- Beautiful to look at
- Clear to understand
- Simple to reference

# [Brand Name] Brand Guidelines
Version [X.X] | [Date]

---

## 1. Introduction
[Overview of brand]

## 2. Logo
[Logo section]

## 3. Color
[Color section]

## 4. Typography
[Typography section]

## 5. Imagery
[Imagery section]

## 6. Voice
[Voice and tone]

## 7. Applications
[Application examples]

---

Questions? Contact [email]

Ensure:
- All team members have access
- New hires receive training
- Easy to find and reference
- Regular updates communicated

For partners/vendors:
- Simplified version
- Focus on key rules
- Clear contact for questions
- Protect sensitive elements

Schedule reviews:
- Quarterly: Check for issues
- Annually: Full review
- As needed: Updates for new products

Keep track of:
- Version numbers
- Update dates
- Changes made

When to update:
- New brand elements added
- Usage questions arise
- New channels added
- Brand evolution

How to communicate:
- Announce changes
- Provide training
- Archive old versions

Writing principles:
✓ Be clear over clever
✓ Be concise over comprehensive
✓ Be human over corporate
✓ Use active voice: "Our team built this" not "This was built"
✓ Address the reader directly: "You can" not "Users can"

✗ Do not stretch or distort proportions
✗ Do not change logo colors
✗ Do not add drop shadows or effects
✗ Do not place on low-contrast backgrounds
✗ Do not rearrange logo elements
✗ Do not rotate the logo
✗ Do not add new elements to the logo
✗ Do not use logo as part of a sentence

{
  "brand-primary": {
    "value": "#2563EB",
    "hex": "#2563EB",
    "cmyk": "88, 62, 0, 0",
    "rgb": "37, 99, 235",
    "wcag_aa": "White text: 4.6:1 ✓",
    "usage": "Primary buttons, links, headings"
  },
  "brand-secondary": {
    "value": "#7C3AED",
    "hex": "#7C3AED",
    "cmyk": "60, 80, 0, 0",
    "rgb": "124, 58, 237",
    "wcag_aa": "White text: 6.8:1 ✓",
    "usage": "Secondary accents, highlights"
  }
}

:root {
  /* Font families */
  --font-display: 'Inter', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  /* Type scale */
  --text-xs: 0.75rem;   /* 12px - Captions */
  --text-sm: 0.875rem;  /* 14px - Body small */
  --text-base: 1rem;    /* 16px - Body */
  --text-lg: 1.125rem;  /* 18px - Large body */
  --text-xl: 1.25rem;   /* 20px - Subheading */
  --text-2xl: 1.5rem;   /* 24px - Section heading */
  --text-3xl: 1.875rem; /* 30px - Page title */
  --text-4xl: 2.25rem;  /* 36px - Hero */
  --text-5xl: 3rem;     /* 48px - Display */
}

{
  "brand": {
    "name": { "value": "BrandName" },
    "tagline": { "value": "Tagline goes here" }
  },
  "color": {
    "primary": { "value": "#2563EB", "type": "color" },
    "primary-hover": { "value": "#1D4ED8", "type": "color" },
    "primary-active": { "value": "#1E40AF", "type": "color" }
  },
  "typography": {
    "font-family-primary": { "value": "Inter" },
    "font-family-mono": { "value": "JetBrains Mono" },
    "font-size-base": { "value": "16px", "type": "dimension" }
  },
  "spacing": {
    "page-margin": { "value": "24px", "type": "dimension" },
    "section-gap": { "value": "64px", "type": "dimension" }
  }
}

Frequency: Quarterly
Scope: All brand touchpoints
Process:
1. Collect all brand assets and applications
2. Compare against current guidelines
3. Identify inconsistencies and drift
4. Document issues with evidence
5. Prioritize fixes by impact
6. Update guidelines if needed
7. Communicate changes to team

Metrics tracked:
- Consistency score (target: >90%)
- Guideline compliance rate
- Time since last guideline update
- Number of exception requests

✓ Keep it clear and concise
✓ Use visuals alongside rules
✓ Include real examples
✓ Make it accessible
✓ Update regularly
✓ Train people on usage

✗ Make it too complex
✗ Include unnecessary details
✗ Forget digital AND print
✗ Ignore accessibility
✗ Keep it hidden
✗ Let it become outdated

Logo: [attach approved logo files]
Primary color: [#HEX]
Font: [Font name]
Voice: [3 words describing brand voice]
Tagline: [Brand tagline]
Contact: [Brand manager email]

# CI pipeline for brand compliance checks
name: Brand Compliance
on: [pull_request]

jobs:
  brand-check:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - name: Check brand colors
        run: node scripts/check-brand-colors.mjs
      - name: Verify logo usage
        run: node scripts/verify-logo-usage.mjs
      - name: Check typography
        run: node scripts/check-typography.mjs
      - name: Accessibility check
        run: npx @axe-core/cli --exit
      - name: Brand compliance report
        run: node scripts/generate-brand-report.mjs