Elevation

Generated from DESIGN_SYSTEM.md

Rules

Prefer no shadow. Use background contrast and border to separate layers. Add shadow only when a surface needs to communicate that it floats above others (modal, tooltip, FAB).

LevelUseWebiOS (AppTheme.Elevation)Android
noneFlat cards on differentiated backgroundborder border-lineborder-only via cardSurface()tonalElevation(0)
subtleSubtle lift on interactive inputsshadow-smsubtle (4% black, 4pt radius)tonalElevation(1)
cardCards on uniform backgroundshadow-mdcard (8% black, 8pt radius)tonalElevation(2)
modalSheets, popovers, dropdownsshadow-xlmodal (16% black, 20pt radius)tonalElevation(5)

Anti-patterns:

  • Drop shadows on list cards that are already separated by background color — double visual separation
  • .shadow(color: .black.opacity(0.15), radius: 12) — too heavy, makes UI feel old
  • shadow-2xl or higher on content cards — reserved for modals only

Live specimens

Four levelsPrefer none. A shadow says the surface floats above the rest.

  • none

    border border-line

    Flat card on a differentiated background

  • subtle

    shadow-sm

    Subtle lift on interactive inputs

  • card

    shadow-md

    Card on a uniform background

  • modal

    shadow-xl

    Sheets, popovers, dropdowns