Design for AI

Material 3 Expressive: UI design prompt

Palette, type rules and a pasteable prompt for material 3 expressive. Also called Material You, Material Design 3, M3 Expressive, Android 16 style, dynamic colour. 2021 (Material You), 2025 (M3 Expressive update).

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
: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.
For design.md, .cursorrules or AGENTS.md
## Design direction
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.

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

Keep hover and focus-visible states on every interactive element. Do not add a CSS framework.