diff --git a/.changelog/11200.txt b/.changelog/11200.txt
new file mode 100644
index 000000000..ca4310042
--- /dev/null
+++ b/.changelog/11200.txt
@@ -0,0 +1,5 @@
+```release-note:improvement
+ui: Move the majority of our SASS variables to use native CSS custom
+properties
+```
+
diff --git a/ui/packages/consul-ui/app/components/anchors/index.scss b/ui/packages/consul-ui/app/components/anchors/index.scss
index 253a1b89a..08d06e65a 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: $gray-400;
+  color: rgb(var(--tone-gray-400));
 }
 %main-content a[rel*='help']::after {
   @extend %with-info-circle-outline-icon, %as-pseudo;
   opacity: 0.4;
 }
 %main-content h2 a {
-  color: $gray-900;
+  color: rgb(var(--tone-gray-900));
 }
 %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 262abb966..118133533 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: $color-action;
+  color: rgb(var(--color-action));
 }
 %anchor-decoration:hover,
 %anchor-decoration:focus {
@@ -20,7 +20,7 @@
 %anchor {
   @extend %anchor-decoration;
   cursor: pointer;
-  background-color: $transparent;
+  background-color: var(--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 eb4044e35..6d1d3059c 100644
--- a/ui/packages/consul-ui/app/components/app-view/index.scss
+++ b/ui/packages/consul-ui/app/components/app-view/index.scss
@@ -30,7 +30,7 @@
   width: 26px;
   height: 26px;
   cursor: pointer;
-  color: $blue-500;
+  color: rgb(var(--tone-blue-500));
 }
 #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 7ee63b053..d9e85982e 100644
--- a/ui/packages/consul-ui/app/components/app-view/skin.scss
+++ b/ui/packages/consul-ui/app/components/app-view/skin.scss
@@ -2,21 +2,21 @@
   @extend %h100;
 }
 %app-view-title {
-  border-bottom: $decor-border-100;
+  border-bottom: var(--decor-border-100);
 }
 %app-view-content form:not(.filter-bar) fieldset {
-  border-bottom: $decor-border-200;
+  border-bottom: var(--decor-border-200);
 }
 %app-view-header h1 > em {
-  color: var(--gray-600);
+  color: rgb(var(--tone-gray-600));
 }
 %app-view-header dd > a {
-  color: var(--gray-999);
+  color: rgb(var(--tone-gray-999));
 }
 %app-view-content div > dl > dd {
-  color: var(--gray-400);
+  color: rgb(var(--tone-gray-400));
 }
 %app-view-title,
 %app-view-content form:not(.filter-bar) fieldset {
-  border-color: var(--gray-200);
+  border-color: rgb(var(--tone-gray-200));
 }
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 dd2f24df5..58053db1b 100644
--- a/ui/packages/consul-ui/app/components/auth-form/skin.scss
+++ b/ui/packages/consul-ui/app/components/auth-form/skin.scss
@@ -2,11 +2,11 @@
   text-transform: uppercase;
 }
 %auth-form-hr::before {
-  border-top: 1px solid $gray-200;
+  border-top: 1px solid rgb(var(--tone-gray-200));
 }
 /* This is to mask off the hr so it has a space */
 /* in the center so if the background color of what the */
 /* line is on is different, then this should be different */
 %auth-form-hr span {
-  background-color: $white;
+  background-color: rgb(var(--white));
 }
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 b41e574d0..6c0d0c137 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: $transparent;
+  background-color: var(--transparent);
 }
 %auth-modal > div > div > div {
   padding-bottom: 0;
diff --git a/ui/packages/consul-ui/app/components/badge/index.scss b/ui/packages/consul-ui/app/components/badge/index.scss
index 87b71f2f8..22c42b3b9 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: var(--gray-100);
-  color: var(--gray-500);
+  background-color: rgb(var(--tone-gray-100));
+  color: rgb(var(--tone-gray-500));
 }
 %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 f7764062e..966cf886e 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: $gray-500;
+  color: rgb(var(--tone-gray-500));
   text-decoration: none;
 }
 %crumbs:hover {
-  color: $blue-500;
+  color: rgb(var(--tone-blue-500));
   text-decoration: underline;
 }
 %crumbs::before {
@@ -11,9 +11,9 @@
 }
 %breadcrumb-milestone::before {
   @extend %with-chevron-left-mask, %as-pseudo;
-  background-color: $gray-500;
+  background-color: rgb(var(--tone-gray-500));
 }
 %breadcrumb::before {
   content: '/';
-  color: $gray-500;
+  color: rgb(var(--tone-gray-500));
 }
