diff --git a/.storybook/components/ColorList/ColorList.module.css b/.storybook/components/ColorList/ColorList.module.css
new file mode 100644
index 000000000..7bcc0da88
--- /dev/null
+++ b/.storybook/components/ColorList/ColorList.module.css
@@ -0,0 +1,26 @@
+.color-list__label {
+  width: fit-content;
+  padding: var(--eds-size-half);
+  border-radius: var(--eds-theme-box-button-border-radius);
+
+  font: var(--eds-theme-typography-label-md-subtle);
+  color: rgb(235, 87, 87);
+
+  background-color: var(--eds-theme-color-background-neutral-subtle);
+}
+
+.color-list__input {
+  width: 100%;
+  height: 5rem;
+}
+
+.color-list__input::-webkit-color-swatch {
+  border-color: transparent;
+}
+.color-list__input::-webkit-color-swatch-wrapper {
+  padding: 0;
+}
+
+.color-list__input::-moz-color-swatch {
+  border-color: transparent;
+}
diff --git a/.storybook/components/ColorList/ColorList.tsx b/.storybook/components/ColorList/ColorList.tsx
index 1e92155ae..7fbf2eb9c 100755
--- a/.storybook/components/ColorList/ColorList.tsx
+++ b/.storybook/components/ColorList/ColorList.tsx
@@ -1,33 +1,42 @@
-import React, { Component } from 'react';
-import { Grid } from '../../../src';
-import { TokenSpecimen } from '../TokenSpecimen/TokenSpecimen';
+import React from 'react';
+import styles from './ColorList.module.css';
 
 type ListItem = {
   name: string;
-  value: any;
+  value: string;
+  figmaToken?: string;
+  tailwindClass?: string;
 };
 
 type Props = {
   listItems: ListItem[];
 };
 
