diff --git a/packages/design-tokens/scripts/build-tokens.js b/packages/design-tokens/scripts/build-tokens.js
index c7e97c25c..7bc4cf761 100644
--- a/packages/design-tokens/scripts/build-tokens.js
+++ b/packages/design-tokens/scripts/build-tokens.js
@@ -276,15 +276,13 @@ const darkJson = require('../src/tokens/base/colors/dark')
   for (const path of filesForColorModes) {
     const sansExtension = path.replace(/\.[^/.]+$/, '')
 
-    const prefix = path.split('.').pop() === 'json' ? namespace : undefined
-
     buildPrimitives({
       include: [`tokens/functional/colors/global.json`],
       source: [path], // build the special formats
       namespace,
       platforms: {
         css: {
-          prefix, // we still need to remove namespace form all component files with .js
+          prefix: namespace,
           buildPath: `${outputPath}/css/`,
           transformGroup: 'css',
           files: [
diff --git a/packages/design-tokens/src/tokens/functional/components/accordion/colors.js b/packages/design-tokens/src/tokens/functional/components/accordion/colors.js
index 1a152ac7e..a002ea288 100644
--- a/packages/design-tokens/src/tokens/functional/components/accordion/colors.js
+++ b/packages/design-tokens/src/tokens/functional/components/accordion/colors.js
@@ -1,28 +1,26 @@
 module.exports = {
-  brand: {
-    Accordion: {
-      toggle: {
-        color: {
-          start: {
-            value: 'var(--brand-color-accent-primary)',
-            dark: 'var(--brand-color-accent-primary)',
-          },
-          end: {
-            value: 'var(--brand-color-accent-primary)',
-            dark: 'var(--brand-color-accent-primary)',
-          },
+  Accordion: {
+    toggle: {
+      color: {
+        start: {
+          value: 'var(--brand-color-accent-primary)',
+          dark: 'var(--brand-color-accent-primary)',
+        },
+        end: {
+          value: 'var(--brand-color-accent-primary)',
+          dark: 'var(--brand-color-accent-primary)',
         },
       },
-      border: {
-        color: {
-          default: {
-            value: 'var(--brand-color-border-default)',
-            dark: 'var(--base-color-scale-gray-5)',
-          },
-          emphasis: {
-            value: 'var(--base-color-scale-black-0)',
-            dark: 'var(--base-color-scale-white-0)',
-          },
+    },
+    border: {
+      color: {
+        default: {
+          value: 'var(--brand-color-border-default)',
+          dark: 'var(--base-color-scale-gray-5)',
+        },
+        emphasis: {
+          value: 'var(--base-color-scale-black-0)',
+          dark: 'var(--base-color-scale-white-0)',
         },
       },
     },
diff --git a/packages/design-tokens/src/tokens/functional/components/action-menu/colors.js b/packages/design-tokens/src/tokens/functional/components/action-menu/colors.js
index 7a1297781..8b2be0642 100644
--- a/packages/design-tokens/src/tokens/functional/components/action-menu/colors.js
+++ b/packages/design-tokens/src/tokens/functional/components/action-menu/colors.js
@@ -1,19 +1,17 @@
 module.exports = {
-  brand: {
-    ActionMenu: {
-      color: {
-        item: {
-          hover: {
-            value: 'var(--base-color-scale-gray-1)',
-            dark: 'var(--base-color-scale-gray-6)',
-          },
+  ActionMenu: {
+    color: {
+      item: {
+        hover: {
+          value: 'var(--base-color-scale-gray-1)',
+          dark: 'var(--base-color-scale-gray-6)',
         },
-        scrollbar: {
-          thumb: {
-            bg: {
-              value: 'var(--base-color-scale-gray-0)',
-              dark: 'var(--base-color-scale-gray-3)',
-            },
+      },
+      scrollbar: {
+        thumb: {
+          bg: {
+            value: 'var(--base-color-scale-gray-0)',
+            dark: 'var(--base-color-scale-gray-3)',
           },
         },
       },
diff --git a/packages/design-tokens/src/tokens/functional/components/anchor-nav/colors.js b/packages/design-tokens/src/tokens/functional/components/anchor-nav/colors.js
index 7609226d1..f681f15ab 100644
--- a/packages/design-tokens/src/tokens/functional/components/anchor-nav/colors.js
+++ b/packages/design-tokens/src/tokens/functional/components/anchor-nav/colors.js
@@ -1,16 +1,14 @@
 module.exports = {
-  brand: {
-    AnchorNav: {
-      link: {
-        underline: {
-          default: {
-            value: 'var(--base-color-scale-gray-4)',
-            dark: 'var(--base-color-scale-gray-3)',
-          },
-          pressed: {
-            value: 'var(--base-color-scale-black-0)',
-            dark: 'var(--base-color-scale-white-0)',
-          },
+  AnchorNav: {
+    link: {
+      underline: {
+        default: {
+          value: 'var(--base-color-scale-gray-4)',
+          dark: 'var(--base-color-scale-gray-3)',
+        },
+        pressed: {
+          value: 'var(--base-color-scale-black-0)',
+          dark: 'var(--base-color-scale-white-0)',
         },
       },
     },
diff --git a/packages/design-tokens/src/tokens/functional/components/breadcrumbs/colors.js b/packages/design-tokens/src/tokens/functional/components/breadcrumbs/colors.js
index 61180f365..474624f53 100644
--- a/packages/design-tokens/src/tokens/functional/components/breadcrumbs/colors.js
+++ b/packages/design-tokens/src/tokens/functional/components/breadcrumbs/colors.js
@@ -1,11 +1,9 @@
 module.exports = {
-  brand: {
-    breadcrumbs: {
-      separator: {
-        borderColor: {
-          value: 'var(--base-color-scale-gray-6)',
-          dark: 'var(--base-color-scale-gray-1)',
-        },
+  breadcrumbs: {
+    separator: {
+      borderColor: {
+        value: 'var(--base-color-scale-gray-6)',
+        dark: 'var(--base-color-scale-gray-1)',
       },
     },
   },
diff --git a/packages/design-tokens/src/tokens/functional/components/button/colors.js b/packages/design-tokens/src/tokens/functional/components/button/colors.js
index 5090c225b..5fee81118 100644
--- a/packages/design-tokens/src/tokens/functional/components/button/colors.js
+++ b/packages/design-tokens/src/tokens/functional/components/button/colors.js
@@ -1,124 +1,122 @@
 module.exports = {
-  brand: {
-    button: {
-      primary: {
-        bgColor: {
-          rest: {
-            value: 'var(--base-color-scale-black-0)',
-            dark: 'var(--base-color-scale-white-0)',
-          },
-          hover: {
-            value: 'var(--base-color-scale-gray-8)',
-            dark: 'var(--base-color-scale-gray-0)',
-          },
-          active: {
-            value: 'var(--base-color-scale-gray-8)',
-            dark: 'var(--base-color-scale-gray-0)',
-          },
-          disabled: {
-            value: 'var(--base-color-scale-gray-4)',
-            dark: 'var(--base-color-scale-gray-4)',
-          },
-        },
-        borderColor: {
-          rest: {
-            value: 'var(--base-color-scale-black-0)',
-            dark: 'var(--base-color-scale-white-0)',
-          },
-          hover: {
-            value: 'var(--base-color-scale-gray-8)',
-            dark: 'var(--base-color-scale-white-0)',
-          },
-          active: {
-            value: 'var(--base-color-scale-gray-8)',
-            dark: 'var(--base-color-scale-white-0)',
-          },
-          disabled: {
-            value: 'var(--base-color-scale-gray-4)',
-            dark: 'var(--base-color-scale-gray-4)',
-          },
-        },
-        fgColor: {
-          rest: {
-            value: 'var(--brand-color-text-onEmphasis)',
-            dark: 'var(--brand-color-text-onEmphasis)',
-          },
-          disabled: {
-            value: 'var(--base-color-scale-gray-2)',
-            dark: 'var(--base-color-scale-gray-2)',
-          },
-        },
-        shadow: {
-          active: {
-            value: 'inset 0px 1px 0px 0px var(--brand-button-primary-borderColor-active)',
-            dark: 'inset 0px 1px 0px 0px var(--brand-button-primary-borderColor-active)',
-          },
+  button: {
+    primary: {
+      bgColor: {
+        rest: {
+          value: 'var(--base-color-scale-black-0)',
+          dark: 'var(--base-color-scale-white-0)',
+        },
+        hover: {
+          value: 'var(--base-color-scale-gray-8)',
+          dark: 'var(--base-color-scale-gray-0)',
+        },
+        active: {
+          value: 'var(--base-color-scale-gray-8)',
+          dark: 'var(--base-color-scale-gray-0)',
+        },
+        disabled: {
+          value: 'var(--base-color-scale-gray-4)',
+          dark: 'var(--base-color-scale-gray-4)',
         },
       },
-      secondary: {
-        bgColor: {
-          rest: {
-            value: 'transparent',
-            dark: 'transparent',
-          },
-          hover: {
-            value: '#b7bfc833',
-            dark: '#8a939e33',
-          },
-          active: {
-            value: '#b7bfc866',
-            dark: '#8a939e66',
-          },
-        },
-        borderColor: {
-          rest: {
-            value: 'var(--brand-color-border-default)',
-            dark: 'var(--brand-color-border-default)',
-          },
-          hover: {
-            value: 'var(--base-color-scale-gray-9)',
-            dark: 'var(--base-color-scale-white-0)',
-          },
-          active: {
-            value: 'var(--base-color-scale-gray-9)',
-            dark: 'var(--base-color-scale-white-0)',
-          },
-        },
-        fgColor: {
-          rest: {
-            value: 'var(--brand-color-text-default)',
-            dark: 'var(--brand-color-text-default)',
-          },
-          disabled: {
-            value: 'var(--base-color-scale-gray-3)',
-            dark: 'var(--base-color-scale-gray-4)',
-          },
+      borderColor: {
+        rest: {
+          value: 'var(--base-color-scale-black-0)',
+          dark: 'var(--base-color-scale-white-0)',
+        },
+        hover: {
+          value: 'var(--base-color-scale-gray-8)',
+          dark: 'var(--base-color-scale-white-0)',
+        },
+        active: {
+          value: 'var(--base-color-scale-gray-8)',
+          dark: 'var(--base-color-scale-white-0)',
+        },
+        disabled: {
+          value: 'var(--base-color-scale-gray-4)',
+          dark: 'var(--base-color-scale-gray-4)',
         },
       },
-      subtle: {
-        borderColor: {
-          rest: {
-            value: 'transparent',
-            dark: 'transparent',
-          },
-          hover: {
-            value: 'var(--base-color-scale-gray-9)',
-            dark: 'var(--base-color-scale-white-0)',
-          },
-          active: {
-            value: 'var(--base-color-scale-gray-9)',
-            dark: 'var(--base-color-scale-white-0)',
-          },
-        },
-        fgColor: {
-          rest: {
-            value: 'var(--brand-color-text-default)',
-            dark: 'var(--brand-color-text-default)',
-          },
-          disabled: {
-            value: 'var(--base-color-scale-gray-3)',
-            dark: 'var(--base-color-scale-gray-4)',
-          },
+      fgColor: {
+        rest: {
+          value: 'var(--brand-color-text-onEmphasis)',
+          dark: 'var(--brand-color-text-onEmphasis)',
+        },
+        disabled: {
+          value: 'var(--base-color-scale-gray-2)',
+          dark: 'var(--base-color-scale-gray-2)',
+        },
+      },
+      shadow: {
+        active: {
+          value: 'inset 0px 1px 0px 0px var(--brand-button-primary-borderColor-active)',
+          dark: 'inset 0px 1px 0px 0px var(--brand-button-primary-borderColor-active)',
+        },
+      },
+    },
+    secondary: {
+      bgColor: {
+        rest: {
+          value: 'transparent',
+          dark: 'transparent',
+        },
+        hover: {
+          value: '#b7bfc833',
+          dark: '#8a939e33',
+        },
+        active: {
+          value: '#b7bfc866',
+          dark: '#8a939e66',
+        },
+      },
+      borderColor: {
+        rest: {
+          value: 'var(--brand-color-border-default)',
+          dark: 'var(--brand-color-border-default)',
+        },
+        hover: {
+          value: 'var(--base-color-scale-gray-9)',
+          dark: 'var(--base-color-scale-white-0)',
+        },
+        active: {
+          value: 'var(--base-color-scale-gray-9)',
+          dark: 'var(--base-color-scale-white-0)',
+        },
+      },
+      fgColor: {
+        rest: {
+          value: 'var(--brand-color-text-default)',
+          dark: 'var(--brand-color-text-default)',
+        },
+        disabled: {
+          value: 'var(--base-color-scale-gray-3)',
+          dark: 'var(--base-color-scale-gray-4)',
+        },
+      },
+    },
+    subtle: {
+      borderColor: {
+        rest: {
+          value: 'transparent',
+          dark: 'transparent',
+        },
+        hover: {
+          value: 'var(--base-color-scale-gray-9)',
+          dark: 'var(--base-color-scale-white-0)',
+        },
+        active: {
+          value: 'var(--base-color-scale-gray-9)',
+          dark: 'var(--base-color-scale-white-0)',
+        },
+      },
+      fgColor: {
+        rest: {
+          value: 'var(--brand-color-text-default)',
+          dark: 'var(--brand-color-text-default)',
+        },
+        disabled: {
+          value: 'var(--base-color-scale-gray-3)',
+          dark: 'var(--base-color-scale-gray-4)',
         },
       },
     },
diff --git a/packages/design-tokens/src/tokens/functional/components/comparison-table/colors.js b/packages/design-tokens/src/tokens/functional/components/comparison-table/colors.js
index 09ffd4a0c..d450160a9 100644
--- a/packages/design-tokens/src/tokens/functional/components/comparison-table/colors.js
+++ b/packages/design-tokens/src/tokens/functional/components/comparison-table/colors.js
@@ -1,16 +1,14 @@
 module.exports = {
-  brand: {
-    ComparisonTable: {
-      featured: {
-        color: {
-          start: {
-            value: 'var(--base-color-scale-pink-4)',
-            dark: 'var(--base-color-scale-pink-2)',
-          },
-          end: {
-            value: 'var(--base-color-scale-indigo-5)',
-            dark: 'var(--base-color-scale-indigo-3)',
-          },
+  ComparisonTable: {
+    featured: {
+      color: {
+        start: {
+          value: 'var(--base-color-scale-pink-4)',
+          dark: 'var(--base-color-scale-pink-2)',
+        },
+        end: {
+          value: 'var(--base-color-scale-indigo-5)',
+          dark: 'var(--base-color-scale-indigo-3)',
         },
       },
     },
diff --git a/packages/design-tokens/src/tokens/functional/components/control/colors.js b/packages/design-tokens/src/tokens/functional/components/control/colors.js
index f770b76cb..d9a6337bd 100644
--- a/packages/design-tokens/src/tokens/functional/components/control/colors.js
+++ b/packages/design-tokens/src/tokens/functional/components/control/colors.js
@@ -1,108 +1,106 @@
 module.exports = {
-  brand: {
-    control: {
-      color: {
-        border: {
-          default: {
-            value: 'var(--base-color-scale-gray-4)',
-            dark: 'var(--base-color-scale-gray-4)',
-          },
-          disabled: {
-            value: 'var(--base-color-scale-gray-2)',
-            dark: 'var(--base-color-scale-gray-5)',
-          },
-        },
-        canvas: {
-          disabled: {
-            value: 'var(--base-color-scale-gray-1)',
-            dark: 'var(--base-color-scale-gray-8)',
-          },
-        },
-        fg: {
-          default: {
-            value: 'var(--brand-color-text-default)',
-            dark: 'var(--brand-color-text-default)',
-          },
-          disabled: {
-            value: 'var(--base-color-scale-gray-4)',
-            dark: 'var(--base-color-scale-gray-5)',
-          },
+  control: {
+    color: {
+      border: {
+        default: {
+          value: 'var(--base-color-scale-gray-4)',
+          dark: 'var(--base-color-scale-gray-4)',
+        },
+        disabled: {
+          value: 'var(--base-color-scale-gray-2)',
+          dark: 'var(--base-color-scale-gray-5)',
+        },
+      },
+      canvas: {
+        disabled: {
+          value: 'var(--base-color-scale-gray-1)',
+          dark: 'var(--base-color-scale-gray-8)',
         },
       },
-      checkbox: {
-        bg: {
-          default: {
-            value: 'var(--base-color-scale-white-0)',
-            dark: 'var(--base-color-scale-gray-7)',
-          },
-          checked: {
-            value: 'var(--base-color-scale-black-0)',
-            dark: 'var(--base-color-scale-white-0)',
-          },
-          indeterminate: {
-            value: 'var(--base-color-scale-black-0)',
-            dark: 'var(--base-color-scale-white-0)',
-          },
-          disabled: {
-            value: 'var(--base-color-scale-gray-1)',
-            dark: 'var(--base-color-scale-gray-4)',
-          },
-        },
-        fg: {
-          checked: {
-            value: 'var(--base-color-scale-white-0)',
-            dark: 'var(--base-color-scale-black-0)',
-          },
-        },
-        border: {
-          default: {
-            value: 'var(--base-color-scale-gray-4)',
-            dark: 'var(--base-color-scale-gray-4)',
-          },
-          checked: {
-            value: 'var(--base-color-scale-black-0)',
-            dark: 'var(--base-color-scale-white-0)',
-          },
-          indeterminate: {
-            value: 'var(--base-color-scale-black-0)',
-            dark: 'var(--base-color-scale-white-0)',
-          },
-          disabled: {
-            value: 'var(--base-color-scale-gray-2)',
-            dark: 'var(--base-color-scale-gray-4)',
-          },
+      fg: {
+        default: {
+          value: 'var(--brand-color-text-default)',
+          dark: 'var(--brand-color-text-default)',
+        },
+        disabled: {
+          value: 'var(--base-color-scale-gray-4)',
+          dark: 'var(--base-color-scale-gray-5)',
+        },
+      },
+    },
+    checkbox: {
+      bg: {
+        default: {
+          value: 'var(--base-color-scale-white-0)',
+          dark: 'var(--base-color-scale-gray-7)',
+        },
+        checked: {
+          value: 'var(--base-color-scale-black-0)',
+          dark: 'var(--base-color-scale-white-0)',
+        },
+        indeterminate: {
+          value: 'var(--base-color-scale-black-0)',
+          dark: 'var(--base-color-scale-white-0)',
+        },
+        disabled: {
+          value: 'var(--base-color-scale-gray-1)',
+          dark: 'var(--base-color-scale-gray-4)',
+        },
+      },
+      fg: {
+        checked: {
+          value: 'var(--base-color-scale-white-0)',
+          dark: 'var(--base-color-scale-black-0)',
+        },
+      },
+      border: {
+        default: {
+          value: 'var(--base-color-scale-gray-4)',
+          dark: 'var(--base-color-scale-gray-4)',
+        },
+        checked: {
+          value: 'var(--base-color-scale-black-0)',
+          dark: 'var(--base-color-scale-white-0)',
+        },
+        indeterminate: {
+          value: 'var(--base-color-scale-black-0)',
+          dark: 'var(--base-color-scale-white-0)',
+        },
+        disabled: {
+          value: 'var(--base-color-scale-gray-2)',
+          dark: 'var(--base-color-scale-gray-4)',
+        },
+      },
+    },
+    radio: {
+      bg: {
+        default: {
+          value: 'var(--base-color-scale-white-0)',
+          dark: 'var(--base-color-scale-black-0)',
+        },
+        checked: {
+          value: 'var(--base-color-scale-white-0)',
+          dark: 'var(--base-color-scale-black-0)',
+        },
+        disabled: {
+          value: 'var(--base-color-scale-gray-1)',
+          dark: 'var(--base-color-scale-gray-4)',
+        },
+      },
+      border: {
+        default: {
+          value: 'var(--brand-control-color-border-default)',
+          dark: 'var(--base-color-scale-white-0)',
+        },
+        checked: {
+          value: 'var(--base-color-scale-black-0)',
+          dark: 'var(--base-color-scale-white-0)',
         },
       },
-      radio: {
-        bg: {
-          default: {
-            value: 'var(--base-color-scale-white-0)',
-            dark: 'var(--base-color-scale-black-0)',
-          },
-          checked: {
-            value: 'var(--base-color-scale-white-0)',
-            dark: 'var(--base-color-scale-black-0)',
-          },
-          disabled: {
-            value: 'var(--base-color-scale-gray-1)',
-            dark: 'var(--base-color-scale-gray-4)',
-          },
-        },
-        border: {
-          default: {
-            value: 'var(--brand-control-color-border-default)',
-            dark: 'var(--base-color-scale-white-0)',
-          },
-          checked: {
-            value: 'var(--base-color-scale-black-0)',
-            dark: 'var(--base-color-scale-white-0)',
-          },
-        },
-        dot: {
-          default: {
-            value: 'var(--base-color-scale-black-0)',
-            dark: 'var(--base-color-scale-white-0)',
-          },
+      dot: {
+        default: {
+          value: 'var(--base-color-scale-black-0)',
+          dark: 'var(--base-color-scale-white-0)',
         },
       },
     },
diff --git a/packages/design-tokens/src/tokens/functional/components/cta-banner/colors.js b/packages/design-tokens/src/tokens/functional/components/cta-banner/colors.js
index a1b78d813..2d7f3739b 100644
--- a/packages/design-tokens/src/tokens/functional/components/cta-banner/colors.js
+++ b/packages/design-tokens/src/tokens/functional/components/cta-banner/colors.js
@@ -1,22 +1,20 @@
 module.exports = {
-  brand: {
-    CTABanner: {
-      shadow: {
-        color: {
-          start: {
-            value: 'var(--base-color-scale-green-5)',
-            dark: 'var(--base-color-scale-green-2)',
-          },
-          end: {
-            value: 'var(--base-color-scale-blue-5)',
-            dark: 'var(--base-color-scale-blue-3)',
-          },
+  CTABanner: {
+    shadow: {
+      color: {
+        start: {
+          value: 'var(--base-color-scale-green-5)',
+          dark: 'var(--base-color-scale-green-2)',
+        },
+        end: {
+          value: 'var(--base-color-scale-blue-5)',
+          dark: 'var(--base-color-scale-blue-3)',
         },
       },
-      bgColor: {
-        value: 'var(--brand-color-canvas-default)',
-        dark: 'var(--brand-color-canvas-default)',
-      },
+    },
+    bgColor: {
+      value: 'var(--brand-color-canvas-default)',
+      dark: 'var(--brand-color-canvas-default)',
     },
   },
 }
diff --git a/packages/design-tokens/src/tokens/functional/components/eyebrow-banner/colors.js b/packages/design-tokens/src/tokens/functional/components/eyebrow-banner/colors.js
index 6858672f4..9c2eb511b 100644
--- a/packages/design-tokens/src/tokens/functional/components/eyebrow-banner/colors.js
+++ b/packages/design-tokens/src/tokens/functional/components/eyebrow-banner/colors.js
@@ -1,208 +1,206 @@
 module.exports = {
-  brand: {
-    Eyebrowbanner: {
-      bgColor: {
-        rest: {
-          value: '#FFFFFF99', // white at 60%
-          dark: '#0D111799', // 0D1117 at 60%
-        },
-      },
-      borderColor: {
-        rest: {
-          value: 'var(--brand-color-border-default)',
-          dark: 'var(--base-color-scale-gray-5)',
-        },
-      },
-      heading: {
-        fgColor: {
-          value: 'var(--brand-color-text-default)',
-          dark: 'var(--brand-color-text-default)',
-        },
-      },
-      subHeading: {
-        fgColor: {
-          value: 'var(--brand-color-text-muted)',
-          dark: 'var(--brand-color-text-muted)',
-        },
-      },
-      icon: {
-        background: {
-          default: {
-            value: 'var(--base-color-scale-gray-0)',
-            dark: 'var(--base-color-scale-gray-6)',
-          },
-          blue: {
-            value: 'var(--base-color-scale-blue-0)',
-            dark: 'var(--base-color-scale-blue-8)',
-          },
-          coral: {
-            value: 'var(--base-color-scale-coral-0)',
-            dark: 'var(--base-color-scale-coral-8)',
-          },
-          green: {
-            value: 'var(--base-color-scale-green-0)',
-            dark: 'var(--base-color-scale-green-8)',
-          },
-          gray: {
-            value: 'var(--base-color-scale-gray-0)',
-            dark: 'var(--base-color-scale-gray-6)',
-          },
-          indigo: {
-            value: 'var(--base-color-scale-indigo-0)',
-            dark: 'var(--base-color-scale-indigo-8)',
-          },
-          lemon: {
-            value: 'var(--base-color-scale-lemon-0)',
-            dark: 'var(--base-color-scale-lemon-8)',
-          },
-          lime: {
-            value: 'var(--base-color-scale-lime-0)',
-            dark: 'var(--base-color-scale-lime-8)',
-          },
-          orange: {
-            value: 'var(--base-color-scale-orange-0)',
-            dark: 'var(--base-color-scale-orange-8)',
-          },
-          pink: {
-            value: 'var(--base-color-scale-pink-0)',
-            dark: 'var(--base-color-scale-pink-8)',
-          },
-          purple: {
-            value: 'var(--base-color-scale-purple-0)',
-            dark: 'var(--base-color-scale-purple-8)',
-          },
-          red: {
-            value: 'var(--base-color-scale-red-0)',
-            dark: 'var(--base-color-scale-red-8)',
-          },
-          teal: {
-            value: 'var(--base-color-scale-teal-0)',
-            dark: 'var(--base-color-scale-teal-8)',
-          },
-          yellow: {
-            value: 'var(--base-color-scale-yellow-0)',
-            dark: 'var(--base-color-scale-yellow-8)',
-          },
-        },
+  Eyebrowbanner: {
+    bgColor: {
+      rest: {
+        value: '#FFFFFF99', // white at 60%
+        dark: '#0D111799', // 0D1117 at 60%
+      },
+    },
+    borderColor: {
+      rest: {
+        value: 'var(--brand-color-border-default)',
+        dark: 'var(--base-color-scale-gray-5)',
+      },
+    },
+    heading: {
+      fgColor: {
+        value: 'var(--brand-color-text-default)',
+        dark: 'var(--brand-color-text-default)',
       },
+    },
+    subHeading: {
       fgColor: {
+        value: 'var(--brand-color-text-muted)',
+        dark: 'var(--brand-color-text-muted)',
+      },
+    },
+    icon: {
+      background: {
         default: {
-          start: {
-            value: 'var(--base-color-scale-purple-5)',
-            dark: 'var(--base-color-scale-purple-2)',
-          },
-          middle: {
-            value: 'var(--base-color-scale-pink-5)',
-            dark: 'var(--base-color-scale-pink-3)',
-          },
-          end: {
-            value: 'var(--base-color-scale-red-5)',
-            dark: 'var(--base-color-scale-red-3)',
-          },
+          value: 'var(--base-color-scale-gray-0)',
+          dark: 'var(--base-color-scale-gray-6)',
         },
         blue: {
-          value: 'var(--base-color-scale-blue-5)',
-          dark: 'var(--base-color-scale-blue-2)',
-        },
-        'blue-purple': {
-          start: {
-            value: 'var(--base-color-scale-blue-5)',
-            dark: 'var(--base-color-scale-blue-2)',
-          },
-          end: {
-            value: 'var(--base-color-scale-purple-5)',
-            dark: 'var(--base-color-scale-purple-2)',
-          },
+          value: 'var(--base-color-scale-blue-0)',
+          dark: 'var(--base-color-scale-blue-8)',
         },
         coral: {
-          value: 'var(--base-color-scale-coral-5)',
-          dark: 'var(--base-color-scale-coral-2)',
+          value: 'var(--base-color-scale-coral-0)',
+          dark: 'var(--base-color-scale-coral-8)',
         },
         green: {
-          value: 'var(--base-color-scale-green-5)',
-          dark: 'var(--base-color-scale-green-2)',
-        },
-        'green-blue': {
-          start: {
-            value: 'var(--base-color-scale-green-5)',
-            dark: 'var(--base-color-scale-green-2)',
-          },
-          end: {
-            value: 'var(--base-color-scale-blue-5)',
-            dark: 'var(--base-color-scale-blue-2)',
-          },
+          value: 'var(--base-color-scale-green-0)',
+          dark: 'var(--base-color-scale-green-8)',
         },
         gray: {
-          value: 'var(--base-color-scale-gray-5)',
-          dark: 'var(--base-color-scale-gray-2)',
+          value: 'var(--base-color-scale-gray-0)',
+          dark: 'var(--base-color-scale-gray-6)',
         },
         indigo: {
-          value: 'var(--base-color-scale-indigo-5)',
-          dark: 'var(--base-color-scale-indigo-2)',
+          value: 'var(--base-color-scale-indigo-0)',
+          dark: 'var(--base-color-scale-indigo-8)',
         },
         lemon: {
-          value: 'var(--base-color-scale-lemon-5)',
-          dark: 'var(--base-color-scale-lemon-2)',
+          value: 'var(--base-color-scale-lemon-0)',
+          dark: 'var(--base-color-scale-lemon-8)',
         },
         lime: {
-          value: 'var(--base-color-scale-lime-5)',
-          dark: 'var(--base-color-scale-lime-2)',
+          value: 'var(--base-color-scale-lime-0)',
+          dark: 'var(--base-color-scale-lime-8)',
         },
         orange: {
-          value: 'var(--base-color-scale-orange-5)',
-          dark: 'var(--base-color-scale-orange-2)',
+          value: 'var(--base-color-scale-orange-0)',
+          dark: 'var(--base-color-scale-orange-8)',
         },
         pink: {
+          value: 'var(--base-color-scale-pink-0)',
+          dark: 'var(--base-color-scale-pink-8)',
+        },
+        purple: {
+          value: 'var(--base-color-scale-purple-0)',
+          dark: 'var(--base-color-scale-purple-8)',
+        },
+        red: {
+          value: 'var(--base-color-scale-red-0)',
+          dark: 'var(--base-color-scale-red-8)',
+        },
+        teal: {
+          value: 'var(--base-color-scale-teal-0)',
+          dark: 'var(--base-color-scale-teal-8)',
+        },
+        yellow: {
+          value: 'var(--base-color-scale-yellow-0)',
+          dark: 'var(--base-color-scale-yellow-8)',
+        },
+      },
+    },
+    fgColor: {
+      default: {
+        start: {
+          value: 'var(--base-color-scale-purple-5)',
+          dark: 'var(--base-color-scale-purple-2)',
+        },
+        middle: {
           value: 'var(--base-color-scale-pink-5)',
-          dark: 'var(--base-color-scale-pink-2)',
+          dark: 'var(--base-color-scale-pink-3)',
         },
-        'pink-blue': {
-          start: {
-            value: 'var(--base-color-scale-pink-5)',
-            dark: 'var(--base-color-scale-pink-2)',
-          },
-          end: {
-            value: 'var(--base-color-scale-blue-5)',
-            dark: 'var(--base-color-scale-blue-2)',
-          },
+        end: {
+          value: 'var(--base-color-scale-red-5)',
+          dark: 'var(--base-color-scale-red-3)',
         },
-        purple: {
+      },
+      blue: {
+        value: 'var(--base-color-scale-blue-5)',
+        dark: 'var(--base-color-scale-blue-2)',
+      },
+      'blue-purple': {
+        start: {
+          value: 'var(--base-color-scale-blue-5)',
+          dark: 'var(--base-color-scale-blue-2)',
+        },
+        end: {
           value: 'var(--base-color-scale-purple-5)',
           dark: 'var(--base-color-scale-purple-2)',
         },
-        'purple-red': {
-          start: {
-            value: 'var(--base-color-scale-purple-5)',
-            dark: 'var(--base-color-scale-purple-2)',
-          },
-          end: {
-            value: 'var(--base-color-scale-red-5)',
-            dark: 'var(--base-color-scale-red-2)',
-          },
+      },
+      coral: {
+        value: 'var(--base-color-scale-coral-5)',
+        dark: 'var(--base-color-scale-coral-2)',
+      },
+      green: {
+        value: 'var(--base-color-scale-green-5)',
+        dark: 'var(--base-color-scale-green-2)',
+      },
+      'green-blue': {
+        start: {
+          value: 'var(--base-color-scale-green-5)',
+          dark: 'var(--base-color-scale-green-2)',
         },
-        red: {
+        end: {
+          value: 'var(--base-color-scale-blue-5)',
+          dark: 'var(--base-color-scale-blue-2)',
+        },
+      },
+      gray: {
+        value: 'var(--base-color-scale-gray-5)',
+        dark: 'var(--base-color-scale-gray-2)',
+      },
+      indigo: {
+        value: 'var(--base-color-scale-indigo-5)',
+        dark: 'var(--base-color-scale-indigo-2)',
+      },
+      lemon: {
+        value: 'var(--base-color-scale-lemon-5)',
+        dark: 'var(--base-color-scale-lemon-2)',
+      },
+      lime: {
+        value: 'var(--base-color-scale-lime-5)',
+        dark: 'var(--base-color-scale-lime-2)',
+      },
+      orange: {
+        value: 'var(--base-color-scale-orange-5)',
+        dark: 'var(--base-color-scale-orange-2)',
+      },
+      pink: {
+        value: 'var(--base-color-scale-pink-5)',
+        dark: 'var(--base-color-scale-pink-2)',
+      },
+      'pink-blue': {
+        start: {
+          value: 'var(--base-color-scale-pink-5)',
+          dark: 'var(--base-color-scale-pink-2)',
+        },
+        end: {
+          value: 'var(--base-color-scale-blue-5)',
+          dark: 'var(--base-color-scale-blue-2)',
+        },
+      },
+      purple: {
+        value: 'var(--base-color-scale-purple-5)',
+        dark: 'var(--base-color-scale-purple-2)',
+      },
+      'purple-red': {
+        start: {
+          value: 'var(--base-color-scale-purple-5)',
+          dark: 'var(--base-color-scale-purple-2)',
+        },
+        end: {
           value: 'var(--base-color-scale-red-5)',
           dark: 'var(--base-color-scale-red-2)',
         },
-        'red-orange': {
-          start: {
-            value: 'var(--base-color-scale-red-5)',
-            dark: 'var(--base-color-scale-red-2)',
-          },
-          end: {
-            value: 'var(--base-color-scale-orange-5)',
-            dark: 'var(--base-color-scale-orange-2)',
-          },
-        },
-        teal: {
-          value: 'var(--base-color-scale-teal-5)',
-          dark: 'var(--base-color-scale-teal-2)',
+      },
+      red: {
+        value: 'var(--base-color-scale-red-5)',
+        dark: 'var(--base-color-scale-red-2)',
+      },
+      'red-orange': {
+        start: {
+          value: 'var(--base-color-scale-red-5)',
+          dark: 'var(--base-color-scale-red-2)',
         },
-        yellow: {
-          value: 'var(--base-color-scale-yellow-5)',
-          dark: 'var(--base-color-scale-yellow-2)',
+        end: {
+          value: 'var(--base-color-scale-orange-5)',
+          dark: 'var(--base-color-scale-orange-2)',
         },
       },
+      teal: {
+        value: 'var(--base-color-scale-teal-5)',
+        dark: 'var(--base-color-scale-teal-2)',
+      },
+      yellow: {
+        value: 'var(--base-color-scale-yellow-5)',
+        dark: 'var(--base-color-scale-yellow-2)',
+      },
     },
   },
 }
diff --git a/packages/design-tokens/src/tokens/functional/components/ide/colors.js b/packages/design-tokens/src/tokens/functional/components/ide/colors.js
index fe3ccf8d6..6dff4a94d 100644
--- a/packages/design-tokens/src/tokens/functional/components/ide/colors.js
+++ b/packages/design-tokens/src/tokens/functional/components/ide/colors.js
@@ -1,103 +1,101 @@
 module.exports = {
-  brand: {
-    IDE: {
-      default: {
+  IDE: {
+    default: {
+      bgColor: {
+        value: 'var(--base-color-scale-gray-1)',
+        dark: '#131337',
+      },
+      editor: {
         bgColor: {
-          value: 'var(--base-color-scale-gray-1)',
-          dark: '#131337',
+          value: 'var(--base-color-scale-white-0)',
+          dark: '#242538',
         },
-        editor: {
+        tabs: {
           bgColor: {
-            value: 'var(--base-color-scale-white-0)',
-            dark: '#242538',
+            value: 'var(--base-color-scale-gray-0)',
+            dark: 'linear-gradient(0deg, rgba(0, 56, 255, 0.02) 0%, rgba(0, 56, 255, 0.02) 100%), #17182c',
           },
-          tabs: {
-            bgColor: {
+        },
+        tab: {
+          bgColor: {
+            rest: {
               value: 'var(--base-color-scale-gray-0)',
-              dark: 'linear-gradient(0deg, rgba(0, 56, 255, 0.02) 0%, rgba(0, 56, 255, 0.02) 100%), #17182c',
+              dark: 'rgba(36, 37, 56, 0.5)',
             },
-          },
-          tab: {
-            bgColor: {
-              rest: {
-                value: 'var(--base-color-scale-gray-0)',
-                dark: 'rgba(36, 37, 56, 0.5)',
-              },
-              active: {
-                value: 'var(--base-color-scale-white-0)',
-                dark: '#242538',
-              },
+            active: {
+              value: 'var(--base-color-scale-white-0)',
+              dark: '#242538',
             },
           },
         },
       },
-      glass: {
+    },
+    glass: {
+      bgColor: {
+        rest: {
+          value: 'rgba(255, 255, 255, 0.85)',
+          dark: 'rgba(0, 0, 0, 0.7)',
+        },
+      },
+      chat: {
         bgColor: {
-          rest: {
-            value: 'rgba(255, 255, 255, 0.85)',
-            dark: 'rgba(0, 0, 0, 0.7)',
-          },
+          value: 'rgba(255, 255, 255, 0.06)',
+          dark: 'rgba(0, 0, 0, 0.06)',
         },
-        chat: {
+      },
+      editor: {
+        bgColor: {
+          value: 'rgba(255, 255, 255, 0.06)',
+          dark: '#242538c4',
+        },
+        tabs: {
           bgColor: {
-            value: 'rgba(255, 255, 255, 0.06)',
-            dark: 'rgba(0, 0, 0, 0.06)',
+            value: 'transparent',
+            dark: 'transparent',
           },
         },
-        editor: {
+        tab: {
           bgColor: {
-            value: 'rgba(255, 255, 255, 0.06)',
-            dark: '#242538c4',
-          },
-          tabs: {
-            bgColor: {
-              value: 'transparent',
-              dark: 'transparent',
+            rest: {
+              value: 'rgba(255, 255, 255, 0.10)',
+              dark: '#24253880',
             },
-          },
-          tab: {
-            bgColor: {
-              rest: {
-                value: 'rgba(255, 255, 255, 0.10)',
-                dark: '#24253880',
-              },
-              active: {
-                value: 'rgba(255, 255, 255, 0.06)',
-                dark: '#242538c4',
-              },
+            active: {
+              value: 'rgba(255, 255, 255, 0.06)',
+              dark: '#242538c4',
             },
           },
         },
       },
-      borderColor: {
-        value: 'var(--brand-color-border-muted);',
-        dark: '#171d22;',
+    },
+    borderColor: {
+      value: 'var(--brand-color-border-muted);',
+      dark: '#171d22;',
+    },
+    autoSuggest: {
+      bgColor: {
+        value: '#0969da',
+        dark: '#0969da',
       },
-      autoSuggest: {
-        bgColor: {
-          value: '#0969da',
-          dark: '#0969da',
-        },
-        fgColor: {
-          value: 'var(--base-color-scale-white-0)',
-          dark: 'var(--base-color-scale-white-0)',
-        },
+      fgColor: {
+        value: 'var(--base-color-scale-white-0)',
+        dark: 'var(--base-color-scale-white-0)',
       },
-      autoSuggestLine: {
-        bgColor: {
-          value: 'var(--base-color-scale-blue-0)',
-          dark: 'var(--base-color-scale-blue-9)',
-        },
+    },
+    autoSuggestLine: {
+      bgColor: {
+        value: 'var(--base-color-scale-blue-0)',
+        dark: 'var(--base-color-scale-blue-9)',
       },
-      scrollBar: {
-        bgColor: {
-          value: 'transparent',
-          dark: 'transparent',
-        },
-        fgColor: {
-          value: 'var(--base-color-scale-gray-2)',
-          dark: 'var(--base-color-scale-gray-5)',
-        },
+    },
+    scrollBar: {
+      bgColor: {
+        value: 'transparent',
+        dark: 'transparent',
+      },
+      fgColor: {
+        value: 'var(--base-color-scale-gray-2)',
+        dark: 'var(--base-color-scale-gray-5)',
       },
     },
   },
diff --git a/packages/design-tokens/src/tokens/functional/components/pagination/colors.js b/packages/design-tokens/src/tokens/functional/components/pagination/colors.js
index ed3cf8793..e9a2d46b0 100644
--- a/packages/design-tokens/src/tokens/functional/components/pagination/colors.js
+++ b/packages/design-tokens/src/tokens/functional/components/pagination/colors.js
@@ -1,24 +1,22 @@
 module.exports = {
-  brand: {
-    pagination: {
-      link: {
-        bgColor: {
-          rest: {
-            value: 'var(--base-color-scale-black-0)',
-            dark: 'var(--base-color-scale-white-0)',
-          },
-          active: {
-            value: 'var(--base-color-scale-black-0)',
-            dark: 'var(--base-color-scale-white-0)',
-          },
+  pagination: {
+    link: {
+      bgColor: {
+        rest: {
+          value: 'var(--base-color-scale-black-0)',
+          dark: 'var(--base-color-scale-white-0)',
         },
-      },
-      borderColor: {
-        hover: {
+        active: {
           value: 'var(--base-color-scale-black-0)',
           dark: 'var(--base-color-scale-white-0)',
         },
       },
     },
+    borderColor: {
+      hover: {
+        value: 'var(--base-color-scale-black-0)',
+        dark: 'var(--base-color-scale-white-0)',
+      },
+    },
   },
 }
diff --git a/packages/design-tokens/src/tokens/functional/components/prose/colors.js b/packages/design-tokens/src/tokens/functional/components/prose/colors.js
index c6d6b9103..be2778e4f 100644
--- a/packages/design-tokens/src/tokens/functional/components/prose/colors.js
+++ b/packages/design-tokens/src/tokens/functional/components/prose/colors.js
@@ -1,17 +1,15 @@
 module.exports = {
-  brand: {
-    Prose: {
-      unorderedList: {
-        imageUrl: {
-          value: `url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' focusable='false' role='img' viewBox='0 -3 16 16' width='16' height='16' fill='black' style='display: inline-block; vertical-align: text-bottom; overflow: visible;'%3e%3cpath d='M2 7.75A.75.75 0 0 1 2.75 7h10a.75.75 0 0 1 0 1.5h-10A.75.75 0 0 1 2 7.75Z'%3e%3c/path%3e%3c/svg%3e ")`,
-          dark: `url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' focusable='false' role='img' viewBox='0 -3 16 16' width='16' height='16' fill='white' style='display: inline-block; vertical-align: text-bottom; overflow: visible;'%3e%3cpath d='M2 7.75A.75.75 0 0 1 2.75 7h10a.75.75 0 0 1 0 1.5h-10A.75.75 0 0 1 2 7.75Z'%3e%3c/path%3e%3c/svg%3e ")`,
-        },
+  Prose: {
+    unorderedList: {
+      imageUrl: {
+        value: `url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' focusable='false' role='img' viewBox='0 -3 16 16' width='16' height='16' fill='black' style='display: inline-block; vertical-align: text-bottom; overflow: visible;'%3e%3cpath d='M2 7.75A.75.75 0 0 1 2.75 7h10a.75.75 0 0 1 0 1.5h-10A.75.75 0 0 1 2 7.75Z'%3e%3c/path%3e%3c/svg%3e ")`,
+        dark: `url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' focusable='false' role='img' viewBox='0 -3 16 16' width='16' height='16' fill='white' style='display: inline-block; vertical-align: text-bottom; overflow: visible;'%3e%3cpath d='M2 7.75A.75.75 0 0 1 2.75 7h10a.75.75 0 0 1 0 1.5h-10A.75.75 0 0 1 2 7.75Z'%3e%3c/path%3e%3c/svg%3e ")`,
       },
-      code: {
-        bgColor: {
-          value: 'var(--base-color-scale-indigo-0)',
-          dark: 'var(--base-color-scale-indigo-9)',
-        },
+    },
+    code: {
+      bgColor: {
+        value: 'var(--base-color-scale-indigo-0)',
+        dark: 'var(--base-color-scale-indigo-9)',
       },
     },
   },
diff --git a/packages/design-tokens/src/tokens/functional/components/river-story-scroll/colors.js b/packages/design-tokens/src/tokens/functional/components/river-story-scroll/colors.js
index 62157f32c..b6013ba0b 100644
--- a/packages/design-tokens/src/tokens/functional/components/river-story-scroll/colors.js
+++ b/packages/design-tokens/src/tokens/functional/components/river-story-scroll/colors.js
@@ -1,18 +1,16 @@
 module.exports = {
-  brand: {
-    RiverStoryScroll: {
-      pagination: {
-        fgColor: {
-          value: 'var(--base-color-scale-gray-6)',
-          dark: 'var(--base-color-scale-white-0)',
-        },
+  RiverStoryScroll: {
+    pagination: {
+      fgColor: {
+        value: 'var(--base-color-scale-gray-6)',
+        dark: 'var(--base-color-scale-white-0)',
       },
-      content: {
-        inactive: {
-          bgColor: {
-            value: 'var(--brand-color-canvas-default)',
-            dark: 'var(--brand-color-canvas-default)',
-          },
+    },
+    content: {
+      inactive: {
+        bgColor: {
+          value: 'var(--brand-color-canvas-default)',
+          dark: 'var(--brand-color-canvas-default)',
         },
       },
     },
diff --git a/packages/design-tokens/src/tokens/functional/components/sub-nav/colors.js b/packages/design-tokens/src/tokens/functional/components/sub-nav/colors.js
index 63f85fb14..8564ca0e7 100644
--- a/packages/design-tokens/src/tokens/functional/components/sub-nav/colors.js
+++ b/packages/design-tokens/src/tokens/functional/components/sub-nav/colors.js
@@ -1,29 +1,27 @@
 module.exports = {
-  brand: {
-    SubNav: {
-      color: {
-        link: {
-          rest: {
-            value: 'var(--brand-color-text-default)',
-            dark: 'var(--brand-color-text-default)',
-          },
-          active: {
-            value: 'var(--base-color-scale-blue-5)',
-            dark: 'var(--base-color-scale-blue-3)',
-          },
+  SubNav: {
+    color: {
+      link: {
+        rest: {
+          value: 'var(--brand-color-text-default)',
+          dark: 'var(--brand-color-text-default)',
         },
-        subMenu: {
-          bgColor: {
-            value: 'var(--base-color-scale-white-0)',
-            dark: 'var(--base-color-scale-black-0)',
-          },
+        active: {
+          value: 'var(--base-color-scale-blue-5)',
+          dark: 'var(--base-color-scale-blue-3)',
         },
       },
-      shadow: {
-        value:
-          '0px 100px 80px rgba(0, 0, 0, 0.01), 0px 41px 33px rgba(0, 0, 0, 0.02), 0px 22px 17px rgba(0, 0, 0, 0.02), 0px 12px 10px rgba(0, 0, 0, 0.03), 0px 6px 5px rgba(0, 0, 0, 0.04), 0px 2px 2px rgba(0, 0, 0, 0.07);',
-        dark: '0px 100px 80px rgba(0, 0, 0, 0.01), 0px 41px 33px rgba(0, 0, 0, 0.02), 0px 22px 17px rgba(0, 0, 0, 0.02), 0px 12px 10px rgba(0, 0, 0, 0.03), 0px 6px 5px rgba(0, 0, 0, 0.04), 0px 2px 2px rgba(0, 0, 0, 0.07);',
+      subMenu: {
+        bgColor: {
+          value: 'var(--base-color-scale-white-0)',
+          dark: 'var(--base-color-scale-black-0)',
+        },
       },
     },
+    shadow: {
+      value:
+        '0px 100px 80px rgba(0, 0, 0, 0.01), 0px 41px 33px rgba(0, 0, 0, 0.02), 0px 22px 17px rgba(0, 0, 0, 0.02), 0px 12px 10px rgba(0, 0, 0, 0.03), 0px 6px 5px rgba(0, 0, 0, 0.04), 0px 2px 2px rgba(0, 0, 0, 0.07);',
+      dark: '0px 100px 80px rgba(0, 0, 0, 0.01), 0px 41px 33px rgba(0, 0, 0, 0.02), 0px 22px 17px rgba(0, 0, 0, 0.02), 0px 12px 10px rgba(0, 0, 0, 0.03), 0px 6px 5px rgba(0, 0, 0, 0.04), 0px 2px 2px rgba(0, 0, 0, 0.07);',
+    },
   },
 }
diff --git a/packages/design-tokens/src/tokens/functional/components/subdomain-nav-bar/colors.js b/packages/design-tokens/src/tokens/functional/components/subdomain-nav-bar/colors.js
index 2d586fe56..1e01c5f2a 100644
--- a/packages/design-tokens/src/tokens/functional/components/subdomain-nav-bar/colors.js
+++ b/packages/design-tokens/src/tokens/functional/components/subdomain-nav-bar/colors.js
@@ -1,50 +1,48 @@
 module.exports = {
-  brand: {
-    SubdomainNavBar: {
-      canvas: {
+  SubdomainNavBar: {
+    canvas: {
+      default: {
+        value: '#ffffff80', // base.color.white 0.5 alpha
+        dark: '#0d111780', // base.color.gray.9 0.5 alpha
+      },
+      search: {
+        value: 'var(--base-color-scale-white-0)',
+        dark: 'var(--base-color-scale-black-0)',
+      },
+      overflow: {
         default: {
-          value: '#ffffff80', // base.color.white 0.5 alpha
-          dark: '#0d111780', // base.color.gray.9 0.5 alpha
-        },
-        search: {
           value: 'var(--base-color-scale-white-0)',
-          dark: 'var(--base-color-scale-black-0)',
+          dark: 'var(--base-color-scale-white-0)',
         },
-        overflow: {
-          default: {
-            value: 'var(--base-color-scale-white-0)',
-            dark: 'var(--base-color-scale-white-0)',
-          },
-          hover: {
-            value: 'var(--base-color-scale-gray-0)',
-            dark: 'var(--base-color-scale-gray-0)',
-          },
+        hover: {
+          value: 'var(--base-color-scale-gray-0)',
+          dark: 'var(--base-color-scale-gray-0)',
         },
       },
-      fg: {
-        overflow: {
-          default: {
-            value: 'var(--brand-color-text-default)',
-            dark: 'var(--brand-color-text-onEmphasis)',
-          },
+    },
+    fg: {
+      overflow: {
+        default: {
+          value: 'var(--brand-color-text-default)',
+          dark: 'var(--brand-color-text-onEmphasis)',
         },
       },
-      border: {
-        nav: {
-          default: {
-            value: 'var(--base-color-scale-gray-9)',
-            dark: 'var(--base-color-scale-gray-3)',
-          },
-          pressed: {
-            value: 'var(--base-color-scale-black-0)',
-            dark: 'var(--base-color-scale-white-0)',
-          },
+    },
+    border: {
+      nav: {
+        default: {
+          value: 'var(--base-color-scale-gray-9)',
+          dark: 'var(--base-color-scale-gray-3)',
         },
-        button: {
-          hover: {
-            value: 'var(--base-color-scale-black-0)',
-            dark: 'var(--base-color-scale-white-0)',
-          },
+        pressed: {
+          value: 'var(--base-color-scale-black-0)',
+          dark: 'var(--base-color-scale-white-0)',
+        },
+      },
+      button: {
+        hover: {
+          value: 'var(--base-color-scale-black-0)',
+          dark: 'var(--base-color-scale-white-0)',
         },
       },
     },
diff --git a/packages/design-tokens/src/tokens/functional/components/video-player/colors.js b/packages/design-tokens/src/tokens/functional/components/video-player/colors.js
index 972388bf0..4f150551f 100644
--- a/packages/design-tokens/src/tokens/functional/components/video-player/colors.js
+++ b/packages/design-tokens/src/tokens/functional/components/video-player/colors.js
@@ -1,74 +1,72 @@
 module.exports = {
-  brand: {
-    videoPlayer: {
-      playButton: {
-        bgColor: {
-          rest: {
-            value: 'var(--base-color-scale-blue-5)',
-            dark: 'var(--base-color-scale-blue-5)',
-          },
-        },
-        fgColor: {
-          rest: {
-            value: 'var(--base-color-scale-gray-0)',
-            dark: 'var(--base-color-scale-gray-0)',
-          },
+  videoPlayer: {
+    playButton: {
+      bgColor: {
+        rest: {
+          value: 'var(--base-color-scale-blue-5)',
+          dark: 'var(--base-color-scale-blue-5)',
         },
       },
-      title: {
-        bgColor: {
-          value: 'linear-gradient(#01040966, var(--base-color-scale-transparent))',
-          dark: 'linear-gradient(#01040966, var(--base-color-scale-transparent))',
-        },
-        fgColor: {
+      fgColor: {
+        rest: {
           value: 'var(--base-color-scale-gray-0)',
           dark: 'var(--base-color-scale-gray-0)',
         },
       },
-      controls: {
-        bgColor: {
-          value: 'linear-gradient(var(--base-color-scale-transparent), #01040966)',
-          dark: 'linear-gradient(var(--base-color-scale-transparent), #01040966)',
-        },
-        fgColor: {
+    },
+    title: {
+      bgColor: {
+        value: 'linear-gradient(#01040966, var(--base-color-scale-transparent))',
+        dark: 'linear-gradient(#01040966, var(--base-color-scale-transparent))',
+      },
+      fgColor: {
+        value: 'var(--base-color-scale-gray-0)',
+        dark: 'var(--base-color-scale-gray-0)',
+      },
+    },
+    controls: {
+      bgColor: {
+        value: 'linear-gradient(var(--base-color-scale-transparent), #01040966)',
+        dark: 'linear-gradient(var(--base-color-scale-transparent), #01040966)',
+      },
+      fgColor: {
+        value: 'var(--base-color-scale-gray-0)',
+        dark: 'var(--base-color-scale-gray-0)',
+      },
+    },
+    closedCaption: {
+      bgColor: {
+        enabled: {
           value: 'var(--base-color-scale-gray-0)',
           dark: 'var(--base-color-scale-gray-0)',
         },
       },
-      closedCaption: {
-        bgColor: {
-          enabled: {
-            value: 'var(--base-color-scale-gray-0)',
-            dark: 'var(--base-color-scale-gray-0)',
-          },
+      fgColor: {
+        enabled: {
+          value: 'var(--base-color-scale-black-0)',
+          dark: 'var(--base-color-scale-black-0)',
         },
-        fgColor: {
-          enabled: {
-            value: 'var(--base-color-scale-black-0)',
-            dark: 'var(--base-color-scale-black-0)',
-          },
-          disabled: {
-            value: 'var(--base-color-scale-gray-0)',
-            dark: 'var(--base-color-scale-gray-0)',
-          },
+        disabled: {
+          value: 'var(--base-color-scale-gray-0)',
+          dark: 'var(--base-color-scale-gray-0)',
         },
-        borderColor: {
-          enabled: {
-            value: 'var(--base-color-scale-gray-0)',
-            dark: 'var(--base-color-scale-gray-0)',
-          },
+      },
+      borderColor: {
+        enabled: {
+          value: 'var(--base-color-scale-gray-0)',
+          dark: 'var(--base-color-scale-gray-0)',
         },
       },
-      range: {
-        bgColor: {
-          default: {
-            value: 'var(--base-color-scale-gray-0)',
-            dark: 'var(--base-color-scale-gray-0)',
-          },
-          progress: {
-            value: 'var(--base-color-scale-blue-5)',
-            dark: 'var(--base-color-scale-blue-5)',
-          },
+    },
+    range: {
+      bgColor: {
+        default: {
+          value: 'var(--base-color-scale-gray-0)',
+          dark: 'var(--base-color-scale-gray-0)',
+        },
+        progress: {
+          value: 'var(--base-color-scale-blue-5)',
+          dark: 'var(--base-color-scale-blue-5)',
         },
       },
     },