STYLEKIT PRO

CI-Handbuch als HTML-Seite auf der Ziel-Domain
Komplettes CI-Dokument als eigenständige Seite, inkl. vordefinierter Bereiche (Typografie, Farben, Website-Einstellungen, Buttons, Responsive, Layout, Performance, Rollen).

Tabellenbasierter Editor für alle Vorgaben
Typografie-Zeilen, Farbwerte, Abstände, Breakpoints, Template-Regeln, Rollen etc. werden in Tabellen gepflegt – Zeilen und Spalten können hinzugefügt, dupliziert, verschoben oder gelöscht werden.

Schwebende Live-Vorschau für Typografie & Buttons
Floating Preview-Fenster:

• Auswahl der Typo-Zeilen für Dachzeile, Überschrift, Fließtext

• Vorschau-Button auf Basis der Button-Tabelle (BG, Textfarbe, Radius, Padding, Font/Weight)

• freier Beispieltext für Fließtext-Vorschau

Gesteuert wird alles über die Tabellenzeilen – kein Prototypen-Kram, direkt gekoppelt an die echten Werte.

Farbsystem mit Chips, Picker & Kontrastprüfung

• Hex-Werte in Tabellen werden automatisch als Farbfelder (Chips) dargestellt

• Klick auf Chip → integrierter Farbwähler

• Anzeige einer Fokus-Farbe samt Vorschau

• Automatische Kontrastberechnung (AA/AAA-Check) gegen hellen oder dunklen Preview-Hintergrund

Bereichs- und Vorlagen-System

• Bereiche („Sektionen“) können hinzugefügt, verschoben und gelöscht werden

• Vorlagen für typische CI-Bausteine: Bilderformate, Buttons, Menü, Container, Boxen, Hintergründe, Listings usw.

• Tabellen können innerhalb eines Bereichs neu eingefügt oder entfernt werden

Undo/Redo & Auto-Save mit Server-Speicher

• Verlauf mit Rückgängig/Wiederholen

• automatische Speicherung in data.json auf dem Server

• manuelles Speichern per Tastenkürzel möglich

• „Zurücksetzen“ lädt den Serverstand und verwirft lokale Änderungen

Exportfunktionen

• CSS-Export: erzeugt eine CSS-Datei mit Brand-Variablen und Farbtokens (z. B. --brand-primary, --color-*)

• JSON-Export: alle Tabellen als strukturierte JSON-Daten (inkl. Bereichs-Titel, Header, Rows)

• HTML-Export: komplette CI-Handbuch-Seite als eigenständige HTML-Datei zum Download

• Druck/PDF: optimiertes Print-Layout (A4 Querformat) über die Browser-Druckfunktion

Farbschalter & Theme-Modi

• Primär-, Akzent- und Highlightfarbe direkt über Farbfelder steuerbar

• getrennte Farben für helle/dunkle Vorschau-Hintergründe

• Dark-Mode für die CI-Handbuch-Oberfläche

Lizenz-Client & Passwortschutz

• Lizenzprüfung über eingebundenes Lizenz-Modul (license-client.js / API)

• Ohne gültige Lizenz wird die Anwendung blockiert

• Bearbeiten nur nach Passwort-Freigabe (Passwort wird gehasht gespeichert, nicht im Klartext)

• Lesen ist möglich, Bearbeiten ist geschützt

• Alle CI-Vorgaben liegen dort, wo die Website lebt – auf der Domain

• Tabellen sind schnell pflegbar, erweiterbar und für Entwickler sofort lesbar

• Live-Vorschau hängt direkt an deinen Typo- und Button-Zeilen

• Kontrast- und Farbwahlen sind nachvollziehbar dokumentiert

• Änderungen an CI-Werten schlagen direkt im Handbuch durch – ohne neues PDF, ohne neues Designfile

• Durch Lizenz + Passwort bleibt das System unter Kontrolle und kann nicht „aus Versehen“ zerschossen werden

✔ Agenturen, die pro Website ein sauberes, techniknahes CI-Handbuch auf der Domain ablegen wollen
✔ Entwickler, die konkrete Werte (rem, px, Hex, Breakpoints) statt Screenshots und PDFs brauchen
✔ Teams, die Typografie, Farbwerte, Buttons, Layout-Regeln und Rollen an einem Ort bündeln wollen
✔ Projekte, die klare Vorgaben für Folgearbeiten, Relaunches oder neue Mitarbeiter brauchen
✔ Webprojekte, bei denen „Figma + PDF + Word + E-Mail“ durch ein einziges, stabiles CI-Dokument ersetzt werden soll

• Lizenzmodell: 1 Lizenz = 1 Domain (projektgebunden)

• Einzellizenz: 149,99 € (einmalig, pro Domain)

• Agentur-Bundle (optional): 10 Lizenzen zu je 99,99 € pro Domain

• Die Lizenz ist an die Domain gebunden. Die CI-Handbuch-Seite bleibt dauerhaft auf dieser Domain nutzbar, Bearbeiten ist lizenz- und passwortgeschützt.

• Erstellung der CI selbst (Farbsystem, Typo-Konzept, Layout-Definitionen etc.)

• Umsetzung im Frontend-Code der eigentlichen Website

• Hosting oder CMS-Integration

• Anpassung des Tools über die vorhandenen Funktionen hinaus (Custom-Features)

• Schulung oder Workshops (optional separat buchbar)

• Das Tool ist bewusst auf Desktop-Bearbeitung ausgelegt (fixe Viewport-Breite, Tabellen-UI).

• Es gibt keine Geräte-Simulation wie „Tablet/Mobile-Ansicht“ im Sinne eines Layout-Builders – Responsive-Regeln werden tabellarisch dokumentiert.

• Die Anwendung setzt eine funktionierende Serverumgebung mit PHP für die Speicher- und Lizenz-Endpunkte voraus.