Brand guidelines

  • Google Wallet buttons are available in various formats and languages for adding and viewing passes, with "Save to phone" buttons specifically for Russia.

  • Button design guidelines emphasize minimum size, clear space, and localization, with placement recommendations across different platforms.

  • Logo and image guidelines specify preferred file types, sizes, and aspect ratios for optimal display within Google Wallet passes.

  • Passes can incorporate modules for displaying user information, links, and text, with specific formatting and content policies to follow.

  • Partner platforms can integrate their deep links or website URIs within passes to facilitate user navigation and engagement.

If you're developing for users in RU, please use the “Save to phone” buttons as Google Wallet isn't live in these countries. Please see the relevant assets and guidelines. If you are developing for users outside of RU, please update your Add to Google Wallet button by downloading the assets below.

This section of the documentation is designed to help you create images and other user interface elements so that they look great in the Google Wallet app.

Assets

Add to Google Wallet button

The Add to Google Wallet button is used whenever you are directing users to save a pass or card from your app or website to their wallet. The Add to Google Wallet button must call one of the Google Wallet API flows. These flows surface the Google Wallet app where users can follow the instructions to save passes to their Android device and their Google Account. This button can be used in apps, websites or emails.

Add to Google Wallet buttons are available in Android XML, SVG, and PNG format.

Download assets - Android XML Download assets - SVG Download assets - PNG

View in Google Wallet button

The View in Google Wallet button is used to deep link a user to their wallet to view a previously saved pass or card. This button can be used in apps, websites or emails.

View in Google Wallet buttons are available in SVG and PNG format.

Download assets - SVG Download assets - PNG

All buttons displayed on your site, app, or email communications must adhere to the brand guidelines outlined on this page. Examples of these guidelines include but aren't limited to, the following:

  • Size relative to other similar buttons or elements of the page
  • Shape and color of buttons must not be altered
  • Clear space

Localized buttons

Localized Google Wallet buttons are provided for all markets where Wallet is available. If you're developing for users in these markets, always use the buttons linked above. Do not create your own version of the buttons. If a localized version of the button is not available in your market, use the English version of the button.

Add to Google Wallet buttons are available in the Albanian, Arabic, Armenian, Azerbaijan, Bosnian, Bulgarian, Catalan, Chinese (Hong Kong), Chinese (Traditional), Croatian, Czech, Danish, Dutch, English (India, Singapore, South Africa, Australia, Canada, Great Britain, United States), Estonian, Filipino, Finnish, French (Canada), French (France), Georgian, German, Greek, Hebrew, Hungarian, Icelandic, Indonesian, Italian, Japanese, Kazakh, Kyrgyz, Latvian, Lithuanian, Macedonian, Malay, Norwegian, Polish, Portuguese (Brazil), Portuguese (Portugal), Romanian, Russian (Belarus), Serbian, Slovak, Slovenian, Spanish (Latin America), Spanish (Spain), Swedish, Thai, Turkish, Ukrainian, Uzbek, and Vietnamese languages.

Localized name

For user clarity, the Google Wallet product name is localized in select markets. If you're developing for users in these countries, always use the localized name below for web, email, and print. Do not create your own localized version of “Google Wallet.” If your market isn't listed below, use “Google Wallet” in English.

Country Name
Belarus Google Кошелек
Brazil Carteira do Google
Chile Billetera de Google
Czechia Peněženka Google
Greece Πορτοφόλι Google
Hong Kong Google 錢包
Lithuania Google Piniginė
Poland Portfel Google
Portugal Carteira da Google
Romania Portofel Google
Slovakia Peňaženka Google
Taiwan Google 錢包
Turkey Google Cüzdan
UAE محفظة Google
Ukraine Google Гаманець
United States (Spanish)
*Use this name in the US if your UI is in Spanish 		Billetera de Google

Size

Adjust the height and width of the Add to Google Wallet button to fit your layout. If there are other buttons on the page, the Add to Google Wallet button needs to be equal or larger in size. Don't make the Add to Google Wallet button smaller than other buttons.

Style

Add to Google Wallet buttons are available in two variations: primary and condensed. The Add to Google Wallet button only comes in black. Localized versions of the button are provided. Do not create buttons with your own localized text.

Primary Condensed
Primary Add to Google Wallet button Condensed Add to Google Wallet button
Use the primary button on white and light backgrounds. Use the condensed button if there is not enough space for the primary or full-width.

Clear space

Always maintain the minimum clear space of 8 dp on all sides of the Add to Google Wallet button. Ensure that the clear space is never broken with graphics or text.

Add to Google Wallet buttons must have 8 dp of space on all sides.

Minimum height

