Elevation and motion

Effects and motion are named by use, like color and type. Shadows follow the Figma effect styles and are off in dark mode, where the lighter raised surface carries the layering.

Effects

Role	Light	Dark	Use
raised `--v-shadow-raised`			Cards, list rows, white buttons, the selected segment, knobs.
floating `--v-shadow-floating`			Toasts, sheets, map pins, menus: anything above the content.
highlight `--v-shadow-highlight`			Inner white highlight on light surfaces (glassy panels).
highlight-soft `--v-shadow-highlight-soft`			Softer inner highlight.
glow-accent-2 `--v-shadow-glow-accent-2`			Inner purple glow: the bot thinking or remembering.
halo-accent-2 `--v-shadow-halo-accent-2`			Outer purple halo around a thin line (scan line).
ring-accent `--v-shadow-ring-accent`			Pressed primary button ring.
ring-accent-2 `--v-shadow-ring-accent-2`			Ring around a purple progress knob.

Blur

glass

--v-blur-glassControls over photos.

backdrop

--v-blur-backdropWhatever sits behind a sheet or overlay.

Glass

Bars and surfaces over scrolling content (the bottom nav, floating headers): the color takes the transparency, the blur softens what is behind it, and a raised shadow lifts it off the content. In Figma, bg/glass is the fill and the glass-floating effect style holds the shadow and the blur together, since a layer takes one effect style.

Home · Chats · You

--v-bg-glass + --v-blur-backdrop + --v-shadow-raised

Motion

Press play to run each curve over --v-dur-slow, and each duration on --v-ease-standard. With reduced motion on, everything is instant.

standard
Most transitions: things that move or change state.

enter
Things appearing: decelerate into place.

exit
Things leaving: accelerate away.

sheet
Sheets and drawers sliding in.

fast · 160ms
Hover, press, color changes.

base · 240ms
Toggles, tabs, small moves.

slow · 480ms
Sheets, large moves.

slower · 720ms
Choreography: onboarding, multi-step reveals.

Tokens

CSS	Value	Notes
`--v-shadow-raised`	`0 1px 8px var(--v-shadow-color-raised)`	Cards, list rows, white buttons, the selected segment, knobs.
`--v-shadow-floating`	`0 8px 16px 8px var(--v-shadow-color-floating)`	Toasts, sheets, map pins, menus: anything above the content.
`--v-shadow-highlight`	`inset 0 0 8px var(--v-highlight)`	Inner white highlight on light surfaces (glassy panels).
`--v-shadow-highlight-soft`	`inset 0 0 8px var(--v-highlight-soft)`	Softer inner highlight.
`--v-shadow-glow-accent-2`	`inset 0 0 13px 1px var(--v-glow-accent-2)`	Inner purple glow: the bot thinking or remembering.
`--v-shadow-halo-accent-2`	`0 0 12px 4px var(--v-accent-2-border)`	Outer purple halo around a thin line (scan line).
`--v-shadow-ring-accent`	`0 0 0 3px var(--v-accent-tint-strong)`	Pressed primary button ring.
`--v-shadow-ring-accent-2`	`0 0 0 2px var(--v-accent-2-border)`	Ring around a purple progress knob.
`--v-blur-glass`	`10px`	Controls over photos.
`--v-blur-backdrop`	`30px`	Whatever sits behind a sheet or overlay.
`--v-ease-standard`	`cubic-bezier(0.2,0.75,0.25,1)`	Most transitions: things that move or change state.
`--v-ease-enter`	`cubic-bezier(0.23,1,0.32,1)`	Things appearing: decelerate into place.
`--v-ease-exit`	`cubic-bezier(0.4,0,1,1)`	Things leaving: accelerate away.
`--v-ease-sheet`	`cubic-bezier(0.32,0.72,0,1)`	Sheets and drawers sliding in.
`--v-dur-fast`	`160ms`	Hover, press, color changes.
`--v-dur-base`	`240ms`	Toggles, tabs, small moves.
`--v-dur-slow`	`480ms`	Sheets, large moves.
`--v-dur-slower`	`720ms`	Choreography: onboarding, multi-step reveals.