# Dungeon Jerks — Design system

Marketing site and play UI share one tavern aesthetic: deep purple dungeon,
gold trim, rowdy PG-13 voice. **Not** the threesided.com cyan/magenta palette.

## Brand voice

- **Tone:** Rowdy tavern table — snarky, fast, ADHD-friendly. Short sentences.
- **Audience:** 3–8 players who want D&D energy without homework.
- **Do:** "Roll, jeer, profit." Game terms (GP, HP, jerk power, tile, action card).
- **Don't:** Corporate SaaS, lore walls, or meta commentary about tooling.

**Credit line:** Adam Aragon & [ThreeSided Studios](https://threesided.com)

## Colors

| Token | Hex | Use |
|-------|-----|-----|
| `--gold-1` | `#f6d486` | Headlines, CTAs, highlights |
| `--gold-2` | `#e8b863` | Secondary gold, borders |
| `--gold-3` | `#8c6a2c` | Frame borders, depth |
| `--gold-4` | `#4a3414` | Text on gold buttons |
| `--bg-deep` | `#07060f` | Page background |
| `--bg-1` | `#110d22` | Surfaces |
| `--bg-2` | `#1a1430` | Panels |
| `--bg-3` | `#2a1f5c` | Input borders |
| `--accent` | `#8a5cff` | Purple glow, pills |
| `--accent-2` | `#5cffb8` | Success / positive |
| `--ink` | `#e6e1ff` | Body text |
| `--crimson` | `#d44a4a` | Errors, damage |

Defined in `src/routes/+layout.svelte` as `:global(:root)` tokens.

## Typography

- **Cinzel** (self-hosted woff2) — H1–H3, nav wordmark, gold buttons, kicker labels.
- **Inter** (self-hosted woff2) — Body, forms, meta copy.
- Preload: `/fonts/cinzel-latin-700-normal.woff2`, `/fonts/inter-latin-400-normal.woff2`.

## Tavern metaphor

The site is the **front room**; `/play` is the **back table**. Wood-grain panels,
candle flicker on nav, gold corner frames (`.frame`), purple mist on heroes.
Marketing copy sells the chaos; play UI delivers it.

## Animation principles

1. **Scroll reveal** — `ScrollReveal` + `reveal` action; fade-up, optional card flip.
2. **Hero stagger** — Title words animate in sequence; respect `prefers-reduced-motion`.
3. **Ambient** — CSS-only mist/parallax on heroes; no heavy WebGL on marketing pages.
4. **Performance** — Lazy-load art below fold; eager only for hero LCP images.

## Components

| Component | Path | Role |
|-----------|------|------|
| `.frame` | global in root layout | Gold-corner dialog/card frame |
| `MarketingNav` | `$lib/components/marketing/` | Sticky nav + Play CTA |
| `MarketingFooter` | same | Credits, links |
| `ScrollReveal` | same | IntersectionObserver wrapper |
| `PageHero` | same | Rounded tavern hero block (gold corners, wood fill, candle glow) |
| `HowToSteps` | same | Shared how-to grid |
| `.btn-gold` / `.btn-ghost` | marketing layout | CTAs |

## Page map

| Route | Purpose |
|-------|---------|
| `/` | Home — hero, stats, teasers |
| `/about` | Lore + how to play |
| `/characters` | Filterable character grid |
| `/features` | Tiles, actions, audio, multiplayer |
| `/changelog` | Curated milestone log + git dev log (since repo open) |
| `/style-guide` | Living brand reference |
| `/shop` | Kickstarter / mailing list |
| `/contact` | Feedback form |
| `/press` | Press kit + `/press-kit.zip` download |
| `/admin` | Locked placeholder |
| `/demo` | Redirect → `/play?demo=1` + prefilled names |
| `/play` | Game (unchanged) |

## Changelog

**Marketing story (source of truth):** edit `src/lib/data/changelog-curated.json` by hand —
release groups with title + bullet entries, spread across the project timeline.

**Dev log (incremental):** `npm run changelog` → `scripts/gen-changelog.ts` reads `git log`
→ `src/lib/data/changelog.json` (commits on/after `DEV_LOG_CUTOFF` in the script).
Runs in `prebuild`. The `/changelog` page renders curated releases first, then the dev log.

## SEO & social

- `src/lib/marketing/seo.ts` — canonical URLs, per-page OG/Twitter, JSON-LD
- `PageSeo.svelte` on every marketing page + `/play`
- Default OG card: `static/marketing/og-default.svg` (1200×630)
- Sitemap: `https://dungeonjerks.com/sitemap.xml` (`src/routes/sitemap.xml/+server.ts`)

## Forms

Contact (`contact`) and tavern list (`tavern-list`) use Netlify Forms attributes.
Hidden static definitions in `static/forms.html` for build-time detection.
Local dev falls back to `POST /api/feedback` and `POST /api/tavern-list` (logs only).

**Tavern list / Kickstarter email:** stub only. On deploy, Netlify Forms captures
submissions. Later options (documented, not implemented):

- Mailchimp audience + API key in Netlify env
- Airtable base via Zapier or Netlify function

## Press kit

`npm run press-kit` → `static/press-kit.zip` (logos, 5 hero WebPs, one-liner, credits).
Page at `/press` links individual assets + zip.

## Content counts (live)

Sourced from `src/lib/game/content.ts` — update via `npm run sync:airtable`.