neo-brutalism-ui

Neo-Brutalismo UI

Uma interface ganha confiança ao mostrar sua estrutura abertamente e ser barulhenta sobre isso, porque cada borda e sombra é um fato declarado.

Campos de cores planas e vibrantes com bordas pretas grossas e sombras deslocadas duras e sem desfoque. Cresceu a partir de sites de produtos como Gumroad e de kits da comunidade Figma como uma resposta deliberada à suavidade corporativa.

Período: 2020–presente · Era: Contemporânea & Espacial · Domínio: Design Gráfico & UI · Também chamado: Neubrutalismo, Neobrutalismo, Brutalist Web UI

Quando carregar este skill

Carregue-o quando o usuário pedir: "neo-brutalism", "neubrutalism", "neobrutalist", "brutalist ui", "bordas pretas grossas", "sombra dura", "sombra deslocada", "estilo gumroad", "cores planas vibrantes", "estilo adesivo".

Bom para: produtos da economia criadora, landing pages de SaaS indie, sites de ferramentas para desenvolvedores, portfólios, sites de eventos e festivais.

Não use quando:

• A marca precisa transmitir luxo discreto, cuidados médicos ou segurança bancária.
• A interface é uma ferramenta empresarial densa, porque bordas de 3px e sombras de 4px consomem espaço em cada linha.
• O público espera uma aparência de plataforma nativa, como uma tela de configurações do sistema operacional.

Diretrizes do sistema

Ao gerar layouts de UI ou gráficos no Neo-Brutalismo UI, você DEVE:

1. Desenhar uma borda sólida #000000 de 2px a 4px ao redor de cada cartão, botão, campo de entrada e imagem.
2. Projetar uma sombra dura com zero desfoque, deslocada 4px 4px, por exemplo 4px 4px 0 0 #000000, em cada elemento elevado.
3. Preencher superfícies com cores planas e saturadas a 100% de opacidade e usar de duas a quatro matizes vibrantes em uma página.
4. Ao passar o mouse, mover o elemento pelo deslocamento da sombra e cortar a sombra para 0, para que pareça pressionar a página.
5. Usar apenas raios de 0px a 8px e usar o mesmo valor em todos os elementos de uma página.
6. Definir títulos em uma face grotesca pesada ou monoespaçada com peso 700 ou superior, em tamanhos de 48px a 96px.
7. Manter o texto preto sobre campos de cor e atingir pelo menos 7:1 de contraste em cada preenchimento.

Barreiras de proteção

Cada linha abaixo quebra o estilo. Verifique sua saída contra a lista antes de retorná-la.

• NUNCA: Sombras projetadas desfocadas com raio de desfoque acima de 0px.
• NUNCA: Gradientes cinza sutis ou realces brilhantes em superfícies.
• NUNCA: Preenchimentos pastel e de baixa saturação com texto cinza.
• NUNCA: Bordas finas de 1px ou bordas em uma cor diferente de preto.
• NUNCA: Raios de canto mistos em uma página, como 4px em cartões e 24px em botões.
• NUNCA: Painéis translúcidos ou com desfoque de fundo.
• NUNCA: Pesos de fonte finos abaixo de 500 para títulos.

Perfil vetorial

Eixo	Pontuação	1 significa	5 significa
Ornamentação	■■■□□ 3/5	puro minimalista	maximalista
Dimensionalidade	■■□□□ 2/5	estritamente 2D	totalmente 3D / espacial
Rigidez da grade	■■■□□ 3/5	caótico / orgânico	grade matemática estrita
Realismo esqueuomórfico	■□□□□ 1/5	digital abstrato	material fotorrealista
Expressividade tipográfica	■■■■□ 4/5	neutro / invisível	experimental / ilustrativo

Mantenha essas pontuações. Se uma solicitação mover um eixo em 2 pontos ou mais, você saiu do estilo: vá para "Fallbacks de linhagem".

Lógica espacial e de grade

