Text
Typography patterns for body text, captions, labels, and other text content. Uses Tailwind utility classes for consistent styling across the design system.
Body Text
Standard paragraph text sizes
text-lg (18px)
Large body text for introductions and important content. Use sparingly for emphasis.
text-base (16px) - Default
Standard body text for most content. This is the default size for paragraphs and general reading.
text-sm (14px)
Smaller body text for secondary content, descriptions, and supporting information.
text-xs (12px)
Extra small text for captions, timestamps, and metadata.
Text Colors
Semantic text color hierarchy
text-slate-900 /
text-slate-700 /
text-slate-600 /
text-slate-500 /
text-indigo-600 /
Font Weights
Text weight variations
font-normal (400) - Regular body text
font-medium (500) - Labels and emphasis
font-semibold (600) - Strong emphasis, subheadings
font-bold (700) - Heavy emphasis, headings
Labels
Form labels and UI labels
Form Label
Section Label (Uppercase)
Account Settings
Helper Text
Your email will be used for account notifications.
Inline Styles
Text decorations and inline formatting
Use strong for important text.
Use em for emphasized or quoted text.
Use code for inline code.
Use links for navigation.
Use strikethrough for deleted content.
Use underline sparingly for emphasis.
Text Truncation
Handling overflow text
Single line truncate
This is a very long text that will be truncated with an ellipsis when it overflows the container width.
Line clamp (2 lines)
This text will be clamped to two lines maximum. Any additional content will be hidden with an ellipsis at the end of the second line. This is useful for card descriptions.
Line clamp (3 lines)
This text will be clamped to three lines maximum. Any additional content will be hidden with an ellipsis at the end of the third line. This is useful for longer previews where you want to show a bit more content but still maintain a consistent layout height across multiple cards or list items.
Usage Patterns
Common text styling patterns
// Primary body text<p className="text-base text-slate-700"> Content here</p>
// Secondary/muted text<p className="text-sm text-slate-600"> Supporting information</p>
// Caption/metadata<span className="text-xs text-slate-500"> Updated 2 hours ago</span>
// Form label<label className="block text-sm font-medium text-slate-700 mb-2"> Field Label</label>
// Section label (uppercase)<p className="text-[12px] font-semibold text-slate-500 uppercase tracking-wide"> Section Name</p>
// Inline code<code className="px-1.5 py-0.5 bg-slate-100 rounded text-sm font-mono text-primary-default"> code</code>
// Truncation<p className="truncate">Long text...</p><p className="line-clamp-2">Multi-line clamp...</p>Design System Reference
Typography scale and colors
| Prop | Type | Default | Description |
|---|---|---|---|
text-xs | 12px / 0.75rem | — | Captions, timestamps, metadata |
text-sm | 14px / 0.875rem | — | Secondary content, descriptions |
text-base | 16px / 1rem | — | Default body text |
text-lg | 18px / 1.125rem | — | Large body, introductions |
text-xl | 20px / 1.25rem | — | Small headings |
Features
Text styling capabilities
- Semantic colors: Primary, secondary, muted, and accent colors
- Size scale: Consistent sizing from xs to xl
- Font weights: Normal, medium, semibold, and bold
- Dark mode: All text colors have dark mode variants
- Truncation: Single line and multi-line clamping
- Inline styles: Strong, em, code, links, and more