Adam Kinney Adam Kinney

Material Design 3

· design-systems, ai-native, material-design
Engine

Material Design is the most consequential design system ever shipped. It defined the visual language of Android, the Google ecosystem, and most of the open web’s default interface patterns for over a decade. Material 3 Expressive — announced in 2025, shipped on Android first — is its most ambitious update: physics-based motion, shape morphing, conversational components designed explicitly around Gemini.

It’s also, on the web, in maintenance mode. That tension is the whole story.

Current Read

M3 Expressive on Compose is the most advanced AI-native design system anyone has shipped. A Loading Indicator that morphs through seven shapes to communicate “processing” as a continuous experience. A FAB Menu with spring-physics morphing driven by a continuous checkedProgress parameter. 35 new shapes with shape morphing. Five net-new components built for conversational and generative UI patterns. This is design-system-level thinking applied to AI — and it’s real, shipped code on Jetpack Compose.

On the web, none of this exists. Material Web is in maintenance mode. The GitHub issue requesting Expressive support has sat without a maintainer response for months. Community forks are filling the gap, but fragmented, unofficial, and risky for enterprise adoption. Google built the vision and walked away from the surface where most AI interfaces actually live. The gap between the native and web scores is the design-system story of 2026.

Scorecard Preview

Working scores — subject to revision as the full deep dive lands.

Material Design 3 (Web)

Total: 22/80
1. Components → Conversations
3 Expressive ships conversational components on Compose; the web library has no streaming primitives
2. States → Continuity
2 Spring physics + shape morphing exist on Compose only; web is still CSS transitions
3. Predictable → Uncertain Layout
4 Window size classes, canonical layouts — strong responsive story, but no content-uncertainty handling
4. Canned → Adaptive Motion
2 Basic CSS transitions; no spring physics or shape morphing on web
5. Compliance → Infrastructure
4 Per-component ARIA; no system-level focus management
6. Brand Expression → Trust Expression
1 Zero epistemic vocabulary, even in Expressive
7. Screen → Ambient
4 Cross-platform tokens, Dynamic Color; web surface falling behind
8. Docs → Guardrails
2 Excellent docs for humans; not machine-readable as constraints

Material Design 3 (Compose/Native)

Total: 29/80
1. Components → Conversations
5 Five new Expressive components built for conversational and generative UI
2. States → Continuity
4 Spring physics, shape morphing, continuous state-driven animation
3. Predictable → Uncertain Layout
4 Same layout system — strong but still deterministic
4. Canned → Adaptive Motion
4 Shape-morphing Loading Indicator is the design artifact AND the runtime
5. Compliance → Infrastructure
4 Same per-component approach, better animation accessibility
6. Brand Expression → Trust Expression
1 Designed around Gemini — still no trust vocabulary
7. Screen → Ambient
5 Cross-platform tokens, plus a Compose-specific behavioral layer
8. Docs → Guardrails
2 Same gap — no constraint schema for generative tools

The 7-point gap between web (22/80) and native (29/80) columns is the point. Google built the best AI-native design system in existence and shipped it only on the platform where enterprise AI interfaces aren’t.

What the Deep Dive Will Cover

  • The M3 Expressive story. What was announced, what shipped, what’s novel. Spring physics as a design primitive. Shape morphing as behavior, not decoration. Why it reads as ahead of Fluent conceptually.
  • The web abandonment. Material Web’s maintenance-mode status. The GitHub issue timeline. The community forks (@banegasn/components, material-esm/material) and what they cover. Why enterprise teams can’t bet on community forks without warranty.
  • Responsive as Material’s clearest win. Window size classes (Compact, Medium, Expanded), canonical layouts (Feed, List-Detail, Supporting Pane). The thing Fluent doesn’t have. Why this matters more when AI is in the interface.
  • Design-to-code pipeline. Material Theme Builder. Figma-to-code. Token hierarchy (reference → system → component). The integration story Fluent hasn’t matched.
  • The Dimension 6 problem. Trust expression scores 1 on every Material column. Expressive was designed around Gemini and still didn’t address it. The most important unclaimed territory in AI-native design.
  • Where Material’s open source ecosystem goes from here. Community forks as a strategic question. Can the web surface be reclaimed? What would it take?

Where This Lands

Full deep dive in progress. Pulling from the Compose source, the Material Theme Builder tooling, the community fork analysis, and the M3 Expressive specification docs. If you work on Material (or on something building on top of it) — tell me where this read gets it wrong.