diff --git a/packages/console/src/components/AppContent/components/Sidebar/components/Contact/index.module.scss b/packages/console/src/components/AppContent/components/Sidebar/components/Contact/index.module.scss
index 83ce64b09..e3db506de 100644
--- a/packages/console/src/components/AppContent/components/Sidebar/components/Contact/index.module.scss
+++ b/packages/console/src/components/AppContent/components/Sidebar/components/Contact/index.module.scss
@@ -4,7 +4,7 @@
   .row {
     display: flex;
     align-items: center;
-    border: 1px solid var(--color-component-border);
+    border: 1px solid var(--color-border);
     border-radius: _.unit(2);
     padding: _.unit(3) _.unit(4);
 
@@ -21,12 +21,12 @@
 
       .title {
         font: var(--font-title-small);
-        color: var(--color-component-text);
+        color: var(--color-text);
       }
 
       .description {
         font: var(--font-body-medium);
-        color: var(--color-component-caption);
+        color: var(--color-caption);
       }
     }
   }
diff --git a/packages/console/src/components/AppContent/components/Sidebar/components/Item/index.module.scss b/packages/console/src/components/AppContent/components/Sidebar/components/Item/index.module.scss
index 67655825f..fba410132 100644
--- a/packages/console/src/components/AppContent/components/Sidebar/components/Item/index.module.scss
+++ b/packages/console/src/components/AppContent/components/Sidebar/components/Item/index.module.scss
@@ -5,7 +5,7 @@
   align-items: center;
   margin: _.unit(1) _.unit(6) _.unit(1) _.unit(4);
   padding: _.unit(2);
-  color: var(--color-on-surface-variant);
+  color: var(--color-neutral-variant-30);
   border-radius: _.unit(2);
   text-decoration: none;
   user-select: none;
@@ -26,11 +26,11 @@
   }
 
   &:not(.active):hover {
-    background: var(--color-neutral-variant-90);
+    background: var(--color-hover-variant);
   }
 
   &.active {
-    background: var(--color-primary-90);
+    background: var(--color-surface-5);
     color: var(--color-primary);
 
     .icon svg {
diff --git a/packages/console/src/components/AppContent/components/Sidebar/components/Section/index.module.scss b/packages/console/src/components/AppContent/components/Sidebar/components/Section/index.module.scss
index 0f477502f..f4ca2932a 100644
--- a/packages/console/src/components/AppContent/components/Sidebar/components/Section/index.module.scss
+++ b/packages/console/src/components/AppContent/components/Sidebar/components/Section/index.module.scss
@@ -1,10 +1,9 @@
 @use '@/scss/underscore' as _;
 
 .title {
-  font-weight: bold;
-  color: #adaab4;
+  font: var(--font-subhead-cap-small);
+  color: var(--color-neutral-variant-70);
   padding: _.unit(2) _.unit(6);
   text-transform: uppercase;
   letter-spacing: 0.1em;
-  font-size: 12px;
 }
diff --git a/packages/console/src/components/AppContent/components/Sidebar/icons/Contact.tsx b/packages/console/src/components/AppContent/components/Sidebar/icons/Contact.tsx
index 8171b5454..43afac5d1 100644
--- a/packages/console/src/components/AppContent/components/Sidebar/icons/Contact.tsx
+++ b/packages/console/src/components/AppContent/components/Sidebar/icons/Contact.tsx
@@ -3,10 +3,7 @@ import React from 'react';
 const Contact = () => {
   return (
     <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-      <path
-        d="M15.8346 3.33594H4.16797C3.50493 3.33594 2.86904 3.59933 2.4002 4.06817C1.93136 4.53701 1.66797 5.1729 1.66797 5.83594V14.1693C1.66797 14.8323 1.93136 15.4682 2.4002 15.937C2.86904 16.4059 3.50493 16.6693 4.16797 16.6693H15.8346C16.4977 16.6693 17.1336 16.4059 17.6024 15.937C18.0712 15.4682 18.3346 14.8323 18.3346 14.1693V5.83594C18.3346 5.1729 18.0712 4.53701 17.6024 4.06817C17.1336 3.59933 16.4977 3.33594 15.8346 3.33594ZM15.493 5.0026L10.593 9.9026C10.5155 9.98071 10.4233 10.0427 10.3218 10.085C10.2202 10.1273 10.1113 10.1491 10.0013 10.1491C9.89129 10.1491 9.78237 10.1273 9.68082 10.085C9.57927 10.0427 9.4871 9.98071 9.40964 9.9026L4.50964 5.0026H15.493ZM16.668 14.1693C16.668 14.3903 16.5802 14.6022 16.4239 14.7585C16.2676 14.9148 16.0556 15.0026 15.8346 15.0026H4.16797C3.94696 15.0026 3.73499 14.9148 3.57871 14.7585C3.42243 14.6022 3.33464 14.3903 3.33464 14.1693V6.1776L8.23464 11.0776C8.70339 11.5458 9.3388 11.8087 10.0013 11.8087C10.6638 11.8087 11.2992 11.5458 11.768 11.0776L16.668 6.1776V14.1693Z"
-        fill="#78767F"
-      />
+      <path d="M15.8346 3.33594H4.16797C3.50493 3.33594 2.86904 3.59933 2.4002 4.06817C1.93136 4.53701 1.66797 5.1729 1.66797 5.83594V14.1693C1.66797 14.8323 1.93136 15.4682 2.4002 15.937C2.86904 16.4059 3.50493 16.6693 4.16797 16.6693H15.8346C16.4977 16.6693 17.1336 16.4059 17.6024 15.937C18.0712 15.4682 18.3346 14.8323 18.3346 14.1693V5.83594C18.3346 5.1729 18.0712 4.53701 17.6024 4.06817C17.1336 3.59933 16.4977 3.33594 15.8346 3.33594ZM15.493 5.0026L10.593 9.9026C10.5155 9.98071 10.4233 10.0427 10.3218 10.085C10.2202 10.1273 10.1113 10.1491 10.0013 10.1491C9.89129 10.1491 9.78237 10.1273 9.68082 10.085C9.57927 10.0427 9.4871 9.98071 9.40964 9.9026L4.50964 5.0026H15.493ZM16.668 14.1693C16.668 14.3903 16.5802 14.6022 16.4239 14.7585C16.2676 14.9148 16.0556 15.0026 15.8346 15.0026H4.16797C3.94696 15.0026 3.73499 14.9148 3.57871 14.7585C3.42243 14.6022 3.33464 14.3903 3.33464 14.1693V6.1776L8.23464 11.0776C8.70339 11.5458 9.3388 11.8087 10.0013 11.8087C10.6638 11.8087 11.2992 11.5458 11.768 11.0776L16.668 6.1776V14.1693Z" />
     </svg>
   );
 };
diff --git a/packages/console/src/components/AppContent/components/Topbar/index.module.scss b/packages/console/src/components/AppContent/components/Topbar/index.module.scss
index a0efad8f0..2d39111fc 100644
--- a/packages/console/src/components/AppContent/components/Topbar/index.module.scss
+++ b/packages/console/src/components/AppContent/components/Topbar/index.module.scss
@@ -19,6 +19,6 @@
 
   .text {
     font: var(--font-title-medium);
-    color: var(--color-component-text);
+    color: var(--color-text);
   }
 }
diff --git a/packages/console/src/components/Button/index.module.scss b/packages/console/src/components/Button/index.module.scss
index bda7ef9ae..4ffc19bd4 100644
--- a/packages/console/src/components/Button/index.module.scss
+++ b/packages/console/src/components/Button/index.module.scss
@@ -17,6 +17,10 @@
     cursor: pointer;
   }
 
