put.io has three focus contexts: keyboard (web), pointer (web, no ring), D-pad (TV). Buttons and navigation use the brand-yellow halo; text entry uses the quiet field ring; TV focus scales for distance.
Keyboard · web
Tab / arrows over buttons, inputs, links
Buttons use the 3px yellow halo at 35% alpha. Fields use --field-ring so forms stay calm while tabbing. Triggered by :focus-visible, not :focus.
Pointer · web
Mouse hover & click
No halo. Hover lifts background to --yellow-solid-hover on primary, or --component-bg-hover on default. Cursor carries the intent.
D-pad · TV
Apple TV · Android TV · Roku · Smart-TV web
tile
focused
scale(1.06) + 1px yellow halo at 18% alpha + 14px drop shadow. Engine varies per platform (CSS on web / AndroidTV-web, focusable group on tvOS, BrightScript focus on Roku) — the visual is identical.
Spec — values lifted from system/tokens.css
Ring color--shadow-focus-colorBrand yellow at 35% alpha. hsla(47, 100%, 65%, 0.35).
Ring · button (web)--shadow-focus3px yellow halo via box-shadow. Border stays unchanged.
Ring · field (web)--field-ringFields swap to --field-border-focus and a 1px ring; no yellow glow.
Ring · TV tilescale(1.06) + 1px halo10-foot UI needs more presence. Scale is the affordance; the halo is the confirmation.
Trigger:focus-visibleNever :focus — that paints rings on clicks users don't want.