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

claude-bot commented

2026-09-15 20:20:42 +00:00

Collaborator

Why

This is step 0 of #659, the full mockup of every catalogued surface. Colour, icons and type appear on every one of the 101 surfaces. Choosing them after drawing everything would mean repainting everything and fitting icons in afterwards, so they are settled first.

The feedback asks for it directly. Round two (#363) chose Design A, Book & Table, but a player asked for "a bit more color and maybe some custom icons". Design A's kit (tools/feedback-site/static/mockups/shared/kit.css) is deliberately restrained: one verdigris accent on warm paper, and no icons at all. That was so the round-two comparison judged structure, not polish.

What

Three distinct look directions for Design A, each defining:

a palette, light and dark, plus Table mode, which is always dark. It includes status colours (live, warning, good, GM-only) and colour for content, such as wiki groups and people. Every text pairing is checked against WCAG 2.2 AA, and colour is never the only signal (#367).
a custom icon set for the shell, navigation, the session lifecycle, the wiki groups and table actions, drawn once on one grid and rendered in each direction's style.
type: a display, prose and UI pairing, using open-licence fonts the real app can ship itself (it can't load fonts from a CDN).
shape: radius, borders, elevation and density.

All three are applied to Design A's existing screens, so they are compared on the same content: Home, This week, Table mode (GM desktop and player phone), an article, and the other drawn screens.

Hosting

The pages go on the feedback site under a new path, /feedback/prototype/look. The existing /mockups pages, their form and the saved responses are untouched, so people can keep answering round two. The full mockup (#659) will later live under the same /prototype area.

Review

The owner reviews and picks a direction, or a mix. Players may comment but mostly after the whole mockup is done, so there is no form for this step.

Acceptance criteria

/feedback/prototype/look shows three directions on the same screens, each switchable between light and dark, and between phone and desktop.
Each direction's text colour pairings pass WCAG 2.2 AA, with the check written down.
The owner has picked a direction, and it becomes the kit the full mockup is drawn in.
The existing /mockups pages and the response store are unchanged.

## Why This is step 0 of #659, the full mockup of every catalogued surface. Colour, icons and type appear on every one of the 101 surfaces. Choosing them after drawing everything would mean repainting everything and fitting icons in afterwards, so they are settled first. The feedback asks for it directly. Round two (#363) chose Design A, Book & Table, but a player asked for "a bit more color and maybe some custom icons". Design A's kit (`tools/feedback-site/static/mockups/shared/kit.css`) is deliberately restrained: one verdigris accent on warm paper, and **no icons at all**. That was so the round-two comparison judged structure, not polish. ## What **Three distinct look directions for Design A,** each defining: - **a palette, light and dark,** plus Table mode, which is always dark. It includes status colours (live, warning, good, GM-only) and colour for content, such as wiki groups and people. Every text pairing is checked against WCAG 2.2 AA, and colour is never the only signal (#367). - **a custom icon set** for the shell, navigation, the session lifecycle, the wiki groups and table actions, drawn once on one grid and rendered in each direction's style. - **type:** a display, prose and UI pairing, using open-licence fonts the real app can ship itself (it can't load fonts from a CDN). - **shape:** radius, borders, elevation and density. **All three are applied to Design A's existing screens**, so they are compared on the same content: Home, This week, Table mode (GM desktop and player phone), an article, and the other drawn screens. ## Hosting The pages go on the feedback site under a **new path**, `/feedback/prototype/look`. The existing `/mockups` pages, their form and the saved responses are untouched, so people can keep answering round two. The full mockup (#659) will later live under the same `/prototype` area. ## Review The owner reviews and picks a direction, or a mix. Players may comment but mostly after the whole mockup is done, so there is no form for this step. ## Acceptance criteria - `/feedback/prototype/look` shows three directions on the same screens, each switchable between light and dark, and between phone and desktop. - Each direction's text colour pairings pass WCAG 2.2 AA, with the check written down. - The owner has picked a direction, and it becomes the kit the full mockup is drawn in. - The existing `/mockups` pages and the response store are unchanged.

claude-bot referenced this issue

2026-09-15 20:30:49 +00:00

[UX] Mock up every catalogued surface, for players and GMs, before building #659

rbrooks referenced this issue from a commit

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

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

claude-bot referenced this issue

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

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

claude-bot referenced this issue 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 commented

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

Author

Collaborator

Live on dev (2026-09-15): https://questboard-dev.rhoving.com/feedback/prototype/look. Merged in PR #662 (ed6b785), deployed to the dev feedback site.

The three directions are written up in docs/design/redesign-surfaces/look/DIRECTIONS.md:

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, illuminated initials, Alegreya and Alegreya Sans.

Shared by all three:

67 custom icons (prototype/shared/icons.js), rendered stamped, duotone or engraved by the direction.
Contrast: every text pairing passes WCAG AA (and 3:1 for UI edges) in light, dark and Table mode. The page lists the pairs with live ratios.

Deployment checks:

Before deploying, the old files were backed up on the host (/home/claude/projects/qb-feedback-backups/qb-feedback-20260915T215119Z.tgz).
Round two (/feedback/mockups, /mockups/a, /mockups/b) still answers 200, and all 6 saved responses are intact.
In a real browser through the proxy, each direction loads its fonts and renders all 593 icons on the page, with no console errors.

Icons to refine once a direction is chosen: table (reads as a network node), lore (still gravestone-like), maybe (reads as a link), and map at 16px.

Waiting on the owner's pick. The chosen direction becomes the kit the full prototype (#659) is drawn in.

**Live on dev (2026-09-15):** https://questboard-dev.rhoving.com/feedback/prototype/look. Merged in PR #662 (`ed6b785`), deployed to the dev feedback site. **The three directions** are written up in `docs/design/redesign-surfaces/look/DIRECTIONS.md`: - **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, illuminated initials, Alegreya and Alegreya Sans. **Shared by all three:** - **67 custom icons** (`prototype/shared/icons.js`), rendered stamped, duotone or engraved by the direction. - **Contrast:** every text pairing passes WCAG AA (and 3:1 for UI edges) in light, dark and Table mode. The page lists the pairs with live ratios. **Deployment checks:** - **Before deploying,** the old files were backed up on the host (`/home/claude/projects/qb-feedback-backups/qb-feedback-20260915T215119Z.tgz`). - **Round two** (`/feedback/mockups`, `/mockups/a`, `/mockups/b`) still answers 200, and all 6 saved responses are intact. - **In a real browser through the proxy,** each direction loads its fonts and renders all 593 icons on the page, with no console errors. **Icons to refine once a direction is chosen:** `table` (reads as a network node), `lore` (still gravestone-like), `maybe` (reads as a link), and `map` at 16px. **Waiting on the owner's pick.** The chosen direction becomes the kit the full prototype (#659) is drawn in.

rbrooks referenced this issue from a commit

2026-09-15 23:17:50 +00:00

feat(feedback-site): flip the brand colours and add three Illuminated/Game Night hybrids (#661)

claude-bot referenced this issue

2026-09-15 23:18:08 +00:00

feat(feedback-site): flip the brand colours and add three Illuminated/Game Night hybrids (#661) #663

claude-bot referenced this issue from a commit

2026-09-15 23:34:35 +00:00

Merge PR #663: flip the brand colours and add three Illuminated/Game Night hybrids (#661)

claude-bot commented

2026-09-15 23:36:28 +00:00

Author

Collaborator

Round two of the look is live (PR #663, 47ee17b), same link: https://questboard-dev.rhoving.com/feedback/prototype/look

From the owner's review:

The brand flips: "Quest" takes the accent colour, "Board" the chrome's ink, in all six looks.
Three hybrids of Illuminated and Game Night, in a "Both" group in the bar. All three share Illuminated's blue-weighted pigments, Game Night's type (Unbounded and Figtree), and the opening initial, which stays in a serif so the manuscript's one letterform survives in a sans design.

	Lapis Book	Lapis Table	Lapis Bright
Chrome	light, like the page	deep navy	deep navy, richer
Icons	engraved, fine	duotone	duotone, fuller
Shape	small radii	rounded	roundest
People	a filled disc	dice tokens	dice tokens
Colour	pigments on links and heads	pigments plus player colours	kinds colour heads and chips
The initial	pigment letter	pigment letter	letter in a tinted block

Checks: all six pass WCAG AA (3:1 for UI edges) in light, dark and Table mode; 67 tests pass; each look renders its 593 icons live with no console errors; the round-two pages and the six saved responses are untouched. The previous deployment was backed up first (qb-feedback-20260915T233523Z.tgz).

Also fixed here: each look now carries its own Table mode block. The shared rule had made the contrast checker read the wrong palette for Game Night.

Still waiting on the owner's pick.

**Round two of the look is live** (PR #663, `47ee17b`), same link: https://questboard-dev.rhoving.com/feedback/prototype/look **From the owner's review:** - **The brand flips:** "Quest" takes the accent colour, "Board" the chrome's ink, in all six looks. - **Three hybrids of Illuminated and Game Night,** in a "Both" group in the bar. All three share Illuminated's blue-weighted pigments, Game Night's type (Unbounded and Figtree), and the opening initial, which stays in a serif so the manuscript's one letterform survives in a sans design. | | Lapis Book | Lapis Table | Lapis Bright | |---|---|---|---| | Chrome | light, like the page | deep navy | deep navy, richer | | Icons | engraved, fine | duotone | duotone, fuller | | Shape | small radii | rounded | roundest | | People | a filled disc | dice tokens | dice tokens | | Colour | pigments on links and heads | pigments plus player colours | kinds colour heads and chips | | The initial | pigment letter | pigment letter | letter in a tinted block | **Checks:** all six pass WCAG AA (3:1 for UI edges) in light, dark and Table mode; 67 tests pass; each look renders its 593 icons live with no console errors; the round-two pages and the six saved responses are untouched. The previous deployment was backed up first (`qb-feedback-20260915T233523Z.tgz`). **Also fixed here:** each look now carries its own Table mode block. The shared rule had made the contrast checker read the wrong palette for Game Night. **Still waiting on the owner's pick.**

rbrooks referenced this issue from a commit

2026-09-16 00:17:41 +00:00

feat(feedback-site): the icon catalogue, and Lapis Table as the chosen look (#661)

claude-bot referenced this issue from a pull request that will close it,

2026-09-16 00:17:49 +00:00

feat(feedback-site): the icon catalogue, and Lapis Table as the chosen look (#661) #664

claude-bot closed this issue

2026-09-16 00:36:36 +00:00

claude-bot referenced this issue from a commit

2026-09-16 00:36:38 +00:00

Merge PR #664: the icon catalogue, and Lapis Table as the chosen look (#661)

claude-bot commented

2026-09-16 00:38:25 +00:00

Author

Collaborator

Decided: Lapis Table (owner, 2026-09-15). Illuminated's blues and its opening initial, with Game Night's type and shape: deep navy chrome, hexagonal dice tokens for people, rounded cards, duotone icons, midnight-blue Table mode.

Live (PR #664, ef205ff):

The look page now opens in Lapis Table: https://questboard-dev.rhoving.com/feedback/prototype/look. The other five stay up for comparison.
The icon catalogue is at https://questboard-dev.rhoving.com/feedback/prototype/icons: all 67 icons grouped as the Contents groups them, each with the name the code uses, what it means, where it appears, the icon at 16, 24 and 48 px, and the same icon on the dark table ground. The look and theme switch there too.
Four icons are marked weak with the reason: table, lore, maybe, map. The catalogue also lists any icon no row describes, so it can't fall behind icons.js quietly.

Checks: 70 tests pass; live, both pages open in Lapis Table, 67 rows and 335 icon instances render with no console errors; the round-two pages and the six saved responses are untouched; the previous deployment was backed up first (qb-feedback-20260916T003719Z.tgz).

Acceptance: met. The look is picked and recorded in docs/design/redesign-surfaces/look/DIRECTIONS.md, and it is the kit the full mockup (#659) is drawn in. Closing.

Still open, as ordinary follow-up: redrawing the four flagged icons, and any others the owner names from the catalogue. That happens in the mockup lanes, since the names stay the same.

**Decided: Lapis Table** (owner, 2026-09-15). Illuminated's blues and its opening initial, with Game Night's type and shape: deep navy chrome, hexagonal dice tokens for people, rounded cards, duotone icons, midnight-blue Table mode. **Live** (PR #664, `ef205ff`): - **The look page** now opens in Lapis Table: https://questboard-dev.rhoving.com/feedback/prototype/look. The other five stay up for comparison. - **The icon catalogue** is at https://questboard-dev.rhoving.com/feedback/prototype/icons: all 67 icons grouped as the Contents groups them, each with the name the code uses, what it means, where it appears, the icon at 16, 24 and 48 px, and the same icon on the dark table ground. The look and theme switch there too. - **Four icons are marked weak** with the reason: `table`, `lore`, `maybe`, `map`. The catalogue also lists any icon no row describes, so it can't fall behind `icons.js` quietly. **Checks:** 70 tests pass; live, both pages open in Lapis Table, 67 rows and 335 icon instances render with no console errors; the round-two pages and the six saved responses are untouched; the previous deployment was backed up first (`qb-feedback-20260916T003719Z.tgz`). **Acceptance:** met. The look is picked and recorded in `docs/design/redesign-surfaces/look/DIRECTIONS.md`, and it is the kit the full mockup (#659) is drawn in. Closing. **Still open, as ordinary follow-up:** redrawing the four flagged icons, and any others the owner names from the catalogue. That happens in the mockup lanes, since the names stay the same.

claude-bot referenced this issue

2026-09-16 00:38:31 +00:00

[UX] Mock up every catalogued surface, for players and GMs, before building #659

rbrooks referenced this issue from a commit

2026-09-16 01:31:37 +00:00

feat(feedback-site): redraw five icons from the owner's review (#661)

claude-bot referenced this issue

2026-09-16 01:31:47 +00:00

feat(feedback-site): redraw five icons from the owner's review (#661) #665

claude-bot referenced this issue from a commit

2026-09-16 01:46:47 +00:00

Merge PR #665: redraw five icons from the owner's review (#661)