Studios in MotionProjektkartei

Design-Pool, Schrift-Labor und Sektions-Hintergründe

Aktiv

Globale Werkzeuge für Farben, Schriften und Sektions-Hintergründe aller Projekte: Design-Pool (20 Farb-, 18 Schriftkombinationen), Schrift-Labor, Bibliothek mit 13 Hintergrundmustern

Bereich
Templates
Start
11.09.2026
Zuletzt
03.10.2026
Am Zug
René
Nächster Schritt, René

Auf Renés Go warten: Scroll-Animationen (11 bis 13) im Template-Konfigurator wählbar machen

Design-Pool (Farben und Schriften)Schrift-LaborSektions-Hintergründe: BibliothekLive-Demo Scroll-Animationen (Plön preprod)

Screenshots 3

Design-Pool
Design-Pool
Schrift-Labor
Schrift-Labor
Sektions-Hintergründe Bibliothek
Sektions-Hintergründe Bibliothek

Worum es geht

Drei Werkzeuge, die René und wir für alle Projekte nutzen, damit nicht jedes Mal bei null angefangen wird: der Design-Pool mit Farb- und Schriftkombinationen, das Schrift-Labor zum freien Kombinieren von Google-Schriften auf echten Website-Elementen und die Bibliothek der Sektions-Hintergründe, die als Baustein im Template und als Auswahl im Design-Konfigurator der Zentrale steckt.

Stand

  • Schrift-Labor live seit 11.09.2026: Google-Schriften frei kombinieren auf Beispiel-Elementen der Studio-Website (hell und dunkel), 8 aktuelle und 10 neue Vorlagen, Merkliste, Link-Hash, Export für die Fontsource-Umsetzung.
  • Design-Pool seit 18.09.2026: 20 Farbkombinationen (aus Renés Instagram-Screenshots, mit Kontrastwert und CSS-Variablen) und 18 Schrift-Sets (die Presets des Schrift-Labors). Dazu der Bereich „Design“ in der Zentrale (Hub v0.317.0, Reiter Farben und Schriften, nur für uns, ohne Projektzuweisung).
  • Sektions-Hintergründe: Bibliothek mit 10 Mustern (6 Bestand aus Kundenprojekten, 4 neu) seit 25.09., am 03.10. um 3 Scroll-Animationen (11 bis 13) aus Fitness Point Plön ergänzt.
  • Eingebaut seit 25.09.2026: Template-Baustein SectionBackground in v1 (0fb58ab) und DaningoSport (92ab101), Konfigurator-Bereich „Sektions-Hintergrund (CTA)“, Hub v0.344.0 (Design-Karte, Showroom-Übernahme, Design-Sync, Setup-Export); im DaningoSport-Showroom Ende zu Ende geprüft.
  • Beispiele für den Einsatz: Fitnesswissen.com (Farben earthy-minimal, Schrift klar), mitfitINSIGHT (Look Graphit).

Offen

  • René Go, die Scroll-Animationen 11 bis 13 in den Konfigurator zu portieren (Markup-Funktion und Init in src/lib/section-hintergrund.ts des Master-Templates, Farben aus --color-primary und Zweitfarbe, Hub-Select in app.js). Bis dahin nur in der Bibliothek ansehbar.
  • ich Bestandssites mit dem Patch aus v1 (0fb58ab) nachziehen, sonst ignorieren sie das Feld; Muster je Sektion statt nur Abschluss-CTA; Formensprache-Kante als clip-path der CTA-Sektion ins Template.
  • ich Die Live-Demo liegt auf Plöns preprod; geht Plön live oder wird die Seite gelöscht, braucht die Bibliothek eine eigene Vorführseite.
  • ich Später Zuordnung der Kombinationen zu Projekten und eigene Kombinationen direkt im Hub anlegen (Idee vom 18.09.).

Entscheidungen und Regeln

  • 2026-09-18: Vor jeder Farb- oder Schriftwahl zuerst den Pool öffnen und die ID im Projektstand notieren; IDs nie umbenennen (Standards-Seite, Abschnitt 2, studiowebsite-docs 9514f8a).
  • 2026-09-18: Der Bereich „Design“ in der Zentrale ist nur für uns, erstmal ohne Projektzuweisung.
  • 2026-09-25: Sektions-Hintergründe kantig, keine Leuchtflecken (Regel „keine KI-Standard-Optik“); Standard punkte-verlauf entspricht dem alten Markup.
  • 2026-09-25: Schrift-Sets nur auf der Live-Bühne oder im Showroom beurteilen; Vorschauen für René immer selbst hosten.
  • Lehre 25.09.: Ein Trenner vor der CTA als eigener Baustein passt nicht zu den Mustern; Trenner-Form als clip-path der Sektion selbst.

Verlauf

  1. Bibliothek um Scroll-Animationen 11 bis 13 erweitert (ef7e9fe), Wunsch von René bei Fitness Point Plön.
  2. Bibliothek Sektions-Hintergründe (8293589), Einbau in Template v1, DaningoSport und Konfigurator, Hub v0.344.0 (5cf3f16), Showroom-Test.
  3. Design-Pool angelegt (6d1445e), Bereich Design in der Zentrale (bc06ace, Hub v0.317.0 und v0.317.1).
  4. Schrift-Labor live (ed745e0), Link per Mail an René.

Wo liegt was

  • Brand-Seiten: /root/sim-ops/hub/public/brand/design-pool/ (index.html, farben.json mit Schlüssel farbkombinationen, schriften.json mit schriftkombinationen), schrift-labor/index.html, section-hintergruende.html und section-hintergruende/ (3 Bilder). Neue Dateien unter hub/public/brand erreichen den Container per docker cp.
  • Zentrale: Bereich „Design“ (Inhalte › Design, Reiter Farben und Schriften), Code hub/public/design.js, Route #design/farben, #design/schriften; Kundenakte › Design-Karte mit Select „Sektions-Hintergrund (CTA)“, Feld mappings.design.sectionBackground.
  • Template: src/lib/section-hintergrund.ts, src/components/SectionBackground.astro, src/styles/section-hintergrund.css, DevThemeSwitcher.astro.
  • Quellen: /root/transfer/colorcombos/ (20 Screenshots), Wiki 20-Tools/Schrift-Labor.md, 40-Projekte/Design-Showroom.md.
  • Generator für den Pool liegt nicht im Repo (flüchtiges Scratchpad pool.py); beim Ergänzen JSON von Hand anhängen oder neu aufsetzen.