Material Design 3 Expressive

Design guide for Material Design 3 Expressive principles with TailwindCSS integration.

When to Use This Skill

• UI/UX design and planning
• Implementing micro-interactions
• Designing color systems (Dynamic Color)
• Implementing animations and transitions
• Ensuring accessibility compliance

When NOT to use:

• Backend logic implementation → angular-v21-development
• Page routing configuration → analogjs-development
• Basic styling only → tailwindcss-v4-styling

Core Principles

• Expressiveness: Fluid, spring-based animations that feel natural
• Personalization: UI that reflects user personality and preferences
• Context Awareness: Adaptive UI that responds to context and usage
• Accessibility: WCAG AA compliance, clear focus indicators, sufficient contrast
• Design Characteristics:
  • Rounded corners for friendly appearance
  • Subtle shadows and elevation
  • Spring-based motion for organic feel
  • Clear focus states for keyboard navigation

Implementation Guidelines

Color System

Material Design 3 Expressive color patterns:

1. Define semantic color roles (primary, surface, on-primary, etc.)
2. Use oklch() color space for better manipulation
3. Implement Dynamic Color for personalization
4. Ensure WCAG AA contrast ratios

→ Details: Design Tokens

Component Styling

Component design patterns:

1. Use generous padding and rounded corners
2. Apply subtle shadows for elevation
3. Implement smooth hover/focus transitions
4. Use consistent spacing scale

→ Details: Design Tokens

Animation and Motion

Motion design patterns:

1. Use spring-based easing for natural feel
2. Keep animations under 400ms for responsiveness
3. Use transform properties for performance
4. Implement enter/exit animations

→ Details: Design Tokens

Accessibility

Accessibility requirements:

1. Minimum 4.5:1 contrast ratio for text
2. Visible focus indicators with offset
3. Support for reduced motion preference
4. Semantic HTML and ARIA attributes

→ Details: Design Tokens

Typography

Typography patterns:

1. Use clear hierarchy with size and weight
2. Maintain readable line lengths (45-75 characters)
3. Use appropriate line-height for readability
4. Consider responsive typography

→ Details: Design Tokens

Workflow

1. Design Analysis: Review UX goals and user needs
2. Color Definition: Define semantic color roles
3. Component Design: Apply M3E patterns to components
4. Motion Design: Add animations and transitions
5. Accessibility Audit: Verify WCAG AA compliance
6. Responsive Testing: Test across breakpoints

Related Skills

• tailwindcss-v4-styling: For implementing styles
• angular-v21-development: For component implementation
• analogjs-development: For page application

Reference Documentation

For detailed patterns and code examples, see:

• Design Tokens - Colors, typography, motion, accessibility