All Add to Google Wallet buttons need to have a minimum height of 48 dp.

Add to Google Wallet buttons must have a minimum height of 48 dp.

Dos and don'ts

Dos Don'ts
Do: Use only the Add to Google Wallet buttons provided by Google. Don't: Create your own Add to Google Wallet buttons or alter the font, color, button radius, or padding within the button in any way.
Do: Use the same style of button throughout your site. Don't: Make the Add to Google Wallet buttons smaller than other buttons.
Do: Ensure that the size of the Add to Google Wallet buttons remain equal to or larger than other buttons. Don't: Alter the button color.
Do: Keep the button ratio the same when resizing the Add to Google Wallet buttons. Don't: Free-scale the button.
Do: Use the provided localized version of the buttons. Don't: Create your own localized version of the button.

Best practices for button placement

Display the Add to Google Wallet button on confirmation app screens, web pages, or emails. Refer to the following best practices to guide your UI design.

Loyalty, Gift cards, Offers

Display the Add to Google Wallet button on confirmation screens. You can also display the button on your website or app, or include it in relevant emails.

Gift card     Coffee loyalty card

Use of the Google Wallet product name in text

You can use text to indicate to the user that their gift card is saved to their device.

Capitalize the letters "G" and "W"

Always use an uppercase "G" and an uppercase "W" followed by lowercase letters to refer to Google Wallet. Don't capitalize the full name "Google Wallet" unless it's to match the typographic style in your UI.

Don't abbreviate Google Wallet

Always write out the words "Google" and "Wallet."

Match the style in your UI

Set "Google Wallet" in the same font and typographic style as the rest of the text in your UI. Don't mimic Google's typographic style.

Always use the localized version of "Google Wallet"

Always write "Google Wallet" in the provided localized copy.

Design

Use the height and size fields of the g:savetoandroidpay HTML tag to modify the height and width of the Add to Google Wallet buttons. Use the textsize=large specification to dramatically increase text and button sizes for mobile implementations or cases with special UI requirements.

Use the theme to set the color of the buttons. The following table shows how these settings affect the Add to Google Wallet button.

Pass Creation Guidelines

To ensure your passes look great and function well, please adhere to the following guidelines for character limits, notifications, background colors, and hero images.

Card Background Color

You can set the background color with the field hexBackgroundColor. If you don't set the value, an algorithm analyzes the logo, finds the dominant color, and uses it for the background color.

Avoid high-saturation "Vibrant" zones (for example, neon green #00FF00 or electric cyan #00FFFF). These colors create intense eye strain and cause text to "bleed" or vanish into the background. Use one of the recommended colors instead.

Dark gray
#1a1a1a
Medium gray
#677088
Light gray
#e8eaed
Off-white
#f8f9fa
White
#ffffff
Red
#d6322d
Orange
#f78f48
Yellow
#f9bb2d
Green
#1e7e3b
Blue
#216acf
Purple
#9147df
Light pink
#fce8e6
Light green
#e6fffa
Light blue
#e8f0fe

Hero images

The class.heroImage field appears as a full-width image under the data fields of your pass.

Consider adding an image if you don’t have one already. If you do have an image, make sure to follow the specifications below. If you don’t select an image, we will show a fallback image of the pass category.

The following is a list of user interface recommendations for hero images:

Guideline Description
Preferred file type PNG. If you want the background color of the pass to show through, use a transparent PNG.
Recommended size 1032x812 px
Aspect ratio 1032:812 (approximately 5:4)
Dos and don'ts
Dos Don'ts
Use high resolution, photography or illustrations. Embed text into your images. This content won't be localized.

Include 20dp padding on the top and bottom for visual breathing room.

Do: Use padding

Have the main content of the image touching the top and bottom of the image.

Don't: No padding

Use an image that is square or almost square.

Do: Square image

Use thin rectangular images.

Don't: Thin rectangular image

Content

Titles, subtitles, field labels, & field data: To increase user comprehension, keep titles and other fields as short as possible. The following character limits apply to English, but these will be translated into other languages resulting in a varied user experience across devices and regions. When in doubt, simplify content while still conveying key details.

Field Limit
Title label < 47 characters
Subtitle label < 88 characters
Field/title label (e.g. Date, Description, Class, Passenger name) < 20 characters
Field data label (e.g. Oct 19, 2026, Economy Plus) < 15 characters

To ensure legibility, limit data to two fields per row, and up to 3 rows if possible.

Notifications

Field Limit
Title < 29 characters
Collapsed body < 40 characters
Expanded body < 80 characters

Adherence to character limits is recommended to prevent truncation for users with small devices or increased font sizes. Refer to Notifications | Mobile | Android Developers for more information.