Bristlenose mockups · Screens lens

Leader styles over a busy screengrab

The same synthetic board drawn eight ways. The shop page, quotes and participants are invented. Everything else uses the shipped tokens, the shipped quote card at the label size, the sequence badge and the highlight box. Card placement follows docs/design-screens.md S5: cards sit beside the screengrab in line order, and every card is joined by a leader to its line.

Research and ranking: experiments/screens-lens/leader-styles.md. Click any card to select it in every frame; press Esc to clear.

Artefact: what would shipCommentary: why, not the product

Today

baseline

A · today: 1px accent, dot, 1.5px box

Cased

rank 1

B · cased: 1px accent over 3px board-bg casing; cased dot and box

Commentary

A stroke in --bn-colour-bg under the core. Over the gutter it matches the board and cannot be seen, so off the page this is exactly A and exactly the Discussion wire. Over the page it gives the core a guaranteed neighbour: 4.0:1 default light, 5.2:1 default dark, 6.7:1 Edo light, 6.2:1 Edo dark.
The same 1px casing goes round the target box (box-shadow) and the end dot (paint-order: stroke), so the target survives the blue button too.
Precedents: cartographic casing (Esri), Richards's "thin white line beside" the leader in technical illustration, and Skitch's white outline, here without Skitch's weight.
The selected leader goes to 1.5px, as the Discussion's hot wire does.
Build: leaderPath unchanged; one extra path per leader; about five CSS lines.
Revised in B′: the casing in the board's colour turns into heavy dark tracks in dark mode, and into white tracks over a dark-mode site. The casing should take the screengrab's paper colour instead. See B′.

Cased + lifted

variant of B

C · cased, 1.25px, soft shadow: the leader on the cards' plane

Gutter-run (cased)

rank 3

D · vertical travel in the gutter, one short slant into the page

Edge port + badge on the target

not as default

E · at rest the leader stops at the screengrab's edge; the line continues on selection

Spotlight on selection (with B)

rank 2

F · B at rest; selected: 1.5px leader and a board-bg scrim over the rest of the screengrab

Ink (cased)

second best of the colours

G · Richards: a dark line with a light line beside it; the box stays accent

Difference blend

rejected

H · white line, mix-blend-mode: difference

B′

Casing that follows the screengrab

rank 1: R3, chosen

Variant

board light · light site

board dark · light site

board light · dark site

board dark · dark site

Commentary

Why B failed in dark. B's casing took the board's background. In dark mode that is near-black, drawn over a screengrab that is almost always white, so every leader gained two dark tracks: heavy, and visibly not part of either surface. The mirror case is a light board over a dark-mode site, where the casing becomes white tracks on a dark page. Pick R0 to see both.
R4, the same casing at half strength and half width, only softens the tracks. It also loses the guarantee: half a casing is not an adjacent colour you can measure.
R1, casing in the screengrab's own paper colour, clipped to the screengrab. This is the print cartographer's mask rather than a halo. On paper the casing is the paper and cannot be seen; it appears only where the line crosses ink (the button, the photo, text). In the gutter there is no casing at all. So the line looks like a bare Discussion wire everywhere it can, in all four combinations.
R1 is enough for the default palette, not for Edo. The core keeps the board's accent. Edo light #0f5c9e on a dark site's paper is 2.7:1, and Edo dark #4d9fe0 on a white page is 2.9:1. Switch the palette to Edo to see it.
R2 adds one rule: over the screengrab the line takes the accent of the screengrab's scheme. A dark site gets the dark-mode accent, a light site the light-mode one, whatever the board is doing. Against the paper: default 4.0:1 (light) and 5.1:1 (dark); Edo 6.9:1 and 6.6:1. In the default palette the two blues barely differ. In Edo the line shifts tone where it enters the screengrab, which reads as crossing onto another surface. The target box and the end dot follow the same rule.
R3, chosen (15 Oct 2026). R2 with the paper casing softened at its outer edge, the restrained halo cartographers prefer to a hard one. The casing stays fully opaque and only its edge is blurred (σ 0.7px), so about 91% paper survives across the first pixel beside the line: a continuous-blur estimate of ≈3.3:1 at 1×. As built (72f80bd1), measured: WebKit renders this blur at 1× as a smear that leaves only ~81% paper, under 3:1, and Chromium draws none below σ 1. So the shipped lens blurs only on 2× screens, where 96–100% paper survives, and is the hard casing, R2 (4.0:1), at 1×. This mockup shows the blur at every resolution. A halo that was partly transparent as well would fall to 3.0:1 at 85% opacity, the 3:1 limit, and 2.4:1 at 75%. The softness must come from the blur, never from opacity.
The selection spotlight (F) now dims towards the paper as well: a white page fades towards white, a dark page towards dark. That is the cartographers' direction for an area of disinterest, and it no longer greys a white page in dark mode.

≡

Comparison

Commentary

	Busy-image legibility	Clutter on the screengrab	Accessibility (1.4.11, dark, motion)	Family with Discussion	Build cost
A · Today	○ 1.0–1.6:1 on blue	●	○ fails on blue; Edo dark fails on white	●	—
B · Cased (board colour)	●	○ dark tracks in dark mode; white tracks on a dark site	● 4.0–6.7:1	◐ only on a board-matching page	S CSS + one path each
B′ · R2 paper casing + paper accent	●	● casing shows only over ink	● 4.0–6.9:1 on light and dark sites, both palettes	● bare wire in the gutter and over paper	S–M paper sample + clipped layer
B′ · R3 soft paper halo (chosen)	●	● gentlest over ink	● built as R2 at 1× (4.0:1), blurred only at 2×	● as R2	S–M R2 + one SVG filter
C · Cased + lifted	●	◐ heavier	●	◐	S
D · Gutter-run	●	● least ink on the page	●	◐	M `leaderPath` + tracks + tests
E · Edge port	●	● cleanest	◐ join by badge at rest	○	M
F · Spotlight (on B)	● when selected	● at rest	● snaps under reduced motion	● like the hot wire	S CSS only
G · Ink	●	◐	●	○ loses the accent	S
H · Difference	◐ fails on midtones	●	○ unprovable	○	S

B′ (R3, chosen): a soft halo in the screengrab's paper colour, clipped to the screengrab, with the line taking the screengrab's accent over it. Holds 3:1 on light and dark sites in both palettes, is invisible wherever the line crosses paper or gutter, and adds no tracks in either theme. Replaces B, whose board-coloured casing failed in dark mode.
F, the spotlight on selection, on top of B. Answers "which line is mine" on a crowded screen without changing the board at rest.
D, gutter-run for long leaders only, after measuring how many there are.

Leader styles over a busy screengrab

Today

Cased

Cased + lifted

Gutter-run (cased)

Edge port + badge on the target

Spotlight on selection (with B)

Ink (cased)

Difference blend

Casing that follows the screengrab

Comparison

Tote bag, large

You might also like