Typography are used for rendering headlines, paragraphs and captions.
Fixed heading styles
The fixed heading styles are used for product pages where multiple containers are used and space efficiency is key.
Fixed means they are not responsive.
The type size remains constant regardless of break point.
This is for component and layout headings. It pairs with $body-01.
This is for smaller layout headings. It pairs with $body-02.
This is for component and layout headings.
This is for layout headings.
This is for layout headings.
This is for layout headings.
This is for layout headings.
This is for component and layout headings. It pairs with $body-01.
This is for smaller layout headings. It pairs with $body-02.
This is for component and layout headings.
This is for layout headings.
This is for layout headings.
This is for layout headings.
This is for layout headings.
Body styles
There are two body styles for productive and expressive moments. Productive styles have a suffix of `-01` and
expressive styles have a suffix of `-02`.
This is for short paragraphs with no more than four lines and is commonly used in components.
This is for short paragraphs with no more than four lines. Use in expressive components, such as button and link.
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.
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.
This is for short paragraphs with no more than four lines and is commonly used in components.
This is for short paragraphs with no more than four lines. Use in expressive components, such as button and link.
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.
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.
Utility styles
The utility styles are used with productive and expressive moments and include styles for code snippets, labels for
captions and helper text, as well as legal copy.
Productive styles have a suffix of `-01` and expressive styles have a suffix of `-02`.
This is for inline code snippets and smaller code elements.
This is for large code snippets and larger code elements.
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.
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.
This is for explanatory helper text that appears below a field title within a component.
This is for explanatory helper text that appears below a field title within a component.
This is for legal copy appearing in product pages.
This is for legal copy appearing in web pages.
This is for inline code snippets and smaller code elements.
This is for large code snippets and larger code elements.
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.
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.
This is for explanatory helper text that appears below a field title within a component.
This is for explanatory helper text that appears below a field title within a component.
This is for legal copy appearing in product pages.
This is for legal copy appearing in web pages.
Color Variants
Primary
Secondary
Tertiary / Helper
Error
Inverse
Primary
Primary
Primary
Secondary
Tertiary / Helper
Error
Inverse
Primary
Primary