diff --git a/ui/packages/consul-ui/app/components/buttons/skin.scss b/ui/packages/consul-ui/app/components/buttons/skin.scss
index ad14c1fe2..d6d36d829 100644
--- a/ui/packages/consul-ui/app/components/buttons/skin.scss
+++ b/ui/packages/consul-ui/app/components/buttons/skin.scss
@@ -16,8 +16,8 @@
 %dangerous-button {
   @extend %button;
   border-width: 1px;
-  border-radius: $decor-radius-100;
-  box-shadow: $decor-elevation-300;
+  border-radius: var(--decor-radius-100);
+  box-shadow: var(--decor-elevation-300);
 }
 /* color */
 %primary-button {
@@ -42,14 +42,14 @@
   @extend %frame-gray-400;
 }
 %secondary-button:disabled {
-  color: $gray-600;
+  color: rgb(var(--tone-gray-600));
 }
 %secondary-button:active {
   /* %frame-gray-something */
   @extend %frame-gray-700;
-  background-color: $gray-200;
-  color: $gray-800;
-  border-color: $gray-700;
+  background-color: rgb(var(--tone-gray-200));
+  color: rgb(var(--tone-gray-800));
+  border-color: rgb(var(--tone-gray-700));
 }
 /**/
 %dangerous-button {
@@ -67,8 +67,8 @@
 }
 
 %internal-button {
-  color: var(--gray-900);
-  background-color: var(--gray-000);
+  color: rgb(var(--tone-gray-900));
+  background-color: rgb(var(--tone-gray-000));
 }
 %internal-button-dangerous {
   @extend %frame-red-300;
@@ -77,7 +77,7 @@
   @extend %frame-red-700;
 }
 %internal-button-intent {
-  background-color: var(--gray-050);
+  background-color: rgb(var(--tone-gray-050));
 }
 %internal-button:focus,
 %internal-button:hover {
@@ -95,7 +95,7 @@
   top: 0;
   height: 100%;
   margin-left: 8px;
-  background-color: $gray-300;
+  background-color: rgb(var(--tone-gray-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 7ccf5f1f9..da07fa3f1 100644
--- a/ui/packages/consul-ui/app/components/card/skin.scss
+++ b/ui/packages/consul-ui/app/components/card/skin.scss
@@ -3,23 +3,23 @@
   @extend %card-intent;
 }
 %card {
-  border: $decor-border-100;
-  border-radius: $decor-radius-100;
-  background-color: rgba($white, 0.9);
+  border: var(--decor-border-100);
+  border-radius: var(--decor-radius-100);
+  background-color: rgb(var(--white) / 90%);
 }
 %card > section,
 %card > ul > li {
-  border-top: $decor-border-100;
+  border-top: var(--decor-border-100);
 }
 %card,
 %card > section,
 %card > ul > li {
-  border-color: $gray-200;
+  border-color: rgb(var(--tone-gray-200));
 }
 %card ul {
   /*TODO: %list-style-none?*/
   list-style-type: none;
 }
 %card-intent {
-  box-shadow: $decor-elevation-400;
+  box-shadow: var(--decor-elevation-400);
 }
diff --git a/ui/packages/consul-ui/app/components/certificate/index.scss b/ui/packages/consul-ui/app/components/certificate/index.scss
index 3d21a9fa0..ff343a3a5 100644
--- a/ui/packages/consul-ui/app/components/certificate/index.scss
+++ b/ui/packages/consul-ui/app/components/certificate/index.scss
@@ -13,14 +13,14 @@
     @extend %with-visibility-show-icon, %as-pseudo;
   }
   code {
-    background-color: var(--gray-050);
+    background-color: rgb(var(--tone-gray-050));
     overflow-wrap: break-word;
     max-width: min-content;
     padding: 0 12px;
   }
   hr {
-    border: 3px dashed var(--gray-300);
-    background-color: $white;
+    border: 3px dashed rgb(var(--tone-gray-300));
+    background-color: rgb(var(--white));
     width: 150px;
     margin: auto;
     margin-top: 9px;
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 a4f1865e5..8375d23a5 100644
--- a/ui/packages/consul-ui/app/components/code-editor/layout.scss
+++ b/ui/packages/consul-ui/app/components/code-editor/layout.scss
@@ -15,8 +15,8 @@
 %code-editor-syntax-select {
   margin-top: 1px;
   border: 0;
-  background-color: $black;
-  color: $white;
+  background-color: rgb(var(--black));
+  color: rgb(var(--white));
   border-left: 1px solid;
   border-radius: 0;
 }
@@ -25,7 +25,7 @@
   bottom: 0px;
   width: 100%;
   height: 25px;
-  background-color: $black;
+  background-color: var(--black);
   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 5053054fa..e52b2bbaf 100644
--- a/ui/packages/consul-ui/app/components/code-editor/skin.scss
+++ b/ui/packages/consul-ui/app/components/code-editor/skin.scss
@@ -1,24 +1,28 @@
-$syntax-light-grey: #dde3e7;
-$syntax-light-gray: #a4a4a4;
-$syntax-light-grey-blue: #6c7b81;
-$syntax-dark-grey: #788290;
-$syntax-faded-gray: #eaeaea;
-// Product colors
-$syntax-atlas: #127eff;
-$syntax-vagrant: #2f88f7;
 $syntax-consul: #69499a;
-$syntax-terraform: #822ff7;
-$syntax-serf: #dd4e58;
-$syntax-packer: #1ddba3;
-
-// Our colors
-$syntax-gray: lighten($black, 89%);
-$syntax-red: #ff3d3d;
-$syntax-green: #39b54a;
 $syntax-dark-gray: #535f73;
+:root {
+  --syntax-light-grey: #dde3e7;
+  --syntax-light-gray: #a4a4a4;
+  --syntax-light-grey-blue: #6c7b81;
+  --syntax-dark-grey: #788290;
+  --syntax-faded-gray: #eaeaea;
+  // Product colors
+  --syntax-atlas: #127eff;
+  --syntax-vagrant: #2f88f7;
+  --syntax-consul: #{$syntax-consul};
+  --syntax-terraform: #822ff7;
+  --syntax-serf: #dd4e58;
+  --syntax-packer: #1ddba3;
 
-$syntax-gutter-grey: #2a2f36;
-$syntax-yellow: $yellow-500;
+  // Our colors
+  --syntax-gray: lighten(#000, 89%);
+  --syntax-red: #ff3d3d;
+  --syntax-green: #39b54a;
+  --syntax-dark-gray: #{$syntax-dark-gray};
+
+  --syntax-gutter-grey: #2a2f36;
+  --syntax-yellow: rgb(var(--tone-yellow-500));
+}
 .CodeMirror {
   max-width: 1150px;
   min-height: 300px;
@@ -31,10 +35,10 @@ $syntax-yellow: $yellow-500;
 }
 .CodeMirror-lint-tooltip {
   background-color: #f9f9fa;
-  border: 1px solid $syntax-light-gray;
+  border: 1px solid var(--syntax-light-gray);
   border-radius: 0;
-  color: lighten($black, 13%);
-  font-family: $typo-family-mono;
+  color: lighten(#000, 13%);
+  font-family: var(--typo-family-mono);
   font-size: 13px;
   padding: 7px 8px 9px;
 }
@@ -42,17 +46,17 @@ $syntax-yellow: $yellow-500;
 .cm-s-hashi {
   &.CodeMirror {
     width: 100%;
-    background-color: $black !important;
+    background-color: rgb(var(--black)) !important;
     color: #cfd2d1 !important;
     border: none;
-    font-family: $typo-family-mono;
+    font-family: var(--typo-family-mono);
     -webkit-font-smoothing: auto;
     line-height: 1.4;
   }
 
   .CodeMirror-gutters {
-    color: $syntax-dark-grey;
-    background-color: $syntax-gutter-grey;
+    color: var(--syntax-dark-grey);
+    background-color: var(--syntax-gutter-grey);
     border: none;
   }
 
@@ -77,20 +81,20 @@ $syntax-yellow: $yellow-500;
   .CodeMirror-line::-moz-selection,
   .CodeMirror-line > span::-moz-selection,
   .CodeMirror-line > span > span::-moz-selection {
-    background: rgba(255, 255, 255, 0.1);
+    background: rgb(var(--white) / 10%);
   }
 
   span.cm-comment {
-    color: $syntax-light-grey;
+    color: var(--syntax-light-grey);
   }
 
   span.cm-string,
   span.cm-string-2 {
-    color: $syntax-packer;
+    color: var(--syntax-packer);
   }
 
   span.cm-number {
-    color: $syntax-serf;
+    color: var(--syntax-serf);
   }
 
   span.cm-variable {
@@ -102,26 +106,26 @@ $syntax-yellow: $yellow-500;
   }
 
   span.cm-def {
-    color: $syntax-packer;
+    color: var(--syntax-packer);
   }
 
   span.cm-operator {
-    color: $syntax-gray;
+    color: var(--syntax-gray);
   }
   span.cm-keyword {
-    color: $syntax-yellow;
+    color: var(--syntax-yellow);
   }
 
   span.cm-atom {
-    color: $syntax-serf;
+    color: var(--syntax-serf);
   }
 
   span.cm-meta {
-    color: $syntax-packer;
+    color: var(--syntax-packer);
   }
 
   span.cm-tag {
-    color: $syntax-packer;
+    color: var(--syntax-packer);
   }
 
   span.cm-attribute {
@@ -150,7 +154,7 @@ $syntax-yellow: $yellow-500;
 
   .CodeMirror-matchingbracket {
     text-decoration: underline;
-    color: $white !important;
+    color: rgb(var(--white)) !important;
   }
 }
 
@@ -161,12 +165,12 @@ $syntax-yellow: $yellow-500;
 
   .cm-s-hashi {
     span {
-      color: $syntax-light-grey;
+      color: var(--syntax-light-grey);
     }
 
     span.cm-string,
     span.cm-string-2 {
-      color: $syntax-faded-gray;
+      color: var(--syntax-faded-gray);
     }
 
     span.cm-number {
@@ -174,11 +178,11 @@ $syntax-yellow: $yellow-500;
     }
 
     span.cm-property {
-      color: $white;
+      color: rgb(var(--white));
     }
 
     span.cm-variable-2 {
-      color: $syntax-light-grey-blue;
+      color: var(--syntax-light-grey-blue);
     }
   }
 }
diff --git a/ui/packages/consul-ui/app/components/collapsible-notices/index.scss b/ui/packages/consul-ui/app/components/collapsible-notices/index.scss
index 639d3cbb6..672904fce 100644
--- a/ui/packages/consul-ui/app/components/collapsible-notices/index.scss
+++ b/ui/packages/consul-ui/app/components/collapsible-notices/index.scss
@@ -16,7 +16,7 @@
   }
   button {
     @extend %button;
-    color: $color-action;
+    color: rgb(var(--color-action));
     float: right;
     grid-area: toggle-button;
     margin-top: 1em;
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 4ab199e41..7b42462c6 100644
--- a/ui/packages/consul-ui/app/components/composite-row/index.scss
+++ b/ui/packages/consul-ui/app/components/composite-row/index.scss
@@ -61,7 +61,7 @@
   overflow-x: visible !important;
 }
 .consul-intention-permission-list > ul {
-  border-top: 1px solid $gray-200;
+  border-top: 1px solid rgb(var(--tone-gray-200));
 }
 .consul-service-instance-list .port dt,
 .consul-service-instance-list .port dt::before {
@@ -113,5 +113,5 @@
 %composite-row-header .policy-management dd::before,
 %composite-row-detail .policy-management::before {
   @extend %with-star-fill-mask, %as-pseudo;
-  background-color: var(--brand-600);
+  background-color: rgb(var(--brand-600));
 }
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 aa50e08d3..3c4047582 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: $white;
+  background-color: rgb(var(--white));
 }
 %confirmation-dialog-inline p {
-  color: $gray-400;
+  color: rgb(var(--tone-gray-400));
 }
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 dd7f74d8d..1b171b1ca 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: var(--gray-500);
-        font-weight: $typo-weight-semibold;
-        font-size: $typo-size-700;
+        color: rgb(var(--tone-gray-500));
+        font-weight: var(--typo-weight-semibold);
+        font-size: var(--typo-size-700);
       }
       tbody {
         td {
-          font-size: $typo-size-600;
-          color: $black;
+          font-size: var(--typo-size-600);
+          color: var(--black);
         }
         tr {
           cursor: default;
@@ -57,7 +57,7 @@
     @extend %tabular-dl;
   }
   code {
-    background-color: var(--gray-050);
+    background-color: rgb(var(--tone-gray-050));
     padding: 0 12px;
   }
 }
@@ -66,15 +66,15 @@
 .consul-auth-method-nspace-list {
   thead {
     td {
-      color: var(--gray-500) !important;
-      font-weight: $typo-weight-semibold !important;
-      font-size: $typo-size-700 !important;
+      color: rgb(var(--tone-gray-500)) !important;
+      font-weight: var(--typo-weight-semibold) !important;
+      font-size: var(--typo-size-700) !important;
     }
   }
   tbody {
     td {
-      font-size: $typo-size-600;
-      color: $black;
+      font-size: var(--typo-size-600);
+      color: var(--black);
     }
     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 56bc9e63e..52e3ab1a0 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
@@ -6,7 +6,7 @@
       background-color: var(--white);
       border: var(--decor-border-100);
       border-radius: var(--decor-radius-200);
-      border-color: var(--gray-500);
+      border-color: rgb(var(--tone-gray-500));
       box-shadow: var(--decor-elevation-600);
     }
   {{/if}}
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 e38efdb6a..6c34f57b9 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: $gray-400;
+  stroke: rgb(var(--tone-gray-400));
   stroke-width: 2;
   vector-effect: non-scaling-stroke;
 }
@@ -30,15 +30,15 @@
 }
 %chain-node,
 %chain-node a {
-  color: $gray-900 !important;
+  color: rgb(var(--tone-gray-900)) !important;
 }
 %discovery-chain-edge-active {
-  stroke: $gray-900;
+  stroke: rgb(var(--tone-gray-900));
 }
 %chain-group {
-  border-radius: $decor-radius-100;
-  border: 1px solid $gray-200;
-  background-color: $gray-100;
+  border-radius: var(--decor-radius-100);
+  border: 1px solid rgb(var(--tone-gray-200));
+  background-color: rgb(var(--tone-gray-100));
 
   pointer-events: none;
 }
@@ -63,8 +63,8 @@
 }
 %chain-node-active {
   opacity: 1;
-  background-color: $white;
-  border-color: $gray-500;
+  background-color: rgb(var(--white));
+  border-color: rgb(var(--tone-gray-500));
 }
 /* TODO: More text truncation, centralize */
 %route-card header:not(.short) dd {
@@ -99,13 +99,13 @@
 /**/
 %with-chain-outlet::before {
   @extend %as-pseudo;
-  background-color: $white;
+  background-color: rgb(var(--white));
 
-  border-radius: $decor-radius-full;
-  border: 2px solid $gray-400;
+  border-radius: var(--decor-radius-full);
+  border: 2px solid rgb(var(--tone-gray-400));
 }
 %discovery-chain circle {
   stroke-width: 2;
-  stroke: $gray-400;
-  fill: $white;
+  stroke: rgb(var(--tone-gray-400));
+  fill: rgb(var(--white));
 }
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 23cae5bca..15a5f170f 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 $gray-200;
+    border-top: 1px solid rgb(var(--tone-gray-200));
   }
   > ul > li {
     @extend %composite-row;
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 ed7276f83..17b3ad7b0 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: $gray-100;
+  background-color: rgb(var(--tone-gray-100));
   /*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: $green-500;
+  color: rgb(var(--tone-green-500));
 }
 %healthcheck-output.warning::before {
   @extend %with-alert-triangle-mask;
-  color: $orange-500;
+  color: rgb(var(--tone-orange-500));
 }
 %healthcheck-output.critical::before {
   @extend %with-cancel-square-fill-mask;
-  color: $red-500;
+  color: rgb(var(--tone-red-500));
 }
 %healthcheck-output,
 %healthcheck-output pre {
-  border-radius: $decor-radius-100;
+  border-radius: var(--decor-radius-100);
 }
 %healthcheck-output dd:first-of-type {
-  color: $gray-400;
+  color: rgb(var(--tone-gray-400));
 }
 %healthcheck-output pre {
-  background-color: $gray-050;
-  color: $gray-600;
+  background-color: rgb(var(--tone-gray-050));
+  color: rgb(var(--tone-gray-600));
 }
 %healthcheck-output {
   /* TODO: this should be a frame-gray */
-  color: $gray-900;
-  border-color: $gray-200;
+  color: rgb(var(--tone-gray-900));
+  border-color: rgb(var(--tone-gray-200));
   border-style: solid;
 
   border-left-width: 4px;
 }
 %healthcheck-output.passing {
-  border-left-color: $green-500;
+  border-left-color: rgb(var(--tone-green-500));
 }
 %healthcheck-output.warning {
-  border-left-color: $yellow-500;
+  border-left-color: rgb(var(--tone-yellow-500));
 }
 %healthcheck-output.critical {
-  border-left-color: $red-500;
+  border-left-color: rgb(var(--tone-red-500));
 }
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 b4e785606..59dfcd2fe 100644
--- a/ui/packages/consul-ui/app/components/consul/intention/components.scss
+++ b/ui/packages/consul-ui/app/components/consul/intention/components.scss
@@ -9,16 +9,16 @@
 %pill-deny,
 %pill-l7 {
   display: inline-block;
-  font-weight: $typo-weight-normal;
-  font-size: $typo-size-600;
+  font-weight: var(--typo-weight-normal);
+  font-size: var(--typo-size-600);
 }
 %pill-allow {
-  color: $green-800;
-  background-color: $green-100;
+  color: rgb(var(--tone-green-800));
+  background-color: rgb(var(--tone-green-100));
 }
 %pill-deny {
-  color: $red-800;
-  background-color: $red-100;
+  color: rgb(var(--tone-red-800));
+  background-color: rgb(var(--tone-red-100));
 }
 %pill-l7 {
   @extend %frame-gray-900;
diff --git a/ui/packages/consul-ui/app/components/consul/intention/form/fieldsets/skin.scss b/ui/packages/consul-ui/app/components/consul/intention/form/fieldsets/skin.scss
index bbf8ef09c..5057fc042 100644
--- a/ui/packages/consul-ui/app/components/consul/intention/form/fieldsets/skin.scss
+++ b/ui/packages/consul-ui/app/components/consul/intention/form/fieldsets/skin.scss
@@ -1,7 +1,7 @@
 .consul-intention-fieldsets {
   .value-allow > :last-child::before {
     @extend %with-arrow-right-mask, %as-pseudo;
-    color: $green-500;
+    color: rgb(var(--tone-green-500));
   }
   .value-deny > :last-child::before {
     @extend %with-deny-color-icon, %as-pseudo;
diff --git a/ui/packages/consul-ui/app/components/consul/intention/form/index.scss b/ui/packages/consul-ui/app/components/consul/intention/form/index.scss
index e0fcfa4e2..6f39b1c6c 100644
--- a/ui/packages/consul-ui/app/components/consul/intention/form/index.scss
+++ b/ui/packages/consul-ui/app/components/consul/intention/form/index.scss
@@ -3,7 +3,7 @@
     max-width: 450px;
   }
   .modal-dialog-body p {
-    font-size: $typo-size-600;
+    font-size: var(--typo-size-600);
   }
   button.dangerous {
     @extend %dangerous-button;
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 40f4f5ecc..8a66540e8 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: $blue-500;
+  color: rgb(var(--tone-blue-500));
 }
 %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 74352a027..337e2406d 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 $blue-500;
+    border-top: 1px solid rgb(var(--tone-blue-500));
     @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 20ab7c0a7..a5f3a103f 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: var(--brand-100);
+  fill: rgb(var(--brand-100));
 }
 %loader circle {
   animation: loader-animation 1.5s infinite ease-in-out;
diff --git a/ui/packages/consul-ui/app/components/consul/lock-session/form/index.scss b/ui/packages/consul-ui/app/components/consul/lock-session/form/index.scss
index 1accb6eba..3dab35b60 100644
--- a/ui/packages/consul-ui/app/components/consul/lock-session/form/index.scss
+++ b/ui/packages/consul-ui/app/components/consul/lock-session/form/index.scss
@@ -1,8 +1,8 @@
 .consul-lock-session-form {
   h2 {
     @extend %h200;
-    border-bottom: $decor-border-200;
-    border-color: $gray-200;
+    border-bottom: var(--decor-border-200);
+    border-color: rgb(var(--tone-gray-200));
     padding-bottom: 0.2em;
     margin-bottom: 0.5em;
   }
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 db4fc74e3..2cb374519 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: $gray-050;
+    fill: rgb(var(--tone-gray-050));
   }
   .axis {
     fill: none;
-    stroke: $gray-300;
+    stroke: rgb(var(--tone-gray-300));
     stroke-dasharray: 4 4;
   }
   .border {
     fill: none;
-    stroke: $gray-300;
+    stroke: rgb(var(--tone-gray-300));
   }
   .point {
-    stroke: $gray-400;
-    fill: $magenta-600;
+    stroke: rgb(var(--tone-gray-400));
+    fill: rgb(var(--tone-magenta-600));
   }
   .lines rect {
-    fill: $magenta-600;
+    fill: rgb(var(--tone-magenta-600));
     stroke: transparent;
     stroke-width: 5px;
   }
   .lines rect:hover {
-    fill: $gray-300;
+    fill: rgb(var(--tone-gray-300));
     height: 3px;
     y: -1px;
   }
   .tick line {
-    stroke: $gray-300;
+    stroke: rgb(var(--tone-gray-300));
   }
   .tick text {
-    font-size: $typo-size-600;
+    font-size: var(--typo-size-600);
     text-anchor: start;
-    color: $gray-900;
+    color: rgb(var(--tone-gray-900));
   }
 }
diff --git a/ui/packages/consul-ui/app/components/consul/upstream-instance/list/index.scss b/ui/packages/consul-ui/app/components/consul/upstream-instance/list/index.scss
index 63f2ecf79..9a46faaad 100644
--- a/ui/packages/consul-ui/app/components/consul/upstream-instance/list/index.scss
+++ b/ui/packages/consul-ui/app/components/consul/upstream-instance/list/index.scss
@@ -12,6 +12,6 @@
     @extend %with-folder-outline-mask, %as-pseudo;
   }
   dl.local-bind-mode dt {
-    font-weight: $typo-weight-semibold;
+    font-weight: var(--typo-weight-semibold);
   }
 }
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 836cb2bd8..214b197ab 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: var(--blue-500);
+  color: rgb(var(--tone-blue-500));
   background-color: var(--transparent);
 }
 %copy-button::before {
   @extend %with-copy-action-mask, %as-pseudo;
-  background-color: var(--gray-500);
+  background-color: rgb(var(--tone-gray-500));
 }
 %copy-button::after {
-  background-color: var(--gray-050);
+  background-color: rgb(var(--tone-gray-050));
 }
 %copy-button:hover:not(:disabled):not(:active),
 %copy-button:focus {
-  color: var(--blue-500);
-  background-color: var(--gray-050);
+  color: rgb(var(--tone-blue-500));
+  background-color: rgb(var(--tone-gray-050));
 }
 %copy-button:hover::before {
-  background-color: var(--blue-500);
+  background-color: rgb(var(--tone-blue-500));
 }
 %copy-button:active {
-  background-color: var(--gray-200);
+  background-color: rgb(var(--tone-gray-200));
 }
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 70177f20a..9e09d9368 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: $gray-500;
-  background-color: $gray-010;
+  color: rgb(var(--tone-gray-500));
+  background-color: rgb(var(--tone-gray-010));
 }
 %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 e17189cb6..297a60de3 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,7 +1,7 @@
 %expanded-single-select {
-  border: $decor-border-100;
-  border-color: $gray-300;
-  border-radius: $decor-radius-100;
+  border: var(--decor-border-100);
+  border-color: rgb(var(--tone-gray-300));
+  border-radius: var(--decor-radius-100);
 }
 %expanded-single-select label {
   cursor: pointer;
@@ -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: $decor-elevation-300;
+  box-shadow: var(--decor-elevation-300);
 }
 %expanded-single-select input[type='radio']:checked + *,
 %expanded-single-select input[type='radio']:hover + *,
 %expanded-single-select input[type='radio']:focus + * {
-  background-color: $white;
+  background-color: rgb(var(--white));
 }
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 af5fa5003..ba9429903 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: $gray-010;
-    border-bottom: $decor-border-100;
-    border-color: $gray-200;
+    background-color: rgb(var(--tone-gray-010));
+    border-bottom: var(--decor-border-100);
+    border-color: rgb(var(--tone-gray-200));
   }
   .filters,
   .sort {
     .popover-menu > [type='checkbox']:checked + label button {
-      color: $blue-500;
-      background-color: $gray-100;
+      color: rgb(var(--tone-blue-500));
+      background-color: rgb(var(--tone-gray-100));
     }
   }
 }
