Focus Ring System
Tab through four element types: button, input, link, card. Each gets a focus ring tuned to its shape — pill gets a pill ring, square gets a square ring. The ring is drawn with outline and offset, never box-shadow, so it composites correctly. The color adapts to light and dark mode via CSS custom properties.
Tab through the four elements. Each gets a focus indicator tuned to its shape. The pill button gets a pill ring. The input gets a rectangular ring. The link gets an underline. The card gets a rectangular ring with the same offset as the input.
Why not box-shadow. box-shadow is drawn inside the stacking context and can be clipped by overflow: hidden on a parent. outline composites at the painting layer — it's drawn over all content, never clipped. For focus rings that need to be reliable across arbitrary DOM contexts, outline is correct.
outline-offset. The gap between the element's edge and the ring. Pill button: 3px, giving visual breathing room around the rounded corners. Square elements: 2px, which looks tighter and more precise. The offset is part of the design — not a default to leave at zero.
The glow. box-shadow: 0 0 0 4px color-mix(in oklch, var(--accent) 18%, transparent) adds a soft aura without blur. The color-mix in OKLCH ensures the glow hue matches the accent correctly across light and dark modes. Using rgba(accent, 0.18) works in simple cases but fails when the accent color changes between themes.
:focus-visible not :focus. :focus fires on any focus event — including mouse clicks. That means every button press shows a focus ring, which feels noisy. :focus-visible fires only when the browser determines keyboard navigation is happening. This is the correct default for accessible, non-distracting focus design.