Zum Inhalt springen

Designsystem

Erscheinungsbild der Website und Design-Tokens.

Stile, Farben, Dunkelmodus, Schriften, Größen und Eckenradius für die ganze Website auf einmal – in Tabs, mit Live-Vorschau und WCAG-Kontrastprüfung.

Site appearance mit der Live-Vorschau rechts

Site appearance mit der Live-Vorschau rechts

Appearance → Site appearance ändert die ganze Website auf einmal. Rechts sehen Sie eine Live-Vorschau der Startseite (Desktop oder Smartphone); gespeichert wird erst, wenn Sie auf Save appearance klicken.

Drei Begriffe, überall gleich verwendet: Eine Startwebsite besteht aus Beispielinhalten plus einem Stil (Sie wählen sie bei der Installation), ein Stil ist ein fertiger Satz aus Farben, Schriften, Größen und Eckenradius, und ein Theme ist nur das alte, individuelle PHP-Theme, das manche Websites noch haben.

Die Tabs

  • Style – wählen Sie mit einem Klick einen Stil und passen Sie ihn in den anderen Tabs fein an. Der Stil, den Ihre Website verwendet, ist als current (aktuell) markiert.
  • Colours – Primär-, Sekundär-, Text-, Hintergrund- und Flächenfarbe. Abstufungen werden automatisch abgeleitet. Der Block Readability prüft den WCAG-Kontrast – ändern Sie jedes rot markierte Paar.
  • Dark mode – aus, passend zum Gerät des Besuchers oder immer dunkel, mit eigenen Farben und einem optionalen Umschalter für Besucher.
  • Fonts and sizes – Schriften für Überschriften und Text (auch eigene WOFF2-Dateien, gehostet auf Ihrem Server), Grundschriftgröße auf Smartphones und Monitoren, Größenverhältnis der Überschriften, Inhaltsbreite und die Typografie-Stile (Main title, Section heading, Lead…), die Sie im Builder für Elemente auswählen.
  • Shapes – Eckenradius für Schaltflächen, Karten, Bilder und Formularfelder.
  • Logo and icon – Logo und Icon.
  • Import and export – laden Sie das Aussehen als W3C Design Tokens (DTCG) für Figma oder Tokens Studio herunter und wieder hoch.

Ein Look aus Ihrer Marke

Sie müssen ihn nicht von Hand bauen: Binden Sie Claude an und beschreiben Sie Ihre Marke – Farben, Schriften, wie abgerundet. Claude speichert das im Designsystem, und Sie sehen das Ergebnis in der Vorschau.

Kommen Sie nicht weiter?

Fragen Sie auf GitHub oder schreiben Sie an info@kaletacms.com – mit jeder Frage wird die Anleitung besser.