Design System v1.0

Chart ramp

Categorical hues and sequential tint ramps for charting each commodity.

Categorical & tint ramps

One hue per commodity for categorical series, plus 100–900 tint ramps for sequential shading.

Categorical — one hue per commodity (chart-1…5)
chart-1Electricity
chart-2Water
chart-3Gas
chart-4Temperature
chart-5Emissions
Tint ramps — sequential shades per commodity (100 → 900, 500 = base)
Electricity
Water
Gas
Temperature
Emissions
In charts — the same ramps applied to live graphs
Blue ramp — consumption index by commodity
Blue tint ramp — consumption by sub-metered site

Command Palette

Search for a command to run...