# ❄️🔥 FIREFROST GAMING: THE DESIGN BIBLE

**Document ID:** FFG-PLN-002  
**Version:** 2.0  
**Created:** February 8, 2026  
**Last Updated:** March 22, 2026  
**Author:** Michael Krause  
**Last Updated By:** Chronicler #39  
**Status:** 🟢 CURRENT  
**Review Date:** Monthly

**Last Updated:** March 22, 2026  
**Maintained By:** The Trinity (Michael, Meg, Holly)  
**Status:** Living Document

---

## 1. The Core Philosophy: "Fire + Frost + Foundation"

Firefrost Gaming is built on the balance of three elemental forces. We do not compromise on security, we do not compromise on passion, and we do not compromise on creative transformation.

* **The Frost (The Wizard - Michael):** Logic, Stability, Security, Technical Precision. Cool blue strategy.
* **The Fire (The Emissary - Meg):** Passion, Community, Warmth, Authentic Connection. Fierce orange energy.
* **The Arcane (The Catalyst - Holly):** Creative Transformation, Building, Innovation, Foundation. Vibrant purple synthesis.

**The Trinity:** Where Fire's passion meets Frost's precision through Arcane's creativity, impossible things become real.

**Tagline:** "Fire + Frost + Foundation = Where Love Builds Legacy"

---



## BRANDING ASSET INVENTORY

### Logos
| File | Description | Use Case |
|------|-------------|----------|
| `branding/logos/firefrost-emblem-512.png` | Fire dragon + ice crystal yin-yang emblem | Favicon, avatar, icon contexts |
| `branding/logos/firefrost-logo-dark.png` | Full logo on dark background — dragon emblem + "FIREFROST GAMING" typography | Dark theme headers, Discord banner, loading screens |
| `branding/logos/firefrost-logo-light.png` | Full logo on transparent/light background | Light theme contexts, print, merchandise |

### Character Sprites
| File | Character | Description |
|------|-----------|-------------|
| `branding/character-sprites/frosty.jpg` | FrostyStyle (Michael) | Pixel art frost wizard — hooded ice armor, glowing spellbook, frost energy swirls. Front and back views with component breakdown |
| `branding/character-sprites/gingerfury.jpg` | GingerFury (Meg) | Pixel art fire warrior — red hair ablaze, flame-wreathed armor, fire in hands. Front and back views with component breakdown |

### Founders Art
| File | Description |
|------|-------------|
| `branding/founders/frostystyle-gingerfury.png` | Epic fantasy portrait of both founders — frost wizard with spellbook and fire warrior with flames, standing together on frozen battlefield. High-detail art style. |

### Backgrounds
| File | Description | Use Case |
|------|-------------|----------|
| `branding/backgrounds/fire-frost-collision.png` | Panoramic fire vortex meeting ice crystal formation — white-hot energy at collision point | Login screens, Discord banners, website hero images, stream overlays |

### Brand Identity
- **Fire = Meg (GingerFury/The Emissary)** — Passion, energy, community warmth, fierce protection. Orange/amber tones.
- **Frost = Michael (FrostyStyle/The Wizard)** — Precision, architecture, cool strategy, deep knowledge. Teal/cyan tones.
- **Arcane = Holly (unicorn20089/The Catalyst)** — Creative transformation, building, innovation, foundation. Purple/violet tones.
- **The Trinity** — Where Fire meets Frost through Arcane, three elements in perfect balance.
- **Typography:** "FIRE" in warm tones, "FROST" in cool tones, "ARCANE" in vibrant purple
- **Dragon motif:** Fire dragon in the logo represents power, guardianship, and the fusion of elements

## 2. Visual Identity & Color Palette

The Trinity of elemental forces, each with a distinct color family.

### A. The Fire Palette (Meg/The Emissary - Passion & Community)
*Primary Brand Colors - Used for: Community content, social media, fire-path servers*

| Element | Hex Code | RGB | Usage |
|---------|----------|-----|-------|
| **Primary** | `#FF6B35` | rgb(255, 107, 53) | Main Fire orange - headings, CTAs, fire branding |
| **Secondary** | `#F7931E` | rgb(247, 147, 30) | Warm accent - highlights, hover states |
| **Accent** | #FFA500` | rgb(255, 165, 0) | Bright amber - emphasis, alerts |
| **Text** | `#FFFFFF` | rgb(255, 255, 255) | White text on fire backgrounds |

