# Design-System: Maschinen-Instanzen (Project X Tribut)

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.

## 1. Die Semantische Farb-Hierarchie (Erweitert)

Wir nutzen die Farben nicht nur zur Dekoration, sondern als Informations-Layer.

| Farbe | Hex | Verwendung in UI & HUD |
|---------|---------|---------|
| **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)

### 2.1 Typografie

Verwende ausschließlich Monospace-Fonts, um den Terminal-Look zu unterstreichen.

1. **Font-Familien:** *JetBrains Mono*, *Fira Code* oder *Courier Prime*.
2. **Stil:** Kleinbuchstaben für Beschriftungen, **fettgedruckt** für Statusmeldungen.
3. **Lesbarkeit:** Leichter Zeilenabstand (`1.4em`), dezente Text-Schatten bei Glow-Effekten.

### 2.2 HUD-Elemente (Canvas)

1. **Glitch-Effekte:** Kurze, pulsierende farbige Linien (Tech Cyan) am Rand von Canvas-Elementen.
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

### 3.1 Buttons & Interaktion

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

1. Verwende `backdrop-filter: blur(4px)` auf `Terminal Base`.
2. Rahmen immer `1px` hart, keine Schatten, außer für schwebende Overlays. Diese benötigen einen sehr harten, dunklen Schatten.

## 4. Grafik-Asset-Regeln (Asset Pipeline)

1. **Minimalismus:** Keine Verläufe (Gradients). Nutze klare Trennung von Primärfarben.
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)

```css
:root {
  --bg-deep: #05070a;
  --bg-panel: #0b0e14;
  --accent-cyan: #00f2ff;
  --accent-amber: #ffb700;
  --accent-red: #ff3e3e;
  --text-dim: #888899;
}

.panel {
  background-color: var(--bg-panel);
  border: 1px solid var(--text-dim);
  font-family: 'JetBrains Mono', monospace;
  color: var(--text-dim);
}