bloat the doc

2026-07-17 12:10:02 +02:00
parent a9283e32a2
commit aa4b725813
1 changed files with 617 additions and 40 deletions
@@ -1,71 +1,648 @@
-# Design-System: Maschinen-Instanzen (Project X Tribut)
+# Design-System: Maschinen-Instanzen
 ### Project X Tribut • Universelles UI-, HUD- und Grafiksystem
-Dieses Dokument definiert die Erweiterung des Farbschemas aus `game_miner4_design.md` in ein modulares UI- und Grafik-Konzept für Webanwendungen und HTML5-Canvas-Umgebungen.
+**Version:** 1.0.0  
 **Zielplattformen:** Web, HTML5 Canvas, Browser-Games, Diagnose-Terminals, Tools, Dashboards  
 **Designsprache:** Hard-Sci-Fi · Industrial Computing · Retro-Terminal · Maschinenästhetik
-## 1. Die Semantische Farb-Hierarchie (Erweitert)
+---
-Wir nutzen die Farben nicht nur zur Dekoration, sondern als Informations-Layer.
+# 1. Designphilosophie
-| Farbe | Hex | Verwendung in UI & HUD |
+Das Design-System *Maschinen-Instanzen* definiert die visuelle Sprache des gesamten Computer-Historyz-Universums.
 |---------|---------|---------|
 | **Deep Void** | `#05070a` | Globaler Background, Layer-Tiefe (negativ) |
 | **Terminal Base** | `#0b0e14` | Panel-Backgrounds, aktive Inhaltsbereiche |
 | **Tech Cyan** | `#00f2ff` | Primäre UI-Interaktion, aktiver Pfad, Schild-Status |
 | **Amber Gold** | `#ffb700` | Warnungen, Missionsziele, Gold-Ressourcen |
 | **Critical Red** | `#ff3e3e` | Gegner-Marker, kritische Zustände, Stopp-Buttons |
 | **Harvest Green** | `#00ff73` | Erfolg, Auffüllen, freundliche Interaktion |
 | **Steel Grey** | `#888899` | Inaktive Elemente, Rahmen, nicht-interaktive Text-Daten |
-## 2. Visuelle Identität (Concept Art & HUD)
+Die Gestaltung orientiert sich an industriellen Steuerungssystemen, wissenschaftlichen Diagnoseterminals und kybernetischen Maschinenkomplexen. Sämtliche Farben, Formen und Effekte besitzen eine funktionale Bedeutung.
-### 2.1 Typografie
+Die Benutzeroberfläche soll nicht dekorativ wirken, sondern wie ein Bestandteil einer realen Maschine.
-Verwende ausschließlich Monospace-Fonts, um den Terminal-Look zu unterstreichen.
+## Grundprinzipien
-1. **Font-Familien:** *JetBrains Mono*, *Fira Code* oder *Courier Prime*.
+1. Funktion vor Dekoration.
-2. **Stil:** Kleinbuchstaben für Beschriftungen, **fettgedruckt** für Statusmeldungen.
+2. Jede Farbe besitzt eine semantische Bedeutung.
-3. **Lesbarkeit:** Leichter Zeilenabstand (`1.4em`), dezente Text-Schatten bei Glow-Effekten.
+3. Scharfe Kanten statt organischer Formen.
 4. Monospace-Typografie als Standard.
 5. Technische Lesbarkeit hat Vorrang vor visuellen Effekten.
 6. Informationen werden durch Farbe, Position und Kontrast vermittelt.
 7. Animationen dienen der Zustandskommunikation und niemals ausschließlich der Verzierung.
-### 2.2 HUD-Elemente (Canvas)
+---
-1. **Glitch-Effekte:** Kurze, pulsierende farbige Linien (Tech Cyan) am Rand von Canvas-Elementen.
+# 2. Farbpalette
 2. **Scan-Lines:** Ein transparenter Overlay-Layer (`rgba(255, 255, 255, 0.03)`) mit horizontalen Scan-Linien über dem gesamten Spielfeld.
 3. **Rahmen:** Keine abgerundeten Ecken (oder nur extrem minimale `2px`). Stattdessen eckige Klammern (`[ ]`) an den Ecken aktiver Panels.
