Design for AI

Estilo Material 3 Expressive: prompt de design de UI

Paleta, regras de tipografia e um prompt pronto para colar de material 3 expressive. Também chamado de Material You, Material Design 3, M3 Expressive, estilo Android 16, cor dinâmica. 2021 (Material You), 2025 (atualização M3 Expressive).

Traços

  • paletas tonais derivadas de uma cor semente: primária, secundária, terciária em muitos tons
  • containers de superfície em cinco tons de elevação em vez de sombras
  • raio muito grande (28px) em cards e diálogos, pílulas completas em botões e chips
  • tipografia bold e superdimensionada com peso variável e componentes que mudam de forma
  • variantes de botão filled, tonal, outlined e text com papéis rígidos
  • movimento elástico baseado em física com overshoot; componentes se transformam entre estados
  • alvos de toque grandes, formas expressivas (squircles, vieiras, cookies) como acentos

Paleta

semente #6750a4 -> primária #6750a4, on-primary #ffffff, primary-container #eaddff, secondary-container #e8def8, terciária #7d5260, surface #fef7ff, surface-container #f3edf7, on-surface #1d1b20, outline #79747e

Tipografia

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

Faça

  • gere a paleta tonal a partir de uma semente e use cores de container para as superfícies, não sombras
  • use os nomes da escala tipográfica do M3 (display, headline, title, body, label) e fique com eles
  • use easing de mola (cubic-bezier(0.2,0,0,1) para o padrão, overshoot para o expressivo) a 300-500ms

Evite

  • não use sombras projetadas para hierarquia; use níveis de tom de superfície
  • não misture raios pequenos; o M3 é 28px em containers e 999px em botões
  • não use o visual de sombra do FAB do Material de 2014; isso é Material 1

Conhecido por: Android 12-16, apps do Google Pixel, Google Fotos, Google Wallet

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

Construa o site em estilo Material 3 Expressive. Cor semente #6750a4; derive primária #6750a4, primary-container #eaddff, secondary-container #e8def8, terciária #7d5260, surface #fef7ff, surface-container #f3edf7, surface-container-high #ece6f0, on-surface #1d1b20, outline #79747e. Sem sombras projetadas; a hierarquia vem dos tons de container. Fonte Roboto Flex: display 700 a 57px, headline 500 a 32px, title 500 a 22px, body 400 a 16px, label 500 a 14px. Cards: surface-container com border-radius 28px e padding 24px. Botões: variantes filled (primária, texto branco), tonal (secondary-container), outlined (outline de 1px) e text, todas em forma de pílula (999px) com 40px de altura; um FAB expressivo grande de 56px com raio 16px. Chips como pílulas com gap de 8px. Adicione uma forma expressiva decorativa (um SVG de cookie de 12 pontas em primary-container) atrás do hero. Movimento: mudanças de estado usam cubic-bezier(0.2,0,0,1) a 300ms; o FAB se transforma numa barra de largura total ao pressionar com um overshoot de mola de 450ms.
Para design.md, .cursorrules ou AGENTS.md
## Direção de design
Construa o site em estilo Material 3 Expressive. Cor semente #6750a4; derive primária #6750a4, primary-container #eaddff, secondary-container #e8def8, terciária #7d5260, surface #fef7ff, surface-container #f3edf7, surface-container-high #ece6f0, on-surface #1d1b20, outline #79747e. Sem sombras projetadas; a hierarquia vem dos tons de container. Fonte Roboto Flex: display 700 a 57px, headline 500 a 32px, title 500 a 22px, body 400 a 16px, label 500 a 14px. Cards: surface-container com border-radius 28px e padding 24px. Botões: variantes filled (primária, texto branco), tonal (secondary-container), outlined (outline de 1px) e text, todas em forma de pílula (999px) com 40px de altura; um FAB expressivo grande de 56px com raio 16px. Chips como pílulas com gap de 8px. Adicione uma forma expressiva decorativa (um SVG de cookie de 12 pontas em primary-container) atrás do hero. Movimento: mudanças de estado usam cubic-bezier(0.2,0,0,1) a 300ms; o FAB se transforma numa barra de largura total ao pressionar com um overshoot de mola de 450ms.

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

Mantenha estados de hover e focus-visible em todo elemento interativo. Não adicione um framework CSS.