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.
dark
surfaces
semantic — each owns exactly one meaning
light
surfaces
semantic — each owns exactly one meaning
dark · greyscale
surfaces
semantic — each owns exactly one meaning
Type & density
Three families with distinct jobs: Bricolage Grotesque for hierarchy, Instrument Sans for interface prose, and Azeret Mono for evidence, identifiers and provenance.
dark
light
dark · greyscale
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.
dark
card
row · inline
greyscale proof — colour is never the only carrier, so hue removal must lose nothing
light
card
row · inline
greyscale proof — colour is never the only carrier, so hue removal must lose nothing
dark · greyscale
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.
dark
light
dark · greyscale
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.
dark
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.
light
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.
dark · greyscale
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 four 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.
dark
four weights — filled is rationed, danger is never filled
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 120ms — 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.
light
four weights — filled is rationed, danger is never filled
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 120ms — 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.
dark · greyscale
four weights — filled is rationed, danger is never filled
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 120ms — 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, 220ms, 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.
dark
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.
light
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.
dark · greyscale
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.
dark
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.
light
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.
dark · greyscale
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.
dark
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%
light
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%
dark · greyscale
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
38px 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.
dark
| 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 |
light
| 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 |
dark · greyscale
| 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 |
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.
dark
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.
light
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.
dark · greyscale
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.
dark
$ 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.
light
$ 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.
dark · greyscale
$ 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.