feat(feedback-site): three look directions for the redesign under /prototype (#661) #662

Merged

claude-bot merged 1 commit from feat/661-look-directions into main

2026-09-15 21:50:33 +00:00

claude-bot commented

2026-09-15 21:29:16 +00:00

Collaborator

Refs #661. This PR adds the page to pick from; the issue closes once the owner picks a direction.

Why

Before every surface is mocked up (#659), the owner picks a look: colour, icons, type and shape. Every one of the 101 surfaces inherits it. Round two chose Design A's structure, but its kit was deliberately plain, with no icons. A player asked for "a bit more color and maybe some custom icons".

What

/feedback/prototype/look shows Design A's screens in three directions. You can switch direction and theme (auto / light / dark) without reloading:
- Notice Board: the guild's quest board. Painted-board chrome, pinned notices, wax-seal status, Young Serif and Instrument Sans.
- Game Night: the table. Players in their own dice colours, baize chrome and Table mode, Unbounded and Figtree.
- Illuminated: a manuscript. Pigment-coded kinds (People, Places…), illuminated initials, Alegreya and Alegreya Sans.
One set of 67 custom icons (prototype/shared/icons.js), drawn in two layers and rendered stamped, duotone or engraved by the direction.
Same screens in every direction. Each direction is token overrides plus a few component rules (prototype/shared/looks.css), so the three are compared on identical content.
Contrast is checked: every text pairing passes WCAG AA, and 3:1 for UI edges, in light, dark and Table mode, for all three. The page includes a table of the pairs with ratios computed from the live CSS.
A new /prototype area: a landing page, the look page, and one guarded route for shared assets (bare-filename regex, extension whitelist, resolved-path check). Round two's /mockups pages, form and responses are untouched, so people can keep answering them.
docs/design/redesign-surfaces/look/DIRECTIONS.md records the brief, the defaults avoided, and each direction's tokens and bold element.

Checked

Tests: 67 passed, 18 of them new for the prototype routes (GET/HEAD, media types, traversal and odd names).
Round two: git diff on the round-two pages is empty.
Screenshots: reviewed with Playwright for each direction in light and dark, on desktop and phone frames. Fixed from that review:
- chrome text contrast
- the current Contents entry
- display type leaking into body text
- capitals left in labels
- Table mode colours
- a crowded phone app bar
593 icons render on the page, with no console errors.

After merge

Deploy to dev's feedback site, then send the owner the link.

🤖 Generated with Claude Code

Refs #661. This PR adds the page to pick from; the issue closes once the owner picks a direction. ## Why Before every surface is mocked up (#659), the owner picks a **look**: colour, icons, type and shape. Every one of the 101 surfaces inherits it. Round two chose Design A's structure, but its kit was deliberately plain, with no icons. A player asked for "a bit more color and maybe some custom icons". ## What - **`/feedback/prototype/look`** shows Design A's screens in three directions. You can switch direction and theme (auto / light / dark) without reloading: - **Notice Board:** the guild's quest board. Painted-board chrome, pinned notices, wax-seal status, Young Serif and Instrument Sans. - **Game Night:** the table. Players in their own dice colours, baize chrome and Table mode, Unbounded and Figtree. - **Illuminated:** a manuscript. Pigment-coded kinds (People, Places…), illuminated initials, Alegreya and Alegreya Sans. - **One set of 67 custom icons** (`prototype/shared/icons.js`), drawn in two layers and rendered stamped, duotone or engraved by the direction. - **Same screens in every direction.** Each direction is token overrides plus a few component rules (`prototype/shared/looks.css`), so the three are compared on identical content. - **Contrast is checked:** every text pairing passes WCAG AA, and 3:1 for UI edges, in light, dark and Table mode, for all three. The page includes a table of the pairs with ratios computed from the live CSS. - **A new `/prototype` area:** a landing page, the look page, and one guarded route for shared assets (bare-filename regex, extension whitelist, resolved-path check). **Round two's `/mockups` pages, form and responses are untouched**, so people can keep answering them. - **`docs/design/redesign-surfaces/look/DIRECTIONS.md`** records the brief, the defaults avoided, and each direction's tokens and bold element. ## Checked - **Tests:** 67 passed, 18 of them new for the prototype routes (GET/HEAD, media types, traversal and odd names). - **Round two:** `git diff` on the round-two pages is empty. - **Screenshots:** reviewed with Playwright for each direction in light and dark, on desktop and phone frames. Fixed from that review: - chrome text contrast - the current Contents entry - display type leaking into body text - capitals left in labels - Table mode colours - a crowded phone app bar 593 icons render on the page, with no console errors. ## After merge Deploy to dev's feedback site, then send the owner the link. 🤖 Generated with [Claude Code](https://claude.com/claude-code)

claude-bot added 1 commit

2026-09-15 21:29:17 +00:00

feat(feedback-site): three look directions for the redesign under /prototype (#661 )

CI / Bot/backend version sync (pull_request) Successful in 30s

Details

CI / Summarisation accuracy eval harness (stub provider) (pull_request) Successful in 2m12s

Details

CI / Docker image build (pull_request) Successful in 19s

Details

CI / Backend lint (ruff) (pull_request) Successful in 1m5s

Details

CI / Bot tests and audit (pull_request) Successful in 2m2s

Details

CI / Frontend tests, audit, and build (pull_request) Successful in 3m46s

Details

CI / Backend migration, tests, and audit (pull_request) Successful in 12m12s

Details

CI / Synthetic session harness (no GPU, no LLM) (pull_request) Successful in 17m33s

Details

0210912981

Before every surface is mocked up (#659), the owner picks a look: colour,
icons, type and shape. Round two chose Design A's structure, but its kit was
deliberately plain, and a player asked for more colour and custom icons.

- /prototype/look shows Design A's screens in three directions. Switch
  between them, and between light and dark, without reloading.
  - Notice Board: the guild's quest board, with pinned notices and wax seals.
  - Game Night: dice-coloured players and a baize table.
  - Illuminated: manuscript pigments per kind of thing, and initials.
- The screens are the same markup for all three. Each direction is a set of
  token overrides plus a few component rules in
  prototype/shared/looks.css.
- A custom icon set of 67 icons (prototype/shared/icons.js), drawn once in
  two layers and rendered stamped, duotone or engraved by the direction.
- Every text colour pairing passes WCAG AA, and 3:1 for UI edges, in light,
  dark and Table mode, for all three. The page lists the pairs with ratios
  computed from the live CSS.
- A new /prototype area: a landing page, the look page, and one guarded
  route for shared assets. It uses a bare-filename regex, an extension
  whitelist and a resolved-path check. Round two's /mockups pages, form and
  response store are untouched.
- docs/design/redesign-surfaces/look/DIRECTIONS.md records the brief, the
  defaults avoided and each direction's tokens.

Tests: 67 passed (18 new for the prototype routes).

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

claude-bot scheduled this pull request to auto merge when all checks succeed

2026-09-15 21:29:29 +00:00

claude-bot merged commit ed6b78579f into main

2026-09-15 21:50:33 +00:00

claude-bot deleted branch feat/661-look-directions

2026-09-15 21:50:34 +00:00

claude-bot referenced this pull request from a commit

2026-09-15 21:50:34 +00:00

Merge PR #662: three look directions for the redesign under /prototype (#661)

claude-bot referenced this pull request

2026-09-15 21:53:02 +00:00

[UX] Look and feel for the redesign: colour, custom icons and type, before the full mockup #661