= 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.*