Design for AI

Stil Material 3 Expressive: UI-Design-Prompt

Palette, Schriftregeln und ein einfügbarer Prompt für material 3 expressive. Auch bekannt als Material You, Material Design 3, M3 Expressive, Android-16-Stil, dynamische Farbe. 2021 (Material You), 2025 (M3-Expressive-Update).

Merkmale

  • tonale Paletten aus einer Seed-Farbe abgeleitet: Primär, Sekundär, Tertiär in vielen Tönen
  • Surface-Container in fünf Elevation-Tönungen statt Schatten
  • sehr großer Radius (28px) auf Karten und Dialogen, volle Pillen auf Buttons und Chips
  • fette, überdimensionierte Schrift mit variablem Gewicht und formwandelnde Komponenten
  • Filled-, Tonal-, Outlined- und Text-Button-Varianten mit strengen Rollen
  • federnde, physikbasierte Motion mit Überschwingen; Komponenten morphen zwischen Zuständen
  • große Touch-Ziele, expressive Formen (Squircles, Bögen, Cookies) als Akzente

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

Schrift

Roboto oder Roboto Flex (variabel); display 400 bei 57px, headline 400 bei 32px, title 500 bei 22px, body 400 bei 16px, label 500 bei 14px; M3 Expressive erlaubt 700-900 auf display

Do

  • erzeuge die tonale Palette aus einer Seed-Farbe und nutze Container-Farben für Flächen, nicht Schatten
  • nutze die Namen der M3-Typoskala (display, headline, title, body, label) und bleib dabei
  • nutze Spring-Easing (cubic-bezier(0.2,0,0,1) als Standard, Überschwingen für expressive) bei 300-500ms

Don't

  • nutze keine Drop-Shadows für Hierarchie; nutze Surface-Tint-Stufen
  • misch keine kleinen Radien; M3 ist 28px auf Containern und 999px auf Buttons
  • nutze nicht den FAB-Schatten-Look von Material 2014; das ist Material 1

Bekannt dafür: Android 12-16, Google-Pixel-Apps, Google Fotos, 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

Baue die Seite im Material-3-Expressive-Stil. Seed-Farbe #6750a4; leite ab: primary #6750a4, primary-container #eaddff, secondary-container #e8def8, tertiary #7d5260, surface #fef7ff, surface-container #f3edf7, surface-container-high #ece6f0, on-surface #1d1b20, outline #79747e. Keine Drop-Shadows; Hierarchie entsteht aus Container-Tönungen. Schrift Roboto Flex: display 700 bei 57px, headline 500 bei 32px, title 500 bei 22px, body 400 bei 16px, label 500 bei 14px. Karten: surface-container mit border-radius 28px und 24px Padding. Buttons: Filled (primary, weißer Text), Tonal (secondary-container), Outlined (1px outline) und Text-Varianten, alle pillenförmig (999px) bei 40px Höhe; ein großer expressiver FAB bei 56px mit 16px Radius. Chips als Pillen mit 8px Abstand. Ergänze eine dekorative expressive Form (ein 12-zackiges Cookie-SVG in primary-container) hinter dem Hero. Motion: Zustandswechsel nutzen cubic-bezier(0.2,0,0,1) bei 300ms; der FAB morpht beim Drücken mit einem 450ms Spring-Überschwingen in eine Leiste voller Breite.
Für design.md, .cursorrules oder AGENTS.md
## Designrichtung
Baue die Seite im Material-3-Expressive-Stil. Seed-Farbe #6750a4; leite ab: primary #6750a4, primary-container #eaddff, secondary-container #e8def8, tertiary #7d5260, surface #fef7ff, surface-container #f3edf7, surface-container-high #ece6f0, on-surface #1d1b20, outline #79747e. Keine Drop-Shadows; Hierarchie entsteht aus Container-Tönungen. Schrift Roboto Flex: display 700 bei 57px, headline 500 bei 32px, title 500 bei 22px, body 400 bei 16px, label 500 bei 14px. Karten: surface-container mit border-radius 28px und 24px Padding. Buttons: Filled (primary, weißer Text), Tonal (secondary-container), Outlined (1px outline) und Text-Varianten, alle pillenförmig (999px) bei 40px Höhe; ein großer expressiver FAB bei 56px mit 16px Radius. Chips als Pillen mit 8px Abstand. Ergänze eine dekorative expressive Form (ein 12-zackiges Cookie-SVG in primary-container) hinter dem Hero. Motion: Zustandswechsel nutzen cubic-bezier(0.2,0,0,1) bei 300ms; der FAB morpht beim Drücken mit einem 450ms Spring-Überschwingen in eine Leiste voller Breite.

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

Hover- und focus-visible-Zustände auf jedem interaktiven Element beibehalten. Kein CSS-Framework hinzufügen.