Docs Design

Contents

gamewright.diy: a product site, docs, downloads and the web Studio

The owner, 2026-10-05: "gamewright.diy the website (and app) should be more like reelwright with docs, download page, and signin for the web version of the app. Also the homepage itself is badly out of date. Dont be lazy." The standard is reelwright.diy (research: how it is built, surveyed read-only the same day; summary below). The product now is Gamewright Studio, the desktop app a person builds games in (m11-studio.md); the site said "a game engine you direct by talking", had no Studio, no docs, no downloads and no sign-in, and its status list was days out of date.

What reelwright.diy does (verified 2026-10-05)

  • Pages: home, features, download, changelog, support, docs, 404; nav Features, Download, Docs, Changelog, Support. Generated by scripts from committed sources; a --check fails on a stale page; the deploy curls every page for 200, a missing one for 404.
  • Docs: tools/site/docs.ts renders the repo's own docs (README's "Try it", ARCHITECTURE, ROADMAP, design docs, ADRs) and generates references from the code (the CLI's help, the showrunner's tools with their input tables, every document kind from the schemas). The output is committed; --check runs in CI, check-all and the deploy. No search, no hand-written guides.
  • Downloads: releases/index.json (every version, its notes, each file's size, SHA-256 and URL), latest.json (the app's update check), an Atom feed. The page detects the visitor's system and says "coming soon" for a system with no package rather than linking nowhere. Packages are built and smoke-tested per system by release.yml on a tag, checked against SHA256SUMS, and hosted on the web service's volume (the repo is private).
  • The web Studio: reelwright host on Fly.io serves the Studio's web export at /app (a Vercel rewrite), invite-only accounts signed in with a six-digit code sent by email (Resend), SQLite on the volume, one core daemon per show reached over a WebSocket with a one-time ticket, each person's API key sealed with AES-256-GCM, an admin console for the owner. About 8,700 lines in core/src/host/, checked live by tools/host/check-live.ts.

The redesign (2026-11-03)

The owner, 2026-11-03: "Critically research and plan and understand that this will soon (not yet) be an actual paid product with tiers/plans ... Then completely rebuild the homepage and site making it far more elegant with consistent ui/ux." The pricing research and the plans it suggests are the owner's to decide (not published: docs/research/pricing-2026-11.md); this is the site.

What was wrong: the home page ran to 13,700 px (20,500 on a phone) through ten sections, the milestones and the engine's principles among them; about 150 classes, most used once; three kinds of button, links underlined in some places and not others, monospace kickers; no place for plans, policies or who makes it. The standard is Bookwright's site, the first wright sold: a home page of about 3,200 px that says what it is, shows it, proves it once, and says what it costs.

Pages

Path What it is Built from
/ What Gamewright is, the Studio, how a game gets made, the proof, the games, one game made from a sentence, the ways in, what it costs, questions web/app/page.tsx, real Studio frames from the Studio's tours
/features The Studio: each part of it and the engine under it, a section each web/app/features/page.tsx
/play, /play/<game> The games, playable in the browser web/app/play/
/director, /director/<run> How the Director made three games, turn by turn web/app/director/
/docs, /docs/<page> Guides, then the design docs and decisions, then references generated from the code tools/site/docs.ts → web/content/docs/, web/app/docs/
/download The Studio for this computer's system, the others, checksums, how to install web/public/releases/index.json
/roadmap Where it is: each milestone and its state, as ROADMAP.md says web/app/roadmap/page.tsx (core/test/site-status.test.ts)
/pricing The plans, once the owner sets them: only with GAMEWRIGHT_PRICING=live web/app/pricing/, web/app/plans.ts
/changelog Every release, newest first CHANGELOG.md
/support Questions people ask, and how to report a problem web/app/support/page.tsx
/app The web Studio, after sign-in the host (ADR-0013)

Nav: Studio, Games, Docs, Pricing (when live), then Sign in (when /app is live) and Download. Footer: who makes it and the wright family, then Product, Learn and Help; Privacy is Atypic's (atypic.ai/privacy, which covers its apps); Terms and Refunds join it when there are plans.

Plans

