Additional UI elements

Sign-in screens

 

Updated: November 1, 2023

These guidelines are for products using DS 21 or DS 17 components. For specific questions, please contact the UXD team.

 

General

Sign-in screens should follow the requirements mentioned below:

  1. Background images: remove all stock photo and all other graphical elements.
    OpenText gradient should expand to the entire screen background (gradient specs: Light | Dark ).
  2. Product family logos: should be removed
  3. Micro Focus logo / MF is now OT logo: to be replaced with OpenText’s logo.
  4. Copyright text (if present): needs to be updated (see Copyright section)

Products using DS21 / UX Aspects Universal

  1. Logo: 190 x 36px | #000000 (find in Downloads section)
  2. Product name: Roboto 500 | 40px | Line height 44px | #000000
  3. CE number: Roboto 400 | 30px | Line height 32px | #000000 | CE number should be placed in a new row below the Product name
  4. Input elements
  5. Sign-in button
  6. Language selection (if relevant)

Products using DS17 / UX Aspects Classic

  1. Product name: Metric 700 | 38px | Line height 38px | Light theme: #000000, Dark theme: #FFFFFF
  2. CE number: Metric 400 | 28px | Line height 28px | Light theme: #000000, Dark theme: #FFFFFF | CE number should be placed in a new row below the Product name
  3. Input elements
  4. Sign-in button
  • For products using DS 17, the OpenText Logo is placed on the background: 110.8 x 21px | #FFFFFF for Light & Dark theme. Find in Downloads.

White label

  • White Label products are not required to show the OpenText logo.
  • Specific cases that need to show the company logo should use the “powered by OpenText” version. Find in Downloads.

 

Examples

To see additional adaptations for the Sign-in screen, visit the Examples section.

About box

Updated: November 8, 2023

The about box is the standard way to provide product release information and comply with legal, trademark, or compliance requirements. It is mandatory for all on-premise solutions, while cloud solutions can point to central pages.

 

General

  • Micro Focus logo: should be replaced with OpenText logo.
  • Shortened copyright notice: should be added (Find in Copyright section)

 

 

Products with a secondary product name

  1. Logo: 95 x 18px | #000000 (find in Downloads)
  2. Divider: 1 x 18px | #000000 | distance between the OT logo and divider: 8px (the visual distance is 16px, with the ™ symbol excluded, to achieve visual balance).
  3. Product name: Roboto 400 | 18px | #000000 | distance between divider and Product name: 16px
  4. CE number: Roboto 400 | 14px | #000000 | CE number is aligned to the baseline of the product name
  5. Content area
  6. Version number (if relevant)
  7. Secondary product name (if relevant): Same as “CE number” | #000000 65% | distance between rows is 4px | distance between secondary name and CE number is 16px.
    *In case of a secondary product name, CE number will align to the baseline of the secondary name.
Installers

Updated: November 1, 2023

General

Products using installer dialogs should update the following:

  • Micro Focus logo: to be replaced with OpenText logo
  • OpenText gradient: should be adopted for background or headers
  • Company name references: should be updated, see the Company name section for more information.
  • Disclaimer: If your installer includes an HP or HPE reference, it is important to include a disclaimer (see HP/HPE disclaimer guidelines)
Splash screens

Updated: November 1, 2023

General

If your product is using a splash screen, it should be updated with the following:

  • Micro Focus logo: to be replaced with OpenText’s logo
  • Copyright text: if present, needs to be updated (see Copyright section)
  • Background images: remove all stock photo and all other graphical elements. OpenText gradient should expand to the whole background of the screen (see gradient specs: Light | Dark ).

 

Favicons

Products using the Micro Focus logo as a favicon or as a shortcut/app launch icon (Desktop, Web, and Mobile) should replace it with either one of the following:

a. Their own dedicated product icon
b. OpenText’s favicon (if there is no specific product icon)

  1. Favicon: Product icon or OpenText icon
  2. Tab label: [context (when relevant)] – [internal page/tab] – [product name]

 

 

Variations

Products that are part of a suite or platform (e.g. ValueEdge) should use the platform icon and the dedicated module icons used across the platform. Some tabs might use product-specific icons if relevant.

Standalone products that don’t have a dedicated icon should use the OpenText favicon (get the icon from the Downloads page).

 

🔮 Tip box
The favicon should work in both light and dark themes of the browser or have a version for each.
Loaders

Products using the Micro Focus branded loaders or spinners should replace them with generic ones. This update includes all splash and loading screens, loading side panels, widgets, loading tables, etc.

Suggested loader:

An SVG image animated with 360º rotation.

  • 64x64px for entire screens or big sections
  • 32x32px for smaller containers, side panels, widgets

*Size can be adjusted if needed

Animation example