leonxlnx/taste-skill

COMPÉTENCE : Brutalisme Industriel & Interface de Télémesure Tactique

1. Méta de la Compétence

Nom : Conception d'Interfaces Brutalistes Industrielles & Télémesure Tactique Description : Maîtrise avancée de l'architecture d'interfaces web qui synthétisent le design typographique suisse du milieu du siècle, les manuels de fabrication industrielle et les interfaces de terminaux aérospatiaux/militaires rétro-futuristes. Cette discipline exige une maîtrise absolue des grilles modulaires rigides, des contrastes typographiques extrêmes, des palettes de couleurs strictement utilitaires et de la simulation programmatique de la dégradation analogique (tramage, lignes de balayage CRT, tramage bitmap). L'objectif est de construire des environnements numériques qui projettent une fonctionnalité brute, une précision mécanique et une densité de données élevée, en rejetant délibérément les motifs d'interface utilisateur conventionnels.

2. Archétypes Visuels

Le système de design fonctionne en fusionnant deux paradigmes visuels distincts mais hautement compatibles. Choisissez UN par projet et tenez-vous-y. N'alternez pas et ne mélangez pas les deux modes dans la même interface.

2.1 Impression Industrielle Suisse

Issu des systèmes d'identité corporate des années 1960 et des plans de machinerie lourde.

• Caractéristiques : Modes clairs à fort contraste (substrats papier journal/blanc cassé). Recours à la typographie linéale lourde et monolithique. Grilles structurelles impitoyables délimitées par des lignes de séparation visibles. Utilisation agressive et asymétrique de l'espace négatif ponctuée de chiffres ou de lettres démesurés débordant de la fenêtre d'affichage. Utilisation intensive du rouge primaire comme couleur d'alerte/accentuation.

2.2 Télémesure Tactique & Terminal CRT

Issu des bases de données militaires classifiées, des mainframes historiques et des affichages tête haute (HUD) aérospatiaux.

• Caractéristiques : Mode sombre exclusif. Présentation de données tabulaires à haute densité. Domination absolue de la typographie monospace. Intégration de dispositifs de cadre techniques (crochets ASCII, réticules). Application de limitations matérielles simulées (lueur phosphorescente, lignes de balayage, rendu à faible profondeur de bits).

3. Architecture Typographique

La typographie est l'infrastructure structurelle et décorative principale. L'imagerie est secondaire. Le système exige une variance extrême d'échelle, de poids et d'espacement.

3.1 Macro-Typographie (En-têtes Structurels)

• Classification : Néo-grotesque / Sans-Serif Lourde.
• Polices Web Optimales : Neue Haas Grotesk (Black), Inter (Extra Bold/Black), Archivo Black, Roboto Flex (Heavy), Monument Extended.
• Paramètres de Mise en Œuvre :
  • Échelle : Déployée à des échelles massives en utilisant une typographie fluide (par exemple, clamp(4rem, 10vw, 15rem)).
  • Tracking (Espacement des lettres) : Extrêmement serré, souvent négatif (-0.03em à -0.06em), forçant les glyphes à former des blocs architecturaux solides.
  • Leading (Hauteur de ligne) : Hautement compressé (0.85 à 0.95).
  • Casse : Exclusivement en majuscules pour un impact structurel.

3.2 Micro-Typographie (Données & Télémesure)

• Classification : Monospace / Technique Sans-Serif.
• Polices Web Optimales : JetBrains Mono, IBM Plex Mono, Space Mono, VT323, Courier Prime.
• Paramètres de Mise en Œuvre :
  • Échelle : Fixe et petite (10px à 14px / 0.7rem à 0.875rem).
  • Tracking : Généreux (0.05em à 0.1em) pour simuler l'espacement mécanique des machines à écrire ou les matrices de terminaux.
  • Leading : Standard à serré (1.2 à 1.4).
  • Casse : Exclusivement en majuscules. Utilisé pour toutes les métadonnées, la navigation, les identifiants d'unités et les coordonnées.

3.3 Contraste Textural (Perturbation Artistique)

• Classification : Serif à fort contraste.
• Polices Web Optimales : Playfair Display, EB Garamond, Times New Roman.
• Paramètres de Mise en Œuvre : Utilisée avec une extrême parcimonie. Doit être soumise à un post-traitement intensif (filtres demi-teintes, tramage 1-bit) pour dégrader la perfection vectorielle et créer une juxtaposition texturale avec les sans-serif propres.

4. Système de Couleurs

L'architecture colorimétrique est sans compromis. Les dégradés, les ombres portées douces et la translucidité moderne sont strictement interdits. Les couleurs simulent des supports physiques ou des affichages émissifs primitifs.

