Whitelabel-Design-Leitfaden

Dieses Dokument erklärt, was an Ihrer bessa-App gestaltet werden kann und welche Dateien Sie (oder Ihre Designerin bzw. Ihr Designer) dafür liefern müssen. Geben Sie es direkt an Ihre Gestalter weiter — es beschreibt jede Datei und jede Größe konkret.

Auf einen Blick: was wir von Ihnen brauchen

Eine vollständige Markenlieferung besteht aus:

Pflicht-Assets

1. Zwei Markenfarben — eine Primär- und eine Sekundärfarbe als Hex-Code

2. Ein App-Icon — ein quadratisches PNG, 1024 × 1024 px, ohne Transparenz

3. Ein Launch-Bild (Splash) — ein PNG, mindestens 1242 × 2688 px, ohne Transparenz

4. Ein Venue-Hintergrundbild — ein hochauflösendes Foto, das hinter dem Lokalnamen erscheint und maßgeblich den Look der App prägt

Optional

1. Eigene In-App-Icons — kleine PNGs für Tab-Leiste, Schnellaktionen, Aktions- und Social-Icons. Ohne Lieferung verwenden wir unsere Standard-Icons (siehe Tabellen unten).

2. Produktbilder für Karten-, Einlös- und bestellbare Artikel

3. App-Store-Screenshots — falls Sie eigene Marketing-Screenshots gestalten möchten. Sonst erzeugen wir sie automatisch aus der laufenden App.

Alles Weitere unten erklärt, wie diese Bausteine eingesetzt werden und worauf Sie beim Gestalten achten sollten.

Drei Beispiele: wie weit Sie gehen können

Bevor es in die Details geht — drei sehr unterschiedliche Marken-Looks, die alle auf demselben bessa-Whitelabel-System aufbauen. Zwei Hex-Farben plus ein paar Asset-Entscheidungen reichen, um völlig verschiedene Stimmungen zu erzeugen.

Das Eggenberg — gedämpft, naturnah, ruhig

