diff --git a/src/components/ColorTokenTable/ColorTokenTable.js b/src/components/ColorTokenTable/ColorTokenTable.js
index 704b7af51bc..e41b51385e8 100644
--- a/src/components/ColorTokenTable/ColorTokenTable.js
+++ b/src/components/ColorTokenTable/ColorTokenTable.js
@@ -435,6 +435,75 @@ export default class ColorTokenTable extends React.Component {
               </tbody>
             </table>
           </div>
+          <div className="cds--col-lg-7">
+            <h3 className="page-h3">AI</h3>
+          </div>
+          <div className="cds--col-lg-12 cds--no-gutter">
+            <table className="page-table">
+              <thead>
+                <tr>
+                  <th>Token</th>
+                  <th>Role</th>
+                  <th>Value</th>
+                </tr>
+              </thead>
+              <tbody>
+                {Object.keys(colorTokens['ai']).map((token, i) =>
+                  this.renderToken(
+                    token,
+                    colorTokens['ai'][token],
+                    i
+                  )
+                )}
+              </tbody>
+            </table>
+          </div>
+          <div className="cds--col-lg-7">
+            <h3 className="page-h3">Chat</h3>
+          </div>
+          <div className="cds--col-lg-12 cds--no-gutter">
+            <table className="page-table">
+              <thead>
+                <tr>
+                  <th>Token</th>
+                  <th>Role</th>
+                  <th>Value</th>
+                </tr>
+              </thead>
+              <tbody>
+                {Object.keys(colorTokens['chat']).map((token, i) =>
+                  this.renderToken(
+                    token,
+                    colorTokens['chat'][token],
+                    i
+                  )
+                )}
+              </tbody>
+            </table>
+          </div>
+          <div className="cds--col-lg-7">
+            <h3 className="page-h3">Chat button</h3>
+          </div>
+          <div className="cds--col-lg-12 cds--no-gutter">
+            <table className="page-table">
+              <thead>
+                <tr>
+                  <th>Token</th>
+                  <th>Role</th>
+                  <th>Value</th>
+                </tr>
+              </thead>
+              <tbody>
+                {Object.keys(colorTokens['chat-button']).map((token, i) =>
+                  this.renderToken(
+                    token,
+                    colorTokens['chat-button'][token],
+                    i
+                  )
+                )}
+              </tbody>
+            </table>
+          </div>
         </section>
       </div>
     );
diff --git a/src/data/guidelines/color-tokens.js b/src/data/guidelines/color-tokens.js
index 92a144c3fd1..a517db26b07 100644
--- a/src/data/guidelines/color-tokens.js
+++ b/src/data/guidelines/color-tokens.js
@@ -3190,6 +3190,729 @@ const colorTokens = {
       },
     },
   },
