UI Lingo
Shortlist 0

Material 3 Expressive

Also called: M3 Expressive, Material You Expressive, M3E

Google’s tonal Material You, made bolder: lilac tonal containers, scalloped and clover shapes, springy morphing corners and big FABs.

“Material You, turned up”Platform Design SystemsEra: 2025 → today (Android 16)FriendlyPlayfulCalm
Prompt builder
Open full screen ↗
material-3-expressive / landingEN
material-3-expressive / landingTH

Design keywords

Say these words to ask for this style.

tonal colour containersscalloped cookie shapesshape morphingspringy overshoot motionbig rounded FABpill active indicatoremphasized bold headlineslilac Material You palette

Material 3 Expressive keeps Material You’s tonal palette (every surface is a tint of one seed colour) and pushes it: heavier emphasized headlines, extra-large 28–40px corners, a shape library of cookies, clovers and flowers used for icons and avatars, and springy motion where buttons morph from pill to rounded square when pressed. Surfaces are flat tonal fills rather than shadows; colour roles (primary, secondary, tertiary containers) do the hierarchy.

Best for

  • Android-first consumer apps
  • Wellness, habit and health trackers
  • Friendly onboarding and settings flows
  • Products already using Material components (Compose, MDC, Flutter)

Avoid for

  • Luxury or editorial brands that need restraint
  • Dense enterprise data tools
  • iOS-only apps that should feel native to Apple

✓ Do

  • Derive every surface from one seed colour as tonal containers (primary/secondary/tertiary container)
  • Use 28px+ corners on cards and a 9/12-scallop shape for avatars and icons
  • Use one spring easing (overshoot) for press and hover morphs — pill → 14px rounded square (icon buttons 12px)
  • Give filter chips an 8px radius (the one deliberate small radius) with a check mark when selected
  • Keep resting surfaces shadowless; shadow-md only on the FAB, menus and dragged items, shadow-lg only on dialogs

✕ Don't

  • Don’t add drop shadows to every card — elevation is tonal
  • Don’t pile up big decorative shapes — one fixed cookie + clover backdrop, plus at most one large shape per section (hero scallop; CTA scallop + clover)
  • Don’t use hairline 1px outlines as the main separator

Not to be confused with

Flat Design →Flat design uses many unrelated bright colours with small radii; M3 Expressive uses tints of one seed colour, huge corners and scalloped shapes.Claymorphism →Claymorphism inflates surfaces with soft inner and drop shadows; M3 Expressive stays flat and tonal, its playfulness comes from shape and motion.Dopamine Design →Dopamine design throws saturated clashing colours at you; M3 Expressive is harmonious tonal lilac with one tertiary pink.

On mobile

This is its home turf: navigation bar with a 64×32 pill indicator behind the active icon, filled tonal cards with 28px corners, 8px-radius filter chips, scalloped avatars and a large rounded-square FAB. Keep the spring easing short (≈350ms) and only morph shape on press.

Prompt builder

Paste into Claude, Cursor, v0, Lovable or any coding agent to recreate this style.

✓ Audited by agent review (3×)
Copied!