What Is Material Design?
Material Design is Google's open-source design system for building digital products. Introduced at Google I/O 2014, it has become the standard design language for Android. The current version, Material Design 3 (also called Material You), represents a major evolution focused on personalization, accessibility, and adaptive layouts.
Unlike Apple's HIG, which is specific to Apple platforms, Material Design is cross-platform by design. It runs on Android, iOS, web, and desktop, but is most tightly integrated with Android.
Material Design 3: Key Changes
Dynamic Color
The signature M3 feature. The system extracts colors from the user's wallpaper and generates a complete color scheme. Your app looks unique on every device while maintaining visual harmony. On Android 12+, this happens automatically with Material 3 components.
Updated Component Library
Every component was redesigned. Buttons have updated shapes and elevation. Navigation bars replaced bottom navigation. Cards, chips, dialogs, and text fields received new visual treatments with more rounded corners and refined typography.
Design Tokens
M3 uses a token-based system where every visual property (color, shape, typography, elevation) is referenced by a semantic name rather than a hardcoded value. This makes theming consistent and scalable across large applications.
Core M3 Principles
| Principle | Description | Example |
|---|---|---|
| Personal | Adapts to individual preferences | Dynamic color from wallpaper |
| Adaptive | Works across screen sizes | Responsive layouts with window size classes |
| Expressive | Supports brand identity within the system | Custom color schemes with tonal palettes |
| Accessible | Meets WCAG standards by default | Automatic contrast ratios in color system |
Key M3 Components
Navigation
M3 defines three patterns based on screen size: Navigation Bar (bottom) for phones with 3-5 destinations, Navigation Rail (side) for tablets and foldables, and Navigation Drawer for large screens. A well-built app should switch between them automatically based on window size class.
Top App Bar
Four variants: center-aligned, small, medium, and large. The medium and large variants collapse on scroll, creating a smooth transition that saves screen space while keeping context visible.
Bottom Sheets
Standard and modal variants. Standard sheets coexist with main content and can be dragged between states. Modal sheets dim the background and demand interaction.
FAB
Three sizes (small, regular, large) and an expanded variant with text. The FAB should represent the single primary action on a screen, not serve as a generic button.
Color System
M3 uses tonal palettes with 13 variations per color (0 to 100). Key roles include Primary, Secondary, Tertiary, Error, Surface, and On-colors. The system guarantees accessible contrast ratios automatically. When you pick a primary color, M3 generates all companion colors for readability.
Implementing M3 in Jetpack Compose
Use MaterialTheme to define your color scheme, typography, and shapes. Use dynamicColorScheme on Android 12+ for wallpaper-based theming. Use Scaffold for standard screen layouts and WindowSizeClass for adaptive behavior across phones, tablets, and foldables.
M3 for Cross-Platform Development
Flutter: Set useMaterial3: true in ThemeData (default since Flutter 3.16). The dynamic_color package supports wallpaper-based theming on Android.
React Native: React Native Paper 5.x provides M3 components and theming without native dynamic color support.
Web: The @material/web package provides M3 web components with increasing coverage.
Common Mistakes
- Mixing M2 and M3 components in the same app breaks visual consistency
- Ignoring dynamic color on Android 12+ when users expect wallpaper integration
- Using FAB for multiple actions instead of one primary action
- Skipping elevation tokens (M3 uses tonal color elevation, not shadows)
- Not testing on foldable devices where adaptive layout is essential