Typography

The PIE typography is set so that our layouts and content is easy to read and presented with a clear hierarchy.

Global typography tokens

These are the original values in our design language, represented by context-agnostic names. They define the values that can be assigned to our Alias Tokens, which are the ones used in GUIs while designing and developing our products.

Font family

Example Description Token name
  • String
    JET Sans Our primary font family
    $font-family-primary
  • String
    Arial Used only as a fallback font
    $font-family-secondary
  • String
    CP Mono Used only for snippets of code
    $font-family-code

Font weight

Example Description Token name
  • String
    Extra bold
    $font-weight-extrabold
  • String
    Bold
    $font-weight-bold
  • String
    Regular
    $font-weight-regular

Font size

Example Description Token name
  • String
    Font size a Text size: 12px
    Line height: 16px
    $font-size-a
  • String
    Font size b Text size: 14px
    Line height: 20px
    $font-size-b
  • String
    Font size c Text size: 16px
    Line height: 24px
    $font-size-c
  • String
    Font size d Text size: 20px
    Line height: 28px
    $font-size-d
  • String
    Font size e Text size: 24px
    Line height: 32px
    $font-size-e
  • String
    Font size f Text size: 28px
    Line height: 36px
    $font-size-f
  • String
    Font size g Text size: 32px
    Line height: 40px
    $font-size-g
  • String
    Font size h Text size: 48px
    Line height: 56px
    $font-size-h

Font style

Example Description Token name
  • String
    Underline Text decoration: underline
    $font-style-underline

Paragraph spacing

Example Description Token name

  • Paragraph

    Paragraph

    Paragraph spacing 1 Space between paragraphs: 16px
    $font-paragraph-spacing-01

  • Paragraph

    Paragraph

    Paragraph spacing 2 Space between paragraphs: 14px
    $font-paragraph-spacing-02

  • Paragraph

    Paragraph

    Paragraph spacing 3 Space between paragraphs: 12px
    $font-paragraph-spacing-03

Letter spacing

Example Description Token name
  • String
    Letter spacing 0 Default letter spacing
    $font-letter-spacing-00