🌐 1. Grundidee des psynetischen Design-Compiler-Systems (Intentions-Ebene)

Das system ist eher ein semantisches, geschichtetes UI-Generationssystem

Das Ziel ist nicht Buttons zu schreiben

sondern:

Design-Eigenschaften zu einer konkreten UI-Identität zu kombinieren

---

1.1 Design als Sprache statt als Komponente

Begriffe sind keine CSS-Utilities, sondern Bedeutungsräume:

• staticscale / upscale / downscale / reactivescale → Verhalten / Reaktionslogik
• simple / complex / active / atmosphere → Wahrnehmungs- / Dichtegrad
• bubble / reflection / glass → visuelle Formsprache
• v1 / v2 → konkrete Manifestation

---

1.2 UI als Kombination von Layern

Ein Element ist immer ein Stapel:

Button → Group (behavior) → Collection (feel) → Variant (visual identity) → Version (instantiation)

Das bedeutet:

UI entsteht durch Komposition, nicht durch Definition.

---

1.3 Individualisierung als Konfiguration

Das Ziel ist nicht manuelles Styling, sondern:

Websites werden durch Parameterkombinationen „zusammengesetzt“

---

2. Technische Struktur des Systems (aktuell)

DOM-Architektur:

---

2.1 Module-Ebene (Root)

<div class="modules-wrapper" data-module="button">

Bedeutung:

• Typ des UI-Elements
• Einstiegspunkt in das System

---

2.2 Group-Ebene (Verhalten)

<div class="module-group" data-group="staticscale">

Bedeutung:

• grundlegendes Interaktions-/Motionverhalten
• bestimmt „physikalisches Verhalten“ der UI

Beispiele:

• statisch → Technisches Beispiel: physical = 0.5
• hochskalierend → Technisches Beispiel: physical = > 0.5 - < 1
• herunterskalierend → Technisches Beispiel: physical = < 0.5 - > 0
• reaktiv → Technisches Beispiel: physical = 1; interaction-shape = x

---

2.3 Collection-Ebene (Charakter / Intensität / Stimmung)

<div class="module-collection" data-collection="simple active">

Bedeutung:

• Mischdimension aus:

  • Klarheit (simple-complex)
  • Bewegung (active)
  • Atmosphäre (atmosphere)

Wichtig: Diese Ebene ist nicht global gültig, sondern:

abhängig von der Group

Das heißt: active in staticscale ≠ active in reactivescale.
Sie sind also semantische Charakterisierung visueller Zustände und dienen später der Compilersteuerung.
Durch ihre Mischdimension können sie auch als Layer gelten.

Einordnung

Simple-Complex

Beschreibt die wahrnehmbare visuelle Entropie bzw. kognitive Komplexität eines Moduls.

Beeinflusst durch:

• Formvielfalt
• Layerdichte
• Informationsmenge
• visuelle Unruhe
• dekorative Intensität
• strukturelle Variation

Active

Wird zusammen gesetzt aus:

• Interaktivität > als grundlegendes Verhalten (mouse activity)
• nicht-morphologische Bewegung ≠ scales (kinetic activity)
• visuelle Aktivitätsillusion ohne Interaktivität (optical activity)
  (einfaches Erscheinen als Übergang ≠ motion oder visual active -> atmosphere scale Verstärkung)

Atmosphere

Beschreibt räumliche/emotionale visuelle Diffusion:

• Lichtkompositionen (mindestens 1 Lichtlayer -> hartes Licht bzw einfacher Button Background oder gradient Background ≠ Atmosphere-Lichtlayer)
• Schatten
• Perspektive
• räumlich-emotionale Bildwirkung

Verstärkt durch:

• komplexe passende Verläufe
• Übergänge

Verstärkung ist Teil von Atmosphäre, aber wird alleine nicht als solche gelistet.
Atmosphäre ist kontextabhängig -> keine absoluten Compiler Werte

Presence / Weight = quantitative Wahrnehmungsstärke

Als dynamischer Compiler-Wert hinzufügen.

Axes

Normierte visuelle Kräfte für den Interpretation Layer.

Visual Interpretation Layer Beispiele:

• geometry
• noise
• contrast
• motion

→ simplicity: 0.8 → in staticscale, variant: bubble = geometry: 0.2, noise: 0.2, contrast: 0.6, motion: 0.1

---

2.4 Variant-Ebene (visuelle Identität)

