Organism, and it contains another
Z45, the split
The UX pattern of the whole product in one declaration: a flex row with the list on the left and the detail on the right. 57 instances across 57 screens, which is every authenticated one.
Two of the three reasons for choosing it stand on evidence, and Microsoft ships it with keyboard traversal of the queue, so it carries no novelty and is not presented as one. CLAUDE.md binds that on this layer in as many words.
It is layout and it has no variants. Both panes 32, with a scrim 11, list only 9, pane only 3: those are counts of what is inside, not forms of this.
position:relative is load bearing. Z6 is absolutely positioned against this box, which is how the notice stack sits inside the console rather than on the viewport, and never covers the pane.
Anatomy
A diagram of the zones, not a scaled scene. This component is three declarations and a positioning context; a scene of it would be a picture of whatever screen was chosen, and the reader would learn about that screen. What is real below: the pane band is --pane-w, 320px at 1440 and 380px above 1560, the notice is --width-toast at 400px, the clearance at the foot is --zone-notice-clear at 180px, and the rule between the halves is --rule-edge. The height is drawn, because the split takes whatever the screen leaves it.
dark, shipped
the list. flex:1 1 auto, and it keeps its place
--pane-w · 320px here, 380 above 1560
the detail, and at rest the fleet
--width-toast · 400px, absolute against this box
the page ends --zone-notice-clear · 180px above the bottom, or the last row is unreachable underneath it
the hairline near the foot is the clearance, not a divider
drawn at the desk. At this width the row is a block, and the pane arrives under the list rather than beside it
light, the pair
the list. flex:1 1 auto, and it keeps its place
--pane-w · 320px here, 380 above 1560
the detail, and at rest the fleet
--width-toast · 400px, absolute against this box
the page ends --zone-notice-clear · 180px above the bottom, or the last row is unreachable underneath it
the hairline near the foot is the clearance, not a divider
drawn at the desk. At this width the row is a block, and the pane arrives under the list rather than beside it
.z45position:relative,flex:1 1 auto,min-height:0, a flex row,align-items:stretch. Five declarations, and one of them is only there so a child can be positioned against itmin-height:0load bearing, in the same way it is on Z4. A flex item refuses to shrink below its content, and without this the split grows past the viewport and every scroll inside it stops working:has(> .z5.is-paper) > .z4the container hiding one of its own children. With a paper pane, Z4 is not rendered: the case takes the screen and the list steps aside. No child could do this alone, which is the whole reason the rule is here:has(> .z5.is-standalone)justify-content:center. A sheet with no list beside it belongs in the middle, and the same selector turns on the standalone route’s own button pair in the pane foot:has(> .z6)padding-bottom:--zone-notice-clear. With a notice stack present the page ends 180px above the bottom, or the last row is unreachable underneath it- at 360
display:block. The row stops being a row, the document takes the scroll back, and the standalone foot swaps its desk button for the narrow one
Behaviour at width
Below 1280, the system's one point (Width), the split stops being a split: display:block, and three :has() rules decide what is left. With a paper pane the list is not rendered, because the case takes the screen. With a scrim over it that is not --desk-only, the pane is not rendered either: at the desk the dialog is anchored so it never has to cover the evidence, and here a full width dialog would leave the pane behind it unreachable rather than merely covered. With a notice stack present the page ends --zone-notice-clear above the bottom, 11.25rem, or the last row sits under it. All three are narrow only, and hoisting the first out of the query hid the list at 1440 on every case screen for the length of one measurement, which is what the pixel comparison caught on its first run.
Variants
None, and every cell in this table is empty on purpose. The four numbers below are counts of what is inside the split, which is the clearest instance in the system of the rule that a count is not an axis.
| Axis | Value | Uses | The rule |
|---|---|---|---|
| form | no values | – | One form on all 57. It is layout, and layout has no emphasis, no size and no tone |
| viewport | no values | – | Prohibited as an axis. Width is layout and layout is not a variant: the 360 rendering is the same component answering a media query, and the register took the viewport twins off the variant list for exactly this reason |
| what is inside, and none of it is an axis | both halves | 32 | the console at work: a list and a case, or a list and the fleet |
| with a scrim | 11 | a question that has to be answered, anchored clear of the pane | |
| list only | 9 | a document, a systemic state, or a screen with nothing to detail | |
| pane only | 3 | the standalone route, centred, with no list to be beside |
When to use it
Inside screen, on every authenticated surface. There is no second layout in this product: the door is the only thing that is not this, and the door is not behind authentication.
Where she meets it. All day, and she is not supposed to notice it. Satisficing is supported and the structural argument holds; what is still open is whether she pattern matches before reading. The split is what lets her traverse the queue with the keyboard while the pane follows, which is the mechanism the whole speed claim rests on, and it is a pattern Microsoft Defender already ships.
Rule and anti-rule
The two drawings below are proportional rather than measured: they are 120px tall and their halves are shares of the cell, because the comparison is about where the case goes and not about how wide anything is.
Do
the list, still there
the case
Side by side. She reads the evidence and rules on it without losing her place in the queue, and the next case is one arrow key away.
Do not
underneath
laid over the list
Never over the list. If the case has to take the screen, that is z5.is-paper, and this container answers by not rendering Z4 at all rather than by covering it. The one overlay in this product is scrim, and its whole job is staying clear of the evidence.
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.
- R3. No overlay covers the detail pane. Design principle 5: no overlay hides the evidence the analyst is deciding on.
- R5. No shell before authentication, and no annunciator on a console that cannot read Clerk.
States
It has none, and it is not interactive. Three of its rules read its own children, and each is the container doing a job no child could do alone; none of the three is a state.
dark, shipped
the zone at rest, and it has no other
--pane-w · 320px here, 380 above 1560
light, the pair
the zone at rest, and it has no other
--pane-w · 320px here, 380 above 1560
Narrow the window past 900 and the row becomes a block: that is the one behaviour of this component a reader can produce here rather than take on trust, and the diagram above stops being a row when it happens.
What it reads, and where it stands
| Role | Surface | Where on the component | Dark | Light |
|---|---|---|---|---|
--bg-page | fill | inherited from screen, never set. The split paints nothing at all | ||
--line-edge | line | the rule between the halves, and it belongs to Z4 rather than to this |
It reads one structural token, --zone-notice-clear at 180px, and no colour of its own. That is what a layout component looks like when it has been kept to being one.