Typography
Inter font family and type scale
Font Family
StockFind uses Inter as the primary font family, chosen for its clean, modern aesthetic inspired by Apple's design language.
--font-inter: 'Inter', system-ui, sans-serif;
--font-geist-mono: 'Geist Mono', monospace;Type Scale
H1The quick brown fox30px / semibold / tracking-tighterH2The quick brown fox24px / semibold / tracking-tighterH3The quick brown fox20px / semibold / tracking-tightBodyThe quick brown fox16px / normalSmallThe quick brown fox14px / normalXSmallThe quick brown fox12px / normalFont Weight
Apple-style typography uses restrained font weights. font-semibold (600) is the maximum used in the dashboard.
| Weight | Class | Usage |
|---|---|---|
| 600 | font-semibold | Headings, card titles, stat numbers, emphasis |
| 500 | font-medium | Badges, chips, inline labels |
| 400 | (default) | Body text, descriptions, labels |
font-bold (700), font-extrabold (800), and font-black (900) are not used in the dashboard UI.
Tracking (Letter Spacing)
Apple-style typography uses tighter letter spacing on large headings for a polished, editorial feel.
| Size | Tracking | Usage |
|---|---|---|
text-5xl+ | tracking-tighter | Hero headings, page titles |
text-2xl–text-4xl | tracking-tighter | Section headings |
text-xl | tracking-tight | Subheadings |
text-base and below | Default | Body text, labels |
| Stat numbers | tracking-tight | Financial metrics, KPIs |
Usage
// Headings — use tracking-tighter for large sizes
<h1 className="text-3xl font-semibold tracking-tighter">Page Title</h1>
<h2 className="text-2xl font-semibold tracking-tighter">Section Title</h2>
<h3 className="text-xl font-semibold tracking-tight">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 numbers — tracking-tight + tabular-nums
<span className="tracking-tight tabular-nums">$1,234.56</span>Financial Data
For financial numbers, always use tabular-nums for proper alignment and tracking-tight for a compact, polished look.
$1,234.56$12,345.67$123,456.78
<span className="tabular-nums tracking-tight">$1,234.56</span>Type Scale Reference
| Name | Class | Size | Weight | Tracking | Usage |
|---|---|---|---|---|---|
| H1 | text-3xl font-semibold | 30px | 600 | tracking-tighter | Page titles |
| H2 | text-2xl font-semibold | 24px | 600 | tracking-tighter | Section headers |
| H3 | text-xl font-semibold | 20px | 600 | tracking-tight | Subsections |
| Body | text-base | 16px | 400 | Default | Paragraphs |
| Small | text-sm | 14px | 400 | Default | Secondary text |
| XSmall | text-xs | 12px | 400 | Default | Labels, captions |