diff --git a/ui/packages/consul-ui/app/components/flash-message/index.scss b/ui/packages/consul-ui/app/components/flash-message/index.scss
index 19b827cb7..1928cdd16 100644
--- a/ui/packages/consul-ui/app/components/flash-message/index.scss
+++ b/ui/packages/consul-ui/app/components/flash-message/index.scss
@@ -12,7 +12,7 @@
 /* flash message usage we should be able to remove this */
 %flash-message p.exists strong::before {
   @extend %with-cancel-square-fill-mask;
-  color: $red-500;
+  color: rgb(var(--tone-red-500));
 }
 %flash-message p.exists {
   @extend %frame-red-500;
diff --git a/ui/packages/consul-ui/app/components/flash-message/skin.scss b/ui/packages/consul-ui/app/components/flash-message/skin.scss
index 9503f62d5..4d5274de9 100644
--- a/ui/packages/consul-ui/app/components/flash-message/skin.scss
+++ b/ui/packages/consul-ui/app/components/flash-message/skin.scss
@@ -1,21 +1,21 @@
 %flash-message p {
   border-width: 1px;
-  border-radius: $decor-radius-100;
+  border-radius: var(--decor-radius-100);
 }
 %flash-message p strong::before {
   @extend %as-pseudo;
 }
 %flash-message p.success strong::before {
   @extend %with-check-circle-fill-mask;
-  color: $green-500;
+  color: rgb(var(--tone-green-500));
 }
 %flash-message p.warning strong::before {
   @extend %with-alert-triangle-mask;
-  color: $orange-500;
+  color: rgb(var(--tone-orange-500));
 }
 %flash-message p.error strong::before {
   @extend %with-cancel-square-fill-mask;
-  color: $red-500;
+  color: rgb(var(--tone-red-500));
 }
 %flash-message p.success {
   @extend %frame-green-500;
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 32cf2916b..8528e121d 100644
--- a/ui/packages/consul-ui/app/components/form-elements/skin.scss
+++ b/ui/packages/consul-ui/app/components/form-elements/skin.scss
@@ -1,9 +1,9 @@
 %form-element-text-input {
   -moz-appearance: none;
   -webkit-appearance: none;
-  box-shadow: inset $decor-elevation-100;
-  border-radius: $decor-radius-100;
-  border: $decor-border-100;
+  box-shadow: inset var(--decor-elevation-100);
+  border-radius: var(--decor-radius-100);
+  border: var(--decor-border-100);
   outline: none;
 }
 textarea:disabled + .CodeMirror,
@@ -14,21 +14,21 @@ textarea:disabled + .CodeMirror,
 %form fieldset > p,
 %form-element-note,
 %form-element-text-input::placeholder {
-  color: $gray-400;
+  color: rgb(var(--tone-gray-400));
 }
 %form-element-error > input,
 %form-element-error > textarea {
-  border-color: var(--decor-error-500, $red-500) !important;
+  border-color: var(--decor-error-500, rgb(var(--tone-red-500))) !important;
 }
 %form-element-text-input {
-  color: $gray-500;
-  border-color: $gray-300;
+  color: rgb(var(--tone-gray-500));
+  border-color: rgb(var(--tone-gray-300));
 }
 %form-element-text-input-hover {
-  border-color: $gray-500;
+  border-color: rgb(var(--tone-gray-500));
 }
 %form-element-text-input-focus {
-  border-color: var(--typo-action-500, $blue-500);
+  border-color: var(--typo-action-500, rgb(var(--tone-blue-500)));
 }
 %form-element-label {
   color: var(--typo-contrast-999, 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 26d51da71..ec2336774 100644
--- a/ui/packages/consul-ui/app/components/freetext-filter/skin.scss
+++ b/ui/packages/consul-ui/app/components/freetext-filter/skin.scss
@@ -1,15 +1,15 @@
 .freetext-filter {
   & {
-    border: $decor-border-100;
-    border-radius: $decor-radius-100;
+    border: var(--decor-border-100);
+    border-radius: var(--decor-radius-100);
 
-    background-color: $white;
-    border-color: $gray-200;
-    color: $gray-400;
+    background-color: rgb(var(--white));
+    border-color: rgb(var(--tone-gray-200));
+    color: rgb(var(--tone-gray-400));
   }
   &:hover,
   &:hover * {
-    border-color: $gray-400;
+    border-color: rgb(var(--tone-gray-400));
   }
   & *,
   &_input::placeholder {
@@ -36,14 +36,14 @@
     @extend %with-search-mask;
   }
   .popover-menu {
-    background-color: $gray-050;
-    color: $gray-800;
+    background-color: rgb(var(--tone-gray-050));
+    color: rgb(var(--tone-gray-800));
   }
   .popover-menu {
     border-left: 1px solid;
     border-color: inherit;
   }
   .popover-menu > [type='checkbox']:checked + label button {
-    background-color: $gray-200;
+    background-color: rgb(var(--tone-gray-200));
   }
 }
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 baa367f34..5142d8780 100644
--- a/ui/packages/consul-ui/app/components/hashicorp-consul/index.scss
+++ b/ui/packages/consul-ui/app/components/hashicorp-consul/index.scss
@@ -7,7 +7,7 @@
     display: none;
   }
   [role='banner'] a svg {
-    fill: var(--brand-600);
+    fill: rgb(var(--brand-600));
   }
   .docs-link a::after {
     @extend %with-docs-mask, %as-pseudo;
@@ -20,7 +20,7 @@
   }
   .acls-separator span {
     @extend %led-icon;
-    color: $red-500;
+    color: rgb(var(--tone-red-500));
     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 f39a689d9..2cf875988 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: var(--gray-700);
+  color: rgb(var(--tone-gray-700));
 }
 .ttl::before {
   @extend %with-history-mask, %as-pseudo;
-  color: var(--blue-500);
+  color: rgb(var(--tone-blue-500));
 }
 .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 f8c365dce..22efa4535 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
@@ -4,11 +4,11 @@
   }
   .lock-delay::before {
     @extend %with-delay-mask, %as-pseudo;
-    color: var(--gray-700);
+    color: rgb(var(--tone-gray-700));
   }
   .ttl::before {
     @extend %with-history-mask, %as-pseudo;
-    color: var(--blue-500);
+    color: rgb(var(--tone-blue-500));
   }
   .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 088b4df18..9595850e5 100644
--- a/ui/packages/consul-ui/app/components/icon-definition/index.scss
+++ b/ui/packages/consul-ui/app/components/icon-definition/index.scss
@@ -8,27 +8,27 @@
 %icon-definition.passing dt::before,
 %composite-row-header .passing dd::before {
   @extend %with-check-circle-fill-mask, %as-pseudo;
-  color: $green-500;
+  color: rgb(var(--tone-green-500));
 }
 %icon-definition.warning dt::before,
 %composite-row-header .warning dd::before {
   @extend %with-alert-triangle-mask, %as-pseudo;
-  color: $orange-500;
+  color: rgb(var(--tone-orange-500));
 }
 %icon-definition.critical dt::before,
 %composite-row-header .critical dd::before {
   @extend %with-cancel-square-fill-mask, %as-pseudo;
-  color: $red-500;
+  color: rgb(var(--tone-red-500));
 }
 %icon-definition.empty dt::before,
 %composite-row-header .empty dd::before {
   @extend %with-minus-square-fill-mask, %as-pseudo;
-  color: $gray-500;
+  color: rgb(var(--tone-gray-500));
 }
 
 %composite-row-header [rel='me'] dd::before {
   @extend %with-check-circle-fill-mask, %as-pseudo;
-  color: $blue-500;
+  color: rgb(var(--tone-blue-500));
 }
 
 %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 266eb5340..de092e973 100644
--- a/ui/packages/consul-ui/app/components/informed-action/skin.scss
+++ b/ui/packages/consul-ui/app/components/informed-action/skin.scss
@@ -1,13 +1,13 @@
 %informed-action {
   & {
-    border-radius: $decor-radius-200;
-    border: $decor-border-100;
-    border-color: $gray-300;
-    background-color: $white;
+    border-radius: var(--decor-radius-200);
+    border: var(--decor-border-100);
+    border-color: rgb(var(--tone-gray-300));
+    background-color: rgb(var(--white));
   }
   > div {
-    border-top-left-radius: $decor-radius-200;
-    border-top-right-radius: $decor-radius-200;
+    border-top-left-radius: var(--decor-radius-200);
+    border-top-right-radius: var(--decor-radius-200);
     cursor: default;
   }
   header {
@@ -18,52 +18,52 @@
   }
   p {
     @extend %p2;
-    color: $black;
+    color: var(--black);
   }
   > ul {
     list-style: none;
   }
   > ul > li > *:hover,
   > ul > li > *:focus {
-    background-color: $gray-100;
+    background-color: rgb(var(--tone-gray-100));
   }
   /* variants */
   &.info {
     header {
-      color: $blue-700;
+      color: rgb(var(--tone-blue-700));
     }
     header::before {
       @extend %with-info-circle-fill-mask, %as-pseudo;
-      background-color: $blue-500;
+      background-color: rgb(var(--tone-blue-500));
       margin-right: 5px;
     }
     > div {
-      background-color: $blue-010;
+      background-color: rgb(var(--tone-blue-010));
     }
   }
   &.dangerous {
     header {
-      color: $red-700;
+      color: rgb(var(--tone-red-700));
     }
     header::before {
       @extend %with-alert-triangle-mask, %as-pseudo;
-      background-color: $red-500;
+      background-color: rgb(var(--tone-red-500));
     }
     > div {
-      background-color: $red-010;
+      background-color: rgb(var(--tone-red-010));
     }
   }
   &.warning {
     header {
-      color: $orange-700;
+      color: rgb(var(--tone-orange-700));
     }
     header::before {
       @extend %with-alert-triangle-mask, %as-pseudo;
-      background-color: $yellow-500;
+      background-color: rgb(var(--tone-yellow-500));
       margin-right: 5px;
     }
     > div {
-      background-color: $yellow-050;
+      background-color: rgb(var(--tone-yellow-050));
     }
   }
   /* brands */
@@ -74,7 +74,7 @@
   }
   /**/
   > ul > .action > * {
-    color: $blue-500;
+    color: rgb(var(--tone-blue-500));
   }
   > 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 dee30ebc7..a2bf0d982 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: $color-failure;
+  color: rgb(var(--color-failure));
 }
 %inline-alert::before {
   font-size: 14px;
@@ -22,15 +22,15 @@
 }
 %inline-alert-success::before {
   @extend %with-check-circle-fill-mask;
-  color: $green-500;
+  color: rgb(var(--tone-green-500));
 }
 %inline-alert-error::before {
   @extend %with-cancel-square-fill-mask;
-  color: $red-500;
+  color: rgb(var(--tone-red-500));
 }
 %inline-alert-warning::before {
   @extend %with-alert-triangle-mask;
-  color: $orange-500;
+  color: rgb(var(--tone-orange-500));
   /* 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: $blue-500;
+  color: rgb(var(--tone-blue-500));
 }
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 c1a0cfd40..3a013be65 100644
--- a/ui/packages/consul-ui/app/components/inline-code/skin.scss
+++ b/ui/packages/consul-ui/app/components/inline-code/skin.scss
@@ -1,6 +1,6 @@
 %inline-code {
   border: 1px solid;
-  color: var(--brand-600, inherit);
-  background-color: var(--gray-050);
-  border-color: var(--gray-200);
+  color: var(rgb(var(--brand-600)), inherit);
+  background-color: rgb(var(--tone-gray-050));
+  border-color: rgb(var(--tone-gray-200));
 }
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 f94cba340..e6e1632c4 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: var(--gray-200);
+  border-color: rgb(var(--tone-gray-200));
 }
 %list-collection-partial-button {
   cursor: pointer;
-  background-color: var(--gray-050);
-  color: var(--blue-500);
+  background-color: rgb(var(--tone-gray-050));
+  color: rgb(var(--tone-blue-500));
 }
 %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 9c79bafdc..12d6ed6fd 100644
--- a/ui/packages/consul-ui/app/components/list-row/skin.scss
+++ b/ui/packages/consul-ui/app/components/list-row/skin.scss
@@ -1,30 +1,30 @@
 %list-row {
   list-style-type: none;
-  border: $decor-border-100;
-  border-top-color: $transparent;
-  border-bottom-color: $gray-200;
-  border-right-color: $transparent;
-  border-left-color: $transparent;
+  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);
 }
 %list-row-intent {
-  border-color: $gray-200;
+  border-color: rgb(var(--tone-gray-200));
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-  border-top-color: $transparent;
+  border-top-color: var(--transparent);
   cursor: pointer;
 }
 %list-row-header {
-  color: $black;
+  color: var(--black);
 }
 %list-row-header * {
   color: inherit;
 }
 %list-row-detail {
-  color: $gray-500;
+  color: rgb(var(--tone-gray-500));
 }
 %list-row-detail a {
   color: inherit;
 }
 %list-row-detail a:hover {
-  color: $color-action;
+  color: rgb(var(--color-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 96e21cf93..2b789d42e 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: var(--gray-000);
+  background-color: rgb(var(--tone-gray-000));
 }
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 10506efc9..4f3bc061c 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
@@ -1,5 +1,5 @@
 %main-nav-horizontal-action {
-  border-radius: $decor-radius-200;
+  border-radius: var(--decor-radius-200);
   cursor: pointer;
 }
 %main-nav-horizontal-action > a {
@@ -16,11 +16,11 @@
   cursor: pointer;
 }
 %main-nav-horizontal-toggle-button::before {
-  background-color: var(--gray-800);
+  background-color: rgb(var(--tone-gray-800));
 }
 %main-nav-horizontal-action,
 %main-nav-horizontal-action-intent,
 %main-nav-horizontal-action-active {
-  color: var(--gray-600);
+  color: rgb(var(--tone-gray-600));
 }
 /**/
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 9359a4831..12039d3bb 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: var(--gray-600);
+  background-color: rgb(var(--tone-gray-600));
   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 21b350712..8d8a8e3a3 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: var(--gray-600);
+    background-color: rgb(var(--tone-gray-600));
     padding-top: 64px;
   }
   // TODO: Reduce the need for these debug overrides
diff --git a/ui/packages/consul-ui/app/components/main-nav-vertical/index.scss b/ui/packages/consul-ui/app/components/main-nav-vertical/index.scss
index ab2ab88f8..9a55c3b40 100644
--- a/ui/packages/consul-ui/app/components/main-nav-vertical/index.scss
+++ b/ui/packages/consul-ui/app/components/main-nav-vertical/index.scss
@@ -30,14 +30,14 @@
   border-top-right-radius: 0;
 }
 %main-nav-vertical .popover-menu > label > button {
-  border: $decor-border-100;
-  border-color: var(--gray-500);
-  color: var(--gray-999);
+  border: var(--decor-border-100);
+  border-color: rgb(var(--tone-gray-500));
+  color: rgb(var(--tone-gray-999));
   width: calc(100% - 20px);
   z-index: 100;
   text-align: left;
   padding: 10px;
-  border-radius: $decor-radius-100;
+  border-radius: var(--decor-radius-100);
 }
 %main-nav-vertical .popover-menu > label > button::after {
   float: right;
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 96842a662..fccb9cb9b 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
@@ -1,7 +1,7 @@
 %main-nav-vertical-action {
   cursor: pointer;
-  border-right: $decor-border-400;
-  border-color: $transparent;
+  border-right: var(--decor-border-400);
+  border-color: var(--transparent);
   @extend %p1;
 }
 %main-nav-vertical-action > a {
@@ -11,7 +11,7 @@
 %main-nav-vertical [role='separator'] {
   @extend %p3;
   text-transform: uppercase;
-  font-weight: $typo-weight-medium;
+  font-weight: var(--typo-weight-medium);
 }
 %main-nav-vertical-action-intent {
   text-decoration: underline;
@@ -20,25 +20,25 @@
   text-decoration: none;
 }
 %main-nav-vertical {
-  background-color: var(--gray-050);
-  color: var(--gray-700);
+  background-color: rgb(var(--tone-gray-050));
+  color: rgb(var(--tone-gray-700));
 }
 %main-nav-vertical li:not([role='separator']) > span {
-  color: var(--gray-300);
+  color: rgb(var(--tone-gray-300));
 }
 %main-nav-vertical [role='separator'] {
-  color: var(--gray-600);
+  color: rgb(var(--tone-gray-600));
 }
 %main-nav-vertical-action {
-  color: var(--gray-800);
+  color: rgb(var(--tone-gray-800));
 }
 %main-nav-vertical-action-intent,
 %main-nav-vertical-action-active {
-  color: var(--gray-999);
+  color: rgb(var(--tone-gray-999));
 }
 %main-nav-vertical-action-active {
-  background-color: var(--gray-150);
-  border-color: var(--gray-999);
+  background-color: rgb(var(--tone-gray-150));
+  border-color: rgb(var(--tone-gray-999));
 }
 %main-nav-vertical .popover-menu[aria-label]::before {
   content: attr(aria-label);
@@ -48,17 +48,17 @@
 }
 %main-nav-vertical .is-local span:last-of-type {
   @extend %pill-200;
-  color: var(--gray-000);
-  background-color: var(--gray-500);
+  color: rgb(var(--tone-gray-000));
+  background-color: rgb(var(--tone-gray-500));
 }
 %main-nav-vertical .nspaces .menu-panel > div {
-  background-color: var(--gray-050);
-  color: var(--gray-999);
+  background-color: rgb(var(--tone-gray-050));
+  color: rgb(var(--tone-gray-999));
   padding-left: 36px;
 }
 %main-nav-vertical .nspaces .menu-panel > div::before {
   @extend %with-info-circle-fill-mask, %as-pseudo;
-  color: $blue-500;
+  color: rgb(var(--tone-blue-500));
   /* sizes the icon not the text */
   font-size: 1.1em;
 }
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 998a39a8f..aff64474c 100644
--- a/ui/packages/consul-ui/app/components/menu-panel/skin.scss
+++ b/ui/packages/consul-ui/app/components/menu-panel/skin.scss
@@ -1,13 +1,13 @@
 %menu-panel {
-  border: $decor-border-100;
-  border-radius: $decor-radius-200;
-  box-shadow: $decor-elevation-600;
+  border: var(--decor-border-100);
+  border-radius: var(--decor-radius-200);
+  box-shadow: var(--decor-elevation-600);
 }
 %menu-panel > ul > li {
   list-style-type: none;
 }
 %menu-panel dt {
-  font-weight: $typo-weight-bold;
+  font-weight: var(--typo-weight-bold);
 }
 %menu-panel dl,
 %menu-panel-header {
@@ -16,33 +16,33 @@
 %menu-panel-separator {
   @extend %p3;
   text-transform: uppercase;
-  font-weight: $typo-weight-medium;
+  font-weight: var(--typo-weight-medium);
 }
 %menu-panel dt span {
-  font-weight: $typo-weight-normal;
+  font-weight: var(--typo-weight-normal);
 }
 %menu-panel-header + ul,
 %menu-panel-separator:not(:first-child) {
-  border-top: $decor-border-100;
+  border-top: var(--decor-border-100);
 }
 %menu-panel .is-active > *::after {
   @extend %with-check-plain-mask, %as-pseudo;
 }
 %menu-panel {
-  border-color: var(--gray-300);
-  background-color: var(--gray-000);
+  border-color: rgb(var(--tone-gray-300));
+  background-color: rgb(var(--tone-gray-000));
 }
 %menu-panel dt,
 %menu-panel dd {
-  color: var(--gray-800);
+  color: rgb(var(--tone-gray-800));
 }
 %menu-panel dt span {
-  color: var(--gray-600);
+  color: rgb(var(--tone-gray-600));
 }
 %menu-panel-separator {
-  color: var(--gray-600);
+  color: rgb(var(--tone-gray-600));
 }
 %menu-panel-header + ul,
 %menu-panel-separator:not(:first-child) {
-  border-color: var(--gray-300);
+  border-color: rgb(var(--tone-gray-300));
 }
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 867ea46d6..171752150 100644
--- a/ui/packages/consul-ui/app/components/modal-dialog/skin.scss
+++ b/ui/packages/consul-ui/app/components/modal-dialog/skin.scss
@@ -1,28 +1,28 @@
 %modal-dialog.warning header {
-  background-color: $yellow-050;
-  border-color: $yellow-500;
-  color: $yellow-800;
+  background-color: rgb(var(--tone-yellow-050));
+  border-color: rgb(var(--tone-yellow-500));
+  color: rgb(var(--tone-yellow-800));
 }
 %modal-dialog.warning header > *:not(label) {
-  font-size: $typo-size-500;
-  font-weight: $typo-weight-semibold;
+  font-size: var(--typo-size-500);
+  font-weight: var(--typo-weight-semibold);
 }
 %modal-dialog.warning header::before {
   @extend %with-alert-triangle-mask, %as-pseudo;
-  color: $yellow-500;
+  color: rgb(var(--tone-yellow-500));
   float: left;
   margin-top: 2px;
   margin-right: 3px;
 }
 %modal-dialog-overlay {
-  background-color: rgba($white, 0.9);
+  background-color: rgb(var(--white) / 90%);
 }
 %modal-window {
-  box-shadow: $decor-elevation-800;
+  box-shadow: var(--decor-elevation-800);
 }
 %modal-window {
   /*%frame-gray-000*/
-  background-color: var(--gray-000);
+  background-color: rgb(var(--tone-gray-000));
 }
 %modal-window > footer,
 %modal-window > header {
@@ -35,7 +35,7 @@
 .modal-dialog-body,
 %modal-window > footer,
 %modal-window > header {
-  border-color: var(--gray-300);
+  border-color: rgb(var(--tone-gray-300));
 }
 .modal-dialog-body {
   border-style: solid;
@@ -50,9 +50,9 @@
 %modal-window > header [data-a11y-dialog-hide] {
   @extend %with-cancel-plain-icon;
   cursor: pointer;
-  border: $decor-border-100;
+  border: var(--decor-border-100);
   /*%frame-gray-050??*/
-  background-color: var(--gray-050);
-  border-color: var(--gray-300);
-  border-radius: $decor-radius-100;
+  background-color: rgb(var(--tone-gray-050));
+  border-color: rgb(var(--tone-gray-300));
+  border-radius: var(--decor-radius-100);
 }
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 06cb20f75..4e6b0ba59 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,15 +14,15 @@
   padding: 7px;
 }
 %more-popover-menu-trigger > * {
-  background-color: $transparent;
-  border-radius: $decor-radius-100;
+  background-color: var(--transparent);
+  border-radius: var(--decor-radius-100);
   width: 30px;
   height: 30px;
   font-size: 0;
 }
 %more-popover-menu-trigger > *::after {
   @extend %with-more-horizontal-mask, %as-pseudo;
-  background-color: $gray-900;
+  background-color: rgb(var(--tone-gray-900));
   width: 16px;
   height: 16px;
   position: absolute;
@@ -32,9 +32,9 @@
   margin-left: -8px;
 }
 %more-popover-menu-trigger > *:active {
-  background-color: $gray-100;
+  background-color: rgb(var(--tone-gray-100));
 }
 %more-popover-menu-trigger > *:hover,
 %more-popover-menu-trigger > *:focus {
-  background-color: $gray-050;
+  background-color: rgb(var(--tone-gray-050));
 }
diff --git a/ui/packages/consul-ui/app/components/notice/skin.scss b/ui/packages/consul-ui/app/components/notice/skin.scss
index d1f2c6229..5d9927247 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: $decor-radius-100;
-  border: $decor-border-100;
-  color: $black;
+  border-radius: var(--decor-radius-100);
+  border: var(--decor-border-100);
+  color: var(--black);
 }
 %notice::before {
   @extend %as-pseudo;
@@ -11,7 +11,7 @@
 }
 %notice footer * {
   @extend %p3;
-  font-weight: $typo-weight-bold;
+  font-weight: var(--typo-weight-bold);
 }
 %notice-success,
 %notice-info,
@@ -21,51 +21,51 @@
   @extend %notice;
 }
 %notice-success {
-  background-color: $green-050;
-  border-color: $green-500;
+  background-color: rgb(var(--tone-green-050));
+  border-color: rgb(var(--tone-green-500));
 }
 %notice-info {
-  border-color: $blue-100;
-  background-color: $gray-010;
+  border-color: rgb(var(--tone-blue-100));
+  background-color: rgb(var(--tone-gray-010));
 }
 %notice-info header * {
-  color: $blue-700;
+  color: rgb(var(--tone-blue-700));
 }
 %notice-highlight {
-  background-color: $gray-050;
-  border-color: $gray-300;
+  background-color: rgb(var(--tone-gray-050));
+  border-color: rgb(var(--tone-gray-300));
 }
 %notice-info header * {
-  color: $gray-700;
+  color: rgb(var(--tone-gray-700));
 }
 %notice-warning {
-  border-color: $yellow-100;
-  background-color: $yellow-050;
+  border-color: rgb(var(--tone-yellow-100));
+  background-color: rgb(var(--tone-yellow-050));
 }
 %notice-warning header * {
-  color: $yellow-800;
+  color: rgb(var(--tone-yellow-800));
 }
 %notice-error {
-  background-color: $red-050;
-  border-color: $red-500;
+  background-color: rgb(var(--tone-red-050));
+  border-color: rgb(var(--tone-red-500));
 }
 %notice-success::before {
   @extend %with-check-circle-fill-mask;
-  color: $green-500;
+  color: rgb(var(--tone-green-500));
 }
 %notice-info::before {
   @extend %with-info-circle-fill-mask;
-  color: $blue-500;
+  color: rgb(var(--tone-blue-500));
 }
 %notice-highlight::before {
   @extend %with-star-fill-mask;
-  color: $yellow-500;
+  color: rgb(var(--tone-yellow-500));
 }
 %notice-warning::before {
   @extend %with-alert-triangle-mask;
-  color: $orange-500;
+  color: rgb(var(--tone-orange-500));
 }
 %notice-error::before {
   @extend %with-cancel-square-fill-mask;
-  color: $red-500;
+  color: rgb(var(--tone-red-500));
 }
diff --git a/ui/packages/consul-ui/app/components/overlay/none.scss b/ui/packages/consul-ui/app/components/overlay/none.scss
index 039f0ffcc..e4084cc8b 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: $white;
-    border-radius: $decor-radius-100;
-    box-shadow: $decor-elevation-400;
+    background-color: rgb(var(--white));
+    border-radius: var(--decor-radius-100);
+    box-shadow: var(--decor-elevation-400);
   }
   .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 2cd5136b6..264734528 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: $white;
+    background-color: rgb(var(--white));
     width: calc(1px + var(--size));
     height: calc(1px + var(--size));
-    border: $decor-border-100;
-    border-color: $gray-300;
+    border: var(--decor-border-100);
+    border-color: rgb(var(--tone-gray-300));
   }
   // potential icon
   .tippy-arrow::after {
@@ -23,8 +23,8 @@
       border-bottom-left-radius: 0 !important;
     }
     .tippy-arrow::before {
-      border-bottom-left-radius: $decor-radius-200;
-      border-bottom-right-radius: $decor-radius-200;
+      border-bottom-left-radius: var(--decor-radius-200);
+      border-bottom-right-radius: var(--decor-radius-200);
       border-top: 0 !important;
     }
     .tippy-arrow::after {
@@ -39,8 +39,8 @@
       border-top-left-radius: 0 !important;
     }
     .tippy-arrow::before {
-      border-top-left-radius: $decor-radius-200;
-      border-top-right-radius: $decor-radius-200;
+      border-top-left-radius: var(--decor-radius-200);
+      border-top-right-radius: var(--decor-radius-200);
       border-bottom: 0 !important;
     }
     .tippy-arrow::after {
diff --git a/ui/packages/consul-ui/app/components/pill/skin.scss b/ui/packages/consul-ui/app/components/pill/skin.scss
index 5b53403b4..f58e59970 100644
--- a/ui/packages/consul-ui/app/components/pill/skin.scss
+++ b/ui/packages/consul-ui/app/components/pill/skin.scss
@@ -1,3 +1,3 @@
 %pill {
-  border-radius: $decor-radius-100;
+  border-radius: var(--decor-radius-100);
 }
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 a7212c2ae..045978937 100644
--- a/ui/packages/consul-ui/app/components/popover-select/index.scss
+++ b/ui/packages/consul-ui/app/components/popover-select/index.scss
@@ -23,19 +23,19 @@
 
 %popover-select .value-passing button::before {
   @extend %with-check-circle-fill-mask, %as-pseudo;
-  color: $green-500;
+  color: rgb(var(--tone-green-500));
 }
 %popover-select .value-warning button::before {
   @extend %with-alert-triangle-mask, %as-pseudo;
-  color: $orange-500;
+  color: rgb(var(--tone-orange-500));
 }
 %popover-select .value-critical button::before {
   @extend %with-cancel-square-fill-mask, %as-pseudo;
-  color: $red-500;
+  color: rgb(var(--tone-red-500));
 }
 %popover-select .value-empty button::before {
   @extend %with-minus-square-fill-mask, %as-pseudo;
-  color: $gray-400;
+  color: rgb(var(--tone-gray-400));
 }
 %popover-select.type-source li button {
   text-transform: capitalize;
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 21417a492..c52a02605 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: $decor-border-100;
-  border-radius: $decor-radius-100;
-  border-color: $gray-200;
-  box-shadow: $decor-elevation-400;
-  color: $gray-500;
+  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));
   cursor: pointer;
 }
 %radio-card.checked {
-  border-color: $blue-500;
+  border-color: rgb(var(--tone-blue-500));
 }
 %radio-card > :first-child {
-  background-color: $gray-050;
+  background-color: rgb(var(--tone-gray-050));
 }
 %radio-card.checked > :first-child {
-  background-color: $blue-050;
+  background-color: rgb(var(--tone-blue-050));
 }
 %radio-card header {
   margin-bottom: 0.5em;
 }
 %radio-card header {
-  color: $black;
+  color: var(--black);
 }
 %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 588f5121d..99ec3cff0 100644
