firefrost-operations-manual/docs/visual-assets-guide.md

# 🎨 FIREFROST GAMING: Visual Assets Guide (v1.0)

**Created:** February 8, 2026  
**Maintained By:** Frostystyle (Michael) & Gingerfury (Meg)  
**Asset Location:** `/root/firefrost-master-configs/branding/`  
**Status:** Production Ready

---

## 1. Asset Inventory

### Logos (branding/logos/)

| Asset | Filename | Size | Usage |
|-------|----------|------|-------|
| **Circular Emblem** | firefrost-emblem-512.png | 512x512px (305 KB) | Favicon, social profile pics, app icons |
| **Light Logo** | firefrost-logo-light.png | Variable (831 KB) | Light backgrounds, print materials |
| **Dark Logo** | firefrost-logo-dark.png | Variable (1.3 MB) | Dark backgrounds, website header, Discord |

### Backgrounds (branding/backgrounds/)

| Asset | Filename | Size | Usage |
|-------|----------|------|-------|
| **Fire+Frost Collision** | fire-frost-collision.png | 1920x1080px (3.7 MB) | Website hero, social headers, wallpapers |

### Founders (branding/founders/)

| Asset | Filename | Size | Usage |
|-------|----------|------|-------|
| **Frostystyle & Gingerfury** | frostystyle-gingerfury.png | Variable (1.7 MB) | About Us page, team bios, promotional materials |

---

## 2. Logo Usage Guidelines

### The Circular Emblem (Primary Brand Mark)

**Best For:**
- ✅ Website favicon (16x16, 32x32, 64x64 sizes)
- ✅ Social media profile pictures (Discord, Twitter, Instagram, TikTok)
- ✅ App icons (Android, iOS)
- ✅ Loading spinners (animated rotation)
- ✅ Watermarks on content
- ✅ Small-space branding

**Why It Works:**
- Scales perfectly from 16px to billboard size
- No text = works at ANY size
- Instantly recognizable Fire + Frost duality
- Circular shape fits all profile pic requirements

**Technical Specs:**
- Format: PNG with transparency
- Dimensions: 512x512px (source)
- File size: 305 KB (optimize for web to <100 KB)

**Minimum Size:** 64px width (below this, details blur)

---

### The Light Logo (For Light Backgrounds)

**Best For:**
- ✅ Website header (if using light theme)
- ✅ Print materials (business cards, flyers, posters)
- ✅ Email signatures
- ✅ YouTube banners (if light background)
- ✅ Instagram posts on white backgrounds
- ✅ Documents and presentations

