Design Plano

"Superfícies digitais devem parecer digitais. Abrace o plano 2D."

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 se destina a ser acionada diretamente.

Princípios Fundamentais

1. Profundidade Zero: Absolutamente nenhuma sombra projetada, chanfros, gradientes ou efeitos 3D. Tudo fica no mesmo eixo Z.
2. Geometrias Afiadas e Simples: Círculos perfeitos, retângulos afiados. Sem formas orgânicas complexas.
3. Cores Sólidas de Alto Contraste: Confie em contraste acentuado entre blocos de cores sólidas para delinear o espaço.

DNA Visual

• Cores: Combina bem com Industrial Chic ou Modern Editorial. Evite gradientes completamente.
• Tipografia: Fontes sans-serif fortes e altamente legíveis (por exemplo, Roboto, Open Sans). Mantenha em peso médio a negrito.
• Ícones: Ícones de glifo sólidos e monocromáticos, sem detalhes intrincados.

Implementação Web

• Confie inteiramente em cores de fundo e bordas para a estrutura.
• Exemplo de CSS:

.flat-card {
  background-color: var(--secondary-base);
  border: 2px solid var(--primary-text);
  border-radius: 0; /* Sharp corners preferred */
  padding: 32px;
  /* NO box-shadow */
}
.flat-btn {
  background-color: var(--cta-highlight);
  color: #fff;
  border: none;
  padding: 16px 32px;
  font-weight: 700;
  text-transform: uppercase;
  transition: opacity 0.2s;
}
.flat-btn:hover {
  opacity: 0.8; /* Only change opacity or solid color on hover, no lifting */
}

Implementação de Aplicativos

SwiftUI

struct FlatCard: View {
    var body: some View {
        VStack(alignment: .leading, spacing: 16) {
            Text("Card Title")
                .font(.system(size: 18, weight: .bold))
            
            Text("Content without any depth effects.")
                .font(.system(size: 15))
                .foregroundColor(.secondary)
            
            Button(action: {}) {
                Text("ACTION")
                    .font(.system(size: 14, weight: .bold))
                    .foregroundColor(.white)
                    .padding(.horizontal, 24)
                    .padding(.vertical, 12)
                    .background(Color.blue)
                    // No cornerRadius — sharp edges
            }
        }
        .padding(24)
        .background(Color(.secondarySystemBackground))
        // NO .shadow() — ever
        // NO .cornerRadius() — sharp rectangles
        .overlay(
            Rectangle().stroke(Color.primary.opacity(0.2), lineWidth: 1)
        )
    }
}

• Nunca use .shadow() ou .cornerRadius(). Elementos são retângulos planos.
• Use .overlay(Rectangle().stroke(...)) para bordas visíveis em vez de sombras para delinear o espaço.
• Estados de hover/toque devem apenas alterar opacity ou trocar uma cor de fundo sólida.

Flutter

class FlatCard extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      padding: const EdgeInsets.all(24),
      decoration: BoxDecoration(
        color: Colors.grey[100],
        border: Border.all(color: Colors.black26, width: 1),
        // borderRadius: NONE — sharp corners
        // boxShadow: NONE — zero depth
      ),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          const Text('Card Title',
            style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold)),
          const SizedBox(height: 16),
          const Text('Content without any depth effects.',
            style: TextStyle(fontSize: 15, color: Colors.black54)),
          const SizedBox(height: 16),
          ElevatedButton(
            onPressed: () {},
            style: ElevatedButton.styleFrom(
              elevation: 0,           // Critical: no shadow
              backgroundColor: Colors.blue,
              foregroundColor: Colors.white,
              shape: const RoundedRectangleBorder(
                borderRadius: BorderRadius.zero, // Sharp corners
              ),
              padding: const EdgeInsets.symmetric(horizontal: 24, vertical: 12),
            ),
            child: const Text('ACTION',
              style: TextStyle(fontWeight: FontWeight.bold, letterSpacing: 1)),
          ),
        ],
      ),
    );
  }
}

• Substitua ThemeData globalmente para desativar toda a elevação:

  ThemeData(
    cardTheme: const CardTheme(elevation: 0, shape: RoundedRectangleBorder()),
    appBarTheme: const AppBarTheme(elevation: 0),
  

…