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.
- Background color: OpenText gradient (see specs below)
- Logo: dimensions 95 x 18px (find in Downloads section)
- Divider: 1 x 18px | #FFFFFF
- Product name: Roboto* 400 | 18px | #FFFFFF
- Sub-section (if relevant): same as “product name”
- Additional navigation (breadcrumbs, tabs, etc): Roboto* 16px
- Right actions: see states below
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
- Menu: 16 x 16px icon | #FFFFFF
- 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
- Background color: OpenText gradient (see specs below)
- Logo: dimensions 95 x 18px (find in Downloads section)
- Divider: 1 x 18px | #FFFFFF
- Product name: Roboto 400 | 18px | #FFFFFF
- Sub-section (if relevant): same as “product name”
- Additional navigation (breadcrumbs, tabs, etc): Roboto 16px
- 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 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