Typography
Geist Sans font family and type scale
Font Family
StockFind uses Geist Sans as the primary font family, matching the modern aesthetic of financial applications.
--font-geist-sans: 'Geist Sans', system-ui, sans-serif;
--font-geist-mono: 'Geist Mono', monospace;Type Scale
H1The quick brown fox30px / boldH2The quick brown fox24px / boldH3The quick brown fox20px / semiboldBodyThe quick brown fox16px / normalSmallThe quick brown fox14px / normalXSmallThe quick brown fox12px / normalUsage
// Headings
<h1 className="text-3xl font-bold">Page Title</h1>
<h2 className="text-2xl font-bold">Section Title</h2>
<h3 className="text-xl font-semibold">Subsection</h3>
// Body text
<p className="text-base">Regular paragraph text</p>
<p className="text-sm">Secondary information</p>
<p className="text-xs text-muted">Captions and labels</p>Financial Data
For financial numbers, always use tabular-nums to ensure proper alignment in tables and lists.
$1,234.56$12,345.67$123,456.78
<span className="tabular-nums">$1,234.56</span>Type Scale Reference
| Name | Class | Size | Weight | Usage |
|---|---|---|---|---|
| H1 | text-3xl font-bold | 30px | 700 | Page titles |
| H2 | text-2xl font-bold | 24px | 700 | Section headers |
| H3 | text-xl font-semibold | 20px | 600 | Subsections |
| Body | text-base | 16px | 400 | Paragraphs |
| Small | text-sm | 14px | 400 | Secondary text |
| XSmall | text-xs | 12px | 400 | Labels, captions |