Stage 07 · the kit

Component kit

Everything the product is assembled from, drawn by kit.css and by nothing else. A screen is not painted, it is built out of these classes. A detail that is missing goes into the kit first and onto a screen second, and a fix made on one screen is a desync rather than a fix.

The census that decided what is here, and the level of each thing, is docs/inventory.md. What the extract wanted and was not allowed to decide is proposed-variables.md.

Tokens

One flat :root. Semantic roles are stage 08, not this stage

colour

Nine taken as pixels off plate J, three derived for severity, two derived for the two jobs a rule does. Origin on every one of them in kit.css.

--color-ground#11110f
--color-surface#171714
--color-surface-sel#2a2418
--color-text#e9e4da
--color-text-dim#aaa397
--color-rule#675f50 · separators
--color-edge#7b7260 · controls
--color-hairline#232219
--color-accent#d29c3f
--color-failure#b25d44 · no small text
--color-sev-high#d9704f
--color-sev-medium#9d9182
--color-sev-low#828e96

type

Two families. Archivo carries display and body, IBM Plex Mono is reserved for anything counted. The scale is stage 04's and was not re-derived: small and short on purpose, because density is the feature.

--size-xl 21px18 waiting across 12 of 40 tenants
--size-lg 17pxFleet
--size-md 14pxClerk proposes compromised identity
--size-sm 12pxToken replay from a new ASN
--size-xs 11px34 OF 36 ACCEPTED, 30 DAYS

rules, and which one a component takes is a WCAG decision

--rule-hair separates rows and carries no meaning, so it sits below every floor deliberately. --rule-edge draws panel edges at 2.997, which is under 3:1 and allowed because 1.4.11 covers controls, not dividers. --rule-control is the boundary that identifies a control and clears 3:1.

--rule-hair · 1.18
--rule-edge · 2.997
--rule-control · 3.24 worst case

Atoms

Sixteen. They contain nothing else from the kit

.btn · 157 uses, 57 pages

Emphasis is the axis, and there is exactly one filled control per zone. Size is not a variant: it comes from the container. Out of reach is shown disabled rather than hidden, because a hidden control teaches nothing.

.chip · 316 uses, 44 pages

Three interactive forms and one that is not. .chip--state has cursor:default: it is a position, not an action, and the set of six is closed. Nothing in it is green, because none of them is an outcome.

unrecorded taken escalated decided acted investigating unrecorded

.bars · severity, 225 uses, 34 pages

A count of lit bars and a colour. The ramp descends in chroma rather than in brightness, because on a dark ground every value has to clear 4.5:1 and loudness cannot carry a ramp. Warm to cool and never to green: a low severity case is not a resolved one.

High Medium Low

The colour is selected on the drawing, not on a class: the markup carries three bars and some are lit, and :has() reads the count. That is what let the whole ramp land on 32 screens without adding one attribute to any of them.

form primitives · in the kit at a single occurrence

A form control enters at one use rather than two: it is a primitive of interaction and a system without it is incomplete. Checkbox, radio and toggle do not exist in this product at all, and that is an open decision in proposed-variables.md.

The SOC lead who takes escalations on this rota

icons · defined, and applied to nothing

The product contains zero SVG across all 62 screens. Two thirds of the content axis in docs/inventory.md is therefore empty, and every icon added is a decision with no wireframe behind it. The set exists here so it can be judged; it is not on a single screen. 24px grid, 1.5px stroke, square terminals to match a radius of zero, and currentColor, so an icon inherits the severity or the accent of whatever it sits in.

case
file
accept
amend
reject
escalate
latitude
window
fleet
log
source
expand
filter
shift
keyboard
evidence

Inheriting currentColor is the whole point of the last rule. The same glyph, in three places:

escalate Accept a latitude

Molecules

Twenty three. They contain atoms

.row · 294 uses, 39 pages

The heaviest thing in the product. Every row is a decision, not a record, so the verdict is one step larger and at full brightness while the description steps back. The tenant is deliberately not dimmed: buying principle 1 by breaking principle 4 is not a fix.

.frow · the fleet row, 88 uses, 16 pages

Where the only surviving differentiator lives. A count first, the window named, and never a bare percentage. The latitude column is the accent's first job.

TenantActs alone up toAccepted
Larkfield LogisticsContain endpoint34 of 36was 33 of 36 Aubrey Dental GroupInvestigate–no rulings yet

.banner · 54 uses, 44 pages

.optlist / .opt · the radio pattern with no radio in it

A single choice, built from links with a keyboard letter. It works, and it is not a radio. The kit owes a decision rather than an implementation, and it is row 3 of proposed-variables.md.

.empty and .tomb · the states that must not read as a blank

Nothing is waiting on youEighteen cases closed this shift, and Clerk is still investigating three.

The snapshot is gone. It fell out of the 90 day window on 12 August, and the ruling above still stands.

Organisms

Sixteen. They contain molecules, or they are the shell of a screen. This is the ceiling

the shell · .wf-shell, .wf-screen, .z1, .z2, .z45, .z4, .z5, .z6

Z1 and Z2 appear in zero html files. They are injected at runtime, which is why an inventory taken from the screens alone has no header in it and does not notice. The markup they produce is written once in shell.html, and that is the file a screen copy takes.

The pane at rest holds the fleet, and that is the decision that gives per-tenant latitude zero taps. Its empty state must read as this is the fleet, never as this is empty.

.dialog + .scrim · 11 uses, 11 pages

The one overlay the product has, and it may never cover the evidence a verdict is being made on. --color-scrim is the single value in the whole system that was never remapped for the dark ground, because it was written as a literal rgba() that the remap could not see. It was row 1 of proposed-variables.md and it was decided at step 4: it is now color-mix(in srgb, var(--bg-page) 78%, transparent), the product's own ground. This sentence said it was still at its old value until step 6, when a reader with clean context found the showcase disagreeing with the stylesheet it is supposed to show.