Typography style sets used as typography style values of any UI elements that will be used across designs, code, tools, and platforms for any applications under company's brand strategy.
| Token | Role | Style | Sample |
|---|---|---|---|
$font-body-compact-01 | This is for short paragraphs with no more than four lines and is commonly used in components. | Type: Proxima Nova Size: 14px Line height: 21px Weight: 400 / Regular Letter spacing: .16px | Hello World |
$font-body-compact-02 | This is for short paragraphs with no more than four lines. Use in expressive components, such as button and link. | Type: Proxima Nova Size: 16px Line height: 24px Weight: 400 / regular Letter spacing: 0px | Hello World |
$font-body-01 | Body default font. With a slightly taller line height than body-compact-01, this body style is used in 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. Body-01 can also be used for productive moments within expressive experiences. | Type: Proxima Nova Size: 16px Line height: 24px Weight: 400 / regular Letter spacing: 0px | Hello World |
$font-body-02 | With a slightly taller line height than body-compact-02, this style is commonly used in expressive layouts for long paragraphs with four lines or more. It is always left-aligned. | Type: Proxima Nova Size: 18px Line height: 27px Weight: 400 / regular Letter spacing: 0px | Hello World |
| Token | Role | Style | Sample |
|---|---|---|---|
$font-heading-compact-01 | This is for component and layout headings. It pairs with $body-compact-01. | Type: Proxima Nova Size: 14px Line height: 21px Weight: 400 / Regular Letter spacing: .16px | Hello World |
$font-heading-compact-01 | This is for smaller layout headings. It pairs with $body-compact-02. | Type: Proxima Nova Size: 16px Line height: 24px Weight: 400 / regular Letter spacing: 0px | Hello World |
$font-heading-01 | This is for component and layout headings. It pairs with $body-01. | Type: Proxima Nova Size: 18px Line height: 27px Weight: 600 / semi-bold Letter spacing: 0px | Hello World |
$font-heading-02 | This is for bigger layout headings. It pairs with $body-02. | Type: Proxima Nova Size: 18px Line height: 27px Weight: 600 / semi-bold Letter spacing: 0px | Hello World |
$font-heading-03 | This is for layout headings. | Type: Proxima Nova Size: 24px Line height: 30px Weight: 600 / Semi-bold Letter spacing: 0px | Hello World |
$font-heading-04 | This is for layout headings. | Type: Proxima Nova Size: 30px Line height: 39px Weight: 400 / Regular Letter spacing: 0px | Hello World |
$font-heading-05 | This is for layout headings. | Type: Proxima Nova Size: 36px Line height: 48px Weight: 800 / Extra Bold Letter spacing: 0px | Hello World |
$font-heading-06 | This is for layout headings. | Type: Proxima Nova Size: 48px Line height: 60px Weight: 300 / Light Letter spacing: 0px | Hello World |
| Token | Role | Style | Sample |
|---|---|---|---|
$font-label-01 | This is a multipurpose type style that can be used for field labels in components, error messages, and captions. It should not be used for body copy. | Type: Proxima Nova Size: 14px Line height: 21px Weight: 600 / Semi-bold Letter spacing: .16px | Hello World |
$font-label-02 | This is a multipurpose type style that can be used for field labels in components, error messages, and captions. It should not be used for body copy. | Type: Proxima Nova Size: 16px Line height: 24px Weight: 600 / Semi-bold Letter spacing: 0px | Hello World |
$font-helper-text-01 | This is for explanatory helper text that appears below a field title within a component. | Type: Proxima Nova Size: 14px Line height: 21px Weight: 400 / Regular Letter spacing: .16px | Hello World |
$font-helper-text-02 | This is for explanatory helper text that appears below a field title within a component. | Type: Proxima Nova Size: 12px Line height: 18px Weight: 400 / Regular Letter spacing: .32px | Hello World |
$font-legal-text | This is for legal copy appearing in web pages. | Type: Proxima Nova Size: 16px Line height: 24px Weight: 400 / regular Letter spacing: 0px | Hello World |
$font-quotation-01 | This is for layout headings. | Type: Proxima Nova Size: 16px Line height: 24px Weight: 400 / regular Letter spacing: 0px | Hello World |
$font-quotation-02 | “Quote.” | Type: Proxima Nova Size: 18px Line height: 27px Weight: 400 / regular Letter spacing: 0px | Hello World |
$font-heading-06 | This is for layout headings. | Type: Proxima Nova Size: 48px Line height: 60px Weight: 300 / Light Letter spacing: 0px | Hello World |