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 | headingDisplayFontSize |
| Display Subtitle | headingDisplaySubtitleFontSize |
| Title 0 | headingTitle0FontSize |
| Title 1 | headingTitle1FontSize |
| Title 2 | headingTitle2FontSize |
| Title 3 | headingTitle3FontSize |
| Title 4 | headingTitle4FontSize |
| Title 5 | headingTitle5FontSize |
| Title 6 | headingTitle6FontSize |
Basic guidelines for headings
Be respectful of the content hierarchy
Try not to skip heading levels. If you’ve used level 1, the next level used, if intentionally smaller, should be level 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 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.