leonxlnx/taste-skill

SKILL: Brutalismo Industrial e Interfaz de Telemetría Táctica

1. Meta de la Skill

Nombre: Ingeniería de Interfaces de Brutalismo Industrial y Telemetría Táctica Descripción: Competencia avanzada en la arquitectura de interfaces web que sintetizan el diseño tipográfico suizo de mediados de siglo, los manuales de fabricación industrial y las interfaces de terminales aeroespaciales/militares retrofuturistas. Esta disciplina exige un dominio absoluto sobre cuadrículas modulares rígidas, contraste extremo de escalas tipográficas, paletas de color puramente utilitarias y la simulación programática de degradación analógica (medios tonos, líneas de barrido CRT, tramado de mapa de bits). El objetivo es construir entornos digitales que proyecten funcionalidad cruda, precisión mecánica y alta densidad de datos, descartando deliberadamente los patrones convencionales de UI para consumidores.

2. Arquetipos Visuales

El sistema de diseño opera fusionando dos paradigmas visuales distintos pero altamente compatibles. Elige UNO por proyecto y mantente firme. No alternes ni mezcles ambos modos dentro de la misma interfaz.

2.1 Impresión Industrial Suiza

Derivado de los sistemas de identidad corporativa de los años 60 y los planos de maquinaria pesada.

• Características: Modos claros de alto contraste (sustratos de papel prensa/blanco roto). Dependencia de tipografías sans-serif monolíticas y pesadas. Cuadrículas estructurales inflexibles delineadas por líneas divisorias visibles. Uso agresivo y asimétrico del espacio negativo, puntuado por números o letras de gran tamaño que sangran del viewport. Uso intensivo del rojo primario como color de alerta/acento.

2.2 Terminal de Telemetría Táctica y CRT

Derivado de bases de datos militares clasificadas, mainframes heredados y pantallas de visualización frontal (HUD) aeroespaciales.

• Características: Exclusividad de modo oscuro. Presentación de datos tabulares de alta densidad. Dominio absoluto de la tipografía monoespaciada. Integración de dispositivos de encuadre técnico (corchetes ASCII, miras). Aplicación de limitaciones de hardware simuladas (brillo de fósforo, líneas de barrido, renderizado de baja profundidad de bits).

3. Arquitectura Tipográfica

La tipografía es la infraestructura estructural y decorativa principal. Las imágenes son secundarias. El sistema exige una variación extrema en escala, peso y espaciado.

3.1 Macro-Tipografía (Encabezados Estructurales)

• Clasificación: Neo-Grotesca / Sans-Serif Pesada.
• Fuentes Web Óptimas: Neue Haas Grotesk (Black), Inter (Extra Bold/Black), Archivo Black, Roboto Flex (Heavy), Monument Extended.
• Parámetros de Implementación:
  • Escala: Desplegada a escalas masivas usando tipografía fluida (ej., clamp(4rem, 10vw, 15rem)).
  • Tracking (Espaciado entre letras): Extremadamente ajustado, a menudo negativo (-0.03em a -0.06em), forzando a los glifos a formar bloques arquitectónicos sólidos.
  • Leading (Altura de línea): Altamente comprimido (0.85 a 0.95).
  • Caja: Exclusivamente mayúsculas para impacto estructural.

3.2 Micro-Tipografía (Datos y Telemetría)

• Clasificación: Monoespaciada / Técnica Sans.
• Fuentes Web Óptimas: JetBrains Mono, IBM Plex Mono, Space Mono, VT323, Courier Prime.
• Parámetros de Implementación:
  • Escala: Fija y pequeña (10px a 14px / 0.7rem a 0.875rem).
  • Tracking: Generoso (0.05em a 0.1em) para simular el espaciado mecánico de una máquina de escribir o matrices de terminal.
  • Leading: Estándar a ajustado (1.2 a 1.4).
  • Caja: Exclusivamente mayúsculas. Se usa para todos los metadatos, navegación, ID de unidades y coordenadas.

3.3 Contraste Textural (Disrupción Artística)

• Clasificación: Serif de Alto Contraste.
• Fuentes Web Óptimas: Playfair Display, EB Garamond, Times New Roman.
• Parámetros de Implementación: Se usa con extrema moderación. Debe someterse a un post-procesamiento intenso (filtros de medios tonos, tramado de 1 bit) para degradar la perfección vectorial y crear una yuxtaposición textural contra las sans-serif limpias.

4. Sistema de Color

La arquitectura del color es intransigente. Los degradados, las sombras paralelas suaves y la translucidez moderna están estrictamente prohibidos. Los colores simulan medios físicos o pantallas emisivas primitivas.

