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