Typography
Typography system for consistent text styling across the application.
Headings
Heading 1
text-5xl / 3rem
Heading 2
text-4xl / 2.25rem
Heading 3
text-3xl / 1.875rem
Heading 4
text-2xl / 1.5rem
Heading 5
text-xl / 1.25rem
Heading 6
text-lg / 1.125rem
Display Headings
Display 1
text-6xl to text-7xl
Display 2
text-5xl to text-6xl
Gradient Display
With gradient text
Paragraphs
Lead paragraph text. This is a larger text size used for introductions or important statements that need to stand out from regular content.
text-xl
Regular paragraph text. This is the default text size for body content. It should be comfortable to read and provide a good balance between readability and information density.
text-base
Small paragraph text. This is used for secondary information, captions, or supporting content that doesn't need as much visual emphasis.
text-sm
Extra small text for fine print, disclaimers, or metadata that needs minimal visual presence.
text-xs
Font Weights
Thin (100)
Light (300)
Normal (400)
Medium (500)
Semibold (600)
Bold (700)
Extra Bold (800)
Black (900)
Inline Elements
This is bold text within a paragraph.
This is italicized text within a paragraph.
This is underlined text within a paragraph.
This is strikethrough text within a paragraph.
This is highlighted text within a paragraph.
This is inline code within a paragraph.
This is a link within a paragraph.
This is text with superscript and subscript.
Blockquotes
"The only way to do great work is to love what you do."
"Design is not just what it looks like and feels like. Design is how it works."
Code Blocks
function greet(name) {
console.log(`Hello, ${name}!`);
}
greet('World');Text Colors
White text (Primary)
Gray 300 text (Secondary)
Gray 400 text (Tertiary)
Gray 500 text (Muted)
Violet accent text
Fuchsia accent text
Cyan accent text
Success text
Error text
Warning text
Text Alignment
Left aligned text (default)
Center aligned text
Right aligned text
Justified text that spreads across the full width of its container for a clean, aligned appearance on both edges.
Line Heights
Tight line height. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
leading-tight
Normal line height. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
leading-normal
Relaxed line height. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
leading-relaxed
Loose line height. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
leading-loose
Letter Spacing
Tighter letter spacing
Tight letter spacing
Normal letter spacing
Wide letter spacing
Wider letter spacing
Widest letter spacing
Text Transform
text
LOWERCASE TEXT
capitalized text
Normal Case Text