Top 6 Examples of AI Guidelines in Design Systems

Explore 6 design systems with innovative AI guidelines, showcasing best practices for transparency, usability, and trust in AI integration.

Artificial Intelligence is reshaping digital products and how we interact with them, emphasizing natural language and unprecedented productivity. However, creating clear and effective AI guidelines is still a relatively new challenge for many organizations. As companies explore how best to integrate AI into their platforms, design systems are beginning to reflect these evolving practices. Below, we explore how leading design systems document AI integration, offering early glimpses into their distinctive approaches and best practices.

1. Carbon Design System

Carbon for AI is an extension of the Carbon Design System, created to give AI-generated content in IBM products a visually distinct identity while ensuring transparency and trust. The framework not only helps users recognize when AI is involved but also integrates explainability into workflows to clarify how decisions are made. By emphasizing consistency and accessibility, Carbon for AI enables seamless interaction with AI across IBM’s product ecosystem.

Best Practices:

  • Use the AI label to clearly mark AI-generated content and provide access to explainability, enabling users to explore how decisions were made.
  • Design explainability through progressive layers, starting with summarized explanations in a popover and offering deeper insights when requested.
  • Ensure AI visual styling, such as light effects and gradients, is consistent across interfaces to build recognition and user trust.

2. Emplifi Soul Design System

Emplifi’s Soul Design System focuses on creating AI-driven applications that enhance workflows and deliver value through intuitive and seamless user experiences. The system documents eight interaction patterns that guide how AI can integrate into user workflows to provide tailored assistance.

Best Practices:

  • Implement user-initiated AI interactions where users activate AI functions and work with outputs, whether custom input, automatic output, or predictive insights.
  • Design AI to provide contextual assistance, offering recommendations, automation, or conversational interfaces based on user needs.
  • Leverage AI-enhanced search and retrieval to analyze content, deliver relevant results, and improve decision-making workflows.

3. SAP Fiori Design System

SAP Fiori Design System emphasizes "Explainable AI" to foster trust and transparency in business-critical applications. By providing users with context-specific insights into AI decisions, SAP ensures that users feel confident and in control of their interactions with intelligent systems. This approach is particularly important in scenarios with high complexity, volatility, or regulatory requirements, where understanding AI-driven outcomes is essential.

Best Practices:

  • Use progressive disclosure to provide explanations in layers (What/Why/How), offering minimal details upfront with deeper insights available as needed.
  • Design explanations to match user roles, balancing simplicity for most users with detailed reports for experts like data scientists.
  • Ensure users can clearly trace and understand AI actions, especially in high-stakes or audit-heavy scenarios.

4. PatternFly AI Guidelines

PatternFly focuses on making AI interactions intuitive, explainable, and accessible. Its guidelines prioritize user awareness, ensuring that AI components are clearly identified within the interface. This transparency allows users to engage confidently with AI, supported by tools that simplify complex AI processes.

Best Practices:

  • Use AI to address real user needs, improve efficiency, and personalize experiences, avoiding features added solely for trendiness.
  • Ensure AI enhances human abilities rather than replacing them, with practices like collaboration, bias mitigation, and output accuracy checks.
  • Be transparent with users about AI usage, its limitations, and how it makes decisions, while providing options for human support when errors occur.

5. ServiceNow Horizon

ServiceNow Horizon addresses the integration of AI within enterprise workflows, emphasizing seamless usability and control. By providing clear routes to understanding AI processes, the system fosters confidence in its applications. ServiceNow’s guidelines also emphasize designing for transparency, ensuring users can engage with AI in a way that feels natural and intuitive.

Best Practices:

  • Ensure users understand when they are interacting with AI and provide clear, traceable explanations of AI decisions.
  • Use AI only when it genuinely addresses a problem better than traditional methods, avoiding unnecessary implementations.
  • Design with inclusivity by testing solutions with diverse audiences to uncover biases and improve accessibility.

6. Microsoft HAX Toolkit

The Microsoft HAX Toolkit offers 18 evidence-based guidelines to design user-centric AI experiences. These guidelines provide structured advice for every stage of interaction with AI, from initial use to ongoing engagement, focusing on transparency, adaptability, and trust-building.

Best Practices:

  • Clearly communicate the capabilities and limitations of AI during initial interactions, ensuring users know what to expect.
  • Support efficient error handling by enabling users to correct, dismiss, or understand system mistakes with minimal friction.
  • Learn and adapt over time by incorporating user behavior and feedback to improve AI functionality while notifying users of changes transparently.

AI integration in design systems is still a work in progress, with organizations experimenting and iterating to find the most effective solutions. The examples here showcase how early guidelines are emerging to address transparency, user control, and explainability. These initial efforts provide a foundation for more refined practices in the future, paving the way for AI to become an intuitive and trusted component of design systems.

Get started with Supernova today

Unlock the full potential of your design system with Supernova, empowering you to drive innovation, collaboration, and seamless scalability.

Supernova 2024 Year in Review

Reflecting on Supernova’s 2024—a year of growth, innovation, and impact for the design system community. From new tools and insights to exciting partnerships and community engagement, we’re celebrating the milestones that shaped our platform and the future of design systems. 🚀✨

Creating a Single Entry Point for IFC’s Multi-Brand Design System, iceberg

“We have a lot of elements, a lot of components, a lot of documentation, a lot of evolution. We would need two or three devs full time to just maintain that documentation website if we weren’t leveraging Supernova.” – Simon Bélanger, iceberg Design System manager

How AI is Revolutionizing UI/UX: Top Trends to Watch

Discover how AI is transforming UI/UX design through trends like hyper-personalization, emotionally intelligent design, and enhanced accessibility.