The plans are Admission's (docs/design/plans.md). Without the flag the home page's "What it costs" says what is true then, centred and in one statement: the Studio is free to download, the Director runs on your own Anthropic key (or your own Claude Code), and Gamewright never resells model time. With GAMEWRIGHT_PRICING=live the nav gains Pricing, the home page shows the plans' cards, and /pricing is built from web/app/plans.ts: the plans (Free and Pro to start, as Bookwright), what each includes in Admission's terms (an allowance, a flag or a cap), monthly and yearly prices, a comparison, and the questions a buyer asks (cancelling, refunds, the AI's bill, what happens to games on Free). Without it /pricing answers 404 and nothing links to it.

Design system

web/app/globals.css, the only place colours, type and spacing are set; web/app/ui.tsx, the parts pages are built from.

  • Colour: sand by day (--bg #f7f4ee), the night coast by dark (#0b1216). One accent, tide (#176877; #6cc3d1 by dark), for what can be pressed and links; the lamp's amber only for the mark, what is new and a notice. Text is --ink or --ink-2, both AA on every surface.
  • Type: Space Grotesk for headings, Inter for the rest, monospace only for code. One scale: h1 40 to 64 px, h2 28 to 42, h3 20, body 17, small 15, fine print 14; eyebrows are 13 px capitals in the accent.
  • Parts: a section (one padding, --section), its head (eyebrow, heading, one line), a band (the second sand across the page), cards (one radius, one border, one shadow, a hover that lifts for a link), buttons (filled for the one thing to do, quiet for the second; the same labels everywhere: Download the Studio, Play the games), a link with an arrow for going further, badges, a checklist, a row of numbers between hairlines, questions that open in place, a closing band, tables, the Studio's window.
  • Boxes only for what is pressed or played. Cards hold a game, a plan, a guide; a few short parts that are only read sit in quiet rows on hairlines (.rows: the home page's four steps and four ways in), and the checks in their ladder (.ladder, two columns of L0 to L5). The Studio's window shows once on the home page, in the hero.
  • Every page but the home page opens the same way (.page-head): an eyebrow, the title, one line, then its own parts.
  • Pages keep what the deploy's checks read: the gallery's article.game cards, the docs' .docs-card, .docs-filter-count and .docs-contents, the build marker.

Docs

  • Guides first, written for a person making a game (Reelwright has none; Gamewright should): install the Studio; your first game from a sample or a template; the Director (your key, or your own Claude Code over MCP); the checks (L0 to L5) and what each proves; exporting a game. In docs/guides/, rendered like the rest.
  • The repo's own docs as Reelwright renders them: architecture, roadmap, design docs in milestone order, ADRs, the Director's playbook. Repo links become docs links.
  • References generated from the code: the CLI (gamewright help), the Director's tools (the registry in core/src/director/tools/, with their input tables from schemas/v1/tools.schema.json), every document kind (schemas/v1), every kit (kit.json), every template (the catalog).
  • Committed output, --check in tools/check-all.sh, CI and tools/site/deploy.sh.

Downloads and releases

VERSION and CHANGELOG.md at the root. tools/site/releases.ts writes index.json, latest.json and feed.xml; /download reads them, detects the system (?os= first, then the user agent), and says "coming soon" for a system without a package. Packages come from a release.yml on v* tags, after Reelwright's: build each system's Studio, smoke-test it in a clean home with nothing on the PATH, write SHA256SUMS. Where the files are hosted is ADR-0013's (the host's volume), until then a downloads page that tells the truth.

The web Studio

ADR-0013. It needs the session daemon (S3, in progress) and the owner's yes for a Fly app (about $30 to $65 a month) and a Resend domain (DNS records at Namecheap, which only the owner can add). Everything that needs no account is built and tested first: the host runs locally with codes printed instead of mailed, and Playwright drives sign-in, the Studio, a game, a check.

Proof

tools/site/deploy.sh fails unless every page answers 200 on the live domain, /no-such-page answers 404, and the docs are fresh; its screenshots of the home, features, docs, download pages are Read. core/test/site-status.test.ts ties the roadmap page's milestones to ROADMAP.md, and fails on "next" said of a milestone that is done.

Who builds what (parallel work)

  • The homepage, features, support, roadmap, pricing, nav and footer: web/app/{page,layout,ui,plans,features,support,roadmap,pricing}.
  • Docs: tools/site/docs.ts, web/content/docs/, web/app/docs/, docs/guides/.
  • Releases and downloads: VERSION, CHANGELOG.md, tools/site/{releases,changelog}.ts, web/app/{download,changelog}/, web/public/releases/, .github/workflows/release.yml, tools/release/.
  • The host (after S3 merges and the owner's yes): core/src/host/, tools/host/.

From docs/design/site.md in the Gamewright repository.