Skip to main content

Tokens

These are all of the values defined in our tokens.

Color

TokenValue
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

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

Font size

TokenValue
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

TokenValue
fontWeight.light300
fontWeight.medium600
fontWeight.regular400

Letter spacing

TokenValue
letterSpacing.0"0"
letterSpacing.n1"-1px"
letterSpacing.n2"-2px"

Whitespace

TokenValue
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

TokenValue
breakpoints.lg"768px"
breakpoints.md"420px"
breakpoints.xl"1090px"