Compare commits
2
Commits
| Author | SHA1 | Date | |
|---|---|---|---|
 dextatc
|
b84985a970 | ||
|
dextatc
|
aa4b725813 |
@@ -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.*
|
||||||
@@ -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 |
|
Das Design-System *Maschinen-Instanzen* definiert die visuelle Sprache des gesamten Computer-Historyz-Universums.
|
||||||
|---------|---------|---------|
|
|
||||||
| **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)
|
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*.
|
1. Funktion vor Dekoration.
|
||||||
2. **Stil:** Kleinbuchstaben für Beschriftungen, **fettgedruckt** für Statusmeldungen.
|
2. Jede Farbe besitzt eine semantische Bedeutung.
|
||||||
3. **Lesbarkeit:** Leichter Zeilenabstand (`1.4em`), dezente Text-Schatten bei Glow-Effekten.
|
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. Farbpalette
|
||||||
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
|
## 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`.
|
| Zustand | Farbe |
|
||||||
2. Rahmen immer `1px` hart, keine Schatten, außer für schwebende Overlays. Diese benötigen einen sehr harten, dunklen Schatten.
|
|----------|----------|
|
||||||
|
| 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.3 Priorisierung
|
||||||
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)
|
### 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
|
```css
|
||||||
:root {
|
:root {
|
||||||
--bg-deep: #05070a;
|
--bg-deep: #05070a;
|
||||||
--bg-panel: #0b0e14;
|
--bg-panel: #0b0e14;
|
||||||
|
|
||||||
--accent-cyan: #00f2ff;
|
--accent-cyan: #00f2ff;
|
||||||
|
--accent-green: #00ff73;
|
||||||
--accent-amber: #ffb700;
|
--accent-amber: #ffb700;
|
||||||
--accent-red: #ff3e3e;
|
--accent-red: #ff3e3e;
|
||||||
|
|
||||||
--text-dim: #888899;
|
--text-dim: #888899;
|
||||||
}
|
}
|
||||||
|
|
||||||
.panel {
|
body {
|
||||||
background-color: var(--bg-panel);
|
background: var(--bg-deep);
|
||||||
border: 1px solid var(--text-dim);
|
|
||||||
font-family: 'JetBrains Mono', monospace;
|
|
||||||
color: var(--text-dim);
|
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.
|
||||||
|
|||||||
Reference in New Issue
Block a user