Also known as:
Shadows distinguish layers and demonstrate environmental hierarchy.
Badge and Tag
Cards, Wells, and Tiles
Checkbox, Radio, and Toggle Switch
Layout, Spacing, Sizing, Vertical Rhythm, and Alignment
Link vs Button
Tooltip, Popover, and Modal
Vertical Rhythm and Baseline Grid
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 Ink brand color is
used as the base color for a shadow. Ink 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.
Here are some examples of existing design systems:
Material design: light shadows
Lightning: shadow token
Predix elevate layering
© Culture Amp Pty Ltd
Link to Culture Amp site