# Shadow

We use shadows to provide cues about depth, direction of movement and surface edges.

| Token                                                                                    | Value                                        | Example |
| ---------------------------------------------------------------------------------------- | -------------------------------------------- | ------- |
| `shadowElevate` Shadow that elevates elements from their bottom edge.                    | 0 8px 12px -4px var(--colorShadowDepth)      |         |
| `shadowElevateLoud` Shadow that strongly elevates elements from their bottom edge.       | 0 2px 8px -6px var(--colorShadowDepthLoud)   |         |
| `shadowElevateQuiet` Shadow that subtly elevates elements subtly from their bottom edge. | 0 8px 12px -4px var(--colorShadowDepthQuiet) |         |
| `shadowRaise` Shadow that raises elements off the page from all edges.                   | 0 6px 24px 0 var(--colorShadowDepth)         |         |
| `shadowRaiseQuiet` Shadow that subtly raises elements off the page from all edges.       | 0 3px 12px 0 var(--colorShadowDepth)         |         |