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 · --component-bg-active · --line
Foundations, the row is everything
The tier-4 web-TV artboard, rendered with the shipping system/tv.css stylesheet, the same row anatomy and focus fill as the shipped tv-native app, which ADR 0009 makes the reference look for every TV surface. The artboard is a true 1:1 1920×1080 frame: a value measured here is the value on the TV.

The table below carries the same numbers as the tv token group, which stays the source of truth: add a value there first, then use it.
This is a web binding. tvOS and Android TV inherit the scale, colour and type below but take every control from their own platform, see Platform · Apple and Platform · Android. Roku inherits the same tokens with room for put.io's own SceneGraph conventions.

Your Files

Refresh
Name
__tears_of_steel__
544.89 MB
Movies
412 GB
The.Wire.S03E04.Hamsterdam.1080p.BluRay.x264-DEMAND.mkv
3.42 GB
Row anatomy · true 1:1 values at 1920×1080 · from tv-native theme.tsx · list-item.tsx
Padding
32px
uniform · spacing.md
Radius
--radius-tv
12px · one radius for all TV surfaces
Title
36px · 400
GT America Rg · text.body
Sub
32px · GT America Rg
--text-secondary · 4px above · tnum
Icon
48×48 · #fdce45
all file types · text.label size
Gap
32px
icon ↔ text · spacing.md
Accessory
36px chevron
48px for icon accessories
Row gap
0
rows sit flush · FlashList
Header padding
53.6 / 76.8 / 32px
md + safe.top · safe.x · md
Focused bg
var(--component-bg-active)
solid fill · no lift
Focus scale
none
row sits still · list rhythm kept
Focus shadow
none
fill alone carries focus
Content rules · put.io ships no metadata
Filenames are the title. Never parse 1080p / HEVC / WEB-DL into pretty pills.

Never invent a poster. Watched videos show the muted eye icon trailing, that's it.
Rule
tvOS · tier 2
Android TV · tier 2
Roku · tier 3
Web TV · tier 4
Components from
Apple HIG, SwiftUI stock controls
Material 3 for TV, Compose stock controls
SceneGraph + put.io's own conventions
this design system, restrained
Focus owned by
the platform, system focus treatment
the platform, M3 focus state layer
put.io, SceneGraph focus ring
put.io, --component-bg-active fill
Filenames
raw, never parsed
raw, never parsed
raw, never parsed
raw, never parsed
Folder icon
Phosphor folder · --yellow-solid
Phosphor folder · --yellow-solid
Phosphor folder · --yellow-solid
Phosphor folder · --yellow-solid
Numerics
GT America tabular, no mono on TV
GT America tabular
GT America proportional: SceneGraph cannot select tnum
GT America tabular
Radius
tv.radius 12px
tv.radius 12px
tv.radius 12px
--radius-tv 12px
Quality / codec pills
never
never
never
never
Posters / artwork
never · Continue Watching is list rows + a progress bar
never · same
never · flat tiles
never · flat tiles