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.

PresetShadowHoverActive
emphasis-raisedrim-light-strong + shadow-mdrim-light-strong + shadow-lgrim-light-strong + shadow-sm
emphasis-sunkeninset-shadow-sm——
emphasis-floatingrim-light-strong + shadow-xl——
emphasis-strongrim-light-subtlerim-light-subtle + shadow-smnone + 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

LevelUse forExample
shadow-xsMicro-separation, badges, tagsPill badges, status dots
shadow-smButtons, form controls, minor cardsAction buttons, input fields
shadow-mdStandard raised surfacesCards, panels, sticky headers
shadow-lgHover states, featured contentCard hover, featured listings, tooltips
shadow-xlFloating UI, dropdownsSelect menus, popovers, floating panels
shadow-2xlTop-layer UIModals, dialogs, drawers

Best practices

  • Prefer emphasis presets over raw shadow utilities. emphasis-raised handles background, shadow, rim light, and hover/active states together.

  • Use one elevation level of separation between stacked surfaces. Don't jump from shadow-xs to shadow-2xl.

  • Hover states should increase by one level (e.g. shadow-md at rest, shadow-lg on hover).

  • Active/pressed states should decrease or remove shadow — the element feels pushed down.

  • Use emphasis-floating for UI that overlaps content (popovers, dropdowns). Use emphasis-raised for surfaces that sit on the page (cards, panels).

  • Intent tinting is automatic — just ensure the element is inside an intent-* container.

Previous page← ColorsNext pageIconography →