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

26 KiB

🎨 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

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)

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


Gingerfury Character Sprite Sheet

Created: February 9, 2026
Generator: Gemini AI (Imagen 3)
Filename: gingerfury-sprite-sheet.jpg
Location: branding/character-sprites/
Status: Ready for animation/overlay use

Asset Description

AI-generated character sprite sheet featuring Meg "Gingerfury" in pixel art style. Contains multiple angles and poses suitable for streaming overlays, social media animations, and Discord emotes.

Sprite Components

Views Included:

  • Front View: Full character with flame effects, red hair on fire, bronze/gold armor
  • Back View: Cape/cloak detail, back armor design
  • Head Angles: 4 different head rotations (top row)
  • Body Parts: Individual limb components (hands, feet)
  • Fire Effects: Animated flame particles around character

Dimensions: ~1024x1024px (estimated from upload)
Color Palette: Fire theme - red, orange, gold, bronze, deep crimson
Style: Pixel art / RPG sprite aesthetic

1. Twitch Stream Overlays

  • Starting Soon: Animated walk-in with fire trail
  • BRB Screen: Idle breathing animation with flickering flames
  • Ending Screen: Wave goodbye with fire burst
  • Sub/Donation Alerts: Celebrate pose with fire explosion
  • Chat Box: Mini sprite next to Gingerfury messages

2. Social Media Animated Content

  • Twitter/X Profile: Looping fire animation (GIF/MP4)
  • Discord Server Icon: Breathing fire loop
  • TikTok Profile: Flame flicker animation
  • Instagram Stories: Character sticker pack
  • YouTube Channel Icon: Front view with flames

3. Discord Emotes

Extract individual elements for custom server emotes:

  • :gingerfury_fire: - Fire burst effect
  • :gingerfury_wave: - Greeting gesture
  • :gingerfury_mod: - Banhammer time (add hammer overlay)
  • :gingerfury_hype: - Excited pose with maximum flames

4. Stream Widgets & Alerts

  • Raid Alerts: Gingerfury leads incoming raid
  • Follower Goals: Character "levels up" with more fire
  • Subscriber Milestones: Evolving fire intensity
  • Chat Commands: Appears when !gingerfury is typed

5. Branding Materials

  • Website "About The Emissary" section
  • Staff roster icon (The Emissary role)
  • Email signatures for Meg
  • Business cards (if needed)
  • Merchandise designs (t-shirts, stickers)

Animation Possibilities

Simple Loops (DIY-Friendly)

  1. Idle Breathing: Slight up/down movement, flames flicker
  2. Fire Pulse: Flames grow/shrink rhythmically
  3. Hair Wave: Red hair flows with animated motion
  4. Armor Shine: Metallic glint effect on bronze armor
  1. Walk Cycle: Full character walking with cape flow
  2. Attack Animation: Swing banhammer (overlay weapon)
  3. Victory Pose: Arms raised, fire explosion
  4. Emote Set: Laughing, crying, angry, surprised
  5. Path Selection: Fire vs Frost choice animation

Tools for Animation

Free/Budget Options:

  • Aseprite ($20) - Pixel art and animation
  • Piskel (Free web-based) - Simple sprite animation
  • GIMP (Free) - GIF creation from frames

Professional Options:

  • After Effects - Complex animations and effects
  • Spine 2D - Skeletal animation for smooth movement
  • Commissioned Animator - Fiverr/Upwork ($50-200 for full set)

Streaming Software:

  • OBS Studio - Import as image source, animate with filters
  • StreamElements/StreamLabs - Custom alert integration
  • LioranBoard - Advanced Stream Deck alternative with animation support

Technical Specifications

For Stream Overlays:

  • Export individual poses as PNG with transparency
  • Recommended output: 512x512px per frame (scales well)
  • Frame rate: 12-24fps for smooth pixel art animation
  • Format: GIF (simple loops) or WebM (transparency + smaller file)

For Social Media:

  • Profile pics: Crop front view, add border
  • Animated: 15fps GIF, under 15MB for Twitter
  • Static: PNG with transparent background
  • Aspect ratio: 1:1 (square) for most platforms

For Discord Emotes:

  • Size: 128x128px (Discord standard)
  • Format: PNG with transparency
  • File size: Under 256KB
  • Naming: gingerfury_[emotion].png

Companion Asset Needed

Frostystyle Matching Sprite Sheet:

  • Ice/frost theme to match Gingerfury's fire theme
  • Same pose structure for consistency
  • Blue/white/silver color palette
  • Frost crystal effects instead of fire
  • Can be used together for "Fire + Frost" branding