-export class ColorList extends Component<Props> {
-  render() {
-    return (
-      <Grid>
-        {this.props.listItems.map(function (listItem) {
-          return (
-            <TokenSpecimen
-              inlineStyles={{
-                backgroundColor: `var(${listItem.name})`,
-              }}
-              key={listItem.name}
-              name={listItem.name}
-              value={listItem.value}
-            />
-          );
-        })}
-      </Grid>
-    );
-  }
-}
+export const ColorList = (props: Props) => (
+  <div className="flex flex-col gap-4">
+    {props.listItems.map(function (listItem) {
+      return (
+        <div className="bg-neutral-default flex gap-4 p-4" key={listItem.name}>
+          <div className="flex w-80 flex-col gap-1">
+            <label
+              className={styles['color-list__label']}
+              htmlFor={listItem.name}
+            >
+              <code>{listItem.name}</code>
+            </label>
+            {listItem.figmaToken && <span>{listItem.figmaToken}</span>}
+            {listItem.tailwindClass && <span>{listItem.tailwindClass}</span>}
+            <code>{listItem.value}</code>
+          </div>
+          <input
+            className={styles['color-list__input']}
+            id={listItem.name}
+            readOnly
+            type="color"
+            value={listItem.value}
+          />
+        </div>
+      );
+    })}
+  </div>
+);
diff --git a/.storybook/components/DesignTokens/Tier1/Colors.jsx b/.storybook/components/DesignTokens/Tier1/Colors.jsx
deleted file mode 100755
index 9761f0da8..000000000
--- a/.storybook/components/DesignTokens/Tier1/Colors.jsx
+++ /dev/null
@@ -1,37 +0,0 @@
-import React, { Component } from 'react';
-import '../DesignTokens.css';
-import { Section } from '../../../../src';
-import filterTokens from '../../../util/filterTokens';
-import { ColorList } from '../../ColorList/ColorList';
-
-export class Tier1Colors extends Component {
-  render() {
-    return (
-      <div>
-        <Section title="Brand Colors">
-          <ColorList listItems={filterTokens(`eds-color-brand`)} />
-        </Section>
-
-        <Section title="Neutral Colors">
-          <ColorList listItems={filterTokens(`eds-color-neutral`)} />
-        </Section>
-
-        <Section title="Transparent Colors">
-          <ColorList listItems={filterTokens(`eds-color-transparent`)} />
-        </Section>
-
-        <Section title="Other Colors">
-          <ColorList listItems={filterTokens(`eds-color-other-mint`)} />
-          <div className="p-3"></div>
-          <ColorList listItems={filterTokens(`eds-color-other-yellow`)} />
-          <div className="p-3"></div>
-          <ColorList listItems={filterTokens(`eds-color-other-lemon`)} />
-          <div className="p-3"></div>
-          <ColorList listItems={filterTokens(`eds-color-other-orange`)} />
-          <div className="p-3"></div>
-          <ColorList listItems={filterTokens(`eds-color-other-ruby`)} />
-        </Section>
-      </div>
-    );
-  }
-}
diff --git a/.storybook/components/DesignTokens/Tier1/Colors.tsx b/.storybook/components/DesignTokens/Tier1/Colors.tsx
new file mode 100755
index 000000000..82693bd01
--- /dev/null
+++ b/.storybook/components/DesignTokens/Tier1/Colors.tsx
@@ -0,0 +1,38 @@
+import React from 'react';
+import '../DesignTokens.css';
+import { Section } from '../../../../src';
+import filterTokens from '../../../util/filterTokens';
+import { ColorList } from '../../ColorList/ColorList';
+
+export const Tier1Colors = () => {
+  const getListItems = (filterTerm: string, figmaTokenHeader: string) =>
+    filterTokens(filterTerm).map(({ name, value }) => ({
+      name,
+      value,
+      figmaToken:
+        figmaTokenHeader + '/' + name.slice(name.lastIndexOf('-') + 1),
+    }));
+  return (
+    <div>
+      <Section title="Neutral Colors">
+        <ColorList listItems={getListItems('eds-color-neutral', 'neutral')} />
+      </Section>
+      <Section title="Brand Colors">
+        <ColorList listItems={getListItems('eds-color-brand', 'brand-grape')} />
+      </Section>
+      <Section className="flex flex-col gap-3" title="Other Colors">
+        <ColorList
+          listItems={getListItems('eds-color-other-orange', 'orange')}
+        />
+        <ColorList listItems={getListItems('eds-color-other-mint', 'mint')} />
+        <ColorList
+          listItems={getListItems('eds-color-other-yellow', 'yellow')}
+        />
+        <ColorList listItems={getListItems('eds-color-other-ruby', 'ruby')} />
+        <ColorList
+          listItems={getListItems('eds-color-other-lemon', 'supporting')}
+        />
+      </Section>
+    </div>
+  );
+};
diff --git a/.storybook/components/TokenSpecimen/TokenSpecimen.css b/.storybook/components/TokenSpecimen/TokenSpecimen.css
index 2fd59617a..59b162cfc 100644
--- a/.storybook/components/TokenSpecimen/TokenSpecimen.css
+++ b/.storybook/components/TokenSpecimen/TokenSpecimen.css
@@ -1,5 +1,3 @@
-@import '../../../src/design-tokens/mixins.css';
-
 .token-specimen {
   border: 1px solid var(--eds-theme-color-border-neutral-subtle);
   box-shadow: 1px solid var(--eds-box-shadow-md);
diff --git a/.storybook/components/TokenSpecimen/TokenSpecimen.tsx b/.storybook/components/TokenSpecimen/TokenSpecimen.tsx
index 09159a420..edc073d03 100755
--- a/.storybook/components/TokenSpecimen/TokenSpecimen.tsx
+++ b/.storybook/components/TokenSpecimen/TokenSpecimen.tsx
@@ -1,5 +1,5 @@
 import clsx from 'clsx';
-import React, { Component } from 'react';
+import React from 'react';
 import './TokenSpecimen.css';
 
 type Props = {
@@ -14,86 +14,84 @@ type Props = {
   behavior?: 'stacked';
 };
 
-export class TokenSpecimen extends Component<Props> {
-  render() {
-    const componentClassName = clsx('token-specimen', this.props.className, {
-      'token-specimen--stacked': this.props.behavior === 'stacked',
-      'token-specimen--inverted': this.props.name.includes('inverse'),
-    });
+export const TokenSpecimen = (props: Props) => {
+  const componentClassName = clsx('token-specimen', props.className, {
+    'token-specimen--stacked': props.behavior === 'stacked',
+    'token-specimen--inverted': props.name.includes('inverse'),
+  });
 
-    let sample;
+  let sample;
 
-    if (this.props.variant === 'typography-title') {
-      sample = (
-        <div
-          className={
-            'token-specimen__sample token-specimen__sample--typography-title ' +
-            this.props.specimenClassName
-          }
-          contentEditable
-          style={this.props.inlineStyles}
-          suppressContentEditableWarning
-        >
-          AaBbCcDdEeFfGg
-        </div>
-      );
-    } else if (this.props.variant === 'typography-body') {
-      sample = (
-        <div
-          className={
-            'token-specimen__sample token-specimen__sample--typography-body ' +
-            this.props.specimenClassName
-          }
-          contentEditable
-          style={this.props.inlineStyles}
-          suppressContentEditableWarning
-        >
-          Almost before we knew it, we had left the ground.
-        </div>
-      );
-    } else if (this.props.variant === 'animation-fade') {
-      sample = (
-        <div
-          className={
-            'token-specimen__sample token-specimen__sample--box token-specimen__sample--animation-fade ' +
-            this.props.specimenClassName
-          }
-          style={this.props.inlineStyles}
-        ></div>
-      );
-    } else if (this.props.variant === 'animation-move') {
-      sample = (
-        <div
-          className={
-            'token-specimen__sample token-specimen__sample--box token-specimen__sample--animation-move ' +
-            this.props.specimenClassName
-          }
-          style={this.props.inlineStyles}
-        ></div>
-      );
-    } else {
-      sample = (
-        <div
-          className={
-            'token-specimen__sample token-specimen__sample--box ' +
-            this.props.specimenClassName
-          }
-          style={this.props.inlineStyles}
-        >
-          {this.props.children}
-        </div>
-      );
-    }
-
-    return (
-      <div className={componentClassName}>
-        <div className="token-specimen__info">
-          <code className="token-specimen__name">{this.props.name}</code>
-          <code className="token-specimen__value">{this.props.value}</code>
-          <p className="token-specimen__comment">{this.props.comment}</p>
-        </div>
-        <div className="token-specimen__body">{sample}</div>
+  if (props.variant === 'typography-title') {
+    sample = (
+      <div
+        className={
+          'token-specimen__sample token-specimen__sample--typography-title ' +
+          props.specimenClassName
+        }
+        contentEditable
+        style={props.inlineStyles}
+        suppressContentEditableWarning
+      >
+        AaBbCcDdEeFfGg
+      </div>
+    );
+  } else if (props.variant === 'typography-body') {
+    sample = (
+      <div
+        className={
+          'token-specimen__sample token-specimen__sample--typography-body ' +
+          props.specimenClassName
+        }
+        contentEditable
+        style={props.inlineStyles}
+        suppressContentEditableWarning
+      >
+        Almost before we knew it, we had left the ground.
+      </div>
+    );
+  } else if (props.variant === 'animation-fade') {
+    sample = (
+      <div
+        className={
+          'token-specimen__sample token-specimen__sample--box token-specimen__sample--animation-fade ' +
+          props.specimenClassName
+        }
+        style={props.inlineStyles}
+      ></div>
+    );
+  } else if (props.variant === 'animation-move') {
+    sample = (
+      <div
+        className={
+          'token-specimen__sample token-specimen__sample--box token-specimen__sample--animation-move ' +
+          props.specimenClassName
+        }
+        style={props.inlineStyles}
+      ></div>
+    );
+  } else {
+    sample = (
+      <div
+        className={
+          'token-specimen__sample token-specimen__sample--box ' +
+          props.specimenClassName
+        }
+        style={props.inlineStyles}
+      >
+        {props.children}
       </div>
     );
   }
-}
+
+  return (
+    <div className={componentClassName}>
+      <div className="token-specimen__info">
+        <code className="token-specimen__name">{props.name}</code>
+        <code className="token-specimen__value">{props.value}</code>
+        <p className="token-specimen__comment">{props.comment}</p>
+      </div>
+      <div className="token-specimen__body">{sample}</div>
+    </div>
+  );
+};
diff --git a/.storybook/data/tokens.json b/.storybook/data/tokens.json
index 84eb9c121..cbdac0583 100644
--- a/.storybook/data/tokens.json
+++ b/.storybook/data/tokens.json
@@ -66,19 +66,6 @@
   "eds-color-other-ruby-600": "#D41E52",
   "eds-color-other-ruby-700": "#BD0044",
   "eds-color-other-ruby-800": "#8F0134",
-  "eds-color-highlight-100": "#FF9FEC",
-  "eds-color-highlight-200": "#FFBEAA",
-  "eds-color-highlight-300": "#FCFF00",
-  "eds-color-highlight-400": "#9DFFA4",
-  "eds-color-highlight-500": "#00F1FF",
-  "eds-color-highlight-600": "#CFC9FF",
-  "eds-color-info-100": "#F1F9FF",
-  "eds-color-info-200": "#B0D5FF",
-  "eds-color-info-300": "#7FB9FD",
-  "eds-color-info-400": "#5CA7FF",
-  "eds-color-info-500": "#328EFB",
-  "eds-color-info-600": "#1977CD",
-  "eds-color-info-700": "#0563B8",
   "eds-l-max-width": "71.25rem",
   "eds-l-sidebar-width": "13.5rem",
   "eds-l-linelength-width": "36rem",
diff --git a/src/design-tokens/tier-1-definitions/colors.json b/src/design-tokens/tier-1-definitions/colors.json
index 4ff25b891..1899fa143 100644
--- a/src/design-tokens/tier-1-definitions/colors.json
+++ b/src/design-tokens/tier-1-definitions/colors.json
@@ -75,62 +75,6 @@
           "700": { "value": "#BD0044" },
           "800": { "value": "#8F0134" }
         }
-      },
-      "highlight": {
-        "100": {
-          "value": "#FF9FEC",
-          "comment": "@deprecated This token has been deprecated and will be removed in a future EDS release."
-        },
-        "200": {
-          "value": "#FFBEAA",
-          "comment": "@deprecated This token has been deprecated and will be removed in a future EDS release."
-        },
-        "300": {
-          "value": "#FCFF00",
-          "comment": "@deprecated This token has been deprecated and will be removed in a future EDS release."
-        },
-        "400": {
-          "value": "#9DFFA4",
-          "comment": "@deprecated This token has been deprecated and will be removed in a future EDS release."
-        },
-        "500": {
-          "value": "#00F1FF",
-          "comment": "@deprecated This token has been deprecated and will be removed in a future EDS release."
-        },
-        "600": {
-          "value": "#CFC9FF",
-          "comment": "@deprecated This token has been deprecated and will be removed in a future EDS release."
-        }
-      },
-      "info": {
-        "100": {
-          "value": "#F1F9FF",
-          "comment": "legacy token, will be removed"
-        },
-        "200": {
-          "value": "#B0D5FF",
-          "comment": "legacy token, will be removed"
-        },
-        "300": {
-          "value": "#7FB9FD",
-          "comment": "legacy token, will be removed"
-        },
-        "400": {
-          "value": "#5CA7FF",
-          "comment": "legacy token, will be removed"
-        },
-        "500": {
-          "value": "#328EFB",
-          "comment": "legacy token, will be removed"
-        },
-        "600": {
-          "value": "#1977CD",
-          "comment": "legacy token, will be removed"
-        },
-        "700": {
-          "value": "#0563B8",
-          "comment": "legacy token, will be removed"
-        }
       }
     }
   }
