Others
Shadow, radius, duration, easing, and z-index tokens that drive the subtle motion and depth language of the system.
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-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
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-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
Radius
Corner radii for buttons, cards, and surfaces.
none
var(--radius-none)0pxsm
var(--radius-sm)4pxmd
var(--radius-md)6pxlg
var(--radius-lg)8pxxl
var(--radius-xl)10px2xl
var(--radius-2xl)12pxfull
var(--radius-full)9999pxDuration
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)
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)