Appearance
Typography
Default Font
JetBrains Mono is the default typeface across the entire application. Monospace fonts are preferred for financial data because digits share uniform width, making columns of numbers easy to scan.
css
--font-family-mono: "JetBrains Mono", ui-monospace, monospace;Base Settings
| Property | Value |
|---|---|
| Base font size | 14px (--base-font-size) |
| Line height | 1.5 |
| Rendering | Antialiased (-webkit-font-smoothing: antialiased) |
Font Options
9 fonts are available. Switch via Settings > Typography or the SettingsPopover in the header. ThemeProvider loads fonts from Google Fonts on mount.
| Font | Category | Notes |
|---|---|---|
| JetBrains Mono | Monospace | Default. Crisp numerals, excellent for financial data. |
| Fira Code | Monospace | Programming ligatures. |
| Source Code Pro | Monospace | Adobe. Clean and neutral. |
| IBM Plex Mono | Monospace | Classic technical aesthetic. |
| Roboto Mono | Monospace | Google. Even character width. |
| Ubuntu Mono | Monospace | Distinctive, slightly rounded. |
| Cascadia Code | Monospace | Microsoft. Ligature support. |
| Inter | Sans-serif | Proportional. More spacious, good for dense text. |
| Geist | Sans-serif | Vercel. Modern geometric proportional. |
Font Sizes
Three size presets controlled by --base-font-size. Set via Settings or the uiPreferences.fontSize store value.
| Preset | Size | CSS Variable Value |
|---|---|---|
| Small | 12px | --base-font-size: 12px |
| Medium (default) | 14px | --base-font-size: 14px |
| Large | 16px | --base-font-size: 16px |
Number Formatting
Financial numbers use tabular numerals for right-aligned columns. Apply the .tabular-nums utility class or the CSS property directly:
css
.tabular-nums {
font-variant-numeric: tabular-nums;
}All monetary values are right-aligned and formatted with formatNZD() from src/lib/formatting.ts. This ensures consistent NZD currency formatting (e.g. $1,234.56).
Text Hierarchy
The design system uses size and opacity to establish hierarchy rather than font weight:
| Role | Size | Color Variable | Example |
|---|---|---|---|
| Panel title | 11px | --color-text-muted | Uppercase, tracking-wider, font-medium |
| Body text | 12-13px | --color-text-primary | Default content |
| Secondary text | 11-12px | --color-text-secondary | Supporting details |
| Muted text | 10-11px | --color-text-muted | Labels, timestamps |
Font Loading
ThemeProvider loads all font families from Google Fonts in a single <link> element on mount. Weights loaded: 400, 500, 600, 700 (Ubuntu Mono: 400, 700 only).
typescript
// ThemeProvider loads these on mount
const fonts = [
'JetBrains+Mono:wght@400;500;600;700',
'Fira+Code:wght@400;500;600;700',
'Source+Code+Pro:wght@400;500;600;700',
'IBM+Plex+Mono:wght@400;500;600;700',
'Roboto+Mono:wght@400;500;600;700',
'Ubuntu+Mono:wght@400;700',
'Inter:wght@400;500;600;700',
'Plus+Jakarta+Sans:wght@400;500;600;700',
];Font switching is instant. The ThemeProvider sets --font-family-mono on document.documentElement whenever the font selection changes in the theme store.