Material Design (Google)
Overview
Material Design is Google’s design system for Android, web, and Flutter, spanning tokens (color, elevation, motion), components, and layout guidance. Material 3 introduces dynamic color and updated component shapes; libraries include Material Web, MUI (community-led), and Flutter Material.
Key concepts
- Design tokens — Semantic roles: primary, surface, on-surface, error.
- Elevation & shadows — Layering model for affordance (especially on Android).
- Motion — Meaningful transitions with duration/easing curves.
- Accessibility — Contrast, touch targets, focus rings in components.
- Implementation — Use official components vs hand-rolling for consistency.
Theming pipeline
Sample: Material 3 color roles (conceptual)
| Token | Typical use |
|---|---|
primary | FAB, key buttons |
secondary | Less prominent CTAs |
surface | Cards, sheets |
error | Destructive actions |