Tier 4Tier 4 · TV (Generic): tv.put.io, Tizen, webOS. The design system as on web but restrained. Built from apps/tv-native, the same React Native codebase that ships Android TV, so the two tiers match by construction.--app-bg · --text · --text-secondary · --component-bg-active · --yellow-solid · --solid · --radius-tv
Video playervideo-player/VideoPlayershared with Android TV
Controls sit on one opaque bar at the bottom, not a gradient scrim. They auto-hide after 3 seconds and stay up while paused (visible = controlsVisible || paused). The seek bar is the default-focused control.
The.Wire.S03E04.Back.Burners.1080p.BluRay.x264-DEMAND.mkv
21:04
58:12
Playing, seek bar focusedThumb is visible only here. Unfocused, it fades to nothing
The.Wire.S03E04.Back.Burners.1080p.BluRay.x264-DEMAND.mkv
Subtitles
21:04
58:12
Paused, Subtitles focusedThumb gone, label appears above the button, pause glyph beside the time
BufferingCentred indicator, no scrim, controls hidden
baropaque rgba(0,0,0,.75), full width, bottom
paddingspacing.sm top, overscan safe margins on the sides and bottom
title2 lines maximum, maxWidth 80%
buttonsLanguage, Subtitles, Speed. Right-aligned, label appears on focus only
conditionalLanguage shows when audio tracks > 1; Subtitles when text tracks > 0; Speed always
track12px. Progress --yellow-solid, remainder --solid
thumb36x36, 4px rgba(255,255,255,.25) border. Opacity 0 unless the slider is focused
timescurrent left with a pause glyph, duration right
seek step15s x press count, accelerating under 500ms between presses
auto-hide3000ms; suppressed while paused
Do not. Show the thumb when the slider is unfocused, or use a gradient scrim. The bar is opaque so a 10-foot viewer can read the title over any frame.
Contract: platforms/tv-generic/DESIGN.md