Skip to main content

Loyalty Program - Assets Guide

This guide is designed for art directors and creative teams to prepare visual assets for the loyalty program.

Overview​

The loyalty program requires different types of assets depending on platforms and components:

  • Web application: Logo, background image, onboarding carousel
  • Apple Wallet: Logo and background image for Apple passes
  • Google Wallet: Logo and background image for Google passes

Web Application Assets​

Usage: Displayed in the main application interface

  • Format: SVG (recommended) or high-resolution PNG
  • Dimensions: 512×512 px minimum (square format)
  • File size: Maximum 500 KB
  • Considerations:
    • Must be readable on both light AND dark backgrounds
    • Avoid details that are too fine
    • Provide a simplified version if necessary

Main Background Image​

Usage: Background of the user interface

  • Format: PNG
  • Dimensions: 1920×1080 px (16:9 ratio)
  • File size: Maximum 1 MB
  • Considerations:
    • Must allow good readability of overlaid text
    • Consistency with brand identity
    • Optimized for different screen sizes

Onboarding Assets​

Welcome Background Image​

Usage: First impression during registration

  • Format: PNG
  • Dimensions: 1920×1080 px (16:9 ratio)
  • File size: Maximum 1 MB
  • Tone: Welcoming, engaging, representative of the brand

Usage: Presentation of program benefits (3-5 slides)

  • Format: PNG
  • Dimensions: 800×600 px (4:3 ratio)
  • File size: Maximum 300 KB per image

Apple Wallet Assets​

Usage: Displayed on the loyalty card in Apple's Wallet app

  • Format: PNG only (Apple requirement)
  • Dimensions: 160×50 (1x), 320×100 (2x), 480×150 (3x)
  • File size: Maximum 100 KB
  • Specifications:
    • Transparent background recommended
    • High contrast for readability
    • Clean style (space is limited)

Apple Wallet Background Image​

Usage: Background of the Apple loyalty card

  • Format: PNG only
  • Dimensions: 624×168 (2x), 936×252 (3x)
  • File size: Maximum 100 KB
  • Considerations:
    • Subtle colors (important information overlaid)
    • Consistency with visual identity
    • Avoid overly busy patterns

Google Wallet Assets​

Usage: Displayed on the loyalty card in Google Wallet

  • Format: PNG
  • Dimensions: Minimum 660×660 px (square format)
  • File size: Maximum 500 KB
  • ⚠️ IMPORTANT: Google applies circular masking
    • Place important elements in a central circle
    • Leave a 15% margin on the edges

Google Wallet Background Image​

Usage: Banner of the Google loyalty card

  • Format: PNG (mandatory)
  • Dimensions: 1032×336 px (3:1 ratio)
  • File size: Maximum 5 MB
  • Style: More creative space available, can be more detailed

Delivery Checklist​

For each asset, provide​

Formats and versions:

  • Final optimized version
  • Source version (PSD, AI, etc.) for future modifications
  • Alternative versions if necessary (light/dark)

File naming:

  • logo-app.svg (main logo)
  • bg-app.png (main background)
  • bg-onboarding.png (welcome background)
  • carousel-01.png, carousel-02.png, etc.
  • logo-apple-wallet.png
  • bg-apple-wallet.png
  • logo-google-wallet.png
  • bg-google-wallet.png

Metadata:

  • Title and description for each carousel image
  • Accompanying texts if necessary
  • Main colors in hexadecimal (#RRGGBB)

This guide will be updated according to evolving technical constraints and creative needs.