Design for AI

Estilo Material 3 Expressive: prompt de diseño UI

Paleta, reglas tipográficas y un prompt pegable para material 3 expressive. También llamado Material You, Material Design 3, M3 Expressive, estilo Android 16, color dinámico. 2021 (Material You), 2025 (actualización M3 Expressive).

Rasgos

  • paletas tonales derivadas de un solo color semilla: primario, secundario, terciario en muchos tonos
  • contenedores de superficie en cinco tintes de elevación en vez de sombras
  • radio muy grande (28px) en tarjetas y diálogos, píldoras completas en botones y chips
  • tipografía grande y contundente con peso variable y componentes que cambian de forma
  • variantes de botón filled, tonal, outlined y text con roles estrictos
  • movimiento elástico basado en físicas con rebasamiento; los componentes se transforman entre estados
  • objetivos táctiles grandes, formas expresivas (squircles, festones, galletas) como acentos

Paleta

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

Tipografía

Roboto o Roboto Flex (variable); display 400 a 57px, headline 400 a 32px, title 500 a 22px, body 400 a 16px, label 500 a 14px; M3 Expressive permite pesos 700-900 en display

Haz

  • genera la paleta tonal desde una semilla y usa los colores de contenedor para las superficies, no sombras
  • usa los nombres de la escala tipográfica de M3 (display, headline, title, body, label) y cíñete a ellos
  • usa easing elástico (cubic-bezier(0.2,0,0,1) para el estándar, con rebasamiento para el expresivo) a 300-500ms

Evita

  • no uses sombras proyectadas para la jerarquía; usa niveles de tinte de superficie
  • no mezcles radios pequeños; M3 es 28px en contenedores y 999px en botones
  • no uses el look de sombra del FAB de Material de 2014; eso es Material 1

Conocido por: Android 12-16, apps de Google Pixel, Google Photos, Google Wallet

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

Construye el sitio en estilo Material 3 Expressive. Color semilla #6750a4; deriva primary #6750a4, primary-container #eaddff, secondary-container #e8def8, tertiary #7d5260, surface #fef7ff, surface-container #f3edf7, surface-container-high #ece6f0, on-surface #1d1b20, outline #79747e. Sin sombras proyectadas; la jerarquía viene de los tintes de contenedor. Fuente Roboto Flex: display 700 a 57px, headline 500 a 32px, title 500 a 22px, body 400 a 16px, label 500 a 14px. Tarjetas: surface-container con border-radius 28px y padding 24px. Botones: variantes filled (primary, texto blanco), tonal (secondary-container), outlined (outline de 1px) y text, todas en forma de píldora (999px) a 40px de alto; un FAB expresivo grande a 56px con radio 16px. Chips como píldoras con gap 8px. Añade una forma expresiva decorativa (un SVG de galleta de 12 puntas en primary-container) detrás del hero. Movimiento: los cambios de estado usan cubic-bezier(0.2,0,0,1) a 300ms; el FAB se transforma en una barra a ancho completo al pulsarlo con un spring de 450ms con rebasamiento.
Para design.md, .cursorrules o AGENTS.md
## Dirección de diseño
Construye el sitio en estilo Material 3 Expressive. Color semilla #6750a4; deriva primary #6750a4, primary-container #eaddff, secondary-container #e8def8, tertiary #7d5260, surface #fef7ff, surface-container #f3edf7, surface-container-high #ece6f0, on-surface #1d1b20, outline #79747e. Sin sombras proyectadas; la jerarquía viene de los tintes de contenedor. Fuente Roboto Flex: display 700 a 57px, headline 500 a 32px, title 500 a 22px, body 400 a 16px, label 500 a 14px. Tarjetas: surface-container con border-radius 28px y padding 24px. Botones: variantes filled (primary, texto blanco), tonal (secondary-container), outlined (outline de 1px) y text, todas en forma de píldora (999px) a 40px de alto; un FAB expresivo grande a 56px con radio 16px. Chips como píldoras con gap 8px. Añade una forma expresiva decorativa (un SVG de galleta de 12 puntas en primary-container) detrás del hero. Movimiento: los cambios de estado usan cubic-bezier(0.2,0,0,1) a 300ms; el FAB se transforma en una barra a ancho completo al pulsarlo con un spring de 450ms con rebasamiento.

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

Mantén estados hover y focus-visible en cada elemento interactivo. No añadas un framework CSS.