# 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](https://developers.google.com/static/standard-payments/shared/guides/branding-guidelines/assets/logos-in-ecosystem.png)

### List of specifications

As a payment vendor, you will provide Google with assets that meet each of the
six 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 twelve required image
assets.

A list of the six specifications is shown below:
Specification Required file formats 1 [320 x 320px color square](https://developers.google.com/pay/e-wallets-v1/guides/branding-guidelines#color-square) PNG, SVG 2 [320 x 320px color square with padding](https://developers.google.com/pay/e-wallets-v1/guides/branding-guidelines#color-square-padding) PNG, SVG 3 [1170 x 730px color oblong rectangle](https://developers.google.com/pay/e-wallets-v1/guides/branding-guidelines#color-rect) PNG, SVG 4 [1170 x 730px color oblong rectangle with padding](https://developers.google.com/pay/e-wallets-v1/guides/branding-guidelines#color-rect-padding) PNG, SVG 5 [320 x 320px single color square](https://developers.google.com/pay/e-wallets-v1/guides/branding-guidelines#single-color-square) PNG, SVG 6 [320 x 320px single color square with padding](https://developers.google.com/pay/e-wallets-v1/guides/branding-guidelines#single-color-square-padding) PNG, SVG

## 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](https://developers.google.com/pay/e-wallets-v1/guides/branding-guidelines#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](https://developers.google.com/pay/e-wallets-v1/guides/branding-guidelines#singlecolor) 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](https://developers.google.com/static/standard-payments/shared/guides/branding-guidelines/assets/logo-contrast-dark-mode.png)

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](https://developers.google.com/pay/e-wallets-v1/guides/branding-guidelines#dark-theme-best-practices).

For more information on dark theme, go
[here](https://material.io/design/color/dark-theme.html).

### 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](https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html).
- 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. [320 x 320px single color square](https://developers.google.com/pay/e-wallets-v1/guides/branding-guidelines#single-color-square) and [320 x 320px single color square](https://developers.google.com/pay/e-wallets-v1/guides/branding-guidelines#single-color-square-padding)) 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](https://developers.google.com/pay/e-wallets-v1/guides/branding-guidelines#tinting) for more information on logo tinting. ![single color](https://developers.google.com/static/standard-payments/shared/guides/branding-guidelines/assets/singlecolor-explained.png)

### 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](https://developers.google.com/static/standard-payments/shared/guides/branding-guidelines/assets/logo-tinting-in-dark-theme.png)

For more information on acceptable contrast ratios and a11y visit
[w3.org](https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html).

## 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 320 x 320px 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 320 x 320px. Note its pixelation and blurriness in the
larger size:
![logo size up](https://developers.google.com/static/standard-payments/shared/guides/branding-guidelines/assets/logo-size-up.png)

### Sizing down

In addition, Google may downsize your logo. For example, a 320 x 320px asset
may be resized down to 32 x 32px. 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](https://developers.google.com/static/standard-payments/shared/guides/branding-guidelines/assets/logo-size-down.png)

## Specification list

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

### 320 x 320px color square

This asset is a color square with the dimensions of 320 x 320px. 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](https://developers.google.com/static/standard-payments/shared/guides/branding-guidelines/assets/color-square-1.png) ![color square](https://developers.google.com/static/standard-payments/shared/guides/branding-guidelines/assets/color-square-2.png)

#### Required attributes

|---|---|
| Total dimensions | 320 x 320px |
| Logo dimensions | 320 x 320px |
| Aspect ratio | 1:1 |
| Padding | none |
| Border | none |
| Color palette | full RGB color |
| Background color | transparent |

#### Required files

| Format | File name convention | Example |
|---|---|---|
| PNG | \[brand\]_320x320_color_no_padding.png | acmebank_320x320_color_no_padding.png |
| SVG | \[brand\]_320x320_color_no_padding.svg | acmebank_320x320_color_no_padding.svg |

### 320 x 320px color square with padding

This asset is a color square with total dimensions of 320 x 320px. Your logo fits inside the asset centered around 60px 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. See the examples on the right for more details. ![color square pad](https://developers.google.com/static/standard-payments/shared/guides/branding-guidelines/assets/color-square-padding-1.svg) ![color square pad](https://developers.google.com/static/standard-payments/shared/guides/branding-guidelines/assets/color-square-padding-2.svg)

#### Required attributes

|---|---|
| Total dimensions | 320 x 320px |
| Logo dimensions | 200 x 200px |
| Aspect ratio | 1:1 |
| Padding | 60px |
| Border | none |
| Color palette | full RGB color |
| Background color | transparent |

#### Required files

| Format | File name convention | Example |
|---|---|---|
| PNG | \[brand\]_320x320_color_padding.png | acmebank_320x320_color_padding.png |
| SVG | \[brand\]_320x320_color_padding.svg | acmebank_320x320_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](https://developers.google.com/static/standard-payments/shared/guides/branding-guidelines/assets/color-oblong-rect-your-logo.svg) ![color oblong](https://developers.google.com/static/standard-payments/shared/guides/branding-guidelines/assets/color-oblong-rect-real-example.svg)

#### Required attributes

|---|---|
| Total dimensions | 1170 x 730px |
| Logo dimensions | 1170 x 730px |
| Aspect ratio | 8:5 |
| Padding | none |
| Border | none |
| Color palette | full RGB color |
| Background color | transparent |

#### 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](https://developers.google.com/static/standard-payments/shared/guides/branding-guidelines/assets/color-oblong-rect-your-logo_padding.svg) ![color oblong](https://developers.google.com/static/standard-payments/shared/guides/branding-guidelines/assets/color-oblong-rect-real-example_padding.svg)

#### Required attributes

|---|---|
| Total dimensions | 1170 x 730px |
| Logo dimensions | 970 x 530px |
| Aspect ratio | 8:5 |
| Padding | 100px |
| Border | none |
| Color palette | full RGB color |
| Background color | transparent |

#### 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 |

### 320 x 320px single color square

This asset is a single color square with the dimensions of 320 x 320px. 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](https://developers.google.com/pay/e-wallets-v1/guides/branding-guidelines#singlecolor). ![single color square](https://developers.google.com/static/standard-payments/shared/guides/branding-guidelines/assets/single-color-square-1.svg) ![single color square](https://developers.google.com/static/standard-payments/shared/guides/branding-guidelines/assets/single-color-square-2.svg)

#### Required attributes

|---|---|
| Total dimensions | 320 x 320px |
| Logo dimensions | 320 x 320px |
| Aspect ratio | 1:1 |
| Padding | none |
| Border | none |
| Color palette | black (HEX #000000) |
| Background color | transparent |

#### Required files

| Format | File name convention | Example |
|---|---|---|
| PNG | \[brand\]_320x320_single_color_no_padding.png | acmebank_320x320_single_color_no_padding.png |
| SVG | \[brand\]_320x320_single_color_no_padding.svg | acmebank_320x320_single_color_no_padding.svg |

### 320 x 320px single color square with padding

This asset is a single color square with total dimensions of 320 x 320px. 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](https://developers.google.com/pay/e-wallets-v1/guides/branding-guidelines#singlecolor). ![color square pad](https://developers.google.com/static/standard-payments/shared/guides/branding-guidelines/assets/single-color-square-padding-1.svg) ![color square pad](https://developers.google.com/static/standard-payments/shared/guides/branding-guidelines/assets/single-color-square-padding-2.svg)

#### Required attributes

|---|---|
| Total dimensions | 320 x 320px |
| Logo dimensions | 200 x 200px |
| Aspect ratio | 1:1 |
| Padding | 60px |
| Border | none |
| Color palette | black (HEX #000000) |
| Background color | transparent |

#### Required files

| Format | File name convention | Example |
|---|---|---|
| PNG | \[brand\]_320x320_single_color_padding.png | acmebank_320x320_single_color_padding.png |
| SVG | \[brand\]_320x320_single_color_padding.svg | acmebank_320x320_single_color_padding.svg |

## Uploading your logos

Upload your logo assets using the
[GSP - LOGOs upload](https://forms.gle/1yKVWZU3CY4Ra2Et6). If your having
difficulty accessing or using the form, contact your
**Technical Engagement Contact** or **Technical point of contact** assigned
to your account.