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	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	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	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