Design-Tokens
Design-Tokens sind die zentralen Stellschrauben fuer das Erscheinungsbild deiner Website. Farben, Schriften, Abstaende, Border-Radius, Breakpoints — alles liegt in einem LESS-Stylesheet, das zu CSS kompiliert und ueberall im oeffentlichen Auftritt angewendet wird.
Diese Seite zeigt dir, wie du den Editor oeffnest, Tokens aenderst, das Ergebnis pruefst und speicherst.
Wo das Modul liegt
Klicke Settings → Design in der Sidebar. Der CodeMirror-LESS-Editor oeffnet sich mit dem aktuellen Stylesheet aus der Datenbank.
Was im Stylesheet steht
Der obere Teil der Datei ist eine flache Liste von LESS-Variablen, gruppiert nach Zweck. Darunter stellt der :root { ... }-Block dieselben Werte als CSS Custom Properties bereit — so kannst du die Tokens auch aus Widget-CSS zur Laufzeit nutzen.
Alles darunter ist normales CSS. Du darfst es bearbeiten, aber die Tokens oben sind der Ort fuer die meisten Aenderungen — sie wirken sich auf das ganze Design aus.
Farben
| Token | Zweck |
|---|---|
@colorPrimary | Buttons, Links, Akzente. Die dominante Markenfarbe. |
@colorPrimaryHover | Hover-Status fuer Buttons. Meist eine abgedunkelte Primary-Farbe. |
@colorDanger | Fehler, Loeschen-Aktionen. |
@colorSuccess | Erfolgsmeldungen. |
@colorWarning | Warnungen, dezente Hinweise. |
@colorText | Fliesstext. |
@colorTextLight | Sekundaerer Text, Borders, Input-Outlines. |
@colorBackground | Seiten-Hintergrund. |
@colorBorder | Input-Borders, Trennlinien. |
@colorLink | Textlinks (alternativ zur Primary). |
@colorError | Error-Input-Border. |
Typografie
| Token | Zweck |
|---|---|
@fontBody | Haupt-Font-Stack fuer Fliesstext. |
@fontIcon | Icon-Schrift (standardmaessig Font Awesome). |
@fontSizeBase | Basis-Schriftgroesse (Default 14px). |
@fontSizeSmall | Kleiner Text, Captions, Labels. |
@fontWeightLight / @fontWeightRegular / @fontWeightMedium | Gewichte, die ueberall im Design verwendet werden. |
@lineHeightBase | Basis-Zeilenhoehe. |
Abstaende
| Token | Zweck |
|---|---|
@spacingBase | Einheit fuer feine Anpassungen (8px). |
@spacingSmall / @spacingMedium / @spacingLarge / @spacingXLarge | Gestaffelte Paddings und Margins. |
@spacingSection | Vertikaler Abstand zwischen Pagebuilder-Rows (.ns-row). |
@spacingForm | Abstand zwischen Form-Groups. |
Layout und Schatten
| Token | Zweck |
|---|---|
@radiusBase | Abrundungsradius fuer Buttons, Inputs, Cards. |
@radiusRound | Pillenfoermige Elemente. |
@inputHeight | Hoehe von Formularfeldern. |
@buttonLineHeight | Line-Height fuer .btn. |
@shadowCard | Card- / Nav-Dropshadow. |
Breakpoints
| Token | Zweck |
|---|---|
@breakpointDesktop | Unter dieser Breite greifen Desktop-Regeln nicht mehr (Default 991px). |
@breakpointMobile | Unter dieser Breite gelten Mobile-Regeln (Default 768px). |
Token aendern
- Oeffne Settings → Design.
- Suche die Variable oben in der Datei (z. B.
@colorPrimary). - Aendere den Wert. Du kannst jeden gueltigen LESS-Wert nehmen — Hex,
rgb(),rgba(), LESS-Helper wiedarken(#0368DB, 8%). - Klicke Save & Compile oben rechts.
Das Frontend uebernimmt das neue CSS beim naechsten Seitenaufruf — kein Deployment, kein Nuxt-Build noetig.
Vorschau vor dem Speichern
Aenderungen werden erst nach Save & Compile angewendet. Oeffne die oeffentliche Seite in einem zweiten Browser-Tab und lade sie nach dem Speichern neu, um das Ergebnis zu sehen.
Auf Default zuruecksetzen
Wenn du eine ganze Sitzung an Aenderungen rueckgaengig machen willst, klicke Reset to Default oben rechts. Du wirst um Bestaetigung gebeten. Der Editor laedt die ausgelieferte Default-LESS-Datei; Save & Compile schreibt sie zurueck in die Datenbank.
Reset loescht das Custom-Stylesheet
Reset ersetzt jede Zeile im Editor — auch eigene CSS-Regeln unterhalb des Token-Bereichs sind dann weg. Kopiere Bloecke, die du behalten willst, vor dem Reset raus.
Design von einer anderen Website uebernehmen
Statt jeden Token von Hand zu justieren, misst Design-Copy eine bestehende Website — Farben, Typografie, Abstaende — und generiert dir einen passenden Token-Entwurf. Es werden nur Token-Werte gelesen; kein fremdes CSS und kein Markup wird in deine Seite importiert.
Das Design-Copy-Panel liegt oben in Settings → Design.
- Gib eine oder mehrere Quell-URLs ein (eine pro Zeile, max. 5).
- Waehle die Breakpoints, die gemessen werden sollen (desktop, tablet, mobile).
- Setze den Haken, dass du das Design klonen darfst.
- Klicke Start clone. Ein Fortschrittsbalken zeigt die Phasen (harvesting → analyzing → assembling → …).
Wenn der Lauf fertig ist, erscheint ein Pending design draft-Panel mit einem Coverage-Report und einem Diff des aktuellen Live-Stylesheets gegenueber dem neuen Draft.
- Preview oeffnet die Live-Seite mit dem Entwurf als Overlay — es wird noch nichts gespeichert.
- Apply to live schreibt den Entwurf in das Live-Stylesheet. Die aktuellen Live-Styles werden vorher als Snapshot gesichert, du kannst also zurueck.
- Discard verwirft den Entwurf, ohne die Live-Seite anzufassen.
Um das letzte Apply rueckgaengig zu machen, klicke Undo apply im Editor-Header — es stellt die Styles von vor dem Apply wieder her.
Klone nur Designs, die du nutzen darfst
Das Klonen liest die visuellen Tokens der Quell-Seite. Fuehre es nur gegen Seiten aus, die dir gehoeren oder die du reproduzieren darfst.
Tokens, keine Kopie
Design-Copy importiert niemals CSS, Schriften oder Markup der Quell-Seite. Es leitet Token-Werte ab (Farben, Font-Familien, Groessen) und schreibt sie in deinen eigenen Token-Satz — das Ergebnis bleibt voll deins und editierbar.
Erstellte Designs
Jedes erfolgreich erstellte Design wird unter Created designs gelistet, neueste zuerst, beschriftet mit Quell-Seite und Datum. Fehlgeschlagene Laeufe werden nicht gelistet.
- Preview rendert das Design ueber die Live-Seite, ohne etwas zu aendern — ein schneller Sicht-Check.
- Restore laedt das Design als Entwurf zurueck. Von dort aus pruefst und uebernimmst du es ueber den normalen Draft-Flow oben.
So kannst du jederzeit zu einem frueheren Design zurueckkehren — auch nachdem du ein anderes uebernommen hast.
E-Mail-Farben
Das E-mail colors-Panel setzt die Farben fuer ausgehende System- und Transaktions-Mails — Passwort-Reset, Registrierung, Bestell- und Abo-Bestaetigungen sowie Benachrichtigungen. Diese Werte werden direkt in das E-Mail-Template gerendert.
Sie sind ein eigener Token-Satz, getrennt von den LESS-Tokens oben, denn E-Mail-Clients (Outlook, Gmail) unterstuetzen keine CSS-Variablen — die Farben muessen als feste Werte in jede Mail eingebacken werden.
| Feld | Steuert |
|---|---|
| Background | Den Seitenhintergrund hinter der E-Mail-Karte. |
| Surface (card) | Hintergrund der E-Mail-Karte und des Headers. |
| Subtle (footer) | Footer-Hintergrund und Tabellen-Kopf-Hintergrund. |
| Text | Fliesstext. |
| Heading | Ueberschriften (h1–h3). |
| Muted text | Footer- und Sekundaertext. |
| Accent (links / button) | Links und der Hintergrund des Call-to-Action-Buttons. |
| Accent text | Text auf dem Accent-Button. |
| Border | Trennlinien in Header, Footer und Tabellen. |
| Font family | Der Font-Stack fuer die ganze Mail. Nutze web-sichere Schriften — E-Mail-Clients koennen Webfonts nicht zuverlaessig laden. |
- Oeffne Settings → Design und scrolle zu E-mail colors.
- Waehle pro Feld eine Farbe ueber das Farbfeld oder tippe einen Hex-Wert. Setze die Font family.
- Beobachte die Live-Mini-Vorschau (Header → Ueberschrift → Text → Button → Footer), wie sie sich beim Aendern der Werte aktualisiert.
- Klicke Save. Defaults setzt jedes Feld auf die ausgelieferten Werte zurueck.
Wo diese Farben gelten
Jede Mail, die das zentrale Template nutzt, erbt diese Farben — Reset, Registrierung, Bestaetigungen und Benachrichtigungen gleichermassen. Es gibt keine Farb-Ueberschreibung pro Mail.
Custom LESS vs. Theme LESS
Zwei Stylesheet-Ebenen laufen auf der oeffentlichen Seite zusammen:
- Custom LESS (dieser Editor) — liegt in der Datenbank, im Backend editierbar, laedt ohne Deploy neu.
- Theme LESS (
_theme/{projekt}/public/css/…) — wird mit dem Nuxt-Theme ausgeliefert. Nur von einem Entwickler mit Code-Zugriff aenderbar. Wird beim Build kompiliert.
Custom LESS wird nach Theme LESS geladen, daher gewinnen Custom-Regeln bei gleichem Selektor.
Ist ein Token im Custom LESS gesetzt, ueberschreibt es auch die Theme-Defaults fuer die --me-*-Variablen des Menu Editors und jedes Widget, das die --color-*-Custom-Properties nutzt.
Wo die Datei gespeichert ist
Das kompilierte CSS liegt im Server-CSS-Cache, die LESS-Quelle in der Spalte website.custom_less. Ein Syntax-Fehler im LESS laesst das bisherige CSS aktiv und zeigt einen Fehler unter dem Editor — du kannst die Live-Seite also nie durch eine falsche Klammer kaputtmachen.
Haeufige Fehler
Syntax-Fehler blockieren das Speichern
Wenn das LESS nicht kompiliert, schlaegt das Speichern fehl und ein roter Banner zeigt die fehlerhafte Zeile. Fehler korrigieren und Save & Compile nochmal druecken. Das alte CSS bleibt in der Zwischenzeit aktiv.
Farb-Funktionen brauchen Hex-Input
LESS-Helper wie darken(), lighten(), fade() brauchen Hex-Werte. rgb() oder eine CSS-Variable als Input funktioniert nicht.
Browser-Cache
Nach dem Speichern ein Hard-Reload (Ctrl+Shift+R oder Cmd+Shift+R) auf der oeffentlichen Seite machen, falls die alten Farben noch zu sehen sind. Das CMS setzt Cache-Header auf dem kompilierten CSS, aber Browser ignorieren sie bei einem weichen Reload.
Siehe auch
- SEO-Meta pro Seite — Titel, Description, Canonical, OG-Bild.
- Redirects — URLs auch nach einer Umbenennung am Leben halten.
- AI-Textgenerierung — CSS-Snippets per AI erzeugen.