Page cover

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.

HTML Selectors

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.

Headings

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

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.

Use the default Paragraph element for long-form content — it helps screen readers and assistive technology recognize the text as proper paragraph content.

Text Modifiers

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.

Additional Typography

The Base System includes additional text styles for common use cases that don't require repeated combo stacking:

Subheadings

Used as small headings for elements like cards, feature highlights, or labels.

Overlines

Overlines (also known as Eyebrows, Top Labels, or Over Text) are small labels that appear above headings.

Appendix

Heading

HTML Tag & Class
Font Size
Font Size (Mobile)
Line Height

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

Class Name
Font Size
Line Height

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

Class Name
Font Size
Line Height
Font Weight

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

Class Name
Font Size
Line Height
Style

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

Font Weight

Class Name
Text Weight

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

Font Color

Name
Color Variable

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

Font Style

Class Name
Text Style

Text Underline

Underline

Text Strike

Strike

Text Italic

Italic

PreviousStructureNextElements

Last updated