Elevation and motion

Elevation

Depth is subtle: borders first, shadow second. A flat surface uses a 1px --s-color-border-subtle border and at most depth 1.

depth-1

depth-2

depth-3

depth-4

glass

.card {
  background: var(--s-color-bg-surface);
  border: 1px solid var(--s-color-border-subtle);
  box-shadow: var(--s-shadow-depth-1);
}
.card:hover {
  box-shadow: var(--s-shadow-depth-2);
}

Token	Value	Preview
--s-shadow-depth-1	0 1px 2px 0 rgba(0, 0, 0, 0.05)
--s-shadow-depth-2	0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1)
--s-shadow-depth-3	0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1)
--s-shadow-depth-4	0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1)
--s-shadow-glass	0 8px 32px 0 rgba(31, 38, 135, 0.07)

Token	Use
--s-shadow-depth-1	Cards, inputs at rest
--s-shadow-depth-2	Hover lift, dropdowns
--s-shadow-depth-3	Popovers, menus
--s-shadow-depth-4	Modals, drawers
--s-shadow-glass	Glassmorphism panels

Shadows are black at low opacity, so they are faint on dark backgrounds. Lean on the border there.

For glass, pair --s-shadow-glass with backdrop-filter: blur(8px) and a translucent surface. See The stitch aesthetic.

Motion

Durations and easings

Hover a row to play the transition.

Token	Value	Preview
--s-duration-fast	150ms
--s-duration-normal	250ms
--s-duration-slow	350ms

Token	Value	Preview
--s-easing-standard	cubic-bezier(0.4, 0, 0.2, 1)
--s-easing-bounce	cubic-bezier(0.34, 1.56, 0.64, 1)

Ready-made transitions

Token	Value	Preview
--s-transition-smooth	250ms cubic-bezier(0.4, 0, 0.2, 1)
--s-transition-pop	150ms cubic-bezier(0.34, 1.56, 0.64, 1)

Token	Use
--s-transition-smooth	Default for colour, border, shadow
--s-transition-pop	Small springy feedback

.tile {
  transition: box-shadow var(--s-transition-smooth);
}
.tile:active {
  transform: scale(0.98);
}

Press feedback is transform: scale(0.98).

Reduced motion

Respect visitors who ask for less motion. Components such as dialog, drawer, popover, toast, switch, progress and spinner put their animation inside @media (prefers-reduced-motion: no-preference). Do the same in your own CSS:

.panel {
  /* No motion by default. */
}

@media (prefers-reduced-motion: no-preference) {
  .panel {
    transition: transform var(--s-transition-smooth);
  }
}

The decorative utilities u-spin-holo and u-shimmer-scan stop automatically under prefers-reduced-motion: reduce. See Reduced motion in CSS utilities.