Logo Usage Rules
Guidelines for proper logo implementation across all marketing materials.
Logo Variants
Primary Variants
| Variant | File Name | Use Case |
|---|---|---|
| Full Horizontal | logo-full-horizontal.{ext} | Website headers, documents |
| Stacked | logo-stacked.{ext} | Square spaces, social avatars |
| Icon Only | logo-icon.{ext} | Favicons, app icons, small spaces |
| Wordmark Only | logo-wordmark.{ext} | When icon already present |
Color Variants
| Variant | Use Case |
|---|---|
| Full Color | Default on white/light backgrounds |
| Reversed | On dark backgrounds |
| Monochrome Dark | On light backgrounds when color not possible |
| Monochrome Light | On dark backgrounds when color not possible |
Clear Space
Minimum Clear Space
The clear space around the logo should equal the height of the logo mark (icon portion).
┌─────────────────────────────┐
│ [x] │
│ ┌───────────────────┐ │
│ │ │ │
[x] │ │ [LOGO] │ [x] │
│ │ │ │
│ └───────────────────┘ │
│ [x] │
└─────────────────────────────┘Where [x] = height of logo mark
Minimum Size
Digital
| Format | Minimum Width | Notes |
|---|---|---|
| Full Logo | 120px | All elements legible |
| Icon Only | 24px | Favicon/small icons |
| Icon Only | 32px | UI elements |
| Format | Minimum Width | Notes |
|---|---|---|
| Full Logo | 35mm | Business cards, letterhead |
| Icon Only | 10mm | Small print items |
Color Usage
Approved Backgrounds
| Background | Logo Version |
|---|---|
| White | Full color or dark mono |
| Light gray (#F5F5F5+) | Full color or dark mono |
| Brand primary | Reversed (white) |
| Dark (#333 or darker) | Reversed (white) |
| Photography | Ensure sufficient contrast |
Color Rules
- Never change logo colors outside approved palette
- Don't use gradients on the logo
- Don't apply transparency to logo elements
- Don't add shadows or effects
Incorrect Usage
Absolute Don'ts
- ❌ Stretch or compress logo
- ❌ Rotate at angles
- ❌ Add drop shadows
- ❌ Apply gradient fills
- ❌ Use unapproved colors
- ❌ Add strokes or outlines
- ❌ Place on busy backgrounds
- ❌ Crop any portion
- ❌ Rearrange elements
- ❌ Add additional elements
Visual Examples
WRONG: Stretched WRONG: Rotated WRONG: Wrong color
┌──────────────┐ ┌────────┐ ┌────────┐
│ L O G O │ │ / │ │ LOGO │ <- wrong color
└──────────────┘ │ /LOGO │ └────────┘
└───────/Co-branding
Partner Logo Guidelines
- Equal visual weight (same height)
- Adequate separation between logos
- Use divider line if needed
- Both logos in their approved colors
- Clear space applies to both
Layout Options
Option A: Side by side with divider
[OUR LOGO] | [PARTNER LOGO]
Option B: Stacked
[OUR LOGO]
+
[PARTNER LOGO]File Formats
Recommended Formats
| Usage | Format | Notes |
|---|---|---|
| Web | SVG | Preferred, scalable |
| Web fallback | PNG | With transparency |
| Vector, high quality | ||
| Print alt | EPS | Legacy systems |
| Documents | PNG | High res (300dpi) |
File Organization
assets/logos/
├── full-horizontal/
│ ├── logo-full-color.svg
│ ├── logo-full-color.png
│ ├── logo-reversed.svg
│ ├── logo-mono-dark.svg
│ └── logo-mono-light.svg
├── icon-only/
│ ├── icon-full-color.svg
│ ├── icon-reversed.svg
│ └── favicon.ico
└── monochrome/
├── logo-black.svg
└── logo-white.svgPlatform-Specific Guidelines
Social Media
| Platform | Format | Size | Notes |
|---|---|---|---|
| PNG | 300x300px | Icon only | |
| Twitter/X | PNG | 400x400px | Icon only |
| PNG | 180x180px | Icon only | |
| PNG | 320x320px | Icon only |
Website
| Location | Variant | Size |
|---|---|---|
| Header | Full horizontal | 120-200px width |
| Footer | Full horizontal | 100-150px width |
| Favicon | Icon only | 32x32px |
| Apple Touch | Icon only | 180x180px |
Documents
| Document | Variant | Placement |
|---|---|---|
| Letterhead | Full horizontal | Top left |
| Presentation | Icon + wordmark | Title slide |
| Report | Full horizontal | Cover + footer |
Logo Approval Process
Before Using Logo
- Verify you have the correct version
- Check background compatibility
- Ensure minimum size requirements
- Confirm clear space allocation
- Review against these guidelines
Requesting Approval
For non-standard uses:
- Submit mockup showing proposed usage
- Include context (medium, audience)
- Wait for brand team approval
- Document approved exceptions