diff --git a/packages/vanilla/src/sass/components/_badges-chips-tags.scss b/packages/vanilla/src/sass/components/_badges-chips-tags.scss
index 0abb1d59..ace564d4 100644
--- a/packages/vanilla/src/sass/components/_badges-chips-tags.scss
+++ b/packages/vanilla/src/sass/components/_badges-chips-tags.scss
@@ -55,7 +55,7 @@
   width: fit-content;
   padding: 0 0 0 var(--cbp-space-3x);
   color: var(--cbp-color-text-lightest);
-  background-color: var(--cbp-color-interactive-neutral-base); // --cbp-color-interactive-secondary-dark does not exist
+  background-color: var(--cbp-color-interactive-secondary-base); // --cbp-color-interactive-secondary-dark does not exist
   border-width: 0;
   border-radius: var(--cbp-border-radius-pill);
   text-transform: uppercase;
diff --git a/packages/vanilla/src/sass/components/_dropdown.scss b/packages/vanilla/src/sass/components/_dropdown.scss
index 5283ac5c..76e86e61 100644
--- a/packages/vanilla/src/sass/components/_dropdown.scss
+++ b/packages/vanilla/src/sass/components/_dropdown.scss
@@ -6,7 +6,7 @@
 .cbp-dropdown__custom {
   align-items: center;
   background-color: transparent;
-  border: 1px solid var(--cbp-color-interactive-neutral-base);
+  border: 1px solid var(--cbp-color-interactive-secondary-base);
   border-radius: 3px;
   border-right: 0;
   cursor: inherit;
@@ -22,12 +22,12 @@
   width: 100%;
 
   &:hover {
-    border: 2px solid var(--cbp-color-interactive-neutral-darker);
+    border: 2px solid var(--cbp-color-interactive-secondary-darker);
     border-right: 0;
   }
   
   &:hover::after {
-    background-color: var(--cbp-color-interactive-neutral-darker);
+    background-color: var(--cbp-color-interactive-secondary-darker);
     // border: 2px solid $cbp-ui-neutral-darker;
   }
 
@@ -44,12 +44,12 @@
     }
 
     &:hover {
-      border: 2px solid var(--cbp-color-interactive-neutral-darker);
+      border: 2px solid var(--cbp-color-interactive-secondary-darker);
       border-right: 0;
     }
 
     &:disabled:hover::after {
-      background-color: var(--cbp-color-interactive-neutral-darker);
+      background-color: var(--cbp-color-interactive-secondary-darker);
       // border: 2px solid $cbp-ui-neutral-darker;
     }
   }
@@ -64,7 +64,7 @@
 /* Down Caret */
 .cbp-dropdown__custom::after {
   align-items: center;
-  background-color: var(--cbp-color-interactive-neutral-base);
+  background-color: var(--cbp-color-interactive-secondary-base);
   // border: 2px solid $cbp-ui-neutral-base;
   border-top-right-radius: 3px;
   border-bottom-right-radius: 3px;
@@ -97,7 +97,7 @@
 /* Dropdown Menu */
 .cbp-dropdown {
   background-color: var(--cbp-color-white);
-  border: 1px solid var(--cbp-color-interactive-neutral-base);
+  border: 1px solid var(--cbp-color-interactive-secondary-base);
   border-top-left-radius: 0px;
   border-top-right-radius: 0px;
   border-bottom-left-radius: 3px;
@@ -126,13 +126,13 @@
     text-decoration: none;
 
     &:hover:not([disabled]) {
-      background-color: var(--cbp-color-interactive-neutral-darker);
+      background-color: var(--cbp-color-interactive-secondary-darker);
       color: var(--cbp-color-text-lightest);
       cursor: pointer;
       font-weight: 700;
 
       &::after {
-        border-bottom: 1px solid var(--cbp-color-interactive-neutral-darker);
+        border-bottom: 1px solid var(--cbp-color-interactive-secondary-darker);
       }
     }
 
@@ -145,14 +145,14 @@
       &::after {
         content: "";
         display: none;
-        border-bottom: 1px solid var(--cbp-color-interactive-neutral-darker);
+        border-bottom: 1px solid var(--cbp-color-interactive-secondary-darker);
       }
     }
 
     /* Hacky solution due to width property (right margin) of separating line */
     &::after {
       content: "";
-      border-bottom: 1px solid var(--cbp-color-interactive-neutral-lighter);
+      border-bottom: 1px solid var(--cbp-color-interactive-secondary-lighter);
       display: block;
       height: 1px;
       left: 12px;
@@ -185,7 +185,7 @@
 
     &:hover:not([disabled]) {
       background-color: inherit;
-      border-color: var(--cbp-color-interactive-neutral-lighter);
+      border-color: var(--cbp-color-interactive-secondary-lighter);
       box-shadow: initial;
       clip-path: initial;
     }
@@ -205,7 +205,7 @@
     }
 
     &:focus {
-      border: 2px solid var(--cbp-color-interactive-neutral-lighter);
+      border: 2px solid var(--cbp-color-interactive-secondary-lighter);
       box-shadow: initial;
       clip-path: initial;
       outline: 0 !important; // Overriding style from _focus.scss??
@@ -220,7 +220,7 @@
   /* Hacky solution due to width property (right margin) of separating line */
   &::after {
     content: "";
-    border-bottom: 1px solid var(--cbp-color-interactive-neutral-lighter);
+    border-bottom: 1px solid var(--cbp-color-interactive-secondary-lighter);
     display: block;
     height: 1px;
     left: 12px;
diff --git a/packages/vanilla/src/sass/components/_fileinput.scss b/packages/vanilla/src/sass/components/_fileinput.scss
index 7704b923..e6bec47b 100644
--- a/packages/vanilla/src/sass/components/_fileinput.scss
+++ b/packages/vanilla/src/sass/components/_fileinput.scss
@@ -5,7 +5,7 @@
   position: relative;
   
   background-color: transparent;
-  border: var(--cbp-border-size-md) dashed var(--cbp-color-interactive-neutral-base);
+  border: var(--cbp-border-size-md) dashed var(--cbp-color-interactive-secondary-base);
   border-radius: var(--cbp-border-radius-soft);
   cursor: pointer;
 
@@ -54,12 +54,12 @@
   }
 
   &:hover {
-    border: var(--cbp-border-size-md) dashed var(--cbp-color-interactive-neutral-darker);
-    outline: var(--cbp-border-size-xl) solid var(--cbp-color-interactive-neutral-light);
+    border: var(--cbp-border-size-md) dashed var(--cbp-color-interactive-secondary-darker);
+    outline: var(--cbp-border-size-xl) solid var(--cbp-color-interactive-secondary-light);
     outline-offset: calc(-1 * var(--cbp-space-3x) / 2);
 
     & > .cbp-btn__secondary {
-      background-color: var(--cbp-color-interactive-neutral-darker);
+      background-color: var(--cbp-color-interactive-secondary-darker);
     }
   }
 
@@ -137,7 +137,7 @@
     width: var(--cbp-space-7x);
 
     & > i {
-      color: var(--cbp-color-interactive-neutral-dark);
+      color: var(--cbp-color-interactive-secondary-dark);
       vertical-align: middle;
     }
 
@@ -173,16 +173,16 @@
     }
 
     &:hover {
-      background-color: var(--cbp-color-interactive-neutral-darker);
+      background-color: var(--cbp-color-interactive-secondary-darker);
 
       & > i {
-        color: var(--cbp-color-interactive-neutral-lighter);
+        color: var(--cbp-color-interactive-secondary-lighter);
       }
     }
 
     &:focus {
       & > i {
-        color: var(--cbp-color-interactive-neutral-lighter);
+        color: var(--cbp-color-interactive-secondary-lighter);
       }
     }
   }
