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 | |
|---|---|---|---|---|
|
|
#b1380b
|
Danger status icon color (light theme) |
|
|
|
|
#f0561d
|
Danger status icon color (dark theme) |
|
Caution
| Ex. | Token name | Value | Use case | |
|---|---|---|---|---|
|
|
#ca6c0f
|
Caution status icon color (light theme) |
|
|
|
|
#f5921b
|
Caution status icon color (dark theme) |
|
Warning
| Ex. | Token name | Value | Use case | |
|---|---|---|---|---|
|
|
#dca614
|
Warning status icon color (light theme) |
|
|
|
|
#ffcc17
|
Warning status icon color (dark theme) |
|
Default
| Ex. | Token name | Value | Use case | |
|---|---|---|---|---|
|
|
#4d4d4d
|
Default status icon color (light theme) |
|
|
|
|
#4d4d4d
|
Default status icon color (dark theme) |
|
Neutral
| Ex. | Token name | Value | Use case | |
|---|---|---|---|---|
|
|
#4d4d4d
|
Neutral status icon color (light theme) |
|
|
|
|
#c7c7c7
|
Neutral 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 this page.
Feedback
To give feedback about anything on this page, contact us.
Other libraries
To learn more about our other libraries, visit the getting started page.
