Google+ Platform

Branding guidelines

These guidelines provide you with the design specification for various Google+ buttons and badges. You can use these assets on your app (website or mobile app) without pre-approval provided you follow these basic guidelines. Use of Google brands in ways not expressly covered by this document is not allowed without prior written consent from Google (see the Guidelines for Third Party Use of Google Brand Features for more information). Button use must also be in line with our Buttons Policy.

Google+ Sign-In button branding guidelines

Sign-In buttons are available in two color styles (red background and white background) and four sizes, as shown below.

The Google+ Sign-In button consists of two parts—the Google+ icon on the left, and the button text. The Google+ icon must appear on all sign-in buttons.

Style Red Buttons White Buttons Image Files
Long
Includes Google+ Sign-In buttons and Google+ icons in png and psd format, in many resolutions. Includes base, hover and press states.
Medium
Google
Short

Photoshop files are included in the download so you can translate the "Sign in with" or "Sign in" text. These files require Roboto font

Google+ Sign-In and other third party sign-in options

Equal prominence

The Google+ Sign-In button must be displayed at least as prominently as other third party sign-in options. For example, buttons should be approximately the same size and have similar visual weight.

Matching your own app's style:

You may create a custom Google+ Sign-In button to match your app's style. For example, you can customize it using a style similar to other sign-in buttons with:

  • Same color of visual treatment
  • Same font
  • Same shape and size
  • Similar button text

For more information, see the developer policies for other requirements related to branding and buttons.

Custom button design specifications

Some of this information is useful if you need to adapt the button to your app design or translate the text "Sign in with" or "Sign in", which can widen or narrow the button. You must follow these guidelines, except as noted above in Matching your own app's style.

Size

You can scale the button as needed for different devices and screen sizes, but you must preserve the aspect ratio so that the Google+ icon is not stretched.

Text

To encourage users to click the button, we recommend the call-to-action text "Sign in with Google" or "Sign up with Google". It should be clear to the user that they are signing into your app or signing up for your app with their Google credentials, not signing up or registering for a Google account on your app.

"Google" Text

Do not use the word "Google+" on your button, use the word "Google" instead. You can use the word "Google" by itself in the button if it is accompanied by adjacent text that makes it clear what the action is. For example:

Sign in with:

Color

You should use the Google+ Sign-In button in its provided color schemes. The color for an unpressed red button is #dd4b39. The color for an unpressed white button is #737373. Do not make the button other colors, except as noted for situations with Matching your own app's style.

Font

The button font is Roboto Bold, a TrueType font. To install, first download Roboto font and unzip the download bundle. On Mac, just double-click Roboto-Bold.ttf, then click "Install Font". On Windows, drag the file to "My Computer" > "Windows" > "Fonts" folder. Do not use other fonts on the button, except as noted for situations with Matching your own app's style.

For websites that use a custom sign-in button, you can load the Roboto font from Google Fonts.

Padding

The padding to the left (and right) of the text should equal the width of the Google+ icon (x).

Illustrates the
      dimensions of the elements of a button including padding around text.

Google+ icon in the "Sign in with Google" button

Regardless of the text, you must not change the icon on the left side of the button, other than to re-size it; the Google+ icon must be part of the button. If you need to create your own custom size Google+ icon, start with any of the icon sizes included in the download bundle (in the g+ icon folder). The color of a red Google+ icon (on a white background) is #dd4b39.

Red text (g+) on a white
     background, which is an allowed design.

Incorrect button design

Except as noted above for situations with Matching your own app's style:

  • Do not use "Google+" in the button text— use the word "Google" instead.
  • Do not use green, blue, or a color other than the two versions specified for the button.
  • Do not use the Google+ icon by itself without the button boundary and without text to indicate what the user action is. Because the icon is also used as part of the Google+ Badge, we want to make sure it is clear to users what action to expect.
  • Do not use a Google icon to represent Google+ Sign-In.
  • Do not use an old Google+ icon.
  • Do not create your own icon for the button.
  • Do not use the term "Google" by itself in the button without an accompanied Google+ icon.

Examples of incorrect Google+ Sign-In button designs:

Incorrect use of colored Google+ icon
Never use the colored Google+ logo in the button and always include the Google+ icon on the left of the button.
Incorrect use of font and Google icon
Do not change the font of the button except as noted; do not use the Google icon.
Incorrect use of Google icon
Do not use a Google icon to represent Google+ Sign-In. Use only the Google+ icon.
Incorrect use of Google icon
Do not use a Google icon to represent Google+ Sign-In. Only use the Google+ icon.

Google+ interactive post branding guidelines

When creating a call-to-action button for an interactive post on your app, it should be consistent with your app design and the Google+ branding guidelines. If you use the Google+ icon to invoke an interactive post, it must adhere to our Google+ icon guidelines below, including color scheme, styling, and so forth.

Google+ icon
Google+ icon

Download Google+ icon in various sizes.

Learn how to customize your interactive post button.

Google+ badge, share, and follow button branding guidelines

Adding a Google+ badge to your website, email, or marketing campaign makes it easy for fans to add your page or profile to their circles, or join your community. Similarly, the compact Follow button allows visitors to add your page or profile to their circles directly from your app. The Share button allows visitors to easily share your content with their circles.

We prefer that you use the Google+ badge, Share button, and Follow button in their provided formats.

Google+ icon as a button or badge: In certain situations, you might want to use the Google+ icon to enable users to share content to Google+ or to link to your Google+ page so that users can follow you. You can do this so long as the context makes it clear what action will be taken when the user clicks on the icon. For example:

  • Share this article: Share on Google+
  • Follow us on: Follow us on Google+

In addition, the icon must adhere to the Google+ icon guidelines below, including color scheme, styling, and so forth.

+1 button branding guidelines

You must only use the +1 button in its provided formats. You must not use another image to represent the functionality of a +1 button, use old branding, or create your own +1 button. You must not use the "+1" symbol to represent a share or for any other purpose. The +1 button comes in a variety of sizes to work on any page. You can also include an annotation of the total number of +1's for the page. Depending on width, the +1 button annotation can also display profile pictures and names of others who have +1'd the page. You must never create a custom count of +1s or shares next to your custom button.

Google+ icon branding guidelines

We prefer that you do not change or remake the icon in any way. But, if you display multiple third-party social icons together on your app, you can customize the Google+ icon to match your app's style provided that all buttons are customized using a similar style:

  • Same color and visual treatment.
  • Same shape and size.

You must not change the font of the "g" or the position of the "+" symbol in the icon and the aspect ratio must be preserved. The "g+" must always be centered in the icon.

An
      example of the Google+ icon
Google+ icon

You can download Google+ icon in various sizes. The red color of the Google+ icon is #dd4b39.

Use of Google brands in ways not covered by this document is not allowed without prior written consent from Google (see the Getting permission to use Google's brand features for more information).

Authentication required

You need to be signed in with Google+ to do that.

Signing you in...

Google Developers needs your permission to do that.