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.

Verify 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.

Rectangle solid sign Save the image

Placement & Layout

1A

Verify with ID.me as the primary action

Verify

Lock icon 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

Verify

What is ID.me?

2B

Create new account through ID.me

Sign in to [Partner Name]
Sign in brand Sign in
OR
Create idme

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

Verify

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]
Sign in brand Create brand

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

  • Benefit 1
  • Benefit 2
  • Benefit 3
Sign in Create idme

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.

Approved format 01

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

Rectangle solid verify Rectangle solid sign

Outlined

Rectangle outlined verify Rectangle outlined sign

Muted

Rectangle muted verify Rectangle muted sign
Pill shaped button

Solid

Pill solid verify Pill solid sign

Outlined

Pill outlined verify Pill outlined sign

Muted

Pill muted verify Pill muted sign
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.

Blue button Violet button Purple button Check icon
Mint button Green button Light blue button X icon

Step 1

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

Purple button icon

Step 2

Submit the design to designapproval@ID.me for written approval.

Improper formats

Example 1 of 5

Improper button 01 X icon Improper outline stroke weight X icon ID.me in text rather than approved logo

Example 2 of 5

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

Example 3 of 5

Improper button 03 X icon Improper font style X icon Not approved color X icon Incorrect logo presentation (stretched horizontally)

Example 4 of 5

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

Example 5 of 5

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

The Colors

ID.me has a somewhat distinct color palette that you may choose to incorporate into your own design. Below are our primary and secondary colors used throughout our brand.

Primary
  • $emerald #08833D
  • $ink #2E3F51
  • $august #266ACA
Secondary
  • $tradewind #4eb8a4
  • $gothic #335F88
  • $polar #F2FAFF
Alerts
  • $cinnabar #EA4335
  • $marigold #fbbc05
Grayscale
  • $boulder #757575
  • $stone #B7B7B7
  • $ash #DFDFDF
  • $smoke #F5F5F5
  • $snow #F9F9F9

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;
}
Waves