Foundations
Elevation
Surfaces stack. Shadows sit on one ink that does not invert.
Elevation is mostly paper, not drop shadow. Sunken, surface, and raised are the ladder. Shadows are extra lift for resting cards, menus, and dialogs.
--shadow-color is a fixed dark ink. Dark mode does not invert it. One tint,
three geometries: shadow-sm, shadow-md, shadow-lg.
Surfaces
bg-surface-sunken
Sunken well.
bg-surface
Room paper.
bg-surface-raised
Raised card.
| Utility | Job |
|---|---|
bg-surface-sunken | Sunken well |
bg-surface | Room paper |
bg-surface-raised | Card, popover, dialog |
Shadows
shadow-smResting card.
shadow-mdPopover, menu.
shadow-lgDialog, sheet.
| Utility | Job |
|---|---|
shadow-sm | Resting card |
shadow-md | Popover, menu |
shadow-lg | Dialog, sheet |
<div className="rounded-md bg-surface-raised p-5 shadow-sm" />Do not invent a fourth geometry. shadow-xs exists on the token for completeness;
components use sm / md / lg. Overlay scrims are bg-contrast/50, not a shadow.
See Color for the surface tokens and Tokens
for how chrome temperature tints the room.