Design tokens

Design tokens are used in place of hard-coded values to maintain consistent and scalable design system development.

Color

Text

Token
Value
Example
Contrast
$color-text-base
#242526
Aa
15.4:1
$color-text-primary
#0262B9
Aa
6.1:1
$color-text-primary-alt
#0075C9
Aa
4.8:1
White backgrounds only
$color-text-secondary
#38C6F4
Aa
10.6:1
$color-text-secondary-dark
#0C9ED9
Aa
3:1
20px+ text only
$color-text-success
#007E44
Aa
5.2:1
$color-text-warning
#A15C00
Aa
5.2:1
$color-text-danger
#D62015
Aa
5.2:1
$color-text-info
#0262B9
Aa
6.1:1
$color-text-muted-light
#65686C
Aa
5.6:1
$color-text-muted
#53565A
Aa
7.4:1
$color-text-white
#FFFFFF
Aa
21:1

Icon

Token
Value
Example
Contrast
$color-icon-base
#3F4145
10.2:1
$color-icon-primary
#0075C9
4.8:1
$color-icon-secondary
#38C6F4
10.6:1
$color-icon-secondary-dark
#0C9ED9
3:1
$color-icon-success
#009054
4.1:1
$color-icon-warning
#B96B00
4.1:1
$color-icon-danger
#EE3026
4.1:1
$color-icon-info
#0080DC
4.1:1
$color-icon-muted-light
#8E9399
3.1:1
$color-icon-muted
#65686C
5.6:1
$color-icon-muted-dark
#53565A
7.4:1
$color-icon-white
#FFFFFF
21:1

Background

Token
Value
Example
Contrast
$color-background-base
#FFFFFF
15.4:1
$color-background-base-dark
#F4F5F6
14.1:1
$color-background-base-darker
#EDF0F2
13.4:1
$color-background-base-darkest
#DADEE2
11.4:1
$color-background-primary-light
#E0F3FF
13.5:1
$color-background-primary
#0075C9
4.8:1
$color-background-secondary-light
#EAF7FB
14:1
$color-background-secondary
#38C6F4
7.7:1
$color-background-secondary-dark
#0C9ED9
5.1:1
$color-background-success-lighter
#F1FEF8
14.8:1
$color-background-success-light
#DBFAEE
13.8:1
$color-background-success
#007E44
5.2:1
$color-background-warning-lighter
#FFF8ED
14.6:1
$color-background-warning-light
#FAECD9
13.2:1
$color-background-warning
#A15C00
5.2:1
$color-background-danger-lighter
#FFF5F5
14.4:1
$color-background-danger-light
#FFE8E5
13.1:1
$color-background-danger
#D62015
5.2:1
$color-background-info-lighter
#F5F9FC
14.4:1
$color-background-info-light
#E0F3FF
13.5:1
$color-background-info
#0075C9
4.8:1
$color-background-muted-lighter
#F8F9F9
14.6:1
$color-background-muted-light
#EDF0F2
13.4:1
$color-background-muted
#53565A
7.4:1
$color-background-black
#000000
21:1
$color-background-white
#FFFFFF
15.4:1

Border

Token
Value
Example
Contrast
$color-border-base-light
#EDF0F2
$color-border-base
#DADEE2
$color-border-base-dark
#D0D4D9
$color-border-primary
#0075C9
$color-border-secondary
#38C6F4
$color-border-secondary-dark
#0C9ED9
$color-border-success-light
#95E9C9
$color-border-success
#009054
$color-border-warning-light
#FFCC89
$color-border-warning
#B96B00
$color-border-danger-light
#FFC2BD
$color-border-danger
#EE3026
$color-border-info-light
#AEDEFF
$color-border-info
#0080DC
$color-border-muted-light
#D0D4D9
$color-border-muted
#65686C
$color-border-black
#000000
$color-border-white
#FFFFFF

Color System

