Typography is critical for communicating the hierarchy of a page.

Always start by creating a clear hierarchy with the help of different sizes. Only work with font weight and body text color if you need to emphasize something.


Headings are used to show the content hierarchy and are important for improving the reading experience for our users.


To stand out from the page, we use colorHeading as the only heading color.

Heading font sizes

Display TitlefontSizeHeadingDisplay
Display SubtitlefontSizeHeadingDisplaySubtitle
Title 1fontSizeHeadingTitle1
Title 2fontSizeHeadingTitle2
Title 3fontSizeHeadingTitle3
Title 4fontSizeHeadingTitle4
Title 5 (Uppercase)fontSizeHeadingTitle5

Basic guidelines for headings

Be respectful of the content hierarchy

Try not to skip heading levels. If you’ve used Title 1, the next level used, if intentionally smaller, should be Title 2.

Use Display for the main page title

A display heading is great for when you need to show an important title at the top of more structured and content-heavy pages.

Use the same color for a heading and its connected icon

When a heading requires the support of an icon, we recommend using the same color for both. It makes it easier to scan headings.

Don't use Display and Title 1 on one page

It can work in very specific cases, but we usually don’t combine Display and Level 1 headings on one page.

Don't place a description below a Display heading

If you need to show a short description with your title, use Display Subtitle.

Text styles

The most basic component for rendering text blocks.

Could not find example with the id: Text-types

Colors for body text

Text Primary
rgba(37, 42, 49, 1)
Text Secondary
rgba(79, 94, 113, 1)

Text font sizes


Basic guidelines for text styles

Always start with Normal Primary style

When you need something more important, scale it up with font size or color. When you need something less important, scale it down.

Use Large Primary in modals for the important description

When you need to emphasize the description below a header, Large Primary does the job well.

Don't combine more than one size or color in one paragraph

If you need to highlight some text, use the bold weight of the same style.