firefrost-gaming/firefrost-operations-manual
3
0
Fork 0
Code Issues 146 Pull Requests Packages Projects Releases Wiki Activity

feat: Holly's Arcane colors + Ghost Page Builder with Trinity

Browse Source 
Complete integration of Holly/The Catalyst into brand identity:

DESIGN BIBLE UPDATED (v2.0):
- Added Holly's Arcane palette (purple family)
  - Primary: #A855F7 (vibrant purple)
  - Secondary: #9D4EDD (bright violet)
  - Accent: #C77DFF (light amethyst)
  - Dark: #7F00FF (deep purple)
- Updated core philosophy: Fire + Frost + Foundation
- Added Trinity gradients (Fire+Frost+Arcane combinations)
- Updated brand identity to reflect The Trinity
- Replaced outdated color palettes with current system

HOLLY'S COLOR PALETTE DEFINED:
- Arcane Primary: #A855F7 (main branding)
- Arcane Secondary: #9D4EDD (highlights)
- Arcane Accent: #C77DFF (soft touches)
- Arcane Dark: #7F00FF (text/borders)
- Arcane Gradient: linear-gradient(135deg, #A855F7 0%, #C77DFF 100%)
- Arcane Storm: linear-gradient(135deg, #7F00FF 0%, #A855F7 50%, #C77DFF 100%)

GHOST PAGE BUILDER ENHANCED:
- Added complete Arcane color system to CSS
- New Trinity Gradient: Fire+Arcane+Frost (3-element gradient)
- Updated templates to showcase all three elements:
  - Trinity Layout (3 columns: Fire/Arcane/Frost)
  - Trinity Card Grid (showcasing all three founders)
- Added Arcane utility classes (.arcane-text, .arcane-gradient, .arcane-border)
- Updated header gradient to include purple (Fire→Arcane→Frost)
- Updated footer color reference to show all trinity colors
- Tool now in git: tools/ghost-page-builder/

THE TRINITY NOW COMPLETE:
- 🔥 Fire (Meg/Orange): Passion, community, warmth
- ⚡ Arcane (Holly/Purple): Creative transformation, building, foundation
- ❄️ Frost (Michael/Teal): Precision, technical excellence, strategy

FILES MODIFIED:
- docs/planning/design-bible.md (v1.2 → v2.0)
  - Updated philosophy, color palettes, brand identity
  - Added comprehensive Trinity color system
  - Documented all gradients and usage patterns

FILES CREATED:
- tools/ghost-page-builder/ghost-page-builder.jsx (350+ lines)
  - React artifact with complete Trinity CSS
  - Sample templates showcasing all three elements
  - Color reference footer with hex codes
- tools/ghost-page-builder/README.md
  - Complete usage documentation
  - Trinity CSS class reference
  - Technical specifications

ACCESSIBILITY:
- All color combinations maintain WCAG contrast ratios
- Trinity gradient provides smooth visual transitions
- Each element color distinct and recognizable

NEXT STEPS:
1. Test Ghost Page Builder with new Trinity templates
2. Use Trinity colors across all Ghost pages
3. Update social media graphics with Trinity branding
4. Holly's build showcases use Arcane colors

Signed-off-by: Chronicler #39 <claude@firefrostgaming.com>
This commit is contained in:
Claude
2026-03-21 21:45:04 +00:00
parent 290d639340
commit 7aa5052efe
3 changed files with 685 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

108
docs/planning/design-bible.md
View File

@@ -1,28 +1,31 @@
# ❄️🔥 FIREFROST GAMING: THE DESIGN BIBLE
**Document ID:** FFG-PLN-002
**Version:** 1.2
**Version:** 2.0
**Created:** February 8, 2026
**Last Updated:** February 12, 2026 (9:00 AM CST)
**Last Updated:** March 22, 2026
**Author:** Michael Krause
**Last Updated By:** The Chronicler
**Last Updated By:** Chronicler #39
**Status:** 🟢 CURRENT
**Review Date:** Monthly
**Last Updated:** February 8, 2026
**Maintained By:** Frostystyle (Michael) & Gingerfury (Meg)
**Last Updated:** March 22, 2026
**Maintained By:** The Trinity (Michael, Meg, Holly)
**Status:** Living Document
---
## 1. The Core Philosophy: "Choose Your Destiny"
## 1. The Core Philosophy: "Fire + Frost + Foundation"
Firefrost Gaming is built on the equilibrium of two opposing forces. We do not compromise on security, and we do not compromise on passion. Every asset we create must reflect this balance.
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):** Represents Logic, Stability, Security, and Technical Precision.
* **The Fire (The Emissary):** Represents Passion, Community, Warmth, and Authentic Connection.
* **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.
**Tagline:** "Fire melts barriers. Frost builds foundations."
**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"
---
@@ -54,35 +57,76 @@ Firefrost Gaming is built on the equilibrium of two opposing forces. We do not c
| `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)** — passion, energy, community warmth, fierce protection
- **Frost = Michael (FrostyStyle)** — precision, architecture, cool strategy, deep knowledge
- **The collision point** — where fire meets frost, where their strengths combine. That's Firefrost Gaming.
- **Typography:** "FIRE" in cold steel/blue tones, "FROST" in warm orange/fire tones — intentional contrast swap
- **Dragon motif:** Fire dragon in the logo represents both power and guardianship
- **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
We use high-contrast color theory to signal to the user exactly where they are in the network.
The Trinity of elemental forces, each with a distinct color family.
### A. The Frost Palette (Technical/All-Ages)
*Used for: Main Website, Tutorials, Gitea, Project Logs, and General Community.*
### 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%)`
### 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 |
|---------|----------|-------|
| **Primary** | `#00E5FF` | Electric Cyan - Headings, Active Links |
| **Secondary** | `#01579B` | Deep Navy - Buttons, Nav Backgrounds |
| **Background** | `#0A0A0A` | Obsidian Black - Main Page Background |
| **Text** | `#FFFFFF` | Pure White - High Readability Body Text |
### B. The Fire Palette (Ignis/18+)
*Used for: /ignis route, Mature Community Space, and Veteran Socials.*
| Element | Hex Code | Usage |
|---------|----------|-------|
| **Primary** | `#FF3D00` | Deep Orange/Red - Alerts, Fire Path Links |
| **Secondary** | `#BF360C` | Burnt Umber - Borders, Secondary Accents |
| **Background** | `#120000` | Blood Black - Gated Section Background |
| **Accent** | `#FFD600` | Amber Gold - Important Calls to Action |
| **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 |
---