diff --git a/00_aMeta/handrEichung/design_doku-WebUiCanvas.md b/00_aMeta/handrEichung/design_doku-WebUiCanvas.md index 5dd89ad..2cf25c4 100644 --- a/00_aMeta/handrEichung/design_doku-WebUiCanvas.md +++ b/00_aMeta/handrEichung/design_doku-WebUiCanvas.md @@ -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 | -|---------|---------|---------| -| **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 | +Das Design-System *Maschinen-Instanzen* definiert die visuelle Sprache des gesamten Computer-Historyz-Universums. -## 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*. -2. **Stil:** Kleinbuchstaben für Beschriftungen, **fettgedruckt** für Statusmeldungen. -3. **Lesbarkeit:** Leichter Zeilenabstand (`1.4em`), dezente Text-Schatten bei Glow-Effekten. +1. Funktion vor Dekoration. +2. Jede Farbe besitzt eine semantische Bedeutung. +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. **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. +# 2. Farbpalette -## 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`. -2. Rahmen immer `1px` hart, keine Schatten, außer für schwebende Overlays. Diese benötigen einen sehr harten, dunklen Schatten. +| Zustand | Farbe | +|----------|----------| +| 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. **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). +## 2.3 Priorisierung -## 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 { - background-color: var(--bg-panel); - border: 1px solid var(--text-dim); - font-family: 'JetBrains Mono', monospace; +body { + background: var(--bg-deep); 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.