Brutalismo Industrial & UI de Telemetria Tática

HABILIDADE: Brutalismo Industrial & UI de Telemetria Tática

1. Meta da Habilidade

Nome: Engenharia de Interface Brutalista Industrial e de Telemetria Tática Descrição: Proficiência avançada em arquitetar 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 retro-futuristas. Esta disciplina exige domínio absoluto sobre 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 (meios-tons, scanlines CRT, dithering 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 para consumidores.

2. Arquétipos Visuais

O sistema de design opera mesclando dois paradigmas visuais distintos, porém altamente compatíveis. Escolha UM por projeto e comprometa-se com ele. Não alterne ou misture ambos os modos na 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 papel jornal/off-white). Dependência de tipografia sem serifa monolítica e pesada. Grades estruturais inflexíveis delineadas por linhas divisórias visíveis. Uso agressivo e assimétrico de espaço negativo, pontuado por numerais ou letras enormes que sangram a viewport. Uso intenso de vermelho primário como cor de alerta/destaque.

2.2 Terminal CRT de Telemetria Tática

Derivado de bancos de dados militares classificados, mainframes legados e Heads-Up Displays (HUDs) aeroespaciais.

• Características: Exclusividade do modo escuro. Apresentação de dados tabulares de alta densidade. Domínio absoluto da tipografia monoespaçada. Integração de dispositivos técnicos de enquadramento (colchetes ASCII, miras). Aplicação de limitações simuladas de hardware (brilho de fósforo, scanlines, 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 em escala, peso e espaçamento.

3.1 Macrotipografia (Cabeçalhos Estruturais)

• Classificação: Neo-Grotesca / Sem Serifa Pesada.
• Fontes Web Ideais: 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 os glifos a formarem blocos arquitetônicos sólidos.
  • Leading (Altura da Linha): Altamente comprimido (0,85 a 0,95).
  • Caixa: Exclusivamente maiúscula para impacto estrutural.

3.2 Microtipografia (Dados e Telemetria)

• Classificação: Monoespaçada / Sem Serifa Técnica.
• Fontes Web Ideais: 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 mecânico de máquina de escrever ou matrizes de terminal.
  • Leading: Padrão a apertado (1.2 a 1.4).
  • Caixa: Exclusivamente maiúscula. Usado para todos os metadados, navegação, IDs de unidade e coordenadas.

3.3 Contraste Textural (Disrupção Artística)

• Classificação: Serifa de Alto Contraste.
• Fontes Web Ideais: Playfair Display, EB Garamond, Times New Roman.
• Parâmetros de Implementação: Usado com extrema moderação. Deve ser submetido a pós-processamento pesado (filtros de meio-tom, dithering de 1 bit) para degradar a perfeição vetorial e criar justaposição textural contra as sans-serifs limpas.

4. Sistema de Cores

A arquitetura de cores é inflexível. Gradientes, sombras suaves e translucidez moderna são estritamente proibidos. As cores simulam mídia física ou displays emissores primitivos.

CRÍTICO: Escolha UMA paleta de substrato por projeto e use-a consistentemente. Nunca misture substratos claro e escuro na mesma interface.

Se Impressão Industrial Suíça (Claro):

• Fundo: #F4F4F0 ou #EAE8E3 (Papel de documentação fosco, não branqueado).
• Primeiro Plano: #050505 a #111111 (Tinta Carbono).
• Destaque: #E61919 ou #FF2A2A (Vermelho de Aviação/Perigo). Esta é a ÚNICA cor de destaque. Usado para riscos, linhas divisórias estruturais grossas ou destaques de dados vitais.

Se Telemetria Tática (Escuro):

• Fundo: #0A0A0A ou #121212 (CRT desativado. Evite #000000 puro).
• Primeiro Plano: #EAEAEA (Fósforo branco). Esta é a cor primária do texto.
• Destaque: #E61919 ou #FF2A2A (Vermelho de Aviação/Perigo). Mesmo vermelho, mesmas regras.
• Verde Terminal (#4AF626): Opcional. Use APENAS para um único elemento de UI específico (ex.: um indicador de status ou uma leitura de dados) — nunca como cor de texto geral. Se não servir a um propósito claro, omita-o totalmente.

5. Layout e Engenharia Espacial

O layout deve parecer matematicamente projetado. Ele rejeita o preenchimento convencional da web em favor da compartimentalização visível.

• A Grade do Projeto: Adesão estrita a arquiteturas CSS Grid. Os elementos não flutuam; eles são ancorados precisamente a trilhas e interseções da grade.
• Compartimentalização Visível: Utilização extensiva de bordas sólidas (1px ou 2px solid) para delinear zonas distintas de informação. Regras horizontais (<hr>) frequentemente abrangem toda a largura do contêiner para segregar unidades operacionais.
• Densidade Bimodal: Os layouts oscilam entre densidade extrema de dados (metadados monoespaçados bem compactados) e vastas extensões de espaço negativo calculado emoldurando a macrotipografia.
• Geometria: Rejeição absoluta de border-radius. Todos os cantos devem ter exatamente 90 graus para impor rigidez mecânica.

6. Componentes de UI e Simbologia

As convenções padrão de UI da web são substituídas por elementos gráficos industriais utilitários.

• Decoração de Sintaxe: Utilização de caracteres ASCII para enquadrar pontos de dados.
  • Enquadramento: [ SISTEMAS DE ENTREGA ], < RE-IND >
  • Direcionais: >>>, ///, \\\\
• Marcadores Industriais: Integração proeminente de símbolos de registro (®), copyright (©) e marca registrada (™) funcionando como elementos geométricos estruturais em vez de texto legal.
• Ativos Técnicos: Integração de miras (+) em interseções de grade, linhas verticais repetidas (códigos de barras), listras grossas de advertência horizontais e dados de string aleatórios (ex.: REV 2.6, UNIDADE / D-01) para simular processos mecânicos ativos.

7. Efeitos de Textura e Pós-Processamento

Para evitar que o design pareça puramente digital, a degradação analógica simulada é projetada no frontend por meio de filtros CSS e SVG.

• Meio-tom e Dithering de 1 Bit: Transformar imagens de tom contínuo ou tipografia serifada grande em padrões de matriz de pontos. Alcançado via pré-processamento ou sobreposições CSS mix-blend-mode: multiply combinadas com padrões SVG de pontos radiais.
• Scanlines CRT: Para interfaces de terminal, aplicar um repeating-linear-gradient ao fundo para simular varreduras horizontais de feixe de elétrons (ex.: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0,0,0,0.1) 2px, rgba(0,0,0,0.1) 4px)).
• Ruído Mecânico: Um filtro SVG de estático/ruído global de baixa opacidade aplicado à raiz do DOM para introduzir um grão físico unificado em ambos os modos, escuro e claro.

8. Diretrizes de Engenharia Web

1. Determinismo de Grade: Utilize display: grid; gap: 1px; com cores de fundo contrastantes entre pai e filho para gerar linhas divisórias matematicamente perfeitas e finas como navalha, sem declarações complexas de borda.
2. Rigor Semântico: Construa o DOM usando tags semânticas precisas (<data>, <samp>, <kbd>, <output>, <dl>) para refletir com precisão a natureza técnica da telemetria.
3. Clamping Tipográfico: Implemente funções CSS clamp() exclusivamente para macrotipografia, garantindo que escalas de texto massivas cresçam agressivamente, mantendo a integridade estrutural entre viewports.