Masthead Rebranding

Updated: November 1, 2023

The use of the masthead can vary across products and business units, this section covers the most common scenarios. For specific questions regarding your product, please reach out to the UX team.

General

 

Products with a secondary product name

 

Without hamburger ‘menu’

  1. Background color: OT gradient (see specs below)
  2. Hamburger menu icon (optional)
  3. Logo: 95 x 18px  (find in Downloads section)
  4. Divider: 1 x 18px | #FFFFFF | distance between the OT logo and the divider is 8 px (the visual distance is 16 px, with the ™ symbol excluded).
  5. Product name: Roboto* 400 | 18px | #FFFFFF | distance between CE and product name: 16px
  6. CE number: Roboto* 400 | 14px | #FFFFFF | CE is aligned to the baseline of the product name
  7. Sub-section (if relevant): same as “product name”
  8. Additional navigation (breadcrumbs, tabs, etc): Roboto* 16px
  9. Right actions (see states below)
  10. Secondary name (if relevant): same as “product name”| #FFFFFF 65% | distance between names: 4px

 

*️⃣ Products using Metric font:

· Product name and sub-section: Metric 400 | 20px
· CE number: Metric 400 | 15px | #FFFFFF | CE is aligned to the baseline of the product name.
· Navigational elements such as breadcrumbs, tabs, etc.: 18px size
Variations

 

Masthead with product name only

Masthead with a secondary product name

Masthead with product and module

Masthead with module name and tabs

Masthead without ‘menu’ icon

Masthead with breadcrumbs

Masthead with several elements

Masthead using ‘Metric’ font (DS 17)

Light Theme

Gradient specifications

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

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

 

States 

It is recommended that products using solid colors for ‘Hover’ and ‘Selected’ states on the masthead, such as tabs, drop-downs, and icon buttons, make the transition to opacity-based appearances to work better with the new background. This change is currently not mandatory.

Suggested design:

  • Hover: #000000 20% opacity
  • Selected/Active: #000000 35% opacity
Dark Theme

⚠️ Please note!

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

 

Gradient specifications

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

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

 

States 

It is recommended that products using solid colors for ‘Hover’ and ‘Selected’ states on the masthead, such as tabs, drop-downs, and icon buttons, make the transition to opacity-based appearances to work better with the new background. This change is currently not mandatory.

Suggested design:

  • 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 text colors will follow the same guidelines according to the relevant theme.

 

Light theme | White label

 

Dark theme | White label