Designing for Apple Intelligence means following the visual grammar Apple uses to mark AI involvement in an interface: the shimmer outline, the deference principle, and source attribution. It's a signalling system rather than a style, and borrowing its cues for ordinary loading states is what breaks it.
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.
TL;DR: Apple Intelligence signals AI work through a shimmer outline, a deference pattern that keeps AI suggestions visually quiet, and mandatory source attribution when it summarizes another app's content. Design for three distinct states, pre-AI, AI-active, and AI-resolved, and never use Apple's shimmer for a non-Apple AI integration; build your own signal instead.
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.
AI features should be deferential, not theatrical.
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.
What Are the Apple Intelligence Colors?
There is no official palette. Apple ships the glow as a rendered effect in the system compositor, not as named design tokens you can pull out of an asset catalog, and the HIG never prints a hex table. So where do the values everyone quotes actually come from? Sampling. Every recreation you have seen, including the one running further down this page, is eyedropped from the shipped animation rather than copied from a spec.
Sampled at the brightest frame of the loop, the four hues land close to these:
| Role | Hex | Where it reads strongest |
|---|---|---|
| Blue | #0894FF | Leading edge of the sweep, and the resting tint on Writing Tools |
| Violet | #C959DD | The handoff between blue and pink, widest band in the loop |
| Coral | #FF2E54 | Peak saturation, roughly opposite the blue on the ring |
| Amber | #FF9004 | Trailing edge, just before the loop wraps back to blue |
Two details matter more than the exact values. The gradient is conic, not linear. It sweeps around the element's boundary instead of sliding across it, which is why a linear-gradient recreation always looks subtly off on a rounded rectangle - the corners betray it. And the order is fixed: blue, violet, coral, amber, back to blue. Shuffle it and the ring stops reading as Apple Intelligence and starts reading as a generic rainbow border, the kind that shipped on gaming peripherals for a decade.
Here's the smallest CSS that gets you the ring. For the full build, halo, framework ports, the contrast problem amber has on light surfaces, see Apple Intelligence gradient in CSS:
@property --angle {
syntax: "<angle>";
inherits: false;
initial-value: 0deg;
}
.ai-active { position: relative; }
.ai-active::before {
content: "";
position: absolute;
inset: -2px;
padding: 2px;
border-radius: 16px;
background: conic-gradient(
from var(--angle),
#0894ff, #c959dd, #ff2e54, #ff9004, #0894ff
);
mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
mask-composite: exclude;
animation: ai-spin 1.8s linear infinite;
}
@keyframes ai-spin {
to { --angle: 360deg; }
}
@media (prefers-reduced-motion: reduce) {
.ai-active::before { animation: none; }
}The @property block is what makes any of this move. Custom properties are strings by default, so a plain --angle cannot be interpolated and the ring just sits there looking broken. Typing it as <angle> is what lets the browser tween it. Browsers without @property fall back to a static gradient outline, which is a fine place to land - the element still reads as AI-affected, it simply doesn't spin. Chrome is closing that gap from the other direction with native gradient borders, one of the changes in our Chrome 150 CSS motion features roundup.
One caveat I would push back on hard, because I have watched two teams ship it and regret it. These colors are tuned for dark backgrounds. Amber at #FF9004 on a white card lands around 2.2:1 against the surface behind it, so a light-mode-first product cannot paste the palette in and call the job done. Darken the amber and the coral, or drop the ring to 60% opacity and let the blurred halo carry the signal instead. It's the same second-token discipline any accent needs across themes, which the dark mode UI design guide works through in full.
How Does the Shimmer Animation Actually Work?
The shimmer is built on an angular gradient - AngularGradient in SwiftUI, conic-gradient on the web - swept around the boundary of the affected element rather than slid across it. It cycles the four colors from the table above, clockwise, blue into violet into coral into amber. 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.
Reading about the shimmer isn't the same as watching it. Here's the pattern rebuilt in plain CSS and running live below - the same four colors, the same 2px outline, the same 1.8 second clockwise loop, and the blurred glow halo sitting behind the ring:
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. The same timing discipline applies on the web: the motion design for web guide covers how animation duration, easing, and prefers-reduced-motion keep an effect like this feeling intentional rather than decorative. Keeping that distinction stable across a product is a token problem more than a styling one, which is the argument in our design tokens from Figma to code walkthrough.
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.
Here's that Mail pattern as a live embed. The summary sits above the sender in smaller, quieter type - tap it to expand:
Deadline moved to Thursday, hero animation needs a 20 second cut, reply requested.Summary
Marketing wants the hero animation shortened to 20 seconds, engineering flagged the GPU cost of the blur pass on older iPads, and the launch deadline moved from Friday to Thursday. Ana is asking for a reply on the timeline change before the standup.
Ana Duarte
Q3 launch page - motion review notes
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. If you want the underlying mechanics of how size, contrast, and spacing build those tiers, the visual hierarchy in UI design guide breaks down the seven principles that decide what a user notices first. 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.
| State | Visual Treatment | Duration |
|---|---|---|
| Pre-AI | No shimmer, no badge, no suggestion | Indefinite, until AI is invoked |
| AI-active | Multi-color shimmer outline running | Typically 0.5-3 seconds |
| AI-resolved | Static border or badge plus source attribution | ~0.4 second fade from shimmer |
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.
Side by side, the three states look like this:
1. Pre-AI
Trip notes
2. AI-active
Summarizing
3. AI-resolved
Trip notes, condensed
Flights land at 9:40, hotel check-in opens at 15:00, dinner is booked for 20:30.
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 skeptical 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.
How Should You Design 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.
What does a non-Apple signal look like in practice? Here's the breathing-glow pattern running live:
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. Why do they keep coming up when Apple published the pattern language for free?
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
So what should you actually take from all this? 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, the way I picked apart in the Claude on-brand design review. 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.
Try our own free generator
Enough theory. We built our own color palette generator and use it on real client work, so go ahead and test it right here. Pick four colors, watch them land on a working interface, and read the live WCAG contrast before you commit to anything. Nothing leaves your browser.
