Step 10E.1: fonts, theme tokens and space backdrop

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

DECISIONS.md

@@ -823,3 +823,13 @@ Implementation decisions not spelled out in `memory-bank/implementation-plan.md`
 
 - **The CR's manual check was scripted** against a live dev server with the test clock (scratchpad `cr004-smoke.mjs`): mandatory rest after the sixth Earth↔Moon trip, `pilot-resting` while resting, and a different board on waking. The user's own check on a device is still the review gate.
 - **Observed for Phase 12 balance (not changed here):** a board's only guaranteed Courier job is used by the first trip from that location in a period, so later trips in the same period are usually deadheads. Resting, which wakes the pilot to a new board, is now the natural answer, which is what the CR intends; the size of that effect is for the balance pass.
+
+## CR-005 — UI Overhaul (Phase 10E)
+
+- **Change request CR-005 is stored in `memory-bank/change-requests/`** and inserted as Phase 10E, after Phase 10D and before Phase 11. Its decisions are plan §0.5.47–0.5.51.
+- **Requested by the user** ("the UI is very simple, has small text buttons on the bottom of the screen, and isn't very eye catching as a game"). Direction chosen: a "freight terminal HUD" that reuses the CR-003 art, so no new art is needed.
+
+## Step 10E.1
+
+- **Fonts via `@fontsource`, latin subset only, weights 500–700 (Chakra Petch) and 400–600 (Barlow).** Self-hosting keeps the game working offline for the Phase 11 PWA; Google Fonts would not.
+- **The backdrop is `body::before` (fixed, `z-index: -1`)**, so it never scrolls and screens no longer paint their own background. The layout's `bg-slate-950` was removed so it shows through.

apps/web/package.json

@@ -14,6 +14,8 @@
     "@deadhead/content": "workspace:*",
     "@deadhead/schema": "workspace:*",
     "@deadhead/sim": "workspace:*",
+    "@fontsource/barlow": "^5.3.0",
+    "@fontsource/chakra-petch": "^5.3.0",
     "@tanstack/react-query": "^5.104.1",
     "pixi.js": "^8.22.0",
     "react": "^19.3.0",

apps/web/src/index.css

@@ -1 +1,108 @@
 @import "tailwindcss";
