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.
darkInsetInner border of a dark surface that sits in place, like a badge over media.
darkPopoverAction bars, tooltips, and toasts.
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.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.