Brand guidelines

These guidelines outline the general rules required to use IDMe’s brand assets. Consistent use of these assets helps people easily recognize references to IDMe and bring trust to every transaction.

Buttons

Displaying IDMe’s button on your homepage, products, and promotional pages is a great way to show your customers that their personal information and identity is safe and will be handled securely.

There are two ways to add an IDMe button, and you can use whichever suits your application:

• Button widget is the recommended option. It renders and maintains the button for you, so your integration stays current.
• Button SVGs are available to download and host yourself.

Button widget

Add the widget by placing an <idme-button> element and the widget script on your page. The element reads its configuration from its attributes, and builds the IDMe authorize URL for you from the data- attributes.

Use <idme-button-widget> instead when you want the promotional widget, which wraps the button with a headline and category text.

One script serves both elements. Place the <script> tag above the button tag so the element is defined before the browser reaches it.

Code snippets

Choose the snippet that matches what you need:

• Sign in and Verify render the button on its own
• Promotional widget renders the same button wrapped in a headline, offer text, and community links

<script src="https://assets.id.me/widgets/button-widget/button.js"></script>
<idme-button
  variant="sign-in"
  color-variant="green"
  size="md"
  data-client-id="[YOUR_CLIENT_ID]"
  data-redirect="[YOUR_REDIRECT_URI]"
  data-response="code"
  data-scope="military">
</idme-button>

<!-- 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>

Button SVGs

If you cannot use the button widget, the following button assets are available to download and host yourself.

Each button is available in three variants: low green with white type (recommended), white with black type, and black with white type.

”Sign in with IDMe” button

Use this button wherever people sign in to your application, whether you offer a single login option or several.

Recommended - Most recognizable

Additional options

”Verify with IDMe” button

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

Recommended - Most recognizable

Additional options

”Verified by IDMe” state

Use this state to show that a member’s verification is complete.

Verified by IDMe

”Continue with IDMe” button

Use this button where people continue into your application with IDMe alongside other social login options.

Recommended - Most recognizable

Additional options

Logos

Bring trust to the community you wish to reach with the following IDMe logo tool kit.

Three logo variants are available for download. Dark Green (#032318) is the primary IDMe logo. Black (#000000) and White (#F7F7F7) are also available, for use on backgrounds where the primary logo does not provide enough contrast.

Dark Green

#032318

Black

#000000

White

#F7F7F7

Logo checklist

Always ensure the following conditions are met when using the IDMe logo:

• The logo maintains the required clear space
• The logo is at least 85px by 30px
• The logo is dark green (#032318), black (#000000), or white (#F7F7F7)
• The logo must maintain co-equal prominence when displayed side-by-side