diff --git a/2nd-gen/packages/swc/patterns/conversational-ai/conversation-thread/conversation-thread.css b/2nd-gen/packages/swc/patterns/conversational-ai/conversation-thread/conversation-thread.css
index b0d765d8377..118aaea940c 100644
--- a/2nd-gen/packages/swc/patterns/conversational-ai/conversation-thread/conversation-thread.css
+++ b/2nd-gen/packages/swc/patterns/conversational-ai/conversation-thread/conversation-thread.css
@@ -25,6 +25,6 @@
 .swc-ConversationThread {
   display: flex;
   flex-direction: column;
-  gap: var(--swc-conversation-thread-gap, 16px);
+  gap: var(--swc-conversation-thread-gap, token("spacing-100"));
   inline-size: 100%;
 }
diff --git a/2nd-gen/packages/swc/patterns/conversational-ai/conversation-thread/stories/conversation-thread.stories.ts b/2nd-gen/packages/swc/patterns/conversational-ai/conversation-thread/stories/conversation-thread.stories.ts
index fc51d6ff3fb..588a1e7c84f 100644
--- a/2nd-gen/packages/swc/patterns/conversational-ai/conversation-thread/stories/conversation-thread.stories.ts
+++ b/2nd-gen/packages/swc/patterns/conversational-ai/conversation-thread/stories/conversation-thread.stories.ts
@@ -28,8 +28,6 @@ import '../../upload-artifact/index.js';
 
 import { uniqueId } from '../../../../utils/id.js';
 
-import '../../system-prose-demo.css';
-
 // ────────────────
 //    METADATA
 // ────────────────
@@ -70,7 +68,7 @@ const threadExampleSource = `<swc-conversation-thread style="max-inline-size: 72
   <swc-conversation-turn type="system">
     <swc-system-message>
       <swc-response-status slot="status">I interpreted your request as an executive narrative task and prioritized a concise, audience-ready structure.</swc-response-status>
-      <div class="swc-conversationalAi-systemProse swc-Typography--prose">
+      <div class="swc-Typography--prose">
         <h3>Big idea/core narrative: The warmth of welcome</h3>
         <p>Hospitality begins the moment our customers set foot off their plane.</p>
       </div>
@@ -100,7 +98,7 @@ const renderThread = () => html`
           I interpreted your request as an executive narrative task and
           prioritized a concise, audience-ready structure.
         </swc-response-status>
-        <div class="swc-conversationalAi-systemProse swc-Typography--prose">
+        <div class="swc-Typography--prose">
           <h3>Big idea/core narrative: The warmth of welcome</h3>
           <p>
             Hospitality begins the moment our customers set foot off their
