diff --git a/airbyte-webapp/.stylelintrc b/airbyte-webapp/.stylelintrc
index c211a8208757..a9ca3d19efcd 100644
--- a/airbyte-webapp/.stylelintrc
+++ b/airbyte-webapp/.stylelintrc
@@ -10,6 +10,7 @@
     "color-function-notation": null,
     "font-family-name-quotes": null,
     "no-unknown-animations": true,
+    "custom-property-empty-line-before": null,
     "scss/dollar-variable-empty-line-before": null,
     "scss/dollar-variable-pattern": null,
     "scss/percent-placeholder-pattern": null,
diff --git a/airbyte-webapp/src/components/connection/CatalogTree/StreamHeader.module.scss b/airbyte-webapp/src/components/connection/CatalogTree/StreamHeader.module.scss
index 90a907e99b90..2d9f89b19b62 100644
--- a/airbyte-webapp/src/components/connection/CatalogTree/StreamHeader.module.scss
+++ b/airbyte-webapp/src/components/connection/CatalogTree/StreamHeader.module.scss
@@ -60,7 +60,7 @@ $icon-size: 20px;
 }
 
 .purpleBackground {
-  background-color: colors.$blue-transparent;
+  background-color: colors.$blue-40;
 }
 
 .noHeader {
diff --git a/airbyte-webapp/src/components/connection/CatalogTree/next/StreamDetailsPanel/StreamDetailsPanel.module.scss b/airbyte-webapp/src/components/connection/CatalogTree/next/StreamDetailsPanel/StreamDetailsPanel.module.scss
index 514e269ea2a0..b28dac85807c 100644
--- a/airbyte-webapp/src/components/connection/CatalogTree/next/StreamDetailsPanel/StreamDetailsPanel.module.scss
+++ b/airbyte-webapp/src/components/connection/CatalogTree/next/StreamDetailsPanel/StreamDetailsPanel.module.scss
@@ -1,9 +1,9 @@
 @use "scss/colors";
-@use "scss/variables" as vars;
+@use "scss/variables";
 @use "scss/z-indices";
 
-$container-left-space: vars.$spacing-xl;
-$container-right-space: vars.$spacing-xl * 2;
+$container-left-space: variables.$spacing-xl;
+$container-right-space: variables.$spacing-xl * 2;
 
 .dialog {
   z-index: z-indices.$modal;
@@ -12,13 +12,13 @@ $container-right-space: vars.$spacing-xl * 2;
 .container {
   position: fixed;
   bottom: 0;
-  left: vars.$width-size-menu + $container-left-space;
-  width: calc(100% - (vars.$width-size-menu + $container-right-space));
+  left: variables.$width-size-menu + $container-left-space;
+  width: calc(100% - (variables.$width-size-menu + $container-right-space));
   z-index: 1000;
   height: calc(100vh - 100px);
   background: colors.$white;
-  border-radius: vars.$border-radius-2xl vars.$border-radius-2xl 0 0;
-  box-shadow: 0 0 22px rgba(colors.$dark-blue-900, 12%);
+  border-radius: variables.$border-radius-2xl variables.$border-radius-2xl 0 0;
+  box-shadow: variables.$box-shadow-popup;
 }
 
 .tableContainer {
diff --git a/airbyte-webapp/src/components/connection/ConnectionOnboarding/ConnectionOnboarding.module.scss b/airbyte-webapp/src/components/connection/ConnectionOnboarding/ConnectionOnboarding.module.scss
index 3ff49d8b828d..0b1fee1fb846 100644
--- a/airbyte-webapp/src/components/connection/ConnectionOnboarding/ConnectionOnboarding.module.scss
+++ b/airbyte-webapp/src/components/connection/ConnectionOnboarding/ConnectionOnboarding.module.scss
@@ -71,7 +71,7 @@
 
   &:hover,
   &:focus-visible {
-    box-shadow: 0 10px 19px rgba(colors.$dark-blue-900, 0.16);
+    box-shadow: variables.$box-shadow-raised;
   }
 }
 
diff --git a/airbyte-webapp/src/components/ui/CodeEditor/CodeEditor.tsx b/airbyte-webapp/src/components/ui/CodeEditor/CodeEditor.tsx
index d05991d48bc7..f344b5e316f1 100644
--- a/airbyte-webapp/src/components/ui/CodeEditor/CodeEditor.tsx
+++ b/airbyte-webapp/src/components/ui/CodeEditor/CodeEditor.tsx
@@ -18,6 +18,7 @@ interface CodeEditorProps {
 
 // Converts 3-character hex values into 6-character ones.
 // Required for custom monaco theme, because it fails when receiving 3-character hex values.
+// Only needed for non-dev mode, as that is when hex values get minified to 3 characters.
 function expandHexValue(input: string) {
   const match = /^#([0-9a-fA-F])([0-9a-fA-F])([0-9a-fA-F])$/.exec(input);
   if (match) {
@@ -26,6 +27,12 @@ function expandHexValue(input: string) {
   return input;
 }
 
+function cssCustomPropToHex(cssCustomProperty: string) {
+  const varName = cssCustomProperty.replace(/var\(|\)/g, "");
+  const bodyStyles = window.getComputedStyle(document.body);
+  return expandHexValue(bodyStyles.getPropertyValue(varName).trim());
+}
+
 export const CodeEditor: React.FC<CodeEditorProps> = ({
   value,
   language,
@@ -41,14 +48,14 @@ export const CodeEditor: React.FC<CodeEditorProps> = ({
       base: "vs-dark",
       inherit: true,
       rules: [
-        { token: "string", foreground: expandHexValue(styles.darkString) },
-        { token: "string.yaml", foreground: expandHexValue(styles.darkString) },
-        { token: "string.value.json", foreground: expandHexValue(styles.darkType) },
-        { token: "string.key.json", foreground: expandHexValue(styles.darkType) },
-        { token: "type", foreground: expandHexValue(styles.darkType) },
-        { token: "number", foreground: expandHexValue(styles.darkNumber) },
-        { token: "delimiter", foreground: expandHexValue(styles.darkDelimiter) },
-        { token: "keyword", foreground: expandHexValue(styles.darkKeyword) },
+        { token: "string", foreground: cssCustomPropToHex(styles.darkString) },
+        { token: "string.yaml", foreground: cssCustomPropToHex(styles.darkString) },
+        { token: "string.value.json", foreground: cssCustomPropToHex(styles.darkType) },
+        { token: "string.key.json", foreground: cssCustomPropToHex(styles.darkType) },
+        { token: "type", foreground: cssCustomPropToHex(styles.darkType) },
+        { token: "number", foreground: cssCustomPropToHex(styles.darkNumber) },
+        { token: "delimiter", foreground: cssCustomPropToHex(styles.darkDelimiter) },
+        { token: "keyword", foreground: cssCustomPropToHex(styles.darkKeyword) },
       ],
       colors: {
         "editor.background": "#00000000", // transparent, so that parent background is shown instead
@@ -59,19 +66,19 @@ export const CodeEditor: React.FC<CodeEditorProps> = ({
       base: "vs",
       inherit: true,
       rules: [
-        { token: "string", foreground: expandHexValue(styles.lightString) },
-        { token: "string.yaml", foreground: expandHexValue(styles.lightString) },
-        { token: "string.value.json", foreground: expandHexValue(styles.lightString) },
-        { token: "string.key.json", foreground: expandHexValue(styles.lightType) },
-        { token: "type", foreground: expandHexValue(styles.lightType) },
-        { token: "number", foreground: expandHexValue(styles.lightNumber) },
-        { token: "delimiter", foreground: expandHexValue(styles.lightDelimiter) },
-        { token: "keyword", foreground: expandHexValue(styles.lightKeyword) },
+        { token: "string", foreground: cssCustomPropToHex(styles.lightString) },
+        { token: "string.yaml", foreground: cssCustomPropToHex(styles.lightString) },
+        { token: "string.value.json", foreground: cssCustomPropToHex(styles.lightString) },
+        { token: "string.key.json", foreground: cssCustomPropToHex(styles.lightType) },
+        { token: "type", foreground: cssCustomPropToHex(styles.lightType) },
+        { token: "number", foreground: cssCustomPropToHex(styles.lightNumber) },
+        { token: "delimiter", foreground: cssCustomPropToHex(styles.lightDelimiter) },
+        { token: "keyword", foreground: cssCustomPropToHex(styles.lightKeyword) },
       ],
       colors: {
         "editor.background": "#00000000", // transparent, so that parent background is shown instead
-        "editorLineNumber.foreground": expandHexValue(styles.lightLineNumber),
-        "editorLineNumber.activeForeground": expandHexValue(styles.lightLineNumberActive),
+        "editorLineNumber.foreground": cssCustomPropToHex(styles.lightLineNumber),
+        "editorLineNumber.activeForeground": cssCustomPropToHex(styles.lightLineNumberActive),
       },
     });
   };
diff --git a/airbyte-webapp/src/components/ui/Overlay/Overlay.module.scss b/airbyte-webapp/src/components/ui/Overlay/Overlay.module.scss
index f404db0d0cd3..d4894efd7324 100644
--- a/airbyte-webapp/src/components/ui/Overlay/Overlay.module.scss
+++ b/airbyte-webapp/src/components/ui/Overlay/Overlay.module.scss
@@ -8,6 +8,6 @@
   bottom: 0;
 
   &.dark {
-    background: rgba(colors.$dark-blue, 0.5);
+    background: colors.$overlay-background;
   }
 }
diff --git a/airbyte-webapp/src/components/ui/StatusIcon/CircleLoader.module.scss b/airbyte-webapp/src/components/ui/StatusIcon/CircleLoader.module.scss
index 23d17402c918..8edfbe4e8fcc 100644
--- a/airbyte-webapp/src/components/ui/StatusIcon/CircleLoader.module.scss
+++ b/airbyte-webapp/src/components/ui/StatusIcon/CircleLoader.module.scss
@@ -20,6 +20,5 @@
 
 :export {
   // Export colors to be used in SVG gradients
-  gradientStart: colors.$blue;
-  gradientStop: colors.$blue-transparent;
+  gradientColor: colors.$blue;
 }
diff --git a/airbyte-webapp/src/components/ui/StatusIcon/CircleLoader.tsx b/airbyte-webapp/src/components/ui/StatusIcon/CircleLoader.tsx
index f774995084d6..4f7f15f60929 100644
--- a/airbyte-webapp/src/components/ui/StatusIcon/CircleLoader.tsx
+++ b/airbyte-webapp/src/components/ui/StatusIcon/CircleLoader.tsx
@@ -16,8 +16,8 @@ export const CircleLoader = ({ title }: CircleLoaderProps): JSX.Element => (
         spreadMethod="pad"
         gradientUnits="userSpaceOnUse"
       >
-        <stop offset="0%" stopColor={styles.gradientStart} />
-        <stop offset="100%" stopColor={styles.gradientStop} />
+        <stop offset="0%" stopColor={styles.gradientColor} />
+        <stop offset="100%" stopColor={styles.gradientColor} stopOpacity=".1" />
       </linearGradient>
     </defs>
     {title && <title>{title}</title>}
diff --git a/airbyte-webapp/src/components/ui/Tooltip/Tooltip.module.scss b/airbyte-webapp/src/components/ui/Tooltip/Tooltip.module.scss
index 4dd592176544..0b39ebcc1f7f 100644
--- a/airbyte-webapp/src/components/ui/Tooltip/Tooltip.module.scss
+++ b/airbyte-webapp/src/components/ui/Tooltip/Tooltip.module.scss
@@ -17,15 +17,15 @@
   border-radius: variables.$border-radius-sm;
   max-width: 300px;
   z-index: z-indices.$tooltip;
-  background: rgba(colors.$dark-blue, 0.9);
+  background: colors.$dark-blue-900;
   color: colors.$white;
 
   a {
-    color: rgba(colors.$white, 0.5);
+    color: colors.$dark-blue-200;
   }
 
   &.light {
-    background: rgba(colors.$white, 0.9);
+    background: colors.$white;
     color: colors.$dark-blue;
 
     a {
diff --git a/airbyte-webapp/src/components/ui/Tooltip/TooltipTable.module.scss b/airbyte-webapp/src/components/ui/Tooltip/TooltipTable.module.scss
index 3a7765bf9847..9465e6078794 100644
--- a/airbyte-webapp/src/components/ui/Tooltip/TooltipTable.module.scss
+++ b/airbyte-webapp/src/components/ui/Tooltip/TooltipTable.module.scss
@@ -2,12 +2,12 @@
 @use "../../../scss/variables";
 
 .label {
-  color: rgba(colors.$white, 0.7);
+  color: colors.$dark-blue-200;
   padding-right: variables.$spacing-sm;
 }
 
 .light {
   .label {
-    color: rgba(colors.$dark-blue, 0.7);
+    color: colors.$dark-blue-400;
   }
 }
diff --git a/airbyte-webapp/src/packages/cloud/views/auth/components/PersonQuoteCover/PersonQuoteCover.module.scss b/airbyte-webapp/src/packages/cloud/views/auth/components/PersonQuoteCover/PersonQuoteCover.module.scss
index 402417571f33..40f0dcca170b 100644
--- a/airbyte-webapp/src/packages/cloud/views/auth/components/PersonQuoteCover/PersonQuoteCover.module.scss
+++ b/airbyte-webapp/src/packages/cloud/views/auth/components/PersonQuoteCover/PersonQuoteCover.module.scss
@@ -26,8 +26,8 @@
   background-image: linear-gradient(
     45deg,
     colors.$orange-400 10%,
-    rgba(colors.$orange-400, 0.8) 30%,
-    rgba(colors.$blue-400, 0.8) 80%,
+    rgba(255 106 77 / 80%) 30%,
+    rgba(97 94 255 / 80%) 80%,
     colors.$blue-400 100%
   );
   background-repeat: no-repeat;
diff --git a/airbyte-webapp/src/scss/_colors.scss b/airbyte-webapp/src/scss/_colors.scss
index 282110f01ebb..618f38068e68 100644
--- a/airbyte-webapp/src/scss/_colors.scss
+++ b/airbyte-webapp/src/scss/_colors.scss
@@ -1,99 +1,100 @@
 /* stylelint-disable color-no-hex, color-hex-length  */
-$blue-30: #f4f4ff;
-$blue-40: #f0efff;
-$blue-50: #eae9ff;
-$blue-100: #cbc8ff;
-$blue-200: #a6a4ff;
-$blue-300: #7f7eff;
-$blue-400: #615eff;
-$blue-500: #433bfb;
-$blue-600: #3f30ee;
-$blue-700: #3622e1;
-$blue-800: #2e0ad7;
-$blue-900: #2800bd;
-$blue: $blue-400;
-$blue-transparent: rgba($blue, 0.1);
+$blue-30: var(--color-blue-30);
+$blue-40: var(--color-blue-40);
+$blue-50: var(--color-blue-50);
+$blue-100: var(--color-blue-100);
+$blue-200: var(--color-blue-200);
+$blue-300: var(--color-blue-300);
+$blue-400: var(--color-blue-400);
+$blue-500: var(--color-blue-500);
+$blue-600: var(--color-blue-600);
+$blue-700: var(--color-blue-700);
+$blue-800: var(--color-blue-800);
+$blue-900: var(--color-blue-900);
+$blue: var(--color-blue-400);
 
-$dark-blue-50: #e6e7ef;
-$dark-blue-100: #c0c3d9;
-$dark-blue-200: #989dbf;
-$dark-blue-300: #989dbf;
-$dark-blue-400: #565c94;
-$dark-blue-500: #3b4283;
-$dark-blue-600: #353b7b;
-$dark-blue-700: #2d3270;
-$dark-blue-800: #262963;
-$dark-blue-900: #1a194d;
-$dark-blue-1000: #0a0a23;
-$dark-blue: $dark-blue-900;
+$dark-blue-50: var(--color-dark-blue-50);
+$dark-blue-100: var(--color-dark-blue-100);
+$dark-blue-200: var(--color-dark-blue-200);
+$dark-blue-300: var(--color-dark-blue-300);
+$dark-blue-400: var(--color-dark-blue-400);
+$dark-blue-500: var(--color-dark-blue-500);
+$dark-blue-600: var(--color-dark-blue-600);
+$dark-blue-700: var(--color-dark-blue-700);
+$dark-blue-800: var(--color-dark-blue-800);
+$dark-blue-900: var(--color-dark-blue-900);
+$dark-blue-1000: var(--color-dark-blue-1000);
+$dark-blue: var(--color-dark-blue-900);
 
-$grey-30: #fcfcfd;
-$grey-50: #f8f8fa;
-$grey-100: #e8e8ed;
-$grey-200: #d9d9e0;
-$grey-300: #afafc1;
-$grey-400: #8b8ba0;
-$grey-500: #717189;
-$grey-600: #595971;
-$grey-700: #494961;
-$grey-800: #35354a;
-$grey-900: #252536;
-$grey: $grey-300;
+$grey-30: var(--color-grey-30);
+$grey-50: var(--color-grey-50);
+$grey-100: var(--color-grey-100);
+$grey-200: var(--color-grey-200);
+$grey-300: var(--color-grey-300);
+$grey-400: var(--color-grey-400);
+$grey-500: var(--color-grey-500);
+$grey-600: var(--color-grey-600);
+$grey-700: var(--color-grey-700);
+$grey-800: var(--color-grey-800);
+$grey-900: var(--color-grey-900);
+$grey: var(--color-grey-300);
 
-$orange-50: #fae9e8;
-$orange-100: #fecbbf;
-$orange-200: #fea996;
-$orange-300: #fe866c;
-$orange-400: #ff6a4d;
-$orange-500: #ff4f31;
-$orange-600: #f4492d;
-$orange-700: #e64228;
-$orange-800: #d83c24;
-$orange-900: #bf2f1b;
-$orange: $orange-400;
+$orange-50: var(--color-orange-50);
+$orange-100: var(--color-orange-100);
+$orange-200: var(--color-orange-200);
+$orange-300: var(--color-orange-300);
+$orange-400: var(--color-orange-400);
+$orange-500: var(--color-orange-500);
+$orange-600: var(--color-orange-600);
+$orange-700: var(--color-orange-700);
+$orange-800: var(--color-orange-800);
+$orange-900: var(--color-orange-900);
+$orange: var(--color-orange-400);
 
-$green-30: #f4fcfd;
-$green-40: #f0fcfd;
-$green-50: #dcf6f8;
-$green-100: #a7e9ec;
-$green-200: #67dae1;
-$green-300: #00cbd6;
-$green-400: #00c0cd;
-$green-500: #00b5c7;
-$green-600: #00a5b5;
-$green-700: #00909b;
-$green-800: #007c84;
-$green-900: #005959;
-$green: $green-200;
+$green-30: var(--color-green-30);
+$green-40: var(--color-green-40);
+$green-50: var(--color-green-50);
+$green-100: var(--color-green-100);
+$green-200: var(--color-green-200);
+$green-300: var(--color-green-300);
+$green-400: var(--color-green-400);
+$green-500: var(--color-green-500);
+$green-600: var(--color-green-600);
+$green-700: var(--color-green-700);
+$green-800: var(--color-green-800);
+$green-900: var(--color-green-900);
+$green: var(--color-green-200);
 
-$red-30: #fff4f6;
-$red-40: #ffeff2;
-$red-50: #ffe4e8;
-$red-100: #ffbac6;
-$red-200: #ff8da1;
-$red-300: #ff5e7b;
-$red-400: #fb395f;
-$red-500: #f51a46;
-$red-600: #e51145;
-$red-700: #d00543;
-$red-800: #bc0042;
-$red-900: #99003f;
-$red: $red-300;
+$red-30: var(--color-red-30);
+$red-40: var(--color-red-40);
+$red-50: var(--color-red-50);
+$red-100: var(--color-red-100);
+$red-200: var(--color-red-200);
+$red-300: var(--color-red-300);
+$red-400: var(--color-red-400);
+$red-500: var(--color-red-500);
+$red-600: var(--color-red-600);
+$red-700: var(--color-red-700);
+$red-800: var(--color-red-800);
+$red-900: var(--color-red-900);
+$red: var(--color-red-300);
 
-$black: #000000;
-$white: #ffffff;
+$black: var(--color-black);
+$white: var(--color-white);
 
-$yellow-50: #fdf8e1;
-$yellow-100: #fbecb3;
-$yellow-200: #f9e081;
-$yellow-300: #f8d54e;
-$yellow-400: #f7ca26;
-$yellow-500: #f6c000;
-$yellow-600: #f6b300;
-$yellow-700: #f7a000;
-$yellow-800: #f79000;
-$yellow-900: #f77100;
-$yellow: $yellow-500;
+$yellow-50: var(--color-yellow-50);
+$yellow-100: var(--color-yellow-100);
+$yellow-200: var(--color-yellow-200);
+$yellow-300: var(--color-yellow-300);
+$yellow-400: var(--color-yellow-400);
+$yellow-500: var(--color-yellow-500);
+$yellow-600: var(--color-yellow-600);
+$yellow-700: var(--color-yellow-700);
+$yellow-800: var(--color-yellow-800);
+$yellow-900: var(--color-yellow-900);
+$yellow: var(--color-yellow-500);
+
+$overlay-background: var(--color-overlay-background);
 
 // LEGACY - DEPRECATED
 
diff --git a/airbyte-webapp/src/scss/_mixins.scss b/airbyte-webapp/src/scss/_mixins.scss
index 37c71fc5755d..a0d5d36d72d9 100644
--- a/airbyte-webapp/src/scss/_mixins.scss
+++ b/airbyte-webapp/src/scss/_mixins.scss
@@ -1,13 +1,13 @@
-@use "./colors";
+@use "./variables";
 
 @mixin shadow {
-  box-shadow: 0 2px 4px rgba(colors.$dark-blue-900, 12%);
+  box-shadow: variables.$box-shadow;
 }
 
 @mixin left-shadow {
-  box-shadow: -2px 0 10px rgba(colors.$dark-blue-900, 12%);
+  box-shadow: variables.$box-shadow-left;
 }
 
 @mixin right-shadow {
-  box-shadow: 2px 0 10px rgba(colors.$dark-blue-900, 12%);
+  box-shadow: variables.$box-shadow-right;
 }
diff --git a/airbyte-webapp/src/scss/_theme-light.scss b/airbyte-webapp/src/scss/_theme-light.scss
new file mode 100644
index 000000000000..0004ebfcfa97
--- /dev/null
+++ b/airbyte-webapp/src/scss/_theme-light.scss
@@ -0,0 +1,99 @@
+/* stylelint-disable color-no-hex, color-hex-length  */
+:root {
+  --color-black: #000000;
+  --color-white: #ffffff;
+
+  --color-blue-30: #f4f4ff;
+  --color-blue-40: #f0efff;
+  --color-blue-50: #eae9ff;
+  --color-blue-100: #cbc8ff;
+  --color-blue-200: #a6a4ff;
+  --color-blue-300: #7f7eff;
+  --color-blue-400: #615eff;
+  --color-blue-500: #433bfb;
+  --color-blue-600: #3f30ee;
+  --color-blue-700: #3622e1;
+  --color-blue-800: #2e0ad7;
+  --color-blue-900: #2800bd;
+
+  --color-dark-blue-50: #e6e7ef;
+  --color-dark-blue-100: #c0c3d9;
+  --color-dark-blue-200: #989dbf;
+  --color-dark-blue-300: #989dbf;
+  --color-dark-blue-400: #565c94;
+  --color-dark-blue-500: #3b4283;
+  --color-dark-blue-600: #353b7b;
+  --color-dark-blue-700: #2d3270;
+  --color-dark-blue-800: #262963;
+  --color-dark-blue-900: #1a194d;
+  --color-dark-blue-1000: #0a0a23;
+
+  --color-grey-30: #fcfcfd;
+  --color-grey-50: #f8f8fa;
+  --color-grey-100: #e8e8ed;
+  --color-grey-200: #d9d9e0;
+  --color-grey-300: #afafc1;
+  --color-grey-400: #8b8ba0;
+  --color-grey-500: #717189;
+  --color-grey-600: #595971;
+  --color-grey-700: #494961;
+  --color-grey-800: #35354a;
+  --color-grey-900: #252536;
+
+  --color-orange-50: #fae9e8;
+  --color-orange-100: #fecbbf;
+  --color-orange-200: #fea996;
+  --color-orange-300: #fe866c;
+  --color-orange-400: #ff6a4d;
+  --color-orange-500: #ff4f31;
+  --color-orange-600: #f4492d;
+  --color-orange-700: #e64228;
+  --color-orange-800: #d83c24;
+  --color-orange-900: #bf2f1b;
+
+  --color-green-30: #f4fcfd;
+  --color-green-40: #f0fcfd;
+  --color-green-50: #dcf6f8;
+  --color-green-100: #a7e9ec;
+  --color-green-200: #67dae1;
+  --color-green-300: #00cbd6;
+  --color-green-400: #00c0cd;
+  --color-green-500: #00b5c7;
+  --color-green-600: #00a5b5;
+  --color-green-700: #00909b;
+  --color-green-800: #007c84;
+  --color-green-900: #005959;
+
+  --color-red-30: #fff4f6;
+  --color-red-40: #ffeff2;
+  --color-red-50: #ffe4e8;
+  --color-red-100: #ffbac6;
+  --color-red-200: #ff8da1;
+  --color-red-300: #ff5e7b;
+  --color-red-400: #fb395f;
+  --color-red-500: #f51a46;
+  --color-red-600: #e51145;
+  --color-red-700: #d00543;
+  --color-red-800: #bc0042;
+  --color-red-900: #99003f;
+
+  --color-yellow-50: #fdf8e1;
+  --color-yellow-100: #fbecb3;
+  --color-yellow-200: #f9e081;
+  --color-yellow-300: #f8d54e;
+  --color-yellow-400: #f7ca26;
+  --color-yellow-500: #f6c000;
+  --color-yellow-600: #f6b300;
+  --color-yellow-700: #f7a000;
+  --color-yellow-800: #f79000;
+  --color-yellow-900: #f77100;
+
+  --color-overlay-background: rgba(26 25 77 / 50%);
+
+  --box-shadow: 0 2px 4px rgba(26 25 77 / 12%);
+  --box-shadow-left: -2px 0 10px rgba(26 25 77, 12%);
+  --box-shadow-right: 2px 0 10px rgba(26 25 77, 12%);
+  --box-shadow-raised: 0 10px 19px rgba(26 25 77 / 16%);
+  --box-shadow-popup: 0 0 22px rgba(26 25 77, 12%);
+  --box-shadow-sidebar: 0 2px 4px rgba(26 25 77 / 5%);
+}
diff --git a/airbyte-webapp/src/scss/_variables.scss b/airbyte-webapp/src/scss/_variables.scss
index e0ac714ca4ab..5f5d103e38b0 100644
--- a/airbyte-webapp/src/scss/_variables.scss
+++ b/airbyte-webapp/src/scss/_variables.scss
@@ -13,6 +13,13 @@ $border-radius-xl: 12px;
 $border-radius-2xl: 15px;
 $border-radius-pill: 500px;
 
+$box-shadow: var(--box-shadow);
+$box-shadow-left: var(--box-shadow-left);
+$box-shadow-right: var(--box-shadow-right);
+$box-shadow-raised: var(--box-shadow-raised);
+$box-shadow-popup: var(--box-shadow-popup);
+$box-shadow-sidebar: var(--box-shadow-sidebar);
+
 $spacing-xs: 3px;
 $spacing-sm: 5px;
 $spacing-md: 10px;
diff --git a/airbyte-webapp/src/scss/export.module.scss b/airbyte-webapp/src/scss/export.module.scss
index e4104b989196..b8c6441d2174 100644
--- a/airbyte-webapp/src/scss/export.module.scss
+++ b/airbyte-webapp/src/scss/export.module.scss
@@ -21,7 +21,6 @@
   blue800: colors.$blue-800;
   blue900: colors.$blue-900;
   blue: colors.$blue;
-  blueTransparent: colors.$blue-transparent;
 
   darkBlue50: colors.$dark-blue-50;
   darkBlue100: colors.$dark-blue-100;
@@ -106,9 +105,6 @@
   shadowColor: colors.$shadowColor;
   cardShadowColor: colors.$cardShadowColor;
 
-  textColor90: rgba(colors.$dark-blue, 0.9);
-  darkBlue90: rgba(colors.$dark-blue, 0.9);
-
   lightRedColor: colors.$lightRedColor;
   transparentColor: colors.$transparentColor;
 
diff --git a/airbyte-webapp/src/scss/global.scss b/airbyte-webapp/src/scss/global.scss
index b156323514bb..142c0589621e 100644
--- a/airbyte-webapp/src/scss/global.scss
+++ b/airbyte-webapp/src/scss/global.scss
@@ -1,3 +1,4 @@
+@use "./theme-light";
 @use "./colors";
 @use "./fonts";
 
diff --git a/airbyte-webapp/src/theme.ts b/airbyte-webapp/src/theme.ts
index 7c678b66efe1..fda3e2570f32 100644
--- a/airbyte-webapp/src/theme.ts
+++ b/airbyte-webapp/src/theme.ts
@@ -13,7 +13,6 @@ export const theme = {
   blue800: scss.blue800,
   blue900: scss.blue900,
   blue: scss.blue,
-  blueTransparent: scss.blueTransparent,
 
   darkBlue50: scss.darkBlue50,
   darkBlue100: scss.darkBlue100,
@@ -116,8 +115,6 @@ export const theme = {
 
   textColor: scss.darkBlue,
   lightTextColor: scss.grey,
-  textColor90: scss.textColor90,
-  darkBlue90: scss.darkBlue90,
   greyColor70: scss.grey600,
   greyColor60: scss.grey500,
   greyColor55: scss.grey400,
diff --git a/airbyte-webapp/src/views/layout/SideBar/SideBar.module.scss b/airbyte-webapp/src/views/layout/SideBar/SideBar.module.scss
index 1d3154762fea..ed01e5a23f12 100644
--- a/airbyte-webapp/src/views/layout/SideBar/SideBar.module.scss
+++ b/airbyte-webapp/src/views/layout/SideBar/SideBar.module.scss
@@ -14,7 +14,7 @@
   background-color: colors.$white;
   padding: 23px 4px 15px;
   text-align: center;
-  box-shadow: 0 2px 4px 0 rgba(colors.$dark-blue, 5%);
+  box-shadow: variables.$box-shadow-sidebar;
 }
 
 .text {