• Mecânica de grade: Uma grade de 12 colunas com calhas de 24px a 32px e cartões que se sentam em blocos de 2, 3 ou 4 colunas; a sombra deslocada adiciona 4px a 8px de largura visual.
• Proporção de espaço em branco: 25–40% da superfície está aberta; a escala de espaçamento é 8, 16, 24, 32, 48 e 64px, e um cartão tem padding de 24px.
• Regras de alinhamento: Texto alinhado à esquerda; blocos assentam nas bordas da grade com uma ligeira inclinação de 1 a 2 graus permitida apenas em adesivos e crachás; as seções são cortadas por réguas pretas de largura total de 3px.
• Geometria do contêiner: Retângulos com raio de 0px a 8px, borda preta de 3px e sombra 4px 4px 0 0 #000000; pílulas usam raio de 999px apenas para tags.

Tipografia

• Classificações: sem serifa grotesca · monoespaçada · slab serifa
• Tracking: Tamanhos de exibição recebem -0.03em; corpo permanece em 0; rótulos em maiúsculas recebem +0.05em.
• Entrelinha: Exibição 1.0 a 1.1; corpo 1.5; rótulos 1.2.
• Regras de hierarquia:
  • Use peso 700 ou 800 para títulos e 400 ou 500 para corpo; pule os pesos leves.
  • Defina títulos em 48px a 96px e corpo em 16px a 18px, uma proporção de cerca de 3:1 ou superior.
  • Defina botões e rótulos em negrito maiúsculo a 14px com tracking de +0.05em.
  • Coloque a palavra-chave de uma manchete em um bloco de destaque colorido com borda preta de 3px.

Pares de fontes

Exibição	Corpo	Nota
Space Grotesk	DM Sans	Títulos grotescos peculiares sobre uma face de texto simples.
Archivo Black	Work Sans	Fonte pesada estilo pôster para títulos grandes.
Bricolage Grotesque	Inter	Exibição condensada e de alto contraste com corpo neutro.
Space Mono	Space Grotesk	Rótulos monoespaçados para uma voz técnica e crua.

Cor e iluminação

• Estrutura da paleta: Contornos pretos, uma página creme ou amarela levemente quente e de duas a quatro matizes planas vibrantes como rosa, azul e verde, cada uma a 100% de opacidade e usada em grandes blocos.
• Regras de contraste: Texto preto em cada preenchimento vibrante atinge pelo menos 7:1, por exemplo 15:1 em Limão e 7:1 em Azul Elétrico; texto branco é permitido apenas em preenchimentos pretos; a borda preta de 3px dá a cada controle uma borda de 21:1.
• Tratamento de superfície: Campos opacos planos a 100% de opacidade, sem gradiente, sem textura e sem transparência; um padrão opcional de pontos ou grade a 8% de preto no fundo da página.
• Luz e sombra: Nenhuma fonte de luz é simulada; uma sombra dura deslocada de 4px 4px 0 0 #000000 cai para o canto inferior direito com desfoque zero e funciona como uma extensão do contorno.

Paleta

Nome	Hex	Função
Tinta	#000000	bordas, sombras e texto
Creme	#FFF8E7	fundo da página
Limão	#FFE14D	destaque e preenchimento primário
Rosa Choque	#FF5DA2	preenchimento de acento
Azul Elétrico	#4D7CFF	acento secundário
Menta	#6EE7B7	preenchimento de sucesso e tag
Branco	#FFFFFF	superfície do cartão

Materialidade e textura

• Simulação de superfície: Nenhuma; a superfície é papel cortado plano ou estoque de adesivo com um contorno preto e uma gota dura, e não imita nenhum material real.
• Regras de borda: Bordas sólidas #000000 de 2px em controles pequenos, 3px em cartões e 4px em blocos de herói; a cor da borda nunca muda entre estados.
• Desfoque e elevação: Desfoque é 0px em todos os lugares; elevação é o deslocamento da sombra: 2px 2px em tags, 4px 4px em cartões e botões, 8px 8px em modais, todos em #000000.

Ornamentação e iconografia

• Iconografia: Ícones em negrito com traço de 2.5px a 3px e terminações quadradas ou redondas a 24px, em preto, geralmente dentro de um círculo colorido com borda de 2px.
• Ilustração: Ilustração plana na paleta vibrante com contornos pretos grossos, além de adesivos, estrelas e setas; marcas desenhadas à mão são bem-vindas.
• Elementos decorativos: adesivos e crachás · faixas de texto em marquise · explosões de estrelas · fundos de grade de pontos · setas e rabiscos sublinhados

