Typography

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

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

Colors

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

Heading font sizes

Type	Size
Display Title	fontSizeHeadingDisplay
Display Subtitle	fontSizeHeadingDisplaySubtitle
Title 1	fontSizeHeadingTitle1
Title 2	fontSizeHeadingTitle2
Title 3	fontSizeHeadingTitle3
Title 4	fontSizeHeadingTitle4
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.

Colors for body text

Text Primary

#252A31

rgba(37, 42, 49, 1)

colorTextPrimary

Text Secondary

#5F738C

rgba(95, 115, 140, 1)

colorTextSecondary

Text font sizes

Size	Value
Small	fontSizeTextSmall
Normal	fontSizeTextNormal
Large	fontSizeTextLarge

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.