Radius and elevation

Use shared corner and shadow tokens for containers and overlays.

Core principles

  • Use elevation to distinguish layers.
  • Keep related containers on the same radius and shadow scale.

Model

  • Theme families define radius and elevation values.
  • Recipes expose those values through slot-level CSS variables.

Use in your app

  • Use outlined or raised containers when separation helps the task.
  • Review overlay hierarchy within the full page layout.

Verification scope

  • Shared tokens keep values consistent. Mathematical fixtures do not verify shadows or visual hierarchy.

Token notes

  • Display and overlay components use separate surface roles from the same theme.