Charts
The brand data-viz system: one shared Recharts component in @repo/ui, driven by --chart-* brand tokens. Series colours are CSS variables that cascade and flip with dark mode for free — no per-page hex. House style (Soft): monochrome-first colour, rounded bar tops, smooth (monotone) lines, gradient area fills, donut gaps with rounded ends, faint horizontal grid, no spines, Geist tabular-nums, one ink tooltip.
Line — single series (monochrome)
A single-metric chart uses --chart-1 (brand blue) only, drawn as a smooth (monotone) 2px curve. Hierarchy comes from the data, not a palette.
Bar — single series
Thin bars with rounded tops (6px) at full brand blue. Faint horizontal grid only.
Area — gradient fill
A soft gradient (18% → 0) under a 2px smooth stroke, on one brand hue.
Dual-axis — bar + line
Two metrics, two axes: spend as bars (left, --chart-1), CPA as a dashed line (right, --chart-3). The campaign-spend dashboard pattern.
Donut — categorical
The exception to monochrome-first: true categorical data steps through the ordered brand palette. Slices are separated by small gaps with rounded ends.
Line — multi-series
Several series step through the ordered brand palette, with a legend. Same pattern for any multi-line trend.
Bar — grouped (multi-series)
Multiple series sit side-by-side per category. Rounded tops, brand palette, legend.
Bar — stacked
Series stack into one bar per category (shared stackId). Square segments; only the top of the stack is rounded.
Pie — full
The doughnut without the hole (innerRadius 0). Same categorical palette + gaps.