Typography

Font size and weight tokens used across the application. Click to copy code.

Font Size Tokens

text-caption
Font Size: 12px
Line Height: 18px

The quick brown fox jumps over the lazy dog

Tailwind Class:
<p class="text-caption">Your text here</p>
text-body
Font Size: 14px
Line Height: 22px

The quick brown fox jumps over the lazy dog

Tailwind Class:
<p class="text-body">Your text here</p>
text-subtitle
Font Size: 16px
Line Height: 24px

The quick brown fox jumps over the lazy dog

Tailwind Class:
<p class="text-subtitle">Your text here</p>
text-title
Font Size: 18px
Line Height: 26px

The quick brown fox jumps over the lazy dog

Tailwind Class:
<p class="text-title">Your text here</p>
text-h3
Font Size: 20px
Line Height: 28px

The quick brown fox jumps over the lazy dog

Tailwind Class:
<p class="text-h3">Your text here</p>
text-h2
Font Size: 24px
Line Height: 32px

The quick brown fox jumps over the lazy dog

Tailwind Class:
<p class="text-h2">Your text here</p>
text-h1
Font Size: 30px
Line Height: 38px

The quick brown fox jumps over the lazy dog

Tailwind Class:
<p class="text-h1">Your text here</p>

Font Weight Tokens

font-regular
Weight: 400

The quick brown fox jumps over the lazy dog

Tailwind Class:
<p class="font-regular">Your text here</p>
CSS:
font-weight: 400;
font-medium
Weight: 500

The quick brown fox jumps over the lazy dog

Tailwind Class:
<p class="font-medium">Your text here</p>
CSS:
font-weight: 500;

Size Comparison

text-h1 The quick brown fox jumps over the lazy dog
30px / 38px
text-h2 The quick brown fox jumps over the lazy dog
24px / 32px
text-h3 The quick brown fox jumps over the lazy dog
20px / 28px
text-title The quick brown fox jumps over the lazy dog
18px / 26px
text-subtitle The quick brown fox jumps over the lazy dog
16px / 24px
text-body The quick brown fox jumps over the lazy dog
14px / 22px
text-caption The quick brown fox jumps over the lazy dog
12px / 18px

Weight Comparison

font-regular The quick brown fox jumps over the lazy dog
Weight: 400
font-medium The quick brown fox jumps over the lazy dog
Weight: 500

Usage Examples

Headings
H1, H2, H3 examples with font weight

Heading 1

Heading 2

Heading 3

HTML Code:
<h1 class="text-h1 text-text-neutral font-medium">
  Heading 1
</h1>
<h2 class="text-h2 text-text-neutral font-regular">
  Heading 2
</h2>
<h3 class="text-h3 text-text-neutral font-medium">
  Heading 3
</h3>
Body Text
Body, subtitle, caption examples

Subtitle Text

This is body text. Lorem ipsum dolor sit amet consectetur adipisicing elit.

Caption or helper text goes here

HTML Code:
<p class="text-subtitle text-text-neutral font-medium">
  Subtitle Text
</p>
<p class="text-body text-text-neutral">
  This is body text. Lorem ipsum...
</p>
<p class="text-caption text-text-subtle">
  Caption or helper text goes here
</p>
Card Example
Real-world example with size & weight

Card Title

Subtitle or category

This is the main content of the card using body text size.

Last updated 2 hours ago

HTML Code:
<div class="bg-bg-surface border border-border-subtle 
     rounded-lg p-6">
  <h3 class="text-title text-text-neutral 
      font-medium">
    Card Title
  </h3>
  <p class="text-body text-text-neutral 
     font-medium">
    Subtitle or category
  </p>
  <p class="text-body text-text-neutral">
    This is the main content of the card.
  </p>
  <p class="text-caption text-text-subtle">
    Last updated 2 hours ago
  </p>
</div>