aaron/darkwatch
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions
darkwatch/docs/superpowers/specs/2026-04-12-brochure-design.md
Aaron Wood 904441a724 docs: add brochure design spec
2026-04-11 18:13:42 -04:00

7.3 KiB
Raw Blame History

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:

# 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