| Section | Role | Value | |
|---|---|---|---|
| ui-background | Main page background | Gray 10#f4f4f4 |
 |
| ui-background | Container background | White#fffff |
 |
| ui-background | Background overlay | Gray 100 @ 50% opacity#161616 |
 |
| ui-background | Sidebar background | White#fffff |
|
| ui-background | Drawer | White#fffff |
|
| ui-border | Light contrast border | Gray 20#e0e0e0 |
 |
| ui-border | Medium contrast border | Gray 50#8d8d8d |
 |
| ui-border | High contrast border | Gray 100#161616 |
 |
| button | Primary interactive color; Primary buttons; Text buttons; Active elements |
Blue 60#0066ff |
 |
| button | Secondary button border | Blue 60#0066ff |
 |
| text | Primary text; Body copy; Headers |
Gray 100#161616 |
 |
| text | Secondary text; Input labels |
Gray 70#525252 |
 |
| text | Placeholder text | Gray 40#a8a8a8 |
 |
| text | Text on interactive colors | White#fffff |
 |
| text | Helper text | Gray 60#6f6f6f |
 |
| text | Disabled text; Disabled label; Disabled icons |
Gray 30#c6c6c6 |
 |
| text | Error messages | Red 60#da1e28 |
 |
| icon | Primary icons | Gray 100#161616 |
|
| icon | Secondary icons | Gray 70#525252 |
|
| icon | Icons on interactive colors | White#fffff |
|
| status | Error | Red 60#da1e28 |
|
| status | Success | Green 50#24a148 |
 |
| status | Warning | Yellow#f1c21b |
 |
| status | Information | Blue 60#0066ff |
 |
State
| Section | Role | Value | |
|---|---|---|---|
| focus | Focus border; Focus underline |
Blue 60#0066ff |
 |
| hover | Interactive hover | Blue 70#0052cc |
 |
| ui-hover | Hover on white background; Transparent background hover |
Gray 20#e0e0e0 |
 |
| active | Interactive active | Blue 80#001bb4 |
 |
| disabled | Disabled backgrounds; Disabled border |
Gray 20#e0e0e0 |
|
| visited link | Visited links | Purple 60#8a3ffc |
 |