A branded pass gets kept. A generic one looks like something a customer wasn't expecting and doesn't trust. This is the cheapest credibility you can buy, so it's worth twenty minutes.
The three colours
- Background - the dominant colour of the pass.
- Text - the values.
- Label - the small uppercase captions above each value.
Set them in the Shared tab of the builder. The preview updates as you go.
Contrast matters more here than almost anywhere else you design. Passes get looked at outdoors, in sunlight, at arm's length, often by someone in a hurry. A mid-grey label on a mid-blue background is legible on your monitor and invisible at a door.
Pick a dark background with light text, or a light background with dark text. Avoid anything in between.
A reliable approach: take your brand's darkest colour for the background, use white text, and make the labels white at reduced emphasis. It's hard to get wrong.
The images
Logo - your wordmark, shown at the top of the pass. Use a version with a transparent background, and one that reads against your chosen background colour. A logo designed for white paper often disappears on a dark pass; if yours does, upload the reversed version here rather than changing the background.
Icon - a small square mark. It's what appears alongside notifications and in some wallet views rather than on the face of the pass, so it should be recognisable at a very small size. A monogram usually beats a full wordmark.
Banner - a wide image across the pass. Optional, and worth being careful with: a busy photograph behind text makes the text unreadable. If you use one, prefer something flat and simple, or skip it.
Upload artwork at a generously high resolution. Phone screens are dense, and an image that looks acceptable in the builder can look soft on the device. Bigger is safely downscaled; smaller can't be rescued.
Apple and Google use the artwork differently
Both wallets get your logo and colours, but they don't use everything the same way.
Apple Wallet uses the logo, the icon and the banner, and all three of your colours - background, text and labels.
Google Wallet uses the logo and a wide hero image, and takes the background colour only. It applies its own text treatment rather than your text and label colours.
The practical consequence: your background colour has to work on Google without any help from your text colours. If your design depends on an unusual text colour to be legible, check the Google preview specifically before you go live.
Per-platform overrides
Under the Apple and Google tabs you can supply different artwork for each wallet rather than reusing the shared images.
Most people don't need this. It earns its keep when:
- Your logo needs a different crop or aspect ratio to sit well in each wallet.
- You want a proper wide hero image on Google but a tighter banner on Apple.
If a platform-specific image isn't set, the shared one is used. So you can set only the one that needs to differ.
Checking your work properly
The preview is good, but it's a preview. Before you issue anything real:
- Issue a pass to yourself and add it to your phone. See Quickstart.
- Look at it indoors, then take it outside.
- Hold the phone at arm's length and see whether you can still read the central field.
- Check both wallets if your customers use both - borrow a colleague's phone if you only have one platform.
That last point matters more than it sounds. Most design problems are only obvious on the device the designer doesn't own.
When changes reach existing passes
Design comes from the template, not the pass, so a colour or logo change applies to passes already in wallets. The phone picks it up the next time the pass updates.
If you want a rebrand out immediately rather than whenever passes next change, send a notification - that prompts wallets to refresh.
Where to go next
- Fields and regions - what the colours are framing.
- Barcodes.