Aviator

⚠️ Please note!

This page includes initial UI guidelines and examples for implementing Aviator-themed functionality across heritage Micro Focus products that are now part of OpenText. They are mostly relevant for products designed using one of the hMF design languages (DS17, DS21) or built using one of the UX Aspects libraries (UXA/Classic, UAU/Universal).

For guidelines that are more specific to heritage OpenText products, please refer to UXD’s guidelines.

General
  • Use the Aviator icon for any action that is based on AI and can be linked to the Aviator theme.
  • Buttons or actions that trigger the Aviator chat will show the Aviator icon or alternatively the Aviator icon followed by the generic label “Aviator”.
  • The Chatbot avatar icon is used as the Aviator avatar in chat panels.

inner
Inner
  • Buttons that are more task-specific and trigger AI-based actions, will include the Aviator icon followed by a text label in the following format: ‘<action> with Aviator’. For example:
    • Generate with Aviator
    • Verify with Aviator
    • Rephrase with Aviator

Inner
COLOR STYLESBackground base
STROKENeutrals | Gray/30
BACKGROUND STYLESBackground base
Inner
COLOR STYLESTokens/Base
STROKENeutrals | Gray/25
BACKGROUND STYLESTokens/Base
Aviator icon

Sizes

The ‘Aviator’ icon comes in 3 sizes:

  1. 16 by 16 – to be used in buttons and tabs.
  2. 24 by 24 – to be used in chat or modal headers.
  3. 32 by 32

Aviator icon sizes

Light theme

The ‘Aviator’ icon comes in 3 colors in ‘Light’ theme:

 

 

  1. Primary (gradient) – this is the primary icon that should be used in most cases. It’s color make it prominent and distinct.
  2. White
  3. Gray (gray-90)

Dark theme

The ‘Aviator’ icon comes in 2 colors in ‘Dark’ theme:

 

 

  1. Primary (white) – this is the primary icon that should be used in most cases. It’s color make it prominent and distinct.
  2. Gray (gray-90)
Chatbot avatar

The Chatbot avatar icon is available in a 24 by 24 pixel size. The icon is used as the Aviator avatar in chat panels.

Downloads ⬇️

👇 Download Aviator icon:
Light mode (svg file, all colors and sizes)
Dark mode (svg file, all colors and sizes)

 

👇 Download Chatbot avatar:
Light mode (svg file)
Dark mode (svg file)

Examples

ValueEdge | Backlog (concept)
A chat panel opens by clicking on a toggle button.

ValueEdge | Dashboard
A modal window opens by clicking on a task-specific button.

ValueEdge generate widget

Codeless
Codeless ‘AI inspect’ is an existing feature that helps users to create and add steps test.
The new ‘Smart verify with Aviator’ enables users to write validation steps in their own words.