Brand Assets

Our Logo

Please feel free to use our logo, but please also bear in mind that we're picky as to how our logo is displayed. Two versions of our logo are provided to help you pair with your color scheme. We request that you do not change the logo's appearance in any way.

PNG

EPS

PNG

EPS

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 #1D9F61
$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 jumped over the lazy dog

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

<h2> The quick brown fox jumped over the lazy dog

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

<h3> The quick brown fox jumped over the lazy dog

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

<h4> The quick brown fox jumped over the lazy dog

h4 {
color: #1D9F61;
font-family: "Open Sans", Helvetica, sans-serif;
font-size: 21px;
font-weight: 700;
text-transform: uppercase;
}

<h5> The quick brown fox jumped over the lazy dog

h5 {
color: #2d3e50;
font-family: "Poppins", "Open-Sans", sans-serif;
font-size: 18px;
font-weight: 700;
}

<h6> The quick brown fox jumped over the lazy dog

h6 {
color: #335F88;
font-family: "Open Sans", Helvetica, sans-serif;
font-size: 16px;
font-weight: 900;
text-transform: uppercase;
}

<p> The quick brown fox jumped over the lazy dog

p {
color: #757575;
font-family: "Open Sans", Helvetica, sans-serif;
font-size: 18px;
font-weight: 400;
}

<a> The quick brown fox jumped over the lazy dog

a {
color: #266ACA;
font-family: "Open Sans", Helvetica, sans-serif;
border-bottom: 1px solid #266ACA;
font-size: inherit
font-weight: inherit;
}

The Button

The following image asset can be used for each of ID.me affinity groups. Simply save the image or copy the image link.

The following image asset can be used for single sign on integrations. Simply save the image or copy the image link.

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 group affiliation 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 group selection page.	Optional
data-hero	`[YOUR_HERO_IMAGE_URL]`	A recommended parameter that displays a hero image at the group 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>