Movimento e interatividade

• Nascido na tela: sim
• Física de transição: Elementos se traduzem exatamente pelo deslocamento da sombra ao passar o mouse e pressionar, de modo que a sombra pareça colapsar; o movimento é curto, linear na sensação e sem ultrapassagem.
• Easing: cubic-bezier(0.2, 0, 0, 1)
• Duração (ms): 120
• Hover e ativo: Hover move o elemento 4px para a direita e 4px para baixo e define a sombra como 0 0 0 0; ativo mantém essa posição; foco adiciona um contorno sólido #4D7CFF de 3px deslocado por 2px.

Primer de código e token

Defina data-style="neo-brutalism-ui" no elemento raiz e cole os tokens. O arquivo tokens.css tem os mesmos tokens e um conjunto de regras de referência.

[data-style="neo-brutalism-ui"] {
  --color-bg: #FFF8E7;
  --color-surface: #FFFFFF;
  --color-text: #000000;
  --color-muted: #3A3A3A;
  --color-primary: #FFE14D;
  --color-accent: #FF5DA2;
  --color-border: #000000;
  --font-sans: "DM Sans", "Work Sans", system-ui, sans-serif;
  --font-display: "Space Grotesk", "DM Sans", system-ui, sans-serif;
  --border-radius: 4px;
  --border-width: 3px;
  --shadow-elevation: 4px 4px 0 0 #000000;
  --backdrop-filter: none;
  --space-unit: 8px;
  --ease: cubic-bezier(0.2, 0, 0, 1);
  --duration: 120ms;
  --shadow-large: 8px 8px 0 0 #000000;
  --accent-blue: #4D7CFF;
  --color-on-bg: #000000;
  --color-on-surface: #000000;
  --color-on-primary: #000000;
  --color-on-accent: #000000;
  --color-muted-on-bg: #3A3A3A;
  --color-muted-on-surface: #3A3A3A;
  --color-link: #000000;
  --color-link-on-surface: #000000;
  --display-weight: 700;
  --subhead-weight: 700;
  --body-weight: 500;
  --strong-weight: 700;
  --label-weight: 700;
  --display-tracking: -0.03em;
  --display-leading: 0.95;
  --display-case: none;
  --body-leading: 1.5;
  --body-size: 17px;
  --icon-stroke: 2.5;
}

Padrões Tailwind:

Elemento	Classes
página	bg-[#FFF8E7] text-black font-sans antialiased p-6 md:p-12
cartão	rounded bg-white p-6 border-[3px] border-black shadow-[4px_4px_0_0_#000000]
botão	rounded border-[3px] border-black bg-[#FFE14D] px-6 py-3 text-sm font-bold uppercase tracking-[0.05em] text-black shadow-[4px_4px_0_0_#000000] transition-all duration-[120ms] hover:translate-x-1 hover:translate-y-1 hover:shadow-none
campo de entrada	rounded border-[3px] border-black bg-white px-4 py-3 text-black shadow-[4px_4px_0_0_#000000] outline-none focus:outline-[3px] focus:outline-offset-2 focus:outline-[#4D7CFF]
título	font-extrabold text-5xl md:text-7xl leading-none tracking-[-0.03em] text-black
tag	inline-block rounded-full border-2 border-black bg-[#6EE7B7] px-3 py-1 text-xs font-bold uppercase shadow-[2px_2px_0_0_#000000]

Pacote visual

As imagens e ícones deste estilo são arquivos. Use-os como estão ou leia-os como uma especificação e desenhe os seus próprios na mesma linguagem.

Arquivo	Conteúdo
pack/hero.svg	Placa de herói, 800 por 600. Uma imagem abstrata na linguagem visual do estilo.
pack/pattern.svg	Ladrilho de padrão, 80 por 80. Ele se repete em ambas as direções.
pack/icons.svg	Sprite de ícones: home, search, heart, star, bell, user, mail, calendar, image, bolt, play, check, close, sliders.

• Ícones: contorno, traço 2.5 em um campo de 24px, terminações quadradas, junções em mitra, contêiner: quadrado. Use: <svg class="icon"><use href="pack/icons.svg#home"/></svg>. Um ícone recebe currentColor.
• Família de ícones: o sprite é cortado do Phosphor (Bold) por Phosphor Icons, licença MIT. Motivo: Uma linha pesada com peso bruto que combina com as bordas grossas. É um substituto de código aberto para uma demonstração. Para um produto, use a biblioteca de ícones da marca e escolha a família pelas regras abaixo.
• Tipo de exibição: peso 700, tracking -0.03em, entrelinha 0.95, caixa: nenhuma.
• Pesos: exibição 700, subtítulo 700, corpo 500, negrito no texto 700, rótulos e botões 700. O estilo usa 2 pesos (500, 700) e nenhum outro. A exibição é 200 mais pesada que o corpo. O acento é o peso: uma palavra mais pesada é o acento, então os degraus entre os pesos são claros.
• Tipo de corpo: 17px, entrelinha 1.5.
• Página: herói dividido, alinhado à esquerda, densidade compacta, inclinação do acento -1°.
• Cor do texto: --color-text é apenas para o campo de leitura principal. Em cada campo, use seu token: --color-on-bg, --color-on-surface, --color-on-primary, --color-on-accent.

Como escolher um pacote de ícones

Um pacote de ícones é um tipo de letra para imagens. Escolha-o com o mesmo cuidado que a face de texto. Essas regras valem para um conjunto de código aberto e para uma biblioteca licenciada.

1. O traço corresponde à haste. Coloque um ícone ao lado do texto do corpo no tamanho do texto. A linha do ícone e a haste de uma letra têm o mesmo peso.
2. Os terminais e cantos seguem o token de raio. Terminações retas e junções em mitra combinam com um raio de zero. Terminações redondas e junções redondas combinam com um raio suave.
3. O modo de preenchimento segue a tecnologia da época. Eras de impressão cortam formas sólidas. Eras de tela com profundidade preenchem e sombreiam a forma. As interfaces de produto atuais desenham um contorno.
4. As metáforas não são mais jovens do que o estilo. Cada imagem é um objeto que a época conhecia. Um ícone com uma metáfora posterior quebra o período.
5. Uma família, uma grade. Todos os ícones vêm de uma família e uma variante, desenhados em um campo. Não misture famílias em uma superfície.
6. A família cobre o produto. Liste cada conceito que o produto precisa antes de se comprometer. Uma família que não tem ícone para um deles é a família errada.
7. A cor é um token. Um ícone recebe currentColor. Um segundo tom vem de um token, não do arquivo.
8. A licença permite o uso. Leia a licença do conjunto. Dê crédito onde a licença pedir. Um produto com uma marca usa sua biblioteca licenciada e aplica as mesmas regras para escolher a família.

Fallbacks de linhagem

Quando o usuário pedir uma variação, não improvise. Mova-se em direção ao vizinho nomeado aqui e carregue seu skill.

• Se o usuário pedir mais calmo: mova-se em direção a flat-design (Flat Design). Corte a borda para 1px, remova a sombra deslocada e mute os preenchimentos para 60% de saturação; mantenha os campos planos e a grade.

• Se o usuário pedir mais ordenado: mova-se em direção a swiss-international (Swiss International Style). Corte a paleta para preto, branco e um vermelho, defina um raio de 0px e texto alinhado à esquerda em uma grade de 12 colunas; mantenha as regras de 2px.

• Se o usuário pedir mais parecido com um aplicativo: mova-se em direção a bento-grid-ui (Bento Grid UI). Embale o conteúdo em uma grade retangular de células de tamanhos mistos com um espaçamento de 16px; mantenha a borda de 3px e a sombra dura.

• Se o usuário pedir mais polido: mova-se em direção a material-design (Material Design). Mude para um raio de 8px, uma borda de 1px e uma sombra suave de 0 2px 4px rgba(0, 0, 0, 0.2); mantenha um aceno vibrante.

• Veio de (vá aqui para uma versão mais ortodoxa): flat-design

• Rejeita (o pólo oposto; não misture): corporate-memphis