Focus & outline

Focus rings, outline tokens and keyboard accessibility.

Every interactive element shows a visible focus state. The site uses a 3px cyan outline with a 3px offset — bright enough to stand out against any background, but never obscuring the element itself.

Tokens

--outline-offset

3px — default gap between the element and the outline.

--outline-focus-offset

0px — flush outline used when the control already has a visible border.

--outline-active-offset

3px — offset while the element is being pressed.

--border-focus-width

1px — inset border used on text inputs during focus.

Focus ring

Try it

Tab through these — every focusable element uses the same ring.

:focus-visible {
  outline: 3px solid var(--cyan);
  outline-offset: var(--outline-offset);
}

/* Inputs swap to an inset border on focus */
input:focus {
  outline: 3px solid var(--cyan);
  outline-offset: var(--outline-focus-offset);
}

Accessibility

Focus styles are never removed, even on mouse-driven focus. :focus-visible is preferred where the browser's heuristic is appropriate, but any element that can receive keyboard focus must show a visible ring.