CRITIQUE : Choisissez UNE palette de substrat par projet et utilisez-la de manière cohérente. Ne mélangez jamais les substrats clairs et sombres dans la même interface.

Si Impression Industrielle Suisse (Clair) :

• Arrière-plan : #F4F4F0 ou #EAE8E3 (Papier de documentation mat, non blanchi).
• Premier plan : #050505 à #111111 (Encre de carbone).
• Accent : #E61919 ou #FF2A2A (Rouge Aviation/Danger). C'est la SEULE couleur d'accent. Utilisée pour les barrés, les lignes de séparation structurelles épaisses, ou les surlignages de données vitales.

Si Télémesure Tactique (Sombre) :

• Arrière-plan : #0A0A0A ou #121212 (CRT désactivé. Évitez le #000000 pur).
• Premier plan : #EAEAEA (Phosphore blanc). C'est la couleur de texte principale.
• Accent : #E61919 ou #FF2A2A (Rouge Aviation/Danger). Même rouge, mêmes règles.
• Vert Terminal (#4AF626) : Optionnel. Utilisez-le UNIQUEMENT pour un seul élément d'interface spécifique (par exemple, un indicateur d'état ou une lecture de données) — jamais comme couleur de texte générale. S'il ne sert pas un objectif clair, omettez-le entièrement.

5. Disposition et Ingénierie Spatiale

La disposition doit sembler mathématiquement conçue. Elle rejette le rembourrage web conventionnel au profit d'une compartimentation visible.

• La Grille de Plans : Adhésion stricte aux architectures CSS Grid. Les éléments ne flottent pas ; ils sont ancrés précisément aux pistes et intersections de la grille.
• Compartimentation Visible : Utilisation extensive de bordures pleines (1px ou 2px solid) pour délimiter des zones d'information distinctes. Les règles horizontales (<hr>) traversent fréquemment toute la largeur du conteneur pour séparer les unités opérationnelles.
• Densité Bimodale : Les dispositions oscillent entre une densité de données extrême (métadonnées monospace étroitement regroupées) et de vastes étendues d'espace négatif calculé encadrant la macro-typographie.
• Géométrie : Rejet absolu de border-radius. Tous les coins doivent être exactement à 90 degrés pour imposer une rigidité mécanique.

6. Composants UI et Symbolisme

Les conventions UI web standard sont remplacées par des éléments graphiques industriels utilitaires.

• Décoration Syntaxique : Utilisation de caractères ASCII pour encadrer les points de données.
  • Cadrage : [ SYSTÈMES DE LIVRAISON ], < RE-IND >
  • Directionnel : >>>, ///, \\
• Marqueurs Industriels : Intégration importante des symboles d'enregistrement (®), de copyright (©) et de marque déposée (™) fonctionnant comme des éléments géométriques structurels plutôt que comme du texte juridique.
• Actifs Techniques : Intégration de réticules (+) aux intersections de la grille, de lignes verticales répétitives (codes-barres), de larges bandes d'avertissement horizontales et de données de chaînes aléatoires (par exemple, REV 2.6, UNITÉ / D-01) pour simuler des processus mécaniques actifs.

7. Effets Texturaux et de Post-Traitement

Pour empêcher le design de paraître purement numérique, la dégradation analogique simulée est intégrée au frontend via des filtres CSS et SVG.

• Tramage Demi-Ton et 1-Bit : Transformation d'images en tons continus ou de grandes typographies serif en motifs de matrices de points. Réalisé par prétraitement ou superposition CSS mix-blend-mode: multiply combinée à des motifs de points radiaux SVG.
• Lignes de Balayage CRT : Pour les interfaces terminal, application d'un repeating-linear-gradient à l'arrière-plan pour simuler les balayages horizontaux du faisceau d'électrons (par exemple, repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0,0,0,0.1) 2px, rgba(0,0,0,0.1) 4px)).
• Bruit Mécanique : Un filtre de bruit/statique SVG global et de faible opacité appliqué à la racine du DOM pour introduire un grain physique unifié dans les modes sombre et clair.

8. Directives d'Ingénierie Web

1. Déterminisme de Grille : Utiliser display: grid; gap: 1px; avec des couleurs d'arrière-plan parent/enfant contrastées pour générer des lignes de séparation mathématiquement parfaites et ultra-fines, sans déclarations de bordure complexes.
2. Rigueur Sémantique : Construire le DOM en utilisant des balises sémantiques précises (<data>, <samp>, <kbd>, <output>, <dl>) pour refléter avec précision la nature technique de la télémesure.
3. Clamp Typographique : Implémenter les fonctions CSS clamp() exclusivement pour la macro-typographie afin de garantir que les échelles de texte massives s'adaptent de manière agressive tout en maintenant l'intégrité structurelle sur toutes les fenêtres d'affichage.