Joule Icon

Do

• Only use the Joule icon in the shell bar UI and the UI of the Joule assistant.
• Follow the same logic as the other shell bar icons based on the SAP design system guidance.
• Use the Joule branding icon for specific marketing-supported materials only.
• Use the specific gradient colors for the Joule branding icon.

Don't

• Don’t use colors other than the prescribed shell bar colors
• Don’t use the Joule branding icon below 48 px.
• Don’t change the angle of the Joule gradient.
• Don’t change or move any of the stars on the Joule icon and Joule branding icon.

For size and functionalities, the Joule icon follows the default icon set.

For states, the Joule icon has its own unique and specific approach.

The Joule brand icon is used for the Joule assistant welcome screen, marketing materials, and approved brand moments. The icon can be used in monochromatic colors, depending on the background.

• Illustrations: Use the Joule brand icon to complement and enhance the illustration narrative.
• Marketing: Use the icon to visually represent the key Joule concept and and messaging in marketing materials.
• Animation: Use the icon to create engaging and informative animations in approved brand moments.
• Joule launch campaign: Use the icon to provide a consistent and recognizable visual language across the Joule launch campaign.

For states, the Joule icon follows a unique and specific approach:

1. Enabled
2. Hover
3. Toggled / Active

Guidelines

• Button (SAPUI5)
• Button (UI5 Web Components)
• Iconography (Horizon)

Implementation

• Icon Explorer (internal)

Specifications

• Button (visual design)
• Menu button (visual design)
• Button (interaction design, web component)