Material Design 3 brought dynamic colour and an updated type scale. Material 3 Expressive — announced at Google I/O 2025 and rolling into Compose's material3 library throughout 2026 — goes further: a new motion system, shape morphing, and colour expressiveness that enables UIs that feel genuinely alive rather than just consistent.
What "Expressive" Actually Means
Expressiveness in Material 3 context means: motion that communicates state changes (not just transitions), shapes that morph in response to interaction, colour that shifts to reflect emotional context (a warning turns warm, a success turns cool), and typography that changes weight/size to convey hierarchy dynamically rather than statically.
The New Motion System
Material 3 Expressive introduces spring-based physics as the default animation curve, replacing the standard easing curves. The difference is subtle but significant: spring animations feel responsive because they react to the initial velocity of the gesture that triggered them, not just a fixed curve. Use rememberSpringSpec() in Compose for the new defaults — don't manually specify Tween unless you have a specific reason.
Shape Morphing with Compose
The new morphShape() API in Compose material3 allows shapes to animate between states: a floating action button that morphs from a circle to a rounded rectangle when tapped, a card that morphs corners in response to a drag gesture. Use Shape.morph() with a Float progress value driven by your animation state. The shapes are GPU-accelerated and drop-frame-free on modern hardware.
Beyond the Card: Layout Expressiveness
The card grid is Material Design's most overused pattern. M3 Expressive introduces staggered grids with size variance (featured items are larger), masonry layouts in LazyVerticalStaggeredGrid, and motion staggering (items animate in sequence with spring physics rather than simultaneously). Combine these to create layouts that feel curated, not templated.
Accessible Expressiveness
Motion-heavy UIs must respect Reduce Motion settings. In Compose, use LocalAccessibilityManager.current.isAnimationEnabled to check the user's preference and substitute instant state changes for animations. Shape morphing should have a non-motion fallback. Colour expressiveness must maintain the contrast ratios in MaterialTheme.colorScheme even when shifted for emotional context.
Where to Start: One Expressive Feature at a Time
Don't redesign your whole app. Pick one high-impact surface — the home screen FAB, the primary CTA card, or the navigation bar — and apply M3 Expressive principles there first. Measure user engagement on that surface before and after. Expressiveness should drive interaction metrics, not just aesthetic approval. Then apply the learnings to the rest of your app progressively.