| Example | Description | Token |
|---|---|---|
|
#4D1979 |
Primary |
$primary
var(--color-primary)
|
|
#6A23A7 |
Primary-2 |
$primary-2
var(--color-primary-2)
|
|
#D5F2EF |
Secondary |
$secondary
var(--color-secondary)
|
|
#A7D0D9 |
Secondary-2 |
$secondary-2
var(--color-secondary-2)
|
|
#F29D52 |
Tertiary |
$tertiary
var(--color-tertiary)
|
|
#FFFFFF |
Neutral 0 |
$neutral-0
var(--color-neutral-0)
|
|
#F3F3F3 |
Neutral 20 |
$neutral-20
var(--color-neutral-20)
|
|
#E2E6E6 |
Neutral 40 |
$neutral-40
var(--color-neutral-40)
|
|
#C2C8C8 |
Neutral 60 |
$neutral-60
var(--color-neutral-60)
|
|
#929A9A |
Neutral 80 |
$neutral-80
var(--color-neutral-80)
|
|
#000000 |
Neutral 100 |
$neutral-100
var(--color-neutral-100)
|
|
#2D0F47 |
Text-black |
$text-black
var(--color-text-black)
|
|
#3C145F |
Primary-gradient-start |
$primary-gradient-start
var(--color-primary-gradient-start)
|
|
#6A23A7 |
Primary-gradient-end |
$primary-gradient-end
var(--color-primary-gradient-end)
|
|
#ebe16f |
Warning Background |
$warning-background
var(--color-warning-background)
|
|
#ffcc00 |
Warning Border |
$warning-border
var(--color-warning-border)
|
|
#fbe3e4 |
Emergency Background |
$emergency-background
var(--color-emergency-background)
|
|
#d0021b |
Emergency Border |
$emergency-border
var(--color-emergency-border)
|
|
#e6efc2 |
Safe Background |
$safe-background
var(--color-safe-background)
|
|
#90ac23 |
Safe Border |
$safe-border
var(--color-safe-border)
|
|
#d5edf8 |
Announcement Background |
$announcement-background
var(--color-announcement-background)
|
|
#5aafee |
Announcement Border |
$announcement-border
var(--color-announcement-border)
|