Foundations
Elevation
Five two-layer shadows, stronger in dark mode so they stay visible: sm for controls, md for cards, lg for popovers and menus, and xl for dialogs.
Elevation levels
Raised surfaces pair a shadow with color.surface.raised; odd-card variant="elevated" uses elevation.md. Each specimen is drawn in its mode’s scope.
| Token | Light | Dark |
|---|---|---|
elevation.none | none | none |
elevation.sm | 0 1px 2px rgb(0 0 0 / 0.08), 0 1px 3px rgb(0 0 0 / 0.08) | 0 1px 2px rgb(0 0 0 / 0.3), 0 1px 3px rgb(0 0 0 / 0.3) |
elevation.md | 0 1px 2px rgb(0 0 0 / 0.12), 0 4px 12px rgb(0 0 0 / 0.08) | 0 1px 2px rgb(0 0 0 / 0.4), 0 4px 12px rgb(0 0 0 / 0.32) |
elevation.lg | 0 4px 8px rgb(0 0 0 / 0.08), 0 12px 32px rgb(0 0 0 / 0.14) | 0 4px 8px rgb(0 0 0 / 0.32), 0 12px 32px rgb(0 0 0 / 0.48) |
elevation.xl | 0 8px 16px rgb(0 0 0 / 0.1), 0 24px 64px rgb(0 0 0 / 0.2) | 0 8px 16px rgb(0 0 0 / 0.4), 0 24px 64px rgb(0 0 0 / 0.6) |
elevation.noneelevation.smelevation.mdelevation.lgelevation.xl
elevation.noneelevation.smelevation.mdelevation.lgelevation.xl