Designing an iOS 27 Poster pass

Where everything sits on the card, and what changes with each setting. Try your own artwork, logo and text colors on the empty card. Uploads stay in your browser.

Fixed: the logo, header, barcode, fields and footer can’t be moved or resized, and the fonts can’t be changed. Wallet sets them. Yours to change: the artwork and the colors. Lighten, veil or recompose the image to get better contrast.

Barcode

Footer

Header

Artwork

Logo

Text Values Labels

Show guides

MEMBERSHIP CARDPremier

000 000 XXXXXXXXX 0

Member NameFULANITO PEREZ

Valid Through03/27

Member Since1994

24/7 Roadside & more: tap Membership Benefits

ALogo
BHeader label
CHeader value
DPrimary field 1
EPrimary field 2
FPrimary field 3
GFooter field · value only
HBarcode · PDF417, like ours
LBarcode overlap · ≈10 pt (11%)
IFooter area
JSafe area for the subject
KHeader darkening · no % from Apple

Card: 358 × 448 pt. ≈ = measured in Pass Designer.

1Artwork

716 × 896 px (@2x) · 1074 × 1344 px (@3x)
Fills the whole card, behind the footer too
Keep the subject between ≈45 and ≈260 pt
Bake gradients into the image

2Logo & header

Logo top-left, ≈26 pt tall
1 header field, top-right

3Header darkening

Default: dark gradient behind the header
Apple gives no %
suppressHeaderDarkening: true turns it off

4Barcode

77% of the card width, centered
≈260–351 pt
Sits in front of the footer, never blurred
Overlaps the footer by ≈10 pt = 11% of the barcode
No barcode: the art shows there, nothing moves

5Footer area

Starts at ≈341 pt (76% down)
Primary fields + 1 footer line
Footer labels are hidden

6Footer color set

footerBackgroundColor: solid band, art hidden
Fade the art into the same color

7No footer color = glass

Blur ≈11% of the card width
Saturation 145% · brightness 94%
Apple gives no %; ours matches Pass Designer
Light glass needs light art: add a white veil (57% / 39% in our AA cards)

8Fonts

Can’t be changed: a pass has no font setting
Wallet always uses Apple’s system fonts
Labels and values are monospaced
Brand font (Roboto) only baked into the art

9Text colors

foregroundColor = values · labelColor = labels
Solid rgb() only
Aim for 4.5:1

10Max characters

Header label ≈28 (caps)
Header value ≈30
Primary fields, 1–2: ≈33 across the row
Primary fields, 3: ≈48 across the row (smaller text)
Footer line ≈50, one line
Longer text shrinks, then gets cut off (…)

11Automatic colors

useAutomaticColors: true: Wallet picks the text colors and ignores yours

12Featured Actions

Up to 2 cards below the pass
Pick from Apple’s 14 predefined actions
Icon and title are set by Apple
e.g. membershipBenefits, place

Files to make

PNG, in pixels. One set at @2x and one at @3x.

File	Size (px)	What it’s for
`artwork@2x.png` `artwork@3x.png`	716 × 896 1074 × 1344	The iOS 27 card photo	Needed
`primaryLogo@2x.png` `primaryLogo@3x.png`	100 × 60 150 × 90	Logo on the iOS 27 card	Needed
`logo@2x.png` `logo@3x.png`	172 × 100 258 × 150	Logo on the iOS 26 card	Needed
`icon@2x.png` `icon@3x.png`	76 × 76 114 × 114	Notifications, Lock Screen, Mail	Needed
`background@2x.png` `background@3x.png`	690 × 1010 1035 × 1515	Apple Watch backdrop (our choice)	Optional
`thumbnail@2x.png` `thumbnail@3x.png`	180 × 180 270 × 270	Small image on the iOS 26 card (not used)	Optional

Examples

What matters most: picking the right artwork and the right text (font) color. The bottom quarter of the art sits under the glass, so keep it calm and evenly light or dark, then pick text that contrasts with it.

Artwork

