Kunthawat Greethong
8a0edd225d
- Extract 9 nested skills from website-creator/ to root skills/ - Remove duplicate seo-analyzers, seo-geo, seo-multi-channel from website-creator - Add new ui-ux-pro-max skill with full UI/UX data - Update install-skills.sh to sync properly - Remove .DS_Store artifacts Moved skills: - api-and-interface-design - banner-design - brand - design-system - design - frontend-ui-engineering - slides - spec-driven-development - ui-styling
186 lines
5.3 KiB
Markdown
186 lines
5.3 KiB
Markdown
# 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
|
|
1. Never change logo colors outside approved palette
|
|
2. Don't use gradients on the logo
|
|
3. Don't apply transparency to logo elements
|
|
4. 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
|
|
1. Equal visual weight (same height)
|
|
2. Adequate separation between logos
|
|
3. Use divider line if needed
|
|
4. Both logos in their approved colors
|
|
5. 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
|
|
1. Verify you have the correct version
|
|
2. Check background compatibility
|
|
3. Ensure minimum size requirements
|
|
4. Confirm clear space allocation
|
|
5. Review against these guidelines
|
|
|
|
### Requesting Approval
|
|
For non-standard uses:
|
|
1. Submit mockup showing proposed usage
|
|
2. Include context (medium, audience)
|
|
3. Wait for brand team approval
|
|
4. Document approved exceptions
|