diff --git a/docs/superpowers/specs/2026-04-12-brochure-design.md b/docs/superpowers/specs/2026-04-12-brochure-design.md new file mode 100644 index 0000000..531aac2 --- /dev/null +++ b/docs/superpowers/specs/2026-04-12-brochure-design.md @@ -0,0 +1,187 @@ +# 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. **Actual contact address TBD** — decide before launch and hardcode in `index.html`. + +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/.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 ` 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