# Design

Visual system for Rubriq. Register: product (see PRODUCT.md). Mood: forensic
lab bench — verdicts in green ink on white paper, evidence under glass.

## Color

Strategy: **Restrained.** Pure white surface; one deep green carries the
brand; semantic colors appear only on verdicts and states. OKLCH throughout.

```css
--bg:        oklch(1.000 0.000 0);      /* pure white, no hidden warmth   */
--surface:   oklch(0.972 0.004 140);    /* panels, input pane             */
--surface-2: oklch(0.945 0.006 140);    /* wells, code/evidence beds      */
--ink:       oklch(0.230 0.015 140);    /* body text, ~13:1 on bg         */
--muted:     oklch(0.470 0.018 140);    /* secondary text, ≥4.5:1 on bg   */
--line:      oklch(0.885 0.008 140);    /* hairline borders               */
--primary:   oklch(0.480 0.100 140);    /* verdict green: buttons, links, brand */
--primary-ink: oklch(0.980 0.005 140);  /* text on primary fills          */
--accent:    oklch(0.400 0.075 255);    /* slate-blue: info, model-family badges */
/* semantic verdicts — never color-alone; always paired with icon/label   */
--good:      oklch(0.480 0.100 140);    /* shares primary hue: pass IS the brand */
--warn:      oklch(0.560 0.120 75);     /* amber: partial, proxy caveats  */
--bad:       oklch(0.505 0.160 25);     /* oxide red: failures            */
--judge:     oklch(0.400 0.075 255);    /* "requires judge" carve-outs    */
```

Dark mode: none in v1 (projector demo + long-form reading; logged trade-off).

### Instrument console (2026-07-05 redesign)

The input pane is a dark instrument console; the report stays white paper.
The split IS the brand: you operate the dark machine, it prints a light
document.

```css
--console:      oklch(0.180 0.020 150);  /* pane bg                    */
--console-2:    oklch(0.225 0.022 150);  /* input wells, dropdowns     */
--console-line: oklch(0.330 0.022 150);
--console-ink:  oklch(0.935 0.008 140);  /* ~12:1 on console           */
--console-mut:  oklch(0.720 0.020 145);  /* labels, ~6:1 on console    */
--led:          oklch(0.760 0.150 148);  /* phosphor green: LED, focus,
                                            evaluate fill (dark text)  */
--led-dim:      oklch(0.320 0.060 148);  /* selected wells             */
```

Console field labels are JetBrains Mono 11px uppercase tracked +0.09em —
instrument etching. This amends the "mono = verbatim only" rule: mono is
verbatim material in the REPORT; on the CONSOLE it is the control-label
voice. Two surfaces, two mono roles, both deliberate.

## Typography

- **UI + prose**: IBM Plex Sans (variable, self-hosted woff2). Weights
  400/500/600-650. Chosen over Inter deliberately: Plex's technical-document
  heritage fits the forensic register, and Inter is the saturated AI default.
- **Evidence, scores, code**: JetBrains Mono 400/600. Monospace is reserved
  for verbatim material — quoted evidence, scores, code, the repair prompts.
  That reservation IS the brand: if it's mono, Rubriq is quoting, not talking.
- Fixed rem scale, ratio ~1.2: 12.5 / 14 / 15 / 17 / 20 / 24 / 34px.
  Body 15px/1.6. Report headings 17-20px. Wordmark 20px 600.
- Prose ≤ 70ch. Tables/dense rows may run wider.

## Layout

- App shell: slim top bar (wordmark, engine status pill, GitHub link),
  then a two-pane split: input pane (~420px, `--surface`) left, report pane
  (white, scrollable) right. Under 960px the panes stack, input first.
- Spacing scale: 4 / 8 / 12 / 16 / 24 / 32 / 48.
- Radius: 6px controls, 10px panels. Hairline `--line` borders; shadows only
  on overlays (toast, menus).
- z-scale: dropdown 10 · sticky 20 · toast 40.

## Components

- **Score meter**: 64px mono number + thin horizontal track (not a card,
  not a ring per row). Fill color by band: ≥80 good / ≥55 warn / <55 bad,
  with the band word ("strong / mixed / weak") printed beside it.
- **Verdict row**: parameter name + source citation superscript, meter,
  verdict sentence; expands (native `<details>`) to strengths + findings.
- **Evidence quote**: `--surface-2` bed, JetBrains Mono 13px, left-set
  quotation glyph, "from the output / from your prompt" tag. Full border,
  never a side-stripe.
- **Badges**: PROXY (warn outline), NEEDS JUDGE (judge outline), task chip
  (primary outline). 11px caps, 500 weight — the one sanctioned small-caps
  use; never as section eyebrows.
- **Repair card**: title + diagnosis prose, mono prompt block with sticky
  Copy button, model-family badge (accent), technique source footnote.
- **Empty state**: teaches by doing — three sample pairs as one-click chips
  ("Sabotaged summary", "Broken code", "Confident nonsense") plus a short
  line on what local scoring can/can't judge.
- **Loading**: skeleton verdict rows in the report pane; never a centered
  spinner.
- Buttons: primary = filled `--primary` with `--primary-ink` text; secondary
  = hairline outline. All controls: visible focus ring
  (`2px solid --primary`, 2px offset), disabled at 45% with cursor guard.

## Motion

**Rule: all JS animation runs through the self-hosted Motion library**
(`web/vendor/motion.js`, v12.42.2, global `Motion`), and the surface must
use **at least 15 distinct Motion features**, each tagged `M<N>` in app.js
with the inventory at the top of the file. Current inventory: keyframe
arrays, springs, stagger, stagger-from-center, timeline sequences,
raw-value count-up, inView, scroll-linked progress, hover(), press(),
playback controls (.stop/.finished), independent transform channels,
custom bezier arrays, SVG dashoffset gauge sweep, exit-before-swap,
stagger startDelay, blur-as-material.

Energy: demo-theatrical on the report arrival (the set piece: masthead
rises, gauge sweeps + counts up, verdict rows cascade, meters spring when
seen, repair card develops into focus). Everything else stays 150-250ms.
Base ease `cubic-bezier(0.22, 1, 0.36, 1)`.

`prefers-reduced-motion`: the FX flag gates every Motion call; reduced
users get final states instantly. Content is never hidden pre-animation —
a script failure leaves a fully readable page.