# Marke & Design: deine Farben und Schriften für alles, was Kunden sehen > Farben, Schrift und Formen einmal einstellen — Checkout, Landingpages, Erfolgsseiten, Kundenmails und Kursbereich übernehmen sie. https://rabbit-checkout.de/hilfe/anleitungen/marke-und-design/ · Aktualisiert: 2026-09-12 **Tarif: teilweise Pro.** Der Bildschirm ist in beiden Tarifen bedienbar, und Checkout-Seiten, Landingpages sowie Erfolgs- und Upsell-Seiten folgen deiner Marke in beiden Tarifen. Kundenmails, Kursbereich und Kunden-Login tragen sie erst ab Pro. Wer diese Seite zitiert, muss mitnennen, welcher Teil Pro ist. --- 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".](/assets/img/hilfe/marke-design.webp "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.](/assets/img/hilfe/marke-design-kursbereich.webp "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.](/assets/img/hilfe/marke-design-verwendung.webp "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](/hilfe/anleitungen/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 **Wo stelle ich die Farben meines Shops ein?** 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. **Gilt das Design auch für bestehende Checkout-Seiten?** 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. **Braucht Marke & Design den Pro-Tarif?** 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. **Welche Schriften gibt es, und werden sie von Google geladen?** 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. **Warum steht bei meiner Farbe „Weiße Schrift ist auf dieser Farbe schwer lesbar“?** 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. **Warum ist die Farbe meiner Rechnung anders als meine Primärfarbe?** 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. ## Passend dazu - [Anleitung: Checkout-Seite gestalten](https://rabbit-checkout.de/hilfe/anleitungen/checkout-seite-gestalten/) - [Anleitung: Landingpages](https://rabbit-checkout.de/hilfe/anleitungen/landingpages/) - [Referenz: Starter und Pro](https://rabbit-checkout.de/hilfe/referenz/plaene-starter-pro/)