leonxlnx/taste-skill

SKILL: Industrial Brutalismus & Taktische Telemetrie UI

1. Skill Meta

Name: Industrial Brutalismus & Taktische Telemetrie Schnittstellenentwicklung Beschreibung: Fortgeschrittene Kenntnisse in der Gestaltung von Webschnittstellen, die die Schweizer Typografie der Mitte des Jahrhunderts, industrielle Fertigungshandbücher und Retrofuturistische Militär-/Luftfahrtterminal-Oberflächen synthetisieren. Diese Disziplin erfordert absolute Meisterschaft über starre modulare Raster, extreme typografische Größenkontraste, utilitaristische Farbpaletten und die programmatische Simulation analoger Degradation (Halbtonraster, CRT-Scanlines, Bitmap-Dithering). Ziel ist es, digitale Umgebungen zu schaffen, die rohe Funktionalität, mechanische Präzision und hohe Datendichte ausstrahlen und dabei bewusst konventionelle Consumer-UI-Muster verwerfen.

2. Visuelle Archetypen

Das Designsystem funktioniert durch die Verschmelzung zweier unterschiedlicher, aber hochkompatibler visueller Paradigmen. Wähle EINES pro Projekt und bleibe dabei. Wechsle nicht zwischen beiden Modi oder mische sie innerhalb derselben Oberfläche.

2.1 Schweizer Industriedruck

Abgeleitet von Corporate-Identity-Systemen der 1960er Jahre und Schwermaschinenbauplänen.

• Eigenschaften: Hochkontrastreiche helle Modi (Papier/ungebleichte Substrate). Verwendung von monolithischen, schweren serifenlosen Schriften. Unnachgiebige Strukturraster, umrissen von sichtbaren Trennlinien. Aggressive, asymmetrische Nutzung von negativem Raum, durchsetzt mit überdimensionalen, bis zum Viewport reichenden Ziffern oder Buchstabenformen. Intensive Verwendung von Primärrot als Warn-/Akzentfarbe.

2.2 Taktische Telemetrie & CRT-Terminal

Abgeleitet von klassifizierten Militärdatenbanken, Legacy-Mainframes und Head-Up-Displays (HUDs) der Luftfahrt.

• Eigenschaften: Ausschließlich dunkler Modus. Hochdichte tabellarische Darstellung von Daten. Absolute Dominanz nichtproportionaler Schriftarten. Integration technischer Rahmenelemente (ASCII-Klammern, Fadenkreuze). Anwendung simulierter Hardwareeinschränkungen (Phosphorglühen, Scanlines, geringe Bittiefe).

3. Typografische Architektur

Typografie ist die primäre strukturelle und dekorative Infrastruktur. Bilder sind zweitrangig. Das System verlangt extreme Unterschiede in Größe, Gewicht und Laufweite.

3.1 Makro-Typografie (Strukturelle Überschriften)

• Klassifikation: Neo-Grotesk / Schwere serifenlose Schrift.
• Optimale Webfonts: Neue Haas Grotesk (Black), Inter (Extra Bold/Black), Archivo Black, Roboto Flex (Heavy), Monument Extended.
• Implementierungsparameter:
  • Skalierung: Eingesetzt in massiven Größen mittels fließender Typografie (z. B. clamp(4rem, 10vw, 15rem)).
  • Laufweite (Zeichenabstand): Extrem eng, oft negativ (-0.03em bis -0.06em), wodurch die Glyphen zu soliden architektonischen Blöcken gezwungen werden.
  • Zeilenabstand: Stark komprimiert (0.85 bis 0.95).
  • Groß-/Kleinschreibung: Für strukturelle Wirkung ausschließlich Großbuchstaben.

3.2 Mikro-Typografie (Daten & Telemetrie)

• Klassifikation: Nichtproportionale / Technische Schrift.
• Optimale Webfonts: JetBrains Mono, IBM Plex Mono, Space Mono, VT323, Courier Prime.
• Implementierungsparameter:
  • Skalierung: Fest und klein (10px bis 14px / 0.7rem bis 0.875rem).
  • Laufweite: Großzügig (0.05em bis 0.1em), um den mechanischen Schreibmaschinenabstand oder Terminalmatrizen zu simulieren.
  • Zeilenabstand: Standard bis eng (1.2 bis 1.4).
  • Groß-/Kleinschreibung: Ausschließlich Großbuchstaben. Verwendet für alle Metadaten, Navigation, Einheitenkennungen und Koordinaten.

3.3 Texturkontrast (Künstlerische Störung)

• Klassifikation: Hochkontrastreiche Serifenschrift.
• Optimale Webfonts: Playfair Display, EB Garamond, Times New Roman.
• Implementierungsparameter: Äußerst sparsam einsetzbar. Müssen einer starken Nachbearbeitung (Halbtonfilter, 1-Bit-Dithering) unterzogen werden, um die Vektorperfektion zu beeinträchtigen und einen texturalen Kontrast zu den sauberen serifenlosen Schriften zu schaffen.

4. Farbsystem

Die Farbarchitektur ist kompromisslos. Farbverläufe, weiche Schlagschatten und moderne Transparenz sind strengstens untersagt. Farben simulieren physische Medien oder primitive emittierende Displays.

