Tier 0Foundations · the @putdotio/design token graph. Binds all four tiers, values only, never a component recipe.--border-hover · --radius-lg · --shadow-lg · --list-item-bg-hover
Surface roles · how the 12-step scale maps to UI
Each step has a job, pick by role, never by lightness. Works the same
in both modes: every demo below consumes var(--bg),
var(--component-bg), var(--border) etc., so
toggling the theme flips them coherently.
App background · step 1
--app-bg
page · canvas · the deepest layer
Elevated surface · step 3
--component-bg
Share link
Modals, popovers, dropdowns, sheets.
Input field · step 1 + 7
--app-bg + --border
Default
Focused, step 8 ring
List · sidebar · step 2
--list-item-bg-*
Files
Transfers
RSS · selected
Action menu · step 3 → 4 → 5
--component-bg-*
Download
Cast to TV
Move to…
Text ramp · steps 9, 11, 12
--text / --text-secondary
Primary headline · step 12
Secondary body · step 11, metadata, hints, captions.