Materials

Surface

Elevation presets for cards and overlays. Higher types sit higher in the layered hierarchy.

Radii

Two radii only: 16px for cards (recommended everywhere) and 8px for smaller or inline surfaces. Pills use 100%.

Strokes

Best practices

When to use

• Use Material instead of hand-rolling radii, fills, strokes and shadows on a surface; the type encodes the elevation role.
• Pick the type from where the element sits in the layered hierarchy: base for resting cards, small–large for raised content, tooltip and menu for floating popovers, modal for dialogs, fullscreen for takeovers.
• Don’t stack two Materials on the same element; if a child needs more elevation, lift it into its own Material with a higher type.

Behavior

• Align the elevation choice with the element’s z-index band so a tooltip-typed surface doesn’t sit visually below a base card.
• Favor the lowest elevation that still reads as elevated against its background; over-elevating is a common source of visual noise.
• Let the type drive chrome, and use layout spacing for layout instead of overriding shadows on the same element.

Accessibility

• Material is decorative chrome; semantics live on the role-bearing wrapper (role="dialog" on a modal, role="tooltip" on a tooltip, etc.).
• Don’t rely on shadow alone to communicate elevation; pair it with the matching focus-visible ring on focusable children inside.
• Test materials in both themes: shadow contrast on dark backgrounds is weaker than on light, so confirm separation still reads.