Material Design

"Papel digital e tinta. Interfaces construídas sobre as propriedades físicas de materiais empilhados."

Quando Usar

Use este subestilo quando a solicitação do usuário corresponder à estética descrita acima. Esta é uma referência filha da habilidade design-it e não deve ser acionada diretamente.

Princípios Fundamentais

1. Elevação no Eixo Z: Tudo existe em uma camada específica. Sombras comunicam hierarquia e estado.
2. Movimento Significativo: Animações são contínuas, guiando o foco do usuário de um estado para o próximo (por exemplo, efeitos de ondulação, transições de elementos compartilhados).
3. Layout Estruturado: Aderência rigorosa a uma grade base de 8dp e anatomias de componentes específicas (cards, FABs, barras de aplicativos).

DNA Visual

• Cores: Funciona excelentemente com Desert Mirage ou Minimalist Slate. Utilize mapeamento semântico de cores primárias, secundárias, de superfície e de erro.
• Tipografia: Roboto ou Google Sans (ou sans-serif geométricas limpas equivalentes). Siga estritamente a Escala de Tipografia Material (H1-H6, Subtítulo, Corpo, Legenda, Sobretexto).
• Formas: Cantos moderadamente arredondados (4px a 16px).

Implementação Web

• Não reinvente a roda: imite as elevações padrão do Material.
• Exemplo de CSS:

.material-card {
  background: var(--bg-surface);
  border-radius: 8px;
  padding: 16px;
  /* Material Elevation 2 */
  box-shadow: 0 3px 1px -2px rgba(0,0,0,0.2), 
              0 2px 2px 0 rgba(0,0,0,0.14), 
              0 1px 5px 0 rgba(0,0,0,0.12);
  transition: box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}

.material-btn {
  text-transform: uppercase;
  font-weight: 500;
  letter-spacing: 1.25px;
  padding: 0 16px;
  height: 36px;
  border-radius: 4px;
  background: var(--cta-highlight);
  color: #fff;
  border: none;
  /* Ripple effect is usually handled via JS, but structure is key */
}

Implementação de Aplicativo

SwiftUI

struct MaterialCard: View {
    var body: some View {
        VStack(alignment: .leading, spacing: 12) {
            Text("Material Card")
                .font(.system(size: 20, weight: .medium))
            Text("Digital paper and ink. Shadows communicate where this surface sits.")
                .font(.system(size: 14))
                .foregroundColor(.secondary)
            HStack {
                Spacer()
                Button("ACTION") {}
                    .font(.system(size: 14, weight: .medium))
                    .foregroundColor(.accentColor)
                    .padding(.horizontal, 12)
                    .padding(.vertical, 8)
            }
        }
        .padding(16)
        .background(Color(.systemBackground))
        .cornerRadius(8)
        // Material Elevation 2 equivalent
        .shadow(color: Color.black.opacity(0.12), radius: 3, x: 0, y: 1)
        .shadow(color: Color.black.opacity(0.08), radius: 2, x: 0, y: 2)
    }
}

// Material FAB
struct MaterialFAB: View {
    var body: some View {
        Button(action: {}) {
            Image(systemName: "plus")
                .font(.system(size: 24))
                .foregroundColor(.white)
                .frame(width: 56, height: 56)
                .background(Color.accentColor)
                .cornerRadius(16)
                .shadow(color: Color.black.opacity(0.2), radius: 6, x: 0, y: 3)
                .shadow(color: Color.black.opacity(0.14), radius: 4, x: 0, y: 2)
        }
    }
}

• Emule os níveis de elevação do Material empilhando múltiplos modificadores .shadow() com diferentes valores de desfoque/deslocamento.
• Use .cornerRadius(8...16) — o Material Design 3 usa formas mais arredondadas do que o M2.
• Anime as mudanças de sombra usando .animation(.easeInOut(duration: 0.28)) — o Material usa transições de 280ms.

Flutter

// Flutter JÁ É Material Design — use nativamente
class MaterialScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        useMaterial3: true,
        colorSchemeSeed: const Color(0xFF6750A4), // Semente do Material You
        // Mapeie sua paleta universal aqui
      ),
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Material Design'),
          // A elevação da barra de aplicativos M3 é 0 por padrão, ao rolar = 3
        ),
        body: Padding(
          padding: const EdgeInsets.all(16),
          child: Card(
            elevation: 2,
            shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(12)),
            child: Padding(
              padding: const EdgeInsets.all(16),

…