CRÍTICO: Elige UNA paleta de sustrato por proyecto y úsala de manera consistente. No mezcles nunca sustratos claros y oscuros dentro de la misma interfaz.

Si es Impresión Industrial Suiza (Claro):

• Fondo: #F4F4F0 o #EAE8E3 (Papel de documentación mate, sin blanquear).
• Primer plano: #050505 a #111111 (Tinta Carbón).
• Acento: #E61919 o #FF2A2A (Rojo de Aviación/Peligro). Este es el ÚNICO color de acento. Se usa para tachaduras, líneas divisorias estructurales gruesas o resaltes de datos vitales.

Si es Telemetría Táctica (Oscuro):

• Fondo: #0A0A0A o #121212 (CRT desactivado. Evita el #000000 puro).
• Primer plano: #EAEAEA (Fósforo blanco). Este es el color de texto principal.
• Acento: #E61919 o #FF2A2A (Rojo de Aviación/Peligro). Mismo rojo, mismas reglas.
• Verde Terminal (#4AF626): Opcional. Úsalo SOLO para un único elemento de UI específico (ej., un indicador de estado o una lectura de datos); nunca como color de texto general. Si no tiene un propósito claro, omítelo por completo.

5. Diseño e Ingeniería Espacial

El diseño debe parecer matemáticamente diseñado. Rechaza el relleno web convencional en favor de una compartimentación visible.

• La Cuadrícula del Plano: Adherencia estricta a las arquitecturas CSS Grid. Los elementos no flotan; están anclados con precisión a las pistas e intersecciones de la cuadrícula.
• Compartimentación Visible: Uso extensivo de bordes sólidos (1px o 2px solid) para delimitar zonas de información distintas. Las reglas horizontales (<hr>) se extienden con frecuencia a lo ancho de todo el contenedor para segregar unidades operativas.
• Densidad Bimodal: Los diseños oscilan entre una densidad de datos extrema (metadatos monoespaciados densamente empaquetados) y vastas extensiones de espacio negativo calculado que enmarca la macro-tipografía.
• Geometría: Rechazo absoluto de border-radius. Todas las esquinas deben tener exactamente 90 grados para imponer rigidez mecánica.

6. Componentes de UI y Simbología

Las convenciones estándar de UI web se reemplazan con elementos gráficos industriales utilitarios.

• Decoración de Sintaxis: Uso de caracteres ASCII para enmarcar puntos de datos.
  • Enmarcado: [ SISTEMAS DE ENTREGA ], < RE-IND >
  • Direccional: >>>, ///, \\
• Marcadores Industriales: Integración prominente de símbolos de registro (®), copyright (©) y marca registrada (™) que funcionan como elementos geométricos estructurales en lugar de texto legal.
• Activos Técnicos: Integración de miras (+) en las intersecciones de la cuadrícula, líneas verticales repetidas (códigos de barras), gruesas franjas de advertencia horizontales y datos de cadena aleatorizada (ej., REV 2.6, UNIDAD / D-01) para simular procesos mecánicos activos.

7. Efectos Texturales y de Post-Procesamiento

Para evitar que el diseño parezca puramente digital, la degradación analógica simulada se diseña en el frontend a través de filtros CSS y SVG.

• Medios Tonos y Tramado de 1 Bit: Transformar imágenes de tono continuo o tipografía serif grande en patrones de matriz de puntos. Se logra mediante preprocesamiento o superposiciones CSS mix-blend-mode: multiply combinadas con patrones de puntos radiales SVG.
• Líneas de Barrido CRT: Para interfaces de terminal, aplicar un repeating-linear-gradient al fondo para simular barridos de haz de electrones horizontales (ej., repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0,0,0,0.1) 2px, rgba(0,0,0,0.1) 4px)).
• Ruido Mecánico: Un filtro SVG estático/de ruido global de baja opacidad aplicado a la raíz del DOM para introducir un grano físico unificado tanto en modos oscuros como claros.

8. Directivas de Ingeniería Web

1. Determinismo de Cuadrícula: Utilizar display: grid; gap: 1px; con colores de fondo de padre/hijo contrastantes para generar líneas divisorias matemáticamente perfectas y ultrafinas sin declaraciones de borde complejas.
2. Rigidez Semántica: Construir el DOM usando etiquetas semánticas precisas (<data>, <samp>, <kbd>, <output>, <dl>) para reflejar con precisión la naturaleza técnica de la telemetría.
3. Ajuste Tipográfico: Implementar funciones CSS clamp() exclusivamente para la macro-tipografía para garantizar que las escalas de texto masivas crezcan agresivamente manteniendo la integridad estructural en todos los viewports.