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

Full name

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.

Rotate your phone for a larger view. Tap the slide to open it full size and zoom.

8.5 × 11 · Portrait