Design system
Every component in dark, in light, and with the hue removed. This page is the acceptance surface for the port and the regression check for every phase after it. Nothing here names a colour; every surface and status resolves a token — and the greyscale column is what proves it, because colour is never the only carrier.
W1 · component galleryColour & surfaces
Chrome stays achromatic so the only saturated pixels on screen carry a verdict. If something is coloured, it means something. That rule used to be aspirational: --accent was an acid yellow, the most saturated thing on most screens, and it sat twenty degrees from --setup on the wheel — two saturated yellows, adjacent hues, different jobs. --accent is now a neutral, and the four verdict hues are the only saturated pixels left.
surfaces
semantic — each owns exactly one meaning
Type & density
Three families with distinct jobs: Inter Tight for hierarchy, Inter for interface prose, and JetBrains Mono for evidence, identifiers and provenance. The first two are one design at two optical sizes, which is what stops a heading and the sentence beneath it from reading as two products.
Verdicts & outcomes
Four outcomes, three sizes, one shape language. A setup failure and an indeterminate result are rendered with the same care as a pass — the credibility of the gate rests on people believing the difference.
card
row · inline
greyscale proof — colour is never the only carrier, so hue removal must lose nothing
Run strip
A whole run in one proportional row, with its denominator. Segments keep declaration order so two runs stay comparable at a glance.
Setup failure
Grouped by the flow that broke, never by test. This component exists so that one broken factory can never read as eleven regressions.
Setup flow process.uniqueName could not provision
— 11 cases never startedSchema drift detected on the process name field — the captured flow no longer produces this state.
Controls
The whole product has five button weights, and the filled one is almost always Approve. Scarcity is the point: when a page has one solid button, nobody has to hunt for the consequential action. Everything below is live — every control writes to the URL and nothing holds its own state, so this section is also the proof that a filtered screen can be pasted into a ticket.
five weights — filled is rationed, danger is never filled, go starts a run
segmented — mutually exclusive, all options visible
filter chips — multi, order-independent, click to toggle
select · menu — enumerations, never free text
Attach nothing
radio · stepper · tooltip
query — the grammar is the placeholder
button role="switch", never a checkbox with a background image. 38×21, a 15px knob, 17px of travel at --t-state — a discrete state change, not a disclosure. Accent says “you set this”, never “this is good news”.tabs & pagination — the run detail shell
FailuresThe two failing cases, newest first.
Disclosure
One primitive, --t-disclosure, opacity and transform. The content is in the DOM whether the row is open or closed — a reader who searches a report for the assertion that failed must not be told it is not on the page.
Expected the approval banner to name the delegate. The page rendered the manager's own name instead, so the delegation never took effect.
STATE·builder.validationBLD-VLD-01validation-rule.spec.tsA browser-driven explorer cannot reach a rule the server enforces without a client path to it. Recorded as a structural gap rather than as backlog, and reviewed on a date rather than closed by a run.
Collapsed is clipped, never removed: hidden, display:none and visibility:hidden all take the text out of the browser's find. The trigger is a real button carrying aria-expanded, so the state is announced rather than drawn.
Tags & metadata
Four families, four shapes, so a reader can tell what kind of fact a tag carries without reading it.
layer — square, mono, outlined. Filled when e2e
role — pill, tinted neutral. A role is not a status
provenance — unbroken in both directions, or it is a defect
broken means ANY link missing, not every link missing — a missing link says the word, because a chain that renders blank when it is broken looks fine
condition — icon + word. The family has exactly four values, and this is all four
six verdicts are stored, four render. quarantined and skipped are the two that stay out of Verdict, for one reason: a case that was quarantined or skipped never got a verdict at all, so it is a fact about the case rather than a result from it. Folding either into the four would let “never ran” quietly move a pass rate.
skipped still has no tag of its own. The family is closed at four for the same reason the verdicts are closed at four, so the service maps a skip onto blocked — the family’s word for “this did not run, and something decided that” — and the count travels with it. That is the second chip above.
subset was never a condition at all, and was the worse mistake: it is a fact about the RUN, not about a case. FR-10.1 puts it on run.is_subset, where it belongs beside the commit and the environment — one claim about one run, not a badge repeated on every row that implied each case had been individually selected.
Coverage
Transition coverage is the headline and is rendered largest. Screen coverage appears at half size, greyed, labelled as the flattering number — the layout enforces the hierarchy so no later dashboard can quietly invert it.
Five transitions fire on a timer or a system event. A browser-driven explorer cannot reach them — tracked as structural gaps, not as backlog.
not a measure of the product.Twenty scenarios chosen out of 1,679 in the atlas. This measures what has been implemented, not what the product does.
the same components with nothing to measure — words, never 0%
Run table
42px rows, verdict leftmost, machine values in mono with tabular figures. A failure review is thirty rows scanned in ten seconds — optimised for that, not for looking calm in a screenshot.
| verdict | case | role | layer | time | provenance |
|---|---|---|---|---|---|
| Pass | CRT-01 | admin | e2e | 12.4s | STATE·process.createCRT-01create-process.spec.ts |
| Fail | BLD-VLD-01 | admin | e2e | 8.1s | STATE·builder.validationBLD-VLD-01validation-rule.spec.ts |
| Setup | CRT-06 | manager | e2e | 2.0s | STATE·process.createCRT-06missing |
| Indet | SET-04 | member | component | 0.4s | missingSET-04settings-save.spec.ts |
live uses the same evidence columns, with observed state in place of a verdict
| observed | case | role | layer | time | history |
|---|---|---|---|---|---|
| observed passing | CRT-01create a process | admin | e2e | 0:12 | |
| running | BLD-VLD-01refuse an invalid rule | admin | e2e | · | 1 of 3 failed before |
Scenario browser
Illustrative atlas data grouped by its real spoke and area fields. Small facets stay visible; the area catalogue discloses on demand. The nested index is sticky on wide screens and collapses to a jump menu on narrow screens.
Jump to area3 areas
Create a processprocess/crt2 scenarios · 2 classes
| Scenario | What the user does | Expected result | Class |
|---|---|---|---|
| CRT-01process-atlas | Create a process with a valid, unique name. | The process is created and appears in the process list. | PositiveP0 |
| CRT-06process-atlas | Enter a name that another process already uses. | The duplicate name is refused and the existing process is unchanged. | NegativeP0 |
Permissionsprocess/prm1 scenario · 1 class
| Scenario | What the user does | Expected result | Class |
|---|---|---|---|
| PRM-08process-atlas | Open a process as a member without permission to administer it. | Administrative controls remain unavailable to that member. | PermissionP1 |
General field propertiesform/gen2 scenarios · 2 classes
| Scenario | What the user does | Expected result | Class |
|---|---|---|---|
| BLD-GEN-01form-atlas | Rename the seed field in the form builder. | The canvas and property panel show the new field name. | PositiveP0 |
| BLD-GEN-12form-atlas | Make a field required, publish the form, and submit it empty. | The runtime form explains that the required field needs a value. | StateP0 |
Empty states
They state the truth plainly. They never congratulate, and never hide the denominator — a first cut hits these constantly, which is why they matter more than the populated cases.
EMPTY — SELECTION FOUND NOTHING
No tests map to this change
The path is not in the committed map, so the full suite ran instead and the gap was flagged. A slow build, never a missed regression.
BLOCKED — GENERATION GAVE UP
3 attempts, then a person
Every blocked case carries its full attempt history. ARES never works around what it cannot implement.
FIRST RUN — NO HISTORY YET
Coverage is 0% and that is honest
Empty states state the truth plainly. They never congratulate, and never hide the denominator.
NEVER SWEPT
Billing has never been swept
No state model exists for this surface, so there is no denominator to measure against. Reported as unswept rather than as 0% — zero would read as failure, and this is absence.
CLI parity
The CLI is a designed surface, not a leftover. Terminal output stays dark in both themes — a transcript is a quotation, and recolouring a quotation to match the page is how a screenshot stops being evidence. Nothing in this block animates.
$ ares run --gate --commit a4f19c2 resolving selection from committed map … 20 cases · 1 pool · ares offline ● 16 passed ✕ 2 failed builder/validation-rule ▲ 1 setup failed process.uniqueName ◇ 1 indeterminate build changed mid-run 4m18s · transition coverage 63.6% gate: BLOCKED — 2 failures outside the ledger next: ares report run --json | jq '.data.failures' exit 2
exit codes — worked vs found vs could-not
1 is deliberately unused. The gap makes an accidental exit 1 from a shell wrapper visible rather than plausible. 3 exists so CI can tell your test failed from our factory broke without parsing JSON.
The exit code appears here, quoted from the terminal, and nowhere else in the product. It is a process contract for CI, not a verdict for a person — a screen that put one beside a run would be handing the reader a number four other components exist to make unnecessary.