# The Brochure — Design Spec

Last updated: 2026-04-12

---

## Goal

A single-page marketing/showcase site ("the brochure") for Darkwatch. Two audiences: Discord users being recruited for the beta, and game publishers (starting with The Arcane Library / Shadowdark) being approached about licensing. Flashy, atmospheric, honest.

---

## Location

`site/` subdirectory at the repo root, alongside `client/` and `server/`. Self-contained — no build step, no bundler, no framework dependencies.

```
site/
├── index.html              # the page
├── style.css               # all styles
├── main.js                 # minimal JS (smooth scroll, subtle parallax on hero)
├── assets/
│   └── screenshots/        # Playwright output — gitignored until committed
└── screenshots.js          # Playwright script — run to refresh screenshots
```

---

## Tech Stack

- Plain HTML/CSS/JS — no framework, no build step
- Playwright (Node) for screenshot automation
- CSS variables and fonts matching the Darkwatch app (Cinzel, Alegreya, parchment/gold palette) — shared aesthetic, no shared code

---

## Visual Direction

**Dark hero, clean parchment body.**

The hero section is full-bleed dark (`#0d0a05` background), gold text, atmospheric. When the user scrolls, the page transitions to a parchment-cream background (`#f5f0e8`) for the feature sections — readable, professional, suitable for a publisher evaluating the product. The dark tone returns for the system support strip and footer.

Fonts: Cinzel (headings, labels) + Alegreya (body). Same CSS variables as the app: `--gold`, `--gold-rgb`, `--text-primary`, `--bg-modal`, etc. Duplicated in `site/style.css` — the brochure has no build step and no dependency on the app's assets.

---

## Page Sections

### 1. Hero

Full-bleed dark section. Content:
- Small wordmark: `◈ DARKWATCH` in gold, letter-spaced
- Headline (Cinzel, large): `"Your whole party. One screen. No paper."`
- Subhead (Alegreya): one sentence describing what Darkwatch is — "A real-time session companion for Shadowdark RPG. Characters, dice, spells, and atmosphere — synced live across every device at the table."
- Primary CTA: gold button → `"Join the Beta"` → links to Discord invite
- Secondary: subtle downward arrow / "See what it does" scroll nudge

### 2. Feature Rows

Parchment background. Seven alternating left/right rows. Each row: screenshot on one side, heading + two-sentence description on the other. Rows in order:

| Row | Feature | Screenshot file |
|---|---|---|
| 1 | Character Sheet | `character-sheet.png` |
| 2 | Character Creation Wizard | `character-creation.png` |
| 3 | 3D Dice Rolling | `dice-roll.png` |
| 4 | Spellcasting | `spellcasting.png` |
| 5 | Atmosphere Effects | `atmosphere.png` |
| 6 | Initiative Tracker | `initiative-active.png` |
| 7 | DM Card Grid | `dm-cards.png` |

Plus one final small row (no screenshot) for **Torch Timer & Luck Tokens** — two side-by-side callout cards describing each.

Row 1, 3, 5, 7 have screenshot on the left. Row 2, 4, 6 have screenshot on the right. Final torch/luck row is centered.

### 3. System Support Strip

Narrow dark section (`#1a1408`). Text only:
- Label: `System Support`
- Heading: `"Built for Shadowdark RPG. More systems coming."`
- Line: `Currently: Shadowdark RPG · Next: based on demand`

Designed to expand: when a second system is added, this section lists both.

### 4. Publisher Section

Parchment background. Addressed directly to game publishers.

- Label: `For game publishers`
- Heading: `"We're not here to sell your rules."`
- Body: `"Darkwatch is a session companion — a torch timer, a dice roller, an initiative tracker. Your players still need the book. We just want to make the table more fun. If you'd like to talk, we'd love to."`
- CTA: `"Get in touch"` → email link (`mailto:email@email.com` as placeholder — update before launch).

Tone: plain-spoken, genuine, not legalistic. No buzzwords.

### 5. Footer

Dark (`#0d0a05`). Minimal:
- Left: `Darkwatch · Built for the table`
- Right: `Discord · GitHub`

---

## Screenshot Script (`site/screenshots.js`)

Playwright Node script. Requires the dev server to be running (`http://localhost:3000` + `http://localhost:5173`).

**Process:**
1. Launch browser (headless)
2. Log in as `dm@darkwatch.test` / `password`
3. Join the dev campaign
4. For each capture: navigate, wait for UI to settle, screenshot, save to `site/assets/screenshots/<name>.png`

**Captures (in order):**

| File | View | Notes |
|---|---|---|
| `character-sheet.png` | Player character sheet | Full stat block visible, edit mode off |
| `character-creation.png` | Creation wizard step 2 | Stat rolling step — dice visible |
| `dice-roll.png` | Campaign view, mid-roll or result | Roll log visible, 3D dice |
| `spellcasting.png` | Spell list panel | Slots showing, at least one exhausted |
| `atmosphere.png` | Campaign view with fog or fire active | Full-screen atmosphere |
| `initiative-active.png` | Initiative tracker, active phase | Both sides rolled, one side highlighted |
| `dm-cards.png` | DM view, compact card grid | 2-3 characters visible |

Each capture is a named, self-contained block in the script — adding a new one doesn't touch the others.

**Running:**
```bash
# Regenerate all screenshots
node site/screenshots.js

# Regenerate one (flag TBD during implementation)
node site/screenshots.js --only initiative-active
```

Screenshots are committed to the repo so the site works without running the script. Re-run after features change.

---

## Maintenance Skill: `update-brochure`

Stored at `.claude/skills/update-brochure.md`. Invoked when a feature is added, changed, or removed.

**Scope:**
- `site/index.html` — add, update, or remove feature rows
- `site/screenshots.js` — add, update, or remove capture blocks to match
- System support strip — update if a new RPG system is added

**Not in scope:** Hero copy, publisher section copy, footer links. Those are editorial and manual.

**Process when a feature is added:**
1. Add a new feature row to `index.html` (screenshot placeholder until script runs)
2. Add the corresponding capture block to `screenshots.js`
3. Run `node site/screenshots.js --only <feature-name>` to generate the screenshot
4. Commit `index.html`, `screenshots.js`, and the new PNG

**Process when a feature is removed:**
1. Remove the feature row from `index.html`
2. Remove the capture block from `screenshots.js`
3. Delete the PNG from `assets/screenshots/`
4. Commit

**Process when a feature changes:**
1. Update the feature row copy in `index.html`
2. Re-run the relevant screenshot capture
3. Commit

---

## Out of Scope

- Hosting / deployment (static folder, drops onto Netlify or GitHub Pages when ready)
- Contact form backend (email link only for now)
- Analytics
- Live app embeds (no iframe of the actual app)
- Multi-page navigation
- Mobile-optimized screenshots (desktop captures only for now)

---

## Notes

- `.superpowers/` is gitignored (brainstorm mockup files)
- Screenshots are committed to the repo (`site/assets/screenshots/`) so the site renders without running Playwright
- The `--only` flag on `screenshots.js` is a nice-to-have; implement as time allows
- When a second RPG system is added to Darkwatch, the system support strip and `update-brochure` skill both need updating — note this in the skill file