**Fire Gradient:** `linear-gradient(135deg, #FF6B35 0%, #FFA500 100%)`

### B. The Frost Palette (Michael/The Wizard - Precision & Technical)
*Primary Brand Colors - Used for: Technical content, documentation, frost-path servers*

| Element | Hex Code | RGB | Usage |
|---------|----------|-----|-------|
| **Primary** | `#4ECDC4` | rgb(78, 205, 196) | Main Frost teal - headings, links, frost branding |
| **Secondary** | `#45B7D1` | rgb(69, 183, 209) | Cool accent - highlights, technical elements |
| **Accent** | `#00CED1` | rgb(0, 206, 209) | Bright cyan - emphasis, code blocks |
| **Text** | `#FFFFFF` | rgb(255, 255, 255) | White text on frost backgrounds |

**Frost Gradient:** `linear-gradient(135deg, #4ECDC4 0%, #00CED1 100%)`

### C. The Arcane Palette (Holly/The Catalyst - Creative Transformation)
*Primary Brand Colors - Used for: Building content, creative showcases, catalyst elements*

| Element | Hex Code | RGB | Usage |
|---------|----------|-----|-------|
| **Primary** | `#A855F7` | rgb(168, 85, 247) | Main Arcane purple - headings, catalyst branding |
| **Secondary** | `#9D4EDD` | rgb(157, 78, 221) | Bright violet - highlights, creative accents |
| **Accent** | `#C77DFF` | rgb(199, 125, 255) | Light amethyst - soft touches, backgrounds |
| **Dark** | `#7F00FF` | rgb(127, 0, 255) | Deep purple - text, borders, strong contrast |

**Arcane Gradient:** `linear-gradient(135deg, #A855F7 0%, #C77DFF 100%)`

> ⚠️ **Discord Role Color:** Holly's Lead Builder role in Discord must be set to `#A855F7`. This role has been found gray (no color set) at least once — March 28, 2026. If Holly's name ever appears gray in Discord, check the Lead Builder role color and restore it to `#A855F7`. This is her Trinity founder identity color and should never be left unset.

### D. The Trinity Gradients (Combined Elements)

**Fire + Frost (Classic):**  
`linear-gradient(135deg, #FF6B35 0%, #4ECDC4 100%)`  
*Used for: Main branding, homepage hero, unified messaging*

**Fire + Frost + Arcane (Full Trinity):**  
`linear-gradient(135deg, #FF6B35 0%, #A855F7 50%, #4ECDC4 100%)`  
*Used for: Founder content, trinity imagery, special occasions*

