Apple Wallet and Google Wallet pass design
A pass gets two seconds of attention, in sunlight, at a till. It must be readable before it is pretty.
Visual elements
| Element | Role | Where to set it |
|---|---|---|
| Logo | Your brand, top of the pass (iOS) | PATCH/wallets (logo) |
| Android logo | Logo shown in a circle on Google Wallet | PATCH/wallets (androidLogo) |
| Icon | Shown in notifications and on the lock screen | PATCH/wallets (icon) |
| Strip | Image banner under the header: the offer, the season, the event | strip on each template, overrideStrip for one customer (PATCH/clients/{id}/specific) |
| Colours | backgroundColor (background), foregroundColor (values), labelColor (labels) | colors block on each template |
API constraints
- Images in PNG or JPEG, from 1 KB to 5 MB.
- Sent as
multipart/form-data. Thecolorsblock goes in as a JSON string:colors={"backgroundColor":"#131313","foregroundColor":"#FFFFFF","labelColor":"#9EE00D"}.
See Files and images.
Platform recommendations
Source: Apple Human Interface Guidelines and Google Wallet documentation
The sizes below are Apple’s and Google’s public recommendations, not eldo wallet API constraints.
Apple Wallet (in points, provide @2x or @3x resolution):
| Image | Recommended size (@1x) |
|---|---|
| Icon | 29 × 29 pt |
| Logo | 160 × 50 pt max |
| Strip (loyalty card, coupon, event ticket) | about 375 × 123 pt |
Google Wallet:
| Image | Recommendation |
|---|---|
| Logo | Square, at least 660 × 660 px, shown in a circle |
| Hero image (strip equivalent) | 1032 × 336 px |
Rules that avoid bad surprises
- Contrast. Light text on dark, or the other way round. Test in sunlight.
- Nothing essential in the strip. Each platform crops it differently. A price or date written in the image may disappear: put it in a field.
- Logo on a transparent background. A logo on a white box clashes with a coloured pass.
- Centre the Android logo. It is cropped to a circle: leave a margin.
- No tiny text. The pass is shown small, sometimes on a watch.
- One strip per campaign, not per day. Changing the visual updates every card.
- Test on both platforms. See Apple Wallet vs Google Wallet.