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
Accessibility
Expressive Compliance
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.
1---2name: material-3-expressive3description: Android UI/UX design or review with Material 3 Expressive (M3 Expressive / Material You Expressive). Use when selecting expressive component tokens, defining expressive hierarchy, motion, color, shape, typography, or reviewing Android UI against expressive guidance. Not for non-Android platforms, non-UI Android tasks, or implementation-only requests without design decisions.4---5
6# Material 3 Expressive (Android UI/UX)
7
8## Overview
9
10Design 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.
11
12## Intake Questions
13
14- Target device class (phone, tablet, foldable, Wear OS)
15- Window size class (Compact, Medium, Expanded)
16- Brand constraints and dynamic color usage
17- Primary action(s) and desired hero moments (1-2 max)
18- Motion constraints and reduced-motion expectations
19- Accessibility targets (contrast, touch target)
20
21## Default Assumptions
22
23- Intensity level: Foundational
24- Window size class: Compact
25- Dynamic color: enabled
26- Standard navigation patterns preserved
27
28## Quick Workflow
29
301. Confirm intensity level + hero moments
312. Confirm device class + window size class
323. Load Tier 1 index and output template
334. Load component overview + token spec files
345. If theming needed, load Tier 3 foundation tokens
356. Output: guidance + token refs (see template)
36
37## Default Output Format (Guidance + Token Refs)
38
39Use `references/m3-component-token-output-template.md` verbatim as the base output shell.
40
41- Context and intent (1-2 lines)
42- Intensity level + hero moments (count + location)
43- Window size class + device class
44- Component + variant
45- Token references: file paths + token groups to use (quote minimal key values only if needed)
46- Compose mapping reference (optional): `references/compose-mapping.md`
47- Behavior or interaction constraints (from overview)
48- Reduced-motion fallback note
49- Accessibility and performance checks
50- Optional: Compose mapping notes
51
52## Expressive Tactics
53
54| Lever | Application |
55|-------|-------------|
56| Shape contrast | Bold corners on primary, subtle on secondary |
57| Rich color | Primary/secondary containers for emphasis |
58| Type hierarchy | Size + weight variation |
59| Motion | Shape morph on press/select |
60
61**Constraint:** Max 1-2 hero moments per flow
62
63## Expressive Intensity Levels
64
65- **Foundational:** Clarity and familiarity first
66- **Excellent:** Stronger color, type, and shape while preserving patterns
67- **Transformative:** Bold layouts and motion with strict usability and accessibility
68
69## Common Mistakes
70
71| Mistake | Fix |
72|---------|-----|
73| Removing text labels for "cleaner" look | Keep labels; usability drops without them |
74| Too many hero moments per screen | Limit to 1-2 per flow |
75| Breaking navigation patterns | Preserve standard nav behaviors |
76| No reduced-motion fallback | Honor system animation scale; provide reduced-motion or instant transitions when animation scale is 0 |
77| Hardcoding token values | Use semantic tokens (`md.sys.color.*`) |
78| Ignoring window size classes | Test Compact, Medium, Expanded |
79
80## Android-Specific Guidance
81
82- Preserve navigation and component behaviors
83- Keep touch targets generous and platform-consistent
84- Honor system animation scale; provide reduced-motion alternatives or instant transitions when animation scale is 0
85- Apply window size classes for tablets and foldables
86
87## Review Checklist
88
89### Hierarchy
90- [ ] Primary action identifiable within 2 seconds
91- [ ] Max 1-2 hero moments per screen
92- [ ] Labels preserved on all interactive elements
93
94### Accessibility
95- [ ] Color contrast: 4.5:1 text, 3:1 non-text
96- [ ] Touch targets: 48dp minimum
97- [ ] Motion: reduced-motion alternative provided
98- [ ] Screen reader: content descriptions present
99
100### Expressive Compliance
101- [ ] Intensity level consistent across feature
102- [ ] Standard patterns preserved
103- [ ] Dynamic color tokens used
104- [ ] Window size classes tested
105
106## Reference Tiers (Load in Order of Need)
107
108### Tier 1: Always Load First
109| Need | File |
110|------|------|
111| Component token lookup | `references/m3-expressive-specs-tokens-index.md` |
112| Output format template | `references/m3-component-token-output-template.md` |
113| New/updated components | `references/m3-expressive-components.md` |
114
115### Tier 2: Component-Specific (Load When Requested)
116| Component | Overview | Tokens |
117|-----------|----------|--------|
118| Buttons | `m3-buttons.md` | `m3-buttons-specs-tokens.md` |
119| Button Groups | `m3-button-groups.md` | `m3-button-groups-specs-tokens.md` |
120| Dialogs | `m3-dialogs.md` | `m3-dialogs-specs-tokens.md` |
121| Sheets | `m3-sheets.md` | `m3-bottom-sheets-specs-tokens.md` / `m3-side-sheets-specs-tokens.md` |
122| Toolbars | `m3-toolbars.md` | `m3-toolbars-specs-tokens.md` |
123| FABs | `m3-fabs.md` | `m3-fabs-specs-tokens.md` |
124| Extended FAB | `m3-extended-fab.md` | `m3-extended-fab-specs-tokens.md` |
125| FAB Menu | `m3-fab-menu.md` | `m3-fab-menu-specs-tokens.md` |
126| Icon Buttons | `m3-icon-buttons.md` | `m3-icon-buttons-specs-tokens.md` |
127| Split Button | `m3-split-button.md` | `m3-split-button-specs-tokens.md` |
128| Navigation Bar | `m3-navigation-bar.md` | `m3-navigation-bar-specs-tokens.md` |
129| Navigation Rail | `m3-navigation-rail.md` | `m3-navigation-rail-specs-tokens.md` |
130| App Bars | `m3-app-bars.md` | `m3-app-bars-specs-tokens.md` |
131| Carousel | `m3-carousel.md` | `m3-carousel-specs-tokens.md` |
132| Progress Indicators | `m3-progress-indicators.md` | `m3-progress-indicators-specs-tokens.md` |
133| Loading Indicator | `m3-loading-indicator.md` | `m3-loading-indicator-specs-tokens.md` |
134
135### Tier 3: Foundation Tokens (Load for Theming)
136| Foundation | File |
137|------------|------|
138| Color system | `m3-color-system.md`, `m3-color-foundation-tokens.md` |
139| Typography | `m3-typography.md`, `m3-typography-foundation-tokens.md`, `m3-typography-fonts.md`, `m3-typography-type-scale-tokens.md` |
140| Shape | `m3-shape.md`, `m3-shape-foundation-tokens.md`, `m3-shape-corner-radius-scale.md`, `m3-shape-morph.md` |
141| Motion | `m3-motion-physics.md`, `m3-motion-foundation-tokens.md`, `m3-motion-specs.md` |
142| Elevation | `m3-elevation.md`, `m3-elevation-specs-tokens.md` |
143| State | `m3-state-foundation-tokens.md` |
144
145### Tier 4: Evidence & Research (Load for Justification)
146| Resource | File |
147|----------|------|
148| Research findings | `references/expressive-research.md` |
149| Testing guidance | `references/m3-testing-material-3.md` |
150| Expressive blog | `references/m3-expressive-blog.md` |
151| Expressive guidelines | `references/m3-expressive-guidelines.md` |
152| UX article | `references/medium-ux-article.md` |
153
154### Tier 5: Wear OS (Load Only for Wearables)
155| Resource | File |
156|----------|------|
157| Benefits | `references/wear-expressive-benefits.md` |
158| Levels of expression | `references/wear-levels-of-expression.md` |
159| Design language | `references/wear-expressive-design-language.md` |
160| Blog | `references/wear-expressive-blog.md` |
161| Compose Material3 | `references/wear-compose-material3.md` |
162
163### Supporting Resources
164| Resource | File |
165|----------|------|
166| Android UI design hub | `references/android-ui-design-hub.md` |
167| Expressive catalog | `references/expressive-catalog.md` |
168| Compose mapping | `references/compose-mapping.md` |
169
170## Maintenance
171
172- Refresh references with `skills/material-3-expressive/scripts/update_m3_expressive_refs.py`.
173- Requires Playwright and Chromium (`.venv/bin/python -m playwright install chromium` if needed).
174- CI runs weekly; local runs are for urgent changes.
175
176## Search Tips
177
178- Find a token prefix: `rg "md.comp.button" skills/material-3-expressive/references/m3-buttons-specs-tokens.md`
179- Find navigation tokens: `rg "md.comp.navigation" skills/material-3-expressive/references/m3-.*navigation.*.md`
180
181## Examples
182
183- Use `assets/examples/ui/ExpressiveHomeScreen.kt` as a Compose starting point
184- Use `assets/examples/ui/ExpressiveButtonComparison.kt` to see standard vs expressive button differences
185- Use `assets/examples/ui/ExpressiveAntiPatterns.kt` to learn common mistakes to avoid
186- Use `assets/examples/ux/expressive-ux-brief-template.md` to draft an expressive UX brief
187- Examples are illustrative; adapt sizes/colors to expressive tokens and project constraints.
albermonte