Mantle provides various typography tokens for consistency and readability.

Scale

Mantle provides a general type scale for various headers throughout our products. Do note that our text styling is independent of the actual markup, so a Heading 1 can be styled as a Heading 2 or Heading 5 as appropriate.

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Colors

When possible, it’s preferred to render text using the following tokens. This helps provide heirarchy outside of font size, and makes sure our type is the right color across various themes.

Fonts

Mantle specifies Roobert as the default font for UI and headings. We also use JetBrains Mono as a monospace typeface, and Family for longform prose and h1s.