+  &:disabled {
+    cursor: not-allowed;
+  }
+
   .icon {
     display: block;
     width: 20px;
@@ -55,23 +59,27 @@
   }
 
   &.default {
-    background: var(--color-on-primary);
-    color: var(--color-component-text);
-    border-color: var(--color-component-border);
+    background: var(--color-layer-1);
+    color: var(--color-text);
+    border-color: var(--color-outline);
     border-width: 1px;
     border-style: solid;
 
     &:disabled {
-      background: var(--color-neutral-95);
-      border-color: var(--color-neutral-95);
+      background: var(--color-neutral-70);
+      border-color: var(--color-neutral-70);
     }
 
     &:focus {
-      outline: 3px solid var(--color-neutral-90);
+      outline: 3px solid var(--color-focused);
+    }
+
+    &:active {
+      background: var(--color-pressed);
     }
 
     &:not(:disabled):hover {
-      background: var(--color-neutral-95);
+      background: var(--color-hover);
     }
   }
 
@@ -85,12 +93,15 @@
     }
 
     &:focus {
-      background: var(--color-primary-40);
-      outline: 3px solid var(--color-primary-80);
+      outline: 3px solid var(--color-focused-variant);
+    }
+
+    &:active {
+      background: var(--color-pressed_primary);
     }
 
     &:not(:disabled):hover {
-      background: var(--color-primary-30);
+      background: var(--color-hover-primary);
     }
   }
 
@@ -104,17 +115,16 @@
     }
 
     &:focus {
-      background: var(--color-error-40);
-      outline: 3px solid var(--color-error-90);
+      outline: 3px solid var(--color-focused-error);
     }
 
     &:not(:disabled):hover {
-      background: var(--color-error-30);
+      background: var(--color-error);
     }
   }
 
   &.outline {
-    background: var(--color-on-primary);
+    background: var(--color-layer-1);
     border-color: var(--color-primary);
     border-width: 1px;
     border-style: solid;
@@ -126,18 +136,15 @@
     }
 
     &:focus {
-      outline: 3px solid var(--color-primary-80);
+      outline: 3px solid var(--color-focused-variant);
     }
 
     &:active {
-      border-color: var(--color-primary-30);
-      color: var(--color-primary-30);
+      background: var(--color-pressed-variant);
     }
 
     &:not(:disabled):hover {
-      border-color: var(--color-primary-30);
-      color: var(--color-primary-30);
-      background: var(--color-surface-3);
+      background: var(--color-hover-variant);
     }
   }
 
@@ -148,20 +155,19 @@
     color: var(--color-primary);
 
     &:disabled {
-      color: var(--color-neutral-80);
+      color: var(--color-disabled);
     }
 
     &:focus {
-      outline: 2px solid var(--color-primary-80);
+      outline: 2px solid var(--color-focused-variant);
     }
 
     &:active {
-      color: var(--color-primary-30);
+      background: var(--color-pressed-variant);
     }
 
     &:not(:disabled):hover {
-      color: var(--color-primary-30);
-      background: var(--color-primary-95);
+      background: var(--color-hover-variant);
     }
   }
 }
diff --git a/packages/console/src/components/Card/index.module.scss b/packages/console/src/components/Card/index.module.scss
index 312d246e8..8ecf044f8 100644
--- a/packages/console/src/components/Card/index.module.scss
+++ b/packages/console/src/components/Card/index.module.scss
@@ -1,7 +1,7 @@
 @use '@/scss/underscore' as _;
 
 .card {
-  background: var(--color-on-primary);
+  background: var(--color-layer-1);
   border-radius: _.unit(4);
   padding: _.unit(6);
 }
diff --git a/packages/console/src/components/CardTitle/index.module.scss b/packages/console/src/components/CardTitle/index.module.scss
index 5087af17c..7e432cbb7 100644
--- a/packages/console/src/components/CardTitle/index.module.scss
+++ b/packages/console/src/components/CardTitle/index.module.scss
@@ -4,13 +4,13 @@
   overflow: hidden;
 
   .title {
-    color: var(--color-component-text);
+    color: var(--color-text);
     @include _.text-ellipsis;
   }
 
   .subtitle {
     margin-top: _.unit(1);
-    color: var(--color-component-caption);
+    color: var(--color-caption);
     @include _.text-ellipsis;
   }
 
diff --git a/packages/console/src/components/CopyToClipboard/index.module.scss b/packages/console/src/components/CopyToClipboard/index.module.scss
index b19b45a51..110427a81 100644
--- a/packages/console/src/components/CopyToClipboard/index.module.scss
+++ b/packages/console/src/components/CopyToClipboard/index.module.scss
@@ -18,7 +18,7 @@
     > svg {
       margin-left: _.unit(3);
       cursor: pointer;
-      fill: var(--color-component-caption);
+      fill: var(--color-caption);
 
       &:hover {
         fill: var(--color-primary);
diff --git a/packages/console/src/components/FormField/index.module.scss b/packages/console/src/components/FormField/index.module.scss
index 6fefedca4..d7be57aa3 100644
--- a/packages/console/src/components/FormField/index.module.scss
+++ b/packages/console/src/components/FormField/index.module.scss
@@ -13,11 +13,11 @@
 
   .title {
     font: var(--font-subhead-2);
-    color: var(--color-component-text);
+    color: var(--color-text);
   }
 
   .required {
     font: var(--font-body-medium);
-    color: var(--color-component-caption);
+    color: var(--color-caption);
   }
 }
diff --git a/packages/console/src/components/IconButton/index.module.scss b/packages/console/src/components/IconButton/index.module.scss
index b1cf5d6fa..ffddf5cec 100644
--- a/packages/console/src/components/IconButton/index.module.scss
+++ b/packages/console/src/components/IconButton/index.module.scss
@@ -15,7 +15,7 @@
   align-items: center;
 
   > svg {
-    fill: var(--color-component-caption);
+    fill: var(--color-caption);
   }
 
   &:disabled {
@@ -25,7 +25,7 @@
   }
 
   &:active {
-    background: var(--color-overlay-12);
+    background: var(--color-pressed);
   }
 
   &:not(:disabled) {
@@ -33,7 +33,7 @@
   }
 
   &:not(:disabled):hover {
-    background: var(--color-overlay-8);
+    background: var(--color-hover);
   }
 
   &.small {
diff --git a/packages/console/src/components/LinkButton/index.module.scss b/packages/console/src/components/LinkButton/index.module.scss
index 2421e3f35..8f46573b6 100644
--- a/packages/console/src/components/LinkButton/index.module.scss
+++ b/packages/console/src/components/LinkButton/index.module.scss
@@ -13,15 +13,20 @@
     margin-left: _.unit(1);
   }
 
-  &:hover {
+  &:focus-visible {
+    outline: 2px solid var(--color-focused-variant);
+  }
+
+  &:disabled {
+    color: var(--color-disabled);
+    cursor: not-allowed;
+  }
+
+  &:not(:disabled):hover {
     text-decoration: underline;
   }
 
-  &:active {
-    color: var(--color-primary-30);
-  }
-
-  &:focus-visible {
-    outline: 2px solid var(--color-primary-80);
+  > svg {
+    fill: var(--color-primary);
   }
 }
diff --git a/packages/console/src/components/RadioGroup/index.module.scss b/packages/console/src/components/RadioGroup/index.module.scss
index 7a7243ec1..a16be0bd4 100644
--- a/packages/console/src/components/RadioGroup/index.module.scss
+++ b/packages/console/src/components/RadioGroup/index.module.scss
@@ -58,7 +58,7 @@
 
     .title {
       font: var(--font-subhead-2);
-      color: var(--color-component-text);
+      color: var(--color-text);
     }
 
     input[type='radio'] {
diff --git a/packages/console/src/components/Status/index.module.scss b/packages/console/src/components/Status/index.module.scss
index 8686def51..0303a4855 100644
--- a/packages/console/src/components/Status/index.module.scss
+++ b/packages/console/src/components/Status/index.module.scss
@@ -10,7 +10,7 @@
   height: 10px;
   border-radius: 50%;
   margin-right: _.unit(2);
-  background: var(--color-code-comment);
+  background: var(--color-success-70);
 }
 
 .status.offline .icon {
diff --git a/packages/console/src/components/TabNav/TabNavLink.module.scss b/packages/console/src/components/TabNav/TabNavLink.module.scss
index c27968ed2..4f9acd3c3 100644
--- a/packages/console/src/components/TabNav/TabNavLink.module.scss
+++ b/packages/console/src/components/TabNav/TabNavLink.module.scss
@@ -6,7 +6,7 @@
   padding-bottom: _.unit(1);
 
   a {
-    color: var(--color-component-caption);
+    color: var(--color-caption);
     text-decoration: none;
   }
 }
diff --git a/packages/console/src/components/TextInput/index.module.scss b/packages/console/src/components/TextInput/index.module.scss
index 0bef0e8f3..eddb2928e 100644
--- a/packages/console/src/components/TextInput/index.module.scss
+++ b/packages/console/src/components/TextInput/index.module.scss
@@ -2,8 +2,8 @@
 
 .container {
   border-radius: 6px;
-  border: 1px solid var(--color-component-border);
-  outline: 2px solid transparent;
+  border: 1px solid var(--color-border);
+  outline: 3px solid transparent;
   transition-property: outline, border;
   transition-timing-function: ease-in-out;
   transition-duration: 0.2s;
@@ -23,25 +23,26 @@
 
   &:focus-within {
     border-color: var(--color-primary);
-    outline-color: var(--color-primary-80);
+    outline-color: var(--color-focused-variant);
   }
 
   input {
     width: 100%;
     appearance: none;
-    color: var(--color-component-text);
+    background: var(--color-layer-1);
+    color: var(--color-text);
     font: var(--font-body-medium);
     padding: 0;
 
     &::placeholder {
-      color: var(--color-component-caption);
+      color: var(--color-caption);
     }
   }
 
   &.disabled {
-    background: var(--color-surface);
-    color: var(--color-disabled);
-    border-color: var(--color-disabled);
+    background: var(--color-inverse-on-surface);
+    color: var(--color-caption);
+    border-color: var(--color-border);
 
     input {
       background: none;
@@ -49,9 +50,9 @@
   }
 
   &.readOnly {
-    background: var(--color-surface);
-    color: var(--color-readonly);
-    border-color: var(--color-disabled);
+    background: var(--color-inverse-on-surface);
+    color: var(--color-text);
+    border-color: var(--color-border);
 
     input {
       background: none;
diff --git a/packages/console/src/components/Toast/index.module.scss b/packages/console/src/components/Toast/index.module.scss
index 27d7499a1..dd257d52e 100644
--- a/packages/console/src/components/Toast/index.module.scss
+++ b/packages/console/src/components/Toast/index.module.scss
@@ -3,7 +3,7 @@
 div.toast {
   padding: _.unit(3) _.unit(4);
   font: var(--font-body-medium);
-  color: var(--color-component-text);
+  color: var(--color-text);
   box-shadow: var(--light-shadow-s1);
   border-radius: _.unit(2);
   max-width: none;
diff --git a/packages/console/src/pages/ApiResourceDetails/index.module.scss b/packages/console/src/pages/ApiResourceDetails/index.module.scss
index 159ad598a..4758d530c 100644
--- a/packages/console/src/pages/ApiResourceDetails/index.module.scss
+++ b/packages/console/src/pages/ApiResourceDetails/index.module.scss
@@ -20,7 +20,7 @@
 
       .name {
         font: var(--font-title-large);
-        color: var(--color-component-text);
+        color: var(--color-text);
       }
     }
   }
diff --git a/packages/console/src/pages/ApplicationDetails/index.module.scss b/packages/console/src/pages/ApplicationDetails/index.module.scss
index 33b4ae5fc..178e9d208 100644
--- a/packages/console/src/pages/ApplicationDetails/index.module.scss
+++ b/packages/console/src/pages/ApplicationDetails/index.module.scss
@@ -49,7 +49,7 @@
 
     .name {
       font: var(--font-title-large);
-      color: var(--color-component-text);
+      color: var(--color-text);
     }
 
     .details {
@@ -63,7 +63,8 @@
     }
 
     .type {
-      background-color: var(--color-neutral-90);
+      background-color: var(--color-surface-variant);
+      color: var(--color-text);
       padding: _.unit(0.5) _.unit(2);
       border-radius: 10px;
       font: var(--font-label-medium);
@@ -71,7 +72,7 @@
 
     .text {
       font: var(--font-subhead-2);
-      color: var(--color-component-caption);
+      color: var(--color-caption);
     }
 
     .verticalBar {
diff --git a/packages/console/src/pages/Applications/components/LibrarySelector/index.module.scss b/packages/console/src/pages/Applications/components/LibrarySelector/index.module.scss
index 48f44eeb5..2d848273a 100644
--- a/packages/console/src/pages/Applications/components/LibrarySelector/index.module.scss
+++ b/packages/console/src/pages/Applications/components/LibrarySelector/index.module.scss
@@ -12,7 +12,7 @@
 
   .subtitle {
     font: var(--font-body-medium);
-    color: var(--color-component-text);
+    color: var(--color-text);
     margin-top: _.unit(3);
   }
 
@@ -36,7 +36,7 @@
     border-radius: _.unit(2);
     padding: 0 _.unit(4);
     font: var(--font-body-medium);
-    color: var(--color-component-text);
+    color: var(--color-text);
 
     img {
       margin-right: _.unit(3);
diff --git a/packages/console/src/pages/Applications/components/TypeDescription/index.module.scss b/packages/console/src/pages/Applications/components/TypeDescription/index.module.scss
index c991b4aaa..bd2d1f6f6 100644
--- a/packages/console/src/pages/Applications/components/TypeDescription/index.module.scss
+++ b/packages/console/src/pages/Applications/components/TypeDescription/index.module.scss
@@ -8,10 +8,10 @@
 
 .subtitle {
   font: var(--font-body-medium);
-  color: var(--color-component-text);
+  color: var(--color-text);
 }
 
 .description {
   font: var(--font-body-medium);
-  color: var(--color-component-caption);
+  color: var(--color-caption);
 }
diff --git a/packages/console/src/pages/ConnectorDetails/components/SenderTester/index.module.scss b/packages/console/src/pages/ConnectorDetails/components/SenderTester/index.module.scss
index 3953c2acd..a049f1d81 100644
--- a/packages/console/src/pages/ConnectorDetails/components/SenderTester/index.module.scss
+++ b/packages/console/src/pages/ConnectorDetails/components/SenderTester/index.module.scss
@@ -22,7 +22,7 @@
 
 .description {
   font: var(--font-body-medium);
-  color: var(--color-component-caption);
+  color: var(--color-caption);
 }
 
 div.successTooltip {
diff --git a/packages/console/src/pages/ConnectorDetails/index.module.scss b/packages/console/src/pages/ConnectorDetails/index.module.scss
index a1a38ad70..117c41e73 100644
--- a/packages/console/src/pages/ConnectorDetails/index.module.scss
+++ b/packages/console/src/pages/ConnectorDetails/index.module.scss
@@ -47,12 +47,12 @@
 
     .name {
       font: var(--font-title-large);
-      color: var(--color-component-text);
+      color: var(--color-text);
     }
 
     .id {
       font: var(--font-subhead-2);
-      color: var(--color-component-caption);
+      color: var(--color-caption);
     }
   }
 }
diff --git a/packages/console/src/pages/Connectors/components/GetStartedModal/index.module.scss b/packages/console/src/pages/Connectors/components/GetStartedModal/index.module.scss
index 40988ab52..b5df4c088 100644
--- a/packages/console/src/pages/Connectors/components/GetStartedModal/index.module.scss
+++ b/packages/console/src/pages/Connectors/components/GetStartedModal/index.module.scss
@@ -3,7 +3,7 @@
 .container {
   display: flex;
   flex-direction: column;
-  background-color: var(--color-main-background);
+  background-color: var(--color-surface-1);
   height: 100vh;
 
   .header {
diff --git a/packages/console/src/pages/GetStarted/index.module.scss b/packages/console/src/pages/GetStarted/index.module.scss
index 7ee44754c..198e301c7 100644
--- a/packages/console/src/pages/GetStarted/index.module.scss
+++ b/packages/console/src/pages/GetStarted/index.module.scss
@@ -3,7 +3,7 @@
 .container {
   display: flex;
   flex-direction: column;
-  background-color: var(--color-main-background);
+  background-color: var(--color-surface-1);
   height: 100vh;
 
   .header {
diff --git a/packages/console/src/pages/UserDetails/index.module.scss b/packages/console/src/pages/UserDetails/index.module.scss
index da4a1c2bc..d2d33dc97 100644
--- a/packages/console/src/pages/UserDetails/index.module.scss
+++ b/packages/console/src/pages/UserDetails/index.module.scss
@@ -32,7 +32,7 @@
 
     .name {
       font: var(--font-title-large);
-      color: var(--color-component-text);
+      color: var(--color-text);
     }
 
     .username {
@@ -44,7 +44,7 @@
 
     .text {
       font: var(--font-subhead-2);
-      color: var(--color-component-caption);
+      color: var(--color-caption);
     }
 
     .verticalBar {
diff --git a/packages/console/src/scss/_colors.scss b/packages/console/src/scss/_colors.scss
index 0d2de298b..4289c8185 100644
--- a/packages/console/src/scss/_colors.scss
+++ b/packages/console/src/scss/_colors.scss
@@ -1,5 +1,5 @@
-// tonal palettes
-:root {
+@mixin light-theme {
+  // tonal palettes
   --color-all-0: #000;
   --color-all-100: #fff;
   --color-primary-10: #190064;
@@ -24,6 +24,17 @@
   --color-secondary-90: #f4e560;
   --color-secondary-95: #fff480;
   --color-secondary-99: #fffbf7;
+  --color-tertiary-10: #350041;
+  --color-tertiary-20: #560068;
+  --color-tertiary-30: #7b0093;
+  --color-tertiary-40: #9927af;
+  --color-tertiary-50: #b545ca;
+  --color-tertiary-60: #d361e7;
+  --color-tertiary-70: #f07eff;
+  --color-tertiary-80: #faabff;
+  --color-tertiary-90: #ffd5ff;
+  --color-tertiary-95: #ffeafe;
+  --color-tertiary-99: #fcfcfc;
   --color-error-10: #410001;
   --color-error-20: #680003;
   --color-error-30: #930006;
@@ -57,44 +68,230 @@
   --color-neutral-variant-90: #e5e1ec;
   --color-neutral-variant-95: #f3effa;
   --color-neutral-variant-99: #fffbff;
-  --color-overlay-8: rgba(25, 28, 29, 8%);
-  --color-overlay-12: rgba(25, 28, 29, 12%);
-}
+  --color-success-10: #002106;
+  --color-success-20: #00390b;
+  --color-success-30: #005314;
+  --color-success-40: #116d26;
+  --color-success-50: #32873d;
+  --color-success-60: #4ea254;
+  --color-success-70: #68be6c;
+  --color-success-80: #83da85;
+  --color-success-90: #9fe79f;
+  --color-success-95: #bdefbd;
+  --color-success-99: #ebf9eb;
+  --color-alert-10: #2b1700;
+  --color-alert-20: #472a00;
+  --color-alert-30: #663e00;
+  --color-alert-40: #865300;
+  --color-alert-50: #a76900;
+  --color-alert-60: #ca8000;
+  --color-alert-70: #eb9918;
+  --color-alert-80: #ffb95a;
+  --color-alert-90: #ffddb5;
+  --color-alert-95: #ffeedc;
+  --color-alert-99: #fff5eb;
 
-@mixin light-theme {
-  --color-main-background: #f2f0f6;
-  --color-surface: var(--color-neutral-99);
-  --color-on-surface: var(--color-neutral-10);
-  --color-on-surface-variant: var(--color-neutral-variant-30);
+  // color aliases
   --color-primary: var(--color-primary-40);
   --color-on-primary: var(--color-all-100);
-  --color-error: var(--color-error-40);
-  --color-inverse-on-surface: var(--color-neutral-95);
+  --color-primary-container: var(--color-primary-90);
+  --color-on-primary-container: var(--color-primary-10);
+  --color-secondary: var(--color-secondary-40);
+  --color-on-secondary: var(--color-all-100);
+  --color-secondary-container: var(--color-secondary-30);
   --color-on-secondary-container: var(--color-secondary-10);
-  --color-component-border: var(--color-neutral-80);
-  --color-component-caption: var(--color-neutral-50);
-  --color-component-text: var(--color-neutral-10);
-  --color-outline: var(--color-neutral-variant-50);
-  --color-disabled: var(--color-neutral-80);
-  --color-readonly: var(--color-neutral-50);
-  --color-icon: var(--color-neutral-50);
-  --color-border: var(--color-neutral-80);
-  --color-table-row-selected: rgba(25, 28, 29, 4%);
-  --color-code-comment: #66bb6a;
-  --color-surface-3: #e3dff5;
-  --color-surface-5: #dfd9f5;
+  --color-tertiary: var(--color-tertiary-40);
+  --color-on-tertiary: var(--color-all-100);
+  --color-tertiary-container: var(--color-tertiary-90);
+  --color-on-tertiary-container: var(--color-tertiary-10);
+  --color-error: var(--color-error-40);
+  --color-on-error: var(--color-all-100);
+  --color-error-container: var(--color-error-90);
+  --color-on-error-container: var(--color-error-10);
+  --color-background: var(--color-neutral-99);
+  --color-on-background: var(--color-neutral-10);
+  --color-surface: var(--color-neutral-99);
+  --color-surface-1: #ecebf6; // N99 + 2% NV50 + 5% P40
+  --color-surface-2: #e8e6f6; // N99 + 2% NV50 + 8% P40
+  --color-surface-3: #e3e0f6; // N99 + 2% NV50 + 11% P40
+  --color-surface-4: #e2def6; // N99 + 2% NV50 + 12% P40
+  --color-surface-5: #dcd6f5; // N99 + 2% NV50 + 16% P40
+  --color-on-surface: var(--color-neutral-10);
   --color-surface-variant: var(--color-neutral-variant-90);
-  --shadow-light-s1: 0 2px 8px rgba(0, 0, 0, 8%);
-  --shadow-light-s2: 0 4px 12px rgba(0, 0, 0, 12%);
+  --color-on-surface-variant: var(--color-neutral-variant-30);
+  --color-outline: var(--color-neutral-variant-50);
+  --color-text: var(--color-neutral-10);
+  --color-icon: var(--color-neutral-50);
+  --color-caption: var(--color-neutral-50);
+  --color-border: var(--color-neutral-80);
+  --color-disabled: var(--color-neutral-80);
+  --color-base: var(--color-surface-1);
+  --color-layer-1: var(--color-all-100);
+  --color-layer-2: var(--color-neutral-95);
+  --color-inverse-on-surface: var(--color-neutral-95);
+  --color-hover: rgba(25, 28, 29, 8%); // 8% N10
+  --color-pressed: rgba(25, 28, 29, 12%); // 12% N10
+  --color-focused: rgba(25, 28, 29, 16%); // 16% N10
+  --color-hover-variant: rgba(93, 52, 242, 8%); // 8% P40
+  --color-pressed-variant: rgba(93, 52, 242, 12%); // 12% P40
+  --color-focused-variant: rgba(93, 52, 242, 16%); // 16% P40
+  --shadow-light-s1: 0 4px 8px rgba(66, 41, 159, 8%);
+  --shadow-light-s2: 0 4px 12px rgba(66, 41, 159, 12%);
+  --shadow-light-s3: 0 4px 16px rgba(66, 41, 159, 16%);
+
+  // Client specific variables
+  --color-hover-primary: #5832e1; // P40 + 8% N10
+  --color-pressed_primary: #5531d8; // P40 + 12% N10
+  --color-hover-danger: #ad1b1b; // ER40 + 8% N10
+  --color-pressed_danger: #a71b1b; // ER40 + 12% N10
+  --color-focused-danger: rgba(186, 27, 27, 16%); // 16% ER40
 }
 
 @mixin dark-theme {
-  --color-surface: var(--color-neutral-10);
-  --color-on-surface: var(--color-neutral-80);
-  --color-on-surface-variant: var(--color-neutral-variant-80);
-  --color-primary: var(--color-primary-80);
-  --color-on-primary: var(--color-primary-20);
-  --color-error: var(--color-error-80);
-  --color-on-secondary-container: var(--color-secondary-90);
-  // to-do: add more dark theme colors
+  // tonal palettes
+  --color-all-0: #fff;
+  --color-all-100: #000;
+  --color-primary-10: #fffbff;
+  --color-primary-20: #f5eeff;
+  --color-primary-30: #e6deff;
+  --color-primary-40: #cabeff;
+  --color-primary-50: #af9eff;
+  --color-primary-60: #947dff;
+  --color-primary-70: #7958ff;
+  --color-primary-80: #5d34f2;
+  --color-primary-90: #4300da;
+  --color-primary-95: #2d009d;
+  --color-primary-99: #190064;
+  --color-secondary-10: #fffbf7;
+  --color-secondary-20: #fff480;
+  --color-secondary-30: #f4e560;
+  --color-secondary-40: #d7c947;
+  --color-secondary-50: #baad2d;
+  --color-secondary-60: #9f930d;
+  --color-secondary-70: #847900;
+  --color-secondary-80: #695f00;
+  --color-secondary-90: #4f4700;
+  --color-secondary-95: #373100;
+  --color-secondary-99: #201c00;
+  --color-tertiary-10: #fcfcfc;
+  --color-tertiary-20: #ffeafe;
+  --color-tertiary-30: #ffd5ff;
+  --color-tertiary-40: #faabff;
+  --color-tertiary-50: #f07eff;
+  --color-tertiary-60: #d361e7;
+  --color-tertiary-70: #b545ca;
+  --color-tertiary-80: #9927af;
+  --color-tertiary-90: #7b0093;
+  --color-tertiary-95: #560068;
+  --color-tertiary-99: #350041;
+  --color-error-10: #fcfcfc;
+  --color-error-20: #ffede9;
+  --color-error-30: #ffdad4;
+  --color-error-40: #ffb4a9;
+  --color-error-50: #ff897a;
+  --color-error-60: #ff5449;
+  --color-error-70: #dd3730;
+  --color-error-80: #ba1b1b;
+  --color-error-90: #930006;
+  --color-error-95: #680003;
+  --color-error-99: #410001;
+  --color-neutral-10: #f7f8f8;
+  --color-neutral-20: #eff1f1;
+  --color-neutral-30: #e0e3e3;
+  --color-neutral-40: #c4c7c7;
+  --color-neutral-50: #a9acac;
+  --color-neutral-60: #8e9192;
+  --color-neutral-70: #747778;
+  --color-neutral-80: #5c5f60;
+  --color-neutral-90: #444748;
+  --color-neutral-95: #2d3132;
+  --color-neutral-99: #191c1d;
+  --color-neutral-variant-10: #fffbff;
+  --color-neutral-variant-20: #f3effa;
+  --color-neutral-variant-30: #e5e1ec;
+  --color-neutral-variant-40: #c9c5d0;
+  --color-neutral-variant-50: #adaab4;
+  --color-neutral-variant-60: #928f9a;
+  --color-neutral-variant-70: #78767f;
+  --color-neutral-variant-80: #5f5d67;
+  --color-neutral-variant-90: #47464e;
+  --color-neutral-variant-95: #302f38;
+  --color-neutral-variant-99: #1b1b22;
+  --color-success-10: #ebf9eb;
+  --color-success-20: #bdefbd;
+  --color-success-30: #9fe79f;
+  --color-success-40: #83da85;
+  --color-success-50: #68be6c;
+  --color-success-60: #4ea254;
+  --color-success-70: #32873d;
+  --color-success-80: #116d26;
+  --color-success-90: #005314;
+  --color-success-95: #00390b;
+  --color-success-99: #002106;
+  --color-alert-10: #fff5eb;
+  --color-alert-20: #ffeedc;
+  --color-alert-30: #ffddb5;
+  --color-alert-40: #ffb95a;
+  --color-alert-50: #eb9918;
+  --color-alert-60: #ca8000;
+  --color-alert-70: #a76900;
+  --color-alert-80: #865300;
+  --color-alert-90: #663e00;
+  --color-alert-95: #472a00;
+  --color-alert-99: #2b1700;
+
+  // color aliases
+  --color-primary: var(--color-primary-40);
+  --color-on-primary: var(--color-all-100);
+  --color-primary-container: var(--color-primary-90);
+  --color-on-primary-container: var(--color-primary-10);
+  --color-secondary: var(--color-secondary-40);
+  --color-on-secondary: var(--color-all-100);
+  --color-secondary-container: var(--color-secondary-30);
+  --color-on-secondary-container: var(--color-secondary-10);
+  --color-tertiary: var(--color-tertiary-40);
+  --color-on-tertiary: var(--color-all-100);
+  --color-tertiary-container: var(--color-tertiary-90);
+  --color-on-tertiary-container: var(--color-tertiary-10);
+  --color-error: var(--color-error-40);
+  --color-on-error: var(--color-all-100);
+  --color-error-container: var(--color-error-90);
+  --color-on-error-container: var(--color-error-10);
+  --color-background: var(--color-neutral-99);
+  --color-on-background: var(--color-neutral-10);
+  --color-surface: var(--color-neutral-99);
+  --color-surface-1: #25272b; // N99 + 2% NV50 + 5% P40
+  --color-surface-2: #2a2c32; // N99 + 2% NV50 + 8% P40
+  --color-surface-3: #2f3039; // N99 + 2% NV50 + 11% P40
+  --color-surface-4: #31323b; // N99 + 2% NV50 + 12% P40
+  --color-surface-5: #383844; // N99 + 2% NV50 + 16% P40
+  --color-on-surface: var(--color-neutral-10);
+  --color-surface-variant: var(--color-neutral-variant-90);
+  --color-on-surface-variant: var(--color-neutral-variant-30);
+  --color-outline: var(--color-neutral-variant-50);
+  --color-text: var(--color-neutral-10);
+  --color-icon: var(--color-neutral-50);
+  --color-caption: var(--color-neutral-50);
+  --color-border: var(--color-neutral-80);
+  --color-disabled: var(--color-neutral-80);
+  --color-base: #1e2124; // N99 + 3% P40
+  --color-layer-1: var(--color-surface-2);
+  --color-layer-2: var(--color-surface-3);
+  --color-inverse-on-surface: var(--color-neutral-95);
+  --color-hover: rgba(247, 248, 248, 8%); // 8% N10
+  --color-pressed: rgba(247, 248, 248, 12%); // 12% N10
+  --color-focused: rgba(247, 248, 248, 16%); // 16% N10
+  --color-hover-variant: rgba(202, 190, 255, 8%); // 8% P40
+  --color-pressed-variant: rgba(202, 190, 255, 12%); // 12% P40
+  --color-focused-variant: rgba(202, 190, 255, 16%); // 16% P40
+  --shadow-light-s1: 0 4px 8px rgba(66, 41, 159, 8%);
+  --shadow-light-s2: 0 4px 12px rgba(66, 41, 159, 12%);
+  --shadow-light-s3: 0 4px 16px rgba(66, 41, 159, 16%);
+
+  // Client specific variables
+  --color-hover-primary: #cec3fe; // P40 + 8% N10
+  --color-pressed_primary: #cfc5fe; // P40 + 12% N10
+  --color-hover-danger: #feb9af; // ER40 + 8% N10
+  --color-pressed_danger: #febcb2; // ER40 + 12% N10
+  --color-focused-danger: rgba(255, 180, 169, 16%); // 16% ER40
 }
diff --git a/packages/console/src/scss/_fonts.scss b/packages/console/src/scss/_fonts.scss
index d87d487a5..6c6870b96 100644
--- a/packages/console/src/scss/_fonts.scss
+++ b/packages/console/src/scss/_fonts.scss
@@ -25,5 +25,7 @@ $font-family:
   --font-body-small: 400 12px/16px #{$font-family};
   --font-subhead-1: 500 16px/24px #{$font-family};
   --font-subhead-2: 500 14px/20px #{$font-family};
+  --font-subhead-cap: 700 12px/16px #{$font-family};
+  --font-subhead-cap-small: 700 10px/16px #{$font-family};
   --font-button: 500 14px/20px #{$font-family};
 }
diff --git a/packages/console/src/scss/details.module.scss b/packages/console/src/scss/details.module.scss
index acfdd33ca..95153b226 100644
--- a/packages/console/src/scss/details.module.scss
+++ b/packages/console/src/scss/details.module.scss
@@ -12,7 +12,7 @@
     text-align: right;
     position: sticky;
     bottom: 0;
-    background: var(--color-on-primary);
+    background: var(--color-layer-1);
 
     &::before {
       content: '';
diff --git a/packages/console/src/scss/normalized.scss b/packages/console/src/scss/normalized.scss
index a7daac33f..e81c03ba0 100644
--- a/packages/console/src/scss/normalized.scss
+++ b/packages/console/src/scss/normalized.scss
@@ -5,7 +5,7 @@ body {
   margin: 0;
   padding: 0;
   font-family: sans-serif;
-  background: var(--color-main-background);
+  background: var(--color-base);
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: auto;
 }
@@ -29,7 +29,7 @@ table {
   thead {
     th {
       font: var(--font-subhead-2);
-      color: var(--color-component-caption);
+      color: var(--color-caption);
       padding: _.unit(2);
       border-bottom: 1px solid var(--color-neutral-90);
       text-align: left;
diff --git a/packages/console/src/scss/table.module.scss b/packages/console/src/scss/table.module.scss
index cf9dd2e32..6a193b2ec 100644
--- a/packages/console/src/scss/table.module.scss
+++ b/packages/console/src/scss/table.module.scss
@@ -8,7 +8,7 @@ tr.clickable {
   cursor: pointer;
 
   &:hover {
-    background: var(--color-table-row-selected);
+    background: var(--color-hover);
   }
 }