Others

Shadow, radius, duration, easing, and z-index tokens that drive the subtle motion and depth language of the system.

Dark surface elevation

Dark surface-1/2/3 widened from 8% luminance steps to 11% for clearer separation when stacked. --shadow-rim adds a 1px top-edge highlight that mimics soft ambient light.

Dark surface elevation · wider luminance + rim highlight

canvas · #1c1c1e

elevated · #2e2e30

surface-2 · #3f3f41

surface-3 · #515153

Shadows

Used for elevation, popovers, and floating chrome.

Light mode

shadow-xs

var(--shadow-xs)0 1px 2px 0 rgb(0 0 0 / 0.08)

Hover, focus, or tap to preview the elevation

shadow-sm

var(--shadow-sm)0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.06)

Hover, focus, or tap to preview the elevation

shadow-md

var(--shadow-md)0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.06)

Hover, focus, or tap to preview the elevation

shadow-sm-bordered

var(--shadow-sm-bordered)0 0 0 1px rgb(0 0 0 / 0.08), 0 1px 3px 0 rgb(0 0 0 / 0.1)

Hover, focus, or tap to preview the elevation

shadow-md-bordered

var(--shadow-md-bordered)0 0 0 1px rgb(0 0 0 / 0.1), 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.06)

Hover, focus, or tap to preview the elevation

shadow-lg

var(--shadow-lg)0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.06)

Hover, focus, or tap to preview the elevation

shadow-xl

var(--shadow-xl)0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.06)

Hover, focus, or tap to preview the elevation

shadow-popover

var(--shadow-popover)0 8px 24px -4px rgb(0 0 0 / 0.16), 0 2px 6px -2px rgb(0 0 0 / 0.1)

Hover, focus, or tap to preview the elevation

shadow-sheet

var(--shadow-sheet)0 -4px 16px 0 rgb(0 0 0 / 0.12)

Hover, focus, or tap to preview the elevation

shadow-inset

var(--shadow-inset)inset 0 1px 2px 0 rgb(0 0 0 / 0.08)

Hover, focus, or tap to preview the elevation

shadow-focus

var(--shadow-focus)0 0 0 2px var(--color-canvas), 0 0 0 4px var(--color-focus-ring)

Hover, focus, or tap to preview the elevation

shadow-focus-inset

var(--shadow-focus-inset)inset 0 0 0 2px var(--color-focus-ring)

Hover, focus, or tap to preview the elevation

shadow-rim

var(--shadow-rim)none

Hover, focus, or tap to preview the elevation

Dark mode

shadow-xs

var(--shadow-xs)0 1px 2px 0 rgb(0 0 0 / 0.3)

Hover, focus, or tap to preview the elevation

shadow-sm

var(--shadow-sm)0 1px 3px 0 rgb(0 0 0 / 0.4), 0 1px 2px -1px rgb(0 0 0 / 0.3)

Hover, focus, or tap to preview the elevation

shadow-md

var(--shadow-md)0 4px 6px -1px rgb(0 0 0 / 0.4), 0 2px 4px -2px rgb(0 0 0 / 0.3)

Hover, focus, or tap to preview the elevation

shadow-sm-bordered

var(--shadow-sm-bordered)0 0 0 1px rgb(255 255 255 / 0.08), 0 1px 3px 0 rgb(0 0 0 / 0.4)

Hover, focus, or tap to preview the elevation

shadow-md-bordered

var(--shadow-md-bordered)0 0 0 1px rgb(255 255 255 / 0.1), 0 4px 6px -1px rgb(0 0 0 / 0.4), 0 2px 4px -2px rgb(0 0 0 / 0.3)

Hover, focus, or tap to preview the elevation

shadow-lg

var(--shadow-lg)0 10px 15px -3px rgb(0 0 0 / 0.5), 0 4px 6px -4px rgb(0 0 0 / 0.3)

Hover, focus, or tap to preview the elevation

shadow-xl

var(--shadow-xl)0 20px 25px -5px rgb(0 0 0 / 0.5), 0 8px 10px -6px rgb(0 0 0 / 0.3)

Hover, focus, or tap to preview the elevation

shadow-popover

var(--shadow-popover)0 8px 24px -4px rgb(0 0 0 / 0.5), 0 2px 6px -2px rgb(0 0 0 / 0.4)

Hover, focus, or tap to preview the elevation

shadow-sheet

var(--shadow-sheet)0 -4px 16px 0 rgb(0 0 0 / 0.4)

Hover, focus, or tap to preview the elevation

shadow-inset

var(--shadow-inset)inset 0 1px 2px 0 rgb(0 0 0 / 0.3)

Hover, focus, or tap to preview the elevation

shadow-focus

var(--shadow-focus)0 0 0 2px var(--color-canvas), 0 0 0 4px var(--color-focus-ring)

Hover, focus, or tap to preview the elevation

shadow-focus-inset

var(--shadow-focus-inset)inset 0 0 0 2px var(--color-focus-ring)

Hover, focus, or tap to preview the elevation

shadow-rim

var(--shadow-rim)inset 0 1px 0 0 rgba(255, 255, 255, 0.06)

Hover, focus, or tap to preview the elevation

Radius

Corner radii for buttons, cards, and surfaces.

none

var(--radius-none)0px

sm

var(--radius-sm)4px

md

var(--radius-md)6px

lg

var(--radius-lg)8px

xl

var(--radius-xl)10px

2xl

var(--radius-2xl)12px

full

var(--radius-full)9999px

Duration

Motion durations expressed in milliseconds.

instant

0ms

var(--duration-instant)

fast

100ms

var(--duration-fast)

normal

150ms

var(--duration-normal)

slow

200ms

var(--duration-slow)

slower

300ms

var(--duration-slower)

Reduced motion

Under @media (prefers-reduced-motion: reduce), all duration tokens (fast, normal, slow, slower) resolve to 0ms.

Any transition built on these tokens becomes instant for users with the OS accessibility setting enabled — no per-component changes needed.

Easing

Timing curves for entering, exiting, and interactive motion.

ease-out

cubic-bezier(0, 0, 0.2, 1)

var(--easing-ease-out)

ease-in

cubic-bezier(0.4, 0, 1, 1)

var(--easing-ease-in)

standard

cubic-bezier(0.4, 0, 0.2, 1)

var(--easing-standard)

spring

cubic-bezier(0.34, 1.56, 0.64, 1)

var(--easing-spring)

linear

linear

var(--easing-linear)

Z-index

Layer order for high-priority chrome (toasts, modals, overlays).

below

z=-1

var(--z-below)

base

z=0

var(--z-base)

raised

z=10

var(--z-raised)

dropdown

z=100

var(--z-dropdown)

sticky

z=200

var(--z-sticky)

overlay

z=300

var(--z-overlay)

modal

z=400

var(--z-modal)

popover

z=500

var(--z-popover)

toast

z=600

var(--z-toast)

tooltip

z=700

var(--z-tooltip)

max

z=9999

var(--z-max)