diff --git a/src/tokens-dist/css/variables.css b/src/tokens-dist/css/variables.css
index 49eeca165..511346666 100644
--- a/src/tokens-dist/css/variables.css
+++ b/src/tokens-dist/css/variables.css
@@ -66,19 +66,6 @@
   --eds-color-other-ruby-600: #D41E52;
   --eds-color-other-ruby-700: #BD0044;
   --eds-color-other-ruby-800: #8F0134;
-  --eds-color-highlight-100: #FF9FEC; /* @deprecated This token has been deprecated and will be removed in a future EDS release. */
-  --eds-color-highlight-200: #FFBEAA; /* @deprecated This token has been deprecated and will be removed in a future EDS release. */
-  --eds-color-highlight-300: #FCFF00; /* @deprecated This token has been deprecated and will be removed in a future EDS release. */
-  --eds-color-highlight-400: #9DFFA4; /* @deprecated This token has been deprecated and will be removed in a future EDS release. */
-  --eds-color-highlight-500: #00F1FF; /* @deprecated This token has been deprecated and will be removed in a future EDS release. */
-  --eds-color-highlight-600: #CFC9FF; /* @deprecated This token has been deprecated and will be removed in a future EDS release. */
-  --eds-color-info-100: #F1F9FF; /* legacy token, will be removed */
-  --eds-color-info-200: #B0D5FF; /* legacy token, will be removed */
-  --eds-color-info-300: #7FB9FD; /* legacy token, will be removed */
-  --eds-color-info-400: #5CA7FF; /* legacy token, will be removed */
-  --eds-color-info-500: #328EFB; /* legacy token, will be removed */
-  --eds-color-info-600: #1977CD; /* legacy token, will be removed */
-  --eds-color-info-700: #0563B8; /* legacy token, will be removed */
   --eds-l-max-width: 71.25rem; /* Layout tokens are deprecated and will be removed in a future release */
   --eds-l-sidebar-width: 13.5rem; /* Layout tokens are deprecated and will be removed in a future release */
   --eds-l-linelength-width: 36rem; /* Layout tokens are deprecated and will be removed in a future release */
