Visual style
Visual style defines how the elements of Cloudscape work together to create a consistent visual aesthetic that reinforces our brand.
On this page
Did this page help you?
Tell us more - optional
Shadows
The Cloudscape visual style is flat, modern, and robust. Shadows are used to provide visual hierarchy through elevation to help to mimic the behavior of layering elements on the page. In Cloudscape, typically large elements that encompass smaller elements have a shadow, while the smaller elements that are used inside larger elements don't have a shadow. In some cases, when a more subtle sense of depth is needed inside an element which already has a shadow, we apply a lighter shadow called inner shadow.
Consider the following example. A table is meant to live directly in the app layout, so it has an outer shadow applied by default. However, when you enforce a sticky header on the table, a lighter shadow is applied in the header to mimic the scrolling layer. On the other hand, an input does not have any shadow because it is typically used inside other elements which have shadow, such as form sections.
Shadow
Container
- Flash
Inner shadow

