Campus ID branding

The following guidelines show how to include the Google Pay brand within your app and provide an outline for the card assets and metadata required to complete provisioning of a Campus ID card.

[coming soon] Add to Google Wallet

Google Wallet is coming soon

Here is a preview of the Add to Google Wallet buttons:

Primary Add to Google Wallet button Full-width Add to Google Wallet button Condensed Add to Google Wallet button

Primary

Full-width

Condensed

Add to phone button

The starting point to provision a Campus ID card is when the user clicks or taps the Add to phone button. The following sections outline how to place and format this button within your app.

Placement

The button must be placed prominently within the provider app. After the user successfully onboards to the provider app, include prompts to link the user's student account to Save to Google Wallet. When the uses selects the Add to phone button, the provisioning flow is initiated.

Download

To download the buttons to use in your app, click one of the following Download assets buttons. The assets are available in multiple languages as EPS or SVG files:

Download assets - EPS Download assets - SVG

All Add to phone buttons displayed on your site, app, or email communications must adhere to our brand guidelines, which are described on this page. They include, but aren't limited to, the following:

  • Size relative to other similar buttons or elements of the page
  • Contrast with the background color of the surrounding area
  • Clear space

Size

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

Style

The Add to phone buttons are available in three variations: black, white, and white with a black outline. Buttons with localized versions of the text are provided. Don't create buttons with your own localized text.

Black White White with outline
Use the black button on white or light backgrounds to provide contrast. Don't use the black button on dark backgrounds. Instead, use the white button. Use the white button on dark or colorful backgrounds. Don't use the white button on white or light backgrounds. Instead, use the black button or the white button with an outline. Use the white button with an outline as an alternative to the black button on white or light backgrounds. Don't use this button on dark or colorful backgrounds. Instead, use the standard white button.

Clear space

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

Minimum height

All Add to phone buttons need to have a minimum height of 36 dp.

Dos and don'ts

Dos Don'ts
Do: Use only the Add to phone buttons provided by Google. Don't: Don't create your own Add to phone 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. Button color may adapt if the color of the background changes. Don't: Don't make the Add to phone buttons smaller than other buttons.
Do: Ensure that the size of the Add to phone buttons remains equal to or larger than other buttons. Don't: Don't use a button color that's similar to the background. For example, don't use the white button on a white background.
Do: Ensure that you choose a button color that contrasts with your background. Don't: Don’t free scale the button.
Do: Keep the button ratio the same when resizing the Add to phone buttons.

Card assets and field mapping

As a quick reference, Campus IDs have the following required fields and image assets:

Card details formatted examples
Contact Email support@example.edu
Contact Number +1 800-555-0155
Contact Website example.edu
Privacy Policy URL example.edu/privacy-policy
ToS URL example.edu/card/tos
Images
Basic requirements of all images
  • File size: 2 MB to 4 MB
  • Image format: PNG
  • Color mode: RGB
Wordmark (light mode)
  • Height: 128 px
  • Displayed during provisioning
  • Image needs to have a max height of 128, width can vary to fit wordmark
Wordmark (dark mode)
  • Same requirements as Wordmark (light mode)
  • Transparent wordmark with appropriate contrast against a dark background
Student photo
  • Width: 400 px
  • Height: 400 px
University logo or seal
  • Width: 720 px
  • Height: 720 px
  • Monochromatic background watermark
  • School mascot recommended
Hero (strip) with wordmark
  • Width: 1600 px
  • Height: 504 px
  • Displayed on card details and tap
Colors
Primary background color
  • Accent and background color on tap confirmation and card details screens.
  • If not specified, a dominant color is extracted from the downloaded card image and gray is used for the initial generic art.
Secondary contrasting text color
  • Appears as text on the primary background.
  • Optional: Defaults to white or black, depending on which color has a higher contrast with the primary background color.
Contrast Contrast between primary and secondary colors must have a contrast ratio of at least 4.5:1 to meet WCAG 2.0 level AA accessibility requirements. You can check the contrast ratio between your colors at the WebAIM contrast checker.