Surfaces

10 components

A resting surface is a line, not a shadow. Elevation is for things that genuinely float, and there are three tiers. If you are adding a shadow to make something stand out, the answer is usually contrast or spacing.

Card and Panel
Card

8px radius, 1px border, the card surface. 24px of padding by default; this one is the 20px variant used inside a dense screen.

Panel

A card with ZERO padding, for something that owns its own edges — a table, a map, a list. Padding here would be two paddings, and the sticky header would pin below a strip of card.

Elevation · three tiers, and most things use none
resting · a card

Barely there. The border defines it.

overlay · popover, menu, tooltip

Something that floats over the page.

modal · dialog, sheet

Something that takes the page over.

Overlays
Dialog · a decision that must be made now. Never a long form
Sheet · a detail view beside what opened it. Also the mobile rail
HoverCard · a preview that is too big for a tooltip
A tooltip is capped at 160 characters. Several FIELDS need this instead
Dividers and avatars
A rule separates; it never decorates.
Avatar · two letters beat a grey circle
ALGH