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.

For all customer integrations, ID.me requires its branded Verification and Sign In buttons to be implemented as accessible, HTML-coded buttons with corresponding ARIA roles, attributes, and states.

Usage

Verify with ID.me

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

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 community 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 customer 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 [customer 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 customer 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 customer 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 [customer Name]

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

  • Benefit 1
  • Benefit 2
  • Benefit 3

ID.me is our trusted technology customer 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

Pill shaped button

Solid

Outlined

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)

ID.me Button Widget

ID.me Button Widget

The following code snippet can be used to add the ID.me button widget to your app. This widget only supports a full page redirect to the authorization endpoint.

<span
  id="idme-wallet-button"
  data-scope="military,responder,student,teacher,government"
  data-client-id="[YOUR_CLIENT_ID]"
  data-redirect="[YOUR_REDIRECT_URI]"
  data-response="code"
  data-text="[AFFINITY GROUP] receives [OFFER] with ID.me"
  data-show-verify="true">
</span>
<script src="https://s3.amazonaws.com/idme/developer/idme-buttons/assets/js/idme-wallet-button.js"></script>

Widget Parameters

Parameter Values Description Required
data-scope military,responder,student,teacher,government Defines the community you are requesting permission to access. Required
data-client-id [YOUR_CLIENT_ID] The client identifier received during app registration. It is automatically generated and can be found in your application dashboard. Required
data-redirect [YOUR_REDIRECT_URI] The url the user gets redirected to after authorizing an app. Set by the developer within the application dashboard. Required
data-response code or token The OAuth 2.0 grant type - Authorization Code (code) or Implicit (token). Required
data-text Example: Military members receive 10% off with ID.me A recommended parameter that displays a custom offer description within the ID.me Button Widget. Required if data-type="link"
data-logo [YOUR_LOGO_URL] A recommended parameter that displays a logo at the community selection page. Optional
data-hero [YOUR_HERO_IMAGE_URL] A recommended parameter that displays a hero image at the community selection page. Optional
data-state Example: 24730b6d A parameter to carry through any server-specific state you need to protect against CSRF issues. Optional
data-display popup or fullpage A recommended parameter that determines to user experience. Defaults to fullpage. Optional
data-show-verify true or false Displays the "Verification by ID.me" text. Defaults to false. Optional

Example Pop-up Redirect Page

The user will authenticate, verify and then authorize your app inside of the popup before being taken to the redirect URI. Our suggestion as this point is to handle the OAuth token response, close the popup and then refresh the parent window. Here is an example of a dummy page you could place at the redirect URI to achieve this.

<!-- This code snippet is not production quality -->
<html>
  <head>
   <script type="text/javascript">
     // Your application logic to handle the OAuth response

     window.opener.location.reload();
     window.close();
   </script>
  </head>
  <body></body>
</html>