Look and Feel
The look and feel of NYC.ID coordinates with NYC.gov, and includes two elements:
- An application header—required; displays the NYC.gov logo and your application name, and includes a few other items
- An application brand banner—optional, but recommended; displays your application logo
The application header is black banner that must appear at the very top—above all content and navigation elements—of all pages within your application.
The application header has several configurations. Here is a visual representation of them:
Default Application Header
- Anonymous: The user is not logged in.
- NYC.ID Authenticated: The user is logged in with a NYC.ID account.
Alternate Application Headers
- Notify NYC
Application Header Elements
Your application header must contain the following items:
- The official NYC logo—A white NYC logo, which links to NYC.gov (required in Application Header)
- Application name—The name of your application (required in Application Header)
- Log In link—When the user is not logged in, this appears on all pages that have an authenticated state. It links to the NYC.ID Log In page or a page in your application that requires authentication (required in Application Header or in other prominent global header location)
- Profile link—Appears on all pages when the user is logged in with his or her NYC.ID account. It links to a user's NYC.ID profile (required in Application Header or in other prominent global header location)
- Log Out link—Appears on all pages when the user is logged in. When clicked, it performs an Explicit Logout. (required in Application Header or in other prominent global header location)
- Divider—Separates the NYC logo from your application name. Also separates the Profile and Log Out links, only if the Profile link is visible (required in Application Header if Log In and Log Out links appear there)
NOTE: Your application may include an additional or replacement log in button or link. It must be in plain view in the header of all application pages. See the Alternate Application Headers for grapical examples. NYC.ID does not provide HTML for alternative header layouts.
For more information contact DoITT's User Experience (UX) Team.
NOTE: For consistency across NYC.ID-integrated applications, when providing users a call to action, use the words "log in" and not "sign in".
HTML and CSS for Building the Application Header
You can view examples of the headers, and use the HTML and CSS to build your application header.
! IMPORTANT: The application name will not display when the viewport is less than 767 pixels wide. This improves usability for mobile devices.
To implement your Application Brand Banner, use the NYC.ID Console.