WP-LIT-MCP/docs/guides/divi-design-system.md

Divi-Designsystem

lit-divi-design-system liest das Designsystem der Website live aus Divi:

• Globale Farben (colors): ID (gcid-…), Name, Wert und der Platzhalter für neue Inhalte, z. B. {{color:primary}} für die Primärfarbe oder {{color:Nachtblau}} für eine eigene globale Farbe. Die fünf Theme-Farben heißen primary, secondary, heading, body und link.
• Globale Variablen (variables): Zahlen, Texte, Bilder, Links (gvid-…), Platzhalter {{var:<Name>}}.
• Theme-Schriften (fonts): Überschrift und Fließtext, Platzhalter {{font:heading}} / {{font:body}}.
• Größen (sizes): Schriftgrößen, Inhaltsbreite und Spaltenabstand aus den Theme-Optionen.
• Presets (presets): Modul-Presets je Modul (kind: module, z. B. alle Button-Presets) und Gruppen-Presets (kind: group); default: true markiert das Standard-Preset eines Moduls.

Regeln:

1. Vor dem Gestalten einer Seite das Designsystem lesen.
2. Globale Farben, Variablen und Presets vor festen Werten verwenden; feste Farben oder Schriften nur, wenn der Nutzer es ausdrücklich möchte.
3. Gibt es für einen Zweck noch keine Farbe, Variable oder kein Preset, dem Nutzer vorschlagen, es im Divi-Builder anzulegen, statt feste Werte zu verteilen.