Logo branding guidelines

Overview

Your logo is your identity and your most interminable and adaptable asset. All payment vendors are required to provide Google with a set of logos to be used in various areas throughout the Google ecosystem. For example, these logos are displayed in various user payment journeys in Google Pay and Google Play where the user needs to choose a Form of Payment (FOP). The illustration below shows such examples:

logo ecosystem

List of specifications

As a payment vendor, you will provide Google with assets that meet each of the five specifications defined below. Each specification controls the size, color palette, border padding, and other attributes that help provide a versatile, engaging, and human-centric experience in Google's payment flows. Each specification requires two file formats for a total of ten required image assets.

A list of the five specifications is shown below:

Recommendations and requirements

Recommendations

The following recommendations ensure your logo is clear, sharp, and adaptable to different set of screen sizes and OS themes (e.g. light and dark mode).

  • For sharpness and detail, utilize the full asset space so your logo fits to the maximum allowed dimensions.
  • When designing your logo, consider how it will look in front of darker backgrounds in Android and iOS's light and dark themes. See Dark theme considerations for further details.

Requirements

Regardless of logo specification, the below requirements are a general set of guidelines that all the logos should adhere to:

  • Include a transparent bounding box (a shape that with the same dimensions as the specification's dimensions) with no "stroke" or outline.
  • Ensure your single color logo uses only one color. See Single color logo considerations for more information.
  • Export your files with filenames that adhere to the convention in each logo specification.

Dark theme considerations

Both the latest versions of Android and iOS support a dark theme that uses a darker color palette for all screens, views, and menus. Native Google Play and Google Pay Android apps also support this theme and correspondingly darken their interfaces when the theme is enabled. Darker screen colors have implications regarding how you choose your logo's colors and overall design. Multicolored logos may be partially or completely unreadable when the background darkens in a dark theme. See the illustration below for an example:

light dark theme

In the illustration above note how the dark gray "Acme" text in the Acme Bank logo almost disppears when the background darkens in dark theme. Such dark colors in your multicolored logos should be avoided when they are presented in stand-alone text. For a list of best practices regarding your logo design in dark theme, see Designing your multicolored logo for dark theme.

For more information on dark theme, go here.

Designing your multicolored logo for dark theme

Although programmatic adjustments and tweaks from Google's UX team will assist in making your logos work best in dark theme, following the below best practices will help minimize the number of changes needed, better preserve your logo's original look, and help it blend smoothly with other areas of the screen.

  • Use desaturated colors like pastels and shades that incorporate gray and white. Avoid the use of fully saturated colors.
  • Use "on" colors such as white and different shades of white.
  • Adhere to acceptable constrast ratios between your logo and surrounding areas. For more information about contrast ratios visit w3.org.
  • Avoid shadows as they are difficult to see in dark backgrounds.
  • Test and experiment your logo design with dark backgrounds.

Single color logo considerations

Create your single color logos (e.g. 240 x 240px single color square and 240 x 240px single color square) with the color black (HEX #000000)
. You original logo may need to be modified to support a single color, since a single color will remove edges and borders caused by multiple colors. For an illustration on how your logo may change when a single color is used, see the example on the right.
Google will apply a tint to the logo when the background and logo color fall out of acceptable constrast limits (e.g. dark backgrounds in iOS and Android dark themes). See Tinting in light and dark themes for more information on logo tinting.
single color

Tinting in light and dark themes

Single color logos are tinted to maintain ideal color contrast ratios with surrounding backgrounds. For example, note how the logo below changes color depending on whether the OS is using light or dark theme:

light dark theme tinting

For more information on acceptable contrast ratios and a11y visit w3.org.

Asset resizing implications

Sizing up

Since your logos need to be adapted to a assortment of screen sizes and display densities, Google needs to obtain the largest asset size that's utilized within its apps and websites. For example, the 240 x 240px requirement is needed because it's Google Play's largest logo display size. Any smaller image would need to be sized up to fit those dimensions and potentially blur and distort the image. This blurring occurs mainly in non vector image formats such as png. Consider the example below where a smaller image is sized up to 240 x 240px. Note its pixelation and blurriness in the larger size:

logo size up

Sizing down

In addition, Google may downsize your logo. For example, a 240 x 240px asset may be resized down to 24 x 24px. This downsize may have implications to finer details in your logo design and should be tested before submitting your asset to Google. Note how the logo shown below retains its overall look when its downsized to a smaller size:

logo size down

Specification list

The below list details each of the five specifications for your logos. Each specification is required to be in two file formats: SVG and PNG.

240 x 240px color square

This asset is a color square with the dimensions of 240 x 240px. Scale your logo to fit into as much of the entire asset space as possible and center it both vertically and horizontally. See the examples on the right for more details.
color square
color square

Required attributes

Total dimensions240 x 240px
Logo dimensions240 x 240px
Aspect ratio1:1
Paddingnone
Bordernone
Color palettefull RGB color
Background colortransparent

Required files

Format File name convention Example
PNG [brand]_240x240_color_no_padding.png acmebank_240x240_color_no_padding.png
SVG [brand]_240x240_color_no_padding.svg acmebank_240x240_color_no_padding.svg

240 x 240px color square with padding

This asset is a color square with total dimensions of 240 x 240px. Your logo fits inside the asset centered around 20px of padding making the logo dimensions 200 x 200. Scale your logo to fit into as much of the 220 x 220px space as possible and center it both vertically and horizontally. See the examples on the right for more details.
color square pad
color square pad

Required attributes

Total dimensions240 x 240px
Logo dimensions200 x 200px
Aspect ratio1:1
Padding20px
Bordernone
Color palettefull RGB color
Background colortransparent

Required files

Format File name convention Example
PNG [brand]_240x240_color_padding.png acmebank_240x240_color_padding.png
SVG [brand]_240x240_color_padding.svg acmebank_240x240_color_padding.svg

1170 x 730px color oblong rectangle

This asset is a color oblong rectangle with the dimensions of 1170 x 730px. Scale your logo to fit into as much of the entire asset space as possible and center it both vertically and horizontally. See the examples on the right for more details.
color oblong
color oblong

Required attributes

Total dimensions1170 x 730px
Logo dimensions1170 x 730px
Aspect ratio8:5
Paddingnone
Bordernone
Color palettefull RGB color
Background colortransparent

Required files

Format File name convention Example
PNG [brand]_1170x730_color_no_padding.png acmebank_1170x730_color_no_padding.png
SVG [brand]_1170x730_color_no_padding.svg acmebank_1170x730_color_no_padding.svg

1170 x 730px color oblong rectangle with padding

This asset is a color oblong rectangle with total dimensions of 1170 x 730px. Your logo fits inside the asset centered around 100px of padding making the logo dimensions 970 x 530px. Scale your logo to fit into as much of the 970 x 530px space as possible and center it both vertically and horizontally. See the examples on the right for more details.
color oblong
color oblong

Required attributes

Total dimensions1170 x 730px
Logo dimensions970 x 530px
Aspect ratio8:5
Padding100px
Bordernone
Color palettefull RGB color
Background colortransparent

Required files

Format File name convention Example
PNG [brand]_1170x730_color_padding.png acmebank_1170x730_color_padding.png
SVG [brand]_1170x730_color_padding.svg acmebank_1170x730_color_padding.svg

240 x 240px single color square

This asset is a single color square with the dimensions of 240 x 240px. Scale your logo to fit into as much of the entire asset space as possible and center it both vertically and horizontally.
This logo must be created with the black color (HEX: #000000). See the examples on the right for more details on color and sizing. For more information on single color logos, see Single color logo considerations.
single color square
single color square

Required attributes

Total dimensions240 x 240px
Logo dimensions240 x 240px
Aspect ratio1:1
Paddingnone
Bordernone
Color paletteblack (HEX #000000)
Background colortransparent

Required files

Format File name convention Example
PNG [brand]_240x240_single_color_no_padding.png acmebank_240x240_single_color_no_padding.png
SVG [brand]_240x240_single_color_no_padding.svg acmebank_240x240_single_color_no_padding.svg

240 x 240px single color square with padding

This asset is a single color square with total dimensions of 240 x 240px. Your logo fits inside the asset centered around 20px of padding making the logo dimensions 200 x 200. Scale your logo to fit into as much of the 200 x 200px space as possible and center it both vertically and horizontally.
This logo must be created with the black color (HEX: #000000). See the examples on the right for more details. For more information on single color logos, see Single color logo considerations.
color square pad
color square pad

Required attributes

Total dimensions240 x 240px
Logo dimensions200 x 200px
Aspect ratio1:1
Padding20px
Bordernone
Color paletteblack (HEX #000000)
Background colortransparent

Required files

Format File name convention Example
PNG [brand]_240x240_single_color_padding.png acmebank_240x240_single_color_padding.png
SVG [brand]_240x240_single_color_padding.svg acmebank_240x240_single_color_padding.svg

Uploading your logos

Upload your logo assets using the GSP - LOGOs upload. If your having difficulty accessing or using the form, contact your Technical Engagement Contact or Technical point of contact assigned to your account.