# Material 3 Expressive

Also called: Material You, Material Design 3, M3 Expressive, Android 16 style, dynamic colour  
Era: 2021 (Material You), 2025 (M3 Expressive update)  
Page: https://designforai.dev/style/material-3-expressive

## Traits

- tonal palettes derived from one seed colour: primary, secondary, tertiary at many tones
- surface containers at five elevation tints instead of shadows
- very large radius (28px) on cards and dialogs, full pills on buttons and chips
- bold, oversized type with variable weight and shape-shifting components
- filled, tonal, outlined and text button variants with strict roles
- springy, physics-based motion with overshoot; components morph between states
- big touch targets, expressive shapes (squircles, scallops, cookies) as accents

Palette: seed #6750a4 -> primary #6750a4, on-primary #ffffff, primary-container #eaddff, secondary-container #e8def8, tertiary #7d5260, surface #fef7ff, surface-container #f3edf7, on-surface #1d1b20, outline #79747e

Type: Roboto or Roboto Flex (variable); display 400 at 57px, headline 400 at 32px, title 500 at 22px, body 400 at 16px, label 500 at 14px; M3 Expressive allows 700-900 weights on display

## Do

- generate the tonal palette from one seed and use container colours for surfaces, not shadows
- use the M3 type scale names (display, headline, title, body, label) and stick to them
- use spring easing (cubic-bezier(0.2,0,0,1) for standard, overshoot for expressive) at 300-500ms

## Don't

- do not use drop shadows for hierarchy; use surface tint levels
- do not mix small radii; M3 is 28px on containers and 999px on buttons
- do not use the 2014 Material FAB shadow look; that is Material 1

Known for it: Android 12-16, Google Pixel apps, Google Photos, Google Wallet

## CSS seed

```css
:root{--bg:#fef7ff; --surface:#f3edf7; --fg:#1d1b20; --accent:#6750a4; --accent-container:#eaddff; --secondary-container:#e8def8; --radius:28px; --font:'Roboto Flex',sans-serif}
```

## Prompt

Build the site in Material 3 Expressive style. Seed colour #6750a4; derive primary #6750a4, primary-container #eaddff, secondary-container #e8def8, tertiary #7d5260, surface #fef7ff, surface-container #f3edf7, surface-container-high #ece6f0, on-surface #1d1b20, outline #79747e. No drop shadows; hierarchy comes from container tints. Font Roboto Flex: display 700 at 57px, headline 500 at 32px, title 500 at 22px, body 400 at 16px, label 500 at 14px. Cards: surface-container with border-radius 28px and 24px padding. Buttons: filled (primary, white text), tonal (secondary-container), outlined (1px outline) and text variants, all pill-shaped (999px) at 40px height; a large expressive FAB at 56px with 16px radius. Chips as pills with 8px gap. Add one decorative expressive shape (a 12-point cookie SVG in primary-container) behind the hero. Motion: state changes use cubic-bezier(0.2,0,0,1) at 300ms; the FAB morphs into a full-width bar on press with a 450ms spring overshoot.