# Dashboard visual directions — static HTML samplers

Three standalone, fully self-contained mocks of the SAME dashboard.
No frameworks, no build step, no external assets — embedded CSS only.
Open directly via `file://`. Each supports light AND dark via
`prefers-color-scheme` (verify by toggling devtools scheme emulation).

- `dashboard-primer.html` — 1 Curated Primer (light-first)
- `dashboard-control.html` — 2 Control Room (dark-first)
- `dashboard-swiss.html` — 3 Swiss Flat (light-first)

All three carry IDENTICAL content structure (the `<body>` markup is
byte-identical apart from the sampler number/label in the note line
and footer), so the comparison is purely visual.

## Content model (per the approved hierarchy)

- Zone 1 (top): advisor conversation composer — the first, most
  prominent control — plus a believable recent exchange (user
  question, advisor answer with a suggested task, follow-up).
- Zone 2 (one small scroll below): "Needs a human" items tiered ABOVE
  queue health — a completion awaiting review, a turn-cap parked task
  to wake, an open question to answer; then running / stuck / queued
  counts and saddle states.
- Zone 3 (ambient, reduced density): notes, latest discoveries,
  active tasks table and activity timeline — collapsed `<details>`
  where sensible (tasks and activity start collapsed; notes and
  discoveries open).

Sample data uses the real app's vocabulary: statuses
draft / queued / assigned / working / blocked / review_requested /
suspended / done / failed; saddle states idle / busy / offline;
blocks review / question; turn-cap parks. Task titles reference real
recent fleet work. Sections are deliberately uneven — one saddle
offline, one task with no latest progress, a sparse notes list —
because perfection reads fake.

## Direction 1 — Curated Primer

GitHub/Primer lineage, disciplined, light default. Cards on a sunken
page, 8px grid, 8px radius, tinted status pills, the existing blue as
accent. The natural evolution of today's `app.css`.

:root (light):
```
--surface-sunken #f6f8fa   --surface #ffffff    --surface-inset #eff2f5
--ink #1f2328               --ink-muted #59636e  --ink-faint #6e7681
--line #d1d9e0              --line-soft #e4eaef
--accent #0969da            --accent-surface #ddf4ff
--success #1a7f37           --warning #9a6700    --danger #cf222e
--radius 8px
```
Dark variant: `--surface-sunken #0d1117`, `--surface #151b23`,
`--surface-inset #1c2430`, `--ink #e6edf3`, `--ink-muted #9198a1`,
`--ink-faint #6e7681`, `--line #3d444d`, `--line-soft #262c36`,
`--accent #4493f8`, `--accent-surface #121d2f`, `--success #3fb950`,
`--warning #d29922`, `--danger #f85149`.

Status = tinted pill pairs: working/blocked/queued on yellow tints,
done/progress green tints, failed red tint, review orange tint,
question blue tint, parked/suspended neutral. Type: system-ui 15px.
Shadows: none (1px borders only).

## Direction 2 — Control Room

Dark-first, mono-forward, mission-console restraint. Quiet cold
neutrals; status colour carries the meaning; labels and numerals in
mono. Status reads as small outline capsules in the status hue —
colour IS the signal, fill stays quiet. Light variant is a working
console on white, not an afterthought.

:root (dark, default):
```
--bg #0f1317   --surface #151a20   --raise #1c232b
--ink #c9d4de  --dim #7e8b98       --faint #525e6a
--rule #262e38 --rule-hi #394450
--run #4cc38a  --warn #f5b452  --crit #ef6460  --info #58a6ff
--accent #58a6ff  --radius 4px
--mono ui-monospace …  --sans system-ui …
```
Light variant: `--bg #eef1f4`, `--surface #ffffff`, `--raise #f4f6f8`,
`--ink #1b2530`, `--dim #54626f`, `--faint #75828e`, `--rule #d7dee4`,
`--rule-hi #b4c0ca`, `--run #10735a`, `--warn #8f5b00`,
`--crit #c3362f`, `--info #0a5dc2`.

Status semantics: run=green (running/done/busy), warn=amber
(queued/blocked/review/stuck), crit=red (failed), info=blue
(interactive/question). Type: sans 14px body, mono for labels,
metrics, meta and times. Radius 4px; no shadows; saddle states are
tiny square lamps (filled / outline / dashed).

## Direction 3 — Swiss Flat

Strict grid, typographic hierarchy, one strong accent, no shadows, no
ornament. Structure lines are INK, not grey; the frame is the design.
A hard left rail carries brand + zone labels; metrics are oversized
light numerals (weight 200). Status is typography: weight and colour
in near-black / greys, with red reserved for failure and the accent.

:root (light):
```
--paper #fdfdfb  --ink #111111  --grey-1 #6b6b6b  --grey-2 #82827e
--rule #111111   --rule-thin #d9d9d6
--red #e2231a    --radius 0
--font "Helvetica Neue" …  --mono ui-monospace …
```
Dark variant: `--paper #121212`, `--ink #f0f0ec`, `--grey-1 #a8a8a4`,
`--grey-2 #7c7c78`, `--rule #f0f0ec`, `--rule-thin #2e2e2c`,
`--red #ff4438`.

Status: failed and the single accent share red; everything else is
typographic (bold caps tags, question underlined in ink). Links are
ink with a thin grey underline; red appears on hover and on the
primary button. Radius 0, no shadows, 2px structural rules.

## Anti-slop checklist (honoured by all three)

No purple-blue gradients, no glassmorphism, no oversized drop
shadows, no marketing hero, no emoji decoration, no fake-perfect
symmetry. Status palettes avoid the blue/purple wash; accent use is
rationed.

## Verification performed

- Files open standalone via `file://` (Chromium 154 headless).
- Light/dark flip verified per file via forced scheme: page
  backgrounds and every status colour change to the intended tokens;
  content extents identical between schemes (no reflow breakage).
- The three `<body>` blocks verified identical modulo sampler label.
- 390px mobile: no horizontal overflow; all zones render.