Shadows
Shadows 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.
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.outlineRedFocus ring for error states (e.g. an invalid field).
outlineYellowFocus ring for warning states.