Typography
Typography tokens
| Token | Use | Value | Example |
|---|---|---|---|
| $title-01 | Use with $body-01 | Type: Source Sans Size: 18px / 1.125rem Line height: 26px / 1.625rem Weight: 600 / Semibold Letter spacing: 0px | Title 01 |
| $title-02 | Use with $body-02 | Type: Source Sans Size: 16px / 1rem Line height: 24px / 1.5rem Weight: 600 / Semibold Letter spacing: 0px | Title 02 |
| $body-01 | Expressive layouts for long paragraphs with four lines or more. It is always left-aligned. | Type: Source Sans Size: 18px / 1.125rem Line height: 26px / 1.625rem Weight: 400 / Regular Letter spacing: 0px | Body 01 |
| $body-02 | Productive layouts for long paragraphs with more than four lines. Use also for longer body copy in components such as accordion or structured list. It is always left-aligned. | Type: Source Sans Size: 16px / 1rem Line height: 24px / 1.5rem Weight: 400 / Regular Letter spacing: 0px | Body 02 |
| $display-01 | Banner headings. | Type: Acumin Pro Size: 64 / 4rem Line height: 72px / 4.5rem Weight: 700 / Bold Letter spacing: 0px | Display 01 |
| $display-02 | Banner headings. | Type: Acumin Pro Size: 54 / 3.375rem Line height: 64px / 4rem Weight: 800 / Black Letter spacing: 0px | Display 02 |
| $display-03 | Banner headings. | Type: Acumin Pro Size: 36 / 2.25rem Line height: 44px / 2.75rem Weight: 800 / Black Letter spacing: 0px | Display 03 |
| $display-04 | Banner headings. | Type: Acumin Pro Size: 28 / 1.75rem Line height: 34px / 2.125rem Weight: 800 / Black Letter spacing: 0px | Display 04 |
| $heading-01 | Layout headings. | Type: Acumin Pro Size: 48px / 3rem Line height: 64px / 4rem Weight: 800 / Black Letter spacing: 0px | Heading 01 |
| $heading-02 | Smaller layout headings. | Type: Acumin Pro Size: 42px / 2.625rem Line height: 50px / 3.125rem Weight: 700 / Bold Letter spacing: 0px | Heading 02 |
| $heading-03 | Layout headings. | Type: Source Sans Size: 30px / 1.875rem Line height: 40px / 2.5rem Weight: 600 / Semibold Letter spacing: 1.6px Type: Caps | Heading 03 |
| $heading-04 | Layout headings. | Type: Acumin Pro Size: 28px / 1.75rem Line height: 34px / 2.125rem Weight: 700 / Bold Letter spacing: 0px | Heading 04 |
| $heading-05 | Component and layout headings. | Type: Source Sans Size: 26px / 1.625rem Line height: 40px / 2.5rem Weight: 600 / Semibold Letter spacing: 0px | Heading 05 |
| $heading-06 | Component and layout headings. | Type: Source Sans Size: 22px / 1.375rem Line height: 30px / 1.875rem Weight: 600 / Semibold Letter spacing: 0px | Heading 06 |
| $heading-07 | Component and layout headings. | Type: Source Sans Size: 20px / 1.25rem Line height: 28px / 1.75rem Weight: 600 / Semibold Letter spacing: 1.2px Type: Caps | Heading 07 |
| $body-compact-01 | Short paragraphs with no more than four lines; use in expressive components, such as button and link. | Type: Source Sans Size: 16px / 1rem Line height: 22px / 1.375rem Weight: 400 / Regular Letter spacing: 0px | Body Compact 01 |
| $body-compact-02 | Short paragraphs with no more than four lines; commonly used in components. | Type: Source Sans Size: 14px / .875rem Line height: 18px / 1.125rem Weight: 400 / Regular Letter spacing: 0px | Body Compact 02 |
| $body-compact-03 | Short paragraphs with no more than four lines; commonly used in components. | Type: Source Sans Size: 12px / .75rem Line height: 16px / 1rem Weight: 400 / Regular Letter spacing: 0px | Body Compact 03 |
| $heading-compact-01 | Component and layout headings. It pairs with $body-compact-01. | Type: Source Sans Size: 16px / 1rem Line height: 22px / 1.375rem Weight: 600 / Semibold Letter spacing: 0px | Heading Compact 01 |
| $heading-compact-02 | Smaller layout headings. It pairs with $body-compact-02. | Type: Source Sans Size: 14px / .875rem Line height: 18px / 1.125rem Weight: 600 / Semibold Letter spacing: .16px | Heading Compact 02 |
| $heading-compact-03 | Smaller layout headings. It pairs with $body-compact-03. | Type: Source Sans Size: 12px / .75rem Line height: 16px / 1rem Weight: 600 / Semibold Letter spacing: .16px | Heading Compact 03 |
| $label-01 | Field labels in components, error messages, and captions. It should not be used for body copy. | Type: Source Sans Size: 14px / .875rem Line height: 18px / 1.125rem Weight: 700 / Bold Letter spacing: 0px | Label 01 |
| $label-02 | Field labels in components, error messages, and captions. It should not be used for body copy. | Type: Source Sans Size: 14px / .875rem Line height: 18px / 1.125rem Weight: 600 / Semibold Letter spacing: 0px | Label 02 |
| $helper-text-01 | Explanatory helper text that appears below a field title within a component. | Type: Source Sans Size: 14px / .875rem Line height: 18px / 1.125rem Weight: 400 / Regular Letter spacing: .32px | Helper Text 01 |
| $helper-text-02 | Explanatory helper text that appears below a field title within a component. | Type: Source Sans Size: 12px / .75rem Line height: 16px / 1rem Weight: 400 / Regular Letter spacing: .16px | Helper Text 02 |