--- a/ui/packages/consul-ui/app/components/search-bar/index.scss
+++ b/ui/packages/consul-ui/app/components/search-bar/index.scss
@@ -1,8 +1,8 @@
 .search-bar {
   &-status {
     & {
-      border-bottom: $decor-border-100;
-      border-bottom-color: $gray-200;
+      border-bottom: var(--decor-border-100);
+      border-bottom-color: rgb(var(--tone-gray-200));
     }
     .remove-all button {
       @extend %anchor;
@@ -10,16 +10,16 @@
     li:not(.remove-all) {
       & {
         @extend %pill-200;
-        border: $decor-border-100;
-        border-color: $gray-200;
-        color: $gray-600;
+        border: var(--decor-border-100);
+        border-color: rgb(var(--tone-gray-200));
+        color: rgb(var(--tone-gray-600));
       }
       button {
         cursor: pointer;
       }
       button::before {
         @extend %with-cancel-plain-mask, %as-pseudo;
-        color: $gray-600;
+        color: rgb(var(--tone-gray-600));
         margin-top: 1px;
         margin-right: 0.2rem;
       }
diff --git a/ui/packages/consul-ui/app/components/secret-button/index.scss b/ui/packages/consul-ui/app/components/secret-button/index.scss
index 7030f1f74..11e153b83 100644
--- a/ui/packages/consul-ui/app/components/secret-button/index.scss
+++ b/ui/packages/consul-ui/app/components/secret-button/index.scss
@@ -15,7 +15,7 @@
 }
 %secret-button span::before {
   @extend %with-visibility-show-mask, %as-pseudo;
-  background-color: $gray-500;
+  background-color: rgb(var(--tone-gray-500));
 }
 %secret-button input:checked + span::before {
   @extend %with-visibility-hide-mask;
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 504a6cb9d..17c3dc400 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 $white;
-  color: $white;
-  background-color: $blue-500;
+  outline: 1px solid rgb(var(--white));
+  color: rgb(var(--white));
+  background-color: rgb(var(--tone-blue-500));
 }
 %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 dca7f138e..9ab9704cc 100644
--- a/ui/packages/consul-ui/app/components/sliding-toggle/skin.scss
+++ b/ui/packages/consul-ui/app/components/sliding-toggle/skin.scss
@@ -3,7 +3,7 @@
   cursor: pointer;
 }
 %sliding-toggle label span::after {
-  border-radius: $decor-radius-full;
+  border-radius: var(--decor-radius-full);
 }
 %sliding-toggle label span::before {
   border-radius: 7px;
@@ -15,16 +15,16 @@
   @extend %sliding-toggle-negative;
 }
 %sliding-toggle label span {
-  color: $gray-900;
+  color: rgb(var(--tone-gray-900));
 }
 %sliding-toggle label span::after {
-  background-color: $white;
+  background-color: rgb(var(--white));
 }
 %sliding-toggle label input:checked + span::before,
 %sliding-toggle-negative label input + span::before {
-  background-color: $blue-500;
+  background-color: rgb(var(--tone-blue-500));
 }
 %sliding-toggle label span::before,
 %sliding-toggle-negative label input:checked + span::before {
-  background-color: $gray-300;
+  background-color: rgb(var(--tone-gray-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 fc1b8c92e..76f480d80 100644
--- a/ui/packages/consul-ui/app/components/tab-nav/skin.scss
+++ b/ui/packages/consul-ui/app/components/tab-nav/skin.scss
@@ -10,29 +10,29 @@
 }
 %tab-nav {
   /* %frame-transparent-something */
-  border-bottom: $decor-border-100;
+  border-bottom: var(--decor-border-100);
 }
 %with-animated-tab-selection ul::after,
 %tab-button {
-  border-bottom: $decor-border-300;
+  border-bottom: var(--decor-border-300);
 }
 %tab-nav {
   /* %frame-transparent-something */
-  border-color: var(--gray-200);
+  border-color: rgb(var(--tone-gray-200));
 }
 %tab-button {
   @extend %with-transition-500;
   transition-property: background-color, border-color;
   border-color: var(--transparent);
-  color: var(--gray-500);
+  color: rgb(var(--tone-gray-500));
 }
 %tab-button-intent,
 %tab-button-active {
   /* %frame-gray-something */
-  background-color: var(--gray-100);
+  background-color: rgb(var(--tone-gray-100));
 }
 %tab-button-intent {
-  border-color: var(--gray-300);
+  border-color: rgb(var(--tone-gray-300));
 }
 %tab-nav.animatable .selected a {
   border-color: var(--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 027e47005..23a57f0a1 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: $gray-500;
+  color: rgb(var(--tone-gray-500));
   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: $decor-elevation-300;
+  box-shadow: var(--decor-elevation-300);
 }
 
 %table td.folder::before {
   @extend %with-folder-outline-mask, %as-pseudo;
-  background-color: $gray-300;
+  background-color: rgb(var(--tone-gray-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 8b022e823..4858bce80 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: $gray-500;
+  color: rgb(var(--tone-gray-500));
 }
diff --git a/ui/packages/consul-ui/app/components/table/skin.scss b/ui/packages/consul-ui/app/components/table/skin.scss
index 2d038d52e..6e8ff93d7 100644
--- a/ui/packages/consul-ui/app/components/table/skin.scss
+++ b/ui/packages/consul-ui/app/components/table/skin.scss
@@ -1,17 +1,17 @@
 %table th,
 %table td {
-  border-bottom: $decor-border-100;
+  border-bottom: var(--decor-border-100);
 }
 %table th {
-  border-color: $gray-300;
+  border-color: rgb(var(--tone-gray-300));
 }
 %table td {
-  border-color: $gray-200;
-  color: $gray-500;
+  border-color: rgb(var(--tone-gray-200));
+  color: rgb(var(--tone-gray-500));
 }
 %table th,
 %table td strong {
-  color: $gray-600;
+  color: rgb(var(--tone-gray-600));
 }
 /* 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: $gray-900;
+  color: rgb(var(--tone-gray-900));
 }
 %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 87fa1a415..53def1879 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 $gray-300;
-  border-radius: $decor-radius-100;
-  box-shadow: $decor-elevation-600;
+  border: 1px solid rgb(var(--tone-gray-300));
+  border-radius: var(--decor-radius-100);
+  box-shadow: var(--decor-elevation-600);
   margin-bottom: 20px;
 }
 %tabular-detail::before,
 %tabular-detail > div,
 %tabular-detail > label {
-  background-color: $white;
+  background-color: rgb(var(--white));
 }
 %tabular-detail > label::before {
   transform: rotate(180deg);
 }
 // this is here as its a fake border
 %tabular-detail::before {
-  background: $gray-200;
+  background: rgb(var(--tone-gray-200));
   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 71de9caf5..5113a1be3 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: var(--gray-300) !important;
+    border-color: rgb(var(--tone-gray-300)) !important;
   }
   dt,
   dd {
-    border-color: var(--gray-300) !important;
-    color: $black !important;
+    border-color: rgb(var(--tone-gray-300)) !important;
+    color: var(--black) !important;
   }
   dt {
-    font-weight: $typo-weight-bold;
+    font-weight: var(--typo-weight-bold);
   }
   dd .copy-button button::before {
-    background-color: $black;
+    background-color: var(--black);
   }
   dt.type + dd span::before {
     @extend %with-info-circle-outline-mask, %as-pseudo;
-    background-color: var(--gray-500);
+    background-color: rgb(var(--tone-gray-500));
   }
 }
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 dfa435112..6ded1d9a3 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: var(--gray-500);
+  color: rgb(var(--tone-gray-500));
 }
 %tag-list dd {
   @extend %csv-list;
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 d85580d36..7a05618ed 100644
--- a/ui/packages/consul-ui/app/components/toggle-button/skin.scss
+++ b/ui/packages/consul-ui/app/components/toggle-button/skin.scss
@@ -1,12 +1,12 @@
 %toggle-button {
-  border-radius: $decor-radius-100;
+  border-radius: var(--decor-radius-100);
   cursor: pointer;
 }
 %toggle-button-intent {
-  background-color: $gray-050;
+  background-color: rgb(var(--tone-gray-050));
 }
 %toggle-button-active {
-  background-color: $gray-100;
+  background-color: rgb(var(--tone-gray-100));
 }
 %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 3d112e4e5..619da5172 100644
--- a/ui/packages/consul-ui/app/components/tooltip-panel/skin.scss
+++ b/ui/packages/consul-ui/app/components/tooltip-panel/skin.scss
@@ -7,8 +7,8 @@
   width: 12px;
   height: 12px;
   background: white;
-  border-top: 1px solid $gray-300;
-  border-right: 1px solid $gray-300;
+  border-top: 1px solid rgb(var(--tone-gray-300));
+  border-right: 1px solid rgb(var(--tone-gray-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 20e64e2aa..a7e308ad2 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: $gray-700;
-    color: $white;
+    background-color: rgb(var(--tone-gray-700));
+    color: rgb(var(--white));
   }
 }
 %tooltip-tail {
   --size: 5px;
   & {
-    color: $gray-700;
+    color: rgb(var(--tone-gray-700));
     width: calc(var(--size) * 2);
     height: calc(var(--size) * 2);
   }
   &::before {
-    border-color: $transparent;
+    border-color: var(--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 be0df77f7..0212f144a 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,15 +5,15 @@
 #upstream-container .topology-metrics-card,
 #downstream-container .topology-metrics-card {
   display: block;
-  color: $gray-700;
+  color: rgb(var(--tone-gray-700));
   overflow: hidden;
-  background-color: $white;
-  border-radius: $decor-radius-100;
-  border: 1px solid $gray-200;
+  background-color: rgb(var(--white));
+  border-radius: var(--decor-radius-100);
+  border: 1px solid rgb(var(--tone-gray-200));
   p {
     padding: 12px 12px 0 12px;
-    font-size: $typo-size-500;
-    font-weight: $typo-weight-semibold;
+    font-size: var(--typo-size-500);
+    font-weight: var(--typo-weight-semibold);
     margin-bottom: 0 !important;
   }
   p.empty {
@@ -26,7 +26,7 @@
       margin-right: 8px;
     }
     dd {
-      color: $gray-700;
+      color: rgb(var(--tone-gray-700));
     }
     span {
       margin-right: 8px;
@@ -53,23 +53,23 @@
     }
     .nspace dt::before,
     .health dt::before {
-      background-color: $gray-500;
+      background-color: rgb(var(--tone-gray-500));
     }
     .passing::before {
       @extend %with-check-circle-fill-mask, %as-pseudo;
-      background-color: $green-500;
+      background-color: rgb(var(--tone-green-500));
     }
     .warning::before {
       @extend %with-alert-triangle-mask, %as-pseudo;
-      background-color: $orange-500;
+      background-color: rgb(var(--tone-orange-500));
     }
     .critical::before {
       @extend %with-cancel-square-fill-mask, %as-pseudo;
-      background-color: $red-500;
+      background-color: rgb(var(--tone-red-500));
     }
     .empty::before {
       @extend %with-minus-square-fill-mask, %as-pseudo;
-      color: $gray-500;
+      color: rgb(var(--tone-gray-500));
     }
   }
   .details {
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 07813c19d..b4102e081 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: $white;
+    background-color: rgb(var(--white));
     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;
-    background-color: $red-500;
+    background-color: rgb(var(--tone-red-500));
   }
   &.l7 > button::before,
   &.l7 .tippy-arrow::after {
     @extend %with-layers-mask, %as-pseudo;
-    background-color: $gray-300;
+    background-color: rgb(var(--tone-gray-300));
   }
   &.not-defined > button::before,
   &.not-defined .tippy-arrow::after {
     @extend %with-alert-triangle-mask, %as-pseudo;
-    color: $yellow-500;
+    color: rgb(var(--tone-yellow-500));
   }
 }
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 98ec4cced..abd3ed5f2 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,7 +8,7 @@
     font-size: 0.875em;
     line-height: 1.5em;
     font-weight: normal;
-    border: 1px solid $gray-300;
+    border: 1px solid rgb(var(--tone-gray-300));
     background: #fff;
     border-radius: 2px;
     box-sizing: border-box;
@@ -19,7 +19,7 @@
       font-weight: bold;
       font-size: 14px;
       color: #000;
-      border-bottom: 1px solid $gray-200;
+      border-bottom: 1px solid rgb(var(--tone-gray-200));
       margin-bottom: 4px;
       text-align: center;
     }
@@ -31,7 +31,7 @@
     }
 
     .sparkline-tt-sum {
-      border-top: 1px solid $gray-200;
+      border-top: 1px solid rgb(var(--tone-gray-200));
       margin-top: 4px;
       padding: 8px 10px 0 10px;
     }
@@ -58,7 +58,7 @@
     height: 12px;
     left: 15px;
     bottom: -7px;
-    border: 1px solid $gray-300;
+    border: 1px solid rgb(var(--tone-gray-300));
     border-top: 0;
     border-left: 0;
     background: #fff;
@@ -75,7 +75,7 @@
   }
 
   h3 {
-    color: $gray-900;
+    color: rgb(var(--tone-gray-900));
     font-size: 16px;
   }
 
@@ -84,16 +84,16 @@
       font-weight: 600;
     }
     dd {
-      color: $gray-500;
+      color: rgb(var(--tone-gray-500));
     }
   }
 }
 
 .sparkline-key-link {
-  color: $gray-500;
+  color: rgb(var(--tone-gray-500));
 }
 .sparkline-key-link:hover {
-  color: $blue-500;
+  color: rgb(var(--tone-blue-500));
 }
 #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 32b82ac73..92d907c89 100644
--- a/ui/packages/consul-ui/app/components/topology-metrics/skin.scss
+++ b/ui/packages/consul-ui/app/components/topology-metrics/skin.scss
@@ -1,41 +1,41 @@
 .topology-container {
-  color: $gray-700;
+  color: rgb(var(--tone-gray-700));
 }
 
 // Columns/Containers & Lines
 #downstream-container,
 #metrics-container,
 #upstream-container {
-  border: 1px solid $gray-200;
-  border-radius: $decor-radius-100;
+  border: 1px solid rgb(var(--tone-gray-200));
+  border-radius: var(--decor-radius-100);
 }
 #downstream-container,
 #upstream-container {
-  background-color: $gray-100;
+  background-color: rgb(var(--tone-gray-100));
 }
 #downstream-container div:first-child {
   display: inline-flex;
   span::before {
     @extend %with-info-circle-outline-mask, %as-pseudo;
-    background-color: $gray-500;
+    background-color: rgb(var(--tone-gray-500));
   }
 }
 
 // Metrics Container
 #metrics-container {
   div:first-child {
-    background-color: $white;
+    background-color: rgb(var(--white));
   }
   .link {
-    background-color: $gray-100;
+    background-color: rgb(var(--tone-gray-100));
     a {
-      color: $gray-700;
+      color: rgb(var(--tone-gray-700));
     }
     a::before {
-      background-color: $gray-500;
+      background-color: rgb(var(--tone-gray-500));
     }
     a:hover {
-      color: $color-action;
+      color: rgb(var(--color-action));
     }
     .metrics-link::before {
       @extend %with-exit-mask, %as-pseudo;
@@ -50,34 +50,34 @@
 #downstream-lines svg,
 #upstream-lines svg {
   path {
-    fill: $transparent;
+    fill: var(--transparent);
   }
   circle {
-    fill: $white;
+    fill: rgb(var(--white));
   }
   .allow-arrow {
-    fill: $gray-300;
+    fill: rgb(var(--tone-gray-300));
     stroke-linejoin: round;
   }
   path,
   .allow-dot,
   .allow-arrow {
-    stroke: $gray-300;
+    stroke: rgb(var(--tone-gray-300));
     stroke-width: 2;
   }
   path[data-permission='not-defined'] {
     stroke-dasharray: 4;
   }
   path[data-permission='deny'] {
-    stroke: $red-500;
+    stroke: rgb(var(--tone-red-500));
   }
   .deny-dot {
-    stroke: $red-500;
+    stroke: rgb(var(--tone-red-500));
     stroke-width: 2;
   }
   .deny-arrow {
-    fill: $red-500;
-    stroke: $red-500;
+    fill: rgb(var(--tone-red-500));
+    stroke: rgb(var(--tone-red-500));
     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 41436eff1..58943e192 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 var(--gray-200);
+  border-top: 1px solid rgb(var(--tone-gray-200));
   dl {
     display: flex;
     padding-bottom: 12px;
@@ -15,7 +15,7 @@
     line-height: 1.5em !important;
   }
   dd {
-    color: $gray-400 !important;
+    color: rgb(var(--tone-gray-400)) !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 44968d8d8..287925d5e 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: $gray-500;
+  color: rgb(var(--tone-gray-500));
   text-align: center;
   margin: 0 auto !important;
   display: block;
 
   span::before {
     @extend %with-info-circle-outline-mask, %as-pseudo;
-    background-color: $gray-500;
+    background-color: rgb(var(--tone-gray-500));
   }
 }
 
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
index 685b839bb..1de2f5c5c 100644
--- a/ui/packages/consul-ui/app/styles/base/color/base-variables.scss
+++ b/ui/packages/consul-ui/app/styles/base/color/base-variables.scss
@@ -1,142 +1,178 @@
-$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;
-$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;
+: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;
 
-$rose-010: #fff2f8;
-$rose-050: #fff2f8;
-$rose-100: #f8d9e7;
-$rose-200: #f8d9e7;
-$rose-300: #e07eac;
-$rose-400: #e07eac;
-$rose-500: #ca2171;
-$rose-600: #8e134a;
-$rose-700: #8e134a;
-$rose-800: #650d34;
-$rose-900: #650d34;
+  /* 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;
 
-$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;
-$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;
-$teal-050: #ebf8f3;
-$teal-100: #c3ecdc;
-$teal-200: #9bdfc5;
-$teal-300: #74d3ae;
-$teal-400: #4cc697;
-$teal-500: #25ba81;
-$teal-600: #1f996a;
-$teal-700: #187753;
-$teal-800: #11553b;
-$teal-900: #0b3324;
-$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;
-$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;
-$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;
-$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;
-$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;
+  /* 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/frame-placeholders.scss b/ui/packages/consul-ui/app/styles/base/color/frame-placeholders.scss
deleted file mode 100644
index 8ad6757ad..000000000
--- a/ui/packages/consul-ui/app/styles/base/color/frame-placeholders.scss
+++ /dev/null
@@ -1,259 +0,0 @@
-/*TODO: Move this to the reset */
-* {
-  border-width: 0;
-}
-%frame-border-000 {
-  /* 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: $transparent;
-  border-color: var(--decor-brand-600, inherit);
-  color: var(--typo-brand-600, inherit);
-}
-
-/* possibly filter bar */
-/* modal close button */
-%frame-gray-050 {
-  @extend %frame-border-000;
-  background-color: $gray-050;
-  border-color: $gray-300;
-  color: $gray-400;
-}
-/* modal main content */
-%frame-gray-100 {
-  @extend %frame-border-000;
-  background-color: $white;
-  border-color: $gray-300;
-  color: $gray-600; /*  wasn't set */
-}
-/* hover */
-%frame-gray-200 {
-  @extend %frame-border-000;
-  background-color: $transparent;
-  border-color: $gray-700;
-  color: $gray-800;
-}
-%frame-gray-300 {
-  @extend %frame-border-000;
-  background-color: $white;
-  border-color: $gray-700;
-  color: $gray-800;
-}
-/* button */
-/**/
-%frame-gray-400 {
-  @extend %frame-border-000;
-  background-color: $gray-050;
-  border-color: $gray-300;
-  color: $gray-800;
-}
-%frame-gray-500 {
-  @extend %frame-border-000;
-  background-color: $gray-050;
-  border-color: $gray-300;
-  color: $gray-400;
-}
-
-/* tabs */
-%frame-gray-600 {
-  @extend %frame-border-000;
-  background-color: $gray-100;
-  border-color: $gray-500;
-  color: $gray-500;
-}
-/* active */
-%frame-gray-700 {
-  @extend %frame-border-000;
-  background-color: $gray-200;
-  border-color: $gray-700;
-  color: $gray-800;
-}
-/* modal bars */
-%frame-gray-800 {
-  @extend %frame-border-000;
-  background-color: $gray-050;
-  border-color: $gray-300;
-  color: $gray-900;
-}
-%frame-gray-900 {
-  @extend %frame-border-000;
-  background-color: $gray-100;
-  border-color: $gray-300;
-  color: $gray-900;
-}
-
-%frame-yellow-500 {
-  @extend %frame-border-000;
-  background-color: $yellow-050;
-  border-color: $color-warning;
-}
-%frame-yellow-800 {
-  @extend %frame-border-000;
-  background-color: $yellow-500;
-  border-color: $yellow-800;
-  color: $white;
-}
-%frame-green-500 {
-  @extend %frame-border-000;
-  background-color: $green-050;
-  border-color: $green-500;
-  color: $green-500;
-}
-%frame-green-800 {
-  @extend %frame-border-000;
-  background-color: $green-500;
-  border-color: $green-800;
-  color: $white;
-}
-%frame-blue-200 {
-  @extend %frame-border-000;
-  background-color: $white;
-  border-color: $blue-300;
-  color: $blue-300;
-}
-%frame-blue-300 {
-  @extend %frame-border-000;
-  background-color: $white;
-  border-color: $blue-500;
-  color: $blue-500;
-}
-%frame-blue-500 {
-  @extend %frame-border-000;
-  background-color: $blue-050;
-  border-color: $blue-500;
-  color: $blue-800;
-}
-%frame-blue-600 {
-  @extend %frame-border-000;
-  background-color: $blue-200;
-  border-color: $gray-400;
-  color: $blue-050;
-}
-%frame-blue-700 {
-  @extend %frame-border-000;
-  background-color: $blue-400;
-  border-color: $blue-800;
-  color: $white;
-}
-%frame-blue-800 {
-  @extend %frame-border-000;
-  background-color: $blue-500;
-  border-color: $blue-800;
-  color: $white;
-}
-%frame-blue-900 {
-  @extend %frame-border-000;
-  background-color: $blue-700;
-  border-color: $blue-800;
-  color: $white;
-}
-%frame-red-300 {
-  @extend %frame-border-000;
-  background-color: $transparent;
-  border-color: $red-500;
-  color: $red-500;
-}
-%frame-red-500 {
-  @extend %frame-border-000;
-  background-color: $red-050;
-  border-color: $red-500;
-  color: $red-800;
-}
-%frame-red-600 {
-  @extend %frame-border-000;
-  background-color: $red-200;
-  border-color: $gray-400;
-  color: $white;
-}
-%frame-red-700 {
-  @extend %frame-border-000;
-  background-color: $red-500;
-  border-color: $red-800;
-  color: $white;
-}
-%frame-red-800 {
-  @extend %frame-border-000;
-  background-color: $red-500;
-  border-color: $red-800;
-  color: $white;
-}
-%frame-red-900 {
-  @extend %frame-border-000;
-  background-color: $red-700;
-  border-color: $red-800;
-  color: $white;
-}
-%frame-magenta-300 {
-  @extend %frame-border-000;
-  background-color: $white;
-  border-color: $magenta-600;
-  color: $magenta-600;
-}
-%frame-magenta-800 {
-  @extend %frame-border-000;
-  background-color: $magenta-500;
-  border-color: $magenta-800;
-  color: $white;
-}
-%frame-steel-300 {
-  @extend %frame-border-000;
-  background-color: $white;
-  border-color: $steel-600;
-  color: $steel-600;
-}
-%frame-steel-800 {
-  @extend %frame-border-000;
-  background-color: $steel-500;
-  border-color: $steel-800;
-  color: $white;
-}
-%frame-cobalt-300 {
-  @extend %frame-border-000;
-  background-color: $white;
-  border-color: $cobalt-600;
-  color: $cobalt-600;
-}
-%frame-cobalt-800 {
-  @extend %frame-border-000;
-  background-color: $cobalt-500;
-  border-color: $cobalt-800;
-  color: $white;
-}
-%frame-indigo-300 {
-  @extend %frame-border-000;
-  background-color: $white;
-  border-color: $indigo-600;
-  color: $indigo-600;
-}
-%frame-indigo-800 {
-  @extend %frame-border-000;
-  background-color: $indigo-500;
-  border-color: $indigo-800;
-  color: $white;
-}
-%frame-teal-300 {
-  @extend %frame-border-000;
-  background-color: $white;
-  border-color: $teal-600;
-  color: $teal-600;
-}
-%frame-teal-800 {
-  @extend %frame-border-000;
-  background-color: $teal-500;
-  border-color: $teal-800;
-  color: $white;
-}
-%frame-cyan-300 {
-  @extend %frame-border-000;
-  background-color: $white;
-  border-color: $cyan-600;
-  color: $cyan-600;
-}
-%frame-cyan-800 {
-  @extend %frame-border-000;
-  background-color: $cyan-500;
-  border-color: $cyan-800;
-  color: $white;
-}
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
new file mode 100644
index 000000000..d2f7659e1
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/color/hex-variables.scss
@@ -0,0 +1,178 @@
+: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 8de1216ee..decc200b4 100644
--- a/ui/packages/consul-ui/app/styles/base/color/index.scss
+++ b/ui/packages/consul-ui/app/styles/base/color/index.scss
@@ -1,4 +1,7 @@
+/*@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 './frame-placeholders';
-@import './theme-placeholders';
+/*@import './theme-placeholders';*/
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
new file mode 100644
index 000000000..9e380b4b3
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/color/magenta/frame-placeholders.scss
@@ -0,0 +1,13 @@
+%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
new file mode 100644
index 000000000..3948997e7
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/color/magenta/index.scss
@@ -0,0 +1,6 @@
+@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
new file mode 100644
index 000000000..53a1d2077
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/color/magenta/themes/dark-high-contrast.scss
@@ -0,0 +1,18 @@
+%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
new file mode 100644
index 000000000..85a300e4a
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/color/magenta/themes/dark.scss
@@ -0,0 +1,18 @@
+%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
new file mode 100644
index 000000000..bc0d03a80
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/color/magenta/themes/light-high-contrast.scss
@@ -0,0 +1,18 @@
+%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
new file mode 100644
index 000000000..9c589e09e
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/color/magenta/themes/light.scss
@@ -0,0 +1,18 @@
+%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 14d545e43..0681962e4 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,12 +1,27 @@
-$color-primary: $blue-500;
-$color-dangerous: $red-500;
-$color-primary-disabled: $blue-500;
-$color-transparent: transparent;
-$color-neutral: $gray-500;
-$color-action: $blue-500;
-$color-info: $blue-500;
-$color-success: $green-500;
-$color-failure: $red-500;
-$color-danger: $red-500;
-$color-warning: $yellow-500;
-$color-alert: $orange-500;
+: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); */
+}
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
new file mode 100644
index 000000000..589850244
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/color/strawberry/frame-placeholders.scss
@@ -0,0 +1,13 @@
+%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
new file mode 100644
index 000000000..3948997e7
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/color/strawberry/index.scss
@@ -0,0 +1,6 @@
+@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
new file mode 100644
index 000000000..8a86b9d9c
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/color/strawberry/themes/dark-high-contrast.scss
@@ -0,0 +1,18 @@
+%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
new file mode 100644
index 000000000..ff204b2ad
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/color/strawberry/themes/dark.scss
@@ -0,0 +1,18 @@
+%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
new file mode 100644
index 000000000..ccd2b783b
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/color/strawberry/themes/light-high-contrast.scss
@@ -0,0 +1,18 @@
+%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
new file mode 100644
index 000000000..4efb00acd
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/color/strawberry/themes/light.scss
@@ -0,0 +1,18 @@
+%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
index 0983f227d..6dfb551af 100644
--- a/ui/packages/consul-ui/app/styles/base/color/theme-placeholders.scss
+++ b/ui/packages/consul-ui/app/styles/base/color/theme-placeholders.scss
@@ -1,90 +1,91 @@
 %theme-light {
-  --gray-000: #{$white};
-  --gray-050: #{$gray-050};
-  --gray-100: #{$gray-100};
-  --gray-150: #{$gray-150};
-  --gray-200: #{$gray-200};
-  --gray-300: #{$gray-300};
-  --gray-400: #{$gray-400};
-  --gray-500: #{$gray-500};
-  --gray-600: #{$gray-600};
-  --gray-700: #{$gray-700};
-  --gray-800: #{$gray-800};
-  --gray-850: #{$gray-850};
-  --gray-900: #{$gray-900};
-  --gray-950: #{$gray-950};
-  --gray-999: #{$black};
+  --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);
 
-  --blue-500: #{$blue-500};
+  --tone-blue-500: var(--blue-500);
 
-  --transparent: #{$transparent};
+  --tone-transparent: var(--transparent);
 }
+
 %theme-high-contrast {
-  --transparent: #{$transparent};
+  --tone-transparent: var(--transparent);
 }
 %theme-low-contrast {
-  --transparent: #{$transparent};
+  --tone-transparent: var(--transparent);
 }
 %theme-light-low-contrast {
-  --transparent: #{$transparent};
+  --tone-transparent: var(--transparent);
 }
 %theme-dark-low-contrast {
-  --transparent: #{$transparent};
+  --tone-transparent: var(--transparent);
 }
 %theme-light-high-contrast {
-  --gray-000: #{$white};
-  --gray-050: #{$white};
-  --gray-100: #{$white};
-  --gray-150: #{$white};
-  --gray-200: #{$white};
-  --gray-300: #{$white};
-  --gray-400: #{$white};
-  --gray-500: #{$gray-500};
-  --gray-600: #{$black};
-  --gray-700: #{$black};
-  --gray-800: #{$black};
-  --gray-850: #{$black};
-  --gray-900: #{$black};
-  --gray-950: #{$black};
-  --gray-999: #{$black};
+  --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);
 
-  --transparent: #{$transparent};
+  --tone-transparent: var(--transparent);
 }
 %theme-dark-high-contrast {
-  --gray-000: #{$black};
-  --gray-050: #{$black};
-  --gray-100: #{$black};
-  --gray-150: #{$black};
-  --gray-200: #{$black};
-  --gray-300: #{$black};
-  --gray-400: #{$black};
-  --gray-500: #{$gray-500};
-  --gray-600: #{$white};
-  --gray-700: #{$white};
-  --gray-800: #{$white};
-  --gray-850: #{$white};
-  --gray-900: #{$white};
-  --gray-950: #{$white};
-  --gray-999: #{$white};
+  --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);
 
-  --transparent: #{$transparent};
+  --tone-transparent: var(--transparent);
 }
 %theme-dark {
-  --gray-000: #{$black};
-  --gray-050: #{$gray-950};
-  --gray-100: #{$gray-900};
-  --gray-150: #{$gray-850};
-  --gray-200: #{$gray-800};
-  --gray-300: #{$gray-700};
-  --gray-400: #{$gray-600};
-  --gray-500: #{$gray-500};
-  --gray-600: #{$gray-400};
-  --gray-700: #{$gray-300};
-  --gray-800: #{$gray-200};
-  --gray-850: #{$gray-150};
-  --gray-900: #{$gray-100};
-  --gray-950: #{$gray-050};
-  --gray-999: #{$white};
+  --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);
 
-  --transparent: #{$transparent};
+  --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
new file mode 100644
index 000000000..52d04b097
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/color/ui/frame-placeholders.scss
@@ -0,0 +1,187 @@
+/*TODO: Move this to the reset */
+* {
+  border-width: 0;
+}
+%frame-border-000 {
+  /* 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, inherit));
+  color: rgb(var(--typo-brand-600, inherit));
+}
+
+/* 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));
+}
+%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));
+}
+/* button */
+/**/
+%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));
+}
+
+/* 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));
+}
+/* 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));
+}
+/* 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));
+}
+%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));
+}
+
+%frame-yellow-500 {
+  @extend %frame-border-000;
+  background-color: rgb(var(--tone-yellow-050));
+  border-color: rgb(var(--tone-yellow-500));
+}
+%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));
+}
+%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));
+}
+%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));
+}
+%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));
+}
+%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));
+}
+%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));
+}
+%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));
+}
+%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));
+}
+%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));
+}
+%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));
+}
+%frame-red-300 {
+  @extend %frame-border-000;
+  background-color: var(--transparent);
+  border-color: rgb(var(--tone-red-500));
+  color: rgb(var(--tone-red-500));
+}
+%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));
+}
+%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));
+}
+%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));
+}
+%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));
+}
+%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));
+}
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
new file mode 100644
index 000000000..3948997e7
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/color/ui/index.scss
@@ -0,0 +1,6 @@
+@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
new file mode 100644
index 000000000..22f5f94ac
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/color/ui/themes/dark-high-contrast.scss
@@ -0,0 +1,116 @@
+%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-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
new file mode 100644
index 000000000..8bb76828a
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/color/ui/themes/dark.scss
@@ -0,0 +1,116 @@
+%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(--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-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-high-contrast.scss b/ui/packages/consul-ui/app/styles/base/color/ui/themes/light-high-contrast.scss
new file mode 100644
index 000000000..947fa8463
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/color/ui/themes/light-high-contrast.scss
@@ -0,0 +1,115 @@
+%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-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
new file mode 100644
index 000000000..8584bfbd2
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/color/ui/themes/light.scss
@@ -0,0 +1,115 @@
+%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-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/decoration/base-variables.scss b/ui/packages/consul-ui/app/styles/base/decoration/base-variables.scss
index 2e983a97a..1f81189b9 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
@@ -1,16 +1,22 @@
-$decor-radius-000: 0;
-$decor-radius-100: 2px;
-$decor-radius-200: 4px;
-$decor-radius-300: 7px;
-$decor-radius-full: 100%;
-$decor-border-000: none;
-$decor-border-100: 1px solid;
-$decor-border-200: 2px solid;
-$decor-border-300: 3px solid;
-$decor-border-400: 4px solid;
-$decor-elevation-100: 0 3px 2px rgba(0, 0, 0, 0.06);
-$decor-elevation-200: 0 2px 4px rgba(0, 0, 0, 0.1);
-$decor-elevation-300: 0 5px 1px -2px rgba($black, 0.12);
-$decor-elevation-400: 0 6px 8px -2px rgba($black, 0.05), 0 8px 4px -4px rgba($black, 0.1);
-$decor-elevation-600: 0 12px 5px -7px rgba($black, 0.08), 0 11px 10px -3px rgba($black, 0.1);
-$decor-elevation-800: 0 16px 6px -10px rgba($black, 0.06), 0 16px 16px -4px rgba($black, 0.2);
+:root {
+  /* worthwhile, or confusing ? */
+  --decor-radius-000: 0;
+  --decor-radius-100: 2px;
+  --decor-radius-200: 4px;
+  --decor-radius-300: 7px;
+  --decor-radius-full: 100%;
+
+  --decor-border-000: none;
+  --decor-border-100: 1px solid;
+  --decor-border-200: 2px solid;
+  --decor-border-300: 3px solid;
+  --decor-border-400: 4px solid;
+
+  /* box-shadowing*/
+  --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/base-placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/base-placeholders.scss
index 15919996a..e8658c846 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
@@ -8,8 +8,8 @@
   background-color: currentColor;
 }
 %with-glyph-icon {
-  font-weight: $typo-weight-normal;
-  background-color: $gray-100;
+  font-weight: var(--typo-weight-normal);
+  background-color: rgb(var(--tone-gray-100));
   visibility: visible;
   padding: 0 4px;
 }
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 9047bbfd7..b0cccf321 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: $transparent !important;
+  background-color: var(--transparent) !important;
 }
