kennedys0/taste-style-brutalism

Use este skill apenas após um usuário escolher explicitamente ou uma configuração de projeto confirmada especificá-lo. Para novas solicitações de UI não explicadas, use um seletor de estilo, em vez de decidir o gosto do usuário aqui. A marca existente, acessibilidade e sobreposições do usuário têm precedência sobre todos os exemplos abaixo. O guia de estilo a seguir não é permissão para iniciar a codificação de UI antes da seleção do estilo.

Pacote de estilo: Brutalismo

ID: brutalism Assinatura: Honestidade estrutural crua, estrutura de layout exposta, contraste monocromático inflexível e zero camuflagem decorativa.

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 restrições de acessibilidade, utilidade e marca. Fontes são sugestões, não dependências obrigatórias. Um layout caótico e quebrado com tamanhos de fonte arbitrários não se qualifica como Brutalismo arquitetônico.

Boa adequação / trade-offs

• Funciona bem para: Portfólios de vanguarda, plataformas ativistas, arquivos arquitetônicos, publicações independentes, instituições de arte/cultura e ferramentas de desenvolvedor que buscam autenticidade estrutural sem compromissos.
• Cuidado com: Aplicações convencionais de mercado de massa onde familiaridade decorativa e estética suave reduzem a hesitação inicial do usuário.
• Direções de referência:
  • Béton Brut arquitetônico: Cinza concreto cru (#E8E8E8 a #DCDCDC), linhas pretas puras e stark (#000000), divisões de grade estrutural expostas e metadados arquitetônicos monoespaçados.
  • Estrutura Monocromática Stark: Fundo branco puro (#FFFFFF) com bordas pretas pesadas (2.5px solid #000000), ações de bloco preto stark e zero ornamentação decorativa.

Portão de fidelidade material brutalista — obrigatório

Antes de chamar uma página brutalista de completa, a viewport de abertura deve visivelmente ler como uma composição estrutural crua e honesta. Se um usuário escolheu este estilo, um site genérico que meramente aplica padrões não estilizados ou texto sobreposto caótico é uma FALHA.

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

1. Estrutura Exposta: Linhas de grade, divisores de seção e contêineres de conteúdo são formados por bordas pretas sólidas visíveis (2px–3px solid #000000), celebrando o esqueleto estrutural da página web.
2. Zero Camuflagem Decorativa: Absolutamente nenhuma sombra projetada desfocada suave, nenhum reflexo brilhante, nenhum canto de bolha arredondado e nenhum desfoque de vidro translúcido. As superfícies são planas, opacas e diretamente sem desculpas.
3. Alinhamento Hiper-Disciplinado: Apesar da honestidade material bruta, o alinhamento é preciso como navalha. Colunas, bordas e linhas se encaixam perfeitamente sem nenhum desvio errático.
4. Paleta de Alto Contraste Stark: Contraste monocromático preto-no-branco ou preto-no-concreto sem compromissos atendendo WCAG AAA (7:1+). Cor é usada apenas como sinal de alerta operacional (vermelho puro #FF0000 ou amarelo de aviso cru #FFD700).
5. Transições de Estado Interativo Imediatas: Botões e elementos interativos invertem instantaneamente em :hover e :active (por exemplo, inversão de cor imediata de preto-no-branco para branco-no-preto) sem easing atrasado ou física de mola artificial.

Teste da primeira viewport: Em uma captura de tela de desktop, identifique a grade de borda estrutural exposta, os planos planos não ornamentados e a autoridade monocromática stark sem ler o título da página. Se contiver cartões arredondados ou sombras suaves, remova a camuflagem decorativa imediatamente.

Exceção estrutural brutalista explícita — bordas de grade expostas são obrigatórias

Substituição específica do brutalismo: A precaução universal contra sujeira visual referente a bordas excessivas ou contraste agressivo NÃO DEVE ser interpretada como uma proibição de linhas divisórias pretas grossas (2px–3px solid) ou estrutura exposta aqui. No brutalismo arquitetônico, juntas estruturais e materiais honestos são celebrados, não escondidos atrás de tinta decorativa.

• Tratamentos estruturais permitidos: Bordas estruturais visíveis de 2px–3px, contêineres retangulares crus, metadados monoespaçados de alto contraste e estados de inversão de cor imediata.
• Limite anti-sujeira: Não quebre deliberadamente a acessibilidade sobrepondo parágrafos de corpo, usando cores neon clash ilegíveis ou tornando botões impossíveis de localizar. Brutalismo autêntico é hiperfuncional, não aleatoriamente quebrado.
• Interpretação anti-sujeira: Avalie layouts brutalistas por integridade estrutural, utilidade funcional e legibilidade, não tentando suavizar arestas duras. Remover bordas estruturais para satisfazer uma heurística genérica suave é uma regressão de design.

Tipografia e datilografia

Sem serifa grotesk pesado e inflexível ou monoespaçado técnico: Arial, Helvetica, IBM Plex Sans, IBM Plex Mono ou sans-serif do sistema. Headlines: 44–72 px desktop / 30–44 px mobile (peso 800–900, line-height apertado 1.05–1.15). Corpo do texto: 16–18 px (peso 400, line-height 1.5). Monoespaçado para metadados, timestamps e índices de seção.

Direção de cor

• Modo Claro (Papel Stark):
  • Base da Tela: Branco papel stark (#FFFFFF) ou concreto arquitetônico (#E5E5E5).
  • Tinta Estrutural / Bordas: Preto puro (#000000).
  • Blocos de Superfície: Preenchimentos sólidos de alto contraste (#000000 ou #FFFFFF).
• Modo Escuro (Invertido Pitch):
  • Base da Tela: Preto pitch stark (#000000).
  • Tinta Estrutural / Bordas: Branco puro stark (#FFFFFF).
  • Blocos de Superfície: Preenchimentos sólidos escuros de alto contraste (#000000 ou #121212).
• Acento de Sinal Operacional (Apenas Uma Cor): Vermelho de Sinal (#FF0000 / #FF3333) ou Âmbar de Aviso (#FFCC00).
• Regra de Inversão de Tema: No brutalismo, modo escuro/claro é uma inversão de polaridade autoritária. No modo escuro, a tela é #000000 e texto/bordas são #FFFFFF. Botões invertem limpos no hover (claro: botão branco inverte para preenchimento preto + texto branco; escuro: botão preto inverte para preenchimento branco + texto preto). Texto preto em fundo preto ou texto branco em fundo branco é estritamente proibido.

Layout e geometria

Cantos são estritamente quadrados (border-radius: 0px). Bordas estruturais: 2px–3px solid #000000. Blocos de conteúdo se encaixam rentes uns aos outros ou mantêm lacunas modulares firmes de 16px/24px.

Superfícies, profundidade, textura

Superfícies são 100% planas, opacas e estruturais. Zero sombras. Zero gradientes. A profundidade é estabelecida puramente pela camada de blocos pretos sobre molduras brancas e inversão imediata das cores de primeiro e segundo plano.

Anatomia do componente e interação

• Botão Brutalista: Borda preta pesada (2px solid #000000), fundo branco, texto maiúsculo em negrito; no hover/active, inverte imediatamente para fundo preto sólido e texto branco.
• Painel Estrutural: Contêiner retangular com bordas superior/inferior pesadas; divisores entre seções internas.
• Tag de Metadados: Tag monoespaçada entre colchetes: [DOC_REF: 4092].
• Controles de Formulário: Campos de entrada sem adornos com borda preta grossa e anel de foco preto sólido de alto contraste (outline: 3px solid #000000; outline-offset: 2px;).

Movimento

Inversões de estado imediatas por padrão (0 ms) ou transições lineares muito breves (60–100 ms). Sem bounce, sem curvas de easing, sem parallax, sem transições decorativas.

Receita opcional com Anime.js v4

• Decisão de movimento: Inversões de estado imediatas por padrão; Anime.js geralmente desnecessário para brutalismo autêntico.
• Duração inicial: 0ms (imediato); ajuste apenas se uma persiana deslizante mecânica funcional específica for solicitada.
• Evite: springs, revelações deslizantes, animações de scroll teatrais.
• Dependência: CSS/nativo por padrão. Siga references/motion-engine.md do Taste Engine quando disponível; skill independente segue os princípios de movimento reduzido e sem loop decorativo acima.

Escrita de UI e microcópia

Direta, sem desculpas e factual. Exemplos: “ÍNDICE”, “BAIXAR ESPECIFICAÇÃO”, “ERRO DE TERMINAL: CONEXÃO PERDIDA”, “CONFIRMAR”. Evite cópia conversacional prolixa ou encheção de lingüiça de marketing persuasiva.

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

Token	Padrão modo claro	Padrão modo escuro
--taste-brutal-bg	#ffffff	#000000
--taste-brutal-ink	#000000	#ffffff
--taste-brutal-surface	#ffffff	#121212
--taste-brutal-border	2.5px solid #000000	2.5px solid #ffffff
--taste-brutal-radius	0px	0px
--taste-brutal-signal	#ff0000	#ff3333
--taste-brutal-font-heading	'Arial Black', Arial, Helvetica, sans-serif	'Arial Black', Arial, Helvetica, sans-serif
--taste-brutal-font-body	Arial, Helvetica, sans-serif	Arial, Helvetica, sans-serif
--taste-brutal-font-mono	'IBM Plex Mono', monospace	'IBM Plex Mono', monospace
--taste-brutal-motion-duration	0ms	0ms

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

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

Quando um portfólio/landing/homepage pública 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 real cabeçalho apenas quando estiver no fluxo normal; deixe o herói expandir para acessibilidade e telas móveis curtas. Não aplique isso a dashboards privados ou outras telas de tarefa; substituições diretas do usuário vencem. Direção específica do estilo: Construa a primeira viewport como um monólito arquitetônico sem desculpas: título de exibição massivo dentro de estrutura exposta, blocos de call-to-action stark pretos e zero enchimento decorativo. Veja o roteiro references/hero-layout.md quando presente. Uso independente segue os mesmos princípios de responsividade e anti-sujeira.

Portão de qualidade específico do estilo

• Faça: Verifique contraste monocromático stark; garanta que bordas estruturais de 2–3px sejam sólidas; verifique cantos quadrados de 0px; verifique inversão de polaridade modo escuro/claro para que texto e fundo nunca entrem em conflito (sem texto preto-no-preto ou branco-no-branco); garanta que o acento de sinal permaneça estritamente singular.
• Não faça: Não adicione cantos arredondados, sombras projetadas suaves ou gradientes de cor suaves; evite badges de enchimento decorativos ou cópia de marketing prolixa; não deixe tinta ou bordas pretas ao alternar para tela escura.
• Confirme consistência desktop e mobile; foco de teclado visível (: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 de decoração. Não decore incerteza. Não invente saldos, métricas, depoimentos, usuários, logotipos, aprovação, status verificado/ao vivo/online, atividade falsa ou confirmações de sucesso; use estados honestos de vazio/carregamento/erro. 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, dashboards de 4 estatísticas, reivindicações de herói falsas, gráficos sem propósito, spam de badge/chip/ícone, arte decorativa não relacionada e loops aleatórios apenas para preencher a viewport. Prefira agrupamento com tipografia, espaçamento, alinhamento e divisores. Pares iguais precisam de equilíbrio visual intencional.

Redação anti-sujeira: sem genéricos "Desbloqueie seu potencial", "Experimente o futuro", "Acelere seu fluxo de trabalho", reivindicações "perfeitas" ou equivalentes traduzidos. Headings devem comunicar conteúdo real, CTAs devem nomear a ação e texto vazio/erro/sucesso deve descrever estados reais e próximos passos. Evite urgência falsa, contagens inventadas, hype vago de IA, emoji gratuito e muralhas de letras maiúsculas inacessíveis. Adapte a redação 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 inverter em pares sincronizados em todas as superfícies, texto, bordas, entradas e badges 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 corpo/normal, 3:1 para grandes headlines e limites interativos).

Responsivo e movimento: componha mobile deliberadamente, verifique rótulos longos, estados de foco e contraste acessível; sem corte 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 de bounce/flutuação/pulsação sem um estado real.

Bloco de conclusão de achados Críticos/Altos: status/dados fabricados, ações quebradas, controles inacessíveis/clipados, cópia enganosa, colisões de contraste de tema ou falha móvel significativa devem ser corrigidos. Relate o que foi realmente verificado; não reivindique testes que não foram executados.

Não é um veto estético: cores expressivas, sombras, gradientes, layouts de cartão ou tratamentos decorativos são legítimos quando são partes intencionais da estética selecionada e passam nas verificações de usabilidade. Não force silenciosamente o minimalismo.

Anti-sujeira: específico do estilo

Honestidade estrutural, não ludicidade estética.

• Rejeite: Formas de pílula arredondadas, acentos pastel, desfoques de sombra decorativos, ilustrações lúdicas, cartões de modelo genéricos e colisões de tema (como texto preto permanecendo em uma tela brutalista escura).
• Em vez disso: Exponha grades de layout com bordas estruturais pesadas, hierarquia de tipo stark, inversões de estado imediatas e contraste inequívoco.
• Verificação de cópia: A escrita de UI deve ser breve, direta e funcional sem jargão de marketing.
• Auditoria: Execute verificações universais de anti-sujeira de propósito, verdade, superfície aninhada, redação, responsividade, acessibilidade e movimento além do portão de qualidade deste estilo. Não penalize funcionalidades deliberadas, acessíveis...