feat: theme palettes + Geist font + dashboard cockpit styles

Add a `data-palette` theme axis (neutral ground) alongside mode + accent:
Warm (default), Slate, Graphite, Zinc — selectable in Settings > Appearance,
persisted per browser. Backward-compatible: `warm` needs no attribute so the
existing look is unchanged; accent (7 hues) and light/dark stay orthogonal.

Swap the UI font Inter -> Geist Variable + Geist Mono Variable (bundled offline).

Add the `.dash-*` cockpit styles finishing the redesigned Dashboard markup
already in tree (flat Today hero, KPI row, reminder queue, bento sections;
low-colour, red reserved for real failures).

packages/ui theme.ts/tokens.css/ThemeSwitcher.tsx are shared — restyles every
page. Typecheck clean; 410 tests pass.

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

apps/hq-web/package.json

@@ -10,6 +10,8 @@
     "typecheck": "tsc -p tsconfig.json"
   },
   "dependencies": {
+    "@fontsource-variable/geist": "^5.2.9",
+    "@fontsource-variable/geist-mono": "^5.2.8",
     "@sims/domain": "*",
     "@sims/ui": "*",
     "lucide-react": "^1.24.0",

apps/hq-web/src/app.css

@@ -116,10 +116,68 @@
 .hq-content { overflow-y: auto; flex: 1; padding: 4px 20px 20px; }
 .hq-scrim { display: none; }
 
-/* Dashboard section grid (Task 7). */
+/* ============================================================================
-.dash-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px; align-items: start; }
+   Dashboard cockpit (D29) — a calm command view: a "Today" hero strip, the four
-.dash-grid > section { min-width: 0; }
+   KPI stat cards, then a bento grid of section cards. Deliberately low-colour:
-@media (max-width: 1100px) { .dash-grid { grid-template-columns: 1fr; } }
+   ink + warm neutrals, teal accent only for state/links, red reserved for real
+   failures. Scoped to .dash-* so the flat house style on every other page is
+   untouched. (Replaces the old two-column .dash-grid.)
+   ============================================================================ */
+.dash-hero {
+  border: 1px solid var(--border); border-radius: var(--radius-lg);
+  background: var(--bg-raised);
+  padding: 20px 22px; margin: 6px 0 18px;
+  display: flex; gap: 24px; align-items: center; flex-wrap: wrap;
+}
+.dash-hero-l { flex: 1 1 320px; min-width: 260px; }
+.dash-hero-eyebrow { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-dim); }
+.dash-hero h1 { font-size: 24px; margin: 7px 0 4px; }
+.dash-hero p { margin: 0; color: var(--text-dim); max-width: 54ch; }
+.dash-hero-r { display: flex; flex-direction: column; gap: 12px; align-items: flex-end; }
+.dash-money { text-align: right; }
+.dash-money .k { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-dim); }
+.dash-money .v { font-size: 24px; font-weight: 600; letter-spacing: -0.01em; margin-top: 3px; }
+.dash-hero-actions { display: flex; gap: 8px; }
+@media (max-width: 760px) {
+  .dash-hero-r { align-items: flex-start; width: 100%; }
+  .dash-money { text-align: left; }
+}
+
+/* Everyone / Mine scope toggle (managerial only) */
+.dash-seg { display: inline-flex; background: var(--bg-inset); border: 1px solid var(--border); border-radius: 999px; padding: 3px; gap: 2px; margin-top: 14px; }
+.dash-seg button { border: none; background: none; cursor: pointer; font: 600 12.5px var(--font); color: var(--text-dim); padding: 5px 14px; border-radius: 999px; }
+.dash-seg button.on { background: var(--bg-raised); color: var(--text); box-shadow: var(--shadow-md); }
+
+/* Section header shared by the queue block and the bento cards */
+.dash-head { display: flex; align-items: center; gap: 10px; padding: 2px 0 10px; }
+.dash-head h3 { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: var(--text-dim); margin: 0; }
+.dash-head .count { font-family: var(--mono); font-size: 11px; color: var(--text-dim); background: var(--bg-inset); border-radius: 999px; padding: 1px 8px; }
+.dash-head a { margin-left: auto; font-size: 12.5px; font-weight: 600; color: var(--accent-strong); text-decoration: none; }
+.dash-head a:hover { text-decoration: underline; }
+[data-theme='dark'] .dash-head a { color: var(--accent); }
+
+/* the queue block sits above the bento; its DataTable keeps its own frame */
+.dash-queue { margin: 18px 0 10px; }
+.dash-cap { margin-top: 8px; font-size: 12.5px; color: var(--text-dim); }
+
+/* bento grid of read-only section cards */
+.dash-bento { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin-top: 4px; align-items: start; }
+.dash-card { background: var(--bg-raised); border: 1px solid var(--border); border-radius: var(--radius); display: flex; flex-direction: column; min-width: 0; }
+.dash-card .dash-head { padding: 13px 15px 9px; }
+/* Long lists scroll inside the card — reachable in full, never silently capped (rule 8). */
+.dash-list { display: flex; flex-direction: column; max-height: 304px; overflow-y: auto; }
+.dash-empty { padding: 14px 15px 16px; color: var(--text-dim); font-size: 13px; border-top: 1px solid var(--border); }
+.dash-row { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; padding: 9px 15px; border-top: 1px solid var(--border); background: none; color: inherit; font: inherit; }
+button.dash-row { cursor: pointer; }
+button.dash-row:hover { background: var(--accent-soft); }
+.dash-row .rc { min-width: 0; flex: 1; }
+.dash-row .t { display: block; font-size: 13.5px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.dash-row .s { display: block; font-size: 12px; color: var(--text-dim); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.dash-row .r { text-align: right; white-space: nowrap; flex-shrink: 0; }
+.dash-row .amt { display: block; font-variant-numeric: tabular-nums lining-nums; font-size: 13px; font-weight: 600; }
+.dash-row .sub { display: block; font-size: 11.5px; color: var(--text-dim); margin-top: 1px; }
+
+@media (max-width: 900px) { .dash-bento { grid-template-columns: 1fr; } }
 
 /* Login — split panel (Task 13). */
 .login-wrap { height: 100vh; display: flex; align-items: stretch; justify-content: center; }

apps/hq-web/src/main.tsx

@@ -1,7 +1,7 @@
 import { createRoot } from 'react-dom/client'
 import { HashRouter, Navigate, Route, Routes } from 'react-router-dom'
-import '@fontsource-variable/inter'
+import '@fontsource-variable/geist'
-import '@fontsource-variable/jetbrains-mono'
+import '@fontsource-variable/geist-mono'
 import '../../../packages/ui/src/tokens.css'
 import './app.css'
 import { initTheme, ToastProvider } from '@sims/ui'

apps/hq-web/src/pages/Settings.tsx

@@ -385,7 +385,7 @@ function AppearancePanel() {
     <div>
       <h2>Appearance</h2>
       <p className="wf-page-desc">
-        Mode and accent are stored in this browser only — every signed-in user picks their own.
+        Palette, accent and mode are stored in this browser only — every signed-in user picks their own.
       </p>
       <ThemeSwitcher />
     </div>

package-lock.json

@@ -41,6 +41,8 @@
       "name": "@sims/hq-web",
       "version": "0.1.0",
       "dependencies": {
+        "@fontsource-variable/geist": "^5.2.9",
+        "@fontsource-variable/geist-mono": "^5.2.8",
         "@sims/domain": "*",
         "@sims/ui": "*",
         "lucide-react": "^1.24.0",
@@ -511,6 +513,24 @@
         "node": ">=18"
       }
     },
+    "node_modules/@fontsource-variable/geist": {
+      "version": "5.2.9",
+      "resolved": "https://registry.npmjs.org/@fontsource-variable/geist/-/geist-5.2.9.tgz",
+      "integrity": "sha512-TP+QSBG3wxKGPE33CbMy/L0Nu3qvJ6Fy81Yc4LnQ95xH+i+cfEp8fyU8/kfV14YwszxIFPhnoMTbjL71waVpyQ==",
+      "license": "OFL-1.1",
+      "funding": {
+        "url": "https://github.com/sponsors/ayuhito"
+      }
+    },
+    "node_modules/@fontsource-variable/geist-mono": {
+      "version": "5.2.8",
+      "resolved": "https://registry.npmjs.org/@fontsource-variable/geist-mono/-/geist-mono-5.2.8.tgz",
+      "integrity": "sha512-KI5bj+hkkRiHttYHmccotUZ80ZuZyai+RwI1d7UId0clkx/jXxlo8qYK8j54WzmpBjtMoEMPyllV7faDcj+6RA==",
+      "license": "OFL-1.1",
+      "funding": {
+        "url": "https://github.com/sponsors/ayuhito"
+      }
+    },
     "node_modules/@fontsource-variable/inter": {
       "version": "5.2.8",
       "license": "OFL-1.1",

packages/ui/src/ThemeSwitcher.tsx

@@ -1,5 +1,8 @@
 import { useState } from 'react'
-import { ACCENTS, getAccent, getThemeMode, setAccent, setThemeMode, type Accent } from './theme'
+import {
+  ACCENTS, PALETTES, getAccent, getPalette, getThemeMode,
+  setAccent, setPalette, setThemeMode, type Accent, type Palette,
+} from './theme'
 
 const SWATCH: Record<Accent, string> = {
   teal: '#115e59',
@@ -11,8 +14,19 @@ const SWATCH: Record<Accent, string> = {
   amber: '#b97e10',
 }
 
+/** A two-tone paper/ink chip that previews each palette's neutral ground. */
+const PALETTE_SWATCH: Record<Palette, string> = {
+  warm: 'linear-gradient(135deg, #fafaf7 50%, #1a1a17 50%)',
+  slate: 'linear-gradient(135deg, #f4f5f8 50%, #191c22 50%)',
+  graphite: 'linear-gradient(135deg, #eef1f1 50%, #14191a 50%)',
+  zinc: 'linear-gradient(135deg, #fafafa 50%, #18181b 50%)',
+}
+const PALETTE_LABEL: Record<Palette, string> = {
+  warm: 'Warm', slate: 'Slate', graphite: 'Graphite', zinc: 'Zinc',
+}
+
 /** Just the light/dark toggle — a single small button for the top bar. The full
- *  accent picker lives in Settings → Appearance (keeps the header uncluttered). */
+ *  palette + accent picker lives in Settings → Appearance (keeps the header uncluttered). */
 export function ModeToggle() {
   const [mode, setMode] = useState(getThemeMode())
   return (
@@ -29,37 +43,66 @@ export function ModeToggle() {
   )
 }
 
-/** Compact mode toggle + accent picker; drops into any header (used in Settings). */
+/** Palette + accent + mode picker; drops into any header (used in Settings). The
+ *  three axes are independent — neutral ground, accent hue, and light/dark. */
 export function ThemeSwitcher() {
   const [mode, setMode] = useState(getThemeMode())
   const [accent, setAccentState] = useState(getAccent())
+  const [palette, setPaletteState] = useState(getPalette())
 
   return (
     <div className="wf-themer" title="Theme">
-      {ACCENTS.map((a) => (
+      <div className="themer-row">
+        <span className="themer-lbl">Palette</span>
+        {PALETTES.map((p) => (
+          <button
+            key={p}
+            type="button"
+            className={`pchip${p === palette ? ' active' : ''}`}
+            aria-pressed={p === palette}
+            onClick={() => {
+              setPalette(p)
+              setPaletteState(p)
+            }}
+          >
+            <span className="pswatch" style={{ background: PALETTE_SWATCH[p] }} aria-hidden />
+            {PALETTE_LABEL[p]}
+          </button>
+        ))}
+      </div>
+
+      <div className="themer-row">
+        <span className="themer-lbl">Accent</span>
+        {ACCENTS.map((a) => (
+          <button
+            key={a}
+            type="button"
+            className={`swatch${a === accent ? ' active' : ''}`}
+            style={{ background: SWATCH[a] }}
+            aria-label={`Accent ${a}`}
+            aria-pressed={a === accent}
+            onClick={() => {
+              setAccent(a)
+              setAccentState(a)
+            }}
+          />
+        ))}
+      </div>
+
+      <div className="themer-row">
+        <span className="themer-lbl">Mode</span>
         <button
-          key={a}
           type="button"
-          className={`swatch${a === accent ? ' active' : ''}`}
+          className="mode"
-          style={{ background: SWATCH[a] }}
-          aria-label={`Accent ${a}`}
           onClick={() => {
-            setAccent(a)
+            const next = mode === 'light' ? 'dark' : 'light'
-            setAccentState(a)
+            setThemeMode(next)
+            setMode(next)
           }}
-        />
+        >
-      ))}
+          {mode === 'light' ? '☾ Dark' : '☀ Light'}
-      <button
+        </button>
-        type="button"
+      </div>
-        className="mode"
-        onClick={() => {
-          const next = mode === 'light' ? 'dark' : 'light'
-          setThemeMode(next)
-          setMode(next)
-        }}
-      >
-        {mode === 'light' ? '☾ Dark' : '☀ Light'}
-      </button>
     </div>
   )
 }

packages/ui/src/theme.ts

@@ -8,8 +8,14 @@ export type ThemeMode = 'light' | 'dark'
 export const ACCENTS = ['teal', 'indigo', 'blue', 'emerald', 'violet', 'rose', 'amber'] as const
 export type Accent = (typeof ACCENTS)[number]
 
+/** Neutral ground. `warm` is the base (no attribute needed); the rest map to
+ *  `[data-palette=…]` overrides in tokens.css. Orthogonal to mode + accent. */
+export const PALETTES = ['warm', 'slate', 'graphite', 'zinc'] as const
+export type Palette = (typeof PALETTES)[number]
+
 const MODE_KEY = 'ui.themeMode'
 const ACCENT_KEY = 'ui.accent'
+const PALETTE_KEY = 'ui.palette'
 
 export function getThemeMode(): ThemeMode {
   return localStorage.getItem(MODE_KEY) === 'dark' ? 'dark' : 'light'
@@ -20,6 +26,11 @@ export function getAccent(): Accent {
   return (ACCENTS as readonly string[]).includes(stored ?? '') ? (stored as Accent) : 'teal'
 }
 
+export function getPalette(): Palette {
+  const stored = localStorage.getItem(PALETTE_KEY)
+  return (PALETTES as readonly string[]).includes(stored ?? '') ? (stored as Palette) : 'warm'
+}
+
 export function setThemeMode(mode: ThemeMode): void {
   localStorage.setItem(MODE_KEY, mode)
   document.documentElement.dataset['theme'] = mode
@@ -30,8 +41,14 @@ export function setAccent(accent: Accent): void {
   document.documentElement.dataset['accent'] = accent
 }
 
+export function setPalette(palette: Palette): void {
+  localStorage.setItem(PALETTE_KEY, palette)
+  document.documentElement.dataset['palette'] = palette
+}
+
 /** Call once before first render. */
 export function initTheme(): void {
   document.documentElement.dataset['theme'] = getThemeMode()
   document.documentElement.dataset['accent'] = getAccent()
+  document.documentElement.dataset['palette'] = getPalette()
 }

packages/ui/src/tokens.css

@@ -8,8 +8,8 @@
    ================================================================ */
 
 :root {
-  --font: 'Inter Variable', 'Segoe UI', system-ui, -apple-system, sans-serif;
+  --font: 'Geist Variable', 'Segoe UI', system-ui, -apple-system, sans-serif;
-  --mono: 'JetBrains Mono Variable', 'Cascadia Mono', Consolas, monospace;
+  --mono: 'Geist Mono Variable', 'Cascadia Mono', Consolas, monospace;
 
   --radius-sm: 4px;
   --radius: 6px;
@@ -85,6 +85,37 @@
 [data-theme='dark'][data-accent='rose']    { --accent: #e57ba3; --accent-strong: #d4608c; }
 [data-theme='dark'][data-accent='amber']   { --accent: #d9a247; --accent-strong: #c08a2e; }
 
+/* ================= palette (neutral ground) =================
+   A second theme axis alongside mode + accent: the neutral greys. `warm` (the
+   default, defined in the base light/dark blocks above) needs no attribute; the
+   others override only the neutral tokens, per mode. Accent stays orthogonal, and
+   the soft state colours are color-mix over --bg-raised/--accent so they follow.
+   Applied as <html data-palette=…> by theme.ts; selectable in Settings → Appearance. */
+[data-palette='slate'][data-theme='light'] {
+  --bg: #f4f5f8; --bg-raised: #ffffff; --bg-hover: #eceef3; --bg-inset: #eef0f4;
+  --border: #e1e4ea; --border-strong: #ccd1da; --text: #191c22; --text-dim: #5a616d; --scrollbar: #ccd1da;
+}
+[data-palette='slate'][data-theme='dark'] {
+  --bg: #0f1217; --bg-raised: #171b21; --bg-hover: #1f242b; --bg-inset: #0b0e12;
+  --border: #262c34; --border-strong: #363d47; --text: #e6e9ef; --text-dim: #98a0ac; --scrollbar: #363d47;
+}
+[data-palette='graphite'][data-theme='light'] {
+  --bg: #f3f5f5; --bg-raised: #ffffff; --bg-hover: #e9eded; --bg-inset: #eef1f1;
+  --border: #e0e5e5; --border-strong: #ccd3d3; --text: #14191a; --text-dim: #566060; --scrollbar: #ccd3d3;
+}
+[data-palette='graphite'][data-theme='dark'] {
+  --bg: #101315; --bg-raised: #191d1f; --bg-hover: #222729; --bg-inset: #0b0e0f;
+  --border: #272d2f; --border-strong: #383f42; --text: #e7eaeb; --text-dim: #929a9c; --scrollbar: #383f42;
+}
+[data-palette='zinc'][data-theme='light'] {
+  --bg: #fafafa; --bg-raised: #ffffff; --bg-hover: #f1f1f2; --bg-inset: #f4f4f5;
+  --border: #e4e4e7; --border-strong: #d1d1d6; --text: #18181b; --text-dim: #70707a; --scrollbar: #d1d1d6;
+}
+[data-palette='zinc'][data-theme='dark'] {
+  --bg: #0b0b0d; --bg-raised: #161618; --bg-hover: #202023; --bg-inset: #0e0e10;
+  --border: #26262a; --border-strong: #37373d; --text: #ededf0; --text-dim: #9a9aa3; --scrollbar: #37373d;
+}
+
 /* ================= base ================= */
 * { box-sizing: border-box; }
 html, body, #root { height: 100%; margin: 0; }
@@ -92,7 +123,6 @@ body {
   background: var(--bg);
   color: var(--text);
   font: 400 14px/1.5 var(--font);
-  font-feature-settings: 'cv05', 'cv11';
   -webkit-font-smoothing: antialiased;
   transition: background var(--speed) ease, color var(--speed) ease;
 }
@@ -355,7 +385,22 @@ table.wf tbody tr.tone-ok:hover td { filter: brightness(0.97); }
 }
 
 /* ================= theme switcher ================= */
-.wf-themer { display: flex; align-items: center; gap: 6px; }
+.wf-themer { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
+.wf-themer .themer-row { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
+.wf-themer .themer-lbl {
+  width: 62px; flex: none; font-size: 11px; font-weight: 700;
+  text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-dim);
+}
+.wf-themer .pchip {
+  display: inline-flex; align-items: center; gap: 7px;
+  border: 1px solid var(--border); background: var(--bg-raised); color: var(--text-dim);
+  border-radius: 999px; padding: 4px 13px 4px 5px; cursor: pointer;
+  font: 600 12.5px var(--font);
+  transition: border-color var(--speed), color var(--speed), background var(--speed);
+}
+.wf-themer .pchip:hover { border-color: var(--border-strong); color: var(--text); }
+.wf-themer .pchip.active { border-color: var(--accent); color: var(--text); background: var(--accent-soft); }
+.wf-themer .pswatch { width: 18px; height: 18px; border-radius: 5px; border: 1px solid var(--border-strong); flex: none; }
 .wf-themer .swatch {
   width: 16px; height: 16px; border-radius: 50%; cursor: pointer;
   border: 2px solid transparent; padding: 0;