Typography
How to use global typography styles and text modifiers.
HTML Selectors
All margins are removed from the default typography elements, giving you full control over spacing. We do not recommend styling the All Paragraphs
selector, which overrides inheritance on <p>
elements.
Headings
The Base System uses the standard <h1>
to <h6>
elements.
If you want the visual style of a heading without using a heading element, you can use matching heading classes instead (H1 Heading
, H2 Heading
, etc.) .

Paragraph
Paragraph classes (Paragraph Small
, Paragraph Large
, etc.) serve as the primary body text.

Optional Typography
The Base System includes additional optional text styles for common use cases.
Subheadings
Useful for smaller headings for elements like cards, feature highlights, or labels.
Overlines
Overlines (also known as Eyebrows, Top Labels, or Over Text) are stylized text used for small labels.
Text Modifiers
You can customize typography styles by applying combo classes to modify text colors, weights, styles and more.
Last updated