Apple Intelligence reshaped iOS visual design in 2024 and the patterns are now fully crystallized in iOS 18.4 and the iPadOS 18.4 design language. The shimmer outline, the deference principle, the source attribution pattern - these are not just brand decoration, they're a coherent design system answering a hard question: how do you visually signal that AI is involved in a UI without making every screen feel like a science fair project?
Most third-party apps have not figured this out yet. I spent the last six months reviewing UI work for clients shipping AI features in their iOS and iPadOS apps, and the same handful of mistakes show up over and over. This guide walks through Apple's own design choices from WWDC 2024 and WWDC 2025, the specific HIG patterns that landed in iOS 18.4, and how to apply them when you're using Foundation Models, Writing Tools, or third-party AI APIs in your own product.
What Visual Patterns Did Apple Establish for Apple Intelligence?
Three patterns matter most. The shimmer is the signature multi-color animated outline that signals AI is actively processing. It's a LinearGradient rendered around the affected control or text region, with hue rotation animated at roughly 1.8 seconds per cycle. The shimmer appears the moment AI processing begins and fades out the moment a result is ready. It does not persist. This last detail is where most third-party imitations get it wrong - the shimmer is a process indicator, not a permanent badge.
The deference principle is the second pattern. AI-generated suggestions sit in visually quiet containers - thin pill rows, collapsed cards, or contextual menus - that expand on user request rather than auto-presenting at full volume. In the iOS 18 Mail rewrite, the Apple Intelligence summary sits as a single line of text above the message subject, expandable to a full paragraph with a tap. The summary is right there if you want it; it doesn't try to replace your view of the email.
The source attribution pattern is the third. When Apple Intelligence operates on content from another app (summarizing notifications, generating a Genmoji from a Messages thread, rewriting text in Mail), the source app's icon and name appear at the top of the AI-affected region. This signals that the AI output is derived, not authored - it came from your conversation, your message, your document - rather than appearing from nowhere.
Together these patterns answer the same question: how do you signal "AI did this" without making the AI feel intrusive, mysterious, or omniscient? Apple's answer is: signal clearly while it's happening, fade out when it's done, defer to user-initiated expansion for detail, and always show the source. The combination feels noticeably different from the more theatrical AI UI patterns from Google or Microsoft, both of which use more persistent and decorative AI cues.
How Does the Shimmer Animation Actually Work?
The shimmer is built on LinearGradient with a custom hue rotation. The gradient spans the four "Apple Intelligence" colors (a teal-blue, a soft violet, a coral pink, and a warm amber) and rotates clockwise around the boundary of the affected element. Rotation speed is approximately 1.8 seconds per full loop, but in practice it varies subtly based on the visual size of the element - larger regions get slower rotation to feel less frenetic. The outline is 2px wide at standard 1x density.
If you're trying to recreate this for a non-Apple AI integration (which Apple's HIG asks you not to do, but the pattern is instructive), here's the SwiftUI sketch:
struct ShimmerOutline: View {
@State private var phase: Double = 0
let colors: [Color] = [.teal, .purple, .pink, .orange]
var body: some View {
AngularGradient(
colors: colors + [colors.first!],
center: .center,
angle: .degrees(phase)
)
.mask(
RoundedRectangle(cornerRadius: 10)
.stroke(lineWidth: 2)
)
.onAppear {
withAnimation(.linear(duration: 1.8).repeatForever(autoreverses: false)) {
phase = 360
}
}
}
}The actual Apple implementation is more complex - it includes a soft glow halo behind the outline, subtle scale variance during animation, and timing that responds to whether the AI step is short (sub-second) or longer (3+ seconds). For longer operations the shimmer accelerates slightly at the start as if it's "waking up" and decelerates as it approaches completion.
Don't reuse the shimmer for generic loading states. Activity indicators, progress bars, and skeleton placeholders should still use the older system patterns. The shimmer signals AI specifically, and overloading the meaning dilutes its usefulness.
Where Should AI Suggestions Live in the UI Hierarchy?
The Apple Intelligence deference pattern places AI output one tier lower in visual prominence than primary content. In the Mail rewrite, the AI summary is a single thin line above the message preview, smaller text weight than the subject and sender. In Photos memory mixes, the AI-generated theme appears as a small badge in the corner of the cover image, not in the main caption. In Notes, AI-suggested formatting changes appear in a collapsed bottom sheet that you have to tap to expand.
This pattern is intentional. AI suggestions are useful, but they are not the user's primary intent - the user opened Mail to read mail, not to read AI summaries of mail. Putting the AI output in the secondary tier respects that hierarchy. Most third-party apps I've reviewed get this wrong by giving AI features primary screen real estate (full-width cards, modal interruptions, hero-sized callouts), which feels intrusive once the novelty fades.
The exception is when the user explicitly initiated the AI step - tapped "Summarize this email", asked Siri to generate a Genmoji, used Writing Tools to rewrite a paragraph. In those cases, the result is the user's primary intent and should occupy primary visual space. The shimmer-and-result is the answer to a question the user asked. But background or proactive AI features (auto-summarized notifications, suggested replies, smart photo themes) should sit lower in the visual hierarchy.
How Should You Handle Three States: Pre-AI, AI-Active, AI-Resolved?
Most third-party AI integrations design the resolved state - the moment the AI output is ready - and ignore the other two. This creates awkward transitions where the UI suddenly mutates when AI completes, or where users don't realize AI was involved at all.
The three states need distinct designs:
Pre-AI state: The UI before AI is invoked. No shimmer, no AI badge, no suggestion. This is just your normal app. The user might tap a button or trigger an automation that invokes AI - or they might not. The pre-AI state needs to be complete and usable without AI ever activating.
AI-active state: The shimmer is running. The affected region is outlined or glowing with the multi-color gradient. There's no result yet, just the visual indication that something is happening. This state typically lasts 0.5 to 3 seconds. For longer operations (10+ seconds), Apple's HIG recommends supplementing the shimmer with a progress indicator or status text so users know how long they're waiting.
AI-resolved state: The result is presented. The shimmer fades out over roughly 0.4 seconds and is replaced by a subtle static treatment - either a thin colored border, a small AI badge in the corner, or simply the result text with no special visual treatment beyond the source attribution. The user can interact with the result, dismiss it, request a regeneration, or expand it for more detail.
The transitions between these states matter. The shimmer should start the moment AI is invoked (don't wait for the model response to begin) and end the moment the result is rendered. Don't let the shimmer persist after the result appears - that signals to users that AI is still working when it isn't, which erodes trust over time.
What About Source Attribution and Transparency?
Apple's HIG explicitly requires source attribution for AI-generated content that derives from other apps or user content. The pattern is consistent: the source app's icon (16x16pt) and name appear at the top of the AI-affected region, optionally with a "by Apple Intelligence" label below.
For third-party apps using Foundation Models or Writing Tools, the same pattern applies. If your AI-generated text rewrites or summarizes content from another part of your app, show what it's derived from. If your AI uses external data (web search, document context, conversation history), make the source visible. This transparency builds trust over time and is increasingly important as users become more sceptical about AI hallucinations.
Source attribution becomes more complex when AI output is composed from multiple sources or generated without obvious source material (purely generative text or images). For these cases, the pattern is to attribute the AI itself - "Generated by Apple Intelligence" or "Generated by [Your AI Provider]" - rather than implying a single source. The attribution should be a small persistent label, not a one-time disclosure that disappears after first use.
Designing for Non-Apple AI Integrations
If your app uses OpenAI, Anthropic, Google, or a custom model rather than Apple Intelligence, you cannot use the Apple Intelligence shimmer per HIG guidance. You need your own signal that AI is involved. The most common patterns I've seen working well in third-party apps:
- Subtle pulse animations: A breathing glow on the affected element, similar in spirit to the Apple shimmer but using your brand colors and a slower animation timing (2.5 to 3 seconds per loop). Doesn't compete with Apple's signature pattern.
- AI badge with brand color: A small persistent icon in the corner of AI-affected regions. Notion uses a sparkle icon, Adobe uses a hexagonal "Adobe Firefly" mark, GitHub Copilot uses a stylized cat-with-glasses. These badges signal AI without animation overhead.
- Color-coded backgrounds: Faint tinted backgrounds (4-8% opacity) on AI-generated text or controls. Distinct enough to signal but quiet enough not to dominate. Works well for inline AI suggestions in text editors and form fields.
The goal across all these patterns is the same: clear signaling of AI involvement without dominating the visual hierarchy. Choose one pattern and apply it consistently rather than mixing approaches. Consistency builds user trust and makes the AI features feel intentional rather than tacked on.
Common Mistakes in Third-Party AI UI in 2026
I review a lot of UI work from clients shipping AI features. The same five mistakes keep coming up.
Treating the shimmer as decoration. The Apple Intelligence shimmer is a process indicator, not a permanent badge. Apps that apply shimmer-style outlines to static AI-generated content forever after generation are confusing users about what AI is actually doing. Use a static badge or border for resolved content, save animated shimmer for active processing.
Hiding the AI step entirely. AI-generated content that appears without any visual indication that AI was involved erodes user trust the moment something goes wrong. Even a small icon in the corner saves you a customer support ticket later.
Over-decorating. Sparkle icons on every AI-touched element, animated glows on every suggestion, multi-color borders on every regenerated paragraph. The cumulative effect makes the app feel cluttered and the AI feel theatrical. Use AI signaling sparingly and consistently.
No graceful fallback. What happens when the AI is offline, when the user is on a device that doesn't support Foundation Models, when the network is unavailable? The pre-AI state needs to be a complete usable design, not a degraded "you're missing out on AI" experience.
Missing source attribution. AI-generated text or images without any indication of what they're derived from create the worst trust problem in AI UX. Users discover the AI is wrong about something specific, can't trace it back to the source, and lose trust in the entire AI feature. Show your sources.
Further Reading
For deeper detail, the Apple Human Interface Guidelines on generative AI describe the official shimmer and attribution patterns. The WWDC 2025 sessions on Apple Intelligence design walk through the rationale behind each pattern. And the Nielsen Norman Group AI UX research catalogs how other major vendors signal AI involvement in their UIs.
Summary
Apple Intelligence introduced a coherent visual design system for AI features that prioritizes deference, transparency, and process signaling. The shimmer outline signals active AI processing, the source attribution pattern shows where AI content derives from, and the deference principle keeps AI suggestions in the secondary visual tier unless the user explicitly invoked them. Third-party designers can learn from these patterns even when not using Apple's APIs - but should use their own visual language to signal non-Apple AI rather than imitating the shimmer. Design for all three states (pre-AI, active, resolved), show your sources, and use AI signaling sparingly. The goal is trust through transparency, not novelty through decoration.
