Typography

Heading styles

This is for component and layout headings. It pairs with Body Compact 01.

Heading Compact 01

.text-heading-compact-01
Type: IBM Plex Sans
Size: 14px / .875rem
Line height: 18px / 1.125rem
Weight: 600 / Semi-Bold
Letter spacing: .16px

This is for smaller layout headings. It pairs with Body Compact 02.

Heading Compact 02

.text-heading-compact-02
Type: IBM Plex Sans
Size: 16px / 1rem
Line height: 22px / 1.375rem
Weight: 600 / Semi-Bold
Letter spacing: 0px

This is for component and layout headings. It pairs with Body 01.

Heading 01

.text-heading-01
Type: IBM Plex Sans
Size: 14px / .875rem
Line height: 20px / 1.25rem
Weight: 600 / Semi-Bold
Letter spacing: .16px

This is for smaller layout headings. It pairs with Body 02.

Heading 02

.text-heading-02
Type: IBM Plex Sans
Size: 16px / 1rem
Line height: 24px / 1.5rem
Weight: 600 / Semi-Bold
Letter spacing: 0px

This is for component and layout headings.

Heading 03

.text-heading-03
Type: IBM Plex Sans
Size: 20px / 1.25rem
Line height: 27px / 1.75rem
Weight: 400 / Regular
Letter spacing: 0px

This is for layout headings.

Heading 04

.text-heading-04
Type: IBM Plex Sans
Size: 28px / 1.75rem
Line height: 36px / 2.25rem
Weight: 400 / Regular
Letter spacing: 0px

This is for layout headings.

Heading 05

.text-heading-05
Type: IBM Plex Sans
Size: 32px / 2rem
Line height: 40px / 2.5rem
Weight: 400 / Regular
Letter spacing: 0px

This is for layout headings.

Heading 06

.text-heading-06
Type: IBM Plex Sans
Size: 42px / 2.625rem
Line height: 50px / 3.125rem
Weight: 300 / Light
Letter spacing: 0px

This is for layout headings.

Heading 07

.text-heading-07
Type: IBM Plex Sans
Size: 54px / 3.375rem
Line height: 64px / 4rem
Weight: 300 / Light
Letter spacing: 0px

Body styles

This is for short paragraphs with no more than four lines and is commonly used in components.

Body Compact 01

.text-body-compact-01
Type: IBM Plex Sans
Size: 14px / .875rem
Line height: 18px / 1.125rem
Weight: 400 / Regular
Letter spacing: .16px

This is for short paragraphs with no more than four lines. Use in expressive components, such as button and link.

Body Compact 02

.text-body-compact-02
Type: IBM Plex Sans
Size: 16px / 1rem
Line height: 22px / 1.375rem
Weight: 400 / Regular
Letter spacing: 0px

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-long-01 can also be used for productive moments within expressive experiences.

Body 01

.text-body-01
Type: IBM Plex Sans
Size: 14px / .875rem
Line height: 20px / 1.25rem
Weight: 400 / Regular
Letter spacing: .16px

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.

Body 02

.text-body-02
Type: IBM Plex Sans
Size: 16px / 1rem
Line height: 24px / 1.5rem
Weight: 400 / Regular
Letter spacing: 0px

Utility styles

This is for inline code snippets and smaller code elements.

Code 01

.text-code-01
Type: IBM Plex Mono
Size: 12px / .75rem
Line height: 16px / 1rem
Weight: 400 / Regular
Letter spacing: .32px
This is for large code snippets and larger code elements.

Code 02

.text-code-02
Type: IBM Plex Mono
Size: 14px / .875rem
Line height: 20px / 1.25rem
Weight: 400 / Regular
Letter spacing: .32px

Label 01

.text-label-01
Type: IBM Plex Sans
Size: 12px / .75rem
Line height: 16px / 1rem
Weight: 400 / Regular
Letter spacing: .32px

Label 02

.text-label-02
Type: IBM Plex Sans
Size: 14px / .875rem
Line height: 18px / 1.125rem
Weight: 400 / Regular
Letter spacing: .16px

This is for explanatory helper text that appears below a field title within a component.

Helper Text 01

.text-helper-01
Type: IBM Plex Sans
Size: 12px / .75rem
Line height: 16px / 1rem
Weight: 400 / Regular
Letter spacing: .32px

This is for explanatory helper text that appears below a field title within a component.

Helper Text 02

.text-helper-02
Type: IBM Plex Sans
Size: 14px / .875rem
Line height: 18px / 1.125rem
Weight: 400 / Regular
Letter spacing: .16px

Legal 01

.text-legal-01
Type: IBM Plex Sans
Size: 12px / .75rem
Line height: 16px / 1rem
Weight: 400 / Regular
Letter spacing: .32px

Legal 02

.text-legal-02
Type: IBM Plex Sans
Size: 14px / .875rem
Line height: 18px / 1.125rem
Weight: 400 / Regular
Letter spacing: .16px