| Variable name |
Hex |
Color |
|
primary
|
|
$color-brand-primary-10
|
#fbe5e5
|
|
|
$color-brand-primary-15
|
#fad9d9
|
|
|
$color-brand-primary-20
|
#f8cccc
|
|
|
$color-brand-primary-30
|
#f5b2b2
|
|
|
$color-brand-primary-60
|
#eb6768
|
|
|
$color-brand-primary-100
|
#de0000
|
|
|
$color-brand-primary-120
|
#b10000
|
|
|
$color-brand-primary-140
|
#850000
|
|
|
$color-brand-primary-160
|
#580000
|
|
|
$color-brand-primary-06
|
#fdebeb
|
|
|
secondary
|
|
$color-brand-secondary-10
|
#e5eaef
|
|
|
$color-brand-secondary-15
|
#d9e0e7
|
|
|
$color-brand-secondary-20
|
#ccd6df
|
|
|
$color-brand-secondary-30
|
#b2c1cf
|
|
|
$color-brand-secondary-60
|
#4d6e90
|
|
|
$color-brand-secondary-100
|
#003060
|
|
|
$color-brand-secondary-120
|
#00264c
|
|
|
$color-brand-secondary-140
|
#001c39
|
|
|
$color-brand-secondary-160
|
#001326
|
|
|
$color-brand-secondary-06
|
#f0f3f6
|
|
|
highlight
|
|
$color-brand-highlight-10
|
#e5f0ff
|
|
|
$color-brand-highlight-20
|
#cce2ff
|
|
|
$color-brand-highlight-30
|
#b2d3ff
|
|
|
$color-brand-highlight-60
|
#66a9ff
|
|
|
$color-brand-highlight-100
|
#006fff
|
|
|
$color-brand-highlight-120
|
#0058cc
|
|
|
$color-brand-highlight-140
|
#004299
|
|
|
$color-brand-highlight-160
|
#002c66
|
|
|
$color-brand-highlight-06
|
#f0f7ff
|
|
|
success
|
|
$color-brand-success-10
|
#e8f6f1
|
|
|
$color-brand-success-20
|
#d3eee4
|
|
|
$color-brand-success-30
|
#bce5d6
|
|
|
$color-brand-success-60
|
#7accad
|
|
|
$color-brand-success-100
|
#22aa77
|
|
|
$color-brand-success-120
|
#1b885f
|
|
|
$color-brand-success-140
|
#146647
|
|
|
$color-brand-success-160
|
#0d442f
|
|
|
$color-brand-success-06
|
#f2faf7
|
|
|
warning
|
|
$color-brand-warning-10
|
#fff1e5
|
|
|
$color-brand-warning-20
|
#ffe4cc
|
|
|
$color-brand-warning-30
|
#ffd6b2
|
|
|
$color-brand-warning-60
|
#ffad66
|
|
|
$color-brand-warning-100
|
#ff7700
|
|
|
$color-brand-warning-120
|
#cc5f00
|
|
|
$color-brand-warning-140
|
#994700
|
|
|
$color-brand-warning-160
|
#662f00
|
|
|
$color-brand-warning-06
|
#fff7f0
|
|
|
info
|
|
$color-brand-info-10
|
#fff7e5
|
|
|
$color-brand-info-20
|
#fff0cc
|
|
|
$color-brand-info-30
|
#ffe9b2
|
|
|
$color-brand-info-60
|
#ffd366
|
|
|
$color-brand-info-100
|
#ffb600
|
|
|
$color-brand-info-120
|
#cc9100
|
|
|
$color-brand-info-140
|
#996d00
|
|
|
$color-brand-info-160
|
#664800
|
|
|
$color-brand-info-06
|
#fffbf0
|
|
|
accent
|
|
$color-brand-accent-10
|
#edeaed
|
|
|
$color-brand-accent-30
|
#c7bdc7
|
|
|
$color-brand-accent-60
|
#8d7b8e
|
|
|
$color-brand-accent-100
|
#412343
|
|
|
$color-brand-accent-120
|
#341c35
|
|
|
$color-brand-accent-140
|
#271528
|
|
|
$color-brand-accent-160
|
#1a0e1a
|
|
|
$color-brand-accent-06
|
#f4f2f4
|
|
|
fade
|
|
$color-brand-fade-10
|
#f6f6f6
|
|
|
$color-brand-fade-20
|
#edeeee
|
|
|
$color-brand-fade-30
|
#e4e5e6
|
|
|
$color-brand-fade-60
|
#c9cdcd
|
|
|
$color-brand-fade-100
|
#a5abac
|
|
|
$color-brand-fade-120
|
#848889
|
|
|
$color-brand-fade-140
|
#636667
|
|
|
$color-brand-fade-160
|
#424444
|
|
|
$color-brand-fade-06
|
#fafafa
|
|
|
gradient
|
|
$color-brand-gradient-primary
|
#bb0044
|
|
|
$color-brand-gradient-secondary
|
#154093
|
|
|
$color-brand-gradient-success
|
#20af93
|
|
|
$color-brand-gradient-warning
|
#ff7700
|
|