649 lines
7.7 KiB
Markdown
649 lines
7.7 KiB
Markdown
# Design-System: Maschinen-Instanzen
|
|
### 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
|
|
|
|
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. Farbpalette
|
|
|
|
## 2.1 Kernfarben
|
|
|
|
| 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
|
|
|
|
| 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:
|
|
|
|
```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;
|
|
}
|
|
|
|
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.
|