Here’s the official Material Design 3 page that was recently released.
Material Design 3
It’s not an update to material.io; it’s hosted at a separate URL m3.material.io, so it doesn’t seem to be the official version yet. The Material Design 3 UI Kit is also published on Google’s official Figma.
Dynamic Color
https://m3.material.io/foundations/customization
Dynamic Color, which changes the system UI colors based on the user’s wallpaper, has been defined. To get a feel for which colors are produced from a given image, try the official tool.
M3 Color System
Dynamic Color isn’t just for the system UI — you can use it inside your own apps, too. By defining colors as tokens within the M3 Color System, design and engineering can manage colors with a shared understanding. It defines hues across a few categories such as Accent, Neutral, and Error, each split into 13 tone steps.
If you design UIs in Figma, you can use the official Figma Plugin to design with this M3 color system.
I couldn’t find detailed documentation on it, but it looks like app icons themselves will also be able to dynamically change based on the user’s custom colors. On Pixel + Android 12, some icons can already be changed.
Adaptive Design
https://m3.material.io/foundations/adaptive-design/overview
UI design now needs to support a more seamless experience across mobile displays, tablets, desktops, foldable devices, and various portrait/landscape states. The big driver behind this is likely the rising support for Android apps on Chromebook and Windows 11, the rumored release of Pixel Fold, and Android being used on a wider range of display sizes overall.
Large-screen and foldable support is a big topic, so I plan to cover it in a separate article.
Interaction states
Interaction states – Material Design 3
More careful definitions have also been added for interactions in response to user actions. They were previously defined in the Surfaces page and the pages for various components, but they’re now described in tighter coordination with tokens, making them easier to manage in design and implementation.
Typography
Typography variations have been reduced and simplified. Token-based management is supported here as well. On top of that, the new Adaptive type scale lets you dynamically manage font sizes according to device size.
https://m3.material.io/styles/typography/overview
Component
The styles of components like the Floating Action Button and Bottom Navigation have been significantly changed overall. The aforementioned Dynamic Color is adopted, with a lot of rounded shapes and softer color palettes. Drop shadows have been reduced quite a bit, making the UI hierarchy easier to read. The styles have changed a lot overall, but at a glance the rules and use cases don’t seem to have changed much. (Which, naturally, makes sense.)
If anything, the variety of Top App Bars has expanded and become easier to work with. As devices get taller, demand for larger top UIs is high, so this is appreciated.
https://m3.material.io/components/top-app-bar/overview
As always, the Material Design documentation does a great job of clearly explaining UI use cases and rules.
Wrap-up and personal thoughts
Overall, the focus seems to be on:
- Improved maintainability via tokens
- Responsive support for multi-device
Dynamic Color is catchy, but it feels more like an extra to me.
On Android 12, while it’s nice that the system picks colors from your wallpaper, personally I’d rather choose every color myself. The very distinct design of the official widgets is also something I really dislike.