Style guide
Every token, type ramp, and panel pattern used across the v5 pages — colors, sizes, paddings, headers, chips. Toggle the theme to inspect tokens in light and dark.
Color palette.
Every CSS variable defined under .v5-root. Light-mode values shown when light theme is active.
Display, numerals, eyebrows.
v5-display is Fraunces (serif). v5-num is JetBrains Mono. Always font-light on display.
Default body copy uses Geist at 15px / 1.65 line-height in var(--v5-text-muted) for a readable, editorial tone.
Compact body / aside copy at 13px / 1.55. Use inside section-header asides and card blurbs.
Section headers.
Always use <V5SectionHeader> instead of hand-rolling. Title accepts ReactNode so the italic span can highlight a key noun.
A title with one italic word.
Optional aside on the right — 13px body in var(--v5-text-muted). Wraps below 1024px.
Panels & padding.
The v5-panel class supplies surface, border, and radius. Padding is chosen by role — see scale below.
Body copy at 12px / 1.6 — used for descriptive blurbs inside cards and secondary metric explainers.
Body copy at 12px / 1.6 — used for descriptive blurbs inside cards and secondary metric explainers.
Body copy at 12px / 1.6 — used for descriptive blurbs inside cards and secondary metric explainers.
Body copy at 12px / 1.6 — used for descriptive blurbs inside cards and secondary metric explainers.
Used for nested sub-panels (e.g. hero sparkline). Slightly darker surface, same border treatment.
Chips, tabs, buttons.
Inline-style pattern: border + background driven by CSS vars, not hex. Active state always uses --v5-surface-2.
Axes, ticks, labels.
SVG text inside charts uses class-based fonts and var(--*) fills — never hardcoded hex.
Section spacing.
Top of section: pt-20. Bottom: pb-4 on stacked sections, pb-16 on hero. Header bottom margin is mb-8 sm:mb-10 (built into V5SectionHeader).