kennedys0/taste-style-neo-brutalism

Use este skill apenas depois que um usuário escolher explicitamente ou uma configuração de projeto confirmada o especificar. Para solicitações de UI novas não explicadas, use um seletor de estilo como, em vez de decidir o gosto do usuário aqui. Marca existente, acessibilidade e substituições do usuário têm precedência sobre todos os exemplos abaixo. O seguinte guia de estilo não é permissão para começar a codificar UI antes da seleção de estilo.

Pacote de estilo: Neo-brutalismo

ID: neo-brutalism
Assinatura: Cores vibrantes e ousadas, bordas pretas de alto contraste, sombras duras e sem desfoque com deslocamento, e feedback mecânico tátil ao pressionar.

Este é um pacote de estilo, não um padrão obrigatório. Carregue-o apenas após seleção explícita ou estilo de projeto aplicável confirmado. Instruções do projeto podem substituir escolhas individuais. Preserve acessibilidade, utilidade e restrições de marca. Fontes são sugestões, não dependências obrigatórias. Um cartão plano com cantos arredondados e uma sombra suave e desfocada não se qualifica como Neo-brutalismo.

Boa adequação / compensações

• Funciona bem para: Ferramentas de criação, B2B SaaS lúdico, portais de desenvolvedores modernos, plataformas de hackathon/eventos, sites de produtos independentes e páginas de marketing que exigem personalidade inconfundível.
• Cuidado com: Relatórios financeiros formais ou fluxos de trabalho jurídicos empresariais, a menos que especificamente marcados para um público energético e não tradicional.
• Direções de referência:
  • Light Pop Canvas: Base de papel creme ou papel quente (#FFFDF7 / #F4F0EA) com traços pretos de alto contraste (#121212), preenchimentos de destaque elétricos (amarelo vivo #FFDE59, ciano vibrante #4DEEEA, coral #FF5E5B) e sombras nítidas e sem desfoque (5px 5px 0 #121212).
  • Dark Pop Contrast: Tela de tinta escura (#18181B) com bordas brancas fortes (2.5px solid #FAFAFA), destaques em limão/violeta vivos e sombras deslocadas brancas/de destaque (4px 4px 0 #FAFAFA).

Portão de fidelidade de material neo-brutalista — obrigatório

Antes de considerar uma página neo-brutalista completa, a viewport de abertura deve ser visivelmente lida como uma composição neo-brutalista autêntica. Se um usuário escolheu este estilo, um cartão genérico com raio de borda sutil e sombra desfocada padrão é uma FALHA, mesmo que as classes CSS contenham neo.

Uma implementação neo-brutalista bem-sucedida demonstra todos os seguintes itens:

1. Contornos Sólidos de Alto Contraste: Contêineres principais, botões acionáveis, inputs e emblemas apresentam bordas sólidas nítidas (2px–3px solid #121212). Sem traços finos cinza claros.
2. Sombras Duras sem Desfoque com Deslocamento: As superfícies projetam sombras nítidas e direcionais com 0 de desfoque (4px 4px 0 #121212 para controles, 6px 6px 0 #121212 a 8px 8px 0 #121212 para cartões). Uma sombra suave e desfocada é uma falha direta.
3. Colapso Mecânico ao Pressionar: Em :active ou clique, botões interativos afundam fisicamente ao longo do eixo da sombra (transform: translate(2px, 2px); box-shadow: 2px 2px 0 #121212;), fornecendo feedback mecânico tátil inconfundível.
4. Blocos de Cor Vibrantes e Intencionais: Uma paleta equilibrada de alto contraste: 1 base de tela + 1 cor de tinta forte + 1–2 destaques saturados propositais usados para ações primárias e agrupamento semântico.
5. Estrutura Tipográfica Assimétrica e Ousada: Tipografia grotesk ou geométrica confiante com alturas de linha apertadas e contraste claro entre títulos de exibição massivos e texto do corpo legível.

Teste de primeira viewport: Em uma captura de tela de desktop, identifique os contornos pretos grossos, as sombras deslocadas duras sem desfoque e os estados de botão táteis sem ler o título da página. Se parecer com um layout SaaS plano padrão, revise os tokens de borda e sombra antes de prosseguir.

Exceção de sombra dura neo-brutalista explícita — sombras podem ser nítidas

Substituição específica do neo-brutalismo: A precaução universal anti-sujeira contra decoração excessiva ou sombras distractivas NÃO DEVE ser interpretada como uma proibição de sombras deslocadas duras ou contornos pretos aqui. Estas são propriedades de habilitação de material, essenciais para a física neo-brutalista e clareza visual.

• Tratamentos de material permitidos: Sombras sólidas deslocadas sem desfoque (4px 4px 0 #000), bordas pretas de 2–3px, rotações de emblemas (entre -2° e +2° apenas para emblemas) e pílulas de cor de alto contraste.
• Disciplina de contraste de cor: Todo texto colocado em fundos de destaque vibrantes (amarelo, ciano, limão, coral) deve ser testado contra tinta preta (#121212) para exceder WCAG AA (4.5:1). Texto branco puro é estritamente reservado para preenchimentos de tinta escura.
• Interpretação anti-sujeira: Avalie elementos neo-brutalistas por affordance, estrutura de layout e legibilidade, não contando sombras duras. Remover sombras deslocadas duras para satisfazer uma heurística mínima genérica é uma regressão de design.

Tipografia e escrita

Sans-serif grotesk expressivo e confiante: Space Grotesk, Archivo, Syne ou sans-serif do sistema. Títulos 36–56 px desktop / 28–40 px mobile; peso 700–800. Texto do corpo 15–17 px, peso 400–500; line-height 1.45–1.55. Índices de seção e metadados podem usar caixa alta com espaçamento (letter-spacing: 0.05em). Microcopy contundente e humano sem slogans vazios.

Direção de cor

• Modo Claro (Punchy Pop Light):
  • Base da Tela: Off-white / creme claro (#FFFDF7 ou #F7F5F0).
  • Fundo do Cartão: Branco puro (#FFFFFF) ou bloco levemente matizado.
  • Tinta / Traço: Preto jato (#121212).
  • Sombras Deslocadas: Preto sólido (4px 4px 0 #121212).
• Modo Escuro (Dark Pop Contrast):
  • Base da Tela: Tela de tinta escura (#18181B).
  • Fundo do Cartão: Carvão escuro elevado (#222227) ou ardósia escura (#27272A).
  • Tinta / Traço: Branco / creme forte (#FAFAFA).
  • Sombras Deslocadas: Branco forte ou destaque vivo (4px 4px 0 #FAFAFA ou 4px 4px 0 var(--taste-neo-accent-primary)).
• Destaque Primário: Cor pop viva (ex. Amarelo Elétrico #FFE600, Coral Quente #FF5757 ou Cobalto Real #3B5BFF).
• Destaque Secundário: Contraste complementar (ex. Menta Nítida #00F0A8 ou Lilás Pop #D8B4FE).
• Acoplamento de Tema e Regra Anti-Colisão: No modo escuro, bordas e sombras deslocadas DEVEM mudar para claro/branco ou destaques brilhantes. Deixar bordas pretas e sombras pretas em uma tela escura causa perda total de profundidade e contraste (preto no preto). Todo texto em fundos de destaque vibrantes (amarelo, ciano, limão, coral) deve ser testado contra tinta preta (#121212) para exceder WCAG AA (4.5:1). Texto branco puro é estritamente reservado para preenchimentos de tinta escura.

Layout e geometria

Cantos são quadrados ou sutilmente arredondados (0px–8px máx.); padding generoso (20px–32px em cartões); bordas sólidas de 2px–3px; sombras deslocadas duras de 4px–8px. Espaçamento usa uma grade firme de 8px. O layout deve parecer fundamentado, contundente e confiante.

Superfícies, profundidade, textura

As superfícies são limpas, opacas e sólidas:

• Botões (Elevados): background: var(--taste-neo-accent); border: 2.5px solid #121212; box-shadow: 4px 4px 0 #121212;
• Botões (Ativo/Pressionado): transform: translate(2px, 2px); box-shadow: 2px 2px 0 #121212;
• Cartões e Painéis: background: #FFFFFF; border: 2.5px solid #121212; box-shadow: 6px 6px 0 #121212;
• Campos de Input: background: #FFFFFF; border: 2.5px solid #121212; box-shadow: 3px 3px 0 #121212; (aperta no foco).

Anatomia do componente e interação

• Ação Primária (CTA): Pílula/retângulo colorido e ousado com sombra deslocada dura, traço grosso e depressão tátil ao clicar.
• Ação Secundária: Preenchimento branco ou transparente com borda preta, efeito hover invertido (background: #121212; color: #FFFFFF;).
• Controles de Formulário: Caixa de input delineada com rótulo nítido, estado de foco distinto com brilho de deslocamento colorido ou traço aprofundado.
• Emblemas / Tags de Status: Pílula de alto contraste com traço de 2px, sombra deslocada sutil de 2px e rótulo curto e concreto.
• Cartões: Linhas divisórias nítidas (border-bottom: 2px solid #121212) separando cabeçalho, corpo e rodapé de ação.

Movimento

Transições lineares ou ease-out nítidas de 100–160 ms. Deslocamento direto de 1–2 px ao pressionar. Nunca use molas longas e saltitantes, loops flutuantes ou oscilações de desenho animado.

Receita opcional Anime.js v4

• Decisão de movimento: Mudança curta e direta de botão de 1–2 px com uma resposta de sombra dura correspondente; nunca anime sombras gigantes.
• Duração inicial: 130ms (0 = imediato); ajuste à tarefa e preferência do usuário.
• Evitar: bounce e adesivos que se movem infinitamente.
• Dependência: CSS/nativo por padrão. Use Anime.js v4 apenas se a interação solicitada justificar. Siga references/motion-engine.md do Taste Engine quando disponível; skill autônomo segue os princípios de movimento reduzido e sem loop decorativo acima.

Escrita de UI e microcopy

Energético, direto e franco. Exemplos: “Começar a construir”, “Obter código”, “Copiado para a área de transferência”. Evite jargão corporativo ou texto de meme fofo em ferramentas de produção.

Tokens iniciais (sugestões, não um tema completo)

Token	Padrão modo claro	Padrão modo escuro
--taste-neo-bg	#fffdf7	#18181b
--taste-neo-card-bg	#ffffff	#222227
--taste-neo-ink	#121212	#fafafa
--taste-neo-border	2.5px solid #121212	2.5px solid #fafafa
--taste-neo-shadow-sm	3px 3px 0 #121212	3px 3px 0 #fafafa
--taste-neo-shadow-md	5px 5px 0 #121212	5px 5px 0 #fafafa
--taste-neo-shadow-lg	8px 8px 0 #121212	8px 8px 0 #fafafa
--taste-neo-accent-primary	#ffe600	#ffe600
--taste-neo-accent-secondary	#ff5757	#ff5757
--taste-neo-radius	6px	6px
--taste-neo-font-body	Space Grotesk, Archivo, system-ui, sans-serif	Space Grotesk, Archivo, system-ui, sans-serif
--taste-neo-motion-duration	130ms	130ms

Os tokens representam uma direção e não são garantidos de copiar e colar para cada paleta/plataforma. Defina --taste-neo-* no nível do projeto, garanta contraste de cor e adapte por meio de tokens de tema em vez de espalhar valores literais.

Composição de herói (viewport completa inicial)

Quando um portfólio/landing page/página inicial voltada ao público tiver um herói: use uma composição de cabeçalho+herói de uma tela visível. Altura base em min-height: 100svh com fallback 100vh, subtraindo o cabeçalho real apenas quando ele está no fluxo normal; deixe o herói expandir para acessibilidade e telas mobile curtas. Não aplique isso a painéis privados ou outras telas de tarefa; substituições diretas do usuário vencem. Direção específica do estilo: Torne a viewport completa energética por meio de blocos assimétricos ousados, tipografia de exibição bem fundamentada e uma ação primária de alto contraste. Bordas grossas e sombras deslocadas permanecem intencionais; não empilhe adesivos, caixas extras delineadas ou ornamentos giratórios para preencher a tela. Veja o roteador references/hero-layout.md quando presente. O uso autônomo segue os mesmos princípios responsivos e anti-sujeira.

Portão de qualidade específico do estilo

• Faça: Verifique sombras deslocadas duras sem desfoque; mantenha bordas sólidas de 2–3px; teste o deslocamento tátil ao pressionar; verifique o contraste do texto contra destaques saturados (tinta preta em amarelo/ciano/menta); verifique a alternância entre modo escuro/claro para que bordas, sombras deslocadas e tinta invertam corretamente e nunca desapareçam em fundos escuros.
• Não faça: Não adicione desfoque ou espalhamento a sombras neo-brutalistas; evite pastéis suaves de baixo contraste; não coloque texto branco puro em botões amarelos ou menta; não deixe bordas/sombras pretas em tela escura.
• Confirme consistência desktop e mobile; foco visível do teclado (:focus-visible); estados de carregamento, vazio, desabilitado, erro e sucesso; comportamento de movimento reduzido (prefers-reduced-motion).
• Não injete suposições específicas de estilo em projetos não relacionados. Ao combinar estilos, nomeie explicitamente o estilo primário e os recursos emprestados.

Portão universal anti-sujeira (autocontido)

Cada elemento deve merecer seu lugar. Conteúdo antes da decoração. Não decore a incerteza. Não invente balanços, métricas, depoimentos, usuários, logotipos, aprovação, status verificado/ativo/online, atividade falsa ou confirmações de sucesso; use estados vazios/de carregamento/de erro honestos em vez disso. Dados de demonstração são aceitáveis apenas se solicitados e visivelmente rotulados.

Não adicione camadas decorativas de cartão-dentro-de-cartão: uma superfície aninhada deve representar um limite de interação ou informação distinto. Evite grades de 3 recursos geradas automaticamente, painéis de 4 estatísticas, alegações falsas de herói, gráficos sem propósito, spam de emblemas/chips/ícones, arte decorativa não relacionada e loops aleatórios meramente para preencher a viewport. Prefira agrupamento com tipografia, espaçamento, alinhamento e divisores. Pares iguais precisam de equilíbrio visual intencional.

Copywriting anti-sujeira: sem alegações genéricas como “Desbloqueie seu potencial”, “Experimente o futuro”, “Acelere seu fluxo de trabalho”, “perfeito” ou equivalentes traduzidos. Os cabeçalhos devem comunicar conteúdo real, CTAs devem nomear a ação, e texto vazio/de erro/sucesso deve descrever estados reais e próximos passos. Evite urgência falsa, números inventados, hype vago de IA, emojis gratuitos e paredes de CAIXA ALTA inacessíveis. Adapte o texto a este estilo e ao idioma do usuário sem alterar a verdade.

Integridade de contraste de tema e modo: Quando um usuário solicitar modo escuro ou modo claro (ou construir um alternador de tema), as cores de fundo e primeiro plano DEVEM mudar em pares sincronizados em todas as superfícies, texto, bordas, inputs e emblemas semânticos. Nunca deixe texto preto em fundo escuro, texto branco em fundo branco ou pílulas de status ilegíveis de baixo contraste. Todos os estados devem atender ao contraste WCAG AA (mínimo 4.5:1 para texto normal/corpo, 3:1 para títulos grandes e limites interativos).

Responsivo e movimento: componha mobile deliberadamente, verifique rótulos longos, estados de foco e contraste acessível; sem recorte de texto para caber em um layout moderno. Estático por padrão; use movimento para interações significativas, respeite preferências de movimento reduzido, evite decoração saltitante/flutuante/pulsante sem um estado real.

Conclusão do bloco de itens Críticos/Alta: status/dados fabricados, ações quebradas, controles inacessíveis/clipados, cópia enganosa, colisões de contraste de tema ou falha mobile significativa devem ser corrigidos. Relate o que foi realmente verificado; não afirme testes que não foram executados.

Não é um veto estético: cores expressivas, sombras, gradientes, layouts de cartão ou