m3-expressivelisted
Install: claude install-skill abhixv/m3-expressive-design-skill
# Material 3 Expressive
M3 Expressive is an **evolution of Material 3**, not a new version — M3 is not deprecated and this
isn't "M4". It adds features, updated components, and design tactics for emotionally impactful UX.
The Usability guidelines name its design tactics as **containment, size, shape, color, and
typography** — a non-exhaustive list; the blog's seven tactics also cover **motion** and component
flexibility.
Backed by Material's most-researched update since 2014 (46 studies, 18,000+ participants).
The headline finding is that this is a **usability** mechanism, not a decorative one: participants
spotted key UI elements **up to 4× faster** in expressive screens. So every expressive choice must
answer one question — **does this guide attention to what matters on this screen?** If not, it's noise.
## Source contract — read this before writing any spec
M3 has exact published values. Stating a plausible-sounding number instead of the real one is the
main way this work goes wrong, and it is invisible to the reader.
**Every number, token name, and component name you state comes from this skill's references.** Look it
up. `tokens.md` has the numeric bedrock; `components/*.md` has per-component placement and behavior;
`component-tokens.md` has the per-component dp geometry — including the measurements m3.material.io
publishes only inside images, so check there before concluding a value is unavailable.
When a value you need is genuinely not in M3, write it as **two la