AI Elements

Introduction

AI elements like Color, Sparkle Icons, and Sparkle Loading are created to communicate AI-driven actions or outputs. The shape and color of these elements are found in numerous consumer and enterprise products; leveraging this emerging mental model helps ensure a positive experience around discoverability and affordance.

About AI Elements

• Who is it for: This guidance has been compiled to help Workmates who build or influence how we design Human-AI experiences at Workday decide when to use the right visual elements to differentiate AI from other features and highlight actions users can readily perceive.

• Why do we need it?: Standardized AI interaction enables understanding, faster decision-making and streamlines the creation of meaningful Human-AI experiences.

• What’s changed in this update: Workday’s AI Brand, Illuminate, was launched at Rising 2024, setting the direction for Workday’s AI vision. The Illuminate Refresh translates this vision into our product, ensuring consistent brand application and optimized usability across all AI touchpoints, for an enhanced and seamless user experience. All AI touchpoints should now begin work to align with new Illuminate branding, helping to create a cohesive, consistent and recognizable visual language.

Designing for Obsolescence

Over time, the purposeful, considerate and consistent use of these elements will help build and sustain user trust in our product and features, however as we build A.I. driven experiences for our users it’s important we consider what we can learn from the past, history can teach us a lot.

Anyone who remembers the ‘HD Ready’ logo on TV’s or the ‘WiFi inside’ stickers on new laptops and even the once ubiquitous ‘save’ icon (floppy disc / save to the cloud) will tell you the meaning associated with icons or logos dedicated to technology fade just as fast as their arrival. As AI integrates into more and more applications, we must be careful to consider how long will its abilities retain their mysterious quality? How long will it be until AI is just viewed as ‘normal’ functionality by our users who expect it in their workflows?

Illuminate Refresh

Workday’s AI Brand, Illuminate, was launched at Rising 2024, setting the direction for Workday’s AI vision. The Illuminate Refresh translates this vision into our product, ensuring consistent brand application and optimized usability across all AI touchpoints for an enhanced and seamless user experience.

Beyond building a strong connection with the Illuminate branding, it’s also paramount to continue enhancing our users’ AI experiences by establishing a solid foundation that can adapt to the constant evolution of AI while remaining compatible with our customers’ branding. This will ultimately drive brand impact that inspires trust across teams and with our customers.

Color System

While closely aligned with the Illuminate branding, we’re aiming for a neutral, scalable and accessible color system. With the Illuminate Refresh, the core AI color becomes After Hours, a dark neutral blue, bridging both the Illuminate and the Design System Brand Refreshes. The After Hours is paired with our current core blue, Blueberry 400. This color palette provides a neutral foundation that enables scalability, customer branding and future flexibility, especially as AI features become more integrated and visually unified.

The updated color system introduces a new pattern. It is not a one-to-one replacement of the previous version. Previously, button containers used the core color (Dragon Fruit 200) while icons and labels matched the text system color (Black Pepper 400). Now, the core AI color, After Hours, is used for icons and labels on a Blueberry 100 background. This shift ensures high contrast between the After Hours label and potential further backgrounds like white or light grey, supporting accessibility while offering a more neutral foundation.

Two additional shades, Blueberry 200 and 400, are used for hover and active states. Additionally, the system color Blueberry 400 is used on interactive elements, such as Tertiary Buttons for Sources and Show/Hide Suggestions.

Color Palette Transition

For now, as the Design System Brand Refresh palette is in development for our broader product ecosystem, we recommend using After Hours alongside our current core Blueberry blue in the Canvas Tokens v2 library.

When the new palette is released in September, the colors will be renamed using semantic tokens and will be part of the Canvas Tokens v3 release.

AI Assets

Our AI Assets are designed to feel intuitive and quietly expressive. The Sparkle remains the core visual identifier for AI. Every touchpoint aims to convey intelligence and approachability.

1. Sparkle Icon: The Sparkle remains the primary visual identifier for AI features.

2. Assistant Ingress Button: The Assistant Ingress button and hover animation redesigned for improved visibility; selected state includes a glow effect.

3. Glow: A soft glow effect on hover and active states to subtly reflect the Illuminate brand aesthetics.

4. Suggested Prompt: The CTAs icon and labels use the After Hours color on a Blueberry 100 background.

5. Source Chips: The Source Chips in Agentic experiences use the default light grey background.

AI Extended System Icons

Our AI Extended System Icons build on our existing library of system icons. They are designed to convey next steps or actions the user can take with new AI functionality more clearly than by simply using the Sparkle Icon on its own. Consistent use of the icon alongside AI functionality helps users develop accurate mental models, while also minimizing repetitive use and overreliance on the Sparkle Icon.

Screen Samples

Resources

AI Color System Tokens(Figma)

Workday Assistant Starter Kit(Figma)

Some Simple Principles

• Design for Purpose: AI Elements should be visually anchored to product functionality, not used for decoration.

• Design for Focus: Use AI Elements to guide attention toward AI outputs or necessary inputs using visual cues.

• Design for meaning: Use AI Elements to clarify the actions users can take with AI. AI is a technology, not a product feature.

Sparkle Icon

This shape is a nearly universal affordance, enabling users to recognise and differentiate AI-driven interaction patterns and subsequent outputs. We have created a proprietary shape and fill to represent Workday’s inclusion of AI technology in our product and experiences.

The Sparkle signifies AI-powered features, aligning with an industry convention for visually identifying AI interactions. We embraced this trend from the start, recognising the importance of clear visual communication in the rapidly evolving AI landscape. As user understanding of AI continues to evolve, we are committed to adapting and refining this symbol, with the ultimate goal of phasing it out as AI becomes seamlessly integrated into everyday user experiences.

