The SecureVault Design System uses Geist Sans as its primary typeface, providing a clean, modern aesthetic with excellent readability.
Font Family Geist Sans Geist Sans is a modern, geometric sans-serif font optimized for UI and code:
--font-geist-sans: 'Geist Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif ;
Usage in CSS: body { font-family : var ( --font-geist-sans ); }
Usage in Tailwind: < div className = "font-sans" > Content using Geist Sans </ div >
The font-sans class is applied globally by default, so you typically don’t need to specify it explicitly.
Font Sizes The system uses Tailwind’s default font size scale with common patterns:
text-3xl 36px - Page titles and hero headings
text-2xl 24px - Section headings and large stats
text-xl 20px - Modal titles and card headings
text-lg 18px - Subtitles and prominent descriptions
text-base 16px - Default body text
text-sm 14px - Helper text, labels, and secondary content
Typography Scale // Page title < h1 className = "text-3xl font-bold text-foreground" > Dashboard </ h1 > // Section heading < h2 className = "text-2xl font-semibold text-foreground" > Recent Transactions </ h2 > // Modal or card title < h3 className = "text-xl font-semibold text-foreground" > Delete Account </ h3 > // Subtitle or description < p className = "text-lg text-muted-foreground" > Manage your account settings and preferences </ p > // Body text (default) < p className = "text-base text-foreground" > Regular paragraph text goes here </ p > // Helper text or labels < span className = "text-sm text-muted-foreground" > Last updated 2 hours ago </ span >
Font Weights Geist Sans supports multiple weights. The design system primarily uses:
Class Weight Usage font-bold700 Headings, emphasis font-semibold600 Subheadings, labels font-medium500 Buttons, links font-normal400 Body text (default)
Examples // Bold headings < h1 className = "text-3xl font-bold" > Title </ h1 > // Semibold labels < label className = "text-sm font-semibold" > Email Address </ label > // Medium buttons < Button className = "font-medium" > Submit </ Button > // Normal body text (default) < p className = "font-normal" > Regular paragraph </ p >
Common Patterns < div className = "space-y-2" > < h1 className = "text-3xl font-bold text-foreground" > Settings </ h1 > < p className = "text-muted-foreground text-lg" > Manage your account and preferences </ p > </ div >
Card Title with Description < div className = "space-y-1" > < h3 className = "text-lg font-semibold text-foreground" > Security </ h3 > < p className = "text-sm text-muted-foreground" > Manage your password and two-factor authentication </ p > </ div >
Stat Display < div > < p className = "text-sm text-muted-foreground" > Total Revenue </ p > < p className = "text-2xl font-bold text-foreground" > $24,500 </ p > </ div >
< label className = "block text-sm font-medium text-foreground mb-2" > Email Address < span className = "text-muted-foreground font-normal ml-1" > (required) </ span > </ label > < Input type = "email" />
Text Colors Combine typography with semantic colors for hierarchy:
// Primary text (high emphasis) < h1 className = "text-foreground" > Main Title </ h1 > // Secondary text (medium emphasis) < p className = "text-muted-foreground" > Description or subtitle </ p > // Accent text (interactive elements) < a className = "text-primary hover:underline" > Learn more </ a > // Error text < span className = "text-destructive" > Invalid email address </ span >
Line Height Tailwind’s default line heights work well with Geist Sans:
// Tight for headings < h1 className = "text-3xl font-bold leading-tight" > Compact Heading </ h1 > // Normal for body text (default) < p className = "text-base leading-normal" > Body text with comfortable spacing </ p > // Relaxed for long-form content < article className = "text-base leading-relaxed" > Long-form article content </ article >
Responsive Typography Use responsive modifiers for better mobile experiences:
// Smaller on mobile, larger on desktop < h1 className = "text-2xl md:text-3xl lg:text-4xl font-bold" > Responsive Heading </ h1 > // Adjust body text for readability < p className = "text-sm md:text-base" > Responsive paragraph </ p >
Text Alignment // Left-aligned (default) < p className = "text-left" > Left-aligned text </ p > // Center-aligned < p className = "text-center" > Centered text </ p > // Right-aligned < p className = "text-right" > Right-aligned text </ p >
Truncation and Overflow // Single line truncation < p className = "truncate" > This text will be truncated with ellipsis if too long </ p > // Multi-line clamp (requires plugin) < p className = "line-clamp-2" > This text will show only 2 lines and truncate the rest </ p > // Break long words < p className = "break-words" > Thisisaverylongwordthatneedstowrap </ p >
Empty States < div className = "flex flex-col items-center justify-center py-16 text-center" > < div className = "h-16 w-16 rounded-full bg-muted flex items-center justify-center mb-4" > < Icon className = "h-8 w-8 text-muted-foreground" /> </ div > < h3 className = "text-lg font-semibold text-foreground" > No items found </ h3 > < p className = "text-muted-foreground mt-1 mb-4 text-sm" > Get started by creating your first item </ p > < Button > Create Item </ Button > </ div >
Lists // Unordered list < ul className = "space-y-2" > < li className = "text-base text-foreground" > List item one </ li > < li className = "text-base text-foreground" > List item two </ li > </ ul > // Ordered list < ol className = "list-decimal list-inside space-y-2" > < li className = "text-base text-foreground" > Step one </ li > < li className = "text-base text-foreground" > Step two </ li > </ ol >
Links // Default link < a href = "#" className = "text-primary hover:underline" > Learn more </ a > // Muted link < a href = "#" className = "text-muted-foreground hover:text-foreground transition-colors" > Secondary link </ a > // External link with icon < a href = "#" className = "text-primary hover:underline inline-flex items-center gap-1" > Visit docs < ExternalLink className = "h-4 w-4" /> </ a >
Accessibility Always maintain sufficient color contrast between text and background. Use text-foreground for primary text and text-muted-foreground for secondary text.
Best Practices
Semantic HTML - Use proper heading hierarchy (h1, h2, h3)Minimum font size - Never go below text-sm (14px) for body textLine length - Keep line length between 50-75 characters for readabilityLine height - Use at least 1.5 line height for body textColor contrast - Ensure WCAG AA compliance (4.5:1 for normal text)
Quick Reference Element Classes Page title text-3xl font-bold text-foregroundSection heading text-2xl font-semibold text-foregroundCard heading text-xl font-semibold text-foregroundSubtitle text-lg text-muted-foregroundBody text text-base text-foregroundHelper text text-sm text-muted-foregroundLabel text-sm font-medium text-foregroundLink text-primary hover:underlineError text-sm text-destructive