Material Design best practices

Apply these practices when designing or implementing Material Design UI. Prefer Material Design 3 (Material You / MD3) unless the project is locked to Material 2. Prefer project conventions when they conflict; discover them first (theme tokens, MUI/Flutter theme, CSS variables, existing components).

Official guidance: m3.material.io.

Stack-specific notes and token examples: implementation by stack.

Defaults

1. Design with roles and tokens, not hard-coded hex values or one-off shadows.
2. Prefer filled / tonal / outlined / text component variants from the system over custom chrome.
3. Keep layout and spacing on an 8px grid (4px for tight icon/text alignment).
4. Treat accessibility (contrast, touch targets, focus, motion) as part of the design, not polish.
5. Match the Material library already in use (MUI, Material Web, Flutter Material) instead of inventing parallel patterns.

Color & theming