Typography

PIE typography works with our layouts to present content in a clear hierarchy and in a way that's easy to read.

Alias typography tokens

Alias type tokens are made by combining various global tokens and grouping them based on their typographic hierarchy.

Headings

Example Description Token name
  • String
    Heading XXL Used for component and layout headings. Global tokens used: $font-size-48$font-family-primary$font-weight-extrabold$letter-spacing-00
    $font-heading-xxl
  • String
    Heading XL Used for component and layout headings. Global tokens used: $font-size-32$font-family-primary$font-weight-extrabold$letter-spacing-00
    $font-heading-xl
  • String
    Heading L Used for component and layout headings. Global tokens used: $font-size-28$font-family-primary$font-weight-extrabold$letter-spacing-00
    $font-heading-l
  • String
    Heading M Used for component and layout headings. Global tokens used: $font-size-24$font-family-primary$font-weight-extrabold$letter-spacing-00
    $font-heading-m
  • String
    Heading S Used for component and layout headings. Global tokens used: $font-size-20$font-family-primary$font-weight-extrabold$letter-spacing-00
    $font-heading-s

Subheadings

Example Description Token name
  • String
    Subheading L Used for component and layout subheadings. Global tokens used: $font-size-24$font-family-primary$font-weight-regular$letter-spacing-00
    $font-subheading-l
  • String
    Subheading S Used for component and layout subheadings. Global tokens used: $font-size-20$font-family-primary$font-weight-regular$letter-spacing-00
    $font-subheading-s

Body

Example Description Token name
  • String
    Body Used for body copy. Generally used for comfortable long-form reading in layouts. Global tokens used: $font-size-16$font-family-primary$font-weight-regular$paragraph-spacing-01$letter-spacing-00
    $font-body-l
  • String
    Body underline Used as a visual cue to indicate something is a link. Global tokens used: $font-size-16$font-family-primary$font-weight-regular$paragraph-spacing-01$letter-spacing-00$style-underline
    $font-body-l-link
  • String
    Body small Used for body copy. Generally used for components. Global tokens used: $font-size-14$font-family-primary$font-weight-regular$paragraph-spacing-02$letter-spacing-00
    $font-body-s
  • String
    Body small underline Used as a visual cue to indicate something is a link. Global tokens used: $font-size-14$font-family-primary$font-weight-regular$paragraph-spacing-02$letter-spacing-00$style-underline
    $font-body-s-link

Body (Strong)

Example Description Token name
  • String
    Body bold Used for strong emphasis in body copy. Global tokens used: $font-size-16$font-family-primary$font-weight-bold$paragraph-spacing-01$letter-spacing-00
    $font-body-strong-l
  • String
    Body bold underline Used for strong emphasis in body copy. Global tokens used: $font-size-16$font-family-primary$font-weight-bold$paragraph-spacing-01$letter-spacing-00$style-underline
    $font-body-strong-l-link
  • String
    Body small bold Used for strong emphasis in body copy. Global tokens used: $font-size-14$font-family-primary$font-weight-bold$paragraph-spacing-02$letter-spacing-00
    $font-body-strong-s
  • String
    Body small bold underline Used for strong emphasis in body copy. Global tokens used: $font-size-14$font-family-primary$font-weight-bold$paragraph-spacing-02$letter-spacing-00$style-underline
    $font-body-strong-s-link

Caption

Example Description Token name
  • String
    Caption Used for captions, labels, disclaimers or helper text. Use sparingly. Global tokens used: $font-size-12$font-family-primary$font-weight-regular$paragraph-spacing-03$letter-spacing-00
    $font-caption
  • String
    Caption Underline Used as a visual cue to indicate something is a link. Global tokens used: $font-size-12$font-family-primary$font-weight-regular$paragraph-spacing-03$letter-spacing-00$style-underline
    $font-caption-link

Caption (Strong)

Example Description Token name
  • String
    Caption bold Used for captions, labels, disclaimers or helper text. Use sparingly. Global tokens used: $font-size-12$font-family-primary$font-weight-bold$paragraph-spacing-03$letter-spacing-00
    $font-caption-strong
  • String
    Caption bold underline Used as a visual cue to indicate something is a link. Global tokens used: $font-size-12$font-family-primary$font-weight-bold$paragraph-spacing-03$letter-spacing-00$style-underline
    $font-caption-strong-link

Interactive

Example Description Token name
  • String
    Interactive L Used for labels in large-sized button components and numeric counters. Global tokens used: $font-size-20$font-family-primary$font-weight-bold$letter-spacing-00
    $font-interactive-l
  • String
    Interactive M Used for labels in medium-sized button components. Global tokens used: $font-size-19$font-family-primary$font-weight-bold$letter-spacing-00
    $font-interactive-m
  • String
    Interactive S Used for labels in small-sized button components. Global tokens used: $font-size-16$font-family-primary$font-weight-bold$letter-spacing-00
    $font-interactive-s
  • String
    Interactive XS Used for labels in extra-small-sized button components. Global tokens used: $font-size-14$font-family-primary$font-weight-bold$letter-spacing-00
    $font-interactive-xs