642 lines
7.9 KiB
Plaintext
642 lines
7.9 KiB
Plaintext
= 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.*
|