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

Design system

  • Overview
    • Design system definitions
    • Overview
    • Theming
    • 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
      • CTA button
      • Icon button
      • Link button
    • Calendar
    • Card
    • Carousel
    • CCD
      • Overview
      • Filter chip
      • Input chip
      • Graphs
      • Metrics
      • Overview
      • Alert
      • Confirmation
      • Standard
    • Divider
    • Education notice
    • EEK rating and range
    • Expansion
      • Overview
      • Checkbox
      • Combobox
      • Date field
      • Dropdown
      • Numeric stepper
      • Password
      • Phone number
      • Radio button
      • Select list
      • Switch
      • Text area
      • Text field
    • Item tile
    • List row
      • Overview
      • Expressive loader
      • Skeleton loader
    • Media container
      • Top navigation bar
    • Pagination
    • Panel
    • Popover
    • Progress stepper
    • Search field
    • Section header
    • Segmented button
      • Overview
      • Context sheet
      • Focus sheet
    • Signal
    • Snackbar
    • State layer
    • Tab
    • Table
      • Overview
      • Tooltip
      • Tourtip
    • Toggle button group
    • Video player
    • Overview
    • Bulk editing
    • Empty states
    • Filtering
    • Uploading files
      • Overview
      • Text link

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.

Typography tokens

Resources

PreviousSpacing
Things.People.Love.
  • Get started
  • Foundations
  • Design system
  • Expressions
  • Resources
  • Articles
  • About eBay Design
  • Careers
  • Press
  • Privacy policy
© 2026 eBay. All rights reserved.

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

    • Typography

      Learn how to use our typography across product and marketing applications.

    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