firefrost-gaming/firefrost-operations-manual
3
0
Fork 0
Code Issues 146 Pull Requests Packages Projects Releases Wiki Activity
Files
014de493bbc6fd538fe3a2b1ede89090e52f5f82
firefrost-operations-manual/docs/visual-assets-guide.md

12 KiB
Raw Blame History

🎨 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

<!-- 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)

<!-- 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

.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):

Command Line (ImageMagick):

# 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:

# 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

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 🔥❄️

Reference in New Issue View Git Blame Copy Permalink