Organism

Pane body

The surface the whole product exists for. Everything between the pane’s head and its foot: the verdict, the evidence, the latitude ladder and the stamp. 38 instances across 38 screens.

It is a slot, and that is measured rather than assumed. 38 instances show 13 distinct sets of child zones and one computed form. There is nothing to switch here: what changes is what somebody put in it, and everything in it is another component.

Five steps of gap between blocks and two inside them. That ratio is the whole of the reading rhythm on the densest surface in the product: sections are far apart so the eye can find one, and lines inside a section are close so it can read down. Design principle 5 says density is the feature, and this is where the density is spent rather than saved.

Anatomy

What the bench is standing in. A 340px box at --pane-w carrying the pane’s raised ground and its overflow-y, which is z5. The body itself declares no height and no scroll: it is a column that grows, and the pane around it is what runs out of room. Scroll inside the bench and the head stays while the evidence goes past.

• .pane-bodythe column. Four declarations: flex, column, gap:var(--space-5), padding:var(--space-4)
• gapfive steps between blocks. The rhythm is the component, and it is the one number a reader would be tempted to change
• paddingfour steps at the desk and three at 360, which is the only media query in the file
• .blockwhat fills it, most of the time. 141 of the product’s 227 blocks sit here, and the two steps inside them are the other half of the ratio
• .claim, .lat, .prov, .stampthe four things that sit here without a block around them: a line of evidence, the latitude ladder, what was queried, and when it was filed

Behaviour at width

Below 1280, the system's one point (Width), the padding drops from --space-4 to --space-3. That is the only rule in the file, and the five steps of gap between blocks and two inside them are untouched: the reading rhythm is what this surface is for, and a narrower window is not a reason to change it. Above the point the body is as wide as the pane, which grows from 320px at 1280 to 544 at 2560.

Variants

When to use it

Once inside every detail pane that is showing a case, between pane-head and pane-foot. Not for the fleet: the pane’s resting state has no zone in common with a case past the head, and making it one would have written the fleet as a case with nothing in it.

Where she meets it. This is the main job. When Clerk hands her a case it has already investigated, she has to decide whether its verdict holds, and everything she needs to decide that is in this box. Dozens of times a shift, and once more months later when somebody asks her to defend the ruling.

Rule and anti-rule

States

None. It is a column with a gap. Everything alive in the bench below is a claim’s source link, an expansion or a ladder, and each carries its own.

At 360 the padding drops one step and nothing else moves. That is the only media query in the file. The pane is not rendered at that width when it is holding the fleet; when it is holding a case it becomes the whole page, and this column simply gets the page’s width instead of the pane’s.

What it reads, and where it stands

It reads no colour at all. Three geometry steps and nothing else, which is what makes a slot a slot. The rows below are what a reader sees inside it, and each is declared by the component that owns the cell.

Copy this

Where it stands