expressive-design

Original：🇺🇸 English

Translated

Material 3 Expressive (M3E). Comprehensive guidance on expressive design system for Flutter with platform support for Android and Linux desktop. Covers color tokens, typography scales, motion specifications, shape tokens, spacing ramps, and component enhancements for creating emotionally engaging UIs. Includes migration guidance from standard M3 and platform-specific integration notes.

1installs

Sourceab22593k/skills

Added on2026-02-16

NPX Install

npx skill4agent add ab22593k/skills expressive-design

SKILL.md Content

View Translation Comparison →

Material 3 Expressive Design System

Material 3 Expressive (M3E) 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 color, shape, size, motion, and containment.

Quick Reference

Category	Reference	Description
Foundations	FOUNDATIONS.md	Research, principles, core elements
Color	COLOR.md	Tokens, palettes, contrast specs
Typography	TYPOGRAPHY.md	Scales, values, treatments
Motion	MOTION.md	Durations, easing, transitions
Shapes	SHAPES.md	Radii, tokens, containment
Spacing	SPACING.md	Spacing ramps, touch targets
Components	COMPONENTS.md	Component specifications
Migration	MIGRATION.md	M3 to M3E migration guide
Accessibility	ACCESSIBILITY.md	Compliance, testing
Platforms	PLATFORMS.md	Android and Linux desktop

Core Expressive Elements

Color - Expanded tonal palettes, container tiers, emotional selection
Shape - Expressive radii, containment, visual boundaries
Size - Larger touch targets, visual hierarchy
Motion - Energetic transitions, emotional timing
Containment - Surface elevation, tonal separation

When to Use M3 Expressive

Media and entertainment applications
Communication apps (email, messaging)
Social platforms
Creative tools
Consumer-facing products

When to Avoid M3 Expressive

Banking and financial applications
Safety-critical interfaces
Healthcare and medical software
Productivity tools requiring efficiency
Forms-heavy applications

Platform Support

Android - Dynamic color, Android 16 integration, native behaviors
Linux Desktop - Keyboard navigation, focus management, desktop interactions

Key Research Findings

87% preference among 18-24 age group
4x faster element recognition
32% increase in subculture perception
34% boost in modernity
Erases age-related usability gaps

Flutter Integration

Use the m3e_design package for M3 Expressive implementation:

yaml

dependencies:
  m3e_design: ^0.2.1
  dynamic_color: ^1.8.1

Next Steps

Review FOUNDATIONS.md for core principles
Apply color system from COLOR.md
Implement typography from TYPOGRAPHY.md
Add motion from MOTION.md
Apply shapes from SHAPES.md
Configure spacing from SPACING.md
Implement components from COMPONENTS.md
Migrate existing M3 from MIGRATION.md
Ensure accessibility with ACCESSIBILITY.md
Configure platform-specifics from PLATFORMS.md