# Material 3 Expressive

Também chamado de: Material You, Material Design 3, M3 Expressive, estilo Android 16, cor dinâmica  
Era: 2021 (Material You), 2025 (atualização M3 Expressive)  
Página: https://designforai.dev/pt/style/material-3-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

```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.