for export in html and co adoc
This commit is contained in:
@@ -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.*
|
||||
Reference in New Issue
Block a user