1# Logo Usage Rules
2 
3Guidelines for proper logo implementation across all marketing materials.
4 
5## Logo Variants
6 
7### Primary Variants
8| Variant | File Name | Use Case |
9|---------|-----------|----------|
10| Full Horizontal | logo-full-horizontal.{ext} | Website headers, documents |
11| Stacked | logo-stacked.{ext} | Square spaces, social avatars |
12| Icon Only | logo-icon.{ext} | Favicons, app icons, small spaces |
13| Wordmark Only | logo-wordmark.{ext} | When icon already present |
14 
15### Color Variants
16| Variant | Use Case |
17|---------|----------|
18| Full Color | Default on white/light backgrounds |
19| Reversed | On dark backgrounds |
20| Monochrome Dark | On light backgrounds when color not possible |
21| Monochrome Light | On dark backgrounds when color not possible |
22 
23## Clear Space
24 
25### Minimum Clear Space
26The clear space around the logo should equal the height of the logo mark (icon portion).
27 
28```
29    ┌─────────────────────────────┐
30    │           [x]               │
31    │   ┌───────────────────┐     │
32    │   │                   │     │
33[x] │   │    [LOGO]         │ [x] │
34    │   │                   │     │
35    │   └───────────────────┘     │
36    │           [x]               │
37    └─────────────────────────────┘
38```
39 
40Where [x] = height of logo mark
41 
42## Minimum Size
43 
44### Digital
45| Format | Minimum Width | Notes |
46|--------|---------------|-------|
47| Full Logo | 120px | All elements legible |
48| Icon Only | 24px | Favicon/small icons |
49| Icon Only | 32px | UI elements |
50 
51### Print
52| Format | Minimum Width | Notes |
53|--------|---------------|-------|
54| Full Logo | 35mm | Business cards, letterhead |
55| Icon Only | 10mm | Small print items |
56 
57## Color Usage
58 
59### Approved Backgrounds
60| Background | Logo Version |
61|------------|--------------|
62| White | Full color or dark mono |
63| Light gray (#F5F5F5+) | Full color or dark mono |
64| Brand primary | Reversed (white) |
65| Dark (#333 or darker) | Reversed (white) |
66| Photography | Ensure sufficient contrast |
67 
68### Color Rules
691. Never change logo colors outside approved palette
702. Don't use gradients on the logo
713. Don't apply transparency to logo elements
724. Don't add shadows or effects
73 
74## Incorrect Usage
75 
76### Absolute Don'ts
77- ❌ Stretch or compress logo
78- ❌ Rotate at angles
79- ❌ Add drop shadows
80- ❌ Apply gradient fills
81- ❌ Use unapproved colors
82- ❌ Add strokes or outlines
83- ❌ Place on busy backgrounds
84- ❌ Crop any portion
85- ❌ Rearrange elements
86- ❌ Add additional elements
87 
88### Visual Examples
89```
90WRONG: Stretched      WRONG: Rotated       WRONG: Wrong color
91┌──────────────┐      ┌────────┐          ┌────────┐
92│   L O G O    │      │  /    │          │ LOGO   │ <- wrong color
93└──────────────┘      │ /LOGO │          └────────┘
94                      └───────/
95```
96 
97## Co-branding
98 
99### Partner Logo Guidelines
1001. Equal visual weight (same height)
1012. Adequate separation between logos
1023. Use divider line if needed
1034. Both logos in their approved colors
1045. Clear space applies to both
105 
106### Layout Options
107```
108Option A: Side by side with divider
109[OUR LOGO] | [PARTNER LOGO]
110 
111Option B: Stacked
112    [OUR LOGO]
113        +
114  [PARTNER LOGO]
115```
116 
117## File Formats
118 
119### Recommended Formats
120| Usage | Format | Notes |
121|-------|--------|-------|
122| Web | SVG | Preferred, scalable |
123| Web fallback | PNG | With transparency |
124| Print | PDF | Vector, high quality |
125| Print alt | EPS | Legacy systems |
126| Documents | PNG | High res (300dpi) |
127 
128### File Organization
129```
130assets/logos/
131├── full-horizontal/
132│   ├── logo-full-color.svg
133│   ├── logo-full-color.png
134│   ├── logo-reversed.svg
135│   ├── logo-mono-dark.svg
136│   └── logo-mono-light.svg
137├── icon-only/
138│   ├── icon-full-color.svg
139│   ├── icon-reversed.svg
140│   └── favicon.ico
141└── monochrome/
142    ├── logo-black.svg
143    └── logo-white.svg
144```
145 
146## Platform-Specific Guidelines
147 
148### Social Media
149| Platform | Format | Size | Notes |
150|----------|--------|------|-------|
151| LinkedIn | PNG | 300x300px | Icon only |
152| Twitter/X | PNG | 400x400px | Icon only |
153| Facebook | PNG | 180x180px | Icon only |
154| Instagram | PNG | 320x320px | Icon only |
155 
156### Website
157| Location | Variant | Size |
158|----------|---------|------|
159| Header | Full horizontal | 120-200px width |
160| Footer | Full horizontal | 100-150px width |
161| Favicon | Icon only | 32x32px |
162| Apple Touch | Icon only | 180x180px |
163 
164### Documents
165| Document | Variant | Placement |
166|----------|---------|-----------|
167| Letterhead | Full horizontal | Top left |
168| Presentation | Icon + wordmark | Title slide |
169| Report | Full horizontal | Cover + footer |
170 
171## Logo Approval Process
172 
173### Before Using Logo
1741. Verify you have the correct version
1752. Check background compatibility
1763. Ensure minimum size requirements
1774. Confirm clear space allocation
1785. Review against these guidelines
179 
180### Requesting Approval
181For non-standard uses:
1821. Submit mockup showing proposed usage
1832. Include context (medium, audience)
1843. Wait for brand team approval
1854. Document approved exceptions
186