Visual Identity Systems: Building Cohesive Brand Expression

Core Elements:
- Logo family
- Color palette
- Typography
- Iconography
- Photography style
- Illustration style

Supporting Elements:
- Patterns
- Textures
- Graphics
- Motion

Applications:
- Print materials
- Digital platforms
- Environmental
- Packaging

Before visual design:

1. Brand Purpose
   - Why do we exist?
   - What problem do we solve?

2. Brand Values
   - What do we believe?
   - What guides our decisions?

3. Brand Personality
   - How should we be perceived?
   - What adjectives describe us?

4. Brand Positioning
   - Where do we fit in the market?
   - What makes us different?

/* Element 1: Colors */
:root {
  --primary: #2563eb;
  --secondary: #10b981;
  --accent: #f59e0b;
  --dark: #1e293b;
  --light: #f8fafc;
}

/* Element 2: Typography */
--font-heading: 'Inter', sans-serif;
--font-body: 'Merriweather', serif;

/* Element 3: Spacing */
--space-unit: 8px;
--space-xs: calc(var(--space-unit) * 1);
--space-sm: calc(var(--space-unit) * 2);
--space-md: calc(var(--space-unit) * 3);
--space-lg: calc(var(--space-unit) * 4);
--space-xl: calc(var(--space-unit) * 6);

/* Buttons */
.btn-primary {
  background: var(--primary);
  color: white;
  padding: var(--space-sm) var(--space-lg);
  border-radius: 4px;
  font-family: var(--font-heading);
}

/* Form Inputs */
.input-field {
  border: 1px solid var(--dark);
  padding: var(--space-sm);
  border-radius: 4px;
}

/* Cards */
.card {
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  padding: var(--space-lg);
}

/* Container */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--space-md);
}

/* Grid */
.grid {
  display: grid;
  gap: var(--space-lg);
}

/* Flex utilities */
.flex { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-md { gap: var(--space-md); }

.icon {
  width: 24px;
  height: 24px;
}

.icon-sm { width: 16px; height: 16px; }
.icon-lg { width: 32px; height: 32px; }
.icon-xl { width: 48px; height: 48px; }

.icon-stroke {
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
}

.icon-fill {
  fill: currentColor;
}

/* Photography Rules */
.photo-style {
  /* Lighting */
  lighting: natural;
  
  /* Mood */
  mood: bright;
  
  /* Subjects */
  subjects: people;
  
  /* Color */
  saturation: natural;
}

Photography Guidelines:

1. Lighting
   - Natural light preferred
   - Bright and airy
   - Avoid harsh shadows

2. Subjects
   - Show real people
   - Diverse representation
   - Authentic moments

3. Color
   - Match brand palette
   - Consistent color grading
   - Natural skin tones

/* Illustration Guidelines */
.illustration {
  /* Style */
  style: flat;
  
  /* Colors */
  palette: brand-colors;
  
  /* Strokes */
  stroke: 2px;
  
  /* Corners */
  border-radius: 4px;
}

/* Transitions */
.transition-fast { transition: 0.15s ease; }
.transition-normal { transition: 0.3s ease; }
.transition-slow { transition: 0.5s ease; }

/* Hover Effects */
.hover-lift:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

/* Loading States */
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

Motion Principles:

1. Purposeful
   - Every animation has reason
   - Guide attention
   - Show feedback

2. Consistent
   - Same durations
   - Same easings
   - Same patterns

3. Subtle
   - Don't overpower content
   - Enhance, not distract

.business-card {
  width: 3.5in;
  height: 2in;
  
  /* Use brand elements */
  background: white;
  font-family: var(--font-body);
  
  /* Logo placement */
  .logo {
    width: 1in;
    position: absolute;
    top: 0.25in;
    left: 0.25in;
  }
  
  /* Color accent */
  .accent-bar {
    background: var(--primary);
    height: 0.125in;
  }
}

/* Header */
.site-header {
  background: white;
  border-bottom: 1px solid var(--dark);
  padding: var(--space-md);
  
  .logo { /* ... */ }
}

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

/* Buttons */
.cta-button {
  background: var(--accent);
  color: var(--dark);
}

.profile-image {
  /* Circular crop */
  border-radius: 50%;
  
  /* Brand background */
  background: var(--primary);
}

.post-template {
  /* Consistent dimensions */
  width: 1080px;
  height: 1080px;
  
  /* Brand colors */
  background: linear-gradient(
    var(--primary),
    var(--secondary)
  );
}

# Visual Identity System

## Version
1.0

## Last Updated
[Date]

## Core Elements
- Colors: [Link]
- Typography: [Link]
- Logo: [Link]

## Components
- Buttons: [Link]
- Forms: [Link]
- Cards: [Link]

## Patterns
- Layouts: [Link]
- Navigation: [Link]

## Assets
- Fonts: [Link]
- Icons: [Link]
- Templates: [Link]

## Do's
✓ Use brand colors consistently
✓ Follow spacing system
✓ Apply typography scale
✓ Maintain logo clear space

## Don'ts
✗ Mix unofficial colors
✗ Break grid system
✗ Stretch typography
✗ Modify logo

/* Design tokens (CSS custom properties) */
:root {
  /* Colors */
  --brand-primary: #2563eb;
  --brand-secondary: #10b981;
  --brand-accent: #f59e0b;
  
  /* Typography */
  --font-heading: 'Inter', sans-serif;
  --font-body: 'Merriweather', serif;
  
  /* Spacing */
  --space-unit: 8px;
  --space-sm: calc(var(--space-unit) * 2);
  --space-md: calc(var(--space-unit) * 3);
  --space-lg: calc(var(--space-unit) * 4);
  
  /* Borders */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
}

Tools:
- Style Dictionary
- Design Tokens Format
- Figma Variables
- CSS Custom Properties

Regular Maintenance:
- Quarterly review
- Annual audit
- Version control
- Change log

When to Update:
- New products launch
- Brand refresh
- Platform changes
- Usage questions

Who Owns the System:
- Brand team
- Design team
- Marketing

Approval Process:
- Review process
- Sign-off required
- Documentation

1. Start with Strategy
   - Define brand first
   - Don't design in vacuum
   
2. Build Comprehensive System
   - Cover all use cases
   - Think ahead
   
3. Document Everything
   - Clear rules
   - Visual examples
   
4. Maintain Consistency
   - Regular audits
   - Training
   
5. Evolve Thoughtfully
   - Updates needed
   - But maintain core

✗ Too complex
✗ Too rigid
✗ Not maintained
✗ Hard to use
✗ Missing examples
✗ No governance