AI Mark
The one glyph that says the AI made something. Material Symbols auto_awesome, drawn through icon(), in brand red. It replaces the three glyphs AI screens used to choose between.
When to Use
Use when:
Something on the screen was written or proposed by the AI and the person should know to check it: the head of a proposal, a generated summary's title, the avatar beside an AI message, the button that asks the AI for something. The mark is already inside the agent proposal, the agent status and the AI badge, so reach for it on its own only where none of those fits.
Don't use when:
The thing was made by a person, or you want a general "new" or "magic" sparkle. The mark means one thing, the AI made this, and it stops meaning it the first time it decorates something else. When the mark needs words beside it, use the Badge ai variant.
Variants
Sizes
Two sizes. sm sits beside body text and inside kickers and badges; md, the default, stands beside a heading or alone.
<?= ws_ai_mark(['size' => 'sm']) ?> <?= ws_ai_mark() ?>
Beside words
Most of the time the mark sits in front of the words that say what the AI did. The badge ai variant is that pairing, ready-made, and the agent status and agent proposal carry the mark in their titles.
Prepared by Workshopr
Reading your notes
From JavaScript
WsAgent.aiMark(options) in /js/ws-agent.js prints the same markup, for chat avatars and anything else drawn in the browser. The mark below was drawn by it.
<script src="/js/ws-agent.js?v=<?= filemtime(WS_ROOT . '/js/ws-agent.js') ?>"></script>
avatar.innerHTML = WsAgent.aiMark({ size: 'md', label: 'Workshopr' });States
| State | Behavior |
|---|---|
| Decorative (default) | aria-hidden="true". The words beside it carry the meaning. |
| Labelled | With label it becomes role="img" named by the label. Use it when the mark stands alone, as an avatar does. |
Options
| Option | Type | Default | Purpose |
|---|---|---|---|
size | string | 'md' | sm | md |
label | string | '' | Accessible name. Without one the mark is decorative. |
id | string | '' | Element id |
class | string | '' | Additional classes |
attrs | array | [] | Additional attributes |
Accessibility
| Concern | Behavior |
|---|---|
| Decorative by default | The mark is aria-hidden, because the words beside it ("Suggested change", "Prepared by Workshopr") already say the AI made this. |
| Standing alone | Pass label and it becomes role="img" with that name, so an AI avatar is announced rather than skipped. |
| Never the only sign | Someone who cannot see the mark still has to learn the work is AI-made, so there are always words for it: a label, the badge, or the kicker above a proposal. |
| Contrast | Brand red on white and on the brand tint clears 3:1, the bar for a graphic. |
Tokens
| Token | Used for |
|---|---|
--brand | The glyph |
--text-body / --text-h3 | The sm and md sizes (the glyph is 1em) |
CSS Classes
| Class | Purpose |
|---|---|
.ws-ai-mark | The mark's box, 1em square |
.ws-ai-mark--sm / --md | Sizes |
.ws-ai-mark__glyph | The SVG icon() prints, or the ligature when there is no SVG, clipped to its box |
Files
| File | Purpose |
|---|---|
includes/components/helpers.php | ws_ai_mark() helper |
includes/components/ai-mark.php | Template |
includes/components/components.css | Styles, in the agent components section |
js/ws-agent.js | WsAgent.aiMark(), the JavaScript twin |