Provided artwork vs. the AA version. Orange line = footer start. Click to open.

Text colors

Contrast on each footer. Need 4.5:1.

Color	Use	Solid white footer #FAF8FA	Membership AA glass	Insurance AA glass
Aa`#192842`	Navy AA Values, header value	13.96:1	6.52:1	7.29:1
Aa`#27292B`	Grey/900 Labels	13.82:1	6.45:1	7.22:1
Aa`#1C1C1E`	Near-black Values or labels	16.10:1	7.52:1	8.41:1
Aa`#324A72`	Navy/700 (Figma) Solid white footer only	8.43:1	3.93:1	4.40:1
Aa`#1C4DA6`	Link blue Solid white footer only	7.47:1	3.49:1	3.90:1
Aa`#0C72DF`	Primary blue Not for text	4.43:1	2.07:1	2.31:1
Aa`#FFFFFF`	White Dark art only	1.06:1	2.26:1	2.02:1

Fonts

Set by Wallet. Fonts can’t be changed.

MEMBERSHIP CARDHeader label · SF Pro Bold, caps

PremierHeader value · SF Mono

Member NameFULANITO PEREZField label + value · SF Mono

24/7 ROADSIDE & MORE: TAP MEMBERSHIP BENEFITSFooter line · SF Mono, caps, 1 line

Roadside, wherever the road goes.Art only · Roboto, for titles, never member data

Where this comes from & resources

Defining the metadata of your Wallet pass · field layouts, Featured Actions list
Creating a Poster Generic pass · field counts, backward compatibility, barcodes
Creating a pass with Pass Designer · the template tool
Human Interface Guidelines › Wallet · design guidance, field types
Add to Apple Wallet guidelines · badge artwork and usage
Apple Design Resources · iOS UI kits for Figma and Sketch

or just swipe a card (i was too tired and bored to write the rest)

open in safari on iphone to simulate fullscreen wallet behavior

expired?(i was also too tired to complete this)

iOS 27

iOS 26

Design proposals (the image canvas below and strings made by Claude, i just did the pass design and the web)

