Cloudscape Design System
  • Get started
  • Foundation
  • Components
  • Patterns
  • Demos
  • GitHub 
Cloudscape Design System
  • Get started
  • Foundation
  • Components
  • Patterns
  • Demos
  • GitHub 
  • About

Foundation


  • Visual foundation

    • Colors
    • Content density
    • Data visualization colors
    • Design tokens
    • Iconography
    • Layout
    • Motion
    • Spacing
    • Theming
    • Typography
    • Visual context
    • Visual modes
    • Visual style

  • Core principles

    • Accessibility
      • Focus management principles
      • Building accessible experiences
    • Responsive design
  1. Cloudscape Design System
    • Foundation
    • Visual foundation: Data visualization colors

    Data visualization colors

    Color can be used as a powerful element to augment a chart or other data visualization when applied with a clear sense of purpose. 

    On this page

    1. Status and severity palette
    2. Generic categorical palette
    3. Threshold colors
    4. Building custom palettes
    5. General guidelines
    6. Accessibility guidelines
    7. Implementation

    Did this page help you?

    Tell us more - optional

    1000 character(s) available. Do not disclose any personal, commercially sensitive, or confidential information.

    Status and severity palette

    The color palette for data that represents status or severity, and made to complement the status-related components such as flashbars and status indicators.

    When applying the palette, pick the color values that represents the data best. Not all 7 values need to be used. It can be used to represent a specific set of resource status categories that are independent to each other, or to represent an ordered sequence of severity levels. The color tokens in this palette can be themed and are marked as themeable in the table below.

    Example: A pie chart representing resources statuses and a donut chart representing 5 levels of severity. 

    Status and severity palette colors (7)