Branding Your Wallet Cards: Logo, Colors, Stamp Icon — Your Brand in Apple & Google Wallet

A digital stamp card with the default reloop look works just fine technically — but it's a waste of marketing potential. Every time a guest opens the card in Apple Wallet or Google Wallet, they could be seeing your brand: your logo, your brand colors, your background image. This guide shows you how to fully match a wallet card to your business in 10 minutes — and which Apple/Google specs you need to know so your logo doesn't get clipped by Wallet's built-in masks.

What Apple Wallet and Google Wallet each do differently

Before you upload anything, it's important to understand this: Apple and Google render your logo completely differently.

Apple Wallet

• Your logo appears in the top left, on top of the brand-color background
• Format: rectangular banner (max 160 × 50 pt, which is 480 × 150 px @ 3× Retina)
• Aspect ratio: roughly 3.2 : 1 (landscape)
• Apple shows the logo as-is with no mask — if you supply a square logo, it'll look small and puny

Google Wallet

• Your logo appears in the top left inside a circle
• Format: square (at least 660 × 660 px)
• Google automatically masks it into a circle, with a 15% safe area around the edge
• If you supply a landscape banner logo, it'll either get squished or cropped off at the top and bottom

The dilemma: a single logo can't be both an Apple banner AND a Google circle at the same time.

The reloop solution: You upload your original (ideally square or slightly rectangular, at least 660 × 660 px). The server normalizes it to 1024 × 1024 and automatically generates three platform variants when you save:

• logo-apple.png — 480 × 150 PNG, fits-inside on a transparent canvas (for PassKit)
• logo-google.png — 660 × 660 square PNG with a 15% safe area (for the Google Wallet API)
• logo-thumb.webp — 64 × 64 WebP for UI display in the dashboard

So you don't have to choose between the two worlds. Upload a good square, and the rest happens automatically.

Step by step: matching your card to your brand

1. Open the program + Branding tab

In the dashboard: Programs → pick the program → Branding tab (or click the "Branding" tab on the left in the editor).

2. Upload your logo

Drag and drop into the logo slot, or click to open the file picker. Three things happen in parallel during the upload:

1. Client-side resize down to max 1024 × 1024 (saves storage bytes + upload bandwidth)
2. EXIF data gets stripped (no accidental geo-tag leak)
3. The server generates the 3 platform variants and saves them as separate storage files

In the live wallet simulator on the right, you'll see immediately how the logo looks in Apple Wallet (banner, top left) and in Google Wallet (circle, top left). If your logo is too wide and looks cropped in the Google circle: re-export the logo in a square layout and upload it again.

Logo tips:

• A transparent background is always better. The brand color behind the logo should show through.
• A minimum margin of 10% to the edge of the logo. Both Apple and Google have softer or harder mask edges; without a margin, the outer edges get clipped.
• SVG works too and gets rasterized to PNG on the server side (at 3× density).
• Dark logos on light brand colors and vice versa — make sure the contrast holds up. A black logo on a dark-red brand background isn't legible.

3. Choose a brand color + accent color

Two color pickers:

• Brand color (brandColor): the background of your wallet card. In Apple Wallet, this is the entire top half. In Google Wallet, it's the whole card. Default: #55182c (Stempelkarte wine).
• Accent color (accentColor): the color of the filled stamp circles, the goal-marker star, and (on some Wallet versions) the reward ribbon animation. Default: #f8b627 (Stempelkarte gold).

Best practice: brand color = your main brand (logo background), accent color = a contrasting complement. If your brand is, say, dark blue, go with gold or a warm orange as the accent — not "the same blue, a little lighter."

4. Configure the stamp icon (optional)

The default is a simple star. You have three alternatives:

1. Upload your own stamp icon (same upload path as the logo). PNG/JPG/SVG, max 10 MB. Gets normalized to 256×256.
2. Emoji as a stamp — enter a single emoji (e.g. ☕ for a café, 🥐 for a bakery, ✂️ for a salon). The renderer uses Pango + Noto Color Emoji.
3. Keep the default star if you don't have a concept yet.

Tip: high-contrast custom icons work better. A delicate line-drawing stamp disappears on the small card display; a bold solid shape reads well.

5. Choose a stamp display mode

Two options:

• circle-number (default): a stamp circle with the icon inside, an empty circle for not-yet-redeemed. Classic.
• image-only: the full icon as a filled stamp, a grayscale variant when empty. Modern, on-brand, and only worth it if your icon is visually strong.

The live simulator shows both modes instantly.

6. Background image (optional)

You can upload a background image for the strip area (where the stamps sit) — for example a subtle pattern or a blurred photo of your café. Format: JPG / PNG / WebP, long edge max 1280 px.

The overlay mode + overlay strength (0–80%) controls how heavily your brand color sits over the image:

• none: image fully visible (good for very subtle patterns)
• darken: image darkened by the brand color (good for bright photos)
• lighten: image lightened (good for dark photos)
• brand-tint (default): image gets a brand-color tint

7. Customize the reward state

What happens visually when the card is full and the guest can claim their reward?

• A custom reward background image (e.g. a confetti photo or a photo of your reward product, like a "free cappuccino")
• A reward background color (a solid color instead of an image, overriding the default brand gradient)
• Custom eyebrow text — instead of the default "REWARD AVAILABLE" → your own tagline like "YOUR COFFEE IS WAITING"
• A custom reward headline — instead of the program-specific reward → your own marketing copy
• Sunburst + confetti animation on/off
• Eyebrow color, headline size, position — adjustable separately per axis

This is the difference between "the card is full" and "the card is celebrating with the guest."

8. Turn off the watermark (Premium only)

By default, your card shows a small "reloop" watermark in the bottom right. With the watermark toggle (hideWatermark), you hide it — a white-label card without our brand. Available on the Premium plan only.

Preview and live test

In the editor:

• The live simulator shows the Apple and Google frames side by side (or via a toggle)
• A stamp scrubber from 0 to max → see how the card evolves as it gets stamped
• A reward-state toggle → see how the card looks when full

On a real phone:

1. Save the program
2. Create a test card (in the Cards tab → "New card")
3. Scan the QR code with your iPhone (or Android)
4. Tap "Add to Wallet"
5. Open the card in the Wallet app → this is exactly what your guests see

If something looks different from the simulator: report a bug to support@reloop.cards — we'll check right away, because our promise is "pixel-identical between preview and pass."

Common branding mistakes

• Uploading the logo too small (200 × 200 px). The server has to upscale → blurry logo. At least 660 × 660 px.
• Choosing a square logo but the Apple banner looks tiny. Not a bug — the Apple banner is 3.2:1, so a square fills it vertically but leaves 75% of the horizontal space empty. If you're prioritizing Apple, make a wider logo.
• Brand color equals accent color. The stamps won't be visible. The accent has to contrast.
• Background image too busy. The stamps get overlapped and the card feels cluttered. Use a pattern or an image + 50% overlay.

When you DON'T need custom branding

If you:

• Are just trying out the service (the default looks sharp anyway)
• Are under time pressure for launch and want to do branding later
• Don't have an established brand identity yet (in that case the default branding hurts no one)

Branding can be improved iteratively — in 5 minutes you can add a logo + 2 colors, and it'll instantly look 80% as good as a fully configured program.