Co-branding guidelines and asset library

To ensure a consistent and enjoyable user experience, we provide downloadable OpenPass logos and other assets, along with co-branding guidelines. These resources help organizations and publishers to promote their partnership with OpenPass. Co-branding often improves on a publisher's native experience by streamlining user access. Returning users or users from other properties can typically access content with a single click, eliminating the need for additional email addresses or manual email entry.

To begin, click the following banner to download a zipped file containing our SVG logo files, sign-in buttons, and other assets. You can use these to help optimize your co-branding and ensure consistency across all platforms.

The following is our guidance for establishing a consistent brand expression for OpenPass across various integrated organizations and publishers. These guidelines support various execution types and include details on everything necessary for a consistent user experience. This includes assets like the OpenPass logo, color palette, typography, and web assets.

Visual identity

The following showcases OpenPass design guidelines, including logo usage, color palette, typography, and additional elements such as iconography and photography.

Logo

For the web, the OpenPass logo should be a transparent PNG or SVG file.

The clear space around the logo is defined as the height of the lowercase "e." No other design elements should encroach into that clear space.

Use the following guidelines to choose the appropriate OpenPass logo for different backgrounds.

Background Style of Logo Example
Light Sea green and Stratos blue "overlapping O" icon + Stratos blue wordmark
Light All Stratos blue
Light All black
Dark Sea-green and white "overlapping O" icon and a white wordmark
Dark The white logo (labeled as "light" in the asset library)

Color palette

Our primary palette is composed of a family of greens and blues. These colors are representative of the harmony, balance, and security that OpenPass offers consumers and publishers alike. The primary palette — emerald, sea green, Stratos blue, black, and white — should be used for a majority of branded communications to maintain a consistent visual presence in the marketplace.

The following is the OpenPass color palette with RGB values and HEX color codes.

Color Name RGB Value HEX Color Code Color Name RGB Value HEX Color Code
Emerald R0 G133 B120 #008578 Dark Gray R89 G89 B89 #595959
Sea Green R0 G168 B150 #00a896 Gray R219 G222 B224 #dbdee0
Open Sky R229 G245 B245 #e5f5f5 Light Gray R247 G247 B250 #f7f7fa
Stratos Blue R3 G10 B64 #030a40 White R255 G255 B255 #ffffff
Black R0 G0 B0 #000000

Logo sizing

The OpenPass logo includes a trademark just to the right of the "s." For instances when the logo is between 0.75" and 1.5" wide, a medium-size version of the logo should be used so that the trademark mark is sufficiently legible (the trademark has a 0.02" stroke). The logo should never be smaller than 0.75" wide.

The following shows examples of the logo in different sizes.

Size Logo Example
Large size: >2.5"
Medium size: ≤2.5"
Small size: ≤1.5"
Minimum size: 0.75"

"overlapping o" icon

The "overlapping O" icon represents the quid pro quo of the open internet. It is a perpetual cycle that symbolizes how advertising funds free content for consumers. The icon can be used as a standalone design asset for graphic effect, but it should never replace the use of the full logo.

Any given composition or piece of communication that uses the icon must also include the full logo in a way that clearly identifies OpenPass. The icon should be shown in sea green and Stratos blue, black, white, or shades of gray. Low-contrast instances are best used as watermarks. A white or outlined stroke is used to separate the "O’s," especially for one-color use.

Logo don'ts

Only properly sanctioned artwork should be employed when using the OpenPass logo in any collateral or communication. This means no other colors should be used, nor any resizing or repositioning of the icon and wordmark as separate elements. Squashing or stretching disproportionately is forbidden. Representing the logo in other typefaces is also not allowed. The logo should be used over backgrounds that have sufficient color contrast and are not too busy or noisy.

The following shows examples of incorrect logo usage.

Description Image Example Description Image Example
Do not put the wordmark and icon in the wrong color pairing. Do not typeset "OpenPass" in the incorrect font.
Do not color the entire lockup in the wrong color. Do not apply a gradient to the logo.
Do not place the logo over busy photography that impedes legibility. Do not place the logo on top of the graphic motif.
Do not delete the trademark from the logo unless approved by OpenPass's legal team. Do not move the icon anywhere else in the lockup.
Do not stretch or distort the logo. Do not center the icon and wordmark into a lockup.

Partner lockups

Our partnerships with publishers should be signaled as clearly as possible, when appropriate. We show our partnership with a simple lockup of our logo with our partner’s logo, separated by a pipe or vertical line. Most often this will mean using full logos locked up together. But in certain cases, our "overlapping O" icon may be paired with a partner’s singular mark, such as Target’s target symbol.

For full logo lockups, the space on either side of the pipe should match the width of the lowercase "s" in our wordmark. For the mark/icon version, the spacing is defined by the width of the "a" in our wordmark. The height of the logos should match in both versions.

The following shows examples of how the partner lockups should look.

Description Image Example
Full lockups
Partner mark + icon
Size
Spacing

Primary typeface

While the OpenPass logo uses ITC Avant Garde in the wordmark, Poppins is OpenPass’ primary typeface for web-based applications. Poppins is an open-sourced typeface available on Google. Using a geometric sans serif, Poppins pairs nicely with the logo.

Poppins comes in nine weights: thin, extra light, light, regular, medium, semibold, bold, extrabold, and black, with corresponding italics. All weights can be used for headlines and body copy. Consider what weights convey the right character for any given branded materials and will result in clear readability.

Photography stock

Stock photography for the OpenPass brand utilizes naturally lit individuals in everyday moments. Our subjects should be the end users of media in all its forms, especially media being consumed on devices such as phones, laptops, tablets, TVs, and audio equipment. Subjects should look positive and engaged, whether alone or with other people.

These moments should feel candid and authentic, not composed nor staged. Lighting should feel natural to their environment, be it sunshine outside or the light of a screen under the covers.

Iconography

Monochrome icons, which have line work only and no color fills, can be shown in any primary brand color. They are appropriate as long as there is sufficient contrast with their background.

The design of the icons is simple and clean so as to not compete with the overall branding and clearly communicate a message visually.

Partner logins

Let's look at the image used to represent OpenPass in your single sign-on (SSO).

OpenPass branding here should be legible and easily identifiable on your login pages. It is preferred to use the two-color logo over a white background. If the background is a brighter or darker hue, use the all-white variant.

OpenPass branding for sign-in

For publisher logins, ensure the OpenPass logo is not smaller than 0.75" wide for legibility.

To be consistent with other brand icons, use the "overlapping O" icon in the two-color format over white.

For publisher logins, ensure the OpenPass logo is not smaller than 0.75" wide for legibility.

Reverse branding

For publisher logins, ensure the OpenPass logo is not smaller than 0.75" wide for legibility.

Web and collateral

The following applications are meant to illustrate how our visual identity comes to life across various touch points. These are intended to be directional.

Language

Here are some ways you can talk about OpenPass and its benefits.

Your pass to the open internet

OpenPass is a single sign-on solution that gives you access to premium content with no password required.

The benefits of OpenPass as an SSO solution

Pioneering

OpenPass doesn’t share your email address with anyone other than the publishers where you choose to log in with OpenPass.

Comprehensive

OpenPass provides access to premium content across all devices without having to create and manage multiple accounts.

Your choice

You can stop participating in OpenPass at any time by managing your account in our consumer preference portal.