Elevation & motion
Elevation ladder & motion
Each shadow token on a card in both light and dark, plus every duration and easing token demonstrated on a small transition you can replay (it honours prefers-reduced-motion). Values come straight from tokens/elevation.css.
Elevation
Depth in Prism is functional, not decorative. A surface lifts only when it sits above the content around it — a menu over a page, a dialog over everything. The shadow tokens form a short, deliberate ladder:
--shadow-sm— resting cards and inputs.--shadow-md— popovers, menus, raised cards.--shadow-lg— dialogs and other modal surfaces.
In dark mode the same tokens lean on lighter surface fills as much as on shadow, because shadows alone read poorly on a near-black background. Use elevation to signal layering; do not stack it for emphasis.
Motion
Motion exists to explain a change, not to perform. The tokens are intentionally short:
- Durations —
--motion-fast(around 120ms) for state changes like hover and press,--motion-base(around 200ms) for entrances and most transitions,--motion-slowfor larger surfaces such as drawers. - Easings — a standard ease for most things, a decelerate curve for entrances, an accelerate curve for exits.
Reduced motion
Every animation in Prism is gated behind @media (prefers-reduced-motion: no-preference). When a user asks the system to reduce motion, transitions collapse to instant state changes — content still arrives, it just does not travel. Build your own animations the same way: make the end state the base, and animate toward it only when motion is allowed.
Rules
- No infinite decorative loops on content. A spinner during a real wait is fine; an always-animating accent is not.
- Animate transform and opacity, not layout properties, so motion stays smooth.
- If a transition makes something harder to read mid-flight, shorten it or remove it.
Live specimen
Elevation in context