Logo & Image Guide¶

This document explains how logos and images are used in Campaign Brain.

Logo Slots Overview¶

┌─────────────────────────────────────────────────────────────────┐
│  HEADER (Navy Bar)                                              │
│  ┌──────────────┐                           ┌─────────────────┐ │
│  │  logo_name   │    [Navigation Links]     │   logo_icon     │ │
│  │  (32px h)    │                           │   (40px h)      │ │
│  └──────────────┘                           └─────────────────┘ │
├─────────────────────────────────────────────────────────────────┤
│ SIDEBAR          │  MAIN CONTENT                                │
│ ┌──────────────┐ │                                              │
│ │ logo_cropped │ │                                              │
│ │   (80px h)   │ │                                              │
│ └──────────────┘ │                                              │
│ [Menu Items]     │                                              │
│                  │                                              │
├──────────────────┴──────────────────────────────────────────────┤
│  FOOTER                                                         │
│  [campaignbrain-logo.jpg - hardcoded platform branding]         │
└─────────────────────────────────────────────────────────────────┘

Logo Specifications¶

Slot	DB Field	Location	Display Size	Recommended Dimensions	Format
Header Name	`logo_name`	Top left	32px height	300 x 90	PNG/SVG
Header Icon	`logo_icon`	Top right	40px height	80 x 80	PNG/SVG
Sidebar	`logo_cropped`	Sidebar top	80px max height	400 x 250	PNG
Login Page	`logo_cropped`	Login form	180px max height	(same as sidebar)	PNG
Full Logo	`logo_full`	Social/print	varies	800 x 800	PNG
Mobile	`logo_mobile`	Mobile header	varies	200 x 60	SVG

Detailed Specifications¶

1. `logo_name` - Header Text Logo¶

Location: Top navigation bar, left side
Purpose: Campaign name/text as a logo
Display: 32px height, auto width
Style: White filter applied (filter: brightness(0) invert(1))
Recommended: 300x90 PNG with transparent background
Tips: Use horizontal text-based logo, will appear white on dark header

2. `logo_icon` - Header Icon/Badge¶

Location: Top navigation bar, right side
Purpose: Small campaign icon/mascot/badge
Display: 40px height, auto width
Style: Displayed as-is (no color filter)
Recommended: 80x80 PNG, square aspect ratio
Tips: Use a simple icon, mascot, or seal that works small

3. `logo_cropped` - Main Campaign Logo¶

Location: Sidebar (top), Login page (center)
Purpose: Primary campaign logo with candidate/campaign imagery
Display: 80px max height (sidebar), 180px max height (login)
Style: Displayed as-is with auto width
Recommended: 400x250 PNG with transparent background
Tips: Full color logo with candidate photo/campaign branding

4. `logo_full` - Full Square Logo¶

Location: Not currently used in templates
Purpose: Social media, print materials, og:image
Recommended: 800x800 PNG
Tips: Square format for social media profile pictures

5. `logo_mobile` - Mobile Logo¶

Location: Mobile responsive header
Purpose: Compact logo for small screens
Recommended: 200x60 SVG
Tips: Simplified version of logo_name

File Locations¶

Production Logos¶

src/app/static/images/
├── logo-name.png      # Header text logo (logo_name)
├── logo-icon.png      # Header icon (logo_icon)
├── logo-cropped.png   # Main campaign logo (logo_cropped)
├── logo-full.png      # Full logo for social/print (logo_full)
├── logo-mobile.svg    # Mobile version (logo_mobile)
├── logo.svg           # Vector master
└── campaignbrain-logo.jpg  # Platform branding (hardcoded)

Default Placeholders¶

src/app/static/images/defaults/
├── logo-name-default.svg      # 300x90
├── logo-icon-default.svg      # 80x80
├── logo-cropped-default.svg   # 400x250
├── logo-full-default.svg      # 800x800
└── logo-mobile-default.svg    # 200x60

Template Usage¶

layout.html¶

<!-- Header left: Campaign name logo (white) -->
<img src="{{ branding.logo_name }}"
     alt="{{ branding.app_name }}"
     class="h-8"
     style="max-height: 32px; width: auto; filter: brightness(0) invert(1);">

<!-- Header right: Campaign icon -->
<img src="{{ branding.logo_icon }}"
     alt="Icon"
     class="h-10"
     style="max-height: 40px; width: auto;">

<!-- Sidebar: Main campaign logo -->
<img src="{{ branding.logo_cropped }}"
     alt="{{ branding.app_name }}"
     class="max-h-20 w-auto">

login.html¶

<!-- Login page: Main campaign logo (larger) -->
<img src="{{ branding.logo_cropped }}"
     alt="{{ branding.app_name }}"
     class="mx-auto mb-6"
     style="max-height: 180px; width: auto;">

<!-- Platform branding (hardcoded) -->
<img src="/static/images/campaignbrain-logo.jpg"
     alt="CampaignBrain"
     style="height: 20px; width: auto;">

Database Schema¶

# db/models.py - TenantTheme

logo_full = Column(String, nullable=True)     # Full 800x800 logo
logo_cropped = Column(String, nullable=True)  # Main logo 400x250
logo_icon = Column(String, nullable=True)     # Small icon 80x80
logo_name = Column(String, nullable=True)     # Header text 300x90
logo_mobile = Column(String, nullable=True)   # Mobile 200x60

Branding Configuration¶

Logos are set via: 1. Tenant Manager API - Upload/configure during tenant setup 2. AI Theme Analysis - Extracted from campaign website 3. Manual Upload - Via settings page

Default paths use /static/images/ relative URLs.

Checklist for New Campaign Setup¶

logo_name (300x90) - Text/wordmark for header
logo_icon (80x80) - Square icon for header right
logo_cropped (400x250) - Full campaign logo for sidebar/login
logo_full (800x800) - Square version for social media
logo_mobile (200x60) - Compact version for mobile

Common Issues¶

Logo appears too large/small¶

Check the source image dimensions match recommendations
CSS max-height controls display size, not source size

Logo appears white/invisible in header¶

Header left logo has white filter applied
Use dark logo, it will be inverted to white

Ensure aspect ratio is approximately 1.6:1 (width:height)
Use max-h-20 (80px) as constraint

Last updated: December 2025