Elevation

Show depth with background tones and inset rings. Choose a surface-* class to set both together.

Surface levels

Add surface-interactive to a clickable surface. Its ring becomes more visible on hover.

• Canvas body

  The page background, set by the theme.

• Panel surface-panel

  Containers for navigation and supporting content.

• Card surface-card

  Separate or interactive content above the panel tone.

• Floating surface-floating

  Menus and popovers above the card tone.

• Modal surface-modal

  Dialogs shown over a dimmed backdrop.

• Well surface-well

  Recessed areas for nested or secondary content.

Bloom

Use the persimmon glow for focus or an active control. Reserve it for moments that need attention.

Rules