| 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 | Gray 100 #161616 |
 |
| 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
| State | 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 #003d99 |
 |
| disabled | Disabled backgrounds; Disabled border |
Gray 20 #e0e0e0 |
|
| visited link | Visited links | Purple 60 #5639d5 |
 |