+@import "@fontsource/chakra-petch/latin-500.css";
+@import "@fontsource/chakra-petch/latin-600.css";
+@import "@fontsource/chakra-petch/latin-700.css";
+@import "@fontsource/barlow/latin-400.css";
+@import "@fontsource/barlow/latin-500.css";
+@import "@fontsource/barlow/latin-600.css";
+
+/* "Freight terminal HUD" theme (CR-005, decisions 0.5.47–0.5.48). */
+@theme {
+  --font-sans: "Barlow", ui-sans-serif, system-ui, sans-serif;
+  --font-display: "Chakra Petch", "Barlow", ui-sans-serif, system-ui, sans-serif;
+
+  /* Surfaces, darkest first. */
+  --color-space-950: #03050d;
+  --color-space-900: #080d1d;
+  --color-space-850: #0c132a;
+  --color-space-800: #111a36;
+  --color-space-700: #1a2548;
+  --color-space-600: #26345f;
+  --color-space-500: #3a4a7c;
+
+  /* Text. */
+  --color-ink-50: #f2f5ff;
+  --color-ink-200: #c9d3ef;
+  --color-ink-300: #a3afd3;
+  --color-ink-400: #7e8bb3;
+  --color-ink-500: #5c688f;
+
+  --shadow-glow-amber: 0 0 0 1px rgb(251 191 36 / 0.45), 0 0 22px -4px rgb(251 191 36 / 0.6);
+  --shadow-glow-cyan: 0 0 0 1px rgb(34 211 238 / 0.4), 0 0 22px -4px rgb(34 211 238 / 0.55);
+  --shadow-glow-emerald: 0 0 0 1px rgb(52 211 153 / 0.4), 0 0 22px -4px rgb(52 211 153 / 0.55);
+  --shadow-panel:
+    inset 0 1px 0 0 rgb(255 255 255 / 0.05), 0 12px 32px -12px rgb(0 0 0 / 0.8);
+
+  --animate-rise: rise 0.35s cubic-bezier(0.2, 0.8, 0.2, 1) both;
+  --animate-glow: glow 2.4s ease-in-out infinite;
+  --animate-sheet: sheet 0.28s cubic-bezier(0.2, 0.8, 0.2, 1) both;
+
+  @keyframes rise {
+    from {
+      opacity: 0;
+      transform: translateY(8px);
+    }
+    to {
+      opacity: 1;
+      transform: none;
+    }
+  }
+  @keyframes glow {
+    0%,
+    100% {
+      opacity: 1;
+    }
+    50% {
+      opacity: 0.55;
+    }
+  }
+  @keyframes sheet {
+    from {
+      opacity: 0;
+      transform: translateY(24px);
+    }
+    to {
+      opacity: 1;
+      transform: none;
+    }
+  }
+}
+
+@layer base {
+  html {
+    color-scheme: dark;
+  }
+  body {
+    background-color: var(--color-space-950);
+    color: var(--color-ink-50);
+    font-family: var(--font-sans);
+    -webkit-tap-highlight-color: transparent;
+  }
+  /* Every screen sits in space: the map background, dimmed (decision 0.5.47). */
+  body::before {
+    content: "";
+    position: fixed;
+    inset: 0;
+    z-index: -1;
+    background:
+      radial-gradient(ellipse 80% 60% at 50% 0%, rgb(56 189 248 / 0.1), transparent 70%),
+      linear-gradient(180deg, rgb(3 5 13 / 0.72), rgb(3 5 13 / 0.9)),
+      url("/assets/map-gen/bg.webp") center / cover no-repeat,
+      var(--color-space-950);
+  }
+  :focus-visible {
+    outline: 2px solid var(--color-amber-400);
+    outline-offset: 2px;
+  }
+}
+
+/* Motion is decoration only: switch it off when asked. */
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
+}

apps/web/src/layout/Layout.tsx

