From b84985a970f39ff18b56339a385cfcbebe837dcf Mon Sep 17 00:00:00 2001 From: dexta Date: Fri, 17 Jul 2026 12:13:48 +0200 Subject: [PATCH] for export in html and co adoc --- .../handrEichung/design_doku-WebUiCanvas.adoc | 641 ++++++++++++++++++ 1 file changed, 641 insertions(+) create mode 100644 00_aMeta/handrEichung/design_doku-WebUiCanvas.adoc diff --git a/00_aMeta/handrEichung/design_doku-WebUiCanvas.adoc b/00_aMeta/handrEichung/design_doku-WebUiCanvas.adoc new file mode 100644 index 0000000..f284f46 --- /dev/null +++ b/00_aMeta/handrEichung/design_doku-WebUiCanvas.adoc @@ -0,0 +1,641 @@ += Design-System: Maschinen-Instanzen +:toc: +:toclevels: 3 + +Project X Tribut • Universelles UI-, HUD- und Grafiksystem + +*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. Designphilosophie + +Das Design-System *Maschinen-Instanzen* definiert die visuelle Sprache des gesamten Computer-Historyz-Universums. + +Die Gestaltung orientiert sich an industriellen Steuerungssystemen, wissenschaftlichen Diagnoseterminals und kybernetischen Maschinenkomplexen. Sämtliche Farben, Formen und Effekte besitzen eine funktionale Bedeutung. + +Die Benutzeroberfläche soll nicht dekorativ wirken, sondern wie ein Bestandteil einer realen Maschine. + +=== Grundprinzipien + +. Funktion vor Dekoration. +. Jede Farbe besitzt eine semantische Bedeutung. +. Scharfe Kanten statt organischer Formen. +. Monospace-Typografie als Standard. +. Technische Lesbarkeit hat Vorrang vor visuellen Effekten. +. Informationen werden durch Farbe, Position und Kontrast vermittelt. +. Animationen dienen der Zustandskommunikation und niemals ausschließlich der Verzierung. + +== 2. Farbpalette + +=== 2.1 Kernfarben + +[cols="1,1,3",options="header"] +|=== +|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 +|=== + +=== 2.2 Semantische Zustände + +[cols="1,1",options="header"] +|=== +|Zustand +|Farbe + +|Information +|Tech Cyan + +|Erfolg +|Harvest Green + +|Warnung +|Amber Gold + +|Kritisch +|Critical Red + +|Deaktiviert +|Steel Grey + +|Fokus +|Tech Cyan + Glow +|=== + +=== 2.3 Priorisierung + +==== Primär + +Interaktive Objekte: + +* Buttons +* Links +* Menüs +* Aktive Systeme + +Verwenden: + +[source,text] +---- +Tech Cyan +---- + +==== Sekundär + +Nicht-interaktive Daten: + +* Metadaten +* Diagnostikwerte +* Statistiken + +Verwenden: + +[source,text] +---- +Steel Grey +---- + +==== Kritisch + +Fehler oder Gefahr: + +[source,text] +---- +Critical Red +---- + +== 3. Typografie + +=== 3.1 Schriftarten + +Ausschließlich Monospace-Schriften. + +Bevorzugte Reihenfolge: + +[source,text] +---- +JetBrains Mono +Fira Code +Courier Prime +monospace +---- + +=== 3.2 Typografische Regeln + +==== Beschriftungen + +Verwendung von Kleinbuchstaben. + +Beispiel: + +[source,text] +---- +shield status +resource storage +diagnostics +---- + +==== Statusmeldungen + +Fett darstellen. + +Beispiel: + +[source,text] +---- +WARNING +SHIELD FAILURE +RECOVERY COMPLETE +---- + +=== 3.3 Lesbarkeit + +Grundregeln: + +[source,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: + +[source,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: + +[source,text] +---- +8px System +---- + +Abstände erfolgen in Vielfachen von: + +[source,text] +---- +8 +16 +24 +32 +48 +64 +---- + +=== 4.2 Informationshierarchie + +Von links nach rechts: + +[source,text] +---- +Systemstatus +↓ +Navigation +↓ +Primäre Inhalte +↓ +Kontextinformationen +---- + +=== 4.3 Bildaufteilung + +Für Spiele: + +[source,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: + +[source,text] +---- +>60% +Tech Cyan + +30%-60% +Amber Gold + +<30% +Critical Red +---- + +==== Ressourcen + +Verwendung: + +[source,text] +---- +Harvest Green +---- + +==== Systemfehler + +Verwendung: + +[source,text] +---- +Critical Red +---- + +== 6. Canvas-Effekte + +=== 6.1 Scan-Lines + +Zweck: + +Simulation eines industriellen Monitors. + +Empfohlene Farbe: + +[source,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: + +[source,css] +---- +opacity: 0.02 - 0.04 +---- + +Niemals dominant. + +== 7. Rahmen-System + +=== 7.1 Grundregel + +Vermeide klassische Betriebssystem-Fenster. + +Stattdessen: + +[source,text] +---- +┌───────── + +└───────── +---- + +oder Corner-Brackets. + +=== 7.2 Rundungen + +Nicht vorgesehen. + +Maximal: + +[source,css] +---- +border-radius: 2px; +---- + +=== 7.3 Linien + +Immer: + +[source,css] +---- +1px +---- + +Farbe: + +[source,text] +---- +Steel Grey +---- + +Aktiv: + +[source,text] +---- +Tech Cyan +---- + +== 8. Buttons + +=== Normal + +[source,css] +---- +background: transparent; +color: #888899; +border: 1px solid #888899; +---- + +=== Hover + +[source,css] +---- +color: #00f2ff; +border-color: #00f2ff; + +box-shadow: +0 0 8px #00f2ff; +---- + +=== Aktiv + +[source,css] +---- +background: #00f2ff; +color: #05070a; +---- + +=== Disabled + +[source,css] +---- +opacity: 0.4; +pointer-events: none; +---- + +== 9. Panels und Container + +=== Standard + +[source,css] +---- +background: #0b0e14; +border: 1px solid #888899; + +backdrop-filter: blur(4px); +---- + +=== Overlays + +Dürfen Schatten besitzen. + +Beispiel: + +[source,css] +---- +box-shadow: +8px 8px 0 rgba(0,0,0,0.8); +---- + +=== Schatten-Regel + +Verboten: + +* Weiche Material-Schatten +* Neumorphe Effekte +* Mobile-App-Schatten + +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: + +[source,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: + +[source,text] +---- +100ms - 300ms +---- + +HUD-Reaktionen: + +[source,text] +---- +50ms - 150ms +---- + +== 14. Referenz-CSS + +[source,css] +---- +:root { + --bg-deep: #05070a; + --bg-panel: #0b0e14; + + --accent-cyan: #00f2ff; + --accent-green: #00ff73; + --accent-amber: #ffb700; + --accent-red: #ff3e3e; + + --text-dim: #888899; +} + +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.*