Design Tokens

Design Tokens sind die zentralen Einstellungen, die das Aussehen deiner gesamten Website bestimmen. Dazu gehören: • Farben – Primärfarbe, Sekundärfarbe, Akzent, Hintergrund, Text • Schriftarten – Überschriften-Font und Text-Font • Abstände – Abstände zwischen Abschnitten • Eckenradius – Wie rund Buttons und Karten sind • Schatten – Standard-Schattenstil für Karten und Elemente Wenn du ein Design Token änderst, wird die gesamte Website automatisch aktualisiert. Du musst nicht jeden Block einzeln anpassen.

Gehe zu Design → Farben. Du siehst die folgenden Farbfelder: • Primär – Die Hauptfarbe deiner Marke (Buttons, Links, Akzente) • Sekundär – Eine zweite Akzentfarbe • Akzent – Zusätzliche Hervorhebungsfarbe • Hintergrund – Die Hintergrundfarbe der Seite • Oberfläche – Hintergrundfarbe für Karten und Abschnitte • Text – Standard-Textfarbe • Text gedämpft – Farbe für Untertexte und Platzhalter Klicke auf ein Farbfeld, um den Farbwähler zu öffnen. Du kannst einen HEX-Code eingeben oder eine Farbe visuell auswählen.

Aktiviere Dark Mode über den Toggle unten im Farben-Panel. Du kannst separate Farben für den dunklen Modus einstellen: • Primär (dunkel) – Oft eine hellere Variante deiner Primärfarbe • Hintergrund (dunkel) – Dunkler Hintergrund (z.B. #1a1a2e) • Text (dunkel) – Helle Textfarbe für Lesbarkeit Wenn Dark Mode aktiviert ist, sehen Besucher einen Sonne/Mond-Toggle auf deiner Website. Ihre Präferenz wird gespeichert.

Gehe zu Design → Schriftarten. Du kannst zwei Fonts einstellen: • Überschriften-Font – Wird für alle Überschriften (H1 bis H6) verwendet • Text-Font – Wird für Absätze und anderen Text verwendet Wähle aus Hunderten von Google Fonts. Gib den Schriftnamen ein, um zu suchen. Die Schrift wird automatisch auf deiner Website geladen.

Gehe zu Design → Abstände. Hier stellst du die Standard-Abstände ein: • Abschnitt-Abstand – Vertikaler Abstand zwischen Abschnitten (z.B. 64px, 80px, 96px) • Inhalts-Padding – Innenabstand innerhalb von Abschnitten Diese Werte gelten als Standard für alle Abschnitte. Du kannst pro Block noch individuell über den Inspektor überschreiben.

Gehe zu Design → Eckenradius. Dies bestimmt, wie rund Elemente sind: • Keine (0px) – Scharfe Ecken, geschäftlich • Klein (4-8px) – Dezent abgerundet • Mittel (12-16px) – Modern und freundlich • Groß (24px+) – Stark abgerundet, verspielt Der Eckenradius gilt für Buttons, Karten, Eingabefelder und Bilder.

Gehe zu Design → Schatten. Schatten verleihen Karten und Elementen Tiefe. Wähle ein Preset: • Keine – Flaches Design, kein Schatten • Dezent – Leichter Schatten, modern • Mittel – Deutlicher Schatten, Karten heben sich ab • Stark – Auffälliger Schatten, viel Tiefe Die Schatten-Einstellung gilt für alle kartenartigen Elemente auf deiner Website.

Klicke auf 'Speichern', um deine Design Tokens zu speichern. Änderungen sind sofort auf deiner Live-Website sichtbar. • Alles zurücksetzen – Setzt alle Tokens auf Standardwerte zurück • Sperren – Sperre einzelne Farben, damit sie bei KI-Generierung oder Template-Import nicht überschrieben werden Hinweis: Design Tokens werden pro Website gespeichert. Jede Website hat ihren eigenen Satz Tokens.