Pattern
Case pane
The detail pane filled with a case, and the surface the whole product exists for. A head that names what is being ruled on, a body carrying what Clerk filed and what it stands on, and a foot holding the four verdicts. 38 grey screens of 62, 29 of them already in colour.
The main job in CLAUDE.md is one sentence and this composition is its answer: when Clerk hands me a case it has already investigated, I want to decide whether its verdict holds, so that the decision is made and I can still defend it months later. The head is sticky because the thing she is deciding about may not leave the screen; the foot is sticky because the decision has to be reachable without scrolling back from the end of the evidence.
Anatomy
Live, in both themes, in a box short enough to prove both. The body between them is the only zone that scrolls, and 86 of the product's 157 buttons stand in that foot.
dark, shipped
light, the pair
pane-headnames the case and its client, and stays while the evidence scrolls under it pagepane-bodythe verdict, the evidence, the latitude ladder and the stamp. Thirteen distinct sets of child zones and one computed form pagepane-footwhere the analyst rules. One to four buttons, and that is a count rather than a variant page
Behaviour at width
Below 1280, the system's one point (Width), the case takes the whole page. A case pane that is neither paper nor standalone is not rendered at all, which is the log and the shift screens, where the pane is a desk reading beside a column that is itself not rendered at that width. The paper and standalone routes become flex: 1 1 auto, the standalone sheet drops its --width-sheet cap, its foot tightens to --space-2 --space-3, the reason column of the latitude ladder goes because the answer is the column and the explanation is a line she has no room for, and the foot swaps the desk button for the full width narrow pair. Above the point this is where the extra width goes: --pane-w is 320px at 1280, 461 at 1920 and 544 at 2560.
Variants
| Axis | Value | The rule |
|---|---|---|
| route | paired, 35 screens | The pane stands beside the queue. The title is an h2, because the screen already has an h1 in the column |
is-standalone, 3 screens | The case has its own address: a permalink pasted into a ticket, and a phone at 03:00. The title becomes the page's h1, the head stops being sticky because there is nothing beside it to scroll past, and three zones arrive that the paired form does not have | |
| ground | is-paper, 19 screens | The case on the page ground rather than the raised one. It is paint and it stays in z5.css: a pattern arranges, it does not paint |
| the foot | absent on 3 | A case already ruled on has no verdict controls at any width. You cannot rule twice, and a disabled row of four would teach that you nearly can |
| what the body carries | a case, 34 screens | The verdict, the evidence, the latitude ladder and the stamp |
| what the view covers, 4 screens | The log at rest uses this pattern and it is not showing a case. The body carries a covers list and two blocks, and the head reads "What this view covers" over the sub-line "nothing is selected, and this is not an empty pane". It is the same three zones in the same order, so it is this pattern rather than a third one, and it is named here because a reader assembling the log will look for the fleet and the fleet is not it. On the log the fleet would answer a question about attention, and the question the log is about to be asked is what it can and cannot tell you |
When to use it
Every screen whose job is ruling on one case: the case and its eleven states, the reject, escalate and amend flows, the standalone permalink, and the shift screens, where a case sits in the pane beside the handover. And the log at rest, where the same three zones carry what the view covers instead of a case: see the second row of the variants above before assembling a log screen.
Where she meets it. Forty times a shift. It is the one surface in the product she reads rather than scans, which is why the standalone route is the only place with a measure on its prose.
Rule and anti-rule
Do
Fill it. A new state of a case is this pattern with a different body and a different foot: filed, expired, superseded, write failed. The head does not change and the foot changes only in how many buttons it has.
Do not
Use it for the pane at rest. The other filling of this host is the fleet, and it shares nothing with this one past the head. Writing the fleet as a case pane with no body would render it as an empty case, and CLAUDE.md forbids exactly that reading in as many words.
Limits
Rules of composition and context that reach this pattern. Full table with sources on Architecture, and every one of them is a function in design/kit/checks/rules.mjs.
- R1. Not more than one
.btn--primaryper layer. This foot carries the one on the screen, and a dialog over it carries its own: the pane's primary sits under the scrim and is not reachable. - R3. No overlay covers this pane. Design principle 5: no overlay hides the evidence the analyst is deciding on, and node 4.4 anchors the dialog rather than centring it for that reason alone.
- R7. The pane never renders an
empty. If it has nothing to show, what it shows is the fleet. - R11. One
h1per screen. Closed in colour at stage 12:node design/kit/checks/rules.mjs designprints 0 broken. Still open in grey on twenty one screens, where at 360 there is noh1at all, because there the heading is the queue readout and this pattern hides the column that carries it. It stays open becausewireframes/is frozen and not because a coloured screen is wrong.
Where it stands
38 grey screens, and they are the eleven states of the case plus every screen that shows a case beside something else.
29 of the 38 are already in colour. Live, in colour: the case, the same case on its own address, the reject flow.
What it is made of, and what moved into it
File: design/system/patterns/case-pane.css. Imported in index.css after every component and before the places, because a pattern is built from components and has to be able to reach past their own declarations.
Built from pane-head, pane-body and pane-foot, standing in z5, and through the body every component that carries evidence. Nothing new was written for it.
Nine rules moved in, from two files. Six out of z5.css and three out of z45.css, and every one of them had the same shape: a selector naming a component OTHER than the file it was written in, conditioned on which filling the pane is carrying. The deepest of them reached four components down.
One rule was doing two jobs and neither was named. .z5{ display:none } at 900 hid the fleet at rest AND the desk only case pane of the log and shift screens, on one line, for two unrelated reasons. It is two rules now, one here and one in fleet.css, and 102 renderings say the result is identical.
Two things tried to move in and were sent back, and a read only audit against this file's own header caught both. .pane-head--standalone h1 turned out to be a rule stage 08 had written in two places, once on the component's own class and once as .z5.is-standalone .pane-head h1, with the second winning on specificity so the first looked like it worked. A rule in two places is a defect and not a safety net, and pane-head keeps it. .sa-fresh and .sa-route carry a line, a family and an ink: moving them would have broken the one rule that makes this a level rather than a second folder of components, so they stayed in places.css.
What stayed behind, and why. The pane's ground, its edges and its ink are in z5.css: a pattern arranges, it does not paint. Nothing in this file reads a --bg, --text, --line or --rule token, and nothing in it sets a family.