+  'ai': {
+    '$ai-aura-start': {
+      role: ['Linear gradient start value for large AI layers'],
+      value: {
+        white: {
+          name: 'Blue 50, 10%',
+          hex: '#4589ff @ 10%',
+        },
+        g10: {
+          name: 'Blue 50, 10%',
+          hex: '#4589ff @ 10%',
+        },
+        g90: {
+          name: 'Blue 50, 10%',
+          hex: '#4589ff @ 10%',
+        },
+        g100: {
+          name: 'Blue 50, 10%',
+          hex: '#4589ff @ 10%',
+        },
+      },
+    },
+    '$ai-aura-start-sm': {
+      role: ['Linear gradient start value for small AI layers'],
+      value: {
+        white: {
+          name: 'Blue 50, 16%',
+          hex: '#4589ff @ 16%',
+        },
+        g10: {
+          name: 'Blue 50, 16%',
+          hex: '#4589ff @ 16%',
+        },
+        g90: {
+          name: 'Blue 50, 16%',
+          hex: '#4589ff @ 16%',
+        },
+        g100: {
+          name: 'Blue 50, 16%',
+          hex: '#4589ff @ 16%',
+        },
+      },
+    },
+    '$ai-aura-end': {
+      role: ['Linear gradient start value for all AI layers'],
+      value: {
+        white: {
+          name: 'White, 0%',
+          hex: '#ffffff @ 0%',
+        },
+        g10: {
+          name: 'White, 0%',
+          hex: '#ffffff @ 0%',
+        },
+        g90: {
+          name: 'Black, 0%',
+          hex: '#000000 @ 0%',
+        },
+        g100: {
+          name: 'Black, 0%',
+          hex: '#000000 @ 0%',
+        },
+      },
+    },
+    '$ai-aura-hover-start': {
+      role: ['Linear gradient start value for the AI aura hover'],
+      value: {
+        white: {
+          name: 'Blue 50, 32%',
+          hex: '#4589ff',
+        },
+        g10: {
+          name: 'Blue 50, 32%',
+          hex: '#4589ff',
+        },
+        g90: {
+          name: 'Blue 50, 40%',
+          hex: '#4589ff @ 40%',
+        },
+        g100: {
+          name: 'Blue 50, 40%',
+          hex: '#4589ff @ 40%',
+        },
+      },
+    },
+    '$ai-aura-hover-end': {
+      role: ['Linear gradient end value for the AI aura hover'],
+      value: {
+        white: {
+          name: 'White, 0%',
+          hex: '#ffffff @ 0%',
+        },
+        g10: {
+          name: 'White, 0%',
+          hex: '#ffffff @ 0%',
+        },
+        g90: {
+          name: 'Black, 0%',
+          hex: '#000000 @ 0%',
+        },
+        g100: {
+          name: 'Black, 0%',
+          hex: '#000000 @ 0%',
+        },
+      },
+    },
+    '$ai-aura-hover-background': {
+      role: ['Hover background color for AI layers'],
+      value: {
+        white: {
+          name: 'Blue 10',
+          hex: '#edf5ff',
+        },
+        g10: {
+          name: 'Blue 10',
+          hex: '#edf5ff',
+        },
+        g90: {
+          name: '$layer-hover',
+          hex: '#e8e8e8',
+        },
+        g100: {
+          name: '$layer-hover',
+          hex: '#e8e8e8',
+        },
+      },
+    },
+    '$ai-border-start': {
+      role: ['Linear gradient start value for AI borders'],
+      value: {
+        white: {
+          name: 'Blue 30, 64%',
+          hex: '#a6c8ff @ 64%',
+        },
+        g10: {
+          name: 'Blue 30, 64%',
+          hex: '#a6c8ff @ 64%',
+        },
+        g90: {
+          name: 'Blue 30, 36%',
+          hex: '#a6c8ff @ 36%',
+        },
+        g100: {
+          name: 'Blue 30, 36%',
+          hex: '#a6c8ff @ 36%',
+        },
+      },
+    },
+    '$ai-border-end': {
+      role: ['Linear gradient end value for AI borders'],
+      value: {
+        white: {
+          name: 'Blue 40',
+          hex: '#78a9ff',
+        },
+        g10: {
+          name: 'Blue 40',
+          hex: '#78a9ff',
+        },
+        g90: {
+          name: 'Red 50',
+          hex: '#4589ff',
+        },
+        g100: {
+          name: 'Red 50',
+          hex: '#4589ff',
+        },
+      },
+    },
+    '$ai-border-strong': {
+      role: [        
+      'Medium contrast border for AI elements',
+      'Border-bottom paired with AI fields',
+      '3:1 AA non-text contrast'],
+      value: {
+        white: {
+          name: 'Blue 50',
+          hex: '#4589ff',
+        },
+        g10: {
+          name: 'Blue 50',
+          hex: '#4589ff',
+        },
+        g90: {
+          name: 'Blue 40',
+          hex: '#78a9ff',
+        },
+        g100: {
+          name: 'Blue 40',
+          hex: '#78a9ff',
+        },
+      },
+    },
+    '$ai-drop-shadow': {
+      role: ['Drop shadow for the AI layer'],
+      value: {
+        white: {
+          name: 'Blue 60, 10%',
+          hex: '#0f62fe @ 10%',
+        },
+        g10: {
+          name: 'Blue 60, 10%',
+          hex: '#0f62fe @ 10%',
+        },
+        g90: {
+          name: 'Black, 28%',
+          hex: '#000000 @ 28%',
+        },
+        g100: {
+          name: 'Black, 28%',
+          hex: '#000000 @ 28%',
+        },
+      },
+    },
+    '$ai-inner-shadow': {
+      role: ['Inner shadow for the AI layer'],
+      value: {
+        white: {
+          name: 'Blue 50, 10%',
+          hex: '#4589ff @ 10%',
+        },
+        g10: {
+          name: 'Blue 50, 10%',
+          hex: '#4589ff @ 10%',
+        },
+        g90: {
+          name: 'Blue 50, 16%',
+          hex: '#4589ff @ 16%',
+        },
+        g100: {
+          name: 'Blue 50, 16%',
+          hex: '#4589ff @ 16%',
+        },
+      },
+    },
+    '$ai-popover-background': {
+      role: ['Background color for the AI explainability popover'],
+      value: {
+        white: {
+          name: 'White',
+          hex: '#ffffff',
+        },
+        g10: {
+          name: 'White',
+          hex: '#ffffff',
+        },
+        g90: {
+          name: 'Gray 100',
+          hex: '#161616',
+        },
+        g100: {
+          name: 'Gray 100',
+          hex: '#161616',
+        },
+      },
+    },
+    '$ai-popover-shadow-outer-01': {
+      role: ['1 of 2 shadow colors for the AI explainability popover'],
+      value: {
+        white: {
+          name: 'Blue 70, 6%',
+          hex: '#0043ce @ 6%',
+        },
+        g10: {
+          name: 'Blue 70, 6%',
+          hex: '#0043ce @ 6%',
+        },
+        g90: {
+          name: 'Black, 12%',
+          hex: '#000000 @ 12%',
+        },
+        g100: {
+          name: 'Black, 12%',
+          hex: '#000000 @ 12%',
+        },
+      },
+    },
+    '$ai-popover-shadow-outer-02': {
+      role: ['2 of 2 shadow colors for the AI explainability popover'],
+      value: {
+        white: {
+          name: 'Black, 4%',
+          hex: '#000000 @ 4%',
+        },
+        g10: {
+          name: 'Black, 4%',
+          hex: '#000000 @ 4%',
+        },
+        g90: {
+          name: 'Black, 8%',
+          hex: '#000000 @ 8%',
+        },
+        g100: {
+          name: 'Black, 8%',
+          hex: '#000000 @ 8%',
+        },
+      },
+    },
+    '$ai-skeleton-element': {
+      role: ['Skeleton color for AI text and UI elements'],
+      value: {
+        white: {
+          name: 'Blue 50',
+          hex: '#4589ff',
+        },
+        g10: {
+          name: 'Blue 50',
+          hex: '#4589ff',
+        },
+        g90: {
+          name: 'Blue 40, 30%',
+          hex: '#78a9ff @ 30%',
+        },
+        g100: {
+          name: 'Blue 40, 30%',
+          hex: '#78a9ff @ 30%',
+        },
+      },
+    },
+    '$ai-skeleton-background': {
+      role: ['Skeleton color for AI containers'],
+      value: {
+        white: {
+          name: 'Blue 20',
+          hex: '#d0e2ff',
+        },
+        g10: {
+          name: 'Blue 20',
+          hex: '#d0e2ff',
+        },
+        g90: {
+          name: 'Blue 40, 50%',
+          hex: '#78a9ff @ 50%',
+        },
+        g100: {
+          name: 'Blue 40, 50%',
+          hex: '#78a9ff @ 50%',
+        },
+      },
+    },
+    '$ai-overlay': {
+      role: ['Background overlay for AI components'],
+      value: {
+        white: {
+          name: 'Blue 100, 50%',
+          hex: '#001141 @ 50%',
+        },
+        g10: {
+          name: 'Blue 100, 50%',
+          hex: '#001141 @ 50%',
+        },
+        g90: {
+          name: 'Black, 50%',
+          hex: '#000000 @ 50%',
+        },
+        g100: {
+          name: 'Black, 50%',
+          hex: '#000000 @ 50%',
+        },
+      },
+    },
+  },
+  'chat': {
+    '$chat-avatar-bot': {
+      role: ['Chat avatar background color for bots'],
+      value: {
+        white: {
+          name: 'Gray 60',
+          hex: '#6f6f6f',
+        },
+        g10: {
+          name: 'Gray 60',
+          hex: '#6f6f6f',
+        },
+        g90: {
+          name: 'Gray 50',
+          hex: '#8d8d8d',
+        },
+        g100: {
+          name: 'Gray 50',
+          hex: '#8d8d8d',
+        },
+      },
+    },
+    '$chat-avatar-agent': {
+      role: ['Chat avatar background color for agents'],
+      value: {
+        white: {
+          name: 'Gray 80',
+          hex: '#393939',
+        },
+        g10: {
+          name: 'Gray 80',
+          hex: '#393939',
+        },
+        g90: {
+          name: 'Gray 30',
+          hex: '#c6c6c6',
+        },
+        g100: {
+          name: 'Gray 30',
+          hex: '#c6c6c6',
+        },
+      },
+    },
+    '$chat-avatar-user': {
+      role: ['Chat avatar background color for users'],
+      value: {
+        white: {
+          name: 'Blue 60',
+          hex: '#0f62fe',
+        },
+        g10: {
+          name: 'Blue 60',
+          hex: '#0f62fe',
+        },
+        g90: {
+          name: 'Blue 50',
+          hex: '#4589ff',
+        },
+        g100: {
+          name: 'Blue 50',
+          hex: '#4589ff',
+        },
+      },
+    },
+    '$chat-bubble-user': {
+      role: ['Chat bubble background color for users'],
+      value: {
+        white: {
+          name: 'Gray 20',
+          hex: '#e0e0e0',
+        },
+        g10: {
+          name: 'Gray 20',
+          hex: '#e0e0e0',
+        },
+        g90: {
+          name: 'Gray 80',
+          hex: '#393939',
+        },
+        g100: {
+          name: 'Gray 80',
+          hex: '#393939',
+        },
+      },
+    },
+    '$chat-bubble-agent': {
+      role: ['Chat bubble background color for agents'],
+      value: {
+        white: {
+          name: 'White',
+          hex: '#ffffff',
+        },
+        g10: {
+          name: 'White',
+          hex: '#ffffff',
+        },
+        g90: {
+          name: 'Gray 90',
+          hex: '#262626',
+        },
+        g100: {
+          name: 'Gray 90',
+          hex: '#262626',
+        },
+      },
+    },
+    '$chat-bubble-border': {
+      role: ['Chat bubble border color for agents'],
+      value: {
+        white: {
+          name: 'Gray 20',
+          hex: '#e0e0e0',
+        },
+        g10: {
+          name: 'Gray 20',
+          hex: '#e0e0e0',
+        },
+        g90: {
+          name: 'Gray 70',
+          hex: '#525252',
+        },
+        g100: {
+          name: 'Gray 70',
+          hex: '#525252',
+        },
+      },
+    },
+    '$chat-prompt-background': {
+      role: ['Background color for chat prompt input'],
+      value: {
+        white: {
+          name: 'White',
+          hex: '#ffffff',
+        },
+        g10: {
+          name: 'White',
+          hex: '#ffffff',
+        },
+        g90: {
+          name: 'Gray 100',
+          hex: '#161616',
+        },
+        g100: {
+          name: 'Gray 100',
+          hex: '#161616',
+        },
+      },
+    },
+    '$chat-prompt-border-start': {
+      role: ['Linear gradient start value for chat prompts border'],
+      value: {
+        white: {
+          name: 'Gray 10',
+          hex: '#f4f4f4',
+        },
+        g10: {
+          name: 'Gray 10',
+          hex: '#f4f4f4',
+        },
+        g90: {
+          name: 'Gray 90',
+          hex: '#262626',
+        },
+        g100: {
+          name: 'Gray 90',
+          hex: '#262626',
+        },
+      },
+    },
+    '$chat-prompt-border-end': {
+      role: ['Linear gradient end value for chat prompts border'],
+      value: {
+        white: {
+          name: 'Gray 10, 0%',
+          hex: '#f4f4f4 @ 0%',
+        },
+        g10: {
+          name: 'Gray 10, 0%',
+          hex: '#f4f4f4 @ 0%',
+        },
+        g90: {
+          name: 'Gray 90, 0%',
+          hex: '#262626 @ 0%',
+        },
+        g100: {
+          name: 'Gray 90, 0%',
+          hex: '#262626 @ 0%',
+        },
+      },
+    },
+    '$chat-shell-background': {
+      role: ['Chat shell background color'],
+      value: {
+        white: {
+          name: 'White',
+          hex: '#ffffff',
+        },
+        g10: {
+          name: 'White',
+          hex: '#ffffff',
+        },
+        g90: {
+          name: 'Gray 90',
+          hex: '#262626',
+        },
+        g100: {
+          name: 'Gray 90',
+          hex: '#262626',
+        },
+      },
+    },
+    '$chat-header-background': {
+      role: ['Chat header background color'],
+      value: {
+        white: {
+          name: 'White',
+          hex: '#ffffff',
+        },
+        g10: {
+          name: 'White',
+          hex: '#ffffff',
+        },
+        g90: {
+          name: 'Gray 90',
+          hex: '#262626',
+        },
+        g100: {
+          name: 'Gray 90',
+          hex: '#262626',
+        },
+      },
+    },
+  },
+  'chat-button': {
+    '$chat-button': {
+      role: ['Chat quick action button color'],
+      value: {
+        white: {
+          name: '$link-primary',
+          hex: '#0f62fe',
+        },
+        g10: {
+          name: '$link-primary',
+          hex: '#0f62fe',
+        },
+        g90: {
+          name: '$link-primary',
+          hex: '#78a9ff',
+        },
+        g100: {
+          name: '$link-primary',
+          hex: '#78a9ff',
+        },
+      },
+    },
+    '$chat-button-hover': {
+      role: ['Hover color for $chat-button'],
+      value: {
+        white: {
+          name: '$background-hover',
+          hex: '#8d8d8d @ 12%',
+        },
+        g10: {
+          name: '$background-hover',
+          hex: '#8d8d8d @ 12%',
+        },
+        g90: {
+          name: '$background-hover',
+          hex: '#8d8d8d @ 16%',
+        },
+        g100: {
+          name: '$background-hover',
+          hex: '#8d8d8d @ 16%',
+        },
+      },
+    },
+    '$chat-button-text-hover': {
+      role: ['Text color for hovered chat button'],
+      value: {
+        white: {
+          name: '$link-primary-hover',
+          hex: '#0043ce',
+        },
+        g10: {
+          name: '$link-primary-hover',
+          hex: '#0043ce',
+        },
+        g90: {
+          name: '$link-primary-hover',
+          hex: '#a6c8ff',
+        },
+        g100: {
+          name: '$link-primary-hover',
+          hex: '#a6c8ff',
+        },
+      },
+    },
+    '$chat-button-active': {
+      role: ['Active color for $chat-button'],
+      value: {
+        white: {
+          name: '$background-active',
+          hex: '#8d8d8d @ 50%',
+        },
+        g10: {
+          name: '$background-active',
+          hex: '#8d8d8d @ 50%',
+        },
+        g90: {
+          name: '$background-active',
+          hex: '#8d8d8d @ 40%',
+        },
+        g100: {
+          name: '$background-active',
+          hex: '#8d8d8d @ 40%',
+        },
+      },
+    },
+    '$chat-button-selected': {
+      role: ['Selected color for $chat-button'],
+      value: {
+        white: {
+          name: '$background-selected',
+          hex: '#8d8d8d @ 20%',
+        },
+        g10: {
+          name: '$background-selected',
+          hex: '#8d8d8d @ 20%',
+        },
+        g90: {
+          name: '$background-selected',
+          hex: '#8d8d8d @ 24%',
+        },
+        g100: {
+          name: '$background-selected',
+          hex: '#8d8d8d @ 24%',
+        },
+      },
+    },
+    '$chat-button-text-selected': {
+      role: ['Text color for selected chat-button'],
+      value: {
+        white: {
+          name: '$text-secondary',
+          hex: '#525252',
+        },
+        g10: {
+          name: '$text-secondary',
+          hex: '#525252',
+        },
+        g90: {
+          name: '$text-secondary',
+          hex: '#c6c6c6',
+        },
+        g100: {
+          name: '$text-secondary',
+          hex: '#c6c6c6',
+        },
+      },
+    },
+  },
 };
 
 export default colorTokens;
\ No newline at end of file