diff --git a/ui/packages/consul-partitions/app/components/consul/partition/selector/index.hbs b/ui/packages/consul-partitions/app/components/consul/partition/selector/index.hbs
index eae8faf0f2..f005c6aca0 100644
--- a/ui/packages/consul-partitions/app/components/consul/partition/selector/index.hbs
+++ b/ui/packages/consul-partitions/app/components/consul/partition/selector/index.hbs
@@ -1,79 +1,69 @@
 {{#let
-  (or @partition 'default')
-  (is-href 'dc.partitions' @dc.Name)
-as |partition isManaging|}}
+  (or @partition "default")
+  (is-href "dc.partitions" @dc.Name)
+  as |partition isManaging|
+}}
   {{#if (can "choose partitions" dc=@dc)}}
-      <li
-        class="partitions"
-        data-test-partition-menu
+    <li class="partitions" data-test-partition-menu>
+      <DisclosureMenu
+        aria-label="Admin Partition"
+        @items={{append
+          (hash
+            Name="Manage Partitions" href=(href-to "dc.partitions" @dc.Name)
+          )
+          (reject-by "DeletedAt" @partitions)
+        }}
+        as |disclosure|
       >
-        <DisclosureMenu
-          aria-label="Admin Partition"
-          @items={{append 
-            (hash 
-              Name="Manage Partitions"
-              href=(href-to 'dc.partitions' @dc.Name)
-            ) 
-            (reject-by 'DeletedAt' @partitions)
-          }}
-        as |disclosure|>
-          <disclosure.Action
-            {{on 'click' disclosure.toggle}}
-          >
-            {{if isManaging 'Manage Partition' partition}}
-          </disclosure.Action>
-          <disclosure.Menu as |panel|>
-            <DataSource
-              @src={{uri
-                '/*/*/${dc}/partitions'
-                (hash
-                  dc=@dc.Name
-                )
-              }}
-              @onchange={{fn (optional @onchange)}}
-            />
-            <panel.Menu as |menu|>
-              {{#each menu.items as |item|}}
-                <menu.Item
-                  aria-current={{if 
-                    (or 
-                      (and isManaging item.href)
-                      (and (not isManaging) (eq partition item.Name))
+        <disclosure.Action {{on "click" disclosure.toggle}}>
+          {{if isManaging "Manage Partition" partition}}
+        </disclosure.Action>
+        <disclosure.Menu as |panel|>
+          <DataSource
+            @src={{uri "/*/*/${dc}/partitions" (hash dc=@dc.Name)}}
+            @onchange={{fn (optional @onchange)}}
+          />
+          <panel.Menu as |menu|>
+            {{#each menu.items as |item|}}
+              <menu.Item
+                aria-current={{if
+                  (or
+                    (and isManaging item.href)
+                    (and (not isManaging) (eq partition item.Name))
+                  )
+                  "true"
+                }}
+              >
+                <menu.Action
+                  {{on "click" disclosure.close}}
+                  @href={{if
+                    item.href
+                    item.href
+                    (if
+                      isManaging
+                      (href-to
+                        "dc.services.index"
+                        params=(hash
+                          partition=item.Name nspace=undefined dc=@dc.Name
+                        )
+                      )
+                      (href-to
+                        "." params=(hash partition=item.Name nspace=undefined)
+                      )
                     )
-                    'true'
                   }}
                 >
-                  <menu.Action
-                    {{on 'click' disclosure.close}}
-                    @href={{if item.href 
-                      item.href 
-                      (if isManaging 
-                        (href-to 'dc.services.index' params=(hash
-                          partition=item.Name
-                          nspace=undefined
-                          dc=@dc.Name
-                        ))
-                        (href-to '.' params=(hash
-                          partition=item.Name
-                          nspace=undefined
-                        ))
-                      )
-                    }}
-                  >
-                    {{item.Name}}
-                  </menu.Action>
-                </menu.Item>
-              {{/each}}
-            </panel.Menu>
-          </disclosure.Menu>
-        </DisclosureMenu>
-      </li>
+                  {{item.Name}}
+                </menu.Action>
+              </menu.Item>
+            {{/each}}
+          </panel.Menu>
+        </disclosure.Menu>
+      </DisclosureMenu>
+    </li>
   {{else}}
-    <li 
-      class="partition"
-      aria-label="Admin Partition"
-    >
-      {{'default'}}
+    <li class="partition" aria-label="Admin Partition">
+      {{"default"}}
     </li>
   {{/if}}
 {{/let}}
diff --git a/ui/packages/consul-peerings/app/components/consul/peer/components.scss b/ui/packages/consul-peerings/app/components/consul/peer/components.scss
index d4fdbe0813..aefbcc434b 100644
--- a/ui/packages/consul-peerings/app/components/consul/peer/components.scss
+++ b/ui/packages/consul-peerings/app/components/consul/peer/components.scss
@@ -5,7 +5,7 @@
 %pill-terminated::before,
 %pill-deleting::before {
   --icon-size: icon-000;
-  content: '';
+  content: "";
 }
 %pill-pending,
 %pill-establishing,
@@ -19,58 +19,54 @@
 
 %pill-pending::before {
   --icon-name: icon-running;
-  --icon-color: rgb(var(--tone-gray-800));
+  --icon-color: var(--token-color-palette-neutral-600);
 }
 %pill-pending {
-  background-color: rgb(var(--tone-strawberry-050));
-  color: rgb(var(--tone-strawberry-500));
+  background-color: var(--token-color-consul-surface);
+  color: var(--token-color-consul-foreground);
 }
 
 %pill-establishing::before {
   --icon-name: icon-running;
-  --icon-color: rgb(var(--tone-gray-800));
+  --icon-color: var(--token-color-palette-neutral-600);
 }
 %pill-establishing {
-  background-color: rgb(var(--tone-blue-050));
-  color: rgb(var(--tone-blue-500));
+  background-color: var(--token-color-palette-blue-50);
+  color: var(--token-color-palette-blue-200);
 }
 
 %pill-active::before {
   --icon-name: icon-check;
-  --icon-color: rgb(var(--tone-green-800));
+  --icon-color: var(--token-color-palette-green-400);
 }
 %pill-active {
-  background-color: rgb(var(--tone-green-050));
-  color: rgb(var(--tone-green-600));
+  background-color: var(--token-color-palette-green-50);
+  color: var(--token-color-palette-green-200);
 }
 
 %pill-failing::before {
   --icon-name: icon-x;
-  --icon-color: rgb(var(--tone-red-500));
+  --icon-color: var(--token-color-palette-red-200);
 }
 %pill-failing {
-  background-color: rgb(var(--tone-red-050));
-  color: rgb(var(--tone-red-500));
+  background-color: var(--token-color-palette-red-50);
+  color: var(--token-color-palette-red-200);
 }
 
 %pill-terminated::before {
   --icon-name: icon-x-square;
-  --icon-color: rgb(var(--tone-gray-800));
+  --icon-color: var(--token-color-palette-neutral-600);
 }
 %pill-terminated {
-  background-color: rgb(var(--tone-gray-150));
-  color: rgb(var(--tone-gray-800));
+  background-color: var(--token-color-palette-neutral-200);
+  color: var(--token-color-palette-neutral-600);
 }
 
-
 %pill-deleting::before {
   --icon-name: icon-loading;
-  --icon-color: rgb(var(--tone-green-800));
+  --icon-color: var(--token-color-foreground-warning-on-surface);
 }
 %pill-deleting {
-  background-color: rgb(var(--tone-yellow-050));
-  color: rgb(var(--tone-yellow-800));
+  background-color: var(--token-color-surface-warning);
+  color: var(--token-color-foreground-warning-on-surface);
 }
-
-
-
diff --git a/ui/packages/consul-peerings/app/components/consul/peer/form/index.scss b/ui/packages/consul-peerings/app/components/consul/peer/form/index.scss
index 1a3653c682..bae0e8c738 100644
--- a/ui/packages/consul-peerings/app/components/consul/peer/form/index.scss
+++ b/ui/packages/consul-peerings/app/components/consul/peer/form/index.scss
@@ -19,9 +19,9 @@
     position: relative;
   }
   ol::before {
-    content: '';
+    content: "";
     border-left: var(--decor-border-100);
-    border-color: rgb(var(--tone-gray-300));
+    border-color: var(--token-color-palette-neutral-300);
     height: 100%;
     position: absolute;
     left: 2rem;
@@ -38,7 +38,7 @@
   li::before {
     --icon-name: icon-hexagon;
     --icon-size: icon-600;
-    content: '';
+    content: "";
     position: absolute;
     z-index: 2;
   }
@@ -48,7 +48,7 @@
     top: 0px;
     font-size: 14px;
     font-weight: var(--typo-weight-bold);
-    background-color: rgb(var(--tone-gray-000));
+    background-color: var(--token-color-palette-neutral-0);
     z-index: 1;
     text-align: center;
   }
diff --git a/ui/packages/consul-ui/app/components/anchors/index.scss b/ui/packages/consul-ui/app/components/anchors/index.scss
index 08d06e65ab..4f352ca6da 100644
--- a/ui/packages/consul-ui/app/components/anchors/index.scss
+++ b/ui/packages/consul-ui/app/components/anchors/index.scss
@@ -4,14 +4,14 @@ a[rel*='external']::after {
   margin-left: 8px;
 }
 %main-content label a[rel*='help'] {
-  color: rgb(var(--tone-gray-400));
+  color: var(--token-color-foreground-disabled);
 }
 %main-content a[rel*='help']::after {
   @extend %with-info-circle-outline-icon, %as-pseudo;
   opacity: 0.4;
 }
 %main-content h2 a {
-  color: rgb(var(--tone-gray-900));
+  color: var(--token-color-foreground-strong);
 }
 %main-content h2 a[rel*='help']::after {
   font-size: 0.65em;
diff --git a/ui/packages/consul-ui/app/components/anchors/skin.scss b/ui/packages/consul-ui/app/components/anchors/skin.scss
index 1181335335..952a8a7426 100644
--- a/ui/packages/consul-ui/app/components/anchors/skin.scss
+++ b/ui/packages/consul-ui/app/components/anchors/skin.scss
@@ -8,7 +8,7 @@
 %anchor,
 %anchor-intent,
 %anchor-active {
-  color: rgb(var(--color-action));
+  color: var(--token-color-foreground-action);
 }
 %anchor-decoration:hover,
 %anchor-decoration:focus {
@@ -20,7 +20,7 @@
 %anchor {
   @extend %anchor-decoration;
   cursor: pointer;
-  background-color: var(--transparent);
+  background-color: transparent;
 }
 %anchor:hover,
 %anchor:focus {
diff --git a/ui/packages/consul-ui/app/components/app-view/index.scss b/ui/packages/consul-ui/app/components/app-view/index.scss
index fb561339d0..cf28adecbc 100644
--- a/ui/packages/consul-ui/app/components/app-view/index.scss
+++ b/ui/packages/consul-ui/app/components/app-view/index.scss
@@ -32,7 +32,7 @@
   width: 26px;
   height: 26px;
   cursor: pointer;
-  color: rgb(var(--tone-blue-500));
+  color: var(--token-color-foreground-action);
 }
 #toolbar-toggle {
   display: none;
diff --git a/ui/packages/consul-ui/app/components/app-view/skin.scss b/ui/packages/consul-ui/app/components/app-view/skin.scss
index d9c4c3d451..293b127fac 100644
--- a/ui/packages/consul-ui/app/components/app-view/skin.scss
+++ b/ui/packages/consul-ui/app/components/app-view/skin.scss
@@ -8,15 +8,15 @@
   border-bottom: var(--decor-border-200);
 }
 %app-view-header h1 > em {
-  color: rgb(var(--tone-gray-600));
+  color: var(--token-color-foreground-faint);
 }
 %app-view-header dd > a {
-  color: rgb(var(--tone-gray-999));
+  color: var(--token-color-hashicorp-brand);
 }
 %app-view-content div > dl > dd {
-  color: rgb(var(--tone-gray-400));
+  color: var(--token-color-foreground-disabled);
 }
 %app-view-title,
 %app-view-content form:not(.filter-bar) fieldset {
-  border-color: rgb(var(--tone-gray-200));
+  border-color: var(--token-color-surface-interactive-active);
 }
diff --git a/ui/packages/consul-ui/app/components/app/index.scss b/ui/packages/consul-ui/app/components/app/index.scss
index 386687a81c..5892387482 100644
--- a/ui/packages/consul-ui/app/components/app/index.scss
+++ b/ui/packages/consul-ui/app/components/app/index.scss
@@ -80,7 +80,7 @@ main {
   position: fixed;
   z-index: 50;
 
-  color: rgb(var(--tone-gray-400));
+  color: var(--token-color-foreground-disabled);
   font-size: var(--typo-size-800);
 
   width: 250px;
diff --git a/ui/packages/consul-ui/app/components/auth-form/skin.scss b/ui/packages/consul-ui/app/components/auth-form/skin.scss
index 42d6af7f9e..9a07073bd8 100644
--- a/ui/packages/consul-ui/app/components/auth-form/skin.scss
+++ b/ui/packages/consul-ui/app/components/auth-form/skin.scss
@@ -1,5 +1,5 @@
 %auth-form em {
   @extend %p3;
-  color: rgb(var(--tone-gray-500));
+  color: var(--token-color-foreground-faint);
   font-style: normal;
-}
\ No newline at end of file
+}
diff --git a/ui/packages/consul-ui/app/components/auth-modal/layout.scss b/ui/packages/consul-ui/app/components/auth-modal/layout.scss
index 6c0d0c137a..ee6e8d5ee9 100644
--- a/ui/packages/consul-ui/app/components/auth-modal/layout.scss
+++ b/ui/packages/consul-ui/app/components/auth-modal/layout.scss
@@ -6,7 +6,7 @@
   padding-right: 42px;
 }
 %auth-modal footer {
-  background-color: var(--transparent);
+  background-color: transparent;
 }
 %auth-modal > div > div > div {
   padding-bottom: 0;
diff --git a/ui/packages/consul-ui/app/components/auth-profile/index.scss b/ui/packages/consul-ui/app/components/auth-profile/index.scss
index ebc4837a35..33208f9121 100644
--- a/ui/packages/consul-ui/app/components/auth-profile/index.scss
+++ b/ui/packages/consul-ui/app/components/auth-profile/index.scss
@@ -12,8 +12,8 @@
 }
 .auth-profile dt,
 .auth-profile dd {
-  color: rgb(var(--tone-gray-800));
+  color: var(--token-color-paletter-neutral-300);
 }
 .auth-profile dt span {
-  color: rgb(var(--tone-gray-600));
+  color: var(--token-color-foreground-faint);
 }
diff --git a/ui/packages/consul-ui/app/components/badge/index.scss b/ui/packages/consul-ui/app/components/badge/index.scss
index 22c42b3b9e..04a5a168b7 100644
--- a/ui/packages/consul-ui/app/components/badge/index.scss
+++ b/ui/packages/consul-ui/app/components/badge/index.scss
@@ -8,8 +8,8 @@
 %badge,
 %badge + dd {
   @extend %pill;
-  background-color: rgb(var(--tone-gray-100));
-  color: rgb(var(--tone-gray-500));
+  background-color: var(--token-color-surface-strong);
+  color: var(--token-color-foreground-faint);
 }
 %badge::after,
 %badge-reversed::after,
diff --git a/ui/packages/consul-ui/app/components/breadcrumbs/skin.scss b/ui/packages/consul-ui/app/components/breadcrumbs/skin.scss
index 966cf886e6..634cfa2634 100644
--- a/ui/packages/consul-ui/app/components/breadcrumbs/skin.scss
+++ b/ui/packages/consul-ui/app/components/breadcrumbs/skin.scss
@@ -1,9 +1,9 @@
 %crumbs {
-  color: rgb(var(--tone-gray-500));
+  color: var(--token-color-foreground-faint);
   text-decoration: none;
 }
 %crumbs:hover {
-  color: rgb(var(--tone-blue-500));
+  color: var(--token-color-foreground-action);
   text-decoration: underline;
 }
 %crumbs::before {
@@ -11,9 +11,9 @@
 }
 %breadcrumb-milestone::before {
   @extend %with-chevron-left-mask, %as-pseudo;
-  background-color: rgb(var(--tone-gray-500));
+  background-color: var(--token-color-foreground-faint);
 }
 %breadcrumb::before {
   content: '/';
-  color: rgb(var(--tone-gray-500));
+  color: var(--token-color-foreground-faint);
 }
diff --git a/ui/packages/consul-ui/app/components/buttons/skin.scss b/ui/packages/consul-ui/app/components/buttons/skin.scss
index 2f9eaef91b..f2c8697918 100644
--- a/ui/packages/consul-ui/app/components/buttons/skin.scss
+++ b/ui/packages/consul-ui/app/components/buttons/skin.scss
@@ -16,7 +16,7 @@
   @extend %button;
   border-width: 1px;
   border-radius: var(--decor-radius-100);
-  box-shadow: var(--decor-elevation-300);
+  box-shadow: var(--token-elevation-high-box-shadow);
 }
 /**/
 %secondary-button:hover:not(:disabled):not(:active),
@@ -27,14 +27,13 @@
   @extend %frame-gray-400;
 }
 %secondary-button:disabled {
-  color: rgb(var(--tone-gray-600));
+  color: var(--token-color-foreground-faint);
 }
 %secondary-button:active {
-  /* %frame-gray-something */
   @extend %frame-gray-700;
-  background-color: rgb(var(--tone-gray-200));
-  color: rgb(var(--tone-gray-800));
-  border-color: rgb(var(--tone-gray-700));
+  background-color: var(--token-color-surface-interactive-active);
+  color: var(--token-color-foreground-primary);
+  border-color: var(--token-color-foreground-faint);
 }
 /**/
 %dangerous-button {
@@ -52,8 +51,8 @@
 }
 
 %internal-button {
-  color: rgb(var(--tone-gray-900));
-  background-color: rgb(var(--tone-gray-000));
+  color: var(--token-color-foreground-strong);
+  background-color: var(--token-color-surface-primary);
 }
 %internal-button-dangerous {
   @extend %frame-red-300;
@@ -62,7 +61,7 @@
   @extend %frame-red-700;
 }
 %internal-button-intent {
-  background-color: rgb(var(--tone-gray-050));
+  background-color: var(--token-color-surface-strong);
 }
 %internal-button:focus,
 %internal-button:hover {
@@ -80,7 +79,7 @@
   top: 0;
   height: 100%;
   margin-left: 8px;
-  background-color: rgb(var(--tone-gray-300));
+  background-color: var(--token-color-palette-neutral-300);
 }
 %sort-button::before {
   @extend %with-sort-mask, %as-pseudo;
diff --git a/ui/packages/consul-ui/app/components/card/skin.scss b/ui/packages/consul-ui/app/components/card/skin.scss
index de730cf5bf..4192901ac8 100644
--- a/ui/packages/consul-ui/app/components/card/skin.scss
+++ b/ui/packages/consul-ui/app/components/card/skin.scss
@@ -5,7 +5,7 @@
 %card {
   border: var(--decor-border-100);
   border-radius: var(--decor-radius-100);
-  background-color: rgb(var(--tone-gray-000) / 90%);
+  background-color: var(--token-color-surface-faint);
 }
 %card > section,
 %card > ul > li {
@@ -14,12 +14,12 @@
 %card,
 %card > section,
 %card > ul > li {
-  border-color: rgb(var(--tone-gray-200));
+  border-color: var(--token-color-surface-interactive-active);
 }
 %card ul {
   /*TODO: %list-style-none?*/
   list-style-type: none;
 }
 %card-intent {
-  box-shadow: var(--decor-elevation-400);
+  box-shadow: var(--token-surface-mid-box-shadow);
 }
diff --git a/ui/packages/consul-ui/app/components/code-editor/layout.scss b/ui/packages/consul-ui/app/components/code-editor/layout.scss
index 2200042322..e71683948e 100644
--- a/ui/packages/consul-ui/app/components/code-editor/layout.scss
+++ b/ui/packages/consul-ui/app/components/code-editor/layout.scss
@@ -11,7 +11,7 @@
   bottom: 0px;
   width: 100%;
   height: 25px;
-  background-color: rgb(var(--tone-gray-999));
+  background-color: var(--token-color-hashicorp-brand);
   content: '';
   display: block;
 }
diff --git a/ui/packages/consul-ui/app/components/code-editor/skin.scss b/ui/packages/consul-ui/app/components/code-editor/skin.scss
index 6ba316787a..3c2089e921 100644
--- a/ui/packages/consul-ui/app/components/code-editor/skin.scss
+++ b/ui/packages/consul-ui/app/components/code-editor/skin.scss
@@ -21,7 +21,7 @@ $syntax-dark-gray: #535f73;
   --syntax-dark-gray: #{$syntax-dark-gray};
 
   --syntax-gutter-grey: #2a2f36;
-  --syntax-yellow: rgb(var(--tone-yellow-500));
+  --syntax-yellow: var(--token-color-vault-brand);
 }
 .CodeMirror {
   max-width: 1260px;
@@ -46,7 +46,7 @@ $syntax-dark-gray: #535f73;
 .cm-s-hashi {
   &.CodeMirror {
     width: 100%;
-    background-color: rgb(var(--tone-gray-999)) !important;
+    background-color: var(--token-color-hashicorp-brand) !important;
     color: #cfd2d1 !important;
     border: none;
     font-family: var(--typo-family-mono);
@@ -81,7 +81,7 @@ $syntax-dark-gray: #535f73;
   .CodeMirror-line::-moz-selection,
   .CodeMirror-line > span::-moz-selection,
   .CodeMirror-line > span > span::-moz-selection {
-    background: rgb(var(--tone-gray-000) / 10%);
+    background: var(--token-color-surface-interactive);
   }
 
   span.cm-comment {
@@ -158,7 +158,7 @@ $syntax-dark-gray: #535f73;
 
   .CodeMirror-matchingbracket {
     text-decoration: underline;
-    color: rgb(var(--tone-gray-000)) !important;
+    color: var(--token-color-surface-primary) !important;
   }
 }
 
@@ -182,7 +182,7 @@ $syntax-dark-gray: #535f73;
     }
 
     span.cm-property {
-      color: rgb(var(--tone-gray-000));
+      color: var(--token-color-surface-primary);
     }
 
     span.cm-variable-2 {
@@ -193,32 +193,32 @@ $syntax-dark-gray: #535f73;
 
 %code-editor {
   .toolbar-container {
-    background: rgb(var(--tone-gray-050));
+    background: var(--token-color-surface-strong);
     background: linear-gradient(
       180deg,
-      rgb(var(--tone-gray-050)) 50%,
-      rgb(var(--tone-gray-150)) 100%
+      var(--token-color-surface-strong) 50%,
+      var(--token-color-surface-interactive-active) 100%
     );
-    border: 1px solid rgb(var(--tone-gray-150));
-    border-bottom-color: rgb(var(--tone-gray-600));
-    border-top-color: rgb(var(--tone-gray-400));
+    border: 1px solid var(--token-color-surface-interactive-active);
+    border-bottom-color: var(--token-color-foreground-faint);
+    border-top-color: var(--token-color-foreground-disabled);
 
     .toolbar {
       .title {
-        color: rgb(var(--tone-gray-900));
+        color: var(--token-color-foreground-strong);
         font-size: 14px;
         font-weight: 700;
       }
       .toolbar-separator {
-        border-right: 1px solid rgb(var(--tone-gray-300));
+        border-right: 1px solid var(--token-color-palette-neutral-300);
       }
     }
     .ember-power-select-trigger {
-      background-color: rgb(var(--tone-gray-000));
-      color: rgb(var(--tone-gray-999));
+      background-color: var(--token-color-surface-primary);
+      color: var(--token-color-hashicorp-brand);
       border-radius: var(--decor-radius-100);
       border: var(--decor-border-100);
-      border-color: rgb(var(--tone-gray-700));
+      border-color: var(--token-color-foreground-faint);
     }
   }
 }
diff --git a/ui/packages/consul-ui/app/components/composite-row/index.scss b/ui/packages/consul-ui/app/components/composite-row/index.scss
index 1dce70e4bb..a411dc6f54 100644
--- a/ui/packages/consul-ui/app/components/composite-row/index.scss
+++ b/ui/packages/consul-ui/app/components/composite-row/index.scss
@@ -56,7 +56,7 @@
   overflow-x: visible !important;
 }
 .consul-intention-permission-list > ul {
-  border-top: 1px solid rgb(var(--tone-gray-200));
+  border-top: 1px solid var(--token-color-surface-interactive-active);
 }
 .consul-service-instance-list .port dt,
 .consul-service-instance-list .port dt::before {
@@ -108,5 +108,5 @@
 %composite-row-header .policy-management dd::before,
 %composite-row-detail .policy-management::before {
   @extend %with-star-fill-mask, %as-pseudo;
-  --icon-color: rgb(var(--tone-brand-600));
+  --icon-color: var(--token-color-consul-brand);
 }
diff --git a/ui/packages/consul-ui/app/components/confirmation-dialog/skin.scss b/ui/packages/consul-ui/app/components/confirmation-dialog/skin.scss
index ded503dcfa..d13103f58f 100644
--- a/ui/packages/consul-ui/app/components/confirmation-dialog/skin.scss
+++ b/ui/packages/consul-ui/app/components/confirmation-dialog/skin.scss
@@ -1,6 +1,6 @@
 table div.with-confirmation.confirming {
-  background-color: rgb(var(--tone-gray-000));
+  background-color: var(--token-color-surface-primary);
 }
 %confirmation-dialog-inline p {
-  color: rgb(var(--tone-gray-400));
+  color: var(--token-color-foreground-disabled);
 }
diff --git a/ui/packages/consul-ui/app/components/consul/auth-method/index.scss b/ui/packages/consul-ui/app/components/consul/auth-method/index.scss
index beff18a652..500168a36b 100644
--- a/ui/packages/consul-ui/app/components/consul/auth-method/index.scss
+++ b/ui/packages/consul-ui/app/components/consul/auth-method/index.scss
@@ -20,14 +20,14 @@
     }
     table {
       thead td {
-        color: rgb(var(--tone-gray-500));
+        color: var(--token-color-foreground-faint);
         font-weight: var(--typo-weight-semibold);
         font-size: var(--typo-size-700);
       }
       tbody {
         td {
           font-size: var(--typo-size-600);
-          color: rgb(var(--tone-gray-999));
+          color: var(--token-color-hashicorp-brand);
         }
         tr {
           cursor: default;
@@ -63,7 +63,7 @@
     @extend %tabular-dl;
   }
   code {
-    background-color: rgb(var(--tone-gray-050));
+    background-color: var(--token-color-surface-strong);
     padding: 0 12px;
   }
 }
@@ -72,7 +72,7 @@
 .consul-auth-method-nspace-list {
   thead {
     td {
-      color: rgb(var(--tone-gray-500)) !important;
+      color: var(--token-color-foreground-faint) !important;
       font-weight: var(--typo-weight-semibold) !important;
       font-size: var(--typo-size-700) !important;
     }
@@ -80,7 +80,7 @@
   tbody {
     td {
       font-size: var(--typo-size-600);
-      color: rgb(var(--tone-gray-999));
+      color: var(--token-color-hashicorp-brand);
     }
     tr {
       cursor: default;
diff --git a/ui/packages/consul-ui/app/components/consul/discovery-chain/index.hbs b/ui/packages/consul-ui/app/components/consul/discovery-chain/index.hbs
index fca6c4a23e..d41a594d03 100644
--- a/ui/packages/consul-ui/app/components/consul/discovery-chain/index.hbs
+++ b/ui/packages/consul-ui/app/components/consul/discovery-chain/index.hbs
@@ -1,81 +1,82 @@
 <style>
-  {{#if selected.nodes }}
-    {{selected.nodes}} {
-      opacity: 1 !important;
-
-      background-color: var(--tone-gray-000);
-      border: var(--decor-border-100);
-      border-radius: var(--decor-radius-200);
-      border-color: rgb(var(--tone-gray-500));
-      box-shadow: var(--decor-elevation-600);
-    }
+  {{#if selected.nodes}}
+    {{selected.nodes}}
+    { opacity: 1 !important; background-color: var(--token-color-surface-interactive); border:
+    var(--decor-border-100); border-radius: var(--decor-radius-200); border-color:
+    var(--token-color-foreground-faint); box-shadow: var(--token-surface-high-box-shadow); }
   {{/if}}
-  {{#if selected.edges }}
-    {{selected.edges}} {
-      opacity: 1;
-    }
+  {{#if selected.edges}}
+    {{selected.edges}}
+    { opacity: 1; }
   {{/if}}
 </style>
 
-<div class="routes">
+<div class='routes'>
   <header>
     <h2>
-      {{chain.ServiceName}} Router
+      {{chain.ServiceName}}
+      Router
       <span
-        {{tooltip 'Use routers to intercept traffic using Layer 7 criteria such as path prefixes or http headers.'}}
+        {{tooltip
+          'Use routers to intercept traffic using Layer 7 criteria such as path prefixes or http headers.'
+        }}
       >
       </span>
     </h2>
   </header>
-  <div role="group">
+  <div role='group'>
     {{#each routes as |item|}}
       <Consul::DiscoveryChain::RouteCard
         {{on-resize (dom-position (set item 'rect') from=this.edges)}}
         @item={{item}}
-        @onclick={{action "click"}}
+        @onclick={{action 'click'}}
       />
     {{/each}}
   </div>
 </div>
 
-<div class="splitters">
+<div class='splitters'>
   <header>
     <h2>
       Splitters
       <span
-        {{tooltip 'Splitters are configured to split incoming requests across different services or subsets of a single service.'}}
+        {{tooltip
+          'Splitters are configured to split incoming requests across different services or subsets of a single service.'
+        }}
       >
       </span>
     </h2>
   </header>
-  <div role="group">
+  <div role='group'>
     {{#each (sort-by 'Name' splitters) as |item|}}
       <Consul::DiscoveryChain::SplitterCard
         {{on-resize (dom-position (set item 'rect') from=this.edges)}}
         @item={{item}}
-        @onclick={{action "click"}}
+        @onclick={{action 'click'}}
       />
     {{/each}}
   </div>
 </div>
 
-<div class="resolvers">
+<div class='resolvers'>
   <header>
     <h2>
       Resolvers
       <span
-        {{tooltip "Resolvers are used to define which instances of a service should satisfy discovery requests."}}
+        {{tooltip
+          'Resolvers are used to define which instances of a service should satisfy discovery requests.'
+        }}
       >
       </span>
     </h2>
   </header>
-  <div role="group">
+  <div role='group'>
     {{#each (sort-by 'Name' resolvers) as |item|}}
       <Consul::DiscoveryChain::ResolverCard
         {{on-resize (dom-position (set item 'rect') from=this.edges)}}
         @item={{item}}
         @edges={{this.edges}}
-        @onclick={{action "click"}}
+        @onclick={{action 'click'}}
       />
     {{/each}}
   </div>
@@ -83,31 +84,28 @@
 
 {{nodes}}
 
-<svg class="edges"
+<svg
+  class='edges'
   {{did-insert (set this 'edges')}}
-  width="100%"
-  height="100%"
-  preserveAspectRatio="none"
+  width='100%'
+  height='100%'
+  preserveAspectRatio='none'
 >
   {{#each routes as |item|}}
     {{#if item.rect}}
       {{#let item.rect item.NextItem.rect as |src destRect|}}
-        {{#let (tween-to (hash
-          x=destRect.x
-          y=(add destRect.y (div destRect.height 2))
-        ) (concat item.ID)) as |dest|}}
+        {{#let
+          (tween-to (hash x=destRect.x y=(add destRect.y (div destRect.height 2))) (concat item.ID))
+          as |dest|
+        }}
 
-    <path
-      id={{concat item.ID '>' item.NextNode}}
-      d={{
-        svg-curve (hash
-          x=dest.x
-          y=(sub dest.y 0)
-        ) src=(hash
-          x=src.right
-          y=(add src.y (div src.height 2))
-      )}}
-    />
+          <path
+            id={{concat item.ID '>' item.NextNode}}
+            d={{svg-curve
+              (hash x=dest.x y=(sub dest.y 0))
+              src=(hash x=src.right y=(add src.y (div src.height 2)))
+            }}
+          ></path>
 
         {{/let}}
       {{/let}}
@@ -119,27 +117,26 @@
       {{#let splitter.rect as |src|}}
         {{#each splitter.Splits as |item index|}}
           {{#let item.NextItem.rect as |destRect|}}
-            {{#let (tween-to (hash
-              x=destRect.x
-              y=(add destRect.y (div destRect.height 2))
-            ) (concat splitter.ID '-' index)) as |dest|}}
+            {{#let
+              (tween-to
+                (hash x=destRect.x y=(add destRect.y (div destRect.height 2)))
+                (concat splitter.ID '-' index)
+              )
+              as |dest|
+            }}
 
-      <path
-        {{tooltip
-          (concat (round (or item.Weight 0) decimals=2) '%')
-          options=(hash followCursor=true)
-        }}
-        id={{concat 'splitter:' splitter.Name '>' item.NextNode}}
-        class="split"
-        d={{
-          svg-curve (hash
-            x=dest.x
-            y=dest.y
-          ) src=(hash
-            x=src.right
-            y=(add src.y (div src.height 2))
-        )}}
-      />
+              <path
+                {{tooltip
+                  (concat (round (or item.Weight 0) decimals=2) '%')
+                  options=(hash followCursor=true)
+                }}
+                id={{concat 'splitter:' splitter.Name '>' item.NextNode}}
+                class='split'
+                d={{svg-curve
+                  (hash x=dest.x y=dest.y)
+                  src=(hash x=src.right y=(add src.y (div src.height 2)))
+                }}
+              ></path>
 
             {{/let}}
           {{/let}}
@@ -150,28 +147,28 @@
 
 </svg>
 
-<svg class="resolver-inlets" height="100%">
+<svg class='resolver-inlets' height='100%'>
   {{#each routes as |item|}}
-    {{#if (string-starts-with item.NextNode 'resolver:') }}
+    {{#if (string-starts-with item.NextNode 'resolver:')}}
       {{#let (or item.NextItem.rect (hash y=0 height=0)) as |dest|}}
-        <circle r="2.5" cx="5" cy={{add dest.y (div dest.height 2)}} />
+        <circle r='2.5' cx='5' cy={{add dest.y (div dest.height 2)}}></circle>
       {{/let}}
     {{/if}}
   {{/each}}
   {{#each splitters as |item|}}
-      {{#each item.Splits as |item|}}
-        {{#let (or item.NextItem.rect (hash y=0 height=0)) as |dest|}}
-          <circle r="2.5" cx="5" cy={{add dest.y (div dest.height 2)}} />
-        {{/let}}
-      {{/each}}
+    {{#each item.Splits as |item|}}
+      {{#let (or item.NextItem.rect (hash y=0 height=0)) as |dest|}}
+        <circle r='2.5' cx='5' cy={{add dest.y (div dest.height 2)}}></circle>
+      {{/let}}
+    {{/each}}
   {{/each}}
 </svg>
 
-<svg class="splitter-inlets" height="100%">
+<svg class='splitter-inlets' height='100%'>
   {{#each routes as |item|}}
-    {{#if (string-starts-with item.NextNode 'splitter:') }}
+    {{#if (string-starts-with item.NextNode 'splitter:')}}
       {{#let (or item.NextItem.rect (hash y=0 height=0)) as |dest|}}
-        <circle r="2.5" cx="5" cy={{add dest.y (div dest.height 2)}} />
+        <circle r='2.5' cx='5' cy={{add dest.y (div dest.height 2)}}></circle>
       {{/let}}
     {{/if}}
   {{/each}}
diff --git a/ui/packages/consul-ui/app/components/consul/discovery-chain/skin.scss b/ui/packages/consul-ui/app/components/consul/discovery-chain/skin.scss
index f99e29173f..897a242ef2 100644
--- a/ui/packages/consul-ui/app/components/consul/discovery-chain/skin.scss
+++ b/ui/packages/consul-ui/app/components/consul/discovery-chain/skin.scss
@@ -19,7 +19,7 @@
   transition-property: stroke;
 
   fill: none;
-  stroke: rgb(var(--tone-gray-400));
+  stroke: var(--token-color-foreground-disabled);
   stroke-width: 2;
   vector-effect: non-scaling-stroke;
 }
@@ -30,18 +30,18 @@
 }
 %chain-node,
 %chain-node a {
-  color: rgb(var(--tone-gray-900)) !important;
+  color: var(--token-color-foreground-strong) !important;
 }
 %discovery-chain-edge-active {
-  stroke: rgb(var(--tone-gray-900));
+  stroke: var(--token-color-foreground-strong);
 }
 %chain-group {
   border-radius: var(--decor-radius-100);
   border: 1px solid;
   /* TODO: If this color is combined with the above */
   /* border property then the compressor removes the color */
-  border-color: rgb(var(--tone-gray-200));
-  background-color: rgb(var(--tone-gray-100));
+  border-color: var(--token-color-surface-interactive-active);
+  background-color: var(--token-color-surface-strong);
 
   pointer-events: none;
 }
@@ -66,8 +66,8 @@
 }
 %chain-node-active {
   opacity: 1;
-  background-color: rgb(var(--tone-gray-000));
-  border-color: rgb(var(--tone-gray-500));
+  background-color: var(--token-color-surface-primary);
+  border-color: var(--token-color-foreground-faint);
 }
 /* TODO: More text truncation, centralize */
 %route-card header:not(.short) dd {
@@ -105,16 +105,16 @@
 /**/
 %with-chain-outlet::before {
   @extend %as-pseudo;
-  background-color: rgb(var(--tone-gray-000));
+  background-color: var(--token-color-surface-primary);
 
   border-radius: var(--decor-radius-full);
   border: 2px solid;
   /* TODO: If this color is combined with the above */
   /* border property then the compressor removes the color */
-  border-color: rgb(var(--tone-gray-400));
+  border-color: var(--token-color-foreground-disabled);
 }
 %discovery-chain circle {
   stroke-width: 2;
-  stroke: rgb(var(--tone-gray-400));
-  fill: rgb(var(--tone-gray-000));
+  stroke: var(--token-color-foreground-disabled);
+  fill: var(--token-color-surface-primary);
 }
diff --git a/ui/packages/consul-ui/app/components/consul/exposed-path/list/index.scss b/ui/packages/consul-ui/app/components/consul/exposed-path/list/index.scss
index 15a5f170f1..0926f7fe47 100644
--- a/ui/packages/consul-ui/app/components/consul/exposed-path/list/index.scss
+++ b/ui/packages/consul-ui/app/components/consul/exposed-path/list/index.scss
@@ -1,6 +1,6 @@
 .consul-exposed-path-list {
   > ul {
-    border-top: 1px solid rgb(var(--tone-gray-200));
+    border-top: 1px solid var(--token-color-surface-interactive-active);
   }
   > ul > li {
     @extend %composite-row;
diff --git a/ui/packages/consul-ui/app/components/consul/external-source/index.hbs b/ui/packages/consul-ui/app/components/consul/external-source/index.hbs
index 19d33a8ab6..21f158ba40 100644
--- a/ui/packages/consul-ui/app/components/consul/external-source/index.hbs
+++ b/ui/packages/consul-ui/app/components/consul/external-source/index.hbs
@@ -36,7 +36,7 @@
       class="consul-external-source"
       ...attributes
     >
-      <FlightIcon @name={{icon-mapping externalSource}} @color="rgb(var(--black))" class="mr-1.5 h-4 w-4" />
+      <FlightIcon @name={{icon-mapping externalSource}} @color="var(--token-color-hashicorp-brand)" class="mr-1.5 h-4 w-4" />
       {{#if @label}}
         {{@label}}
       {{else}}
diff --git a/ui/packages/consul-ui/app/components/consul/health-check/list/skin.scss b/ui/packages/consul-ui/app/components/consul/health-check/list/skin.scss
index 17b3ad7b0e..dfd7141ea2 100644
--- a/ui/packages/consul-ui/app/components/consul/health-check/list/skin.scss
+++ b/ui/packages/consul-ui/app/components/consul/health-check/list/skin.scss
@@ -19,7 +19,7 @@
 }
 %healthcheck-output dd em {
   @extend %pill;
-  background-color: rgb(var(--tone-gray-100));
+  background-color: var(--token-color-surface-strong);
   /*TODO: Should this be merged into %pill? */
   cursor: default;
   font-style: normal;
@@ -28,41 +28,41 @@
 }
 %healthcheck-output.passing::before {
   @extend %with-check-circle-fill-mask;
-  color: rgb(var(--tone-green-500));
+  color: var(--token-color-foreground-success);
 }
 %healthcheck-output.warning::before {
   @extend %with-alert-triangle-mask;
-  color: rgb(var(--tone-orange-500));
+  color: var(--token-color-foreground-warning);
 }
 %healthcheck-output.critical::before {
   @extend %with-cancel-square-fill-mask;
-  color: rgb(var(--tone-red-500));
+  color: var(--token-color-foreground-critical);
 }
 %healthcheck-output,
 %healthcheck-output pre {
   border-radius: var(--decor-radius-100);
 }
 %healthcheck-output dd:first-of-type {
-  color: rgb(var(--tone-gray-400));
+  color: var(--token-color-foreground-disabled);
 }
 %healthcheck-output pre {
-  background-color: rgb(var(--tone-gray-050));
-  color: rgb(var(--tone-gray-600));
+  background-color: var(--token-color-surface-strong);
+  color: var(--token-color-foreground-faint);
 }
 %healthcheck-output {
   /* TODO: this should be a frame-gray */
-  color: rgb(var(--tone-gray-900));
-  border-color: rgb(var(--tone-gray-200));
+  color: var(--token-color-foreground-strong);
+  border-color: var(--token-color-surface-interactive-active);
   border-style: solid;
 
   border-left-width: 4px;
 }
 %healthcheck-output.passing {
-  border-left-color: rgb(var(--tone-green-500));
+  border-left-color: var(--token-color-foreground-success);
 }
 %healthcheck-output.warning {
-  border-left-color: rgb(var(--tone-yellow-500));
+  border-left-color: var(--token-color-vault-brand);
 }
 %healthcheck-output.critical {
-  border-left-color: rgb(var(--tone-red-500));
+  border-left-color: var(--token-color-foreground-critical);
 }
diff --git a/ui/packages/consul-ui/app/components/consul/instance-checks/index.scss b/ui/packages/consul-ui/app/components/consul/instance-checks/index.scss
index d97fe7b1f3..602f951068 100644
--- a/ui/packages/consul-ui/app/components/consul/instance-checks/index.scss
+++ b/ui/packages/consul-ui/app/components/consul/instance-checks/index.scss
@@ -7,18 +7,18 @@
   }
   &.passing dt::before {
     @extend %with-check-circle-fill-mask;
-    color: rgb(var(--tone-green-500));
+    color: var(--token-color-foreground-success);
   }
   &.warning dt::before {
     @extend %with-alert-triangle-mask;
-    color: rgb(var(--tone-orange-500));
+    color: var(--token-color-foreground-warning);
   }
   &.critical dt::before {
     @extend %with-cancel-square-fill-mask;
-    color: rgb(var(--tone-red-500));
+    color: var(--token-color-foreground-critical);
   }
   &.empty dt::before {
     @extend %with-minus-square-fill-mask;
-    color: rgb(var(--tone-gray-500));
+    color: var(--token-color-foreground-faint);
   }
 }
diff --git a/ui/packages/consul-ui/app/components/consul/intention/components.scss b/ui/packages/consul-ui/app/components/consul/intention/components.scss
index ed98c84994..12bcdb31b4 100644
--- a/ui/packages/consul-ui/app/components/consul/intention/components.scss
+++ b/ui/packages/consul-ui/app/components/consul/intention/components.scss
@@ -11,12 +11,12 @@
   font-size: var(--typo-size-600);
 }
 %pill-allow {
-  color: rgb(var(--tone-green-800));
-  background-color: rgb(var(--tone-green-100));
+  color: var(--token-color-foreground-success-on-surface);
+  background-color: var(--token-color-border-success);
 }
 %pill-deny {
-  color: rgb(var(--tone-red-800));
-  background-color: rgb(var(--tone-red-100));
+  color: var(--token-color-foreground-critical-on-surface);
+  background-color: var(--token-color-border-critical);
 }
 %pill-l7 {
   @extend %frame-gray-900;
diff --git a/ui/packages/consul-ui/app/components/consul/intention/list/skin.scss b/ui/packages/consul-ui/app/components/consul/intention/list/skin.scss
index 8a66540e89..05d9ebcd3e 100644
--- a/ui/packages/consul-ui/app/components/consul/intention/list/skin.scss
+++ b/ui/packages/consul-ui/app/components/consul/intention/list/skin.scss
@@ -1,5 +1,5 @@
 %consul-intention-list td.permissions {
-  color: rgb(var(--tone-blue-500));
+  color: var(--token-color-foreground-action);
 }
 %consul-intention-list em {
   --word-spacing: 0.25rem;
diff --git a/ui/packages/consul-ui/app/components/consul/intention/permission/form/skin.scss b/ui/packages/consul-ui/app/components/consul/intention/permission/form/skin.scss
index 1085802d4e..292532f9d6 100644
--- a/ui/packages/consul-ui/app/components/consul/intention/permission/form/skin.scss
+++ b/ui/packages/consul-ui/app/components/consul/intention/permission/form/skin.scss
@@ -1,6 +1,6 @@
 .consul-intention-permission-form {
   h2 {
-    border-top: 1px solid rgb(var(--tone-blue-500));
+    border-top: 1px solid var(--token-color-foreground-action);
     @extend %h200;
   }
   button.type-submit {
diff --git a/ui/packages/consul-ui/app/components/consul/loader/skin.scss b/ui/packages/consul-ui/app/components/consul/loader/skin.scss
index a7a7f43220..ce4ceed2b0 100644
--- a/ui/packages/consul-ui/app/components/consul/loader/skin.scss
+++ b/ui/packages/consul-ui/app/components/consul/loader/skin.scss
@@ -1,5 +1,5 @@
 %loader circle {
-  fill: rgb(var(--tone-brand-100));
+  fill: var(--token-color-consul-gradient-faint-stop);
 }
 %loader circle {
   animation: loader-animation 1.5s infinite ease-in-out;
diff --git a/ui/packages/consul-ui/app/components/consul/peer/info/index.scss b/ui/packages/consul-ui/app/components/consul/peer/info/index.scss
index a9d57b1635..1c1d15d14a 100644
--- a/ui/packages/consul-ui/app/components/consul/peer/info/index.scss
+++ b/ui/packages/consul-ui/app/components/consul/peer/info/index.scss
@@ -1,6 +1,6 @@
 .consul-peer-info {
-  background: rgb(var(--gray-100));
-  color: rgb(var(--gray-600));
+  background: var(--token-color-surface-faint);
+  color: var(--token-color-foreground-faint);
   padding: 0px 8px;
   border-radius: 2px;
 
diff --git a/ui/packages/consul-ui/app/components/consul/server/card/skin.scss b/ui/packages/consul-ui/app/components/consul/server/card/skin.scss
index 1478ac3fac..e841794a2e 100644
--- a/ui/packages/consul-ui/app/components/consul/server/card/skin.scss
+++ b/ui/packages/consul-ui/app/components/consul/server/card/skin.scss
@@ -6,7 +6,7 @@
 }
 %consul-server-card .name + dd {
   @extend %h300;
-  color: rgb(var(--tone-gray-999));
+  color: var(--token-color-hashicorp-brand);
   animation-name: typo-truncate;
 }
 %consul-server-card .health-status + dd {
@@ -14,16 +14,16 @@
   font-size: var(--typo-size-700);
 }
 %consul-server-card.voting-status-non-voter .health-status + dd {
-  background-color: rgb(var(--tone-gray-100));
-  color: rgb(var(--tone-gray-600));
+  background-color: var(--token-color-surface-strong);
+  color: var(--token-color-foreground-faint);
 }
 %consul-server-card:not(.voting-status-non-voter) .health-status.healthy + dd {
-  background-color: rgb(var(--tone-green-050));
-  color: rgb(var(--tone-green-800));
+  background-color: var(--token-color-surface-success);
+  color: var(--token-color-palette-green-400);
 }
 %consul-server-card:not(.voting-status-non-voter) .health-status:not(.healthy) + dd {
-  background-color: rgb(var(--tone-red-050));
-  color: rgb(var(--tone-red-500));
+  background-color: var(--token-color-surface-critical);
+  color: var(--token-color-foreground-critical);
 }
 %consul-server-card .health-status + dd::before {
   --icon-size: icon-000;
@@ -31,10 +31,7 @@
 }
 %consul-server-card .health-status.healthy + dd::before {
   --icon-name: icon-check;
-  --icon-color: rgb(var(--tone-green-800));
 }
 %consul-server-card .health-status:not(.healthy) + dd::before {
   --icon-name: icon-x;
-  --icon-color: rgb(var(--tone-red-500));
 }
-
diff --git a/ui/packages/consul-ui/app/components/consul/server/list/index.scss b/ui/packages/consul-ui/app/components/consul/server/list/index.scss
index 0ec7a33ec4..c3c3e5a852 100644
--- a/ui/packages/consul-ui/app/components/consul/server/list/index.scss
+++ b/ui/packages/consul-ui/app/components/consul/server/list/index.scss
@@ -9,6 +9,6 @@
 }
 
 %consul-server-list a:hover div {
-  box-shadow: var(--decor-elevation-800);
-  --tone-border: var(--tone-gray-500);
+  box-shadow: var(--token-elevation-overlay-box-shadow);
+  --tone-border: var(--token-color-foreground-faint);
 }
diff --git a/ui/packages/consul-ui/app/components/consul/service/list/index.hbs b/ui/packages/consul-ui/app/components/consul/service/list/index.hbs
index 7991a11243..ae06f4e477 100644
--- a/ui/packages/consul-ui/app/components/consul/service/list/index.hbs
+++ b/ui/packages/consul-ui/app/components/consul/service/list/index.hbs
@@ -86,4 +86,4 @@
     {{/if}}
     <TagList @item={{item}} />
   </BlockSlot>
-</ListCollection>
\ No newline at end of file
+</ListCollection>
diff --git a/ui/packages/consul-ui/app/components/consul/tomography/graph/index.scss b/ui/packages/consul-ui/app/components/consul/tomography/graph/index.scss
index 2cb3745197..93fae93eb2 100644
--- a/ui/packages/consul-ui/app/components/consul/tomography/graph/index.scss
+++ b/ui/packages/consul-ui/app/components/consul/tomography/graph/index.scss
@@ -1,36 +1,36 @@
 .tomography-graph {
   .background {
-    fill: rgb(var(--tone-gray-050));
+    fill: var(--token-color-surface-strong);
   }
   .axis {
     fill: none;
-    stroke: rgb(var(--tone-gray-300));
+    stroke: var(--token-color-palette-neutral-300);
     stroke-dasharray: 4 4;
   }
   .border {
     fill: none;
-    stroke: rgb(var(--tone-gray-300));
+    stroke: var(--token-color-palette-neutral-300);
   }
   .point {
-    stroke: rgb(var(--tone-gray-400));
-    fill: rgb(var(--tone-magenta-600));
+    stroke: var(--token-color-foreground-disabled);
+    fill: var(--token-color-consul-foreground);
   }
   .lines rect {
-    fill: rgb(var(--tone-magenta-600));
+    fill: var(--token-color-consul-foreground);
     stroke: transparent;
     stroke-width: 5px;
   }
   .lines rect:hover {
-    fill: rgb(var(--tone-gray-300));
+    fill: var(--token-color-palette-neutral-300);
     height: 3px;
     y: -1px;
   }
   .tick line {
-    stroke: rgb(var(--tone-gray-300));
+    stroke: var(--token-color-palette-neutral-300);
   }
   .tick text {
     font-size: var(--typo-size-600);
     text-anchor: start;
-    color: rgb(var(--tone-gray-900));
+    color: var(--token-color-foreground-strong);
   }
 }
diff --git a/ui/packages/consul-ui/app/components/copy-button/skin.scss b/ui/packages/consul-ui/app/components/copy-button/skin.scss
index 89988852c3..18864ed741 100644
--- a/ui/packages/consul-ui/app/components/copy-button/skin.scss
+++ b/ui/packages/consul-ui/app/components/copy-button/skin.scss
@@ -1,22 +1,22 @@
 %copy-button {
-  color: rgb(var(--tone-blue-500));
-  --icon-color: var(--transparent);
+  color: var(--token-color-foreground-action);
+  --icon-color: transparent;
 }
 %copy-button::before {
   @extend %with-copy-action-mask, %as-pseudo;
-  --icon-color: rgb(var(--tone-gray-500));
+  --icon-color: var(--token-color-foreground-faint);
 }
 %copy-button::after {
-  --icon-color: rgb(var(--tone-gray-050));
+  --icon-color: var(--token-color-surface-strong);
 }
 %copy-button:hover:not(:disabled):not(:active),
 %copy-button:focus {
-  color: rgb(var(--tone-blue-500));
-  --icon-color: rgb(var(--tone-gray-050));
+  color: var(--token-color-foreground-action);
+  --icon-color: var(--token-color-surface-strong);
 }
 %copy-button:hover::before {
-  --icon-color: rgb(var(--tone-blue-500));
+  --icon-color: var(--token-color-foreground-action);
 }
 %copy-button:active {
-  --icon-color: rgb(var(--tone-gray-200));
+  --icon-color: var(--token-color-surface-interactive-active);
 }
diff --git a/ui/packages/consul-ui/app/components/copyable-code/index.scss b/ui/packages/consul-ui/app/components/copyable-code/index.scss
index 7fcf821193..a0eb5f3a6b 100644
--- a/ui/packages/consul-ui/app/components/copyable-code/index.scss
+++ b/ui/packages/consul-ui/app/components/copyable-code/index.scss
@@ -8,7 +8,7 @@
     padding-bottom: 3px;
 
     border: var(--decor-border-100);
-    border-color: rgb(var(--tone-gray-200));
+    border-color: var(--token-color-surface-interactive-active);
     border-radius: var(--decor-radius-200);
   }
   &.obfuscated {
@@ -22,7 +22,7 @@
     height: 100%;
     display: block;
     content: '';
-    background-color: rgb(var(--tone-gray-050));
+    background-color: var(--token-color-surface-strong);
   }
   .copy-button {
     position: absolute;
@@ -45,12 +45,12 @@
   button[aria-expanded]::before {
     content: '';
     --icon-size: icon-000;
-    --icon-color: rgb(var(--tone-gray-500));
+    --icon-color: var(--token-color-foreground-faint);
   }
-  button[aria-expanded=true]::before {
+  button[aria-expanded='true']::before {
     --icon-name: icon-eye-off;
   }
-  button[aria-expanded=false]::before {
+  button[aria-expanded='false']::before {
     --icon-name: icon-eye;
   }
   pre {
@@ -67,7 +67,7 @@
     margin: 0;
     margin-top: 8px;
     margin-bottom: 13px;
-    border: 3px dashed rgb(var(--tone-gray-300));
-    background-color: rgb(var(--tone-gray-000));
+    border: 3px dashed var(--token-color-palette-neutral-300);
+    background-color: var(--token-color-surface-primary);
   }
 }
diff --git a/ui/packages/consul-ui/app/components/disclosure-menu/README.mdx b/ui/packages/consul-ui/app/components/disclosure-menu/README.mdx
index 9817282a8b..dc8d9b3e2b 100644
--- a/ui/packages/consul-ui/app/components/disclosure-menu/README.mdx
+++ b/ui/packages/consul-ui/app/components/disclosure-menu/README.mdx
@@ -44,7 +44,7 @@ common usecase of having a floating menu.
     <disclosure.Menu
       style={{style-map
         (array 'position' 'absolute')
-        (array 'background-color' 'rgb(var(--tone-gray-000))')
+        (array 'background-color' 'var(--token-color-surface-primary)')
       }}
     as |panel|>
       <panel.Menu as |menu|>
diff --git a/ui/packages/consul-ui/app/components/empty-state/skin.scss b/ui/packages/consul-ui/app/components/empty-state/skin.scss
index 22d9fcae4c..20583b4226 100644
--- a/ui/packages/consul-ui/app/components/empty-state/skin.scss
+++ b/ui/packages/consul-ui/app/components/empty-state/skin.scss
@@ -1,6 +1,6 @@
 %empty-state {
-  color: rgb(var(--tone-gray-500));
-  background-color: rgb(var(--tone-gray-010));
+  color: var(--token-color-foreground-faint);
+  background-color: var(--token-color-surface-faint);
 }
 %empty-state-header {
   border-bottom: none;
diff --git a/ui/packages/consul-ui/app/components/expanded-single-select/skin.scss b/ui/packages/consul-ui/app/components/expanded-single-select/skin.scss
index 76c2f47196..d6a33d0d53 100644
--- a/ui/packages/consul-ui/app/components/expanded-single-select/skin.scss
+++ b/ui/packages/consul-ui/app/components/expanded-single-select/skin.scss
@@ -1,6 +1,6 @@
 %expanded-single-select {
   border: var(--decor-border-100);
-  border-color: rgb(var(--tone-gray-300));
+  border-color: var(--token-color-palette-neutral-300);
   border-radius: var(--decor-radius-100);
 }
 %expanded-single-select label {
@@ -9,10 +9,10 @@
 %expanded-single-select input[type='radio']:checked + *,
 %expanded-single-select input[type='radio']:hover + *,
 %expanded-single-select input[type='radio']:focus + * {
-  box-shadow: var(--decor-elevation-300);
+  box-shadow: var(--token-elevation-high-box-shadow);
 }
 %expanded-single-select input[type='radio']:checked + *,
 %expanded-single-select input[type='radio']:hover + *,
 %expanded-single-select input[type='radio']:focus + * {
-  background-color: rgb(var(--tone-gray-000));
+  background-color: var(--token-color-surface-primary);
 }
diff --git a/ui/packages/consul-ui/app/components/filter-bar/skin.scss b/ui/packages/consul-ui/app/components/filter-bar/skin.scss
index ba9429903c..ce5a1e93af 100644
--- a/ui/packages/consul-ui/app/components/filter-bar/skin.scss
+++ b/ui/packages/consul-ui/app/components/filter-bar/skin.scss
@@ -1,14 +1,14 @@
 .filter-bar {
   & {
-    background-color: rgb(var(--tone-gray-010));
+    background-color: var(--token-color-foreground-high-contrast);
     border-bottom: var(--decor-border-100);
-    border-color: rgb(var(--tone-gray-200));
+    border-color: var(--token-color-surface-interactive-active);
   }
   .filters,
   .sort {
     .popover-menu > [type='checkbox']:checked + label button {
-      color: rgb(var(--tone-blue-500));
-      background-color: rgb(var(--tone-gray-100));
+      color: var(--token-color-foreground-action);
+      background-color: var(--token-color-foreground-high-contrast);
     }
   }
 }
diff --git a/ui/packages/consul-ui/app/components/form-elements/skin.scss b/ui/packages/consul-ui/app/components/form-elements/skin.scss
index 8528e121d8..1c2dcff297 100644
--- a/ui/packages/consul-ui/app/components/form-elements/skin.scss
+++ b/ui/packages/consul-ui/app/components/form-elements/skin.scss
@@ -1,7 +1,7 @@
 %form-element-text-input {
   -moz-appearance: none;
   -webkit-appearance: none;
-  box-shadow: inset var(--decor-elevation-100);
+  box-shadow: var(--token-surface-inset-box-shadow);
   border-radius: var(--decor-radius-100);
   border: var(--decor-border-100);
   outline: none;
@@ -14,22 +14,22 @@ textarea:disabled + .CodeMirror,
 %form fieldset > p,
 %form-element-note,
 %form-element-text-input::placeholder {
-  color: rgb(var(--tone-gray-400));
+  color: var(--token-color-foreground-disabled);
 }
 %form-element-error > input,
 %form-element-error > textarea {
-  border-color: var(--decor-error-500, rgb(var(--tone-red-500))) !important;
+  border-color: var(--decor-error, var(--token-color-foreground-critical)) !important;
 }
 %form-element-text-input {
-  color: rgb(var(--tone-gray-500));
-  border-color: rgb(var(--tone-gray-300));
+  color: var(--token-color-foreground-faint);
+  border-color: var(--token-color-palette-neutral-300);
 }
 %form-element-text-input-hover {
-  border-color: rgb(var(--tone-gray-500));
+  border-color: var(--token-color-foreground-faint);
 }
 %form-element-text-input-focus {
-  border-color: var(--typo-action-500, rgb(var(--tone-blue-500)));
+  border-color: var(--typo-action, var(--token-color-foreground-action));
 }
 %form-element-label {
-  color: var(--typo-contrast-999, inherit);
+  color: var(--typo-contrast, inherit);
 }
diff --git a/ui/packages/consul-ui/app/components/freetext-filter/skin.scss b/ui/packages/consul-ui/app/components/freetext-filter/skin.scss
index c26ea34d9c..e78a30837a 100644
--- a/ui/packages/consul-ui/app/components/freetext-filter/skin.scss
+++ b/ui/packages/consul-ui/app/components/freetext-filter/skin.scss
@@ -3,13 +3,13 @@
     border: var(--decor-border-100);
     border-radius: var(--decor-radius-100);
 
-    background-color: rgb(var(--tone-gray-000));
-    border-color: rgb(var(--tone-gray-200));
-    color: rgb(var(--tone-gray-400));
+    background-color: var(--token-color-surface-primary);
+    border-color: var(--token-color-surface-interactive-active);
+    color: var(--token-color-foreground-disabled);
   }
   &:hover,
   &:hover * {
-    border-color: rgb(var(--tone-gray-400));
+    border-color: var(--token-color-foreground-disabled);
   }
   & *,
   &_input::placeholder {
@@ -35,14 +35,14 @@
     margin-top: -8px;
   }
   .popover-menu {
-    background-color: rgb(var(--tone-gray-050));
-    color: rgb(var(--tone-gray-800));
+    background-color: var(--token-color-surface-strong);
+    color: var(--token-color-foreground-primary);
   }
   .popover-menu {
     border-left: 1px solid;
     border-color: inherit;
   }
   .popover-menu > [type='checkbox']:checked + label button {
-    background-color: rgb(var(--tone-gray-200));
+    background-color: var(--token-color-surface-interactive-active);
   }
 }
diff --git a/ui/packages/consul-ui/app/components/hashicorp-consul/index.scss b/ui/packages/consul-ui/app/components/hashicorp-consul/index.scss
index fe989b06ca..78e376ae6d 100644
--- a/ui/packages/consul-ui/app/components/hashicorp-consul/index.scss
+++ b/ui/packages/consul-ui/app/components/hashicorp-consul/index.scss
@@ -5,8 +5,10 @@
 
     .dcs-message {
       padding: 8px 12px;
-      border-bottom: 1px solid rgb(var(--tone-gray-400));
+      border-bottom: 1px solid var(--token-color-foreground-disabled);
       max-width: fit-content;
+      background-color: var(--token-color-hashicorp-brand);
+      color: var(--token-color-palette-neutral-300);
     }
   }
   nav .dcs li.is-primary span,
@@ -14,15 +16,15 @@
     @extend %menu-panel-badge;
   }
   nav .dcs .dc-name {
-    color: rgb(var(--tone-gray-600));
+    color: var(--token-color-foreground-faint);
     padding: 3.25px 0px;
-    font-weight: var(--typo-weight-semibold)
+    font-weight: var(--typo-weight-semibold);
   }
   nav .dcs .dc-name span {
     @extend %pill-200;
     margin-left: 1rem;
-    background-color: rgb(var(--tone-gray-300));
-    color: rgb(var(--tone-gray-999));
+    background-color: var(--token-color-palette-neutral-300);
+    color: var(--token-color-hashicorp-brand);
   }
   nav li.partitions,
   nav li.nspaces {
@@ -42,7 +44,7 @@
   }
 
   [role='banner'] a svg {
-    fill: rgb(var(--tone-brand-600));
+    fill: var(--token-color-consul-brand);
   }
   .docs-link a::after {
     @extend %with-docs-mask, %as-pseudo;
@@ -55,7 +57,7 @@
   }
   .acls-separator span {
     @extend %led-icon;
-    color: rgb(var(--tone-red-500));
+    color: var(--token-color-foreground-critical);
     display: inline-block;
     position: relative;
     top: 2px;
diff --git a/ui/packages/consul-ui/app/components/horizontal-kv-list/README.mdx b/ui/packages/consul-ui/app/components/horizontal-kv-list/README.mdx
index 2cf875988d..1def2a4b51 100644
--- a/ui/packages/consul-ui/app/components/horizontal-kv-list/README.mdx
+++ b/ui/packages/consul-ui/app/components/horizontal-kv-list/README.mdx
@@ -202,11 +202,11 @@ dl {
 }
 .lock-delay::before {
   @extend %with-delay-mask, %as-pseudo;
-  color: rgb(var(--tone-gray-700));
+  color: var(--token-color-foreground-faint);
 }
 .ttl::before {
   @extend %with-history-mask, %as-pseudo;
-  color: rgb(var(--tone-blue-500));
+  color: var(--token-color-foreground-action);
 }
 .service-identity {
   @extend %badge;
diff --git a/ui/packages/consul-ui/app/components/horizontal-kv-list/debug.scss b/ui/packages/consul-ui/app/components/horizontal-kv-list/debug.scss
index 22efa4535d..01c1650e32 100644
--- a/ui/packages/consul-ui/app/components/horizontal-kv-list/debug.scss
+++ b/ui/packages/consul-ui/app/components/horizontal-kv-list/debug.scss
@@ -1,14 +1,14 @@
-[id^=docfy-demo-preview-horizontal-kv-list] {
+[id^='docfy-demo-preview-horizontal-kv-list'] {
   dl {
     @extend %horizontal-kv-list;
   }
   .lock-delay::before {
     @extend %with-delay-mask, %as-pseudo;
-    color: rgb(var(--tone-gray-700));
+    color: var(--token-color-foreground-faint);
   }
   .ttl::before {
     @extend %with-history-mask, %as-pseudo;
-    color: rgb(var(--tone-blue-500));
+    color: var(--token-color-foreground-action);
   }
   .service-identity {
     @extend %badge;
diff --git a/ui/packages/consul-ui/app/components/icon-definition/index.scss b/ui/packages/consul-ui/app/components/icon-definition/index.scss
index 262412ef22..4d3a5d3b53 100644
--- a/ui/packages/consul-ui/app/components/icon-definition/index.scss
+++ b/ui/packages/consul-ui/app/components/icon-definition/index.scss
@@ -8,32 +8,32 @@
 %icon-definition.passing dt::before,
 %composite-row-header .passing dd::before {
   @extend %with-check-circle-fill-mask, %as-pseudo;
-  color: rgb(var(--tone-green-500));
+  color: var(--token-color-foreground-success);
 }
 %icon-definition.warning dt::before,
 %composite-row-header .warning dd::before {
   @extend %with-alert-triangle-mask, %as-pseudo;
-  color: rgb(var(--tone-orange-500));
+  color: var(--token-color-foreground-warning);
 }
 %icon-definition.critical dt::before,
 %composite-row-header .critical dd::before {
   @extend %with-cancel-square-fill-mask, %as-pseudo;
-  color: rgb(var(--tone-red-500));
+  color: var(--token-color-foreground-critical);
 }
 %icon-definition.empty dt::before,
 %composite-row-header .empty dd::before {
   @extend %with-minus-square-fill-mask, %as-pseudo;
-  color: rgb(var(--tone-gray-500));
+  color: var(--token-color-foreground-faint);
 }
 %icon-definition.unknown dt::before,
 %composite-row-header .unknown dd::before {
   @extend %with-help-circle-outline-mask, %as-pseudo;
-  color: rgb(var(--tone-gray-500));
+  color: var(--token-color-foreground-faint);
 }
 
 %composite-row-header [rel='me'] dd::before {
   @extend %with-check-circle-fill-mask, %as-pseudo;
-  color: rgb(var(--tone-blue-500));
+  color: var(--token-color-foreground-action);
 }
 
 %icon-definition.node dt::before {
diff --git a/ui/packages/consul-ui/app/components/informed-action/skin.scss b/ui/packages/consul-ui/app/components/informed-action/skin.scss
index 25b7fba8d8..b9dc0875d7 100644
--- a/ui/packages/consul-ui/app/components/informed-action/skin.scss
+++ b/ui/packages/consul-ui/app/components/informed-action/skin.scss
@@ -2,8 +2,8 @@
   & {
     border-radius: var(--decor-radius-200);
     border: var(--decor-border-100);
-    border-color: rgb(var(--tone-gray-300));
-    background-color: rgb(var(--tone-gray-000));
+    border-color: var(--token-color-palette-neutral-300);
+    background-color: var(--token-color-surface-primary);
   }
   > div {
     border-top-left-radius: var(--decor-radius-200);
@@ -18,57 +18,57 @@
   }
   p {
     @extend %p2;
-    color: rgb(var(--tone-gray-999));
+    color: var(--token-color-hashicorp-brand);
   }
   > ul {
     list-style: none;
   }
   > ul > li > *:hover,
   > ul > li > *:focus {
-    background-color: rgb(var(--tone-gray-100));
+    background-color: var(--token-color-surface-strong);
   }
   /* variants */
   &.info {
     header {
-      color: rgb(var(--tone-blue-700));
+      color: var(--token-color-foreground-action-active);
     }
     header::before {
       @extend %with-info-circle-fill-mask, %as-pseudo;
-      background-color: rgb(var(--tone-blue-500));
+      background-color: var(--token-color-foreground-action);
       margin-right: 5px;
     }
     > div {
-      background-color: rgb(var(--tone-blue-010));
+      background-color: var(--token-color-surface-action);
     }
   }
   &.dangerous {
     header {
-      color: rgb(var(--tone-red-700));
+      color: var(--token-color-palette-red-400);
     }
     header::before {
       @extend %with-alert-triangle-mask, %as-pseudo;
-      background-color: rgb(var(--tone-red-500));
+      background-color: var(--token-color-foreground-critical);
     }
     > div {
-      background-color: rgb(var(--tone-red-010));
+      background-color: var(--token-color-surface-critical);
     }
   }
   &.warning {
     header {
-      color: rgb(var(--tone-orange-700));
+      color: var(--token-color-foreground-warning-on-surface);
     }
     header::before {
       @extend %with-alert-triangle-mask, %as-pseudo;
-      background-color: rgb(var(--tone-yellow-500));
+      background-color: var(--token-color-vault-brand);
       margin-right: 5px;
     }
     > div {
-      background-color: rgb(var(--tone-yellow-050));
+      background-color: var(--token-color-vault-gradient-faint-start);
     }
   }
   /**/
   > ul > .action > * {
-    color: rgb(var(--tone-blue-500));
+    color: var(--token-color-foreground-action);
   }
   > ul > .dangerous > * {
     @extend %frame-red-300;
diff --git a/ui/packages/consul-ui/app/components/inline-alert/skin.scss b/ui/packages/consul-ui/app/components/inline-alert/skin.scss
index a2bf0d9826..40bd166503 100644
--- a/ui/packages/consul-ui/app/components/inline-alert/skin.scss
+++ b/ui/packages/consul-ui/app/components/inline-alert/skin.scss
@@ -12,7 +12,7 @@
   color: inherit;
 }
 %inline-alert-error {
-  color: rgb(var(--color-failure));
+  color: var(--token-color-foreground-critical);
 }
 %inline-alert::before {
   font-size: 14px;
@@ -22,15 +22,15 @@
 }
 %inline-alert-success::before {
   @extend %with-check-circle-fill-mask;
-  color: rgb(var(--tone-green-500));
+  color: var(--token-color-foreground-success);
 }
 %inline-alert-error::before {
   @extend %with-cancel-square-fill-mask;
-  color: rgb(var(--tone-red-500));
+  color: var(--token-color-foreground-critical);
 }
 %inline-alert-warning::before {
   @extend %with-alert-triangle-mask;
-  color: rgb(var(--tone-orange-500));
+  color: var(--token-color-foreground-warning);
   /* the warning triangle always looks */
   /* too low just because its a triangle */
   /* this tweak make it look better */
@@ -38,5 +38,5 @@
 }
 %inline-alert-info::before {
   @extend %with-info-circle-fill-mask;
-  color: rgb(var(--tone-blue-500));
+  color: var(--token-color-foreground-action);
 }
diff --git a/ui/packages/consul-ui/app/components/inline-code/skin.scss b/ui/packages/consul-ui/app/components/inline-code/skin.scss
index 3fb061925a..72da1b3482 100644
--- a/ui/packages/consul-ui/app/components/inline-code/skin.scss
+++ b/ui/packages/consul-ui/app/components/inline-code/skin.scss
@@ -1,7 +1,7 @@
 %block-code,
 %inline-code {
   border: 1px solid;
-  color: rgb(var(--tone-brand-600));
-  background-color: rgb(var(--tone-gray-050));
-  border-color: rgb(var(--tone-gray-200));
+  color: var(--token-color-consul-brand);
+  background-color: var(--token-color-surface-strong);
+  border-color: var(--token-color-surface-interactive-active);
 }
diff --git a/ui/packages/consul-ui/app/components/list-collection/skin.scss b/ui/packages/consul-ui/app/components/list-collection/skin.scss
index e6e1632c49..5da7bfb15c 100644
--- a/ui/packages/consul-ui/app/components/list-collection/skin.scss
+++ b/ui/packages/consul-ui/app/components/list-collection/skin.scss
@@ -1,11 +1,11 @@
 %list-collection > ul {
   border-top: 1px solid;
-  border-color: rgb(var(--tone-gray-200));
+  border-color: var(--token-color-surface-interactive-active);
 }
 %list-collection-partial-button {
   cursor: pointer;
-  background-color: rgb(var(--tone-gray-050));
-  color: rgb(var(--tone-blue-500));
+  background-color: var(--token-color-surface-strong);
+  color: var(--token-color-foreground-action);
 }
 %list-collection-partial-button::after {
   @extend %with-chevron-up-mask, %as-pseudo;
diff --git a/ui/packages/consul-ui/app/components/list-row/skin.scss b/ui/packages/consul-ui/app/components/list-row/skin.scss
index 654e6e8947..9f71af4074 100644
--- a/ui/packages/consul-ui/app/components/list-row/skin.scss
+++ b/ui/packages/consul-ui/app/components/list-row/skin.scss
@@ -1,31 +1,30 @@
 %list-row {
   list-style-type: none;
   border: var(--decor-border-100);
-  border-top-color: var(--transparent);
-  border-bottom-color: rgb(var(--tone-gray-200));
-  border-right-color: var(--transparent);
-  border-left-color: var(--transparent);
+  border-top-color: transparent;
+  border-bottom-color: var(--token-color-surface-interactive-active);
+  border-right-color: transparent;
+  border-left-color: transparent;
 }
 %list-row-intent {
-  border-color: rgb(var(--tone-gray-200));
-  /*TODO: This should use a shared/CSS prop shadow*/
-  box-shadow: 0 2px 4px rgb(var(--black) / 10%);
-  border-top-color: var(--transparent);
+  border-color: var(--token-color-surface-interactive-active);
+  box-shadow: var(--token-elevation-high-box-shadow);
+  border-top-color: transparent;
   cursor: pointer;
 }
 %list-row-header {
-  color: rgb(var(--tone-gray-999));
+  color: var(--token-color-hashicorp-brand);
 }
 %list-row-header * {
   color: inherit;
 }
 %list-row-detail {
-  color: rgb(var(--tone-gray-500));
+  color: var(--token-color-foreground-faint);
 }
 %list-row-detail a {
   color: inherit;
 }
 %list-row-detail a:hover {
-  color: rgb(var(--color-action));
+  color: var(--token-color-foreground-action);
   text-decoration: underline;
 }
diff --git a/ui/packages/consul-ui/app/components/main-header-horizontal/skin.scss b/ui/packages/consul-ui/app/components/main-header-horizontal/skin.scss
index 2b789d42e3..bfb5178e05 100644
--- a/ui/packages/consul-ui/app/components/main-header-horizontal/skin.scss
+++ b/ui/packages/consul-ui/app/components/main-header-horizontal/skin.scss
@@ -1,3 +1,3 @@
 %main-header-horizontal::before {
-  background-color: rgb(var(--tone-gray-000));
+  background-color: var(--token-color-hashicorp-brand);
 }
diff --git a/ui/packages/consul-ui/app/components/main-nav-horizontal/index.scss b/ui/packages/consul-ui/app/components/main-nav-horizontal/index.scss
index bcc7a01b37..6ebed8a7da 100644
--- a/ui/packages/consul-ui/app/components/main-nav-horizontal/index.scss
+++ b/ui/packages/consul-ui/app/components/main-nav-horizontal/index.scss
@@ -26,6 +26,6 @@
 /**/
 
 /* menu-panels in the main navigation are treated slightly differently */
-%main-nav-horizontal label + div {
+%main-nav-horizontal .disclosure-menu button + * {
   @extend %main-nav-horizontal-menu-panel;
 }
diff --git a/ui/packages/consul-ui/app/components/main-nav-horizontal/layout.scss b/ui/packages/consul-ui/app/components/main-nav-horizontal/layout.scss
index ba9a3027fd..c8fb07dd6a 100644
--- a/ui/packages/consul-ui/app/components/main-nav-horizontal/layout.scss
+++ b/ui/packages/consul-ui/app/components/main-nav-horizontal/layout.scss
@@ -16,8 +16,6 @@
 %main-nav-horizontal-menu-panel {
   z-index: 400;
   /* TODO: We should probably make menu-panel default to left hand side*/
-  left: 0;
-  right: auto;
   top: 28px !important;
 }
 %main-nav-horizontal-action {
diff --git a/ui/packages/consul-ui/app/components/main-nav-horizontal/skin.scss b/ui/packages/consul-ui/app/components/main-nav-horizontal/skin.scss
index ab564cbb04..8dbf1ce63e 100644
--- a/ui/packages/consul-ui/app/components/main-nav-horizontal/skin.scss
+++ b/ui/packages/consul-ui/app/components/main-nav-horizontal/skin.scss
@@ -13,18 +13,28 @@
   transform: scaleY(-100%);
 }
 
+%main-nav-horizontal-menu-panel,
+%main-nav-horizontal-menu-panel > ul[role='menu'],
+%main-nav-horizontal-menu-panel > ul[role='menu'] > li > [role='menuitem'] {
+  background-color: var(--token-color-hashicorp-brand);
+  color: var(--token-color-palette-neutral-300);
+}
+
+%main-nav-horizontal-menu-panel > ul[role='menu'] > li > [role='menuitem']:hover {
+  background-color: var(--token-color-palette-neutral-600);
+}
+
 %main-nav-horizontal-toggle {
   display: none;
 }
 %main-nav-horizontal-toggle-button::before {
   --icon-name: icon-menu;
-  --icon-color: rgb(var(--tone-gray-800));
+  --icon-color: var(--token-color-palette-neutral-300);
   content: '';
   cursor: pointer;
 }
 %main-nav-horizontal-action,
 %main-nav-horizontal-action-intent,
 %main-nav-horizontal-action-active {
-  color: rgb(var(--tone-gray-600));
+  color: var(--token-color-palette-neutral-300);
 }
-/**/
diff --git a/ui/packages/consul-ui/app/components/main-nav-vertical/README.mdx b/ui/packages/consul-ui/app/components/main-nav-vertical/README.mdx
index 12039d3bb4..a079e76e41 100644
--- a/ui/packages/consul-ui/app/components/main-nav-vertical/README.mdx
+++ b/ui/packages/consul-ui/app/components/main-nav-vertical/README.mdx
@@ -65,7 +65,7 @@ you need to define a different ancestor for a containing block you can use
   /* a transform is required to mark this element as the containing block */
   /* for hoisting, otherwise the viewport is the containing block */
   transform: translate(0, 0);
-  background-color: rgb(var(--tone-gray-600));
+  background-color: var(--token-color-foreground-faint);
   padding-top: 64px;
 }
 ```
diff --git a/ui/packages/consul-ui/app/components/main-nav-vertical/debug.scss b/ui/packages/consul-ui/app/components/main-nav-vertical/debug.scss
index 8d8a8e3a34..8f25d32822 100644
--- a/ui/packages/consul-ui/app/components/main-nav-vertical/debug.scss
+++ b/ui/packages/consul-ui/app/components/main-nav-vertical/debug.scss
@@ -15,7 +15,7 @@
     /* a transform is required to mark this element as the containing block */
     /* for hoisting, otherwise the viewport is the containing block */
     transform: translate(0, 0);
-    background-color: rgb(var(--tone-gray-600));
+    background-color: var(--token-color-foreground-faint);
     padding-top: 64px;
   }
   // TODO: Reduce the need for these debug overrides
diff --git a/ui/packages/consul-ui/app/components/main-nav-vertical/skin.scss b/ui/packages/consul-ui/app/components/main-nav-vertical/skin.scss
index e1930d8bf7..4564ff17a5 100644
--- a/ui/packages/consul-ui/app/components/main-nav-vertical/skin.scss
+++ b/ui/packages/consul-ui/app/components/main-nav-vertical/skin.scss
@@ -2,7 +2,7 @@
   @extend %p1;
   cursor: pointer;
   border-right: var(--decor-border-400);
-  border-color: var(--transparent);
+  border-color: transparent;
 }
 %main-nav-vertical-action > a {
   color: inherit;
@@ -20,29 +20,31 @@
   text-decoration: none;
 }
 %main-nav-vertical {
-  background-color: rgb(var(--tone-gray-050));
-  color: rgb(var(--tone-gray-700));
+  background-color: var(--token-color-foreground-strong);
+  color: var(--token-color-foreground-faint);
 }
 %main-nav-vertical li:not([role='separator']) > span {
-  color: rgb(var(--tone-gray-300));
+  color: var(--token-color-palette-neutral-300);
 }
-%main-nav-vertical [role='separator'] {
-  color: rgb(var(--tone-gray-600));
+%main-nav-vertical [role='separator'],
+%main-nav-vertical-hoisted [role='separator'] {
+  color: var(--token-color-palette-neutral-400);
+  background-color: var(--token-color-foreground-strong);
 }
 %main-nav-vertical-action {
-  color: rgb(var(--tone-gray-800));
+  color: var(--token-color-palette-neutral-300);
 }
 %main-nav-vertical-item,
 %main-nav-vertical-action-intent,
 %main-nav-vertical-action-active {
-  color: rgb(var(--tone-gray-999));
+  color: var(--token-color-palette-neutral-0);
 }
 %main-nav-vertical-action-active {
-  background-color: rgb(var(--tone-gray-150));
-  border-color: rgb(var(--tone-gray-999));
+  background-color: var(--token-color-palette-neutral-500);
+  border-color: var(--token-color-palette-neutral-0);
 }
 %main-nav-vertical [aria-label]::before {
-  color: rgb(var(--tone-gray-700));
+  color: var(--token-color-palette-neutral-400);
   content: attr(aria-label);
   display: block;
   margin-top: -0.5rem;
@@ -50,18 +52,42 @@
 }
 %main-nav-vertical-popover-menu-trigger {
   border: var(--decor-border-100);
-  border-color: rgb(var(--tone-gray-500));
+  border-color: var(--token-color-foreground-faint);
   border-radius: var(--decor-radius-100);
 
   font-weight: inherit;
 
-  background-color: rgb(var(--tone-gray-050));
-  color: rgb(var(--tone-gray-999));
+  background-color: var(--token-color-foreground-strong);
+  color: var(--token-color-palette-neutral-200);
 }
+
+%main-nav-vertical-popover-menu-trigger:hover,
+%main-nav-vertical-popover-menu-trigger:focus {
+  color: var(--token-color-palette-neutral-300);
+  background-color: var(--token-color-foreground-strong);
+}
+
+%main-nav-vertical ul[role='menu'] li a[role='menuitem'] {
+  color: var(--token-color-palette-neutral-300);
+  background-color: var(--token-color-foreground-strong);
+}
+
+%main-nav-vertical ul[role='menu']li a[role='menuitem']:hover {
+  background-color: var(--token-color-palette-neutral-600);
+}
+
 %main-nav-vertical-popover-menu-trigger[aria-expanded='true'] {
   border-bottom-left-radius: var(--decor-radius-000);
   border-bottom-right-radius: var(--decor-radius-000);
 }
+
+%main-nav-horizontal %panel,
+%main-nav-horizontal %panel-separator,
+%main-nav-vertical %panel,
+%main-nav-vertical %panel-separator {
+  border-color: var(--token-color-foreground-faint);
+}
+
 %main-nav-vertical-popover-menu-trigger::after {
   @extend %with-chevron-down-mask, %as-pseudo;
   width: 16px;
@@ -75,4 +101,10 @@
   border-top-left-radius: var(--decor-radius-000);
   border-top-right-radius: var(--decor-radius-000);
   border-top: var(--decor-border-000);
+  color: var(--token-color-palette-neutral-300);
+  background-color: var(--token-color-foreground-strong);
+}
+
+%main-nav-vertical-hoisted ul[role='menu'] {
+  background-color: var(--token-color-hashicorp-brand);
 }
diff --git a/ui/packages/consul-ui/app/components/menu-panel/skin.scss b/ui/packages/consul-ui/app/components/menu-panel/skin.scss
index e1aa907513..e47b2df0f4 100644
--- a/ui/packages/consul-ui/app/components/menu-panel/skin.scss
+++ b/ui/packages/consul-ui/app/components/menu-panel/skin.scss
@@ -6,7 +6,7 @@
 }
 %menu-panel-header + ul {
   border-top: var(--decor-border-100);
-  border-color: rgb(var(--tone-border, var(--tone-gray-300)));
+  border-color: var(--token-form--base-border-color-default);
 }
 /* if the first item is a separator and it */
 /* contains text don't add a line */
@@ -17,15 +17,15 @@
   @extend %p3;
   text-transform: uppercase;
   font-weight: var(--typo-weight-medium);
-  color: rgb(var(--tone-gray-600));
+  color: var(--token-color-foreground-faint);
 }
 %menu-panel-item {
   list-style-type: none;
 }
 %menu-panel-badge {
   @extend %pill;
-  color: rgb(var(--tone-gray-000));
-  background-color: rgb(var(--tone-gray-500));
+  color: var(--token-color-surface-primary);
+  background-color: var(--token-color-foreground-faint);
 }
 %menu-panel-body .informed-action {
   border: 0 !important;
diff --git a/ui/packages/consul-ui/app/components/modal-dialog/skin.scss b/ui/packages/consul-ui/app/components/modal-dialog/skin.scss
index f22a211116..92e7e5e45d 100644
--- a/ui/packages/consul-ui/app/components/modal-dialog/skin.scss
+++ b/ui/packages/consul-ui/app/components/modal-dialog/skin.scss
@@ -1,7 +1,7 @@
 %modal-dialog.warning header {
-  background-color: rgb(var(--tone-yellow-050));
-  border-color: rgb(var(--tone-yellow-500));
-  color: rgb(var(--tone-yellow-800));
+  background-color: var(--token-color-vault-gradient-faint-start);
+  border-color: var(--token-color-vault-brand);
+  color: var(--token-color-vault-foreground);
 }
 %modal-dialog.warning header > *:not(label) {
   font-size: var(--typo-size-500);
@@ -9,20 +9,21 @@
 }
 %modal-dialog.warning header::before {
   @extend %with-alert-triangle-mask, %as-pseudo;
-  color: rgb(var(--tone-yellow-500));
+  color: var(--token-color-vault-brand);
   float: left;
   margin-top: 2px;
   margin-right: 3px;
 }
 %modal-dialog-overlay {
-  background-color: rgb(var(--tone-gray-000) / 90%);
+  background-color: var(--token-color-surface-interactive);
+  opacity: 0.9;
 }
 %modal-window {
-  box-shadow: var(--decor-elevation-800);
+  box-shadow: var(--token-elevation-overlay-box-shadow);
 }
 %modal-window {
   /*%frame-gray-000*/
-  background-color: rgb(var(--tone-gray-000));
+  background-color: var(--token-color-surface-primary);
 }
 %modal-window > footer,
 %modal-window > header {
@@ -35,7 +36,7 @@
 .modal-dialog-body,
 %modal-window > footer,
 %modal-window > header {
-  border-color: rgb(var(--tone-gray-300));
+  border-color: var(--token-color-palette-neutral-300);
 }
 .modal-dialog-body {
   border-style: solid;
diff --git a/ui/packages/consul-ui/app/components/more-popover-menu/index.scss b/ui/packages/consul-ui/app/components/more-popover-menu/index.scss
index 7b7f419cc4..808bde12bd 100644
--- a/ui/packages/consul-ui/app/components/more-popover-menu/index.scss
+++ b/ui/packages/consul-ui/app/components/more-popover-menu/index.scss
@@ -14,7 +14,7 @@
   padding: 7px;
 }
 %more-popover-menu-trigger > * {
-  background-color: var(--transparent);
+  background-color: transparent;
   border-radius: var(--decor-radius-100);
   width: 30px;
   height: 30px;
@@ -22,7 +22,7 @@
 }
 %more-popover-menu-trigger > *::after {
   --icon-name: icon-more-horizontal;
-  --icon-color: rgb(var(--tone-gray-900));
+  --icon-color: var(--token-color-foreground-strong);
   --icon-size: icon-300;
   content: '';
   position: absolute;
@@ -32,9 +32,9 @@
   margin-left: -8px;
 }
 %more-popover-menu-trigger > *:active {
-  background-color: rgb(var(--tone-gray-100));
+  background-color: var(--token-color-surface-strong);
 }
 %more-popover-menu-trigger > *:hover,
 %more-popover-menu-trigger > *:focus {
-  background-color: rgb(var(--tone-gray-050));
+  background-color: var(--token-color-surface-strong);
 }
diff --git a/ui/packages/consul-ui/app/components/notice/skin.scss b/ui/packages/consul-ui/app/components/notice/skin.scss
index 3ecae0e867..b8c2dc4dca 100644
--- a/ui/packages/consul-ui/app/components/notice/skin.scss
+++ b/ui/packages/consul-ui/app/components/notice/skin.scss
@@ -1,7 +1,7 @@
 %notice {
   border-radius: var(--decor-radius-100);
   border: var(--decor-border-100);
-  color: rgb(var(--tone-gray-999));
+  color: var(--token-color-hashicorp-brand);
 }
 %notice::before {
   @extend %as-pseudo;
@@ -21,57 +21,57 @@
   @extend %notice;
 }
 %notice-success {
-  background-color: rgb(var(--tone-green-050));
-  border-color: rgb(var(--tone-green-500));
+  background-color: var(--token-color-surface-success);
+  border-color: var(--token-color-foreground-success);
 }
 %notice-success header * {
-  color: rgb(var(--tone-green-800));
+  color: var(--token-color-palette-green-400);
 }
 %notice-info {
-  border-color: rgb(var(--tone-blue-100));
-  background-color: rgb(var(--tone-blue-010));
+  border-color: var(--token-color-border-action);
+  background-color: var(--token-color-surface-action);
 }
 %notice-info header * {
-  color: rgb(var(--tone-blue-700));
+  color: var(--token-color-foreground-action-active);
 }
 %notice-highlight {
-  background-color: rgb(var(--tone-gray-050));
-  border-color: rgb(var(--tone-gray-300));
+  background-color: var(--token-color-surface-strong);
+  border-color: var(--token-color-palette-neutral-300);
 }
 %notice-info header * {
-  color: rgb(var(--tone-blue-700));
+  color: var(--token-color-foreground-action-active);
 }
 %notice-warning {
-  border-color: rgb(var(--tone-yellow-100));
-  background-color: rgb(var(--tone-yellow-050));
+  border-color: var(--token-color-vault-border);
+  background-color: var(--token-color-vault-gradient-faint-start);
 }
 %notice-warning header * {
-  color: rgb(var(--tone-yellow-800));
+  color: var(--token-color-vault-foreground);
 }
 %notice-error {
-  background-color: rgb(var(--tone-red-050));
-  border-color: rgb(var(--tone-red-500));
+  background-color: var(--token-color-surface-critical);
+  border-color: var(--token-color-foreground-critical);
 }
 %notice-error header * {
-  color: rgb(var(--tone-red-500));
+  color: var(--token-color-foreground-critical);
 }
 %notice-success::before {
   @extend %with-check-circle-fill-mask;
-  color: rgb(var(--tone-green-500));
+  color: var(--token-color-foreground-success);
 }
 %notice-info::before {
   @extend %with-info-circle-fill-mask;
-  color: rgb(var(--tone-blue-500));
+  color: var(--token-color-foreground-action);
 }
 %notice-highlight::before {
   @extend %with-star-fill-mask;
-  color: rgb(var(--tone-yellow-500));
+  color: var(--token-color-vault-brand);
 }
 %notice-warning::before {
   @extend %with-alert-triangle-mask;
-  color: rgb(var(--tone-orange-500));
+  color: var(--token-color-foreground-warning);
 }
 %notice-error::before {
   @extend %with-cancel-square-fill-mask;
-  color: rgb(var(--tone-red-500));
+  color: var(--token-color-foreground-critical);
 }
diff --git a/ui/packages/consul-ui/app/components/overlay/none.scss b/ui/packages/consul-ui/app/components/overlay/none.scss
index 951343b770..3baccd8ae5 100644
--- a/ui/packages/consul-ui/app/components/overlay/none.scss
+++ b/ui/packages/consul-ui/app/components/overlay/none.scss
@@ -26,9 +26,9 @@
     transition-timing-function: cubic-bezier(0.54, 1.5, 0.38, 1.11);
   }
   & {
-    background-color: rgb(var(--tone-gray-000));
+    background-color: var(--token-color-surface-primary);
     border-radius: var(--decor-radius-100);
-    box-shadow: var(--decor-elevation-400);
+    box-shadow: var(--token-surface-mid-box-shadow);
   }
   .tippy-arrow {
     @extend %overlay-tail;
diff --git a/ui/packages/consul-ui/app/components/overlay/square-tail.scss b/ui/packages/consul-ui/app/components/overlay/square-tail.scss
index 286ababa3a..c99480aeb0 100644
--- a/ui/packages/consul-ui/app/components/overlay/square-tail.scss
+++ b/ui/packages/consul-ui/app/components/overlay/square-tail.scss
@@ -4,11 +4,11 @@
     left: calc(0px - (var(--size) / 2)) !important;
   }
   .tippy-arrow::before {
-    background-color: rgb(var(--tone-gray-000));
+    background-color: var(--token-color-surface-primary);
     width: calc(1px + var(--size));
     height: calc(1px + var(--size));
     border: var(--decor-border-100);
-    border-color: rgb(var(--tone-gray-300));
+    border-color: var(--token-color-palette-neutral-300);
   }
   // potential icon
   .tippy-arrow::after {
diff --git a/ui/packages/consul-ui/app/components/paged-collection/README.mdx b/ui/packages/consul-ui/app/components/paged-collection/README.mdx
index c50b393b97..0572b48f8e 100644
--- a/ui/packages/consul-ui/app/components/paged-collection/README.mdx
+++ b/ui/packages/consul-ui/app/components/paged-collection/README.mdx
@@ -29,7 +29,7 @@ A renderless component to act as a helper for different types of pagination.
     as |pager|>
       <div
         style={{{style-map
-          (array 'outline' '1px solid rgb(var(--tone-gray-300))')
+          (array 'outline' '1px solid var(--token-color-palette-neutral-300)')
           (array 'max-height' '360' 'px')
           (array '--paged-row-height' (if (not-eq this.type 'index') '43px'))
         }}}
@@ -46,7 +46,7 @@ A renderless component to act as a helper for different types of pagination.
           <li
             style={{{style-map
               (array 'height' '43' 'px')
-              (array 'outline' '1px solid rgb(var(--tone-gray-100))')
+              (array 'outline' '1px solid var(--token-color-surface-strong)')
             }}}
           >
             {{item.Node}}
diff --git a/ui/packages/consul-ui/app/components/panel/README.mdx b/ui/packages/consul-ui/app/components/panel/README.mdx
index 21f9590ec3..b2d9e9cf92 100644
--- a/ui/packages/consul-ui/app/components/panel/README.mdx
+++ b/ui/packages/consul-ui/app/components/panel/README.mdx
@@ -12,17 +12,10 @@ properties available to help maintain consistency within the panel.
 below is only for illustrative purposes. Please use this CSS component as a
 building block for other CSS instead.
 
-
 ```hbs preview-template
 <figure>
   <figcaption>Panel with no padding (in dark mode)</figcaption>
-  <div
-    class={{class-map
-      "panel"
-      "theme-dark"
-    }}
-    ...attributes
-  >
+  <div class={{class-map 'panel' 'theme-dark'}} ...attributes>
     <div>
       <p>Some text purposefully with no padding</p>
     </div>
@@ -34,34 +27,21 @@ building block for other CSS instead.
 </figure>
 <figure>
   <figcaption>Panel using inherited padding for consistency</figcaption>
-  <div
-    class={{class-map
-      "panel"
-    }}
-    ...attributes
-  >
+  <div class={{class-map 'panel'}} ...attributes>
     <Action
       style={{style-map
         (array 'width' '100%')
-        (array 'border-bottom' '1px solid rgb(var(--tone-border))')
+        (array 'border-bottom' '1px solid var(--tone-border)')
         (array 'padding' 'var(--padding-x) var(--padding-y)')
       }}
     >
       Full Width Button
     </Action>
-    <div
-      style={{style-map
-        (array 'padding' 'var(--padding-x) var(--padding-y)')
-      }}
-    >
+    <div style={{style-map (array 'padding' 'var(--padding-x) var(--padding-y)')}}>
       <p>Some text with padding</p>
     </div>
     <hr />
-    <div
-      style={{style-map
-        (array 'padding' 'var(--padding-x) var(--padding-y)')
-      }}
-    >
+    <div style={{style-map (array 'padding' 'var(--padding-x) var(--padding-y)')}}>
       <p>Along with a separator ^ again with padding</p>
     </div>
   </div>
@@ -69,45 +49,34 @@ building block for other CSS instead.
 <figure>
   <figcaption>Panel using larger padding and different color borders</figcaption>
   <div
-    class={{class-map
-      "panel"
+    class={{class-map 'panel'}}
+    style={{style-map
+      (array '--padding-x' '24px')
+      (array '--padding-y' '24px')
+      (array '--tone-border' 'var(--token-color-consul-foreground)')
     }}
-      style={{style-map
-        (array '--padding-x' '24px')
-        (array '--padding-y' '24px')
-        (array '--tone-border' 'var(--tone-strawberry-500)')
-      }}
     ...attributes
   >
     <Action
       style={{style-map
         (array 'width' '100%')
-        (array 'border-bottom' '1px solid rgb(var(--tone-border))')
+        (array 'border-bottom' '1px solid var(--tone-border)')
         (array 'padding' 'var(--padding-x) var(--padding-y)')
       }}
     >
       Full Width Button
     </Action>
-    <div
-      style={{style-map
-        (array 'padding' 'var(--padding-x) var(--padding-y)')
-      }}
-    >
+    <div style={{style-map (array 'padding' 'var(--padding-x) var(--padding-y)')}}>
       <p>Some text with padding</p>
     </div>
     <hr />
-    <div
-      style={{style-map
-        (array 'padding' 'var(--padding-x) var(--padding-y)')
-      }}
-    >
+    <div style={{style-map (array 'padding' 'var(--padding-x) var(--padding-y)')}}>
       <p>Along with a separator ^ again with padding</p>
     </div>
   </div>
 </figure>
 ```
 
-
 ```css
 .panel {
   @extend %panel;
@@ -119,8 +88,8 @@ building block for other CSS instead.
 
 ## CSS Properties
 
-| Property | Type | Default | Description |
-| --- | --- | --- | --- |
-| `--tone-border` | `color` | --tone-gray-300 | Default color for all borders |
-| `--padding-x` | `length` | 14px | Default x padding to be used for padding values within the component |
-| `--padding-y` | `length` | 14px | Default y padding to be used for padding values within the component |
+| Property        | Type     | Default                           | Description                                                          |
+| --------------- | -------- | --------------------------------- | -------------------------------------------------------------------- |
+| `--tone-border` | `color`  | --token-color-palette-neutral-300 | Default color for all borders                                        |
+| `--padding-x`   | `length` | 14px                              | Default x padding to be used for padding values within the component |
+| `--padding-y`   | `length` | 14px                              | Default y padding to be used for padding values within the component |
diff --git a/ui/packages/consul-ui/app/components/panel/index.css.js b/ui/packages/consul-ui/app/components/panel/index.css.js
index 68179f056c..795a3f2511 100644
--- a/ui/packages/consul-ui/app/components/panel/index.css.js
+++ b/ui/packages/consul-ui/app/components/panel/index.css.js
@@ -11,21 +11,21 @@ export default (css) => css`
   }
 
   .panel {
-    --tone-border: var(--tone-gray-300);
+    --tone-border: var(--token-color-palette-neutral-300);
     border: var(--decor-border-100);
     border-radius: var(--decor-radius-200);
-    box-shadow: var(--decor-elevation-600);
+    box-shadow: var(--token-surface-high-box-shadow);
   }
   .panel-separator {
     border: 0;
     border-top: var(--decor-border-100);
   }
   .panel {
-    color: rgb(var(--tone-gray-900));
-    background-color: rgb(var(--tone-gray-000));
+    color: var(--token-color-foreground-strong);
+    background-color: var(--token-color-surface-primary);
   }
   .panel,
   .panel-separator {
-    border-color: rgb(var(--tone-border));
+    border-color: var(--tone-border);
   }
 `;
diff --git a/ui/packages/consul-ui/app/components/panel/skin.scss b/ui/packages/consul-ui/app/components/panel/skin.scss
index 30d859a97e..23f09151f7 100644
--- a/ui/packages/consul-ui/app/components/panel/skin.scss
+++ b/ui/packages/consul-ui/app/components/panel/skin.scss
@@ -1,17 +1,17 @@
 %panel {
-  --tone-border: var(--tone-gray-300);
+  --tone-border: var(--token-color-palette-neutral-300);
   border: var(--decor-border-100);
   border-radius: var(--decor-radius-200);
-  box-shadow: var(--decor-elevation-600);
+  box-shadow: var(--token-surface-high-box-shadow);
 }
 %panel-separator {
   border-top: var(--decor-border-100);
 }
 %panel {
-  color: rgb(var(--tone-gray-900));
-  background-color: rgb(var(--tone-gray-000));
+  color: var(--token-color-foreground-strong);
+  background-color: var(--token-color-surface-primary);
 }
 %panel,
 %panel-separator {
-  border-color: rgb(var(--tone-border));
+  border-color: var(--tone-border);
 }
diff --git a/ui/packages/consul-ui/app/components/peerings/badge/index.scss b/ui/packages/consul-ui/app/components/peerings/badge/index.scss
index e61a222229..5a79ae19c9 100644
--- a/ui/packages/consul-ui/app/components/peerings/badge/index.scss
+++ b/ui/packages/consul-ui/app/components/peerings/badge/index.scss
@@ -7,32 +7,32 @@
   gap: 4px;
 
   &.active {
-    background: rgb(var(--tone-green-050));
-    color: rgb(var(--tone-green-600));
+    background: var(--token-color-surface-success);
+    color: var(--token-color-foreground-success);
   }
   &.pending {
-    background: rgb(var(--tone-strawberry-050));
-    color: rgb(var(--tone-strawberry-500));
+    background: var(--token-color-consul-surface);
+    color: var(--token-color-consul-brand);
   }
   &.establishing {
-    background: rgb(var(--tone-blue-050));
-    color: rgb(var(--tone-blue-500));
+    background: var(--token-color-surface-action);
+    color: var(--token-color-foreground-action);
   }
   &.failing {
-    background: rgb(var(--tone-red-050));
-    color: rgb(var(--tone-red-500));
+    background: var(--token-color-surface-critical);
+    color: var(--token-color-foreground-critical);
   }
   &.deleting {
-    background: rgb(var(--tone-yellow-050));
-    color: rgb(var(--tone-yellow-800));
+    background: var(--token-color-surface-warning);
+    color: var(--token-color-foreground-warning-on-surface);
   }
   &.terminated {
-    background: rgb(var(--tone-gray-150));
-    color: rgb(var(--tone-gray-800));
+    background: var(--token-color-surface-interactive-active);
+    color: var(--token-color-foreground-primary);
   }
   &.undefined {
-    background: rgb(var(--tone-gray-150));
-    color: rgb(var(--tone-gray-800));
+    background: var(--token-color-surface-interactive-active);
+    color: var(--token-color-foreground-primary);
   }
 
   .peerings-badge__text {
diff --git a/ui/packages/consul-ui/app/components/popover-select/index.scss b/ui/packages/consul-ui/app/components/popover-select/index.scss
index ac45555434..01f38ae5c6 100644
--- a/ui/packages/consul-ui/app/components/popover-select/index.scss
+++ b/ui/packages/consul-ui/app/components/popover-select/index.scss
@@ -28,23 +28,23 @@
 /* even their own search bar sub menu components */
 %popover-select .value-passing button::before {
   @extend %with-check-circle-fill-mask, %as-pseudo;
-  color: rgb(var(--tone-green-500));
+  color: var(--token-color-foreground-success);
 }
 %popover-select .value-warning button::before {
   @extend %with-alert-triangle-mask, %as-pseudo;
-  color: rgb(var(--tone-orange-500));
+  color: var(--token-color-foreground-warning);
 }
 %popover-select .value-critical button::before {
   @extend %with-cancel-square-fill-mask, %as-pseudo;
-  color: rgb(var(--tone-red-500));
+  color: var(--token-color-foreground-critical);
 }
 %popover-select .value-empty button::before {
   @extend %with-minus-square-fill-mask, %as-pseudo;
-  color: rgb(var(--tone-gray-400));
+  color: var(--token-color-foreground-disabled);
 }
 %popover-select .value-unknown button::before {
   @extend %with-help-circle-outline-mask, %as-pseudo;
-  color: rgb(var(--tone-gray-500));
+  color: var(--token-color-foreground-faint);
 }
 %popover-select.type-source li:not(.partition) button {
   text-transform: capitalize;
@@ -54,7 +54,7 @@
 }
 %popover-select.type-source li.partition button::before {
   @extend %with-user-team-mask, %as-pseudo;
-  color: rgb(var(--tone-gray-500));
+  color: var(--token-color-foreground-faint);
 }
 %popover-select .jwt button::before {
   @extend %with-logo-jwt-color-icon, %as-pseudo;
diff --git a/ui/packages/consul-ui/app/components/progress/skin.scss b/ui/packages/consul-ui/app/components/progress/skin.scss
index fb9f433d0b..07411cf0bb 100644
--- a/ui/packages/consul-ui/app/components/progress/skin.scss
+++ b/ui/packages/consul-ui/app/components/progress/skin.scss
@@ -5,7 +5,7 @@
   justify-content: center;
   --icon-size: icon-700; /* 24px */
   --icon-name: var(--icon-loading);
-  --icon-color: rgb(var(--tone-gray-500));
+  --icon-color: var(--token-color-foreground-faint);
 }
 %progress-indeterminate::before {
   content: '';
diff --git a/ui/packages/consul-ui/app/components/radio-card/skin.scss b/ui/packages/consul-ui/app/components/radio-card/skin.scss
index 03320aa5e6..2350c740d3 100644
--- a/ui/packages/consul-ui/app/components/radio-card/skin.scss
+++ b/ui/packages/consul-ui/app/components/radio-card/skin.scss
@@ -1,25 +1,25 @@
 %radio-card {
   border: var(--decor-border-100);
   border-radius: var(--decor-radius-100);
-  border-color: rgb(var(--tone-gray-200));
-  box-shadow: var(--decor-elevation-400);
-  color: rgb(var(--tone-gray-500));
+  border-color: var(--token-color-surface-interactive-active);
+  box-shadow: var(--token-surface-mid-box-shadow);
+  color: var(--token-color-foreground-faint);
   cursor: pointer;
 }
 %radio-card.checked {
-  border-color: rgb(var(--tone-blue-500));
+  border-color: var(--token-color-foreground-action);
 }
 %radio-card > :first-child {
-  background-color: rgb(var(--tone-gray-050));
+  background-color: var(--token-color-surface-strong);
 }
 %radio-card.checked > :first-child {
-  background-color: rgb(var(--tone-blue-050));
+  background-color: var(--token-color-surface-action);
 }
 %radio-card header {
   margin-bottom: 0.5em;
 }
 %radio-card header {
-  color: rgb(var(--tone-gray-999));
+  color: var(--token-color-hashicorp-brand);
 }
 %radio-card-with-icon > :last-child {
   padding-left: 47px;
diff --git a/ui/packages/consul-ui/app/components/search-bar/index.scss b/ui/packages/consul-ui/app/components/search-bar/index.scss
index 99ec3cff0f..e0f52145bb 100644
--- a/ui/packages/consul-ui/app/components/search-bar/index.scss
+++ b/ui/packages/consul-ui/app/components/search-bar/index.scss
@@ -2,7 +2,7 @@
   &-status {
     & {
       border-bottom: var(--decor-border-100);
-      border-bottom-color: rgb(var(--tone-gray-200));
+      border-bottom-color: var(--token-color-surface-interactive-active);
     }
     .remove-all button {
       @extend %anchor;
@@ -11,15 +11,15 @@
       & {
         @extend %pill-200;
         border: var(--decor-border-100);
-        border-color: rgb(var(--tone-gray-200));
-        color: rgb(var(--tone-gray-600));
+        border-color: var(--token-color-surface-interactive-active);
+        color: var(--token-color-foreground-faint);
       }
       button {
         cursor: pointer;
       }
       button::before {
         @extend %with-cancel-plain-mask, %as-pseudo;
-        color: rgb(var(--tone-gray-600));
+        color: var(--token-color-foreground-faint);
         margin-top: 1px;
         margin-right: 0.2rem;
       }
diff --git a/ui/packages/consul-ui/app/components/skip-links/skin.scss b/ui/packages/consul-ui/app/components/skip-links/skin.scss
index 808731d8d5..630bbde369 100644
--- a/ui/packages/consul-ui/app/components/skip-links/skin.scss
+++ b/ui/packages/consul-ui/app/components/skip-links/skin.scss
@@ -1,7 +1,7 @@
 %skip-links {
-  outline: 1px solid rgb(var(--tone-gray-000));
-  color: rgb(var(--tone-gray-000));
-  background-color: rgb(var(--tone-blue-500));
+  outline: 1px solid var(--token-color-surface-primary);
+  color: var(--token-color-surface-primary);
+  background-color: var(--token-color-foreground-action);
 }
 %skip-links button,
 %skip-links a {
diff --git a/ui/packages/consul-ui/app/components/sliding-toggle/skin.scss b/ui/packages/consul-ui/app/components/sliding-toggle/skin.scss
index 6a3e38cf77..2d5327dc6a 100644
--- a/ui/packages/consul-ui/app/components/sliding-toggle/skin.scss
+++ b/ui/packages/consul-ui/app/components/sliding-toggle/skin.scss
@@ -15,16 +15,16 @@
   @extend %sliding-toggle-negative;
 }
 %sliding-toggle label span {
-  color: rgb(var(--tone-gray-900));
+  color: var(--token-color-foreground-strong);
 }
 %sliding-toggle label span::after {
-  background-color: rgb(var(--tone-gray-000));
+  background-color: var(--token-color-surface-primary);
 }
 %sliding-toggle label input:checked + span::before,
 %sliding-toggle-negative label input + span::before {
-  background-color: rgb(var(--tone-blue-500));
+  background-color: var(--token-color-foreground-action);
 }
 %sliding-toggle label span::before,
 %sliding-toggle-negative label input:checked + span::before {
-  background-color: rgb(var(--tone-gray-300));
+  background-color: var(--token-color-palette-neutral-300);
 }
diff --git a/ui/packages/consul-ui/app/components/tab-nav/skin.scss b/ui/packages/consul-ui/app/components/tab-nav/skin.scss
index 19561a54a9..b0604b1111 100644
--- a/ui/packages/consul-ui/app/components/tab-nav/skin.scss
+++ b/ui/packages/consul-ui/app/components/tab-nav/skin.scss
@@ -18,22 +18,22 @@
 }
 %tab-nav {
   /* %frame-transparent-something */
-  border-color: rgb(var(--tone-gray-200));
+  border-color: var(--token-color-surface-interactive-active);
 }
 %tab-button {
   @extend %with-transition-500;
   transition-property: background-color, border-color;
-  border-color: var(--transparent);
-  color: rgb(var(--tone-gray-500));
+  border-color: transparent;
+  color: var(--token-color-foreground-faint);
 }
 %tab-button-intent,
 %tab-button-active {
   /* %frame-gray-something */
-  background-color: rgb(var(--tone-gray-100));
+  background-color: var(--token-color-surface-strong);
 }
 %tab-button-intent {
-  border-color: rgb(var(--tone-gray-300));
+  border-color: var(--token-color-palette-neutral-300);
 }
 %tab-nav.animatable .selected a {
-  border-color: var(--transparent) !important;
+  border-color: transparent !important;
 }
diff --git a/ui/packages/consul-ui/app/components/table/index.scss b/ui/packages/consul-ui/app/components/table/index.scss
index 23a57f0a19..331cb9dcf9 100644
--- a/ui/packages/consul-ui/app/components/table/index.scss
+++ b/ui/packages/consul-ui/app/components/table/index.scss
@@ -21,7 +21,7 @@ table.consul-metadata-list tbody tr:hover {
 
 %table th span::after {
   @extend %with-info-circle-outline-mask, %as-pseudo;
-  color: rgb(var(--tone-gray-500));
+  color: var(--token-color-foreground-faint);
   margin-left: 4px;
 }
 %table tbody tr {
@@ -31,12 +31,12 @@ table.consul-metadata-list tbody tr:hover {
   padding: 0;
 }
 %table tbody tr:hover {
-  box-shadow: var(--decor-elevation-300);
+  box-shadow: var(--token-elevation-high-box-shadow);
 }
 
 %table td.folder::before {
   @extend %with-folder-outline-mask, %as-pseudo;
-  background-color: rgb(var(--tone-gray-300));
+  background-color: var(--token-color-palette-neutral-300);
   margin-top: 1px;
   margin-right: 5px;
 }
diff --git a/ui/packages/consul-ui/app/components/table/layout.scss b/ui/packages/consul-ui/app/components/table/layout.scss
index 4858bce801..c19d48b3ce 100644
--- a/ui/packages/consul-ui/app/components/table/layout.scss
+++ b/ui/packages/consul-ui/app/components/table/layout.scss
@@ -59,5 +59,5 @@
   font-weight: normal;
 }
 %table tbody td em {
-  color: rgb(var(--tone-gray-500));
+  color: var(--token-color-foreground-faint);
 }
diff --git a/ui/packages/consul-ui/app/components/table/skin.scss b/ui/packages/consul-ui/app/components/table/skin.scss
index 6e8ff93d7a..8cd8b5f4fa 100644
--- a/ui/packages/consul-ui/app/components/table/skin.scss
+++ b/ui/packages/consul-ui/app/components/table/skin.scss
@@ -3,15 +3,15 @@
   border-bottom: var(--decor-border-100);
 }
 %table th {
-  border-color: rgb(var(--tone-gray-300));
+  border-color: var(--token-color-palette-neutral-300);
 }
 %table td {
-  border-color: rgb(var(--tone-gray-200));
-  color: rgb(var(--tone-gray-500));
+  border-color: var(--token-color-surface-interactive-active);
+  color: var(--token-color-foreground-faint);
 }
 %table th,
 %table td strong {
-  color: rgb(var(--tone-gray-600));
+  color: var(--token-color-foreground-faint);
 }
 /* TODO: Add to native selector `tbody th` - will involve moving all
  * current th's to `thead th` and changing the templates
@@ -19,7 +19,7 @@
  */
 %table a,
 %tbody-th {
-  color: rgb(var(--tone-gray-900));
+  color: var(--token-color-foreground-strong);
 }
 %table td:first-child {
   @extend %tbody-th;
diff --git a/ui/packages/consul-ui/app/components/tabular-details/skin.scss b/ui/packages/consul-ui/app/components/tabular-details/skin.scss
index 0bd53b99ad..0ff486379c 100644
--- a/ui/packages/consul-ui/app/components/tabular-details/skin.scss
+++ b/ui/packages/consul-ui/app/components/tabular-details/skin.scss
@@ -6,22 +6,22 @@
   border: 0;
 }
 %tabular-detail {
-  border: 1px solid rgb(var(--tone-gray-300));
+  border: 1px solid var(--token-color-palette-neutral-300);
   border-radius: var(--decor-radius-100);
-  box-shadow: var(--decor-elevation-600);
+  box-shadow: var(--token-surface-high-box-shadow);
   margin-bottom: 20px;
 }
 %tabular-detail::before,
 %tabular-detail > div,
 %tabular-detail > label {
-  background-color: rgb(var(--tone-gray-000));
+  background-color: var(--token-color-surface-primary);
 }
 %tabular-detail > label::before {
   transform: rotate(180deg);
 }
 // this is here as its a fake border
 %tabular-detail::before {
-  background: rgb(var(--tone-gray-200));
+  background: var(--token-color-surface-interactive-active);
   content: '';
   display: block;
   height: 1px;
diff --git a/ui/packages/consul-ui/app/components/tabular-dl/skin.scss b/ui/packages/consul-ui/app/components/tabular-dl/skin.scss
index a48931cb3c..53e5c8cb6c 100644
--- a/ui/packages/consul-ui/app/components/tabular-dl/skin.scss
+++ b/ui/packages/consul-ui/app/components/tabular-dl/skin.scss
@@ -1,21 +1,21 @@
 %tabular-dl {
   > dt:last-of-type,
   > dd:last-of-type {
-    border-color: rgb(var(--tone-gray-300)) !important;
+    border-color: var(--token-color-palette-neutral-300) !important;
   }
   dt,
   dd {
-    border-color: rgb(var(--tone-gray-300)) !important;
-    color: rgb(var(--tone-gray-999)) !important;
+    border-color: var(--token-color-palette-neutral-300) !important;
+    color: var(--token-color-hashicorp-brand) !important;
   }
   dt {
     font-weight: var(--typo-weight-bold);
   }
   dd .copy-button button::before {
-    background-color: rgb(var(--tone-gray-999));
+    background-color: var(--token-color-hashicorp-brand);
   }
   dt.type + dd span::before {
     @extend %with-info-circle-outline-mask, %as-pseudo;
-    background-color: rgb(var(--tone-gray-500));
+    background-color: var(--token-color-foreground-faint);
   }
 }
diff --git a/ui/packages/consul-ui/app/components/tag-list/index.scss b/ui/packages/consul-ui/app/components/tag-list/index.scss
index 6ded1d9a3b..dc5346f14a 100644
--- a/ui/packages/consul-ui/app/components/tag-list/index.scss
+++ b/ui/packages/consul-ui/app/components/tag-list/index.scss
@@ -8,7 +8,7 @@ td.tags {
 %tag-list dt::before {
   @extend %with-tag-mask, %as-pseudo;
   color: inherit;
-  color: rgb(var(--tone-gray-500));
+  color: var(--token-color-foreground-faint);
 }
 %tag-list dd {
   @extend %csv-list;
diff --git a/ui/packages/consul-ui/app/components/tile/index.scss b/ui/packages/consul-ui/app/components/tile/index.scss
index 55ceb7b400..779349b031 100644
--- a/ui/packages/consul-ui/app/components/tile/index.scss
+++ b/ui/packages/consul-ui/app/components/tile/index.scss
@@ -1,4 +1,3 @@
-
 %with-tile {
   position: relative;
   width: var(--tile-size, 3rem);
@@ -23,15 +22,15 @@
   @extend %with-tile;
 }
 %with-leader-tile::before {
-  background-image: linear-gradient(135deg,
-    rgb(var(--strawberry-010)) 0%,
-    rgb(var(--strawberry-200)) 100%
+  background-image: linear-gradient(
+    135deg,
+    var(--token-color-consul-surface) 0%,
+    var(--token-color-consul-border) 100%
   );
-  border-color: rgb(var(--tone-gray-999) / 10%);
+  border-color: var(--token-color-border-faint);
 }
 %with-leader-tile::after {
   --icon-name: icon-star-fill;
   --icon-size: icon-700;
-  color: rgb(var(--strawberry-500));
+  color: var(--token-color-consul-brand);
 }
-
diff --git a/ui/packages/consul-ui/app/components/toggle-button/skin.scss b/ui/packages/consul-ui/app/components/toggle-button/skin.scss
index 7a05618ed3..eac488af2e 100644
--- a/ui/packages/consul-ui/app/components/toggle-button/skin.scss
+++ b/ui/packages/consul-ui/app/components/toggle-button/skin.scss
@@ -3,10 +3,10 @@
   cursor: pointer;
 }
 %toggle-button-intent {
-  background-color: rgb(var(--tone-gray-050));
+  background-color: var(--token-color-surface-strong);
 }
 %toggle-button-active {
-  background-color: rgb(var(--tone-gray-100));
+  background-color: var(--token-color-surface-strong);
 }
 %toggle-button:hover,
 %toggle-button:focus {
diff --git a/ui/packages/consul-ui/app/components/tooltip-panel/skin.scss b/ui/packages/consul-ui/app/components/tooltip-panel/skin.scss
index 7e65c62926..31cb584a31 100644
--- a/ui/packages/consul-ui/app/components/tooltip-panel/skin.scss
+++ b/ui/packages/consul-ui/app/components/tooltip-panel/skin.scss
@@ -6,9 +6,9 @@
   @extend %as-pseudo;
   width: 12px;
   height: 12px;
-  background-color: rgb(var(--tone-gray-000));
-  border-top: 1px solid rgb(var(--tone-gray-300));
-  border-right: 1px solid rgb(var(--tone-gray-300));
+  background-color: var(--token-color-surface-primary);
+  border-top: 1px solid var(--token-color-palette-neutral-300);
+  border-right: 1px solid var(--token-color-palette-neutral-300);
   transform: rotate(-45deg);
   position: absolute;
   left: 16px;
diff --git a/ui/packages/consul-ui/app/components/tooltip/index.scss b/ui/packages/consul-ui/app/components/tooltip/index.scss
index 333faed35f..034aa343bb 100644
--- a/ui/packages/consul-ui/app/components/tooltip/index.scss
+++ b/ui/packages/consul-ui/app/components/tooltip/index.scss
@@ -31,19 +31,19 @@
 
 %tooltip-bubble {
   & {
-    background-color: rgb(var(--tone-gray-700));
-    color: rgb(var(--tone-gray-000));
+    background-color: var(--token-color-foreground-faint);
+    color: var(--token-color-surface-primary);
   }
 }
 %tooltip-tail {
   --size: 5px;
   & {
-    color: rgb(var(--tone-gray-700));
+    color: var(--token-color-foreground-faint);
     width: calc(var(--size) * 2);
     height: calc(var(--size) * 2);
   }
   &::before {
-    border-color: var(--transparent);
+    border-color: transparent;
     border-style: solid;
   }
 }
diff --git a/ui/packages/consul-ui/app/components/topology-metrics/card/index.scss b/ui/packages/consul-ui/app/components/topology-metrics/card/index.scss
index 6148f41a75..5566f2b428 100644
--- a/ui/packages/consul-ui/app/components/topology-metrics/card/index.scss
+++ b/ui/packages/consul-ui/app/components/topology-metrics/card/index.scss
@@ -5,14 +5,14 @@
 #upstream-container .topology-metrics-card,
 #downstream-container .topology-metrics-card {
   display: block;
-  color: rgb(var(--tone-gray-700));
+  color: var(--token-color-foreground-faint);
   overflow: hidden;
-  background-color: rgb(var(--tone-gray-000));
+  background-color: var(--token-color-surface-primary);
   border-radius: var(--decor-radius-100);
   border: 1px solid;
   /* TODO: If this color is combined with the above */
   /* border property then the compressor removes the color */
-  border-color: rgb(var(--tone-gray-200));
+  border-color: var(--token-color-surface-interactive-active);
   p {
     padding: 12px 12px 0 12px;
     font-size: var(--typo-size-500);
@@ -28,7 +28,7 @@
       margin-right: 8px;
     }
     dd {
-      color: rgb(var(--tone-gray-700));
+      color: var(--token-color-foreground-faint);
     }
     span {
       margin-right: 8px;
@@ -56,23 +56,23 @@
     .partition dt::before,
     .nspace dt::before,
     .health dt::before {
-      --icon-color: rgb(var(--tone-gray-500));
+      --icon-color: var(--token-color-foreground-faint);
     }
     .passing::before {
       @extend %with-check-circle-fill-mask, %as-pseudo;
-      --icon-color: rgb(var(--tone-green-500));
+      --icon-color: var(--token-color-foreground-success);
     }
     .warning::before {
       @extend %with-alert-triangle-mask, %as-pseudo;
-      --icon-color: rgb(var(--tone-orange-500));
+      --icon-color: var(--token-color-foreground-warning);
     }
     .critical::before {
       @extend %with-cancel-square-fill-mask, %as-pseudo;
-      --icon-color: rgb(var(--tone-red-500));
+      --icon-color: var(--token-color-foreground-critical);
     }
     .empty::before {
       @extend %with-minus-square-fill-mask, %as-pseudo;
-      --icon-color: rgb(var(--tone-gray-500));
+      --icon-color: var(--token-color-foreground-faint);
     }
   }
   .details {
@@ -96,7 +96,7 @@
       span::before {
         margin-right: 0px;
         @extend %with-union-mask, %as-pseudo;
-        --icon-color: rgb(var(--tone-gray-500));
+        --icon-color: var(--token-color-foreground-faint);
       }
       dl:first-child {
         grid-area: partition;
diff --git a/ui/packages/consul-ui/app/components/topology-metrics/popover/index.scss b/ui/packages/consul-ui/app/components/topology-metrics/popover/index.scss
index 230bfa1144..2468d4f4a6 100644
--- a/ui/packages/consul-ui/app/components/topology-metrics/popover/index.scss
+++ b/ui/packages/consul-ui/app/components/topology-metrics/popover/index.scss
@@ -2,7 +2,7 @@
   > button {
     position: absolute;
     transform: translate(-50%, -50%);
-    background-color: rgb(var(--tone-gray-000));
+    background-color: var(--token-color-surface-primary);
     padding: 1px 1px;
     &:hover {
       cursor: pointer;
@@ -21,16 +21,16 @@
   &.deny > button::before,
   &.deny .tippy-arrow::after {
     @extend %with-cancel-square-fill-mask, %as-pseudo;
-    --icon-color: rgb(var(--tone-red-500));
+    --icon-color: var(--token-color-foreground-critical);
   }
   &.l7 > button::before,
   &.l7 .tippy-arrow::after {
     @extend %with-layers-mask, %as-pseudo;
-    --icon-color: rgb(var(--tone-gray-300));
+    --icon-color: var(--token-color-palette-neutral-300);
   }
   &.not-defined > button::before,
   &.not-defined .tippy-arrow::after {
     @extend %with-alert-triangle-mask, %as-pseudo;
-    --icon-color: rgb(var(--tone-yellow-500));
+    --icon-color: var(--token-color-vault-brand);
   }
 }
diff --git a/ui/packages/consul-ui/app/components/topology-metrics/series/skin.scss b/ui/packages/consul-ui/app/components/topology-metrics/series/skin.scss
index abd3ed5f2e..9c111bccf3 100644
--- a/ui/packages/consul-ui/app/components/topology-metrics/series/skin.scss
+++ b/ui/packages/consul-ui/app/components/topology-metrics/series/skin.scss
@@ -8,18 +8,18 @@
     font-size: 0.875em;
     line-height: 1.5em;
     font-weight: normal;
-    border: 1px solid rgb(var(--tone-gray-300));
+    border: 1px solid var(--token-color-palette-neutral-300);
     background: #fff;
     border-radius: 2px;
     box-sizing: border-box;
-    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.05), 0px 4px 4px rgba(0, 0, 0, 0.1);
+    box-shadow: var(--token-elevation-higher-box-shadow);
 
     .sparkline-time {
       padding: 8px 10px;
       font-weight: bold;
       font-size: 14px;
       color: #000;
-      border-bottom: 1px solid rgb(var(--tone-gray-200));
+      border-bottom: 1px solid var(--token-color-surface-interactive-active);
       margin-bottom: 4px;
       text-align: center;
     }
@@ -31,7 +31,7 @@
     }
 
     .sparkline-tt-sum {
-      border-top: 1px solid rgb(var(--tone-gray-200));
+      border-top: 1px solid var(--token-color-surface-interactive-active);
       margin-top: 4px;
       padding: 8px 10px 0 10px;
     }
@@ -58,7 +58,7 @@
     height: 12px;
     left: 15px;
     bottom: -7px;
-    border: 1px solid rgb(var(--tone-gray-300));
+    border: 1px solid var(--token-color-palette-neutral-300);
     border-top: 0;
     border-left: 0;
     background: #fff;
@@ -75,7 +75,7 @@
   }
 
   h3 {
-    color: rgb(var(--tone-gray-900));
+    color: var(--token-color-foreground-strong);
     font-size: 16px;
   }
 
@@ -84,16 +84,16 @@
       font-weight: 600;
     }
     dd {
-      color: rgb(var(--tone-gray-500));
+      color: var(--token-color-foreground-faint);
     }
   }
 }
 
 .sparkline-key-link {
-  color: rgb(var(--tone-gray-500));
+  color: var(--token-color-foreground-faint);
 }
 .sparkline-key-link:hover {
-  color: rgb(var(--tone-blue-500));
+  color: var(--token-color-foreground-action);
 }
 #metrics-container:hover .sparkline-key-link::before {
   @extend %with-info-circle-fill-mask, %as-pseudo;
diff --git a/ui/packages/consul-ui/app/components/topology-metrics/skin.scss b/ui/packages/consul-ui/app/components/topology-metrics/skin.scss
index fc819a6300..c40c6c43fa 100644
--- a/ui/packages/consul-ui/app/components/topology-metrics/skin.scss
+++ b/ui/packages/consul-ui/app/components/topology-metrics/skin.scss
@@ -1,7 +1,7 @@
 .topology-notices {
   button {
     @extend %button;
-    color: rgb(var(--tone-blue-500));
+    color: var(--token-color-foreground-action);
   }
   button::before {
     @extend %as-pseudo;
@@ -12,7 +12,7 @@
   }
 }
 .topology-container {
-  color: rgb(var(--tone-gray-700));
+  color: var(--token-color-foreground-faint);
 }
 
 // Columns/Containers & Lines
@@ -23,35 +23,35 @@
   border: 1px solid;
   /* TODO: If this color is combined with the above */
   /* border property then the compressor removes the color */
-  border-color: rgb(var(--tone-gray-200));
+  border-color: var(--token-color-surface-interactive-active);
 }
 #downstream-container,
 #upstream-container {
-  background-color: rgb(var(--tone-gray-100));
+  background-color: var(--token-color-surface-strong);
 }
 #downstream-container > div:first-child {
   display: inline-flex;
   span::before {
     @extend %with-info-circle-outline-mask, %as-pseudo;
-    background-color: rgb(var(--tone-gray-500));
+    background-color: var(--token-color-foreground-faint);
   }
 }
 
 // Metrics Container
 #metrics-container {
   div:first-child {
-    background-color: rgb(var(--tone-gray-000));
+    background-color: var(--token-color-surface-primary);
   }
   .link {
-    background-color: rgb(var(--tone-gray-100));
+    background-color: var(--token-color-surface-strong);
     a {
-      color: rgb(var(--tone-gray-700));
+      color: var(--token-color-foreground-faint);
     }
     a::before {
-      background-color: rgb(var(--tone-gray-500));
+      background-color: var(--token-color-foreground-faint);
     }
     a:hover {
-      color: rgb(var(--color-action));
+      color: var(--token-color-foreground-action);
     }
     .metrics-link::before {
       @extend %with-exit-mask, %as-pseudo;
@@ -66,19 +66,19 @@
 #downstream-lines svg,
 #upstream-lines svg {
   path {
-    fill: var(--transparent);
+    fill: transparent;
   }
   circle {
-    fill: rgb(var(--tone-gray-000));
+    fill: var(--token-color-surface-primary);
   }
   .allow-arrow {
-    fill: rgb(var(--tone-gray-300));
+    fill: var(--token-color-palette-neutral-300);
     stroke-linejoin: round;
   }
   path,
   .allow-dot,
   .allow-arrow {
-    stroke: rgb(var(--tone-gray-300));
+    stroke: var(--token-color-palette-neutral-300);
     stroke-width: 2;
   }
   path[data-permission='not-defined'],
@@ -86,15 +86,15 @@
     stroke-dasharray: 4;
   }
   path[data-permission='deny'] {
-    stroke: rgb(var(--tone-red-500));
+    stroke: var(--token-color-foreground-critical);
   }
   .deny-dot {
-    stroke: rgb(var(--tone-red-500));
+    stroke: var(--token-color-foreground-critical);
     stroke-width: 2;
   }
   .deny-arrow {
-    fill: rgb(var(--tone-red-500));
-    stroke: rgb(var(--tone-red-500));
+    fill: var(--token-color-foreground-critical);
+    stroke: var(--token-color-foreground-critical);
     stroke-linejoin: round;
   }
 }
diff --git a/ui/packages/consul-ui/app/components/topology-metrics/stats/index.scss b/ui/packages/consul-ui/app/components/topology-metrics/stats/index.scss
index 58943e1927..9005502e3c 100644
--- a/ui/packages/consul-ui/app/components/topology-metrics/stats/index.scss
+++ b/ui/packages/consul-ui/app/components/topology-metrics/stats/index.scss
@@ -5,7 +5,7 @@
   justify-content: space-between;
   align-items: stretch;
   width: 100%;
-  border-top: 1px solid rgb(var(--tone-gray-200));
+  border-top: 1px solid var(--token-color-surface-interactive-active);
   dl {
     display: flex;
     padding-bottom: 12px;
@@ -15,7 +15,7 @@
     line-height: 1.5em !important;
   }
   dd {
-    color: rgb(var(--tone-gray-400)) !important;
+    color: var(--token-color-foreground-disabled) !important;
   }
   span {
     padding-bottom: 12px;
diff --git a/ui/packages/consul-ui/app/components/topology-metrics/status/index.scss b/ui/packages/consul-ui/app/components/topology-metrics/status/index.scss
index fdf7f23fbf..b9f87fdab6 100644
--- a/ui/packages/consul-ui/app/components/topology-metrics/status/index.scss
+++ b/ui/packages/consul-ui/app/components/topology-metrics/status/index.scss
@@ -2,14 +2,14 @@
 .topology-metrics-status-loader {
   font-weight: normal;
   font-size: 0.875rem;
-  color: rgb(var(--tone-gray-500));
+  color: var(--token-color-foreground-faint);
   text-align: center;
   margin: 0 auto !important;
   display: block;
 
   span::before {
     @extend %with-info-circle-outline-mask, %as-pseudo;
-    background-color: rgb(var(--tone-gray-500));
+    background-color: var(--token-color-foreground-faint);
   }
 }
 
diff --git a/ui/packages/consul-ui/app/modifiers/aria-menu.mdx b/ui/packages/consul-ui/app/modifiers/aria-menu.mdx
index 753922f7f5..167e71cf6b 100644
--- a/ui/packages/consul-ui/app/modifiers/aria-menu.mdx
+++ b/ui/packages/consul-ui/app/modifiers/aria-menu.mdx
@@ -56,9 +56,9 @@ In the example below, the Before Trigger and After Trigger don't do anything, th
       style={{style-map
         (array 'position' 'absolute')
         (array 'padding' '1rem')
-        (array 'border' '1px solid rgb(var(--tone-gray-500))')
+        (array 'border' '1px solid var(--token-color-foreground-faint)')
         (array 'top' '2rem')
-        (array 'background-color' 'rgb(var(--tone-gray-000))')
+        (array 'background-color' 'var(--token-color-surface-primary)')
       }}
       role="menu"
       aria-labelledby="trigger"
diff --git a/ui/packages/consul-ui/app/modifiers/css-prop.mdx b/ui/packages/consul-ui/app/modifiers/css-prop.mdx
index 2ddf1bead5..f638fb6e1e 100644
--- a/ui/packages/consul-ui/app/modifiers/css-prop.mdx
+++ b/ui/packages/consul-ui/app/modifiers/css-prop.mdx
@@ -5,9 +5,9 @@ Get the value for a single specific CSS Property from the modified element.
 
 ```hbs preview-template
 <div
-  {{css-prop '--red-500' returns=(set this 'red')}}
+  {{css-prop '--token-color-foreground-critical' returns=(set this 'red')}}
 >
-  <code>--red-500: {{this.red}}</code>
+  <code>--token-color-foreground-critical: {{this.red}}</code>
 </div>
 ```
 
diff --git a/ui/packages/consul-ui/app/styles/base/color/README.mdx b/ui/packages/consul-ui/app/styles/base/color/README.mdx
deleted file mode 100644
index 414514316d..0000000000
--- a/ui/packages/consul-ui/app/styles/base/color/README.mdx
+++ /dev/null
@@ -1,81 +0,0 @@
-# Colors
-
-All colors for the immediate future should _mostly_ use the following `tone`
-CSS properties, unless:
-
-1. We get around to eventually adding semantic colors names (or adding something else) in which case these docs should be updated.
-2. You are absolutely sure the color you want should never be changed by a theme. These should be very very few and far between so even if we get that wrong it should be easy to update.
-
-`tones` should always using the following form:
-
-```css
-property: rgb(var(--tone-gray-500));
-```
-
-In other words always use `rgb` this gives us the flexibility to easily use these variables with alpha if we ever need to.
-
-```css
-property: rgb(var(--tone-gray-500) / 50);
-```
-
-Currently, alphas are mainly used for shadows. Please avoid the use of alphas for adjusting hues as they can produce unpredictable results. We should be utilizing our pre-defined color palette or adding new colors to it with proper RGB values. If you do need to add a color with alpha, please include a code comment or a self-comment explaining the use case.
-
-Lastly, there is currently one non-color alias group which is `--tone-brand` which is a group of our current brand colors.
-
-
-## %theme-light (default)
-
-```hbs preview-template
-<ul
-  {{css-props (set this 'tones')
-    prefix='tone-'
-    group='[a-z\-]'
-  }}
->
-{{#each-in this.tones as |prop value|}}
-  <li>
-    {{#each-in value as |prop value|}}
-    <figure
-      {{with-copyable (concat "rgb(var(" prop "));")}}
-      style={{concat "background-color: rgb(var(" prop "))"}}
-    >
-      <figcaption>{{prop}}</figcaption>
-    </figure>
-    {{/each-in}}
-  </li>
-{{/each-in}}
-</ul>
-```
-
-## %theme-dark
-
-If you need to build something (like a component or view) which begins in 'dark mode', you will need to switch your coloring and use
-
-```css
-%component-name {
-  @extend %theme-dark;
-}
-```
-
-```hbs preview-template
-<ul
-  {{css-props (set this 'tones')
-    prefix='tone-'
-    group='[a-z\-]'
-  }}
->
-{{#each-in this.tones as |prop value|}}
-  <li>
-    {{#each-in value as |prop value|}}
-    <figure
-      {{with-copyable (concat "rgb(var(" prop "));")}}
-      style={{concat "background-color: rgb(var(" prop "))"}}
-    >
-      <figcaption>{{prop}}</figcaption>
-    </figure>
-    {{/each-in}}
-  </li>
-{{/each-in}}
-</ul>
-```
-
diff --git a/ui/packages/consul-ui/app/styles/base/color/base-variables.scss b/ui/packages/consul-ui/app/styles/base/color/base-variables.scss
deleted file mode 100644
index e88817cda7..0000000000
--- a/ui/packages/consul-ui/app/styles/base/color/base-variables.scss
+++ /dev/null
@@ -1,190 +0,0 @@
-:root {
-  /* vault */
-  --steel-050: 245 246 247;
-  --steel-100: 225 228 231;
-  --steel-200: 205 211 215;
-  --steel-300: 185 193 199;
-  --steel-400: 165 176 183;
-  --steel-500: 145 159 168;
-  --steel-600: 119 131 138;
-  --steel-700: 93 102 107;
-  --steel-800: 66 73 77;
-  --steel-900: 40 44 46;
-
-  /* vault refresh */
-  --lemon-050: 255 216 20;
-  --lemon-100: 255 216 20;
-  --lemon-200: 255 216 20;
-  --lemon-300: 255 216 20;
-  --lemon-400: 255 216 20;
-  --lemon-500: 255 216 20;
-  --lemon-600: 255 216 20;
-  --lemon-700: 255 216 20;
-  --lemon-800: 255 216 20;
-  --lemon-900: 255 216 20;
-
-  /* consul */
-  --magenta-050: 249 235 242;
-  --magenta-100: 239 196 216;
-  --magenta-200: 229 158 190;
-  --magenta-300: 218 119 164;
-  --magenta-400: 208 80 138;
-  --magenta-500: 198 42 113;
-  --magenta-600: 158 33 89;
-  --magenta-700: 125 26 71;
-  --magenta-800: 90 20 52;
-  --magenta-900: 54 12 31;
-
-  /* consul refresh */
-  --strawberry-010: 255 242 248;
-  --strawberry-050: 255 242 248;
-  --strawberry-100: 248 217 231;
-  --strawberry-200: 248 217 231;
-  --strawberry-300: 224 126 172;
-  --strawberry-400: 224 126 172;
-  --strawberry-500: 202 33 113;
-  --strawberry-600: 142 19 74;
-  --strawberry-700: 142 19 74;
-  --strawberry-800: 101 13 52;
-  --strawberry-900: 101 13 52;
-
-  /* vagrant */
-  --cobalt-050: 240 245 255;
-  --cobalt-100: 191 212 255;
-  --cobalt-200: 138 177 255;
-  --cobalt-300: 91 146 255;
-  --cobalt-400: 56 122 255;
-  --cobalt-500: 21 99 255;
-  --cobalt-600: 15 79 209;
-  --cobalt-700: 14 64 163;
-  --cobalt-800: 10 45 116;
-  --cobalt-900: 6 27 70;
-
-  /* terraform */
-  --indigo-050: 238 237 252;
-  --indigo-100: 213 210 247;
-  --indigo-200: 174 167 242;
-  --indigo-300: 141 131 237;
-  --indigo-400: 117 104 232;
-  --indigo-500: 92 78 229;
-  --indigo-600: 76 64 188;
-  --indigo-700: 59 50 146;
-  --indigo-800: 42 36 105;
-  --indigo-900: 26 22 63;
-
-  /* nomad */
-  --teal-050: 235 248 243; /*#c3ecdc*/
-  --teal-100: 195 236 220; /*#e1e4e7*/
-  --teal-200: 155 223 197;
-  --teal-300: 116 211 174;
-  --teal-400: 76 198 151;
-  --teal-500: 37 186 129;
-  --teal-600: 31 153 106;
-  --teal-700: 24 119 83;
-  --teal-800: 17 85 59;
-  --teal-900: 11 51 36;
-
-  /* packer */
-  --cyan-050: 231 248 255;
-  --cyan-100: 185 236 255;
-  --cyan-200: 139 224 255;
-  --cyan-300: 92 211 255;
-  --cyan-400: 46 199 255;
-  --cyan-500: 0 187 255;
-  --cyan-600: 0 159 217;
-  --cyan-700: 0 119 163;
-  --cyan-800: 0 85 116;
-  --cyan-900: 0 51 70;
-
-  /* ui */
-
-  /* removed to prevent confusion
-  --gray-1: #191a1c;
-  --gray-2: #323538;
-  --gray-3: #4c4f54;
-  --gray-4: #656a70;
-  --gray-5: #7f858d;
-  --gray-6: #9a9ea5;
-  --gray-7: #b4b8bc;
-  --gray-8: #d0d2d5;
-  --gray-9: #ebecee;
-  --gray-10: #f3f4f6;
-*/
-
-  --gray-010: 251 251 252;
-  --gray-050: 247 248 250;
-  --gray-100: 235 238 242;
-  --gray-150: 235 238 242;
-  --gray-200: 220 224 230;
-  --gray-300: 186 193 204;
-  --gray-400: 142 150 163;
-  --gray-500: 111 118 130;
-  --gray-600: 98 104 115;
-  --gray-700: 82 87 97;
-  --gray-800: 55 58 66;
-  --gray-850: 44 46 51;
-  --gray-900: 31 33 36;
-  --gray-950: 21 23 28;
-
-  /* status */
-  --green-050: 236 247 237;
-  --green-100: 198 233 201;
-  --green-200: 160 219 165;
-  --green-300: 122 204 129;
-  --green-400: 84 190 93;
-  --green-500: 46 176 57;
-  --green-600: 38 145 47;
-  --green-700: 30 113 37;
-  --green-800: 21 80 26;
-  --green-900: 13 48 16;
-
-  --blue-010: 251 252 255;
-  --blue-050: 240 245 255;
-  --blue-100: 191 212 255;
-  --blue-200: 138 177 255;
-  --blue-300: 91 146 255;
-  --blue-400: 56 122 255;
-  --blue-500: 21 99 255;
-  --blue-600: 15 79 209;
-  --blue-700: 14 64 163;
-  --blue-800: 10 45 116;
-  --blue-900: 6 27 70;
-
-  --red-010: 253 250 251;
-  --red-050: 249 236 238;
-  --red-100: 239 199 204;
-  --red-200: 229 162 170;
-  --red-300: 219 125 136;
-  --red-400: 209 88 102;
-  --red-500: 199 52 69;
-  --red-600: 163 43 57;
-  --red-700: 127 34 44;
-  --red-800: 91 24 32;
-  --red-900: 55 15 19;
-
-  --orange-050: 254 244 236; /*#fa8f37*/
-  --orange-100: 253 224 200;
-  --orange-200: 252 204 164;
-  --orange-300: 251 183 127;
-  --orange-400: 250 163 91;
-  --orange-500: 250 143 55;
-  --orange-600: 205 118 46;
-  --orange-700: 160 92 35;
-  --orange-800: 114 65 25;
-  --orange-900: 69 39 15;
-
-  --yellow-050: 255 251 237; /*#fa8f37;*/
-  --yellow-100: 253 238 186;
-  --yellow-200: 252 228 140;
-  --yellow-300: 251 217 94;
-  --yellow-400: 250 206 48;
-  --yellow-500: 250 196 2;
-  --yellow-600: 205 161 2;
-  --yellow-700: 160 125 2;
-  --yellow-800: 114 90 1;
-  --yellow-900: 69 54 1;
-
-  --transparent: transparent;
-  --white: 255 255 255;
-  --black: 0 0 0;
-}
diff --git a/ui/packages/consul-ui/app/styles/base/color/hex-variables.scss b/ui/packages/consul-ui/app/styles/base/color/hex-variables.scss
deleted file mode 100644
index d2f7659e10..0000000000
--- a/ui/packages/consul-ui/app/styles/base/color/hex-variables.scss
+++ /dev/null
@@ -1,178 +0,0 @@
-:root {
-  /* vault */
-  --steel-050: #f5f6f7;
-  --steel-100: #e1e4e7;
-  --steel-200: #cdd3d7;
-  --steel-300: #b9c1c7;
-  --steel-400: #a5b0b7;
-  --steel-500: #919fa8;
-  --steel-600: #77838a;
-  --steel-700: #5d666b;
-  --steel-800: #42494d;
-  --steel-900: #282c2e;
-
-  /* consul */
-  --magenta-050: #f9ebf2;
-  --magenta-100: #efc4d8;
-  --magenta-200: #e59ebe;
-  --magenta-300: #da77a4;
-  --magenta-400: #d0508a;
-  --magenta-500: #c62a71;
-  --magenta-600: #9e2159;
-  --magenta-700: #7d1a47;
-  --magenta-800: #5a1434;
-  --magenta-900: #360c1f;
-
-  /* consul refresh */
-  --strawberry-010: #fff2f8;
-  --strawberry-050: #fff2f8;
-  --strawberry-100: #f8d9e7;
-  --strawberry-200: #f8d9e7;
-  --strawberry-300: #e07eac;
-  --strawberry-400: #e07eac;
-  --strawberry-500: #ca2171;
-  --strawberry-600: #8e134a;
-  --strawberry-700: #8e134a;
-  --strawberry-800: #650d34;
-  --strawberry-900: #650d34;
-
-  /* vagrant */
-  --cobalt-050: #f0f5ff;
-  --cobalt-100: #bfd4ff;
-  --cobalt-200: #8ab1ff;
-  --cobalt-300: #5b92ff;
-  --cobalt-400: #387aff;
-  --cobalt-500: #1563ff;
-  --cobalt-600: #0f4fd1;
-  --cobalt-700: #0e40a3;
-  --cobalt-800: #0a2d74;
-  --cobalt-900: #061b46;
-
-  /* terraform */
-  --indigo-050: #eeedfc;
-  --indigo-100: #d5d2f7;
-  --indigo-200: #aea7f2;
-  --indigo-300: #8d83ed;
-  --indigo-400: #7568e8;
-  --indigo-500: #5c4ee5;
-  --indigo-600: #4c40bc;
-  --indigo-700: #3b3292;
-  --indigo-800: #2a2469;
-  --indigo-900: #1a163f;
-
-  /* nomad */
-  --teal-050: #ebf8f3;/*#c3ecdc*/;
-  --teal-100: #c3ecdc;/*#e1e4e7*/;
-  --teal-200: #9bdfc5;
-  --teal-300: #74d3ae;
-  --teal-400: #4cc697;
-  --teal-500: #25ba81;
-  --teal-600: #1f996a;
-  --teal-700: #187753;
-  --teal-800: #11553b;
-  --teal-900: #0b3324;
-
-  /* packer */
-  --cyan-050: #e7f8ff;
-  --cyan-100: #b9ecff;
-  --cyan-200: #8be0ff;
-  --cyan-300: #5cd3ff;
-  --cyan-400: #2ec7ff;
-  --cyan-500: #00bbff;
-  --cyan-600: #009fd9;
-  --cyan-700: #0077a3;
-  --cyan-800: #005574;
-  --cyan-900: #003346;
-
-/* ui */
-
-/* removed to prevent confusion
-  --gray-1: #191a1c;
-  --gray-2: #323538;
-  --gray-3: #4c4f54;
-  --gray-4: #656a70;
-  --gray-5: #7f858d;
-  --gray-6: #9a9ea5;
-  --gray-7: #b4b8bc;
-  --gray-8: #d0d2d5;
-  --gray-9: #ebecee;
-  --gray-10: #f3f4f6;
-*/
-
-  --gray-010: #fbfbfc;
-  --gray-050: #f7f8fa;
-  --gray-100: #ebeef2;
-  --gray-150: #ebeef2;
-  --gray-200: #dce0e6;
-  --gray-300: #bac1cc;
-  --gray-400: #8e96a3;
-  --gray-500: #6f7682;
-  --gray-600: #626873;
-  --gray-700: #525761;
-  --gray-800: #373a42;
-  --gray-850: #2c2e33;
-  --gray-900: #1f2124;
-  --gray-950: #15171c;
-
-/* status */
-  --green-050: #ecf7ed;
-  --green-100: #c6e9c9;
-  --green-200: #a0dba5;
-  --green-300: #7acc81;
-  --green-400: #54be5d;
-  --green-500: #2eb039;
-  --green-600: #26912f;
-  --green-700: #1e7125;
-  --green-800: #15501a;
-  --green-900: #0d3010;
-
-  --blue-010: #fbfcff;
-  --blue-050: #f0f5ff;
-  --blue-100: #bfd4ff;
-  --blue-200: #8ab1ff;
-  --blue-300: #5b92ff;
-  --blue-400: #387aff;
-  --blue-500: #1563ff;
-  --blue-600: #0f4fd1;
-  --blue-700: #0e40a3;
-  --blue-800: #0a2d74;
-  --blue-900: #061b46;
-
-  --red-010: #fdfafb;
-  --red-050: #f9ecee;
-  --red-100: #efc7cc;
-  --red-200: #e5a2aa;
-  --red-300: #db7d88;
-  --red-400: #d15866;
-  --red-500: #c73445;
-  --red-600: #a32b39;
-  --red-700: #7f222c;
-  --red-800: #5b1820;
-  --red-900: #370f13;
-
-  --orange-050: #fef4ec;/*#fa8f37*/;
-  --orange-100: #fde0c8;
-  --orange-200: #fccca4;
-  --orange-300: #fbb77f;
-  --orange-400: #faa35b;
-  --orange-500: #fa8f37;
-  --orange-600: #cd762e;
-  --orange-700: #a05c23;
-  --orange-800: #724119;
-  --orange-900: #45270f;
-
-  --yellow-050: #fffbed;/*#fa8f37;*/
-  --yellow-100: #fdeeba;
-  --yellow-200: #fce48c;
-  --yellow-300: #fbd95e;
-  --yellow-400: #face30;
-  --yellow-500: #fac402;
-  --yellow-600: #cda102;
-  --yellow-700: #a07d02;
-  --yellow-800: #725a01;
-  --yellow-900: #453601;
-
-  --transparent: transparent;
-  --white: #fff;
-  --black: #000;
-}
diff --git a/ui/packages/consul-ui/app/styles/base/color/index.scss b/ui/packages/consul-ui/app/styles/base/color/index.scss
index decc200b41..ba12227c0a 100644
--- a/ui/packages/consul-ui/app/styles/base/color/index.scss
+++ b/ui/packages/consul-ui/app/styles/base/color/index.scss
@@ -1,7 +1,2 @@
-/*@import './hex-variables';*/
-@import './base-variables';
-/* load in the ui theme */
 @import './ui/index';
-/* other themes should be added at a project level */
 @import './semantic-variables';
-/*@import './theme-placeholders';*/
diff --git a/ui/packages/consul-ui/app/styles/base/color/lemon/frame-placeholders.scss b/ui/packages/consul-ui/app/styles/base/color/lemon/frame-placeholders.scss
deleted file mode 100644
index e69de29bb2..0000000000
diff --git a/ui/packages/consul-ui/app/styles/base/color/lemon/index.scss b/ui/packages/consul-ui/app/styles/base/color/lemon/index.scss
deleted file mode 100644
index e62440c7cb..0000000000
--- a/ui/packages/consul-ui/app/styles/base/color/lemon/index.scss
+++ /dev/null
@@ -1,5 +0,0 @@
-@import './themes/light';
-@import './themes/dark';
-@import './themes/light-high-contrast';
-@import './themes/dark-high-contrast';
-@import './frame-placeholders';
diff --git a/ui/packages/consul-ui/app/styles/base/color/lemon/themes/dark-high-contrast.scss b/ui/packages/consul-ui/app/styles/base/color/lemon/themes/dark-high-contrast.scss
deleted file mode 100644
index d57568f4a9..0000000000
--- a/ui/packages/consul-ui/app/styles/base/color/lemon/themes/dark-high-contrast.scss
+++ /dev/null
@@ -1,17 +0,0 @@
-%theme-dark-high-contrast {
-  --tone-lemon-000: var(--white);
-  --tone-lemon-050: var(--lemon-050);
-  --tone-lemon-100: var(--lemon-100);
-  --tone-lemon-150: var(--lemon-150);
-  --tone-lemon-200: var(--lemon-200);
-  --tone-lemon-300: var(--lemon-300);
-  --tone-lemon-400: var(--lemon-400);
-  --tone-lemon-500: var(--lemon-500);
-  --tone-lemon-600: var(--lemon-600);
-  --tone-lemon-700: var(--lemon-700);
-  --tone-lemon-800: var(--lemon-800);
-  --tone-lemon-850: var(--lemon-850);
-  --tone-lemon-900: var(--lemon-900);
-  --tone-lemon-950: var(--lemon-950);
-  --tone-lemon-999: var(--black);
-}
diff --git a/ui/packages/consul-ui/app/styles/base/color/lemon/themes/dark.scss b/ui/packages/consul-ui/app/styles/base/color/lemon/themes/dark.scss
deleted file mode 100644
index be9f8551e5..0000000000
--- a/ui/packages/consul-ui/app/styles/base/color/lemon/themes/dark.scss
+++ /dev/null
@@ -1,17 +0,0 @@
-%theme-dark {
-  --tone-lemon-000: var(--white);
-  --tone-lemon-050: var(--lemon-050);
-  --tone-lemon-100: var(--lemon-100);
-  --tone-lemon-150: var(--lemon-150);
-  --tone-lemon-200: var(--lemon-200);
-  --tone-lemon-300: var(--lemon-300);
-  --tone-lemon-400: var(--lemon-400);
-  --tone-lemon-500: var(--lemon-500);
-  --tone-lemon-600: var(--lemon-600);
-  --tone-lemon-700: var(--lemon-700);
-  --tone-lemon-800: var(--lemon-800);
-  --tone-lemon-850: var(--lemon-850);
-  --tone-lemon-900: var(--lemon-900);
-  --tone-lemon-950: var(--lemon-950);
-  --tone-lemon-999: var(--black);
-}
diff --git a/ui/packages/consul-ui/app/styles/base/color/lemon/themes/light-high-contrast.scss b/ui/packages/consul-ui/app/styles/base/color/lemon/themes/light-high-contrast.scss
deleted file mode 100644
index 5a7fac0f04..0000000000
--- a/ui/packages/consul-ui/app/styles/base/color/lemon/themes/light-high-contrast.scss
+++ /dev/null
@@ -1,17 +0,0 @@
-%theme-light-high-contrast {
-  --tone-lemon-000: var(--white);
-  --tone-lemon-050: var(--lemon-050);
-  --tone-lemon-100: var(--lemon-100);
-  --tone-lemon-150: var(--lemon-150);
-  --tone-lemon-200: var(--lemon-200);
-  --tone-lemon-300: var(--lemon-300);
-  --tone-lemon-400: var(--lemon-400);
-  --tone-lemon-500: var(--lemon-500);
-  --tone-lemon-600: var(--lemon-600);
-  --tone-lemon-700: var(--lemon-700);
-  --tone-lemon-800: var(--lemon-800);
-  --tone-lemon-850: var(--lemon-850);
-  --tone-lemon-900: var(--lemon-900);
-  --tone-lemon-950: var(--lemon-950);
-  --tone-lemon-999: var(--black);
-}
diff --git a/ui/packages/consul-ui/app/styles/base/color/lemon/themes/light.scss b/ui/packages/consul-ui/app/styles/base/color/lemon/themes/light.scss
deleted file mode 100644
index 4e937d5cf5..0000000000
--- a/ui/packages/consul-ui/app/styles/base/color/lemon/themes/light.scss
+++ /dev/null
@@ -1,17 +0,0 @@
-%theme-light {
-  --tone-lemon-000: var(--white);
-  --tone-lemon-050: var(--lemon-050);
-  --tone-lemon-100: var(--lemon-100);
-  --tone-lemon-150: var(--lemon-150);
-  --tone-lemon-200: var(--lemon-200);
-  --tone-lemon-300: var(--lemon-300);
-  --tone-lemon-400: var(--lemon-400);
-  --tone-lemon-500: var(--lemon-500);
-  --tone-lemon-600: var(--lemon-600);
-  --tone-lemon-700: var(--lemon-700);
-  --tone-lemon-800: var(--lemon-800);
-  --tone-lemon-850: var(--lemon-850);
-  --tone-lemon-900: var(--lemon-900);
-  --tone-lemon-950: var(--lemon-950);
-  --tone-lemon-999: var(--black);
-}
diff --git a/ui/packages/consul-ui/app/styles/base/color/magenta/frame-placeholders.scss b/ui/packages/consul-ui/app/styles/base/color/magenta/frame-placeholders.scss
deleted file mode 100644
index 9e380b4b32..0000000000
--- a/ui/packages/consul-ui/app/styles/base/color/magenta/frame-placeholders.scss
+++ /dev/null
@@ -1,13 +0,0 @@
-%frame-magenta-300 {
-  @extend %frame-border-000;
-  background-color: rgb(var(--tone-gray-000));
-  border-color: rgb(var(--tone-magenta-600));
-  color: rgb(var(--tone-magenta-600));
-}
-%frame-magenta-800 {
-  @extend %frame-border-000;
-  background-color: rgb(var(--tone-magenta-500));
-  border-color: rgb(var(--tone-magenta-800));
-  color: rgb(var(--tone-gray-000));
-}
-
diff --git a/ui/packages/consul-ui/app/styles/base/color/magenta/index.scss b/ui/packages/consul-ui/app/styles/base/color/magenta/index.scss
deleted file mode 100644
index 3948997e77..0000000000
--- a/ui/packages/consul-ui/app/styles/base/color/magenta/index.scss
+++ /dev/null
@@ -1,6 +0,0 @@
-@import './themes/light';
-@import './themes/dark';
-@import './themes/light-high-contrast';
-@import './themes/dark-high-contrast';
-@import './frame-placeholders';
-
diff --git a/ui/packages/consul-ui/app/styles/base/color/magenta/themes/dark-high-contrast.scss b/ui/packages/consul-ui/app/styles/base/color/magenta/themes/dark-high-contrast.scss
deleted file mode 100644
index 53a1d2077f..0000000000
--- a/ui/packages/consul-ui/app/styles/base/color/magenta/themes/dark-high-contrast.scss
+++ /dev/null
@@ -1,18 +0,0 @@
-%theme-dark-low-contrast {
-  --tone-magenta-000: var(--white);
-  --tone-magenta-050: var(--magenta-050);
-  --tone-magenta-100: var(--magenta-100);
-  --tone-magenta-150: var(--magenta-150);
-  --tone-magenta-200: var(--magenta-200);
-  --tone-magenta-300: var(--magenta-300);
-  --tone-magenta-400: var(--magenta-400);
-  --tone-magenta-500: var(--magenta-500);
-  --tone-magenta-600: var(--magenta-600);
-  --tone-magenta-700: var(--magenta-700);
-  --tone-magenta-800: var(--magenta-800);
-  --tone-magenta-850: var(--magenta-850);
-  --tone-magenta-900: var(--magenta-900);
-  --tone-magenta-950: var(--magenta-950);
-  --tone-magenta-999: var(--black);
-}
-
diff --git a/ui/packages/consul-ui/app/styles/base/color/magenta/themes/dark.scss b/ui/packages/consul-ui/app/styles/base/color/magenta/themes/dark.scss
deleted file mode 100644
index 85a300e4a9..0000000000
--- a/ui/packages/consul-ui/app/styles/base/color/magenta/themes/dark.scss
+++ /dev/null
@@ -1,18 +0,0 @@
-%theme-dark {
-  --tone-magenta-000: var(--white);
-  --tone-magenta-050: var(--magenta-050);
-  --tone-magenta-100: var(--magenta-100);
-  --tone-magenta-150: var(--magenta-150);
-  --tone-magenta-200: var(--magenta-200);
-  --tone-magenta-300: var(--magenta-300);
-  --tone-magenta-400: var(--magenta-400);
-  --tone-magenta-500: var(--magenta-500);
-  --tone-magenta-600: var(--magenta-600);
-  --tone-magenta-700: var(--magenta-700);
-  --tone-magenta-800: var(--magenta-800);
-  --tone-magenta-850: var(--magenta-850);
-  --tone-magenta-900: var(--magenta-900);
-  --tone-magenta-950: var(--magenta-950);
-  --tone-magenta-999: var(--black);
-}
-
diff --git a/ui/packages/consul-ui/app/styles/base/color/magenta/themes/light-high-contrast.scss b/ui/packages/consul-ui/app/styles/base/color/magenta/themes/light-high-contrast.scss
deleted file mode 100644
index bc0d03a80c..0000000000
--- a/ui/packages/consul-ui/app/styles/base/color/magenta/themes/light-high-contrast.scss
+++ /dev/null
@@ -1,18 +0,0 @@
-%theme-light {
-  --tone-magenta-000: var(--white);
-  --tone-magenta-050: var(--magenta-050);
-  --tone-magenta-100: var(--magenta-100);
-  --tone-magenta-150: var(--magenta-150);
-  --tone-magenta-200: var(--magenta-200);
-  --tone-magenta-300: var(--magenta-300);
-  --tone-magenta-400: var(--magenta-400);
-  --tone-magenta-500: var(--magenta-500);
-  --tone-magenta-600: var(--magenta-600);
-  --tone-magenta-700: var(--magenta-700);
-  --tone-magenta-800: var(--magenta-800);
-  --tone-magenta-850: var(--magenta-850);
-  --tone-magenta-900: var(--magenta-900);
-  --tone-magenta-950: var(--magenta-950);
-  --tone-magenta-999: var(--black);
-}
-
diff --git a/ui/packages/consul-ui/app/styles/base/color/magenta/themes/light.scss b/ui/packages/consul-ui/app/styles/base/color/magenta/themes/light.scss
deleted file mode 100644
index 9c589e09ed..0000000000
--- a/ui/packages/consul-ui/app/styles/base/color/magenta/themes/light.scss
+++ /dev/null
@@ -1,18 +0,0 @@
-%theme-light-high-contrast {
-  --tone-magenta-000: var(--white);
-  --tone-magenta-050: var(--magenta-050);
-  --tone-magenta-100: var(--magenta-100);
-  --tone-magenta-150: var(--magenta-150);
-  --tone-magenta-200: var(--magenta-200);
-  --tone-magenta-300: var(--magenta-300);
-  --tone-magenta-400: var(--magenta-400);
-  --tone-magenta-500: var(--magenta-500);
-  --tone-magenta-600: var(--magenta-600);
-  --tone-magenta-700: var(--magenta-700);
-  --tone-magenta-800: var(--magenta-800);
-  --tone-magenta-850: var(--magenta-850);
-  --tone-magenta-900: var(--magenta-900);
-  --tone-magenta-950: var(--magenta-950);
-  --tone-magenta-999: var(--black);
-}
-
diff --git a/ui/packages/consul-ui/app/styles/base/color/semantic-variables.scss b/ui/packages/consul-ui/app/styles/base/color/semantic-variables.scss
index 0681962e45..cbe413d8b3 100644
--- a/ui/packages/consul-ui/app/styles/base/color/semantic-variables.scss
+++ b/ui/packages/consul-ui/app/styles/base/color/semantic-variables.scss
@@ -1,27 +1,4 @@
 :root {
-  --color-primary: var(--tone-blue-500);
-  --color-dangerous: var(--tone-red-500);
-  --color-primary-disabled: var(--tone-blue-500);
-
-  --color-neutral: var(--tone-gray-500);
-  --color-action: var(--tone-blue-500);
-  --color-info: var(--tone-blue-500);
-  /*--color-active: var(--tone-blue-500); ?? form pre-focus*/
-  --color-success: var(--tone-green-500);
-  --color-failure: var(--tone-red-500);
-  --color-danger: var(--tone-red-500);
-  --color-warning: var(--tone-yellow-500);
-  --color-alert: var(--tone-orange-500);
-
-  /* --color-keyline-000: var(--white); */
-  /* --color-keyline-050: var(); */
-  /* --color-keyline-100: var(--gray-100); */
-  /* --color-keyline-200: var(--gray-200); */
-  /* --color-keyline-300: var(--gray-300); */
-  /* --color-keyline-400: var(--gray-400); */
-  /* --color-keyline-500: var(--gray-500); */
-  /* --color-keyline-600: var(--gray-600); */
-  /* --color-keyline-700: var(); */
-  /* --color-keyline-800: var(); */
-  /* --color-keyline-900: var(--black); */
+  --color-info: var(--token-color-foreground-action);
+  --color-alert: var(--token-color-palette-amber-200);
 }
diff --git a/ui/packages/consul-ui/app/styles/base/color/strawberry/frame-placeholders.scss b/ui/packages/consul-ui/app/styles/base/color/strawberry/frame-placeholders.scss
deleted file mode 100644
index 589850244c..0000000000
--- a/ui/packages/consul-ui/app/styles/base/color/strawberry/frame-placeholders.scss
+++ /dev/null
@@ -1,13 +0,0 @@
-%frame-strawberry-300 {
-  @extend %frame-border-000;
-  background-color: rgb(var(--tone-gray-000));
-  border-color: rgb(var(--tone-strawberry-600));
-  color: rgb(var(--tone-strawberry-600));
-}
-%frame-strawberry-800 {
-  @extend %frame-border-000;
-  background-color: rgb(var(--tone-strawberry-500));
-  border-color: rgb(var(--tone-strawberry-800));
-  color: rgb(var(--tone-gray-000));
-}
-
diff --git a/ui/packages/consul-ui/app/styles/base/color/strawberry/index.scss b/ui/packages/consul-ui/app/styles/base/color/strawberry/index.scss
deleted file mode 100644
index 3948997e77..0000000000
--- a/ui/packages/consul-ui/app/styles/base/color/strawberry/index.scss
+++ /dev/null
@@ -1,6 +0,0 @@
-@import './themes/light';
-@import './themes/dark';
-@import './themes/light-high-contrast';
-@import './themes/dark-high-contrast';
-@import './frame-placeholders';
-
diff --git a/ui/packages/consul-ui/app/styles/base/color/strawberry/themes/dark-high-contrast.scss b/ui/packages/consul-ui/app/styles/base/color/strawberry/themes/dark-high-contrast.scss
deleted file mode 100644
index 8a86b9d9c5..0000000000
--- a/ui/packages/consul-ui/app/styles/base/color/strawberry/themes/dark-high-contrast.scss
+++ /dev/null
@@ -1,18 +0,0 @@
-%theme-dark-high-contrast {
-  --tone-strawberry-000: var(--white);
-  --tone-strawberry-050: var(--strawberry-050);
-  --tone-strawberry-100: var(--strawberry-100);
-  --tone-strawberry-150: var(--strawberry-150);
-  --tone-strawberry-200: var(--strawberry-200);
-  --tone-strawberry-300: var(--strawberry-300);
-  --tone-strawberry-400: var(--strawberry-400);
-  --tone-strawberry-500: var(--strawberry-500);
-  --tone-strawberry-600: var(--strawberry-600);
-  --tone-strawberry-700: var(--strawberry-700);
-  --tone-strawberry-800: var(--strawberry-800);
-  --tone-strawberry-850: var(--strawberry-850);
-  --tone-strawberry-900: var(--strawberry-900);
-  --tone-strawberry-950: var(--strawberry-950);
-  --tone-strawberry-999: var(--black);
-}
-
diff --git a/ui/packages/consul-ui/app/styles/base/color/strawberry/themes/dark.scss b/ui/packages/consul-ui/app/styles/base/color/strawberry/themes/dark.scss
deleted file mode 100644
index ff204b2adc..0000000000
--- a/ui/packages/consul-ui/app/styles/base/color/strawberry/themes/dark.scss
+++ /dev/null
@@ -1,18 +0,0 @@
-%theme-dark {
-  --tone-strawberry-000: var(--white);
-  --tone-strawberry-050: var(--strawberry-050);
-  --tone-strawberry-100: var(--strawberry-100);
-  --tone-strawberry-150: var(--strawberry-150);
-  --tone-strawberry-200: var(--strawberry-200);
-  --tone-strawberry-300: var(--strawberry-300);
-  --tone-strawberry-400: var(--strawberry-400);
-  --tone-strawberry-500: var(--strawberry-500);
-  --tone-strawberry-600: var(--strawberry-600);
-  --tone-strawberry-700: var(--strawberry-700);
-  --tone-strawberry-800: var(--strawberry-800);
-  --tone-strawberry-850: var(--strawberry-850);
-  --tone-strawberry-900: var(--strawberry-900);
-  --tone-strawberry-950: var(--strawberry-950);
-  --tone-strawberry-999: var(--black);
-}
-
diff --git a/ui/packages/consul-ui/app/styles/base/color/strawberry/themes/light-high-contrast.scss b/ui/packages/consul-ui/app/styles/base/color/strawberry/themes/light-high-contrast.scss
deleted file mode 100644
index ccd2b783b5..0000000000
--- a/ui/packages/consul-ui/app/styles/base/color/strawberry/themes/light-high-contrast.scss
+++ /dev/null
@@ -1,18 +0,0 @@
-%theme-light-high-contrast {
-  --tone-strawberry-000: var(--white);
-  --tone-strawberry-050: var(--strawberry-050);
-  --tone-strawberry-100: var(--strawberry-100);
-  --tone-strawberry-150: var(--strawberry-150);
-  --tone-strawberry-200: var(--strawberry-200);
-  --tone-strawberry-300: var(--strawberry-300);
-  --tone-strawberry-400: var(--strawberry-400);
-  --tone-strawberry-500: var(--strawberry-500);
-  --tone-strawberry-600: var(--strawberry-600);
-  --tone-strawberry-700: var(--strawberry-700);
-  --tone-strawberry-800: var(--strawberry-800);
-  --tone-strawberry-850: var(--strawberry-850);
-  --tone-strawberry-900: var(--strawberry-900);
-  --tone-strawberry-950: var(--strawberry-950);
-  --tone-strawberry-999: var(--black);
-}
-
diff --git a/ui/packages/consul-ui/app/styles/base/color/strawberry/themes/light.scss b/ui/packages/consul-ui/app/styles/base/color/strawberry/themes/light.scss
deleted file mode 100644
index 4efb00acd9..0000000000
--- a/ui/packages/consul-ui/app/styles/base/color/strawberry/themes/light.scss
+++ /dev/null
@@ -1,18 +0,0 @@
-%theme-light {
-  --tone-strawberry-000: var(--white);
-  --tone-strawberry-050: var(--strawberry-050);
-  --tone-strawberry-100: var(--strawberry-100);
-  --tone-strawberry-150: var(--strawberry-150);
-  --tone-strawberry-200: var(--strawberry-200);
-  --tone-strawberry-300: var(--strawberry-300);
-  --tone-strawberry-400: var(--strawberry-400);
-  --tone-strawberry-500: var(--strawberry-500);
-  --tone-strawberry-600: var(--strawberry-600);
-  --tone-strawberry-700: var(--strawberry-700);
-  --tone-strawberry-800: var(--strawberry-800);
-  --tone-strawberry-850: var(--strawberry-850);
-  --tone-strawberry-900: var(--strawberry-900);
-  --tone-strawberry-950: var(--strawberry-950);
-  --tone-strawberry-999: var(--black);
-}
-
diff --git a/ui/packages/consul-ui/app/styles/base/color/theme-placeholders.scss b/ui/packages/consul-ui/app/styles/base/color/theme-placeholders.scss
deleted file mode 100644
index 6dfb551aff..0000000000
--- a/ui/packages/consul-ui/app/styles/base/color/theme-placeholders.scss
+++ /dev/null
@@ -1,91 +0,0 @@
-%theme-light {
-  --tone-gray-000: var(--white);
-  --tone-gray-050: var(--gray-050);
-  --tone-gray-100: var(--gray-100);
-  --tone-gray-150: var(--gray-150);
-  --tone-gray-200: var(--gray-200);
-  --tone-gray-300: var(--gray-300);
-  --tone-gray-400: var(--gray-400);
-  --tone-gray-500: var(--gray-500);
-  --tone-gray-600: var(--gray-600);
-  --tone-gray-700: var(--gray-700);
-  --tone-gray-800: var(--gray-800);
-  --tone-gray-850: var(--gray-850);
-  --tone-gray-900: var(--gray-900);
-  --tone-gray-950: var(--gray-950);
-  --tone-gray-999: var(--black);
-
-  --tone-blue-500: var(--blue-500);
-
-  --tone-transparent: var(--transparent);
-}
-
-%theme-high-contrast {
-  --tone-transparent: var(--transparent);
-}
-%theme-low-contrast {
-  --tone-transparent: var(--transparent);
-}
-%theme-light-low-contrast {
-  --tone-transparent: var(--transparent);
-}
-%theme-dark-low-contrast {
-  --tone-transparent: var(--transparent);
-}
-%theme-light-high-contrast {
-  --tone-gray-000: var(--white);
-  --tone-gray-050: var(--white);
-  --tone-gray-100: var(--white);
-  --tone-gray-150: var(--white);
-  --tone-gray-200: var(--white);
-  --tone-gray-300: var(--white);
-  --tone-gray-400: var(--white);
-  --tone-gray-500: var(--gray-500);
-  --tone-gray-600: var(--black);
-  --tone-gray-700: var(--black);
-  --tone-gray-800: var(--black);
-  --tone-gray-850: var(--black);
-  --tone-gray-900: var(--black);
-  --tone-gray-950: var(--black);
-  --tone-gray-999: var(--black);
-
-  --tone-transparent: var(--transparent);
-}
-%theme-dark-high-contrast {
-  --tone-gray-000: var(--black);
-  --tone-gray-050: var(--black);
-  --tone-gray-100: var(--black);
-  --tone-gray-150: var(--black);
-  --tone-gray-200: var(--black);
-  --tone-gray-300: var(--black);
-  --tone-gray-400: var(--black);
-  --tone-gray-500: var(--gray-500);
-  --tone-gray-600: var(--white);
-  --tone-gray-700: var(--white);
-  --tone-gray-800: var(--white);
-  --tone-gray-850: var(--white);
-  --tone-gray-900: var(--white);
-  --tone-gray-950: var(--white);
-  --tone-gray-999: var(--white);
-
-  --tone-transparent: var(--transparent);
-}
-%theme-dark {
-  --tone-gray-000: var(--$black);
-  --tone-gray-050: var(--$gray-950);
-  --tone-gray-100: var(--$gray-900);
-  --tone-gray-150: var(--$gray-850);
-  --tone-gray-200: var(--$gray-800);
-  --tone-gray-300: var(--$gray-700);
-  --tone-gray-400: var(--$gray-600);
-  --tone-gray-500: var(--$gray-500);
-  --tone-gray-600: var(--$gray-400);
-  --tone-gray-700: var(--$gray-300);
-  --tone-gray-800: var(--$gray-200);
-  --tone-gray-850: var(--$gray-150);
-  --tone-gray-900: var(--$gray-100);
-  --tone-gray-950: var(--$gray-050);
-  --tone-gray-999: var(--$white);
-
-  --tone-transparent: var(--transparent);
-}
diff --git a/ui/packages/consul-ui/app/styles/base/color/ui/frame-placeholders.scss b/ui/packages/consul-ui/app/styles/base/color/ui/frame-placeholders.scss
index 4f0cf22e0f..e82ba9d33f 100644
--- a/ui/packages/consul-ui/app/styles/base/color/ui/frame-placeholders.scss
+++ b/ui/packages/consul-ui/app/styles/base/color/ui/frame-placeholders.scss
@@ -6,182 +6,156 @@
   /* same as decor-border-000 - but need to think about being able to import color on its own*/
   border-style: solid;
 }
-%frame-brand-300 {
-  @extend %frame-border-000;
-  background-color: var(--transparent);
-  border-color: rgb(var(--decor-brand-600));
-  color: rgb(var(--typo-brand-600));
-}
 
 /* possibly filter bar */
 /* modal close button */
 %frame-gray-050 {
   @extend %frame-border-000;
-  background-color: rgb(var(--tone-gray-050));
-  border-color: rgb(var(--tone-gray-300));
-  color: rgb(var(--tone-gray-400));
-}
-/* modal main content */
-%frame-gray-100 {
-  @extend %frame-border-000;
-  background-color: rgb(var(--tone-gray-000));
-  border-color: rgb(var(--tone-gray-300));
-  color: rgb(var(--tone-gray-600)); /*  wasn't set */
-}
-/* hover */
-%frame-gray-200 {
-  @extend %frame-border-000;
-  background-color: var(--transparent);
-  border-color: rgb(var(--tone-gray-700));
-  color: rgb(var(--tone-gray-800));
+  background-color: var(--token-color-surface-strong);
+  border-color: var(--token-color-palette-neutral-300);
+  color: var(--token-color-foreground-disabled);
 }
+/* button focus */
 %frame-gray-300 {
   @extend %frame-border-000;
-  background-color: rgb(var(--tone-gray-000));
-  border-color: rgb(var(--tone-gray-700));
-  color: rgb(var(--tone-gray-800));
+  background-color: var(--token-color-surface-primary);
+  border-color: var(--token-color-foreground-faint);
+  color: var(--token-color-foreground-primary);
 }
-/* button */
-/**/
+/* button secondary*/
 %frame-gray-400 {
   @extend %frame-border-000;
-  background-color: rgb(var(--tone-gray-050));
-  border-color: rgb(var(--tone-gray-300));
-  color: rgb(var(--tone-gray-800));
-}
-%frame-gray-500 {
-  @extend %frame-border-000;
-  background-color: rgb(var(--tone-gray-050));
-  border-color: rgb(var(--tone-gray-300));
-  color: rgb(var(--tone-gray-400));
+  background-color: var(--token-color-surface-strong);
+  border-color: var(--token-color-palette-neutral-300);
+  color: var(--token-color-foreground-primary);
 }
 
 /* tabs */
 %frame-gray-600 {
   @extend %frame-border-000;
-  background-color: rgb(var(--tone-gray-100));
-  border-color: rgb(var(--tone-gray-500));
-  color: rgb(var(--tone-gray-500));
+  background-color: var(--token-color-surface-strong);
+  border-color: var(--token-color-foreground-faint);
+  color: var(--token-color-foreground-primary);
 }
-/* active */
+/* button active */
 %frame-gray-700 {
   @extend %frame-border-000;
-  background-color: rgb(var(--tone-gray-200));
-  border-color: rgb(var(--tone-gray-700));
-  color: rgb(var(--tone-gray-800));
+  background-color: var(--token-color-surface-interactive-active);
+  border-color: var(--token-color-foreground-faint);
+  color: var(--token-color-foreground-primary);
 }
 /* modal bars */
 %frame-gray-800 {
   @extend %frame-border-000;
-  background-color: rgb(var(--tone-gray-050));
-  border-color: rgb(var(--tone-gray-300));
-  color: rgb(var(--tone-gray-900));
+  background-color: var(--token-color-surface-strong);
+  border-color: var(--token-color-palette-neutral-300);
+  color: var(--token-color-foreground-strong);
 }
 %frame-gray-900 {
   @extend %frame-border-000;
-  background-color: rgb(var(--tone-gray-100));
-  border-color: rgb(var(--tone-gray-300));
-  color: rgb(var(--tone-gray-900));
+  background-color: var(--token-color-surface-strong);
+  border-color: var(--token-color-palette-neutral-300);
+  color: var(--token-color-foreground-strong);
 }
 
 %frame-yellow-500 {
   @extend %frame-border-000;
-  background-color: rgb(var(--tone-yellow-050));
-  border-color: rgb(var(--tone-yellow-500));
+  background-color: var(--token-color-vault-gradient-faint-start);
+  border-color: var(--token-color-vault-brand);
 }
 %frame-yellow-800 {
   @extend %frame-border-000;
-  background-color: rgb(var(--tone-yellow-500));
-  border-color: rgb(var(--tone-yellow-800));
-  color: rgb(var(--tone-gray-000));
+  background-color: var(--token-color-vault-brand);
+  border-color: var(--token-color-vault-foreground);
+  color: var(--token-color-surface-primary);
 }
 %frame-green-500 {
   @extend %frame-border-000;
-  background-color: rgb(var(--tone-green-050));
-  border-color: rgb(var(--tone-green-500));
-  color: rgb(var(--tone-green-500));
+  background-color: var(--token-color-surface-success);
+  border-color: var(--token-color-foreground-success);
+  color: var(--token-color-foreground-success);
 }
 %frame-green-800 {
   @extend %frame-border-000;
-  background-color: rgb(var(--tone-green-500));
-  border-color: rgb(var(--tone-green-800));
-  color: rgb(var(--tone-gray-000));
+  background-color: var(--token-color-foreground-success);
+  border-color: var(--token-color-palette-green-400);
+  color: var(--token-color-surface-primary);
 }
 %frame-blue-200 {
   @extend %frame-border-000;
-  background-color: rgb(var(--tone-gray-000));
-  border-color: rgb(var(--tone-blue-300));
-  color: rgb(var(--tone-blue-300));
+  background-color: var(--token-color-surface-primary);
+  border-color: var(--token-color-foreground-action);
+  color: var(--token-color-foreground-action);
 }
 %frame-blue-300 {
   @extend %frame-border-000;
-  background-color: rgb(var(--tone-gray-000));
-  border-color: rgb(var(--tone-blue-500));
-  color: rgb(var(--tone-blue-500));
+  background-color: var(--token-color-surface-primary);
+  border-color: var(--token-color-foreground-action);
+  color: var(--token-color-foreground-action);
 }
 %frame-blue-500 {
   @extend %frame-border-000;
-  background-color: rgb(var(--tone-blue-050));
-  border-color: rgb(var(--tone-blue-500));
-  color: rgb(var(--tone-blue-800));
+  background-color: var(--token-color-surface-action);
+  border-color: var(--token-color-foreground-action);
+  color: var(--token-color-palette-blue-500);
 }
 %frame-blue-600 {
   @extend %frame-border-000;
-  background-color: rgb(var(--tone-blue-200));
-  border-color: rgb(var(--tone-gray-400));
-  color: rgb(var(--tone-blue-050));
+  background-color: var(--token-color-border-action);
+  border-color: var(--token-color-foreground-disabled);
+  color: var(--token-color-surface-action);
 }
 %frame-blue-700 {
   @extend %frame-border-000;
-  background-color: rgb(var(--tone-blue-400));
-  border-color: rgb(var(--tone-blue-800));
-  color: rgb(var(--tone-gray-000));
+  background-color: var(--token-color-foreground-action);
+  border-color: var(--token-color-palette-blue-500);
+  color: var(--token-color-surface-primary);
 }
 %frame-blue-800 {
   @extend %frame-border-000;
-  background-color: rgb(var(--tone-blue-500));
-  border-color: rgb(var(--tone-blue-800));
-  color: rgb(var(--tone-gray-000));
+  background-color: var(--token-color-foreground-action);
+  border-color: var(--token-color-palette-blue-500);
+  color: var(--token-color-surface-primary);
 }
 %frame-blue-900 {
   @extend %frame-border-000;
-  background-color: rgb(var(--tone-blue-700));
-  border-color: rgb(var(--tone-blue-800));
-  color: rgb(var(--tone-gray-000));
+  background-color: var(--token-color-foreground-action-active);
+  border-color: var(--token-color-palette-blue-500);
+  color: var(--token-color-surface-primary);
 }
 %frame-red-300 {
   @extend %frame-border-000;
-  background-color: var(--transparent);
-  border-color: rgb(var(--tone-red-500));
-  color: rgb(var(--tone-red-500));
+  background-color: transparent;
+  border-color: var(--token-color-foreground-critical);
+  color: var(--token-color-foreground-critical);
 }
 %frame-red-500 {
   @extend %frame-border-000;
-  background-color: rgb(var(--tone-red-050));
-  border-color: rgb(var(--tone-red-500));
-  color: rgb(var(--tone-red-800));
+  background-color: var(--token-color-surface-critical);
+  border-color: var(--token-color-foreground-critical);
+  color: var(--token-color-foreground-critical-high-contrast);
 }
 %frame-red-600 {
   @extend %frame-border-000;
-  background-color: rgb(var(--tone-red-200));
-  border-color: rgb(var(--tone-gray-400));
-  color: rgb(var(--tone-gray-000));
+  background-color: var(--token-color-border-critical);
+  border-color: var(--token-color-foreground-disabled);
+  color: var(--token-color-surface-primary);
 }
 %frame-red-700 {
   @extend %frame-border-000;
-  background-color: rgb(var(--tone-red-500));
-  border-color: rgb(var(--tone-red-800));
-  color: rgb(var(--tone-gray-000));
+  background-color: var(--token-color-foreground-critical);
+  border-color: var(--token-color-foreground-critical-high-contrast);
+  color: var(--token-color-surface-primary);
 }
 %frame-red-800 {
   @extend %frame-border-000;
-  background-color: rgb(var(--tone-red-500));
-  border-color: rgb(var(--tone-red-800));
-  color: rgb(var(--tone-gray-000));
+  background-color: var(--token-color-foreground-critical);
+  border-color: var(--token-color-foreground-critical-high-contrast);
+  color: var(--token-color-surface-primary);
 }
 %frame-red-900 {
   @extend %frame-border-000;
-  background-color: rgb(var(--tone-red-700));
-  border-color: rgb(var(--tone-red-800));
-  color: rgb(var(--tone-gray-000));
+  background-color: var(--token-color-palette-red-400);
+  border-color: var(--token-color-foreground-critical-high-contrast);
+  color: var(--token-color-surface-primary);
 }
diff --git a/ui/packages/consul-ui/app/styles/base/color/ui/index.scss b/ui/packages/consul-ui/app/styles/base/color/ui/index.scss
index 3948997e77..b76ccea196 100644
--- a/ui/packages/consul-ui/app/styles/base/color/ui/index.scss
+++ b/ui/packages/consul-ui/app/styles/base/color/ui/index.scss
@@ -1,6 +1 @@
-@import './themes/light';
-@import './themes/dark';
-@import './themes/light-high-contrast';
-@import './themes/dark-high-contrast';
 @import './frame-placeholders';
-
diff --git a/ui/packages/consul-ui/app/styles/base/color/ui/themes/dark-high-contrast.scss b/ui/packages/consul-ui/app/styles/base/color/ui/themes/dark-high-contrast.scss
deleted file mode 100644
index 0c815c10f7..0000000000
--- a/ui/packages/consul-ui/app/styles/base/color/ui/themes/dark-high-contrast.scss
+++ /dev/null
@@ -1,99 +0,0 @@
-%theme-dark-high-contrast {
-  --tone-gray-000: var(--black);
-  --tone-gray-050: var(--black);
-  --tone-gray-100: var(--black);
-  --tone-gray-150: var(--black);
-  --tone-gray-200: var(--black);
-  --tone-gray-300: var(--black);
-  --tone-gray-400: var(--black);
-  --tone-gray-500: var(--gray-500);
-  --tone-gray-600: var(--white);
-  --tone-gray-700: var(--white);
-  --tone-gray-800: var(--white);
-  --tone-gray-850: var(--white);
-  --tone-gray-900: var(--white);
-  --tone-gray-950: var(--white);
-  --tone-gray-999: var(--white);
-
-  --tone-green-000: var(--white);
-  --tone-green-050: var(--green-050);
-  --tone-green-100: var(--green-100);
-  --tone-green-150: var(--green-150);
-  --tone-green-200: var(--green-200);
-  --tone-green-300: var(--green-300);
-  --tone-green-400: var(--green-400);
-  --tone-green-500: var(--green-500);
-  --tone-green-600: var(--green-600);
-  --tone-green-700: var(--green-700);
-  --tone-green-800: var(--green-800);
-  --tone-green-850: var(--green-850);
-  --tone-green-900: var(--green-900);
-  --tone-green-950: var(--green-950);
-  --tone-green-999: var(--black);
-
-  --tone-blue-000: var(--white);
-  --tone-blue-050: var(--blue-050);
-  --tone-blue-100: var(--blue-100);
-  --tone-blue-150: var(--blue-150);
-  --tone-blue-200: var(--blue-200);
-  --tone-blue-300: var(--blue-300);
-  --tone-blue-400: var(--blue-400);
-  --tone-blue-500: var(--blue-500);
-  --tone-blue-600: var(--blue-600);
-  --tone-blue-700: var(--blue-700);
-  --tone-blue-800: var(--blue-800);
-  --tone-blue-850: var(--blue-850);
-  --tone-blue-900: var(--blue-900);
-  --tone-blue-950: var(--blue-950);
-  --tone-blue-999: var(--black);
-
-  --tone-red-000: var(--white);
-  --tone-red-050: var(--red-050);
-  --tone-red-100: var(--red-100);
-  --tone-red-150: var(--red-150);
-  --tone-red-200: var(--red-200);
-  --tone-red-300: var(--red-300);
-  --tone-red-400: var(--red-400);
-  --tone-red-500: var(--red-500);
-  --tone-red-600: var(--red-600);
-  --tone-red-700: var(--red-700);
-  --tone-red-800: var(--red-800);
-  --tone-red-850: var(--red-850);
-  --tone-red-900: var(--red-900);
-  --tone-red-950: var(--red-950);
-  --tone-red-999: var(--black);
-
-  --tone-orange-000: var(--white);
-  --tone-orange-050: var(--orange-050);
-  --tone-orange-100: var(--orange-100);
-  --tone-orange-150: var(--orange-150);
-  --tone-orange-200: var(--orange-200);
-  --tone-orange-300: var(--orange-300);
-  --tone-orange-400: var(--orange-400);
-  --tone-orange-500: var(--orange-500);
-  --tone-orange-600: var(--orange-600);
-  --tone-orange-700: var(--orange-700);
-  --tone-orange-800: var(--orange-800);
-  --tone-orange-850: var(--orange-850);
-  --tone-orange-900: var(--orange-900);
-  --tone-orange-950: var(--orange-950);
-  --tone-orange-999: var(--black);
-
-  --tone-yellow-000: var(--white);
-  --tone-yellow-050: var(--yellow-050);
-  --tone-yellow-100: var(--yellow-100);
-  --tone-yellow-150: var(--yellow-150);
-  --tone-yellow-200: var(--yellow-200);
-  --tone-yellow-300: var(--yellow-300);
-  --tone-yellow-400: var(--yellow-400);
-  --tone-yellow-500: var(--yellow-500);
-  --tone-yellow-600: var(--yellow-600);
-  --tone-yellow-700: var(--yellow-700);
-  --tone-yellow-800: var(--yellow-800);
-  --tone-yellow-850: var(--yellow-850);
-  --tone-yellow-900: var(--yellow-900);
-  --tone-yellow-950: var(--yellow-950);
-  --tone-yellow-999: var(--black);
-
-  --tone-transparent: var(--transparent);
-}
diff --git a/ui/packages/consul-ui/app/styles/base/color/ui/themes/dark.scss b/ui/packages/consul-ui/app/styles/base/color/ui/themes/dark.scss
deleted file mode 100644
index 27f809fc1b..0000000000
--- a/ui/packages/consul-ui/app/styles/base/color/ui/themes/dark.scss
+++ /dev/null
@@ -1,99 +0,0 @@
-%theme-dark {
-  --tone-gray-000: var(--black);
-  --tone-gray-050: var(--gray-950);
-  --tone-gray-100: var(--gray-900);
-  --tone-gray-150: var(--gray-850);
-  --tone-gray-200: var(--gray-800);
-  --tone-gray-300: var(--gray-700);
-  --tone-gray-400: var(--gray-600);
-  --tone-gray-500: var(--gray-500);
-  --tone-gray-600: var(--gray-400);
-  --tone-gray-700: var(--gray-300);
-  --tone-gray-800: var(--gray-200);
-  --tone-gray-850: var(--gray-250);
-  --tone-gray-900: var(--gray-100);
-  --tone-gray-950: var(--gray-050);
-  --tone-gray-999: var(--white);
-
-  --tone-green-000: var(--white);
-  --tone-green-050: var(--green-050);
-  --tone-green-100: var(--green-100);
-  --tone-green-150: var(--green-150);
-  --tone-green-200: var(--green-200);
-  --tone-green-300: var(--green-300);
-  --tone-green-400: var(--green-400);
-  --tone-green-500: var(--green-500);
-  --tone-green-600: var(--green-600);
-  --tone-green-700: var(--green-700);
-  --tone-green-800: var(--green-800);
-  --tone-green-850: var(--green-850);
-  --tone-green-900: var(--green-900);
-  --tone-green-950: var(--green-950);
-  --tone-green-999: var(--black);
-
-  --tone-blue-000: var(--white);
-  --tone-blue-050: var(--blue-050);
-  --tone-blue-100: var(--blue-100);
-  --tone-blue-150: var(--blue-150);
-  --tone-blue-200: var(--blue-200);
-  --tone-blue-300: var(--blue-300);
-  --tone-blue-400: var(--blue-400);
-  --tone-blue-500: var(--blue-500);
-  --tone-blue-600: var(--blue-600);
-  --tone-blue-700: var(--blue-700);
-  --tone-blue-800: var(--blue-800);
-  --tone-blue-850: var(--blue-850);
-  --tone-blue-900: var(--blue-900);
-  --tone-blue-950: var(--blue-950);
-  --tone-blue-999: var(--black);
-
-  --tone-red-000: var(--white);
-  --tone-red-050: var(--red-050);
-  --tone-red-100: var(--red-100);
-  --tone-red-150: var(--red-150);
-  --tone-red-200: var(--red-200);
-  --tone-red-300: var(--red-300);
-  --tone-red-400: var(--red-400);
-  --tone-red-500: var(--red-500);
-  --tone-red-600: var(--red-600);
-  --tone-red-700: var(--red-700);
-  --tone-red-800: var(--red-800);
-  --tone-red-850: var(--red-850);
-  --tone-red-900: var(--red-900);
-  --tone-red-950: var(--red-950);
-  --tone-red-999: var(--black);
-
-  --tone-orange-000: var(--white);
-  --tone-orange-050: var(--orange-050);
-  --tone-orange-100: var(--orange-100);
-  --tone-orange-150: var(--orange-150);
-  --tone-orange-200: var(--orange-200);
-  --tone-orange-300: var(--orange-300);
-  --tone-orange-400: var(--orange-400);
-  --tone-orange-500: var(--orange-500);
-  --tone-orange-600: var(--orange-600);
-  --tone-orange-700: var(--orange-700);
-  --tone-orange-800: var(--orange-800);
-  --tone-orange-850: var(--orange-850);
-  --tone-orange-900: var(--orange-900);
-  --tone-orange-950: var(--orange-950);
-  --tone-orange-999: var(--black);
-
-  --tone-yellow-000: var(--black);
-  --tone-yellow-050: var(--blue-950);
-  --tone-yellow-100: var(--yellow-900);
-  --tone-yellow-150: var(--yellow-850);
-  --tone-yellow-200: var(--yellow-800);
-  --tone-yellow-300: var(--yellow-700);
-  --tone-yellow-400: var(--yellow-600);
-  --tone-yellow-500: var(--yellow-500);
-  --tone-yellow-600: var(--yellow-400);
-  --tone-yellow-700: var(--yellow-300);
-  --tone-yellow-800: var(--yellow-200);
-  --tone-yellow-850: var(--yellow-250);
-  --tone-yellow-900: var(--yellow-100);
-  --tone-yellow-950: var(--yellow-050);
-  --tone-yellow-999: var(--white);
-
-  --tone-transparent: var(--transparent);
-}
diff --git a/ui/packages/consul-ui/app/styles/base/color/ui/themes/light-high-contrast.scss b/ui/packages/consul-ui/app/styles/base/color/ui/themes/light-high-contrast.scss
deleted file mode 100644
index 676de6b15f..0000000000
--- a/ui/packages/consul-ui/app/styles/base/color/ui/themes/light-high-contrast.scss
+++ /dev/null
@@ -1,99 +0,0 @@
-%theme-light-high-contrast {
-  --tone-gray-000: var(--white);
-  --tone-gray-050: var(--white);
-  --tone-gray-100: var(--white);
-  --tone-gray-150: var(--white);
-  --tone-gray-200: var(--white);
-  --tone-gray-300: var(--white);
-  --tone-gray-400: var(--white);
-  --tone-gray-500: var(--gray-500);
-  --tone-gray-600: var(--black);
-  --tone-gray-700: var(--black);
-  --tone-gray-800: var(--black);
-  --tone-gray-850: var(--black);
-  --tone-gray-900: var(--black);
-  --tone-gray-950: var(--black);
-  --tone-gray-999: var(--black);
-
-  --tone-green-000: var(--white);
-  --tone-green-050: var(--green-050);
-  --tone-green-100: var(--green-100);
-  --tone-green-150: var(--green-150);
-  --tone-green-200: var(--green-200);
-  --tone-green-300: var(--green-300);
-  --tone-green-400: var(--green-400);
-  --tone-green-500: var(--green-500);
-  --tone-green-600: var(--green-600);
-  --tone-green-700: var(--green-700);
-  --tone-green-800: var(--green-800);
-  --tone-green-850: var(--green-850);
-  --tone-green-900: var(--green-900);
-  --tone-green-950: var(--green-950);
-  --tone-green-999: var(--black);
-
-  --tone-blue-000: var(--white);
-  --tone-blue-050: var(--blue-050);
-  --tone-blue-100: var(--blue-100);
-  --tone-blue-150: var(--blue-150);
-  --tone-blue-200: var(--blue-200);
-  --tone-blue-300: var(--blue-300);
-  --tone-blue-400: var(--blue-400);
-  --tone-blue-500: var(--blue-500);
-  --tone-blue-600: var(--blue-600);
-  --tone-blue-700: var(--blue-700);
-  --tone-blue-800: var(--blue-800);
-  --tone-blue-850: var(--blue-850);
-  --tone-blue-900: var(--blue-900);
-  --tone-blue-950: var(--blue-950);
-  --tone-blue-999: var(--black);
-
-  --tone-red-000: var(--white);
-  --tone-red-050: var(--red-050);
-  --tone-red-100: var(--red-100);
-  --tone-red-150: var(--red-150);
-  --tone-red-200: var(--red-200);
-  --tone-red-300: var(--red-300);
-  --tone-red-400: var(--red-400);
-  --tone-red-500: var(--red-500);
-  --tone-red-600: var(--red-600);
-  --tone-red-700: var(--red-700);
-  --tone-red-800: var(--red-800);
-  --tone-red-850: var(--red-850);
-  --tone-red-900: var(--red-900);
-  --tone-red-950: var(--red-950);
-  --tone-red-999: var(--black);
-
-  --tone-orange-000: var(--white);
-  --tone-orange-050: var(--orange-050);
-  --tone-orange-100: var(--orange-100);
-  --tone-orange-150: var(--orange-150);
-  --tone-orange-200: var(--orange-200);
-  --tone-orange-300: var(--orange-300);
-  --tone-orange-400: var(--orange-400);
-  --tone-orange-500: var(--orange-500);
-  --tone-orange-600: var(--orange-600);
-  --tone-orange-700: var(--orange-700);
-  --tone-orange-800: var(--orange-800);
-  --tone-orange-850: var(--orange-850);
-  --tone-orange-900: var(--orange-900);
-  --tone-orange-950: var(--orange-950);
-  --tone-orange-999: var(--black);
-
-  --tone-yellow-000: var(--white);
-  --tone-yellow-050: var(--yellow-050);
-  --tone-yellow-100: var(--yellow-100);
-  --tone-yellow-150: var(--yellow-150);
-  --tone-yellow-200: var(--yellow-200);
-  --tone-yellow-300: var(--yellow-300);
-  --tone-yellow-400: var(--yellow-400);
-  --tone-yellow-500: var(--yellow-500);
-  --tone-yellow-600: var(--yellow-600);
-  --tone-yellow-700: var(--yellow-700);
-  --tone-yellow-800: var(--yellow-800);
-  --tone-yellow-850: var(--yellow-850);
-  --tone-yellow-900: var(--yellow-900);
-  --tone-yellow-950: var(--yellow-950);
-  --tone-yellow-999: var(--black);
-
-  --tone-transparent: var(--transparent);
-}
diff --git a/ui/packages/consul-ui/app/styles/base/color/ui/themes/light.scss b/ui/packages/consul-ui/app/styles/base/color/ui/themes/light.scss
deleted file mode 100644
index 7497280ba0..0000000000
--- a/ui/packages/consul-ui/app/styles/base/color/ui/themes/light.scss
+++ /dev/null
@@ -1,99 +0,0 @@
-%theme-light {
-  --tone-gray-000: var(--white);
-  --tone-gray-050: var(--gray-050);
-  --tone-gray-100: var(--gray-100);
-  --tone-gray-150: var(--gray-150);
-  --tone-gray-200: var(--gray-200);
-  --tone-gray-300: var(--gray-300);
-  --tone-gray-400: var(--gray-400);
-  --tone-gray-500: var(--gray-500);
-  --tone-gray-600: var(--gray-600);
-  --tone-gray-700: var(--gray-700);
-  --tone-gray-800: var(--gray-800);
-  --tone-gray-850: var(--gray-850);
-  --tone-gray-900: var(--gray-900);
-  --tone-gray-950: var(--gray-950);
-  --tone-gray-999: var(--black);
-
-  --tone-green-000: var(--white);
-  --tone-green-050: var(--green-050);
-  --tone-green-100: var(--green-100);
-  --tone-green-150: var(--green-150);
-  --tone-green-200: var(--green-200);
-  --tone-green-300: var(--green-300);
-  --tone-green-400: var(--green-400);
-  --tone-green-500: var(--green-500);
-  --tone-green-600: var(--green-600);
-  --tone-green-700: var(--green-700);
-  --tone-green-800: var(--green-800);
-  --tone-green-850: var(--green-850);
-  --tone-green-900: var(--green-900);
-  --tone-green-950: var(--green-950);
-  --tone-green-999: var(--black);
-
-  --tone-blue-000: var(--white);
-  --tone-blue-050: var(--blue-050);
-  --tone-blue-100: var(--blue-100);
-  --tone-blue-150: var(--blue-150);
-  --tone-blue-200: var(--blue-200);
-  --tone-blue-300: var(--blue-300);
-  --tone-blue-400: var(--blue-400);
-  --tone-blue-500: var(--blue-500);
-  --tone-blue-600: var(--blue-600);
-  --tone-blue-700: var(--blue-700);
-  --tone-blue-800: var(--blue-800);
-  --tone-blue-850: var(--blue-850);
-  --tone-blue-900: var(--blue-900);
-  --tone-blue-950: var(--blue-950);
-  --tone-blue-999: var(--black);
-
-  --tone-red-000: var(--white);
-  --tone-red-050: var(--red-050);
-  --tone-red-100: var(--red-100);
-  --tone-red-150: var(--red-150);
-  --tone-red-200: var(--red-200);
-  --tone-red-300: var(--red-300);
-  --tone-red-400: var(--red-400);
-  --tone-red-500: var(--red-500);
-  --tone-red-600: var(--red-600);
-  --tone-red-700: var(--red-700);
-  --tone-red-800: var(--red-800);
-  --tone-red-850: var(--red-850);
-  --tone-red-900: var(--red-900);
-  --tone-red-950: var(--red-950);
-  --tone-red-999: var(--black);
-
-  --tone-orange-000: var(--white);
-  --tone-orange-050: var(--orange-050);
-  --tone-orange-100: var(--orange-100);
-  --tone-orange-150: var(--orange-150);
-  --tone-orange-200: var(--orange-200);
-  --tone-orange-300: var(--orange-300);
-  --tone-orange-400: var(--orange-400);
-  --tone-orange-500: var(--orange-500);
-  --tone-orange-600: var(--orange-600);
-  --tone-orange-700: var(--orange-700);
-  --tone-orange-800: var(--orange-800);
-  --tone-orange-850: var(--orange-850);
-  --tone-orange-900: var(--orange-900);
-  --tone-orange-950: var(--orange-950);
-  --tone-orange-999: var(--black);
-
-  --tone-yellow-000: var(--white);
-  --tone-yellow-050: var(--yellow-050);
-  --tone-yellow-100: var(--yellow-100);
-  --tone-yellow-150: var(--yellow-150);
-  --tone-yellow-200: var(--yellow-200);
-  --tone-yellow-300: var(--yellow-300);
-  --tone-yellow-400: var(--yellow-400);
-  --tone-yellow-500: var(--yellow-500);
-  --tone-yellow-600: var(--yellow-600);
-  --tone-yellow-700: var(--yellow-700);
-  --tone-yellow-800: var(--yellow-800);
-  --tone-yellow-850: var(--yellow-850);
-  --tone-yellow-900: var(--yellow-900);
-  --tone-yellow-950: var(--yellow-950);
-  --tone-yellow-999: var(--black);
-
-  --tone-transparent: var(--transparent);
-}
diff --git a/ui/packages/consul-ui/app/styles/base/color/vault/frame-placeholders.scss b/ui/packages/consul-ui/app/styles/base/color/vault/frame-placeholders.scss
deleted file mode 100644
index e69de29bb2..0000000000
diff --git a/ui/packages/consul-ui/app/styles/base/color/vault/index.scss b/ui/packages/consul-ui/app/styles/base/color/vault/index.scss
deleted file mode 100644
index 74aa4c7b11..0000000000
--- a/ui/packages/consul-ui/app/styles/base/color/vault/index.scss
+++ /dev/null
@@ -1,6 +0,0 @@
-@import '../lemon';
-@import './themes/light';
-@import './themes/dark';
-@import './themes/light-high-contrast';
-@import './themes/dark-high-contrast';
-@import './frame-placeholders';
diff --git a/ui/packages/consul-ui/app/styles/base/color/vault/themes/dark-high-contrast.scss b/ui/packages/consul-ui/app/styles/base/color/vault/themes/dark-high-contrast.scss
deleted file mode 100644
index 00bcce3c6c..0000000000
--- a/ui/packages/consul-ui/app/styles/base/color/vault/themes/dark-high-contrast.scss
+++ /dev/null
@@ -1,3 +0,0 @@
-%theme-dark-high-contrast {
-  --tone-vault-500: var(--lemon-500);
-}
diff --git a/ui/packages/consul-ui/app/styles/base/color/vault/themes/dark.scss b/ui/packages/consul-ui/app/styles/base/color/vault/themes/dark.scss
deleted file mode 100644
index d873db1590..0000000000
--- a/ui/packages/consul-ui/app/styles/base/color/vault/themes/dark.scss
+++ /dev/null
@@ -1,3 +0,0 @@
-%theme-dark {
-  --tone-vault-500: var(--lemon-500);
-}
diff --git a/ui/packages/consul-ui/app/styles/base/color/vault/themes/light-high-contrast.scss b/ui/packages/consul-ui/app/styles/base/color/vault/themes/light-high-contrast.scss
deleted file mode 100644
index cac38c06a0..0000000000
--- a/ui/packages/consul-ui/app/styles/base/color/vault/themes/light-high-contrast.scss
+++ /dev/null
@@ -1,3 +0,0 @@
-%theme-light-high-contrast {
-  --tone-vault-500: var(--black);
-}
diff --git a/ui/packages/consul-ui/app/styles/base/color/vault/themes/light.scss b/ui/packages/consul-ui/app/styles/base/color/vault/themes/light.scss
deleted file mode 100644
index 669ed33f7e..0000000000
--- a/ui/packages/consul-ui/app/styles/base/color/vault/themes/light.scss
+++ /dev/null
@@ -1,3 +0,0 @@
-%theme-light {
-  --tone-vault-500: var(--black);
-}
diff --git a/ui/packages/consul-ui/app/styles/base/decoration/base-variables.scss b/ui/packages/consul-ui/app/styles/base/decoration/base-variables.scss
index d2ee83711c..83f8309879 100644
--- a/ui/packages/consul-ui/app/styles/base/decoration/base-variables.scss
+++ b/ui/packages/consul-ui/app/styles/base/decoration/base-variables.scss
@@ -13,13 +13,4 @@
   --decor-border-200: 2px solid;
   --decor-border-300: 3px solid;
   --decor-border-400: 4px solid;
-
-  /* box-shadowing*/
-  --decor-elevation-000: none;
-  --decor-elevation-100: 0 3px 2px rgb(var(--black) / 6%);
-  --decor-elevation-200: 0 2px 4px rgb(var(--black) / 10%);
-  --decor-elevation-300: 0 5px 1px -2px rgb(var(--black) / 12%);
-  --decor-elevation-400: 0 6px 8px -2px rgb(var(--black) / 5%), 0 8px 4px -4px rgb(var(--black) / 10%);
-  --decor-elevation-600: 0 12px 5px -7px rgb(var(--black) / 8%), 0 11px 10px -3px rgb(var(--black) / 10%);
-  --decor-elevation-800: 0 16px 6px -10px rgb(var(--black) / 6%), 0 16px 16px -4px rgb(var(--black) / 20%);
 }
diff --git a/ui/packages/consul-ui/app/styles/base/icons/README.mdx b/ui/packages/consul-ui/app/styles/base/icons/README.mdx
index 4193e40fc3..9b7681b747 100644
--- a/ui/packages/consul-ui/app/styles/base/icons/README.mdx
+++ b/ui/packages/consul-ui/app/styles/base/icons/README.mdx
@@ -44,7 +44,7 @@ selectors.
 ```css
 .selector::after {
   --icon-name: icon-alert-circle;
-  --icon-color: rgb(var(---white));
+  --icon-color: var(--token-color-surface-primary);
   content: '';
 }
 ```
@@ -56,9 +56,9 @@ icons in HTML using these CSS properties.
 <h2
   style={{style-map
     (array '--icon-name-start' 'icon-alert-circle')
-    (array '--icon-color-start' 'rgb(var(--tone-strawberry-500))')
+    (array '--icon-color-start' 'var(--token-color-consul-brand)')
     (array '--icon-name-end' 'icon-vault')
-    (array '--icon-color-end' 'var(--color-vault-500)')
+    (array '--icon-color-end' 'var(--color-vault)')
   }}
 >
   Header Name
@@ -105,7 +105,7 @@ also use `background-color`.
 ```css
 .selector::before {
   @extend %with-alert-circle-fill-mask, %as-pseudo;
-  color: rgb(var(--tone-strawberry-500));
+  color: var(--token-color-consul-brand);
 }
 ```
 
@@ -141,7 +141,7 @@ use `-mask`, use `-icon` instead:
   {{css-props (set this 'icons') prefix='icon-'}}
   class={{class-map (concat 'theme-' (or this.theme 'light'))}}
   style={{style-map
-    (array '--icon-color' (if (eq this.type 'monochrome') 'rgb(var(--black))'))
+    (array '--icon-color' (if (eq this.type 'monochrome') 'var(--token-color-hashicorp-brand)'))
     (array '--icon-size' (concat 'icon-' (or this.size '500')))
     (array '--icon-resolution' (if (gt this.size 500) '.5' '1'))
   }}
diff --git a/ui/packages/consul-ui/app/styles/base/icons/base-placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/base-placeholders.scss
index 2e101b44a4..216b81abc6 100644
--- a/ui/packages/consul-ui/app/styles/base/icons/base-placeholders.scss
+++ b/ui/packages/consul-ui/app/styles/base/icons/base-placeholders.scss
@@ -1,14 +1,6 @@
-%theme-light {
-  --theme-dark-none: ;
-  --theme-light-none: initial;
-}
-%theme-dark {
-  --theme-dark-none: initial;
-  --theme-light-none: ;
-}
 %with-glyph-icon {
   font-weight: var(--typo-weight-normal);
-  background-color: rgb(var(--tone-gray-100));
+  background-color: var(--token-color-surface-strong);
   visibility: visible;
   padding: 0 4px;
 }
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/index.scss
index 149e3e7f68..d1671cad01 100644
--- a/ui/packages/consul-ui/app/styles/base/icons/icons/index.scss
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/index.scss
@@ -583,7 +583,6 @@
 // @import './users/index.scss';
 // @import './vagrant/index.scss';
 // @import './vagrant-color/index.scss';
-@import './vault/index.scss';
 // @import './vault-color/index.scss';
 // @import './verified/index.scss';
 // @import './video/index.scss';
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/vault/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/vault/keyframes.scss
index 89c1ccfc4e..38ca783135 100644
--- a/ui/packages/consul-ui/app/styles/base/icons/icons/vault/keyframes.scss
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/vault/keyframes.scss
@@ -1,9 +1,7 @@
 @keyframes icon-vault {
   100% {
-
     -webkit-mask-image: var(--icon-vault-color-16);
     mask-image: var(--icon-vault-color-16);
-    background-color: var(--icon-color, var(--color-vault-500, currentColor));
-
+    background-color: var(--icon-color, var(--color-vault, currentColor));
   }
-}
\ No newline at end of file
+}
diff --git a/ui/packages/consul-ui/app/styles/base/icons/overrides.scss b/ui/packages/consul-ui/app/styles/base/icons/overrides.scss
index b0cccf3218..dd8570339a 100644
--- a/ui/packages/consul-ui/app/styles/base/icons/overrides.scss
+++ b/ui/packages/consul-ui/app/styles/base/icons/overrides.scss
@@ -1,5 +1,5 @@
 %without-mask {
   -webkit-mask-image: none;
   mask-image: none;
-  background-color: var(--transparent) !important;
+  background-color: transparent !important;
 }
diff --git a/ui/packages/consul-ui/app/styles/base/reset/system.scss b/ui/packages/consul-ui/app/styles/base/reset/system.scss
index 23954385d8..3d69534286 100644
--- a/ui/packages/consul-ui/app/styles/base/reset/system.scss
+++ b/ui/packages/consul-ui/app/styles/base/reset/system.scss
@@ -9,19 +9,18 @@ strong {
 }
 /* %typo-body */
 body {
-  color: rgb(var(--tone-gray-900));
+  color: var(--token-color-foreground-strong);
 }
 /* TODO: Consider changing this to 'p a, dd a, td a' etc etc */
 a {
-  color: rgb(var(--color-action));
+  color: var(--token-color-foreground-action);
 }
 html {
-  background-color: rgb(var(--tone-gray-000));
+  background-color: var(--token-color-surface-primary);
 }
 hr {
-  background-color: rgb(var(--tone-gray-200));
+  background-color: var(--token-color-surface-interactive-active);
 }
-
 html {
   font-size: var(--typo-size-000);
 }
diff --git a/ui/packages/consul-ui/app/styles/debug.scss b/ui/packages/consul-ui/app/styles/debug.scss
index 718ae65ace..c168da2cb3 100644
--- a/ui/packages/consul-ui/app/styles/debug.scss
+++ b/ui/packages/consul-ui/app/styles/debug.scss
@@ -11,9 +11,6 @@
 @import 'consul-ui/components/inline-alert/debug';
 @import 'consul-ui/components/definition-table/debug';
 
-.theme-dark {
-  @extend %theme-dark;
-}
 %debug-grid {
   display: flex;
   flex-wrap: wrap;
@@ -43,7 +40,7 @@
 [id^='docfy-demo-preview-typography'] figure,
 [id^='docfy-demo-preview-icons'] figure {
   border: var(--decor-border-100);
-  border-color: rgb(var(--tone-gray-300));
+  border-color: var(--token-color-palette-neutral-300);
   height: 80px;
 }
 
@@ -55,12 +52,10 @@
   height: 40px;
 }
 #docfy-demo-preview-color0 {
-  @extend %theme-light;
-  background-color: rgb(var(--white));
+  background-color: var(--token-color-surface-primary);
 }
 #docfy-demo-preview-color1 {
-  background-color: rgb(var(--black));
-  @extend %theme-dark;
+  background-color: var(--token-color-hashicorp-brand);
 }
 
 [id^='docfy-demo-preview-typography'] {
@@ -140,7 +135,7 @@ html.with-route-announcer .route-title {
 }
 .docs {
   & {
-    background-color: rgb(var(--tone-gray-000));
+    background-color: var(--token-color-surface-primary);
   }
   .tabular-collection,
   .list-collection {
@@ -235,7 +230,7 @@ html.with-route-announcer .route-title {
         border-top: 1px solid;
         border-left: 1px solid;
         border-right: 1px solid;
-        border-color: rgb(var(--tone-gray-200));
+        border-color: var(--token-color-surface-interactive-active);
         padding: 1rem;
         margin-bottom: 0;
       }
@@ -248,19 +243,19 @@ html.with-route-announcer .route-title {
       }
       figcaption {
         margin-bottom: 0.5rem;
-        color: rgb(var(--tone-gray-400));
+        color: var(--token-color-foreground-disabled);
         font-style: italic;
       }
       figcaption code {
         @extend %inline-code;
       }
       figure > [type='text'] {
-        border: 1px solid rgb(var(--tone-gray-999));
+        border: 1px solid var(--token-color-hashicorp-brand);
         width: 100%;
         padding: 0.5rem;
       }
       figure > select {
-        border: 1px solid rgb(var(--tone-gray-999));
+        border: 1px solid var(--token-color-hashicorp-brand);
         padding: 0.5rem;
       }
     }
diff --git a/ui/packages/consul-ui/app/styles/icons.scss b/ui/packages/consul-ui/app/styles/icons.scss
index ca277f1d74..7aa53243bf 100644
--- a/ui/packages/consul-ui/app/styles/icons.scss
+++ b/ui/packages/consul-ui/app/styles/icons.scss
@@ -10,18 +10,6 @@
   }
 }
 
-%theme-light {
-  --icon-aws: icon-aws-color;
-  --icon-vault: icon-vault;
-  --color-vault-500: rgb(var(--black));
-}
-%theme-dark {
-  --icon-aws: icon-aws;
-  --icon-vault: icon-vault;
-  --color-aws-500: rgb(var(--white));
-  --color-vault-500: rgb(var(--tone-lemon-500));
-}
-
 %with-vault-100,
 %with-vault-300 {
   --icon-name: icon-vault;
@@ -29,7 +17,7 @@
 }
 %with-aws-100,
 %with-aws-300 {
-  --icon-name: var(--icon-aws);
+  --icon-name: icon-aws-color;
   content: '';
 }
 %with-allow-100,
@@ -47,12 +35,12 @@
 %with-allow-300,
 %with-allow-500 {
   --icon-name: icon-arrow-right;
-  --icon-color: rgb(var(--tone-green-500));
+  --icon-color: var(--token-color-foreground-success-on-surface);
 }
 %with-deny-300,
 %with-deny-500 {
   --icon-name: icon-skip;
-  --icon-color: rgb(var(--tone-red-500));
+  --icon-color: var(--token-color-foreground-critical-on-surface);
 }
 %with-l7-300,
 %with-l7-500 {
@@ -61,7 +49,7 @@
 %with-allow-500,
 %with-deny-500,
 %with-l7-500 {
-  --icon-resolution: .5;
+  --icon-resolution: 0.5;
 }
 %with-allow-300,
 %with-allow-500,
diff --git a/ui/packages/consul-ui/app/styles/layout.scss b/ui/packages/consul-ui/app/styles/layout.scss
index 1fe6db81fa..5221f6d088 100644
--- a/ui/packages/consul-ui/app/styles/layout.scss
+++ b/ui/packages/consul-ui/app/styles/layout.scss
@@ -75,6 +75,7 @@ html[data-route='dc.services.index'] .consul-service-list ul,
 .consul-role-list ul,
 .consul-policy-list ul,
 .consul-token-list ul,
+.consul-peer-list ul,
 .consul-auth-method-list ul {
   @extend %list-after-filter-bar;
 }
diff --git a/ui/packages/consul-ui/app/styles/layouts/index.scss b/ui/packages/consul-ui/app/styles/layouts/index.scss
index f9405fbd43..5a05d88886 100644
--- a/ui/packages/consul-ui/app/styles/layouts/index.scss
+++ b/ui/packages/consul-ui/app/styles/layouts/index.scss
@@ -26,7 +26,7 @@ fieldset [role='group'] {
 [role='group'] fieldset:not(:first-of-type) {
   padding-left: 20px;
   border-left: 1px solid;
-  border-left: rgb(var(--tone-gray-500));
+  border-left: var(--token-color-foreground-faint);
 }
 [role='group'] fieldset:not(:last-of-type) {
   padding-right: 20px;
diff --git a/ui/packages/consul-ui/app/styles/routes/dc/kv/index.scss b/ui/packages/consul-ui/app/styles/routes/dc/kv/index.scss
index 47f238569a..5dd632a498 100644
--- a/ui/packages/consul-ui/app/styles/routes/dc/kv/index.scss
+++ b/ui/packages/consul-ui/app/styles/routes/dc/kv/index.scss
@@ -5,7 +5,7 @@ html[data-route^='dc.kv'] .type-toggle {
 html[data-route^='dc.kv.edit'] h2 {
   @extend %h200;
   border-bottom: var(--decor-border-200);
-  border-color: rgb(var(--tone-gray-200));
+  border-color: var(--token-color-surface-interactive-active);
   padding-bottom: 0.2em;
   margin-bottom: 0.5em;
 }
diff --git a/ui/packages/consul-ui/app/styles/routes/dc/overview/license.scss b/ui/packages/consul-ui/app/styles/routes/dc/overview/license.scss
index 5969bde717..26399d74f1 100644
--- a/ui/packages/consul-ui/app/styles/routes/dc/overview/license.scss
+++ b/ui/packages/consul-ui/app/styles/routes/dc/overview/license.scss
@@ -13,7 +13,7 @@ section[data-route='dc.show.license'] {
 }
 
 %license-validity p {
-  color: rgb(var(--tone-gray-700));
+  color: var(--token-color-foreground-faint);
 }
 %license-validity dl {
   @extend %horizontal-kv-list;
@@ -28,20 +28,20 @@ section[data-route='dc.show.license'] {
 }
 %license-validity dl .expired::before {
   --icon-name: icon-x-circle;
-  --icon-color: rgb(var(--red-500));
+  --icon-color: var(--token-color-foreground-critical);
 }
 %license-validity dl .warning::before {
   --icon-name: icon-alert-circle;
-  --icon-color: rgb(var(--orange-500));
+  --icon-color: var(--token-color-foreground-warning);
 }
 %license-validity dl .valid:not(.warning)::before {
   --icon-name: icon-check-circle;
-  --icon-color: rgb(var(--green-500));
+  --icon-color: var(--token-color-foreground-success);
 }
 
 %license-route-learn-more {
   @extend %panel;
-  box-shadow: var(--decor-elevation-000);
+  box-shadow: none;
   padding: var(--padding-y) var(--padding-x);
   width: 40%;
   min-width: 413px;
diff --git a/ui/packages/consul-ui/app/styles/routes/dc/overview/serverstatus.scss b/ui/packages/consul-ui/app/styles/routes/dc/overview/serverstatus.scss
index 0267d352c4..9a9d6fe64e 100644
--- a/ui/packages/consul-ui/app/styles/routes/dc/overview/serverstatus.scss
+++ b/ui/packages/consul-ui/app/styles/routes/dc/overview/serverstatus.scss
@@ -20,7 +20,7 @@ section[data-route='dc.show.serverstatus'] {
 
 %server-failure-tolerance {
   @extend %panel;
-  box-shadow: var(--decor-elevation-000);
+  box-shadow: none;
   padding: var(--padding-y) var(--padding-x);
   max-width: 770px;
   display: flex;
@@ -35,13 +35,13 @@ section[data-route='dc.show.serverstatus'] {
   padding-bottom: 0.5rem; /* 8px */
   margin-bottom: 1rem; /* 16px */
   border-bottom: var(--decor-border-100);
-  border-color: rgb(var(--tone-border));
+  border-color: var(--tone-border);
 }
 
 %server-failure-tolerance header em {
   @extend %pill-200;
   font-size: 0.812rem; /* 13px */
-  background-color: rgb(var(--tone-gray-200));
+  background-color: var(--token-color-surface-interactive-active);
 
   text-transform: uppercase;
   font-style: normal;
@@ -65,7 +65,7 @@ section[data-route='dc.show.serverstatus'] {
 %server-failure-tolerance dl.warning dd::before {
   --icon-name: icon-alert-circle;
   --icon-size: icon-800;
-  --icon-color: rgb(var(--tone-orange-400));
+  --icon-color: var(--token-color-foreground-warning);
   content: '';
   margin-right: 0.5rem; /* 8px */
 }
@@ -74,16 +74,16 @@ section[data-route='dc.show.serverstatus'] {
 }
 %server-failure-tolerance dt {
   @extend %p2;
-  color: rgb(var(--tone-gray-700));
+  color: var(--token-color-foreground-faint);
 }
 %server-failure-tolerance dd {
   font-size: var(--typo-size-250);
-  color: rgb(var(--tone-gray-999));
+  color: var(--token-color-hashicorp-brand);
 }
 %server-failure-tolerance header span::before {
   --icon-name: icon-info;
   --icon-size: icon-300;
-  --icon-color: rgb(var(--tone-gray-500));
+  --icon-color: var(--token-color-foreground-faint);
   vertical-align: unset;
   content: '';
 }
@@ -116,11 +116,11 @@ section[data-route='dc.show.serverstatus'] {
   @extend %visually-unhidden;
 }
 %redundancy-zone header dl:not(.warning) {
-  background-color: rgb(var(--tone-gray-100));
+  background-color: var(--token-color-surface-strong);
 }
 %redundancy-zone header dl.warning {
-  background-color: rgb(var(--tone-orange-100));
-  color: rgb(var(--tone-orange-800));
+  background-color: var(--token-color-border-warning);
+  color: var(--token-color-palette-amber-400);
 }
 %redundancy-zone header dl.warning::before {
   --icon-name: icon-alert-circle;
@@ -132,5 +132,5 @@ section[data-route='dc.show.serverstatus'] {
   content: ':';
   display: inline-block;
   vertical-align: revert;
-  background-color: var(--transparent);
+  background-color: transparent;
 }
diff --git a/ui/packages/consul-ui/app/styles/routes/dc/services/index.scss b/ui/packages/consul-ui/app/styles/routes/dc/services/index.scss
index ed24d44f41..9989110cb2 100644
--- a/ui/packages/consul-ui/app/styles/routes/dc/services/index.scss
+++ b/ui/packages/consul-ui/app/styles/routes/dc/services/index.scss
@@ -24,7 +24,7 @@ html[data-route^='dc.services.instance'] .tab-section section:not(:last-child) {
 }
 html[data-route^='dc.services.instance'] .tab-nav,
 html[data-route^='dc.services.instance'] .tab-section section:not(:last-child) {
-  border-color: rgb(var(--tone-gray-200));
+  border-color: var(--token-color-surface-interactive-active);
 }
 html[data-route^='dc.services.instance'] .tab-section section:not(:last-child) {
   padding-bottom: 24px;
diff --git a/ui/packages/consul-ui/app/styles/themes.scss b/ui/packages/consul-ui/app/styles/themes.scss
index 69282b79e7..c652c84657 100644
--- a/ui/packages/consul-ui/app/styles/themes.scss
+++ b/ui/packages/consul-ui/app/styles/themes.scss
@@ -1,26 +1,11 @@
 @import './base/color/ui/index';
-@import './base/color/magenta/index';
-@import './base/color/strawberry/index';
-@import './base/color/vault/index';
 
-:root:not(.prefers-color-scheme-dark) {
-  @extend %theme-light;
-}
-:root.prefers-color-scheme-dark {
-  @extend %theme-dark;
-}
-
-%main-header-horizontal,
-%main-nav-vertical,
-%main-nav-horizontal {
-  @extend %theme-dark;
-}
 %main-nav-horizontal .dangerous button:hover,
 %main-nav-horizontal .dangerous button:focus {
-  color: rgb(var(--white)) !important;
+  color: var(--token-color-surface-primary) !important;
 }
 
 %main-nav-vertical .menu-panel a:hover,
 %main-nav-vertical .menu-panel a:focus {
-  background-color: rgb(var(--tone-blue-500));
+  background-color: var(--token-color-foreground-action);
 }
diff --git a/ui/packages/consul-ui/app/styles/variables/skin.scss b/ui/packages/consul-ui/app/styles/variables/skin.scss
index cece201ac0..2d15e63aa3 100644
--- a/ui/packages/consul-ui/app/styles/variables/skin.scss
+++ b/ui/packages/consul-ui/app/styles/variables/skin.scss
@@ -1,31 +1,7 @@
 @import './custom-query';
 
-// TODO: Setup only the CSS props we actually need here
-// potentially see if our compiler can automatically remove
-// unused CSS props
 :root {
-  /* base brand colors */
-  --tone-brand-050: var(--tone-magenta-050);
-  --tone-brand-100: var(--tone-strawberry-100);
-  /* --tone-brand-200: var(--tone-strawberry-200) */
-  /* --tone-brand-300: var(--tone-strawberry-300) */
-  /* --tone-brand-400: var(--tone-strawberry-400) */
-  /* --tone-brand-500: var(--tone-strawberry-500) */
-  /* temporary strawberry-like color until its replaced by a numbered one */
-  --tone-brand-600: 224 56 117;
-  /* --tone-brand-700: var(--tone-strawberry-700) */
-  --tone-brand-800: var(--tone-magenta-800);
-  /* --tone-brand-900: var(--tone-strawberry-900) */
-
-  /* themeable ui colors */
-  --typo-action-500: rgb(var(--tone-blue-500));
-  --decor-error-500: rgb(var(--tone-red-500));
-  --typo-contrast-999: rgb(var(--tone-gray-999));
-
-  /* themeable brand colors */
-  --typo-brand-050: rgb(var(--tone-brand-050));
-  --typo-brand-600: rgb(var(--tone-brand-600));
-  --decor-brand-600: rgb(var(--tone-brand-600));
-  --swatch-brand-600: rgb(var(--tone-brand-600));
-  --swatch-brand-800: rgb(var(--tone-brand-800));
+  --typo-action: var(--token-color-foreground-action);
+  --decor-error: var(--token-color-foreground-critical);
+  --typo-contrast: var(--token-color-hashicorp-brand);
 }