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
    • Bidirectionality
  1. Cloudscape Design System
    • Foundation
    • Visual foundation: Visual context
    1. Cloudscape Design System
    2. Foundation
    3. Visual foundation: Visual context

    Visual context

    Visual context helps create a different look and feel for components placed in a specific area.

    Published: February 23, 2022

    On this page

    1. What is a visual context?
    2. How can I use visual context in my service?
    3. Implementation guidelines

    Did this page help you?

    Tell us more - optional

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

    What is a visual context?

    The concept of visual context refers to a specific area of the UI, where the visual appearance of Cloudscape components adapts to the context that they’re placed in. This adds a new dimension for visual modes: modes are global (they apply to the whole page and across pages), while visual contexts are local (they apply only to a subset of the interface). For example, components within a visual context can look different in light and dark mode. The following use cases show how visual contexts fit into our visual foundation.

    Use cases in the system

    1. Top navigation

      The top navigation component uses grey as its background color, regardless of which mode the interface is displayed in. This requires that all components placed inside the top navigation, such as a button dropdown and its child elements (such as dropdown items) adapt to its visual context. This ensures they’re visible even when the overall user interface (UI) is in light mode.

    2. Header

      Cloudscape offers page-level headers in both light and dark mode. In light mode, the header has a dark header, which requires that all components placed inside of it adapt their appearance.

    3. Flashbar

      The flashbar component is designed so that it has a different solid background fill compared to other components, which commonly have a white background such as containers, cards and tiles. This requires that all text components placed inside a flashbar, such as buttons, visually adapt to its visual context. This ensures they maintain sufficient color contrast.

    4. Alert

      The alert component uses different colored backgrounds to communicate different types of messages. Secondary buttons, which are typically styled in blue, need to maintain sufficient color contrast. This is to avoid creating conflicting messages with status-related color in messages.

    In some cases, visual context is also leveraged to render a specific visual style on components that host multiple components inside. For example, app layout toolbar displays a light grey page background, which is inherited by all components inside it (page header, content layout, etc). Standard app layout, on the other hand, remains unchanged.

    How can I use visual context in my service?

    Currently, only specific Cloudscape components use visual contexts. It's not possible to use the predefined contexts in other areas of the system or to create new visual contexts.

    Visual contexts are themed separately from the global design tokens.

    Implementation guidelines

    Visual contexts are implemented in the system by defining specific values for design tokens for each context. All the Cloudscape components embedded inside a visual context will automatically inherit the newly defined look and feel. The only exception to this rule is the modal component, which is not subject to visual contexts. This is because it’s displayed in a different layer of the application.

    If you’re using design tokens to style custom components embedded in a visual context, the values for some design tokens might be different than what is documented in the design tokens table. Make sure that the custom components display correctly within a visual context, such as top navigation, high-contrast header, flashbar, and alert.

    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