Organism
Dialog
The one overlay in the product. 11 instances across 11 screens, and always inside scrim.
It is anchored, not centred, and it never covers the pane. Node 4.4 says it in its own words and design principle 5 says it generally: 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, which is the one thing she needs while she is answering it. The anchoring is scrim’s job, with right padding equal to the pane’s width; this component only has to be narrow enough to leave.
Three zones in a fixed order: a head that does not scroll, a body that does, and a foot that does not. max-height stops the box a step of --space-7 short of the viewport, so the dialog ends inside the console rather than at the edge of the screen, and overflow:hidden keeps the scrolling body inside the rounded corner. Seven reasons and a free text field can be longer than a laptop, and when they are it is the reasons that move, never the question and never the way out.
The file’s header describes an earlier form of that measurement, the viewport minus --zone-top and --zone-strip, and its READS line still names both. The declaration is what this page and the readout at the bottom of it follow, and the difference is recorded rather than corrected here.
Anatomy
What the bench is standing in. A 320px box the dialog is stretched to fill. Nothing about the component is overridden: on a screen its height is settled by max-height against the viewport, and here it is settled by the box, which produces the same arrangement one viewport smaller. Scroll the middle: the question stays, the actions stay.
dark, shipped
Reject Clerk’s verdict
C-4417 · Larkfield Logistics · Clerk filed real, contain identity
light, the pair
Reject Clerk’s verdict
C-4417 · Larkfield Logistics · Clerk filed real, contain identity
.dialogthe box. A flex column at--width-dialog, on--bg-page, with one edge around it,--radius-uion the corners andoverflow:hiddenso the body that scrolls stays inside them> headerflex:0 0 auto. The question, and it never scrolls away from its own answers> header h2the question itself at--size-lg, weight 600> header .subwhich case, at which tenant, and what Clerk filed. Secondary ink, because it is context rather than the question> .bodythe only part that moves.flex:1 1 autowithmin-height:0, four steps of gap, andoverflow-y:auto> footerflex:0 0 auto, wrapping, with an edge above it. The way out and the way through, always reachable> footer .growthe spacer that pushes the actions right. A place, and it lives with the foot that places them rather than with the button that is placed
Behaviour at width
Below 1280, the system's one point (Width), the dialog is the screen: width:100%, max-height:100vh and no border, because there is nothing beside it to stay clear of. Above the point it is min(--width-dialog, 100%), 32.5rem, or --width-dialog-wide at 45rem for the keyboard map, and its height is the viewport minus --space-7. Being anchored beside the pane rather than centred on it is the scrim's rule, not this one, and it holds at every width where there is a pane.
Variants
| Axis | Value | Uses | The rule |
|---|---|---|---|
| width | base | 10 | --width-dialog. A question with a short set of answers |
.dialog--map | 1 | --width-dialog-wide, for the keyboard map, which is a reference table rather than a decision: it is read across, not answered. A wider box is right for reading and wrong for deciding, which is why this is one value and not a free size | |
| emphasis | no values | – | Prohibited. There is no destructive form and no warning form. The severity ramp belongs to cases, and a red dialog would rank the analyst’s own action against a compromised identity |
| position | no values | – | It has none of its own. Where the box lands is scrim, which anchors it to the right with the pane’s width as padding, and that is the rule the whole overlay exists under |
--width-dialog is the one value in this system with no origin, in kit.css or in DESIGN.md, and it is still open. It is recorded as open rather than given a reason after the fact.
When to use it
For a decision that needs an answer before anything else can happen, and that has answers the product already knows: rejecting a verdict and escalating a case. Not for reporting, not for confirming, and not for anything the analyst could have answered on the surface she was already on.
Where she meets it. Every time she disagrees with Clerk. Rejecting costs four taps against accept’s two, and this box is where three of them happen, so everything in it is arranged to keep it at three: no Next, no confirmation, and the primary action carries Enter. At 360 the dialog is the screen, because there is nothing beside it to stay clear of, and reject is not offered there at all: on a phone the exit is escalate.
Rule and anti-rule
Do
Escalate C-4417
Larkfield Logistics · Clerk filed real, contain identity
A question, a set of answers, and one way through with one way out. Everything the analyst needs to answer it is inside the box, and the case it is about is still on the screen behind.
Do not
Verdict filed
C-4417 · accepted and written to the log
Never to report something that already happened. That is toast, in z6, bottom left and clear of the pane. A dialog demands an answer, and OK is not an answer: it is a tax on a decision she has already taken, forty times a shift.
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.
States
None. Everything inside it carries its own. The option list, the buttons and the field each have their states, and the box has one job: to hold them still while she answers.
dark, shipped
Reject Clerk’s verdict
C-4417 · Larkfield Logistics
light, the pair
Reject Clerk’s verdict
C-4417 · Larkfield Logistics
The footer holds the hint that says why the primary is out of reach, in the place a person looks when a control will not answer. A reason is required is a sentence and not a tooltip: design principle 3 says out of reach is shown with the ceiling stated rather than hidden.
At 360 the dialog is the screen. Full width, no border, and max-height:100vh, because there is nothing beside it to stay clear of. The scrim that anchors it at the desk is not rendered at all on 7 of the 11, which is scrim--desk-only: a scrim exists to keep the dialog off the pane, and at that width there is no pane.
What it reads, and where it stands
| Role | Surface | Where on the component | Dark | Light |
|---|---|---|---|---|
--bg-page | fill | the box. It is opaque, so the case behind it is beside it rather than through it | ||
--line-edge | line, exempt | the border, the line under the head and the line over the foot, all through --rule-edge | ||
--text-secondary | ink 4.5:1 | the sub line under the question | ||
--width-dialog | structure | the width, and the one value in this system with no origin | ||
--width-dialog-wide | structure | the keyboard map, read across rather than answered | ||
--space-7 | geometry | subtracted from the viewport, so the box ends inside the console rather than at the edge of the screen | ||
--radius-ui | geometry | the corners |