diff --git a/ui/packages/consul-ui/app/styles/base/reset/index.scss b/ui/packages/consul-ui/app/styles/base/reset/index.scss
index 8a7dce89c..0aec96d2d 100644
--- a/ui/packages/consul-ui/app/styles/base/reset/index.scss
+++ b/ui/packages/consul-ui/app/styles/base/reset/index.scss
@@ -1,6 +1,3 @@
 @import './base-variables';
-@import '../color/base-variables';
-@import '../color/semantic-variables';
-@import '../typography/base-variables';
 @import './system';
 @import './minireset';
diff --git a/ui/packages/consul-ui/app/styles/base/reset/minireset.scss b/ui/packages/consul-ui/app/styles/base/reset/minireset.scss
index b469bf940..73b910763 100644
--- a/ui/packages/consul-ui/app/styles/base/reset/minireset.scss
+++ b/ui/packages/consul-ui/app/styles/base/reset/minireset.scss
@@ -60,5 +60,6 @@ footer,
 header,
 hgroup,
 section {
-  display: block;
+  display: block
 }
+
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 b44318a6f..f2357b386 100644
--- a/ui/packages/consul-ui/app/styles/base/reset/system.scss
+++ b/ui/packages/consul-ui/app/styles/base/reset/system.scss
@@ -1,31 +1,29 @@
 a {
   text-decoration: none;
 }
