Organism, and it contains another
Scrim
It is what anchors the dialog rather than centring it. 11 instances across 11 screens, and it holds one thing: a dialog.
align-items:flex-start and justify-content:flex-end, with right padding equal to the pane’s width: the dialog lands beside the case rather than on top of it. Node 4.4 requires it and design principle 5 requires it generally, in as many words: no overlay hides the evidence the analyst is deciding on. A centred dialog on a two monitor desk lands exactly on the case she is ruling about.
--bg-scrim reads --bg-page rather than a primitive, so it can never tint the console with a colour the interface does not otherwise contain. It was stage 04’s light theme ink at 28 per cent, written as a literal, which is the one value the brand remap could never see. Changed by a user decision at stage 07 step 4, and it had never been seen on a coloured screen: every page carrying a scrim was a reject or an escalate, and this bench was the first place it had stood in both themes at once. Stage 12 added the eleventh, the keyboard map, which is neither.
And standing it in both themes is what found the defect. It was repaired in the same commit and this paragraph went on reporting it as open for two stages, which is the second finding and the more useful one. What the paragraph said was true of an earlier tokens.css: a custom property’s var() is substituted where the property is declared, which is :root, and the already substituted value is what inherits down, so a light theme that redeclares --bg-page and not this role gets the dark page colour at 78 per cent. The light block redeclares it, with a comment saying that the repetition is the point. Measured on 2026-08-27 on design/reject.html, in the browser, in both themes: dark resolves to color(srgb 0.0667 0.0667 0.0588 / 0.78) over a page of #11110f, and light to color(srgb 0.9725 0.9686 0.9569 / 0.78) over a page of #f8f7f4. The veil follows its own theme. The bench below is still the evidence and it now shows a pass rather than a failure, and the class this leaves behind is the one worth keeping: checks/contrast.mjs could not have caught either state, because it composites a text node’s ancestors and a scrim is a sibling laid over them.
Anatomy
A scaled scene, not a diagram. A drawing of this component would be a rectangle, and the thing worth seeing is the clearance on the right and the ground the console reads through. At 1440 the box below is 960px and the padding on the right is calc(--pane-w + --space-4), which is 336px at that width and 396px above 1560, and the dialog inside it is at its own --width-dialog. Narrow the window past 900 and the same scene switches to the 360 rendering by itself.
dark, shipped
18 waiting across 12 of 40 tenants in your scope
Reject Clerk’s verdict
C-4417 · Larkfield Logistics · Clerk filed real, contain identity
What Clerk got wrong
the pane on the right is clear, and that clearance is this component
no pane at this width, so the padding goes to zero and the dialog takes the screen. There is nothing to stay clear of
light, the pair
18 waiting across 12 of 40 tenants in your scope
Reject Clerk’s verdict
C-4417 · Larkfield Logistics · Clerk filed real, contain identity
What Clerk got wrong
the pane on the right is clear, and that clearance is this component
no pane at this width, so the padding goes to zero and the dialog takes the screen. There is nothing to stay clear of
.scrimposition:fixedoverinset:0atz-index:10. The one component in the system that leaves the flow entirely- the anchoringthree declarations and they are the component.
display:flex,align-items:flex-start,justify-content:flex-end: top right, never the middle - the clearance
padding: --space-6 calc(--pane-w + --space-4) --space-6 --space-4. The right padding is the pane, so the dialog stops where the evidence starts --bg-scrimthe ground, and it is--bg-pageat 78 per cent rather than a primitive. It covers the pane as well as the list: the padding places the dialog, and the veil isinset:0. In dark that is the page over the page, so the console dims and stays legible; in light it is the dark page over a light one, which is the open defect abovedialogthe only thing it ever holds, always exactly one
Behaviour at width
Below 1280, the system's one point (Width), the padding goes to zero and the contents stretch, and a --desk-only scrim is not rendered at all: there is no pane at that width, so there is nothing to anchor against and nothing to stay clear of. Above the point the right padding is --pane-w plus --space-5, and because the pane is fluid the space it keeps clear grows with it, from 320px at 1280 to 544 at 2560. The dialog lands beside the case at every width where there is a case beside it.
Variants
One axis, two values, and it is about the viewport rather than about anything anybody chooses.
| Axis | Value | Uses | The rule |
|---|---|---|---|
| viewport | base | 4 | It renders at both widths. At 360 the padding goes to zero and align-items goes to stretch, so the dialog takes the screen: there is no pane there, so there is nothing to stay clear of |
.scrim--desk-only | 7 | Not rendered at 360 at all. A scrim that exists only where there is a pane to stay clear of. Seven of the eleven are decisions the analyst takes at a desk with the case beside her, and offering them on a phone would offer a ruling with the evidence off screen. The keyboard map is one of the seven for a different reason: a phone has no keyboard, and its own narrow rendering says so | |
| emphasis | no values | – | Prohibited. There is one ground and it is 78 per cent of the page. A darker scrim for a heavier decision would say the console matters less when the stakes are higher, which is the opposite of what is true |
When to use it
Around a dialog, and only there. Eleven screens: six rejects, four escalates and the keyboard map. The first two are the places where the analyst is asked a question that has to be answered before anything else happens; the third is the one layer in the product that asks nothing and is a layer anyway, because a map of keys has to hold focus while it is open or its own Escape row would be false.
Amend is not one of them, and this is where that was settled. Four documents disagreed for three stages about whether amending is a modal answer like rejecting or an edit in place, and `case-amend.html` answers it by existing: no scrim and no dialog, the fields standing in the pane. So the question of whether its scrim is --desk-only dissolves rather than being decided.
Where she meets it. Every time she disagrees with Clerk, which design principle 3 says must stay a first class action rather than a fallback path. That is why the dialog is anchored: she is reading the evidence on the right while she picks the reason on the left, and a centred overlay would make her remember the case instead of seeing it.
Rule and anti-rule
Do
Reject Clerk’s verdict
C-4417 · Larkfield Logistics
A question that cannot be left unanswered, anchored beside the evidence it is about. If the analyst has to decide, she has to be able to look.
Do not
STATUSReconnected. 3 cases replayed. They arrived while the connection was down and are in the list now, in their place.
×Never a scrim around something that needs no answer. That is toast in Z6, bottom left at --width-toast, which covers nothing and can be dismissed. A scrim spends the whole screen to ask one question, so it is only ever worth it when there is a question.
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.
- R1. Not more than one
.btn--primaryper layer, and a foot does not compete with it. A second is allowed only as the viewport twin of the first, or in a modal layer over the screen. - R2. A
dialognever stands without ascrim, and one of each at a time. - R3. No overlay covers the detail pane. Design principle 5: no overlay hides the evidence the analyst is deciding on.
- R8. A
.only-deskelement never renders at 360, and a.only-narrownever renders at the desk.
States
It has none, and it is not interactive. The dialog inside it carries the whole exchange, and the way out is Esc rather than a click on the ground.
dark, shipped
18 waiting the console, at rest under the ground
Reject Clerk’s verdict
One state, and it is the only one
light, the pair
18 waiting the console, at rest under the ground
Reject Clerk’s verdict
One state, and it is the only one
Both halves are the same scene under the two grounds, and this is the first place --bg-scrim has ever been seen in light: the role was changed at stage 07 step 4 and every screen that carries it is still grey. Read the two halves against each other rather than each on its own. That is what the defect above looks like, and it is why a role is not paired until something has rendered it in both themes.
What it reads, and where it stands
| Role | Surface | Where on the component | Dark | Light |
|---|---|---|---|---|
--bg-scrim | fill | the whole ground, and it is the console at 78 per cent rather than a colour of its own | ||
--bg-page | fill | what the role above resolves to before the transparency, which is why its pair is automatic |
The scrim row prints a declaration rather than a colour, and the two cells print the same one. --bg-scrim is the one role in the system that resolves through another role, so the browser hands back the color-mix with --bg-page already substituted, from :root, which is the dark theme. The identical pair is the finding rather than a limit of the instrument: the row underneath shows the two grounds it is meant to be 78 per cent of, and only one of them ever reaches it.
--pane-w is structure rather than colour and it has no theme pair: a clamp since stage 10: 360px from the declared minimum to about 1500, then growing to 544. It is read here through calc() and by Z5 itself, which is the only reason the two ever agree.