material-3-expressive

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 Confirm intensity level + hero moments Confirm device class + window size class Load Tier 1 index and output template Load component overview + token spec files If theming needed, load Tier 3 foundation tokens 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 Lever Application Shape contrast Bold corners on primary, subtle on secondary Rich color Primary/secondary containers for emphasis Type hierarchy Size + weight variation Motion Shape morph on press/select 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 Mistake Fix Removing text labels for "cleaner" look Keep labels; usability drops without them Too many hero moments per screen Limit to 1-2 per flow Breaking navigation patterns Preserve standard nav behaviors No reduced-motion fallback Honor system animation scale; provide reduced-motion or instant transitions when animation scale is 0 Hardcoding token values Use semantic tokens ( md.sys.color. ) Ignoring window size classes Test Compact, Medium, Expanded 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 Need File Component token lookup references/m3-expressive-specs-tokens-index.md Output format template references/m3-component-token-output-template.md New/updated components references/m3-expressive-components.md Tier 2: Component-Specific (Load When Requested) Component Overview Tokens Buttons m3-buttons.md m3-buttons-specs-tokens.md Button Groups m3-button-groups.md m3-button-groups-specs-tokens.md Dialogs m3-dialogs.md m3-dialogs-specs-tokens.md Sheets m3-sheets.md m3-bottom-sheets-specs-tokens.md / m3-side-sheets-specs-tokens.md Toolbars m3-toolbars.md m3-toolbars-specs-tokens.md FABs m3-fabs.md m3-fabs-specs-tokens.md Extended FAB m3-extended-fab.md m3-extended-fab-specs-tokens.md FAB Menu m3-fab-menu.md m3-fab-menu-specs-tokens.md Icon Buttons m3-icon-buttons.md m3-icon-buttons-specs-tokens.md Split Button m3-split-button.md m3-split-button-specs-tokens.md Navigation Bar m3-navigation-bar.md m3-navigation-bar-specs-tokens.md Navigation Rail m3-navigation-rail.md m3-navigation-rail-specs-tokens.md App Bars m3-app-bars.md m3-app-bars-specs-tokens.md Carousel m3-carousel.md m3-carousel-specs-tokens.md Progress Indicators m3-progress-indicators.md m3-progress-indicators-specs-tokens.md Loading Indicator m3-loading-indicator.md m3-loading-indicator-specs-tokens.md Tier 3: Foundation Tokens (Load for Theming) Foundation File Color system m3-color-system.md , m3-color-foundation-tokens.md Typography m3-typography.md , m3-typography-foundation-tokens.md , m3-typography-fonts.md , m3-typography-type-scale-tokens.md Shape m3-shape.md , m3-shape-foundation-tokens.md , m3-shape-corner-radius-scale.md , m3-shape-morph.md Motion m3-motion-physics.md , m3-motion-foundation-tokens.md , m3-motion-specs.md Elevation m3-elevation.md , m3-elevation-specs-tokens.md State m3-state-foundation-tokens.md Tier 4: Evidence & Research (Load for Justification) Resource File Research findings references/expressive-research.md Testing guidance references/m3-testing-material-3.md Expressive blog references/m3-expressive-blog.md Expressive guidelines references/m3-expressive-guidelines.md UX article references/medium-ux-article.md Tier 5: Wear OS (Load Only for Wearables) Resource File Benefits references/wear-expressive-benefits.md Levels of expression references/wear-levels-of-expression.md Design language references/wear-expressive-design-language.md Blog references/wear-expressive-blog.md Compose Material3 references/wear-compose-material3.md Supporting Resources Resource File Android UI design hub references/android-ui-design-hub.md Expressive catalog references/expressive-catalog.md Compose mapping references/compose-mapping.md 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.