g2a pay guideline for merchant · apply the logo version for very small sizes. minimum logo size...
TRANSCRIPT
G2A PAY merchantmarketing guide
February 2017
Horizontal logo
The G2A PAY logo consists of a colorful signet and the G2A PAY logotype. It is also the basic, most frequently used version of the sign.
Page 02
February 2017G2A PAY merchantmarketing guide
Logo
Color palette
Typeface
In text
Usage
CTA buttons
Acceptance mark
Payment methods
Badges
B R A N D
T O O L S
Vertical logo
Page 03
February 2017
The G2A PAY vertical logo is used only when the horizontal version is not readable because of the size of the surface on which it is applied.
The vertical logo can also be used when surrounded by other vertical signs.
G2A PAY merchantmarketing guide
Logo
Color palette
Typeface
In text
Usage
CTA buttons
Acceptance mark
Payment methods
Badges
B R A N D
T O O L S
Logo
The basic versions of the logo designed to use online:
1. on light background (preferred white, alternative gray)
2. on dark background ( preferred company Navy Blue, black or dark gray)
A general rule for choosing the sign on the background is maximum readability of the signet and the G2A PAY logotype.
In case of colored backgrounds, on which the G2A PAY sign will be placed (other than white, gray, black or navy blue) we place the achromatic version of the sign.
Page 04
Basic logo design for light background
Achromatic logo design for lighter colours Achromatic logo design for darker colours
Basic logo design for dark background
G2A PAY merchantmarketing guide
Logo
Color palette
Typeface
In text
Usage
CTA buttons
Acceptance mark
Payment methods
Badges
B R A N D
T O O L S
February 2017
G2A PAY merchantmarketing guide
The contrast between the G2A PAY sign and the background is important to ensure the sign’s readability.
Sufficient contrast Insufficient contrast
Logo / background contrast
Page 05
Logo
Color palette
Typeface
In text
Usage
CTA buttons
Acceptance mark
Payment methods
Badges
B R A N D
T O O L S
February 2017
Page 06
Logo
Good and bad examplesof the sign variant andbackground color combination.
The G2A PAY sign is not readable. In case of black, very dark gray or Navy Blue you should apply the basic logo design for dark backgrounds.
The G2A PAY sign is not readable. In case of white or light backgrounds you should apply the basic logo for light backgrounds.
The G2A PAY signet is not readable. In case of colorful dark backgrounds you should apply the achromatic logo for darker colors.
PAYMENTS POWERED BY PAYMENTS POWERED BYPAYMENTS POWERED BY
PAYMENTS POWERED BY PAYMENTS POWERED BYPAYMENTS POWERED BY
G2A PAY merchantmarketing guide
Logo
Color palette
Typeface
In text
Usage
CTA buttons
Acceptance mark
Payment methods
Badges
B R A N D
T O O L S
February 2017
Page 07
Logo / clear space & minimum size
The official G2A PAY logo should be surrounded with clear spaceto ensure its visibility and impact. No graphic elements of any kind should invade this zone.
Preferred clear space size - minimum 10 pixels.
Clear space – print Clear space – digital
For print, the logo should never be smallerthan 20mm. If smaller than 45mm,apply the version for very small sizes.
Minimum logo size – print
Don’t make the digital logo smallerthan 100px wide. If smaller than 290px, apply the logo version for very small sizes.
Minimum logo size – digital
X
290 px 100 px
G2A PAY logo for very small sizes (without the “.com” inside the letter A).
X/2 10px
45mm 20mm
In print materials, the preferred size of the clear space around the logo is equal to half length of the logo height.
G2A PAY merchantmarketing guide
Logo
Color palette
Typeface
In text
Usage
CTA buttons
Acceptance mark
Payment methods
Badges
B R A N D
T O O L S
February 2017
R85 G94 B99555E63C20 M0 Y0 K75PANTONE 431 C
R231 G64 B17E74011C0 M85 Y100 K0PANTONE 172 C
R5 G106 B171056AABC89 M53 Y7 K0PANTONE 2175 C
R246 G139 B0F68B00C0 M54 Y96 K0PANTONE 1375 C
R38 G162 B22026A2DCC73 M18 Y0 K0PANTONE 2191 C
WHITER20 G27 B77141B4DC100 M100 Y6 K60PANTONE 2766 C
Page 08
Color palette
Backgroud colors
Color mixing examples
Design colors
80% 60% 40% 20% 80% 60% 40% 20%
80% 60% 40% 20%
80% 60% 40% 20%
80% 60% 40% 20%
G2A PAY merchantmarketing guide
Logo
Color palette
Typeface
In text
Usage
CTA buttons
Acceptance mark
Payment methods
Badges
B R A N D
T O O L S
February 2017
Typeface
Page 09
ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz 01234567890 (&?$€!)
ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz 01234567890 (&?$€!)
Roboto ThinRoboto LightRoboto RegularRoboto MediumRoboto Bold
Roboto Thin ItalicRoboto Light ItalicRoboto ItalicRoboto Medium ItalicRoboto Bold Italic
Roboto is the standard typeface for the entire G2A PAY brand.
G2A PAY merchantmarketing guide
Logo
Color palette
Typeface
In text
Usage
CTA buttons
Acceptance mark
Payment methods
Badges
B R A N D
T O O L S
February 2017
G2A PAY merchantmarketing guide Using the G2A PAY name in text
When using the G2A PAY name in text, use uppercase letters. The name of the brand should be written in the same font as the surrounding text.
DO NOT use the logo as part of a sentence within a block of copy.You can, however, use the logo at the end of a short descriptor, such as “Secure payments by G2A PAY” or “Check out with G2A PAY.” Additionally, the G2A PAY logo can be used inline within endorsement marks.
The G2A PAY name must not be translated into other languages.
In case of promoting G2A PAY with another payment brand, the G2A PAY brand name and/or mark must be presented with prominence and frequency equal to that of all other payment brand names and/or marks.
Apply nowSign up for a G2A PAY accountand expand your business.
Apply nowSign up for a G2A Pay accountand expand your business.
Apply nowSign up for a G2A PAY accountand expand your business.
Apply nowSign up for a accountand expand your business.
G2A PAYG2A Payg2a pay
Page 10
February 2017
Logo
Color palette
Typeface
In text
Usage
CTA buttons
Acceptance mark
Payment methods
Badges
B R A N D
T O O L S
Usage
Page 11
Don’t
• distort the trademark• apply unnecessary effects• remove elements of the logo• attach anything in the space
around the logo• modify the trademark
Do
• apply the right version on the right background
• adhere to the measurement of the safety area
• ensure that the contrast between the trademark and the background are adjusted properly.
Don’t place the logo overa pattern of any kind.
Don’t place the logo over a photo.
Don't stretch distort the logo.Don't place the logo on the signet.
Don’t put shadows behind the logo.Don’t put a glow behind the logo.
Don’t change logo colors.
Don’t use the logo within a sentence.Don’t use a keyline or strokearound the logo.
Don’t place the logoon top of an object.
Don't use the sign in 3D.Don’t tilt the logo.
Using saves time.
G2A PAY merchantmarketing guide
Logo
Color palette
Typeface
In text
Usage
CTA buttons
Acceptance mark
Payment methods
Badges
B R A N D
T O O L S
February 2017
CTA branded buttons
Page 12
The G2A PAY Checkout or pay buttons exist in a digital merchant experience and trigger the payment process.
The preferred color for buttons that lead to a payment is orange. Silver buttons should be used only if the orange color doesn’t pop on the merchant page or in case of more high-end merchants.
There are two design variants of the checkout/pay branded buttons:
• The G2A PAY logo only.
• The G2A PAY logo with the “Checkout with”, “Pay by” CTA copy.
The best practice for these CTA buttons is to place them directly where the payment or the forwardto the checkout page takes place(i.e. right next to the price or nearthe product).
G2A PAY merchantmarketing guide
Checkout with
Pay by
Checkout with
Pay by
Checkout with
Pay by
Pay by
Checkout with
Shopping cart
$100
Product$100
Logo
Color palette
Typeface
In text
Usage
CTA buttons
Acceptance mark
Payment methods
Badges
B R A N D
T O O L S
February 2017
Pay now
Pay now Pay now
Pay now
Pay now Pay now
CTA unbranded buttons
Page 13
The G2A PAY Checkout/Pay unbranded buttons come in three formats:
• unbranded: this version includes only call-to-action copy.
• unbranded with acceptance marks: just like the unbranded version, this version features acceptance marks centered below
• unbranded with additional text: similar to the unbranded version, this one features an additional text “Powered by G2A PAY” below.
Every CTA text should be in the alternate ROBOTO BOLD typeface.
G2A PAY merchantmarketing guide
Powered by G2A PAY Powered by G2A PAY
Logo
Color palette
Typeface
In text
Usage
CTA buttons
Acceptance mark
Payment methods
Badges
B R A N D
T O O L S
February 2017
The best practice for these CTA buttons is to place them directly where the payment or the forwardto the checkout page takes place(i.e. right next to the price or nearthe product).
Shopping cart
$100
Product$100
Acceptance mark
Page 14
Use only the brand-approved acceptance marks when showing G2A PAY as a payment option at your checkout.
• Use only the G2A PAY acceptance mark artwork provided by G2A PAY.
• DO NOT change the acceptance mark in any way or any other individual element inside the mark which includes the G2A PAY logo.
Minimum acceptance mark size.
Don’t make the logo smallerthan 50 px wide and 30 px tallin online executions.
50 px 50 px
30 px
ExamplesG2A PAY acceptance mark
G2A PAY merchantmarketing guide
Logo
Color palette
Typeface
In text
Usage
CTA buttons
Acceptance mark
Payment methods
Badges
B R A N D
T O O L S
February 2017
Payment methods by region
Page 15
Examples of the most popular payment methods by region available through the G2A PAY Checkout.
G2A PAY merchantmarketing guide
Europe
Latam
Mena
Asia
Global
CIS
Logo
Color palette
Typeface
In text
Usage
CTA buttons
Acceptance mark
Payment methods
Badges
B R A N D
T O O L S
February 2017
Payment methods modules
Page 16
All-in-one payment method
To let your customers know that they can pay with their credit card or bank account via G2A PAY, use one of the G2A PAY modules to the right.
In case of modules, you can also choose to place the information about “200+ payment methods” as the last payment option. This will clearly state that there are a lot more payment methods available through the G2A PAY Checkout.
Separate payment method
If you want to show that G2A PAY is one of the accepted payment methods at your checkout, it is recommended to place the G2A PAY acceptance mark always as the first option.
G2A PAY merchantmarketing guide
Prefered landscape placementModule template
Module template example Prefered single-stackedplacement
Prefered double-stackedplacement
200+paymentmetods
Logo
Color palette
Typeface
In text
Usage
CTA buttons
Acceptance mark
Payment methods
Badges
B R A N D
T O O L S
February 2017
Example payment method modules
Page 17
A few example modules in terms of payment methods for different regions.
When building such module you should first place the acceptance mark for the most popular payment methods offered by G2A PAY in that region.
Additionally, at the bottom of the list you can place the “200+ payment methods” module to indicate that there are a lot more payment methods available via G2A PAY.
G2A PAY merchantmarketing guide
Global (example) Latam (example)
Asia (example) Europe (example)
CIS (example) MENA (example)
200+paymentmetods
200+paymentmetods
200+paymentmetods
200+paymentmetods
200+paymentmetods
200+paymentmetods
200+paymentmetods
Logo
Color palette
Typeface
In text
Usage
CTA buttons
Acceptance mark
Payment methods
Badges
B R A N D
T O O L S
February 2017
Payment method list
Page 18
If the payment methods are presented in the form of a list, it is best to keep the following order:
• The G2A PAY logo, in case at least one alternative payment method is displayed in the form of a logo (i.e. PAY PAL)
• The G2A PAY acceptance mark, in case all other payment methods are presented in this form.
G2A PAY merchantmarketing guide
Payment Options
Payment Options
Logo
Color palette
Typeface
In text
Usage
CTA buttons
Acceptance mark
Payment methods
Badges
B R A N D
T O O L S
February 2017
Badges
Page 19
A badge is an element which should indicate the connection between G2A PAY and the Merchant who has implemented the payment gateway on their website. Badges are not CTA elements used for payments and they don’t forward the user to the checkout.
Additionally, if needed, the “Now accepting” badges can be expanded by a few main payment methods (chosen by the merchant) to inform the user that the most popular payment methods by region are now available via G2A PAY. See the picture to the right.
DO NOT create your own badge.
Payments by
Now accepting
Partner
Now accepting
G2A PAY merchantmarketing guide
Payments by
Now accepting
Payments by Payments by
Partner
Now accepting
200+paymentmetods
200+paymentmetods
Logo
Color palette
Typeface
In text
Usage
CTA buttons
Acceptance mark
Payment methods
Badges
B R A N D
T O O L S
February 2017
The 2017 Brand Style Guide doesn’tconstitute any license agreement andno rights are granted under this document. The G2A PAY brand is a registered trademark protected by intellectual property laws worldwide. With written approval, we permit our advertisers and/or business partners to use the G2A PAY branding elements within the requirements outlined in this document and inrelevant agreements.
This document is intended to provide best practices for utilizing the G2A PAY brand. Since G2A PAY is a valuable asset we require advanced review of all creative materials.All materials must be submitted to G2A PAY in advance for approvalby G2A PAY in accordance with our advertising and/or promotion policies.