dashbook
Foundations / Elevation

Elevation.

Depth is restraint. Two shadows total, neither used for layout. Hairline borders carry the rest.

Tokens

Only two shadow tokens exist. There is no scale of six, no inset variants, no coloured glows. If you reach for a third value, the answer is a hairline border.

sm

Subtle lift. Reach for it on a popover or menu sheet — the smallest visible elevation we ship.

md

Floating UI proper. Tooltips, dropdowns, toasts, modal overlay backdrops. Never on cards.

When to use a shadow
  • Popover. Floating panel anchored to a trigger.
  • Dropdown. Menus, select sheets, combo boxes.
  • Tooltip. Small hovering helper attached to a control.
  • Toast. Transient notification that hovers over the page.
  • Modal overlay backdrop. The dim layer behind a dialog.
When not to use a shadow
  • Card. Hairline border at --border. No drop shadow, ever.
  • Section. Hairline rule top and bottom — never elevated.
  • Button. Solid fill, hairline edge if outlined. Pressed state is scale(0.97), not a shadow change.
  • Surface elevation. Layered panels separate by border, not shadow stacking.
  • Hover states. Colour and weight shifts only — never a shadow that wasn’t there at rest.
Borders carry depth

The 1px hairline at --border is the primary depth signal. It separates surfaces without lifting them, which is the visual register the brand keeps.

Card.
Drop shadow under the whole surface.
Don’t Shadow used to separate one surface from another.
Card.
Hairline border, no shadow.
Do 1px --border hairline. Depth without weight.