Material 3 Expressive: how to apply color, shape, and motion tokens without breaking the design system
The Material Design 3 update, named M3 Expressive, replaces loose visual tweaks with color, shape, and motion tokens. For those already using the system, the challenge is adopting these pieces without losing consistency across screens and platforms.
- Reading
- 7 min
- Tables
- 1
The Material Design 3 update, named M3 Expressive, replaces loose visual tweaks with color, shape, and motion tokens. For those already using the system, the challenge is adopting these pieces without losing consistency across screens and platforms.
The problem M3 Expressive tries to solve
Predictable interfaces work, but they don't always engage. That was the argument Google used to introduce M3 Expressive, the latest layer of Material Design 3, described in the official documentation as a way to "build more usable and engaging products with emotion-driven UX." In practice, this means color, shape, typography, and motion treated as product decisions, not as surface-level tweaks.
One caveat before moving on: although the topic circulates as "AI-driven personalization," the official Material 3 documentation (m3.material.io) does not detail any AI-driven recommendation mechanism. What it actually describes is a set of expressive tokens, designed for design and engineering squads to adjust a product's visual personality without rewriting the system from scratch.
Color, shape, and motion become tokens, not loose choices
The central change in M3 Expressive is structural: color, shape, and motion become versionable tokens, instead of manual tweaks scattered across the code.
- Color: the color system received an overhaul (
styles/color/system) that expands the possible combinations with more vibrant colors, according to the official documentation. Previous iMasters coverage on the topic has already pointed out that more saturated palettes can reduce the contrast margin guaranteed by default in classic Material 3, so it's worth validating contrast between light and dark themes before generalizing the change, rather than assuming the new system automatically preserves that balance. - Shape: the shape library (
styles/shape) was expanded to 35 shapes, with shape morph built into the token itself, meaning the transition from one shape to another already comes defined by the system and doesn't need to be animated manually. - Motion: the new motion physics system (
styles/motion) is described by the official blog as easier to implement and customizable via tokens, replacing easing curves configured one by one per component.
These three axes are what the blog post "Building with M3 Expressive" calls the foundation of the update, originally published as part of the Google I/O 2025 campaign and still referenced as an introductory guide on the current Material 3 page.
The components the update brought
The documentation lists 14 new or revised components within the M3 Expressive package. Three stand out for those who design action flows:
| Component | What it solves | Status |
|---|---|---|
| Toolbars | Groups frequently used actions, can be combined with a FAB | New |
| Split button | Pairs a primary button with a menu of related actions, using expressive shape and motion | New |
| Button groups | Organizes related buttons with shapes that react to one another | New |
| Progress indicators | Allows customizing the waveform and thickness of the progress indicator | Updated |
The documentation doesn't detail platform-specific behavior for each component, but, because it treats shape and motion as shared design system tokens, the update raises a natural point of attention for those maintaining products across more than one stack: it's worth checking, case by case, whether the implementation of components like the split button behaves the same way on Android and web before assuming automatic parity.
Compose-first: what changes for Android developers
On May 19, 2026, Google published the post "Material Android is Compose-first" on the Material Design blog, announcing that the system's latest updates will now arrive first, and in more depth, through the Compose API. Those who maintain screens in Views from the Android UI toolkit continue to receive support, but fall outside the pace of new features.
For squads that still have a large codebase in Views, this is a concrete decision criterion: migrating to Compose has stopped being just an architectural preference and has become a prerequisite for keeping up with M3 Expressive on Android with the latest shape and motion tokens. On the same day, Google published another announcement, "What's new at Google I/O 2026," whose subtitle reinforces that this year's changes aim to make it easier to create "expressive, adaptive products," but the available documentation doesn't detail new technical mechanisms beyond the notice to migrate to Compose.
How to maintain consistency without rewriting the design system
Adopting M3 Expressive without breaking consistency across screens requires treating the new tokens as an extension, not a replacement, of what already exists. A reasonable path for an already mature design system:
- Import the shape library and the motion system as an additional layer of tokens, keeping current color and typography tokens as they are until there's a business reason to change them.
- Update the Figma M3 kit (available on Figma Community, maintained by Google itself) before touching the code, so design and engineering can validate the new shape palette in the same artifact.
- Roll out the new components, such as toolbars and split button, first in low-risk flows, checking color contrast and keyboard focus before generalizing.
- Document, token by token, which component inherited which piece of M3 Expressive, so the next person on the team doesn't have to guess whether a shape belongs to the old system or the new one.
Accessibility isn't a separate step in this list: decorative shapes with automatic morph and customizable progress indicators are only acceptable in production if they maintain minimum contrast and don't rely solely on color or motion to communicate state. It's the responsibility of whoever configures the token, not a later adjustment.
When it's not worth migrating yet
M3 Expressive pays off when the product already uses Material 3 and has a design squad with the capacity to review tokens carefully. For those maintaining a large Views codebase on Android without the bandwidth to migrate to Compose, the May 2026 update makes clear that support for the system's latest pieces will fall behind, and it's worth measuring that cost before committing to a timeline for adopting toolbars, split button, or the new motion system.
And for those looking for AI-driven personalization guidelines, the official Material 3 documentation simply doesn't cover that territory today: what it delivers is a system of expressive tokens, not a recommendation engine.
Source 1: Material Design 3 official documentation (https://m3.material.io/)
Title: Material Design 3 - Google's latest open source design system
URL Source: https://m3.material.io/
Markdown Content: link
Copy link Link copied
Material at Google I/O 2026
May 19, 2026 Material Android is Compose-first Start migrating to Compose to get the latest from MaterialGoogle I/O 2026 Check out all the announcements, keynotes, sessions, and fireside chats on the main site for Google I/O 2026
M3 Expressive: Design with emotion
Build more usable and engaging products with emotion-driven UX. M3 Expressive adds vibrant colors, intuitive motion, adaptive components, flexible typography, and contrasting shapes.
Updated: Figma M3 Design Kit Quickly create design mockups and prototypes with the latest Material 3 Expressive components and stylesNew: Motion physics Easier-to-implement motion system for more customizable transitions—powered by tokens
Expanded: Shape library New set of 35 shapes to add decorative visual elements, with built-in shape morph motionBlog: Guide to our latest update Get a full introduction to the latest evolution of Material, including new components and style updatesGoogle Design: Making Google Sans Flex How seven design problems shaped Google's iconic typeface — from inception to going open-source
Expressive components
New: Toolbars Flexible component to display frequently used actions. Toolbars hold a variety of controls like buttons, and can also be paired with a FAB.New: Split button Pair a button with related actions in a connected menu. Split buttons leverage expressive shape and motion strategies.
Updated: Progress indicators An eye-catching way to show the status of a process in real time. Customize waveform and thickness to show progress with style.New: Button groups A new way to organize related buttons—with shape-shifting buttons that bump and react to each otherSee all expressive components Check out all 14 new and updated M3 Expressive components
How to apply M3 Expressive
Blog: Using motion physics Learn how the motion scheme works, the changes to existing APIs, and what you need to know to leverage itWatch: Build with M3 Expressive Discover how to use Material's emotional design patterns to boost usability and desire for your product
Latest in Material & Google Design
Material Design blog Discover what's new, tutorials, and inspiration from the Material teamGoogle Design Learn about the craft of design at Google, with articles written by designers and developers, how-to guides, and podcasts
Next steps
Get started Guides, videos, and tools to start building with MaterialFigma M3 Design Kit Customizable styles and components to help you design with Material 3
Develop Code and developer documentation for building with Material
Translated from the Brazilian Portuguese original · Read the original
What typesetters can teach the designer who fears AI
Christian Crumlish, creator of the AI assistant Piper Morgan, uses the extinction of the publishing typesetter in the '90s to think through what designers should protect now, and what it's time to let go.