KRITISCH: Wähle EINE Substratpalette pro Projekt und verwende sie konsequent. Mische niemals helle und dunkle Substrate innerhalb derselben Oberfläche.

Bei Schweizer Industriedruck (Hell):

• Hintergrund: #F4F4F0 oder #EAE8E3 (Mattes, ungebleichtes Dokumentationspapier).
• Vordergrund: #050505 bis #111111 (Kohlenstofftinte).
• Akzent: #E61919 oder #FF2A2A (Luftfahrt-/Gefahrenrot). Dies ist die EINZIGE Akzentfarbe. Verwendung für Durchstreichungen, dicke strukturelle Trennlinien oder wichtige Datenhervorhebungen.

Bei Taktischer Telemetrie (Dunkel):

• Hintergrund: #0A0A0A oder #121212 (Deaktivierte CRT. Vermeide reines #000000).
• Vordergrund: #EAEAEA (Weißer Phosphor). Dies ist die primäre Textfarbe.
• Akzent: #E61919 oder #FF2A2A (Luftfahrt-/Gefahrenrot). Gleiches Rot, gleiche Regeln.
• Terminalgrün (#4AF626): Optional. Verwende es NUR für ein einziges bestimmtes UI-Element (z. B. einen Statusindikator oder eine Datenanzeige) – niemals als allgemeine Textfarbe. Wenn es keinem klaren Zweck dient, lasse es komplett weg.

5. Layout und räumliche Gestaltung

Das Layout muss mathematisch konstruiert erscheinen. Es lehnt konventionelle Webabstände zugunsten einer sichtbaren Unterteilung ab.

• Das Blaupausenraster: Strikte Einhaltung der CSS-Grid-Architekturen. Elemente schweben nicht; sie werden exakt an Rasterlinien und Schnittpunkten verankert.
• Sichtbare Unterteilung: Umfangreiche Verwendung von durchgehenden Rahmen (1px oder 2px solid), um verschiedene Informationszonen abzugrenzen. Horizontale Linien (<hr>) erstrecken sich häufig über die gesamte Containerbreite, um Betriebseinheiten zu trennen.
• Bimodale Dichte: Layouts oszillieren zwischen extremer Datendichte (dicht gepackte nichtproportionale Metadaten) und großen Flächen berechneten negativen Raums, der die Makro-Typografie einrahmt.
• Geometrie: Absolute Ablehnung von border-radius. Alle Ecken müssen exakt 90 Grad betragen, um mechanische Starrheit zu erzwingen.

6. UI-Komponenten und Symbole

Standard-Web-UI-Konventionen werden durch utilitaristische, industrielle grafische Elemente ersetzt.

• Syntax-Dekoration: Verwendung von ASCII-Zeichen zur Rahmung von Datenpunkten.
  • Rahmung: [ DELIVERY SYSTEMS ], < RE-IND >
  • Richtungsangaben: >>>, ///, \\\\
• Industrielle Markierungen: Herausragende Integration von Registrierungszeichen (®), Copyright (©) und Markenzeichen (™), die eher als strukturelle geometrische Elemente denn als rechtlicher Text fungieren.
• Technische Assets: Integration von Fadenkreuzen (+) an Rasterschnittpunkten, sich wiederholenden vertikalen Linien (Barcodes), dicken horizontalen Warnstreifen und zufälligen Zeichenfolgen (z. B. REV 2.6, UNIT / D-01), um aktive mechanische Prozesse zu simulieren.

7. Textur- und Nachbearbeitungseffekte

Um zu verhindern, dass das Design rein digital wirkt, wird eine simulierte analoge Degradation über CSS- und SVG-Filter in das Frontend eingebaut.

• Halbtonraster und 1-Bit-Dithering: Umwandlung von kontinuierlichen Bildern oder großen Serifenschriften in Punktmatrixmuster. Erreicht durch Vorverarbeitung oder CSS-mix-blend-mode: multiply-Überlagerungen in Kombination mit SVG-Radialpunktmustern.
• CRT-Scanlines: Bei Terminal-Oberflächen Anwendung eines repeating-linear-gradient auf den Hintergrund, um horizontale Elektronenstrahlablenkung zu simulieren (z. B. repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0,0,0,0.1) 2px, rgba(0,0,0,0.1) 4px)).
• Mechanisches Rauschen: Ein globaler SVG-Statik-/Rauschfilter mit geringer Deckkraft, der auf das DOM-Root angewendet wird, um ein einheitliches physisches Korn in sowohl dunklen als auch hellen Modi zu erzeugen.

8. Webentwicklungsrichtlinien

1. Rasterdeterminismus: Verwende display: grid; gap: 1px; mit kontrastierenden Hintergrundfarben für Eltern- und Kindelemente, um mathematisch perfekte, messerscharfe Trennlinien ohne komplexe Rahmendeklarationen zu erzeugen.
2. Semantische Starrheit: Baue das DOM mit präzisen semantischen Tags (<data>, <samp>, <kbd>, <output>, <dl>), um die technische Natur der Telemetrie genau abzubilden.
3. Typografie-Clamping: Implementiere CSS-clamp()-Funktionen ausschließlich für die Makro-Typografie, um sicherzustellen, dass große Textskalen aggressiv skaliert werden, während die strukturelle Integrität über verschiedene Viewports hinweg erhalten bleibt.