Brutalismo

"Materiais brutos expostos. Uma rejeição intencional de polimento, gradientes e sombras suaves."

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. Componentes Sem Estilo: A estilização padrão do navegador para botões, campos de entrada e links é celebrada.
2. Estrutura Exposta: Linhas de grade, tabelas com bordas visíveis e limites marcados são usados em vez de espaços em branco para separar o conteúdo.
3. Anti-Estética: Estranheza intencional. Elementos podem se sobrepor ligeiramente de uma forma que pareça quebrada, ou usar fontes padrão do sistema.

DNA Visual

• Cores: Alto contraste, frequentemente conflitantes. Azul puro #0000FF para links, vermelho #FF0000 para acentos, em fundos brancos puros ou cinza #C0C0C0. A paleta Industrial Chic se encaixa melhor.
• Tipografia: Courier New, Times New Roman, Comic Sans ou fontes sans-serif padrão. Sem fontes web.
• Visuais: Imagens com dithering, gráficos pixelados ou JPEGs fortemente comprimidos.

Implementação Web

• Use tags HTML padrão sem substituir sua aparência padrão sempre que possível.
• Exemplo de CSS:

body {
  background-color: #ffffff;
  color: #000000;
  font-family: monospace;
}

/* Expose the structure */
.brutalist-container {
  border: 1px solid #000;
  padding: 10px;
}

.brutalist-section {
  border-bottom: 2px dashed #000;
  margin-bottom: 20px;
  padding-bottom: 20px;
}

/* Default-looking button but massive */
.brutalist-btn {
  background-color: #c0c0c0;
  border: 2px outset #ffffff;
  border-right-color: #000000;
  border-bottom-color: #000000;
  color: #000000;
  font-family: sans-serif;
  font-size: 24px;
  padding: 10px 20px;
  cursor: pointer;
}

.brutalist-btn:active {
  border-style: inset;
}

/* System link blue */
a {
  color: #0000FF;
  text-decoration: underline;
}

Implementação de Aplicativo

SwiftUI

struct BrutalistView: View {
    var body: some View {
        VStack(alignment: .leading, spacing: 0) {
            Text("BRUTALISM")
                .font(.custom("Courier New", size: 32))
                .foregroundColor(.black)
                .padding(10)
                .border(Color.black, width: 2)
            
            Divider().background(Color.black).padding(.vertical, 20)
            
            Button(action: {}) {
                Text("CLICK_HERE")
                    .font(.custom("Courier New", size: 24))
                    .foregroundColor(.blue)
                    .underline()
            }
            .padding(10)
            
            // Raw structural container
            VStack(alignment: .leading) {
                Text("System Status: RAW").font(.custom("Courier New", size: 14))
            }
            .padding()
            .border(Color.black, width: 1)
        }
        .padding()
        .frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .topLeading)
        .background(Color.white)
    }
}

• Evite todos os componentes nativos ButtonStyle. Use Text com .underline() mapeado para o azul do sistema.
• Use .border(Color.black, width: 1) em vez de fundos ou sombras.
• Force fontes monoespaçadas como Courier New ou Menlo.

Flutter

class BrutalistScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // NÃO use o tema MaterialApp ou Scaffold, se possível,
    // ou remova-os completamente.
    return Scaffold(
      backgroundColor: Colors.white,
      body: SafeArea(
        child: Padding(
          padding: const EdgeInsets.all(16.0),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Container(
                padding: const EdgeInsets.all(8),
                decoration: BoxDecoration(
                  border: Border.all(color: Colors.black, width: 2),
                ),
                child: const Text(
                  'BRUTALISM',
                  style: TextStyle(
                    fontFamily: 'Courier',
                    fontSize: 32,
                    color: Colors.black,
                  ),
                ),
              ),
              const Padding(
                padding: EdgeInsets.symmetric(vertical: 20),
                child: Divider(color: Colors.black, thickness: 2),
              ),
              GestureDetector(
                onTap: () {},
                child: const Text(

…