computerhistory/00_aMeta/handrEichung/design_doku-WebUiCanvas.adoc

= 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.*