Reference: Adobe Spectrum — data visualization fundamentals. Adapted for our scale: most product data viz is small multiples in dashboards and data tables, not analyst tooling.
Principles
- Answer a question, don't decorate a page. Every chart names the question it answers in its title, not a dataset label. "Which projects have missing reports?" is a title; "Reports" is a label.
- Choose the encoding by the comparison. Position and length (bar, dot, line) before angle and area (pie, donut). If people must compare values, put them on a common axis.
- Default to less. Direct-label instead of legends where possible; gridlines light or absent; no 3D, shadows, or decorative gradients ever.
Colour in charts
- Categorical: maximum 6 distinguishable hues from the shared Radix palette; beyond that, group into "other" or use small multiples.
- Sequential/diverging: single-hue Radix ramps for magnitude; diverging only when there's a meaningful midpoint.
- Semantic consistency: the same metric keeps the same colour everywhere in a product. Functional colours (success/warning/danger) keep their meaning; never use red decoratively in a chart.
- Never colour alone: pair with labels, patterns, or position; verify with a colour-blindness simulator (accessible-chart baseline).
Numbers and text
- Tabular numbers in tables and axes. Locale-aware formats.
- Round to the precision people act on: "78%", not "78.42%".
- Empty and loading states designed: a chart with no data explains why and what to do next.
Tables
Tables are often your product's most-used visualisation. Build them with the table pattern: semantic rows and headers, numeric columns right-aligned with tabular figures, and a header that stays visible while scrolling (CMP-6).