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.

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

2.2 HUD-Elemente (Canvas)

Glitch-Effekte: Kurze, pulsierende farbige Linien (Tech Cyan) am Rand von Canvas-Elementen.
Scan-Lines: Ein transparenter Overlay-Layer (rgba(255, 255, 255, 0.03)) mit horizontalen Scan-Linien über dem gesamten Spielfeld.
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

Normal: Rand 1px Steel Grey, Hintergrund transparent, Text Steel Grey.
Hover: Rand 1px Tech Cyan, Glow-Effekt (box-shadow: 0 0 8px #00f2ff), Text Tech Cyan.
Active: Hintergrund Tech Cyan, Text Deep Void.

3.2 Panels & Container

Verwende backdrop-filter: blur(4px) auf Terminal Base.
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)

Minimalismus: Keine Verläufe (Gradients). Nutze klare Trennung von Primärfarben.
Vektor-Stil: Alle Icons sollten als scharfe SVGs ohne weiche Kanten umgesetzt werden.
Lichtquellen: Wenn Lichteffekte benötigt werden, nutze einen harten Glow (kein sanftes Auslaufen).

5. Umsetzung in HTML/JS (CSS-Variablen Beispiel)

: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);
}

3.0 KiB Raw Blame History