AI Indicators
AI indicators communicate the integration of AI within a product, layout, or component. Our goal is to ensure recognition, transparency, and clarity by providing consistent feedback. This approach helps users manage their expectations effectively.
AI tag
The tag component and its included AI style is the default indicator. You can choose between multiple options and sizes based on your use case. The default option is "subtle".
Link: Tag
Subtle
Default solution
Solid
Prominent solution
Outlined
On brand-color/dark bg
Do's
- Default: "subtle"
- Brand-colored/dark backgrounds use "outlined"
- Choose size based on UI hierarchy and context
- Use a specific style consistently throughout the customer journey
Don'ts
- Do not use AI tags as a button or CTA
- Do not use "subtle" or "solid" version on top of brand-colored/dark backgrounds (e.g. Header)
Examples
New York, NY
What's more, our integration with Greyhound provides even more coverage and travel options throughout North America, making FlixBus the ideal choice for domestic and international travel.
Checklist
A few points to consider when including AI functionality and AI indicators in your project:
- If possible provide feedback on AI involvement in plain language (e.g.: "AI-Generated")
- Localize the term "AI" if needed
- Do not rely purely on icon and color alone as a signal
- Provide context to users on why AI produces certain results ("Based on xxx the result is yyy.")
- Provide control to users and do not let AI overrule everything: (e.g.: Discard AI result option)
- Communicate limitations, probability of errors, and/or bias (e.g.: "May contain errors.")
- Use visual cues consistently (tokens & icons)
- Ensure compliance with legal regulations
- Implement ARIA labels for indicators
Other solutions
Include AI indicators by using dedicated icon slots. Use the "spark" icon where available and the "info" feedback below form components for additional user guidance. If the component does not include a feedback option please consider disclaimer options (e.g. banner, box, etc.).
Building blocks
Honeycomb provides these basic building blocks for indicating AI.
| Element | Detail | Description |
| Tokens |
| Basic color tokens for AI elements |
| Assets |
| Default icon to indicate AI |
| Components | Component with built-in AI indicators |