diff --git a/packages/elements/src/__tests__/__snapshots__/PublicAPI-test.js.snap b/packages/elements/src/__tests__/__snapshots__/PublicAPI-test.js.snap
index 38769efa3c89..d7b217975230 100644
--- a/packages/elements/src/__tests__/__snapshots__/PublicAPI-test.js.snap
+++ b/packages/elements/src/__tests__/__snapshots__/PublicAPI-test.js.snap
@@ -2,9 +2,16 @@
 
 exports[`Public API should only change with a semver change 1`] = `
 Array [
+  "aiAuraEnd",
+  "aiAuraStart",
+  "aiBorderEnd",
+  "aiBorderStart",
+  "aiBorderStrong",
+  "aiDropShadow",
   "aiGradientEnd",
   "aiGradientStart01",
   "aiGradientStart02",
+  "aiInnerShadow",
   "background",
   "backgroundActive",
   "backgroundBrand",
@@ -284,8 +291,6 @@ Array [
   "slugCalloutAuraStartHover01",
   "slugCalloutAuraStartHover02",
   "slugCalloutAuraStartSelected",
-  "slugCalloutBorder01",
-  "slugCalloutBorder02",
   "slugCalloutCaretBottom",
   "slugCalloutCaretBottomBackground",
   "slugCalloutCaretBottomBackgroundActions",
@@ -296,7 +301,6 @@ Array [
   "slugCalloutGradientTop",
   "slugCalloutGradientTopHover",
   "slugCalloutGradientTopSelected",
-  "slugCalloutShadowInner",
   "slugCalloutShadowOuter01",
   "slugCalloutShadowOuter02",
   "slugGradient",
diff --git a/packages/styles/scss/__tests__/theme-test.js b/packages/styles/scss/__tests__/theme-test.js
index c62ae978ff84..aa9580a58723 100644
--- a/packages/styles/scss/__tests__/theme-test.js
+++ b/packages/styles/scss/__tests__/theme-test.js
@@ -149,11 +149,15 @@ describe('@carbon/styles/scss/theme', () => {
         "ai-gradient-start-01",
         "ai-gradient-start-02",
         "ai-gradient-end",
-        "slug-callout-shadow-inner",
         "slug-callout-shadow-outer-01",
         "slug-callout-shadow-outer-02",
-        "slug-callout-border-01",
-        "slug-callout-border-02",
+        "ai-inner-shadow",
+        "ai-aura-start",
+        "ai-aura-end",
+        "ai-border-strong",
+        "ai-border-start",
+        "ai-border-end",
+        "ai-drop-shadow",
         "slug-callout-caret-center",
         "slug-callout-caret-bottom",
         "slug-callout-caret-bottom-background",
diff --git a/packages/styles/scss/components/date-picker/_date-picker.scss b/packages/styles/scss/components/date-picker/_date-picker.scss
index ab29b096bc62..e43aa91dc16a 100644
--- a/packages/styles/scss/components/date-picker/_date-picker.scss
+++ b/packages/styles/scss/components/date-picker/_date-picker.scss
@@ -198,7 +198,7 @@
   }
 
   .#{$prefix}--date-picker-input__wrapper--slug
-    .#{$prefix}--date-picker__input {
+    .#{$prefix}--date-picker__input:not(:has(~ .#{$prefix}--slug--revert)) {
     @include ai-gradient;
 
     padding-inline-end: $spacing-10;
diff --git a/packages/styles/scss/components/fluid-date-picker/_fluid-date-picker.scss b/packages/styles/scss/components/fluid-date-picker/_fluid-date-picker.scss
index 648f67f6fb8e..eda8afe2df88 100644
--- a/packages/styles/scss/components/fluid-date-picker/_fluid-date-picker.scss
+++ b/packages/styles/scss/components/fluid-date-picker/_fluid-date-picker.scss
@@ -407,10 +407,18 @@
   }
 
   .#{$prefix}--date-picker--fluid
-    .#{$prefix}--date-picker-input__wrapper--slug {
+    .#{$prefix}--date-picker-input__wrapper--slug:not(
+      :has(~ .#{$prefix}--slug--revert)
+    ) {
     @include ai-gradient;
   }
 
+  .#{$prefix}--date-picker--fluid
+    .#{$prefix}--date-picker-input__wrapper--slug
+    .#{$prefix}--date-picker__input:not(.cds--date-picker__input--invalid) {
+    border-block-end-color: $ai-border-strong;
+  }
+
   .#{$prefix}--date-picker--fluid
     .#{$prefix}--date-picker-input__wrapper--slug
     .#{$prefix}--date-picker__input,
diff --git a/packages/styles/scss/components/fluid-number-input/_fluid-number-input.scss b/packages/styles/scss/components/fluid-number-input/_fluid-number-input.scss
index 41b9a2257f59..9aef1ec4558a 100644
--- a/packages/styles/scss/components/fluid-number-input/_fluid-number-input.scss
+++ b/packages/styles/scss/components/fluid-number-input/_fluid-number-input.scss
@@ -303,7 +303,10 @@
     padding-inline-end: convert.to-rem(120px);
   }
 
-  .#{$prefix}--number-input--fluid .#{$prefix}--number__input-wrapper--slug {
+  .#{$prefix}--number-input--fluid
+    .#{$prefix}--number__input-wrapper--slug:not(
+      :has(~ .#{$prefix}--slug--revert)
+    ) {
     @include ai-gradient;
   }
 }
diff --git a/packages/styles/scss/components/fluid-text-area/_fluid-text-area.scss b/packages/styles/scss/components/fluid-text-area/_fluid-text-area.scss
index bfad8250ed03..3f3d13295aaf 100644
--- a/packages/styles/scss/components/fluid-text-area/_fluid-text-area.scss
+++ b/packages/styles/scss/components/fluid-text-area/_fluid-text-area.scss
@@ -219,7 +219,10 @@
   }
 
   // Slug styles
-  .#{$prefix}--text-area--fluid .#{$prefix}--text-area__wrapper--slug {
+  .#{$prefix}--text-area--fluid
+    .#{$prefix}--text-area__wrapper--slug:not(
+      :has(~ .#{$prefix}--slug--revert)
+    ) {
     @include ai-gradient;
   }
 
diff --git a/packages/styles/scss/components/list-box/_list-box.scss b/packages/styles/scss/components/list-box/_list-box.scss
index 70b38e46bf0e..dbda8d00cfdd 100644
--- a/packages/styles/scss/components/list-box/_list-box.scss
+++ b/packages/styles/scss/components/list-box/_list-box.scss
@@ -897,10 +897,17 @@ $list-box-menu-width: convert.to-rem(300px);
     transform: translateY(-50%);
   }
 
-  .#{$prefix}--list-box__wrapper--slug .#{$prefix}--list-box {
+  .#{$prefix}--list-box__wrapper--slug
+    .#{$prefix}--list-box:not(:has(.#{$prefix}--slug--revert)) {
     @include ai-gradient;
   }
 
+  .#{$prefix}--list-box__wrapper--slug
+    .#{$prefix}--list-box
+    input[role='combobox'] {
+    border-block-end-color: transparent;
+  }
+
   .#{$prefix}--list-box__wrapper--slug .#{$prefix}--list-box__field,
   .#{$prefix}--list-box__wrapper--slug .#{$prefix}--text-input--empty {
     padding-inline-end: $spacing-10;
diff --git a/packages/styles/scss/components/number-input/_number-input.scss b/packages/styles/scss/components/number-input/_number-input.scss
index c2c0939fe509..c97db1a77b0c 100644
--- a/packages/styles/scss/components/number-input/_number-input.scss
+++ b/packages/styles/scss/components/number-input/_number-input.scss
@@ -445,13 +445,18 @@
     padding-inline-end: convert.to-rem(144px);
   }
 
-  .#{$prefix}--number__input-wrapper--slug input[type='number'],
+  .#{$prefix}--number__input-wrapper--slug
+    input[type='number']:not(:has(~ .#{$prefix}--slug--revert)),
   .#{$prefix}--number__input-wrapper--slug input[type='number']:disabled {
     @include ai-gradient;
 
     padding-inline-end: convert.to-rem(112px);
   }
 
+  .#{$prefix}--number__input-wrapper--slug .#{$prefix}--number__control-btn {
+    border-block-end-color: $ai-border-strong;
+  }
+
   // Skeleton State
   .#{$prefix}--number.#{$prefix}--skeleton {
     @include skeleton;
diff --git a/packages/styles/scss/components/select/_select.scss b/packages/styles/scss/components/select/_select.scss
index 5d1ab7452157..171936076d4b 100644
--- a/packages/styles/scss/components/select/_select.scss
+++ b/packages/styles/scss/components/select/_select.scss
@@ -288,7 +288,8 @@
     transform: translateY(-50%);
   }
 
-  .#{$prefix}--select--slug .#{$prefix}--select-input {
+  .#{$prefix}--select--slug
+    .#{$prefix}--select-input:not(:has(~ .#{$prefix}--slug--revert)) {
     @include ai-gradient;
 
     padding-inline-end: $spacing-10;
diff --git a/packages/styles/scss/components/slug/_slug.scss b/packages/styles/scss/components/slug/_slug.scss
index 96e651b7242c..b1db8389071e 100644
--- a/packages/styles/scss/components/slug/_slug.scss
+++ b/packages/styles/scss/components/slug/_slug.scss
@@ -332,7 +332,7 @@ $sizes: (
     border: 1px solid transparent;
     border-radius: convert.to-rem(8px);
     // Need to make tokens
-    box-shadow: inset 0 -80px 70px -65px $slug-callout-shadow-inner,
+    box-shadow: inset 0 -80px 70px -65px $ai-inner-shadow,
       -40px 30px 100px -25px $slug-callout-shadow-outer-01,
       -60px 80px 60px -45px $slug-callout-shadow-outer-02;
     color: $text-primary;
@@ -368,7 +368,7 @@ $sizes: (
     > .#{$prefix}--popover-caret::before {
     position: absolute;
     display: block;
-    border: 1px solid $slug-callout-border-01;
+    border: 1px solid $ai-border-start;
     background: $background;
     block-size: convert.to-rem(12px);
     clip-path: polygon(98% 0, 0 0, -52% 150%) border-box;
diff --git a/packages/styles/scss/components/text-area/_text-area.scss b/packages/styles/scss/components/text-area/_text-area.scss
index 35e9c93684a6..8ae1cbfdf4ac 100644
--- a/packages/styles/scss/components/text-area/_text-area.scss
+++ b/packages/styles/scss/components/text-area/_text-area.scss
@@ -136,7 +136,8 @@
     transform: translate(0);
   }
 
-  .#{$prefix}--text-area__wrapper--slug .#{$prefix}--text-area {
+  .#{$prefix}--text-area__wrapper--slug
+    .#{$prefix}--text-area:not(:has(~ .#{$prefix}--slug--revert)) {
     @include ai-gradient;
 
     padding-inline-end: $spacing-08;
diff --git a/packages/styles/scss/components/text-input/_text-input.scss b/packages/styles/scss/components/text-input/_text-input.scss
index 18754d74c7c7..691736f863ed 100644
--- a/packages/styles/scss/components/text-input/_text-input.scss
+++ b/packages/styles/scss/components/text-input/_text-input.scss
@@ -423,7 +423,8 @@
     transform: translateY(-50%);
   }
 
-  .#{$prefix}--text-input__field-wrapper--slug .#{$prefix}--text-input {
+  .#{$prefix}--text-input__field-wrapper--slug
+    .#{$prefix}--text-input:not(:has(~ .#{$prefix}--slug--revert)) {
     @include ai-gradient;
 
     padding-inline-end: $spacing-08;
diff --git a/packages/styles/scss/utilities/_ai-gradient.scss b/packages/styles/scss/utilities/_ai-gradient.scss
index 12f4bc7df619..004e4d66f900 100644
--- a/packages/styles/scss/utilities/_ai-gradient.scss
+++ b/packages/styles/scss/utilities/_ai-gradient.scss
@@ -11,10 +11,10 @@
 /// Adds AI gradient styles to a component
 /// @access private
 /// @param {String} $direction  - Direction of gradient from: `left`, `right`, `top`, and `bottom`
-/// @param {Number} $width - Percentage width of gradient with regards to parent component
+/// @param {Number} $span - Percentage span of gradient with regards to parent component
 /// @example @include ai-gradient('right', '33%');
 /// @group utilities
-@mixin ai-gradient($direction: 'right', $width: 33%) {
+@mixin ai-gradient($direction: 'bottom', $span: 50%) {
   $deg: 0;
   @if $direction == 'bottom' {
     $deg: 0deg;
@@ -27,17 +27,14 @@
   }
 
   background-image: linear-gradient(
-      $deg,
-      theme.$ai-gradient-start-01 0%,
-      theme.$ai-gradient-end $width,
-      transparent 100%
-    ),
-    linear-gradient(
-      $deg,
-      theme.$ai-gradient-start-02 0%,
-      theme.$ai-gradient-end $width,
-      transparent 100%
-    );
+    $deg,
+    theme.$ai-inner-shadow 0%,
+    15%,
+    theme.$ai-aura-end $span,
+    transparent 100%
+  );
+
+  border-block-end-color: theme.$ai-border-strong;
 }
 
 /// Experimental - name and structure subject to change. Use at your own risk!
@@ -45,7 +42,7 @@
 /// @access private
 /// @example @include callout-gradient();
 /// @param {String} $type  - Type of gradient, either 'default', 'selected' or 'hover'
-/// @param {Number} $type  - specify a pixel offset the callout should start from the bottom
+/// @param {Number} $offset  - specify a pixel offset the callout should start from the bottom
 /// @group utilities
 @mixin callout-gradient($type: 'default', $offset: 0) {
   $start: 0%;
@@ -88,16 +85,12 @@
   } @else {
     background: linear-gradient(
           to top,
-          theme.$slug-callout-aura-start $start,
-          theme.$slug-callout-aura-end 50%
+          theme.$ai-aura-start $start,
+          theme.$ai-aura-end 50%
         )
         padding-box,
       linear-gradient(to top, theme.$background, theme.$background) padding-box,
-      linear-gradient(
-          to bottom,
-          theme.$slug-callout-border-01,
-          theme.$slug-callout-border-02
-        )
+      linear-gradient(to bottom, theme.$ai-border-start, theme.$ai-border-end)
         border-box,
       // Needed to underlay the transparent border
       linear-gradient(to top, theme.$background, theme.$background)
diff --git a/packages/themes/src/g10.js b/packages/themes/src/g10.js
index 5e28392858d2..bca3d87b8cd8 100644
--- a/packages/themes/src/g10.js
+++ b/packages/themes/src/g10.js
@@ -223,26 +223,31 @@ export const slugCalloutGradientTopSelected = rgba(gray20, 0.85);
 export const slugCalloutGradientBottomSelected = rgba(gray20Hover, 0.85);
 export const slugCalloutAuraStartSelected = rgba(blue10, 0.6);
 export const slugCalloutAuraEndSelected = rgba(white, 0);
-// Linear gradient tokens
-export const aiGradientStart01 = rgba(coolGray10, 0.5);
-export const aiGradientStart02 = rgba(blue10, 0.5);
-export const aiGradientEnd = rgba(white, 0);
 
-// Phase 2 - new
-export const slugCalloutShadowInner = rgba(blue50, 0.2);
+//// Phase 2 - new \\\\
+// Shared
+export const aiInnerShadow = rgba(blue50, 0.2);
+export const aiAuraStart = rgba(blue50, 0.1);
+export const aiAuraEnd = rgba(white, 0);
+export const aiBorderStrong = blue50;
+export const aiBorderStart = blue40;
+export const aiBorderEnd = blue20;
+export const aiDropShadow = rgba(blue60, 0.32);
+
+// Callout
 export const slugCalloutShadowOuter01 = rgba(blue70, 0.25);
 export const slugCalloutShadowOuter02 = rgba(black, 0.1);
 
-export const slugCalloutBorder01 = blue40;
-export const slugCalloutBorder02 = blue20;
-
-// Changed
-export const slugCalloutAuraStart = rgba(blue50, 0.1);
-export const slugCalloutAuraEnd = rgba(white, 0);
+//// Changed
+export const slugCalloutAuraStart = aiAuraStart;
+export const slugCalloutAuraEnd = aiAuraEnd;
 
-// Not used in phase 2 / possibly remove?
+//// Not used in phase 2 / possibly remove?
 export const slugCalloutGradientTop = rgba(gray10, 0.85);
 export const slugCalloutGradientBottom = rgba(gray20, 0.85);
+export const aiGradientStart01 = rgba(coolGray10, 0.5);
+export const aiGradientStart02 = rgba(blue10, 0.5);
+export const aiGradientEnd = rgba(white, 0);
 
 // One off tokens for caret
 export const slugCalloutCaretCenter = '#A7C7FF';
diff --git a/packages/themes/src/g100.js b/packages/themes/src/g100.js
index b70517d32583..f4a66754f1ee 100644
--- a/packages/themes/src/g100.js
+++ b/packages/themes/src/g100.js
@@ -228,26 +228,31 @@ export const slugCalloutGradientTopSelected = rgba(gray80, 0.85);
 export const slugCalloutGradientBottomSelected = rgba(gray80Hover, 0.85);
 export const slugCalloutAuraStartSelected = rgba(blue20, 0.2);
 export const slugCalloutAuraEndSelected = rgba(gray100, 0);
-// Linear gradient tokens
-export const aiGradientStart01 = rgba(blue20, 0.2);
-export const aiGradientStart02 = 'transparent';
-export const aiGradientEnd = 'rgba(38, 38, 38, 0)';
 
-// Phase 2 - new
-export const slugCalloutShadowInner = rgba(blue50, 0.2);
+//// Phase 2 - new \\\\
+// Shared
+export const aiInnerShadow = rgba(blue50, 0.2);
+export const aiAuraStart = rgba(blue50, 0.1);
+export const aiAuraEnd = rgba(black, 0);
+export const aiBorderStrong = blue40;
+export const aiBorderStart = blue50;
+export const aiBorderEnd = rgba(blue30, 0.24);
+export const aiDropShadow = rgba(blue60, 0.32);
+
+// Callout
 export const slugCalloutShadowOuter01 = rgba(blue80, 0.25);
 export const slugCalloutShadowOuter02 = rgba(black, 0.65);
 
-export const slugCalloutBorder01 = blue50;
-export const slugCalloutBorder02 = rgba(blue30, 0.25);
-
-// Changed
-export const slugCalloutAuraStart = rgba(blue50, 0.1);
-export const slugCalloutAuraEnd = rgba(white, 0);
+//// Changed
+export const slugCalloutAuraStart = aiAuraStart;
+export const slugCalloutAuraEnd = aiAuraEnd;
 
-// Not used in phase 2 / possibly remove?
+//// Not used in phase 2 / possibly remove?
 export const slugCalloutGradientTop = rgba(gray100, 0.85);
 export const slugCalloutGradientBottom = rgba(gray90, 0.85);
+export const aiGradientStart01 = rgba(blue20, 0.2);
+export const aiGradientStart02 = 'transparent';
+export const aiGradientEnd = 'rgba(38, 38, 38, 0)';
 
 // One off tokens for caret
 export const slugCalloutCaretCenter = '#3F68AF';
diff --git a/packages/themes/src/g90.js b/packages/themes/src/g90.js
index 04892d8f7290..c8f52c99d48c 100644
--- a/packages/themes/src/g90.js
+++ b/packages/themes/src/g90.js
@@ -12,6 +12,7 @@ import {
   blue40,
   blue60,
   blue70,
+  blue80,
 
   // Gray
   gray10,
@@ -35,7 +36,6 @@ import {
   // Support
   blue30,
   blue50,
-  blue80,
   green40,
   green50,
   yellow30,
@@ -229,26 +229,31 @@ export const slugCalloutGradientTopSelected = rgba(gray80, 0.85);
 export const slugCalloutGradientBottomSelected = rgba(gray80Hover, 0.85);
 export const slugCalloutAuraStartSelected = rgba(blue20, 0.2);
 export const slugCalloutAuraEndSelected = rgba(gray100, 0);
-// Linear gradient tokens
-export const aiGradientStart01 = rgba(blue20, 0.2);
-export const aiGradientStart02 = 'transparent';
-export const aiGradientEnd = 'rgba(38, 38, 38, 0)';
 
-// Phase 2 - new
-export const slugCalloutShadowInner = rgba(blue50, 0.2);
+//// Phase 2 - new \\\\
+// Shared
+export const aiInnerShadow = rgba(blue50, 0.2);
+export const aiAuraStart = rgba(blue50, 0.1);
+export const aiAuraEnd = rgba(black, 0);
+export const aiBorderStrong = blue40;
+export const aiBorderStart = blue50;
+export const aiBorderEnd = rgba(blue30, 0.24);
+export const aiDropShadow = rgba(blue60, 0.32);
+
+// Callout
 export const slugCalloutShadowOuter01 = rgba(blue80, 0.25);
 export const slugCalloutShadowOuter02 = rgba(black, 0.65);
 
-export const slugCalloutBorder01 = blue50;
-export const slugCalloutBorder02 = rgba(blue30, 0.25);
+//// Changed
+export const slugCalloutAuraStart = aiAuraStart;
+export const slugCalloutAuraEnd = aiAuraEnd;
 
-// Changed
-export const slugCalloutAuraStart = rgba(blue50, 0.1);
-export const slugCalloutAuraEnd = rgba(white, 0);
-
-// Not used in phase 2 / possibly remove?
+//// Not used in phase 2 / possibly remove?
 export const slugCalloutGradientTop = rgba(gray100, 0.85);
 export const slugCalloutGradientBottom = rgba(gray90, 0.85);
+export const aiGradientStart01 = rgba(blue20, 0.2);
+export const aiGradientStart02 = 'transparent';
+export const aiGradientEnd = 'rgba(38, 38, 38, 0)';
 
 // One off tokens for caret
 export const slugCalloutCaretCenter = '#456FB5';
diff --git a/packages/themes/src/tokens/__tests__/__snapshots__/v11-test.js.snap b/packages/themes/src/tokens/__tests__/__snapshots__/v11-test.js.snap
index 9f4398ca9ef3..7660cf661d58 100644
--- a/packages/themes/src/tokens/__tests__/__snapshots__/v11-test.js.snap
+++ b/packages/themes/src/tokens/__tests__/__snapshots__/v11-test.js.snap
@@ -260,11 +260,15 @@ Array [
   "ai-gradient-start-01",
   "ai-gradient-start-02",
   "ai-gradient-end",
-  "slug-callout-shadow-inner",
   "slug-callout-shadow-outer-01",
   "slug-callout-shadow-outer-02",
-  "slug-callout-border-01",
-  "slug-callout-border-02",
+  "ai-inner-shadow",
+  "ai-aura-start",
+  "ai-aura-end",
+  "ai-border-strong",
+  "ai-border-start",
+  "ai-border-end",
+  "ai-drop-shadow",
   "slug-callout-caret-center",
   "slug-callout-caret-bottom",
   "slug-callout-caret-bottom-background",
diff --git a/packages/themes/src/tokens/__tests__/metadata-test.js b/packages/themes/src/tokens/__tests__/metadata-test.js
index b31d211167b9..4f4b819ae607 100644
--- a/packages/themes/src/tokens/__tests__/metadata-test.js
+++ b/packages/themes/src/tokens/__tests__/metadata-test.js
@@ -1014,23 +1014,39 @@ test('metadata', () => {
           "type": "color",
         },
         Object {
-          "name": "slug-callout-shadow-inner",
+          "name": "slug-callout-shadow-outer-01",
           "type": "color",
         },
         Object {
-          "name": "slug-callout-shadow-outer-01",
+          "name": "slug-callout-shadow-outer-02",
           "type": "color",
         },
         Object {
-          "name": "slug-callout-shadow-outer-02",
+          "name": "ai-inner-shadow",
+          "type": "color",
+        },
+        Object {
+          "name": "ai-aura-start",
+          "type": "color",
+        },
+        Object {
+          "name": "ai-aura-end",
+          "type": "color",
+        },
+        Object {
+          "name": "ai-border-strong",
+          "type": "color",
+        },
+        Object {
+          "name": "ai-border-start",
           "type": "color",
         },
         Object {
-          "name": "slug-callout-border-01",
+          "name": "ai-border-end",
           "type": "color",
         },
         Object {
-          "name": "slug-callout-border-02",
+          "name": "ai-drop-shadow",
           "type": "color",
         },
         Object {
diff --git a/packages/themes/src/tokens/v11TokenGroup.js b/packages/themes/src/tokens/v11TokenGroup.js
index 1c50da8ce6f5..69b1d16dc56e 100644
--- a/packages/themes/src/tokens/v11TokenGroup.js
+++ b/packages/themes/src/tokens/v11TokenGroup.js
@@ -368,11 +368,16 @@ export const ai = TokenGroup.create({
     'ai-gradient-start-02',
     'ai-gradient-end',
     // Phase 2
-    'slug-callout-shadow-inner',
     'slug-callout-shadow-outer-01',
     'slug-callout-shadow-outer-02',
-    'slug-callout-border-01',
-    'slug-callout-border-02',
+    // Linear gradient refactor
+    'ai-inner-shadow',
+    'ai-aura-start',
+    'ai-aura-end',
+    'ai-border-strong',
+    'ai-border-start',
+    'ai-border-end',
+    'ai-drop-shadow',
     // Caret tokens
     'slug-callout-caret-center',
     'slug-callout-caret-bottom',
diff --git a/packages/themes/src/white.js b/packages/themes/src/white.js
index e55813759ddd..ba32444d17af 100644
--- a/packages/themes/src/white.js
+++ b/packages/themes/src/white.js
@@ -223,26 +223,31 @@ export const slugCalloutGradientTopSelected = rgba(gray20, 0.85);
 export const slugCalloutGradientBottomSelected = rgba(gray20Hover, 0.85);
 export const slugCalloutAuraStartSelected = rgba(blue10, 0.6);
 export const slugCalloutAuraEndSelected = rgba(white, 0);
-// Linear gradient tokens
-export const aiGradientStart01 = rgba(coolGray10, 0.5);
-export const aiGradientStart02 = rgba(blue10, 0.5);
-export const aiGradientEnd = rgba(white, 0);
 
-// Phase 2 - new
-export const slugCalloutShadowInner = rgba(blue50, 0.2);
+//// Phase 2 - new \\\\
+// Shared
+export const aiInnerShadow = rgba(blue50, 0.2);
+export const aiAuraStart = rgba(blue50, 0.1);
+export const aiAuraEnd = rgba(white, 0);
+export const aiBorderStrong = blue50;
+export const aiBorderStart = blue40;
+export const aiBorderEnd = blue20;
+export const aiDropShadow = rgba(blue60, 0.32);
+
+// Callout
 export const slugCalloutShadowOuter01 = rgba(blue70, 0.25);
 export const slugCalloutShadowOuter02 = rgba(black, 0.1);
 
-export const slugCalloutBorder01 = blue40;
-export const slugCalloutBorder02 = blue20;
-
-// Changed
-export const slugCalloutAuraStart = rgba(blue50, 0.1);
-export const slugCalloutAuraEnd = rgba(white, 0);
+//// Changed
+export const slugCalloutAuraStart = aiAuraStart;
+export const slugCalloutAuraEnd = aiAuraEnd;
 
-// Not used in phase 2 / possibly remove?
+//// Not used in phase 2 / possibly remove?
 export const slugCalloutGradientTop = rgba(gray10, 0.85);
 export const slugCalloutGradientBottom = rgba(gray20, 0.85);
+export const aiGradientStart01 = rgba(coolGray10, 0.5);
+export const aiGradientStart02 = rgba(blue10, 0.5);
+export const aiGradientEnd = rgba(white, 0);
 
 // One off tokens for caret
 export const slugCalloutCaretCenter = '#A7C7FF';