Design System Dev Resource
Menu

Colors

Click a Sass variable, CSS custom variable, or hex color to copy it to your clipboard.

Core Blue
01 Dark
$color-core-blue-01-dark
var(--core-1)
#03060d
02 Main
$color-core-blue
var(--core)
#00205b
03 Light
$color-core-blue-03-light
var(--core-3)
#093582
04 Light
$color-core-blue-04-light
var(--core-4)
#1c4ea5
05 Light
$color-core-blue-05-light
var(--core-5)
#3a6cc1
06 Light
$color-core-blue-06-light
var(--core-6)
#628dd6
07 Light
$color-core-blue-07-light
var(--core-7)
#8eafe6
08 Light
$color-core-blue-08-light
var(--core-8)
#b7ccf0
09 Light
$color-core-blue-09-light
var(--core-9)
#d6e2f7
10 Light
$color-core-blue-10-light
var(--core-10)
#ebf0fa
11 Light
$color-core-blue-11-light
var(--core-11)
#f6f7fa
Accent Blue
01 Dark
$color-accent-blue-01-dark
var(--accent-1)
#006894
02 Main
$color-accent-blue
var(--accent)
#007eb4
03 Light
$color-accent-blue-03-light
var(--accent-3)
#0b8ec6
04 Light
$color-accent-blue-04-light
var(--accent-4)
#20a0d6
05 Light
$color-accent-blue-05-light
var(--accent-5)
#41b2e3
06 Light
$color-accent-blue-06-light
var(--accent-6)
#6cc6ed
07 Light
$color-accent-blue-07-light
var(--accent-7)
#99d9f5
08 Light
$color-accent-blue-08-light
var(--accent-8)
#c1e9fa
09 Light
$color-accent-blue-09-light
var(--accent-9)
#ddf3fd
10 Light
$color-accent-blue-10-light
var(--accent-10)
#eefaff
11 Light
$color-accent-blue-11-light
var(--accent-11)
#f5fcff
Banner Black
01 Dark
$color-banner-black-01-dark
var(--black-1)
#0b0c0d
02 Main
$color-banner-black
var(--black)
#303235
03 Light
$color-banner-black-03-light
var(--black-3)
#56595d
04 Light
$color-banner-black-04-light
var(--black-4)
#7b7f84
05 Light
$color-banner-black-05-light
var(--black-5)
#9ca0a5
06 Light
$color-banner-black-06-light
var(--black-6)
#b8bbbf
07 Light
$color-banner-black-07-light
var(--black-7)
#cfd1d3
08 Light
$color-banner-black-08-light
var(--black-8)
#e1e1e2
09 Light
$color-banner-black-09-light
var(--black-9)
#ededee
10 Light
$color-banner-black-10-light
var(--black-10)
#f5f5f5
11 Light
$color-banner-black-11-light
var(--black-11)
#fafafa
UI States
Error
$color-error
var(--error)
#da291c
Success
$color-success
var(--success)
#008522
Info
$color-info-alert
var(--alert)
#0077c8
White
$color-white
var(--white)
#ffffff