AI Colors
Intro
Color communicates the importance and association between UI elements and AI-powered features that enhance them.
Intentional and consistent use of color results in a consistent user experiences across all SAP AI features and SAP product portfolios.
Usage
Do:
- Apply the AI color palette purposefully to help users identify special AI moments easily, without distracting them from the work they’re doing on the UI.
- Differentiate embedded AI features from the Joule assistant experience through the use of 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 of the embedded AI elements. It is primarily applied to AI buttons, icons, and related UI elements.
Apply SAP Design System guidance for semantic colors.
Button Highlight Background
Tokens/Button/button-highlight-background
Color: #0070F2
Joule Purple
Apply SAP Design System guidance for prescribed colors. Purple serves as the primary, identifying color for the Joule assistant experience and UI. It is primarily employed within the Joule header and UI elements.
Assistant Color 1
Assistant/sapAssistant_Color1
Color: #5d36ff
Assistant Color 2
Color 2 of the SAP assistant (Joule)
Assistant Color 2
Assistant/sapAssisant_Color2
Color: #a100c2
Joule Gradient
The Joule gradient is primarily used in brand and marketing moments, such as welcome screens, ad banners, and illustrations.
Assistant Background Gradient
Assistant/sapAssisant_BackgroundGradient
Color: #5d36ff - #a100C2