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.
| Token | Value | Example |
|---|---|---|
| boxShadowPositive | 0px 1px 0px rgb(25, 37, 50, 0.1) | |
| boxShadowDefault | 0px 0px 0px 1px rgba(25, 37, 50, 0.1), 0px 3px 7px -3px rgba(25, 37, 50, 0.1), 0px 6px 12px -2px rgba(25, 37, 50, 0.1); | |
| boxShadowHeavy | 0px 0px 0px 1px rgba(25, 37, 50, 0.1), 0px -6px 16px -6px rgba(25, 37, 50, 0.03), 0px 8px 16px -8px rgba(25, 37, 50, 0.2), 0px 13px 27px -5px rgba(25, 37, 50, 0.15); | |
| insetBoxShadowDefault | inset 0px 2px 0px rgba(225, 228, 232, 0.2); |
Glows
Glows are used to indicate semantic focus states, for example in the Button component.
| Token | Value | Example |
|---|---|---|
| glowPrimary | 0px 0px 0px 3px #98CBFF | |
| glowNegative | 0px 0px 0px 3px #FFB1B2 | |
| glowPositive | 0px 0px 0px 3px #9ED696 | |
| glowWarning | 0px 0px 0px 3px #FDE5C0 | |
| glowMuted | 0px 0px 0px 3px #E7EBEE |