ID.me Brand Guidelines
ID.me Brand Guidelines

These guidelines outline the general rules when using ID.me’s brand assets. You may only use the approved brand assets that are provided on this page. Consistent use of these assets helps people easily recognize references to ID.me and bring trust to every transaction. ID.me may suspend your application’s access to our services if these guidelines are not followed.

Button design guide

Displaying these on your homepage, products and promotional pages is a great way to reassure your customers that their personal information is safe and that their identity information will be handled securely.

Usage

Verify with ID.me

The “Verify with ID.me” button provides a pathway to invoke ID.me’s identity and group affiliation verification solution. This ensures a consistent design experience for ID.me’s members and partners.

Save the image

Signin with ID.me

The “Sign in with ID.me button” can be used to enable single-sign-on (SSO) integrations. Identity or group affiliation verification flows can also be activated subsequent to SSO.

Save the image

Placement & Layout

1A

Verify with ID.me as the primary action

Verification by ID.me • What is ID.me?

1B

ID.me sign in button as primary action

ID.me is our trusted technology partner in helping to keep your personal information safe. They specialize in digital identity protection and help us make sure you're you—and not someone pretending to be you—before we give you access to your information. Learn more about ID.me.

2A

Verify with ID.me button without lock icon and "Verification by ID.me" text

What is ID.me?

2B

Create new account through ID.me

Sign in to [Partner Name]
OR

Introduction text related to ID.me and business entity goes here

  • Benefit 1
  • Benefit 2
  • Benefit 3

ID.me is our trusted technology partner in helping to keep your personal information safe. They specialize in digital identity protection and help us make sure you're you—and not someone pretending to be you—before we give you access to your information. Learn more about ID.me.

3A

Verify with ID.me button with introduction text about ID.me

ID.me is our trusted technology partner in helping to keep your personal information safe. They specialize in digital identity protection and help us make sure you're you—and not someone pretending to be you—before we give you access to your information.

3B

Dual 'Sign-in' and 'create an account' methods (ID.me and 3rd Party)

Sign in to [Partner Name]

Intro text related to ID.me and business entity partnership goes here

  • Benefit 1
  • Benefit 2
  • Benefit 3

ID.me is our trusted technology partner in helping to keep your personal information safe. They specialize in digital identity protection and help us make sure you're you—and not someone pretending to be you—before we give you access to your information. Learn more about ID.me.

Approved formats

Our standard button guidelines

Using the standard versions of the ID.me button on your site will trigger an immediate association for users. ID.me will, on a case by case basis, review and approve deviations from the above-described standard versions.

Standard button allows for flexibility

It is powerful on its own and is equally present alongside other call to actions

Assessibility for all

Our button is synonomous to our brand and meets ‘AA’ Color Contrast standard for easy identification

A symbol of trust

The “tick” icon has dual meaning–it represents our commitment to safeguard personal information and evokes trust

ID.me Logo

Consistent use of our logo is essential to brand recognition

Rectangle shaped button

Solid

Outlined

Muted

Pill shaped button

Solid

Outlined

Muted

Customization Guidelines

Please follow the two steps outlined below. Note that you are responsible for ensuring that all implementations of the ID.me brand assets comply with accessibility requirements (example: Section 508 minimum color contrast requirements & WCAG guidelines). Visit https://webaim.org for more information.

Step 1

Verify your brand color meets the Section 508 ‘AA’ minimum color contrast requirement by visting https://webaim.org/resources/contrastchecker/.

Step 2

Submit the design to design@id.me for written approval.

Improper formats

Example 1 of 5

Improper outline stroke weight ID.me in text rather than approved logo

Example 2 of 5

Low contrast between button text and background color Sharp edges make it appear less like a button

Example 3 of 5

Improper font style Not approved color Incorrect logo presentation (stretched horizontally)

Example 4 of 5

Low contrast between button text and background color Improper spacing between text and logo Gray color makes the button appear inactive

Example 5 of 5

Improper contrast for text and logo (Doesn’t pass 508 ‘AA’ color contrast) Misrepresentation of ID.me standard button (wrong green; excessive rounded corner radius)

Our Typography

<h1> The quick brown fox jumps over the lazy dog </h1>

h1 {
color: #335F88;
font-family: "Open Sans", Helvetica, sans-serif;
font-size: 44px;
font-weight: 300;
}

<h2> The quick brown fox jumps over the lazy dog </h2>

h2 {
color: #335F88;
font-family: "Poppins", "Open-Sans", sans-serif;
font-size: 25px;
font-weight: 700;
text-transform: uppercase;
}

<h3> The quick brown fox jumps over the lazy dog </h3>

h3 {
color: #335F88;
font-family: "Poppins", "Open-Sans", sans-serif;
font-size: 20px;
font-weight: 700;
}

<h4> The quick brown fox jumps over the lazy dog </h4>

h4 {
color: #1D9F61;
font-family: "Open Sans", Helvetica, sans-serif;
font-size: 21px;
font-weight: 700;
text-transform: uppercase;
}
<h5> The quick brown fox jumps over the lazy dog </h5>
h5 {
color: #2d3e50;
font-family: "Poppins", "Open-Sans", sans-serif;
font-size: 18px;
font-weight: 700;
}
<h6> The quick brown fox jumps over the lazy dog </h6>
h6 {
color: #335F88;
font-family: "Open Sans", Helvetica, sans-serif;
font-size: 16px;
font-weight: 900;
text-transform: uppercase;
}

<p> The quick brown fox jumps over the lazy dog </p>

p {
color: #757575;
font-family: "Open Sans", Helvetica, sans-serif;
font-size: 18px;
font-weight: 400;
}
<a> The quick brown fox jumps over the lazy dog </a>
a {
color: #266ACA;
font-family: "Open Sans", Helvetica, sans-serif;
border-bottom: 1px solid #266ACA;
font-size: inherit;
font-weight: inherit;
}