Masthead

The masthead updates are meant to require minimal implementation effort while still achieving a closer look and feel to OpenText products. Given that the use of the masthead can vary across products and business units, in this section the most common scenarios are covered, and full-screen examples of products can be found in the Examples section.

Light Theme
  1. Background color: OpenText gradient (see specs below)
  2. Logo: dimensions 95 x 18px  (find in Downloads section)
  3. Divider: 1 x 18px | #FFFFFF
  4. Product name: Roboto* 400 | 18px | #FFFFFF
  5. Sub-section (if relevant): same as “product name”
  6. Additional navigation (breadcrumbs, tabs, etc): Roboto* 16px
  7. Right actions: see states below
*️⃣ Products using Metric font:

The product name and sub-section should use Metric 400 | 20px, and the rest of the navigational elements such as breadcrumbs, tabs, etc. should be 18px size.

 

Gradient specifications – Light mode

Type: linear-gradient
Angle: 90deg (horizontal)

Color Stops
#19224A 0%
#222E61 25%
#23346A 65%
#146693 90%
#088CB2 100%

 

States 

Products using a solid color for hover and selected states on the masthead (e.g. tabs, dropdowns, icon buttons) should update them to opacities to work with the new background.

Suggested:
– Hover: #000000 20% opacity
– Selected/Active: #000000 35% opacity

 

Variations

Masthead with product name only

Masthead with breadcrumbs

Masthead with tabs

Masthead with breadcrumbs using Metric

Variations for products with a menu

  1. Menu: 16 x 16px icon | #FFFFFF
  2. All the other elements are the same as the version shown above

Masthead with module name and tabs

Masthead with breadcrumbs

Masthead with several elements

Dark Theme
  1. Background color: OpenText gradient (see specs below)
  2. Logo: dimensions 95 x 18px  (find in Downloads section)
  3. Divider: 1 x 18px | #FFFFFF
  4. Product name: Roboto 400 | 18px | #FFFFFF
  5. Sub-section (if relevant): same as “product name”
  6. Additional navigation (breadcrumbs, tabs, etc): Roboto 16px
  7. Right actions: see states below

 

⚠️ Please note!

The OT gradient differs in light and dark mode. See specs below.

 

Gradient specifications – Dark mode

Type: linear-gradient
Angle: 90deg (horizontal)

Color Stops
#303A60 0%
#2C3661 25%
#394780 65%
#146693 90%
#088CB2 100%

 

States 

Products using a solid color for hover and selected states on the masthead (e.g. tabs, dropdowns, icon buttons) should update them to opacities to work with the new background.

Suggested:
– Hover: #000000 20% opacity
– Selected/Active: #000000 35% opacity

White Label

White Label products should replace the OpenText logo and product name with the client’s logo. The masthead background and the text color will follow the same guidelines according to the relevant theme.

 

Light theme for White Label

 

Dark theme for White Label