# Theme Spec — Ghost CMS Buildout

**Task:** Ghost CMS Buildout  
**Document Type:** theme-spec  
**Status:** ACTIVE  
**Last Updated:** 2026-03-10  
**Reference:** `docs/planning/design-bible.md`

---

## Theme Approach

Ghost ships with several free themes. The plan is to select the closest match to our visual needs and configure it with Firefrost branding — avoiding a full custom theme build unless necessary.

**Recommended starting theme:** Casper (Ghost's default) or Source — both support dark mode, custom colors, and hero images well.

**Decision during build session:** Evaluate available themes against spec below. If none are close enough, we build a minimal custom theme.

---

## Branding Implementation

### Colors (Frost Palette — main site)

```
Background:  #0A0A0A  (Obsidian Black)
Primary:     #00E5FF  (Electric Cyan — headings, active links)
Secondary:   #01579B  (Deep Navy — buttons, nav)
Text:        #FFFFFF  (Pure White)
```

### Typography

```
Headings:  Orbitron or Rajdhani (Google Fonts — geometric, high-tech)
Body:      Inter or Roboto (clean, readable)
Code:      Fira Code or JetBrains Mono
Base size: 16px minimum
```

### Logo

- Header: `firefrost-logo-dark.png` (full logo on dark background)
- Favicon: `firefrost-emblem-512.png`
- Never distort — maintain aspect ratio

### Hero Image

- `fire-frost-collision.png` (2560x1259)
- Used as homepage hero background
- Overlay text in white with Electric Cyan accent

### Character Assets

- `founders/frostystyle-gingerfury.png` — founders section on homepage and about page
- `character-sprites/frosty.jpg` — The Wizard profile
- `character-sprites/gingerfury.jpg` — The Emissary profile

---

## Ghost Configuration Checklist

**General settings:**
- [ ] Site title: Firefrost Gaming
- [ ] Site description: "Where Fire Meets Frost" (or agreed tagline)
- [ ] Logo: firefrost-logo-dark.png
- [ ] Icon (favicon): firefrost-emblem-512.png
- [ ] Cover image: fire-frost-collision.png

**Theme settings:**
- [ ] Dark background (#0A0A0A) applied
- [ ] Accent color set to #00E5FF (Electric Cyan)
- [ ] Custom fonts loaded (Orbitron + Inter via Google Fonts)
- [ ] Navigation configured (Home, Servers, About, Blog + CTA buttons)

**Author accounts:**
- [ ] frostystyle — Owner/Admin
- [ ] gingerfury — Editor (can post, cannot change settings)
- [ ] unicorn20089 — Author (can post, cannot edit others)

---

## Notes for Build Session

- Check what themes are available in the Ghost admin before deciding
- Casper supports `{{accent_color}}` which maps directly to our #00E5FF
- Custom CSS injection is available in Ghost admin (Settings → Code injection) — use this for font loading and any overrides before committing to a full custom theme
- Mobile responsiveness must be tested before marking complete