Typography Tokens

All typography values are available as SCSS variables.

@use '@yellowcard/b2b-design-system/scss/typography' as *;

Font Sizes

Display

Token	Size
$font-size-display-2xs	24px
$font-size-display-xs	28px
$font-size-display-sm	32px
$font-size-display-md	36px
$font-size-display-lg	40px
$font-size-display-xl	48px
$font-size-display-2xl	56px
$font-size-display-3xl	64px

Heading

Token	Size
$font-size-heading-3xs	12px
$font-size-heading-2xs	14px
$font-size-heading-xs	16px
$font-size-heading-sm	18px
$font-size-heading-md	20px
$font-size-heading-lg	24px
$font-size-heading-xl	28px
$font-size-heading-2xl	32px
$font-size-heading-3xl	36px
$font-size-heading-4xl	40px

Body

Token	Size
$font-size-body-xs	12px
$font-size-body-sm	14px
$font-size-body-md	16px
$font-size-body-lg	18px
$font-size-body-xl	20px
$font-size-body-2xl	24px

Label

Token	Size
$font-size-label-3xs	8px
$font-size-label-2xs	10px
$font-size-label-xs	12px
$font-size-label-sm	14px
$font-size-label-md	16px
$font-size-label-lg	18px
$font-size-label-xl	20px
$font-size-label-2xl	24px
$font-size-label-3xl	28px

Font Weights

Token	Value
$font-weight-regular	400
$font-weight-medium	500
$font-weight-semibold	600
$font-weight-bold	700

Usage Example

@use '@yellowcard/b2b-design-system/scss/typography' as *;

.page-title {
  font-size: $font-size-heading-xl;
  font-weight: $font-weight-semibold;
  line-height: $line-height-heading-xl;
}

.card-body {
  font-size: $font-size-body-md;
  font-weight: $font-weight-regular;
  line-height: $line-height-body-md;
}