Tokens

These are all of the values defined in our tokens.

Color

Token	Value
colors.action	#495ED4
colors.black	#212123
colors.blue.1	#EDF4F7
colors.blue.2	#A9D6EA
colors.blue.bright	#495ED4
colors.blue.dark	#0C1464
colors.green.1	#E9F7EC
colors.green.2	#C0E2C5
colors.green.3	#00866A
colors.green.4	#1B674D
colors.grey.1	#F6F6F6
colors.grey.2	#E2E2E2
colors.grey.3	#C2C2C2
colors.grey.4	#A1A1A1
colors.grey.dark	#424244
colors.grey.focus	#A1A1A1
colors.none	transparent
colors.purple.1	#EDEBF6
colors.purple.2	#CCCCED
colors.purple.3	#7D61B3
colors.purple.4	#543A89
colors.red.1	#F5E9E5
colors.red.2	#EFCABB
colors.red.3	#C55236
colors.red.4	#9B3921
colors.sequential.blue.1	#1e405d
colors.sequential.blue.2	#204e73
colors.sequential.blue.3	#205c89
colors.sequential.blue.4	#1f6ba0
colors.sequential.blue.5	#1b7ab7
colors.sequential.blue.6	#1389cf
colors.sequential.blue.7	#0099e8
colors.sequential.darkBlue.1	#9389ad
colors.sequential.darkBlue.2	#8074a3
colors.sequential.darkBlue.3	#6e6099
colors.sequential.darkBlue.4	#5a4d8f
colors.sequential.darkBlue.5	#463a84
colors.sequential.darkBlue.6	#2f287a
colors.sequential.darkBlue.7	#0d1670
colors.sequential.grey.0	#c6c6c6
colors.sequential.orange.1	#472917
colors.sequential.orange.2	#603418
colors.sequential.orange.3	#7b3f18
colors.sequential.orange.4	#964a17
colors.sequential.orange.5	#b15514
colors.sequential.orange.6	#ce610f
colors.sequential.orange.7	#eb6d05
colors.sequential.pink.1	#39121f
colors.sequential.pink.2	#51152b
colors.sequential.pink.3	#691737
colors.sequential.pink.4	#831644
colors.sequential.pink.5	#9e1451
colors.sequential.pink.6	#b90e5f
colors.sequential.pink.7	#d5006d
colors.sequential.purple.1	#241a37
colors.sequential.purple.2	#32244d
colors.sequential.purple.3	#402e65
colors.sequential.purple.4	#4f397d
colors.sequential.purple.5	#5e4397
colors.sequential.purple.6	#6e4fb1
colors.sequential.purple.7	#7e5acc
colors.sequential.teal.1	#004644
colors.sequential.teal.2	#055451
colors.sequential.teal.3	#0b625f
colors.sequential.teal.4	#12706d
colors.sequential.teal.5	#197f7c
colors.sequential.teal.6	#208e8b
colors.sequential.teal.7	#279d9a
colors.slate.1	#EFF3F4
colors.slate.2	#5A7A92
colors.slate.3	#1D4D70
colors.slate.4	#002B48
colors.slate.DEFAULT	#1D4D70
colors.slate.light	#5A7A92
colors.text.secondary	#59595c
colors.white	#FFFFFF
colors.yellow.1	#F8F1DF
colors.yellow.2	#F9E3A3
colors.yellow.3	#F4C435
colors.yellow.4	#E0A81A

Typography

Font family

Token	Value
fontFamily.mono	["Roboto mono","monospace"]
fontFamily.rubik	["Rubik","ui-sans-serif","sans-serif"]

Font size

Token	Value
fontSize.big-desc	fontSize: "20px" lineHeight: "28px"
fontSize.big-desc-desktop	fontSize: "24px" lineHeight: "32px"
fontSize.body	fontSize: "16px" lineHeight: "24px"
fontSize.display-lg	fontSize: "44px" letterSpacing: "-1px" lineHeight: "48px"
fontSize.display-lg-desktop	fontSize: "72px" letterSpacing: "-2px" lineHeight: "76px"
fontSize.display-sm	fontSize: "36px" letterSpacing: "-1px" lineHeight: "40px"
fontSize.display-sm-desktop	fontSize: "48px" letterSpacing: "-1px" lineHeight: "52px"
fontSize.small	fontSize: "14px" lineHeight: "18px"
fontSize.title-lg	fontSize: "28px" letterSpacing: "-1px" lineHeight: "32px"
fontSize.title-lg-desktop	fontSize: "44px" letterSpacing: "-1px" lineHeight: "52px"
fontSize.title-md	fontSize: "24px" lineHeight: "28px"
fontSize.title-md-desktop	fontSize: "32px" lineHeight: "36px"
fontSize.title-sm	fontSize: "24px" lineHeight: "28px"
fontSize.title-sm-desktop	fontSize: "24px" lineHeight: "28px"
fontSize.title-xl	fontSize: "32px" letterSpacing: "-1px" lineHeight: "36px"
fontSize.title-xl-desktop	fontSize: "60px" letterSpacing: "-1px" lineHeight: "64px"
fontSize.title-xs	fontSize: "20px" lineHeight: "24px"
fontSize.title-xs-desktop	fontSize: "20px" lineHeight: "24px"

Font weight

Token	Value
fontWeight.light	300
fontWeight.medium	600
fontWeight.regular	400

Letter spacing

Token	Value
letterSpacing.0	"0"
letterSpacing.n1	"-1px"
letterSpacing.n2	"-2px"

Whitespace

Token	Value
spacing.0	"0"
spacing.100	"100px"
spacing.12	"12px"
spacing.16	"16px"
spacing.2	"2px"
spacing.20	"20px"
spacing.24	"24px"
spacing.28	"28px"
spacing.4	"4px"
spacing.40	"40px"
spacing.48	"48px"
spacing.60	"60px"
spacing.8	"8px"
spacing.80	"80px"
spacing.96	"96px"

Breakpoints

Token	Value
breakpoints.lg	"768px"
breakpoints.md	"420px"
breakpoints.xl	"1090px"