-td,
-th,
-span,
-strong {
+td, th,
+span, strong {
   color: inherit;
 }
 /* %typo-body */
 body {
-  color: var(--gray-900);
+  color: rgb(var(--tone-gray-900));
 }
-/* TODO: Consider changing this to 'p a, dd a, td a' etc etc*/
+/* TODO: Consider changing this to 'p a, dd a, td a' etc etc */
 a {
-  color: $color-action;
+  color: rgb(var(--color-action));
 }
 html {
-  background-color: $white;
+  background-color: rgb(var(--tone-gray-000));
 }
 hr {
-  background-color: $gray-500;
+  background-color: rgb(var(--tone-gray-200));
 }
 button {
-  background-color: $transparent;
+  background-color: var(--transparent);
 }
 html {
-  font-size: $typo-size-000;
+  font-size: var(--typo-size-000);
 }
 /* %typo-body */
 body {
@@ -36,15 +34,15 @@ button,
 input,
 select,
 textarea {
-  font-family: $typo-family-sans;
+  font-family: var(--typo-family-sans);
 }
 code,
 pre {
-  font-family: $typo-family-mono;
+  font-family: var(--typo-family-mono);
 }
 strong {
   font-style: inherit;
-  font-weight: $typo-weight-bold;
+  font-weight: var(--typo-weight-bold);
 }
 html {
   text-rendering: optimizeLegibility;
@@ -71,9 +69,7 @@ html {
 html {
   box-sizing: border-box;
 }
-*,
-*::before,
-*::after {
+*, *::before, *::after {
   box-sizing: inherit;
 }
 fieldset {
@@ -89,8 +85,8 @@ hr {
   border: none;
   display: block;
 }
-input[type='checkbox'],
-input[type='radio'] {
+input[type="checkbox"],
+input[type="radio"] {
   vertical-align: baseline;
 }
 td,
@@ -104,5 +100,4 @@ html {
 hr {
   height: 1px;
   margin: 1.5rem 0;
-  background-color: var(--gray-200);
 }
diff --git a/ui/packages/consul-ui/app/styles/base/typography/base-placeholders.scss b/ui/packages/consul-ui/app/styles/base/typography/base-placeholders.scss
index 95a60a106..e72401552 100644
--- a/ui/packages/consul-ui/app/styles/base/typography/base-placeholders.scss
+++ b/ui/packages/consul-ui/app/styles/base/typography/base-placeholders.scss
@@ -5,12 +5,12 @@
   font-style: inherit;
 }
 %typo-body {
-  font-size: $typo-size-600;
-  font-family: $typo-family-sans;
-  line-height: $typo-lead-700;
+  font-size: var(--typo-size-600);
+  font-family: var(--typo-family-sans);
+  line-height: var(--typo-lead-700);
 }
 %typo-header {
-  line-height: $typo-lead-200;
+  line-height: var(--typo-lead-200);
 }
 %h000,
 %h100,
@@ -25,37 +25,37 @@
   @extend %typo-header;
 }
 %h100 {
-  font-weight: $typo-weight-bold;
+  font-weight: var(--typo-weight-bold);
 }
 %h200,
 %h300,
 %h400 {
-  font-weight: $typo-weight-semibold;
+  font-weight: var(--typo-weight-semibold);
 }
 %h500,
 %h600 {
-  font-weight: $typo-weight-medium;
+  font-weight: var(--typo-weight-medium);
 }
 %h000 {
-  font-size: $typo-size-100;
+  font-size: var(--typo-size-100);
 }
 %h100 {
-  font-size: $typo-size-200;
+  font-size: var(--typo-size-200);
 }
 %h200 {
-  font-size: $typo-size-300;
+  font-size: var(--typo-size-300);
 }
 %h300 {
-  font-size: $typo-size-500;
+  font-size: var(--typo-size-500);
 }
 /*p1 strong, differing weights */
 %h400,
 %h500 {
-  font-size: $typo-size-600;
+  font-size: var(--typo-size-600);
 }
 /*p2 strong */
 %h600 {
-  font-size: $typo-size-700;
+  font-size: var(--typo-size-700);
 }
 %typo-p {
   line-height: inherit;
@@ -68,11 +68,11 @@
   @extend %typo-p;
 }
 %p1 {
-  font-size: $typo-size-600;
+  font-size: var(--typo-size-600);
 }
 %p2 {
-  font-size: $typo-size-700;
+  font-size: var(--typo-size-700);
 }
 %p3 {
-  font-size: $typo-size-800;
+  font-size: var(--typo-size-800);
 }
diff --git a/ui/packages/consul-ui/app/styles/base/typography/base-variables.scss b/ui/packages/consul-ui/app/styles/base/typography/base-variables.scss
index 706e390a7..0c271067e 100644
--- a/ui/packages/consul-ui/app/styles/base/typography/base-variables.scss
+++ b/ui/packages/consul-ui/app/styles/base/typography/base-variables.scss
@@ -1,27 +1,46 @@
-$typo-family-sans: BlinkMacSystemFont, -apple-system, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu',
-  'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
-$typo-family-mono: monospace;
-$typo-size-000: 16px;
-$typo-size-100: 3.5rem;
-$typo-size-200: 1.8rem;
-$typo-size-300: 1.3rem;
-$typo-size-400: 1.2rem;
-$typo-size-450: 1.125rem;
-$typo-size-500: 1rem;
-$typo-size-600: 0.875rem;
-$typo-size-700: 0.8125rem;
-$typo-size-800: 0.75rem;
-$typo-weight-light: 300;
-$typo-weight-normal: 400;
-$typo-weight-medium: 500;
-$typo-weight-semibold: 600;
-$typo-weight-bold: 700;
-$typo-lead-000: 0;
-$typo-lead-050: 1;
-$typo-lead-100: 1.2;
-$typo-lead-200: 1.25;
-$typo-lead-300: 1.28;
-$typo-lead-500: 1.33;
-$typo-lead-600: 1.4;
-$typo-lead-700: 1.5;
-$typo-lead-800: 1.7;
+:root {
+  /* families */
+  /* -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; */
+  --typo-family-sans: BlinkMacSystemFont, -apple-system, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
+  --typo-family-mono: monospace;
+
+  /* sizes */
+  /* --typo-size-inherit: inherit; worthwhile? */
+  --typo-size-000: 16px;
+  /* TODO: Numbering of these should possibly be reversed, more likely to add bigger*/
+  /* also maybe use 100, 200 etc like colors */
+  --typo-size-100: 3.5rem;
+  --typo-size-200: 1.8rem;
+  --typo-size-300: 1.3rem;
+  /* mktg only ^ */
+  --typo-size-400: 1.2rem; /* $size-large? 24 */
+  --typo-size-450: 1.125rem;
+  --typo-size-500: 1rem; /* $size-medium? // 18 */
+  --typo-size-600: 0.875rem; /* $size-normal? // 14 */
+  --typo-size-700: 0.8125rem; /* $size-small? // 13 */
+  --typo-size-800: 0.75rem; /* $size-small? // 12 */
+
+  /* weights */
+  --typo-weight-light: 300;
+  --typo-weight-normal: 400;
+  --typo-weight-medium: 500;
+  --typo-weight-semibold: 600;
+  --typo-weight-bold: 700;
+
+  /* line-heights. lead/leading is easier to write */
+  /* is this worthwhile? Should we use font-size relative?*/
+  /* DS uses ~ 1.3 */
+  --typo-lead-000: 0;
+  --typo-lead-050: 1;
+  --typo-lead-100: 1.2;
+  --typo-lead-200: 1.25;
+  --typo-lead-300: 1.28;
+  --typo-lead-500: 1.33;
+  --typo-lead-600: 1.4;
+  --typo-lead-700: 1.5;
+  --typo-lead-800: 1.7;
+
+  /* letter-spacing. kern is easier to write*/
+  /* --typo-kern-000: normal; */
+  /* --typo-kern-100: 1px; */
+}
diff --git a/ui/packages/consul-ui/app/styles/debug.scss b/ui/packages/consul-ui/app/styles/debug.scss
index fb1a9e18c..6fe7aae1a 100644
--- a/ui/packages/consul-ui/app/styles/debug.scss
+++ b/ui/packages/consul-ui/app/styles/debug.scss
@@ -122,7 +122,7 @@ html.with-route-announcer .route-title {
         border-top: 1px solid;
         border-left: 1px solid;
         border-right: 1px solid;
-        border-color: var(--gray-200);
+        border-color: rgb(var(--tone-gray-200));
         padding: 1rem;
         margin-bottom: 0;
       }
@@ -135,19 +135,19 @@ html.with-route-announcer .route-title {
       }
       figcaption {
         margin-bottom: 0.5rem;
-        color: var(--gray-400);
+        color: rgb(var(--tone-gray-400));
         font-style: italic;
       }
       figcaption code {
         @extend %inline-code;
       }
       figure > [type='text'] {
-        border: 1px solid var(--gray-999);
+        border: 1px solid rgb(var(--tone-gray-999));
         width: 100%;
         padding: 0.5rem;
       }
       figure > select {
-        border: 1px solid var(--gray-999);
+        border: 1px solid rgb(var(--tone-gray-999));
         padding: 0.5rem;
       }
     }
diff --git a/ui/packages/consul-ui/app/styles/layouts/index.scss b/ui/packages/consul-ui/app/styles/layouts/index.scss
index 892a73f4d..f76eac0f2 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: $gray-500;
+  border-left: rgb(var(--tone-gray-500));
 }
 [role='group'] fieldset:not(:last-of-type) {
   padding-right: 20px;
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 02228a2e7..ac0c58023 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
@@ -6,17 +6,17 @@ html[data-route^='dc.services.instance'] .app-view > header dl {
   margin-right: 50px;
 }
 html[data-route^='dc.services.instance'] .app-view > header dt {
-  font-weight: $typo-weight-bold;
+  font-weight: var(--typo-weight-bold);
 }
 html[data-route^='dc.services.instance'] .tab-nav {
-  border-top: $decor-border-100;
+  border-top: var(--decor-border-100);
 }
 html[data-route^='dc.services.instance'] .tab-section section:not(:last-child) {
-  border-bottom: $decor-border-100;
+  border-bottom: var(--decor-border-100);
 }
 html[data-route^='dc.services.instance'] .tab-nav,
 html[data-route^='dc.services.instance'] .tab-section section:not(:last-child) {
-  border-color: var(--gray-200);
+  border-color: rgb(var(--tone-gray-200));
 }
 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 a29b1c68a..76cc630e6 100644
--- a/ui/packages/consul-ui/app/styles/themes.scss
+++ b/ui/packages/consul-ui/app/styles/themes.scss
@@ -1,3 +1,6 @@
+@import './base/color/ui/index';
+@import './base/color/magenta/index';
+@import './base/color/strawberry/index';
 :root {
   @extend %theme-light;
 }
@@ -8,5 +11,5 @@
 }
 %main-nav-vertical .menu-panel a:hover,
 %main-nav-vertical .menu-panel a:focus {
-  background-color: var(--blue-500);
+  background-color: rgb(var(--tone-blue-500));
 }
diff --git a/ui/packages/consul-ui/app/styles/typography.scss b/ui/packages/consul-ui/app/styles/typography.scss
index 3bacf5e4c..c3e5a7420 100644
--- a/ui/packages/consul-ui/app/styles/typography.scss
+++ b/ui/packages/consul-ui/app/styles/typography.scss
@@ -55,7 +55,7 @@ pre code,
 }
 
 %radio-group label {
-  line-height: $typo-lead-200;
+  line-height: var(--typo-lead-200);
 }
 %tab-nav {
   letter-spacing: 0.03em;
@@ -65,12 +65,12 @@ pre code,
 /* strong %p3 */
 %form-element-label,
 %button {
-  font-weight: $typo-weight-semibold;
+  font-weight: var(--typo-weight-semibold);
 }
 %route-card section dt,
 %route-card header:not(.short) dd,
 %splitter-card > header {
-  font-weight: $typo-weight-bold;
+  font-weight: var(--typo-weight-bold);
 }
 /**/
 
@@ -83,7 +83,7 @@ pre code,
 %tbody-th em,
 %app-view h1 em,
 %route-card header dt {
-  font-weight: $typo-weight-normal;
+  font-weight: var(--typo-weight-normal);
 }
 
 %form-element-note,
@@ -95,8 +95,8 @@ pre code,
 
 /* composite row */
 %composite-row-header {
-  font-size: $typo-size-450;
-  font-weight: $typo-weight-medium;
+  font-size: var(--typo-size-450);
+  font-weight: var(--typo-weight-medium);
 }
 %composite-row-header *:not(button) {
   font-size: inherit;
@@ -107,7 +107,7 @@ pre code,
 /* TODO: We have nothing else with a 500 */
 /* either make this the biggest %p or don't use it */
 %app-view h1 em {
-  font-size: $typo-size-500;
+  font-size: var(--typo-size-500);
 }
 /*TODO: This should go in reset, and probably needs select etc adding  */
 @media (max-width: 420px) and (-webkit-min-device-pixel-ratio: 0) {
diff --git a/ui/packages/consul-ui/app/styles/variables/skin.scss b/ui/packages/consul-ui/app/styles/variables/skin.scss
index c0aea2172..fec5b81ff 100644
--- a/ui/packages/consul-ui/app/styles/variables/skin.scss
+++ b/ui/packages/consul-ui/app/styles/variables/skin.scss
@@ -4,29 +4,23 @@
 // potentially see if our compiler can automatically remove
 // unused CSS props
 :root {
-  --white: #{$white};
-  --decor-border-100: #{$decor-border-100};
-  --decor-radius-200: #{$decor-radius-200};
-  --gray-500: #{$gray-500};
-  --decor-elevation-600: #{$decor-elevation-600};
-
   /* base brand colors */
-  --brand-050: #{$magenta-050};
-  --brand-100: #{$rose-100};
-  // --brand-200: #{$magenta-200};
-  // --brand-300: #{$magenta-300};
-  // --brand-400: #{$magenta-400};
-  // --brand-500: #{$magenta-500};
+  --brand-050: var(--tone-magenta-050);
+  --brand-100: var(--tone-strawberry-100);
+  // rgb(var(--brand-200)): #{rgb(var(--tone-magenta-200))};
+  // rgb(var(--brand-300)): #{rgb(var(--tone-magenta-300))};
+  // rgb(var(--brand-400)): #{rgb(var(--tone-magenta-400))};
+  // rgb(var(--brand-500)): #{rgb(var(--tone-magenta-500))};
   /* temporary rose-like color until its replaced by a numbered one */
-  --brand-600: #e03875;
-  // --brand-700: #{$magenta-700};
-  --brand-800: #{$magenta-800};
-  // --brand-900: #{$magenta-900};
+  --brand-600: 224 56 117;
+  // rgb(var(--brand-700)): #{rgb(var(--tone-magenta-700))};
+  --brand-800: var(--tone-magenta-800);
+  // rgb(var(--brand-900)): #{rgb(var(--tone-magenta-900))};
 
   /* themeable ui colors */
-  --typo-action-500: #{$blue-500};
-  --decor-error-500: #{$red-500};
-  --typo-contrast-999: #{$black};
+  --typo-action-500: var(--tone-blue-500);
+  --decor-error-500: var(--tone-red-500);
+  --typo-contrast-999: var(--black);
 
   /* themeable brand colors */
   --typo-brand-050: var(--brand-050);