0.17.1

Theme Switcher

Typography

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.

Strong.text-strong
Body.text-body
Muted.text-muted
Placeholder.text-placeholder

Fonts

Mantle specifies Euclid as the default font for UI and headings. It extends Tailwind by providing Nunito Sans as a font-body. We also use IBM Plex Mono as a monospace typeface.

ClassFontsDescription
font-sansdefault

Euclid Square

"Euclid Square", ui-sans-serif, system-ui, sans-serif

The default font for rendering UI and headings.
font-body

Nunito Sans

"Nunito Sans", ui-sans-serif, system-ui, sans-serif

Best when used in longform writing like prose documentation.
font-mono

IBM Plex Mono

"IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace

Used to render code and tokens. Take care to adjust the size a step down in most applications.