Foundation
Shadow
Five shadow primitives anchoring an elevation system. Components reference the semantic elevation.* aliases — rest, raised, floating, overlay, deep — so the visual hierarchy stays consistent and a global "more crisp / softer" tweak is one file.
Primitive scale
Pure shadow values, blur and opacity climbing in concert.
Semantic elevations
Use these in components. Each carries an intent — "this thing is at rest", "this thing is being interacted with", "this thing floats above the page".
| Alias | Maps to | Used by |
|---|---|---|
| elevation.rest | shadow.xs | Cards at rest, table rows, default container surfaces |
| elevation.raised | shadow.sm | Cards on hover, focused inputs, lifted state |
| elevation.floating | shadow.md | Dropdowns, popovers, tooltips, autocomplete suggestions |
| elevation.overlay | shadow.lg | Modals, drawers, side sheets |
| elevation.deep | shadow.xl | Maximum elevation — alerts, attention-demanding overlays. Rare. |
In context
The product card uses elevation.rest by default and lifts to elevation.raised on hover. Hover over the cards to see the transition.
.product-card {
box-shadow: var(--caster-elevation-rest);
transition: box-shadow var(--caster-motion-base);
}
.product-card:hover {
box-shadow: var(--caster-elevation-raised);
}
Don't stack arbitrary shadows for "extra depth". If
elevation.deep doesn't pop enough, the issue is usually contrast or color, not shadow density. A heavier shadow rarely solves a hierarchy problem and often flattens the perceived material of the surface.
CSS variables emitted
| Variable | Resolved value |
|---|---|
| --caster-shadow-xs | 0 1px 2px rgba(0,0,0,0.06) |
| --caster-shadow-sm | 0 1px 4px rgba(0,0,0,0.08) |
| --caster-shadow-md | 0 4px 12px rgba(0,0,0,0.10) |
| --caster-shadow-lg | 0 8px 24px rgba(0,0,0,0.12) |
| --caster-shadow-xl | 0 16px 40px rgba(0,0,0,0.14) |
| --caster-elevation-rest | var(--caster-shadow-xs) |
| --caster-elevation-raised | var(--caster-shadow-sm) |
| --caster-elevation-floating | var(--caster-shadow-md) |
| --caster-elevation-overlay | var(--caster-shadow-lg) |
| --caster-elevation-deep | var(--caster-shadow-xl) |