CONNECT branding guidelines

CONNECT - Branded example flow

CONNECT branded example flow


Service side (Button)

Style

We provide a "Sign in with CONNECT" button. The button is available in two different styles:

Dark gray button Light gray button
CONNECT dark gray button CONNECT light gray button

Choose the style fitting best for your needs.

Format

The buttons are provided as ready made images in 3 different states, normal, pressed and hover. For Android or iOS, there is the option of a scalable button. For this see scalable button rules.

The assets are available as PNG and SVG.

Size

The buttons are provided in various sizes. Do not scale the buttons, except for the Android and iOS where a scalable button is provided. For this see scalable button rules.

Text (scalable button)

The call to action text is "Sign in with CONNECT" which will be provided in different languages. The color of the text for the "light gray" style is #444444 and #FFFFFF for the "dark gray" style.

Font (scalable button)

The fonts to be used in their preferred order are Roboto light, Helvetica light, Arial regular

Font examples for the CONNECT button

Padding (scalable button)

The setup for the scalable buttons have to obey to the following padding rules. The left symbol part including the line is not to be scaled at all. The right text part can be scaled to fit the centred text with a padding on each side matching the text height.

Visual guide on padding in the CONNECT button


CONNECT side (Branding)

We provide the possibility of branding our authentication flows with your logo and a solid or 2-color gradient header of your choice.

Branded flow example

CONNECT branded web flow

Header color

We support a solid or a 2-color gradient header color, where the two colors, the type for direction and the position of the two colors can be specified. For best results we highly recommend using a non white header color. Please provide the following settings:

For solid:

  • Hex value for the header color.

For the gradient:

  • Hex values for the 2 colors.
  • Type of direction (radial/linear).
  • Position of the 2 colors using a sketch/screenshot or see testing.

Max display width: 300px
Max display height: 50px

Please provide your logo with double the display size.
Example: logo display size 100 x 50px, then the delivery size is 200 x 100px.
The supported file formats are PNG with transparency (recommended) and JPG.

Testing

You can use the prepared CONNECT Header template (Adobe Illustrator) to test your logo and gradient header combination. It can also be used to provide us with the gradient settings. Just save the file and send it to your solution engineer.


Resources

CONNECT Button - "Sign in" (currently english only)

CONNECT Header template

CONNECT Logo