Wayfinder: Westgate palette re-tune and game-site structure #47

New Issue

2026-07-28T08:08:45Z

archvillainette commented

2026-07-28 08:08:45 +00:00

Destination

A locked spec — not shipped code — for a re-tuned Westgate palette plus a site structure that reads as the game's own website (not a studio or publisher site): personality carried by chrome and ornament, art optional. Done when nothing is left to decide: north star + named rules, a role-based token contract, an ornament/frame component set, and one agreed layout skeleton per in-scope surface, each evidenced by a throwaway prototype looked at in a browser.

Notes

Domain: visual design system + page structure for the Westgate NodeBB site. Spans four repos — this theme owns the frame and all styling; sow-nodebb-plugin-pages (home, news, blog/article, gallery, recruitment), sow-nodebb-plugin-wiki, sow-nodebb-plugin-support own their templates. Test surface is ../sow-nodebb (nix develop --command make dev, http://localhost:4567).

This map plans; it does not ship. Prototypes are throwaway, on prototype/* branches, judged in a browser. No merged theme changes come out of this map.

Skills every session should consult: /grilling, /domain-modeling, /prototype, /research, impeccable. Read PRODUCT.md and DESIGN.md before any design ticket.

Standing laws for this effort:

Dark-only. No light mode, ever.
WCAG AA is non-negotiable. Every palette or contrast decision is checked, not eyeballed.
Re-tune, don't replace. The Velvet Ledger survives as a lineage. Plum Noir #351E28 supersedes Bruised Plum #2a1222.
No lavender. No purple-cast neutral ramp.
Ornament-carried, art-optional. Every layout must look finished with zero images and better with them. Art slots are optional inserts, never required holes.
One shell, two densities. Identical topbar, footer, materials, ornament vocabulary everywhere; showcase and app surfaces differ only in spacing and ornament weight. (Amended by #49: width struck from this list — the One Rail rule forbids one page's shell being narrower than another's.)
Wiki changes are verified in the editor as well as the reader. A previous justified-text pass in the reader broke the editor. Reader-only verification does not count as verification.
Setting is the brief: decadence vs decay, balance vs apathy, virtue vs martyrdom. Gothic-fantasy medieval noir; the city of Westgate as renaissance-with-clockwork/steam/lightning, faint industrial tints; vampires rule in secret and most people are compromised before the story begins.

Reference material: ten collected palettes in ../_media/theme-color-palettes/. Nine sit inside the existing Velvet Ledger family (plum, oxblood, near-black, gold, muted rose). The genuinely new axes are a cool neutral ramp (purple variants excluded by the no-lavender law) and a warm light tone (EFE5D2 champagne, B59785 butcher paper) — the theme currently has no light surface at all.

Decisions so far

Contrast headroom of the candidate palette space — the full text ramp clears AA on every candidate dark and Plum Noir #351E28 is both safe and the ceiling; gold is a real link colour at Tarnished Gold and Gold Lit but not Old Gilt, no metal of any kind reaches 3:1 on butcher paper #B59785, a light surface costs a new dark ink role plus a second focus-ring token, and the documented 74% placeholder floor is wrong (the 4.5:1 edge is 66%).
How game websites carry identity without art — ornament that survives zero images is almost all CSS: notched/masked frames, inline-block plaques, fading 1px rules, a radial horizon glow instead of hero art, and status as a sentence.
North star and named rules for the noir re-tune — the north star becomes "The City and Its Ledger": the city is the frame, the Velvet Ledger relocates to the archive interior. Seven rules — Gilt Edge (sharpened, absorbing Edges Fade), Sparing Red, Engraving, Candlelight (amended), and new Two Metals, One Rail, The Threshold, No Machines, Only Fittings. Prototype on prototype/north-star-frame-b.
Server status slot: states and data contract — the slot answers only "can I log in right now": two peer cards (Live, Testing), a kept dot, raw X players online, per-card copyable connect address, in-game time, and four distinct states (up / Offline / Restarting / Status unavailable), with the address visible in every one. Prometheus is the source of truth but never the transport — netcup-game publishes a small JSON document (30s publish, 60s visible-only poll, 90s stale, uptime derived from started_at). No player names in v1. Home only; the topbar pip is deferred to #63. Built by sow-platform#127, pages#13, sow-codebase#243, pages#14.
Wiki reader and editor parity contract — parity is a DOM contract, not a remembered rule: the plugin guarantees reader and editor expose the same prose hooks (.westgate-wiki root, .wiki-article-prose container, same elements, same wiki-article-body.css), so a prose rule hits both surfaces or neither. Chrome lives under editor-only hooks (.westgate-wiki-compose, .wiki-editor__*, .ProseMirror-*) and is meant to differ. The wiki plugin owns its own chrome and must look good standalone on Harmony defaults — it is headed for open source — so the theme sets --wiki-* token values only, never plugin structure; the named escape hatch is page-frame furniture around the prose. Justification is plugin-owned behaviour behind an enumerated --wiki-prose-text-align (default start, Westgate sets justify), opt-outs travelling with it. Six known hazards, incl. ~50 lines of dead CKEditor CSS in the theme and 58rem written twice; cleanup filed as #64. Verified by a static selector test plus a computed-style comparison of the same page in both surfaces on the live stack.
Palette candidates on a dense page — candidate B, Two Metals, wins: base #150E13 / deep #0C0810 / panels #21161C, #180F16, Plum Noir #351E28, with pewter #9EA7B3 taking borders, rulings and metadata while gilt keeps links, ledger ink, buttons and the ring. Hierarchy is only legible without shadow once the second metal exists; the plum reads noir, not purple; the light surface is dropped from every app surface (a champagne quote out-shouts the reply containing it) and survives only as a possible showcase ornament, handed to #54. Exposed a second, hidden palette layer in scss/overrides.scss — Sass variables that cannot be var() and so do not follow a token swap — which #55 must cover, and 233 literal gold rgba() uses that must be tokenised before any palette ships. Evidenced by the throwaway prototype/53-palette-candidates branch, judged in a browser.
The ornament and frame component set — the vocabulary closes at twelve named components (Rail, Panel, Plain panel, Velvet panel, Plaque, Legend, Band, Ledger, Section header, Icon, Horizon, Well, Stamp) and four dividers (ruling, fading rule, lintel, spine); nothing outside the list may be invented on a surface. The shell is square everywhere — no rounded, cut or notched corners, only the status dot is round — and every bounded surface carries a wide offset-down drop shadow, because a square edge with no falloff reads as a cut. Cinzel is always uppercase. App density is the same components with the sheen off. The category row settles as tabular + gold: the three right-hand readings each sit in a Well on a shared grid. Findings: ledger and cards-with-gaps are mutually exclusive readings; the icon plate's plum wash is load-bearing; GAME_ICONS.md maps Programming to gears.svg, breaking No Machines, Only Fittings; the theme's border-radius: 8px !important must be removed at source, not overridden; #53's light champagne surface earns no component and stays out of the vocabulary. Evidenced by the throwaway prototype/54-ornament-set branch, judged in a browser.
Role-based token contract — the contract is ~30 roles, derived from real usage, not invented: five surfaces (page, page-deep, panel, panel-quiet, accent), three accent roles with a two-step glow, three text levels, three pewter structure steps plus one opaque edge-gold that all 85 gold borders snap to, three value-metal roles, focus, and four state families. Roles are the contract; poetic names live in DESIGN.md prose only — the 26-pigment frontmatter goes. Velvet and Ledger collapse into one panel (their difference is sheen, owned by #54); syntax highlighting is evicted to scoped --wg-code-*; heart-*/sorrow-* die into a single vote-on and downvote keeps no colour. #53's two-layer seam closes by making one Sass map in _palette.scss the single source, with :root and overrides.scss both generated from it and a contract test banning colour literals anywhere else. Public tier is a documented subset, ornament internals are marked private, and the rename is hard — no alias shim, pages' 18 tokens fixed alongside. Left pending: the accent value, handed to #67.

Not yet specified

News, blog, and article refinement under the new ornament system. These layouts are already good, so they are last, not first — but they will need a pass once the frame components exist. Unclear yet whether that is one ticket or one per surface.
Gallery layout. Genuinely blocked on having images at all. Revisit when there is something to show.
Recruitment page. Never designed. Needs its own content decisions before layout.
Support surface colour pass. Mechanical once tokens land, but may expose case/state colours the palette has no slot for.
Email template palette. templates/emails/ uses its own inlined colours; a re-tune has to reach them. Scope of the change unknown.
How the spec is handed off to build. Probably one ADR plus rewritten DESIGN.md, plus build issues in each affected repo — but the shape depends on how much the retune actually moves.

Out of scope

Forum and support layout restructure. They receive the palette and the shared shell; their dense Harmony-derived layouts stay. Restructuring them turns a theme retune into a NodeBB fork.
Server status feed implementation. This map designs the slot and the data contract it needs; producing the feed belongs to the repo that owns the servers.
Producing art. Screenshots, key art, banners. The map specifies slots so art drops in later without a rebuild.
Light mode.
Wiki prose internals, tables, and editor features. _wiki-prose.scss is 1700 lines and its own effort. This map touches the wiki page frame only.

Tickets

#48 — How game websites carry identity without art (research)
#49 — North star and named rules for the noir re-tune (grilling)
#50 — Contrast headroom of the candidate palette space (research)
#51 — Server status slot: states and data contract (grilling)
#52 — Wiki reader and editor parity contract (grilling)
#53 — Palette candidates on a dense page (prototype)
#54 — The ornament and frame component set (prototype)
#55 — Role-based token contract (grilling)
#56 — Page width and density system (grilling) — blocked by #48, The ornament and frame component set (#54)
#57 — The home board (prototype) — blocked by #51, #53, #54, The accent plum: Bruised Plum as identity, not lineage (#67)
#58 — Wiki page frame, reader and editor (prototype) — blocked by #52, #54, #56, The accent plum: Bruised Plum as identity, not lineage (#67)
#59 — Does Cinzel and Jost survive the re-tune (grilling) — blocked by #49
#63 — Does the shared shell carry a status pip in the topbar (grilling) — blocked by #54, Page width and density system (#56)
#67 — The accent plum: Bruised Plum as identity, not lineage (prototype)

## Destination A locked **spec** — not shipped code — for a re-tuned Westgate palette plus a site structure that reads as *the game's own website* (not a studio or publisher site): personality carried by chrome and ornament, art optional. Done when nothing is left to decide: north star + named rules, a role-based token contract, an ornament/frame component set, and one agreed layout skeleton per in-scope surface, each evidenced by a throwaway prototype looked at in a browser. ## Notes **Domain:** visual design system + page structure for the Westgate NodeBB site. Spans four repos — this theme owns the frame and all styling; `sow-nodebb-plugin-pages` (home, news, blog/article, gallery, recruitment), `sow-nodebb-plugin-wiki`, `sow-nodebb-plugin-support` own their templates. Test surface is `../sow-nodebb` (`nix develop --command make dev`, `http://localhost:4567`). **This map plans; it does not ship.** Prototypes are throwaway, on `prototype/*` branches, judged in a browser. No merged theme changes come out of this map. **Skills every session should consult:** `/grilling`, `/domain-modeling`, `/prototype`, `/research`, `impeccable`. Read `PRODUCT.md` and `DESIGN.md` before any design ticket. **Standing laws for this effort:** - **Dark-only.** No light mode, ever. - **WCAG AA is non-negotiable.** Every palette or contrast decision is checked, not eyeballed. - **Re-tune, don't replace.** The Velvet Ledger survives as a lineage. Plum Noir `#351E28` supersedes Bruised Plum `#2a1222`. - **No lavender.** No purple-cast neutral ramp. - **Ornament-carried, art-optional.** Every layout must look finished with zero images and better with them. Art slots are optional inserts, never required holes. - **One shell, two densities.** Identical topbar, footer, materials, ornament vocabulary everywhere; showcase and app surfaces differ only in spacing and ornament weight. *(Amended by #49: width struck from this list — the One Rail rule forbids one page's shell being narrower than another's.)* - **Wiki changes are verified in the editor as well as the reader.** A previous justified-text pass in the reader broke the editor. Reader-only verification does not count as verification. - **Setting is the brief:** decadence vs decay, balance vs apathy, virtue vs martyrdom. Gothic-fantasy medieval noir; the city of Westgate as renaissance-with-clockwork/steam/lightning, faint industrial tints; vampires rule in secret and most people are compromised before the story begins. **Reference material:** ten collected palettes in `../_media/theme-color-palettes/`. Nine sit inside the existing Velvet Ledger family (plum, oxblood, near-black, gold, muted rose). The genuinely new axes are a cool neutral ramp (purple variants excluded by the no-lavender law) and a warm light tone (`EFE5D2` champagne, `B59785` butcher paper) — the theme currently has no light *surface* at all. ## Decisions so far  - [Contrast headroom of the candidate palette space](https://git.westgate.pw/ShadowsOverWestgate/sow-nodebb-theme/issues/50) — the full text ramp clears AA on every candidate dark and Plum Noir #351E28 is both safe and the ceiling; gold is a real link colour at Tarnished Gold and Gold Lit but not Old Gilt, no metal of any kind reaches 3:1 on butcher paper #B59785, a light surface costs a new dark ink role plus a second focus-ring token, and the documented 74% placeholder floor is wrong (the 4.5:1 edge is 66%). - [How game websites carry identity without art](https://git.westgate.pw/ShadowsOverWestgate/sow-nodebb-theme/issues/48) — ornament that survives zero images is almost all CSS: notched/masked frames, inline-block plaques, fading 1px rules, a radial horizon glow instead of hero art, and status as a sentence. - [North star and named rules for the noir re-tune](https://git.westgate.pw/ShadowsOverWestgate/sow-nodebb-theme/issues/49) — the north star becomes **"The City and Its Ledger"**: the city is the frame, the Velvet Ledger relocates to the archive interior. Seven rules — Gilt Edge (sharpened, absorbing **Edges Fade**), Sparing Red, Engraving, Candlelight (amended), and new **Two Metals**, **One Rail**, **The Threshold**, **No Machines, Only Fittings**. Prototype on `prototype/north-star-frame-b`. - [Server status slot: states and data contract](https://git.westgate.pw/ShadowsOverWestgate/sow-nodebb-theme/issues/51) — the slot answers only "can I log in right now": two peer cards (Live, Testing), a kept dot, raw `X players online`, per-card copyable connect address, in-game time, and four distinct states (`up` / `Offline` / `Restarting` / `Status unavailable`), with the address visible in every one. Prometheus is the source of truth but never the transport — `netcup-game` publishes a small JSON document (30s publish, 60s visible-only poll, 90s stale, uptime derived from `started_at`). No player names in v1. Home only; the topbar pip is deferred to #63. Built by [sow-platform#127](https://git.westgate.pw/ShadowsOverWestgate/sow-platform/issues/127), [pages#13](https://git.westgate.pw/ShadowsOverWestgate/sow-nodebb-plugin-pages/issues/13), [sow-codebase#243](https://git.westgate.pw/ShadowsOverWestgate/sow-codebase/issues/243), [pages#14](https://git.westgate.pw/ShadowsOverWestgate/sow-nodebb-plugin-pages/issues/14). - [Wiki reader and editor parity contract](https://git.westgate.pw/ShadowsOverWestgate/sow-nodebb-theme/issues/52) — parity is a **DOM contract**, not a remembered rule: the plugin guarantees reader and editor expose the same prose hooks (`.westgate-wiki` root, `.wiki-article-prose` container, same elements, same `wiki-article-body.css`), so a prose rule hits both surfaces or neither. Chrome lives under editor-only hooks (`.westgate-wiki-compose`, `.wiki-editor__*`, `.ProseMirror-*`) and is meant to differ. The wiki plugin owns its own chrome and must look good standalone on Harmony defaults — it is headed for open source — so the theme sets `--wiki-*` token values only, never plugin structure; the named escape hatch is page-frame furniture *around* the prose. Justification is plugin-owned behaviour behind an enumerated `--wiki-prose-text-align` (default `start`, Westgate sets `justify`), opt-outs travelling with it. Six known hazards, incl. ~50 lines of dead CKEditor CSS in the theme and `58rem` written twice; cleanup filed as [#64](https://git.westgate.pw/ShadowsOverWestgate/sow-nodebb-theme/issues/64). Verified by a static selector test plus a computed-style comparison of the same page in both surfaces on the live stack. - [Palette candidates on a dense page](https://git.westgate.pw/ShadowsOverWestgate/sow-nodebb-theme/issues/53) — **candidate B, Two Metals**, wins: base `#150E13` / deep `#0C0810` / panels `#21161C`, `#180F16`, Plum Noir `#351E28`, with pewter `#9EA7B3` taking borders, rulings and metadata while gilt keeps links, ledger ink, buttons and the ring. Hierarchy is only legible without shadow once the second metal exists; the plum reads noir, not purple; the light surface is **dropped from every app surface** (a champagne quote out-shouts the reply containing it) and survives only as a possible showcase ornament, handed to #54. Exposed a second, hidden palette layer in `scss/overrides.scss` — Sass variables that cannot be `var()` and so do not follow a token swap — which #55 must cover, and 233 literal gold `rgba()` uses that must be tokenised before any palette ships. Evidenced by the throwaway `prototype/53-palette-candidates` branch, judged in a browser. - [The ornament and frame component set](https://git.westgate.pw/ShadowsOverWestgate/sow-nodebb-theme/issues/54) — the vocabulary closes at **twelve named components** (Rail, Panel, Plain panel, Velvet panel, Plaque, Legend, Band, Ledger, Section header, Icon, Horizon, Well, Stamp) and **four dividers** (ruling, fading rule, lintel, spine); nothing outside the list may be invented on a surface. The shell is **square everywhere** — no rounded, cut or notched corners, only the status dot is round — and every bounded surface carries a wide offset-down drop shadow, because a square edge with no falloff reads as a cut. Cinzel is **always uppercase**. App density is the same components with the sheen off. The category row settles as **tabular + gold**: the three right-hand readings each sit in a **Well** on a shared grid. Findings: ledger and cards-with-gaps are mutually exclusive readings; the icon plate's plum wash is load-bearing; `GAME_ICONS.md` maps Programming to `gears.svg`, breaking *No Machines, Only Fittings*; the theme's `border-radius: 8px !important` must be removed at source, not overridden; #53's light champagne surface earns no component and stays out of the vocabulary. Evidenced by the throwaway `prototype/54-ornament-set` branch, judged in a browser. - [Role-based token contract](https://git.westgate.pw/ShadowsOverWestgate/sow-nodebb-theme/issues/55) — the contract is **~30 roles**, derived from real usage, not invented: five surfaces (`page`, `page-deep`, `panel`, `panel-quiet`, `accent`), three accent roles with a two-step glow, three text levels, **three pewter structure steps plus one opaque `edge-gold`** that all 85 gold borders snap to, three value-metal roles, focus, and four state families. **Roles are the contract; poetic names live in DESIGN.md prose only** — the 26-pigment frontmatter goes. Velvet and Ledger collapse into one `panel` (their difference is sheen, owned by #54); syntax highlighting is evicted to scoped `--wg-code-*`; `heart-*`/`sorrow-*` die into a single `vote-on` and downvote keeps no colour. #53's two-layer seam closes by making **one Sass map in `_palette.scss` the single source**, with `:root` and `overrides.scss` both generated from it and a contract test banning colour literals anywhere else. Public tier is a documented subset, ornament internals are marked private, and the rename is hard — no alias shim, pages' 18 tokens fixed alongside. Left pending: the accent value, handed to #67. ## Not yet specified - **News, blog, and article refinement under the new ornament system.** These layouts are already good, so they are last, not first — but they will need a pass once the frame components exist. Unclear yet whether that is one ticket or one per surface. - **Gallery layout.** Genuinely blocked on having images at all. Revisit when there is something to show. - **Recruitment page.** Never designed. Needs its own content decisions before layout. - **Support surface colour pass.** Mechanical once tokens land, but may expose case/state colours the palette has no slot for. - **Email template palette.** `templates/emails/` uses its own inlined colours; a re-tune has to reach them. Scope of the change unknown. - **How the spec is handed off to build.** Probably one ADR plus rewritten `DESIGN.md`, plus build issues in each affected repo — but the shape depends on how much the retune actually moves. ## Out of scope - **Forum and support *layout* restructure.** They receive the palette and the shared shell; their dense Harmony-derived layouts stay. Restructuring them turns a theme retune into a NodeBB fork. - **Server status feed implementation.** This map designs the slot and the data contract it needs; producing the feed belongs to the repo that owns the servers. - **Producing art.** Screenshots, key art, banners. The map specifies slots so art drops in later without a rebuild. - **Light mode.** - **Wiki prose internals, tables, and editor features.** `_wiki-prose.scss` is 1700 lines and its own effort. This map touches the wiki *page frame* only. ## Tickets - [x] #48 — How game websites carry identity without art (research) - [x] #49 — North star and named rules for the noir re-tune (grilling) - [x] #50 — Contrast headroom of the candidate palette space (research) - [x] #51 — Server status slot: states and data contract (grilling) - [x] #52 — Wiki reader and editor parity contract (grilling) - [x] #53 — Palette candidates on a dense page (prototype) - [x] #54 — The ornament and frame component set (prototype) - [x] #55 — Role-based token contract (grilling) - [ ] #56 — Page width and density system (grilling) — blocked by #48, #54 - [ ] #57 — The home board (prototype) — blocked by #51, #53, #54, #67 - [ ] #58 — Wiki page frame, reader and editor (prototype) — blocked by #52, #54, #56, #67 - [ ] #59 — Does Cinzel and Jost survive the re-tune (grilling) — blocked by #49 - [ ] #63 — Does the shared shell carry a status pip in the topbar (grilling) — blocked by #54, #56 - [ ] #67 — The accent plum: Bruised Plum as identity, not lineage (prototype)

archvillainette added the wayfinder:map label 2026-07-28 08:08:45 +00:00