Shadows
Open in FigmaShadows are a crucial part of our design system, providing depth, hierarchy, and visual feedback. They help users understand the relationship between elements and create a sense of layering in the interface.
Tokens
buttonShadowLightInputs, forms, and secondary buttons.
xsItems that sit directly on top of the canvas (checkboxes, icon boxes, segmented controls); no white inset border like buttonShadowLight.
smCards and UI elements that hover or sit above the canvas.
mdMenus and popovers.
lgModals and drawers.
buttonShadowPrimary and themed buttons.
darkInsetThe dark material's rim: a lit top edge and a faint ring. For a dark surface that sits in place, like a badge over media.
darkPopoverTooltips and toasts: small dark surfaces.
darkRaisedFloating dark bars, like the canvas item and selection bars:
darkPopover with a deeper drop.some text
fadeDownSticky headers — fades content scrolling beneath a white header.
some text
fadeUpContent overlays with a white background — fades content beneath a bottom overlay.
Focus rings
Focus is signaled with a ring shadow, never a border — see Borders for the border-side rules.
outlineThe focus ring — apply via
_focusVisible={{ boxShadow: "outline" }}; never signal focus with a border. A dark scope swaps it (color-scheme.ts).outlineInsetInset focus ring for compact controls whose parent clips an outward ring.
outlineRedFocus ring for error states (e.g. an invalid field).
outlineYellowFocus ring for warning states.