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

  • Key principles

    • Accessibility
      • Focus management principles
      • Building accessible experiences
    • Responsive design
    • Bidirectionality
  1. Cloudscape Design System
    • Foundation
    • Visual foundation: Colors
    1. Cloudscape Design System
    2. Foundation
    3. Visual foundation: Colors

    Colors

    Colors set the emotional tone of a user interface and are a powerful way to establish consistency. Each color, as well as the palette as a whole, has specific usage guidelines and role definitions to meet accessibility requirements.

    Published: July 1, 2022
    Visual mode compliance
    In order to use colors in a way that is visual mode compliant, use design tokens rather than the constants below.

    On this page

    1. System color palette
    2. Guidelines
    3. Accessibility

    Did this page help you?

    Tell us more - optional

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

    System color palette

    These colors come from the broader AWS brand palette . By integrating familiar colors as foundational elements, we create brand harmony across AWS offerings.

    Preview
    Color name
    HEX value
    Examples

    Guidelines

    Creating a strong contrast is key to directing attention to the right place. That’s why most of Cloudscape user interface (UI) is built from white with grayscale, contrasting with the colorful calls to action and status indicators. The colors in our color palette reinforce our brand as well as user actions. Using colors as intended will help achieve consistency between interfaces. If you use color casually, without thinking about the results at a larger scale, you're likely to confuse your users and be less successful at getting your point across.

    There are various ways colors can be used to convey messages; however, color should never be the only visual means of conveying information. Ensure users who cannot see color can still perceive information by using other visual means, such as pairing color with iconography or text. Cloudscape uses color to highlight primary actions, encode statuses, and trigger associations through the colors of those statuses.

    • Highlighting and accent: Blue should be used mainly to bring attention to the primary action on a page. It should also be used for secondary actions, links, and giving an accent to interactive elements.

    • Encoding and associations: Red and green status colors should be used mainly to indicate the status of resources, so the user can take action, and be confident that their other resources are performing correctly.

    For information on how to apply colors on charts, see data visualization colors.

    Accessibility

    Make sure there is sufficient contrast between background and foreground colors. For example, text or a button on a background.

    Did this page help you?

    Tell us more - optional

    1000 character(s) available. Do not disclose any personal, commercially sensitive, or confidential information.
    • About
    • Connect
    • Privacy 
    • Site terms 
    • © 2025, Amazon Web Services, Inc. or its affiliates. All rights reserved.
    Made with love atAWS