Material Expressive Design System

Material Expressive is Google's most researched design system update, based on 46 studies with 18,000+ participants. It creates emotionally engaging user experiences through strategic use of layout patterns, color, shape, size, motion, and containment.

Core Expressive Elements

1. Layout Patterns - Modular grids (Bento), masonry, card-based, split-screen, and specialized page structures.
2. Color & Typography - Expanded tonal palettes, container tiers, emotional selection, and dynamic convergence. Utilizing variable fonts (like Roboto Flex) for flexible text weight and width.
3. Shape - Expanded library of 35 shapes, expressive radii, containment, visual boundaries, and built-in shape morph motion for decorative visual elements.
4. Size - Larger touch targets, visual hierarchy. Reintroduces clear functional signifiers to reduce user uncertainty and improve scanning speed.
5. Motion - New physics-based motion system including spatial springs for realistic object movement and effects springs for seamless color/opacity transitions.
6. Containment - Surface elevation, tonal separation.
7. New & Updated Components - Flexible Toolbars, Split Buttons, Progress Indicators (with customizable waveforms and thickness), Button Groups (shape-shifting interactions), and FAB Menus (overflow into mini-menus).

Workflows

Apply Expressive Design