Width
756px
snapped to the 3px grid
The Options button is the platform's options affordance
Every modal is a Roku
Dialog. It handles the remote, dismiss, focus wrap and scrim. put.io supplies the chrome via DialogStyle.brs, which imports after UiMetrics.brs: the metrics test asserts that order, because DialogStyle reads the grid helpers at load.Focused items take the same fill and 3px edge as a list row, so focus reads identically inside and outside a dialog.
Play uses fill weight.The Options button is the control Roku users know and the one the remote has.
Do not invent a long-press.
Do not invent a long-press.
9:41
Your Files / Films
2024
12 items
Folder
The.Wire.S03E04.Back.Burners.1080p.BluRay.x264-DEMAND.mkv
resume at 21:04
3.42 GB
Options
Resume from 21:04
Play from start
Subtitles, English
Mark as watched
AppDialogCentred by
uiCenterX / uiCenterY, which snap to the 3px grid rather than dividing raw.Border
3px
borderHover · 1px fails the test
Shadow
12px offset
uiShadowOffset · no blur
Heading
45 bold
Typography h1
Item
36 regular
Typography body
Item glyph
42px
primary, or textMuted when incidental
Focus
fill + 3px edge
same recipe as a list row
Scrim
overlayFull
surface.dark.overlayFull
Per-control detail, the token map and the full don't list live in
platforms/roku/DESIGN.md.Do not build a custom modal.
Tier 3's permission covers the rows Roku does not ship, not the modals it does.
Dialog handles the remote, back button and focus containment: three things easy to get subtly wrong and invisible without a real device.Tier 3's permission covers the rows Roku does not ship, not the modals it does.