diff --git a/packages/@react-spectrum/ai/exports/loader.ts b/packages/@react-spectrum/ai/exports/loader.ts
new file mode 100644
index 00000000000..4c0c853ec7d
--- /dev/null
+++ b/packages/@react-spectrum/ai/exports/loader.ts
@@ -0,0 +1 @@
+export * from '../src/loader/data';
diff --git a/packages/@react-spectrum/ai/intl/en-US.json b/packages/@react-spectrum/ai/intl/en-US.json
index adc6cbede25..555ea77c69a 100644
--- a/packages/@react-spectrum/ai/intl/en-US.json
+++ b/packages/@react-spectrum/ai/intl/en-US.json
@@ -2,5 +2,6 @@
   "chat.newMessage": "New message",
   "messagefeedback.thumbDown": "Bad response",
   "messagefeedback.thumbUp": "Good response",
-  "responsestatus.loading": "Loading"
+  "responsestatus.loading": "Loading",
+  "promptfield.placeholder": "Ready to get started? Ask a question, share an idea, or add a task."
 }
diff --git a/packages/@react-spectrum/ai/src/HorizontalCard.tsx b/packages/@react-spectrum/ai/src/HorizontalCard.tsx
index 920078102c1..a9f71686e8a 100644
--- a/packages/@react-spectrum/ai/src/HorizontalCard.tsx
+++ b/packages/@react-spectrum/ai/src/HorizontalCard.tsx
@@ -115,46 +115,11 @@ let card = style({
   flexDirection: 'row',
   position: 'relative',
   borderRadius,
-  '--s2-container-bg': {
-    type: 'backgroundColor',
-    value: {
-      variant: {
-        primary: 'elevated',
-        secondary: 'layer-1',
-        tertiary: 'layer-2'
-      },
-      isBasic: {
-        variant: {
-          primary: 'layer-2',
-          secondary: 'layer-1',
-          tertiary: 'layer-2',
-          quiet: 'layer-2'
-        }
-      },
-      forcedColors: 'ButtonFace'
-    }
-  },
-  backgroundColor: '--s2-container-bg',
-  // TODO: No box shadow for basic, secondary, dark
-  // also none for basic tertiary
-  boxShadow: {
-    default: 'emphasized',
-    isHovered: 'elevated',
-    isFocusVisible: 'elevated',
-    isSelected: 'elevated',
-    forcedColors: '[0 0 0 1px var(--hcm-buttonborder, ButtonBorder)]',
-    variant: {
-      tertiary: {
-        // Render border with box-shadow to avoid affecting layout.
-        default: `[0 0 0 2px ${color('gray-100')}]`,
-        isHovered: `[0 0 0 2px ${color('gray-200')}]`,
-        isFocusVisible: `[0 0 0 2px ${color('gray-200')}]`,
-        isSelected: 'none',
-        forcedColors: '[0 0 0 2px var(--hcm-buttonborder, ButtonBorder)]'
-      },
-      quiet: 'none'
-    }
+  backgroundColor: {
+    default: lightDark('transparent-white-300', 'transparent-black-300'),
+    forcedColors: 'ButtonFace'
   },
+  boxShadow: `[inset 0 0 0 1px light-dark(${color('transparent-black-300')}, ${color('transparent-white-300')})]`,
   forcedColorAdjust: 'none',
   transition: 'default',
   fontFamily: 'sans',
diff --git a/packages/@react-spectrum/ai/src/PromptField.tsx b/packages/@react-spectrum/ai/src/PromptField.tsx
index 7614bcae7d3..e18d031b5be 100644
--- a/packages/@react-spectrum/ai/src/PromptField.tsx
+++ b/packages/@react-spectrum/ai/src/PromptField.tsx
@@ -14,9 +14,16 @@ import {ActionButton} from '@react-spectrum/s2/ActionButton';
 import Attach from '@react-spectrum/s2/icons/Attach';
 import {Attachment, AttachmentList, AttachmentListProps} from './AttachmentList';
 import {Autocomplete} from 'react-aria-components/Autocomplete';
-import {baseColor, css, style, StyleString} from '@react-spectrum/s2/style' with {type: 'macro'};
 import {Button} from '@react-spectrum/s2/Button';
+import {Cell} from './loader/data';
 import {CenterBaseline} from '@react-spectrum/s2/CenterBaseline';
+import {
+  color,
+  css,
+  iconStyle,
+  style,
+  StyleString
+} from '@react-spectrum/s2/style' with {type: 'macro'};
 import {
   createContext,
   createRef,
@@ -27,7 +34,6 @@ import {
   useRef,
   useState
 } from 'react';
-// eslint-disable-next-line
 import {
   Direction,
   Position,
@@ -35,22 +41,23 @@ import {
   TokenSegment,
   TokenSegmentList
 } from './TokenSegmentList';
-import {getEventTarget} from 'react-aria/private/utils/shadowdom/DOMFunctions';
-import {Group} from 'react-aria-components/Group';
-import {IconContext, mergeStyles} from '@react-spectrum/s2';
+import {IconContext} from '@react-spectrum/s2';
 import {Image, Text} from '@react-spectrum/s2/Card';
+// @ts-ignore
+import intlMessages from '../intl/*.json';
 import {isFileDropItem, useDrop} from 'react-aria-components/useDrop';
-import {isFocusable} from 'react-aria/private/utils/isFocusable';
 import {Link} from '@react-spectrum/s2/Link';
 import {Menu, MenuItem, MenuItemProps, MenuTrigger} from '@react-spectrum/s2/Menu';
-// eslint-disable-next-line
+import {PixelLoader} from './loader/react';
 import Plus from '@react-spectrum/s2/icons/Add';
 import {Popover, PopoverProps} from '@react-spectrum/s2/Popover';
 import {positionToDOMRange, Token, TokenField, TokenProps} from './TokenField';
+import {PromptFieldContainer} from './PromptFieldContainer';
 import {PromptFocusContext} from './Chat';
 import Send from '@react-spectrum/s2/icons/ArrowUpSend';
 import Stop from '@react-spectrum/s2/icons/StopProcessing';
 import {useFocusWithin} from 'react-aria/useFocusWithin';
+import {useLocalizedStringFormatter} from 'react-aria/useLocalizedStringFormatter';
 
 export interface PromptFieldAttachment {
   id: string;
@@ -67,6 +74,7 @@ export interface PromptFieldProps {
   onAddAttachments?: (attachments: PromptFieldAttachment[]) => void;
   onRemoveAttachments?: (attachments: PromptFieldAttachment[]) => void;
   styles?: StyleString;
+  variant?: 'balanced' | 'prominent' | 'subtle';
 }
 
 interface PromptFieldState {
@@ -141,7 +149,8 @@ export function PromptField(props: PromptFieldProps) {
     onStop,
     styles,
     onAddAttachments,
-    onRemoveAttachments
+    onRemoveAttachments,
+    variant = 'balanced'
   } = props;
   let [prompt, setPrompt] = useState<TokenSegmentList>(new AutoLinkingSegmentList([]));
   let [attachments, setAttachments] = useState<PromptFieldAttachment[]>([]);
@@ -202,47 +211,16 @@ export function PromptField(props: PromptFieldProps) {
         onRemoveAttachments
       }}>
       <div {...focusWithinProps}>
-        <Group
+        <PromptFieldContainer
           {...dropProps}
           role="group"
-          className={renderProps =>
-            mergeStyles(
-              style({
-                display: 'flex',
-                flexDirection: 'column',
-                gap: 16,
-                padding: 16,
-                boxShadow: 'emphasized',
-                backgroundColor: {
-                  default: 'elevated',
-                  isDropTarget: 'blue-200'
-                },
-                borderRadius: 'lg',
-                borderWidth: 2,
-                borderStyle: 'solid',
-                borderColor: {
-                  default: 'transparent',
-                  isDropTarget: 'blue-800'
-                },
-                cursor: 'text'
-              })({...renderProps, isDropTarget}),
-              styles
-            )
-          }
-          onPointerDown={e => {
-            // If not clicking on something focusable within the prompt field, focus the input.
-            let target = getEventTarget(e) as Element | null;
-            while (target && target !== e.currentTarget && !isFocusable(target)) {
-              target = target.parentElement;
-            }
-
-            if (target === e.currentTarget) {
-              e.preventDefault();
-              inputRef.current?.focus();
-            }
-          }}>
+          variant={variant}
+          isGenerating={isGenerating ?? false}
+          isDropTarget={isDropTarget}
+          styles={styles}
+          inputRef={inputRef}>
           {children}
-        </Group>
+        </PromptFieldContainer>
         <p className={style({font: 'ui-sm', textAlign: 'center'})}>
           Responses are generated using AI, and may be inaccurate. Check before using.{' '}
           <Link
@@ -297,10 +275,12 @@ export interface PromptTokenFieldProps {
     filterValue: string
   ) => React.ReactNode[] | null | Promise<React.ReactNode[] | null>;
   children?: (segment: TokenSegment) => React.ReactElement;
+  pixelLoader?: Cell[] | Cell[][];
+  placeholder?: string;
 }
 
 export function PromptTokenField(props: PromptTokenFieldProps) {
-  let {completionTrigger, renderCompletions, children} = props;
+  let {completionTrigger, renderCompletions, children, pixelLoader, placeholder} = props;
   let {
     prompt,
     setPrompt,
@@ -308,8 +288,10 @@ export function PromptTokenField(props: PromptTokenFieldProps) {
     setAttachments,
     onAddAttachments,
     inputRef,
-    onSubmit
+    onSubmit,
+    isGenerating
   } = useContext(PromptFieldContext);
+  let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/ai');
   let [isFocused, setFocused] = useState(false);
 
   let [filterAnchor, filterValue] = useMemo(() => {
@@ -332,71 +314,90 @@ export function PromptTokenField(props: PromptTokenFieldProps) {
   }, [filterValue, renderCompletions]);
 
   return (
-    <Autocomplete>
-      <TokenField
-        value={prompt}
-        onChange={setPrompt}
-        multiline
-        aria-label="Prompt"
-        data-placeholder="Ready to get started? Ask a question, share an idea, or add a task."
-        ref={inputRef}
-        onFocus={e => {
-          if (e.isTrusted) {
-            setFocused(true);
-          }
-        }}
-        onBlur={e => {
-          if (e.isTrusted) {
-            setFocused(false);
-          }
-        }}
-        onPaste={
-          acceptedAttachmentTypes
-            ? e => {
-                let clipboardData = e.clipboardData as DataTransfer;
-                let attachments: PromptFieldAttachment[] = [];
-                for (let item of clipboardData.items) {
-                  if (matchMimeType(item.type, acceptedAttachmentTypes)) {
-                    let file = item.getAsFile()!;
-                    attachments.push({
-                      id: crypto.randomUUID(),
-                      file,
-                      image: file.type.startsWith('image/') ? URL.createObjectURL(file) : ''
-                    });
+    <div
+      className={style({
+        display: 'flex',
+        gap: 12,
+        alignItems: 'baseline',
+        color: {
+          default: 'transparent-overlay-600',
+          isFocused: 'body'
+        },
+        transition: 'default',
+        transitionDuration: 350,
+        paddingStart: 4,
+        width: 'full'
+      })({isFocused: isFocused || prompt.segments.length > 0})}>
+      <CenterBaseline>
+        <PixelLoader playing={isGenerating} icon={pixelLoader} />
+      </CenterBaseline>
+      <Autocomplete>
+        <TokenField
+          value={prompt}
+          onChange={setPrompt}
+          multiline
+          aria-label="Prompt"
+          data-placeholder={placeholder || stringFormatter.format('promptfield.placeholder')}
+          ref={inputRef}
+          onFocus={e => {
+            if (e.isTrusted) {
+              setFocused(true);
+            }
+          }}
+          onBlur={e => {
+            if (e.isTrusted) {
+              setFocused(false);
+            }
+          }}
+          onPaste={
+            acceptedAttachmentTypes
+              ? e => {
+                  let clipboardData = e.clipboardData as DataTransfer;
+                  let attachments: PromptFieldAttachment[] = [];
+                  for (let item of clipboardData.items) {
+                    if (matchMimeType(item.type, acceptedAttachmentTypes)) {
+                      let file = item.getAsFile()!;
+                      attachments.push({
+                        id: crypto.randomUUID(),
+                        file,
+                        image: file.type.startsWith('image/') ? URL.createObjectURL(file) : ''
+                      });
+                    }
+                  }
+                  if (attachments.length > 0) {
+                    onAddAttachments?.(attachments);
+                    setAttachments(prev => [...prev, ...attachments]);
                   }
                 }
-                if (attachments.length > 0) {
-                  onAddAttachments?.(attachments);
-                  setAttachments(prev => [...prev, ...attachments]);
+              : undefined
+          }
+          onSubmit={onSubmit}
+          className={
+            css('&:empty::before { content: attr(data-placeholder); }') +
+            style({
+              flexGrow: 1,
+              font: 'body',
+              color: {
+                default: 'gray-800',
+                ':empty': {
+                  default: 'transparent-overlay-600',
+                  forcedColors: 'GrayText'
                 }
-              }
-            : undefined
-        }
-        onSubmit={onSubmit}
-        className={renderProps =>
-          css('&:empty::before { content: attr(data-placeholder); }') +
-          style({
-            font: 'body',
-            color: {
-              default: baseColor('neutral'),
-              ':empty': {
-                default: 'gray-600',
-                forcedColors: 'GrayText'
-              }
-            },
-            width: 'full',
-            outlineStyle: 'none',
-            cursor: 'text'
-          })(renderProps)
-        }>
-        {children || (segment => <PromptToken>{segment.text}</PromptToken>)}
-      </TokenField>
-      <PromptTokenFieldPopover
-        filterAnchor={filterAnchor}
-        items={useDeferredValue(items)}
-        isFocused={isFocused}
-      />
-    </Autocomplete>
+              },
+              width: 'full',
+              outlineStyle: 'none',
+              cursor: 'text'
+            })
+          }>
+          {children || (segment => <PromptToken>{segment.text}</PromptToken>)}
+        </TokenField>
+        <PromptTokenFieldPopover
+          filterAnchor={filterAnchor}
+          items={useDeferredValue(items)}
+          isFocused={isFocused}
+        />
+      </Autocomplete>
+    </div>
   );
 }
 
@@ -462,18 +463,24 @@ export function PromptToken(props: PromptTokenProps) {
     <Token
       {...props}
       className={style({
+        font: 'ui',
         backgroundColor: {
-          default: 'blue-300',
+          default: 'transparent-overlay-1000/10',
           isSelected: 'blue-800',
           '::selection': 'transparent'
         },
         color: {
-          default: 'blue-1000',
+          default: 'body',
           isSelected: 'white'
         },
-        borderRadius: 'sm',
-        paddingX: 4,
-        paddingY: 2,
+        outlineStyle: 'solid',
+        outlineWidth: 1,
+        outlineColor: 'transparent-overlay-1000/10',
+        outlineOffset: -1,
+        borderRadius: 'pill',
+        boxShadow: `[inset 0 24px 32px 0 ${color('transparent-white-50')}, 0 8px 32px 0 ${color('transparent-black-50')}]`,
+        paddingX: 8,
+        paddingY: 4,
         lineHeight: '[1em]',
         cursor: 'default',
         '--iconPrimary': {
@@ -485,7 +492,11 @@ export function PromptToken(props: PromptTokenProps) {
         gap: 4,
         verticalAlign: 'baseline'
       })}>
-      <IconContext.Provider value={{render: icon => <CenterBaseline>{icon}</CenterBaseline>}}>
+      <IconContext.Provider
+        value={{
+          styles: iconStyle({size: 'XS'}),
+          render: icon => <CenterBaseline>{icon}</CenterBaseline>
+        }}>
         {props.children}
       </IconContext.Provider>
     </Token>
@@ -519,6 +530,7 @@ export function PromptFieldSubmitButton(props: PromptFieldSubmitButtonProps) {
   return (
     <Button
       variant="primary"
+      staticColor="auto"
       // TODO: should it be possible to submit a prompt with only attachments?
       isDisabled={prompt.segments.length === 0 && !isGenerating}
       aria-label={isGenerating ? 'Stop' : 'Send'}
@@ -536,7 +548,7 @@ export function InsertMenuButton(props: InsertMenuItemProps) {
   let {children} = props;
   return (
     <MenuTrigger>
-      <ActionButton isQuiet aria-label="Add">
+      <ActionButton isQuiet staticColor="auto" aria-label="Add">
         <Plus />
       </ActionButton>
       <Menu>{children}</Menu>
diff --git a/packages/@react-spectrum/ai/src/PromptFieldContainer.tsx b/packages/@react-spectrum/ai/src/PromptFieldContainer.tsx
new file mode 100644
index 00000000000..2d2f2bb9303
--- /dev/null
+++ b/packages/@react-spectrum/ai/src/PromptFieldContainer.tsx
@@ -0,0 +1,342 @@
+import {
+  brand,
+  defaultBrand,
+  defineProperties,
+  outerBorderStops,
+  stops,
+  token
+} from './tokens.macro' with {type: 'macro'};
+import {color, css, style, StyleString} from '@react-spectrum/s2/style' with {type: 'macro'};
+import {getEventTarget} from 'react-aria/private/utils/shadowdom/DOMFunctions';
+import {Group, GroupProps} from 'react-aria-components/Group';
+import {isFocusable} from 'react-aria/private/utils/isFocusable';
+import {mergeStyles} from '@react-spectrum/s2/mergeStyles';
+import {useState} from 'react';
+
+const STATE_TRANSITION = '700ms cubic-bezier(0.32, 0.72, 0, 1)';
+
+/* The brand color drives the hue of the entire component. Override --brand on
+   the PromptField (or any ancestor) to retheme it — all gradients, shadows, and
+   borders are derived from this hue via OKLCH relative colors in tokens.macro.
+   The default is the fuchsia primary, rgb(236, 105, 255). */
+defineProperties(`
+  @property --brand {
+    syntax: '<color>';
+    initial-value: ${defaultBrand()};
+    inherits: true;
+  }
+
+  @property --con-hue-opacity {
+    syntax: '<percentage>';
+    initial-value: 0%;
+    inherits: false;
+  }
+
+  @property --bg-stop-1 {
+    syntax: '<color>';
+    initial-value: #0000;
+    inherits: false;
+  }
+
+  @property --bg-stop-2 {
+    syntax: '<color>';
+    initial-value: #0000;
+    inherits: false;  
+  }
+
+  @property --bg-stop-3 {
+    syntax: '<color>';
+    initial-value: #0000;
+    inherits: false;
+  }
+
+  @property --bg-stop-4 {
+    syntax: '<color>';
+    initial-value: #0000;
+    inherits: false;
+  }
+`);
+
+const containerBackground = css(`
+  transition: --con-hue-opacity ${STATE_TRANSITION}, --bg-stop-1 ${STATE_TRANSITION}, --bg-stop-2 ${STATE_TRANSITION}, --bg-stop-3 ${STATE_TRANSITION}, --bg-stop-4 ${STATE_TRANSITION}, box-shadow ${STATE_TRANSITION};
+  
+  background:
+    linear-gradient(
+      to bottom,
+      light-dark(rgb(255 255 255 / 75%), rgb(0 0 0 / 40%)) 0% 37%,
+      light-dark(rgb(255 255 255 / 15%), rgb(0 0 0 / 12%)) 83% 100%
+    ),
+    radial-gradient(
+      50% 50% at -20% 100%,
+      rgb(from ${token('container.gradient.con-hue.generating.stop-3')} r g b / var(--con-hue-opacity)),
+      transparent
+    ),
+    radial-gradient(
+      70% 60% at 5% 80%,
+      rgb(from ${token('container.gradient.con-hue.generating.stop-2')} r g b / var(--con-hue-opacity)),
+      transparent
+    ),
+    radial-gradient(
+      70% 50% at 40% 80%,
+      rgb(from ${token('container.gradient.con-hue.generating.stop-1')} r g b / var(--con-hue-opacity)),
+      transparent
+    ),
+    radial-gradient(
+      circle at right bottom,
+      var(--bg-stop-1) 0%,
+      var(--bg-stop-2) 35%,
+      var(--bg-stop-3) 82%,
+      var(--bg-stop-4) 100%
+    );
+
+  --border-color: ${token(`container.border.default`)};
+  --inset-shadow-color: ${color('transparent-white-50')};
+  --drop-shadow-color: light-dark(${brand(0.5826, 0.2265, -0.4, 0.05)}, ${brand(0.6617, 0.2508, -0.5, 0.05)});
+  --prominent-outline-glow: ;
+
+  box-shadow:
+    var(--prominent-outline-glow)
+    inset 0 0 0 1px var(--border-color),
+    inset 0 6px 15px 0 var(--inset-shadow-color),
+    inset 0 0 0 0 transparent, /* placeholder for generating state so transition is smooth */
+    inset 0 -5px 21.6px 0 ${color('transparent-white-50')},
+    inset 0 24px 32px 0 ${color('transparent-white-50')},
+    0 -3px 10px 1px var(--drop-shadow-color);
+
+  &[data-variant=prominent] {
+    /* trailing comma is intentional so it can be interpolated above */
+    --prominent-outline-glow:
+      0 20px 20px -24px ${token('outline-glow.gradient.generating.stop-3')},
+      inset 0 -20px 20px -24px ${token('outline-glow.gradient.generating.stop-3')},;
+    &[data-focused] {
+      --prominent-outline-glow: 0 20px 20px -24px transparent, inset 0 -20px 20px -24px transparent,;
+    }
+  }
+
+  &[data-state=idle] {
+    &[data-variant=balanced] {
+      ${stops('idle', 'default', 'balanced')}
+
+      &[data-hovered] {
+        ${stops('idle', 'hover', 'balanced')}
+      }
+    }
+
+    &[data-variant=prominent] {
+      ${stops('idle', 'default', 'prominent')}
+
+      &[data-hovered] {
+        ${stops('idle', 'hover', 'prominent')}
+      }
+    }
+
+    &[data-variant=subtle] {
+      --con-hue-opacity: 0%;
+      --bg-stop-1: light-dark(white, ${color('gray-75')});
+      --bg-stop-2: light-dark(white, ${color('gray-75')});
+      --bg-stop-3: light-dark(white, ${color('gray-75')});
+      --bg-stop-4: light-dark(white, ${color('gray-75')});
+      --border-color: ${token(`container.border.focus`)};
+      --drop-shadow-color: transparent;
+
+      &[data-hovered] {
+        ${stops('idle', 'hover', 'subtle')}
+        --border-color: ${token(`container.border.default`)};
+        --drop-shadow-color: light-dark(${brand(0.5826, 0.2265, -0.4, 0.05)}, ${brand(0.6617, 0.2508, -0.5, 0.05)});
+      }
+    }
+
+    &[data-focused][data-focused] {
+      --con-hue-opacity: 0%;
+      --bg-stop-1: light-dark(white, ${color('gray-75')});
+      --bg-stop-2: light-dark(white, ${color('gray-75')});
+      --bg-stop-3: light-dark(white, ${color('gray-75')});
+      --bg-stop-4: light-dark(white, ${color('gray-75')});
+      --border-color: ${token(`container.border.focus`)};
+      --inset-shadow-color: transparent;
+      --drop-shadow-color: transparent;
+    }
+  }
+
+  &[data-state=generating] {
+    box-shadow:
+      inset 0 0 0 1px var(--border-color),
+      inset 0 6px 15px 0 var(--inset-shadow-color),
+      inset 0 -32px 100px -50px ${token('container.color.inner-shadow.generating')},
+      inset 0 -5px 21.6px 0 ${color('transparent-white-50')},
+      inset 0 24px 32px 0 ${color('transparent-white-50')},
+      0 -3px 10px 1px var(--drop-shadow-color),
+      0 6px 83px rgb(from ${token('outer-border.gradient.ob-spread-shadow.generating.stop-3')} r g b / var(--spread-shadow-opacity));
+
+    &[data-variant=balanced] {
+      --spread-shadow-opacity: ${token('outer-border.opacity.spread-bg-balanced')}%;
+      ${stops('generating', 'default', 'balanced')}
+
+      &[data-hovered] {
+        ${stops('generating', 'hover', 'balanced')}
+      }
+    }
+
+    &[data-variant=prominent] {
+      --spread-shadow-opacity: ${token('outer-border.opacity.spread-bg-prominent')}%;
+      ${stops('generating', 'default', 'prominent')}
+
+      &[data-hovered] {
+        ${stops('generating', 'hover', 'prominent')}
+      }
+    }
+
+    &[data-variant=subtle] {
+      --spread-shadow-opacity: ${token('outer-border.opacity.spread-bg-subtle')}%;
+      ${stops('generating', 'default', 'subtle')}
+
+      &[data-hovered] {
+        ${stops('generating', 'hover', 'subtle')}
+      }
+    }
+  }
+`);
+
+const outerBorder = css(`
+  --outer-drop-shadow-color: ${token('outer-border.color.drop-shadow.ob-border.default')};
+
+  padding: 6px;
+  border-radius: calc(24px + 6px);
+  transition: --bg-stop-1 ${STATE_TRANSITION}, --bg-stop-2 ${STATE_TRANSITION}, --bg-stop-3 ${STATE_TRANSITION}, box-shadow ${STATE_TRANSITION};
+  background: linear-gradient(
+    to right,
+    var(--bg-stop-1) 0%,
+    var(--bg-stop-2) 37%,
+    var(--bg-stop-3) 77%
+  );
+
+  box-shadow:
+    0 2px 4px var(--outer-drop-shadow-color),
+    0 6px 16px -10px var(--outer-border-hue);
+
+  &[data-variant=balanced] {
+    ${outerBorderStops('balanced')}
+  }
+  
+  &[data-variant=prominent] {
+    ${outerBorderStops('prominent')}
+
+    &[data-state=idle][data-focused] {
+      --bg-stop-1: ${token('outer-border.gradient.ob-border.stop-1')};
+      --bg-stop-2: ${token('outer-border.gradient.ob-border.stop-1')};
+      --bg-stop-3: ${token('outer-border.gradient.ob-border.stop-1')};
+    }
+  }
+
+  &[data-variant=subtle] {
+    --outer-drop-shadow-color: ${token('outer-border.color.drop-shadow.ob-border.subtle')};
+    --outer-border-hue: transparent;
+    --bg-stop-1: ${token('outer-border.gradient.ob-border.stop-1')};
+    --bg-stop-2: ${token('outer-border.gradient.ob-border.stop-1')};
+    --bg-stop-3: ${token('outer-border.gradient.ob-border.stop-1')};
+
+    &[data-hovered] {
+      --outer-drop-shadow-color: ${token('outer-border.color.drop-shadow.ob-border.default')};
+      ${outerBorderStops('subtle')}
+    }
+  }
+
+  &[data-state=idle][data-focused] {
+    --bg-stop-1: ${token('outer-border.gradient.ob-border.stop-1')};
+    --bg-stop-2: ${token('outer-border.gradient.ob-border.stop-1')};
+    --bg-stop-3: ${token('outer-border.gradient.ob-border.stop-1')};
+    --outer-border-hue: transparent;
+    --outer-drop-shadow-color: ${token('outer-border.color.drop-shadow.ob-border.focus')};
+  }
+`);
+
+interface PropFieldContainerProps extends Omit<GroupProps, 'children'> {
+  children: React.ReactNode;
+  variant: 'balanced' | 'prominent' | 'subtle';
+  isGenerating: boolean;
+  isDropTarget: boolean;
+  styles?: StyleString;
+  inputRef: React.RefObject<HTMLDivElement | null>;
+}
+
+export function PromptFieldContainer(props: PropFieldContainerProps) {
+  let {variant, isGenerating, isDropTarget, styles, inputRef, ...otherProps} = props;
+  let [isFocused, setFocused] = useState(false);
+
+  return (
+    <Group
+      {...otherProps}
+      role="group"
+      data-variant={variant}
+      data-state={isGenerating ? 'generating' : 'idle'}
+      data-focused={isFocused || undefined}
+      className={outerBorder}
+      onFocus={e => {
+        if (e.isTrusted) {
+          setFocused(true);
+        }
+      }}
+      onBlur={e => {
+        if (e.isTrusted) {
+          setFocused(false);
+        }
+      }}
+      onPointerDown={e => {
+        // If not clicking on something focusable within the prompt field, focus the input.
+        let target = getEventTarget(e) as Element | null;
+        while (target && target !== e.currentTarget && !isFocusable(target)) {
+          target = target.parentElement;
+        }
+
+        if (target === e.currentTarget) {
+          e.preventDefault();
+          inputRef.current?.focus();
+        }
+      }}>
+      {({isHovered}) => (
+        <div
+          data-hovered={isHovered || undefined}
+          data-focused={isFocused || undefined}
+          data-variant={variant}
+          data-state={isGenerating ? 'generating' : 'idle'}
+          className={
+            (props.className || '') +
+            ' ' +
+            containerBackground +
+            mergeStyles(
+              style({
+                display: 'flex',
+                flexDirection: 'column',
+                gap: 16,
+                padding: 16,
+                cursor: 'text',
+                borderRadius: '[24px]',
+                position: 'relative'
+              }),
+              styles
+            )
+          }>
+          {isDropTarget && (
+            <div
+              className={style({
+                pointerEvents: 'none',
+                position: 'absolute',
+                top: 0,
+                left: 0,
+                width: '100%',
+                height: '100%',
+                boxSizing: 'border-box',
+                borderRadius: 'inherit',
+                backgroundColor: 'blue-800/10',
+                borderStyle: 'solid',
+                borderWidth: 2,
+                borderColor: 'blue-800'
+              })}
+            />
+          )}
+          {props.children}
+        </div>
+      )}
+    </Group>
+  );
+}
diff --git a/packages/@react-spectrum/ai/src/loader/data.ts b/packages/@react-spectrum/ai/src/loader/data.ts
new file mode 100644
index 00000000000..850c9939c80
--- /dev/null
+++ b/packages/@react-spectrum/ai/src/loader/data.ts
@@ -0,0 +1,923 @@
+/*
+ * Copyright 2026 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+export interface Cell {
+  cx: number;
+  cy: number;
+  // Retained from the source data; no longer affects rendering.
+  outer: boolean;
+  stagger: number;
+  exitStart: number;
+  fadeIn: number[];
+  fadeOut: number[];
+}
+
+type StaggerMode = 'individual' | 'grouped' | 'by-row';
+
+interface BuildOptions {
+  staggerInterval?: number;
+  rowOffset?: number;
+  stagger?: StaggerMode;
+}
+
+// ─────────────────────────────────────────────────────────────
+// ai-logo: original 12-cell diamond layout with hand-tuned timings.
+// ─────────────────────────────────────────────────────────────
+export const aiLogo: Cell[] = [
+  {cx: 240, cy: 360, outer: true, stagger: 0, exitStart: 47, fadeIn: [1, 4], fadeOut: [47, 59]},
+  {cx: 160, cy: 320, outer: true, stagger: 2, exitStart: 48, fadeIn: [4, 7], fadeOut: [48, 60]},
+  {cx: 320, cy: 320, outer: true, stagger: 4, exitStart: 49, fadeIn: [6, 9], fadeOut: [49, 61]},
+  {cx: 200, cy: 280, outer: false, stagger: 6, exitStart: 50, fadeIn: [9, 12], fadeOut: [50, 62]},
+  {cx: 280, cy: 280, outer: false, stagger: 8, exitStart: 51, fadeIn: [13, 16], fadeOut: [51, 63]},
+  {cx: 120, cy: 240, outer: true, stagger: 10, exitStart: 52, fadeIn: [14, 17], fadeOut: [52, 64]},
+  {cx: 360, cy: 240, outer: true, stagger: 14, exitStart: 54, fadeIn: [18, 21], fadeOut: [54, 66]},
+  {cx: 200, cy: 200, outer: false, stagger: 16, exitStart: 55, fadeIn: [21, 24], fadeOut: [55, 67]},
+  {cx: 280, cy: 200, outer: false, stagger: 18, exitStart: 56, fadeIn: [23, 26], fadeOut: [56, 68]},
+  {cx: 160, cy: 160, outer: true, stagger: 20, exitStart: 57, fadeIn: [26, 29], fadeOut: [57, 69]},
+  {cx: 320, cy: 160, outer: true, stagger: 22, exitStart: 58, fadeIn: [27, 30], fadeOut: [58, 70]},
+  {cx: 240, cy: 120, outer: true, stagger: 24, exitStart: 59, fadeIn: [31, 34], fadeOut: [59, 71]}
+];
+
+// ─────────────────────────────────────────────────────────────
+// POSITIONS — [col, row] grid coords per icon, exported individually.
+// ─────────────────────────────────────────────────────────────
+const brushPositions: number[][] = [
+  [0, 6],
+  [1, 6],
+  [2, 6],
+  [1, 5],
+  [3, 5],
+  [2, 4],
+  [3, 4],
+  [3, 3],
+  [4, 3],
+  [4, 2],
+  [5, 2],
+  [5, 1],
+  [6, 1],
+  [6, 0]
+];
+const eyePositions: number[][] = [
+  [2, 4],
+  [3, 4],
+  [4, 4],
+  [1, 3],
+  [3, 3],
+  [5, 3],
+  [0, 2],
+  [2, 2],
+  [3, 2],
+  [4, 2],
+  [6, 2],
+  [1, 1],
+  [2, 1],
+  [3, 1],
+  [5, 1],
+  [2, 0],
+  [3, 0],
+  [4, 0]
+];
+const hourglassPositions: number[][] = [
+  [0, 6],
+  [1, 6],
+  [2, 6],
+  [3, 6],
+  [4, 6],
+  [5, 6],
+  [6, 6],
+  [1, 5],
+  [2, 5],
+  [3, 5],
+  [4, 5],
+  [5, 5],
+  [1, 4],
+  [2, 4],
+  [4, 4],
+  [5, 4],
+  [2, 3],
+  [3, 3],
+  [4, 3],
+  [1, 2],
+  [2, 2],
+  [3, 2],
+  [4, 2],
+  [5, 2],
+  [1, 1],
+  [5, 1],
+  [0, 0],
+  [1, 0],
+  [2, 0],
+  [3, 0],
+  [4, 0],
+  [5, 0],
+  [6, 0]
+];
+const magPositions: number[][] = [
+  [6, 6],
+  [5, 5],
+  [1, 4],
+  [2, 4],
+  [3, 4],
+  [0, 3],
+  [4, 3],
+  [0, 2],
+  [4, 2],
+  [0, 1],
+  [4, 1],
+  [1, 0],
+  [2, 0],
+  [3, 0]
+];
+const cropPositions: number[][] = [
+  [5, 6],
+  [1, 5],
+  [2, 5],
+  [3, 5],
+  [4, 5],
+  [5, 5],
+  [6, 5],
+  [1, 4],
+  [1, 3],
+  [5, 3],
+  [1, 2],
+  [5, 2],
+  [0, 1],
+  [1, 1],
+  [3, 1],
+  [4, 1],
+  [5, 1],
+  [1, 0]
+];
+const flowerPositions: number[][] = [
+  [3, 6],
+  [3, 5],
+  [2, 4],
+  [4, 4],
+  [2, 3],
+  [5, 3],
+  [1, 2],
+  [4, 2],
+  [6, 2],
+  [0, 1],
+  [2, 1],
+  [5, 1],
+  [1, 0]
+];
+const imagePositions: number[][] = [
+  [0, 6],
+  [1, 6],
+  [2, 6],
+  [3, 6],
+  [4, 6],
+  [5, 6],
+  [6, 6],
+  [0, 5],
+  [1, 5],
+  [2, 5],
+  [3, 5],
+  [4, 5],
+  [5, 5],
+  [6, 5],
+  [0, 4],
+  [1, 4],
+  [2, 4],
+  [3, 4],
+  [5, 4],
+  [6, 4],
+  [0, 3],
+  [2, 3],
+  [6, 3],
+  [0, 2],
+  [4, 2],
+  [6, 2],
+  [0, 1],
+  [6, 1],
+  [0, 0],
+  [1, 0],
+  [2, 0],
+  [3, 0],
+  [4, 0],
+  [5, 0],
+  [6, 0]
+];
+const lassoPositions: number[][] = [
+  [1, 6],
+  [2, 5],
+  [1, 4],
+  [2, 4],
+  [0, 3],
+  [3, 3],
+  [4, 3],
+  [5, 3],
+  [0, 2],
+  [6, 2],
+  [1, 1],
+  [6, 1],
+  [2, 0],
+  [3, 0],
+  [4, 0],
+  [5, 0]
+];
+const pagePositions: number[][] = [
+  [0, 6],
+  [1, 6],
+  [2, 6],
+  [3, 6],
+  [4, 6],
+  [5, 6],
+  [6, 6],
+  [0, 5],
+  [6, 5],
+  [0, 4],
+  [6, 4],
+  [0, 3],
+  [3, 3],
+  [4, 3],
+  [5, 3],
+  [6, 3],
+  [0, 2],
+  [3, 2],
+  [6, 2],
+  [0, 1],
+  [3, 1],
+  [5, 1],
+  [0, 0],
+  [1, 0],
+  [2, 0],
+  [3, 0],
+  [4, 0]
+];
+const wandPositions: number[][] = [
+  [6, 6],
+  [5, 5],
+  [0, 4],
+  [4, 4],
+  [2, 3],
+  [1, 2],
+  [3, 2],
+  [2, 1],
+  [0, 0],
+  [4, 0]
+];
+const bargraphPositions: number[][] = [
+  [0, 6],
+  [2, 6],
+  [4, 6],
+  [6, 6],
+  [2, 5],
+  [4, 5],
+  [6, 5],
+  [0, 4],
+  [2, 4],
+  [4, 4],
+  [6, 4],
+  [1, 3],
+  [6, 3],
+  [2, 2],
+  [4, 2],
+  [6, 2],
+  [3, 1],
+  [5, 1],
+  [6, 0]
+];
+const trefoilPositions: number[][] = [
+  [0, 6],
+  [1, 6],
+  [1, 5],
+  [2, 4],
+  [3, 4],
+  [5, 4],
+  [6, 4],
+  [2, 3],
+  [4, 3],
+  [3, 2],
+  [3, 1],
+  [3, 0]
+];
+const dialPositions: number[][] = [
+  [0, 4],
+  [6, 4],
+  [0, 3],
+  [3, 3],
+  [6, 3],
+  [0, 2],
+  [4, 2],
+  [6, 2],
+  [1, 1],
+  [5, 1],
+  [2, 0],
+  [3, 0]
+];
+const folderPositions: number[][] = [
+  [0, 5],
+  [1, 5],
+  [2, 5],
+  [3, 5],
+  [4, 5],
+  [5, 5],
+  [6, 5],
+  [0, 4],
+  [6, 4],
+  [0, 3],
+  [6, 3],
+  [0, 2],
+  [6, 2],
+  [0, 1],
+  [3, 1],
+  [4, 1],
+  [5, 1],
+  [6, 1],
+  [1, 0],
+  [2, 0]
+];
+const arrowPositions: number[][] = [
+  [0, 4],
+  [1, 3],
+  [3, 3],
+  [2, 2],
+  [4, 2],
+  [6, 2],
+  [5, 1],
+  [6, 1],
+  [4, 0],
+  [5, 0],
+  [6, 0]
+];
+const cloudPositions: number[][] = [
+  [0, 4],
+  [1, 4],
+  [2, 4],
+  [3, 4],
+  [4, 4],
+  [5, 4],
+  [6, 4],
+  [0, 3],
+  [6, 3],
+  [1, 2],
+  [5, 2],
+  [1, 1],
+  [2, 1],
+  [5, 1],
+  [3, 0],
+  [4, 0]
+];
+const commentPositions: number[][] = [
+  [1, 6],
+  [1, 5],
+  [2, 5],
+  [1, 4],
+  [3, 4],
+  [4, 4],
+  [5, 4],
+  [0, 3],
+  [6, 3],
+  [0, 2],
+  [6, 2],
+  [0, 1],
+  [6, 1],
+  [1, 0],
+  [2, 0],
+  [3, 0],
+  [4, 0],
+  [5, 0]
+];
+const filterPositions: number[][] = [
+  [2, 6],
+  [3, 6],
+  [2, 5],
+  [4, 5],
+  [2, 4],
+  [4, 4],
+  [2, 3],
+  [4, 3],
+  [1, 2],
+  [5, 2],
+  [0, 1],
+  [6, 1],
+  [0, 0],
+  [1, 0],
+  [2, 0],
+  [3, 0],
+  [4, 0],
+  [5, 0],
+  [6, 0]
+];
+const microphonePositions: number[][] = [
+  [1, 6],
+  [2, 6],
+  [3, 6],
+  [4, 6],
+  [2, 5],
+  [3, 5],
+  [1, 4],
+  [4, 4],
+  [0, 3],
+  [1, 3],
+  [4, 3],
+  [5, 3],
+  [1, 2],
+  [4, 2],
+  [1, 1],
+  [4, 1],
+  [2, 0],
+  [3, 0]
+];
+const pencilPositions: number[][] = [
+  [0, 6],
+  [1, 6],
+  [2, 6],
+  [0, 5],
+  [1, 5],
+  [3, 5],
+  [0, 4],
+  [4, 4],
+  [1, 3],
+  [5, 3],
+  [2, 2],
+  [4, 2],
+  [6, 2],
+  [3, 1],
+  [6, 1],
+  [4, 0],
+  [5, 0]
+];
+const potionPositions: number[][] = [
+  [1, 6],
+  [2, 6],
+  [3, 6],
+  [4, 6],
+  [5, 6],
+  [0, 5],
+  [6, 5],
+  [0, 4],
+  [2, 4],
+  [6, 4],
+  [1, 3],
+  [3, 3],
+  [5, 3],
+  [2, 2],
+  [4, 2],
+  [2, 1],
+  [4, 1],
+  [1, 0],
+  [2, 0],
+  [3, 0],
+  [4, 0],
+  [5, 0]
+];
+const sliderPositions: number[][] = [
+  [4, 5],
+  [0, 4],
+  [1, 4],
+  [2, 4],
+  [3, 4],
+  [5, 4],
+  [6, 4],
+  [4, 3],
+  [2, 2],
+  [0, 1],
+  [1, 1],
+  [3, 1],
+  [4, 1],
+  [5, 1],
+  [6, 1],
+  [2, 0]
+];
+const timelinePositions: number[][] = [
+  [3, 6],
+  [0, 5],
+  [1, 5],
+  [3, 5],
+  [4, 5],
+  [5, 5],
+  [6, 5],
+  [0, 4],
+  [1, 4],
+  [3, 4],
+  [4, 4],
+  [5, 4],
+  [6, 4],
+  [3, 3],
+  [2, 2],
+  [4, 2],
+  [1, 1],
+  [5, 1],
+  [1, 0],
+  [2, 0],
+  [3, 0],
+  [4, 0],
+  [5, 0]
+];
+const eyedropPositions: number[][] = [
+  [0, 6],
+  [1, 6],
+  [0, 5],
+  [2, 5],
+  [1, 4],
+  [3, 4],
+  [2, 3],
+  [4, 3],
+  [6, 3],
+  [3, 2],
+  [4, 2],
+  [5, 2],
+  [4, 1],
+  [5, 1],
+  [6, 1],
+  [3, 0],
+  [5, 0],
+  [6, 0]
+];
+const adobeAPositions: number[][] = [
+  [0, 6],
+  [1, 6],
+  [2, 6],
+  [3, 6],
+  [5, 6],
+  [6, 6],
+  [1, 5],
+  [2, 5],
+  [5, 5],
+  [1, 4],
+  [2, 4],
+  [4, 4],
+  [5, 4],
+  [1, 3],
+  [2, 3],
+  [4, 3],
+  [5, 3],
+  [2, 2],
+  [3, 2],
+  [4, 2],
+  [2, 1],
+  [3, 1],
+  [4, 1]
+];
+const adobeDPositions: number[][] = [
+  [2, 6],
+  [3, 6],
+  [4, 6],
+  [5, 6],
+  [1, 5],
+  [2, 5],
+  [4, 5],
+  [5, 5],
+  [1, 4],
+  [2, 4],
+  [4, 4],
+  [5, 4],
+  [1, 3],
+  [2, 3],
+  [4, 3],
+  [5, 3],
+  [2, 2],
+  [3, 2],
+  [4, 2],
+  [5, 2],
+  [4, 1],
+  [5, 1]
+];
+const adobeOPositions: number[][] = [
+  [2, 6],
+  [3, 6],
+  [4, 6],
+  [1, 5],
+  [2, 5],
+  [4, 5],
+  [5, 5],
+  [1, 4],
+  [2, 4],
+  [4, 4],
+  [5, 4],
+  [1, 3],
+  [2, 3],
+  [4, 3],
+  [5, 3],
+  [2, 2],
+  [3, 2],
+  [4, 2]
+];
+const adobeBPositions: number[][] = [
+  [1, 6],
+  [2, 6],
+  [3, 6],
+  [4, 6],
+  [1, 5],
+  [2, 5],
+  [4, 5],
+  [5, 5],
+  [1, 4],
+  [2, 4],
+  [4, 4],
+  [5, 4],
+  [1, 3],
+  [2, 3],
+  [4, 3],
+  [5, 3],
+  [1, 2],
+  [2, 2],
+  [3, 2],
+  [4, 2],
+  [1, 1],
+  [2, 1]
+];
+const adobeEPositions: number[][] = [
+  [2, 6],
+  [3, 6],
+  [4, 6],
+  [1, 5],
+  [2, 5],
+  [1, 4],
+  [2, 4],
+  [3, 4],
+  [4, 4],
+  [5, 4],
+  [1, 3],
+  [2, 3],
+  [4, 3],
+  [5, 3],
+  [2, 2],
+  [3, 2],
+  [4, 2]
+];
+
+// ─────────────────────────────────────────────────────────────
+// buildCells — turn a positions list ([col, row] coords on a 7×7 grid,
+// bottom-up/left-to-right within a row → stagger order) into a cells
+// array with per-cell timing (stagger, exitStart, fadeIn, fadeOut).
+//
+// stagger modes:
+//   'individual' — brush style. Each cell gets i * interval.
+//   'grouped' (default) — eye style. Cells stagger within a row,
+//     with 1-cell overlap between consecutive rows (cleaner reads).
+//   'by-row' — all cells in a row share one stagger value.
+// ─────────────────────────────────────────────────────────────
+export function buildCells(positions: number[][], options: BuildOptions = {}): Cell[] {
+  const {staggerInterval = 2, rowOffset = 0, stagger: staggerMode = 'grouped'} = options;
+  let staggers: number[];
+  if (staggerMode === 'by-row') {
+    const rowsBottomUp = [...new Set(positions.map(p => p[1]))].sort((a, b) => b - a);
+    const rowStagger = new Map<number, number>();
+    rowsBottomUp.forEach((r, i) => rowStagger.set(r, i * staggerInterval));
+    staggers = positions.map(([, row]) => rowStagger.get(row)!);
+  } else if (staggerMode === 'grouped') {
+    const rowGroups = new Map<number, number[]>();
+    positions.forEach(([, row], i) => {
+      if (!rowGroups.has(row)) {
+        rowGroups.set(row, []);
+      }
+      rowGroups.get(row)!.push(i);
+    });
+    const rowsBottomUp = [...rowGroups.keys()].sort((a, b) => b - a);
+    staggers = new Array(positions.length);
+    let rowStart = 0;
+    for (const row of rowsBottomUp) {
+      const indices = rowGroups.get(row)!;
+      indices.forEach((idx, j) => {
+        staggers[idx] = rowStart + j * staggerInterval;
+      });
+      rowStart += Math.max(0, indices.length - 1) * staggerInterval;
+    }
+  } else if (staggerMode === 'individual') {
+    staggers = positions.map((_, i) => i * staggerInterval);
+  } else {
+    throw new Error(
+      `Unknown stagger mode: ${staggerMode}. Use 'individual', 'grouped', or 'by-row'.`
+    );
+  }
+  const maxStagger = Math.max(1, ...staggers);
+  return positions.map(([col, row], i) => {
+    const stagger = staggers[i];
+    const exitStart = 47 + (stagger / maxStagger) * 12;
+    return {
+      cx: 120 + col * 40,
+      cy: 120 + (row + rowOffset) * 40,
+      outer: false,
+      stagger,
+      exitStart,
+      fadeIn: [stagger + 1, stagger + 4],
+      fadeOut: [exitStart, exitStart + 12]
+    };
+  });
+}
+
+// ─────────────────────────────────────────────────────────────
+// Icons — each an independently tree-shakeable `Cell[]`.
+// ─────────────────────────────────────────────────────────────
+export const brush = /* @__PURE__ */ buildCells(brushPositions, {
+  staggerInterval: 2,
+  stagger: 'grouped'
+});
+export const eye = /* @__PURE__ */ buildCells(eyePositions, {
+  staggerInterval: 2,
+  stagger: 'grouped',
+  rowOffset: 1
+});
+export const hourglass = /* @__PURE__ */ buildCells(hourglassPositions, {
+  staggerInterval: 1,
+  stagger: 'grouped'
+});
+export const mag = /* @__PURE__ */ buildCells(magPositions, {
+  staggerInterval: 2,
+  stagger: 'grouped'
+});
+export const crop = /* @__PURE__ */ buildCells(cropPositions, {
+  staggerInterval: 2,
+  stagger: 'grouped'
+});
+export const flower = /* @__PURE__ */ buildCells(flowerPositions, {
+  staggerInterval: 2,
+  stagger: 'grouped'
+});
+export const image = /* @__PURE__ */ buildCells(imagePositions, {
+  staggerInterval: 1,
+  stagger: 'grouped'
+});
+export const lasso = /* @__PURE__ */ buildCells(lassoPositions, {
+  staggerInterval: 2,
+  stagger: 'grouped'
+});
+export const page = /* @__PURE__ */ buildCells(pagePositions, {
+  staggerInterval: 1,
+  stagger: 'grouped'
+});
+export const wand = /* @__PURE__ */ buildCells(wandPositions, {
+  staggerInterval: 2,
+  stagger: 'grouped'
+});
+export const bargraph = /* @__PURE__ */ buildCells(bargraphPositions, {
+  staggerInterval: 2,
+  stagger: 'grouped'
+});
+export const trefoil = /* @__PURE__ */ buildCells(trefoilPositions, {
+  staggerInterval: 2,
+  stagger: 'grouped'
+});
+export const dial = /* @__PURE__ */ buildCells(dialPositions, {
+  staggerInterval: 2,
+  stagger: 'grouped',
+  rowOffset: 1
+});
+export const folder = /* @__PURE__ */ buildCells(folderPositions, {
+  staggerInterval: 1,
+  stagger: 'grouped',
+  rowOffset: 1
+});
+export const arrow = /* @__PURE__ */ buildCells(arrowPositions, {
+  staggerInterval: 2,
+  stagger: 'grouped',
+  rowOffset: 2
+});
+export const cloud = /* @__PURE__ */ buildCells(cloudPositions, {
+  staggerInterval: 1,
+  stagger: 'grouped',
+  rowOffset: 1
+});
+export const comment = /* @__PURE__ */ buildCells(commentPositions, {
+  staggerInterval: 1,
+  stagger: 'grouped'
+});
+export const filter = /* @__PURE__ */ buildCells(filterPositions, {
+  staggerInterval: 1,
+  stagger: 'grouped'
+});
+export const microphone = /* @__PURE__ */ buildCells(microphonePositions, {
+  staggerInterval: 1,
+  stagger: 'grouped'
+});
+export const pencil = /* @__PURE__ */ buildCells(pencilPositions, {
+  staggerInterval: 2,
+  stagger: 'grouped'
+});
+export const potion = /* @__PURE__ */ buildCells(potionPositions, {
+  staggerInterval: 1,
+  stagger: 'grouped'
+});
+export const slider = /* @__PURE__ */ buildCells(sliderPositions, {
+  staggerInterval: 1,
+  stagger: 'grouped',
+  rowOffset: 1
+});
+export const timeline = /* @__PURE__ */ buildCells(timelinePositions, {
+  staggerInterval: 1,
+  stagger: 'grouped'
+});
+export const eyedrop = /* @__PURE__ */ buildCells(eyedropPositions, {
+  staggerInterval: 1,
+  stagger: 'grouped'
+});
+export const adobeA = /* @__PURE__ */ buildCells(adobeAPositions, {
+  staggerInterval: 2,
+  stagger: 'grouped'
+});
+export const adobeD = /* @__PURE__ */ buildCells(adobeDPositions, {
+  staggerInterval: 2,
+  stagger: 'grouped'
+});
+export const adobeO = /* @__PURE__ */ buildCells(adobeOPositions, {
+  staggerInterval: 2,
+  stagger: 'grouped',
+  rowOffset: -1
+});
+export const adobeB = /* @__PURE__ */ buildCells(adobeBPositions, {
+  staggerInterval: 2,
+  stagger: 'grouped'
+});
+export const adobeE = /* @__PURE__ */ buildCells(adobeEPositions, {
+  staggerInterval: 2,
+  stagger: 'grouped',
+  rowOffset: -1
+});
+
+// ─────────────────────────────────────────────────────────────
+// Presets — sequences (`Cell[][]`) that loop through their icons.
+// Importing a preset pulls in only the icons it references.
+// ─────────────────────────────────────────────────────────────
+export const cc: Cell[][] = [
+  aiLogo,
+  brush,
+  wand,
+  crop,
+  eye,
+  hourglass,
+  adobeA,
+  adobeD,
+  adobeO,
+  adobeB,
+  adobeE,
+  eyedrop
+];
+
+export const dc: Cell[][] = [
+  aiLogo,
+  page,
+  trefoil,
+  image,
+  cloud,
+  mag,
+  adobeA,
+  adobeD,
+  adobeO,
+  adobeB,
+  adobeE,
+  pencil
+];
+
+export const exp: Cell[][] = [
+  aiLogo,
+  bargraph,
+  dial,
+  filter,
+  slider,
+  folder,
+  adobeA,
+  adobeD,
+  adobeO,
+  adobeB,
+  adobeE,
+  arrow
+];
+
+export const analyze: Cell[][] = [flower, image, brush, eye, eyedrop, wand, lasso, crop];
+
+export const mega: Cell[][] = [
+  aiLogo,
+  brush,
+  wand,
+  crop,
+  eye,
+  hourglass,
+  page,
+  trefoil,
+  image,
+  eyedrop,
+  mag,
+  bargraph,
+  dial,
+  folder,
+  flower,
+  lasso,
+  adobeA,
+  adobeD,
+  adobeO,
+  adobeB,
+  adobeE,
+  arrow,
+  cloud,
+  comment,
+  filter,
+  microphone,
+  pencil,
+  potion,
+  slider,
+  timeline
+];
diff --git a/packages/@react-spectrum/ai/src/loader/react.tsx b/packages/@react-spectrum/ai/src/loader/react.tsx
new file mode 100644
index 00000000000..b470dba07ae
--- /dev/null
+++ b/packages/@react-spectrum/ai/src/loader/react.tsx
@@ -0,0 +1,266 @@
+/*
+ * Copyright 2026 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+// React pixel-fall loader. Renders plain HTML divs and lets the browser
+// drive the animation natively via generated CSS @keyframes. Multi-icon
+// sequences (presets) play one icon per 2.4s cycle and
+// advance via a single timer — only the current icon's cells are in the
+// DOM. A single-icon loader stays a pure infinite CSS loop with no JS.
+
+import {aiLogo, type Cell} from './data';
+import * as React from 'react';
+
+// Easing control points, formatted into `cubic-bezier(...)` in the
+// generated keyframes. `fade` is intentionally linear — its control
+// points lie on y=x.
+const EASE = {
+  drop: [0.333, 0, 0.667, 1],
+  recover: [0.333, 0, 0.833, 1],
+  exit: [0.563, 0, 0.906, 0.757],
+  fade: [0.167, 0.167, 0.833, 0.833]
+};
+
+// One full cycle is 72 frames at 30fps (2.4s).
+const TOTAL_FRAMES = 72;
+const FPS = 30;
+const DURATION_MS = (TOTAL_FRAMES / FPS) * 1000;
+
+// Per-cell vertical offsets in the 24-unit space: start off
+// the top, overshoot just past the settled position, exit off the bottom.
+const Y_START = -26;
+const Y_OVERSHOOT = 1;
+const Y_EXIT = 26;
+
+// The animation lives in a fixed VIEWBOX-sized coordinate space that is scaled down to the
+// rendered `size`. Cells are absolutely positioned in this space, so all
+// the translateY offsets below are in these units — identical to the old
+// SVG viewBox math, just on HTML elements the compositor can accelerate.
+const VIEWBOX = 480;
+const CELL = VIEWBOX / 12;
+
+// ─────────────────────────────────────────────────────────────
+// CSS @keyframes generation. Each piecewise segment of the motion
+// becomes one keyframe stop whose `animation-timing-function` is the
+// matching cubic-bezier (from EASE), so the browser interpolates the
+// drop/recover/exit/fade curves natively.
+// ─────────────────────────────────────────────────────────────
+
+function pct(frame) {
+  // Frame → keyframe offset percentage, trimmed of noise.
+  return `${+((frame / TOTAL_FRAMES) * 100).toFixed(4)}%`;
+}
+
+function cb(coeffs) {
+  return `cubic-bezier(${coeffs.join(',')})`;
+}
+
+// stops: ordered [{f, decl, ease}]. `decl` is the CSS declarations for
+// that stop; `ease` (optional) is the timing function for the segment
+// starting at it. Stops sharing a frame are de-duped (first wins).
+type Stop = {f: number; decl: string; ease?: readonly number[] | null};
+
+function emitKeyframes(name: string, stops: Stop[]) {
+  let body = '';
+  let lastPct: string | null = null;
+  for (const s of stops) {
+    const p = pct(s.f);
+    if (p === lastPct) continue;
+    lastPct = p;
+    const ease = s.ease ? `animation-timing-function:${cb(s.ease)};` : '';
+    body += `${p}{${s.decl}${ease}}`;
+  }
+  return `@keyframes ${name}{${body}}`;
+}
+
+const ty = v => `transform:translateY(${v}px);`;
+const op = v => `opacity:${v};`;
+
+function cellYKeyframes(name, c) {
+  const s = c.stagger;
+  const e = c.exitStart;
+  const stops: Stop[] = [{f: 0, decl: ty(Y_START), ease: s > 0 ? null : EASE.drop}];
+  if (s > 0) {
+    stops.push({f: s, decl: ty(Y_START), ease: EASE.drop});
+  }
+  stops.push({f: s + 10, decl: ty(Y_OVERSHOOT), ease: EASE.recover});
+  stops.push({f: s + 13, decl: ty(0)}); // settled — hold until exit
+  stops.push({f: e, decl: ty(0), ease: EASE.exit});
+  stops.push({f: e + 12, decl: ty(Y_EXIT)});
+  stops.push({f: TOTAL_FRAMES, decl: ty(Y_EXIT)}); // hold offscreen until wrap
+  return emitKeyframes(name, stops);
+}
+
+function cellOpacityKeyframes(name, c) {
+  const [fi0, fi1] = c.fadeIn;
+  const [fo0, fo1] = c.fadeOut;
+  return emitKeyframes(name, [
+    {f: 0, decl: op(0)},
+    {f: fi0, decl: op(0), ease: EASE.fade},
+    {f: fi1, decl: op(1)},
+    {f: fo0, decl: op(1), ease: EASE.fade},
+    {f: fo1, decl: op(0)},
+    {f: TOTAL_FRAMES, decl: op(0)}
+  ]);
+}
+
+// Stable per-icon id, keyed by the cell-array reference (icons are
+// module-level consts, so the reference is stable). Used to namespace
+// each icon's @keyframes and to cache its generated CSS.
+let nextIconId = 0;
+const iconIds = new WeakMap<object, string>();
+function iconId(cells: object): string {
+  let id = iconIds.get(cells);
+  if (id === undefined) {
+    id = `pl${nextIconId++}`;
+    iconIds.set(cells, id);
+  }
+  return id;
+}
+
+const cssCache = new WeakMap<object, string>();
+function keyframesFor(cells: Cell[]): string {
+  let css = cssCache.get(cells);
+  if (css === undefined) {
+    const id = iconId(cells);
+    css = cells
+      .map((c, i) => cellYKeyframes(`${id}-${i}-y`, c) + cellOpacityKeyframes(`${id}-${i}-o`, c))
+      .join('');
+    cssCache.set(cells, css);
+  }
+  return css;
+}
+
+interface PixelLoaderProps {
+  size?: number;
+  playing?: boolean;
+  icon?: Cell[] | Cell[][];
+  speed?: number;
+  color?: string;
+  className?: string;
+}
+
+export function PixelLoader(props: PixelLoaderProps) {
+  const {
+    size = 21,
+    playing = true,
+    icon = aiLogo,
+    speed = 1,
+    color = 'currentColor',
+    className,
+    ...rest
+  } = props;
+
+  // Normalize to a sequence.
+  const sequence = React.useMemo(
+    () => (Array.isArray(icon[0]) ? icon : [icon]) as Cell[][],
+    [icon]
+  );
+  const isSequence = sequence.length > 1;
+  const duration = DURATION_MS / (speed || 1);
+
+  // `tick` increments once per cycle; the current icon is `tick % len`.
+  const [tick, setTick] = React.useState(0);
+
+  // Restart from the first icon whenever the sequence changes.
+  let [lastSequence, setLastSequence] = React.useState(sequence);
+  if (lastSequence !== sequence) {
+    setLastSequence(sequence);
+    setTick(0);
+  }
+
+  // Advance the sequence one icon per cycle while playing. Single-icon
+  // loaders never start a timer — they're a pure infinite CSS loop.
+  React.useEffect(() => {
+    if (!playing || !isSequence) {
+      return undefined;
+    }
+    const id = setInterval(() => setTick(t => t + 1), duration);
+    return () => clearInterval(id);
+  }, [playing, isSequence, duration, sequence]);
+
+  const cells = sequence[isSequence ? tick % sequence.length : 0];
+  const animId = iconId(cells);
+  const css = keyframesFor(cells);
+  // Sequences play each icon once and hold its faded-out final frame
+  // (`forwards`) until the next remount; a single icon loops forever.
+  const iteration = isSequence ? '1 forwards' : 'infinite';
+
+  const cellSize = size / 7;
+  const offset = (size - cellSize * 7) / 2;
+  const matrix = Array.from({length: 7}, () => Array.from({length: 7}, () => false));
+  for (let c of cells) {
+    let x = (c.cx - 120) / CELL;
+    let y = (c.cy - 120) / CELL;
+    matrix[y][x] = true;
+  }
+
+  const isHighDPI = window.devicePixelRatio >= 2;
+
+  return (
+    <div
+      aria-hidden="true"
+      className={className}
+      style={{
+        display: 'inline-block',
+        width: size,
+        height: size,
+        lineHeight: 0,
+        overflow: 'clip',
+        position: 'relative'
+      }}
+      {...rest}>
+      {playing ? <style>{css}</style> : null}
+      {cells.map((c, i) => {
+        let x = (c.cx - 120) / CELL;
+        let y = (c.cy - 120) / CELL;
+
+        // Convex-corner rounding: round a corner only when both orthogonal neighbors toward it are absent.
+        let left = matrix[y][x - 1];
+        let right = matrix[y][x + 1];
+        let top = matrix[y - 1]?.[x];
+        let bottom = matrix[y + 1]?.[x];
+        let corner = (a, b) => (!a && !b ? '1px' : '0px');
+
+        // Adjust position for outer cells on high DPI displays.
+        let xPx = x * cellSize + offset;
+        let yPx = y * cellSize + offset;
+        if (isHighDPI && c.outer && xPx > size / 2) {
+          xPx -= 0.5;
+        }
+        if (isHighDPI && c.outer && yPx > size / 2) {
+          yPx -= 0.5;
+        }
+
+        return (
+          <div
+            key={i}
+            style={{
+              position: 'absolute',
+              left: xPx,
+              top: yPx,
+              width: cellSize + (isHighDPI && c.outer ? 0.5 : 0),
+              height: cellSize + (isHighDPI && c.outer ? 0.5 : 0),
+              borderRadius: `${corner(left, top)} ${corner(right, top)} ${corner(right, bottom)} ${corner(left, bottom)}`,
+              backgroundColor: color,
+              ...(playing && {
+                animation:
+                  `${animId}-${i}-y ${duration}ms linear ${iteration}, ` +
+                  `${animId}-${i}-o ${duration}ms linear ${iteration}`,
+                willChange: 'transform, opacity'
+              })
+            }}
+          />
+        );
+      })}
+    </div>
+  );
+}
diff --git a/packages/@react-spectrum/ai/src/tokens.macro.ts b/packages/@react-spectrum/ai/src/tokens.macro.ts
new file mode 100644
index 00000000000..43fe81fa6f3
--- /dev/null
+++ b/packages/@react-spectrum/ai/src/tokens.macro.ts
@@ -0,0 +1,168 @@
+import {color} from '@react-spectrum/s2/style';
+import tokens from './tokens.merged.json';
+
+// Colors below this OKLCH chroma are treated as neutral (white/black/gray) and
+// left untouched — rotating their hue would tint a surface that's meant to be gray.
+const NEUTRAL_CHROMA = 0.015;
+
+function srgbToLinear(c: number) {
+  c /= 255;
+  return c <= 0.04045 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4);
+}
+
+function rgbToOklch(r: number, g: number, b: number): [number, number, number] {
+  let lr = srgbToLinear(r),
+    lg = srgbToLinear(g),
+    lb = srgbToLinear(b);
+  let l = 0.4122214708 * lr + 0.5363325363 * lg + 0.0514459929 * lb;
+  let m = 0.2119034982 * lr + 0.6806995451 * lg + 0.1073969566 * lb;
+  let s = 0.0883024619 * lr + 0.2817188376 * lg + 0.6299787005 * lb;
+  let l_ = Math.cbrt(l),
+    m_ = Math.cbrt(m),
+    s_ = Math.cbrt(s);
+  let L = 0.2104542553 * l_ + 0.793617785 * m_ - 0.0040720468 * s_;
+  let A = 1.9779984951 * l_ - 2.428592205 * m_ + 0.4505937099 * s_;
+  let B = 0.0259040371 * l_ + 0.7827717662 * m_ - 0.808675766 * s_;
+  let C = Math.sqrt(A * A + B * B);
+  let H = (Math.atan2(B, A) * 180) / Math.PI;
+  if (H < 0) {
+    H += 360;
+  }
+  return [L, C, H];
+}
+
+function parseRgb(value: string): [number, number, number] {
+  let match = value.match(/rgba?\(([^)]+)\)/);
+  if (!match) {
+    throw new Error(`Expected an rgb color, got: ${value}`);
+  }
+  let [r, g, b] = match[1].split(',').map(x => parseFloat(x.trim()));
+  return [r, g, b];
+}
+
+// The brand anchor: the fuchsia primary that the rest of the palette fans out
+// from, taken from the most saturated brand-colored token (the outer border hue).
+// Every hue-bearing token stores its hue as an offset from this anchor, so the
+// whole palette can be rotated to a new brand color by overriding the --brand
+// custom property.
+const BRAND_REF = rgbToOklch(
+  ...parseRgb(tokens['outer-border'].gradient['ob-hue']['stop-1'].light)
+);
+const BRAND_REF_HUE = BRAND_REF[2];
+
+// The default --brand color, derived from the same anchor token so the default
+// theme renders identically to the source design tokens.
+export function defaultBrand() {
+  let [L, C, H] = BRAND_REF;
+  return `oklch(${Math.round(L * 1e4) / 1e4} ${Math.round(C * 1e4) / 1e4} ${Math.round(H * 10) / 10})`;
+}
+
+// Builds a CSS relative color derived from --brand: it keeps the given lightness
+// and chroma but takes the hue from the brand color (offset by hueOffset degrees).
+// This preserves each token's role while letting the brand drive the overall hue.
+export function brand(l: number, c: number, hueOffset: number, alpha = 1) {
+  let hue = hueOffset === 0 ? 'h' : `calc(h + ${hueOffset})`;
+  let a = alpha < 1 ? ` / ${alpha}` : '';
+  return `oklch(from var(--brand) ${l} ${c} ${hue}${a})`;
+}
+
+// Converts a single token color value to a brand-relative color, unless it's a
+// neutral (kept as-is) or not a color at all (e.g. an opacity number, kept as-is).
+function convertColor(value: any) {
+  if (typeof value !== 'string') {
+    return value;
+  }
+  let match = value.match(/rgba?\(([^)]+)\)/);
+  if (!match) {
+    return value;
+  }
+  let parts = match[1].split(',').map(x => parseFloat(x.trim()));
+  let [r, g, b] = parts;
+  let alpha = parts[3] ?? 1;
+  let [L, C, H] = rgbToOklch(r, g, b);
+  if (C < NEUTRAL_CHROMA) {
+    return value;
+  }
+  let offset = Math.round((H - BRAND_REF_HUE) * 10) / 10;
+  return brand(Math.round(L * 1e4) / 1e4, Math.round(C * 1e4) / 1e4, offset, alpha);
+}
+
+export function token(name: string) {
+  let token = name.split('.').reduce((acc, curr) => {
+    let res = acc[curr];
+    if (res == null) {
+      throw new Error(`Token ${name} not found`);
+    }
+    return res;
+  }, tokens) as any;
+  if (token?.light && token.dark) {
+    return `light-dark(${convertColor(token.light)}, ${convertColor(token.dark)})`;
+  } else if (token?.light) {
+    return convertColor(token.light);
+  } else if (token?.dark) {
+    return convertColor(token.dark);
+  } else {
+    return convertColor(token.value ?? token);
+  }
+}
+
+export function mix(gray: string, stop: string, opacity: string) {
+  let stopColor = token(stop);
+  let stopOpacity = token(opacity);
+  return `color-mix(in srgb, ${gray}, ${stopColor} ${stopOpacity}%)`;
+}
+
+export function stop(gray: string, stop: string, opacity: string) {
+  return `light-dark(${mix('white', stop + '.light', opacity + '.light')}, ${mix(color('gray-75'), stop + '.dark', opacity + '.dark')})`;
+}
+
+export function defineProperties(this: any, css: string) {
+  if (this && typeof this.addAsset === 'function') {
+    this.addAsset({
+      type: 'css',
+      content: css
+    });
+  }
+}
+
+export function stops(generating: string, state: string, variant: string) {
+  return `
+    --con-hue-opacity: ${token(`container.opacity.con-hue.${generating}.${state}-${variant}`)}%;
+    --bg-stop-1: ${stop('container.bg.default', `container.gradient.con-bg.${generating}.stop-1`, `container.opacity.con-bg.${generating}.${state}-${variant}`)};
+    --bg-stop-2: ${stop('container.bg.default', `container.gradient.con-bg.${generating}.stop-2`, `container.opacity.con-bg.${generating}.${state}-${variant}`)};
+    --bg-stop-3: ${stop('container.bg.default', `container.gradient.con-bg.${generating}.stop-3`, `container.opacity.con-bg.${generating}.${state}-${variant}`)};
+    --bg-stop-4: ${stop('container.bg.default', `container.gradient.con-bg.${generating}.stop-4`, `container.opacity.con-bg.${generating}.${state}-${variant}`)};
+  `;
+}
+
+export function outerBorderStops(variant: string) {
+  let border = token('outer-border.gradient.ob-border.stop-1');
+  return `
+    --outer-border-hue: light-dark(
+      ${outerBorderStop(2, variant, 'light', 1)},
+      ${outerBorderStop(2, variant, 'dark', 1)}
+    );
+    --bg-stop-1: light-dark(
+      ${outerBorderStop(1, variant, 'light')},
+      ${variant === 'prominent' ? outerBorderStop(1, variant, 'dark') : border}
+    );
+    --bg-stop-2: light-dark(
+      ${outerBorderStop(2, variant, 'light')},
+      ${variant === 'prominent' ? outerBorderStop(2, variant, 'dark') : border}
+    );
+    --bg-stop-3: light-dark(
+      ${outerBorderStop(3, variant, 'light')},
+      ${variant === 'prominent' ? outerBorderStop(3, variant, 'dark') : border}
+    );
+  `;
+}
+
+function outerBorderStop(stop: number, variant: string, colorScheme: string, div = 10) {
+  let opacity = token(
+    `outer-border.opacity.ob-hue-${variant}.${variant === 'prominent' ? 'value' : colorScheme}`
+  );
+  if (colorScheme === 'light') {
+    opacity = opacity / div;
+  }
+  return `rgb(from ${token(`outer-border.gradient.ob-hue.stop-${stop}.${colorScheme}`)} r g b / ${opacity}%)`;
+}
diff --git a/packages/@react-spectrum/ai/src/tokens.merged.json b/packages/@react-spectrum/ai/src/tokens.merged.json
new file mode 100644
index 00000000000..0b4c61302a0
--- /dev/null
+++ b/packages/@react-spectrum/ai/src/tokens.merged.json
@@ -0,0 +1,441 @@
+{
+  "send-button": {
+    "bg": {
+      "default": {
+        "light": "rgba(0, 0, 0, 0.85)",
+        "dark": "rgba(255, 255, 255, 0.85)"
+      },
+      "disabled": {
+        "light": "rgba(0, 0, 0, 0.05)",
+        "dark": "rgba(255, 255, 255, 0.05)"
+      }
+    },
+    "icon": {
+      "default": {
+        "light": "rgba(255, 255, 255, 1)",
+        "dark": "rgba(0, 0, 0, 1)"
+      },
+      "disabled": {
+        "light": "rgba(0, 0, 0, 0.15)",
+        "dark": "rgba(255, 255, 255, 0.15)"
+      }
+    }
+  },
+  "content": {
+    "default": {
+      "light": "rgba(0, 0, 0, 0.56)",
+      "dark": "rgba(255, 255, 255, 0.51)"
+    },
+    "focus": {
+      "light": "rgba(41, 41, 41, 1)",
+      "dark": "rgba(41, 41, 41, 1)"
+    }
+  },
+  "container": {
+    "bg": {
+      "default": {
+        "light": "rgba(255, 255, 255, 0.85)",
+        "dark": "rgba(255, 255, 255, 0.05)"
+      },
+      "focus": {
+        "light": "rgba(255, 255, 255, 0.85)",
+        "dark": "rgba(255, 255, 255, 0.02)"
+      }
+    },
+    "opacity": {
+      "con-overlay": {
+        "idle": {
+          "default-balanced": {
+            "value": 40
+          },
+          "default-prominent": {
+            "value": 60
+          },
+          "default-subtle": {
+            "value": 40
+          },
+          "hover-balanced": {
+            "light": 50,
+            "dark": 40
+          },
+          "hover-prominent": {
+            "light": 75,
+            "dark": 60
+          },
+          "hover-subtle": {
+            "light": 50,
+            "dark": 40
+          }
+        },
+        "generating": {
+          "default-balanced": {
+            "light": 50,
+            "dark": 40
+          },
+          "default-subtle": {
+            "light": 60,
+            "dark": 40
+          },
+          "default-prominent": {
+            "light": 50,
+            "dark": 40
+          },
+          "focus": {
+            "light": 40,
+            "dark": 50
+          },
+          "inner-shadow": {
+            "value": 100
+          }
+        }
+      },
+      "con-hue": {
+        "generating": {
+          "default-balanced": {
+            "value": 50
+          },
+          "default-prominent": {
+            "value": 75
+          },
+          "default-subtle": {
+            "value": 20
+          },
+          "hover-balanced": {
+            "value": 100
+          },
+          "hover-prominent": {
+            "value": 100
+          },
+          "hover-subtle": {
+            "value": 75
+          }
+        },
+        "idle": {
+          "default-balanced": {
+            "value": 12.5
+          },
+          "default-prominent": {
+            "value": 75
+          },
+          "default-subtle": {
+            "value": 40
+          },
+          "hover-balanced": {
+            "value": 20
+          },
+          "hover-prominent": {
+            "value": 100
+          },
+          "hover-subtle": {
+            "value": 12.5
+          }
+        }
+      },
+      "gradient-bg": {
+        "generating": {
+          "default-balanced": {
+            "value": 30
+          },
+          "default-prominent": {
+            "value": 50
+          },
+          "default-subtle": {
+            "value": 30
+          },
+          "hover-balanced": {
+            "light": 40,
+            "dark": 50
+          },
+          "hover-prominent": {
+            "value": 75
+          },
+          "hover-subtle": {
+            "value": 40
+          }
+        },
+        "idle": {
+          "default-balanced": {
+            "value": 30
+          },
+          "default-prominent": {
+            "value": 40
+          },
+          "default-subtle": {
+            "value": 20
+          },
+          "hover-balanced": {
+            "light": 30,
+            "dark": 40
+          },
+          "hover-subtle": {
+            "value": 30
+          },
+          "hover-prominent": {
+            "value": 50
+          }
+        }
+      },
+      "con-bg": {
+        "generating": {
+          "default-balanced": {
+            "light": 50,
+            "dark": 50
+          },
+          "default-subtle": {
+            "light": 20,
+            "dark": 20
+          },
+          "default-prominent": {
+            "light": 100,
+            "dark": 75
+          },
+          "hover-balanced": {
+            "light": 75,
+            "dark": 75
+          },
+          "hover-subtle": {
+            "light": 20,
+            "dark": 20
+          },
+          "hover-prominent": {
+            "light": 100,
+            "dark": 100
+          }
+        },
+        "idle": {
+          "default-balanced": {
+            "light": 12.5,
+            "dark": 20
+          },
+          "default-prominent": {
+            "light": 30,
+            "dark": 20
+          },
+          "default-subtle": {
+            "light": 12.5,
+            "dark": 20
+          },
+          "hover-balanced": {
+            "light": 30,
+            "dark": 40
+          },
+          "hover-prominent": {
+            "light": 30,
+            "dark": 40
+          },
+          "hover-subtle": {
+            "light": 30,
+            "dark": 40
+          }
+        }
+      },
+      "con-bg-inner-shadow": {
+        "generating": {
+          "default": {
+            "value": 50
+          }
+        },
+        "idle": {
+          "default": {
+            "value": 50
+          }
+        }
+      }
+    },
+    "border": {
+      "default": {
+        "light": "rgba(236, 105, 255, 0.1)",
+        "dark": "rgba(255, 255, 255, 0.05)"
+      },
+      "focus": {
+        "light": "rgba(0, 0, 0, 0.05)",
+        "dark": "rgba(255, 255, 255, 0.05)"
+      }
+    },
+    "gradient": {
+      "con-bg": {
+        "idle": {
+          "stop-1": {
+            "light": "rgb(235, 238, 255)",
+            "dark": "rgb(0, 0, 0)"
+          },
+          "stop-2": {
+            "light": "rgb(250, 211, 255)",
+            "dark": "rgb(30, 0, 93)"
+          },
+          "stop-3": {
+            "light": "rgb(255, 235, 232)",
+            "dark": "rgb(50, 0, 61)"
+          },
+          "stop-4": {
+            "light": "rgb(255, 236, 207)",
+            "dark": "rgb(54, 10, 3)"
+          }
+        },
+        "generating": {
+          "stop-1": {
+            "light": "rgb(216, 222, 255)",
+            "dark": "rgb(0, 0, 0)"
+          },
+          "stop-2": {
+            "light": "rgb(253, 233, 255)",
+            "dark": "rgb(35, 0, 110)"
+          },
+          "stop-3": {
+            "light": "rgb(255, 236, 207)",
+            "dark": "rgb(68, 13, 5)"
+          },
+          "stop-4": {
+            "light": "rgb(247, 181, 255)",
+            "dark": "rgb(102, 9, 120)"
+          }
+        }
+      },
+      "con-hue": {
+        "generating": {
+          "stop-1": {
+            "light": "rgb(253, 233, 255)",
+            "dark": "rgb(64, 0, 122)"
+          },
+          "stop-2": {
+            "light": "rgb(254, 246, 255)",
+            "dark": "rgb(127, 23, 146)"
+          },
+          "stop-3": {
+            "light": "rgb(255, 232, 240)",
+            "dark": "rgb(181, 19, 76)"
+          }
+        }
+      }
+    },
+    "color": {
+      "inner-shadow": {
+        "generating": {
+          "light": "rgb(254, 246, 255)",
+          "dark": "rgb(127, 23, 146)"
+        }
+      }
+    }
+  },
+  "outer-border": {
+    "gradient": {
+      "ob-spread-shadow": {
+        "generating": {
+          "stop-1": {
+            "light": "rgb(253, 233, 255)",
+            "dark": "rgb(30, 0, 93)"
+          },
+          "stop-2": {
+            "light": "rgb(250, 211, 255)",
+            "dark": "rgb(61, 0, 74)"
+          },
+          "stop-3": {
+            "light": "rgb(255, 185, 208)",
+            "dark": "rgb(74, 0, 27)"
+          }
+        }
+      },
+      "ob-border": {
+        "stop-1": {
+          "light": "rgb(255, 255, 255)",
+          "dark": "rgba(255, 255, 255, 0.02)"
+        },
+        "stop-2": {
+          "light": "rgba(255, 255, 255, 0.51)",
+          "dark": "rgba(255, 255, 255, 0.03)"
+        },
+        "focus": {
+          "stop-1": {
+            "light": "rgba(255, 255, 255, 0.51)",
+            "dark": "rgba(133, 133, 133, 0.04)"
+          },
+          "stop-2": {
+            "light": "rgba(255, 255, 255, 0.51)",
+            "dark": "rgba(133, 133, 133, 0.05)"
+          }
+        }
+      },
+      "ob-hue": {
+        "stop-1": {
+          "light": "rgba(236, 105, 255, 0.6)",
+          "dark": "rgb(50, 0, 61)"
+        },
+        "stop-2": {
+          "light": "rgba(255, 81, 61, 0.5)",
+          "dark": "rgb(30, 0, 93)"
+        },
+        "stop-3": {
+          "light": "rgba(255, 162, 19, 0.4)",
+          "dark": "rgb(30, 0, 93)"
+        }
+      }
+    },
+    "color": {
+      "drop-shadow": {
+        "ob-border": {
+          "default": {
+            "light": "rgba(236, 105, 255, 0.1)",
+            "dark": "rgba(213, 73, 235, 0)"
+          },
+          "subtle": {
+            "light": "rgba(0, 0, 0, 0.05)",
+            "dark": "rgba(0, 0, 0, 0.1)"
+          },
+          "focus": {
+            "light": "rgba(0, 0, 0, 0.05)",
+            "dark": "rgba(0, 0, 0, 0.03)"
+          }
+        }
+      }
+    },
+    "opacity": {
+      "spread-bg-balanced": {
+        "value": 50
+      },
+      "spread-bg-prominent": {
+        "value": 50
+      },
+      "spread-bg-subtle": {
+        "value": 30
+      },
+      "spread-gradient": {
+        "value": 50
+      },
+      "border-gradient": {
+        "value": 100
+      },
+      "border-generating": {
+        "value": 30
+      },
+      "ob-hue-balanced": {
+        "light": 30,
+        "dark": 0
+      },
+      "ob-hue-subtle": {
+        "light": 20,
+        "dark": 0
+      },
+      "ob-hue-prominent": {
+        "value": 40
+      }
+    }
+  },
+  "outline-glow": {
+    "gradient": {
+      "generating": {
+        "stop-1": {
+          "light": "rgb(254, 246, 255)",
+          "dark": "rgb(50, 0, 61)"
+        },
+        "stop-2": {
+          "light": "rgb(253, 233, 255)",
+          "dark": "rgb(61, 0, 74)"
+        },
+        "stop-3": {
+          "light": "rgb(247, 181, 255)",
+          "dark": "rgb(102, 9, 120)"
+        }
+      }
+    }
+  }
+}
diff --git a/packages/@react-spectrum/ai/stories/PromptField.stories.tsx b/packages/@react-spectrum/ai/stories/PromptField.stories.tsx
index 4c838a12e1f..f5f7ea02b66 100644
--- a/packages/@react-spectrum/ai/stories/PromptField.stories.tsx
+++ b/packages/@react-spectrum/ai/stories/PromptField.stories.tsx
@@ -34,7 +34,9 @@ import {
   SubmenuTrigger,
   Text
 } from '@react-spectrum/s2/Menu';
+import {Content} from '@react-spectrum/s2/Content';
 import Data from '@react-spectrum/s2/icons/Data';
+import * as data from '../src/loader/data';
 import {iconStyle, style} from '@react-spectrum/s2/style' with {type: 'macro'};
 import {Image} from '@react-spectrum/s2/Image';
 import LinkIcon from '@react-spectrum/s2/icons/Link';
@@ -55,13 +57,41 @@ const meta: Meta<typeof PromptField> = {
   tags: ['autodocs'],
   argTypes: {
     ...categorizeArgTypes('Events', events),
-    children: {table: {disable: true}}
+    children: {table: {disable: true}},
+    brand: {
+      control: 'color',
+      description:
+        'Sets the --brand custom property to retheme the PromptField. Only the hue is used; lightness and chroma come from the design tokens.',
+      table: {category: 'Theming'}
+    },
+    pixelLoader: {
+      control: 'select',
+      options: Object.keys(data),
+      description: 'Sets the icon to use for the pixel loader.',
+      table: {category: 'Theming'}
+    },
+    attachmentVariant: {
+      control: 'radio',
+      options: ['thumbnail', 'card']
+    }
+  },
+  args: {
+    brand: 'rgb(236, 105, 255)',
+    pixelLoader: 'aiLogo',
+    attachmentVariant: 'thumbnail',
+    ...getActionArgs(events)
   },
-  args: {...getActionArgs(events)},
   title: 'AI/PromptField',
   decorators: [
-    Story => (
-      <div style={{width: '800px'}}>
+    (Story, {args}) => (
+      <div
+        style={{
+          width: '800px',
+          maxWidth: '90vw',
+          margin: '0 auto',
+          // @ts-ignore
+          '--brand': args.brand
+        }}>
         <Story />
       </div>
     )
@@ -170,7 +200,7 @@ interface UploadState {
   progress?: number;
 }
 
-export const Everything = () => {
+export const Everything = args => {
   let [attachmentState, setAttachmentState] = useState<Map<string, UploadState>>(new Map());
 
   let mockUpload = async (id: string) => {
@@ -194,6 +224,7 @@ export const Everything = () => {
 
   return (
     <PromptField
+      {...args}
       acceptedAttachmentTypes={['image/*']}
       onAddAttachments={attachments => {
         setAttachmentState(prev => {
@@ -214,7 +245,7 @@ export const Everything = () => {
           return newState;
         });
       }}>
-      <PromptFieldAttachmentList dependencies={[attachmentState]}>
+      <PromptFieldAttachmentList dependencies={[attachmentState, args.attachmentVariant]}>
         {attachment => {
           let state = attachmentState.get(attachment.id);
           return (
@@ -222,11 +253,20 @@ export const Everything = () => {
               uploadProgress={state?.status === 'uploading' ? state?.progress : undefined}>
               {/* TODO: what about non-image attachments? */}
               {attachment.image && <Image src={attachment.image} slot="thumbnail" />}
+              {args.attachmentVariant === 'card' && (
+                <Content>
+                  <Text slot="title">{attachment.file.name}</Text>
+                  <Text slot="description">{attachment.file.type}</Text>
+                </Content>
+              )}
             </Attachment>
           );
         }}
       </PromptFieldAttachmentList>
-      <PromptTokenField completionTrigger={/(?<=^|\s)[@/]/} renderCompletions={renderCompletions}>
+      <PromptTokenField
+        completionTrigger={/(?<=^|\s)[@/]/}
+        renderCompletions={renderCompletions}
+        pixelLoader={data[args.pixelLoader]}>
         {segment => (
           <PromptToken>
             {icons[segment.value?.type]}