@@ -14,7 +14,7 @@ export interface LayoutProps {
 /** Header with credits and game clock, the current screen, and a bottom tab bar. */
 export function Layout({ credits = "—", clock = <GameClock />, banner }: LayoutProps) {
   return (
-    <div className="flex min-h-dvh flex-col bg-slate-950 text-slate-100">
+    <div className="flex min-h-dvh flex-col text-ink-50">
       <header className="sticky top-0 z-10 flex items-center justify-between gap-2 border-b border-slate-800 bg-slate-950/95 px-4 py-2">
         <span className="truncate text-sm font-bold tracking-wide">DEADHEAD</span>
         <div className="flex shrink-0 items-center gap-3 text-sm tabular-nums">

apps/web/test/theme.test.ts

@@ -0,0 +1,23 @@
+import { readFileSync } from "node:fs";
+import { dirname, join } from "node:path";
+import { fileURLToPath } from "node:url";
+import { describe, expect, it } from "vitest";
+
+const css = readFileSync(join(dirname(fileURLToPath(import.meta.url)), "../src/index.css"), "utf8");
+
+describe("theme (CR-005)", () => {
+  it("self-hosts the display and body fonts", () => {
+    expect(css).toMatch(/@import "@fontsource\/chakra-petch\//);
+    expect(css).toMatch(/@import "@fontsource\/barlow\//);
+    expect(css).toMatch(/--font-display: "Chakra Petch"/);
+    expect(css).toMatch(/--font-sans: "Barlow"/);
+  });
+
+  it("puts every screen on the space backdrop", () => {
+    expect(css).toContain('url("/assets/map-gen/bg.webp")');
+  });
+
+  it("turns motion off under prefers-reduced-motion", () => {
+    expect(css).toMatch(/@media \(prefers-reduced-motion: reduce\)/);
+  });
+});

memory-bank/change-requests/CR-005-ui-overhaul.md

@@ -0,0 +1,92 @@
+# Change Request CR-005 — UI Overhaul
+
+**Project:** Deadhead: Space Freight Tycoon
+**Applies to:** a build with Phases 1–10, CR-001, CR-002, CR-003 and CR-004 complete
+**Do this:** as **Phase 10E**, after Phase 10D and before Phase 11
+**Related docs:** `implementation-plan.md`, `CR-003-map-art.md`, `DECISIONS.md`
+
+---
+
+## 1. Why
+
+Every screen except the map is plain slate cards with small text, and navigation is a row of seven small text links at the bottom of the screen. It works, but it doesn't look or feel like a game. The map art from CR-003 is the only place the game's look shows up.
+
+This change gives the whole client one visual identity, a "freight terminal HUD": deep-space backgrounds, glowing amber and cyan accents, a techy display font for headings and numbers, big icon navigation, and the existing planet and ship art used on the screens, not just the map.
+
+It is **presentation only**. No game rules, API calls, copy or accessible names change, so the existing client tests are the regression suite for this phase.
+
+## 2. Visual direction
+
+| Element | Direction |
+|---|---|
+| Background | The map's `bg.webp` behind every screen, dimmed under a navy gradient, so all screens are "in space". |
+| Surfaces | Translucent navy panels with a thin cool border, a soft inner highlight and corner brackets on feature panels. |
+| Accents | Amber = primary actions and the player's selection. Cyan = in flight and info. Emerald = money in and success. Rose = errors and blocks. Fuchsia = scripted story jobs. |
+| Type | **Chakra Petch** (display: headings, numbers, tab labels, buttons, uppercase eyebrow labels) and **Barlow** (body). Self-hosted with `@fontsource`, so it works offline (Phase 11 PWA). |
+| Numbers | Credits, payouts and countdowns use the display font with tabular figures; key numbers are large. |
+| Navigation | Icon and label tabs. Phone: a bottom bar with 24 px icons and a glowing active indicator. Desktop (≥ 768 px): a left rail. Small badges call attention to things waiting for the player. |
+| Art | The map's sprites (`public/assets/map-gen`): ship art on Fleet, Market and the dispatch sheet; planet art on Locations, the contract cards' route, the map panels and HQ. |
+| Motion | Screens fade and rise in; buttons press down; claimable goals and ready badges pulse gently. All motion is off under `prefers-reduced-motion`. |
+
+## 3. Rules for this change
+
+- All rules in `implementation-plan.md` §0.1 apply: steps in order, one commit per step, each step's test must pass, and `progress.md` is updated after every step.
+- **No behavior changes.** Visible copy, roles and accessible names stay as they are, except where a step says otherwise. Existing tests must keep passing without edits to their assertions (a test may change only to follow a renamed or moved element that a step names).
+- **Styling goes through the UI kit and theme tokens** (Step 10E.1–10E.2). Screens should not hard-code the old `slate-*` palette.
+- No new art. Screens reuse the generated map sprites; the map's style config (`map/style.ts`) stays the map's own.
+- Visual quality is a manual check: steps marked "manual check" end with desktop and phone screenshots in `docs/screenshots/`, named in `progress.md`. Stop for the user's review at the end of Phase 10E.
+
+## 4. Decisions
+
+Record these in `DECISIONS.md` (as plan §0.5.47–0.5.51).
+
+- **0.5.47 Visual identity.** One "freight terminal HUD" look for the whole client (§2): space background, translucent panels, amber/cyan/emerald/rose/fuchsia accent roles, Chakra Petch + Barlow, self-hosted.
+- **0.5.48 Tokens and kit.** Colors, fonts, radii, shadows and motion are Tailwind theme tokens in `apps/web/src/index.css`. Shared components (buttons, panels, sheets, stat tiles, meters, pills, screen headers, art) live in `apps/web/src/ui/`. Screens compose these.
+- **0.5.49 Navigation.** Icon tabs, bottom bar on phones and a left rail from 768 px wide. Tab order and labels are unchanged. Attention badges are decorative (`aria-hidden`), so each tab's accessible name stays its label; the same information is on the screens.
+- **0.5.50 Art on screens.** Ships and locations show their content `sprite` from the generated map art, as plain `<img>` with empty `alt` (the name is always in text next to it). A missing image hides itself, matching decision 0.5.41.
+- **0.5.51 Presentation only.** The overhaul changes no game rules, API calls, copy or accessible names (§3).
+
+## 5. Steps — Phase 10E
+
+### Step 10E.1 — Fonts, theme tokens and backdrop
+- Add `@fontsource/chakra-petch` and `@fontsource/barlow`. Define theme tokens in `index.css` (`@theme`): fonts, the panel/ink color scale, accent colors, glow shadows and keyframes (rise-in, pulse). Body uses Barlow; a global backdrop shows `bg.webp` under a dark gradient.
+- Respect `prefers-reduced-motion` globally.
+- **Test:** a test reads `index.css` and checks the font families, the backdrop image and the reduced-motion rule are present.
+
+### Step 10E.2 — UI kit
+- `src/ui/`: `Button` (primary, secondary, ghost, success, danger; sizes; pressed feedback), `Panel` (plain, feature with corner brackets, tone), `Sheet` (modal shell: backdrop, bottom sheet on phones, centered card from `sm`), `StatTile`, `Meter` (labelled `progressbar`), `Pill`, `ScreenHeader` (eyebrow, title as the screen's `h1`, subtitle), `Art` (sprite image), and the icon set used by navigation and screens.
+- **Test:** `ui-kit.test.tsx`: buttons keep `type="button"` and forward `disabled`; `Meter` exposes progressbar values; `Sheet` is an `aria-modal` dialog labelled by its title; `ScreenHeader` renders a level-1 heading; `Art` resolves sprite URLs and hides on error.
+
+### Step 10E.3 — App shell
+- HUD header: logo mark and wordmark, credits in a glowing chip, game clock chip. The `Credits` and `Game clock` labels stay.
+- Navigation per decision 0.5.49: bottom icon bar on phones, left rail from `md`. Badges: HQ = goals ready to claim; Jobs = idle crewed ships not resting; Pilots = pilots with unspent skill points. Computed by a pure `tabAttention(state)`.
+- The map screen fills exactly the space left by the new header and navigation on both layouts.
+- **Test:** existing `layout.test.tsx` passes; new tests for `tabAttention` and for a badge appearing without changing the tab's accessible name.
+
+### Step 10E.4 — HQ dashboard
+- Company hero (name, credits large), icon stat tiles, a "Next arrival" panel with a route strip and live progress, pilot rest, the tutorial card as a story panel, goals with reward pills, the loan with a meter.
+- **Test:** existing HQ, goals, loan and rest tests pass. **Manual check.**
+
+### Step 10E.5 — Contracts and dispatch
+- Location switcher as planet chips. Contract cards: a route strip (origin art → line → destination art), cargo and mass, a large payout, requirement pills, expiry, and a prominent Dispatch button. The tutorial board gets the same card, with suggested and scripted variants. The dispatch sheet uses the `Sheet` and shows each ship with its art and the numbers as stat tiles.
+- **Test:** existing contracts, tutorial board, dispatch and board refresh tests pass. **Manual check.**
+
+### Step 10E.6 — Fleet and Market
+- Ship cards with ship art, a status pill (idle, in flight), the route and a progress meter in flight, and actions as buttons. The deadhead picker uses `Sheet`. Market cards are "showroom" cards: large art, price, and stat meters for speed, capacity and range relative to the best model, plus landing class.
+- **Test:** existing fleet and market tests pass. **Manual check.**
+
+### Step 10E.7 — Pilots
+- Pilot cards with an initials badge, level and XP meter, skills as pips out of their maximum with a raise button, the duty meter (amber, rose when near the limit) or rest status, and actions as buttons. The hire panel becomes a feature panel.
+- **Test:** existing pilots and duty tests pass. **Manual check.**
+
+### Step 10E.8 — Locations, map panels, start screen and dialogs
+- Location cards with planet art, details as a compact spec list, the HQ status pill and the lease button. Undiscovered locations show dimmed art and a lock. The map's location and flight panels get the panel style with art. The start screen becomes a title screen over the space backdrop, with the sun and planets. The away summary and the deal use `Sheet`.
+- **Test:** existing locations, map interaction, onboarding, away summary and deal tests pass. **Manual check.**
+
+### Step 10E.9 — Regression and review
+- Full suite, coverage, lint, typecheck and web build green. Screenshots of every screen at desktop and phone width (tutorial and mid-game). **Phase 10E complete — stop for review.**
+
+## 6. Amendments to earlier steps
+
+- **Step 8.2 (layout):** the header and bottom navigation are restyled per decision 0.5.49; desktop uses a left rail.
+- **Step 11.1 (PWA):** the self-hosted font files are part of the offline asset cache.

memory-bank/implementation-plan.md

@@ -102,6 +102,11 @@ These answer the pre-build review. Log each one in `DECISIONS.md` as it is imple
 44. **Finish the job** (CR-004). Dispatch is blocked only while a pilot is resting. A trip that will exceed the limit is allowed; mandatory rest starts on arrival.
 45. **Rest** (CR-004). Starting rest sets duty hours to zero and sets rest-ends-at to start time plus the rest duration. Mandatory rest starts at the trip's arrival time, so it is correct even if resolution happens later (offline).
 46. **Rest covers a board refresh** (CR-004). The rest duration converted to real time must be at least the contract board period. This is enforced by a content test.
+47. **Visual identity** (CR-005). One "freight terminal HUD" look for the whole client: space background, translucent panels, amber/cyan/emerald/rose/fuchsia accent roles, Chakra Petch + Barlow fonts, self-hosted.
+48. **Tokens and kit** (CR-005). Colors, fonts, radii, shadows and motion are Tailwind theme tokens in `apps/web/src/index.css`; shared components live in `apps/web/src/ui/` and screens compose them.
+49. **Navigation** (CR-005). Icon tabs: a bottom bar on phones, a left rail from 768 px wide. Tab order and labels are unchanged. Attention badges are decorative (`aria-hidden`), so each tab's accessible name stays its label.
+50. **Art on screens** (CR-005). Ships and locations show their content `sprite` from the generated map art as plain images with empty `alt`; the name is always in text beside it. A missing image hides itself.
+51. **Presentation only** (CR-005). The overhaul changes no game rules, API calls, copy or accessible names.
 
 ---
 
@@ -520,6 +525,12 @@ Steps 10D.1–10D.10 are specified in `memory-bank/change-requests/CR-004-pilot-
 
 ---
 
+## Phase 10E — UI Overhaul (CR-005)
+
+Steps 10E.1–10E.9 are specified in `memory-bank/change-requests/CR-005-ui-overhaul.md` §5, with its §6 amendments to earlier steps. Done after Phase 10D and before Phase 11; stop for review at the end.
+
+---
+
 ## Phase 11 — PWA
 
 ### Step 11.1 — Installable PWA

memory-bank/progress.md

@@ -174,3 +174,9 @@ Spec: `memory-bank/change-requests/CR-004-pilot-duty-rest.md`. New decisions rec
 - [x] **Step 10D.8 — Client: board refresh and the "nothing here" case.** Every location board shows "New contracts in mm:ss" to `periodEndsAt` and refetches itself just after it. For each idle, crewed, non-resting ship at the location with no contract it can take (by the sim, via `pairOptions`), a prompt offers "Rest [pilot] — wakes to a new board" (`restPilot`) and "Deadhead (fly empty)" (opens the Fleet's deadhead picker, now exported). Test: `board-refresh.test.tsx`.
 - [x] **Step 10D.9 — Client: rest in summaries and on HQ.** The "While you were away" entry for a trip that ended in mandatory rest says "[Pilot] is resting until [local time]". HQ (after the tutorial) has a "Pilot rest" card: "Pilots resting: N" and the soonest to wake with a countdown, or "Everyone is ready to fly." Test: `rest-summary-hq.test.tsx`.
 - [x] **Step 10D.10 — Plan amendments and regression.** CR-004 §6 amendments added to plan steps 2.1, 3.12, 3.17, 5.3, 9.5, 9.7, 12.1 and 12.6 (§0.5.42–46 were added with the CR). Full suite, coverage, lint and web build green. Scripted manual check against a live server: guest → 4 runs → deal → the avatar chains Earth↔Moon trips (2.1–2.5 game h each) and rests on arrival after the sixth (12 h limit); dispatch while resting is refused with `pilot-resting`; on waking, Earth's board is a new set. **Balance note for Phase 12:** each board has one guaranteed Courier-sized job per period, so after the first trip from a location in a period the Courier often has to deadhead or rest. **Phase 10D complete — stopped for review.**
+
+## Phase 10E — UI Overhaul (CR-005)
+
+Spec: `memory-bank/change-requests/CR-005-ui-overhaul.md`. New decisions recorded as plan §0.5.47–0.5.51.
+
+- [x] **Step 10E.1 — Fonts, theme tokens and backdrop.** `@fontsource/chakra-petch` (display) and `@fontsource/barlow` (body), self-hosted. `index.css` `@theme`: `font-display`/`font-sans`, `space-*` surfaces, `ink-*` text, glow and panel shadows, `rise`/`glow`/`sheet` animations. `body::before` puts the map's `bg.webp` under a navy gradient behind every screen; global `:focus-visible` ring; all motion off under `prefers-reduced-motion`. Test: `theme.test.ts`.

pnpm-lock.yaml

@@ -90,6 +90,12 @@ importers:
       '@deadhead/sim':
         specifier: workspace:*
         version: link:../../packages/sim
+      '@fontsource/barlow':
+        specifier: ^5.3.0
+        version: 5.3.0
+      '@fontsource/chakra-petch':
+        specifier: ^5.3.0
+        version: 5.3.0
       '@tanstack/react-query':
         specifier: ^5.104.1
         version: 5.104.1(react@19.3.0)
@@ -861,6 +867,12 @@ packages:
   '@fastify/proxy-addr@5.1.1':
     resolution: {integrity: sha512-zv07Y9GEuDsJPegZoDFd4SDWaZOW8N2pa0GSrYmKpId/tjt1Hgo3BjZBVjdVpfVrHaA+Qv5jawtS2O50J5xM9g==}
 
+  '@fontsource/barlow@5.3.0':
+    resolution: {integrity: sha512-tGR0y6QObRtKv71MOth44222+mdNFM/ZWFWDV1VLzNbG4oK9PNRlyJzmkck4vHAi9ibHBXgt4SlY51amFP55CA==}
+
+  '@fontsource/chakra-petch@5.3.0':
+    resolution: {integrity: sha512-QZvbM/q2R6n1pg2x+TJPftZmBNS+ADU37L4Z4L/6UJIz+JZ/SRaEf8usPFRiP7Ht28sIideMu/Bm1SnGlSrwNw==}
+
   '@humanfs/core@0.19.2':
     resolution: {integrity: sha512-UhXNm+CFMWcbChXywFwkmhqjs3PRCmcSa/hfBgLIb7oQ5HNb1wS0icWsGtSAUNgefHeI+eBrA8I1fxmbHsGdvA==}
     engines: {node: '>=18.18.0'}
@@ -3238,6 +3250,10 @@ snapshots:
       '@fastify/forwarded': 3.0.2
       ipaddr.js: 2.5.0
 
+  '@fontsource/barlow@5.3.0': {}
+
+  '@fontsource/chakra-petch@5.3.0': {}
+
   '@humanfs/core@0.19.2':
     dependencies:
       '@humanfs/types': 0.15.0