Design system

Evidence Review is the visual language of Sealant's code-review surface, extracted as a reusable system. It is the set of tokens, the type split, the four-color discipline, the components, and the rules that keep the product a review tool instead of a dashboard. The whole system reduces to one rule: show the reviewer the code and its proof in the same place, in plain language, and let them decide.

The reference surface is desktop at 1440 × 900, set in Inter and JetBrains Mono, with four semantic accents.

Principles

Color

A warm near-white canvas, near-black text, pale gray rules. Four accents carry meaning and nothing decorative does.

Surfaces and neutrals

Text and rule ramp

Semantic accents — one meaning each

Diff tints — edge marks, never floods

A 2px colored edge plus a faint wash carries the diff signal. Saturated blocks would render a verdict before the reviewer decides.

Typography

One neutral sans for everything human; monospace reserved for everything the machine observed or executed. The split is semantic, not decorative.

The rule is simple. Sans signals human language — a label, an expectation, a judgment. Mono signals a value the system observed or executed, such as $50.97, a9f3c20, or round.ts.

Scale

Spacing and surfaces

An 8-pixel rhythm. Corners are square or at most 3px. Whitespace shows relationships; it is never empty padding.

Radius is disciplined to two values, with pills excluded entirely.

Status

Four states triage the queue. A colored dot plus a word — never a glowing badge, never a tinted row.

Components

Buttons — a weight hierarchy

One filled button for the consequential, irreversible act. Outlined for a real secondary action. Text actions for cheap, frequent ones that should not shout.

Segmented control — exclusive disposition

A single horizontal control for mutually exclusive reviewer dispositions: Reviewed, Needs change, and Accept w/ follow-up. The selected segment fills cobalt; the rest stay outlined.

Review-item navigator — type, not widgets

The queue is rendered as typed rows, not widgets: a monospace index, the item title in sans, and a status dot with its word. Selection is a 2px cobalt underline beneath the active title — no row tint, no container.

Diff block

The diff pairs a sunken header (file path plus an addition/deletion count) with monospace lines. Edges and a faint wash mark changes; line numbers and context stay neutral.

  lib/invoice/round.ts — 3 additions · 1 deletion
  function round(amountMinor, currency = "USD") {
-   return Math.round(amountMinor)
+   const scale = minorUnits(currency)
+   return roundHalfEven(amountMinor, scale)
  }

Causal evidence table — Base / Head / Reverted

Alignment and a single colored word per cell carry the meaning — no boxes. The Fails → Passes → Fails progression shows causation, not correlation.

Open question and warning accent

An open question states the human judgment plainly, then cites the machine fact in mono. For example: exact half-cent behavior was not executed — the implementation calls roundHalfEven, but no test lands a total on .005.

Warnings use a thin colored left edge, not a filled panel: amber for an unrun scenario ("exact half-cent scenario was not run"), red for an observed out-of-scope problem ("one edit is unrelated to issue #5187").

What the system refuses

An equal part of the system is what it never renders. Each was a live option, rejected.

Every token and component above reduces to one rule: show the reviewer the code and its proof in the same place, in plain language, and let them decide.