Status Colour Conventions

Status Colour Conventions

1. Status Colour Conventions

Use status colours consistently, but never communicate state by colour alone.

Semantic state

Common class

Meaning

Semantic state

Common class

Meaning

Success

success

Healthy, complete, or working

Information

info

Neutral information or newly created state

Warning

warning

Attention needed or threshold approaching

Danger

danger

Error, offline, blocked, or action required

1.1. Accessibility

  • Add clear text or an icon alongside colour

  • Check contrast in light and dark layouts

  • Do not repurpose semantic colours inconsistently within one workflow