Pass Design Overview: Anatomy, Assets, and Branding (Apple & Google Wallet)

Apple and Google Wallet share the same core building blocks, but use different terminology and layout conventions. Badge handles the translation between the two automatically, so you design once and both platforms are covered.

Note: Some field and visual behaviors vary by pass type (Loyalty, Event, Gift Card, etc.). See the Pass Hall of Fame article for inspiration
​

Badge requires just three image assets to generate a pass that renders correctly on both Apple and Google Wallet. You'll upload these in the Design section of the Pass Template Editor.

The logo appears in the top-left on Apple Wallet and left-aligned in the header on Google Wallet.

Specs: PNG with transparent background, recommended dimensions of 480x150px or narrower. For Google Wallet, the logo is displayed against your pass background color, so a transparent PNG ensures it renders cleanly on both platforms regardless of background.

Design tip: Use a high-contrast version of your logo. Detailed or low-contrast logos can become difficult to read on darker pass backgrounds. Simple, horizontal lockups work best.

The cover image serves as the primary visual banner of your pass. On Apple Wallet it appears as a full-width strip across the top of the pass. On Google Wallet it renders as a hero image beneath the logo.

Specs: PNG or JPG, recommended dimensions of 1125x432px. The image will be cropped or scaled depending on the device screen size, so avoid placing critical text or logos within approximately 60px of any edge.

Design tip: Use brand-forward imagery or a solid color with your primary brand color. Avoid text-heavy designs as they may be cropped on smaller screens and cannot be localized easily if you expand to other markets.

The icon appears as a small thumbnail in Apple push notifications and in Google Wallet's collapsed card and list views. If you don't upload one, Badge will auto-generate a fallback icon using the dominant color of your logo, but uploading your own gives you full control over how your pass appears before a user opens it.

Specs: PNG, square format, recommended size of 256x256px.

Design tip: Use a simplified version of your logo or a brand mark rather than a full wordmark. At small sizes, detail is lost and a tight, simple icon reads more clearly.

If you want a different image to appear on Google Wallet than on Apple Wallet, you can upload a separate asset here. This is useful when your standard cover image doesn't translate well to Google's hero image layout, or when you want to use an animated GIF for Google Wallet passholders. Apple Wallet does not support animated images; Google Wallet does.

Specs: Same as the standard cover image, 1125x432px recommended. GIF format is supported for Google Wallet only.

Beyond images, Badge lets you configure the background color of your pass and, on Apple Wallet, the foreground (text) color. These settings are found in the Design section of the Pass Template Editor.

A few things to know: On Apple Wallet, you can set both the background color and the label/value text color independently. On Google Wallet, the text color is determined automatically based on your background color. Google renders white text on dark backgrounds and black text on light backgrounds. Because of this, it's worth previewing your pass in both wallet views before publishing, especially if you're using a mid-range color that could go either way.

For API users, background and foreground color are set via the backgroundColor and foregroundColor fields in the Pass Template Revision object.

Wallet passes have limited display space, and field content that exceeds the visible area will be truncated on the pass face. General guidelines:

These are approximate, as truncation depends on font size, device screen dimensions, and the number of fields displayed. Always test your pass in the Badge preview before publishing, and check both Apple and Google views.

You can preview how your pass looks in both wallets right from the editor.

These universal tips will help your pass look polished and perform well, no matter what platform your users are on:

For developers: if you're issuing passes at scale via the API, build your design QA into your staging workflow before pushing a template revision to production. A template revision updates the design for all existing passes issued from that template.

Certain design elements behave differently depending on the pass type you select when creating your template. Apple Wallet in particular applies pass-type-specific layout rules for fields like the top strip image and barcode placement.

Once your design assets are uploaded, you can:

When you’re ready, move on to distribution and push or pass takeover campaigns.