Icon tokens
| Ex. | Token name | Value | Use case | |
|---|---|---|---|---|
|
|
16px |
16px icon box |
|
|
|
|
24px |
24px icon box |
|
|
|
|
32px |
32px icon box |
|
|
|
|
40px |
40px icon box |
|
|
|
|
48px |
48px icon box |
|
|
|
|
64px |
64px icon box |
|
|
|
|
80px |
80px icon box |
|
|
|
|
96px |
96px icon box |
|
|
|
|
128px |
128px icon box |
|
Color
Theme Tokens
Primary
| Ex. | Token name | Value | Use case | |
|---|---|---|---|---|
|
|
#ee0000
|
|
||
|
|
#ee0000
|
|
Secondary
| Ex. | Token name | Value | Use case | |
|---|---|---|---|---|
|
|
#151515
|
|
||
|
|
#ffffff
|
|
Subtle
Subtle icons (like the close button in the dialog component) are used in both light and dark themes and also have interactive states.
| Ex. | Token name | Value | Use case | |
|---|---|---|---|---|
|
|
#707070
|
|
||
|
|
#a3a3a3
|
|
Status
Danger
| Ex. | Token name | Value | Use case | |
|---|---|---|---|---|
|
|
#f0561d
|
Danger status icon color (light theme) |
|
|
|
|
#f4784a
|
Danger status icon color (dark theme) |
|
Warning
| Ex. | Token name | Value | Use case | |
|---|---|---|---|---|
|
|
#ca6c0f
|
Warning status icon color (light theme) |
|
|
|
|
#f5921b
|
Warning status icon color (dark theme) |
|
Default
| Ex. | Token name | Value | Use case | |
|---|---|---|---|---|
|
|
#4d4d4d
|
Default status icon color (light theme) |
|
|
|
|
#a3a3a3
|
Default status icon color (dark theme) |
|
Info
| Ex. | Token name | Value | Use case | |
|---|---|---|---|---|
|
|
#5e40be
|
Info status icon color (light theme) |
|
|
|
|
#b6a6e9
|
Info status icon color (dark theme) |
|
Success
| Ex. | Token name | Value | Use case | |
|---|---|---|---|---|
|
|
#3d7317
|
Success status icon color (light theme) |
|
|
|
|
#87bb62
|
Success status icon color (dark theme) |
|
Other libraries
To learn more about our other libraries, visit the getting started page.
