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.
TokenValueExample
shadowElevate
0 8px 12px -4px var(--colorShadowDepth)
shadowElevateLoud
0 2px 8px -6px var(--colorShadowDepthLoud)
shadowElevateQuiet
0 8px 12px -4px var(--colorShadowDepthQuiet)
shadowRaise
0 6px 24px 0 var(--colorShadowDepth)
shadowRaiseQuiet
0 3px 12px 0 var(--colorShadowDepth)

Usage

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


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