Foundations · Depth & motion

Elevation & motion

How surfaces lift and how they move. Elevation is a three-step, skin-specific scale — in this dark skin a resting card is flat (--fx-elev-card is none) and lifts via surface tone + border, while overlays and modals add a 1px ring plus a deep layered shadow; the accent surface also carries the inset --fx-inner-glow bevel. Motion is five --dur-* durations paired with the brand easing curve.

Elevation · resting → overlay → modal (dark skin)
--fx-elev-card
Resting card / roster tile

Dark: none — lifts via surface tone + hairline border, no drop shadow.

Light: a soft two-layer ambient shadow.

--fx-elev-overlay
Popover · dropdown · toast

Dark: 1px border ring + deep layered shadow — reads against near-black.

Light: a medium drop shadow.

--fx-elev-modal
Dialog / modal sheet

Dark: 1px ring + the heaviest layered shadow — the top surface.

Light: a large, soft drop shadow.

Accent surface + inner glow

The dark-only --fx-inner-glow — an inset top highlight + bottom "seat into the void" bevel. The primary Button carries it via box-shadow; it is none in the light skin. The button is pinned :hover — tab to it for the focus ring.

Duration tokens · timing bars (bar length ∝ ms)
--dur-instant
80ms
Micro feedback — pressed / active states.
--dur-fast
140ms
The DEFAULT UI transition (buttons / links / inputs).
--dur-base
200ms
Standard hovers, color / shadow changes.
--dur-slow
280ms
Larger surfaces — cards, panels.
--dur-slower
520ms
Deliberate — overlay / modal entrances.
Hover me →

A live --dur-base × --ease-brand transition — background, color, lift and shadow all settle on the brand curve. Motion respects prefers-reduced-motion: the global rule snaps every duration to ~0 when the user opts out.

Easing curves · the brand + three specialists
--ease-brand
cubic-bezier(0.22, 1, 0.36, 1)
The signature — quick out, luxe settle. Pair it with every --dur-*; the default UI transition.
--ease-in-out
cubic-bezier(0.65, 0, 0.35, 1)
Symmetric — reorders / moves (drag, list sort).
--ease-out-soft
cubic-bezier(0.16, 1, 0.30, 1)
Drawers & sheets — a soft landing on entry.
--ease-emphasis
cubic-bezier(0.34, 1.56, 0.64, 1)
Tiny overshoot (note the curve poking past the line) — TOAST / success-check ONLY.
--fx-elev-card
Resting cards / surfaces. Dark = none (lift via surface tone + border); light = a soft two-layer ambient shadow.
--fx-elev-overlay
Popovers, dropdowns, tooltips, toasts, drawers. Dark adds 0 0 0 1px border-strong + a deep layered shadow so the surface reads against near-black.
--fx-elev-modal
Dialogs / modal sheets — the deepest step. Dark = the 1px ring + the heaviest layered shadow. Corners go to --radius-xl.
--fx-inner-glow
Dark-only inset bevel — top highlight (rgba(255,255,255,.06)) + bottom seat (rgba(0,0,0,.30)); none in light. Applied via box-shadow to accent surfaces / primary buttons.
--dur-* scale
instant 80ms · fast 140ms · base 200ms · slow 280ms · slower 520ms. UI settle is capped at 200ms; --dur-fast is the default transition.
easings
--ease-brand is the signature; --ease-in-out for moves, --ease-out-soft for drawers/sheets, --ease-emphasis (overshoot) for toasts/success only.
prefers-reduced-motion
A global @media rule snaps every transition / animation duration to ~0 when requested — never rely on motion to convey meaning.
apply via
shadow-[var(--fx-elev-*)] / box-shadow and transition … var(--dur-*) var(--ease-brand). Don't hand-roll shadows or timings — reach for the tokens.

Source · src/app/design-system/tokens/page.tsx (Elevation + Motion sections) · tokens from @phauna/ds tokens/semantic.css (depth FX) & tokens/motion.css (durations + easings).