**When NOT to Use:**
- ❌ Dark backgrounds (text won't be visible)
- ❌ Very small sizes (text becomes unreadable under 200px width)

**Technical Specs:**
- Format: PNG with transparency
- Dimensions: Variable width, maintains aspect ratio
- File size: 831 KB (compress for web)

**Minimum Size:** 200px width (text legibility threshold)

---

### The Dark Logo (For Dark Backgrounds)

**Best For:**
- ✅ Website header (dark theme - RECOMMENDED)
- ✅ Discord server icon/banner
- ✅ Twitch overlays and panels
- ✅ YouTube thumbnails (dark backgrounds)
- ✅ Twitter/X header image
- ✅ GitHub profile
- ✅ Social media posts on dark backgrounds

**This is Your WORKHORSE Logo:**
- Most gaming websites use dark themes
- Most social platforms support dark mode
- Most promotional materials will use this version

**Technical Specs:**
- Format: PNG with transparency
- Dimensions: Variable width, maintains aspect ratio
- File size: 1.3 MB (compress for web)

**Minimum Size:** 200px width

---

## 3. Background Usage Guidelines

### Fire+Frost Collision (Epic Wallpaper)

**Best For:**
- ✅ Website hero section (full-width background)
- ✅ Twitter/X header (1500x500px crop)
- ✅ YouTube channel banner (2560x1440px crop)
- ✅ Discord server banner
- ✅ Twitch offline screen
- ✅ Desktop wallpapers (for fans)
- ✅ Promotional materials
- ✅ Loading screens

**Emotional Impact:**
- Left (Fire) = Passion, chaos, energy (Gingerfury/Emissary)
- Right (Frost) = Precision, order, stability (Frostystyle/Wizard)
- Center = The collision (where Fire meets Frost)

**This Image TELLS THE FIREFROST STORY without words.**

**Technical Specs:**
- Format: PNG
- Dimensions: 1920x1080px (Full HD)
- File size: 3.7 MB (LARGE - compress for web use)

**Optimization Needed:**
- Target web size: <500 KB (use compression tools)
- For social media headers: Crop and resize to platform specs

---

## 4. Founders Art Usage

### Frostystyle & Gingerfury (Founder Portraits)

**Best For:**
- ✅ About Us page hero image
- ✅ Team bios and introductions
- ✅ Social media "Meet the Team" posts
- ✅ Community announcements
- ✅ Promotional materials featuring the founders

**Story Context:**
- **Left (Frostystyle):** The Wizard with his Manual (knowledge, infrastructure, precision)
- **Right (Gingerfury):** The Emissary with her Banhammers (community, protection, justice)

**This art represents the partnership at the heart of Firefrost.**

**Technical Specs:**
- Format: PNG
- Dimensions: Variable (high resolution)
- File size: 1.7 MB

**Usage Notes:**
- Always credit as "Frostystyle & Gingerfury, Founders of Firefrost Gaming"
- Use full image when possible (don't crop just one founder)
- Consider creating individual portrait crops for separate bios

---

## 5. Social Media Platform Specs

### Favicon Sizes Needed

**Generate from firefrost-emblem-512.png:**

| Size | Format | Usage |
|------|--------|-------|
| 16x16 | ICO/PNG | Browser tab icon |
| 32x32 | ICO/PNG | Bookmark icon |
| 64x64 | PNG | High-DPI displays |
| 128x128 | PNG | Chrome Web Store |
| 180x180 | PNG | Apple Touch Icon (iOS) |
| 192x192 | PNG | Android Chrome |
| 512x512 | PNG | PWA icon |

**Generate using ImageMagick or online tools (favicon.io)**

---

### Social Media Profile Images

**All platforms can use firefrost-emblem-512.png (circular)**

| Platform | Recommended Size | Format |
|----------|------------------|--------|
| Discord | 512x512 | PNG |
| Twitter/X | 400x400 | PNG |
| Instagram | 320x320 | PNG |
| TikTok | 200x200 | PNG |
| YouTube | 800x800 | PNG |
| Facebook | 180x180 | PNG |
| Twitch | 256x256 | PNG |
| Reddit | 256x256 | PNG |

**Pro Tip:** Upload the 512x512 version - platforms will auto-resize and crop to circle.

---

### Social Media Headers/Banners

**Use fire-frost-collision.png (crop to fit platform specs)**

| Platform | Size | Notes |
|----------|------|-------|
| Twitter/X | 1500x500 | Crop center, focus on collision point |
| YouTube | 2560x1440 | Full width, safe area 1546x423 (center) |
| Facebook | 820x312 | Crop center |
| LinkedIn | 1584x396 | Crop center |
| Discord Server | 960x540 | 16:9 aspect ratio |
| Twitch | 1200x480 | Profile banner |

**Cropping Strategy:** Always keep the Fire+Frost collision point in the center of the crop.

---

## 6. Website Usage

### Favicon Implementation
```html
<!-- In <head> section -->
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
```

---

### Header Logo (Dark Theme)
```html
<!-- Recommended for dark-themed website -->
<img src="/branding/logos/firefrost-logo-dark.png" 
     alt="Firefrost Gaming" 
     width="300" 
     height="auto">
```

**Responsive sizing:**
- Desktop: 300-400px width
- Tablet: 200-300px width
- Mobile: 150-200px width

---

### Hero Background
```css
.hero-section {
  background-image: url('/branding/backgrounds/fire-frost-collision.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  min-height: 600px;
}
```

**Optimization:** Use compressed version (<500 KB) for web.

---

## 7. File Optimization Guide

### Current File Sizes (Too Large for Web)

| Asset | Current Size | Target Web Size | Action Needed |
|-------|--------------|-----------------|---------------|
| Emblem | 305 KB | <100 KB | Compress |
| Light Logo | 831 KB | <200 KB | Compress |
| Dark Logo | 1.3 MB | <300 KB | Compress |
| Background | 3.7 MB | <500 KB | Compress + Resize |
| Founders | 1.7 MB | <400 KB | Compress |

---

### Compression Tools

**Online (No Installation):**
- TinyPNG (https://tinypng.com) - Best for PNG compression
- Squoosh (https://squoosh.app) - Google's image optimizer
- Compressor.io - Alternative

**Command Line (ImageMagick):**
```bash
# Install ImageMagick
apt install imagemagick

# Compress emblem
convert firefrost-emblem-512.png -quality 85 -strip firefrost-emblem-512-optimized.png

# Resize and compress background for web
convert fire-frost-collision.png -resize 1920x1080 -quality 80 -strip fire-frost-collision-web.png
```

---

### Recommended Web Versions

**Create these optimized versions for web use:**
```bash
# Emblem (web-optimized)
convert firefrost-emblem-512.png -quality 85 -strip firefrost-emblem-web.png

# Dark logo (web-optimized)
convert firefrost-logo-dark.png -quality 80 -strip firefrost-logo-dark-web.png

# Background (web-optimized and resized)
convert fire-frost-collision.png -resize 1920x1080 -quality 75 -strip fire-frost-collision-web.png
```

**Save optimized versions in:** `branding/web-optimized/`

---

## 8. Logo Do's and Don'ts

### ✅ DO:

- Use the circular emblem for small spaces (favicons, profile pics)
- Use the dark logo for most web applications
- Maintain aspect ratio when resizing
- Use high-resolution sources for print
- Compress images for web to improve load times
- Keep clear space around logos (20px minimum)
- Use PNG format with transparency

### ❌ DON'T:

- Don't rotate or skew the logos
- Don't change the color balance or gradient
- Don't add effects (drop shadows, outer glows) not in the original
- Don't place logos on busy backgrounds (reduces readability)
- Don't use low-resolution versions for large displays
- Don't crop the circular emblem into a square
- Don't stretch or distort logos

---

## 9. Brand Consistency Checklist

**Before publishing ANY branded content, verify:**

- [ ] Using correct logo variant (emblem vs full logo)
- [ ] Logo is high-resolution (not pixelated)
- [ ] File size optimized for web (<500 KB ideally)
- [ ] Colors match Firefrost palette (no color shifts)
- [ ] Aspect ratio maintained (no stretching)
- [ ] Clear space around logo (not cramped)
- [ ] Readable at intended display size
- [ ] Background doesn't clash with logo

---

## 10. Quick Reference

### When to Use Which Logo?

**Need a small icon?** → Circular Emblem (firefrost-emblem-512.png)  
**Dark background?** → Dark Logo (firefrost-logo-dark.png)  
**Light background?** → Light Logo (firefrost-logo-light.png)  
**Epic background?** → Fire+Frost Collision (fire-frost-collision.png)  
**About Us page?** → Founders Art (frostystyle-gingerfury.png)

---

### File Locations (Git Repository)
```
/root/firefrost-master-configs/branding/
├── logos/
│   ├── firefrost-emblem-512.png
│   ├── firefrost-logo-light.png
│   └── firefrost-logo-dark.png
├── backgrounds/
│   └── fire-frost-collision.png
└── founders/
    └── frostystyle-gingerfury.png
```

**Git Repository:** https://git.firefrostgaming.com/mkrause612/firefrost-phase0-configs

---

## 11. Future Asset Needs

**To Create Later:**

- [ ] Favicon.ico (multi-size ICO file)
- [ ] Apple touch icons (180x180)
- [ ] Android Chrome icons (192x192, 512x512)
- [ ] Optimized web versions (compressed)
- [ ] Social media cropped variants
- [ ] Individual founder portrait crops
- [ ] Animated logo (GIF/video for loading screens)
- [ ] Monochrome logo variants (pure black/white)

---

## 12. Legal & Ownership

**Asset Ownership:**
- All visual assets are property of Firefrost Gaming
- Created using AI generation (Gemini AI)
- Free to use for all Firefrost Gaming purposes (website, social, promotional)

**Usage Rights:**
- ✅ Internal use (website, social media, marketing)
- ✅ Community use (wallpapers, fan content with credit)
- ❌ Commercial resale or redistribution
- ❌ Modification for use by other brands

**Credit Line (Optional):**
> "Firefrost Gaming brand assets created with Gemini AI"

---

## Revision History

| Version | Date | Changes |
|---------|------|---------|
| **1.0** | 2026-02-08 | Initial visual assets guide. Documented 5 brand assets: emblem, light/dark logos, collision background, founders art. |

---

**END OF VISUAL ASSETS GUIDE**

**Maintained by The Wizard (Frostystyle) & The Emissary (Gingerfury)**  
**Firefrost Gaming: Fire + Frost in Perfect Balance** 🔥❄️