Overview

Our typography system is built on a foundation of primitive tokens that define our basic type properties, which are then composed into semantic tokens for specific use cases. This ensures consistency while maintaining flexibility across different contexts.

Display Typography

Display typography is used for hero sections, large headlines, and other prominent text elements.

The quick brown fox jumps over the lazy dog

display-xl

The quick brown fox jumps over the lazy dog

display-lg

The quick brown fox jumps over the lazy dog

display-md

Headings

A clear hierarchy of headings helps users understand the structure of your content.

The quick brown fox jumps over the lazy dog

heading-1

The quick brown fox jumps over the lazy dog

heading-2

The quick brown fox jumps over the lazy dog

heading-3

The quick brown fox jumps over the lazy dog

heading-4

The quick brown fox jumps over the lazy dog

heading-5

The quick brown fox jumps over the lazy dog

heading-6

Body Text

Body text styles are optimized for readability in different contexts. `text-base` (15px) is our default body text size.

The quick brown fox jumps over the lazy dog

text-xl

The quick brown fox jumps over the lazy dog

text-lg

The quick brown fox jumps over the lazy dog

text-base

The quick brown fox jumps over the lazy dog

text-sm

The quick brown fox jumps over the lazy dog

text-xs

UI Text

UI text is designed for interface elements like buttons, labels, and navigation.

The quick brown fox jumps over the lazy dog

ui-lg

The quick brown fox jumps over the lazy dog

ui-md

The quick brown fox jumps over the lazy dog

ui-sm

Code

Monospace typography for code examples and technical content.

The quick brown fox jumps over the lazy dog

code-lg

The quick brown fox jumps over the lazy dog

code-md

The quick brown fox jumps over the lazy dog

code-sm

Special Cases

Special typography styles for specific use cases.

The quick brown fox jumps over the lazy dog

caption

The quick brown fox jumps over the lazy dog

overline

The quick brown fox jumps over the lazy dog

label

Implementation

Example Article Structure

Main Heading

This is a large body text paragraph that might introduce a section or contain important information that needs emphasis.

Subheading

Regular body text for the main content. This style is optimized for readability and works well for longer paragraphs.

A caption that provides additional context

<article>
  <h1 className="heading-1">Main Heading</h1>
  <p className="text-xl">
    This is a large body text paragraph...
  </p>
  <h2 className="heading-3">Subheading</h2>
  <p className="text-base">
    Regular body text for the main content...
  </p>
  <p className="caption">
    A caption that provides additional context
  </p>
</article>

Using CSS Variables

Access typography tokens directly in your CSS for custom components.

.custom-text {
  font-size: var(--font-size-87); /* 15px - our base body text */
  line-height: var(--line-height-relaxed);
  letter-spacing: var(--letter-spacing-normal);
  color: var(--text-primary);
}

Font Size Scale

Our font size scale follows an 8px baseline grid for consistent vertical rhythm.

--font-size-500.75rem (12px)

--font-size-750.875rem (14px)

--font-size-870.9375rem (15px)

--font-size-1001rem (16px)

--font-size-2001.125rem (18px)

--font-size-3001.25rem (20px)

--font-size-4001.5rem (24px)

--font-size-5001.75rem (28px)

--font-size-6002rem (32px)

--font-size-7002.5rem (40px)

--font-size-8003rem (48px)

--font-size-9003.5rem (56px)

--font-size-10004rem (64px)