@@ -430,12 +428,7 @@ class ConversationFullPatternDemo extends LitElement {
               : html`
                   <swc-conversation-turn type="user">
                     <swc-user-message type="card">
-                      <div
-                        slot="thumbnail"
-                        role="img"
-                        aria-label="File"
-                        style="inline-size:32px;block-size:32px;border-radius:3px;background:var(--swc-gray-200);flex-shrink:0;"
-                      ></div>
+                      <div slot="thumbnail" role="img" aria-label="File"></div>
                       <span slot="title">${artifact.title}</span>
                       <span slot="subtitle">${artifact.subtitle}</span>
                     </swc-user-message>
@@ -475,9 +468,7 @@ class ConversationFullPatternDemo extends LitElement {
             ${turn.loading
               ? ''
               : html`
-                  <div
-                    class="swc-conversationalAi-systemProse swc-Typography--prose"
-                  >
+                  <div class="swc-Typography--prose">
                     <p>${turn.text}</p>
                   </div>
                 `}
@@ -547,7 +538,6 @@ class ConversationFullPatternDemo extends LitElement {
                   slot="thumbnail"
                   role="img"
                   aria-label="File thumbnail"
-                  style="inline-size:40px;block-size:40px;background:var(--swc-gray-200);border-radius:4px;"
                 ></div>
               `}
           ${artifact.thumbnailUrl
@@ -563,7 +553,7 @@ class ConversationFullPatternDemo extends LitElement {
 
   protected override render() {
     this.style.cssText =
-      'display:flex;flex-direction:column;block-size:100vh;max-block-size:100vh;overflow:hidden;box-sizing:border-box;';
+      'display:flex;flex-direction:column;block-size:90vb;max-block-size:100vh;overflow:hidden;box-sizing:border-box;';
 
     return html`
       <style>
@@ -610,9 +600,7 @@ class ConversationFullPatternDemo extends LitElement {
         @swc-message-sources-toggle=${this.handleSourcesToggle}
       >
         <div class="swc-ConversationFullPatternDemo-scroll">
-          <swc-conversation-thread
-            style="--swc-conversation-thread-gap:24px;padding:4px;"
-          >
+          <swc-conversation-thread style="padding:4px;">
             ${this.renderTurns()}
           </swc-conversation-thread>
         </div>
@@ -648,14 +636,14 @@ if (!customElements.get('swc-conversation-full-pattern-demo')) {
 }
 
 const fullPatternSource = `<div style="max-width:800px; margin:auto; padding:24px; display:flex; flex-direction:column; gap:16px;">
-  <swc-conversation-thread style="--swc-conversation-thread-gap:24px;">
+  <swc-conversation-thread>
     <swc-conversation-turn type="user">
       <swc-user-message>Can you help me create a 45-minute presentation?</swc-user-message>
     </swc-conversation-turn>
     <swc-conversation-turn type="system">
       <swc-system-message>
         <swc-response-status slot="status">I interpreted your request as an executive narrative task and prioritized a concise, audience-ready structure.</swc-response-status>
-        <div class="swc-conversationalAi-systemProse swc-Typography--prose">
+        <div class="swc-Typography--prose">
           <p>Great direction. I suggest a 12-slide structure...</p>
         </div>
         <swc-message-feedback slot="feedback"></swc-message-feedback>
@@ -672,7 +660,6 @@ const fullPatternSource = `<div style="max-width:800px; margin:auto; padding:24p
         slot="thumbnail"
         role="img"
         aria-label="File thumbnail"
-        style="background:var(--swc-gray-200);"
       ></div>
       <span slot="title">Hilton commercial assets</span>
       <span slot="subtitle">2026</span>
diff --git a/2nd-gen/packages/swc/patterns/conversational-ai/conversation-turn/conversation-turn.css b/2nd-gen/packages/swc/patterns/conversational-ai/conversation-turn/conversation-turn.css
index f8ae948fc0c..fbf576d6bda 100644
--- a/2nd-gen/packages/swc/patterns/conversational-ai/conversation-turn/conversation-turn.css
+++ b/2nd-gen/packages/swc/patterns/conversational-ai/conversation-turn/conversation-turn.css
@@ -13,8 +13,6 @@
 :host {
   display: block;
   inline-size: 100%;
-  container-name: swc-conversation-turn;
-  container-type: inline-size;
 }
 
 :host(:focus-visible) {
diff --git a/2nd-gen/packages/swc/patterns/conversational-ai/conversation-turn/stories/conversation-turn.stories.ts b/2nd-gen/packages/swc/patterns/conversational-ai/conversation-turn/stories/conversation-turn.stories.ts
index 7d94eb26b89..4263fa951e2 100644
--- a/2nd-gen/packages/swc/patterns/conversational-ai/conversation-turn/stories/conversation-turn.stories.ts
+++ b/2nd-gen/packages/swc/patterns/conversational-ai/conversation-turn/stories/conversation-turn.stories.ts
@@ -19,8 +19,6 @@ import '../../user-message/index.js';
 import '../../response-status/index.js';
 import '../../message-feedback/index.js';
 
-import '../../system-prose-demo.css';
-
 // ────────────────
 //    METADATA
 // ────────────────
@@ -64,7 +62,7 @@ export const Playground: Story = {
             I mapped your request to a concise executive narrative and grouped
             the response by audience and channel themes.
           </swc-response-status>
-          <div class="swc-conversationalAi-systemProse swc-Typography--prose">
+          <div class="swc-Typography--prose">
             <p>System reply body goes here.</p>
           </div>
           <swc-message-feedback slot="feedback"></swc-message-feedback>
@@ -95,7 +93,7 @@ export const Overview: Story = {
             I prioritized campaign outcomes, segmented messaging pillars, and
             next-step actions to keep the summary presentation-ready.
           </swc-response-status>
-          <div class="swc-conversationalAi-systemProse swc-Typography--prose">
+          <div class="swc-Typography--prose">
             <p>
               Here is a concise summary based on the files you shared. I grouped
               themes by audience and channel.
@@ -150,7 +148,7 @@ export const Accessibility: Story = {
         accessible-label="Mensaje del sistema"
       >
         <swc-system-message>
-          <div class="swc-conversationalAi-systemProse swc-Typography--prose">
+          <div class="swc-Typography--prose">
             <p>Example system reply.</p>
           </div>
         </swc-system-message>
diff --git a/2nd-gen/packages/swc/patterns/conversational-ai/message-feedback/message-feedback.css b/2nd-gen/packages/swc/patterns/conversational-ai/message-feedback/message-feedback.css
index 299f9d44b02..7a6d1315f99 100644
--- a/2nd-gen/packages/swc/patterns/conversational-ai/message-feedback/message-feedback.css
+++ b/2nd-gen/packages/swc/patterns/conversational-ai/message-feedback/message-feedback.css
@@ -35,7 +35,7 @@
   padding: 0;
   color: token("neutral-content-color-default");
   background: transparent;
-  border: none;
+  border: 1px solid transparent;
   border-radius: var(--swc-message-feedback-button-border-radius, token("corner-radius-300"));
   cursor: pointer;
   transition:
@@ -62,3 +62,15 @@
 .swc-MessageFeedback-button[aria-pressed="true"]:hover {
   background: token("neutral-background-color-selected-hover");
 }
+
+@media (forced-colors: active) {
+  .swc-MessageFeedback-button[aria-pressed="true"],
+  .swc-MessageFeedback-button[aria-pressed="true"]:hover {
+    color: SelectedItemText;
+    background: SelectedItem;
+  }
+
+  .swc-MessageFeedback-button[aria-pressed="true"]:hover {
+    border-color: Highlight;
+  }
+}
diff --git a/2nd-gen/packages/swc/patterns/conversational-ai/message-feedback/stories/message-feedback.stories.ts b/2nd-gen/packages/swc/patterns/conversational-ai/message-feedback/stories/message-feedback.stories.ts
index 416353181d1..aeacbd71083 100644
--- a/2nd-gen/packages/swc/patterns/conversational-ai/message-feedback/stories/message-feedback.stories.ts
+++ b/2nd-gen/packages/swc/patterns/conversational-ai/message-feedback/stories/message-feedback.stories.ts
@@ -114,27 +114,15 @@ export const Status: Story = {
     <div style="display:flex;flex-direction:column;gap:24px;">
       <div style="display:flex;flex-direction:column;gap:8px;">
         <swc-message-feedback></swc-message-feedback>
-        <span
-          style="font-family:var(--swc-sans-serif-font);font-size:var(--swc-font-size-75);color:var(--swc-gray-700);"
-        >
-          Unset
-        </span>
+        <span class="swc-Detail swc-Detail--sizeS">Unset</span>
       </div>
       <div style="display:flex;flex-direction:column;gap:8px;">
         <swc-message-feedback status="positive"></swc-message-feedback>
-        <span
-          style="font-family:var(--swc-sans-serif-font);font-size:var(--swc-font-size-75);color:var(--swc-gray-700);"
-        >
-          Positive
-        </span>
+        <span class="swc-Detail swc-Detail--sizeS">Positive</span>
       </div>
       <div style="display:flex;flex-direction:column;gap:8px;">
         <swc-message-feedback status="negative"></swc-message-feedback>
-        <span
-          style="font-family:var(--swc-sans-serif-font);font-size:var(--swc-font-size-75);color:var(--swc-gray-700);"
-        >
-          Negative
-        </span>
+        <span class="swc-Detail swc-Detail--sizeS">Negative</span>
       </div>
     </div>
   `,
@@ -205,11 +193,10 @@ export const HandlingEvents: Story = {
         <swc-message-feedback></swc-message-feedback>
         <p
           ${wireDemo}
-          style="font-family:var(--swc-sans-serif-font);font-size:var(--swc-font-size-75);color:var(--swc-gray-800);margin:0;"
+          class="swc-Detail swc-Detail--sizeS"
+          style="margin:0;"
         ></p>
-        <p
-          style="font-family:var(--swc-sans-serif-font);font-size:var(--swc-font-size-50);color:var(--swc-gray-700);margin:0;"
-        >
+        <p class="swc-Detail swc-Detail--sizeS" style="margin:0;">
           In production you would persist the choice, call an API, or update app
           state instead of only echoing the event here.
         </p>
diff --git a/2nd-gen/packages/swc/patterns/conversational-ai/message-sources/message-sources.css b/2nd-gen/packages/swc/patterns/conversational-ai/message-sources/message-sources.css
index 1ab5470ef0e..607f88b7951 100644
--- a/2nd-gen/packages/swc/patterns/conversational-ai/message-sources/message-sources.css
+++ b/2nd-gen/packages/swc/patterns/conversational-ai/message-sources/message-sources.css
@@ -32,9 +32,10 @@
 
 .swc-MessageSources-toggle {
   display: inline-flex;
-  gap: var(--swc-sources-toggle-gap, token("spacing-75"));
+  gap: var(--swc-sources-toggle-gap, token("spacing-100"));
   align-items: center;
-  padding: 5px 0;
+  inline-size: fit-content;
+  padding: var(--swc-sources-toggle-padding, 3px) token("spacing-100");
   font-family: token("sans-serif-font");
   font-size: token("font-size-100");
   font-weight: token("bold-font-weight");
@@ -42,11 +43,14 @@
   color: token("neutral-content-color-default");
   background: transparent;
   border: none;
+  border-radius: token("corner-radius-medium-default");
   cursor: pointer;
+  transition: background token("animation-duration-100") token("animation-ease-in-out");
 }
 
 .swc-MessageSources-toggle:hover {
   color: token("gray-800");
+  background: token("gray-100");
 }
 
 .swc-MessageSources-chevron {
@@ -68,7 +72,7 @@
   flex-direction: column;
   gap: var(--swc-message-sources-list-gap, token("spacing-75"));
   block-size: 0;
-  padding: 0;
+  padding: 0 token("spacing-100");
   margin: 0;
   overflow: hidden;
   list-style: none;
diff --git a/2nd-gen/packages/swc/patterns/conversational-ai/message-sources/stories/message-sources.stories.ts b/2nd-gen/packages/swc/patterns/conversational-ai/message-sources/stories/message-sources.stories.ts
index efc6801dfaa..c9ebe55435a 100644
--- a/2nd-gen/packages/swc/patterns/conversational-ai/message-sources/stories/message-sources.stories.ts
+++ b/2nd-gen/packages/swc/patterns/conversational-ai/message-sources/stories/message-sources.stories.ts
@@ -131,11 +131,7 @@ export const Open: Story = {
           <a href="#">Adobe Experience Manager documentation</a>
           <a href="#">Creative Cloud release notes 2026</a>
         </swc-message-sources>
-        <span
-          style="font-family:var(--swc-sans-serif-font);font-size:var(--swc-font-size-75);color:var(--swc-gray-700);"
-        >
-          Collapsed
-        </span>
+        <span class="swc-Detail swc-Detail--sizeS">Collapsed</span>
       </div>
       <div style="display:flex;flex-direction:column;gap:8px;">
         <swc-message-sources open>
@@ -143,20 +139,14 @@ export const Open: Story = {
           <a href="#">Creative Cloud release notes 2026</a>
           <a href="#">Firefly API getting started guide</a>
         </swc-message-sources>
-        <span
-          style="font-family:var(--swc-sans-serif-font);font-size:var(--swc-font-size-75);color:var(--swc-gray-700);"
-        >
-          Expanded
-        </span>
+        <span class="swc-Detail swc-Detail--sizeS">Expanded</span>
       </div>
       <div style="display:flex;flex-direction:column;gap:8px;">
         <swc-message-sources open label="References">
           <a href="#">Adobe Experience Manager documentation</a>
           <a href="#">Creative Cloud release notes 2026</a>
         </swc-message-sources>
-        <span
-          style="font-family:var(--swc-sans-serif-font);font-size:var(--swc-font-size-75);color:var(--swc-gray-700);"
-        >
+        <span class="swc-Detail swc-Detail--sizeS">
           Expanded with custom label
         </span>
       </div>
diff --git a/2nd-gen/packages/swc/patterns/conversational-ai/prompt-field/prompt-field.css b/2nd-gen/packages/swc/patterns/conversational-ai/prompt-field/prompt-field.css
index 5cb681fd8bf..8deaf825f79 100644
--- a/2nd-gen/packages/swc/patterns/conversational-ai/prompt-field/prompt-field.css
+++ b/2nd-gen/packages/swc/patterns/conversational-ai/prompt-field/prompt-field.css
@@ -42,6 +42,7 @@
   gap: token("spacing-300");
   padding: token("spacing-300");
   background: token("background-layer-2-color");
+  border: 1px solid transparent;
   border-radius: token("corner-radius-800");
   box-shadow: token("drop-shadow-emphasized-default-x") token("drop-shadow-emphasized-default-y") token("drop-shadow-emphasized-default-blur") token("drop-shadow-emphasized-default-color");
   overflow: hidden;
@@ -79,7 +80,7 @@
 .swc-PromptField-artifacts {
   display: flex;
   flex-wrap: wrap;
-  gap: token("spacing-100");
+  gap: token("spacing-300");
   align-items: start;
 }
 
@@ -92,17 +93,15 @@
   flex: 0 0 auto;
 }
 
-/* Figma (node 2:2035): single card artifact is 324px wide. */
 .swc-PromptField-artifacts--single > slot::slotted([type="card"]) {
-  flex: 0 1 var(--swc-prompt-field-artifact-single-inline-size, 324px);
-  inline-size: min(100%, 324px);
-  max-inline-size: var(--swc-prompt-field-artifact-single-max-inline-size, 324px);
+  flex-shrink: 1;
+  flex-basis: auto;
 }
 
 /* Multi-artifact card layout targets 3+ cards per row responsively. */
 .swc-PromptField-artifacts--multiple > slot::slotted([type="card"]) {
-  flex: 1 1 var(--swc-prompt-field-artifact-multiple-inline-size, 160px);
-  min-inline-size: var(--swc-prompt-field-artifact-min-inline-size, 160px);
+  flex-shrink: 1;
+  flex-basis: auto;
 }
 
 /* Prompt-field media artifact uses 68×68 preview tile. */
@@ -191,7 +190,7 @@
   padding: 0;
   color: token("gray-800");
   background: transparent;
-  border: none;
+  border: 1px solid transparent;
   border-radius: token("corner-radius-500");
   cursor: pointer;
 }
@@ -223,7 +222,7 @@
   padding: 0;
   color: token("gray-25");
   background: token("neutral-background-color-default");
-  border: none;
+  border: 1px solid transparent;
   border-radius: token("corner-radius-full");
   cursor: pointer;
   transition: background token("animation-duration-100") ease;
@@ -238,7 +237,7 @@
   padding: 0;
   color: token("gray-25");
   background: token("gray-900");
-  border: none;
+  border: 1px solid transparent;
   border-radius: token("corner-radius-full");
   cursor: pointer;
   transition: background token("animation-duration-100") ease;
@@ -304,3 +303,7 @@
 .swc-PromptField-legal-disclaimer a {
   color: inherit;
 }
+
+.swc-PromptField-artifacts[hidden] {
+  display: none !important;
+}
diff --git a/2nd-gen/packages/swc/patterns/conversational-ai/prompt-field/stories/prompt-field.stories.ts b/2nd-gen/packages/swc/patterns/conversational-ai/prompt-field/stories/prompt-field.stories.ts
index 89c71fa5ff5..6b403d183a6 100644
--- a/2nd-gen/packages/swc/patterns/conversational-ai/prompt-field/stories/prompt-field.stories.ts
+++ b/2nd-gen/packages/swc/patterns/conversational-ai/prompt-field/stories/prompt-field.stories.ts
@@ -49,7 +49,8 @@ const meta: Meta = {
   render: (args) => template(args),
   parameters: {
     docs: {
-      subtitle: 'Prompt entry surface for conversational AI flows.',
+      subtitle:
+        'Prompt entry surface for conversational AI flows. Populate attachments by slotting one or more swc-upload-artifact nodes into artifact',
     },
     layout: 'padded',
   },
@@ -107,11 +108,7 @@ export const Anatomy: Story = {
           label="Prompt"
           placeholder=${defaultPlaceholder}
         ></swc-prompt-field>
-        <span
-          style="font-family:var(--swc-sans-serif-font);font-size:var(--swc-font-size-75);color:var(--swc-gray-700);"
-        >
-          Base structure
-        </span>
+        <span class="swc-Detail swc-Detail--sizeS">Base structure</span>
       </div>
       <div style="display:flex;flex-direction:column;gap:8px;">
         <swc-prompt-field label="Prompt" placeholder=${defaultPlaceholder}>
@@ -119,11 +116,7 @@ export const Anatomy: Story = {
             AI output may be inaccurate. Verify before using.
           </div>
         </swc-prompt-field>
-        <span
-          style="font-family:var(--swc-sans-serif-font);font-size:var(--swc-font-size-75);color:var(--swc-gray-700);"
-        >
-          legal slot only
-        </span>
+        <span class="swc-Detail swc-Detail--sizeS">legal slot only</span>
       </div>
     </div>
   `,
@@ -151,9 +144,7 @@ export const Modes: Story = {
           label="Prompt"
           placeholder=${defaultPlaceholder}
         ></swc-prompt-field>
-        <span
-          style="font-family:var(--swc-sans-serif-font);font-size:var(--swc-font-size-75);color:var(--swc-gray-700);"
-        >
+        <span class="swc-Detail swc-Detail--sizeS">
           mode="default" with empty value
         </span>
       </div>
@@ -162,9 +153,7 @@ export const Modes: Story = {
           label="Prompt"
           value="Summarize the API changes in this branch."
         ></swc-prompt-field>
-        <span
-          style="font-family:var(--swc-sans-serif-font);font-size:var(--swc-font-size-75);color:var(--swc-gray-700);"
-        >
+        <span class="swc-Detail swc-Detail--sizeS">
           mode="default" with entered value
         </span>
       </div>
@@ -174,9 +163,7 @@ export const Modes: Story = {
           label="Prompt"
           value="Summarize the API changes in this branch."
         ></swc-prompt-field>
-        <span
-          style="font-family:var(--swc-sans-serif-font);font-size:var(--swc-font-size-75);color:var(--swc-gray-700);"
-        >
+        <span class="swc-Detail swc-Detail--sizeS">
           mode="loading" (input remains editable)
         </span>
       </div>
@@ -186,9 +173,7 @@ export const Modes: Story = {
           label="Prompt"
           value="This input is disabled."
         ></swc-prompt-field>
-        <span
-          style="font-family:var(--swc-sans-serif-font);font-size:var(--swc-font-size-75);color:var(--swc-gray-700);"
-        >
+        <span class="swc-Detail swc-Detail--sizeS">
           mode="disabled" (input and controls disabled)
         </span>
       </div>
@@ -202,85 +187,50 @@ export const Modes: Story = {
  * Artifact layout is inferred from the **`artifact`** slot content and supports multiple mixed items:
  *
  * - No slot content: no artifact region
- * - `swc-upload-artifact type="card"`: file-style card artifact
- * - `swc-upload-artifact type="media"`: media tile artifact
+ * - **`swc-upload-artifact type="card"`** — file-style card artifact
+ * - **`swc-upload-artifact type="media"`** — media tile artifact
+ *
+ * **Populate the attachment strip** by slotting **one `<swc-upload-artifact>` per file**, each with
+ * **`slot="artifact"`** (same slot name repeated). Mixed card + media entries wrap inside the composer like this story’s first example.
+ *
+ * For additional combinations (narrow widths, ellipsis, more tiles), see **[Multi-artifact](/docs/patterns-conversational-ai-upload-artifact--readme#multi-artifact)**.
  *
  * Upload button behavior:
  *
- * - Emits cancelable `swc-prompt-field-upload-click`; consumers own picker behavior
- * - Consumers can provide files via slotted artifacts and own file selection flow externally
+ * - Emits cancelable **`swc-prompt-field-upload-click`**; consumers own picker behavior
+ * - Consumers provide artifacts by slotting; file selection stays in app code
  *
- * Artifacts own dismiss behavior via `dismissible` and emit `swc-upload-artifact-dismiss`.
+ * Artifacts own dismiss behavior via **`dismissible`** and emit **`swc-upload-artifact-dismiss`**.
  */
 export const Artifact: Story = {
   render: () => html`
     <div style="display:flex;flex-direction:column;gap:32px;">
-      <div style="display:flex;flex-direction:column;gap:8px;">
-        <swc-prompt-field
-          label="Prompt"
-          placeholder=${defaultPlaceholder}
-        ></swc-prompt-field>
-        <span
-          style="font-family:var(--swc-sans-serif-font);font-size:var(--swc-font-size-75);color:var(--swc-gray-700);"
-        >
-          None
-        </span>
-      </div>
-      <div style="display:flex;flex-direction:column;gap:8px;">
-        <swc-prompt-field label="Prompt" placeholder=${defaultPlaceholder}>
-          <swc-upload-artifact slot="artifact" type="card" dismissible>
-            <div
-              slot="thumbnail"
-              style="background:var(--swc-gray-200);"
-              role="img"
-              aria-label="PDF"
-            ></div>
-            <span slot="title">Hilton commercial assets</span>
-            <span slot="subtitle">2026</span>
-          </swc-upload-artifact>
-        </swc-prompt-field>
-        <span
-          style="font-family:var(--swc-sans-serif-font);font-size:var(--swc-font-size-75);color:var(--swc-gray-700);"
-        >
-          Card
-        </span>
-      </div>
-      <div style="display:flex;flex-direction:column;gap:8px;">
-        <swc-prompt-field label="Prompt" placeholder=${defaultPlaceholder}>
-          <swc-upload-artifact slot="artifact" type="media" dismissible>
-            <img
-              slot="thumbnail"
-              src="https://placehold.co/160x120/png"
-              alt="Attachment preview"
-              style="inline-size:100%;block-size:100%;min-block-size:0;object-fit:cover;"
-            />
-          </swc-upload-artifact>
-        </swc-prompt-field>
-        <span
-          style="font-family:var(--swc-sans-serif-font);font-size:var(--swc-font-size-75);color:var(--swc-gray-700);"
-        >
-          Media
-        </span>
-      </div>
+      <p
+        class="swc-Detail swc-Detail--sizeS"
+        style="margin:0;max-inline-size:720px;"
+      >
+        <strong>artifact</strong>
+        — Slot multiple
+        <code>&lt;swc-upload-artifact slot="artifact"&gt;</code>
+        nodes; the field lays them out in a wrapping row above the textarea.
+        More variants:
+        <strong>Multi-artifacts</strong>
+        .
+      </p>
       <div style="display:flex;flex-direction:column;gap:8px;">
         <swc-prompt-field
           label="Prompt"
           value="Use attached assets for a launch plan."
         >
           <swc-upload-artifact slot="artifact" type="card" dismissible>
-            <div
-              slot="thumbnail"
-              style="background:var(--swc-gray-200);"
-              role="img"
-              aria-label="PDF"
-            ></div>
+            <div slot="thumbnail" role="img" aria-label="PDF"></div>
             <span slot="title">Brand guidelines</span>
             <span slot="subtitle">PDF</span>
           </swc-upload-artifact>
           <swc-upload-artifact slot="artifact" type="media" dismissible>
             <div
               slot="thumbnail"
-              style="inline-size:100%;block-size:100%;background:linear-gradient(135deg,#6366f1,#ec4899);"
+              style="background:linear-gradient(135deg,#6366f1,#ec4899);"
               role="img"
               aria-label="Campaign still"
             ></div>
@@ -288,18 +238,45 @@ export const Artifact: Story = {
           <swc-upload-artifact slot="artifact" type="media" dismissible>
             <div
               slot="thumbnail"
-              style="inline-size:100%;block-size:100%;background:linear-gradient(135deg,#0ea5e9,#22c55e);"
+              style="background:linear-gradient(135deg,#0ea5e9,#22c55e);"
               role="img"
               aria-label="Storyboard frame"
             ></div>
           </swc-upload-artifact>
         </swc-prompt-field>
-        <span
-          style="font-family:var(--swc-sans-serif-font);font-size:var(--swc-font-size-75);color:var(--swc-gray-700);"
-        >
-          Mixed multi-artifact set (wrapping layout)
+        <span class="swc-Detail swc-Detail--sizeS">
+          Mixed multi-artifact (card + media, wrapping strip)
         </span>
       </div>
+      <div style="display:flex;flex-direction:column;gap:8px;">
+        <swc-prompt-field
+          label="Prompt"
+          placeholder=${defaultPlaceholder}
+        ></swc-prompt-field>
+        <span class="swc-Detail swc-Detail--sizeS">None</span>
+      </div>
+      <div style="display:flex;flex-direction:column;gap:8px;">
+        <swc-prompt-field label="Prompt" placeholder=${defaultPlaceholder}>
+          <swc-upload-artifact slot="artifact" type="card" dismissible>
+            <div slot="thumbnail" role="img" aria-label="PDF"></div>
+            <span slot="title">Hilton commercial assets</span>
+            <span slot="subtitle">2026</span>
+          </swc-upload-artifact>
+        </swc-prompt-field>
+        <span class="swc-Detail swc-Detail--sizeS">Single card</span>
+      </div>
+      <div style="display:flex;flex-direction:column;gap:8px;">
+        <swc-prompt-field label="Prompt" placeholder=${defaultPlaceholder}>
+          <swc-upload-artifact slot="artifact" type="media" dismissible>
+            <img
+              slot="thumbnail"
+              src="https://placehold.co/160x120/png"
+              alt="Attachment preview"
+            />
+          </swc-upload-artifact>
+        </swc-prompt-field>
+        <span class="swc-Detail swc-Detail--sizeS">Single media</span>
+      </div>
     </div>
   `,
   parameters: { 'section-order': 2 },
@@ -451,7 +428,7 @@ class PromptFieldBehaviorDemo extends LitElement {
                         slot="thumbnail"
                         role="img"
                         aria-label="File thumbnail"
-                        style="inline-size:40px;block-size:40px;background:var(--swc-gray-200);border-radius:4px;"
+                        style="inline-size:40px;block-size:40px;"
                       ></div>
                       <span slot="title">${artifact.fileName}</span>
                       <span slot="subtitle">${artifact.sizeLabel}</span>
@@ -469,15 +446,11 @@ class PromptFieldBehaviorDemo extends LitElement {
             hidden
             @change=${this._handleFileChange}
           />
-          <span
-            style="font-family:var(--swc-sans-serif-font);font-size:var(--swc-font-size-75);color:var(--swc-gray-700);"
-          >
+          <span class="swc-Detail swc-Detail--sizeS">
             Input, submit, upload trigger, and external artifact handling
           </span>
         </div>
-        <p
-          style="font-family:var(--swc-sans-serif-font);font-size:var(--swc-font-size-75);color:var(--swc-gray-800);margin:0;"
-        >
+        <p class="swc-Detail swc-Detail--sizeS" style="margin:0;">
           ${this.readout}
         </p>
       </div>
diff --git a/2nd-gen/packages/swc/patterns/conversational-ai/response-status/response-status.css b/2nd-gen/packages/swc/patterns/conversational-ai/response-status/response-status.css
index 94557a49774..58047d8b92b 100644
--- a/2nd-gen/packages/swc/patterns/conversational-ai/response-status/response-status.css
+++ b/2nd-gen/packages/swc/patterns/conversational-ai/response-status/response-status.css
@@ -39,10 +39,13 @@
 
 /* When the row is a button (reasoning toggle) */
 .swc-ResponseStatus-row--button {
-  padding: 0;
+  inline-size: fit-content;
+  padding: var(--swc-sources-toggle-padding, 3px) token("spacing-100");
   background: transparent;
   border: none;
+  border-radius: token("corner-radius-medium-default");
   cursor: pointer;
+  transition: background token("animation-duration-100") token("animation-ease-in-out");
 }
 
 /* Progress circle — indeterminate loading indicator */
@@ -65,6 +68,10 @@
   color: token("gray-800");
 }
 
+.swc-ResponseStatus-row--button:hover {
+  background: token("gray-100");
+}
+
 /* ─────────────────────────────────────
    Chevron direction
    ───────────────────────────────────── */
@@ -87,6 +94,7 @@
   display: block;
   visibility: hidden;
   block-size: 0;
+  padding-inline: token("spacing-100");
   font-family: token("sans-serif-font");
   font-size: token("font-size-100");
   font-weight: token("regular-font-weight");
diff --git a/2nd-gen/packages/swc/patterns/conversational-ai/response-status/stories/response-status.stories.ts b/2nd-gen/packages/swc/patterns/conversational-ai/response-status/stories/response-status.stories.ts
index 277be878716..c810dd1df64 100644
--- a/2nd-gen/packages/swc/patterns/conversational-ai/response-status/stories/response-status.stories.ts
+++ b/2nd-gen/packages/swc/patterns/conversational-ai/response-status/stories/response-status.stories.ts
@@ -148,20 +148,14 @@ export const Loading: Story = {
     <div style="display:flex;flex-direction:column;gap:24px;">
       <div style="display:flex;flex-direction:column;gap:8px;">
         <swc-response-status loading></swc-response-status>
-        <span
-          style="font-family:var(--swc-sans-serif-font);font-size:var(--swc-font-size-75);color:var(--swc-gray-700);"
-        >
-          Loading
-        </span>
+        <span class="swc-Detail swc-Detail--sizeS">Loading</span>
       </div>
       <div style="display:flex;flex-direction:column;gap:8px;">
         <swc-response-status>
           I grouped your request into a presentation outline and prioritized key
           business messages.
         </swc-response-status>
-        <span
-          style="font-family:var(--swc-sans-serif-font);font-size:var(--swc-font-size-75);color:var(--swc-gray-700);"
-        >
+        <span class="swc-Detail swc-Detail--sizeS">
           Complete (default label)
         </span>
       </div>
@@ -170,9 +164,7 @@ export const Loading: Story = {
           I grouped your request into a presentation outline and prioritized key
           business messages.
         </swc-response-status>
-        <span
-          style="font-family:var(--swc-sans-serif-font);font-size:var(--swc-font-size-75);color:var(--swc-gray-700);"
-        >
+        <span class="swc-Detail swc-Detail--sizeS">
           Complete (custom label)
         </span>
       </div>
@@ -198,9 +190,7 @@ export const Reasoning: Story = {
     <div style="display:flex;flex-direction:column;gap:24px;">
       <div style="display:flex;flex-direction:column;gap:8px;">
         <swc-response-status></swc-response-status>
-        <span
-          style="font-family:var(--swc-sans-serif-font);font-size:var(--swc-font-size-75);color:var(--swc-gray-700);"
-        >
+        <span class="swc-Detail swc-Detail--sizeS">
           Complete without reasoning content (no disclosure chevron)
         </span>
       </div>
@@ -209,22 +199,14 @@ export const Reasoning: Story = {
           I grouped your request into a presentation outline and prioritized key
           business messages.
         </swc-response-status>
-        <span
-          style="font-family:var(--swc-sans-serif-font);font-size:var(--swc-font-size-75);color:var(--swc-gray-700);"
-        >
-          Reasoning collapsed
-        </span>
+        <span class="swc-Detail swc-Detail--sizeS">Reasoning collapsed</span>
       </div>
       <div style="display:flex;flex-direction:column;gap:8px;">
         <swc-response-status open>
           Step 1: Analyzing the request… Step 2: Searching for relevant context…
           Step 3: Composing response.
         </swc-response-status>
-        <span
-          style="font-family:var(--swc-sans-serif-font);font-size:var(--swc-font-size-75);color:var(--swc-gray-700);"
-        >
-          Reasoning expanded
-        </span>
+        <span class="swc-Detail swc-Detail--sizeS">Reasoning expanded</span>
       </div>
     </div>
   `,
diff --git a/2nd-gen/packages/swc/patterns/conversational-ai/suggestion-item/stories/suggestion-item.stories.ts b/2nd-gen/packages/swc/patterns/conversational-ai/suggestion-item/stories/suggestion-item.stories.ts
index 30a7d5b3e3c..3d9c7042270 100644
--- a/2nd-gen/packages/swc/patterns/conversational-ai/suggestion-item/stories/suggestion-item.stories.ts
+++ b/2nd-gen/packages/swc/patterns/conversational-ai/suggestion-item/stories/suggestion-item.stories.ts
@@ -91,21 +91,13 @@ export const Labels: Story = {
     <div style="display:flex;flex-direction:column;gap:24px;">
       <div style="display:flex;flex-direction:column;gap:8px;">
         <swc-suggestion-item>Short action</swc-suggestion-item>
-        <span
-          style="font-family:var(--swc-sans-serif-font);font-size:var(--swc-font-size-75);color:var(--swc-gray-700);"
-        >
-          Short label
-        </span>
+        <span class="swc-Detail swc-Detail--sizeS">Short label</span>
       </div>
       <div style="display:flex;flex-direction:column;gap:8px;">
         <swc-suggestion-item>
           Create a year-over-year growth chart for the next decade
         </swc-suggestion-item>
-        <span
-          style="font-family:var(--swc-sans-serif-font);font-size:var(--swc-font-size-75);color:var(--swc-gray-700);"
-        >
-          Long label
-        </span>
+        <span class="swc-Detail swc-Detail--sizeS">Long label</span>
       </div>
     </div>
   `,
diff --git a/2nd-gen/packages/swc/patterns/conversational-ai/suggestion-item/suggestion-item.css b/2nd-gen/packages/swc/patterns/conversational-ai/suggestion-item/suggestion-item.css
index af433f2e011..abfa564659f 100644
--- a/2nd-gen/packages/swc/patterns/conversational-ai/suggestion-item/suggestion-item.css
+++ b/2nd-gen/packages/swc/patterns/conversational-ai/suggestion-item/suggestion-item.css
@@ -21,18 +21,22 @@
 }
 
 .swc-SuggestionItem {
+  -webkit-tap-highlight-color: transparent;
   display: inline-flex;
   align-items: center;
+  block-size: var(--swc-suggestion-item-min-block-size, token("component-height-100"));
+  padding: 0;
   font-family: token("sans-serif-font");
-  font-size: token("font-size-200");
+  font-size: token("font-size-100");
   font-style: token("default-font-style");
   font-weight: token("regular-font-weight");
-  line-height: token("line-height-font-size-200");
+  line-height: token("line-height-font-size-100");
   color: token("neutral-content-color-default");
   background: token("gray-100");
-  border: none;
+  border: 1px solid transparent;
   border-radius: token("corner-radius-extra-large-default");
   cursor: pointer;
+  transition: background token("animation-duration-100") token("animation-ease-in-out");
 }
 
 .swc-SuggestionItem:hover,
@@ -66,5 +70,11 @@
   display: inline-flex;
   padding-block: var(--swc-suggestion-item-label-padding-block, 7px);
   padding-inline-end: var(--swc-suggestion-item-label-padding-inline-end, token("spacing-300"));
-  text-align: left;
+  text-align: start;
+}
+
+@media (forced-colors: active) {
+  .swc-SuggestionItem:focus-visible {
+    outline-color: CanvasText;
+  }
 }
diff --git a/2nd-gen/packages/swc/patterns/conversational-ai/suggestion/stories/suggestion-group.stories.ts b/2nd-gen/packages/swc/patterns/conversational-ai/suggestion/stories/suggestion-group.stories.ts
index e63d8654f30..038202e668a 100644
--- a/2nd-gen/packages/swc/patterns/conversational-ai/suggestion/stories/suggestion-group.stories.ts
+++ b/2nd-gen/packages/swc/patterns/conversational-ai/suggestion/stories/suggestion-group.stories.ts
@@ -107,11 +107,7 @@ export const SuggestionCount: Story = {
             Create a slide deck from this
           </swc-suggestion-item>
         </swc-suggestion-group>
-        <span
-          style="font-family:var(--swc-sans-serif-font);font-size:var(--swc-font-size-75);color:var(--swc-gray-700);"
-        >
-          One suggestion
-        </span>
+        <span class="swc-Detail swc-Detail--sizeS">One suggestion</span>
       </div>
       <div style="display:flex;flex-direction:column;gap:8px;">
         <swc-suggestion-group heading="What would you like to do next?">
@@ -123,9 +119,7 @@ export const SuggestionCount: Story = {
           </swc-suggestion-item>
           <swc-suggestion-item>Translate to Spanish</swc-suggestion-item>
         </swc-suggestion-group>
-        <span
-          style="font-family:var(--swc-sans-serif-font);font-size:var(--swc-font-size-75);color:var(--swc-gray-700);"
-        >
+        <span class="swc-Detail swc-Detail--sizeS">
           Three suggestions (recommended)
         </span>
       </div>
@@ -139,9 +133,7 @@ export const SuggestionCount: Story = {
           <swc-suggestion-item>Export as talking points</swc-suggestion-item>
           <swc-suggestion-item>Suggest a subject line</swc-suggestion-item>
         </swc-suggestion-group>
-        <span
-          style="font-family:var(--swc-sans-serif-font);font-size:var(--swc-font-size-75);color:var(--swc-gray-700);"
-        >
+        <span class="swc-Detail swc-Detail--sizeS">
           Five suggestions (wraps)
         </span>
       </div>
@@ -167,11 +159,7 @@ export const Heading: Story = {
           </swc-suggestion-item>
           <swc-suggestion-item>Translate to Spanish</swc-suggestion-item>
         </swc-suggestion-group>
-        <span
-          style="font-family:var(--swc-sans-serif-font);font-size:var(--swc-font-size-75);color:var(--swc-gray-700);"
-        >
-          Default heading
-        </span>
+        <span class="swc-Detail swc-Detail--sizeS">Default heading</span>
       </div>
       <div style="display:flex;flex-direction:column;gap:8px;">
         <swc-suggestion-group heading="Suggested next actions">
@@ -183,11 +171,7 @@ export const Heading: Story = {
           </swc-suggestion-item>
           <swc-suggestion-item>Translate to Spanish</swc-suggestion-item>
         </swc-suggestion-group>
-        <span
-          style="font-family:var(--swc-sans-serif-font);font-size:var(--swc-font-size-75);color:var(--swc-gray-700);"
-        >
-          Custom heading
-        </span>
+        <span class="swc-Detail swc-Detail--sizeS">Custom heading</span>
       </div>
     </div>
   `,
diff --git a/2nd-gen/packages/swc/patterns/conversational-ai/suggestion/suggestion-group.css b/2nd-gen/packages/swc/patterns/conversational-ai/suggestion/suggestion-group.css
index d84c9fdac50..a821c404d11 100644
--- a/2nd-gen/packages/swc/patterns/conversational-ai/suggestion/suggestion-group.css
+++ b/2nd-gen/packages/swc/patterns/conversational-ai/suggestion/suggestion-group.css
@@ -24,18 +24,18 @@
   display: flex;
   flex-direction: column;
   gap: token("spacing-100");
-
-  h3 {
-    font-size: token("font-size-300");
-  }
 }
 
 .swc-SuggestionGroup-title {
   margin: 0;
   font-family: token("sans-serif-font");
   font-weight: token("bold-font-weight");
-  line-height: token("line-height-font-size-300");
+  line-height: token("line-height-font-size-200");
   color: token("gray-900");
+
+  h3 {
+    font-size: token("font-size-200");
+  }
 }
 
 .swc-SuggestionGroup-items {
diff --git a/2nd-gen/packages/swc/patterns/conversational-ai/system-message/stories/system-message.stories.ts b/2nd-gen/packages/swc/patterns/conversational-ai/system-message/stories/system-message.stories.ts
index 16524481f04..1ab37bbd9f9 100644
--- a/2nd-gen/packages/swc/patterns/conversational-ai/system-message/stories/system-message.stories.ts
+++ b/2nd-gen/packages/swc/patterns/conversational-ai/system-message/stories/system-message.stories.ts
@@ -22,8 +22,6 @@ import '../../suggestion/index.js';
 import '../../suggestion-item/index.js';
 import '../../response-status/index.js';
 
-import '../../system-prose-demo.css';
-
 // ────────────────
 //    METADATA
 // ────────────────
@@ -32,7 +30,7 @@ const { args, argTypes, template } = getStorybookHelpers('swc-system-message');
 
 const slotStatusRich = `<swc-response-status slot="status" open>The user said make a presentation deck but didn't specify duration of deck. Assumption is a brief presentation. I should check previous Hilton executive presentation decks and extract the structure.</swc-response-status>`;
 
-const slotMessageRich = `<div class="swc-conversationalAi-systemProse swc-Typography--prose"><p>According to the assets, there is a clear journey from beginning to end. Let's start with overarching themes and build from there.</p><p style="font-size:var(--swc-font-size-400);font-weight:800;line-height:var(--swc-line-height-font-size-400);color:var(--swc-gray-900);margin:0;">Big idea/ core narrative: The warmth of welcome</p><p>Hospitality begins the moment our customers set foot off their plane. We are more than accommodation, and we service a diverse base. We hope to be the anchor and bounce board for all who stay with us.</p><p style="font-size:var(--swc-font-size-300);font-weight:800;line-height:var(--swc-line-height-font-size-300);color:var(--swc-gray-900);margin:0;">Belonging happens at Hilton</p><p>We strive to be familiar but exceed expectations. These assets highlight how belonging is personified.</p><p style="font-size:var(--swc-font-size-300);font-weight:800;line-height:var(--swc-line-height-font-size-300);color:var(--swc-gray-900);margin:0;">We are more than accommodation</p><ul><li>Airport pick up service</li><li>Local recommendations</li><li>Everyday excursions</li><li>Customizable experience</li></ul></div>`;
+const slotMessageRich = `<div class="swc-Typography--prose"><p>According to the assets, there is a clear journey from beginning to end. Let's start with overarching themes and build from there.</p><h2>Big idea/ core narrative: The warmth of welcome</h2><p>Hospitality begins the moment our customers set foot off their plane. We are more than accommodation, and we service a diverse base. We hope to be the anchor and bounce board for all who stay with us.</p><h3>Belonging happens at Hilton</h3><p>We strive to be familiar but exceed expectations. These assets highlight how belonging is personified.</p><h3>We are more than accommodation</h3><ul><li>Airport pick up service</li><li>Local recommendations</li><li>Everyday excursions</li><li>Customizable experience</li></ul></div>`;
 
 const slotFeedback = `<swc-message-feedback slot="feedback"></swc-message-feedback>`;
 
@@ -120,17 +118,22 @@ export const Overview: Story = {
  * Put the AI reply in the **default slot** as semantic HTML styled with Spectrum
  * token variables.
  *
- * - **`<p>`** for body copy; reset vertical margins for predictable stacking.
- * - **`<ul>` / `<ol>`** for lists; set **margin** and **padding-inline-start**
- *   to match design specs.
- * - **Headings** (`<h2>`–`<h4>`) only when semantic outline matters; otherwise use
- *   stronger paragraph typography for in-flow section titles.
- * - **`<a href>`** for links; use accent colour and underline treatment.
+ * ### Typography in the default slot
+ *
+ * Rich AI body copy should use Spectrum typography **utility classes** on semantic HTML. Applications must load **`typography.css`** from
+ * `@adobe/spectrum-wc` after design tokens. See **Typography** and the typography [consumer migration guide](/docs/components-typography-consumer-migration-guide--readme).
+ *
+ * - **Wrapper** — Root container: `class="swc-Typography--prose"`.
+ *   `swc-Typography--prose` applies consistent vertical spacing between block-level children.
+ * - **Body** — Use semantic paragraphs and lists for body styling.
+ * - **Headings** — Use semantic `<h2>`–`<h4>`.
+ * - **Lists / links** — Keep lists and `<a href>` inside the prose wrapper so margins and link treatments stay
+ *   consistent with Spectrum prose styles.
  */
 export const Anatomy: Story = {
   args: {
     'status-slot': `<swc-response-status slot="status">I used the prompt and source context to draft a concise, presentation-ready response structure.</swc-response-status>`,
-    'default-slot': `<div class="swc-conversationalAi-systemProse swc-Typography--prose"><p>Here is the AI-generated response content.</p></div>`,
+    'default-slot': `<div class="swc-Typography--prose"><p>Here is the AI-generated response content.</p></div>`,
     'feedback-slot': slotFeedback,
     'sources-slot': `<swc-message-sources slot="sources"><a href="#">Source one</a></swc-message-sources>`,
     'suggestions-slot': `<swc-suggestion-group slot="suggestions" heading="What would you like to do next?"><swc-suggestion-item>Follow up suggestion one</swc-suggestion-item><swc-suggestion-item>Follow up suggestion two</swc-suggestion-item></swc-suggestion-group>`,
@@ -156,11 +159,7 @@ export const Loading: Story = {
             <swc-response-status slot="status" loading></swc-response-status>
           </swc-system-message>
         </swc-conversation-turn>
-        <span
-          style="font-family:var(--swc-sans-serif-font);font-size:var(--swc-font-size-75);color:var(--swc-gray-700);"
-        >
-          Generating response
-        </span>
+        <span class="swc-Detail swc-Detail--sizeS">Generating response</span>
       </div>
       <div style="display:flex;flex-direction:column;gap:8px;">
         <swc-conversation-turn type="system">
@@ -169,7 +168,7 @@ export const Loading: Story = {
               I used the prompt and source context to draft a concise,
               presentation-ready response structure.
             </swc-response-status>
-            <div class="swc-conversationalAi-systemProse swc-Typography--prose">
+            <div class="swc-Typography--prose">
               <p>
                 According to the assets, there is a clear journey from beginning
                 to end.
@@ -181,11 +180,7 @@ export const Loading: Story = {
             </swc-message-sources>
           </swc-system-message>
         </swc-conversation-turn>
-        <span
-          style="font-family:var(--swc-sans-serif-font);font-size:var(--swc-font-size-75);color:var(--swc-gray-700);"
-        >
-          Response complete
-        </span>
+        <span class="swc-Detail swc-Detail--sizeS">Response complete</span>
       </div>
     </div>
   `,
@@ -211,12 +206,13 @@ export const Loading: Story = {
  * ### Best practices
  *
  * - Use semantic HTML in the **default slot** (paragraphs, lists, headings) for screen reader clarity
+ * - Style default-slot content with **`swc-Typography--prose`** after loading **`typography.css`** (see Anatomy / component docs above)
  * - Ensure source links have descriptive text
  */
 export const Accessibility: Story = {
   args: {
     'status-slot': `<swc-response-status slot="status">I used the prompt and source context to draft a concise, presentation-ready response structure.</swc-response-status>`,
-    'default-slot': `<div class="swc-conversationalAi-systemProse swc-Typography--prose"><p>According to the assets, there is a clear journey from beginning to end. Let's start with overarching themes and build from there.</p></div>`,
+    'default-slot': `<div class="swc-Typography--prose"><p>According to the assets, there is a clear journey from beginning to end. Let's start with overarching themes and build from there.</p></div>`,
     'feedback-slot': slotFeedback,
     'sources-slot': `<swc-message-sources slot="sources" open><a href="#">Adobe Experience Manager documentation</a><a href="#">Creative Cloud release notes 2026</a></swc-message-sources>`,
     'suggestions-slot': `<swc-suggestion-group slot="suggestions" heading="What would you like to do next?"><swc-suggestion-item>Create a year-over-year growth chart for the next decade</swc-suggestion-item><swc-suggestion-item>Generate a congratulatory poster</swc-suggestion-item></swc-suggestion-group>`,
diff --git a/2nd-gen/packages/swc/patterns/conversational-ai/system-message/system-message.css b/2nd-gen/packages/swc/patterns/conversational-ai/system-message/system-message.css
index 086233984ff..6412ca6bcbe 100644
--- a/2nd-gen/packages/swc/patterns/conversational-ai/system-message/system-message.css
+++ b/2nd-gen/packages/swc/patterns/conversational-ai/system-message/system-message.css
@@ -63,5 +63,4 @@
   display: flex;
   flex-direction: column;
   gap: var(--swc-system-message-content-gap, token("spacing-100"));
-  padding-inline: token("spacing-300");
 }
diff --git a/2nd-gen/packages/swc/patterns/conversational-ai/system-prose-demo.css b/2nd-gen/packages/swc/patterns/conversational-ai/system-prose-demo.css
deleted file mode 100644
index f63d1f14149..00000000000
--- a/2nd-gen/packages/swc/patterns/conversational-ai/system-prose-demo.css
+++ /dev/null
@@ -1,23 +0,0 @@
-/**
- * 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.
- */
-
-/**
- * Reference styles for system prose inside `swc-system-message` default slot.
- * This is not a component — Storybook imports it for demos; products should copy or map
- * equivalent rules to their design tokens.
- */
-
-.swc-conversationalAi-systemProse ul,
-.swc-conversationalAi-systemProse ol {
-  padding-inline-start: 20px;
-  margin: 0;
-}
diff --git a/2nd-gen/packages/swc/patterns/conversational-ai/upload-artifact/stories/upload-artifact.stories.ts b/2nd-gen/packages/swc/patterns/conversational-ai/upload-artifact/stories/upload-artifact.stories.ts
index f77b5d21e2e..70573cdef77 100644
--- a/2nd-gen/packages/swc/patterns/conversational-ai/upload-artifact/stories/upload-artifact.stories.ts
+++ b/2nd-gen/packages/swc/patterns/conversational-ai/upload-artifact/stories/upload-artifact.stories.ts
@@ -31,6 +31,7 @@ argTypes.type = {
 /**
  * Shared upload artifact primitive used across conversational AI surfaces such as prompt field and user message.
  * Supports both **`card`** and **`media`** types with a unified slot model.
+ * For several attachments at once, see **Multi-artifact** and **[Prompt field → Artifact](/docs/patterns-conversational-ai-prompt-field--readme#artifact)**.
  */
 const meta: Meta = {
   title: 'Conversational AI/Upload artifact',
@@ -41,7 +42,7 @@ const meta: Meta = {
   parameters: {
     docs: {
       subtitle:
-        'Shared upload artifact primitive with card and media types, plus optional dismiss and trailing actions.',
+        'Card and media tiles for attachments; combine multiple in a strip (see Multi-artifact gallery) or slot them into the prompt field artifact region.',
     },
     layout: 'padded',
   },
@@ -50,15 +51,37 @@ const meta: Meta = {
 
 export default meta;
 
+const playgroundCardThumbnail =
+  '<div slot="thumbnail" role="img" aria-label="File thumbnail"></div>';
+const playgroundMediaThumbnail =
+  '<div slot="thumbnail" role="img" aria-label="Campaign preview"></div>';
+
+/** Strings long enough to overflow at narrow widths (title and subtitle ellipsis). */
+const longOverflowTitle =
+  'Hotel commercial assets for marketing campaign Q1–Q2 regional rollout';
+const longOverflowSubtitle =
+  '2026 fiscal year planning deck and executive summary';
+
 export const Playground: Story = {
   args: {
     type: 'card',
     dismissible: false,
-    'thumbnail-slot':
-      '<div slot="thumbnail" role="img" aria-label="File thumbnail"></div>',
     'title-slot': '<span slot="title">Hilton commercial assets</span>',
     'subtitle-slot': '<span slot="subtitle">2026</span>',
   },
+  render: (args) => {
+    const isMedia = args.type === 'media';
+    return html`
+      <div>
+        ${template({
+          ...args,
+          'thumbnail-slot': isMedia
+            ? playgroundMediaThumbnail
+            : playgroundCardThumbnail,
+        })}
+      </div>
+    `;
+  },
   tags: ['autodocs', 'dev'],
 };
 
@@ -74,6 +97,54 @@ export const Overview: Story = {
   tags: ['overview'],
 };
 
+/**
+ * Multiple **`swc-upload-artifact`** nodes in a wrapping flex row—similar width to the prompt-field composer attachment strip—so card vs media spacing and wraps are easy to compare in isolation.
+ *
+ * To see the same tiles inside **`swc-prompt-field`**, open **[Artifact](/docs/paatterns-conversational-ai-prompt-field--readme#artifact)**.
+ */
+export const MultiArtifact: Story = {
+  render: () => html`
+    <div
+      style="display:flex;flex-direction:column;gap:16px;max-inline-size:720px;"
+    >
+      <p class="swc-Detail swc-Detail--sizeS" style="margin:0;">
+        Mirrors the prompt-field Attachment strip: cards and media tiles
+        together, plus an extra card to stress-test wrapping at narrow widths.
+      </p>
+      <div style="display:flex;flex-wrap:wrap;gap:12px;align-items:flex-start;">
+        <swc-upload-artifact type="card" dismissible>
+          <div slot="thumbnail" role="img" aria-label="PDF"></div>
+          <span slot="title">Brand guidelines</span>
+          <span slot="subtitle">PDF</span>
+        </swc-upload-artifact>
+        <swc-upload-artifact type="media" dismissible>
+          <div
+            slot="thumbnail"
+            style="inline-size:100%;block-size:100%;min-block-size:120px;background:linear-gradient(135deg,#6366f1,#ec4899);"
+            role="img"
+            aria-label="Campaign still"
+          ></div>
+        </swc-upload-artifact>
+        <swc-upload-artifact type="media" dismissible>
+          <div
+            slot="thumbnail"
+            style="inline-size:100%;block-size:100%;min-block-size:120px;background:linear-gradient(135deg,#0ea5e9,#22c55e);"
+            role="img"
+            aria-label="Storyboard frame"
+          ></div>
+        </swc-upload-artifact>
+        <swc-upload-artifact type="card" dismissible>
+          <div slot="thumbnail" role="img" aria-label="Spreadsheet"></div>
+          <span slot="title">Q2 metrics draft</span>
+          <span slot="subtitle">XLSX</span>
+        </swc-upload-artifact>
+      </div>
+    </div>
+  `,
+  parameters: { 'section-order': 1 },
+  tags: ['options'],
+};
+
 /**
  * Card type uses a compact thumbnail with horizontal text layout.
  */
@@ -91,20 +162,36 @@ export const Card: Story = {
 };
 
 /**
- * Media type uses a larger preview region without title or subtitle text.
+ * Media type uses a larger preview region without title and subtitle text.
  */
 export const Media: Story = {
   render: () => html`
     <div style="inline-size:240px;">
       <swc-upload-artifact type="media" dismissible>
-        <div
-          slot="thumbnail"
-          style="inline-size:100%;block-size:196px;background:linear-gradient(135deg,#a78bfa,#f472b6);"
-          role="img"
-          aria-label="Campaign preview"
-        ></div>
+        <div slot="thumbnail" role="img" aria-label="Campaign preview"></div>
       </swc-upload-artifact>
     </div>
   `,
   tags: ['options'],
 };
+
+/**
+ * Title and subtitle truncate with an ellipsis when the artifact is narrower than the text.
+ * **Card** uses a compact row; **media** keeps the actions region visible while the title shrinks.
+ */
+export const TextOverflow: Story = {
+  render: () => html`
+    <div
+      style="display:flex;flex-direction:column;gap:32px;max-inline-size:100%;"
+    >
+      <div style="max-inline-size:280px;">
+        <swc-upload-artifact type="card" dismissible>
+          <div slot="thumbnail" role="img" aria-label="File thumbnail"></div>
+          <span slot="title">${longOverflowTitle}</span>
+          <span slot="subtitle">${longOverflowSubtitle}</span>
+        </swc-upload-artifact>
+      </div>
+    </div>
+  `,
+  tags: ['options'],
+};
diff --git a/2nd-gen/packages/swc/patterns/conversational-ai/upload-artifact/upload-artifact.css b/2nd-gen/packages/swc/patterns/conversational-ai/upload-artifact/upload-artifact.css
index 76518315144..6abeb916540 100644
--- a/2nd-gen/packages/swc/patterns/conversational-ai/upload-artifact/upload-artifact.css
+++ b/2nd-gen/packages/swc/patterns/conversational-ai/upload-artifact/upload-artifact.css
@@ -13,6 +13,7 @@
 :host {
   display: block;
   position: relative;
+  max-inline-size: 100%;
 }
 
 *,
@@ -34,7 +35,7 @@
   padding: 0;
   color: token("gray-800");
   background: token("gray-200");
-  border: none;
+  border: 1px solid token("gray-25");
   border-radius: token("corner-radius-full");
   cursor: pointer;
 }
@@ -99,6 +100,7 @@
   align-items: center;
   min-block-size: var(--swc-upload-artifact-card-min-block-size, 68px);
   padding: token("spacing-300");
+  border: 1px solid transparent;
   border-radius: token("corner-radius-large-default");
 }
 
@@ -110,10 +112,12 @@
 }
 
 :host([type="card"]) .swc-UploadArtifact-thumbnail ::slotted(*) {
+  box-sizing: border-box;
   flex-shrink: 0;
   inline-size: var(--swc-upload-artifact-card-thumbnail-inline-size, 32px);
   block-size: var(--swc-upload-artifact-card-thumbnail-block-size, 32px);
-  background: linear-gradient(135deg, #a78bfa, #f472b6);
+  background: token("gray-100");
+  border: 1px solid transparent;
   border-radius: token("corner-radius-75");
 }
 
@@ -132,8 +136,9 @@
 :host([type="card"]) .swc-UploadArtifact-title ::slotted(*) {
   display: block;
   min-inline-size: 0;
-  overflow-wrap: anywhere;
-  white-space: normal;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
 :host([type="card"]) .swc-UploadArtifact-subtitle ::slotted(*) {
@@ -156,14 +161,13 @@
 
 :host([type="media"]) .swc-UploadArtifact-surface {
   flex-direction: column;
-  gap: 0;
-  inline-size: 100%;
-  block-size: 100%;
+  gap: token("spacing-100");
+  overflow: hidden;
 }
 
 :host([type="media"]) .swc-UploadArtifact-thumbnail {
-  inline-size: 100%;
-  block-size: 100%;
+  background: token("gray-100");
+  border: 1px solid transparent;
   border-radius: token("corner-radius-200");
   overflow: hidden;
 }
@@ -197,7 +201,18 @@
 }
 
 :host([type="media"]) .swc-UploadArtifact-title {
+  flex: 1 1 0;
+  min-inline-size: 0;
   line-height: token("line-height-font-size-100");
+  overflow: hidden;
+}
+
+:host([type="media"]) .swc-UploadArtifact-title ::slotted(*) {
+  display: block;
+  min-inline-size: 0;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
 :host([type="media"]) .swc-UploadArtifact-subtitle {
diff --git a/2nd-gen/packages/swc/patterns/conversational-ai/user-message/stories/user-message.stories.ts b/2nd-gen/packages/swc/patterns/conversational-ai/user-message/stories/user-message.stories.ts
index b458af6d549..b8c9d3beabd 100644
--- a/2nd-gen/packages/swc/patterns/conversational-ai/user-message/stories/user-message.stories.ts
+++ b/2nd-gen/packages/swc/patterns/conversational-ai/user-message/stories/user-message.stories.ts
@@ -143,11 +143,7 @@ export const Content: Story = {
             for an executive update?
           </swc-user-message>
         </swc-conversation-turn>
-        <span
-          style="font-family:var(--swc-sans-serif-font);font-size:var(--swc-font-size-75);color:var(--swc-gray-700);"
-        >
-          Copy
-        </span>
+        <span class="swc-Detail swc-Detail--sizeS">Copy</span>
       </div>
       <div style="display:flex;flex-direction:column;gap:8px;">
         <swc-conversation-turn type="user">
@@ -162,11 +158,7 @@ export const Content: Story = {
             <span slot="subtitle">2026</span>
           </swc-user-message>
         </swc-conversation-turn>
-        <span
-          style="font-family:var(--swc-sans-serif-font);font-size:var(--swc-font-size-75);color:var(--swc-gray-700);"
-        >
-          Card
-        </span>
+        <span class="swc-Detail swc-Detail--sizeS">Card</span>
       </div>
       <div style="display:flex;flex-direction:column;gap:8px;">
         <swc-conversation-turn type="user">
@@ -181,11 +173,7 @@ export const Content: Story = {
             <span slot="subtitle">2026</span>
           </swc-user-message>
         </swc-conversation-turn>
-        <span
-          style="font-family:var(--swc-sans-serif-font);font-size:var(--swc-font-size-75);color:var(--swc-gray-700);"
-        >
-          Media
-        </span>
+        <span class="swc-Detail swc-Detail--sizeS">Media</span>
       </div>
     </div>
   `,
diff --git a/2nd-gen/packages/swc/patterns/conversational-ai/user-message/user-message.css b/2nd-gen/packages/swc/patterns/conversational-ai/user-message/user-message.css
index acbb7ee7243..8bf7e8cd834 100644
--- a/2nd-gen/packages/swc/patterns/conversational-ai/user-message/user-message.css
+++ b/2nd-gen/packages/swc/patterns/conversational-ai/user-message/user-message.css
@@ -35,6 +35,7 @@
   line-height: token("line-height-200");
   color: token("gray-800");
   background: token("gray-50");
+  border: 1px solid transparent;
   border-radius: token("corner-radius-large-default");
 }
 
@@ -98,6 +99,7 @@
   flex-shrink: 0;
   inline-size: 32px;
   block-size: 32px;
+  border: 1px solid transparent;
   border-radius: token("corner-radius-75");
   object-fit: cover;
 }
@@ -109,6 +111,7 @@
   inline-size: 100%;
   min-block-size: 0;
   background: token("gray-100");
+  border: 1px solid transparent;
   border-radius: token("corner-radius-200");
   overflow: hidden;
 }