Neumorfismo (Soft UI)

"Elementos extrudados do próprio material de fundo, moldados por uma única e persistente fonte de luz."

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. Cor de Superfície Unificada: O fundo e os elementos DEVEM compartilhar exatamente a mesma cor base.
2. Sombras Duplas: Os elementos são moldados por duas sombras: uma sombra clara (realce) no lado voltado para a fonte de luz e uma sombra escura no lado oposto.
3. Sem Bordas: A forma é inteiramente definida pelas sombras.

DNA Visual

• Cores: Funciona melhor com tons médios neutros. Miragem no Deserto, Elegância Enraizada na Terra ou Neutro Sofisticado são perfeitos. Evite branco puro ou preto puro (sombras/realces não aparecerão).
• Tipografia: Fontes sans-serif suaves e arredondadas (por exemplo, Nunito, Quicksand).
• Formas: Formatos de pílula, retângulos arredondados. Cantos afiados quebram a ilusão de material extrudado.

Implementação Web

• A mágica está inteiramente em box-shadow manipulando variantes claras e escuras da cor base.
• Exemplo de CSS:

:root {
  --base-color: #E6E2DD; /* From Sophisticated Neutral */
  --highlight: #ffffff;
  --shadow: #c4c0bc;
}

body {
  background-color: var(--base-color);
}

.neu-element {
  background-color: var(--base-color);
  border-radius: 20px;
  /* Top-left highlight, Bottom-right shadow */
  box-shadow:  9px 9px 18px var(--shadow),
              -9px -9px 18px var(--highlight);
  padding: 32px;
}

.neu-pressed {
  /* Inset shadows for pressed/active state */
  border-radius: 20px;
  background: var(--base-color);
  box-shadow: inset 9px 9px 18px var(--shadow),
              inset -9px -9px 18px var(--highlight);
}

Implementação de Aplicativo

SwiftUI

struct NeuCard: View {
    let baseColor = Color(red: 0.90, green: 0.89, blue: 0.87) // #E6E2DD
    
    var body: some View {
        VStack(spacing: 24) {
            Text("Cartão Neumórfico")
                .font(.system(size: 20, weight: .semibold, design: .rounded))
            
            Text("Extrudado da própria superfície.")
                .font(.system(size: 15, design: .rounded))
                .foregroundColor(.secondary)
        }
        .padding(32)
        .background(baseColor)
        .cornerRadius(20)
        // Sombra clara (superior esquerda)
        .shadow(color: Color.white.opacity(0.7), radius: 10, x: -8, y: -8)
        // Sombra escura (inferior direita)
        .shadow(color: Color.black.opacity(0.15), radius: 10, x: 8, y: 8)
    }
}

// Botão neumórfico pressionado / embutido
struct NeuButton: View {
    @State private var isPressed = false
    let baseColor = Color(red: 0.90, green: 0.89, blue: 0.87)
    
    var body: some View {
        Button(action: {}) {
            Text("Me Pressione")
                .font(.system(size: 16, weight: .semibold, design: .rounded))
                .foregroundColor(.primary)
                .padding(.horizontal, 32)
                .padding(.vertical, 16)
        }
        .background(
            Group {
                if isPressed {
                    // Efeito embutido usando sombra interna (truque ZStack)
                    RoundedRectangle(cornerRadius: 16)
                        .fill(baseColor)
                        .overlay(
                            RoundedRectangle(cornerRadius: 16)
                                .stroke(baseColor, lineWidth: 4)
                                .shadow(color: Color.black.opacity(0.2), radius: 4, x: 4, y: 4)
                                .clipShape(RoundedRectangle(cornerRadius: 16))
                        )
                        .overlay(
                            RoundedRectangle(cornerRadius: 16)
                                .stroke(baseColor, lineWidth: 4)
                                .shadow(color: Color.white.opacity(0.7), radius: 4, x: -4, y: -4)
                                .clipShape(RoundedRectangle(cornerRadius: 16))
                        )
                } else {
                    RoundedRectangle(cornerRadius: 16)
                        .fill(baseColor)
                        .shadow(color: Color.white.opacity(0.7), radius: 10, x: -8, y: -8)
                        .shadow(color: Color.black.opacity(0.15), radius: 10, x: 8, y: 8)
                }
            }
        )
        .buttonStyle(.plain)
        .simultaneousGesture(

…