Heading 1 - Hero Headlines

Heading 2 - Page Titles

Heading 3 - Section Headers

Heading 4 - Subsections

Heading 5 - Component Titles

Heading 6 - Minor Headings

Lead paragraph (subtitle) - larger text for article introductions. Use this immediately after the title to draw readers into your content.

Large paragraph for emphasis or introductory content. Use sparingly to highlight key points or section introductions.

Regular body text (18px) - optimized for long-form reading. Generous line height (2.0) ensures comfortable reading. This is the workhorse of your typography system.

Standard paragraph text (16px) for UI elements, cards, and shorter content. Good for interfaces and compact layouts.

Small muted text for captions, metadata, and secondary information that supports the main content.

Standard lists for UI components:

• Unordered list item with comfortable spacing
• Clear visual hierarchy with disc markers
• Proper indentation and line height

Article lists for blog content:

• Larger text and generous spacing for long-form content
• Optimized for comfortable reading in articles
• Matches body text size and line height

Inline code like const value = true stands out within paragraphs.

function greet(name: string) {
  return `Hello, ${name}!`;
}

const message = greet('World');
console.log(message);

Standard links within text use primary color with underline for clear visibility.

Bold text for emphasis, italic text for subtle emphasis, and muted text for de-emphasized content.