Focus

The ring

Three pixels of --sdc-focus-ring, offset three pixels, on :focus-visible only.

The ring has its own token rather than borrowing the body ink. That matters for governance more than appearance: a focus indicator is an accessibility affordance, and it should not move because somebody retuned a hover colour. It resolves to #233552 on the light theme and #F1FFB8 on dark, measuring 10.6 to 1 and 19.7 to 1 against their page backgrounds, far past the 3 to 1 minimum.

The offset is not decoration. On the dark Pager pill the ring sits at about 1.03 to 1 against the fill itself, so without a gap of page background between them it would read as the pill growing rather than as a ring. Implement focus with outline and outline-offset, never border or box-shadow, or the layout shifts when the ring appears.

Before this existed, the browser drew its own blue ring. On a case study card that looked like a selection state, which is what prompted the change.

Only for keyboard use

:focus-visible means the ring appears for keyboard and assistive technology, not for a mouse click. That distinction has to survive programmatic focus too.

When the case study dialog closes, focus is moved back to the card that opened it. The browser treats that as keyboard focus and draws the ring, even if the visitor closed it with the mouse. The site tracks which input was last used and suppresses the ring for pointer interactions, while keeping it for the keyboard.

Focus still moves in both cases. Only the ring is conditional. Never suppress the move.

Where the ring lives

Usually on the element itself. Two exceptions:

Case study cards put the ring on the card while the headline link holds focus, through :has(). Focusing a headline and ringing only those few words would misrepresent what activating it does.

The dialog’s close button suppresses its own ring when the dialog was opened with a mouse, for the same reason as above.

Do not remove it

outline: none without a replacement is the single most damaging line of CSS you can write here. If a ring looks wrong somewhere, change its shape or offset, never its existence.

In Windows High Contrast Mode the ring is handed over to the system highlight colour, also at three pixels, so the two rules agree.

Checks before you ship

1. Tab through the page. Every stop is visibly ringed.
2. Click the same elements. No ring appears.
3. Open and close the dialog with the mouse. No ring on return; focus still moved.