Tarva BXD · LumosIndex › Foundations › Tokens · Focus Ring
1920 × 1080 · Landscape
Index › Foundations › Tokens › Focus Ring
Focus-visible
Tokens · Focus Ring
In focus.
A single calm terracotta ring marks keyboard focus — visible, never harsh. It is the one place the accent appears in an active state.
Focused control
Jordan Avery
Button and input shown in their focused state — the ring sits outside the border so the control stays legible underneath.
Specification
The ring renders as an outer box-shadow, so it never shifts layout and clears the rounded corner cleanly.
Focus shows only for keyboard navigation via :focus-visible — pointer clicks stay quiet. One ring, one width, one tint across every control.
8.5 × 11 · Portrait