typography Component

Typography System

A comprehensive typography system that provides consistent text styles throughout your application. Includes headings, body text, and special text treatments.

Headings

Eyebrow Text

Display Heading

heading-display • 4xl/5xl • Bold

Extra Large Heading

heading-xl • 3xl/4xl • Bold

Large Heading

heading-lg • 2xl/3xl • Bold

Medium Heading

heading-md • xl/2xl • Bold

Small Heading

heading-sm • lg/xl • Semibold

Extra Small Heading

heading-xs • base/lg • Semibold

Body Text

This is a lead paragraph. It's larger and draws more attention, perfect for introductions or key points that need to stand out from regular body text.

lead • xl • Regular

This is regular body text. It forms the foundation of your content and maintains optimal readability at default size. Perfect for articles, descriptions, and general content.

Default • base • Regular

This is small text, useful for secondary information, captions, or legal disclaimers that shouldn't dominate the visual hierarchy.

text-small • sm • Regular

This is caption text, even smaller and lighter, perfect for image captions or timestamps.

caption • xs • Regular

Text Styles

Bold text for emphasis • Italic text for subtle emphasis • Highlighted text for attention

Inline code for technical references • Ctrl + C for keyboard shortcuts

Primary link style • Subtle link style

Primary color text • Positive color text • Negative color text

Lists

Unordered List

  • First item in the list
  • Second item with more text to show wrapping behavior on longer content
  • Third item in the list
  • Fourth item in the list

Ordered List

  1. First step in the process
  2. Second step with detailed explanation that demonstrates text wrapping
  3. Third step in the process
  4. Fourth step in the process

Labels and Helper Text

This is helper text that provides additional context or instructions.

This field is required and cannot be empty.

Prose Content

Article Title

This is a prose content area that automatically styles all nested HTML elements. It's perfect for rendering markdown content or any long-form text that needs consistent typography.

Section Heading

Paragraphs maintain proper spacing and line height. Bold text and italic text work as expected. Links are automatically styled to match your theme.

Blockquotes are styled distinctively to set them apart from regular content. They're perfect for testimonials or important quotes.

Subsection Heading

  • Lists maintain consistent spacing
  • Bullets are properly aligned
  • Nested content works seamlessly

Code blocks are also styled appropriately:

Code Block Example

Preview Code
Copy 
function example() {
  return "This is a code block";
}

Custom Text Sizes

Additional text sizes from the Protocol system for fine-grained control.

2XS: The quick brown fox jumps over the lazy dog

XS: The quick brown fox jumps over the lazy dog

SM: The quick brown fox jumps over the lazy dog

Base: The quick brown fox jumps over the lazy dog

LG: The quick brown fox jumps over the lazy dog

XL: The quick brown fox jumps over the lazy dog

2XL: The quick brown fox jumps over the lazy dog

3XL: The quick brown fox jumps

4XL: The quick brown fox