dextatc/computerhistory
1
0
Fork 0
Code Actions Packages Projects Releases Wiki Activity
Files
5e3e1b31cb28812663974d387eb623d5da37fd57
computerhistory/00_aMeta/handrEichung/design_doku-WebUiCanvas.md
T
dextatc aa4b725813 bloat the doc
2026-07-17 12:10:02 +02:00

7.7 KiB
Raw Blame History

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:

Tech Cyan

Sekundär

Nicht-interaktive Daten:

  • Metadaten
  • Diagnostikwerte
  • Statistiken

Verwenden:

Steel Grey

Kritisch

Fehler oder Gefahr:

Critical Red

3. Typografie

3.1 Schriftarten

Ausschließlich Monospace-Schriften.

Bevorzugte Reihenfolge:

JetBrains Mono
Fira Code
Courier Prime
monospace

3.2 Typografische Regeln

Beschriftungen

Verwendung von Kleinbuchstaben.

Beispiel:

shield status
resource storage
diagnostics

Statusmeldungen

Fett darstellen.

Beispiel:

WARNING
SHIELD FAILURE
RECOVERY COMPLETE

3.3 Lesbarkeit

Grundregeln:

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:

text-shadow:
0 0 3px rgba(0,242,255,0.3);

Maximal:

  • 3px Blur
  • 30% Deckkraft

4. Layout-System

4.1 Raster

Empfohlenes Grundraster:

8px System

Abstände erfolgen in Vielfachen von:

8
16
24
32
48
64

4.2 Informationshierarchie

Von links nach rechts:

Systemstatus
↓
Navigation
↓
Primäre Inhalte
↓
Kontextinformationen

4.3 Bildaufteilung

Für Spiele:

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:

>60%
Tech Cyan

30%-60%
Amber Gold

<30%
Critical Red

Ressourcen

Verwendung:

Harvest Green

Systemfehler

Verwendung:

Critical Red

6. Canvas-Effekte

6.1 Scan-Lines

Zweck:

Simulation eines industriellen Monitors.

Empfohlene Farbe:

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:

opacity: 0.02 - 0.04

Niemals dominant.

7. Rahmen-System

7.1 Grundregel

Vermeide klassische Betriebssystem-Fenster.

Stattdessen:

┌─────────

└─────────

bzw. Corner-Brackets.

7.2 Rundungen

Nicht vorgesehen.

Maximal:

border-radius: 2px;

7.3 Linien

Immer:

1px

Farbe:

Steel Grey

Aktiv:

Tech Cyan

8. Buttons

Normal

background: transparent;
color: #888899;
border: 1px solid #888899;

Hover

color: #00f2ff;
border-color: #00f2ff;

box-shadow:
0 0 8px #00f2ff;

Aktiv

background: #00f2ff;
color: #05070a;

Disabled

opacity: 0.4;
pointer-events: none;

9. Panels und Container

Standard

background: #0b0e14;
border: 1px solid #888899;

backdrop-filter: blur(4px);

Overlays

Dürfen Schatten besitzen.

Beispiel:

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:

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:

100ms - 300ms

HUD-Reaktionen:

50ms - 150ms

14. Referenz-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.

View Git Blame Copy Permalink