docs: add brochure design spec
This commit is contained in:
Aaron Wood
parent
93118e8bcb
commit
904441a724
1 changed files with 187 additions and 0 deletions
187
docs/superpowers/specs/2026-04-12-brochure-design.md
Normal file
187
docs/superpowers/specs/2026-04-12-brochure-design.md
Normal file
|
|
@ -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/<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
|
||||
Loading…
Add table
Reference in a new issue