Forma 36

Box Shadows

Box Shadows

We use two different styles of box shadows at Contentful. Box shadows to communicate depth, and glows to communicate semantics.

Box shadows are used to give depth to the user interface.

TokenValueExample
box-shadow-default
0 1px 3px rgba(0, 0, 0, 0.08)
Box Shadow
box-shadow-heavy
0 2px 3px rgba(0, 0, 0, 0.35)
Box Shadow

Glows

Glows are used to indicate semantic focus states, for example in the Button component.

TokenValueExample
glow-primary
0px 0px 7px #2E75D4
Box Shadow
glow-negative
0px 0px 7px #BF3045
Box Shadow
glow-positive
0px 0px 7px #16875D
Box Shadow
glow-warning
0px 0px 7px #F79B0C
Box Shadow