A different take on both cards in the iOS 27 frosted-glass look from the Figma design (iOS 27 WALLET page): Figma’s photos run the full card and Wallet blurs them into a glass footer behind the fields, with deep navy (#192842) values and Grey/900 labels so the text stays readable. These are the nicer-looking versions; contrast is still being tuned (see the AA cards above). Everything here is stuff Apple Wallet actually supports. Grab one with Download template and drag it onto this page (or open it in Pass Designer), or just hit Open in viewer. The Membership and Insurance cards up top stay as they are.

AAA Membership (alternative) in the iOS 27 frosted-glass design: the coastal convertible photo runs the full card and blurs into a glass footer behind the deep navy fields, barcode overlapping the glass, Membership Card · Premier header, and View Membership Benefits and Get Directions actions — **AAA Membership (alternative)**Full size ↗

AAA Insurance (alternative) in the iOS 27 frosted-glass design: the LA sunset photo with palms runs the full card and blurs into a warm glass footer behind the deep navy fields, CA Evidence of Liability · Auto Insurance Card header, and View Membership Benefits and Get Directions actions — **AAA Insurance (alternative)**Full size ↗

Next steps TODO

For design and product: what each feature does, what we can do now and what it needs from whom. Short version: the pass is a signed file built by our server, so anything that changes per member or over time is backend work. The app only downloads the card and adds it to Wallet.

“Get Directions”: how the branch (Maps place ID) gets set and updated

What's in the pass{"type": "place", "identifier": "nearestBranch", "placeIdentifier": "I71B28B9C6AC9C7EF"}. placeIdentifier is an Apple Maps Place ID (the sample is one AAA branch). identifier is just our own name for the action. It pairs with the back field that has the same key (“Your AAA branch”) and never needs to change. How we'd push a new locationThe pass can't be edited in place, so we send a new version of it. (1) When we first build the pass, include webServiceURL (our pass service) and an authenticationToken. (2) When the member adds it, Wallet registers the device with our service and gives us a push token. (3) When the branch changes (member moved, branch closed, better match), the server saves the new place ID and sends an empty push through APNs with our Pass Type ID certificate. (4) Wallet wakes up, asks our service which passes changed, and downloads the newly signed pass with the new placeIdentifier (and new locations for Lock Screen suggestions). The member doesn't do anything; Get Directions just points to the new branch. Optional: a changeMessage on the “Your AAA branch” back field shows a notification like “Your AAA branch is now %@”. Does it need our server?Yes. Whatever builds and signs the member's .pkpass (with our Pass Type ID certificate) writes the place ID in when it generates the pass. Updating it later needs the Wallet web service on our side: webServiceURL + authenticationToken in the pass, devices register, we send an APNs push, and Wallet downloads the new signed pass. One for everyone, or per member?Per member. Each pass gets one place: the member's home branch, or the branch nearest the address on file. Everyone getting the same branch only makes sense for a demo. Can it follow the phone's location?Not live. Wallet doesn't pick a “nearest branch” when you tap; the action always opens the place that's in the pass. Options: (1) update it when the member moves or changes their branch, using a push update; (2) also add up to 10 nearby branches to locations with relevantText so the pass shows up on the Lock Screen near them. That's for relevance only and doesn't change the button. Where do place IDs come from?Look them up on the server with the Apple Maps Server API (search for the branch and get its place ID) or MapKit (MKLocalSearch, then check it with MKMapItemRequest). That's how i found the sample one. Store it with each branch record so we don't search for every pass. Keep them validPlace IDs are meant to stay stable, but places can merge or move, and Wallet drops the action if the ID doesn't resolve. Re-check stored IDs every so often (Apple can give back a newer ID for an old one) and regenerate affected passes.

To do

Add a place ID to every branch record (one-time lookup, then refresh now and then).
Pass generation: fill placeIdentifier from the member's branch; also fill the matching “Your AAA branch” back field (name, address, phone).
Set up the Wallet web service (register, list updated passes, return the latest pass) and push updates when a member's branch changes.
Fallback: if a member has no branch, leave Get Directions out (and use the slot for something else) rather than ship an ID that might not work.

“View Membership Benefits”: what tapping it does

What it isOne of Apple's Featured Action types (membershipBenefits). Apple sets the label and icon; we only give it an https link. A pass can have 2 actions, and iOS 26 and older don't show them at all. The plan (agreed)Tapping opens the Auto Club app on the Membership Benefits bottom sheet (same style as the Discounts filter and sort sheets, glass close button) with Roadside Assistance first, so the button's label matches what members see. Without the app, the same link opens the membership page on ace.aaa.com. Today, in this proposalThe link is the app's own deep link, aceautoclub-uat1://wallet/benefits?source=wallet (UAT1 build). It opens the app straight on the Membership Benefits sheet, no browser first and no sign-in needed, and the app reads source=wallet. Each build has its own scheme so installed builds don't clash: aceautoclub (production), aceautoclub-uat1, -uat2, -beta, -acceptance, -dev. Tap it in the card above (Safari on a phone or simulator with the UAT1 app installed) to try it. Without the app nothing opens, so the https link below is still the goal. iOS 26 and olderNo Featured Actions there, so the cards show the Roadside number (1-800-400-4222) on the front instead, and the back of the pass keeps tappable phone numbers and links. Can't changeThe label (“View Membership Benefits”), the icon, the 2-action limit, and that front fields aren't tappable.

What we need

Web / platform: host an apple-app-site-association file on an AAA domain (for example www.ace.aaa.com) that claims one path, such as /wallet/benefits, and serve the membership page at that same URL for people without the app.
iOS: done on branch b/wallet-deeplink-benefits: the app opens the Membership Benefits sheet (empty for now) from aceautoclub…://wallet/benefits and from https://app.ace.aaa.com/wallet/benefits / appuat1 / appuat2. The https version starts working once the web team adds an applinks section for /wallet/benefits to those domains' apple-app-site-association (today they only have webcredentials).
Design: finalize the sheet (it's marked “proposal, not final” in the images above): content, order and the Roadside call-to-action.
Backend (pass service): put the new link in the pass's Featured Action when it builds the card. Add something like ?source=wallet so analytics can count opens from Wallet.

Lock Screen suggestions near AAA places (like a gym key)

How others do itA gym key that pops up on the Lock Screen near the gym is a Wallet pass feature, not the gym's app. The pass lists up to 10 locations (latitude/longitude, an optional short message like “Your AAA card is ready”, and maxDistance, which can only make the radius smaller). The iPhone checks them in the background and suggests the pass when you're close. It doesn't need the app installed or location permission, and the company never sees where the member is. Passes can also wake up from a Bluetooth beacon (good indoors) or at a date and time (relevantDates). Where we areThe app already downloads the Membership card from our backend (PostMembershipPKPass, pass type pass.com.aaa.membercard, sending the member's ZIP code) and adds it to Wallet; Insurance works the same way. The server builds and signs the pass, so this needs no app change. It's backend work. What we can doAdd the member's 10 nearest AAA places to the pass, picked from their ZIP code: branches, approved repair shops, or the most-used discount partners. Add a short message per place, plus dates where useful (renewal, policy start). The same works for the Insurance card. The fieldslocations: up to 10 places, each with latitude and longitude and an optional relevantText (the Lock Screen line, e.g. “AAA branch nearby · show your card”). maxDistance: how close (in meters) the member must be. Wallet uses the smaller of this and its own default, so 500 can only shrink the radius, never grow it. Pull them from the home clubThe app already finds branches with the TDR search (POST travel/services/td/v1/geolocationsearch, type office, the member's club code, a point and a radius, sorted by distance). The pass service can do the same when it builds the card: (1) turn the member's ZIP into a point, (2) search offices for their club within ~25 miles, (3) skip offices with no walk-in service (the app already flags these), (4) keep the nearest 10, each with its name in relevantText. Keep it currentWith the Wallet web service (push updates), the server can refresh the list later (new branch, member moved) without the member adding the card again. The app only needs to re-add the card when the member changes ZIP or club. Limits10 places per pass, so it's “nearest 10”, not every partner. Apple decides when the pass actually appears; we can't force it. The message is short, fixed in the pass and the same for every visit. Test on a real device: whether iOS 27 suggests poster passes this way is Apple's call.

"locations": [
  { "latitude": 34.146313, "longitude": -118.238001,
    "relevantText": "AAA branch nearby · show your card" }
  // … up to 10, nearest branches for the member's club
],
"maxDistance": 500

What we need

Product: pick the place types (branches, repair shops, discount partners) and the Lock Screen message for each.
Backend (pass service): add locations (nearest 10 offices from the TDR search for the member's club and ZIP), relevantText and, if wanted, relevantDates and beacons when generating the pass; then the Wallet web service for updates.
iOS: nothing to start. Later, re-add the card when ZIP or club changes.

This is a browser copy of the Pass Designer preview, so think of it as a really good mockup. The real Wallet app has the final say on fonts, cut-off text, barcodes and the buttons under the card. Flip a card to see the back, and click anything on the left to see what's in it and what Apple allows.

Confession: i couldn't get the import button to open a .pkpasstemplate (the Mac treats it like a single file, so the picker greys it out). Easy fix: just drag and drop the template onto this page. A .zip or a plain pass.json works too.

Designing an iOS 27 Poster pass

1Artwork

2Logo & header

3Header darkening

4Barcode

5Footer area

6Footer color set

7No footer color = glass

8Fonts

9Text colors

10Max characters

11Automatic colors

12Featured Actions

Files to make

Examples

Artwork

Text colors

Fonts

Where this comes from & resources

Text contrast · ADA (WCAG 2.2 AA)

Design proposals (the image canvas below and strings made by Claude, i just did the pass design and the web)

Next steps TODO

To do

What we need

What we need