Skip to main content Home
About About the Design SystemRoadmap
Get started OverviewDesignersDevelopers
Foundations OverviewColorGridIconographyInteractionsSpacingTypography
Tokens Overview Global colorbox shadowTypographyborderopacityspacelengthIconBreakpointsMedia Queries
Elements All elements Accordion Alert Announcement Audio player Avatar Back to top Badge Blockquote Breadcrumb Button Card Chip Code block Call to action Dialog Disclosure Footer Health index Icon Jump links Navigation (primary) Navigation (secondary) Pagination PopoverPlanned Progress stepsPlanned Site status Skip link Spinner Statistic Subnavigation Surface Switch Table Tabs Tag Tile Timestamp Tooltip Video embed
Theming OverviewColor PalettesCustomizingDevelopers
Patterns All PatternsCardTabsFilterFormLinkLink with iconLogo wallSearch barSkip navigationSticky bannerSticky cardTileVideo thumbnail
Personalization All Personalization PatternsAnnouncement
Accessibility FundamentalsAccessibility toolsAssistive technologiesCI/CDContentContributorsDesignDevelopmentManual testingResourcesScreen readers
Design/code status Release notes Get support

Health index

OverviewStyleGuidelinesCodeAccessibilityDemos
StyleColor schemesConfigurationSpaceStatesInteractiveStyleColor schemesConfigurationSpaceStatesInteractive

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.

Color schemes

Health index is available in both light and dark color schemes.

Light scheme

Light scheme health index component examples. Light scheme health index component examples. Light scheme health index component examples.

Dark scheme

Dark scheme health index component examples. Dark scheme health index component examples. Dark scheme 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
© 2021-2025 Red Hat, Inc. Deploys by Netlify