Design Plano 2.0 (Semi-Plano)

"Estética plana, mas com toques sutis de física para comunicar interatividade."

Quando Usar

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

Princípios Fundamentais

1. Predominantemente Plano: A estética principal permanece 2D e sólida.
2. Elevação Sutil: Use sombras extremamente suaves e de grande dispersão estritamente para indicar elementos interativos (botões, botões de ação flutuantes) ou camadas (modais).
3. Microgradientes: Gradientes lineares ocasionais, quase imperceptíveis, para evitar que grandes superfícies pareçam "mortas".

DNA Visual

• Cores: Combina bem com Tecnologia Quente ou Elegância Terrena.
• Tipografia: Fontes sans-serif limpas e legíveis.
• Sombras: As sombras devem ter baixa opacidade, alto desfoque e geralmente serem tingidas com a cor de fundo, não preto puro.

Implementação Web

• Exemplo de CSS:

:root {
  --shadow-color: rgba(43, 48, 58, 0.08); /* Tinted shadow */
}

.flat2-card {
  background-color: var(--bg-primary);
  border-radius: 8px;
  padding: 32px;
  /* Very subtle, diffuse shadow */
  box-shadow: 0 10px 30px var(--shadow-color);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.flat2-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 40px rgba(43, 48, 58, 0.12);
}

.flat2-btn {
  background: var(--cta-highlight);
  border-radius: 4px;
  padding: 12px 24px;
  color: white;
  border: none;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

Implementação de Aplicativo

SwiftUI

struct SemiFlatCard: View {
    @State private var isPressed = false
    
    var body: some View {
        VStack(alignment: .leading, spacing: 16) {
            Text("Semi-Flat Card")
                .font(.system(size: 18, weight: .semibold))
            Text("Flat aesthetic with just enough depth to hint at interactivity.")
                .font(.system(size: 15))
                .foregroundColor(.secondary)
        }
        .padding(24)
        .background(Color(.systemBackground))
        .cornerRadius(8)
        // The key: very soft, tinted shadow — NOT harsh black
        .shadow(color: Color.black.opacity(0.06), radius: 12, x: 0, y: 4)
        .scaleEffect(isPressed ? 0.98 : 1.0)
        .animation(.easeOut(duration: 0.2), value: isPressed)
        .onLongPressGesture(minimumDuration: .infinity, pressing: { pressing in
            isPressed = pressing
        }, perform: {})
    }
}

struct SemiFlatButton: View {
    var body: some View {
        Button(action: {}) {
            Text("Continue")
                .font(.system(size: 15, weight: .semibold))
                .foregroundColor(.white)
                .padding(.horizontal, 24)
                .padding(.vertical, 12)
                .background(Color.accentColor)
                .cornerRadius(4)
                // Subtle button shadow
                .shadow(color: Color.accentColor.opacity(0.25), radius: 8, x: 0, y: 4)
        }
        .buttonStyle(.plain)
    }
}

• A cor da sombra deve ser tingida (por exemplo, Color.accentColor.opacity(0.15)), nunca preto puro.
• Use radius: 10...16 com opacity: 0.05...0.08 — se você puder ver a sombra imediatamente, ela está muito pesada.
• Adicione scaleEffect sutis ao pressionar para indicar feedback físico.

Flutter

class SemiFlatCard extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      padding: const EdgeInsets.all(24),
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.circular(8),
        // Sombra muito suave e tingida
        boxShadow: [
          BoxShadow(
            color: const Color(0xFF2B303A).withOpacity(0.08),
            blurRadius: 24,
            offset: const Offset(0, 8),
            spreadRadius: 0,
          ),
        ],
      ),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          const Text('Cartão Semi-Plano',
            style: TextStyle(fontSize: 18, fontWeight: FontWeight.w600)),
          const SizedBox(height: 16),
          const Text('Estética plana com profundidade suficiente para indicar interatividade.',
            style: TextStyle(fontSize: 15, color: Colors.black54)),
          const SizedBox(height: 20),
          ElevatedButton(
            onPressed: () {},
            style: ElevatedButton.styleFrom(

…