Recipe: Focus ring design tokens
Consistent keyboard focus indicators across every interactive surface.
Tokens
| Token | Value | Usage |
|---|---|---|
| --focus-ring-color | #8B5CF6 | Outline color |
| --focus-ring-width | 2px | Outline thickness |
| --focus-ring-offset | 2px | Gap from element |
| --focus-ring-radius | 6px | Corner rounding |
Tailwind utility
focus-visible:outline-none focus-visible:ring-[2px] focus-visible:ring-[#8B5CF6] focus-visible:ring-offset-2 focus-visible:ring-offset-[#0A0612] focus-visible:rounded-md