Elevation
Shadows are tinted with the current intent's hue using CSS-native oklch(). A card inside intent-danger automatically gets red-tinted shadows. Uses Tailwind's standard shadow utilities.
Shadow scale
Each level uses multi-layer shadows with geometric scaling. Apply with shadow-sm, shadow-lg, etc.
shadow-xs
Subtle depth for small elements like badges, chips
shadow-sm
Light depth for buttons, inputs, minor cards
shadow-md
Default raised surface — cards, panels
shadow-lg
Prominent depth — hover states, featured cards
shadow-xl
High emphasis — dropdowns, popovers, floating panels
shadow-2xl
Maximum depth — modals, dialogs, overlays
Inset shadows
For sunken surfaces like input fields and wells. Apply with inset-shadow-xs or inset-shadow-sm.
inset-shadow-xs
Subtle inner depth for pressed states
inset-shadow-sm
Sunken surfaces — input fields, wells
Rim light
A subtle inner highlight for raised surfaces. Adds a polished, glass-like edge. Four levels available, used automatically by emphasis presets.
rim-light-subtler
Barely visible — subtle surfaces
rim-light-subtle
Gentle — strong buttons
rim-light-normal
Standard — rim-light utility
rim-light-strong
Prominent — raised/floating surfaces
Emphasis presets
The emphasis system includes elevation-aware presets that combine background, shadow, and interactive states. These are the recommended way to apply elevation.
emphasis-raised
Hover and click me
Raised card surface with rim light, shadow-md at rest. Lifts on hover, presses on active.
emphasis-sunken
Recessed surface with inset shadow. Used for input wells and sunken panels.
emphasis-floating
High-elevation floating surface with rim light and shadow-xl. For popovers and dropdowns.
| Preset | Shadow | Hover | Active |
|---|---|---|---|
| emphasis-raised | rim-light-strong + shadow-md | rim-light-strong + shadow-lg | rim-light-strong + shadow-sm |
| emphasis-sunken | inset-shadow-sm | — | — |
| emphasis-floating | rim-light-strong + shadow-xl | — | — |
| emphasis-strong | rim-light-subtle | rim-light-subtle + shadow-sm | none + press |
Intent tinting
Shadows automatically tint based on the nearest intent-* ancestor. Works with both raw shadow utilities and emphasis presets.
intent-neutral
emphasis-raised — hover me
intent-brand
emphasis-raised — hover me
intent-accent
emphasis-raised — hover me
intent-danger
emphasis-raised — hover me
intent-success
emphasis-raised — hover me
intent-warning
emphasis-raised — hover me
intent-info
emphasis-raised — hover me
Usage guidelines
Choosing a level
| Level | Use for | Example |
|---|---|---|
| shadow-xs | Micro-separation, badges, tags | Pill badges, status dots |
| shadow-sm | Buttons, form controls, minor cards | Action buttons, input fields |
| shadow-md | Standard raised surfaces | Cards, panels, sticky headers |
| shadow-lg | Hover states, featured content | Card hover, featured listings, tooltips |
| shadow-xl | Floating UI, dropdowns | Select menus, popovers, floating panels |
| shadow-2xl | Top-layer UI | Modals, dialogs, drawers |
Best practices
Prefer emphasis presets over raw shadow utilities.
emphasis-raisedhandles background, shadow, rim light, and hover/active states together.Use one elevation level of separation between stacked surfaces. Don't jump from
shadow-xstoshadow-2xl.Hover states should increase by one level (e.g.
shadow-mdat rest,shadow-lgon hover).Active/pressed states should decrease or remove shadow — the element feels pushed down.
Use
emphasis-floatingfor UI that overlaps content (popovers, dropdowns). Useemphasis-raisedfor surfaces that sit on the page (cards, panels).Intent tinting is automatic — just ensure the element is inside an
intent-*container.
Layering
Named stacking tiers so overlay components layer predictably against each other. Each tier is a generated Tailwind utility — z-popover — never a raw z-50. A higher tier sits closer to the viewer.
| Token | Value | Use for |
|---|---|---|
| z-hide | -1 | Pulled out of the stacking flow |
| z-base | 0 | Default in-flow content |
| z-docked | 10 | In-flow accents pinned to a surface |
| z-sticky | 20 | Sticky headers and toolbars |
| z-overlay | 30 | Dialog / drawer backdrop scrim |
| z-modal | 40 | Dialog / drawer surface |
| z-popover | 50 | Popover, select, combobox, autocomplete, dropdown panels |
| z-toast | 60 | Transient notifications |
| z-tooltip | 70 | Tooltips — always on top |
| z-alert | 80 | Critical blocking alert dialogs (session / cart expiry) |
Reference via
z-popover— the generated utility. Never reach for a rawz-50, which drifts out of sync with the scale.Popover sits above modal (
50vs40) so a select, combobox, or dropdown opened inside a dialog layers correctly over the dialog surface.Intra-component stacking stays local. Small
z-[n]values for an element above its own pseudo-element or gradient are not part of this cross-component scale.