Elevation

Elevation scale

Six levels from flat (0) to maximum depth (5). Each level maps to a --dv-elevation-N token. In light mode these are progressively larger, softer box-shadows. In dark mode the shadow values are tighter and darker — surface tinting (see below) carries the depth instead.

/* Apply to any element */
.my-card   { box-shadow: var(--dv-elevation-2); }
.my-modal  { box-shadow: var(--dv-elevation-4); }
.my-tooltip { box-shadow: var(--dv-elevation-5); }

Named shadows

A separate set of decorative shadow tokens — xs through xl — for cases where you want a specific visual weight independent of the component layer hierarchy. These use a multi-layer technique (ambient base + directional spread) for a softer, more diffuse look than the elevation tokens.

/* Paper component accepts a shadow prop */
.decorative-card { box-shadow: var(--dv-shadow-md); }
.hero-image      { box-shadow: var(--dv-shadow-xl); }

Surface layers

The --dv-surface-N tokens define background colors that step upward through the layer stack. In light mode these stay near-white — shadow contrast communicates depth. In dark mode, where shadows are less visible, each surface level picks up a progressively stronger tint of the primary color so the stack remains readable without shadows alone.

The tinting uses color-mix() (Chrome 111+, Firefox 113+, Safari 16.2+). Older browsers receive static dark-gray fallbacks.

/* Surface scale — use these on element backgrounds */
.page-bg     { background: var(--dv-surface-0); }
.sidebar     { background: var(--dv-surface-1); }
.card        { background: var(--dv-surface-2); }
.modal-body  { background: var(--dv-surface-3); }

Component usage

These tokens are applied consistently across all built-in components.