Color is one of the most powerful drivers of visual consistency. A shared color set across generative AI experiences helps users identify their context faster and build trust more easily.
Purple is the primary color of Cloudscape's generative AI visual affordance. Generally used as a solid color to maximize color contrast, it helps signal generative AI elements across an interface, such as text (for example, generative AI output labels). Refer to the generative AI specific design tokens to implement generative AI visual affordance in your product.
Preview | Color name | HEX value | Examples |
|---|---|---|---|
Gradient ramps are designed to be versatile and cater to the needs of various use cases. They provide visual dynamism, reflective of the innovative spirit of generative AI. Lighter and color-rich gradients can help provide accent to a large surface or background, while darker and more simple gradients are better suited to be used in smaller sized elements such as the generative AI avatar or loading bar.
To provide balance and avoid visual overload, reserve gradients for:
Storytelling: Use gradients for components that need to be visually expressive, such as illustrations or image backgrounds, which help narrate a story.
Generative AI entity: Elements that represent a generative AI entity. For example, avatar of a generative AI assistant.
Generative AI loading states: Leverage application of gradients to highlight dynamic nature of certain elements, such as avatar in loading state and loading bar indicating generation of a response or processing of information.
You can find the different gradient specs as part of the [CDS] Foundations library. Refer to the generative AI design tokens to implement the gradients in your product interface.
radial-gradient(circle farthest-corner at top right, #b8e7ff 0%, #0099ff 25%, #5c7fff 40% , #8575ff 60%, #962eff 80%)
linear-gradient(90deg, #b8e7ff 0%, #0099ff 10%, #5c7fff 24%, #8575ff 50%, #962eff 76%, #0099ff 90%, #b8e7ff 100%)
Gradients can be paired with subtle motion to add emphasis to generative AI loading states. Since animated gradients capture the focus and attention of a user immediately, they should be used sparingly and with a clear intent. We suggest reserving animated gradients to show in progress states.
Make sure there is sufficient contrast between background and foreground colors. For example, text on a background.
Although all color combinations used in Cloudscape components are chosen with accessibility guidelines in mind, we don’t guarantee that all combinations of colors are compliant with these guidelines.
More accessibility resources can be found in our Accessibility article.
