Elevation

Five surface levels. In dark theme, higher levels are lighter. Levels 3 and 4 also use a shadow. In dark theme, levels 2 and 3 share a color, so the shadow tells them apart.

• surface.0

  Page background. The lowest layer.

• surface.1

  Panels, cards and the sidebar.

• surface.2

  Sunken areas, table headers and hovered rows.

• surface.3

  Menus, popovers and dropdowns. Use with shadow.dropdown.

• surface.4

  Dialogs. Use with shadow.modal.

• shadow.raised

  Cards that sit slightly above the page.

• shadow.dropdown

  Menus, popovers and dropdowns.

• shadow.modal

  Dialogs and drawers.

Keep things flat by default. Show structure with surface steps and 1px borders. Use the dropdown shadow for menus, selects and tooltips, and the modal shadow for dialogs and toasts. Raised is for small lifted parts, like the switch knob. In dark theme, the lighter surface step does most of the work.