Tipografia Brutalista

"Agressivo, sem polimento e sem desculpas. Texto que exige atenção ao quebrar as regras."

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. Quebra de Regras: Texto que se sobrepõe, ignora margens ou é deliberadamente cortado na borda da tela.
2. Anti-Design: Uso intencional de fontes do sistema ou fontes "feias" (Times New Roman, Courier) em tamanhos massivos.
3. Contraste Agressivo: Cores conflitantes ou monocromático marcante.

DNA Visual

• Cores: Chique Industrial (Preto, Branco, Vermelho) ou neon agressivo em conflito (por exemplo, azul puro sobre vermelho puro).
• Tipografia: Fontes padrão do sistema (Times New Roman, Arial, Courier New) ampliadas para 150px.
• Estilização: Marquees, texto piscando, sublinhados que cortam os descendentes.

Implementação Web

• Quebre a grade. Use posicionamento absoluto ou margens negativas.
• Exemplo de CSS:

body {
  background-color: #fff;
  color: #000;
  font-family: 'Times New Roman', serif;
}

.brutalist-headline {
  font-size: 15vw;
  line-height: 0.7;
  letter-spacing: -5px;
  margin-left: -10px; /* Bleeds off screen intentionally */
  word-wrap: break-word; /* Let words break awkwardly */
}

.brutalist-highlight {
  background-color: #ff0000;
  color: #fff;
  padding: 0 10px;
}

.marquee-container {
  border-top: 5px solid #000;
  border-bottom: 5px solid #000;
  overflow: hidden;
  white-space: nowrap;
  font-family: 'Courier New', monospace;
  font-size: 2rem;
  font-weight: bold;
  padding: 10px 0;
}

/* A nod to early 90s web */
.brutalist-link {
  color: #0000ee;
  text-decoration: underline;
  text-transform: uppercase;
}
.brutalist-link:hover {
  background-color: #0000ee;
  color: #fff;
}

Implementação de Aplicativo

SwiftUI

struct BrutalistTypeView: View {
    var body: some View {
        ScrollView {
            VStack(alignment: .leading, spacing: -20) {
                // Bleeds off the edge intentionally
                Text("BREAK")
                    .font(.custom("Times New Roman", size: 120))
                    .padding(.leading, -20) 
                
                Text("THE")
                    .font(.custom("Arial", size: 140))
                    .fontWeight(.black)
                    .foregroundColor(.clear)
                    .overlay(
                        Text("THE").stroke(Color.red, lineWidth: 3)
                    )
                    .offset(x: 40)
                
                Text("GRID.")
                    .font(.custom("Courier New", size: 100))
                    .background(Color.blue)
                    .foregroundColor(.white)
                    .rotationEffect(.degrees(-5))
                    .offset(y: -40)
            }
            .frame(maxWidth: .infinity, alignment: .leading)
            .padding(.top, 50)
        }
        .ignoresSafeArea() // Critical for Brutalist type
        .background(Color.white)
    }
}

• .ignoresSafeArea() é obrigatório. O texto deve ter permissão para ser cortado na área do notch e na barra de status.
• Use spacing negativo em VStack ou .offset() negativo explícito para forçar os elementos de texto a se sobreporem agressivamente.
• O texto com contorno é obtido definindo .foregroundColor(.clear) e sobrepondo um .stroke().

Flutter

class BrutalistTypeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // Scaffold sem SafeArea
    return Scaffold(
      backgroundColor: Colors.white,
      body: Stack(
        children: [
          Positioned(
            top: -20,
            left: -20,
            child: const Text(
              'BREAK',
              style: TextStyle(
                fontFamily: 'Times New Roman',
                fontSize: 150,
                height: 0.8, // Espaçamento de linha negativo
                color: Colors.black,
              ),
            ),
          ),
          Positioned(
            top: 100,
            left: 40,
            child: Text(
              'THE',
              style: TextStyle(
                fontFamily: 'Arial',
                fontSize: 140,
                fontWeight: FontWeight.w900,
                foreground: Paint()
                  ..style = PaintingStyle.stroke
                  ..strokeWidth = 3
                  ..color = Colors.red,
              ),
            ),
          ),
          Positioned(

…