Molecule
Empty state
Nothing to do, said without apologising. 6 instances across 6 screens: in place of a list 5, and inside a block 1.
An empty queue is not a failure and must not look like one. Nothing waiting is the state the analyst is working towards, and the copy says what is true rather than saying sorry: what the scope currently is, and what would change it.
A slot has no variant matrix. Six molecules turned out to be slots at step 2, measured in a browser: 71 distinct sets of child zones and one computed form each.
Anatomy
dark, shipped
light, the pair
.emptythe whole state, centred, with seven steps of padding above and below. Centred twice, and it used to be centred once.base.csscaps it at--measurebecause it is prose, and a capped box with no auto margin sat hard against the left of its column while its text centred inside its own 454px: centred in a box nobody can see and off-centre in the one they can. The cap was never the problembthe first line is the answer and it isdisplay:blockat --size-md in reading ink. Everything after it is the explanation and recedesb.runone instance runs it inline: a sentence where the answer is a phrase inside it rather than a line of its own
Variants
| Axis | Value | Uses | The rule |
|---|---|---|---|
| density | base | 4 | in place of a list, holding a whole column |
.empty--tight | 2 | inside a block, which already has a heading above it and does not need the state to hold a column | |
| tone | no values | – | Prohibited. There is no sad empty state and no celebratory one. The queue being empty is a fact, and the sentence says what it is |
This component is also a rule from CLAUDE.md and it is not this one. The empty state of the DETAIL PANE must read as "this is the fleet" rather than as "this is empty", and that is z5 holding the fleet. If the resting pane ever renders an empty, the decision to keep the fleet out of the menu has failed.
When to use it
Where a list would be and there is nothing in it: the queue with no cases waiting, a filter that matched nothing, a block with no rows.
Where she meets it. Rarely, and it is one of the two screens where the product has to be good at not being needed. The other is the outage page.
Rule and anti-rule
Do
The answer first, then the scope that produced it. It tells her the queue is empty and why, so she knows whether to widen the filter.
Do not
Not a stock sentence. It says nothing about which filter, which tenants, or what would change, and an analyst carrying forty tenants cannot act on it.
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.
- R7. The detail pane never renders an
empty. Its resting state is the fleet, andCLAUDE.mdsays a pane that reads as empty has failed the decision rather than the layout.
States
It has none, and it is not interactive.
dark, shipped
light, the pair
The link inside it is, and it carries its own.
What it reads, and where it stands
| Role | Surface | Where on the component | Dark | Light |
|---|---|---|---|---|
--text-primary | ink 4.5:1 | the first line | ||
--text-secondary | ink 4.5:1 | the explanation |