Spacing
A 4 px base unit, and one idea that does most of the work: things placed close together are read as related. In a patient record that inference is a clinical claim, made silently, by whoever set the padding.
Overview
Spacing is usually treated as taste. It is closer to grammar: proximity is how an interface says "these belong together" without writing it down. Card makes that claim at the level of a boundary; spacing makes it continuously, everywhere, at a finer grain and with no border to make it visible.
The practical consequence is that a value and its unit must sit closer to each other than the value sits to its neighbour — and if they do not, a clinician scanning a column will pair them wrongly at a glance and only catch it on a second read they may not take.
Systematic
Every gap is a multiple of four. Arbitrary values are how a system drifts, and they make density modes impossible to apply consistently.
Relational
Distance encodes association. Related things are closer than unrelated ones, and the difference is large enough to read without measuring.
Generous where it counts
Density is bought from whitespace between groups, never from touch targets, never from the gap that separates a safe action from a destructive one.
The scale
Ten steps on a 4 px base. The token definitions live in Tokens; this page is about which one to reach for.
Proximity is a claim
Within any group, the internal gaps must be at least one step smaller than the gap separating that group from the next. Where they are equal, grouping is ambiguous; where they are inverted, the interface is asserting a relationship that does not exist.
4 px inside a pair, 24 px between pairs. Which label belongs to which value is unambiguous at a glance.
Equal gaps throughout. Scanning downward, "1 240 ng/L" pairs as readily with the label beneath it as the one above.
Separation minimums
| Between | Minimum | Why |
|---|---|---|
| Adjacent touch targets | 8 px | The gap itself must not be tappable. WCAG 2.5.8 target spacing; see Button. |
| A destructive action and its neighbour | 40 px | A mis-tap adjacent to "Discard draft report" must land on nothing. Separation is cheaper than a confirmation dialog. |
| Stacked alarm banners | 8 px | Enough that two alarms read as two, close enough that the stack reads as one region. |
| A value and its unit | 4 px, non-breaking | They are one thing. The gap never becomes a line break. |
| Form fields | 20 px | Enough that an error message under one field is not read as helper text for the next. |
Density
Three modes, differing only in padding. Density never removes information — the same rule as Data grid.
| Mode | Row padding | Use |
|---|---|---|
comfortable | 12 px | Default. Mandatory on any touch surface. |
default | 8 px | Pointer-operated workstation UI. |
compact | 4 px | Dense analytic review, pointer only, no clinical priority in the rows. |
Density is a property of a region, not of individual components. Mixing densities within one panel breaks the proximity rule, because the reader cannot tell whether a smaller gap means "more related" or "denser table".
Spacing and scale factor
Every spacing token is expressed in rem, so applying a deployment scale factor
moves type, spacing and hit areas together. This is what makes the physical touch floor hold on
a cart display — see Scaling & displays. Hard-coded pixel
gaps break that guarantee silently, which is why the token set exists at all.
Outcomes of use
What this contributes to, in the terms of Usability & context of use.
- Effectiveness — labels pair with the values they belong to, and actions are hit as intended. Both are failures of proximity before they are failures of anything else.
- Efficiency — grouping read at a glance rather than assembled by reading. This is most of what makes a dense screen scannable.
- Satisfaction — reduced visual effort across a shift. Cramped interfaces are experienced as tiring long before anyone identifies spacing as the cause.
Do's and don'ts
8 px minimum between adjacent targets, so the gap itself is not tappable.
Touching targets. Gloved, on a moving cart, which one you hit near the seam is a coin toss.
40 px around a destructive action, so a near-miss lands on nothing. Cheaper than another confirmation step.
4 px between cancel and permanent deletion. The mis-tap that costs a report is one finger-width away.
Clinical safety notes
Trace these in your risk file (ISO 14971) and usability engineering file (IEC 62366-1).
- Group gaps at least one step larger than internal gaps. Mitigates: a value read against the wrong label.
- Value and unit bound at 4 px, non-breaking. Mitigates: a unit separated from its number by a line break.
- 8 px minimum between touch targets. Mitigates: mis-activation of the adjacent control, particularly gloved.
- 40 px around destructive actions. Mitigates: irreversible action from a near-miss.
- Density never removes information. Mitigates: identifiers or units dropped to fit more rows.
- All spacing in
rem. Mitigates: a deployment scale factor enlarging type while hit areas stay put.
Related
- Tokens — the scale definitions.
- Grid & layout — spacing at region level.
- Scaling & displays — why everything is rem-based.
- Card — grouping made explicit.