**Arcane Storm (Holly's Signature):**  
`linear-gradient(135deg, #7F00FF 0%, #A855F7 50%, #C77DFF 100%)`  
*Used for: Build showcases, Holly's content, creative projects*

### E. Neutral Palette (Universal)
*Used across all content types*

| Element | Hex Code | Usage |
|---------|----------|-------|
| **Dark** | `#1a1a1a` | Main backgrounds, dark mode |
| **Gray** | `#6b7280` | Secondary text, borders, subtle elements |
| **Light** | `#f3f4f6` | Light backgrounds, cards, containers |
| **White** | `#ffffff` | Primary text on dark, pure backgrounds |

---

## 3. Typography

To ensure accessibility and professional aesthetics, we use a two-font system.

* **Headings:** *Orbitron* or *Rajdhani*. Geometric sans-serif to evoke high-tech "Wizardry."
* **Body Text:** *Inter* or *Roboto*. Clean, high-legibility sans-serif for long-form reading and documentation.
* **Code:** *Fira Code* or *JetBrains Mono*. Used for all technical blocks in the Master Archive.

**Font Sizing:**
- Base: 16px (never smaller)
- Headings: 1.5x, 2x, 2.5x base
- Line height: 1.6 for body text

---

## 4. UI/UX Language

The interface should behave differently depending on the chosen path.

### The Frost Interface (Precision)
* **Shape:** Sharp 90-degree corners (border-radius: 0)
* **Style:** "Glassmorphism" (semi-transparent backgrounds with backdrop blur)
* **Border:** Thin 1px cyan borders (`#00E5FF`)
* **Shadows:** None (flat design)

### The Fire Interface (Passion)
* **Shape:** Slightly rounded corners (4px - 8px border-radius)
* **Style:** Subtle outer glows and drop shadows that simulate heat radiation
* **Border:** Gradient borders transitioning from Red (`#FF3D00`) to Gold (`#FFD600`)
* **Shadows:** 0 4px 12px rgba(255, 61, 0, 0.3)

---

## 5. Tone of Voice

We are "The Helpful Peer." We speak with authority but without ego.

* **The Wizard Voice:** Calm, technical, and precise. Focuses on the "How-To" and "Source of Truth."
  - Example: "To configure your server, navigate to `/etc/nginx/sites-available/`"
  - NOT: "Hey friend! Let's dive into some super cool server stuff!"

* **The Emissary Voice:** Warm, energetic, and protective. Focuses on the "Who" and the community "Vibe."
  - Example: "Welcome back, veteran! Ready to tackle that boss?"
  - NOT: "Execute the following command to initiate the protocol:"

* **The Combined Voice:** "Stability provided by the Frost; Community fueled by the Fire."
  - Example: "Firefrost Gaming combines technical excellence with authentic community."

---

## 6. The Firefrost Gate (Path Transition)

> **Note:** This section was previously titled "The Frostwall Protocol." Renamed Feb 12, 2026 per ADR-005 — "Frostwall" is reserved for network defense architecture. This UI transition is a Firefrost brand concept.

The transition between paths must be intentional.

1. **Visual Warning:** Before entering the Fire Path, the UI color scheme must shift noticeably (Frost → Fire palette).
2. **The Handshake:** An explicit age-verification check or "Ignis Protocol" login must be presented.
3. **The Exit:** A prominent "Return to Frost Path" button must always be available to reset the environment to all-ages safety.

**Technical Implementation:**
- Color shift animation: 800ms transition
- Background: #0A0A0A → #120000
- Border glow intensifies
- Warning overlay fades in

---

## 7. Imagery & Symbols

### Visual Vocabulary

**Frost Symbols:**
- Staves, Snowflakes, Blue Circuitry, Geometric Shields
- Ice crystals, Angular patterns
- Books, Tomes, Knowledge artifacts

**Fire Symbols:**
- Flames, Embers, Red Capes, Glowing Hearts
- Hammers (Banhammer metaphor)
- Warm light, Organic flow

### The Firefrost Sigil

**Construction:**
- Outer circle: Frost border (2px, #00E5FF)
- Inner circle: Fire glow (#FF3D00, 60% opacity)
- Center: 6-pointed snowflake (geometric, cyan)
- Background: Flame silhouette (organic, red/gold gradient)

**Symbolism:**
- The snowflake represents The Wizard (order, structure, knowledge)
- The flame represents The Emissary (passion, community, warmth)
- The circle contains both (unity, balance, completeness)

**Usage:**
- Favicon (16x16, 32x32, 64x64)
- Loading spinner animation
- Section dividers
- Watermark for official content
- Social media profile images

---

## 8. Logo Usage & Variations

### Primary Logo
- Full color Firefrost Sigil (Fire + Frost combined)
- Minimum size: 120px width
- Clear space: 20px on all sides
- Never distort aspect ratio

### Secondary Variations
- **Frost-only logo:** Cyan/white on dark backgrounds (technical content)
- **Fire-only logo:** Red/gold on dark backgrounds (community content)
- **Monochrome version:** White on dark, black on light

### Logo Don'ts
- ❌ Don't rotate the logo
- ❌ Don't change the color balance
- ❌ Don't add effects (drop shadows, gradients not in spec)
- ❌ Don't place on busy backgrounds
- ❌ Don't use low-resolution versions

---

## 9. Motion & Animation Language

### Frost Animations (Technical)
- **Style:** Linear, precise, mechanical
- **Timing:** Sharp easing (ease-in-out)
- **Example:** Menu slides, page transitions, data loading
- **Duration:** 200-300ms (quick, efficient)

### Fire Animations (Community)
- **Style:** Organic, flowing, alive
- **Timing:** Smooth easing (ease-out)
- **Example:** Hover effects, button pulses, celebration effects
- **Duration:** 300-500ms (warmer, more presence)

### The Transition (Frost → Fire)
- Gradual color shift over 800ms
- Background darkens (#0A0A0A → #120000)
- Border glow intensifies
- Warning overlay fades in with Age Gate

---

## 10. UI Components

### Buttons

**Frost Path:**
```css
background: #01579B;
border: 1px solid #00E5FF;
color: #FFFFFF;
border-radius: 0;

/* Hover */
background: #00E5FF;
color: #0A0A0A;
```

**Fire Path:**
```css
background: #FF3D00;
border: 2px solid #FFD600;
color: #FFFFFF;
border-radius: 6px;

/* Hover */
box-shadow: 0 0 8px #FFD600;
```

### Cards

**Frost Cards:**
```css
background: rgba(1, 87, 155, 0.1);
backdrop-filter: blur(10px);
border: 1px solid #00E5FF;
box-shadow: none;
```

**Fire Cards:**
```css
background: rgba(191, 54, 12, 0.2);
border: 1px solid #FF3D00;
box-shadow: 0 4px 12px rgba(255, 61, 0, 0.3);
```

---

## 11. Accessibility Commitments

### Color Contrast
- All text meets WCAG AA standards (4.5:1 minimum)
- Critical CTAs meet AAA standards (7:1)
- Test with WebAIM Contrast Checker before deployment

### Keyboard Navigation
- All interactive elements keyboard-accessible
- Focus states clearly visible (2px outline, primary color)
- Skip-to-content links for screen readers

### Screen Reader Support
- Semantic HTML (proper heading hierarchy)
- Alt text for all images
- ARIA labels for complex interactions

---

## 12. Social Media Platform Strategy

### Platform Directory

| Platform | Handle | Purpose | Frequency | Priority |
|----------|--------|---------|-----------|----------|
| **Discord** | discord.gg/firefrost | Command Center | Daily | 🔴 Critical |
| **TikTok** | @FirefrostGaming | Discovery Hook | 3-5x/week | 🔴 Critical |
| **Twitter/X** | @FirefrostGaming | Real-time Pulse | 1-3x/day | 🔴 Critical |
| **Instagram** | @FirefrostGaming | Visual Gallery | 3-4x/week | 🔴 Critical |
| **YouTube** | @FirefrostOfficial | Long-form Archive | 2-3x/month | 🔴 Critical |
| **Facebook** | Firefrost Gaming | Local Outreach | 2-3x/week | 🟡 High |
| **Twitch** | @FirefrostGaming | Live Streams | 1-2x/week | 🟡 High |
| **Reddit** | r/FirefrostGaming | Community Discussion | 2-3x/week | 🟡 High |
| **GitHub** | @FirefrostGaming | Open Source Hub | As needed | 🟢 Medium |
| **LinkedIn** | Firefrost Gaming | Professional Network | 1-2x/month | 🟢 Medium |
| **BlueSky** | @firefrostgaming.bsky.social | Twitter Alternative | Mirror | 🔵 Low |

### Profile Images (Standardized)
- **All platforms:** Firefrost Sigil (snowflake in flame)
- **Banners/Headers:** Frostystyle & Gingerfury founder art

### Bio Template (Adapt by platform length)

**Short (Twitter/Instagram):**
> Fire 🔥 + Frost ❄️ | Minnesota Minecraft Community | Security-First Gaming | 18+ Ignis: [link]

**Long (YouTube/Facebook):**
> Firefrost Gaming is a Minnesota-based Minecraft community built on the balance of Fire and Frost. The Wizard (Frostystyle) ensures technical excellence, while The Emissary (Gingerfury) nurtures our community. 13+ servers, all-ages Frost Path + adult Ignis space (18+). Join: [Discord link]

### Content Voice by Platform

**Frost Path Content (All-Ages):**
- Professional, helpful, educational
- Family-friendly language always
- Technical accuracy prioritized
- The Wizard's voice (precise, informative)

**Fire Path Content (Age-Gated):**
- Casual, authentic, unfiltered
- Mature humor acceptable
- Community-driven tone
- The Emissary's voice (warm, energetic)

---

## 13. Code Repository Strategy

### Internal vs Public

**Gitea (git.firefrostgaming.com) - Private:**
- Infrastructure configurations
- Sensitive documentation
- Internal procedures and session logs
- Team collaboration only
- Master Archive for Phase 0.5+

**GitHub (@FirefrostGaming) - Public:**
- Open source tools and themes
- Custom Pterodactyl themes (Frost & Ignis)
- Wings configuration templates
- Community contributions welcome
- Technical portfolio and credibility

---

## Revision History

| Version | Date | Author | Changes |
|---------|------|--------|---------|
| **1.0** | 2026-02-08 | Frostystyle | Initial Design Bible creation |
| **1.1** | 2026-02-08 | Frostystyle | Added social media platforms, code repository strategy, accessibility standards, UI components, and motion language |

---

**END OF DESIGN BIBLE**

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