UI Conventions
Number Formatting
All monetary and percentage values pass through formatters in src/lib/format.ts:
| Function | Input | Output | Used For |
|---|---|---|---|
fmtPct(n, decimals=2) | 0.0814 | "8.14%" | APY columns, carry columns |
fmtUsd(n, { compact }) | 4_180_000_000 | "$4.18B" | Market caps, TVL |
fmtBps(bps) | 333 | "+333bps" | Spread vs. benchmark |
fmtNumber(n, decimals=0) | 41_320 | "41,320" | Holder counts |
All numbers in tables and stat blocks use the tabular-nums CSS feature and Geist Mono, ensuring columns align regardless of digit count.
Color System
Color is used to convey meaning, not decoration. Saturated color appears only for:
- Chart lines: one fixed hex per asset (see the color mapping in Asset Coverage)
- Carry chart fill: green above zero carry, red below
- Positive / negative values: green for gains, red for losses (returns, carry)
- Amber accent: the single brand accent for active controls, the equity curve's leverage handle, and end-point labels
All other UI elements use the neutral palette derived from the oklch() dark-mode tokens in globals.css.
Typography
- Prose: Geist Sans
- All numbers: Geist Mono with
tabular-nums - Logo: JetBrains Mono with
0.32emletter-spacing and an animated cursor blink
Responsive Zoom
The app-shell class applies viewport-width-based zoom to ensure wide tables fit without horizontal scroll on tablet and small-laptop breakpoints:
| Viewport | Zoom |
|---|---|
| 768px (tablet portrait) | 0.78x |
| 1024px - 1279px | 0.88x |
| 1280px - 1535px | 1.0x (base) |
| 1536px - 1919px | 1.08x |
| 1920px+ | 1.15x |
InfoTooltip
A dark-themed inline tooltip (src/components/ui/InfoTooltip.tsx) used throughout to surface methodology notes, caveats, and glossary definitions without adding prose to the table itself. Renders with a 150ms delay to prevent accidental triggering.
Deep Links
Both the carries and asset tables use the useRowDeepLink hook to sync the open accordion row to a URL query parameter (?carry=KEY or ?asset=TICKER). This allows sharing a link that opens directly to a specific strategy or asset expansion.
Last updated: June 2026.