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:
- Define semantic color roles (primary, surface, on-primary, etc.)
- Use
oklch()color space for better manipulation - Implement Dynamic Color for personalization
- Ensure WCAG AA contrast ratios
→ Details: Design Tokens
Component Styling
Component design patterns:
- Use generous padding and rounded corners
- Apply subtle shadows for elevation
- Implement smooth hover/focus transitions
- Use consistent spacing scale
→ Details: Design Tokens
Animation and Motion
Motion design patterns:
- Use spring-based easing for natural feel
- Keep animations under 400ms for responsiveness
- Use transform properties for performance
- Implement enter/exit animations
→ Details: Design Tokens
Accessibility
Accessibility requirements:
- Minimum 4.5:1 contrast ratio for text
- Visible focus indicators with offset
- Support for reduced motion preference
- Semantic HTML and ARIA attributes
→ Details: Design Tokens
Typography
Typography patterns:
- Use clear hierarchy with size and weight
- Maintain readable line lengths (45-75 characters)
- Use appropriate line-height for readability
- Consider responsive typography
→ Details: Design Tokens
Workflow
- Design Analysis: Review UX goals and user needs
- Color Definition: Define semantic color roles
- Component Design: Apply M3E patterns to components
- Motion Design: Add animations and transitions
- Accessibility Audit: Verify WCAG AA compliance
- 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