clanker-saddle/mocks

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.