Nine chart types with a single rule: the shape carries the message, the number confirms it.
The client's reporting suite had grown eleven chart styles across four teams. Two used colour for category and two for magnitude, so the same red meant 'sales' on one screen and 'bad' on the next.
Colour is reserved for one meaning per screen and never for both category and magnitude. Where a chart needs to say 'this is the one that matters', it says it with position and weight, which survive greyscale and colour-blindness alike.
Reference landscape
- FT visual vocabulary — Right about matching form to question
- Most BI defaults — Every series a different colour, no hierarchy at all
“Colour means one thing per screen.”
Nearly every unreadable dashboard is unreadable for this reason. Fixing it needs no new chart types and no library change — it is a rule about allocation, which is why it survives contact with four teams and a deadline.
Stage by stage
01
Map landscape
Eleven existing chart styles audited against the question each was answering. Six were answering none.
02
Design system
Nine types, one ramp, and a written rule for which axis colour is allowed to encode.
What was difficult
Analysts wanted every series distinguishable at once.
Series beyond the fourth are drawn in neutral and labelled directly, with hover promoting one at a time. Everything stays distinguishable; nothing competes.
Exactly what you get
- Figma source
- 9 chart types
- Light + dark
- React + Tailwind
- Version
- 1.0.0
- Formats
- Figma, React, Tailwind, SVG
- Screens
- 6
- Components
- 18
- Dark mode
- Yes
- Prototype
- Yes
- Accessibility
- AA
Dependencies
- Inter — SIL Open Font Licence — included
Commercial fonts are never redistributed — they are named and linked, with a free equivalent substituted in the delivered files.
One legend instead of four, and reports that still work in print.