Depth

Differences in depth between sections and components can bring a task into focus and provide clarity about its importance at the crucial moment of action.

Depth scale

There are 5 depths available, each appropriate for different component types.

Depth Scale
  • Depth 1: Top bar, headers, coplanar sections
  • Depth 4: Small interactive components
  • Depth 8: Cards, containers
  • Depth 16: Menus, popovers, flyouts
  • Depth 64: Side sheets, dialogs, modals

Using depth

  • Do: Use depth sparsely to bring attention to content.

  • Don’t: Overuse depth.

  • Do: Apply bigger depth to larger elements.

  • Do: Apply smaller depth to smaller elements.

  • Don’t: Create new depths.

  • Do: Consider using a simple divider to separate sections of content and add depth.

  • Don’t: Add shadows to divide sections of a screen.

Acrylic

Acrylic is a type of texture provided by Fluent that can be applied to app surfaces to add depth and help establish a visual hierarchy.

On the web, the Acrylic blur effect is currently only supported prefixed in Edge and Safari.

Acrylic

Our system uses Acrylic on (1) menus and flyouts (light background), and (2) tooltips (dark background).