• We recommend using the AI Sparkle icon sparingly. If an experience contains multiple instances of the icon, consider consolidating them to a single icon, and positioning it higher up in the visual hierarchy of the experience.

• This icon, or any semblance, should not be used decoratively nor in scenarios where AI-driven inputs or output are absent.

Upgrade to @workday/canvas-system-icons-web@3.0.19 or higher to access wd-icon-sparkle.svg (sparkleIcon when using SystemIcon).

Criteria for Use of AI Elements

• Acclimation & New Functionality: Consistently seeing this icon alongside AI functionality helps develop a more accurate mental model for users. Research

• Aides Accessibility: Assists in creating equitable experiences for users of all abilities.

• Creates Better Discoverability: Helps convey possible actions that users can readily perceive.

• Regulatory Requirements: Helps with emerging transparency obligations - notifying users they’re interacting with an AI system. EU AI ACT FAQ

Watchouts

• Repetition: Avoid using on Prompts & Fields. Consolidate into single icon, and position higher up in the visual hierarchy.

• Decoration: Do not use decoratively or in scenarios where AI-driven inputs or output are absent.

• Use Sparingly: Overuse of Sparkle Icons may diminish overall meaning and create visual complexity.

• Retrospective: Don’t apply to legacy experiences that leverage ML or AI already in production.

• Longevity: AI functionality will become more common over time; make sure to consider deprecation. Workday won’t always need dedicated AI Elements like Sparkle Icons to convey these new experiences.

Loading - Sparkle Loading Indicator

The Sparkle loading indicator has also been created for exclusive use, as it indicates AI-originated content is being generated, processed and displayed. This animated element, closely related to our Loading Dots component, uses the Sparkle icon shape and color.

This should not be used in experiences or features that are not loading AI-driven content or as a decorative element.

The Loading Sparkle is available in the Preview package of the Canvas Kit 10.3.0 or higher. It is also available in the Canvas Web Figma library starting with v10.

• Use load time to share with the user what data sources are being used - similar to when you do a search for flights or book a hotel online. Use: Generating based on… [Example in sentence case]

• You may also use these loading times to reiterate what the user has requested generating. For example: Generating details for “January Paycheck Finding results for “My Goals”

UX Fundamentals, Loading, Latency and AI

Navigating loading and latency times is a crucial aspect of designing seamless Human-AI experiences, particularly with Generative AI and agentic systems where processing can take time. The detail below has been created to help apply well evidenced research from decades of Human-computer interaction. It’s important to keep users informed and engaged during these periods, drawing upon our Workday Human-AI Experience guidelines.

Understanding the Challenge

Unlike traditional software which often has predictable loading times, GenAI and agentic systems can have variable latency depending on the complexity of the request, the model’s processing time, and system load. This can lead to frustration, and an erosion of trust with users who are acclimatised to shorter load times if not managed effectively.

Our guidelines emphasize the importance of setting the right expectations and ensuring users feel in control throughout their interaction with AI. It’s important to have a conversation between UX design and engineering early on about this to ensure we’re emulating load times appropriately in prototypes.

* More guidance in this area will follow soon as we develop more detailed documentation.

Design Guidance for Loading and Latency

Here’s a breakdown of design guidance based on expected latency times, incorporating principles from our documentation:

Menus

AI Extended System Icons can be used within menus. This avoids the need to use the Sparkle Icon on its own which may risk cluttering the interface with repetitive use of Sparkle Icon.

Standards for All AI Icons

Are you designing an AI experience? Need to illustrate AI functionality with icons? Use these best practices for designing and contributing assets to visually anchor the product to AI functionality.

Why create a new AI System Icon?

• To aid acclimation to a new paradigm in interaction users may not yet fully understand.
• Creating a clear differentiation between established functional behavior and new AI features which the user may have no prior experience of using.

Support with Designing Your Own Icons

First things first, make sure to visit the System Icon library and give it a deep review to assure that there’s not already an existing icon that could potentially support your needs today.

Visit and review the Canvas System Icon Contribution guidance and documentation. Here you’ll find key info on how to get started with designing your own icons as well as details on how to keep consistent with the Canvas icon visual language and identity. You can also check the System Icon Contribution Template here

Cutout Guidance

Rather than creating a new ‘cutout’ treatment, reference the below image as instruction on pixels, strokes, and more when creating AI related system icons. Use this as the foundation for AI system icons, which builds off our existing system icons.

Watchouts

• Cut out style icons inherently increase the amount of visual information in the icon. It’s important to be conscious of this as we only have so much space to work with (24px). Adding a sparkle within a ‘cut out’ may mean remove we need to remove/simplify other areas of the icon. Below are three examples of where the visual complexity inherent in existing system icons means they may be unsuitable candidates for creating AI system icons from.

• Pay attention to the details that exists within a ‘cut out style’ icon, particularly where the cut out occurs. Keep the secondary element similarly spaced, the cut off lines 2px and rounded. Aligning with the existing cut out style will help assure your new icon aligns with our icon visual language.

• Our users have learned our icons and connect them to specific functionality and/or features. Ideally, new AI ‘cut out style’ icons should be used to support AI functionality that directly relates to the existing icons associated functionality that is being ‘cut out’.

Examples

The AI Sparkle icon should be applied to the top right corner (in a cutout) by default. In situations where the main icon consists of a diagonal (45° Angle) shape like the pen /edit icon in this example the sparkle should then be placed in negative space top left or right, eliminating the need for a cutout.