Add vibrant accents and refresh README theme gallery

apps/ui/src/lib/theme.ts

@@ -1,6 +1,14 @@
 export type ColorMode = "dark" | "light" | "system";
 export type ResolvedTheme = "dark" | "light";
-export type Accent = "teal" | "ocean" | "forest" | "slate";
+export type Accent =
+  | "teal"
+  | "ocean"
+  | "forest"
+  | "slate"
+  | "coral"
+  | "amber"
+  | "magenta"
+  | "citrus";
 
 /** @deprecated Prefer ColorMode; kept for callers that only mean resolved dark/light. */
 export type Theme = ResolvedTheme;
@@ -14,13 +22,19 @@ export const DEFAULT_COLOR_MODE: ColorMode = "system";
 export const DEFAULT_ACCENT: Accent = "teal";
 export const DEFAULT_THEME: ResolvedTheme = "dark";
 
-export const ACCENTS: Array<{ id: Accent; label: string }> = [
-  { id: "teal", label: "Teal" },
-  { id: "ocean", label: "Ocean" },
-  { id: "forest", label: "Forest" },
-  { id: "slate", label: "Slate" },
+export const ACCENTS: Array<{ id: Accent; label: string; swatch: string }> = [
+  { id: "teal", label: "Teal", swatch: "#14b8a6" },
+  { id: "ocean", label: "Ocean", swatch: "#38bdf8" },
+  { id: "forest", label: "Forest", swatch: "#4ade80" },
+  { id: "slate", label: "Slate", swatch: "#94a3b8" },
+  { id: "coral", label: "Coral", swatch: "#ff6b4a" },
+  { id: "amber", label: "Amber", swatch: "#f59e0b" },
+  { id: "magenta", label: "Magenta", swatch: "#ec4899" },
+  { id: "citrus", label: "Citrus", swatch: "#84cc16" },
 ];
 
+const ACCENT_IDS = new Set(ACCENTS.map((a) => a.id));
+
 export function isColorMode(value: unknown): value is ColorMode {
   return value === "dark" || value === "light" || value === "system";
 }
@@ -31,7 +45,7 @@ export function isTheme(value: unknown): value is ColorMode {
 }
 
 export function isAccent(value: unknown): value is Accent {
-  return value === "teal" || value === "ocean" || value === "forest" || value === "slate";
+  return typeof value === "string" && ACCENT_IDS.has(value as Accent);
 }
 
 export function systemPrefersDark(): boolean {

apps/ui/src/pages/HomePage.tsx

@@ -49,7 +49,11 @@ export function HomePage() {
   useEffect(() => {
     api<CycleDTO[]>("/api/cycles").then((c) => {
       setCycles(c);
-      if (c[0]) setCycleId(c[0].id);
+      const preferred =
+        c.find((x) => x.status === "manager_open") ||
+        c.find((x) => x.status !== "closed") ||
+        c[0];
+      if (preferred) setCycleId(preferred.id);
     });
     api<WorkspaceStatus>("/api/workspace/status").then((s) => {
       setThinEvidenceCount(s.thinEvidenceCount ?? 0);

apps/ui/src/pages/SettingsPage.tsx

@@ -134,7 +134,7 @@ export function SettingsPage({
         id="settings-appearance"
         title="Appearance"
         when="Change color mode or accent whenever the UI feels too bright, too dark, or hard to scan."
-        how={`Pick a mode and accent below. Preferences stay in this browser; System follows your OS (${resolved} right now).`}
+        how={`Pick a mode and accent below. Eight accents (Teal, Ocean, Forest, Slate, Coral, Amber, Magenta, Citrus) × dark/light. Preferences stay in this browser; System follows your OS (${resolved} right now).`}
       >
         <div className="field">
           <label htmlFor="theme-select">Color mode</label>
@@ -160,19 +160,7 @@ export function SettingsPage({
                 aria-checked={accent === item.id}
                 onClick={() => setAccent(item.id as Accent)}
               >
-                <span
-                  className="accent-dot"
-                  style={{
-                    ["--swatch" as string]:
-                      item.id === "teal"
-                        ? "#14b8a6"
-                        : item.id === "ocean"
-                          ? "#38bdf8"
-                          : item.id === "forest"
-                            ? "#4ade80"
-                            : "#94a3b8",
-                  }}
-                />
+                <span className="accent-dot" style={{ ["--swatch" as string]: item.swatch }} />
                 {item.label}
               </button>
             ))}

apps/ui/src/styles.css

@@ -158,6 +158,82 @@
   --bg-glow-b: rgba(100, 116, 139, 0.04);
 }
 
+[data-theme="dark"][data-accent="coral"] {
+  --brand: #ff6b4a;
+  --brand-strong: #ff8f75;
+  --brand-tint: rgba(255, 107, 74, 0.16);
+  --brand-ring: rgba(255, 107, 74, 0.36);
+  --accent: #ffb4a2;
+  --bg-glow-a: rgba(255, 107, 74, 0.12);
+  --bg-glow-b: rgba(251, 113, 133, 0.07);
+}
+[data-theme="light"][data-accent="coral"] {
+  --brand: #e11d48;
+  --brand-strong: #be123c;
+  --brand-tint: #ffe4e6;
+  --brand-ring: rgba(225, 29, 72, 0.28);
+  --accent: #f43f5e;
+  --bg-glow-a: rgba(225, 29, 72, 0.07);
+  --bg-glow-b: rgba(251, 113, 133, 0.05);
+}
+
+[data-theme="dark"][data-accent="amber"] {
+  --brand: #f59e0b;
+  --brand-strong: #fbbf24;
+  --brand-tint: rgba(245, 158, 11, 0.16);
+  --brand-ring: rgba(245, 158, 11, 0.36);
+  --accent: #fcd34d;
+  --bg-glow-a: rgba(245, 158, 11, 0.12);
+  --bg-glow-b: rgba(251, 191, 36, 0.07);
+}
+[data-theme="light"][data-accent="amber"] {
+  --brand: #c2410c;
+  --brand-strong: #9a3412;
+  --brand-tint: #ffedd5;
+  --brand-ring: rgba(194, 65, 12, 0.28);
+  --accent: #ea580c;
+  --bg-glow-a: rgba(194, 65, 12, 0.07);
+  --bg-glow-b: rgba(234, 88, 12, 0.05);
+}
+
+[data-theme="dark"][data-accent="magenta"] {
+  --brand: #ec4899;
+  --brand-strong: #f472b6;
+  --brand-tint: rgba(236, 72, 153, 0.16);
+  --brand-ring: rgba(236, 72, 153, 0.36);
+  --accent: #f9a8d4;
+  --bg-glow-a: rgba(236, 72, 153, 0.12);
+  --bg-glow-b: rgba(217, 70, 239, 0.07);
+}
+[data-theme="light"][data-accent="magenta"] {
+  --brand: #db2777;
+  --brand-strong: #be185d;
+  --brand-tint: #fce7f3;
+  --brand-ring: rgba(219, 39, 119, 0.28);
+  --accent: #ec4899;
+  --bg-glow-a: rgba(219, 39, 119, 0.07);
+  --bg-glow-b: rgba(236, 72, 153, 0.05);
+}
+
+[data-theme="dark"][data-accent="citrus"] {
+  --brand: #84cc16;
+  --brand-strong: #a3e635;
+  --brand-tint: rgba(132, 204, 22, 0.16);
+  --brand-ring: rgba(132, 204, 22, 0.36);
+  --accent: #d9f99d;
+  --bg-glow-a: rgba(132, 204, 22, 0.12);
+  --bg-glow-b: rgba(250, 204, 21, 0.06);
+}
+[data-theme="light"][data-accent="citrus"] {
+  --brand: #65a30d;
+  --brand-strong: #4d7c0f;
+  --brand-tint: #ecfccb;
+  --brand-ring: rgba(101, 163, 13, 0.28);
+  --accent: #84cc16;
+  --bg-glow-a: rgba(101, 163, 13, 0.07);
+  --bg-glow-b: rgba(132, 204, 22, 0.05);
+}
+
 /* Semantic colors (theme-aware, accent-independent) */
 :root,
 [data-theme="dark"] {
@@ -1259,13 +1335,13 @@ pre { margin: 0; white-space: pre-wrap; word-break: break-word; }
   align-items: center;
   gap: var(--space-2);
   min-height: var(--touch-min);
-  padding: 0.4rem 0.75rem;
+  padding: 0.35rem 0.65rem;
   border-radius: 999px;
   border: 1px solid var(--line-strong);
   background: var(--panel);
   color: var(--ink-soft);
   cursor: pointer;
-  font-size: var(--text-sm);
+  font-size: var(--text-xs);
   font-weight: 600;
 }
 .accent-swatch.on {

docs/screenshots/README.md

@@ -1,39 +1,45 @@
 # Screenshot gallery
 
-PNG captures used in the root [README](../../README.md).
+PNG captures used in the root [README](../../README.md) and the [theme matrix](./THEMES.md).
 
-Regenerate (API + UI must be running; unlock password defaults to `workbench`):
+Regenerate (API + UI must be running; demo unlock password `workbench`):
 
 ```bash
 pnpm screenshots
 # or: UI_URL=http://localhost:5173 PRM_PASSWORD=workbench pnpm screenshots
 ```
 
-The script **erases and re-seeds** the local demo workspace so shots stay consistent. Requires system Chrome (`google-chrome-stable`) and root `puppeteer-core`.
-
-Numbering matches the README Screens section (`01` unlock through `14` settings), plus director close-ups and sprint pulse:
-
-| File | Surface |
-| --- | --- |
-| `01-unlock.png` | Create workbench — empty vs demo |
-| `02-home.png` | Command center |
-| `03-team.png` | Team roster |
-| `04-person.png` | Person dossier |
-| `05-roles.png` | Roles |
-| `06-cycles.png` | Cycles |
-| `07-writing-desk.png` | Writing desk |
-| `08-promotions.png` | Promotions list |
-| `09-promotion-detail.png` | Promotion packet |
-| `10-consistency.png` | Consistency |
-| `11-team-performance.png` | Team performance |
-| `12-backfill.png` | Backfill |
-| `13-chat.png` | AI Chat |
-| `14-settings.png` | Settings (sticky section nav + appearance) |
-| `15-director-attention.png` | Home — Needs director attention |
-| `16-writing-desk-director.png` | Writing desk — Skip-level / Director card |
-| `17-consistency-director-packs.png` | Consistency — calib / briefing / bundle |
-| `18-team-director-briefing.png` | Team performance — Director briefing |
-| `19-promo-committee.png` | Promotion — Promo committee export |
-| `20-sprint-pulse.png` | Sprint pulse |
-
-`01-unlock` is the empty-vs-demo create screen. Sticky **On this page** nav appears on Home, Person, Writing desk, Team performance, Consistency, Cycles, Roles, Sprint pulse, Promotion detail, and Settings.
+The script **erases and re-seeds** the local demo workspace, then captures:
+
+1. **Theme matrix** — every accent × dark/light × main page under `themes/{mode}-{accent}/`
+2. **README tour** — numbered shots at this folder root (accents rotate through the tour)
+3. **Home strip** — `themes/{mode}-{accent}-home.png` for the Appearance section
+
+Requires system Chrome (`google-chrome-stable`) and root `puppeteer-core`.
+
+## README tour files
+
+| File | Surface | Theme in tour |
+| --- | --- | --- |
+| `01-unlock.png` | Create workbench | dark Coral |
+| `02-home.png` | Command center | dark Teal |
+| `03-team.png` | Team roster | dark Coral |
+| `04-person.png` | Person dossier | dark Magenta |
+| `05-roles.png` | Roles | light Ocean |
+| `06-cycles.png` | Cycles | dark Citrus |
+| `07-writing-desk.png` | Writing desk | dark Coral |
+| `08-promotions.png` | Promotions list | light Magenta |
+| `09-promotion-detail.png` | Promotion packet | dark Ocean |
+| `10-consistency.png` | Consistency | dark Forest |
+| `11-team-performance.png` | Team performance | light Coral |
+| `12-backfill.png` | Backfill | light Citrus |
+| `13-chat.png` | AI Chat | dark Ocean |
+| `14-settings.png` | Settings (8 accents) | dark Coral |
+| `15-director-attention.png` | Home — director attention | dark Amber |
+| `16-writing-desk-director.png` | Writing desk — skip-level | dark Amber |
+| `17-consistency-director-packs.png` | Consistency — calib packs | dark Forest |
+| `18-team-director-briefing.png` | Team performance — briefing | light Amber |
+| `19-promo-committee.png` | Promo committee export | dark Ocean |
+| `20-sprint-pulse.png` | Sprint pulse | dark Magenta |
+
+Accents available in Settings: Teal, Ocean, Forest, Slate, **Coral**, **Amber**, **Magenta**, **Citrus**.

docs/screenshots/THEMES.md

@@ -0,0 +1,43 @@
+# Theme matrix
+
+Every main page captured in **8 accents × dark/light** (16 combinations).
+
+Accents: Teal, Ocean, Forest, Slate, Coral, Amber, Magenta, Citrus.
+
+Regenerate with `pnpm screenshots` (UI + API running).
+
+## Home strip (all combinations)
+
+### Dark
+
+| Accent | Shot |
+|--------|------|
+| Teal | ![dark teal](./themes/dark-teal-home.png) |
+| Ocean | ![dark ocean](./themes/dark-ocean-home.png) |
+| Forest | ![dark forest](./themes/dark-forest-home.png) |
+| Slate | ![dark slate](./themes/dark-slate-home.png) |
+| Coral | ![dark coral](./themes/dark-coral-home.png) |
+| Amber | ![dark amber](./themes/dark-amber-home.png) |
+| Magenta | ![dark magenta](./themes/dark-magenta-home.png) |
+| Citrus | ![dark citrus](./themes/dark-citrus-home.png) |
+
+### Light
+
+| Accent | Shot |
+|--------|------|
+| Teal | ![light teal](./themes/light-teal-home.png) |
+| Ocean | ![light ocean](./themes/light-ocean-home.png) |
+| Forest | ![light forest](./themes/light-forest-home.png) |
+| Slate | ![light slate](./themes/light-slate-home.png) |
+| Coral | ![light coral](./themes/light-coral-home.png) |
+| Amber | ![light amber](./themes/light-amber-home.png) |
+| Magenta | ![light magenta](./themes/light-magenta-home.png) |
+| Citrus | ![light citrus](./themes/light-citrus-home.png) |
+
+## Full page folders
+
+Each folder under `themes/{mode}-{accent}/` contains:
+
+`home`, `team`, `person`, `roles`, `cycles`, `writing-desk`, `promotions`, `promotion-detail`, `consistency`, `team-performance`, `sprint-pulse`, `backfill`, `chat`, `settings`
+
+Example: [dark Coral writing desk](./themes/dark-coral/writing-desk.png) · [light Magenta settings](./themes/light-magenta/settings.png) · [dark Citrus sprint pulse](./themes/dark-citrus/sprint-pulse.png)