Health and Severity
Health describes the status of an element (eg. node, environment, host) that would be typically associated with positive or negative values, while in severity indicates an increasing level of risk.
Levels
These levels, accordingly applied, serve both purposes of communicating Health statuses and Severity concerns among different contexts. They are willingly generic and descriptive only at a high level so that they can be applied and adapted to different contexts, while at the same time providing consistency across the product.
Level | Name | Description |
|---|---|---|
0 | Unknown | Created for unknown or unassigned values that canβt be associated with a specific level. It does not imply any positive or negative meaning. |
1 | Good / Success | Created for a direct association with positive meanings, used for healthy elements and positive outcomes. |
2 | Regular / Neutral | Used for usual, acceptable states that need to be recognised but don't need to stand out. |
3 | Warning | The starting level of concern, used for elements that would need attention. |
4 | Risk | Middle level of risk, used for potential escalations and increasing level of severity. |
5 | Danger | Highest level of danger, used for elements that need immediate support and attention. |
Use cases
The following mapping is not exhaustive of all use cases but it serves as an example of how the Health & Severity levels might be applied. Different contexts and environments might need dedicated terminology, therefore these levels can be used with alternative, customised variations in terms of words and naming, serving the dedicated purpose while aligning the use of colors across the product.
Level | Use case A | Use case B | Use case C |
|---|---|---|---|
Unknown | - | Unknown / No data | Other |
Good / Success | - | Healthy | - |
Regular / Neutral | Low | - | Low |
Warning | Medium | Degrading | Warn |
Risk | High | - | Minor, Major |
Danger | Critical | Violated | Critical |
Colors
This association between levels and colors has been created to be recognised and immediately understood, avoiding conflicts with other EUI elements and tints.
Level | Name | Tint |
|---|---|---|
0 | Unknown | Blue grey |
1 | Good / Success | Green |
2 | Regular / Neutral | Sky blue |
3 | Warning | Yellow |
4 | Risk | Orange |
5 | Danger | Red |
Text Tokens
Sample | Token | Value |
|---|---|---|
Aa colors.textSubdued | Value #516381 | |
Aa colors.textSuccess | Value #09724D | |
Aa colors.textNeutral | Value #0F658A | |
Aa colors.textWarning | Value #6A4906 | |
Aa colors.textRisk | Value #9E3A16 | |
Aa colors.textDanger | Value #A71627 |
Background Tokens
Sample | Token | Value |
|---|---|---|
colors.backgroundBaseSubdued | Value #F6F9FC | |
colors.backgroundBaseSuccess | Value #E2F8F0 | |
colors.backgroundBaseNeutral | Value #E5F6FA | |
colors.backgroundBaseWarning | Value #FDF3D8 | |
colors.backgroundBaseRisk | Value #FFEDD6 | |
colors.backgroundBaseDanger | Value #FFE8E5 | |
colors.backgroundLightText | Value #E3E8F2 | |
colors.backgroundLightSuccess | Value #C9F3E3 | |
colors.backgroundLightNeutral | Value #CFEEF7 | |
colors.backgroundLightWarning | Value #FDE9B5 | |
colors.backgroundLightRisk | Value #FFDEBF | |
colors.backgroundLightDanger | Value #FDDDD8 | |
colors.backgroundFilledText | Value #5A6D8C | |
colors.backgroundFilledSuccess | Value #008A5E | |
colors.backgroundFilledNeutral | Value #1C8CB5 | |
colors.backgroundFilledWarning | Value #FACB3D | |
colors.backgroundFilledRisk | Value #ED6723 | |
colors.backgroundFilledDanger | Value #C61E25 |
Datavis Tokens
Sample | Token | Value |
|---|---|---|
colors.severity.unknown | Value #E3E8F2 | |
colors.severity.neutral | Value #B5E5F2 | |
colors.severity.success | Value #24C292 | |
colors.severity.warning | Value #FCD883 | |
colors.severity.risk | Value #FF995E | |
colors.severity.danger | Value #EE4C48 |
Edge cases
There might be cases in which these levels are not sufficient and don't fully fullfill the needs, in that case please reach out to EUI team.