Olivgrün (#818c60) auf warmem Beige (#e3e1d9). Linksbündige Kacheln, leise Schatten, ein abstraktes Berge-Symbol als Markenzeichen.

Paradiso — verspielt, italienisch, kräftig

Tomatenrot (#cd2d38) als Primärfarbe, sanftes Salbeigrün (#c0dfc9) als Hintergrund, dazu Pastellrosa (#f9ddd7) für die Tab-Leiste. Handschrift- artige Treuekarten-Überschriften und ein verspieltes Karo-Muster prägen den Look.

Das Leo — Premium, Schwarz-Gold, gastronomisch markant

Reines Schwarz (#0e0e0e) und Senfgelb (#ffd954). Dunkles Theme über alle Bereiche, hohe Kontraste, klare Typografie — wirkt wie eine hochwertige Bar-Karte.

Diese drei Marken laufen denselben App-Code mit denselben Layouts. Der gesamte Unterschied entsteht durch die Markenfarben und ein paar ausgetauschte Icons.

1. Markenfarben

Fast jede Farbe in der App leitet sich aus zwei Hex-Werten ab, die Sie liefern:

• Primärfarbe (mainColor) — Ihre Hauptmarkenfarbe. Wird für Buttons, Navigationsleiste, Tab-Leistenhintergrund, Akzente, Badges, den Treuepass-Stempel-Highlight, die Warenkorb-Leiste, Gutschein- Titel und die meisten Call-to-Action-Flächen verwendet.

• Sekundärfarbe (backgroundColor / Tile-Text) — die Kontrastfarbe, die auf der Primärfarbe sitzt (z. B. Kacheltext, Navigationstext). Der App-Hintergrund ist eine sehr helle Aufhellung dieser Farbe.

Hinweise für die Gestaltung

• Wählen Sie eine Primärfarbe mit starkem Kontrast. Text und Icons werden darauf entweder reinweiß oder reinschwarz gerendert — automatisch nach besserem Kontrast. Mittlere Töne (mittleres Grau, gedämpftes Oliv) erschweren diese Entscheidung. Entweder klar dunkel oder klar hell. Zum Prüfen eignet sich WebAIM Contrast Checker — Zielwert mindestens 4,5:1.

• Die Sekundärfarbe sollte aufgehellt gut wirken. Der App-Hintergrund ist die Sekundärfarbe um etwa 85 % aufgehellt (fast weiß mit einer Andeutung der Marke). Bei einer kräftigen Sekundärfarbe wird der aufgehellte Ton sehr blass — prüfen Sie, ob dieser Pastellton noch markenkonform wirkt.

• Vermeiden Sie zwei Farben mit gleicher Helligkeit. Primär und Sekundär müssen Kontrast zueinander haben — Kacheltext nutzt die Sekundärfarbe auf einer Primärfläche. Sind beide dunkel, verschwindet der Text.

• Denken Sie an die Statusleiste. Die System-Symbole (Uhrzeit, Akku, Empfang) wechseln automatisch: dunkle Primärfarbe → helle Statusleiste, helle Primärfarbe → dunkle Statusleiste.

Was später noch feinjustiert werden kann

Die Zwei-Farben-Formel liefert einen schlüssigen Ausgangspunkt — jede einzelne Bildschirmfarbe kann aber im Anschluss überschrieben werden. Ein dezidiertes Sheet-Theme, eine eigene Warenkorb-Farbe, andere Schatten oder ein anderer Voucher-Highlight sind jederzeit möglich.

Was alles themed werden kann

Die App ist in „Blöcke" aufgeteilt. Jeder Block hat eigene Farbwerte. Sie können alles aus den zwei Markenfarben ableiten lassen oder gezielt einzelne Bereiche überschreiben:

Zwei Gestaltungsentscheidungen, die wir oft besprechen:

• Kacheln linksbündig oder zentriert. Manche Marken wirken editorial-aufgeräumter linksbündig, andere bevorzugen zentriert. Pro App eine Entscheidung.

• Schattentiefe ist Markenausdruck. Eine sehr moderne, weiche Marke möchte eventuell kaum sichtbare Schatten; eine traditionellere Marke tiefere. Karten- und Kachelschatten sind unabhängig regelbar.

2. App-Icon

Lieferung: ein PNG, 1024 × 1024 px, quadratisch, ohne Alpha- Kanal / Transparenz.

Aus dieser einen Datei generieren wir automatisch alle benötigten Größen — vom 1024-px-Store-Icon bis zum 40-px-Notification-Icon. iPhone und Android verwenden dieselbe Quelle.

Hinweise für die Gestaltung

• Keine Transparenz. Apple lehnt Icons mit Alpha-Kanal ab. Füllen Sie die Ecken — das System rundet sie zur Laufzeit ab.

• Keine textlastigen Icons. Bei 40 px ist das Icon winzig. Ein Schriftzug, der bei 1024 px funktioniert, ist bei 40 px unleserlich. Nutzen Sie ein starkes Symbol oder Monogramm.

• Kein eingebauter Schlagschatten. Das Betriebssystem rendert eigene Schatten. Eingebaute Schatten wirken altbacken.

• Sicherheitsbereich. Wichtige Bildelemente innerhalb der zentralen ~80 % halten — die äußeren 10 % können auf Android mit adaptiven Icons sichtbar beschnitten werden.

3. Launch-Bild (Splash)

Lieferung: ein PNG. Mindestens 1242 × 2688 px (iPhone XS Max Auflösung). Mehr ist in Ordnung — wir skalieren herunter.

Dieses Bild sehen Nutzer für etwa eine Sekunde beim App-Start.

Hinweise für die Gestaltung

• Keine Transparenz. Das Bild wird auch als erstes App-Store- Screenshot wiederverwendet; Transparenz führt dort zu Upload-Fehlern.

• Komposition für viele Bildschirmgrößen. Das Bild wird randlos auf jeder iPhone-Größe (iPhone SE bis Pro Max) und auf jedem Android- Gerät dargestellt. Halten Sie das Schlüsselelement (Logo, Markenzeichen) zentriert mit großzügigem Atemraum an allen Seiten.

• Es sollte als Verlängerung der Markenfarbe wirken. Der Splash geht direkt in den Login- oder Home-Screen über, der Ihre Primär- und Sekundärfarbe verwendet. Ein Splash in völlig anderen Farben wirkt wie ein Bruch.

4. Eigene In-App-Icons (optional)

Wenn Sie das App-Innere mit eigenen Icons ausstatten möchten, liefern Sie die untenstehende Datei-Liste. Ohne Lieferung kommen unsere Standard-Icons zum Einsatz — die sind gut, aber generisch.

Jedes Icon wird in drei Auflösungen geliefert: @1x, @2x und @3x (die @3x-Variante ist die Quelle, die anderen sind herunter- skalierte Versionen). Die unten genannten Pixelmaße sind der @1x- Basiswert — @2x ist doppelt so groß, @3x dreimal so groß.

Dateinamen-Konvention: Apple-Standard mit Suffix: tabbarIconHome.png (@1x), tabbarIconHome@2x.png (@2x), tabbarIconHome@3x.png (@3x). Bitte genau diese Schreibweise verwenden — case-sensitive, ohne Leer- oder Sonderzeichen.

Tab-Leisten-Icons (am unteren Rand)

Standard	Name	Größe @1x	Größe @3x	Hinweise
	tabbarIconHome	32 × 32 px	96 × 96 px	inaktiver Zustand
	tabbarIconHomeSelected	32 × 32 px	96 × 96 px	aktiver Zustand (gefüllte Variante)
	tabbarIconOrders	32 × 32 px	96 × 96 px	inaktiv
	tabbarIconSettings	32 × 32 px	96 × 96 px	inaktiv

Designer-Hinweis: liefern Sie diese als einfarbige PNG-Silhouetten auf transparentem Hintergrund. Die App tönt sie zur Laufzeit ein. Keine Füllungen, keine Verläufe.

Schnellaktion-Icons (auf den Home-Kacheln)

Standard	Name	Größe @1x	Größe @3x	Hinweise
	quickActionScan	32 × 32 px	96 × 96 px	Code scannen
	quickActionMenu	32 × 32 px	96 × 96 px	Karte öffnen
	quickActionBooking	32 × 32 px	96 × 96 px	Tisch reservieren
	quickActionWebsite	32 × 32 px	96 × 96 px	externe Website

Aktions-Icons (Lokal-Detail)

Standard	Name	Größe @1x	Größe @3x	Hinweise
	actionIconCall	24 × 24 px	72 × 72 px	Anrufen
	actionIconEmail	24 × 24 px	72 × 72 px	E-Mail
	actionIconDirections	24 × 24 px	72 × 72 px	Wegbeschreibung
	actionIconLocation	24 × 24 px	72 × 72 px	Adresse
	actionIconPhone	24 × 24 px	72 × 72 px	Telefonnummer
	actionIconAboutUs	24 × 24 px	72 × 72 px	Über uns
	actionIconInfo	24 × 24 px	72 × 72 px	Info
	actionIconOpeningHours	24 × 24 px	72 × 72 px	Öffnungszeiten
	actionIconPricing	24 × 24 px	72 × 72 px	Preise

Social-Icons

Standard	Name	Größe @1x	Größe @3x	Hinweise
	socialIconFacebook	24 × 24 px	72 × 72 px	Facebook
	socialIconInstagram	24 × 24 px	72 × 72 px	Instagram
	socialIconTikTok	24 × 24 px	72 × 72 px	TikTok
	socialIconTwitter	24 × 24 px	72 × 72 px	X / Twitter
	socialIconYoutube	24 × 24 px	72 × 72 px	YouTube

Dekorative Assets

Standard	Name	Größe @1x	Größe @3x	Hinweise
	Background	42 × 42 px	126 × 126 px	gekacheltes Hintergrundmuster auf der Treuepass-Karte
	coupon	ca. 24 × 24 px	ca. 72 × 72 px	Platzhalter-Icon für Gutscheine (quadratisch oder leicht hochformatig)
	food	48 × 48 px	144 × 144 px	Platzhalter für Speisen ohne Bild
	drink	48 × 48 px	144 × 144 px	Platzhalter für Getränke ohne Bild

Allgemeine Hinweise zu Icons

• Einheitliche Strichstärke. Alle Icons sollten dieselbe Linien- stärke teilen (1,5 px oder 2 px bei @1x ist üblich).

• Einfarbig, transparenter Hintergrund. Die App tönt Icons in Markenfarben. Farbige Icons passen sich nicht an und wirken fremdkörperhaft.

• Optische Balance vor mathematischer Zentrierung. Eine 32 × 32- Boundingbox heißt nicht, dass das Icon die Box füllen muss — ein Kreis wirkt bei gleicher Größe schwerer als ein Quadrat. Auf das Auge vertrauen.

• Aktiv- und Inaktiv-Variante zueinander passend. Wenn Sie tabbarIconHomeSelected liefern, sollte es visuell zu tabbarIconHome passen (Outline vs. Fill ist das übliche Muster).

5. Venue-Hintergrundbild

Dieses Bild ist Pflicht — es ist das visuell dominanteste Element der Lokal-Detail-Seite und liegt hinter Lokalnamen und Adresse. Eine schwache oder fehlende Bildauswahl fällt sofort auf.

• Format: PNG oder JPG (sRGB)

• Empfohlene Größe: mindestens 1500 × 1500 px, quadratisch oder hochformatig. Die App zeigt das Bild auf voller Bildschirmbreite — ein deutlich breiteres als hohes Bild wird oben und unten beschnitten.

• Komposition: Lokalname und Adresse sitzen auf diesem Bild — also oberes Bilddrittel ruhig halten. Ein hochkontrastreiches Foto dort macht den Text unleserlich. Eine dezente Vignette oder ein dunklerer Verlauf oben hilft.

Das Bild gilt pro App, nicht pro Lokal — es erscheint über alle Lokale eines Unternehmens hinweg.

6. Treuepass-Karte

Die Treuepass-Karte hat eine Vorder- und eine Rückseite:

• Vorderseite: das Stempelraster + Kartentitel und -untertitel, plus ein Einlöse-Button, sobald der Kunde eine Belohnung erreicht hat.

• Rückseite: Kartendetails + Info-Bereich für Bedingungen.

Beide Seiten übernehmen Ihre Markenfarben automatisch. Sie können Titel-Font, Untertitel-Font, Stempelposition und Einlöse-Button-Style gezielt überschreiben — typische Anpassungen sind ein Verschieben der Stempelposition um wenige Pixel oder ein Einlöse-Button in einer abweichenden Farbe.

7. Produktbilder

Damit Speisekarte und Treuepass nicht generisch wirken, liefern Sie nach Möglichkeit für jedes Produkt ein Bild.

Formate: JPG oder PNG, sRGB. Wir komprimieren intern weiter; liefern Sie die schärfste Version, die Sie haben. Bei Kategorie-Bildern bitte auf das Verhältnis achten — abweichende Formate werden zugeschnitten.

8. App-Store- und Play-Store-Screenshots

Sie müssen das nicht selbst gestalten — wir erzeugen die Screenshots standardmäßig automatisch aus der laufenden App, mit Ihren Markenfarben als Rahmen. Wenn Sie eigene Marketing-Screenshots gestalten möchten, nutzen Sie die untenstehenden Größen.

Automatische Variante: wir generieren mindestens 5 Screenshots pro Gerätetyp. Der Hintergrund jedes Screenshots ist Ihre Sekundärfarbe, die Headline darüber Ihre Primärfarbe, das erste Bild ist Ihr Launch-Image im iPhone-Rahmen.

Maße für eigene Screenshots

Beispiele

So sehen unsere automatisch generierten Feature-Screens aus (die Splash-Variante als erstes Store-Bild sehen Sie oben unter Drei Beispiele):

9. Was Sie nicht gestalten müssen

Damit klar ist, was bei uns liegt und nicht von Ihrer Designerin geliefert werden muss:

• App-Layout, Navigationsstruktur, Bildschirmfluss

• Typografie (die App verwendet die Systemschriftart)

• Animationen und Übergänge

• Form von UI-Elementen (Button-Rundungen etc.)

• Lokalisierung (Deutsch und Englisch erledigen wir)

• App-Store- / Play-Store-Metadaten-Texte

Falls Sie zu einem dieser Punkte starke Meinungen haben — sprechen Sie uns an. Manches lässt sich auf Anfrage anpassen, anderes ist bewusst über alle Whitelabel-Apps konsistent gehalten, damit die Bedienung vertraut bleibt.

10. Liefer-Checkliste

Wenn Sie Ihre Assets übergeben, schicken Sie bitte als einen Ordner oder Drive-Link:

• [ ] Primärfarbe (Hex, z. B. #FFD954)

• [ ] Sekundärfarbe (Hex, z. B. #0E0E0E)

• [ ] App-Icon: 1024 × 1024 PNG, ohne Transparenz

• [ ] Launch-Bild: ≥ 1242 × 2688 PNG, ohne Transparenz

• [ ] Venue-Hintergrundbild (≥ 1500 × 1500 px, sRGB)

• [ ] (Optional) eigener In-App-Icon-Satz aus Abschnitt 4, jeweils als @1x / @2x / @3x, transparenter Hintergrund, einfarbig

• [ ] (Optional) Tab-Leisten-Icons: tabbarIconHome, tabbarIconHomeSelected, tabbarIconOrders, tabbarIconSettings

• [ ] (Optional) Schnellaktions-Icons: quickActionScan, quickActionMenu, quickActionBooking, quickActionWebsite

• [ ] (Optional) Aktions-Icons (9 Dateien) und Social-Icons (5 Dateien) aus Abschnitt 4

• [ ] (Optional) dekorative Assets: Background, coupon, food, drink

• [ ] (Optional) block-genaue Farbüberschreibungen aus der Tabelle in Abschnitt 1 (sonst werden die zwei Markenfarben überall verwendet)

• [ ] (Optional) Treuepass-Anpassungen (eigene Stempelposition, Titel-/Untertitel-Styling, Einlöse-Button-Farbe)

• [ ] (Optional) Produktbilder für Karte, einlösbare Artikel und Kategorien

• [ ] (Optional) eigene App-Store- und Play-Store-Screenshots in den Größen aus Abschnitt 8

Benennen Sie die Icon-Dateien bitte exakt wie in den Tabellen oben — dann können wir sie ohne Rückfragen einbauen.

Verwandte Themen

• Whitelabel App einrichten — wie die fertige App bei bessa zur Erstellung beauftragt und in den App-Stores veröffentlicht wird

Fragen oder unklare Stellen? Schreiben Sie uns an support@bessa.app. Wir helfen gern bei Farbentscheidungen oder mit einem ersten Designvorschlag.