Rhythm and shape

Contract

A padding is taken by purpose: --pad-panel, not --space-5. A role is retuned by density, a step of the scale is not.

.my-panel {
  padding: var(--pad-panel);
  gap: var(--gap-row);
  border-radius: var(--radius-lg);
}

Accessibility

Scale

A component reaches it only through the tier of roles. Using --space-* directly is allowed in an application and in the flow primitives.

The sparseness at the top is not thrift but a restriction: there is no step between 32 and 48, and that is right. A step that does not exist cannot be chosen by mistake.

Paddings by purpose

The tier of roles. The values below are for the default density; at compact and comfortable they differ, see density.

The gap is set between neighbours. A margin-block on every element adds up with the container's inner padding at the top and the bottom but not at the sides — and a highlight steps away from the border twice as far vertically as horizontally. The right form is X + X { margin-block-start }.

The sizes of glyphs and gutters

The same tier of roles: every size has a name, so there are no constants in the components.

Radii

Six steps, and what chooses among them is nesting. All the values are even: at a density of 1.5 an odd radius rasterises off the device grid.

The rounding of a CONTROL is taken not from here directly but from --radius-control-sm/md/lg: it travels with density along with the height, otherwise a small button reads as a pill. See density.

The rounding of a MARK is taken from --radius-mark for a reason of the opposite kind. Below 8px the ladder stops offering a choice: when two radii on one edge add up to more than the edge is long, the browser scales every radius on the box until they fit, silently. --radius-xs on a 6px dot arrives as 3 — half the box, which is a circle; on a 6px meter it arrives as 3 as well, which is a pill. And where the other side of the box is data — the width of a lane span, the width of a tick — the shape then changes with the data. The mark tier is the one step that survives every mark in every scale.

The rule of nested radii

An inner corner needs a radius smaller than the outer one, otherwise the inner element looks as if it bulges out of its container. Optically the inner radius equals the outer minus the thickness of the gap between them, and the scale is already chosen so that the neighbouring step down gives the right result at a padding from the tier of roles.

<!-- panel lg → a control inside sm; a free-standing control is md -->
<div class="inst-panel">
  <div class="inst-panel-body">
    <div class="inst-card"></div>
  </div>
</div>

A rounding on a one-sided border is always a bug. A border-left together with a border-radius gives a stump of an arc: a note and the edge of the current navigation item carry a square corner deliberately.

The hairline

A browser never draws a border thinner than one physical pixel. On a 1x display 0.5px and 1px give the same thing, while a negative margin of -0.5px against a border drawn at 1px leaves half a pixel of doubled line. So the hairline is switched on only where there is room for it.

The seam of a button group is made by removing the neighbour's border — for the same reason.

Rules

What to take and what not to

API

Related

Density Tokens Flow Shell Panel Card