72 lines
3.0 KiB
Markdown
72 lines
3.0 KiB
Markdown
# 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);
|
|
}
|