Typography
PIE typography works with our layouts to present content in a clear hierarchy and in a way that's easy to read.
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 Graphical User Interfaces (GUI) while designing and developing our products.
Font family
| $font-family-primary | JET Sans |
| $font-family-secondary | Arial |
| $font-family-code | PT Mono |
Font weight
| $font-weight-extrabold | Extra bold |
| $font-weight-bold | Bold |
| $font-weight-regular | Regular |
Font size
| $font-size-12 | Text size: 12px, Line height: 16px |
| $font-size-14 | Text size: 14px, Line height: 20px |
| $font-size-16 | Text size: 16px, Line height: 24px |
| $font-size-20 | Text size: 20px, Line height: 28px |
| $font-size-24 | Text size: 24px, Line height: 32px |
| $font-size-28 | Text size: 28px, Line height: 36px |
| $font-size-32 | Text size: 32px, Line height: 40px |
| $font-size-48 | Text size: 48px, Line height: 56px |
Font style
| $font-style-underline | Text decoration: underline |
Paragraph spacing
| $font-paragraph-spacing-01 | Paragraph spacing: 16px |
| $font-paragraph-spacing-02 | Paragraph spacing: 14px |
| $font-paragraph-spacing-03 | Paragraph spacing: 12px |
Letter spacing
| $font-letter-spacing-00 | Letter spacing: default |