Brand guidelines

Representing the
Open Payments brand

Logo

Do not use the Open Payments mark or any variant of the Open Payments mark in conjunction with the overall name of your application, product, service, or website. Do not alter or use the Open Payments mark in a way that may be confusing or misleading, and never use Open Payments branding as the most prominent element on your page.

Standard lockup

The standard lockup can be used in slide decks and blog posts.
Whenever possible, the logo should be represented as a horizontal lockup with a full color logomark and #1E3250 or solid white logotype.

Logomark

When there is limited vertical and horizontal space, the logomark can be used by itself without the logotype.

Colours

#CE6564

#F47F5F

#6D995C

#459789

#51797D

#845578

#F59297

#FCC9B3

#7FC78C

#8FD1C1

#9EC7D0

#978AA4

Logo

The Open Payments logo consists of 6 base colours, each with a light secondary variant.

#1E3250

#FABD84

#1E3250

#FABD84

Emphasis

There are two auxilary colours which are used for emphasis or text.

Payment button

These guidelines are to be used as a reference point when implementing an Open Payments payment button within your app or website. The Open Payments payment button must always use the Open Payments specification when making payments.

All Open Payments payment buttons within your app or website must adhere to our brand guidelines, which include, but are not limited to, the following requirements:

Specification

Open Payments logo size 24 dp.
Minimum width 90 dp, and minimum height 48 dp.
Minimum 8 dp margin on all sides of the button.
Minimum 8 dp padding between elements inside the button.
Content must be vertically centered.

Contrast

The button colour must contrast with the background colour of the surrounding area.
Use white buttons on dark or colourful backgrounds.
Use black buttons on white or light background.

Rubik
Regular
20

Button

Text

The text on the button must be a single, title case, verb. For example, Pay, Tip, Donate, Subscribe, Buy, etc.
The text should always be to the right of the logo.

Although Open Payments payment buttons must adhere to the above brand guidelines, specific implementations may vary to fit into the branding or style of your app or website, which can include:

Shape

Variations in the button's corner radius and shape, to match other elements on the page. Note the larger width and corner radius.

Elevation

Variations in the elevation or shadow of the button. Note the higher elevation.

State

Variations specific states of the button, such as active, hover, or focus. Note the change in elevation with the various states.

Pay mark

The Open Payments pay mark should be used when displaying Open Payments as a payment option in a payment flow.

Mark

Do not change the color or weight of the mark's outline or alter the mark in any way. Use only the mark provided by Open Payments.

Open Payments

Generic Pay

**** 4242

Size

If needed, adjust the height of the mark to match other brand identities displayed in your payment flow. Always maintain the minimum clear space of 8 dp on all sides of the mark.