Instrument-style dashboard. Hard 2px solid #1a1a1a borders everywhere. Pastel fills — never gradients, never translucency. Mono fonts for numbers. No drop shadows except 4px offset on tooltips. The dashboard must read like precision test equipment, not a consumer web app.
| Element | Font | Size | Weight | Other |
|---|---|---|---|---|
| stat-value | --mono | 16px | 800 | font-variant-numeric: tabular-nums |
| stat-label | --mono | 9px | 700 | uppercase, 0.05em letter-spacing |
| pill | --mono | 10px | 700 | — |
| body | --mono | 12px | 400 | all chrome is mono — no sans-serif anywhere |
| all numerics | --mono | varies | — | font-variant-numeric: tabular-nums |
--mono = ui-monospace, "SF Mono", Menlo, monospace
border: 2px solid #1a1a1a; background: #fff; padding: 10px 12px 8px;border: 2px solid #1a1a1a; padding: 1px 6px; font-weight: 700; font-size: 10px; background: #f5f4ee;height: 4px; background: #f5f4ee; border: 1px solid #1a1a1a; fill: background: #80deea;background: #1a1a1a; color: #f5f4ee; 4px solid box-shadow offset; mono fontllm SSE event, keyed by last_call_ts. Decays over 60s.| Behavior | Detail |
|---|---|
| Polling interval | 5s for all /api/* endpoints |
| SSE | /stream for live llm + nvidia-rpm events; auto-reconnects |
| Per-card pulse | On llm SSE event matching NIM model, optimistic rpm_used increment before next broadcast |
| RPM window | 60-second rolling window; timer badge flashes when ≤10s remain |
| Idle-hide | Non-seeded series hidden when no data in window; NIM cards always render (seeded) |
| Stale dot | Shown on NIM card when last_call_ts >5 min ago |
| Boot retry | Exponential backoff: 0.5s, 1s, 2s, 4s, 8s until first success, then steady 5s |
| Rule | Reason |
|---|---|
| No emojis anywhere | Use Font Awesome Pro Thin (fat prefix) icons or text symbols only |
| No drop shadows except 4px brutalist offset on tooltips | Shadows read as consumer UI, not instrument panel |
| No red/amber/green outside thermal | Those hues are reserved for temperature state — using elsewhere creates false urgency |
| No CDN-loaded resources | FA Pro bundled locally; no external fonts, scripts, or stylesheets |
| No gradients on data bars | Solid fill only; gradients obscure value at small heights |
Two interaction surfaces: header dropdowns (anchored, non-modal, no scrim) and full overlays (centred, scrimmed, scroll-locked). Both are mono, 2px ink-bordered, pastel-or-white filled. Default state of every popup is closed; opened only by its trigger; closed by click-outside, by trigger re-click, and (overlays only) by Escape.
| Prop | nav-popup (hamburger) | settings-popup (gear) |
|---|---|---|
| position | absolute; top: 100%; right: 18px; margin-top: 4px | absolute; top: 100%; right: 18px; margin-top: 4px |
| min-width | 200px | 240px |
| surface | #fff · 2px solid #1a1a1a · padding 10px 12px 12px | #fff · 2px solid #1a1a1a · padding 10px 12px 12px |
| z-index | 50 | 50 |
| trigger | .hamburger (left) | .gear (right) |
| dismiss | document click outside .nav-popup/.hamburger (resp. .settings-popup/.gear); re-click toggles | |
| section title | h3: 9px · 800 · uppercase · letter-spacing 0.08em · #6b6b6b · margin 8px 0 4px (first-child margin-top 0) | |
| row (nav-link) | flex · gap 6px · padding 4px 8px · 11px · 2px solid transparent → hover border #1a1a1a + bg #f5f4ee; leading i 10px #6b6b6b width 14px centred | |
| Part | Spec |
|---|---|
| overlay (.fl-overlay) | position: fixed; inset: 0; background: rgba(26,26,26,0.45); display:flex; align-items:flex-start; justify-content:center; padding: 32px 16px; z-index: 60; overflow-y: auto |
| modal (.fl-modal) | background #f5f4ee; 2px solid #1a1a1a; width: min(1100px, 96vw); max-width: 96vw; mono |
| head (.fl-head) | sticky; top: 0; z-index: 2; bg #fff; 2px bottom border; padding 12px 16px; title h2 14px/900 with muted leading icon |
| close (.fl-x) | borderless floating glyph (fa-xmark) — 15px, color #6b6b6b → hover #1a1a1a; NO border, NO box. Reload (.fl-btn) is the same borderless treatment. |
| dismiss | click scrim, click .fl-x, or Escape |
Header collapses; dropdowns keep their anchor but width tracks viewport. Overlays keep the 16px gutter (padding: 32px 16px) so min(1100px, 96vw) becomes full-bleed-minus-gutter. Card grids inside overlays reflow to one column. Footer status bar (≥1100px only) is hidden.
| Control | Default | Behaviour |
|---|---|---|
| Hamburger menu | closed | Toggles nav-popup (navigation + docs links). Click-outside closes. |
| Gear / settings | closed | Toggles settings-popup (live status, 24h totals, display toggles, Cache, routing/federation, storage backends, quick links). Click-outside closes. |
| Display toggles | on | Per-section show/hide checkboxes inside settings-popup; persisted to localStorage. |
| Hard Refresh | idle | Cache section: clears Cache Storage + unregisters service workers, reloads with ?_hr= bust. Spinner while running. |
| Routing / Federation | closed | button.nav-link (.routing-open) opens the matching overlay; hover bg #f5f4ee, no border-fill. |
| Refresh glyph | idle | Borderless fa-arrows-rotate; manual re-fetch on top of the 5s poll. |
Buttons styled as nav-link rows must look identical to anchor nav-links (same padding, transparent 2px border, hover fill) — a control never advertises itself as a different species than the link beside it.
Pills are 2px ink-bordered, 10px/700 mono, ~1px 6px padding. Fill encodes meaning — never decorative. White fill = neutral/identifier (port, address, key-count). Pastel fill = typed value.
| Class | Fill | Meaning |
|---|---|---|
| .fl-pill.mem | #a5d6a7 green | in-memory / resident |
| .fl-pill.kind | #bdbedc lilac | engine kind (llama.cpp / vllm / nim) |
| .fl-pill.ctx | #80deea cyan | context window (white when estimated: .ctx.est) |
| .fl-pill.best / .tier | #ffd54f amber | top-ranked / routing tier |
| .fl-pill.engine | #ffcc80 orange | backend engine label |
| .fl-pill.nim-vision / vision | #bdbedc lilac | vision / multimodal capable |
| .fl-pill.warn | #ef9a9a coral | degraded / not serving |
| .fl-pill.port / .addr / .nim-keys / .hostmem | #fff white | neutral identifier (right-aligned via margin-left:auto for hostmem) |
Filled-black is reserved for the bare .method default only; typed methods take their pastel.
| Component | Geometry | Encoding |
|---|---|---|
| Trend | height 220px, width responsive (ResizeObserver), D3 viewBox | multi-series lines, stroke-width 1.6, per-series color; axes 1px #1a1a1a; hover crosshair 1.5; idle series hidden |
| NimSparkline | viewBox 280×56 (fills ~50% of card body) | single line stroke-width 1.6 solid; NO axes/tooltip — too noisy at this size |
| HeatStrip | stacked horizontal bars per GPU host + fleet aggregate | UTIL = thermal ramp (#c5e1a5→#ffd54f→#ef9a9a→#c62828); MEM = #d1c4e9; POWER = #80cbc4; label row UPPER/value |
| BarList | label (min-width 140px) + track | track fill default #bdbedc, overridable per row; value right-aligned tabular-nums |
| RpmGauge | 20px tall bar | fill width = rpm/cap; width+background transition 400ms linear; flashes when ≤10s left in window |
| RoutingViz | SVG class="flow", viewBox responsive, preserveAspectRatio xMidYMin | node rects rx 3, 2px #1a1a1a; source node #ffd54f; connectors #b8b6ad 1.5 with arrow marker; edge labels mono 12px |
All viz obeys the palette rules: thermal hues only for temperature/util, solid fills (no gradients on bars), 2px ink borders on boxed nodes. Numbers are mono with tabular-nums.
gpumon is the primary spec. For surfaces gpumon does not define — full-text search, dense result tables, document detail/preview, and large multi-tile stats/chart pages — adopt the patterns below from the postcrime "Securities Anomalies" site (postcrime.atsignhandle.xyz, internal name "Parque Towers Design System"). It is the same brutalist DNA tuned for data-density and reading.
| Token | Light | Note |
|---|---|---|
| --bg | #fafafa | page (dark mode #121212) |
| --fg | #1a1a1a | ink |
| --border | #d0d0d0 | softer than gpumon's #1a1a1a — table/detail rules |
| --accent | #4a90d9 blue | links, active states, focus ring |
| --font-serif | 'Playfair Display', Georgia, serif | page h1 only — editorial masthead |
| --font-mono | 'JetBrains Mono', ui-monospace | everything else |
| root zoom | 0.9 | global density scale |
Reconciliation: keep gpumon's hard #1a1a1a 2px borders and all-mono chrome as the default. Borrow postcrime's softer #d0d0d0 rules only inside dense data tables, and the serif strictly for a page masthead h1.
| Element | Spec |
|---|---|
| SearchInput | FTS5; fires at 3+ chars; debounced; POST /api/search; mono field, 2px border, accent focus |
| FilterBadges | toggle pills above results (source / sub-type / statute / scheme); active = filled pastel; multi-select AND |
| Result table | dense rows, #d0d0d0 1px separators, mono; row tap → document detail |
Storage-backend health chips (.ns-chip: DB / SeaweedFS) poll /api/health-summary while the gear popup is open; a status .dot goes err (down) / unknown (null); latency shown inline. Same anchored-popup mechanics as gpumon (.ns-nav-popup / .ns-settings-popup, click-outside dismiss).
Full overlay (same scrim + centred-card pattern as gpumon's .fl-overlay) hosting a streamed PDF (HTTP Range) beside extracted text; statute / party / scheme pills in the header.
This is the reference for any gpumon page that outgrows a single card grid.
| Aspect | Spec |
|---|---|
| Grid | grid-template-columns: repeat(12, 1fr); tiles span .full=12 / .half=6 / .third=4; collapse all to span 12 at ≤1100px |
| Tile tints | card-mint #f0fff4/#2d8a56 · card-sky #f0f4ff/#4a72b0 · card-cream #fffbf0/#b08a4a · card-rose #fff0f0/#d4686a (bg/border) |
| StatusChip | small state pill (ok / warn / down) inside tiles |
| Charts | D3: GpumonTrend, GpumonBarList, CalendarFilings (heat-calendar), ForceEntities (force-directed graph), SankeySchemeOutcome (flow), PackSchemeAmount (circle-pack), Benford leading-digit viz |
| Coverage bars | .cov-bars 2-col grid → 1-col at ≤900px |
gpumon: 1100px (footer/grid), 720px (header collapse), 560px (tight). postcrime adds 960px, 900px, 768px, 640px plus orientation queries for the heavier data pages. Use gpumon's three for chrome; reach for postcrime's finer set only on data-table / stats pages.