02.07 — Regras
AS 10 LEIS DO DARK BRUTALIST.
Dez leis. Sem hierarquia entre elas — todas inegociáveis. Violar qualquer uma é sair do sistema. Consulte antes de entregar.
Cantos retos em absolutamente tudo. Botões, cards, imagens, inputs, badges. border-radius: 0 é lei constitucional da marca.
border: 1px solid var(--border) com cantos retos em todos os elementos.
border-radius de qualquer valor, em qualquer elemento, sob qualquer argumento.
O SVG fractalNoise é a pele da marca. Remove a frieza digital. Toda peça — post, site, PDF, slide — precisa da camada de noise sobreposta.
Noise overlay como pseudo-elemento fixo no layout root. Opacidade 4%.
Superfícies planas sem textura. Clean design americano. Aspecto de SaaS.
Gold (#c8a44e) é o acento. Funciona porque é raro. Usado demais, vira pastiche de luxo barato. Máximo 3–10% de qualquer composição.
Gold em 1–2 elementos por composição: um label, uma borda, um dado em destaque.
Fundo dourado, texto dourado em parágrafos, múltiplos elementos dourados simultâneos.
04
DISPLAY SEMPRE UPPERCASE
Bebas Neue e Oswald existem apenas em uppercase. Essa tipografia em caixa baixa perde toda autoridade. Não tem modo de usar diferente.
text-transform: uppercase em qualquer uso de Bebas Neue ou Oswald.
Bebas Neue em lowercase ou title case. Oswald regular sem uppercase.
05
SEM BOX-SHADOW DECORATIVO
Sombras que "flutuam" elementos contradizem o brutalismo. O que está no fundo, está no fundo. Sombra existe só em modais e overlays funcionais.
Bordas 1px sólidas para definir elementos. --shadow-card apenas em modais.
Cards com sombra suave, botões com glow, elementos flutuando com drop-shadow.
06
SEM GRADIENTES VIBRANT ES
Gradiente colorido é o oposto da marca. Se algum gradiente existe, é sempre preto para preto (escurecimento progressivo) ou vignette funcional.
Gradientes escuros: rgba(0,0,0,0) para rgba(0,0,0,0.8). Para funcionalidade.
Gold para preto como fundo. Roxo/azul/rosa em qualquer contexto. Gradientes "técnicos".
Emojis destroem o tom. São infantis, informais, imprecisos. A marca usa linguagem precisa, direta, séria. Phosphor Icons substituem qualquer emoji necessário.
Ícones Phosphor quando necessário marcar visualmente um item. Linguagem sem ornamentos.
Emojis em qualquer canal: posts, copy de site, apresentações, relatórios.
Brutalismo expõe a estrutura em vez de escondê-la. Grids visíveis, bordas explícitas, hierarquia legível de fora para dentro. A arquitetura do design é o design.
Bordas entre elementos, divisões visíveis, grid óbvio, hierarquia tipográfica clara.
Design fluido sem definição, elementos sem borda se misturando ao fundo, falta de grid.
09
CONTRASTE ALTO E INTENCIONAL
Branco puro (#f0ece4) sobre preto profundo (#0a0a0a). Cinzas para hierarquia de informação. Nunca texto cinza claro sobre fundo cinza médio.
Hierarquia: white para principal, gray-200 para secundário, gray-300 para muted.
Texto com contraste insuficiente, gray sobre gray, off-white sobre off-black.
10
MENOS ELEMENTOS, MAIS IMPACTO
A tentação é adicionar mais. A disciplina é cortar. Cada elemento que entra dilui o peso visual. Espaço negativo não é vazio — é pressão visual acumulada.
Uma mensagem central por composição. Elementos de suporte discretos. Silêncio intencional.
Composição cheia, múltiplas mensagens competindo, cada espaço preenchido com algo.
Checklist Rapida — Antes de Entregar
ANTES DE APROVAR QUALQUER PECA
border-radius: 0 em todos os elementos
Noise overlay visivel na composicao
Gold ocupa menos de 10% da area
Display em uppercase (Bebas e Oswald)
Sem box-shadow decorativo
Sem emojis em nenhum texto
Estrutura e grid visiveis, hierarquia clara
Contraste adequado: white/gray sobre preto
Composicao enxuta — removi tudo desnecessario?
