Skip to main contenteBay Playbook

Typography tokens

Our typography tokens define the font styles used across our system. Core tokens store individual font attributes, while semantic typography tokens combine them into reusable styles. Use semantic tokens when applying type in design and code.

Semantic

TitleValueExample
typography.display1
  • fontSize:
    font.size.giant3
  • fontWeight:
    font.weight.600
  • letterCase:
    font.textCase.none
  • letterSpacing:
    font.letterSpacing.display1
  • lineHeight:
    font.lineHeight.600
Aa
typography.display2
  • fontSize:
    font.size.giant2
  • fontWeight:
    font.weight.600
  • letterCase:
    font.textCase.none
  • letterSpacing:
    font.letterSpacing.display2
  • lineHeight:
    font.lineHeight.575
Aa
typography.display3
  • fontSize:
    font.size.giant1
  • fontWeight:
    font.weight.600
  • letterCase:
    font.textCase.none
  • letterSpacing:
    font.letterSpacing.display3
  • lineHeight:
    font.lineHeight.500
Aa
typography.title1
  • fontSize:
    font.size.large2
  • fontWeight:
    font.weight.600
  • letterCase:
    font.textCase.none
  • letterSpacing:
    font.letterSpacing.none
  • lineHeight:
    font.lineHeight.400
Aa
typography.title2
  • fontSize:
    font.size.large1
  • fontWeight:
    font.weight.600
  • letterCase:
    font.textCase.none
  • letterSpacing:
    font.letterSpacing.none
  • lineHeight:
    font.lineHeight.350
Aa
typography.title3
  • fontSize:
    font.size.medium
  • fontWeight:
    font.weight.600
  • letterCase:
    font.textCase.none
  • letterSpacing:
    font.letterSpacing.none
  • lineHeight:
    font.lineHeight.300
Aa
typography.subtitle1
  • fontSize:
    font.size.large1
  • fontWeight:
    font.weight.400
  • letterCase:
    font.textCase.none
  • letterSpacing:
    font.letterSpacing.none
  • lineHeight:
    font.lineHeight.350
Aa
typography.subtitle2
  • fontSize:
    font.size.medium
  • fontWeight:
    font.weight.400
  • letterCase:
    font.textCase.none
  • letterSpacing:
    font.letterSpacing.none
  • lineHeight:
    font.lineHeight.300
Aa
typography.body
  • fontSize:
    font.size.body
  • fontWeight:
    font.weight.400
  • letterCase:
    font.textCase.none
  • letterSpacing:
    font.letterSpacing.none
  • lineHeight:
    font.lineHeight.250
Aa
typography.bodyBold
  • fontSize:
    font.size.body
  • fontWeight:
    font.weight.600
  • letterCase:
    font.textCase.none
  • letterSpacing:
    font.letterSpacing.none
  • lineHeight:
    font.lineHeight.250
Aa
typography.caption
  • fontSize:
    font.size.small
  • fontWeight:
    font.weight.400
  • letterCase:
    font.textCase.none
  • letterSpacing:
    font.letterSpacing.none
  • lineHeight:
    font.lineHeight.200
Aa
typography.captionBold
  • fontSize:
    font.size.small
  • fontWeight:
    font.weight.600
  • letterCase:
    font.textCase.none
  • letterSpacing:
    font.letterSpacing.none
  • lineHeight:
    font.lineHeight.200
Aa
typography.signal1
  • fontSize:
    font.size.body
  • fontWeight:
    font.weight.400
  • letterCase:
    font.textCase.uppercase
  • letterSpacing:
    font.letterSpacing.signal1
  • lineHeight:
    font.lineHeight.250
Aa
typography.signal2
  • fontSize:
    font.size.smallest
  • fontWeight:
    font.weight.600
  • letterCase:
    font.textCase.uppercase
  • letterSpacing:
    font.letterSpacing.signal2
  • lineHeight:
    font.lineHeight.150
Aa

Resources