Typography
The Base System uses H1-H6 Headings and several text sizes (Paragraph X Small to Paragraph X Large), Subheading and Overline. It also provides several text modifiers for quick adjustments.
Last updated
The Base System uses H1-H6 Headings and several text sizes (Paragraph X Small to Paragraph X Large), Subheading and Overline. It also provides several text modifiers for quick adjustments.
Last updated
The <body> element sets the base typography styles:
Font size: 16px
Text color: Primary text color
This ensures a consistent starting point for all child elements.
All default margins are removed from typography elements, giving you full control over spacing. You can customize any typography using combo classes for text styles, colors, and weights.
The Base System uses the standard <h1> to <h6> elements and styles them directly via HTML selectors.
We also provide matching Heading classes (e.g., .h1, .h2, etc.) for situations where you want the visual style of a heading without the semantic implications.
Paragraph classes (Paragraph Small, Paragraph Large, etc.) are used for the main body text.
By default, paragraphs inherit from the <body>, so we recommend not styling the “All Paragraphs” selector, which would override inheritance.
Modifiers are utility combo classes that apply text styles like:
text-weight-bold
text-color-secondary
text-underline
Use modifiers to avoid creating redundant custom classes.
If you find yourself stacking many modifiers repeatedly, consider creating a new reusable class to simplify things.
The Base System includes additional text styles for common use cases that don't require repeated combo stacking:
Used as small headings for elements like cards, feature highlights, or labels.
Overlines (also known as Eyebrows, Top Labels, or Over Text) are small labels that appear above headings.
H1 Heading
64px / 4rem
48px / 3rem
1.3
H2 Heading
56px / 3.5rem
40px / 2.5rem
1.3
H3 Heading
48px / 3rem
32px / 2rem
1.4
H4 Heading
40px / 2.5rem
28px / 1.75rem
1.4
H5 Heading
32px / 2rem
1.5
H6 Heading
24px / 1.5rem
1.5
Paragraph X Large
20px / 1.25rem
32px / 2rem
Paragraph Large
18px / 1.1125rem
28px / 1.75rem
Paragraph Regular
16px / 1rem
24px / 1.5rem
Paragraph Small
14px / 0.875rem
20px / 1.25rem
Paragraph X Small
12px / 0.75rem
16px / 1rem
Subheading X Large
20px
36px
Bold
Subheading Large
18px
32px
Bold
Subheading Regular
16px
28px
Bold
Subheading Small
14px
24px
Bold
Subheading X Small
12px
20px
Bold
Overline X Large
20px
36px
All Caps
Overline Large
18px
32px
All Caps
Overline Regular
16px
28px
All Caps
Overline Small
14px
24px
All Caps
Overline X Small
12px
20px
All Caps
Text Weight Black
900
Text Weight Extra Bold
800
Text Weight Bold
700
Text Weight Semibold
600
Text Weight Medium
500
Text Weight Regular
400
Text Weight Light
300
Text Color Primary
text-color-primary
Text Color Secondary
text-color-secondary
Text Color Tertiary
text-color-tertiary
Text Color Light
text-color-light
Text Color Dark
text-color-dark
Text Color Brand
text-color-brand
Text Color Inherit
color: inherit
Text Underline
Underline
Text Strike
Strike
Text Italic
Italic
