diff --git a/packages/elements/src/__tests__/__snapshots__/PublicAPI-test.js.snap b/packages/elements/src/__tests__/__snapshots__/PublicAPI-test.js.snap
index 4fc8fdf09a26..81a38fcd9baf 100644
--- a/packages/elements/src/__tests__/__snapshots__/PublicAPI-test.js.snap
+++ b/packages/elements/src/__tests__/__snapshots__/PublicAPI-test.js.snap
@@ -277,9 +277,19 @@ Array [
   "slugBackground",
   "slugBackgroundHover",
   "slugCalloutAuraEnd",
+  "slugCalloutAuraEndHover01",
+  "slugCalloutAuraEndHover02",
+  "slugCalloutAuraEndSelected",
   "slugCalloutAuraStart",
+  "slugCalloutAuraStartHover01",
+  "slugCalloutAuraStartHover02",
+  "slugCalloutAuraStartSelected",
   "slugCalloutGradientBottom",
+  "slugCalloutGradientBottomHover",
+  "slugCalloutGradientBottomSelected",
   "slugCalloutGradientTop",
+  "slugCalloutGradientTopHover",
+  "slugCalloutGradientTopSelected",
   "slugGradient",
   "slugGradientHover",
   "slugHollowHover",
diff --git a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
index df340fa99a63..43e93b4f6246 100644
--- a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
+++ b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
@@ -584,6 +584,9 @@ Map {
       "disabled": Object {
         "type": "bool",
       },
+      "hasRoundedCorners": Object {
+        "type": "bool",
+      },
       "href": Object {
         "type": "string",
       },
@@ -3081,6 +3084,9 @@ Map {
       "expanded": Object {
         "type": "bool",
       },
+      "hasRoundedCorners": Object {
+        "type": "bool",
+      },
       "id": Object {
         "type": "string",
       },
@@ -6646,6 +6652,9 @@ Map {
       "disabled": Object {
         "type": "bool",
       },
+      "hasRoundedCorners": Object {
+        "type": "bool",
+      },
       "id": Object {
         "type": "string",
       },
@@ -6665,6 +6674,9 @@ Map {
       "selected": Object {
         "type": "bool",
       },
+      "slug": Object {
+        "type": "node",
+      },
       "tabIndex": Object {
         "type": "number",
       },
@@ -8591,7 +8603,13 @@ Map {
       "className": Object {
         "type": "string",
       },
+      "hasRoundedCorners": Object {
+        "type": "bool",
+      },
       "light": [Function],
+      "slug": Object {
+        "type": "node",
+      },
     },
     "render": [Function],
   },
diff --git a/packages/react/src/components/Tile/Tile.stories.js b/packages/react/src/components/Tile/Tile.stories.js
index dd7de3a3d573..f46063a6fcf7 100644
--- a/packages/react/src/components/Tile/Tile.stories.js
+++ b/packages/react/src/components/Tile/Tile.stories.js
@@ -23,7 +23,15 @@ import {
   TileBelowTheFoldContent,
 } from './';
 import TileGroup from '../TileGroup/TileGroup';
-import { Download } from '@carbon/icons-react';
+import { IconButton } from '../IconButton';
+import { Slug, SlugContent, SlugActions } from '../Slug';
+import {
+  Download,
+  View,
+  FolderOpen,
+  Folders,
+  ArrowRight,
+} from '@carbon/icons-react';
 
 export default {
   title: 'Components/Tile',
@@ -57,6 +65,159 @@ export const Default = () => {
   );
 };
 
+export const SlugTest = (args) => {
+  const slug = (
+    <Slug className="slug-container">
+      <SlugContent>
+        <div>
+          <p className="secondary">AI Explained</p>
+          <h1>84%</h1>
+          <p className="secondary bold">Confidence score</p>
+          <p className="secondary">
+            Lorem ipsum dolor sit amet, di os consectetur adipiscing elit, sed
+            do eiusmod tempor incididunt ut fsil labore et dolore magna aliqua.
+          </p>
+          <hr />
+          <p className="secondary">Model type</p>
+          <p className="bold">Foundation model</p>
+        </div>
+        <SlugActions>
+          <IconButton kind="ghost" label="View">
+            <View />
+          </IconButton>
+          <IconButton kind="ghost" label="Open Folder">
+            <FolderOpen />
+          </IconButton>
+          <IconButton kind="ghost" label="Folders">
+            <Folders />
+          </IconButton>
+          <Button>View literature</Button>
+        </SlugActions>
+      </SlugContent>
+    </Slug>
+  );
+
+  return (
+    <div className="slug-tile-container">
+      <Tile slug={slug} id="tile-1" {...args}>
+        <h4>Title</h4>
+        <p>
+          Lorem ipsum dolor sit amet consectetur. Posuere duis fermentum sit at
+          consectetur turpis mauris gravida penatibus.
+        </p>
+        <div className="ai-data">
+          <div className="data-container">
+            <p>Data Quality</p>
+            <h3>85%</h3>
+          </div>
+          <div className="data-container">
+            <p>Label text</p>
+            <h3>16%</h3>
+          </div>
+        </div>
+      </Tile>
+      <ClickableTile
+        href="https://www.carbondesignsystem.com/"
+        slug
+        id="tile-click"
+        renderIcon={ArrowRight}
+        {...args}>
+        <h4>Title</h4>
+        <p>
+          Lorem ipsum dolor sit amet consectetur. Posuere duis fermentum sit at
+          consectetur turpis mauris gravida penatibus.
+        </p>
+        <div className="ai-data">
+          <div className="data-container">
+            <p>Data Quality</p>
+            <h3>85%</h3>
+          </div>
+          <div className="data-container">
+            <p>Label text</p>
+            <h3>16%</h3>
+          </div>
+        </div>
+      </ClickableTile>
+      <SelectableTile
+        id="selectable-tile-1"
+        name="tiles"
+        value="selectable"
+        slug={slug}
+        {...args}>
+        <h4>Title</h4>
+        <p>
+          Lorem ipsum dolor sit amet consectetur. Posuere duis fermentum sit at
+          consectetur turpis mauris gravida penatibus.
+        </p>
+        <div className="ai-data">
+          <div className="data-container">
+            <p>Data Quality</p>
+            <h3>85%</h3>
+          </div>
+          <div className="data-container">
+            <p>Label text</p>
+            <h3>16%</h3>
+          </div>
+        </div>
+      </SelectableTile>
+      <ExpandableTile
+        id="expandable-tile-1"
+        tileCollapsedIconText="Interact to Expand tile"
+        tileExpandedIconText="Interact to Collapse tile"
+        slug={slug}
+        {...args}>
+        <TileAboveTheFoldContent>
+          <h4>Title</h4>
+          <p>
+            Lorem ipsum dolor sit amet consectetur. Posuere duis fermentum sit
+            at consectetur turpis mauris gravida penatibus.
+          </p>
+          <div className="ai-data">
+            <div className="data-container">
+              <p>Data Quality</p>
+              <h3>85%</h3>
+            </div>
+            <div className="data-container">
+              <p>Label text</p>
+              <h3>16%</h3>
+            </div>
+          </div>
+        </TileAboveTheFoldContent>
+        <TileBelowTheFoldContent>
+          <h6>Expanded Section</h6>
+          <p>
+            Lorem ipsum dolor sit amet consectetur. Posuere duis fermentum sit
+            at consectetur turpis mauris.
+          </p>
+        </TileBelowTheFoldContent>
+      </ExpandableTile>
+    </div>
+  );
+};
+
+SlugTest.argTypes = {
+  hasRoundedCorners: {
+    control: {
+      type: 'boolean',
+    },
+  },
+  children: {
+    table: {
+      disable: true,
+    },
+  },
+  className: {
+    table: {
+      disable: true,
+    },
+  },
+  slug: {
+    table: {
+      disable: true,
+    },
+  },
+};
+
 export const DefaultWithLayer = () => (
   <WithLayer>
     {(layer) => (
diff --git a/packages/react/src/components/Tile/Tile.tsx b/packages/react/src/components/Tile/Tile.tsx
index 3f84d76105d4..2fb559804d78 100644
--- a/packages/react/src/components/Tile/Tile.tsx
+++ b/packages/react/src/components/Tile/Tile.tsx
@@ -9,7 +9,7 @@ import React, {
   type ChangeEvent,
   type ComponentType,
 } from 'react';
-import PropTypes from 'prop-types';
+import PropTypes, { ReactNodeLike } from 'prop-types';
 import cx from 'classnames';
 import {
   Checkbox,
@@ -38,22 +38,45 @@ export interface TileProps extends HTMLAttributes<HTMLDivElement> {
   className?: string;
   /** @deprecated */
   light?: boolean;
+
+  /**
+   * Specify if the `Tile` component should be rendered with rounded corners. Only valid
+   * when `slug` prop is present
+   */
+  hasRoundedCorners?: boolean;
+
+  /**
+   * Provide a `Slug` component to be rendered inside the `SelectableTile` component
+   */
+  slug?: ReactNodeLike;
 }
 
 export const Tile = React.forwardRef<HTMLDivElement, TileProps>(function Tile(
-  { children, className, light = false, ...rest },
+  {
+    children,
+    className,
+    light = false,
+    slug,
+    hasRoundedCorners = false,
+    ...rest
+  },
   ref
 ) {
   const prefix = usePrefix();
 
   const tileClasses = cx(
     `${prefix}--tile`,
-    light && `${prefix}--tile--light`,
+    {
+      [`${prefix}--tile--light`]: light,
+      [`${prefix}--tile--slug`]: slug,
+      [`${prefix}--tile--slug-rounded`]: slug && hasRoundedCorners,
+    },
     className
   );
   return (
     <div className={tileClasses} ref={ref} {...rest}>
       {children}
+      {slug}
     </div>
   );
 });
@@ -70,6 +93,12 @@ Tile.propTypes = {
    */
   className: PropTypes.string,
 
+  /**
+   * Specify if the `Tile` component should be rendered with rounded corners. Only valid
+   * when `slug` prop is present
+   */
+  hasRoundedCorners: PropTypes.bool,
+
   /**
    * `true` to use the light version. For use on $ui-01 backgrounds only.
    * Don't use this to make tile background color same as container background color.
@@ -80,6 +109,11 @@ Tile.propTypes = {
     PropTypes.bool,
     'The `light` prop for `Tile` is no longer needed and has been deprecated. It will be removed in the next major release. Use the Layer component instead.'
   ),
+
+  /**
+   * Provide a `Slug` component to be rendered inside the `Tile` component
+   */
+  slug: PropTypes.node,
 };
 
 export interface ClickableTileProps extends HTMLAttributes<HTMLAnchorElement> {
@@ -99,6 +133,12 @@ export interface ClickableTileProps extends HTMLAttributes<HTMLAnchorElement> {
    */
   disabled?: boolean;
 
+  /**
+   * Specify if the `ClickableTile` component should be rendered with rounded corners.
+   * Only valid when `slug` prop is present
+   */
+  hasRoundedCorners?: boolean;
+
   /**
    * The href for the link.
    */
@@ -123,6 +163,11 @@ export interface ClickableTileProps extends HTMLAttributes<HTMLAnchorElement> {
    * The rel property for the link.
    */
   rel?: string;
+
+  /**
+   * Specify if a `Slug` icon should be rendered inside the `ClickableTile`
+   */
+  slug?: boolean;
 }
 
 export const ClickableTile = React.forwardRef<
@@ -139,6 +184,8 @@ export const ClickableTile = React.forwardRef<
     onClick = () => {},
     onKeyDown = () => {},
     renderIcon: Icon,
+    hasRoundedCorners,
+    slug,
     ...rest
   },
   ref
@@ -147,8 +194,12 @@ export const ClickableTile = React.forwardRef<
   const classes = cx(
     `${prefix}--tile`,
     `${prefix}--tile--clickable`,
-    clicked && `${prefix}--tile--is-clicked`,
-    light && `${prefix}--tile--light`,
+    {
+      [`${prefix}--tile--is-clicked`]: clicked,
+      [`${prefix}--tile--light`]: light,
+      [`${prefix}--tile--slug`]: slug,
+      [`${prefix}--tile--slug-rounded`]: slug && hasRoundedCorners,
+    },
     className
   );
 
@@ -168,6 +219,24 @@ export const ClickableTile = React.forwardRef<
     onKeyDown(evt);
   }
 
+  // To Do: Replace with an an icon from `@carbon/react`
+  // since the hollow slug in `ClickableTile` is not interactive
+  const hollowSlugIcon = (
+    <svg
+      className={`${prefix}--tile--slug-icon`}
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg">
+      <rect x="0.5" y="0.5" width="23" height="23" />
+      <path
+        d="M13.2436 16H11.5996L10.9276 13.864H7.95164L7.29164 16H5.68364L8.49164 7.624H10.4596L13.2436 16ZM10.5436 12.508L9.46364 9.064H9.40364L8.33564 12.508H10.5436ZM17.9341 16H14.1301V14.728H15.2341V8.896H14.1301V7.624H17.9341V8.896H16.8181V14.728H17.9341V16Z"
+        fill="#161616"
+      />
+    </svg>
+  );
+
   const v12DefaultIcons = useFeatureFlag('enable-v12-tile-default-icons');
   if (v12DefaultIcons) {
     if (!Icon) {
@@ -195,7 +264,12 @@ export const ClickableTile = React.forwardRef<
       ref={ref}
       disabled={disabled}
       {...rest}>
-      {children}
+      {slug ? (
+        <div className={`${prefix}--tile-content`}>{children}</div>
+      ) : (
+        children
+      )}
+      {slug && hollowSlugIcon}
       {Icon && <Icon className={iconClasses} aria-hidden="true" />}
     </Link>
   );
@@ -223,6 +297,12 @@ ClickableTile.propTypes = {
    */
   disabled: PropTypes.bool,
 
+  /**
+   * Specify if the `ClickableTile` component should be rendered with rounded corners.
+   * Only valid when `slug` prop is present
+   */
+  hasRoundedCorners: PropTypes.bool,
+
   /**
    * The href for the link.
    */
@@ -272,6 +352,12 @@ export interface SelectableTileProps extends HTMLAttributes<HTMLDivElement> {
    */
   disabled?: boolean;
 
+  /**
+   * Specify if the `SelectableTile` component should be rendered with rounded corners.
+   * Only valid when `slug` prop is present
+   */
+  hasRoundedCorners?: boolean;
+
   /**
    * The ID of the `<input>`.
    */
@@ -303,6 +389,11 @@ export interface SelectableTileProps extends HTMLAttributes<HTMLDivElement> {
    */
   selected?: boolean;
 
+  /**
+   * Provide a `Slug` component to be rendered inside the `SelectableTile` component
+   */
+  slug?: ReactNodeLike;
+
   /**
    * Specify the tab index of the wrapper element
    */
@@ -336,6 +427,8 @@ export const SelectableTile = React.forwardRef<
     selected = false,
     tabIndex = 0,
     title = 'title',
+    slug,
+    hasRoundedCorners,
     ...rest
   },
   ref
@@ -351,9 +444,13 @@ export const SelectableTile = React.forwardRef<
   const classes = cx(
     `${prefix}--tile`,
     `${prefix}--tile--selectable`,
-    isSelected && `${prefix}--tile--is-selected`,
-    light && `${prefix}--tile--light`,
-    disabled && `${prefix}--tile--disabled`,
+    {
+      [`${prefix}--tile--is-selected`]: isSelected,
+      [`${prefix}--tile--light`]: light,
+      [`${prefix}--tile--disabled`]: disabled,
+      [`${prefix}--tile--slug`]: slug,
+      [`${prefix}--tile--slug-rounded`]: slug && hasRoundedCorners,
+    },
     className
   );
 
@@ -361,6 +458,9 @@ export const SelectableTile = React.forwardRef<
   function handleOnClick(evt) {
     evt.preventDefault();
     evt?.persist?.();
+    if (slug && slugRef.current && slugRef.current.contains(evt.target)) {
+      return;
+    }
     setIsSelected(!isSelected);
     clickHandler(evt);
     onChange(evt);
@@ -387,6 +487,16 @@ export const SelectableTile = React.forwardRef<
     setPrevSelected(selected);
   }
 
+  // Slug is always size `xs`
+  const slugRef = useRef<HTMLInputElement>(null);
+  let normalizedSlug;
+  if (slug) {
+    normalizedSlug = React.cloneElement(slug as React.ReactElement<any>, {
+      size: 'xs',
+      ref: slugRef,
+    });
+  }
+
   return (
     // eslint-disable-next-line jsx-a11y/interactive-supports-focus
     <div
@@ -409,11 +519,11 @@ export const SelectableTile = React.forwardRef<
       <Text as="label" htmlFor={id} className={`${prefix}--tile-content`}>
         {children}
       </Text>
+      {normalizedSlug}
     </div>
   );
 });
 
-SelectableTile.displayName = 'SelectableTile';
 SelectableTile.propTypes = {
   children: PropTypes.node,
   className: PropTypes.string,
@@ -423,6 +533,12 @@ SelectableTile.propTypes = {
    */
   disabled: PropTypes.bool,
 
+  /**
+   * Specify if the `SelectableTile` component should be rendered with rounded corners.
+   * Only valid when `slug` prop is present
+   */
+  hasRoundedCorners: PropTypes.bool,
+
   /**
    * The ID of the `<input>`.
    */
@@ -463,6 +579,11 @@ SelectableTile.propTypes = {
    */
   selected: PropTypes.bool,
 
+  /**
+   * Provide a `Slug` component to be rendered inside the `SelectableTile` component
+   */
+  slug: PropTypes.node,
+
   /**
    * Specify the tab index of the wrapper element
    */
@@ -492,6 +613,12 @@ export interface ExpandableTileProps extends HTMLAttributes<HTMLDivElement> {
    */
   expanded?: boolean;
 
+  /**
+   * Specify if the `ExpandableTile` component should be rendered with rounded corners.
+   * Only valid when `slug` prop is present
+   */
+  hasRoundedCorners?: boolean;
+
   /**
    * An ID that can be provided to aria-labelledby
    */
@@ -507,6 +634,11 @@ export interface ExpandableTileProps extends HTMLAttributes<HTMLDivElement> {
    */
   onKeyUp?(event: KeyboardEvent): void;
 
+  /**
+   * Provide a `Slug` component to be rendered inside the `ExpandableTile` component
+   */
+  slug?: ReactNodeLike;
+
   /**
    * The `tabindex` attribute.
    */
@@ -555,6 +687,8 @@ export const ExpandableTile = React.forwardRef<
     tileCollapsedLabel,
     tileExpandedLabel,
     light,
+    slug,
+    hasRoundedCorners,
     ...rest
   },
   forwardRef
@@ -632,8 +766,12 @@ export const ExpandableTile = React.forwardRef<
     `${prefix}--tile`,
     `${prefix}--tile--expandable`,
     `${prefix}--tile--expandable--interactive`,
-    isExpanded && `${prefix}--tile--is-expanded`,
-    light && `${prefix}--tile--light`,
+    {
+      [`${prefix}--tile--is-expanded`]: isExpanded,
+      [`${prefix}--tile--light`]: light,
+      [`${prefix}--tile--slug`]: slug,
+      [`${prefix}--tile--slug-rounded`]: slug && hasRoundedCorners,
+    },
     className
   );
 
@@ -673,11 +811,12 @@ export const ExpandableTile = React.forwardRef<
       !getInteractiveContent(belowTheFold.current) &&
       !getRoleContent(belowTheFold.current) &&
       !getInteractiveContent(aboveTheFold.current) &&
-      !getRoleContent(aboveTheFold.current)
+      !getRoleContent(aboveTheFold.current) &&
+      !slug
     ) {
       setInteractive(false);
     }
-  }, []);
+  }, [slug]);
 
   useIsomorphicEffect(() => {
     if (!tile.current) {
@@ -707,6 +846,14 @@ export const ExpandableTile = React.forwardRef<
 
   const belowTheFoldId = useId('expandable-tile-interactive');
 
+  // Slug is always size `xs`
+  let normalizedSlug;
+  if (slug) {
+    normalizedSlug = React.cloneElement(slug as React.ReactElement<any>, {
+      size: 'xs',
+    });
+  }
+
   return interactive ? (
     <div
       // @ts-expect-error: Needlesly strict & deep typing for the element type
@@ -714,6 +861,7 @@ export const ExpandableTile = React.forwardRef<
       className={interactiveClassNames}
       {...rest}>
       <div ref={tileContent}>
+        {normalizedSlug}
         <div ref={aboveTheFold} className={`${prefix}--tile-content`}>
           {childrenAsArray[0]}
         </div>
@@ -772,6 +920,12 @@ ExpandableTile.propTypes = {
    */
   expanded: PropTypes.bool,
 
+  /**
+   * Specify if the `ExpandableTile` component should be rendered with rounded corners.
+   * Only valid when `slug` prop is present
+   */
+  hasRoundedCorners: PropTypes.bool,
+
   /**
    * An ID that can be provided to aria-labelledby
    */
diff --git a/packages/react/src/components/Tile/tile-story.scss b/packages/react/src/components/Tile/tile-story.scss
index 777faecd6462..64c83be7ab9a 100644
--- a/packages/react/src/components/Tile/tile-story.scss
+++ b/packages/react/src/components/Tile/tile-story.scss
@@ -1,4 +1,5 @@
 @use '@carbon/react/scss/components/tile';
+@use '@carbon/react/scss/type';
 
 .experimental-tile {
   @include tile.tile($enable-experimental-tile-contrast: true);
@@ -7,3 +8,57 @@
 div .cds--tile--selectable:not(:last-child) {
   margin-block-end: 1rem;
 }
+
+.slug-tile-container {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-start;
+}
+
+.slug-tile-container .cds--tile {
+  max-width: 320px;
+  margin-right: 3rem;
+  margin-bottom: 3rem;
+  padding-bottom: 90px;
+}
+
+.slug-tile-container h4 {
+  margin-bottom: 1rem;
+}
+
+.slug-tile-container .ai-data {
+  margin-top: 16px;
+  padding: 16px 0;
+  display: flex;
+}
+
+.slug-tile-container .data-container {
+  width: 126px;
+}
+
+.slug-tile-container .data-container:first-of-type {
+  margin-right: 16px;
+}
+
+.slug-tile-container p {
+  @include type.type-style('body-01');
+}
+
+.slug-tile-container .data-container p {
+  @include type.type-style('label-02');
+}
+
+.slug-tile-container .arrow-right {
+  position: absolute;
+  bottom: 16px;
+  right: 16px;
+}
+
+.slug-tile-container .cds--tile-content__below-the-fold {
+  padding-top: 16px;
+}
+
+.slug-tile-container .cds--tile-content__below-the-fold p {
+  @include type.type-style('label-01');
+  margin: 8px 0 50px;
+}
diff --git a/packages/styles/scss/__tests__/theme-test.js b/packages/styles/scss/__tests__/theme-test.js
index 3d65ca32cc2d..1dd03d1c3206 100644
--- a/packages/styles/scss/__tests__/theme-test.js
+++ b/packages/styles/scss/__tests__/theme-test.js
@@ -136,6 +136,16 @@ describe('@carbon/styles/scss/theme', () => {
         "slug-callout-gradient-bottom",
         "slug-callout-aura-start",
         "slug-callout-aura-end",
+        "slug-callout-gradient-top-hover",
+        "slug-callout-gradient-bottom-hover",
+        "slug-callout-aura-start-hover-01",
+        "slug-callout-aura-start-hover-02",
+        "slug-callout-aura-end-hover-01",
+        "slug-callout-aura-end-hover-02",
+        "slug-callout-gradient-top-selected",
+        "slug-callout-gradient-bottom-selected",
+        "slug-callout-aura-start-selected",
+        "slug-callout-aura-end-selected",
         "ai-gradient-start-01",
         "ai-gradient-start-02",
         "ai-gradient-end",
diff --git a/packages/styles/scss/components/slug/_slug.scss b/packages/styles/scss/components/slug/_slug.scss
index 1e65431b014d..30f9a436c39a 100644
--- a/packages/styles/scss/components/slug/_slug.scss
+++ b/packages/styles/scss/components/slug/_slug.scss
@@ -4,6 +4,7 @@
 @use '../../spacing' as *;
 @use '../../theme' as *;
 @use '../../type' as *;
+@use '../../utilities/ai-gradient' as *;
 @use '../../utilities/convert';
 
 $sizes: (
@@ -324,22 +325,12 @@ $sizes: (
 
   // Slug callout styles
   .#{$prefix}--slug.#{$prefix}--slug--enabled .#{$prefix}--slug-content {
+    @include callout-gradient();
+
     border: 1px solid $border-subtle;
     border-radius: 16px;
     // 84px seems to make this fully opaque?
     backdrop-filter: blur(25px);
-    background: linear-gradient(
-        0deg,
-        $slug-callout-aura-start 0%,
-        $slug-callout-aura-end 33%,
-        transparent 100%
-      ),
-      linear-gradient(
-          180deg,
-          $slug-callout-gradient-top 0%,
-          $slug-callout-gradient-bottom 100%
-        )
-        rgba(0, 0, 0, 0.01);
     // box-shadow seems to match the spec better
     // than the same values plugged into `drop-shadow`
     // filter: drop-shadow(-45px 45px 100px rgba(0, 0, 0, 0.2));
diff --git a/packages/styles/scss/components/tile/_tile.scss b/packages/styles/scss/components/tile/_tile.scss
index c85eb0f499d2..4efab8b0ba02 100644
--- a/packages/styles/scss/components/tile/_tile.scss
+++ b/packages/styles/scss/components/tile/_tile.scss
@@ -13,6 +13,7 @@
 @use '../../spacing' as *;
 @use '../../theme' as *;
 @use '../../type' as *;
+@use '../../utilities/ai-gradient' as *;
 @use '../../utilities/button-reset';
 @use '../../utilities/component-reset';
 @use '../../utilities/focus-outline' as *;
@@ -368,6 +369,107 @@ $-icon-container-size: calc(#{layout.density('padding-inline')} * 2 + 1rem);
     fill: $icon-disabled;
   }
 
+  // Slug styles
+  .#{$prefix}--tile > .#{$prefix}--slug,
+  .#{$prefix}--tile--expandable > div > .#{$prefix}--slug,
+  .#{$prefix}--tile--clickable .#{$prefix}--tile--slug-icon {
+    position: absolute;
+    inset-block-start: $spacing-05;
+    inset-inline-end: $spacing-05;
+  }
+
+  .#{$prefix}--tile.#{$prefix}--tile--selectable > .#{$prefix}--slug {
+    inset-inline-end: $spacing-08;
+  }
+
+  .#{$prefix}--tile.#{$prefix}--tile--clickable > .#{$prefix}--slug {
+    pointer-events: none;
+  }
+
+  .#{$prefix}--tile--slug.#{$prefix}--tile {
+    @include callout-gradient();
+
+    border: 1px solid $border-tile;
+  }
+
+  .#{$prefix}--tile--slug.#{$prefix}--tile--expandable:hover {
+    @include callout-gradient();
+  }
+
+  .#{$prefix}--tile--slug.#{$prefix}--tile--selectable::before,
+  .#{$prefix}--tile--slug.#{$prefix}--tile--selectable::after,
+  .#{$prefix}--tile--slug.#{$prefix}--tile--clickable::before {
+    position: absolute;
+    display: block;
+    block-size: 100%;
+    content: '';
+    inline-size: 100%;
+    inset-block-start: 0;
+    inset-inline-start: 0;
+    opacity: 0;
+    transition: opacity $duration-fast-02 motion(standard, productive);
+  }
+
+  .#{$prefix}--tile--slug.#{$prefix}--tile--selectable::before,
+  .#{$prefix}--tile--slug.#{$prefix}--tile--clickable::before {
+    @include callout-gradient('hover');
+  }
+
+  .#{$prefix}--tile--slug.#{$prefix}--tile--selectable:hover::before,
+  .#{$prefix}--tile--slug.#{$prefix}--tile--clickable:hover::before {
+    opacity: 1;
+  }
+
+  .#{$prefix}--tile--slug.#{$prefix}--tile--selectable::after {
+    @include callout-gradient('selected');
+  }
+
+  .#{$prefix}--tile--slug.#{$prefix}--tile--is-selected::after {
+    opacity: 1;
+  }
+
+  .#{$prefix}--tile--slug.#{$prefix}--tile--is-selected {
+    border-color: $border-inverse;
+  }
+
+  .#{$prefix}--tile--slug.#{$prefix}--tile--selectable
+    .#{$prefix}--tile-content,
+  .#{$prefix}--tile--slug.#{$prefix}--tile--clickable
+    .#{$prefix}--tile-content {
+    position: relative;
+    z-index: 1;
+    cursor: pointer;
+  }
+
+  .#{$prefix}--tile--slug.#{$prefix}--tile--selectable > .#{$prefix}--slug,
+  .#{$prefix}--tile--slug.#{$prefix}--tile--selectable
+    > .#{$prefix}--tile__checkmark {
+    z-index: 1;
+  }
+
+  .#{$prefix}--tile--expandable:has(
+      .#{$prefix}--slug > .#{$prefix}--popover--open
+    ) {
+    overflow: visible;
+  }
+
+  // To Do: Replace svg overrides with actual AI icon
+  .#{$prefix}--tile--clickable .#{$prefix}--tile--slug-icon rect {
+    stroke: $icon-primary;
+  }
+
+  .#{$prefix}--tile--clickable .#{$prefix}--tile--slug-icon path {
+    fill: $icon-primary;
+  }
+
+  // Tile with slug and rounded corners
+  .#{$prefix}--tile--slug-rounded,
+  .#{$prefix}--tile--slug-rounded.#{$prefix}--tile--selectable::before,
+  .#{$prefix}--tile--slug-rounded.#{$prefix}--tile--selectable::after,
+  .#{$prefix}--tile--slug-rounded.#{$prefix}--tile--clickable::before {
+    border-radius: $spacing-05;
+  }
+
   // Windows HCM fix
   .#{$prefix}--tile__chevron svg,
   .#{$prefix}--tile__checkmark svg,
