shadow design system
Side-by-side: blunt single-layer shadow vs. layered depth scale.
Loading...
skill
Loading bundle…
context prompt
paste-ready brief for an AI assistant.
Side-by-side: blunt single-layer shadow vs. layered depth scale.
paste-ready brief for an AI assistant.
Shadow system with clearer elevation framing, an interactive scale, and hover lift that makes the difference between single-layer and layered depth immediately legible.
Elevation language
Compare a blunt single shadow against a layered system with softer long falloff, cleaner contact edges, and more believable separation between surfaces.
Surface stack
Multiple layers should read as connected surfaces, not five unrelated blurs.
Active elevation
Useful for floating toolbars, drawers, and elevated utility panes.
Pick an elevation
Hover or focus each tile to compare how the same level reads across the current mode.
Buttons and supporting panels should echo the same depth language instead of inventing new shadow rules.
Action surfaces
Hover the buttons to feel the lift. The difference is most obvious in layered mode: contact remains crisp while the longer shadow falloff stays soft.