Shadows

There are five shadows. xs, pop, menu and card are the four effect styles in Figma; modal is used by the dialog and is not in Figma.

xs--su-shadows-xsFigma 'shadow 1': switch thumb, active tab

pop--su-shadows-popFigma 'shadow 2': tooltip, toast

menu--su-shadows-menuFigma 'shadow 3': select, menu, popover

card--su-shadows-cardFigma 'regular shadow': cards, top bar, action bar

modal--su-shadows-modaldialog (not in Figma)

Using it

.summary {
  box-shadow: var(--su-shadows-card);
}

Layering

Overlays use these z-index values, so they stack in a predictable order. An app that adds its own fixed elements should pick values around them.

Token	Value	CSS variable	Notes
base	0	--su-z-index-base
sticky	100	--su-z-index-sticky
dropdown	1000	--su-z-index-dropdown
overlay	1300	--su-z-index-overlay
modal	1400	--su-z-index-modal
popover	1500	--su-z-index-popover
toast	1700	--su-z-index-toast
tooltip	1800	--su-z-index-tooltip

Motion

Token	Value	CSS variable	Notes
fast	120ms	--su-durations-fast	hover and focus fades (POC 'all .12s')
normal	200ms	--su-durations-normal	menus, popovers, toasts
slow	320ms	--su-durations-slow	dialog and drawer enter

Token	Value	Notes
standard	0.2, 0, 0, 1
enter	0.16, 1, 0.3, 1
exit	0.4, 0, 1, 1