-## 3. UI-Komponenten für Webanwendungen
+## 2.1 Kernfarben
-### 3.1 Buttons & Interaktion
+| Name | Hex | Bedeutung |
 |--------|--------|--------|
 | Deep Void | `#05070a` | Globaler Hintergrund, tiefste Darstellungsebene |
 | Terminal Base | `#0b0e14` | Fenster, Container und Panel-Flächen |
 | Tech Cyan | `#00f2ff` | Interaktion, Fokus, aktive Systeme |
 | Harvest Green | `#00ff73` | Erfolg, Ressourcengewinn, Wiederherstellung |
 | Amber Gold | `#ffb700` | Warnungen, besondere Objekte, Missionsziele |
 | Critical Red | `#ff3e3e` | Kritische Zustände, Fehler, Gefahr |
 | Steel Grey | `#888899` | Sekundäre Informationen, deaktivierte Elemente |
-1. **Normal:** Rand `1px` Steel Grey, Hintergrund transparent, Text Steel Grey.
+---
 2. **Hover:** Rand `1px` Tech Cyan, Glow-Effekt (`box-shadow: 0 0 8px #00f2ff`), Text Tech Cyan.
 3. **Active:** Hintergrund Tech Cyan, Text Deep Void.
-### 3.2 Panels & Container
+## 2.2 Semantische Zustände
-1. Verwende `backdrop-filter: blur(4px)` auf `Terminal Base`.
+| Zustand | Farbe |
-2. Rahmen immer `1px` hart, keine Schatten, außer für schwebende Overlays. Diese benötigen einen sehr harten, dunklen Schatten.
+|----------|----------|
 | Information | Tech Cyan |
 | Erfolg | Harvest Green |
 | Warnung | Amber Gold |
 | Kritisch | Critical Red |
 | Deaktiviert | Steel Grey |
 | Fokus | Tech Cyan + Glow |
-## 4. Grafik-Asset-Regeln (Asset Pipeline)
+---
-1. **Minimalismus:** Keine Verläufe (Gradients). Nutze klare Trennung von Primärfarben.
+## 2.3 Priorisierung
 2. **Vektor-Stil:** Alle Icons sollten als scharfe SVGs ohne weiche Kanten umgesetzt werden.
 3. **Lichtquellen:** Wenn Lichteffekte benötigt werden, nutze einen harten Glow (kein sanftes Auslaufen).
