Branding & Design
Gestalte ShiftScan in deiner Marke: Farben, Logo, Favicon und App-Icon. Du kannst Farben und Logo automatisch von deiner Website importieren, fertige Vorlagen nutzen oder alles einzeln einstellen. (Eigenes Branding ist ab dem Professional-Plan verfügbar.)
Wofür ist diese Seite?
Auf „Branding & Design" machst du ShiftScan zu deiner eigenen App: Du legst die firmenweiten Farben (Sidebar, Akzent, Hintergrund, Schrift), das Logo, das Favicon (Browser-Tab-Symbol) und das App-Icon (Homescreen) fest. Diese Einstellungen gelten für ALLE Nutzer deines Betriebs und erscheinen u. a. auf Rechnungen, im Bewerber- und Umfrage-Portal sowie in der installierten App. Eigenes Branding ist ab dem Professional-Plan verfügbar; den Dunkelmodus kann jeder über den Theme-Umschalter („Darstellung") nutzen.
In 30 Sekunden
- •Optional: Website-URL eingeben und „Holen" — Farben und Logo werden automatisch übernommen.
- •Eine fertige Vorlage anklicken oder Sidebar-/Akzent-/Hintergrundfarbe selbst wählen.
- •Logo, Favicon und App-Icon hochladen (oder per URL einfügen).
- •Live-Vorschau prüfen und „Speichern" — danach Seite neu laden.
Schritt für Schritt
- 1
Öffne „Einstellungen" → „White Label" → „Branding & Design". Am schnellsten geht es per Import: Trage oben unter „Marke aus Website übernehmen" die Adresse deiner Firmen-Website ein und klick „Holen" — ShiftScan zieht Farben und Logo-Vorschläge.
Die Branding-Seite mit Website-Import, Vorlagen und Live-Vorschau. - 2
Feinjustiere die Farben: Wähle eine der Vorlagen oder stelle Sidebar-Farbe, Akzentfarbe, Hintergrund, Schrift, Textfeld-Farben, Schriftart und Ecken-Rundung einzeln ein. Die Live-Vorschau darüber zeigt das Ergebnis sofort.
Die Farb- und Form-Optionen (mit Kontrast-Prüfung der Akzentfarbe). - 3
Lade dein Logo hoch oder füge eine URL ein. Über „🎨 Akzentfarbe aus Logo ermitteln" übernimmst du die Markenfarbe direkt aus dem Logo; „Für PDF aufbereiten" wandelt es in PNG für Rechnungen um.
Logo hochladen oder per URL einfügen. - 4
Ergänze optional App-Name, Favicon und App-Icon und klick auf „Speichern". Lade die Seite neu, um alle Änderungen (auch Sidebar/Manifest) zu sehen. Über „Zurücksetzen" stellst du das Standard-Branding wieder her.
Feld für Feld
- Marke aus Website übernehmen
- URL deiner Website eingeben und „Holen": importiert Farben (Sidebar/Akzent/Hintergrund) und schlägt passende Logos vor.
- Vorlagen
- Fertige Farb-Sets zum Anklicken (ShiftScan, Petrol, Wald, …) als Startpunkt — danach beliebig anpassbar. Alle Default-Themes erfüllen den AA-Kontrast (keine Lesbarkeitswarnung).
- Sidebar-/Akzent-/Hintergrund-/Schriftfarbe
- Die Kernfarben. Die Akzentfarbe wird live auf WCAG-Kontrast geprüft — bei schlechter Lesbarkeit als Linktext gibt es eine Warnung samt Abdunkel-Vorschlag.
- Textfeld-Farben · Schriftart · Ecken-Rundung
- Feinheiten für Eingabefelder (Grund/Rahmen), die Schrift (System/Verdana/Georgia/Mono) und die Button-Rundung (eckig … rund).
- Logo
- Erscheint in der Sidebar und auf Dokumenten/Rechnungen. Upload oder URL; „Für PDF aufbereiten" wandelt WebP/SVG in PNG, damit es auf PDFs erscheint.
- Favicon
- Das kleine Symbol im Browser-Tab, in Lesezeichen und im Verlauf. Quadratisch, 32–512 px (PNG/SVG/ICO). Leer = Logo.
- App-Icon & App-Name
- Symbol und Name der installierten App auf dem Homescreen. Icon quadratisch 512×512 px (PNG/SVG); Name leer = Firmenname.
Tipp
Der schnellste Weg: Website-URL eingeben, „Holen" — Farben und Logo kommen automatisch. Danach übernimmst du mit „🎨 Akzentfarbe aus Logo ermitteln" die exakte Markenfarbe aus deinem Logo. So sieht die App in zwei Klicks nach deiner Marke aus.
Stolperfalle
Nach „Speichern" musst du die Seite neu laden, damit alle Änderungen (Sidebar, Favicon, App-Manifest) überall greifen. Beachte zudem die Kontrast-Warnung bei der Akzentfarbe: Sehr helle Farben sind als Linktext schlecht lesbar (WCAG-AA) — nutze den Abdunkel-Vorschlag. Logos/Icons als WebP oder SVG vorher „Für PDF/PWA aufbereiten", sonst fehlen sie auf Rechnungen bzw. bei der Installation.
Häufige Fragen
Warum sehe ich nur einen Hinweis statt der Branding-Optionen?
Eigenes Branding (Farben, Logo, Icons) ist ab dem Professional-Plan verfügbar. Den Dunkelmodus kannst du unabhängig davon über den Theme-Umschalter („Darstellung") nutzen.
Wo erscheint mein Logo überall?
In der Sidebar, auf Rechnungen und PDFs, im Bewerber- und Umfrage-Portal sowie — als App-Icon — auf dem Homescreen der installierten App. Das Favicon ist das Browser-Tab-Symbol.
Was macht „Zurücksetzen"?
Es stellt das Standard-ShiftScan-Branding wieder her (Farben, Logo und Icons werden geleert). Die Seite lädt danach neu.
Was bedeutet das ✨ neben einem Logo-Vorschlag?
Beim Import sammelt ShiftScan alle Bilder und Farben deiner Website. Ein Assistent sortiert daraus den wahrscheinlichsten Kandidaten nach vorn und markiert ihn mit ✨ — hilfreich, weil viele Websites Referenzkunden-Logos zeigen, die dem eigenen zum Verwechseln ähnlich sehen. Übernommen wird nichts von allein: du tippst den Vorschlag an, oder wählst einen anderen. Ist der Assistent nicht verfügbar, erscheint einfach kein ✨ und die Liste bleibt vollständig nutzbar.