Shape, border, and depth

Supports flush structural edges.

Use: Tables and attached surfaces.

Small rounding softens compact controls.

Use: Tags and compact fields.

Default radius is approachable without decoration.

Use: Controls and small surfaces.

Large surfaces need proportionate rounding.

Use: Cards and panels.

Creates a distinct elevated-container tier.

Use: Dialogs and feature surfaces.

A capsule value accommodates dynamic dimensions.

Use: Pills, avatars, circular controls.

One-pixel borders separate adjacent surfaces.

Use: Default boundaries.

Two pixels makes selected and invalid boundaries perceivable.

Use: Emphasis and state boundaries.

Flat surfaces preserve hierarchy by default.

Use: Canvas and embedded surfaces.

Low shadow distinguishes a raised card.

Use: Cards and sticky controls.

Medium shadow separates anchored surfaces.

Use: Menus, popovers, and drawers.

Highest shadow supports modal depth.

Use: Dialogs and modal surfaces only.

A consistent tier distinguishes unavailable decoration.

Use: Never the sole disabled-state cue.

Muted imagery remains visible without competing.

Use: Decorative media and illustration layers.

Explicit full opacity completes the scale.

Use: Default content.

Defines normal stacking.

Use: Page content.

Sticky chrome sits above page content.

Use: Headers and sticky controls.

Anchored surfaces clear sticky content.

Use: Menus and popovers.

Modal surfaces establish an interaction layer.

Use: Scrims, dialogs, sheets, drawers.

Time-sensitive status remains visible above modals.

Use: Toasts only.