Neo-Brutalismo

"Brutalismo, mas com um toque especial. Linhas fortes, sombras marcadas e cores vibrantes, sem rodeios."

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. Sombras Duras: Sombras pretas sólidas, sem desfoque. Geralmente deslocadas alguns pixels para baixo e para a direita.
2. Contornos Grossos: Tudo tem uma borda preta pesada e sólida (geralmente de 2px a 4px).
3. Cores Planas e de Alto Contraste: Tons pastel vibrantes e saturados ou cores primárias contrastando com branco puro ou preto.

DNA Visual

• Cores: Comece com um fundo off-white (como #FDF8F5), adicione contornos pretos marcados #000000 e use acentos saturados como amarelo limão, ciano brilhante ou coral.
• Tipografia: Fontes sans-serif geométricas muito ousadas (por exemplo, Space Grotesk, Archivo Black, Inter Black).
• Formas: Retângulos afiados ou formas de pílula completamente arredondadas, mas sempre com um traço pesado.

Implementação Web

• A característica definidora é a box-shadow com desfoque 0.
• Exemplo de CSS:

:root {
  --neo-border: 3px solid #000000;
  --neo-shadow: 6px 6px 0px #000000;
  --neo-bg: #F4F4F0;
  --neo-accent: #FF3366;
}

body {
  background-color: var(--neo-bg);
  font-family: 'Space Grotesk', sans-serif;
}

.neo-card {
  background-color: #ffffff;
  border: var(--neo-border);
  box-shadow: var(--neo-shadow);
  border-radius: 8px; /* Optional, sharp is fine too */
  padding: 32px;
  transition: transform 0.1s, box-shadow 0.1s;
}

.neo-btn {
  background-color: var(--neo-accent);
  color: #000;
  font-weight: 800;
  text-transform: uppercase;
  border: var(--neo-border);
  box-shadow: 4px 4px 0px #000000;
  padding: 16px 32px;
  cursor: pointer;
  transition: all 0.1s ease;
}

.neo-btn:active {
  /* The "press" effect is removing the shadow and moving it down */
  transform: translate(4px, 4px);
  box-shadow: 0px 0px 0px #000000;
}

Implementação de Aplicativo

SwiftUI

struct NeoCard: View {
    @State private var isPressed = false
    let neoBorder: CGFloat = 3
    let neoShadow: CGFloat = 6
    
    var body: some View {
        Button(action: {}) {
            VStack(alignment: .leading, spacing: 16) {
                Text("NEO-BRUTALISM")
                    .font(.system(size: 24, weight: .black, design: .default))
                    .foregroundColor(.black)
                Text("Stark shadows, bright colors.")
                    .font(.system(size: 16, weight: .bold))
                    .foregroundColor(.black)
            }
            .padding(24)
            .frame(maxWidth: .infinity, alignment: .leading)
            .background(Color(red: 1.0, green: 0.2, blue: 0.4)) // Bright Coral
            // Neo-brutalist solid outline
            .overlay(
                Rectangle()
                    .stroke(Color.black, lineWidth: neoBorder)
            )
        }
        .buttonStyle(.plain)
        // Hard drop shadow (0 blur)
        .shadow(color: .black, radius: 0, x: isPressed ? 0 : neoShadow, y: isPressed ? 0 : neoShadow)
        // Translate the button physically when pressed to cover the shadow
        .offset(x: isPressed ? neoShadow : 0, y: isPressed ? neoShadow : 0)
        .simultaneousGesture(
            DragGesture(minimumDistance: 0)
                .onChanged { _ in isPressed = true }
                .onEnded { _ in isPressed = false }
        )
        // Instant pop, no smooth animation
        .animation(.none, value: isPressed)
    }
}

• .shadow(radius: 0) é o segredo. Defina um deslocamento (por exemplo, x: 6, y: 6).
• Para interações, remova a sombra e traduza o elemento pelas mesmas quantidades de deslocamento usando .offset().
• Garanta .animation(.none) — as interações Neo-brutalistas devem ser instantâneas, travando como interruptores físicos.

Flutter

class NeoCard extends StatefulWidget {
  @override
  State<NeoCard> createState() => _NeoCardState();
}

class _NeoCardState extends State<NeoCard> {
  bool _isPressed = false;
  final double neoOffset = 6.0;

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTapDown: (_) => setState(() => _isPressed = true),
      onTapUp: (_) => setState(() => _isPressed = false),
      onTapCancel: () => setState(() => _isPressed = false),
      child: Transform.translate(
        // Move o container quando pressionado

…