Icons
The bolt symbolizes the innovation and power of Iterable AI. Both the bold color palette and gradient elevate our AI features, to provide clarity, context, and interest throughout the product.
Iterable AI Bolt
Badge
The Iterable AI badge provides a more prominent visual marker to signify AI products or features. Often positioned at a higher level of the UI hierarchy, like a header, the badge should set a clear expectation that within its context, all controls or data display supports the AI experience.
Given the larger size of the badge, it is typically used sparingly. Most applications of this badge are in contexts where there is an Iterable AI feature, like Predictive Goals or Explainable AI.
Icon
The bolt icon is the primary visual indicator for Iterable AI functionality. As AI expands into more surfaces and workflows, this small icon unobtrusively marks where AI features are present, allowing marketers to quickly identify AI-powered or generated objects.
Primary
- Prominently presents an Iterable AI feature; if the badge is an H1, this would be an H2. Use the full-color bolt icon when AI plays a key part of the UI or workflow.
- Consider using this icon to mark where an AI feature is configured, or in the metadata of a resource when an Iterable AI feature, like Send Time Optimization, is active.
Secondary
- Used in similar applications as the Primary icon, this secondary “inverted” variation is best used when the presentation of Iterable AI should be less significant and slightly more discreet.
- It may also be considered when other Iterable AI icons or color patterns, like the gradient or sparkle icon, are present. This will help avoid overwhelming with too many AI visual elements.
Tertiary
- Used to denote resources that have been generated or powered by Iterable AI, and used as selection, for example, a Brand Affinity label when building a query in segmentation.
- Any other context or view where there are other gray outline icons and an Iterable AI feature or data point is to be presented in an equal form – to avoid any irrelevant priority or attention.
Iterable AI Sparkle
The sparkle visually represents of our generative ‘Assist’ tools, used to indicate our growing suite of features that help marketers augment their work with creation, summarization, and analysis.
Generative Sparkle icon
The sparkle icon should be used to communicate when content or resources will be or have been generated by Iterable. This commonly known as generative AI, powered by a LLM.
When navigating Iterable, it’s important for our users to have clear context around what was created by AI, through generation. However, once the created resource has been changed, altered, or manipulated, the generative sparkle icon is no longer necessary.
Iterable AI assist features
- Iterable has a growing suite of ‘Assist’ features, such as Copy and Journey Assist. These generative tools are typically presented in context during the creation stages of a workflow.
- Initially, the tools are represented by the sparkle icon which, when clicked, expands to display input text (prompt) and controls.
Generated content and resources
- Gives clear context to what has been created or transformed by generative AI, content and resources are visually marked with the sparkle icon.
- Users should be able to easily distinguish between what the AI has generated and other system or user-created material.
Guidelines
Both the bolt icon and badge should never be modified or altered from their original form.
Don’t alter or distort the icon or badge
- It’s important to maintain consistency in icon application. Neither the bolt icon or badge should be altered or modified from the original component.
- Within the Iterable product, we always display the bolt in the 16px or 26px icon container and the badge in its complete form.
Do provide a tooltip when the bolt is used to represent AI features
- The bolt icon is used in resource metadata when there is an active AI feature, for example a campaign with Send Time Optimization running.
- A tooltip should be applied to the icon to help users quickly explore what the bolt represents and which specific feature(s) are enabled.
Don’t use the bolt icon to reference generative features
- There should be distinction between our traditional AI features, like Predictive Goals, and our generative features which create or transform content, resources, or other artifacts.
- To ensure clarity and proper expectation, the bolt should never be used to represent generative tools, like Journey Assist, and their triggers or generated outputs.
Do pair the icon with supporting text
- The sparkle icon, when used as a “trigger” to launch an Assist view, should display the ‘Generate’ text on on hover, either as a tooltip or in the expanded state of the original circular button.
- The button container’s shadow depends on its the “elevation” of the in the UI. If the button is sitting a high point, above other objects in the UI, a ‘Medium’ shadow should be applied. If nested inside existing elements, like a button or container, the shadow should be removed.
Don’t represent generative output with the bolt icon
- Generative output, such as content, should be presented with the sparkle icon to ensure clarity and transparency in the product UI.
- Note that once a user alters or modifies the original form, the sparkle icon is no longer applicable and should disappear.
Examples
Iterable AI badge
The badge is most commonly positioned in the header or similar higher points in a page hierarchy.
Bolt
The bolt is most commonly positioned in the header or similar higher points in a page hierarchy.
Sparkle
