Lead Caravan chart reference, rendered with the live site tokens.

Five color slots, given out in this set order and never reused. Taken from the design set's --chart-1..5 into public/tokens.css, with out-of-band slots snapped in OKLCH so every slot passes the lightness-band, chroma-floor, color-vision ΔE, and 3:1-contrast checks against the card surfaces the figures actually sit on, in both themes. Each slot pairs with a --lead-site-chart-on-1..5 cut-out text, white or black, whichever stands out more on that fill, for labels sitting inside a colored slice.

• --lead-site-chart-1 from --color-chart-dark-1
• --lead-site-chart-2 from --color-chart-dark-2
• --lead-site-chart-3 from --color-chart-dark-3
• --lead-site-chart-4 from --color-chart-dark-4
• --lead-site-chart-5 from --color-chart-dark-5

One big number is a stat tile, not a chart. The number uses plain text colors, never a chart color. And the change pairs an arrow with color, so up or down never rests on color alone. Delta color follows the tone of the change, not the arrow: a falling cost is green, a rising no-show rate is red.

Two lines, 2px thick, labelled at the ends with a key, over a faint grid. A cross-hair snaps to the nearest month and one note reads out both lines at that point. Aim at a date, never at a 2px line.

One thing measured across groups gets one color, not a color per bar. Only the top value is always labelled. The rest show when you hover. Bar ends are rounded 4px and pinned to the baseline.

Part-to-whole per row: categorical slots follow the engagement type — never the segment's size or rank — and a 2px surface gap separates adjacent fills. Every segment carries an always-on % label in knockout ink (white or black per slot, whichever clears more contrast on that fill). Under forced-colors and print, a 45°/135° hatch overlay carries identity where hue can't.

A few slices, a 2px gap between them, and the total in the middle. The key lists every slice with its number, so you never have to go by color alone.