Tier 4Tier 4 · Web TV (tv.put.io, Tizen, webOS). The design system as on web, restrained to a generic list-first 10-foot interface. The shipped tv-native app is the reference look; Roku matches it directly and the native TV tiers align with the same family feel inside their own control conventions.--yellow-solid · --tv-video-bg · --primary-foreground · --text
Focus, a fill, never a lift
TV focus is one treatment everywhere: the surface fills with --component-bg-active. No scale, no shadow, no halo, no white-invert. Rows take the fill alone; chrome (header action buttons) takes the fill and steps its border from --border to --border-hover, because a button already carries a border at rest.

Label and icon stay --text in both states. Source: list-item.tsx · button.tsx.
01 · Row focus .row.focused
fill only
Movies
412 GB
__tears_of_steel__
544.89 MB
Rows carry no border at rest, so focus is the fill alone, --component-bg-active, no scale, no shadow, no halo. Exactly as tv-native's list-item renders it, so list rhythm is preserved.
02 · Chrome focus .btn.focused
fill + border step
Refresh
Name
Movies
412 GB
Same fill as a row, plus a border step, --border--border-hover. The label stays --text; there is no inversion and no shadow.

The list is not dimmed while chrome holds focus.
Platform variation · implementation, not redesign
The visual is identical across all four TV platforms: every column below is the same value, because list-item.tsx and button.tsx are cross-platform React Native with no per-platform divergence. Only the engine drawing it differs.

Focus applies instantly. pressable.tsx is a bare re-export of RN Pressable: no Animated, no timing curve, and tvParallaxProperties sets enabled: false.
What
tvOS
Android TV
Roku
Smart-TV web
Focus engine
UIFocusGuide / Apple Focus
Compose FocusRequester
SceneGraph focus
spatial-nav polyfill
Row · surface
solid --component-bg-active
solid --component-bg-active
solid --component-bg-active
solid --component-bg-active
Row · shadow
none
none
none
none
Row · scale
none · parallax disabled
none · parallax disabled
none · parallax disabled
none · parallax disabled
Chrome · focus
bg-active + border-hover
bg-active + border-hover
bg-active + border-hover
bg-active + border-hover
Transition
none · instant
none · instant
none · instant
none · instant