Widget parity

Every widget the v2 work invented or modified, beside the control the platform would give us. The right-hand column is rendered by WebKit, not drawn by me — so in Safari and in the app’s WKWebView it is the real thing.

The rule, from design-type-colour-parity.md: squint at arm’s length. A visible gap means a token is wrong. A gap only visible at 400% is a rabbit hole — leave it. Hence the zoom.

ZoomPalette
Enable switch — full sizemodified
ours · CSS.sw · 38×22 · knob 18
platform · WebKit<input type=checkbox switch>
This is the one to look hardest at. design-codebook-library.md settled the custom switch on the grounds that the exact NSSwitch spring curve and focus ring are not reproducible in CSS/WKWebView — that ~5% is the accepted gap. That was true when written. Safari 17.4 added <input type="checkbox" switch>, which renders the platform switch with its real animation, focus ring, Increase Contrast and Reduce Motion behaviour, for free. If the two read the same at 1×, the accepted gap may no longer need accepting.
Enable switch — mini (innovation 1)invented
ours · CSS.sw.mini · 26×15 · knob 11
platform · WebKitplatform switch at 26×15
The rail row control. Ours preserves the 38×22 track ratio exactly (1.73). The platform switch scales by CSS width and height, so the question is whether it degrades gracefully at rail size or whether the custom one holds up better small. Squint at 1× before zooming.
Checkboxalternative
ours · CSS.bn-checkbox · 14×14 ghost
platform · WebKitnative, accent-color bound
The shipped .bn-checkbox is a deliberate ghost — it recedes. The platform one asserts itself. Safari’s own Extensions list uses a plain checkbox in the master list, which is the precedent D3 leaned on — so this pair is a live alternative to the mini switch, not a curiosity.
Buttonsreused
ours · CSS.bn-btn / .add-btn
platform · WebKit<button> unstyled
Not invented — shipped atoms, here for calibration only. An unstyled <button> in WebKit is not an AppKit button, so this pair shows house style against the browser default, not against native. A weight check, not a parity target.
Proposal count pill (innovation 4)invented
123
ours · CSS.proposed-count, re-placed
no platform equivalent
platform · WebKit—
No platform control to compare against — the nearest idiom is a Mail unread count, which AppKit draws as a rounded label, not a control. The tint here is the corrected one (color-mix against the accent token); the shipped rule hardcodes light-mode blue, register B5. Switch to Edo above and the shipped version would be visibly wrong.

How small does the platform switch go?

AppKit's NSSwitch has three controlSize values — regular, small, mini — so a smaller native switch exists in the framework. The open question is whether WebKit exposes any of it to CSS. This measures what your browser actually renders, and reports the real pixel size back, so the answer is observed rather than assumed.

Sizing probemeasured in your browser
Read the numbers, not the picture. If the reported size does not change, WebKit is ignoring that lever and the control has one size. If it changes but the knob stops tracking the track, it scales geometrically rather than switching to a smaller design — which is not the same thing as a native small switch, and is worth rejecting.

Not compared, deliberately: the graphic gutter, the two-line rail row, the card status line, the card grid and the rail collapse button are layout, not controls — there is no platform widget to hold them against. The chevrons were dropped. That leaves the switch, the checkbox and the count pill as the only invented things with a parity question at all.