Style Guide for Data Visualizations
Colors
Main colors
Accent colors
Only reach for accent colors to highlight a data point over main colors.
Schemes
Categorical
schemeBuGnReGr
schemeBuReGnGr
schemeBuGnReGrPaired
schemeContrasting
schemeContrastingAlt
⚠️ Accessibility warning: not enough contrast between colors. Use sparingly in cases where you need to use mix-blend-modes.
schemeCategory10 Deprecated. Use schemeBuGnReGr
schemePaired Deprecated. Use schemeBuGnReGrPaired
schemeAltCategory10 Deprecated. Use schemeBuReGnGr
Diverging
schemeReGrBu[k] / interpolateReGrBu(t)
Sequential (Single Hue)
schemeBlues[k] / interpolateBlues(t)
schemeReds[k] / interpolateReds(t)
schemeGreens[k] / interpolateGreens(t)
schemeGreys[k] / interpolateGreys(t)
Sequential (Multi-Hue)
schemeGrBu[k] / interpolateGrBu(t)
schemeGrRe[k] / interpolateGrRe(t)
schemeGrGn[k] / interpolateGrGn(t)
Reference colors
The colors are made based on these colors from ADB branding toolkit.*
A suitable grey is picked.
Typography
Font Family
The font stack is ‘SF Pro, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif.’