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 |
Print
| 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 |
| Print |
PDF |
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.svg
Platform-Specific Guidelines
Social Media
| Platform |
Format |
Size |
Notes |
| LinkedIn |
PNG |
300x300px |
Icon only |
| Twitter/X |
PNG |
400x400px |
Icon only |
| Facebook |
PNG |
180x180px |
Icon only |
| Instagram |
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
