firefrost-operations-manual/docs/planning/design-bible.md

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

background: #01579B;
border: 1px solid #00E5FF;
color: #FFFFFF;
border-radius: 0;

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

Fire Path:

background: #FF3D00;
border: 2px solid #FFD600;
color: #FFFFFF;
border-radius: 6px;

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

Cards

Frost Cards:

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

Fire Cards:

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