Molecule
Fleet row
This is the fleet, one line of it. 88 instances across 16 screens. Three zones: the tenant, the highest thing Clerk may do there, and the record.
CLAUDE.md names calibrated trust as the only surviving differentiator and requires it to read at a glance in the operator console rather than on a configuration page. This row is that glance, repeated forty times, and it is the reason the fleet is the resting state of the detail pane rather than an item in the menu.
Anatomy
dark, shipped
light, the pair
.frowthe line. Ana, because a tenant has a detail screen in cluster 7- first zonethe tenant. Plain reading ink: it is the label, not the argument
- second zonethe ceiling, and it takes the accent. Latitude is the accent’s first job. It is selected by position because the wireframe gives that column no class
- third zone
recandwas: the count and the trend, both their own components
Behaviour at width
Below 1280, the system's one point (Width), three zones become two: the grid goes from minmax(0,1fr) 118px 92px to minmax(0,1fr) 96px, the record moves into the second column, and the side padding drops from --space-4 to --space-3. Latitude is the zone that goes, because on a phone the analyst is reading a record rather than deciding how much rope to give. Above the point the two right hand columns hold their pixels and the tenant is the fraction, so every pixel the pane gains goes to the name: --pane-w is 320px at 1280 and 544 at 2560.
Variants
| Axis | Value | Uses | The rule |
|---|---|---|---|
| head | .frow--head | 16 | the column names, on the surface ground |
| padding | .frow--flush | 12 | a context patch turned into markup. Inside a pane body, which already pads its contents, the row drops its own side padding to avoid doubling. kit.css wrote it as .pane-body .frow, which is the parent reaching into the child; the reason was sound and the expression was not. No pixel moves |
| severity | no values | – | Prohibited. A tenant does not have a severity. What it has is a record, and a record that was painted good or bad would decide for the analyst what she is being asked to judge |
The accent on the middle column was found by the stage 06 audit, which caught the concept stand accenting it while the real screen did not. That made the stand a claim about a screen rather than a picture of one.
When to use it
In the detail pane at rest, which is most of a shift, and in a block on the shift brief. It answers the third of the three MVP jobs: know where the agent’s record has earned latitude.
Where she meets it. Whenever she is not reading a case. That is the whole architecture of the product in one sentence: the fleet costs zero taps because it is what the pane shows when it is not showing a case, and CLAUDE.md requires the empty pane to read as the fleet rather than as empty.
Rule and anti-rule
Do
Three zones, and the record carries its trend. The ceiling in the accent is what the analyst is scanning for.
Do not
Never a bare percentage and never a count without its trend. 86% of four decisions and 86% of four hundred are the same string and not the same evidence, and this is the number the analyst is being asked to give an agent more rope on.
States
Live, in both themes. Point at a row and hold.
dark, shipped
light, the pair
It hovers one step louder than the queue row, and that is deliberate rather than inconsistent. A queue row is one of two hundred and hover is a pointer passing; a fleet row is one of forty and hover is the analyst comparing two tenants, so the ground has to hold the comparison. --bg-selected at 1.23 off the page against the queue row’s 1.05.
No selected state. Nothing in the fleet is being ruled on: it is the record, and the thing you rule on is a case.
Motion
Response, 120ms, the browser's own ease. What moves is a ground, one line of the fleet. Named one by one rather than as all, because all animates what nobody ordered and drags the layout properties in behind it. Never a size and never a position: those make the browser recalculate the layout of the page on every frame. Under prefers-reduced-motion it is 1ms, and this component does nothing to make that happen: it reads var(--dur-fast) and the token is redefined once. Full reasoning on Motion.
What it reads, and where it stands
| Role | Surface | Where on the component | Dark | Light |
|---|---|---|---|---|
--bg-selected | fill | under the pointer | ||
--bg-surface | fill | the head | ||
--text-accent | ink 4.5:1 | the ceiling, selected by position | ||
--text-primary | ink 4.5:1 | the record, through rec | ||
--text-secondary | ink 4.5:1 | the head and the trend | ||
--line-separator | line, exempt | the rule between rows |