Defining AI Visual Language
Designed the visual language for AI inside Connect Design System: how a prefilled field, an AI suggestion, and a fully manual field stay legible from each other, so advisors review instead of blindly trusting.
The problem
We started wiring AI into the platform: fields getting prefilled from prior records, suggestions surfacing in forms advisors used every day. The models worked fine. What didn't exist yet was a way to tell an advisor, a banker, or a client-facing user: this field, right here, wasn't typed by a human. It was filled in for you. Check it.
That's a different problem than "does the AI work." In a regulated environment, an advisor can't just trust a filled-in field and move on. They need to notice it, evaluate it, and either accept or correct it, every time. If the interface doesn't make that distinction obvious, you get one of two failure modes: people rubber-stamp AI output because it looks identical to something they typed themselves, or they don't trust any of it and re-verify everything by hand, which defeats the point of prefilling in the first place.
Connect didn't have a visual language for this. Nothing in the component library said "AI touched this." I needed to design and ship one.
Designing the pattern
The first instinct is to slap a badge on everything AI-adjacent and call it done. That's wrong for two reasons. One, if every suggestion looks the same as a validation error or a required-field asterisk, advisors stop reading it. Two, we already had a color doing double duty: our Signature palette uses a warm, deliberately under-saturated brown for primary actions. If AI content borrowed anything close to that, or to our standard link/focus blue, it would read as "just another normal interactive state" instead of "pay attention, this came from a model."
So AI got its own color, full stop: a violet-to-magenta gradient that doesn't appear anywhere else in the system. It's used exactly once per field, at low visual weight; a small sparkle mark instead of a filled badge, sitting in the corner of the field itself rather than crowding the label row. I looked at how Carbon handles this for IBM's own AI features. Nested corner treatment, not an inline icon competing with the label text. It's a small placement decision but it matters: the mark reads as "attached to this specific field" instead of "decoration near this section."
Hover or focus on the mark and you get the explanation: what it was filled from, and that it needs advisor confirmation. No modal, no interruption to the flow. The information is there when you go looking for it and invisible when you're not.
Where AI shows up, and where it deliberately doesn't
The harder design decision wasn't the badge, it was deciding which fields get one. Contact details, employer, prior address, things already sitting in a record somewhere: fine to prefill, low stakes to get wrong, fast for an advisor to eyeball and confirm.
Identity fields, tax ID, and anything compliance actually cares about, like politically-exposed-person status, get none of it. Those stay fully manual. Not because the model couldn't guess at them, but because the entire point of those fields is that a human looked at the source and typed it in themselves. Giving them an AI affordance would have undercut the one thing regulators and our own compliance team need to trust: that a person verified it firsthand.
That split became the actual rule for the pattern, not the gradient or the sparkle. Where AI shows up is a design decision with compliance consequences, not just a visual one.
A concrete example: KYC intake
To test the pattern with real screens instead of an isolated component in a sandbox, I mocked up a client onboarding flow: an advisor moving through KYC intake with a mix of prefilled and manual fields. This is a reconstruction I built to demonstrate the pattern, not a real client screen, but the field logic is the same one we shipped: identity and disclosure fields are always blank until an advisor fills them in, everything else can carry the AI mark.
A second surface: dashboards and explainability
A single field is the easy case. The mark sits next to one value, the source is one sentence, done. Dashboards broke that. A flagged account or a drifted metric isn't one fact pulled from one record, it's a conclusion the model reached by comparing a bunch of things over time. "This came from a document upload" doesn't cut it when the honest answer is "this is a pattern across 90 days of trading history." Advisors asking about a flagged account needed more than a hover tooltip, they needed to actually interrogate it.
So the dashboard got two things the form didn't. First, a heavier version of the AI mark: instead of a sparkle sitting quietly next to a label, flagged tiles and table rows carry a small bordered "AI" tag, and clicking it opens a real explanation panel, title, a plain-language description of what the model compared and why it flagged this one, and the model name it ran on. Same rule as before about which fields are eligible: raw reported numbers like assets under management stay untouched, only the tiles and rows the model actually reasoned about get the tag.
Second, a chat panel that stays open next to the dashboard instead of hiding behind a launcher icon. If an advisor sees "Whitfield Capital Trust, flagged" and wants the actual story, the assistant is already there, already scoped to that dashboard's data, and its answers cite the same model attribution shown in the tags. The explainability popover and the chat panel are two entry points into the same underlying reasoning, not two disconnected features.
Portfolio risk dashboard
Answers cite the same risk model shown in the dashboard tags above.
Impact
The clearest signal it worked: advisors started describing the task differently. Not "filling out the form," but "reviewing what's already there." That's the behavior the pattern was designed to produce, verification instead of blind trust, and it's the behavior that actually matters in a compliance context.
The pattern is now the default whenever a team wires AI into Connect, whether that's a single form field or a full dashboard: the same violet accent, the same eligibility rule about which content can carry it, explainability that scales from a one-line hover to a full popover to a chat panel depending on how much reasoning is actually behind the answer. Teams don't have to invent their own visual language for "this was AI-generated" every time they ship a new AI feature. They inherit ours.