<?xml version="1.0" encoding="utf-8"?>

Light mode layers

Light mode layers Bad Practice
Light mode layers Best Practice

Light mode materials create distinctive visual effects through their interaction with bright backgrounds. Each material type maintains its unique properties while adapting to ensure optimal contrast and legibility in well-lit interfaces.

In light mode, materials adjust their transparency and blur effects to maintain visual hierarchy. Chrome materials preserve their distinctive appearance, while regular and thin materials soften their effect to prevent harsh contrasts. Background materials become more subtle to avoid competing with foreground content.

Light mode considerations:

  • Contrast ratios for text legibility
  • Vibrancy adaptation to bright backgrounds
  • Shadow subtlety and depth perception
  • Material distinction preservation

Improve your UX & Product skills with interactive courses that actually work