Organism
Z2, the strip
Node 0.4, the connection strip, and it is never silent when connected. 26px of --zone-strip spent saying that the queue she is looking at is the queue that exists. 55 instances across 55 screens, injected by design/_shell.js exactly as Z1 is.
A live indicator that only appears when something is wrong teaches her that silence means nothing. An analyst who arrives distrusting AI tooling is the starting point every trust mechanism in this product argues with rather than builds on, and a strip that goes quiet on a good day is an invitation to wonder whether it is watching at all. So it reports on all 55 screens, and four of them report a problem.
Anatomy
dark, shipped
Live last case 4s · Clerk investigating 3
Stale nothing has arrived for 6m · decide on what is here, it is marked as of the last sync
light, the pair
Live last case 4s · Clerk investigating 3
Stale nothing has arrived for 6m · decide on what is here, it is marked as of the last sync
.z2the strip.min-height:var(--zone-strip), one flex row, and a hairline underneath. It draws no ground of its own until it is degradedbthe state word, and it is the only accented thing in the strip. A bare element selector, weight 700,--text-accent. Everything after it is plain.septhe middle dot between the state and its qualifier. Nothing in the system declares it, here or anywhere outside the annunciator, so in the strip it simply inherits the sentence’s own ink. The class is carried by the markup and is doing no work
Behaviour at width
Below 1280, the system's one point (Width), the side padding drops from --space-4 to --space-3. One line, and nothing else: the strip keeps --zone-strip, 26px, at every width. It says the same sentence on a phone at 03:00 that it says at the desk, because an indicator that goes quiet when the window narrows teaches the analyst that silence means nothing rather than means fine.
Variants
| Axis | Value | Uses | The rule |
|---|---|---|---|
| health | base | 51 | connected. A hairline underneath, no ground, and the state word carries the accent |
.is-degraded | 4 | a border and an underline, not a colour. The hairline becomes an edge, the strip takes --bg-page so it separates from what is under it, and the state word is underlined. That underline is the one place in the product something that is not a link wears one | |
| severity | no values | – | Prohibited. The severity ramp belongs to cases and the accent already has four jobs. A red strip would rank a connection problem against a compromised identity, and they are not on the same scale |
| density | no values | – | Prohibited. 26px is one line of text and its padding. There is nothing to compress and nothing worth loosening |
Five sentences fill it and none of them is written on a screen: live, arriving, reconnecting, stale and clerkdown are keys into design/_shell.js, and a screen names one. Four of the five carry is-degraded between them on four screens.
When to use it
Never by hand, and never anywhere but directly under Z1. Every authenticated screen carries <p id="wf-z2"></p> and names one of the five strips in its WF_SHELL call.
Where she meets it. In peripheral vision, all shift, and directly the moment a decision starts to depend on it. Two of the degraded sentences say what she should do rather than only what happened: decide on what is here when the queue is stale, and the queue is complete when it is Clerk that has stopped rather than the connection. That distinction is the whole reason the strip is four states and not two.
Rule and anti-rule
Do
It names what stopped, how long ago, and what still holds. A degraded strip that only said something is wrong would leave her guessing whether the list in front of her can be trusted.
Do not
Never as a message inside the screen. That is banner, which belongs to one surface and scrolls with it. The connection is true of the whole console, so it lives in a zone that is on every screen and never moves.
Limits
Rules of composition and context, which no anti-rule can carry: nothing else is the right component to take, and what is wrong is the count or the neighbour. Counted on the grey corpus at stage 09, and every one of them is a function in design/kit/checks/rules.mjs. Full table with sources on Architecture.
- R5. No shell before authentication, and no annunciator on a console that cannot read Clerk.
States
None. It reports. Nothing in the strip can be pointed at, pressed or focused, and the four readings below are the connection’s states rather than the component’s.
dark, shipped
Live last case 4s · Clerk investigating 3
Live last case 1s · 3 arriving
Reconnecting the queue has stood still for 40s · how many cases were missed is not known
Clerk is not investigating since 11m · the connection is fine, so the queue is complete
light, the pair
Live last case 4s · Clerk investigating 3
Live last case 1s · 3 arriving
Reconnecting the queue has stood still for 40s · how many cases were missed is not known
Clerk is not investigating since 11m · the connection is fine, so the queue is complete
Arriving is not degraded and it is drawn as the live strip. Cases coming in is the system working, so it takes the accent on the count and nothing else. Only the two that mean the list may be wrong, and the one that means Clerk has stopped, take the heavier boundary.
At 360 the strip keeps its height and loses two steps of side padding, and nothing else changes. The sentences were written to survive that, which is why the longest of them is the one about reconnecting rather than the one about being live.
What it reads, and where it stands
| Role | Surface | Where on the component | Dark | Light |
|---|---|---|---|---|
--text-accent | ink 4.5:1 | the state word, weight 700 | ||
--text-primary | ink 4.5:1 | the sentence after it | ||
--bg-page | fill | the ground, and only when degraded | ||
--line-separator | line, exempt | the hairline underneath at rest, through --rule-hair | ||
--line-edge | line, exempt | that line when degraded, through --rule-edge | ||
--zone-strip | structure | the 26px the strip is never shorter than |