AI can be a powerful tool when used in the right way and at the right moment in a user journey. This guidance explains how AI integrates with core design system components. It focuses on principles, patterns, and content approaches that will stay relevant as AI continues to evolve.

Human-centered design should always be the foundation for AI experiences. This means making them helpful, controllable, and reversible while clearly disclosing which content is AI generated and why.

Help users learn how to use AI models effectively and confidently. AI should always provide a clear benefit to the end user, supporting rather than replacing human judgement. Be honest by letting people know when something has been AI processed and keep interactions transparent by showing what’s happening and what options are available.

When writing AI interactions for buttons and labels, instead of saying “Generating,” be clear and use straightforward verbs like “Process”, “Summarise”, or “Explain” to set accurate expectations.

Don't overuse AI components; they should provide a useful indication where needed.

Avoid vague or playful language such as “Let's work some magic,” which can confuse or mislead users.

AI components should be used consistently with clear progress cues and feedback at each stage, so users understand what's happening and when it's complete.

The colour purple is associated with AI, which distinguishes it from other colours such as red for errors and green for success

The AI icon is a clear, recognisable symbol that helps users identify when AI is in use. Use it consistently across all AI-driven interactions and always pair it with a clear, descriptive label.

Ensure the icon remains accessible and easy to read, especially when displayed at smaller sizes.

Use alert to inform users when AI is present. Alerts give a more prominent indication of AI being used in an interface. They can contain a small message to give more information about the AI being used and anything users should know about using it.

Toasts are quick, lightweight pop-ups that deliver updates without interrupting the user. They're ideal for brief notifications such as “AI is working” followed by “Done! Click here to undo” or “Approve change.”

Keep them short, clear, and only on-screen for a few seconds while ensuring they are displayed long enough for their content to be read and understood.

Small labels are a simple way to help users quickly identify AI features or highlight when content has been AI-processed. They work well for displaying values or signaling if something is AI processed but should be used sparingly so that their meaning remains clear and significant.

All AI-related components should be fully accessible and inclusive. Ensure that app errors are properly announced to screen readers and other assistive technologies, and that the AI icon remains legible and accessible at all sizes.

Users should always understand what information the AI can access and have clear control over what they choose to share, such as specific files or folders. Finally, make it easy for users to provide feedback on AI features so experiences can continually improve based on real user insight.

Maintain transparency whenever content or actions are AI-processed so users understand what's happening behind the scenes. Clearly label AI-generated outputs like “AI summary” or “Suggested by AI” to set user expectations and allows users to make informed decisions.

Include an easy way for users to undo AI actions, such as an “Undo” or “Revert changes” button. This helps users stay in control and confidently use AI suggestions.

Ensure all AI features are accessible to everyone. They must work with screen readers, voice control, and keyboard navigation. Any visual cues like the AI icon or colour must always include text alternatives.

Overload interfaces with AI badges. Use them sparingly and consistently so users can clearly understand when AI is involved without feeling confused or overwhelmed.

Avoid vague or exaggerated language when talking about AI. Be clear and honest about what it does and how it helps, using plain, factual wording to build trust and set realistic expectations.

Rely only on colour or icons to indicate AI features. Always pair them with clear text. The AI colour purple and icon should be supported by labels like “AI-assisted” to ensure meaning and accessibility for users.