Material 3 Expressive (Android UI/UX)

Overview

Design and review Android UI/UX using Material 3 Expressive. Prioritize component-token requests for dialogs, sheets, modals, toolbars, and buttons, with guidance plus token references by default.

Intake Questions

• Target device class (phone, tablet, foldable, Wear OS)
• Window size class (Compact, Medium, Expanded)
• Brand constraints and dynamic color usage
• Primary action(s) and desired hero moments (1-2 max)
• Motion constraints and reduced-motion expectations
• Accessibility targets (contrast, touch target)

Default Assumptions

• Intensity level: Foundational
• Window size class: Compact
• Dynamic color: enabled
• Standard navigation patterns preserved

Quick Workflow

1. Confirm intensity level + hero moments
2. Confirm device class + window size class
3. Load Tier 1 index and output template
4. Load component overview + token spec files
5. If theming needed, load Tier 3 foundation tokens
6. Output: guidance + token refs (see template)

Default Output Format (Guidance + Token Refs)

Use references/m3-component-token-output-template.md verbatim as the base output shell.

• Context and intent (1-2 lines)
• Intensity level + hero moments (count + location)
• Window size class + device class
• Component + variant
• Token references: file paths + token groups to use (quote minimal key values only if needed)
• Compose mapping reference (optional): references/compose-mapping.md
• Behavior or interaction constraints (from overview)
• Reduced-motion fallback note
• Accessibility and performance checks
• Optional: Compose mapping notes

Expressive Tactics

Constraint: Max 1-2 hero moments per flow

Expressive Intensity Levels

• Foundational: Clarity and familiarity first
• Excellent: Stronger color, type, and shape while preserving patterns
• Transformative: Bold layouts and motion with strict usability and accessibility

Common Mistakes

Android-Specific Guidance

• Preserve navigation and component behaviors
• Keep touch targets generous and platform-consistent
• Honor system animation scale; provide reduced-motion alternatives or instant transitions when animation scale is 0
• Apply window size classes for tablets and foldables

Review Checklist

Hierarchy

• Primary action identifiable within 2 seconds
• Max 1-2 hero moments per screen
• Labels preserved on all interactive elements

Accessibility

• Color contrast: 4.5:1 text, 3:1 non-text
• Touch targets: 48dp minimum
• Motion: reduced-motion alternative provided
• Screen reader: content descriptions present

Expressive Compliance

• Intensity level consistent across feature
• Standard patterns preserved
• Dynamic color tokens used
• Window size classes tested

Reference Tiers (Load in Order of Need)

Tier 1: Always Load First

Tier 2: Component-Specific (Load When Requested)

Tier 3: Foundation Tokens (Load for Theming)

Tier 4: Evidence & Research (Load for Justification)

Tier 5: Wear OS (Load Only for Wearables)

Supporting Resources

Maintenance

• Refresh references with skills/material-3-expressive/scripts/update_m3_expressive_refs.py.
• Requires Playwright and Chromium (.venv/bin/python -m playwright install chromium if needed).
• CI runs weekly; local runs are for urgent changes.

Search Tips

• Find a token prefix: rg "md.comp.button" skills/material-3-expressive/references/m3-buttons-specs-tokens.md
• Find navigation tokens: rg "md.comp.navigation" skills/material-3-expressive/references/m3-.*navigation.*.md

Examples

• Use assets/examples/ui/ExpressiveHomeScreen.kt as a Compose starting point
• Use assets/examples/ui/ExpressiveButtonComparison.kt to see standard vs expressive button differences
• Use assets/examples/ui/ExpressiveAntiPatterns.kt to learn common mistakes to avoid
• Use assets/examples/ux/expressive-ux-brief-template.md to draft an expressive UX brief
• Examples are illustrative; adapt sizes/colors to expressive tokens and project constraints.