AriaNet Zero Manager
Colour palette
Built on the Aria Sustainability brand guide: black and white as the foundation, with the three highlight colours — Land, Sun and Air — used sparingly. Click any colour to copy it.
Brand colours
Gradient flows Green → Yellow → Blue. Use for details only (progress bars, icons, the symbol) — never as a solid background.
Aria Green (Land)
Primary actions, success, emission reductions
Aria Blue (Air)
Active navigation, links, information, statuses
Aria Yellow (Sun)
Warnings, pending data, energy
Neutrals (brand black)
Text, surfaces, borders — the brand is predominantly black and white
Usage in the app
Status colours
Each status has a solid colour (fills, icons), a soft background, a border and a readable text colour. Used in alerts, labels, pop-up messages and form errors.
Success
--success, --success-bg, --success-border, --success-foregroundWarning
--warning, --warning-bg, --warning-border, --warning-foregroundInfo
--info, --info-bg, --info-border, --info-foregroundError
--destructive, --destructive-bg, --destructive-border, --destructive-foregroundEmissions charts
Series order follows the scopes, then the 700 and 300 tones for extra series.
Thin lines and small marks for Scope 2 on white use #a68800 (--chart-2-line, 3.4:1) — #ffd100 is too faint there.
Dark mode
Switch with the sun / moon / screen buttons in the top menu. Same token names, different values. Green and yellow fills keep black text.
Preview
Total emissions
1,284 tCO₂e
▼ 8.2% vs. previous year
Progress towards net zero
Accessibility rules
- Every text/background pair meets WCAG AA (4.5:1 body, 3:1 large text and control borders) in both themes.
- Green #80bc00 and yellow #ffd100: always black text, in light and dark.
- White text never sits on #1199d6 (3.2:1) — use #0b6690 instead (table headers, current page).
- Status text uses the -foreground colour, never the solid colour (#6a9c00 on white is only 3.3:1).