ai patterns

AI Communication

Clearly and consistently communicating AI functionality is essential to building user trust in AI-powered features. These guidelines outline how to incorporate AI into your designs in a way that aligns with Ripple styles and reflects Watermark’s core AI principles of transparency and explainability.

Transparency Explainability

Transparency

To build trust with users, we must be transparent about where and how AI is used within our products. Consistent styling helps build awareness and enables users to better recognize and anticipate AI-powered experiences. Use the following patterns to indicate the presence of AI at each level of the experience.

AI Indicator

Example from CES showing an AI generated doughnut chart utilizing the AI indicator below.
  • Use to indicate any AI generated content

    Use the phrase “Powered by AI” for all areas generated by AI.

  • Ensure the AI indicator is positioned directly above or below the content to make the connection clear
  • Do not include more information to explain the functionality.

    Use the AI Toggletip to add more clarification when needed.

AI Button

Example from CES that uses an AI button to launch an AI chat experience.
  • Use to take actions that involve AI functionality

    Actions could include generating AI content or launching directly into AI features.

  • Use the “ai-sparkles” icon for AI actions to maintain consistency when users initiate AI-powered features
  • Do not use for any actions unrelated to AI

AI Icons

Example from CES that uses the ai-chat icon at the top of the AI chat feature.
  • Use AI icons to distinguish areas with AI generated content or features

    Refer to the icons page to identify and use the correct icon for your specific use case.

  • Do not rely on the icon alone to indicate AI generated content

    Always include clear text that explicitly states the content uses AI.

AI Loader

Mock example of a card loading AI generated content.
View Example on CodePen (link opens in new window)
  • Do not use to load content that is system generated

    Only use when the content is entirely generated by AI.

Explainability

Explainability involves helping users understand how and why AI-driven decisions are made. By increasing transparency, it builds trust and encourages adoption through clearer comprehension of the system's behavior. Use the following patterns to seamlessly incorporate explainability into the user workflow.

AI Toggletip

Example from CES that uses the AI toggletip to explain how the results were generated.
View AI Toggletip Component
  • Use to explain that the content is generated with AI

    Include how the AI used available data to produce the information.

  • Use concise explanations

    Consider utilizing an AI banner to include more information when needed.

AI Callout

Example from CES using the AI callout within a card to explain an AI summary.
View Example on CodePen (link opens in new window)
  • Use to present AI generated information

    Always pair with an AI tag to clearly indicate the content was produced by AI.

  • Use to contain AI generated content only

AI Banner

Example from CES using the AI banner as a disclaimer with a link to provide feedback.
View Example on CodePen (link opens in new window)
  • Use to add explanations to how the AI produced the information

    This helps users clearly understand how AI is implemented to support their workflow.

  • Use to contain a disclaimer about the AI generated content in your product

    Include a disclaimer to remind users that AI-generated content may be inaccurate and should be reviewed and confirmed before use.

  • Can contain a link
  • Do not include AI generated content within the banner

    The banner should include only information that explains the AI functionality.

  • Do not use to add explanations of general system related information

    Explanations should only include information related to AI functionality. Use the system communication banner patterns instead.
Back to Top