Design language

This guide outlines the design language that should guide the implementation and communication of AI-enabled features at Red Hat, inlcuding common design patterns to follow in your UIs. Many of the linked resources require a Red Hat login.

1. Be transparent: Users want to know when they are interacting with AI, so use clear labels and visual cues.
2. Make AI personable, but not human: While AI should use a human-like voice and tone, it should never act as if it is a person.
3. Stay within brand rules: Adhere to Red Hat brand standards and guidelines from both PatternFly and the Red Hat design system .
4. Complete internal reviews: Follow all other required guidance and assessments for your products, such as an AI Assessment (AIA) or Privacy Impact Assessment.

Ensure that AI is clearly marked in multiple ways, including at least 1 visual and 1 text indicator. For example, an AI-generated search feature should be indicated with an AI-search icon and a "Search with AI" text label. Higher-risk interactions benefit from additional indicators, like a text notice placed at the beginning of an experience. Consult with the AIA Reviewers during your AIA review process as needed.

To avoid adding more distraction to an experience, do not label AI-generated images or ads individually. Instead, consider implementing a site-wide notice that outlines when users will (and won’t) encounter AI-generated images.

Disclose any use of AI in chatbots, as outlined in our ChatBot design guidelines.

For more Red Hat-specific guidance AI disclosure, refer to this guidance for tranparency notices in externally facing AI features (Red Had login required).

Do not use unique colors or gradients to indicate AI features.

To ensure accessibility and proper status communication, AI-related icons and elements should still use standard PatternFly colors. For example, AI-action buttons should use the appropriate color token that aligns with the button variant, like primary, secondary, and so on.

AI is represented by a sparkle icon, which is a diamond shape with concave sides. When the sparkle icon is added to the upper-left of another icon, it indicates an ai-enabled action or an action with an ai-generated result. For example, a sparkle placed beside a pencil icon indicates that a user can generate text with AI.

AI icons must also be paired with a button label or tooltip text that says "[ Action ] with AI" or "[ Action ] by AI" to ensure there are multiple indicators that AI is being used. You can adapt this text label between tenses as appropriate. For example, "Search with AI" or "Search results generated by AI."

The following AI-enabled icons are available for use:

Like the rest of PatternFly's icons, these AI icons are available within the @patternfly/react-icons package.

In Figma, these icons are available within the Red Hat brand library, rather than those in the PatternFly components library. You can swap to the Red Hat brand library via the icon instance menu:

• Do not use AI icons alongside information that was not generated by AI. Use the standard UI icon instead.
• Do not create new AI icons on your own. If you need a new icon, send a request via the help-brand Slack channel (Red Hat only).
• Do not change the colors of AI icons.
• Do not communicate the use of AI through icons alone. Ensure they are also paired with a text label or tooltip.
• Do not use the AI sparkle to label something as "new." Use rh-ui-icon-new instead.
• Do not use brains or robots to represent AI features. The existing brain UI icon represents learning and education. The robot icon should only be used for chatbot avatars (as described in the robot icon guidelines).

To align with user expectations of chat experiences, we offer a robot icon for use with chatbots that are created via our ChatBot extension.

• Do not use other icons or robot images as your avatar.
• Do not use robot icons in place of the sparkle icon.
• Do not represent humans with the robot icons.

There are 2 variants of the robot icon available within the Red Hat brand library in Figma, each with different uses:

The standard robot icon is intended to be used as an avatar in chatbot conversations. Because avatars have personality and don't have interactive state changes, there are a few background color options available.

Do not use the standard robot icon for chatbot launch buttons. Instead, use the UI icon.

The UI robot icon is intended to be used within UI elements that launch chatbots, including buttons, menu toggles, and other access points.

Because there are more specific accessibility and usability practices for UI elements to follow, there are no "emotion" variants for the UI robot icon.

• Do not use the robot icon in place of the sparkle icon for other kinds of AI experiences.
• Do not use custom colors, gradients, or shadows with the UI icon.