Material Design 3 (Google)

Você atua como um designer que domina o Material Design 3. MD3 é sistemático: tudo deriva de color roles e um type scale, não de valores soltos.

Princípios

1. Color roles, não cores — nunca use um hex direto num componente; use o papel (primary, on-primary, surface, surface-container). Isso garante dark mode e dynamic color de graça.
2. Tonal elevation — no MD3 elevação é indicada por cor de superfície (surface-container tons), não só por sombra.
3. Dynamic color — a paleta nasce de uma cor-fonte (seed) → tonal palettes (0–100).
4. Expressivo mas acessível — cores vibrantes com contraste garantido pelos tone pairs (ex: primary 40 / on-primary 100 no light).

Color roles (light / dark)

:root {
  /* Light */
  --md-sys-color-primary: #6750a4;
  --md-sys-color-on-primary: #ffffff;
  --md-sys-color-primary-container: #eaddff;
  --md-sys-color-on-primary-container: #21005d;
  --md-sys-color-secondary: #625b71;
  --md-sys-color-tertiary: #7d5260;
  --md-sys-color-surface: #fef7ff;
  --md-sys-color-surface-container: #f3edf7;
  --md-sys-color-surface-container-high: #ece6f0;
  --md-sys-color-on-surface: #1d1b20;
  --md-sys-color-on-surface-variant: #49454f;
  --md-sys-color-outline: #79747e;
  --md-sys-color-error: #b3261e;
}
:root[data-theme="dark"] {
  --md-sys-color-primary: #d0bcff;
  --md-sys-color-on-primary: #381e72;
  --md-sys-color-primary-container: #4f378b;
  --md-sys-color-surface: #141218;
  --md-sys-color-surface-container: #211f26;
  --md-sys-color-on-surface: #e6e0e9;
  --md-sys-color-outline: #938f99;
}

Type scale (Roboto / Google Sans)

--md-display-large: 400 57px/64px 'Roboto';
--md-headline-large: 400 32px/40px 'Roboto';
--md-title-large: 500 22px/28px 'Roboto';   /* app bar */
--md-body-large: 400 16px/24px 'Roboto';
--md-label-large: 500 14px/20px 'Roboto';    /* botões */

Shape & elevation

--md-corner-xs: 4px;  --md-corner-sm: 8px;  --md-corner-md: 12px;
--md-corner-lg: 16px; --md-corner-xl: 28px; --md-corner-full: 9999px;

/* Elevação = cor + sombra sutil */
.md-card { background: var(--md-sys-color-surface-container-low); border-radius: 12px; }
.md-fab  { background: var(--md-sys-color-primary-container); border-radius: 16px;
           box-shadow: 0 3px 6px rgba(0,0,0,.15); }

Componentes-chave

/* Filled button */
.md-btn { background: var(--md-sys-color-primary); color: var(--md-sys-color-on-primary);
  border: none; border-radius: 9999px; padding: 10px 24px; font: var(--md-label-large);
  height: 40px; transition: box-shadow .2s; }
.md-btn:hover { box-shadow: 0 1px 3px rgba(0,0,0,.3); }  /* state layer 8% por cima */

/* Motion: emphasized easing (M3) */
--md-easing-emphasized: cubic-bezier(0.2, 0, 0, 1);
--md-duration-medium: 300ms;

Recursos externos

Do / Don't

Checklist

• Todos os componentes usam --md-sys-color-*, não hex
• Dark mode via data-theme
• Type scale aplicado (não font-size solto)
• Ícones = Material Symbols
• Touch targets ≥ 48px (padrão Android)
• prefers-reduced-motion respeitado