Google’s Material Design has always aimed to provide a system for building high-quality digital experiences. But with the latest iteration—Material 3 (M3)—Google takes a leap beyond consistency and usability. The new frontier? Emotion. M3 Expressive, a subcomponent of Material 3, pushes digital product design toward greater human connection by making emotional impact a core design objective.

In an age where users expect seamless interaction and visual storytelling, M3 Expressive brings nuance, tone, and intentionality to UI design. It arms designers with tools to amplify brand personality, shape user mood, and differentiate experiences without sacrificing usability or structure. This post breaks down the how and why of M3 Expressive—what it offers, how it works, and how you can put it to use.

From Utility to Emotion

Material Design started in 2014 as a set of principles built around usability, consistency, and responsive behavior. Early iterations emphasized spatial metaphors, predictable motion, and a unified look across Android and web platforms. However, the original system often led to homogeneous UIs. Brands found it hard to stand out. Designers felt constrained.

Material 3 rethinks those limitations. With M3, Google introduces a much more flexible theming system—centered around dynamic color, typography, and UI components that adapt to context. M3 Expressive is the answer to one key question: How can we make interfaces feel more alive, more personal, and more memorable?

What Is M3 Expressive?

M3 Expressive is not a separate toolkit—it’s a conceptual lens and an expanded toolkit within the broader Material 3 ecosystem. It gives designers more latitude to craft interfaces that communicate tone and mood while still conforming to Material’s foundational usability principles.

Key Capabilities of M3 Expressive:

• Expressive color systems powered by dynamic color and tonal palettes.
• Expanded typography with broader scale, more weights, and flexible styles.
• New component behaviors that allow more interaction nuance.
• Animation principles that can feel playful, calm, or kinetic depending on context.
• Iconography and shape customization to support a visual tone of voice.

The expressive layer sits on top of core accessibility and UX patterns. You’re not sacrificing good design practices for aesthetics. Instead, M3 Expressive is about making good design also feel good.

Dynamic Color: The Core of Emotional Design

One of the flagship features of Material 3 is dynamic color, which automatically adapts app palettes to the user’s wallpaper or device theme. But M3 Expressive takes this further with custom tonal palettes and semantic color roles.

Rather than hardcoding colors, you define a core source color, and Material generates a rich tonal palette from it. Each tone maps to semantic roles like primary, secondary, tertiary, surface, background, and error. Designers can tweak these tones to reflect emotional intent—cool hues for calm, vibrant ones for energy, dark tones for seriousness, etc.

For example:

• Health app: Use warm, soothing tones to imply care and trust.
• Fitness app: Choose bold, high-contrast tones to convey action and strength.
• Finance app: Opt for stable, muted tones to build a sense of reliability.

By leaning on the emotional psychology of color, M3 Expressive allows apps to create immediate, visceral impressions.

Typography That Speaks Louder

Typography in M3 Expressive is more than legibility. It’s voice, tone, and brand identity. Material 3 expands the typography scale to include:

• Headline Large
• Headline Medium
• Title Medium
• Body Large
• Label Small

Each of these comes with system defaults, but you’re encouraged to customize them using your own typefaces, weights, and spacing. The expressive model means text no longer just displays information—it communicates intent.

Imagine the difference:

• A startup’s onboarding page: Clean sans-serif, extra spacing, lowercase—friendly and inviting.
• A law firm’s app: Serif, tight kerning, bold titles—serious and authoritative.

Typography becomes a deliberate, controllable expression of brand identity.

Components that Adapt to Mood

Material components like buttons, chips, cards, and dialogs have been redesigned in M3 to support a wider range of emotional tones. These aren’t static widgets anymore; they respond to state, interaction, and layout changes with fluidity.

Key enhancements:

• Shape and elevation customization: Rounded or angular? Flat or layered? Each choice carries emotional weight.
• Motion specifications: M3 offers state transitions and feedback animations tuned to the desired tone (fast + bouncy vs. slow + smooth).
• Iconography style: Use filled icons for boldness, outlines for elegance, rounded for friendliness.

This matters because components are where users actually touch and interact. Expressiveness at this level transforms utility into experience.

Using Motion to Evoke Emotion

Motion in M3 Expressive is functional and expressive. Transitions, feedback, and animations reinforce user expectations but also layer on mood.

• Easing curves can signal urgency or calm.
• Delays and durations change how interactions feel—snappy or deliberate.
• Microinteractions like toggle animations or ripple effects add personality.

Let’s compare:

• A social app may use fast, springy transitions to feel lively and reactive.
• A meditation app might favor slow fades and gentle expansion to create a sense of peace.

M3’s motion system is built around the principle of meaningful movement—every motion should serve clarity and character.

Case Study: Applying M3 Expressive in Practice

Let’s say you’re designing a journaling app aimed at mental wellness. You want the app to feel calming, reflective, and intimate. Here’s how M3 Expressive can guide your design choices:

• Color: Use soft greens or blues as the source color. Choose muted secondary tones to avoid overstimulation.
• Typography: Opt for a friendly serif for headings and a rounded sans-serif for body text. Emphasize whitespace to invite slower reading.
• Components: Use soft-cornered cards with low elevation. Keep iconography minimalist and subtle.
• Motion: Apply slow, fade-in transitions for modal dialogs. Use a gentle easing curve for expanding notes or toggling reminders.

In short: every aspect of the interface should align with the emotional tone you want to evoke.

Why M3 Expressive Matters

Digital interfaces are no longer just tools. They are environments where people work, think, relax, connect, and create. When every app looks the same or behaves the same, users feel disconnected. M3 Expressive is Google’s response to this problem.

By putting emotional design into the system toolkit, Google empowers designers to craft apps that feel personal without building every component from scratch. Expressiveness becomes a first-class design principle, not an afterthought.

Moreover, the framework doesn’t compromise on performance or accessibility. Material 3 is WCAG-compliant by default. Every expressive choice—color contrast, animation, typography—is tunable for inclusivity. This ensures that expressive design isn’t reserved for a privileged few; it’s scalable and inclusive by design.

Getting Started with M3 Expressive

To integrate M3 Expressive into your workflow:

1. Start with the Material Theme Builder (available on Material.io): Generate dynamic color schemes and preview themes.
2. Use Figma Material 3 UI Kit: Design expressive UIs before implementation.
3. Implement with Jetpack Compose or Material 3 for Web: Leverage composable components that support expressiveness out of the box.
4. Test with real users: Emotional design is subjective. Gather feedback and tune visuals and motion accordingly.

Final Thoughts

M3 Expressive marks a turning point in UI design. It acknowledges that emotion matters—not as decoration, but as a pillar of digital interaction. By embracing expressive principles, designers can break out of generic experiences and build interfaces that connect, inspire, and resonate.

The tools are here. The system is ready. Now it’s your turn to design with emotion—and make your app not just functional, but unforgettable.