SKILL: Brutalismo Industrial e UI de Telemetria Tática

Quando Usar

• Use quando o usuário desejar uma interface brutalista, industrial, estilo impressão suíça, terminal CRT ou de telemetria tática.
• Use ao construir dashboards com muitos dados, portfólios, páginas editoriais ou UIs de centro de comando que devem parecer cruas e mecânicas.
• Use quando um design deve rejeitar gradientes suaves, UI de consumidor arredondada, glassmorfismo e layouts genéricos de cartões SaaS.

Exemplo

Solicitação do usuário:

Revise esta interface com @industrial-brutalist-ui, identifique os problemas de design de maior impacto e proponha uma melhoria pronta para implementação.

Limitações

• Este estilo é intencionalmente severo e pode não se adequar a produtos de consumo, fluxos sensíveis à acessibilidade ou marcas que exigem calor e suavidade.
• Efeitos de CRT, retícula (halftone), dithering e degradação devem ser testados quanto à legibilidade, contraste e sensibilidade ao movimento.
• Não misture as paletas industrial clara e de telemetria escura na mesma interface, a menos que o usuário solicite explicitamente um híbrido controlado.

1. Meta da Skill

Nome: Engenharia de Interface de Brutalismo Industrial e Telemetria Tática Descrição: Proficiência avançada na arquitetura de interfaces web que sintetizam o design tipográfico suíço de meados do século, manuais de fabricação industrial e interfaces de terminais aeroespaciais/militares retrofuturistas. Esta disciplina requer domínio absoluto de grades modulares rígidas, contraste extremo de escala tipográfica, paletas de cores puramente utilitárias e a simulação programática de degradação analógica (retículas, linhas de varredura CRT, dithering de bitmap). O objetivo é construir ambientes digitais que projetem funcionalidade bruta, precisão mecânica e alta densidade de dados, descartando deliberadamente padrões convencionais de UI de consumidor.

2. Arquétipos Visuais

O sistema de design opera mesclando dois paradigmas visuais distintos, mas altamente compatíveis. Escolha UM por projeto e comprometa-se com ele. Não alterne nem misture ambos os modos dentro da mesma interface.

2.1 Impressão Industrial Suíça

Derivado de sistemas de identidade corporativa dos anos 1960 e plantas de máquinas pesadas.

• Características: Modos claros de alto contraste (substratos de jornal/off-white). Dependência de tipografia sans-serif monolítica e pesada. Grades estruturais implacáveis delineadas por linhas divisórias visíveis. Uso agressivo e assimétrico de espaço negativo pontuado por numerais ou letras oversized que sangram a viewport. Uso pesado de vermelho primário como cor de alerta/acento.

2.2 Telemetria Tática e Terminal CRT

Derivado de bancos de dados militares classificados, mainframes legados e displays de navegação (HUDs) aeroespaciais.

• Características: Exclusividade do modo escuro. Apresentação de dados tabulares de alta densidade. Domínio absoluto da tipografia monospaced. Integração de dispositivos de enquadramento técnico (colchetes ASCII, retículos). Aplicação de limitações simuladas de hardware (brilho de fósforo, linhas de varredura, renderização de baixa profundidade de bits).

3. Arquitetura Tipográfica

A tipografia é a infraestrutura estrutural e decorativa primária. A imagem é secundária. O sistema exige variação extrema de escala, peso e espaçamento.

3.1 Macro-Tipografia (Cabeçalhos Estruturais)

• Classificação: Neo-Grotesco / Sans-Serif Pesada.
• Fontes Web Otimizadas: Neue Haas Grotesk (Black), Inter (Extra Bold/Black), Archivo Black, Roboto Flex (Heavy), Monument Extended.
• Parâmetros de Implementação:
  • Escala: Implantada em escalas massivas usando tipografia fluida (ex: clamp(4rem, 10vw, 15rem)).
  • Tracking (Espaçamento entre letras): Extremamente apertado, frequentemente negativo (-0.03em a -0.06em), forçando glifos a formar blocos arquitetônicos sólidos.
  • Leading (Altura da linha): Altamente comprimido (0.85 a 0.95).
  • Caixa: Exclusivamente maiúsculas para impacto estrutural.

3.2 Micro-Tipografia (Dados e Telemetria)

• Classificação: Monospace / Sans Técnica.
• Fontes Web Otimizadas: JetBrains Mono, IBM Plex Mono, Space Mono, VT323, Courier Prime.
• Parâmetros de Implementação:
  • Escala: Fixa e pequena (10px a 14px / 0.7rem a 0.875rem).
  • Tracking: Generoso (0.05em a 0.1em) para simular espaçamento de máquina de escrever mecânica ou matrizes de terminal.
  • Leading: Padrão a apertado (1.2 a 1.4).
  • Caixa: Exclusivamente maiúsculas. Usado para todos os metadados, navegação, IDs de unidade e coordenadas.

3.3 Contraste Textural (Ruptura Artística)

• Classificação: Serif de Alto Contraste.

…