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
- Layout Patterns - Modular grids (Bento), masonry, card-based, split-screen, and specialized page structures.
- Color & Typography - Expanded tonal palettes, container tiers, emotional selection, and dynamic convergence. Utilizing variable fonts (like Roboto Flex) for flexible text weight and width.
- Shape - Expanded library of 35 shapes, expressive radii, containment, visual boundaries, and built-in shape morph motion for decorative visual elements.
- Size - Larger touch targets, visual hierarchy. Reintroduces clear functional signifiers to reduce user uncertainty and improve scanning speed.
- Motion - New physics-based motion system including spatial springs for realistic object movement and effects springs for seamless color/opacity transitions.
- Containment - Surface elevation, tonal separation.
- 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
Arguments:
widget: The Flutter widget code or description to be transformed.
Steps:
- Select Layout Pattern:
- Read PATTERNS.md to choose a pattern based on the UI's purpose (e.g., Bento Grid for dashboards, Masonry for portfolios). Apply the grid/structure to the widget.
- Identify Component Category: Match the
widgetto a category in COMPONENTS.md (e.g., Button, Navigation, Surface, Input). - Apply Color System:
- Read COLOR.md to select tonal palettes and apply container tiers for hierarchy. - Apply Color Convergence: Merge brand identity with user settings using harmonization and ThemeExtension (see PLATFORMS.md).
- Apply Shape System:
- Read SHAPES.md to use expressive radii (e.g., Full, Extra Large). Ensure consistent rounding for component families.
- Optimize Size and Spacing:
- Read SPACING.md to increase touch targets to 48dp-56dp and apply generous internal padding.
- Inject Motion:
- Read MOTION.md to add energetic state transitions and use expressive easing and durations.
- Verify: Cross-reference with CHECKLIST.md.
Topic References
Load these references only when working on a specific aspect of the design system:
- Foundations & Principles: Core principles, communication, and when to use. See FOUNDATIONS.md.
- Usability: Design tactics, best practices, and testing. See USABILITY.md.
- Typography: Scales, values, and type treatments. See TYPOGRAPHY.md.
- Accessibility: Compliance, screen reader compatibility, and testing. See ACCESSIBILITY.md.
- Layout Patterns: Bento grid, masonry, cards, hero sections, and page structures. See PATTERNS.md.
- Platform Specifics: Android (Dynamic Color, Android 16) and Linux Desktop integration. See PLATFORMS.md.