Our neutral scale follows Radix's 12-step semantic mapping. Each step has a job — pick by role, never by lightness. Source: Radix Colors · scale composition.
app bg
1
subtle
2
component
3
hovered
4
active
5
line
6
border
7
b. hover
8
solid
9
s. hover
10
text-2
11
text
12
Surface roles · how the steps map to UI
App background (step 1)
--app-bg · --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 border + ring
List · sidebar (step 2)
--list-item-bg-hover/active
Files
Transfers
RSS · selected
Action menu (step 3 → 4 → 5)
component-bg → -hover → -active
Download
Cast to TV
Move to…
Text · primary & secondary
--text / --text-secondary
Primary headline · step 12
Secondary body · step 11 · for metadata, hints, captions
Disabled · step 9 · for placeholders, disabled state