Rights & Usage

Generator: Gemini AI (Google)
Commercial Use: Allowed (AI-generated content)
Ownership: Firefrost Gaming
Credit: No attribution required (AI-generated)

Note: If commissioning animations based on this sprite, ensure animator provides commercial usage rights and source files (.psd, .aep, etc.) for future edits.

Future Enhancements

Phase 1 (Immediate - DIY):

  • Crop individual poses from sprite sheet
  • Create simple fire flicker GIF for social media
  • Extract head for Discord profile pic

Phase 2 (Short-term - Low cost):

  • Commission basic idle animation ($50-100)
  • Create 5-10 Discord emote set
  • Design Twitch sub badges using character

Phase 3 (Long-term - Investment):

  • Full animated overlay set for Twitch ($200-500)
  • Matching Frostystyle sprite sheet
  • Interactive Stream Deck buttons
  • Animated intro/outro videos

See also:

  • founder-art-fire-frost.png - Original Gemini art (high-res fantasy style)
  • visual-assets-guide.md - Complete brand guidelines
  • firefrost-social-strategy.md - Where to deploy these assets

Created by: Gemini AI via Michael's prompt
Documented by: Michael + Claude
Asset Status: Ready for implementation
Priority: HIGH - Perfect for Meg's Twitch/social launch

File + Frost = Where Passion Meets Precision 🔥❄️


Frostystyle Character Sprite Sheet

Created: February 9, 2026
Generator: Gemini AI (Imagen 3)
Filename: frostystyle-sprite-sheet.jpg
Location: branding/character-sprites/
Status: Ready for animation/overlay use

Asset Description

AI-generated character sprite sheet featuring Michael "Frostystyle" in pixel art style. Matches Gingerfury sprite format with ice/frost theme instead of fire. Contains multiple angles and poses suitable for streaming overlays, social media animations, and Discord emotes.

Sprite Components

Views Included:

  • Front View: Full character holding glowing blue spellbook, frost particle effects, ice blue robes with fur trim
  • Back View: Hooded cape/cloak detail, back armor design with frost crystals
  • Head Angles: 4 different head rotations (top row) - brown skin tone, hooded
  • Body Parts: Individual limb components (hands, feet in brown leather)
  • Frost Effects: Animated ice particles, frost crystals, cyan magical aura

Dimensions: ~1024x1024px (estimated from upload)
Color Palette: Frost theme - ice blue, cyan, white, silver, dark navy, brown leather accents
Style: Pixel art / RPG sprite aesthetic (matches Gingerfury format exactly)

Key Design Elements

