Skip to main content
U.S. flag

An official website of the United States government

Dot gov

Official websites use .gov
A .gov website belongs to an official government organization in the United States.


Secure .gov websites use HTTPS
A lock ( Https ) or https:// means you've safely connected to the .gov website. Share sensitive information only on official, secure websites.

User Experience

Integrate with in a user-friendly manner.


In order to create a great user experience with your integration, we have some suggested integration guidelines that you may use on your site.

guidelines

Apply the following standards for your Sign-in button to create a simple and consistent experience for users.

Single sign-in option

When using to authenticate your users, we recommend implementing one official button using “Sign in” as the call-to-action. The styling and placement of the Sign-in button supports the recognition of the user interface component and helps your users know that this is the next step in the process. This single button enables the findability of both the Sign-in and Sign-up tasks on the part of the flow owns once an application externalizes authentication. After a user signs in, a Sign- out button labeled “Sign out” replaces the Sign-in button on the interface.


Users are familiar with the Sign-in button placed on the top right of the website headers. Placing your Sign-in button in this location of your site’s header takes advantage of the familiarity with this common pattern and can be carried throughout the entire site/app.


The Sign-in button should use your primary or important button color. Since it is a primary action, it is recommended to use a solid button instead of text links, or text and icon combinations. Buttons with a solid colored background help your users know that this is the next step in the process. This styling also clearly shows the button’s clickable target area because of the padding around the label that creates a larger tappable area. This also supports mobile users. Avoid using outline-only buttons since they do not communicate a primary action.

Additionally the Sign-out button style should match the Sign-in button.

The U.S. Web Design System offers code examples of default, static, hover and active button states styling and accessibility guidelines.


The Sign-in button may also use icon, but it should not in exclude the use of a label. The icon should adhere to accessibility alt-tag guidelines.

We recommend using the Sign-in icon from the Font Awesome icon set. This icon is frequently used to suggest an entry into a system. Be careful not to use the external-link icon that might suggest a link to another website and confuse users, especially those using screen readers. The order of icon or label first in the button itself is flexible to match your site’s design.


“Sign in” is the preferred label for the Sign-in button. This is consistent with the Sign-in call-to-actions in headlines, links, and buttons on’s screens and in our end user support documentation.


The Sign-in button link initiates authentication with This starts the experience where the user signs in or creates an account.


The U.S. Web Design System offers some default button styles that use a solid colored background for the button implemented with no border color and white colored text. This styling creates a strong, easy-to-read contrast to meet Section 508 guidelines for using colors that contrast well with white text and work with your site’s palette.

We recommend you use the primary action color from your site’s design system or style guide for the Sign-in button.


Sans serif and neutral typefaces are recommended for your Sign in button. A heavier than normal font weight is recommended for enhanced visual hierarchy.

Multiple sign-in options

Sometimes agencies have more than one way users can sign in. Although this is not the preferred experience, here are some suggestions to accommodate this scenario.

Global sign-in button

Consider maintaining a single Sign-in button on your site’s header, placing it in the top right corner. When tapped, the button takes the user to a screen with the multiple Sign-in button options.

Multiple Sign-in options in one screen

Ensure that the screen with multiple Sign-in options has the following elements:

  • The agency’s or app’s logo
  • A title guiding the user to the purpose of the page, for example “Sign in to [name of your app]”
  • Individual buttons for each Sign-in option
  • The site’s footer

Take into account common patterns to support usability. We recommend that links to all Sign-in options be equal in size. Stacked, solid colored buttons work best because the stacking supports responsive layouts and mobile views. Consistency and equal sizes also supports scanning of information, a common way users consume content. And it minimizes the cognitive load for users so they can focus on evaluating the options as opposed to evaluating the differences of the user interface controls.

From top to bottom, this is the order we encourage for multiple sign in options listed under the title:

  1. Custom text and notifications, including instructions
  2. Email input field, if using, followed by password input field
  3. Checkbox to remember device, if using
  4. A link to recover password of email password combo
  5. Sign-in button
  6. The label “Or” to separate the email and password boxes from the the Sign-in buttons
  7. Sign-in buttons for each option labeled “Sign in with [name of authentication option]”

Style each button with a different background color. For we recommend using the color hexadecimal value of #0071bb. Center-justify the text inthe button. Follow the same font recommendations as the single button option.


Users need a clearly marked button to sign out. After a user has signed in to your app, support the sign out interaction with a button labeled “Sign out”. This button replaces the Sign-in button on the interface, preferably in the same location. The Sign-out icon from Font Awesome is suggested for the Sign-out button.

Copy guidelines

When you first integrate with you may want to indicate to your users that your application uses for authentication or proofing. If you decide to do so, please use the following language:

What is is a service that offers secure and private online access to government programs, such as federal benefits, services and applications. With a account, you can sign into multiple government websites with the same email address and password.

Why is YOUR APPLICATION using uses two-factor authentication, and stronger passwords, that meet new National Institute of Standards and Technology requirements for secure validation and verification. By using, you’ll get an extra layer of security to help protect your account against password compromises.

Agency logo guidelines

We will publish your agency logo on to help users understand that partnership between the services. Please follow these guidelines when submitting a logo:

Agency logo guidelines to be displayed on 171px x 40px

Contrast and background

Logos should be high contrast on a transparent background

Agency logo guidelines should have high contrast

File formats accepted

You will be able to use a .png or .svg logo.


Provide a file that meets these requirements

PNG file requirements
Resolution Max width Max height Dots per square inch (dpi) File name
2x 171px 40px @144dpi my-agency-logo.png


Export .svg files
set Styling using Presentations Attributes logo

Edit this page
Return to top