By Mehdi HassanWhat is good AI disclosure label design?
Good AI disclosure label design makes the AI part of an experience obvious at the moment someone meets it, without turning the interface into a warning sign. A label works when a first-time user can answer two questions in a second: is this AI, and which part of what I'm seeing did it produce?
Disclosure belongs to the wider job of building trust in AI features, which our hub on AI product UX covers end to end. This guide stays narrow: the visual and copy patterns that turn transparency duties into components your team can ship.
What does the EU AI Act ask interfaces to disclose?
The EU AI Act's transparency rules, in Article 50 of Regulation (EU) 2024/1689, ask that people know when they interact with an AI system and when content is AI-generated or manipulated. The full text is on EUR-Lex, and the summary below is a design reading of it, not a legal one.
Article 50 topic | In general terms | Design response |
|---|---|---|
AI that interacts with people | People are informed they're dealing with AI, unless it's obvious | Persistent badge and a first-message line |
Generated audio, images, video, text | Outputs are marked in a machine-readable, detectable way | Embedded metadata or watermark, plus an optional visible tag |
Emotion recognition, biometric categorisation | People exposed to it are informed | A notice before the feature runs |
Deepfakes | Generated or manipulated content is disclosed | A visible label on the asset itself |
How information is given | Clear, distinguishable, at first interaction or exposure, accessible | Text labels, early placement, screen-reader support |
The duties fall on different parties, providers and deployers, and the Act has exceptions. Your design system should make the disclosure easy to keep on, so customers who deploy your product don't have to invent their own.
Which AI label pattern fits which situation?
Each AI label pattern fits a different moment: a badge for who is talking, an inline notice for what was generated, and a content mark for files that leave the product. Choosing by situation keeps you from stacking three labels on one screen.
Pattern | What it looks like | Use it for |
|---|---|---|
Persistent badge | A text pill such as AI assistant next to a name or header | Chat widgets, voice agents, AI personas |
Inline notice | A one-line note above or below generated output | Drafts, summaries, rewrites inside a document |
Content mark | A corner tag on an image, video or audio player | Generated media shown in the product or on a site |
Export line | A caption, file note or metadata entry on download | Files and posts that leave your product |
Pre-use notice | A short explainer before a feature runs | Emotion or biometric features, recorded calls |
Inline AI features need the lightest touch. Our guide to inline AI UX patterns shows how ghost text and rewrites signal their origin through styling and an accept step, which often does the disclosure job on its own.
How should an AI badge look?
An AI badge should be short text in a consistent pill, readable at small sizes and placed where the eye already goes, next to the name or title. The word carries the meaning; the shape and color only make it findable.
- Words first. Use one phrase everywhere, such as AI assistant or AI-generated. Two words beat a sentence.
- Contrast that passes. WCAG 2.2 asks for a 4.5:1 contrast ratio for normal text and 3:1 for user interface components, so a pale grey badge on white often fails.
- Icon as support. A sparkle or similar mark can sit beside the text. Our hub on AI product UX explains why the label should lead.
- Stable placement. Put it in the header or byline, where it stays visible as the thread scrolls.
- Accessible name. Make sure the text is real text or has a label a screen reader announces, not a background image.
Keep the badge visually distinct from status chips like Beta or New. If they share a style, people read the AI badge as marketing, not information.
Where should AI disclosures appear in the flow?
AI disclosures should appear at the first point of contact and stay available afterward. Article 50 asks for information at the latest at the first interaction or exposure, so a label that appears only after someone opens a help article is too late.
Entry point
Label the button or launcher that starts the AI feature, so people know before they click.
First message or output
State it in plain words in the opening line, such as I'm an AI assistant and can help with billing questions.
Persistent context
Keep the badge in the header for the whole session, including for returning users who skip the intro.
Handoffs
When a human takes over or the AI comes back, say so in the thread.
Exit points
When content is copied, shared or exported, add the export line or metadata so the disclosure travels with it.
For chat, this maps onto the anatomy in our AI chat interface design guide. For agents that act on their own, agentic UX covers the task log, which is where a clear record of what the AI did belongs.
How do you label AI-generated images, audio and video?
You label AI-generated images, audio and video in two layers: a machine-readable mark inside the file, and a visible tag where people see the content. Article 50 asks providers of generative systems to mark outputs in a detectable way and asks deployers to disclose deepfakes visibly.
The Act doesn't name one technical standard. Common approaches combine embedded metadata, such as C2PA Content Credentials, with invisible watermarks; check the Commission's current guidance before you choose. On screen, a corner tag reading AI-generated on images, a caption under video and a short spoken or written note for audio cover the visible layer. For written content, our guide to AI-written content and SEO covers how labelling interacts with search.
How do you build disclosure labels into a design system?
Build disclosure labels into your design system as one component family with a few variants, not as copy each team writes. A single source keeps the wording, contrast and placement consistent across chat, documents, media and email.
Name the variants by job: badge, inline notice, media tag and export line. Give each a fixed text token so legal or policy can change wording in one place. Our guide to design systems for AI products covers where these sit next to streaming and citation components, and citations in AI answers pairs well with disclosure, since both tell users where content came from.
Hypothetical example: a disclosure spec for a writing assistant
For example, suppose a startup ships an AI writing assistant inside a document editor. Its spec could read:
Badge: AI assistant, shown in the side panel header at all times. Inline notice: Drafted with AI, placed above any inserted block until the user edits it. Media tag: AI-generated, top-left corner on generated images, never hidden by cropping controls. Export line: a note in the file's metadata and an optional footer line toggled on by default.
This is an illustrative spec, not a description of any real product, and it isn't legal advice.
If you want this designed with your product rather than in the abstract, our product design service covers AI features end to end, and our generative AI industry page shows the kinds of products we work on.
What are the common AI disclosure design mistakes?
The most common AI disclosure design mistake is hiding it, either in an icon, a tooltip or the terms of service. The second is inconsistency: five features, five phrases, and users stop reading all of them.
- Human names and photos with no badge. A friendly persona is fine, but pair it with a persistent AI label.
- Tooltip-only disclosure. Hover doesn't exist on touch screens, and people don't hover over things they think they understand.
- Labels that vanish on scroll. A label in the first bubble only scrolls out of view in a long thread.
- Disclosure that contradicts marketing. Copy promising a real human feel sits badly next to an AI label. Fix the copy.
- No owner. Assign one person to review new AI features against the label system before release.
