lensclear design system

Shadows

Source

Elevation for surfaces that float above the page. Pass a token to boxShadow.

The product is flat by design. Read-only surfaces use whitespace and type, so a shadow means something floats: a menu, a dialog, an avatar.

Scale

Each token on a card surface so the elevation reads.

none

Flat. The default for almost everything.

md

Popovers and menus. Tailwind shadow-md.

2xl

Dialogs. Tailwind shadow-2xl.

inset

The address avatar frame: a top highlight and a soft drop.

Usage

Pair boxShadow with a hover value to animate elevation on an interactive surface.

Raised
<Box
  boxShadow="md"
  borderRadius="lg"
  padding="6"
  backgroundColor="card"
>
  Raised
</Box>