diff --git a/packages/styles/scss/utilities/_ai-gradient.scss b/packages/styles/scss/utilities/_ai-gradient.scss
index ddf1beb042fe..b7b80c1abe70 100644
--- a/packages/styles/scss/utilities/_ai-gradient.scss
+++ b/packages/styles/scss/utilities/_ai-gradient.scss
@@ -9,12 +9,11 @@
 
 /// Experimental - name and structure subject to change. Use at your own risk!
 /// Adds AI gradient styles to a component
-/// @access public
+/// @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
 /// @example @include ai-gradient('right', '33%');
 /// @group utilities
-
 @mixin ai-gradient($direction: 'right', $width: 33%) {
   $deg: 0;
   @if $direction == 'bottom' {
@@ -40,3 +39,58 @@
       transparent 100%
     );
 }
+
+/// Experimental - name and structure subject to change. Use at your own risk!
+/// Adds callout gradient styles to a component
+/// @access private
+/// @example @include callout-gradient();
+/// @param {String} $type  - Type of gradient, either 'default', 'selected' or 'hover'
+/// @group utilities
+@mixin callout-gradient($type: 'default') {
+  @if $type == 'hover' {
+    background: linear-gradient(
+        0deg,
+        theme.$slug-callout-aura-start-hover-01 0%,
+        theme.$slug-callout-aura-end-hover-01 50%,
+        transparent 50%
+      ),
+      linear-gradient(
+        0deg,
+        theme.$slug-callout-aura-start-hover-02 0%,
+        theme.$slug-callout-aura-end-hover-02 50%,
+        transparent 50%
+      ),
+      linear-gradient(
+          180deg,
+          theme.$slug-callout-gradient-top-hover 0%,
+          theme.$slug-callout-gradient-bottom-hover 100%
+        )
+        rgba(0, 0, 0, 0.01);
+  } @else if $type == 'selected' {
+    background: linear-gradient(
+        0deg,
+        theme.$slug-callout-aura-start-selected 0%,
+        theme.$slug-callout-aura-end-selected 50%,
+        transparent 50%
+      ),
+      linear-gradient(
+          180deg,
+          theme.$slug-callout-gradient-top-selected 0%,
+          theme.$slug-callout-gradient-bottom-selected 100%
+        )
+        rgba(0, 0, 0, 0.01);
+  } @else {
+    background: linear-gradient(
+        0deg,
+        theme.$slug-callout-aura-start 0%,
+        theme.$slug-callout-aura-end 50%,
+        transparent 50%
+      ),
+      linear-gradient(
+          180deg,
+          theme.$slug-callout-gradient-top 0%,
+          theme.$slug-callout-gradient-bottom 100%
+        )
+        rgba(0, 0, 0, 0.01);
+  }
+}
diff --git a/packages/themes/src/g10.js b/packages/themes/src/g10.js
index 901a453a9a26..bd267a73db00 100644
--- a/packages/themes/src/g10.js
+++ b/packages/themes/src/g10.js
@@ -216,6 +216,16 @@ export const slugCalloutGradientTop = rgba(gray10, 0.85);
 export const slugCalloutGradientBottom = rgba(gray20, 0.85);
 export const slugCalloutAuraStart = rgba(blue10, 0.6);
 export const slugCalloutAuraEnd = rgba(white, 0);
