Skip to content
Telescope

Shadow

We use shadows to provide cues about depth, direction of movement and surface edges. A surface’s shadow is determined by its elevation and relationship to other surfaces.
TokenValueDescriptionExample
shadowElevate
0 8px 12px -4px var(--colorShadowDepth)
Shadow that elevates elements from their bottom edge.
shadowElevateLoud
0 2px 8px -6px var(--colorShadowDepthLoud)
Shadow that strongly elevates elements from their bottom edge.
shadowElevateQuiet
0 8px 12px -4px var(--colorShadowDepthQuiet)
Shadow that subtly elevates elements subtly from their bottom edge.
shadowRaise
0 6px 24px 0 var(--colorShadowDepth)
Shadow that raises elements off the page from all edges.
shadowRaiseQuiet
0 3px 12px 0 var(--colorShadowDepth)
Shadow that subtly raises elements off the page from all edges.

Usage

import {tokens} from '@pleo-io/telescope'


const element = styled.div`
    box-shadow: ${tokens.shadowRaiseQuiet};
`