SKILL: Brutalismo Industrial e UI de Telemetria Tática

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 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 (halftones, 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 ou misture os dois 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 papel 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 para fora da 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 Heads-Up (HUDs) aeroespaciais.

• Características: Exclusividade do modo escuro. Apresentação de dados tabulares de alta densidade. Domínio absoluto de 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 (Títulos Estruturais)

• Classificação: Neo-Grotesca / Sans-Serif Pesada.
• Fontes Web Ótimas: Neue Haas Grotesk (Black), Inter (Extra Bold/Black), Archivo Black, Roboto Flex (Heavy), Monument Extended.
• Parâmetros de Implementação:
  • Escala: Implementada 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úsculas para impacto estrutural.

3.2 Micro-Tipografia (Dados e Telemetria)

• Classificação: Monospace / Sans Técnica.
• Fontes Web Ótimas: 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.
• Fontes Web Ótimas: Playfair Display, EB Garamond, Times New Roman.
• Parâmetros de Implementação: Usado com extrema parcimônia. Deve ser submetido a um pós-processamento pesado (filtros halftone, dithering de 1 bit) para degradar a perfeição vetorial e criar justaposição textural contra os sans-serifs limpos.

4. Sistema de Cores

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

CRÍTICO: Escolha UMA paleta de substrato por projeto e use-a consistentemente. Nunca misture substratos claros e escuros dentro da 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 de Carbono).
• Acento: #E61919 ou #FF2A2A (Vermelho de Aviação/Perigo). Esta é a ÚNICA cor de acento. Usada para riscaduras, linhas divisórias estruturais grossas ou realces de dados vitais.

…