Token
Value
Example
$color-grey-100
#242526
$color-grey-90
#313336
$color-grey-80
#3F4145
$color-grey-70
#53565A
$color-grey-60
#65686C
$color-grey-50
#8E9399
$color-grey-40
#ACB0B5
$color-grey-30
#D0D4D9
$color-grey-25
#DADEE2
$color-grey-20
#EDF0F2
$color-grey-15
#F4F5F6
$color-grey-10
#F8F9F9
$color-red-100
#600D08
$color-red-90
#80130C
$color-red-80
#A21810
$color-red-70
#D62015
$color-red-60
#EE3026
$color-red-50
#FF645C
$color-red-40
#FF9086
$color-red-30
#FFC2BD
$color-red-20
#FFE8E5
$color-red-10
#FFF5F5
$color-pink-100
#451726
$color-pink-90
#661430
$color-pink-80
#8C0E38
$color-pink-70
#B30C44
$color-pink-60
#DB1A5B
$color-pink-50
#F74F87
$color-pink-40
#FA8EB2
$color-pink-30
#FCC7D9
$color-pink-20
#FCE8EF
$color-pink-10
#FCF5F7
$color-purple-100
#371C52
$color-purple-90
#4D2378
$color-purple-80
#642B9E
$color-purple-70
#7E40BD
$color-purple-60
#9557D4
$color-purple-50
#B277ED
$color-purple-40
#CDA3F7
$color-purple-30
#E2CDF7
$color-purple-20
#F2EBFA
$color-purple-10
#FAF7FC
$color-indigo-100
#1E1E57
$color-indigo-90
#29298C
$color-indigo-80
#3434AC
$color-indigo-70
#4646DA
$color-indigo-60
#5959E0
$color-indigo-50
#8484FA
$color-indigo-40
#A8A8FF
$color-indigo-30
#CFCFFF
$color-indigo-20
#EDEDFF
$color-indigo-10
#F7F7FF
$color-navy-100
#083176
$color-navy-90
#08379B
$color-navy-80
#0047BB
$color-navy-70
#0A60F0
$color-navy-60
#2072F8
$color-navy-50
#6099F1
$color-navy-40
#88B6F9
$color-navy-30
#C0D7FA
$color-navy-20
#E6F0FF
$color-navy-10
#F5F8FC
$color-blue-100
#002D54
$color-blue-90
#004078
$color-blue-80
#00529A
$color-blue-75
#0262B9
$color-blue-70
#0075C9
$color-blue-60
#0080dC
$color-blue-50
#38ABFF
$color-blue-40
#70C3FF
$color-blue-30
#AEDEFF
$color-blue-20
#E0F3FF
$color-blue-10
#F5F9FC
$color-cyan-100
#002E4D
$color-cyan-90
#004368
$color-cyan-80
#00557E
$color-cyan-70
#0073A5
$color-cyan-60
#0986B6
$color-cyan-50
#0C9ED9
$color-cyan-40
#38C6F4
$color-cyan-30
#A3E5FA
$color-cyan-20
#DDF5FD
$color-cyan-15
#EAF7FB
$color-cyan-10
#F1FBFE
$color-teal-100
#093134
$color-teal-90
#07454B
$color-teal-80
#08575E
$color-teal-70
#027786
$color-teal-60
#038B98
$color-teal-50
#0DC7D8
$color-teal-40
#4ED8E4
$color-teal-30
#9DE9F0
$color-teal-20
#DCF7FA
$color-teal-10
#F2FCFD
$color-green-100
#03381E
$color-green-90
#044D28
$color-green-80
#056234
$color-green-70
#007E44
$color-green-60
#009054
$color-green-50
#26D98F
$color-green-40
#76EAB8
$color-green-30
#95E9C9
$color-green-20
#DBFAEE
$color-green-10
#F1FEF8
$color-yellow-100
#4E2E00
$color-yellow-90
#663B00
$color-yellow-80
#864D00
$color-yellow-70
#A15C00
$color-yellow-60
#B96B00
$color-yellow-50
#E58500
$color-yellow-40
#FF9E18
$color-yellow-30
#FFCC89
$color-yellow-20
#FAECD9
$color-yellow-10
#FFF8ED
$color-orange-100
#5B2600
$color-orange-90
#723204
$color-orange-80
#974308
$color-orange-70
#B35009
$color-orange-60
#C96010
$color-orange-50
#E77528
$color-orange-40
#F79950
$color-orange-30
#FACAA8
$color-orange-20
#FDE7D8
$color-orange-10
#FEF6F0
$color-black
#000000
$color-white
#FFFFFF

Font

Font family

Token
Value
Example
$font-family-base
'Inter', Arial, Helvetica, Verdana, sans-serif
Aa
$font-family-mono
Menlo, Consolas, 'Liberation Mono', Courier, monospace
Aa

Font weight

Token
Value
Example
$font-weight-light
300
Aa
$font-weight-normal
400
Aa
$font-weight-semi-bold
600
Aa
$font-weight-bold
700
Aa
$font-weight-extra-bold
800
Aa

Font size - text

Token
Value
Example
$font-size-base
0.875rem
14px
Aa
$font-size-2xs
0.6875rem
11px
Aa
$font-size-xs
0.75rem
12px
Aa
$font-size-sm
0.8125rem
13px
Aa
$font-size-md
0.875rem
14px
Aa
$font-size-lg
1rem
16px
Aa
$font-size-xl
1.125rem
18px
Aa

Font size - headings

Token
Value
Example
$font-size-h6
0.875rem
14px
Aa
$font-size-h5
1rem
16px
Aa
$font-size-h4
1.125rem
18px
Aa
$font-size-h3
1.5rem
24px
Aa
$font-size-h2
2rem
32px
Aa
$font-size-h1
3rem
48px
Aa

Font size - system

Token
Value
Example
$font-size-1
0.6875rem
11px
Aa
$font-size-2
0.75rem
12px
Aa
$font-size-3
0.8125rem
13px
Aa
$font-size-4
0.875rem
14px
Aa
$font-size-5
1rem
16px
Aa
$font-size-6
1.125rem
18px
Aa
$font-size-7
1.25rem
20px
Aa
$font-size-8
1.375rem
22px
Aa
$font-size-9
1.5rem
24px
Aa
$font-size-10
1.75rem
28px
Aa
$font-size-11
2rem
32px
Aa
$font-size-12
2.25rem
36px
Aa
$font-size-13
2.5rem
40px
Aa
$font-size-14
3rem
48px
Aa
$font-size-15
3.5rem
56px
Aa
$font-size-16
4rem
64px
Aa
$font-size-17
4.5rem
72px
Aa
$font-size-18
5rem
80px
Aa
$font-size-19
6rem
96px
Aa
$font-size-20
7.5rem
120px
Aa

Border radius

Token
Value
Example
$border-radius-base
4px
0.25rem
$border-radius-sharp
0
$border-radius-circle
50%

Opacity

Token
Value
Example
$opacity-0
0
$opacity-20
0.2
$opacity-40
0.4
$opacity-60
0.6
$opacity-80
0.8
$opacity-100
1

Z-index

Token
Value
$z-index-0
0
$z-index-10
10
$z-index-20
20
$z-index-30
30
$z-index-40
40
$z-index-50
50
$z-index-60
60
$z-index-70
70
$z-index-80
80
$z-index-90
90