Tokens

Tokens act as a shared language between designers and engineers. Available as variables in both Figma and code libraries, they replace hard-coded values with a single source of truth—ensuring consistency, simplifying updates, and making collaboration more efficient.

vandeer-typography-title-weight	500
vandeer-typography-title-typeface	"Gotham"
vandeer-typography-title-xx-large-line-height	1.200
vandeer-typography-title-xx-large-letter-spacing	0.12em
vandeer-typography-title-xx-large-size-desktop	86px
vandeer-typography-title-xx-large-size-mobile	45px
vandeer-typography-title-x-large-letter-spacing	0.12em
vandeer-typography-title-x-large-size-desktop	60px
vandeer-typography-title-x-large-size-mobile	37px
vandeer-typography-title-x-large-line-height	1.200
vandeer-typography-title-large-letter-spacing	0.04em
vandeer-typography-title-large-size-desktop	41px
vandeer-typography-title-large-size-mobile	31px
vandeer-typography-title-large-line-height	1.200
vandeer-typography-title-medium-letter-spacing	0.04em
vandeer-typography-title-medium-size-desktop	29px
vandeer-typography-title-medium-size-mobile	26px
vandeer-typography-title-medium-line-height	1.200
vandeer-typography-title-small-letter-spacing	0.04em
vandeer-typography-title-small-size-desktop	24px
vandeer-typography-title-small-size-mobile	22px
vandeer-typography-title-small-line-height	1.200
vandeer-typography-title-x-small-letter-spacing	0.04em
vandeer-typography-title-x-small-size-desktop	20px
vandeer-typography-title-x-small-size-mobile	18px
vandeer-typography-title-x-small-line-height	1.200
vandeer-typography-title-xx-small-letter-spacing	0.04em
vandeer-typography-title-xx-small-size-desktop	17px
vandeer-typography-title-xx-small-size-mobile	17px
vandeer-typography-title-xx-small-line-height	1.200
vandeer-typography-title-text-transform	uppercase
vandeer-typography-label-weight	500
vandeer-typography-label-typeface	"Gotham"
vandeer-typography-label-xx-small-line-height	1.200
vandeer-typography-label-xx-small-letter-spacing	0.04em
vandeer-typography-label-xx-small-size-desktop	12px
vandeer-typography-label-xx-small-size-mobile	12px
vandeer-typography-label-x-small-line-height	1.200
vandeer-typography-label-x-small-letter-spacing	0.12em
vandeer-typography-label-x-small-size-desktop	14px
vandeer-typography-label-x-small-size-mobile	14px
vandeer-typography-label-text-transform	uppercase
vandeer-typography-text-weight-regular	regular
vandeer-typography-text-weight-medium	medium
vandeer-typography-text-typeface	"Bull Text"
vandeer-typography-text-large-size-desktop	24px
vandeer-typography-text-large-size-mobile	22px
vandeer-typography-text-large-line-height	1.333
vandeer-typography-text-large-letter-spacing	0px
vandeer-typography-text-medium-size-desktop	20px
vandeer-typography-text-medium-size-mobile	18px
vandeer-typography-text-medium-line-height	1.500
vandeer-typography-text-medium-letter-spacing	0px
vandeer-typography-text-small-size-desktop	17px
vandeer-typography-text-small-size-mobile	17px
vandeer-typography-text-small-line-height	1.412
vandeer-typography-text-small-letter-spacing	0px
vandeer-typography-text-x-small-size-desktop	14px
vandeer-typography-text-x-small-size-mobile	14px
vandeer-typography-text-x-small-line-height	1.357
vandeer-typography-text-x-small-letter-spacing	0px
vandeer-typography-text-xx-small-size-desktop	12px
vandeer-typography-text-xx-small-size-mobile	12px
vandeer-typography-text-xx-small-line-height	1.250
vandeer-typography-text-xx-small-letter-spacing	0px
vandeer-typography-text-x-large-size-desktop	29px
vandeer-typography-text-x-large-size-mobile	26px
vandeer-typography-text-x-large-line-height	1.138
vandeer-typography-text-x-large-letter-spacing	0px

Typography System

Understand how to use typography.

Learn more →Learn more →

Using Typography

Accessing and applying typography tokens in design and code.

Learn more →Learn more →