-## 5. Umsetzung in HTML/JS (CSS-Variablen Beispiel)
+### Primär
 Interaktive Objekte:
 - Buttons
 - Links
 - Menüs
 - Aktive Systeme
 Verwenden:
 ```text
 Tech Cyan
 ```
 ### Sekundär
 Nicht-interaktive Daten:
 - Metadaten
 - Diagnostikwerte
 - Statistiken
 Verwenden:
 ```text
 Steel Grey
 ```
 ### Kritisch
 Fehler oder Gefahr:
 ```text
 Critical Red
 ```
 ---
 # 3. Typografie
 ## 3.1 Schriftarten
 Ausschließlich Monospace-Schriften.
 Bevorzugte Reihenfolge:
 ```text
 JetBrains Mono
 Fira Code
 Courier Prime
 monospace
 ```
 ---
 ## 3.2 Typografische Regeln
 ### Beschriftungen
 Verwendung von Kleinbuchstaben.
 Beispiel:
 ```text
 shield status
 resource storage
 diagnostics
 ```
 ### Statusmeldungen
 Fett darstellen.
 Beispiel:
 ```text
 WARNING
 SHIELD FAILURE
 RECOVERY COMPLETE
 ```
 ---
 ## 3.3 Lesbarkeit
 Grundregeln:
 ```css
 line-height: 1.4;
 letter-spacing: 0.02em;
 ```
 Text muss stets lesbar bleiben.
 Dekorative Effekte dürfen niemals die Lesbarkeit reduzieren.
 ---
 ## 3.4 Text-Glow
 Optional:
 ```css
 text-shadow:
 0 0 3px rgba(0,242,255,0.3);
 ```
 Maximal:
 - 3px Blur
 - 30% Deckkraft
 ---
 # 4. Layout-System
 ## 4.1 Raster
 Empfohlenes Grundraster:
 ```text
 8px System
 ```
 Abstände erfolgen in Vielfachen von:
 ```text
 8
 16
 24
 32
 48
 64
 ```
 ---
 ## 4.2 Informationshierarchie
 Von links nach rechts:
 ```text
 Systemstatus
 ↓
 Navigation
 ↓
 Primäre Inhalte
 ↓
 Kontextinformationen
 ```
 ---
 ## 4.3 Bildaufteilung
 Für Spiele:
 ```text
 Links:
 Systeme / HUD
 Mitte:
 Gameplay
 Rechts:
 Freier Sichtbereich
 ```
 ---
 # 5. HUD-Spezifikation
 ## 5.1 Grundkonzept
 HUD-Elemente wirken wie physische Bestandteile der Maschine.
 Keine schwebenden Fantasy-Elemente.
 Keine organischen Formen.
 ---
 ## 5.2 Statusanzeigen
 ### Schild
 Farbübergang:
 ```text
 >60%
 Tech Cyan
 30%-60%
 Amber Gold
 <30%
 Critical Red
 ```
 ---
 ### Ressourcen
 Verwendung:
 ```text
 Harvest Green
 ```
 ---
 ### Systemfehler
 Verwendung:
 ```text
 Critical Red
 ```
 ---
 # 6. Canvas-Effekte
 ## 6.1 Scan-Lines
 Zweck:
 Simulation eines industriellen Monitors.
 Empfohlene Farbe:
 ```css
 rgba(255,255,255,0.03)
 ```
 Regeln:
 - Über der Spielwelt
 - Unter der UI
 - Dürfen Lesbarkeit nicht beeinträchtigen
 ---
 ## 6.2 Glitch-Effekte
 Technische Störungen werden durch kurze Cyan-Artefakte dargestellt.
 Regeln:
 - Maximal 150 ms sichtbar
 - Nur ereignisgesteuert
 - Keine permanente Darstellung
 Mögliche Auslöser:
 - Schildausfall
 - Respawn
 - Energieumschaltung
 - Speichertransfer
 - Diagnostikfehler
 ---
 ## 6.3 Bildschirmrauschen
 Optional:
 ```css
 opacity: 0.02 - 0.04
 ```
 Niemals dominant.
 ---
 # 7. Rahmen-System
 ## 7.1 Grundregel
 Vermeide klassische Betriebssystem-Fenster.
 Stattdessen:
 ```text
 ┌─────────
 └─────────
 ```
 bzw. Corner-Brackets.
 ---
 ## 7.2 Rundungen
 Nicht vorgesehen.
 Maximal:
 ```css
 border-radius: 2px;
 ```
 ---
 ## 7.3 Linien
 Immer:
 ```css
 1px
 ```
 Farbe:
 ```text
 Steel Grey
 ```
 Aktiv:
 ```text
 Tech Cyan
 ```
 ---
 # 8. Buttons
 ## Normal
 ```css
 background: transparent;
 color: #888899;
 border: 1px solid #888899;
 ```
 ---
 ## Hover
 ```css
 color: #00f2ff;
 border-color: #00f2ff;
 box-shadow:
 0 0 8px #00f2ff;
 ```
 ---
 ## Aktiv
 ```css
 background: #00f2ff;
 color: #05070a;
 ```
 ---
 ## Disabled
 ```css
 opacity: 0.4;
 pointer-events: none;
 ```
 ---
 # 9. Panels und Container
 ## Standard
 ```css
 background: #0b0e14;
 border: 1px solid #888899;
 backdrop-filter: blur(4px);
 ```
 ---
 ## Overlays
 Dürfen Schatten besitzen.
 Beispiel:
 ```css
 box-shadow:
 8px 8px 0 rgba(0,0,0,0.8);
 ```
 ---
 ## Schatten-Regel
 Verboten:
 - weiche Material-Schatten
 - neumorphe Effekte
 - mobile App Shadows
 Erlaubt:
 - harte technische Schatten
 ---
 # 10. Icon-System
 ## Stil
 Alle Icons müssen:
 - SVG-basiert sein
 - geometrisch wirken
 - scharfe Kanten besitzen
 ---
 ## Unzulässig
 - Airbrush
 - Illustrationen
 - Farbverläufe
 - Cartoon-Stil
 ---
 ## Zulässig
 - technische Symbole
 - Schaltpläne
 - Maschinen-Piktogramme
 ---
 # 11. Asset-Pipeline
 ## Flächen
 Nur Vollfarben.
 ---
 ## Nicht erlaubt
 - Farbverläufe
 - weiche Lichtflächen
 - Fototexturen im UI
 ---
 ## Ausnahmen
 Folgende Effekte dürfen Verläufe enthalten:
 - Glow
 - Bloom
 - Partikel
 - Plasma
 - Energieeffekte
 ---
 # 12. Lichtsystem
 ## Ziel
 Licht soll technisch wirken.
 Nicht magisch.
 Nicht organisch.
 Nicht dekorativ.
 ---
 ## Glow-Regeln
 Empfohlen:
 ```css
 box-shadow:
 0 0 6px currentColor;
 ```
 Eigenschaften:
 - kurzer Radius
 - hoher Kontrast
 - klar abgegrenzte Lichtquellen
 ---
 # 13. Animationen
 ## Erlaubt
 - Blinken
 - Pulsieren
 - Statuswechsel
 - Diagnostik-Animationen
 - Ladeanzeigen
 ---
 ## Nicht erlaubt
 - verspielte Übergänge
 - elastische Animationen
 - übertriebene Bewegungen
 ---
 ## Animationsdauer
 Empfohlen:
 ```text
 100ms - 300ms
 ```
 HUD-Reaktionen:
 ```text
 50ms - 150ms
 ```
 ---
 # 14. Referenz-CSS
 ```css
 :root {
  --bg-deep: #05070a;
  --bg-panel: #0b0e14;
  --accent-cyan: #00f2ff;
  --accent-green: #00ff73;
  --accent-amber: #ffb700;
  --accent-red: #ff3e3e;
  --text-dim: #888899;
 }
-.panel {
+body {
-  background-color: var(--bg-panel);
+  background: var(--bg-deep);
  border: 1px solid var(--text-dim);
  font-family: 'JetBrains Mono', monospace;
  color: var(--text-dim);
  font-family:
    "JetBrains Mono",
    "Fira Code",
    "Courier Prime",
    monospace;
 }
 .panel {
  background: var(--bg-panel);
  border: 1px solid var(--text-dim);
  backdrop-filter: blur(4px);
 }
 .button:hover {
  color: var(--accent-cyan);
  border-color: var(--accent-cyan);
  box-shadow:
    0 0 8px var(--accent-cyan);
 }
 ```
 ---
 # Design-Leitsatz
 **Maschinen-Instanzen ist kein futuristisches Betriebssystem.**
 Es ist die Benutzeroberfläche einer gewaltigen industriellen Maschine, die zufällig von Menschen bedient wird.
 Jedes Element soll vermitteln, dass unter der Oberfläche reale Energieflüsse, Diagnosesysteme, Speicherabbilder, Förderanlagen und Maschinenprozesse arbeiten.
 Dekoration ist optional.
 Funktion ist Pflicht.