Black and white ring for dark-first systems
A black inner band and a white outer band. No brand color at all, so it drops into any design system and never fights the palette. Scores 12 of 12.
Why it works
Three bands: a thin black line, a thick white band, and a hairline of black outside it. Black and white are the two ends of the luminance scale, so one of them contrasts with every possible background at 3:1 or better. The outer hairline is the trick for mid gray and photos: it gives the white band an edge even when the background is light.
Design systems that ship a dark theme first often struggle to find one brand color that works as a ring on both themes. This ring sidesteps the question.
The CSS
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
outline: none;
border-radius: 6px;
box-shadow: 0 0 0 2px #000000, 0 0 0 5px #ffffff, 0 0 0 6px #000000;
}
In a forced-colors (Windows high contrast) context, add outline: 3px solid transparent so the system draws its own ring; box-shadow is dropped there.