Google · Design system breakdown
The design language that rewrote itself for tokens and theming.
Google introduced Material in 2014. Material 3 (announced 2021, matured through 2022–2024) is a full reset around dynamic color, expressive theming, and a token-first architecture. The earlier MDC libraries are still maintained but the design philosophy has shifted decisively.
Google design and engineering teams own the canonical specification. Component implementations exist for Android, iOS, Flutter, and Web (MDC, Material Web). Cadence is fast and Google-product-driven.
| Token | Value | Role |
|---|---|---|
| md.sys.color.primary | Dynamic | Brand action (theme-derived) |
| md.sys.color.surface | Dynamic | Page surface |
| md.sys.shape.corner.medium | 12dp | Card and surface radius |
| md.sys.motion.duration.short2 | 100ms | Micro-interaction |
| md.sys.typescale.headline.large | 32sp / 40 line | Top heading |
| md.sys.elevation.level1 | 1dp | Resting card |
Token names and values are illustrative — refer to the system's official tokens reference for the canonical, current set.
If you're evaluating this system
Pick Material 3 if you're shipping Android, building a Flutter app, or want a reference for token-first system design. For pure web product work outside the Google ecosystem, Material is more useful as a reference than as an off-the-shelf component library.
Compare more systems