<div class="module-variant" data-variant="bubble">

Bedeutung:

• konkrete Formsprache
• visuelle Idee
• gestalterischer Archetyp

Beispiele:

• bubble
• glass
• reflection (später unsichtbar im atmosphere layer)
• slide-background (später unsichtbar im active und atmosphere layer) → wahrscheinlich nur zu "gradient-background"

---

2.5 Version / Instanz-Ebene (konkrete Ausprägung)

<div class="module v1" id="button-staticscale-simple-bubble-v1">

Bedeutung:

• exakte finale Version
• technisch eindeutig referenzierbar
• das „Renderprodukt“

---

3. Wie das System technisch arbeitet (logisch)

Das System ist eigentlich eine Layer-Stack-Maschine:

---

3.1 Input (semantische Beschreibung)

button + staticscale + simple + bubble + v1

---

3.2 Verarbeitung (Interpretation der Layer)

Jede Ebene trägt etwas bei:

Layer	Funktion
module	Grundstruktur
group	Motion/Behavior Engine
collection	Atmosphere + Interaction density
variant	Visual system (shape, style language)
version	final tuning

---

3.3 Output (konkrete UI als absolutes Layering Beispiel)

<button class="button bubble staticscale simple v1">

oder strukturell:

DOM + CSS + Motion + Style-Variablen

---

4. Das eigentliche Systemprinzip (wichtigster Punkt)

Das System basiert nicht auf:

Komponenten

sondern auf:

semantischer Komposition von Design-Zuständen

Das bedeutet:

• Das System definiert Design-„Zustandsräume“
• Buttons entstehen daraus

---

5. Warum das System „Layering“ ist (nicht Klassensystem)

Jede Ebene ist:

• unabhängig gedacht
• wirkt aber kombiniert
• beschreibt unterschiedliche Dimensionen

Damit gibt es implizit 4 Achsen:

Motion axis → group Intensity axis → collection Visual axis → variant Identity axis → version

---

6. Der entscheidende architektonische Kern

Das System ist:

teilweise deterministisch, teilweise kompositorisch

• deterministisch: v1 ist exakt definiert
• kompositorisch: Layer bestimmen das Verhalten

Das macht es hybrid zwischen:

• Design System
• Rule Engine
• UI Generator

---

7. Zusammengefasst

Das psynetischen Design-Compiler-Systems ist ein:

layerbasiertes UI-Design-Registry-System, das aus semantischen Designparametern konkrete, eindeutig adressierbare UI-Instanzen generiert

---

8. Der aktuelle Reifezustand des Systems

Momentan zwischen:

Phase 2 → Phase 3 Übergang

• Phase 2: klare visuelle Archetypen (momentan aktiv)
• Phase 3: parametrische Layer / Moduling (über längere Zeit hinweg)
• Phase 3.5: generatives UI-System absolute Layering (noch Zukunft)
• Phase 4: generatives UI-System relative Layering mithilfe von js (noch Zukunft)
• Phase 5: generatives individuell interlektuelles UI-System relative System-Layering mithilfe von js (noch Zukunft)

---

9. Das Potenzial

Das psynetische Design-Compiler-System lässt auch zu, dass bestimmte Abtraktions-, Distanz- und Wärme-Werte für jedes Variant präzise innerhalb erlaubten Variant Parameter definiert und somit modular werden. Wenn diese Variants dann noch bestimmte Themes zuordnet werden, wird nicht nur ein individuelles konkretes Theme möglich. In Kombination mit den Modulelementen, die in den jeweiligen Seiten auftauchen, ist es möglich einen Theme-Data-Satz für jede einzelne Seite wie z.B. emotional, personal oder technical hinzuzufügen. Dieser wird dann von einem Umbrella-System interpretiert und feintuned anschließend das Design-Compiler-System.

Dieses hat also nun ein konkretes Variant-Spektrum mit Beziehungen (Theme), individuelle Eingabe eines Nutzers, eine Umbrella-System Richtung und erlaubte Eigenschaften von spezifischen Variants.

Somit kann die Website immer noch die Wirkungsebene in jedes persönlich gefeintunedtes Theme global steuern.

Also:
Varianten definieren die Physik der Wahrnehmung, Compiler instanziiert sie und Umbrella verschiebt nur die Eingangsbedingungen dieser Physik, ohne ihre Regeln zu verändern.