Tier 2Tier 2 · Android TV: tokens only. Components, focus and navigation come from Google's TV design (M3 / Compose for TV). The switch is M3's, 52x32dp at 2x, yellow because primary reads the graph, not because anyone drew it yellow.primary=--yellow-solid · onPrimary=--primary-foreground · surfaceContainerHighest=--component-bg-active
Tier-2 binding. Account uses M3 switches, list rows and focus behaviour with colours from the token graph.
Account is the settings screen
Identity header (avatar tile, username, disk line with its slim quota bar), then settings rows grouped by plain caption headers. Chevron rows open a centred choice dialog; boolean rows carry the M3 switch, which reads primary when on.
Logout is a row at the end of the list, not a header pill: on this tier every action is a list destination the drawer-and-list geometry can reach.
Account
99 GB of 100 GB free
Playback settings
Choose your proxy
Amsterdam (Direct)
Video playback type
HLS (default)
Show subtitles
Search history
Account
Log out
Account · drawer destinationThe focused row scales 1.02 and elevates. Both switches read primary: yellow on, outlined surfaceContainerHighest off.
avatar128px tile, radius 12, on surfaceContainer. Invader default, gravatar when set
disk line28px onSurfaceVariant + 208x8 quota bar: primary on --solid
sectionscaption headers: Playback settings, Account. Search settings fold into the boolean rows
switchM3, 104x64px at 2x, 4px outline off, handle 32 to 48 on select. Never the iOS-green RN switch
choice rowschevron rows open the centred M3 dialog (radius 28dp), options as focusable full-width buttons
logoutlast row, sign-out glyph. No confirmation dialog
Contract: platforms/android/DESIGN.md
Do not use Material's two-pane preference template or keep the RN green switch. One list, M3 controls, put.io colours through the scheme.