Focus — two voices, one accent
Row focus is calm — soft glass pill with a 1px yellow halo. Big surfaces (file rows, settings rows, picker items) stay calm because there are many of them on screen at once. Chrome focus is loud — small things (action pills, nav tabs, segmented controls) invert to a luminous white pill so they shout at three metres. Lift values from tvos.css L155 – L307.
01 · Row focus .row.focused
subtle
__tears_of_steel__
544.89 MB
Movies
38 items · 412 GB
Sintel.mp4
634.5 MB
Big surfaces stay calm when focused. Soft glass pill (10% white), 1px yellow halo at 18%, drop shadow. No scale — the row sits in place so list rhythm is preserved.
02 · Chrome focus .btn.focused · .tab.focused
loud
Files
Search
History
Account
kai

Your Files

Refresh
Name
Movies
38 items · 412 GB
Small chrome inverts loudly — luminous white pill with black text, 16px drop shadow. Only one piece of chrome focused per screen, so it can SHOUT at three metres without the screen feeling busy.
Platform variation · implementation, not redesign
The visual is identical across all four TV platforms. The engine drawing the focus state changes; the look doesn't.
What
tvOS
Android TV
Roku
Smart-TV web
Focus engine
UIFocusGuide / Apple Focus
Compose FocusRequester
SceneGraph focus
spatial-nav polyfill
Row · surface
Liquid Glass · 10% white
solid #1a1a1a (no blur)
solid · flat tint
solid · perf budget
Row · halo
1px · #fdce45 · 18% alpha
1px · #fdce45 · 18% alpha
2px · #fdce45 · drawn ring
1px · #fdce45 · 18% alpha
Row · scale
none · row rhythm preserved
none
none (perf)
none
Chrome · focus
white pill invert
white pill invert
yellow fill · black text
white pill invert
Transition
220ms ease-out
200ms FastOutSlowIn
step (no ease)
200ms ease-out