The Spellbook:

  • Central to character identity (The Wizard's Manual)
  • Glowing ice blue with golden trim
  • Represents knowledge, documentation, technical precision
  • Matches founder art composition

Frost Magic:

  • Swirling ice particles (mirror to Gingerfury's fire)
  • Frost crystals floating in magical aura
  • Cold, calculated aesthetic (vs fire's wild passion)
  • Cyan/white color scheme for clarity and precision

Character Details:

  • Hooded and mysterious (technical backbone working in shadows)
  • Fur-trimmed robes (Minnesota winter aesthetic)
  • Darker skin tone (accurate to Michael)
  • Leather boots/gloves for warmth contrast
  • Blue armor plates with frost crystal accents

1. Twitch Stream Overlays (Paired with Gingerfury)

  • Dual Founders: Fire on left, Frost on right (partnership visual)
  • Starting Soon: Both characters walk in from opposite sides, meet in middle
  • BRB Screen: Idle breathing animations in sync
  • Ending Screen: Wave goodbye together
  • Sub/Donation Alerts: Both celebrate with opposing element effects

2. Social Media Paired Content

  • Twitter/X: Fire + Frost founder announcement posts
  • Discord Server Banner: Both characters back-to-back
  • YouTube Channel Art: Frostystyle for technical videos, Gingerfury for community
  • Instagram Stories: Matching sticker pack (fire and ice versions)

3. Discord Emotes (Frost Set to Match Fire Set)

Extract individual elements for custom server emotes:

  • :frostystyle_ice: - Frost burst effect
  • :frostystyle_book: - Reading the manual (for documentation jokes)
  • :frostystyle_wizard: - Technical mastery emote
  • :frostystyle_cold: - Unimpressed/analytical reaction

4. Technical/Documentation Branding

  • Documentation Headers: Frostystyle icon for technical docs
  • GitHub README: Profile picture for technical repositories
  • Technical Blog Posts: Author avatar for infrastructure articles
  • Email Signatures: Michael's professional signature
  • Staff Roster: The Wizard role icon

5. Fire + Frost Comparative Content

  • Path Selection Screen: Choose Fire (Gingerfury) or Frost (Frostystyle)
  • Subscription Tiers: Frost path represented by Frostystyle sprite
  • About Us Page: Both sprites animated together
  • Merchandise: Matching t-shirts, stickers, pins with both characters

Animation Possibilities

Simple Loops (DIY-Friendly)

  1. Idle Breathing: Slight up/down movement, frost particles drift
  2. Book Glow: Spellbook pulses with blue light
  3. Hood Sway: Gentle movement from cold wind
  4. Ice Shimmer: Armor plates catch light, frost crystals twinkle
  1. Reading Animation: Pages turn in spellbook, glowing runes appear
  2. Cast Spell: Book opens, ice magic radiates outward
  3. Victory Pose: Book slams shut, frost explosion
  4. Emote Set: Thinking, calculating, satisfied, frustrated
  5. Path Duality: Fire/Frost transformation or mirror effect with Gingerfury

Paired Animation Concepts (Fire + Frost Together)

For Website/Streams:

  1. Mirror Animation: Both idle breathing in sync, elements swirl between them
  2. Approach & Meet: Walk from opposite sides, shake hands in middle (partnership)
  3. Elemental Battle (Friendly): Playful magic duel, ends in draw (balanced power)
  4. Founder Intro: Side-by-side presentation, elements combine into Firefrost logo
  5. Path Selection: User chooses Fire or Frost, chosen character steps forward

Technical Specifications

Matches Gingerfury Sheet:

  • Same dimensions and component layout
  • Compatible animation framerates
  • Matching sprite positioning for paired content
  • Consistent pixel art style

For Stream Overlays:

  • Export individual poses as PNG with transparency
  • Output: 512x512px per frame (matches Gingerfury)
  • Frame rate: 12-24fps for smooth pixel art
  • Format: GIF (simple) or WebM (transparent)

For Paired Content:

  • Both sprites at same scale
  • Fire on left (warm), Frost on right (cool)
  • Elements meet/interact in center
  • Contrasting but complementary color schemes

Companion Asset: Gingerfury Sprite

Perfect Pairing:

  • Fire (Gingerfury) + Frost (Frostystyle) = Firefrost Gaming identity
  • Matching format enables paired animations
  • Complementary color schemes (warm vs cool)
  • Contrasting but balanced aesthetics (passion vs precision)

Use Together For:

  • Dual stream setups
  • Founder introduction content
  • Path selection screens
  • Brand identity marketing
  • Merchandise designs

Rights & Usage

Generator: Gemini AI (Google)
Commercial Use: Allowed (AI-generated content)
Ownership: Firefrost Gaming
Credit: No attribution required (AI-generated)

Paired Use: Both Frostystyle and Gingerfury sprites can be used together for maximum brand impact.

Future Enhancements

Phase 1 (Immediate - DIY):

  • Crop individual poses from sprite sheet
  • Create simple frost shimmer GIF for social media
  • Extract head for Discord profile pic
  • Pair with Gingerfury for dual content

Phase 2 (Short-term - Low cost):

  • Commission matching idle animations ($50-100 for both)
  • Create 5-10 Discord emote sets (Fire + Frost pairs)
  • Design Twitch badges using both characters

Phase 3 (Long-term - Investment):

  • Full animated overlay set for dual streams ($300-600)
  • Interactive Path selection animation
  • Animated About Us page (both characters)
  • Fire + Frost transformation sequence

See also:

  • gingerfury-sprite-sheet.jpg - Matching Fire-themed sprite (companion asset)
  • founder-art-fire-frost.png - Original high-res fantasy art (both founders)
  • visual-assets-guide.md - Complete brand guidelines
  • path-philosophy.md - Fire vs Frost concept explanation

Fire + Frost Sprite Pair: Complete Founder Identity

Status: BOTH SPRITES COMPLETE
Created: February 9, 2026
Total Assets: 2 matching sprite sheets ready for animation

The Vision Realized:

  • Gingerfury (Fire) = Passion, Community, The Emissary
  • Frostystyle (Frost) = Precision, Systems, The Wizard
  • Together = Firefrost Gaming visual identity

Next Steps:

  1. Both sprites documented
  2. Upload Frostystyle sprite to Git
  3. Create simple GIF loops for social media testing
  4. Commission professional animations for Twitch launch
  5. Design Discord emote sets (Fire + Frost pairs)

Priority: HIGH - Perfect for brand launch across all platforms

Fire + Frost = Where Passion Meets Precision 🔥❄️