Data visualization

Principles

1. 01Six categories or fewer per chart. Beyond six, the eye stops distinguishing hues. Group, summarize, or split into multiple charts.
2. 02Reuse the order. The categorical palette has a fixed sequence beginning with blurple. The same series position lands the same color across every chart.
3. 03Status colors keep their meaning.Red is failure; green is success. Don't use them in a categorical sequence where they'd imply judgement on the data.
4. 04Don't place text on chart fills.The 600-weight saturated colors used in charts don't meet 4.5:1 against white. Labels live next to their data, not on top.

Single-color charts

When a chart pairs a focal series with reference data, use --chart-categorical-1 for the focal bars and --chart-neutral for everything the eye should skip past first — historical comparisons, the non-focal segment of a stacked bar, anything shown for context only. --chart-axis handles gridlines and axes.

Categorical palette

For up to eight unrelated series at the primary 600 weight. The order matters — always start at --chart-categorical-1 and go in sequence so a merchant's "Card" series stays the same color across every dashboard view.

Beyond eight series

For dashboards with more than eight series, the palette continues at 800 weight (9–16) and 900 weight (17–24) in the same hue order. The same color in a deeper weight reads as a related variant — useful for stacked breakdowns.

Status & severity

For charts that show outcomes — success/failure rates, severity buckets, SLA breaches — use the system status tokens directly. They mean the same thing in a chart as on a status pill.

Currency & negative values

Flatpay's product is full of money, and money goes both ways. The system provides three numeric text tokens: --text-numeric-positive, --text-numeric-negative, and --text-numeric-voided for struck-through or refunded values. Always pair color with a sign character so meaning carries without color.

Accessibility in charts

• Always pair color with a second cue. A patterned fill, a marker shape, a label, or a leading icon. Color blindness affects roughly 8% of men.
• Use 1px borders or 2px gaps between adjacent fills to separate regions when the colors are perceptually close (e.g. blurple and purple, orange and red).
• Don't overlay text on chart fills.The 600-weight palette values don't meet 4.5:1 against white. Labels go on the chart background, in the legend, or in a tooltip.
• Test in monochrome. Print the chart in grayscale or apply a desaturation filter — if the data is still readable, the color is enhancement rather than load-bearing.

Token reference

/* Single color */
--chart-categorical-1     /* lead series — --color-blurple-600 */
--chart-neutral           /* historical / inactive — --color-neutral-300 */
--chart-axis              /* gridlines and axes — --color-neutral-400 */

/* Categorical 1–24 — fixed hue order at three weights */
--chart-categorical-1 … --chart-categorical-8     /* 600 weight: blurple, green, purple, pink, orange, yellow, blue, red */
--chart-categorical-9 … --chart-categorical-16    /* 800 weight: same hue order, deeper */
--chart-categorical-17 … --chart-categorical-24   /* 900 weight: same hue order, deepest */

/* Status / severity — semantic, not chart-only */
--background-success
--background-warning
--background-danger
--background-information
--background-discovery

/* Money — text tokens for tabular numerals */
--text-numeric-positive   /* gains, credits */
--text-numeric-negative   /* losses, fees, chargebacks */
--text-numeric-voided     /* struck-through, refunded */
--text-numeric-primary    /* default tabular text */
--text-numeric-secondary  /* subdued tabular text */