+export const slugCalloutGradientTopHover = rgba(gray20, 0.55);
+export const slugCalloutGradientBottomHover = rgba(gray20Hover, 0.55);
+export const slugCalloutAuraStartHover01 = rgba(white, 0.5);
+export const slugCalloutAuraEndHover01 = rgba(white, 0);
+export const slugCalloutAuraStartHover02 = rgba(blue20, 0.5);
+export const slugCalloutAuraEndHover02 = rgba(white, 0);
+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);
diff --git a/packages/themes/src/g100.js b/packages/themes/src/g100.js
index c4ecdabcfc7d..8a46d6bda451 100644
--- a/packages/themes/src/g100.js
+++ b/packages/themes/src/g100.js
@@ -8,6 +8,7 @@
 import {
   // Blue
   blue20,
+  blue20Hover,
   blue40,
   blue60,
   blue70,
@@ -221,6 +222,16 @@ export const slugCalloutGradientTop = rgba(gray100, 0.85);
 export const slugCalloutGradientBottom = rgba(gray90, 0.85);
 export const slugCalloutAuraStart = rgba(blue20, 0.2);
 export const slugCalloutAuraEnd = rgba(gray100, 0);
+export const slugCalloutGradientTopHover = rgba(gray80, 0.55);
+export const slugCalloutGradientBottomHover = rgba(gray80Hover, 0.55);
+export const slugCalloutAuraStartHover01 = rgba(blue20Hover, 0.3);
+export const slugCalloutAuraEndHover01 = rgba(gray100, 0);
+export const slugCalloutAuraStartHover02 = 'transparent';
+export const slugCalloutAuraEndHover02 = 'transparent';
+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';
diff --git a/packages/themes/src/g90.js b/packages/themes/src/g90.js
index 927b38703e95..6e0d751e139d 100644
--- a/packages/themes/src/g90.js
+++ b/packages/themes/src/g90.js
@@ -8,6 +8,7 @@
 import {
   // Blue
   blue20,
+  blue20Hover,
   blue40,
   blue60,
   blue70,
@@ -221,6 +222,16 @@ export const slugCalloutGradientTop = rgba(gray100, 0.85);
 export const slugCalloutGradientBottom = rgba(gray90, 0.85);
 export const slugCalloutAuraStart = rgba(blue20, 0.2);
 export const slugCalloutAuraEnd = rgba(gray100, 0);
+export const slugCalloutGradientTopHover = rgba(gray80, 0.55);
+export const slugCalloutGradientBottomHover = rgba(gray80Hover, 0.55);
+export const slugCalloutAuraStartHover01 = rgba(blue20Hover, 0.3);
+export const slugCalloutAuraEndHover01 = rgba(gray100, 0);
+export const slugCalloutAuraStartHover02 = 'transparent';
+export const slugCalloutAuraEndHover02 = 'transparent';
+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';
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 b8e4a889f81d..bac8344e6b5b 100644
--- a/packages/themes/src/tokens/__tests__/__snapshots__/v11-test.js.snap
+++ b/packages/themes/src/tokens/__tests__/__snapshots__/v11-test.js.snap
@@ -247,6 +247,16 @@ Array [
   "slug-callout-gradient-bottom",
   "slug-callout-aura-start",
   "slug-callout-aura-end",
+  "slug-callout-gradient-top-hover",
+  "slug-callout-gradient-bottom-hover",
+  "slug-callout-aura-start-hover-01",
+  "slug-callout-aura-start-hover-02",
+  "slug-callout-aura-end-hover-01",
+  "slug-callout-aura-end-hover-02",
+  "slug-callout-gradient-top-selected",
+  "slug-callout-gradient-bottom-selected",
+  "slug-callout-aura-start-selected",
+  "slug-callout-aura-end-selected",
   "ai-gradient-start-01",
   "ai-gradient-start-02",
   "ai-gradient-end",
diff --git a/packages/themes/src/tokens/__tests__/metadata-test.js b/packages/themes/src/tokens/__tests__/metadata-test.js
index 6cb4c034a189..22c8a0071cc8 100644
--- a/packages/themes/src/tokens/__tests__/metadata-test.js
+++ b/packages/themes/src/tokens/__tests__/metadata-test.js
@@ -961,6 +961,46 @@ test('metadata', () => {
           "name": "slug-callout-aura-end",
           "type": "color",
         },
+        Object {
+          "name": "slug-callout-gradient-top-hover",
+          "type": "color",
+        },
+        Object {
+          "name": "slug-callout-gradient-bottom-hover",
+          "type": "color",
+        },
+        Object {
+          "name": "slug-callout-aura-start-hover-01",
+          "type": "color",
+        },
+        Object {
+          "name": "slug-callout-aura-start-hover-02",
+          "type": "color",
+        },
+        Object {
+          "name": "slug-callout-aura-end-hover-01",
+          "type": "color",
+        },
+        Object {
+          "name": "slug-callout-aura-end-hover-02",
+          "type": "color",
+        },
+        Object {
+          "name": "slug-callout-gradient-top-selected",
+          "type": "color",
+        },
+        Object {
+          "name": "slug-callout-gradient-bottom-selected",
+          "type": "color",
+        },
+        Object {
+          "name": "slug-callout-aura-start-selected",
+          "type": "color",
+        },
+        Object {
+          "name": "slug-callout-aura-end-selected",
+          "type": "color",
+        },
         Object {
           "name": "ai-gradient-start-01",
           "type": "color",
diff --git a/packages/themes/src/tokens/v11TokenGroup.js b/packages/themes/src/tokens/v11TokenGroup.js
index 205295029f6f..a9ee25a7810e 100644
--- a/packages/themes/src/tokens/v11TokenGroup.js
+++ b/packages/themes/src/tokens/v11TokenGroup.js
@@ -354,6 +354,16 @@ export const ai = TokenGroup.create({
     'slug-callout-gradient-bottom',
     'slug-callout-aura-start',
     'slug-callout-aura-end',
+    'slug-callout-gradient-top-hover',
+    'slug-callout-gradient-bottom-hover',
+    'slug-callout-aura-start-hover-01',
+    'slug-callout-aura-start-hover-02',
+    'slug-callout-aura-end-hover-01',
+    'slug-callout-aura-end-hover-02',
+    'slug-callout-gradient-top-selected',
+    'slug-callout-gradient-bottom-selected',
+    'slug-callout-aura-start-selected',
+    'slug-callout-aura-end-selected',
     'ai-gradient-start-01',
     'ai-gradient-start-02',
     'ai-gradient-end',
diff --git a/packages/themes/src/white.js b/packages/themes/src/white.js
index 58f1fefbc4d9..e2e0913439a3 100644
--- a/packages/themes/src/white.js
+++ b/packages/themes/src/white.js
@@ -216,6 +216,16 @@ export const slugCalloutGradientTop = rgba(gray10, 0.85);
 export const slugCalloutGradientBottom = rgba(gray20, 0.85);
 export const slugCalloutAuraStart = rgba(blue10, 0.6);
 export const slugCalloutAuraEnd = rgba(white, 0);
+export const slugCalloutGradientTopHover = rgba(gray20, 0.55);
+export const slugCalloutGradientBottomHover = rgba(gray20Hover, 0.55);
+export const slugCalloutAuraStartHover01 = rgba(white, 0.5);
+export const slugCalloutAuraEndHover01 = rgba(white, 0);
+export const slugCalloutAuraStartHover02 = rgba(blue20, 0.5);
+export const slugCalloutAuraEndHover02 = rgba(white, 0);
+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);