Health index

OverviewStyleGuidelinesCodeAccessibilityDemos
  1. Style
  2. Theme
  3. Configuration
  4. Space
  5. States
  6. Interactive
  1. Style
  2. Theme
  3. Configuration
  4. Space
  5. States
  6. Interactive

Style

Health index is a combination of letter grades and severity colors. Severity colors communicate a positive or negative status. For example, green has a positive status and red has a negative status. To meet accessibility standards, letter grades are also used so that color is not the only element communicating the health of something. Health index does not include any interactive elements.

Anatomy

Anatomy of 3 health index components. Annotation #1 is pointing to the letter grade and annotation #2 is pointing to the severity level.
  1. Letter grade
  2. Severity level

Variants

There are four available variants: Small, Default, Large, and Extra large. The only difference between the Large and Extra large variants is the size.

4 columns of health index components. Each column is a different size. Under each column, there is every letter grade and severity color.

Theme

Health index is available in both light and dark themes.

Light theme

Light theme health index component examples. Light theme health index component examples. Light theme health index component examples.

Dark theme

Dark theme health index component examples. Dark theme health index component examples. Dark theme health index component examples.

Configuration

Squares in the Default, Large, and Extra large variants are aligned horizontally.

3 examples of health index component configurations. The small size is just 1 square, so it’s horizontally and vertically centered. The default, large, and extra large sizes are rows of squares, so they’re horizontally centered only.

Space

The spacer in the Default variant is the same for all viewport sizes.

Health index component with a 16px spacer box in between a C letter grade and a row of severity squares. The active severity square is yellow.

States

Severity level

Depending on the theme and chosen variant, each severity level can have different colors and font styling.

Multiple light theme health index components at different sizes. Annotations 1 through 4 are pointing to various styling details as well as letter grades that have been enlarged.
Annotations of the health index component's light theme examples in the figure above
# Variant Font weight Text color Fill color Stroke/Emphasis color
1 Small Regular green-70 green-20 Stroke: green-60
2 Default Regular gray-95 N/A N/A
3 Large Medium gray-95 red-10
  • Stroke: red-70
  • Emphasis: red-70
4 Extra large Medium gray-95 red-10
  • Stroke: red-70
  • Emphasis: red-70
Multiple dark theme health index components at different sizes. Annotations 1 through 4 are pointing to various styling details as well as letter grades that have been enlarged..
Annotations of the health index component's dark theme examples in the figure above
# Variant Font weight Text color Fill color Stroke/Emphasis color
1 Mini Regular white gray-95 Stroke: green-60
2 Default Regular white N/A N/A
3 Large Medium white gray-95
  • Stroke: red-40
  • Emphasis: red-60
4 Extra large Medium white gray-95
  • Stroke: red-40
  • Emphasis: red-60

Interactive

Health index includes only text and is not interactive.

Edit this page on GitHub