Design for AIEstilo Neobrutalismo: prompt de design de UI
Paleta, regras de tipografia e um prompt pronto para colar de neobrutalismo. Também chamado de neubrutalism, web neobrutalista, estilo Gumroad, UI de bordas grossas. 2021-2024 (o redesign da Gumroad em 2021 popularizou).
Traços
- bordas pretas grossas (2-4px) em tudo, sombras deslocadas duras (sem blur)
- cores chapadas e saturadas: amarelo, rosa, lima, azul-céu, sobre creme ou branco
- raio zero ou um minúsculo 4-6px; os elementos parecem adesivos
- tipografia grotesca grande e bold, às vezes misturada com uma mono para labels
- desalinhamento deliberado, adesivos rotacionados, faixas marquee
- interações físicas: o botão entra na própria sombra quando pressionado
- alto contraste, barulhento, mais lúdico do que cru
Paleta
#fffdf5 página, #000000 bordas e texto, #ffde59 primária, #ff6b9d secundária, #9ef01a terciária, #4d9fff info
Tipografia
Space Grotesk ou Archivo Black para títulos, Work Sans ou IBM Plex Sans para o corpo, Space Mono para tags; títulos 800 a 40-72px, corpo 400-500 a 16-18px
Faça
- use uma única regra de sombra em tudo: 4px 4px 0 #000, 6px no hover, 0 no active com o translate correspondente
- mantenha pelo menos três cores berrantes e use-as em saturação total
- faça bordas e texto no mesmo preto para a página ler como um único desenho
Evite
- não use gradientes, blur nem sombras suaves; só arestas duras
- não vá para o pastel; o estilo precisa de soco
- não adicione bordas sutis de 1px; ou grossas ou nenhuma
Conhecido por: Gumroad, arquivos da comunidade Figma, Poolsuite, drops da Mschf
Semente CSS
:root {
--bg: #fffdf5;
--fg: #000000;
--accent: #ffde59;
--accent2: #ff6b9d;
--radius: 4px;
--border: 3px solid #000;
--shadow: 4px 4px 0 #000;
--font: 'Space Grotesk',sans-serif
}
Prompt
Construa o site em estilo neobrutalista. Fundo da página #fffdf5, todo o texto e bordas #000000. Cada card, botão, input e item de nav recebe border 3px solid #000, border-radius 4px, box-shadow 4px 4px 0 #000. Blocos de cor: primária #ffde59, secundária #ff6b9d, terciária #9ef01a, info #4d9fff, aplicadas como preenchimentos sólidos em botões, tags e fundos de seção. Fontes: Space Grotesk 800 para títulos a 72/48/32px com line-height apertado 1.05, Work Sans 500 para o corpo a 18px, Space Mono para labels em caixa alta. Sem gradientes, sem blur, sem efeitos de opacidade. Rotacione umas duas tags decorativas em -3deg e 2deg. Hover: a sombra vira 6px 6px 0 #000 e o elemento se move -2px/-2px; active: sombra 0 e o elemento se move +4px/+4px, 100ms linear. Espaçamento robusto: gaps de 24px, padding dos cards 32px, 120px entre seções.
Para design.md, .cursorrules ou AGENTS.md
## Direção de design
Construa o site em estilo neobrutalista. Fundo da página #fffdf5, todo o texto e bordas #000000. Cada card, botão, input e item de nav recebe border 3px solid #000, border-radius 4px, box-shadow 4px 4px 0 #000. Blocos de cor: primária #ffde59, secundária #ff6b9d, terciária #9ef01a, info #4d9fff, aplicadas como preenchimentos sólidos em botões, tags e fundos de seção. Fontes: Space Grotesk 800 para títulos a 72/48/32px com line-height apertado 1.05, Work Sans 500 para o corpo a 18px, Space Mono para labels em caixa alta. Sem gradientes, sem blur, sem efeitos de opacidade. Rotacione umas duas tags decorativas em -3deg e 2deg. Hover: a sombra vira 6px 6px 0 #000 e o elemento se move -2px/-2px; active: sombra 0 e o elemento se move +4px/+4px, 100ms linear. Espaçamento robusto: gaps de 24px, padding dos cards 32px, 120px entre seções.
## Tokens
:root { --bg:#fffdf5; --fg:#000000; --accent:#ffde59; --accent2:#ff6b9d; --radius:4px; --border:3px solid #000; --shadow:4px 4px 0 #000; --font:'Space Grotesk',sans-serif }
Mantenha estados de hover e focus-visible em todo elemento interativo. Não adicione um framework CSS.