The native switch in both. Blue rule marks the edge each layout has to hold: on the left it is where the text starts; on the right it is where the row starts.
PaletteSwitch size
Leading
Safari Extensions · what we drew
Your codebook
project-ikea tags
Installed
Emotional and cognitive signals
Bristlenose UXR3
10 Usability HeuristicsJakob Nielsen12
The Elements of User ExperienceJesse James Garrett
Scannable on/off. Every control sits on one vertical line, so the set reads as a column of states.
Indents every title. The text starts 57px in, and a two-line row must top-align the switch to the title — the bullet rule.
Leaves the trailing edge free for the count, which then has a column of its own.
Safari does this, and Safari is our master–detail analogue.
Trailing
macOS settings row · our own doc
Your codebook
project-ikea tags
Installed
Emotional and cognitive signals
Bristlenose UXR3
10 Usability HeuristicsJakob Nielsen12
The Elements of User ExperienceJesse James Garrett
Titles start at the row edge. No indent, nothing between the reader and the name.
Our own doc argued for this — “a switch lives on the trailing edge — the macOS settings-row idiom: title flush left, control on the right” (design-codebook-library.md).
But the count now competes there. Two things on the trailing edge, and the switch’s position shifts with whether a row has pending proposals.
Ragged control column — the switches no longer line up.
The tension is real and it is ours.design-codebook-library.md argued trailing on the settings-row idiom, and that reasoning was sound — for a settings row. But this rail is not a settings pane: it is a master list, and the switch is a per-item state marker rather than a preference. Safari draws exactly this list and puts the control leading.
The count decides it. D10 put the pending-proposal badge on the trailing edge, where it belongs — it is information, not a control, and it answers “where is there work?” at a glance. Putting the switch there too means two competing things on one edge, and a switch whose x-position moves depending on whether a row has proposals. The leading layout keeps controls in one column, information in the other, which is what makes either column scannable.
Cost of leading, stated plainly: a 57px indent on every title, and the switch must top-align to the first line rather than centre on the block — the same bullet rule the shipped status dot already follows.