Indicators are contextual. They are associated with a user interface element or specific content and should be displayed in proximity to that element.
- The colours of the indicator are pre-defined and should be used accordingly.
- The only exception is the in-progress indicator, which can be given a colour differentiation for the status (see examples below).
If there is semantic meaning, use the appropriate variant:
Grey
Grey for neutral informative states, like paused, inactive, pending, draft, not started.
Green
Green for positive or success state, like available, completed, approved, added.
Orange
Orange for warnings, like deleted, cancelled, alert, rejected, failed.
Red
Red for negative alerts indicating that a process is blocked or not ok.