Also known as:
Box shadowText shadowShadeDrop shadow
Shadow
Shadows distinguish layers and demonstrate environmental hierarchy.
Comparing components
Need to know
- Shadows help to define the various levels of elevation (z-index) in our product’s environment. They provide dimension to the interface, supporting individual objects and their interactions.
To keep in mind
- Shadows incorporate a coherent set of values for their positioning, blur, and transparency
- Shadows are created by using Black (#000 or 255, 255, 255), our default color for shade.
- Our brand colors are not used as the base color for a shadow. Our text color is made up of a range of colors. When it is mixed with a primary or secondary color, it will create a muddied effect.
- Black (#000000) is our default color for all things related to shade. It allows us to add a level of color control (no muddying of color) when applied as shade to our other base colors.
- For overlays such as a modal backdrop, use 50% transparency.
External links
Here are some examples of existing design systems: