diff --git a/packages/console/src/components/AppContent/index.module.scss b/packages/console/src/components/AppContent/index.module.scss
index 6ba62bbc8..e75884fe1 100644
--- a/packages/console/src/components/AppContent/index.module.scss
+++ b/packages/console/src/components/AppContent/index.module.scss
@@ -1,3 +1,5 @@
+@use '@/scss/colors' as colors;
+
 .app {
   position: absolute;
   inset: 0;
@@ -6,45 +8,12 @@
 }
 
 .light {
-  --color-card-background: #fff;
-  --color-surface: #fbfdfd;
-  --color-on-surface: #eff1f1;
-  --color-on-surface-variant: #47464e;
-  --color-primary: #4f37f9;
-  --color-primary-30: #3500e3;
-  --color-primary-40: #4f37f9;
-  --color-primary-50: #6e5dff;
-  --color-primary-60: #8b80ff;
-  --color-primary-70: #a8a0ff;
-  --color-primary-80: #c6c0ff;
-  --color-primary-90: #e5dfff;
-  --color-primary-95: #f3eeff;
-  --color-on-primary: #fff;
-  --color-error: #ba1b1b;
-  --color-error-30: #930006;
-  --color-error-40: #ba1b1b;
-  --color-error-50: #dd3730;
-  --color-error-60: #ff5449;
-  --color-error-70: #ff897a;
-  --color-error-80: #ffb4a9;
-  --color-error-90: #ffdad4;
-  --color-inverse-on-surface: #eff1f1;
-  --color-neutral-70: #a9acac;
-  --color-neutral-90: #e0e3e3;
-  --color-neutral-95: #eff1f1;
-  --color-on-secondary-container: #201c00;
-  --color-component-border: #c4c7c7;
-  --color-component-caption: #747778;
-  --color-component-text: #191c1d;
-  --color-outline: #78767f;
-  --color-table-row-selected: rgba(0, 0, 0, 2%);
-  --color-text-default: #202223;
-  --color-foggy: #888;
-  --color-disabled: #c4c7c7;
-  --color-border: #c4c7c7;
-  --color-green: #66bb6a;
-  --shadow-light-s1: 0 2px 8px rgba(0, 0, 0, 8%);
-  --shadow-light-s2: 0 4px 12px rgba(0, 0, 0, 12%);
+  @include colors.light-theme;
+}
+
+// Currently not in use
+.dark {
+  @include colors.dark-theme;
 }
 
 $font-family: 'SF UI Text', 'SF Pro Display', sans-serif;
diff --git a/packages/console/src/components/Button/index.module.scss b/packages/console/src/components/Button/index.module.scss
index 9df984eed..a5867296a 100644
--- a/packages/console/src/components/Button/index.module.scss
+++ b/packages/console/src/components/Button/index.module.scss
@@ -28,8 +28,8 @@
   }
 
   &.default {
-    background: var(--color-card-background);
-    color: var(--color-text-default);
+    background: var(--color-on-primary);
+    color: var(--color-component-text);
     border-color: var(--color-outline);
     border-width: 1px;
     border-style: solid;
diff --git a/packages/console/src/components/Card/index.module.scss b/packages/console/src/components/Card/index.module.scss
index 4b86f7732..d7b19922e 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-card-background);
+  background: var(--color-on-primary);
   border-radius: _.unit(4);
   padding: _.unit(6);
   height: 100%;
diff --git a/packages/console/src/components/CopyToClipboard/index.module.scss b/packages/console/src/components/CopyToClipboard/index.module.scss
index a84cf12a4..966e7d42b 100644
--- a/packages/console/src/components/CopyToClipboard/index.module.scss
+++ b/packages/console/src/components/CopyToClipboard/index.module.scss
@@ -4,7 +4,7 @@
   display: inline-block;
   padding: _.unit(3);
   border-radius: _.unit(2);
-  background: var(--color-on-surface);
+  background: var(--color-inverse-on-surface);
   color: var(--color-on-secondary-container);
   font: var(--font-caption);
   cursor: default;
diff --git a/packages/console/src/components/Status/index.module.scss b/packages/console/src/components/Status/index.module.scss
index 6f638ed4a..8686def51 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-green);
+  background: var(--color-code-comment);
 }
 
 .status.offline .icon {
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 a16d35b4d..ff04d253f 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-2);
-  color: var(--color-text-default);
+  color: var(--color-component-text);
 }
 
 .description {
   font: var(--font-caption);
-  color: var(--color-foggy);
+  color: var(--color-component-caption);
 }
diff --git a/packages/console/src/scss/_colors.scss b/packages/console/src/scss/_colors.scss
new file mode 100644
index 000000000..c355be392
--- /dev/null
+++ b/packages/console/src/scss/_colors.scss
@@ -0,0 +1,93 @@
+// tonal palettes
+:root {
+  --color-all-0: #000;
+  --color-all-100: #fff;
+  --color-primary-10: #190064;
+  --color-primary-20: #2d009d;
+  --color-primary-30: #4300da;
+  --color-primary-40: #5d34f2;
+  --color-primary-50: #7958ff;
+  --color-primary-60: #947dff;
+  --color-primary-70: #af9eff;
+  --color-primary-80: #cabeff;
+  --color-primary-90: #e6deff;
+  --color-primary-95: #f5eeff;
+  --color-primary-99: #fffbff;
+  --color-secondary-10: #201c00;
+  --color-secondary-20: #373100;
+  --color-secondary-30: #4f4700;
+  --color-secondary-40: #695f00;
+  --color-secondary-50: #847900;
+  --color-secondary-60: #9f930d;
+  --color-secondary-70: #baad2d;
+  --color-secondary-80: #d7c947;
+  --color-secondary-90: #f4e560;
+  --color-secondary-95: #fff480;
+  --color-secondary-99: #fffbf7;
+  --color-error-10: #410001;
+  --color-error-20: #680003;
+  --color-error-30: #930006;
+  --color-error-40: #ba1b1b;
+  --color-error-50: #dd3730;
+  --color-error-60: #ff5449;
+  --color-error-70: #ff897a;
+  --color-error-80: #ffb4a9;
+  --color-error-90: #ffdad4;
+  --color-error-95: #ffede9;
+  --color-error-99: #fcfcfc;
+  --color-neutral-10: #191c1d;
+  --color-neutral-20: #2d3132;
+  --color-neutral-30: #444748;
+  --color-neutral-40: #5c5f60;
+  --color-neutral-50: #747778;
+  --color-neutral-60: #8e9192;
+  --color-neutral-70: #a9acac;
+  --color-neutral-80: #c4c7c7;
+  --color-neutral-90: #e0e3e3;
+  --color-neutral-95: #eff1f1;
+  --color-neutral-99: #f7f8f8;
+  --color-neutral-variant-10: #1b1b22;
+  --color-neutral-variant-20: #302f38;
+  --color-neutral-variant-30: #47464e;
+  --color-neutral-variant-40: #5f5d67;
+  --color-neutral-variant-50: #78767f;
+  --color-neutral-variant-60: #928f9a;
+  --color-neutral-variant-70: #adaab4;
+  --color-neutral-variant-80: #c9c5d0;
+  --color-neutral-variant-90: #e5e1ec;
+  --color-neutral-variant-95: #f3effa;
+  --color-neutral-variant-99: #fffbff;
+}
+
+@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-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-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-border: var(--color-neutral-80);
+  --color-table-row-selected: rgba(25, 28, 29, 4%);
+  --color-code-comment: #66bb6a;
+  --color-surface-3: #e3dff5;
+  --shadow-light-s2: 0 4px 12px rgba(0, 0, 0, 12%);
+}
+
+@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
+}
diff --git a/packages/console/src/scss/normalized.scss b/packages/console/src/scss/normalized.scss
index 3d5be7933..8dad16267 100644
--- a/packages/console/src/scss/normalized.scss
+++ b/packages/console/src/scss/normalized.scss
@@ -4,7 +4,7 @@ body {
   margin: 0;
   padding: 0;
   font-family: sans-serif;
-  background: rgb(#e5e1ec, 50%);
+  background: var(--color-main-background);
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: auto;
 }