@@ -231,17 +231,17 @@
       }
 
       &:hover {
-        background-color: var(--cbp-color-interactive-neutral-darker);
+        background-color: var(--cbp-color-interactive-secondary-darker);
 
         & > i {
-          color: var(--cbp-color-interactive-neutral-lighter);
+          color: var(--cbp-color-interactive-secondary-lighter);
         }
       }
 
       &:focus {
 
         & > i {
-          color: var(--cbp-color-interactive-neutral-lighter);
+          color: var(--cbp-color-interactive-secondary-lighter);
         }
       }
     }
diff --git a/packages/vanilla/src/sass/components/_menu.scss b/packages/vanilla/src/sass/components/_menu.scss
index e6e045bd..54a70a24 100644
--- a/packages/vanilla/src/sass/components/_menu.scss
+++ b/packages/vanilla/src/sass/components/_menu.scss
@@ -19,7 +19,7 @@
     }
 
     &:hover:not(:focus) {
-      background-color: var(--cbp-color-interactive-neutral-light);
+      background-color: var(--cbp-color-interactive-secondary-light);
     }
   }
 
diff --git a/packages/vanilla/src/sass/components/_toggle.scss b/packages/vanilla/src/sass/components/_toggle.scss
index 3c8face0..f17b360c 100644
--- a/packages/vanilla/src/sass/components/_toggle.scss
+++ b/packages/vanilla/src/sass/components/_toggle.scss
@@ -60,7 +60,7 @@
   }
 
   &:disabled:hover + .slider {
-    background-color: var(--cbp-color-interactive-neutral-dark);
+    background-color: var(--cbp-color-interactive-secondary-dark);
   }
 
   &:disabled:focus + .slider {
@@ -78,7 +78,7 @@
   left: 0;
   right: 0;
   bottom: 0;
-  background-color: var(--cbp-color-interactive-neutral-light);
+  background-color: var(--cbp-color-interactive-secondary-light);
   border-radius: var(--cbp-border-radius-pill);
   cursor: pointer;
 
@@ -97,7 +97,7 @@
   }
 
   &:hover {
-    background-color: var(--cbp-color-interactive-neutral-dark);
+    background-color: var(--cbp-color-interactive-secondary-dark);
 
     &::before {
       background-color: transparent;
diff --git a/packages/vanilla/src/sass/components/accordion/_index.scss b/packages/vanilla/src/sass/components/accordion/_index.scss
index 4be67f82..231e4beb 100644
--- a/packages/vanilla/src/sass/components/accordion/_index.scss
+++ b/packages/vanilla/src/sass/components/accordion/_index.scss
@@ -11,7 +11,7 @@
 .cbp-accordion__control {
   display: flex;
   align-items: center;
-  background: var(--cbp-color-interactive-neutral-lighter);
+  background: var(--cbp-color-interactive-secondary-lighter);
   border: none;
   color: var(--cbp-color-text-darkest);
   justify-content: space-between;
@@ -32,7 +32,7 @@
   }
 
   &:hover {
-    background-color: var(--cbp-color-interactive-neutral-light);
+    background-color: var(--cbp-color-interactive-secondary-light);
   }
 
   &:focus {
diff --git a/packages/vanilla/src/sass/components/banner/_usa.scss b/packages/vanilla/src/sass/components/banner/_usa.scss
index b1903245..2159f6cc 100644
--- a/packages/vanilla/src/sass/components/banner/_usa.scss
+++ b/packages/vanilla/src/sass/components/banner/_usa.scss
@@ -25,7 +25,7 @@
 .cbp-banner__toggle {
   background-color: transparent;
   border: 0;
-  color: var(--cbp-color-interactive-neutral-light);
+  color: var(--cbp-color-interactive-secondary-light);
   padding: 0;
   text-decoration: underline;
 
@@ -45,7 +45,7 @@
   }
 
   &:hover {
-    color: var(--cbp-color-interactive-neutral-lighter);
+    color: var(--cbp-color-interactive-secondary-lighter);
   }
 
   &:focus {
diff --git a/packages/vanilla/src/sass/components/button/_secondary.scss b/packages/vanilla/src/sass/components/button/_secondary.scss
index a5e29229..083dec31 100644
--- a/packages/vanilla/src/sass/components/button/_secondary.scss
+++ b/packages/vanilla/src/sass/components/button/_secondary.scss
@@ -1,27 +1,27 @@
 @use 'mixins' as *;
 
 .cbp-btn__secondary {
-  background-color: var(--cbp-color-interactive-neutral-dark);
-  border-color: var(--cbp-color-interactive-neutral-dark);
+  background-color: var(--cbp-color-interactive-secondary-dark);
+  border-color: var(--cbp-color-interactive-secondary-dark);
   color: var(--cbp-color-text-lightest);
 
   &:hover {
-    background-color: var(--cbp-color-interactive-neutral-darker);
-    border-color: var(--cbp-color-interactive-neutral-darker);
+    background-color: var(--cbp-color-interactive-secondary-darker);
+    border-color: var(--cbp-color-interactive-secondary-darker);
   }
   @include btn-active-solid-pseudo;
 }
 
 .cbp-btn__secondary-outline {
   background-color: var(--cbp-color-white);
-  border: var(--cbp-border-size-md) solid var(--cbp-color-interactive-neutral-dark);
-  color: var(--cbp-color-interactive-neutral-dark);
+  border: var(--cbp-border-size-md) solid var(--cbp-color-interactive-secondary-dark);
+  color: var(--cbp-color-interactive-secondary-dark);
   padding-top: var(--cbp-space-2x);
   padding-bottom: var(--cbp-space-2x);
   
   &:hover {
-    background-color: var(--cbp-color-interactive-neutral-darker);
-    border-color: var(--cbp-color-interactive-neutral-darker);
+    background-color: var(--cbp-color-interactive-secondary-darker);
+    border-color: var(--cbp-color-interactive-secondary-darker);
     color: var(--cbp-color-text-lightest);
   }
 
@@ -31,10 +31,10 @@
 .cbp-btn__secondary-ghost {
   background-color: transparent;
   border-color: transparent;
-  color: var(--cbp-color-interactive-neutral-dark);
+  color: var(--cbp-color-interactive-secondary-dark);
 
   &:hover {
-    background-color: var(--cbp-color-interactive-neutral-lighter);
+    background-color: var(--cbp-color-interactive-secondary-lighter);
   }
 
   &:disabled {
@@ -54,8 +54,8 @@
 }
 
 .cbp-btn__secondary-float {
-  background-color: var(--cbp-color-interactive-neutral-dark);
-  border-color: var(--cbp-color-interactive-neutral-dark);
+  background-color: var(--cbp-color-interactive-secondary-dark);
+  border-color: var(--cbp-color-interactive-secondary-dark);
   border-radius: var(--cbp-border-radius-circle);
   box-shadow: 2px 2px 5px 0 rgba(0, 0, 0, 0.5);
   color: var(--cbp-color-text-lightest);
@@ -71,8 +71,8 @@
   }
 
   &:hover {
-    background-color: var(--cbp-color-interactive-neutral-darker);
-    border-color: var(--cbp-color-interactive-neutral-darker);
+    background-color: var(--cbp-color-interactive-secondary-darker);
+    border-color: var(--cbp-color-interactive-secondary-darker);
   }
 
   &:active {
@@ -82,13 +82,13 @@
 
 [data-cbp-theme="dark"] {
   & .cbp-btn__secondary {
-    background-color: var(--cbp-color-interactive-neutral-lighter);
-    border-color: var(--cbp-color-interactive-neutral-lighter);
+    background-color: var(--cbp-color-interactive-secondary-lighter);
+    border-color: var(--cbp-color-interactive-secondary-lighter);
     color: var(--cbp-color-text-darkest);
 
     &:hover {
-      background-color: var(--cbp-color-interactive-neutral-light);
-      border-color: var(--cbp-color-interactive-neutral-light);
+      background-color: var(--cbp-color-interactive-secondary-light);
+      border-color: var(--cbp-color-interactive-secondary-light);
     }
 
     @include btn-active-solid-pseudo($darkMode: true);
@@ -96,12 +96,12 @@
 
   & .cbp-btn__secondary-outline {
     background-color: var(--cbp-color-base-neutral-darker);
-    border-color: var(--cbp-color-interactive-neutral-lighter);
-    color: var(--cbp-color-interactive-neutral-lighter);
+    border-color: var(--cbp-color-interactive-secondary-lighter);
+    color: var(--cbp-color-interactive-secondary-lighter);
 
     &:hover {
-      background-color: var(--cbp-color-interactive-neutral-light);
-      border-color: var(--cbp-color-interactive-neutral-light);
+      background-color: var(--cbp-color-interactive-secondary-light);
+      border-color: var(--cbp-color-interactive-secondary-light);
       color: var(--cbp-color-text-darkest);
     }
 
@@ -109,11 +109,11 @@
   }
 
   & .cbp-btn__secondary-ghost {
-    color: var(--cbp-color-interactive-neutral-lighter);
+    color: var(--cbp-color-interactive-secondary-lighter);
 
     &:hover {
-      background-color: var(--cbp-color-interactive-neutral-darker);
-      color: var(--cbp-color-interactive-neutral-lighter);
+      background-color: var(--cbp-color-interactive-secondary-darker);
+      color: var(--cbp-color-interactive-secondary-lighter);
     }
 
     &:disabled {
@@ -122,13 +122,13 @@
   }
 
   & .cbp-btn__secondary-float {
-    background-color: var(--cbp-color-interactive-neutral-lighter);
-    border-color: var(--cbp-color-interactive-neutral-lighter);
+    background-color: var(--cbp-color-interactive-secondary-lighter);
+    border-color: var(--cbp-color-interactive-secondary-lighter);
     color: var(--cbp-color-text-darkest);
   
     &:hover {
-      background-color: var(--cbp-color-interactive-neutral-light);
-      border-color: var(--cbp-color-interactive-neutral-light);
+      background-color: var(--cbp-color-interactive-secondary-light);
+      border-color: var(--cbp-color-interactive-secondary-light);
       color: var(--cbp-color-text-darkest);
     }
   }
diff --git a/packages/vanilla/src/sass/components/button/_segmentedbuttongroup.scss b/packages/vanilla/src/sass/components/button/_segmentedbuttongroup.scss
index 2a5aace8..082e8cea 100644
--- a/packages/vanilla/src/sass/components/button/_segmentedbuttongroup.scss
+++ b/packages/vanilla/src/sass/components/button/_segmentedbuttongroup.scss
@@ -10,7 +10,7 @@
     @extend .cbp-btn;
     background-color: var(--cbp-color-white);
     border-style: solid;
-    border-color: var(--cbp-color-interactive-neutral-dark);
+    border-color: var(--cbp-color-interactive-secondary-dark);
     border-width: var(--cbp-border-size-md) calc(var(--cbp-border-size-md) / 2);
     border-radius: 0;
     min-height: var(--cbp-space-9x);
diff --git a/packages/vanilla/src/sass/components/card/_base.scss b/packages/vanilla/src/sass/components/card/_base.scss
index 8ca555f3..c5489948 100644
--- a/packages/vanilla/src/sass/components/card/_base.scss
+++ b/packages/vanilla/src/sass/components/card/_base.scss
@@ -24,7 +24,7 @@
 }
 
 .cbp-card__header--flag {
-  background-color: var(--cbp-color-interactive-neutral-base);
+  background-color: var(--cbp-color-interactive-secondary-base);
   padding: var(--cbp-space-4x) var(--cbp-space-4x) var(--cbp-space-5x) var(--cbp-space-4x);
 
   & > .cbp-card__title {
diff --git a/packages/vanilla/src/sass/components/checkbox/_index.scss b/packages/vanilla/src/sass/components/checkbox/_index.scss
index ea7dc0f2..c8e072ed 100644
--- a/packages/vanilla/src/sass/components/checkbox/_index.scss
+++ b/packages/vanilla/src/sass/components/checkbox/_index.scss
@@ -38,7 +38,7 @@
   -webkit-appearance: none;
   -o-appearance: none;
   background-color: var(--cbp-color-white);
-  border-color: var(--cbp-color-interactive-neutral-base);
+  border-color: var(--cbp-color-interactive-secondary-base);
   border-style: solid;
   border-width: var(--cbp-border-size-md);
   border-radius: var(--cbp-border-radius-soft);
@@ -113,8 +113,8 @@
   border-color: var(--cbp-color-interactive-disabled-dark);
 
   &:hover {
-    border-color: var(--cbp-color-interactive-neutral-base);
-    box-shadow: 0 0 0 8px var(--cbp-color-interactive-neutral-lighter);
+    border-color: var(--cbp-color-interactive-secondary-base);
+    box-shadow: 0 0 0 8px var(--cbp-color-interactive-secondary-lighter);
     clip-path: circle(80%);
   }
 }
@@ -137,7 +137,7 @@
   }
 
   &:hover {
-    background-color: var(--cbp-color-interactive-neutral-base);
+    background-color: var(--cbp-color-interactive-secondary-base);
     box-shadow: 0 0 0 8px var(--cbp-color-interactive-disabled-light);
     clip-path: circle(80%);
   }
@@ -182,8 +182,8 @@
   }
 
   &:hover {
-    background-color: var(--cbp-color-interactive-neutral-base);
-    border-color: var(--cbp-color-interactive-neutral-base);
+    background-color: var(--cbp-color-interactive-secondary-base);
+    border-color: var(--cbp-color-interactive-secondary-base);
     box-shadow: 0 0 0 8px var(--cbp-color-interactive-disabled-light); // $cbp-selected-light
     clip-path: circle(80%);
   }
diff --git a/packages/vanilla/src/sass/components/drawer/_hamburger.scss b/packages/vanilla/src/sass/components/drawer/_hamburger.scss
index aceee551..4073a110 100644
--- a/packages/vanilla/src/sass/components/drawer/_hamburger.scss
+++ b/packages/vanilla/src/sass/components/drawer/_hamburger.scss
@@ -3,18 +3,18 @@
 
 @mixin hamburger-menu {
   background-color: transparent;
-  border: 2px solid var(--cbp-color-interactive-neutral-darker);
+  border: 2px solid var(--cbp-color-interactive-secondary-darker);
   border-radius: 3px;
   font-size: 14px;
   height: 36px;
   width: 36px;
 
   & > i {
-    color: var(--cbp-color-interactive-neutral-darker);
+    color: var(--cbp-color-interactive-secondary-darker);
   }
 
   &:hover {
-    background-color: var(--cbp-color-interactive-neutral-darker);
+    background-color: var(--cbp-color-interactive-secondary-darker);
 
     & > i {
       color: var(--cbp-color-text-lightest);
diff --git a/packages/vanilla/src/sass/components/drawer/_mixins.scss b/packages/vanilla/src/sass/components/drawer/_mixins.scss
index d17e6c88..976fddc3 100644
--- a/packages/vanilla/src/sass/components/drawer/_mixins.scss
+++ b/packages/vanilla/src/sass/components/drawer/_mixins.scss
@@ -87,12 +87,12 @@ $drawer-sizes: (
   width: 36px;
 
   & > i {
-    color: var(--cbp-color-interactive-neutral-lighter);
+    color: var(--cbp-color-interactive-secondary-lighter);
     font-size: 14px;
   }
 
   &:hover {
-    background-color: var(--cbp-color-interactive-neutral-dark);
+    background-color: var(--cbp-color-interactive-secondary-dark);
 
     & > i {
       color: var(--cbp-color-text-lightest);
@@ -121,7 +121,7 @@ $drawer-sizes: (
   border-color: transparent;
   border-style: solid;
   border-bottom: 1px solid var(--cbp-color-base-neutral-light);
-  color: var(--cbp-color-interactive-neutral-darker);
+  color: var(--cbp-color-interactive-secondary-darker);
   display: flex;
   font-size: $font-size;
   font-weight: 500;
@@ -137,8 +137,8 @@ $drawer-sizes: (
   }
   
   &:hover {
-    background-color: var(--cbp-color-interactive-neutral-lighter);
-    border-color: var(--cbp-color-interactive-neutral-darker);
+    background-color: var(--cbp-color-interactive-secondary-lighter);
+    border-color: var(--cbp-color-interactive-secondary-darker);
     border-bottom-color: var(--cbp-color-base-neutral-light);
     color: var(--cbp-color-text-darkest);
 
diff --git a/packages/vanilla/src/sass/components/expand/_index.scss b/packages/vanilla/src/sass/components/expand/_index.scss
index a01ef398..889d984b 100644
--- a/packages/vanilla/src/sass/components/expand/_index.scss
+++ b/packages/vanilla/src/sass/components/expand/_index.scss
@@ -8,7 +8,7 @@
   width: fit-content;
 
   &:hover > button {
-    background-color: var(--cbp-color-interactive-neutral-darker);
+    background-color: var(--cbp-color-interactive-secondary-darker);
 
     & > i {
       color: var(--cbp-color-white);
@@ -27,7 +27,7 @@
     }
 
     & > i {
-      color: var(--cbp-color-interactive-neutral-darker);
+      color: var(--cbp-color-interactive-secondary-darker);
       transform: rotate(0);
       transition: transform var(--cbp-motion-duration-shortest) cubic-bezier(var(--cbp-motion-easing-standard-accelerate));
     }
diff --git a/packages/vanilla/src/sass/components/footer/_external.scss b/packages/vanilla/src/sass/components/footer/_external.scss
index 7c5101a4..b46595d9 100644
--- a/packages/vanilla/src/sass/components/footer/_external.scss
+++ b/packages/vanilla/src/sass/components/footer/_external.scss
@@ -97,7 +97,7 @@
   & > a[href] {
     display: inline-block;
     border-radius: var(--cbp-border-radius-softest);
-    color: var(--cbp-color-interactive-neutral-lighter);
+    color: var(--cbp-color-interactive-secondary-lighter);
     font-weight: var(--cbp-font-weight-medium);
     margin-top: var(--cbp-space-4x);
     text-decoration: none;
@@ -109,8 +109,8 @@
     }
 
     &:hover {
-      background-color: var(--cbp-color-interactive-neutral-darker);
-      color: var(--cbp-color-interactive-neutral-lighter);
+      background-color: var(--cbp-color-interactive-secondary-darker);
+      color: var(--cbp-color-interactive-secondary-lighter);
       font-weight: var(--cbp-font-weight-bold);
     }
 
diff --git a/packages/vanilla/src/sass/components/footer/_internal.scss b/packages/vanilla/src/sass/components/footer/_internal.scss
index 696ad03f..eb79f5fd 100644
--- a/packages/vanilla/src/sass/components/footer/_internal.scss
+++ b/packages/vanilla/src/sass/components/footer/_internal.scss
@@ -29,11 +29,11 @@
   list-style: none;
 
   & a[href] {
-    color: var(--cbp-color-interactive-neutral-lighter);
+    color: var(--cbp-color-interactive-secondary-lighter);
     display: inline-block;
 
     &:hover {
-      background-color: var(--cbp-color-interactive-neutral-darker);
+      background-color: var(--cbp-color-interactive-secondary-darker);
       color: var(--cbp-color-text-lightest);
     }
 
diff --git a/packages/vanilla/src/sass/components/header/_application.scss b/packages/vanilla/src/sass/components/header/_application.scss
index 932a6838..54a04758 100644
--- a/packages/vanilla/src/sass/components/header/_application.scss
+++ b/packages/vanilla/src/sass/components/header/_application.scss
@@ -4,9 +4,9 @@
 
 @mixin menu-hover {
   color: var(--cbp-color-text-darkest);
-  background-color: var(--cbp-color-interactive-neutral-lighter);
+  background-color: var(--cbp-color-interactive-secondary-lighter);
   //border-style: solid;
-  border-color: var(--cbp-color-interactive-neutral-darker);
+  border-color: var(--cbp-color-interactive-secondary-darker);
   //border-width: 0 0 var(--cbp-border-size-md) 0;
 }
 
@@ -18,7 +18,7 @@
   position: sticky;
   top: -1px;
   background-color: var(--cbp-color-white);
-  box-shadow: 0px 5px 5px -3px var(--cbp-color-interactive-neutral-dark);
+  box-shadow: 0px 5px 5px -3px var(--cbp-color-interactive-secondary-dark);
   padding-right: var(--cbp-space-4x);
   z-index: var(--cbp-z-index-level-1);
 
@@ -52,7 +52,7 @@
     align-items: center;
     height: 100%;
     padding: 0 var(--cbp-space-3x);
-    color: var(--cbp-color-interactive-neutral-darker);
+    color: var(--cbp-color-interactive-secondary-darker);
     background-color: transparent;
     font-size: var(--cbp-font-size-heading-xs);
     font-weight: var(--cbp-font-weight-medium);
diff --git a/packages/vanilla/src/sass/components/header/_universal.scss b/packages/vanilla/src/sass/components/header/_universal.scss
index baa35783..5da72c01 100644
--- a/packages/vanilla/src/sass/components/header/_universal.scss
+++ b/packages/vanilla/src/sass/components/header/_universal.scss
@@ -42,7 +42,7 @@
   justify-content: center;
   min-height: 36px;
   min-width: 36px;
-  color: var(--cbp-color-interactive-neutral-lighter);
+  color: var(--cbp-color-interactive-secondary-lighter);
   background-color: transparent;
   border: 0;
   border-radius: var(--cbp-border-radius-soft);
@@ -56,7 +56,7 @@
   }
 
   &:hover {
-    background-color: var(--cbp-color-interactive-neutral-dark);
+    background-color: var(--cbp-color-interactive-secondary-dark);
   }
 
   &:focus {
diff --git a/packages/vanilla/src/sass/components/link/_index.scss b/packages/vanilla/src/sass/components/link/_index.scss
index ab4abed0..81c8a83b 100644
--- a/packages/vanilla/src/sass/components/link/_index.scss
+++ b/packages/vanilla/src/sass/components/link/_index.scss
@@ -29,7 +29,7 @@
     text-decoration: underline;
   
     &:hover {
-      color: var(--cbp-color-interactive-neutral-dark);
+      color: var(--cbp-color-interactive-secondary-dark);
     }
   
     &:focus {
@@ -68,7 +68,7 @@
     color: var(--cbp-color-interactive-disabled-light);
   
     &:hover {
-      color: var(--cbp-color-interactive-neutral-light);
+      color: var(--cbp-color-interactive-secondary-light);
     }
   
     &:focus {
diff --git a/packages/vanilla/src/sass/components/radio/_index.scss b/packages/vanilla/src/sass/components/radio/_index.scss
index 66e59ecf..a7420abb 100644
--- a/packages/vanilla/src/sass/components/radio/_index.scss
+++ b/packages/vanilla/src/sass/components/radio/_index.scss
@@ -2,7 +2,7 @@
   -moz-appearance: none;
   -webkit-appearance: none;
   -o-appearance: none;
-  border-color: var(--cbp-color-interactive-neutral-base);
+  border-color: var(--cbp-color-interactive-secondary-base);
   border-style: solid;
   border-width: var(--cbp-border-size-md);
   border-radius: var(--cbp-border-radius-circle);
@@ -26,7 +26,7 @@
 	}
 
   &:hover {
-    box-shadow: 0 0 0 8px var(--cbp-color-interactive-neutral-lighter);
+    box-shadow: 0 0 0 8px var(--cbp-color-interactive-secondary-lighter);
   }
 	
 	&:focus {
@@ -87,13 +87,13 @@
       box-shadow: 0 0 0 8px var(--cbp-color-interactive-disabled-light);
 
       &::before {
-        background: var(--cbp-color-interactive-neutral-base);
+        background: var(--cbp-color-interactive-secondary-base);
       }
     }
   }
   
   &:hover {
     box-shadow: 0 0 0 8px var(--cbp-color-interactive-disabled-light);
-    border-color: var(--cbp-color-interactive-neutral-base);
+    border-color: var(--cbp-color-interactive-secondary-base);
   }
 }
\ No newline at end of file
diff --git a/packages/vanilla/src/sass/components/select/_index.scss b/packages/vanilla/src/sass/components/select/_index.scss
index fd64790b..8a4fc33d 100644
--- a/packages/vanilla/src/sass/components/select/_index.scss
+++ b/packages/vanilla/src/sass/components/select/_index.scss
@@ -5,7 +5,7 @@
   background-repeat: no-repeat;
   background-position: right var(--cbp-space-2x) center;
   background-size: var(--cbp-space-3x) var(--cbp-space-3x);
-  border-color: var(--cbp-color-interactive-neutral-base);
+  border-color: var(--cbp-color-interactive-secondary-base);
   border-radius: var(--cbp-border-radius-soft);
   border-width: var(--cbp-border-size-md);
   color: var(--cbp-color-text-darkest);
diff --git a/packages/vanilla/src/sass/components/slider/_index.scss b/packages/vanilla/src/sass/components/slider/_index.scss
index 86de195f..9f4aabce 100644
--- a/packages/vanilla/src/sass/components/slider/_index.scss
+++ b/packages/vanilla/src/sass/components/slider/_index.scss
@@ -133,11 +133,11 @@ input[type='range'] {
     }
 
     &::-moz-range-thumb {
-      background: var(--cbp-color-interactive-neutral-light);
+      background: var(--cbp-color-interactive-secondary-light);
     }
 
     &::-moz-range-thumb:hover {
-      background: var(--cbp-color-interactive-neutral-darker);
+      background: var(--cbp-color-interactive-secondary-darker);
     }
 
     &::-moz-range-thumb:focus {
@@ -149,11 +149,11 @@ input[type='range'] {
     }
 
     &::-webkit-slider-thumb {
-      background: var(--cbp-color-interactive-neutral-light);
+      background: var(--cbp-color-interactive-secondary-light);
     }
 
     &::-webkit-slider-thumb:hover {
-      background: var(--cbp-color-interactive-neutral-darker);
+      background: var(--cbp-color-interactive-secondary-darker);
     }
 
     &::-webkit-slider-thumb:focus {
diff --git a/packages/vanilla/src/sass/components/slider/_mixins.scss b/packages/vanilla/src/sass/components/slider/_mixins.scss
index 684ca7ab..e42a8824 100644
--- a/packages/vanilla/src/sass/components/slider/_mixins.scss
+++ b/packages/vanilla/src/sass/components/slider/_mixins.scss
@@ -2,9 +2,9 @@
 
 $track-height: 4px;
 $track-width: 100%;
-$track-background-color: var(--cbp-color-interactive-neutral-light);
+$track-background-color: var(--cbp-color-interactive-secondary-light);
 
-$thumb-background-color: var(--cbp-color-interactive-neutral-dark);
+$thumb-background-color: var(--cbp-color-interactive-secondary-dark);
 $thumb-height: 20px;
 $thumb-width: $thumb-height;
 $thumb-margin: calc(($track-height / 2) - ($thumb-height / 2));
diff --git a/packages/vanilla/src/sass/components/tabs/_index.scss b/packages/vanilla/src/sass/components/tabs/_index.scss
index 15215482..afaaa7e4 100644
--- a/packages/vanilla/src/sass/components/tabs/_index.scss
+++ b/packages/vanilla/src/sass/components/tabs/_index.scss
@@ -21,8 +21,8 @@
     }
 
     &:hover {
-      background-color: var(--cbp-color-interactive-neutral-lighter);
-      border-bottom-color: var(--cbp-color-interactive-neutral-darker);
+      background-color: var(--cbp-color-interactive-secondary-lighter);
+      border-bottom-color: var(--cbp-color-interactive-secondary-darker);
     }
 
     &:focus-visible {
diff --git a/packages/vanilla/src/sass/components/text-input/_index.scss b/packages/vanilla/src/sass/components/text-input/_index.scss
index 1320849c..1c56dba0 100644
--- a/packages/vanilla/src/sass/components/text-input/_index.scss
+++ b/packages/vanilla/src/sass/components/text-input/_index.scss
@@ -23,7 +23,7 @@
 
 .cbp-input {
   background-color: var(--cbp-color-white);
-  border-color: var(--cbp-color-interactive-neutral-base);
+  border-color: var(--cbp-color-interactive-secondary-base);
   border-style: solid;
   border-width: var(--cbp-border-size-md);
   border-radius: var(--cbp-border-radius-soft);
@@ -43,7 +43,7 @@
   }
 
   &:hover {
-    border-color: var(--cbp-color-interactive-neutral-darker);
+    border-color: var(--cbp-color-interactive-secondary-darker);
   }
 
   &:focus {
@@ -52,13 +52,13 @@
   }
 
   &:read-only {
-    background-color: var(--cbp-color-interactive-neutral-lighter);
-    border-color: var(--cbp-color-interactive-neutral-light);
+    background-color: var(--cbp-color-interactive-secondary-lighter);
+    border-color: var(--cbp-color-interactive-secondary-light);
     cursor: not-allowed;
 
     &:hover,
     &:focus {
-      border-color: var(--cbp-color-interactive-neutral-light);
+      border-color: var(--cbp-color-interactive-secondary-light);
     }
   }
 
@@ -67,7 +67,7 @@
     border-color: var(--cbp-color-interactive-disabled-dark);
 
     &:hover {
-      border-color: var(--cbp-color-interactive-neutral-darker);
+      border-color: var(--cbp-color-interactive-secondary-darker);
     }
 
     &:focus {
@@ -149,7 +149,7 @@ textarea.cbp-input {
   
   & > div:first-child {
     align-items: center;
-    border-color: var(--cbp-color-interactive-neutral-dark);
+    border-color: var(--cbp-color-interactive-secondary-dark);
     border-radius: var(--cbp-border-radius-softer);
     border-style: solid;
     border-width: var(--cbp-border-size-md);
@@ -158,7 +158,7 @@ textarea.cbp-input {
     width: 100%;
 
     &:hover {
-      border-color: var(--cbp-color-interactive-neutral-darker)
+      border-color: var(--cbp-color-interactive-secondary-darker)
     }
 
     &:focus-within {
@@ -175,8 +175,8 @@ textarea.cbp-input {
     }
 
     &:has(.cbp-input:read-only) {
-      background-color: var(--cbp-color-interactive-neutral-lighter);
-      border-color: var(--cbp-color-interactive-neutral-light);
+      background-color: var(--cbp-color-interactive-secondary-lighter);
+      border-color: var(--cbp-color-interactive-secondary-light);
     }
 
     &:has(.cbp-input:invalid) {
@@ -208,7 +208,7 @@ textarea.cbp-input {
   }
 
   & > div:first-child:has(.cbp-input:read-only)::after {
-    background-color: var(--cbp-color-interactive-neutral-lighter);
+    background-color: var(--cbp-color-interactive-secondary-lighter);
   }
   
   & > div:first-child:has(.cbp-input:invalid)::after {
diff --git a/packages/vanilla/src/sass/tokens/_css-variables.scss b/packages/vanilla/src/sass/tokens/_css-variables.scss
index 93421785..f81194dd 100644
--- a/packages/vanilla/src/sass/tokens/_css-variables.scss
+++ b/packages/vanilla/src/sass/tokens/_css-variables.scss
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 06 Jul 2023 19:30:50 GMT
+ * Generated on Fri, 14 Jul 2023 15:38:30 GMT
  */
 
 :root {
@@ -361,11 +361,11 @@
   --cbp-color-interactive-disabled-light: var(--cbp-color-gray-10);
   --cbp-color-interactive-active-dark: var(--cbp-color-blue-warm-80);
   --cbp-color-interactive-active-light: var(--cbp-color-blue-warm-10);
-  --cbp-color-interactive-neutral-darker: var(--cbp-color-gray-warm-70);
-  --cbp-color-interactive-neutral-dark: var(--cbp-color-gray-warm-60);
-  --cbp-color-interactive-neutral-base: var(--cbp-color-gray-warm-50);
-  --cbp-color-interactive-neutral-light: var(--cbp-color-gray-warm-30);
-  --cbp-color-interactive-neutral-lighter: var(--cbp-color-gray-warm-10);
+  --cbp-color-interactive-secondary-darker: var(--cbp-color-gray-warm-70);
+  --cbp-color-interactive-secondary-dark: var(--cbp-color-gray-warm-60);
+  --cbp-color-interactive-secondary-base: var(--cbp-color-gray-warm-50);
+  --cbp-color-interactive-secondary-light: var(--cbp-color-gray-warm-30);
+  --cbp-color-interactive-secondary-lighter: var(--cbp-color-gray-warm-10);
   --cbp-color-interactive-primary-darker: var(--cbp-color-blue-70);
   --cbp-color-interactive-primary-dark: var(--cbp-color-blue-60);
   --cbp-color-interactive-primary-base: var(--cbp-color-blue-50);
diff --git a/packages/vanilla/src/sass/tokens/_theme.scss b/packages/vanilla/src/sass/tokens/_theme.scss
index 5c6b8957..dcd4938c 100644
--- a/packages/vanilla/src/sass/tokens/_theme.scss
+++ b/packages/vanilla/src/sass/tokens/_theme.scss
@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Thu, 06 Jul 2023 19:30:50 GMT
+// Generated on Fri, 14 Jul 2023 15:38:30 GMT
 
 $cbp-color-branding-cbp-light: #f5f6f7;
 $cbp-color-branding-cbp-dark: #2d2e2f;
@@ -56,11 +56,11 @@ $cbp-color-interactive-primary-light: #58b4ff;
 $cbp-color-interactive-primary-base: #0076d6;
 $cbp-color-interactive-primary-dark: #005ea2;
 $cbp-color-interactive-primary-darker: #0b4778;
-$cbp-color-interactive-neutral-lighter: #e6e6e2;
-$cbp-color-interactive-neutral-light: #afaea2;
-$cbp-color-interactive-neutral-base: #76766a;
-$cbp-color-interactive-neutral-dark: #5d5d52;
-$cbp-color-interactive-neutral-darker: #454540;
+$cbp-color-interactive-secondary-lighter: #e6e6e2;
+$cbp-color-interactive-secondary-light: #afaea2;
+$cbp-color-interactive-secondary-base: #76766a;
+$cbp-color-interactive-secondary-dark: #5d5d52;
+$cbp-color-interactive-secondary-darker: #454540;
 $cbp-color-interactive-active-light: #d4e5ff;
 $cbp-color-interactive-active-dark: #162e51;
 $cbp-color-interactive-disabled-light: #e6e6e6;
diff --git a/packages/vanilla/src/tokens/theme.json b/packages/vanilla/src/tokens/theme.json
index 8ea2545a..004caffb 100644
--- a/packages/vanilla/src/tokens/theme.json
+++ b/packages/vanilla/src/tokens/theme.json
@@ -256,7 +256,7 @@
         }
       },
 
-      "neutral": {
+      "secondary": {
         "lighter": {
           "value": "{ color.gray.warm.10.value }",
           "attributes": { "use": "theme", "type": "neutral" }