Typography

Make content easier to scan and read, establishing hierarchy.

Typography

Maturity

RC

FYQ2 target

RC

Repository

Overview

Our proportionate typographic scale offers an effective heading hierarchy. The use of bold weight has been limited to Headings and Buttons to help guide the experience.

We use a 16px base size with a 1.125 – Major Second modular scale, rounded to whole values. Here's a simplified view:

Ag
Headings / Heading 1
Roobert PRO 700 23px/32px
Ag
Headings / Heading 2
Roobert PRO 700 20px/24px
Ag
Headings / Heading 3
Roobert PRO 700 18px/24px
Ag
Headings / Heading 4
Roobert PRO 700 16px/24px
Ag
Headings / Heading 5
Roobert PRO 700 14px/20px
Ag
Headings / Kicker
Roobert PRO 700 13px/16px, upper
Ag
Body / Lead
Roobert PRO 400 18px/24px
Ag
Body / Default
Roobert PRO 400 16px/24px
Ag
Body / Caption
Roobert PRO 400 14px/20px

Related content



How to use

Headings

We use headings to separate sections of content. When introducing an important concept, we usually introduce a heading to let people know the topic changes, which helps with readability, scannability, and accessibility.

Related content

Heading 1

Heading 1 is the largest text on the screen, reserved for the Top Navigation Bar, which acts as the page title describing the overall page content (coming soon).

There should only be one Heading 1 per page.

Ag
Roobert PRO 700 23px/32px
Heading 1
Heading 1 is the largest text on the screen, reserved for the Top Navigation Bar, which acts as the page title describing the overall page content.
Code token
heading1
Token set
Product/App

Headings 2, 3, 4, and 5

Afterward, you can organize the subsections using Heading 2, Heading 3, Heading 4, and Heading 5.

Since a web app differs from a traditional content page, we've decoupled the styles from their corresponding HTML heading elements to provide design flexibility. However, it is advisable to avoid skipping heading levels and follow a sequential hierarchical structure as much as possible. The more predictable your content structure is, the more likely people will find the information they want.

Ideally, every time you introduce a new topic, use a Heading 2. You can then divide the Heading 2 topic into subsections with Heading 3 level headings, and so on.

Ag
Roobert PRO 700 20px/24px
Heading 2
When introducing an important concept, use a Heading 2.
Code token
heading2
Token set
Product/App
Ag
Roobert PRO 700 18px/24px
Heading 3
You can then divide the Heading 2 topic into subsections with Heading 3 level headings, and so on.
Code token
heading3
Token set
Product/App
Ag
Roobert PRO 700 16px/24px
Heading 4
You can then divide the Heading 3 topic into subsections with Heading 4 level headings.
Code token
heading4
Token set
Product/App
Ag
Roobert PRO 700 14px/20px
Heading 5
You can then divide the Heading 4 topic into subsections with Heading 5 level headings.
Code token
heading5
Token set
Product/App

Kicker

A Kicker is an introduction to a heading that makes it easier to scan. It’s usually only a word or two, maybe slightly longer. It can also be used as a type of section heading in places where the space is compromised, like tables. It comes in uppercase to distinguish it from the rest of the headings.

Ag
Roobert PRO 700 13px/16px, upper
Kicker
A Kicker is an introduction to a heading that makes it easier to scan. It’s usually only a word or two, maybe slightly longer. It can also be used as a type of section heading in places where the space is compromised, like tables.
Code token
headingKicker
Token set
Product/App

Body text

The body sizes for content, come in three sizes that depend on their importance.

Related content

Lead

The lead content is larger than the default and summarizes or emphasizes the most significant points. They are typically used only at the beginning of the content.

Ag
Roobert PRO 400 18px/24px
Lead
The lead content summarizes or emphasizes a page's or screen's most significant points.
Code token
lead
Token set
Product/App

Default

The standard body size for content.

Ag
Roobert PRO 400 16px/24px
Default
The standard body size for content.
Code token
default
Token set
Product/App

Caption

Captions are smaller than the default and are rarely used alone. They give descriptive details or metadata following a more significant element.

Ag
Roobert PRO 400 14px/20px
Caption
Captions give descriptive details or metadata following a more significant element.
Code token
caption
Token set
Product/App

Following our Foundations first principle, we’ve decided to keep links underlined by default for usability and accessibility. Otherwise, link text must have at least 3:1 contrast with surrounding body text and present a non-color indicator (typically underline) on mouse hover and keyboard focus.

Ag
Roobert PRO 400 18px/24px, underline
Lead link
[Link style] The lead content summarizes or emphasizes a page's or screen's most significant points.
Code token
leadLink
Token set
Product/App
Ag
Roobert PRO 400 16px/24px, underline
Default link
[Link style] The standard body size for content.
Code token
defaultLink
Token set
Product/App
Ag
Roobert PRO 400 14px/20px, underline
Caption link
[Link style] Captions give descriptive details or metadata following a more significant element.
Code token
captionLink
Token set
Product/App

Text color

We use color following our purposeful, gentle, and inclusive principles adapted to the product context to reinforce hierarchy and guide the experience by highlighting the most relevant information.

Related content

These are the color tokens for text on the Default theme:

#000000
Primary
Default content
Code token
default.main.primary
Token set
Product/App
#535a74
Secondary
Metadata or less important information
Code token
default.main.secondary
Token set
Product/App
#0568fd
Awake
Interactive, Active, and working as intended
Code token
default.extra.awake
Token set
Product/App
#034fd6
Awake Hovered
Code token
default.extraState.awakeHovered
Token set
Product/App
#0138a9
Awake Pressed
Code token
default.extraState.awakePressed
Token set
Product/App
#6c718c
Dormant
Inactive, asleep, or suspended ⚠️ Use sparingly on text
Code token
default.extra.dormant
Token set
Product/App
#cc3f4d
Critical
A critical or unexpected situation
Code token
default.extra.critical
Token set
Product/App
#a4313c
Critical Hovered
Code token
default.extraState.criticalHovered
Token set
Product/App
#7d222b
Critical Pressed
Code token
default.extraState.criticalPressed
Token set
Product/App
#ac5f00
Warning
Cautionary advice about a potential problem
Code token
default.extra.warning
Token set
Product/App
#15807b
Success
Achievement of a goal
Code token
default.extra.success
Token set
Product/App
#6b5bee
Featured
Highlighted for special attention, neither good nor bad
Code token
default.extra.featured
Token set
Product/App
#ffffff
on Extra
Content on any of the Extra colors
Code token
default.extra.onExtra
Token set
Product/App

And on the Inverted theme:

#ffffff
Primary
Default content
Code token
inverted.main.primary
Token set
Product/App
#9597b0
Secondary
Metadata or less important information
Code token
inverted.main.secondary
Token set
Product/App

Quality checklist

This element passes the following requirements described in our Component lifecycle.

Maturity

RC

α · Design tokens

It uses Ariane design tokens.

α · Accessible use of color

Its color contrast ratio is at least 4.5:1 for text and interactive areas.

α · Naming agreement

Its name is agreed upon and shared between design and development.

β · Docs L1

It has essential documentation with at least primary usage.

β · Use cases

All the uses are audited and refined.

RC · Definition agreement

Its naming and properties are audited and aligned in design and code.

RC · Accessible L1

Its accessibility is manually audited, and any significant issues are fixed.

RC · Docs L2

The documentation covers the most common use cases and is expected to be iterated during the Release Candidate phase.


Acknowledgments

  1. Heading structure and accessibility