Marke & Design

Farben, Schrift und Formen einmal einstellen — Checkout, Landingpages, Erfolgsseiten, Kundenmails und Kursbereich übernehmen sie.

AnleitungenTeilweise ProAktualisiert: 12. September 2026

Bis September 2026 wurde jede Seite einzeln eingefärbt. Wer vier Checkout-Seiten, eine Erfolgsseite und eine Landingpage hatte, hat seine Markenfarbe sechsmal eingetippt — und beim nächsten Angebot ein siebtes Mal.

Design → Marke & Design ist die eine Stelle, an der das jetzt steht.

Wo es liegt#

Design → Marke & Design, als erster Eintrag über den Seitenlisten. Der Bildschirm speichert von selbst: Es gibt keine Speichern-Schaltfläche, oben rechts steht stattdessen „Automatisches Speichern aktiv" und beim Tippen „Gespeichert".

Der Bildschirm „Marke & Design" im Dashboard. Links die Karte „Farben" mit den Feldern Primärfarbe (#D2691E), Sekundärfarbe (#FDF4EC), Farbe für Überschriften (#1C1917), Farbe für Fließtext (#44403C) und Seitenhintergrund (#FFFFFF), jeweils mit Farbfeld und Schaltfläche „Farbwähler". Unter der Primärfarbe ein oranger Hinweis: „Weiße Schrift ist auf dieser Farbe schwer lesbar (3.6:1). Deine Schaltflächen bekommen darum automatisch schwarze Schrift. Die Farbe kannst du so lassen." Darunter die Karte „Typ" mit der Schrift Poppins und der Textgröße 17, und die Karte „Formen und Bedienelemente" mit Eckenradius 12, Stil der Schaltflächen „Gefüllt", Stil der Formularfelder und Kopfzeile im Kursbereich. Rechts die Vorschau mit den Reitern Checkout, Landingpage, E-Mail, Kursbereich und Kunden-Login; im Reiter Checkout ein Beispiel-Checkout mit orangefarbener Schaltfläche „Jetzt kaufen". — Links stellst du ein, rechts siehst du es — an Beispielinhalten, nicht an deiner echten Seite.

Die Vorschau rechts zeigt Beispielinhalte in deinen Farben, nicht deine echten Seiten. Sie hat fünf Reiter, weil dieselben Farben auf fünf sehr unterschiedlichen Oberflächen landen.

Solange du nichts eingestellt hast, steht über den Karten „So sehen deine Seiten im Moment aus — mit unserem Standard-Design". Die Farbfelder zeigen dann unsere Vorgaben als blasse Platzhalter und tragen die Markierung Standard. Gespeichert wird nichts davon: Ein Shop ohne eigene Marke folgt weiter unseren Vorgaben, auch wenn wir sie einmal ändern.

Fang mit der Primärfarbe an#

Das ist die Farbe jeder Aktion: Schaltflächen, Fortschrittsbalken, aktive Navigation, Häkchen. Nimm den Wert von deiner Website, alles andere ergibt sich daraus.

Feld	Wo es landet
Primärfarbe	Jede Aktion: Schaltflächen, Fortschrittsbalken, aktive Navigation, Häkchen
Sekundärfarbe	Nur Flächen: Abschnitts-Hintergründe, Bestellübersicht, Tags. Nie eine Schaltfläche
Farbe für Überschriften	Titel und Zwischentitel auf allen Seiten
Farbe für Fließtext	Absätze, Beschreibungen, Feldbeschriftungen
Seitenhintergrund	Die Fläche hinter deinen Seiten. Weiß oder ein sehr heller Ton

Farben werden als Hex-Wert eingegeben (#D2691E) oder über den Farbwähler gesucht. Ein halb getippter Wert wird nicht gespeichert — das Feld sagt dann, welche Farbe deine Seiten weiterhin verwenden.

Die Kontrast-Hinweise#

Zwei Hinweise können auftauchen, und sie tun Unterschiedliches:

„Weiße Schrift ist auf dieser Farbe schwer lesbar (3.6:1)." Betrifft nur deine Schaltflächen. Rabbit Checkout beschriftet sie dann automatisch schwarz statt weiß. Du musst nichts tun, die Farbe bleibt deine.
„Dieser Text ist auf deinem Seitenhintergrund kaum lesbar." Betrifft Überschriften oder Fließtext. Hier wird nichts automatisch korrigiert, du bekommst einen dunkleren Ton vorgeschlagen — und die Farbe wird trotzdem gespeichert, wenn du dabei bleibst.

Empfohlen ist ein Kontrast von 4,5:1. Das ist keine Schikane: Dein Checkout ist die Seite, auf der jemand seine Karte eintippt. Wer die Feldbeschriftung nicht lesen kann, bricht ab.

Schrift#

18 geprüfte Schriften, von Inter und Poppins über Merriweather und Lora bis Bebas Neue. Dazu die Größe des Fließtextes, zwischen 14 und 20 Pixeln (Standard: 16).

Die Schriften kommen nicht von Google. Sie werden über Bunny Fonts aus der EU ausgeliefert. Eine Einbindung von fonts.googleapis.com würde beim Aufruf deiner Checkout-Seite die IP-Adresse deines Käufers an einen US-Anbieter übertragen — genau das, weswegen viele Händler zu uns kommen. Darum gibt es hier eine kurze, geprüfte Liste und kein Feld für beliebige Schriftnamen.

Es gibt eine Schrift, nicht zwei: Sie gilt auch für Überschriften. Der Grund liegt im Seiten-Editor — Überschriften auf einer Checkout-Seite sind Text-Blöcke mit großer Schriftgröße, keine eigenen Überschriften-Elemente. Eine zweite Schriftauswahl würde auf der Oberfläche, um die es Händlern am meisten geht, nichts tun.

Formen und Bedienelemente#

Einstellung	Auswahl	Standard
Eckenradius	0 bis 24 Pixel; 0 für eckige Kanten. Gilt für Schaltflächen, Karten und Felder	6
Stil der Schaltflächen	Gefüllt · Umrandet · Zarter Ton	Gefüllt
Stil der Formularfelder	Unterstrichen · Zentriert	Unterstrichen
Kopfzeile im Kursbereich	Weiß · Heller Farbton · Akzentfarbe	Weiß

Die Vorschau im Reiter „Kursbereich": eine Kopfzeile in der Akzentfarbe mit den Initialen und dem Namen des Shops, darunter eine Kursübersicht mit Fortschrittsbalken und Lektionsliste in denselben Farben. — Die Kopfzeile im Kursbereich ist die einzige Einstellung, die nur eine Oberfläche betrifft.

Wo das gilt — und wo nicht#

Das ist die Frage, die die meiste Verwirrung spart. Der Bildschirm beantwortet sie unten selbst:

Der untere Teil des Bildschirms „Marke & Design". Links endet die Karte „Formen und Bedienelemente" mit Stil der Schaltflächen („Gefüllt"), Stil der Formularfelder („Zentriert") und Kopfzeile im Kursbereich („Akzentfarbe"). Darunter die Karte „Wo das benutzt wird" mit dem Untertitel „Einzelne Seiten können im Editor jederzeit davon abweichen." und acht Zeilen: Checkout-Seiten, Landingpages, Erfolgs- und Upsell-Seiten, E-Mails an Kunden, Kursbereich und Community, Kunden-Login — jeweils „Folgt deinem Design"; Rechnungen — „Folgt deinem Design, sofern du dort keine Farbe setzt"; Cookie-Banner — „Hat eine eigene Farbeinstellung". Rechts die Vorschau mit den Reitern Checkout, Landingpage, E-Mail, Kursbereich und Kunden-Login. — In einem Starter-Shop steht bei den drei mittleren Zeilen „Unser Design — ab PRO enthalten“.

Zwei Zeilen darin sind Ausnahmen, und zwar absichtlich:

Rechnungen folgen deiner Marke — sofern in den Rechnungseinstellungen keine eigene Akzentfarbe steht. Steht dort eine, gewinnt sie → Rechnungen und Nummern.
Das Einwilligungsbanner hat seine eigene Farbeinstellung unter Einstellungen → Tracking & Einwilligung.

Im Starter-Tarif tragen Kundenmails, Kursbereich und Kunden-Login weiter unser Standard-Design; in der Liste steht dann „Unser Design — ab PRO enthalten". Der Bildschirm selbst ist trotzdem bedienbar, und Checkout-Seiten, Landingpages sowie Erfolgs- und Upsell-Seiten folgen deiner Marke in beiden Tarifen.

Wenn eine Seite anders aussehen soll#

Im Seiten-Editor trägt jede Seite den Schalter „Design des Shops übernehmen". Er ist bei neuen Seiten an und bedeutet: Farben und Schriften kommen aus Marke & Design, und was du auf dieser Seite einstellst, gewinnt für diese Seite.

Schaltest du ihn aus, wird das aktuelle Aussehen zuerst in die Seite geschrieben. Optisch passiert also nichts — die Seite hängt danach nur nicht mehr an der Shop-Einstellung und lässt sich frei umbauen. Wieder einschalten geht jederzeit; die Werte, die du auf der Seite gesetzt hast, behalten Vorrang.

Deshalb ändert eine Farbe in Marke & Design auch an bestehenden Seiten etwas, aber nur dort, wo die Seite selbst nichts gesetzt hat. Eine Seite, die du früher komplett durchgefärbt hast, bleibt so, wie sie ist — das ist gewollt und nicht ein Fehler in der Vererbung.

Was hier nicht liegt#

Dein Logo — das gehört zu Einstellungen → Allgemein → Medien und erscheint auf Rechnungen, in Mails und im Kursbereich.
Die Sprache deiner Kundenmails — Einstellungen → Allgemein → Grunddaten → Sprache.
Inhalte. Texte und Bilder deiner Seiten bearbeitest du im Seiten-Editor, nicht hier. Die Vorschau zeigt Beispielinhalte, damit du die Farben ohne Ablenkung beurteilen kannst.

Häufige Fragen

Im Dashboard unter Design → Marke & Design. Dort liegen Primär- und Sekundärfarbe, Farben für Überschriften, Fließtext und Seitenhintergrund, die Schrift, die Textgröße, der Eckenradius sowie der Stil von Schaltflächen und Formularfeldern. Der Bildschirm speichert automatisch, es gibt keine Speichern-Schaltfläche.

Ja, solange die Seite im Editor den Schalter „Design des Shops übernehmen“ anhat — das ist der Normalfall. Was du auf einer einzelnen Seite selbst eingestellt hast, bleibt erhalten und gewinnt gegen die Shop-Einstellung. Schaltest du den Schalter aus, wird das aktuelle Aussehen in die Seite geschrieben, damit sich optisch nichts ändert.

Der Bildschirm selbst ist in beiden Tarifen bedienbar, und Checkout-Seiten, Landingpages, Erfolgs- und Upsell-Seiten folgen in beiden Tarifen. Kundenmails, Kursbereich und Kunden-Login tragen erst ab Pro deine Marke; im Starter-Tarif bleiben sie im Standard-Design von Rabbit Checkout.

18 geprüfte Schriften, und nein: Sie kommen von Bunny Fonts und werden aus der EU ausgeliefert, nicht von Google Fonts. Das ist der Grund, warum es diese Auswahl überhaupt gibt — eine Einbindung von fonts.googleapis.com würde die IP-Adresse deiner Käufer beim Seitenaufruf an einen US-Anbieter geben.

Weil weiße Schrift auf dieser Farbe unter dem empfohlenen Kontrast von 4,5:1 liegt. Rabbit Checkout lehnt die Farbe nicht ab, sondern beschriftet deine Schaltflächen automatisch schwarz statt weiß. Deine Farbe bleibt gespeichert.

Weil in den Rechnungseinstellungen eine eigene Akzentfarbe gesetzt ist. Die gewinnt gegen Marke & Design. Lösche sie dort, dann folgt die Rechnung wieder deinem Shop-Design. Auch das Einwilligungsbanner hat eine eigene Farbeinstellung.

Frage nicht beantwortet? Schreib uns — deutscher Support, echte Menschen.