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
  

 

Application Header

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.

 

Application Brand Banner

The optional application brand banner allows your application logo and slogan to appear on all pages of NYC.ID.

Here are some examples:

Application Brand Banner Elements

The application brand banner consists of the following elements:

• Banner Image—Your application logo in PNG, JPG or SVG format
• Slogan—Your application message or tagline. It can be translated into one or all of the supported languages.
• Slogan type face—The type face of the slogan
• Slogan color—The color of the slogan in RGB or hex format
• Border size—The size of the border in pixels
• Border color—The color of the border in RGB or hex format
• Background color—The color of the background in RGB or hex format

! IMPORTANT: If your logo contains a word or phrase, it cannot be translated.

Application Brand Banner Logic

Your application's brand banner is displayed using the following logic:

• On the Login page, the "spName" parameter is always specified. Therefore:
  • if one application brand banner is associated with the Service Provider (SP) in the NYC.ID Console, it will display, or
  • if more than one application brand banner is associated with a SP, the Gigya SAML Proxy Page (i.e., /account/proxy.htm) HTTP referer header is compared to the Discriminator of each application brand banner associated with the SP. The first application brand banner having a discriminator that is contained within the HTTP referer will display.

  NOTE: A typical discriminator might be the Azure Active Directory B2C client_id.

• On the Create Account page and Forgot Password page, if the "spName" parameter is specified, the application brand banner is chosen based on the same logic as the Login page. If the "spName" paramater is not specified and if the "target" parameter is specified, the context path or subdomain (if the domain is cityofnewyork.us) of the "target" parameter is compared to the Target Context Path value of all application brand banners. The application brand banner with matching Target Context Path will display.
• On all other pages, if the "spName" parameter is specified, the application brand banner is chosen based on the same logic as the Login page.

! IMPORTANT: The target context path is deprecated and will be removed in a future release of NYC.ID.

Implementation Steps

To implement your Application Brand Banner, use the NYC.ID Console.