larp-quant-agent/.interface-design/system.md

$QUANT Terminal — interface design system

Direction: "Carbon Desk" — a serious institutional quant trading terminal (Linear × Bloomberg). Dark, dense, calm. The product is the live decision pipeline; the agent committee → verdict is the hero. Reading order everywhere: CALL → WHY → EVIDENCE.

Feel: precise, quiet, instrument-like. No marketing voice. Craft whispers.

Depth strategy

Borders + surface lightness — NO shadows. Elevation by lightness:

• page --color-paper #0B0C0E → panel chrome --color-panel #111316 → raised/hover/active --color-panel-2 #181B20. Data cells & wells recede to --color-inset #0E0F12.
• Borders are light-on-dark rgba: line .10 (standard), line-soft .06 (dividers), line-strong .16 (emphasis / zero-axis). line-amber .45 only for the verdict accent.
• Bar/ring tracks use --color-track rgba(255,255,255,.09) — a carved channel, never line-soft.

Color

• One accent: amber --color-accent #FFB020 — reserved for "the call" (verdict accent strip, L4 pipeline dot, active tab, PAPER chip). Do not spread it.
• Semantic only: long #2BD974, short #F2444D (+ -dim 14% fills). Never decorative.
• Direction must never be color-only — pair with a glyph/sign (▲ ▼ —, +/−).

Text hierarchy (all AA on panel)

--color-bone #E8EAED primary · --color-bone-dim #AAB1BA secondary/prose · --color-muted #828A94 labels · --color-faint #727983 captions/ticks. Rule: value=bone, supporting prose=bone-dim, labels=muted, codes/units/ticks=faint.

Type

• Display/UI Geist, data Geist Mono. All numbers mono + .tnum (tabular).
• Scale tokens: --text-micro 10px · --text-label 11px · --text-read 12px · --text-data 13px. Big display via inline clamp() (verdict glyph clamp(3rem,6vw,5rem)).
• Labels: .label (11px, .14em) and .label-sm (10px, .1em) are the ONLY label recipes. Two letter-spacings, not eight.
• Weight: bold (700) reserved for display (verdict glyph, masthead, QUANT). Data = 500/medium.

Spacing & radius

• 4px base. Panel inset = px-4 py-3. Hairline grids via gap-px over bg-line-soft.
• Radius scale 2/4/6/10. Panels rounded-md + overflow-hidden; nested wells clip to parent.

Key patterns

• Panel — rounded-md border border-line bg-panel overflow-hidden; header = .label + faint meta. Accent panel adds a 2px amber top strip as a child div (clean rounded corners).
• Cell — recessed bg-inset, .label-sm over .tnum mono value; optional sub (agent tag) and a thin --color-track bar.
• DivergeBar — the signature: shared zero-axis; LONG fills right (green), SHORT left (red), SKIP a centred muted tick. Conviction = length. Committee ends in a NET LEAN row whose amber marker is the aggregate — visually ties votes → verdict.
• VerdictHero — full-width band, the hero: clamp() decision glyph in dir color + arrow, quorum ticks, big ConfidenceRing, then size/TP/SL/RR cells. Amber accent strip.
• Pipeline — honest L1→L6 with status dots (live=green, neutral=muted, the call=amber on L4, off-terminal=faint). Never overclaim what the page doesn't do.

Terminal layout (workspace)

The terminal is a multi-pane workspace, not tabs — everything visible at once like a real desk. Order: status bar → masthead + coin tabs → reading guide → VERDICT band on top (the call, full width) → 3-column grid lg:grid-cols-[280px_minmax(0,1fr)_360px] (stacks to 1 col below lg):

• Left — PipelineRail (vertical L1→L6) + Market + Indicators stat cells (the "numbers").
• Center — the candlestick chart (the dominant pane).
• Right — AgentGraph (signature) + Committee analytics list.

AgentGraph (components/viz/AgentGraph.tsx) is hub-and-spoke: 4 agent nodes feed one central verdict node; edge colour = vote (long/short/skip), edge weight + node fill = conviction; the centre shows decision + confidence. Honest (exactly the 4 real agents), animated between states.

Charts

Charts come from bklit-ui (shadcn registry @bklit, built on @visx + motion), installed as source under src/components/charts/. The price panel uses the candlestick-chart (src/components/viz/PriceCandles.tsx) fed by real Hyperliquid OHLC, themed to Carbon Desk: positiveFill=var(--color-long), negativeFill=var(--color-short). Dark chart vars are activated via class="dark" on <html>. Add more charts with npx shadcn@latest add @bklit/<slug>.

Two gotchas (already handled): (1) the alpha @visx ParentSize fails to size under React 19 — candlestick-chart.tsx was patched to use a useElementSize ResizeObserver hook instead. (2) Keep the global * { min-width: 0 } reset inside @layer base, or it (unlayered) beats Tailwind's min-w-* utilities and breaks flex-wrap layouts.

States

Seeded-vs-live is flagged (verdict shows a "seed · awaiting live" chip when live===false); StatusBar surfaces stale/error (DATA STALE when fetch errors or ago>40s); footer copy degrades the "live" claim accordingly. Global amber :focus-visible ring on all interactives.