Skip to main content

Status System

Consistent use of colors and symbols to convey status is critical for user success.

Astro’s user research, conducted on a wide variety of space applications, showed that inconsistent and unconstrained use of colors and symbols left users confused and even dismissive of color systems. The research further showed that wide overuse of red to indicate both “off” and “emergency” stripped the color of its attention-getting power.

The Astro Status System is a standard to consistently indicate the state of an object or concept (typically represented by an Icon). The Status System consists of Status Symbols and Status Colors.

The Status Color palette for the Status System is based on a color temperature scale. The lowest level of severity, Off, is grey (neutral) and the highest level of severity, Alert, is red (hot).

Status System Taxonomy
Figure 3.1.1 Status system taxonomy

Each Status Symbol is a combination of a Status Color and a shape. The shapes are provided to ensure people with color blindness can also clearly identify the state of the object or concept

Rules of Thumb

Status Colors

HexRGBCSSSynonyms
Status Color: Critical #ff3838255,56,56--color-status-criticalCritical, alert, form, error, emergency, urgent
Status Color: Serious #ffb302255,179,2--color-status-seriousSerious, error, warning, needs attention
Status Color: Caution #fce83a252,232,58--color-status-cautionCaution, unstable, unsatisfactory
Status Color: Normal #56f00086,240,0--color-status-normalNormal, on, ok, fine, go, satisfactory
Status Color: Standby #2dccff45,204,255--color-status-standbyStandby, available, enabled
Status Color: Off #9ea7ad158,167,173--color-status-offOff, unavailable, disabled

Status Colors-Light Background

HexRGBCSSSynonyms
Status Color: Critical Fill: #ff2A04
Border: #661102
Fill: 255,42,4
Border: 102,17,2
--status-symbol-color-fill-critical-on-lightCritical, alert, form, error, emergency, urgent
Status Color: Serious Fill: #ffaf3d
Border: #664618
Fill: 255,179,2
Border: 102,70,24
--status-symbol-color-fill-serious-on-lightSerious, error, warning, needs attention
Status Color: Caution Fill: #fad800
Border: #645600
Fill: 252,232,58
Border:100,86,0
--status-symbol-color-fill-caution-on-lightCaution, unstable, unsatisfactory
Status Color: Normal Fill: #00e200
Border: #005A00
Fill: 86,240,0
Border: 40,87,102
--status-symbol-color-fill-normal-on-lightNormal, on, ok, fine, go, satisfactory
Status Color: Standby Fill: #64d9ff
Border: #285766
Fill: 45,204,255
Border: 40,87,102
--color-status-standbyStandby, available, enabled
Status Color: Off Fill: #7b8089
Border: #3C3E42
Fill: 158,167,173
Border: 60,62,66
--status-symbol-color-fill-off-on-lightOff, unavailable, disabled

Avoid adding additional colors if possible. Creating additional colors greatly reduces the user’s ability to learn and properly use the application.