AI Colors

We will continue to evolve these guidelines based on insights from product teams and other experts across SAP. Please submit feedback for improvements through the Design System Jira (select “Business AI” in the Stakeholder field), and check our AI colors Jira ticket and AI patterns roadmap for the latest updates.

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.

Embedded AI and Joule assistant colors

Embedded AI and Joule assistant colors

Usage

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

SAP blue serves as the main color for embedded AI. It is primarily applied to embedded AI buttons, icons, and related UI elements.

Apply SAP Design System guidance for prescribed colors.

sapBrandColor

sapBrandColor

Brand Color

#0070F2

–main/sapBrandColor

Embedded AI Semantic State

Use the semantic information background color to call attention to AI-generated suggestions or content, such as AI-populated input fields.

Apply SAP Design System guidance for semantic colors.

sapInformationBackground

sapInformationBackground

Information Background Color

#E1F4FF

–Semantic/Background/sapInformationBackground

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.

sapAccentColor5