Brand Identity Design: Building a Cohesive Visual Identity

Brand Essence = What you do + How you do it + Why it matters

Example:
- What: Financial services
- How: Simple, transparent, human
- Why: Everyone deserves financial freedom

Brand Promise: "Banking made simple"
Brand Personality: Friendly, trustworthy, modern

Positioning Statement:
"For [target audience] who [need], 
[brand] is [category] that [benefit] 
because [reason to believe]."

Example:
"For busy professionals who want to save time, 
FinApp is the mobile banking app that 
handles all your finances in minutes 
because we use AI to automate money management."

Questions to Answer:
- Who is your target audience?
- What are your brand values?
- What makes you different?
- Who are your competitors?
- Where will the brand live?

Brand Attributes:
- Primary: Innovative, trustworthy
- Secondary: Friendly, approachable
- Avoid: Corporate, cold, complicated

Brand Archetypes:
- The Hero (Nike)
- The Creator (Adobe)
- The Sage (Google)
- The Explorer (Spotify)

/* Brand Color Palette */
:root {
  /* Primary - Brand's main color */
  --brand-primary: #2563eb;
  
  /* Secondary - Supporting colors */
  --brand-secondary: #10b981;
  
  /* Accent - For highlights */
  --brand-accent: #f59e0b;
  
  /* Neutral - Text and backgrounds */
  --brand-dark: #1e293b;
  --brand-light: #f8fafc;
}

/* Typography */
.brand-heading {
  font-family: 'Inter', sans-serif;
  font-weight: 700;
}

.brand-body {
  font-family: 'Merriweather', serif;
  font-weight: 400;
}

/* Logo Variations */
.logo-full {
  /* Full logo with text */
}

.logo-symbol {
  /* Icon/symbol only */
}

.logo-monochrome {
  /* One-color version */
}

.logo-dark {
  /* For dark backgrounds */
}

.logo-light {
  /* For light backgrounds */
}

/* Primary Colors */
.color-primary-100 { color: #dbeafe; }
.color-primary-500 { color: #2563eb; }
.color-primary-900 { color: #1e3a8a; }

/* Semantic Colors */
.color-success { color: #10b981; }
.color-warning { color: #f59e0b; }
.color-error { color: #ef4444; }
.color-info { color: #3b82f6; }

/* Neutral Colors */
.color-neutral-50 { color: #f8fafc; }
.color-neutral-100 { color: #f1f5f9; }
.color-neutral-500 { color: #64748b; }
.color-neutral-900 { color: #0f172a; }

/* Type Scale */
.type-h1 {
  font-size: 3rem;      /* 48px */
  font-weight: 700;
  line-height: 1.2;
}

.type-h2 {
  font-size: 2.25rem;  /* 36px */
  font-weight: 600;
  line-height: 1.3;
}

.type-h3 {
  font-size: 1.5rem;   /* 24px */
  font-weight: 600;
  line-height: 1.4;
}

.type-body {
  font-size: 1rem;      /* 16px */
  font-weight: 400;
  line-height: 1.6;
}

.type-small {
  font-size: 0.875rem;  /* 14px */
  font-weight: 400;
  line-height: 1.5;
}

/* Photography Guidelines */
.image-style-bright {
  /* High brightness, saturated */
}

.image-style-muted {
  /* Desaturated, professional */
}

.image-style-dark {
  /* Moody, dramatic lighting */
}

/* Illustration Style */
.illustration-flat {
  /* Simple, no gradients */
}

.illustration-3d {
  /* Three-dimensional, modern */
}

.illustration-hand-drawn {
  /* Organic, approachable */
}

/* Patterns */
.pattern-dots {
  background-image: radial-gradient(circle, currentColor 1px, transparent 1px);
  background-size: 20px 20px;
}

.pattern-lines {
  background-image: repeating-linear-gradient(
    45deg,
    transparent,
    transparent 10px,
    currentColor 10px,
    currentColor 11px
  );
}

.pattern-grid {
  background-image: 
    linear-gradient(rgba(0,0,0,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,0,0,0.05) 1px, transparent 1px);
  background-size: 20px 20px;
}

1. Brand Overview
   - Mission and values
   - Brand personality
   - Target audience

2. Logo Usage
   - Clear space
   - Minimum size
   - Don'ts
   - Variations

3. Color Palette
   - Primary colors
   - Secondary colors
   - Neutral colors
   - Color codes (HEX, RGB, CMYK, Pantone)

4. Typography
   - Typeface families
   - Font weights
   - Usage examples

5. Imagery
   - Photography style
   - Illustration style
   - Iconography

6. Applications
   - Business cards
   - Letterhead
   - Social media
   - Website

/* Maintain clear space around logo */
.logo-container {
  padding: 1em; /* Minimum clear space */
}

.logo-clear-space {
  /* The clear space should equal 
     the height of the X in the logo */
}

.business-card {
  width: 3.5in;
  height: 2in;
  padding: 0.25in;
  
  .logo { /* Top left */ }
  .name { /* Below logo */ }
  .info { /* Bottom right */ }
}

/* Profile images need simplified logo */
.profile-image {
  width: 170px;
  height: 170px;
  border-radius: 50%;
  background: var(--brand-primary);
}

/* Cover images can be more detailed */
.cover-image {
  width: 820px;
  height: 312px;
  background: linear-gradient(
    135deg,
    var(--brand-primary),
    var(--brand-secondary)
  );
}

/* Header */
.site-header {
  background: white;
  
  .logo { 
    height: 40px;
  }
  
  .nav { 
    font-family: var(--brand-heading);
    color: var(--brand-dark);
  }
}

/* Hero */
.site-hero {
  background: var(--brand-primary);
  color: white;
  
  h1 {
    font-family: var(--brand-heading);
  }
}

Rules for Consistency:

1. Create templates for common materials
2. Document everything in brand guidelines
3. Train team members on brand usage
4. Review brand applications regularly
5. Update guidelines as needed

/* Organized file structure */
/assets/
  /logo/
    logo-full.svg
    logo-symbol.svg
    logo-monochrome.svg
    logo-dark.svg
    logo-light.svg
    
  /colors/
    brand-colors.css
    brand-colors.ase (Adobe)
    
  /typography/
    brand-fonts/
    
  /templates/
    business-card.ai
    presentation.pptx

/* Logo sizes by breakpoint */
.logo {
  @media (max-width: 640px) {
    height: 32px;
  }
  
  @media (min-width: 641px) {
    height: 48px;
  }
}

/* Adapt colors for dark mode */
@media (prefers-color-scheme: dark) {
  .logo-dark {
    /* Use light logo on dark */
  }
  
  .brand-text {
    color: var(--brand-light);
  }
}