diff --git a/src/tokens-dist/json/variables-nested.json b/src/tokens-dist/json/variables-nested.json
index 18dde3275..ffc8a4b5a 100644
--- a/src/tokens-dist/json/variables-nested.json
+++ b/src/tokens-dist/json/variables-nested.json
@@ -95,23 +95,6 @@
           "700": "#BD0044",
           "800": "#8F0134"
         }
-      },
-      "highlight": {
-        "100": "#FF9FEC",
-        "200": "#FFBEAA",
-        "300": "#FCFF00",
-        "400": "#9DFFA4",
-        "500": "#00F1FF",
-        "600": "#CFC9FF"
-      },
-      "info": {
-        "100": "#F1F9FF",
-        "200": "#B0D5FF",
-        "300": "#7FB9FD",
-        "400": "#5CA7FF",
-        "500": "#328EFB",
-        "600": "#1977CD",
-        "700": "#0563B8"
       }
     },
     "l": {
diff --git a/src/tokens-dist/ts/colors.ts b/src/tokens-dist/ts/colors.ts
index 06df86d9c..6cd3ce199 100644
--- a/src/tokens-dist/ts/colors.ts
+++ b/src/tokens-dist/ts/colors.ts
@@ -50,19 +50,6 @@ export const EdsColorOtherRuby500 = '#F1497B';
 export const EdsColorOtherRuby600 = '#D41E52';
 export const EdsColorOtherRuby700 = '#BD0044';
 export const EdsColorOtherRuby800 = '#8F0134';
-export const EdsColorHighlight100 = '#FF9FEC'; // @deprecated This token has been deprecated and will be removed in a future EDS release.
-export const EdsColorHighlight200 = '#FFBEAA'; // @deprecated This token has been deprecated and will be removed in a future EDS release.
-export const EdsColorHighlight300 = '#FCFF00'; // @deprecated This token has been deprecated and will be removed in a future EDS release.
-export const EdsColorHighlight400 = '#9DFFA4'; // @deprecated This token has been deprecated and will be removed in a future EDS release.
-export const EdsColorHighlight500 = '#00F1FF'; // @deprecated This token has been deprecated and will be removed in a future EDS release.
-export const EdsColorHighlight600 = '#CFC9FF'; // @deprecated This token has been deprecated and will be removed in a future EDS release.
-export const EdsColorInfo100 = '#F1F9FF'; // legacy token, will be removed
-export const EdsColorInfo200 = '#B0D5FF'; // legacy token, will be removed
-export const EdsColorInfo300 = '#7FB9FD'; // legacy token, will be removed
-export const EdsColorInfo400 = '#5CA7FF'; // legacy token, will be removed
-export const EdsColorInfo500 = '#328EFB'; // legacy token, will be removed
-export const EdsColorInfo600 = '#1977CD'; // legacy token, will be removed
-export const EdsColorInfo700 = '#0563B8'; // legacy token, will be removed
 export const EdsThemeColorBackgroundNeutralDefault = '#FFFFFF';
 export const EdsThemeColorBackgroundNeutralDefaultHover = '#F4F6F8';
 export const EdsThemeColorBackgroundNeutralSubtle = '#F4F6F8';