Skip to main content

AI Colors

Color communicates the importance and association between UI elements and AI-powered features. Intentional and consistent use of color results in consistent user experiences across all SAP AI features and product portfolios.

AI color palette overview

Usage​

Do:

  • Apply the AI color palette purposefully to help users identify AI moments easily, without distracting from the work at hand.
  • Differentiate embedded AI features from the Joule assistant experience through color and iconography.
  • Use the SAP Design System color palette.
  • Keep it simple for users.

Don't:

  • Don't introduce new colors to signify AI features.
  • Don't deviate from the Joule gradient colors or angle.

AI Color Variants​

Embedded AI​

The main color for embedded AI elements — primarily applied to AI buttons, icons, and related UI elements.

Button Highlight Background — Tokens/Button/button-highlight-background — #0070F2

Joule Purple​

Purple serves as the primary, identifying color for the Joule assistant experience. It is primarily employed within the Joule header and UI elements.

Assistant Color 1 — Assistant/sapAssistant_Color1 — #5d36ff

Assistant Color 2​

Assistant Color 2 — Assistant/sapAssisant_Color2 — #a100c2

Joule Gradient​

Primarily used in brand and marketing moments — welcome screens, ad banners, and illustrations.

Assistant Background Gradient — Assistant/sapAssisant_BackgroundGradient — #5d36ff → #a100c2