Skip to main contenteBay Playbook
  • Get started
  • Foundations
  • Design system
  • Expressions
  • Resources
  • Articles

Design system

  • Overview
    • Overview
    • Color
    • Dimension
    • Spacing
    • Typography
    • Breakpoints
    • Shadow
    • Shape
    • Opacity
    • Motion
    • Overview
    • Status
    • Accordion
    • Action bar
      • Overview
      • Inline notice
      • Page notice
      • Section notice
    • Avatar
    • Badge
    • Banner
    • Breadcrumb
      • Overview
      • Branded button
      • CTA button
      • Icon button
      • Link button
    • Carousel
    • CCD
      • Graphs
      • Metrics
    • Date picker
    • Dialog
    • Divider
    • Education notice
    • EEK rating and range
    • Expansion
      • Checkbox
      • Chip
      • Combobox
      • Dropdown
      • Numeric stepper
      • Password
      • Phone number
      • Radio button
      • Search field
      • Select list
      • Switch
      • Text area
      • Text field
    • Item tile
    • List row
      • Overview
      • Expressive loader
      • Skeleton loader
    • Media container
    • Pagination
    • Popover
    • Progress stepper
    • Quick filter
    • Section header
    • Segmented button
      • Bottom sheet
      • Panel
    • Signal
    • Snackbar
    • Tab
    • Table
      • Tooltip
      • Tourtip
    • Toggle button group
    • Video player
    • Overview
    • Bulk editing
    • File uploading
      • Text link

Typography tokens

Typography tokens
PreviousSpacingNextBreakpoints
Things.People.Love.
  • Get started
  • Foundations
  • Design system
  • Expressions
  • Resources
  • Articles
  • Contributors
  • Careers
  • Press
  • Privacy policy
© 2025 eBay. All rights reserved.

eBay Evo, the eBay trademark, and the eBay logo are the intellectual property of eBay Inc.

    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

    Core

    TitleValueRelative valueExample
    font.family.market-sans
    Market Sans
    -
    Market Sans
    font.letterSpacing.display1
    -0.92px
    -0.0575rem
    Hello World
    font.letterSpacing.display2
    -0.72px
    -0.045rem
    Hello World
    font.letterSpacing.display3
    -0.6px
    -0.0375rem
    Hello World
    font.letterSpacing.none
    0px
    -
    Hello World
    font.letterSpacing.signal1
    0.7px
    0.04375rem
    Hello World
    font.letterSpacing.signal2
    0.5px
    0.03125rem
    Hello World
    font.lineHeight.150
    12px
    0.75rem
    Hello
    World
    font.lineHeight.200
    16px
    1rem
    Hello
    World
    font.lineHeight.250
    20px
    1.25rem
    Hello
    World
    font.lineHeight.300
    24px
    1.5rem
    Hello
    World
    font.lineHeight.350
    28px
    1.75rem
    Hello
    World
    font.lineHeight.400
    32px
    2rem
    Hello
    World
    font.lineHeight.500
    40px
    2.5rem
    Hello
    World
    font.lineHeight.575
    46px
    2.875rem
    Hello
    World
    font.lineHeight.600
    56px
    3.5rem
    Hello
    World
    font.paragraphSpacing.none
    0px
    -
    Hello World
    font.size.body
    14px
    0.875rem
    Aa
    font.size.giant1
    30px
    1.875rem
    Aa
    font.size.giant2
    36px
    2.25rem
    Aa
    font.size.giant3
    46px
    2.875rem
    Aa
    font.size.large1
    20px
    1.25rem
    Aa
    font.size.large2
    24px
    1.5rem
    Aa
    font.size.medium
    16px
    1rem
    Aa
    font.size.small
    12px
    0.75rem
    Aa
    font.size.smallest
    10px
    0.625rem
    Aa
    font.textCase.none
    none
    -
    Hello World
    font.textCase.uppercase
    uppercase
    -
    Hello World
    font.textDecoration.none
    none
    -
    Hello World
    font.textDecoration.underline
    underline
    -
    Hello World
    font.weight.400
    Regular
    -
    Aa
    font.weight.600
    Bold
    -
    Aa