diff --git a/apps/design-system/styles/globals.css b/apps/design-system/styles/globals.css
index 9ef3d8f9229..6e015819cfb 100644
--- a/apps/design-system/styles/globals.css
+++ b/apps/design-system/styles/globals.css
@@ -4,7 +4,7 @@
 
 @import './../../../packages/ui/build/css/source/global.css';
 @import './../../../packages/ui/build/css/themes/dark.css';
-@import './../../../packages/ui/build/css/themes/deep-dark.css';
+@import './../../../packages/ui/build/css/themes/classic-dark.css';
 @import './../../../packages/ui/build/css/themes/light.css';
 
 /* @layer base {
diff --git a/apps/docs/styles/main.scss b/apps/docs/styles/main.scss
index 7e86e881477..f73f256e88b 100644
--- a/apps/docs/styles/main.scss
+++ b/apps/docs/styles/main.scss
@@ -4,7 +4,7 @@
 
 @import './../../../packages/ui/build/css/source/global.css';
 @import './../../../packages/ui/build/css/themes/dark.css';
-@import './../../../packages/ui/build/css/themes/deep-dark.css';
+@import './../../../packages/ui/build/css/themes/classic-dark.css';
 @import './../../../packages/ui/build/css/themes/light.css';
 
 @font-face {
diff --git a/apps/storybook/.storybook/preview.css b/apps/storybook/.storybook/preview.css
index 04db23e32fc..28f5e9a78bd 100644
--- a/apps/storybook/.storybook/preview.css
+++ b/apps/storybook/.storybook/preview.css
@@ -4,7 +4,7 @@
 
 @import './../../../packages/ui/build/css/source/global.css';
 @import './../../../packages/ui/build/css/themes/dark.css';
-@import './../../../packages/ui/build/css/themes/deep-dark.css';
+@import './../../../packages/ui/build/css/themes/classic-dark.css';
 @import './../../../packages/ui/build/css/themes/light.css';
 
 @font-face {
diff --git a/apps/studio/styles/main.scss b/apps/studio/styles/main.scss
index c13d74a61c5..3809c6a8c3e 100644
--- a/apps/studio/styles/main.scss
+++ b/apps/studio/styles/main.scss
@@ -4,7 +4,7 @@
 
 @import '~ui/build/css/source/global.css';
 @import '~ui/build/css/themes/dark.css';
-@import '~ui/build/css/themes/deep-dark.css';
+@import '~ui/build/css/themes/classic-dark.css';
 @import '~ui/build/css/themes/light.css';
 
 @layer utilities {
diff --git a/apps/www/styles/index.css b/apps/www/styles/index.css
index d93f8cb31dd..2cb000223d1 100644
--- a/apps/www/styles/index.css
+++ b/apps/www/styles/index.css
@@ -6,7 +6,7 @@
 
 @import './../../../packages/ui/build/css/source/global.css';
 @import './../../../packages/ui/build/css/themes/dark.css';
-@import './../../../packages/ui/build/css/themes/deep-dark.css';
+@import './../../../packages/ui/build/css/themes/classic-dark.css';
 @import './../../../packages/ui/build/css/themes/light.css';
 
 @layer utilities {
diff --git a/packages/ui/build/css/themes/classic-dark.css b/packages/ui/build/css/themes/classic-dark.css
new file mode 100644
index 00000000000..8063b1f87a9
--- /dev/null
+++ b/packages/ui/build/css/themes/classic-dark.css
@@ -0,0 +1,63 @@
+[data-theme='classic-dark'],
+.classic-dark {
+  --helpers-os-appearance: Dark;
+  --code-block-5: 13.8deg 89.7% 69.6%;
+  --code-block-4: 276.1deg 67.7% 74.5%;
+  --code-block-3: 83.8deg 61.7% 63.1%;
+  --code-block-2: 33.2deg 90.3% 75.7%;
+  --code-block-1: 170.8deg 43.1% 61.4%;
+  --secondary-default: 0deg 0% 100%;
+  --secondary-400: 0deg 0% 100%;
+  --secondary-200: 0deg 0% 100%;
+  --brand-link: 153.1deg 60.2% 52.7%;
+  --brand-button: 151.8deg 47.1% 40.8%;
+  --brand-default: 153.1deg 60.2% 52.7%;
+  --brand-600: 153deg 59.5% 70%;
+  --brand-500: 153.5deg 61.8% 21.6%;
+  --brand-400: 153.3deg 65.2% 13.5%;
+  --brand-300: 153.8deg 69.6% 9%;
+  --brand-200: 152.5deg 75% 6.3%;
+  --warning-default: 38.9deg 100% 57.1%;
+  --warning-600: 38.9deg 89.8% 49.8%;
+  --warning-500: 34.8deg 90.9% 21.6%;
+  --warning-400: 33.2deg 100% 14.5%;
+  --warning-300: 32.3deg 100% 10.2%;
+  --warning-200: 36.8deg 100% 6.1%;
+  --destructive-default: 10.2deg 77.9% 53.9%;
+  --destructive-600: 9.7deg 85.2% 62.9%;
+  --destructive-500: 7.9deg 71.6% 29%;
+  --destructive-400: 6.7deg 60% 20.6%;
+  --destructive-300: 7.5deg 51.3% 15.3%;
+  --destructive-200: 10.9deg 23.4% 9.2%;
+  --background-dialog-default: 0deg 0% 11%;
+  --background-surface-75: 0deg 0% 12.5%;
+  --background-200: 0deg 0% 11%;
+  --foreground-contrast: 0deg 0% 11%;
+  --border-button-hover: var(--colors-gray-dark-800);
+  --border-button-default: var(--colors-gray-dark-700);
+  --border-stronger: var(--colors-gray-dark-800);
+  --border-strong: var(--colors-gray-dark-700);
+  --border-alternative: var(--colors-gray-dark-500);
+  --border-control: var(--colors-gray-dark-600);
+  --border-overlay: var(--colors-gray-dark-500);
+  --border-secondary: var(--colors-gray-dark-500);
+  --border-muted: var(--colors-gray-dark-500);
+  --border-default: var(--colors-gray-dark-600);
+  --background-button-default: var(--colors-gray-dark-500);
+  --background-muted: var(--colors-gray-dark-400);
+  --background-overlay-hover: var(--colors-gray-dark-500);
+  --background-overlay-default: var(--colors-gray-dark-300);
+  --background-surface-400: var(--colors-gray-dark-700);
+  --background-surface-300: var(--colors-gray-dark-500);
+  --background-surface-200: var(--colors-gray-dark-400);
+  --background-surface-100: var(--colors-gray-dark-300);
+  --background-control: var(--colors-gray-dark-300);
+  --background-selection: var(--colors-gray-dark-600);
+  --background-alternative-default: var(--colors-gray-dark-100);
+  --background-alternative-200: var(--colors-gray-dark-200);
+  --background-default: var(--colors-gray-dark-200);
+  --foreground-muted: var(--colors-gray-dark-900);
+  --foreground-lighter: var(--colors-gray-dark-1000);
+  --foreground-light: var(--colors-gray-dark-1100);
+  --foreground-default: var(--colors-gray-dark-1200);
+}
diff --git a/packages/ui/build/css/themes/concept-two.css b/packages/ui/build/css/themes/concept-two.css
new file mode 100644
index 00000000000..27d5a033289
--- /dev/null
+++ b/packages/ui/build/css/themes/concept-two.css
@@ -0,0 +1,63 @@
+[data-theme='concept-two'],
+.concept-two {
+  --helpers-os-appearance: Dark;
+  --code-block-5: 0deg 0% 100%;
+  --code-block-4: 0deg 0% 100%;
+  --code-block-3: 0deg 0% 100%;
+  --code-block-2: 0deg 0% 100%;
+  --code-block-1: 0deg 0% 100%;
+  --secondary-default: 21deg 90.4% 59%;
+  --secondary-400: 20deg 93.2% 40.4%;
+  --secondary-200: 17.7deg 78.9% 27.8%;
+  --brand-link: 163.9deg 53.2% 15.1%;
+  --brand-button: 175.6deg 61.8% 21.6%;
+  --brand-default: 163.9deg 53.2% 15.1%;
+  --brand-600: 156.3deg 59.5% 70%;
+  --brand-500: 175.6deg 61.8% 21.6%;
+  --brand-400: 176deg 65.2% 13.5%;
+  --brand-300: 176.3deg 69.6% 9%;
+  --brand-200: 175deg 75% 6.3%;
+  --warning-default: 41.2deg 67.5% 48.2%;
+  --warning-600: 41deg 80.6% 42.4%;
+  --warning-500: 39.7deg 70.3% 19.8%;
+  --warning-400: 38.8deg 69.9% 14.3%;
+  --warning-300: 41.8deg 60% 10.8%;
+  --warning-200: 60deg 42.1% 7.5%;
+  --destructive-default: 10.2deg 77.9% 53.9%;
+  --destructive-600: 9.7deg 85.2% 62.9%;
+  --destructive-500: 7.9deg 71.6% 29%;
+  --destructive-400: 6.7deg 60% 20.6%;
+  --destructive-300: 7.5deg 51.3% 15.3%;
+  --destructive-200: 10.9deg 23.4% 9.2%;
+  --border-button-hover: 180deg 4.9% 23.9%;
+  --border-button-default: 180deg 7.3% 16.1%;
+  --border-stronger: 180deg 4.9% 23.9%;
+  --border-strong: 180deg 7.3% 16.1%;
+  --border-alternative: 165deg 40% 2%;
+  --border-control: 180deg 7.3% 16.1%;
+  --border-overlay: 160deg 7.3% 8%;
+  --border-secondary: 180deg 17.1% 8%;
+  --border-muted: 170deg 20% 5.9%;
+  --border-default: 150deg 13% 9%;
+  --background-dialog-default: 180deg 20% 2%;
+  --background-button-default: 154.3deg 14.3% 9.6%;
+  --background-muted: 160deg 12% 4.9%;
+  --background-overlay-hover: 168deg 5.2% 19%;
+  --background-overlay-default: 168deg 9.8% 10%;
+  --background-surface-400: 154.3deg 14.3% 9.6%;
+  --background-surface-300: 154.3deg 14.3% 9.6%;
+  --background-surface-200: 160deg 12% 4.9%;
+  --background-surface-100: 160deg 23.1% 2.5%;
+  --background-surface-75: 0deg 0% 100%;
+  --background-control: 180deg 9.9% 13.9%;
+  --background-selection: 165deg 8.7% 9%;
+  --background-alternative-default: 165deg 40% 2%;
+  --background-alternative-200: 0deg 0% 5.5%;
+  --background-default: 180deg 20% 2%;
+  --background-200: 180deg 20% 2%;
+  --foreground-contrast: 156deg 33.3% 2.9%;
+  --foreground-muted: 162deg 8.5% 23.1%;
+  --foreground-lighter: 180deg 6.7% 47.1%;
+  --foreground-light: 180deg 7.5% 63.5%;
+  --foreground-default: 0deg 0% 100%;
+}
diff --git a/packages/ui/build/css/themes/dark.css b/packages/ui/build/css/themes/dark.css
index c7c9c9ab248..bf3000681a0 100644
--- a/packages/ui/build/css/themes/dark.css
+++ b/packages/ui/build/css/themes/dark.css
@@ -6,57 +6,58 @@
   --code-block-3: 83.8deg 61.7% 63.1%;
   --code-block-2: 33.2deg 90.3% 75.7%;
   --code-block-1: 170.8deg 43.1% 61.4%;
-  --secondary-default: 0deg 0% 100%;
-  --secondary-400: 0deg 0% 100%;
-  --secondary-200: 0deg 0% 100%;
-  --brand-link: 153.1deg 60.2% 52.7%;
-  --brand-button: 151.8deg 47.1% 40.8%;
+  --secondary-default: 247.8deg 100% 70%;
+  --secondary-400: 248.3deg 54.5% 25.9%;
+  --secondary-200: 248deg 53.6% 11%;
+  --brand-link: 155deg 100% 38.6%;
+  --brand-button: 154.9deg 100% 19.2%;
   --brand-default: 153.1deg 60.2% 52.7%;
-  --brand-600: 153deg 59.5% 70%;
-  --brand-500: 153.5deg 61.8% 21.6%;
-  --brand-400: 153.3deg 65.2% 13.5%;
-  --brand-300: 153.8deg 69.6% 9%;
-  --brand-200: 152.5deg 75% 6.3%;
-  --warning-default: 38.9deg 100% 57.1%;
-  --warning-600: 38.9deg 89.8% 49.8%;
+  --brand-600: 154.9deg 59.5% 70%;
+  --brand-500: 154.9deg 100% 19.2%;
+  --brand-400: 155.5deg 100% 9.6%;
+  --brand-300: 155.1deg 100% 8%;
+  --brand-200: 162deg 100% 2%;
+  --warning-default: 38.9deg 100% 42.9%;
+  --warning-600: 38.9deg 100% 42.9%;
   --warning-500: 34.8deg 90.9% 21.6%;
   --warning-400: 33.2deg 100% 14.5%;
   --warning-300: 32.3deg 100% 10.2%;
-  --warning-200: 36.8deg 100% 6.1%;
+  --warning-200: 36.6deg 100% 8%;
   --destructive-default: 10.2deg 77.9% 53.9%;
   --destructive-600: 9.7deg 85.2% 62.9%;
   --destructive-500: 7.9deg 71.6% 29%;
   --destructive-400: 6.7deg 60% 20.6%;
   --destructive-300: 7.5deg 51.3% 15.3%;
   --destructive-200: 10.9deg 23.4% 9.2%;
-  --background-surface-75: 0deg 0% 12.5%;
-  --background-200: 0deg 0% 11%;
-  --foreground-contrast: 0deg 0% 11%;
+  --border-stronger: 0deg 0% 22%;
+  --border-strong: 0deg 0% 20%;
+  --border-alternative: 0deg 0% 26.7%;
+  --border-control: 0deg 0% 22.4%;
+  --border-overlay: 0deg 0% 20%;
+  --border-secondary: 0deg 0% 14.1%;
+  --border-muted: 0deg 0% 14.1%;
+  --border-default: 0deg 0% 16.1%;
+  --background-dialog-default: 0deg 0% 7.1%;
+  --background-muted: 0deg 0% 14.1%;
+  --background-overlay-hover: 0deg 0% 18%;
+  --background-overlay-default: 0deg 0% 14.1%;
+  --background-surface-400: 0deg 0% 16.1%;
+  --background-surface-300: 0deg 0% 16.1%;
+  --background-surface-200: 0deg 0% 12.9%;
+  --background-surface-100: 0deg 0% 12.2%;
+  --background-surface-75: 0deg 0% 9%;
+  --background-control: 0deg 0% 14.1%;
+  --background-selection: 0deg 0% 19.2%;
+  --background-alternative-default: 0deg 0% 5.9%;
+  --background-default: 0deg 0% 7.1%;
+  --background-200: 0deg 0% 9%;
+  --foreground-contrast: 0deg 0% 8.6%;
+  --foreground-muted: 0deg 0% 30.2%;
+  --foreground-lighter: 0deg 0% 53.7%;
+  --foreground-light: 0deg 0% 70.6%;
+  --foreground-default: 0deg 0% 98%;
   --border-button-hover: var(--colors-gray-dark-800);
   --border-button-default: var(--colors-gray-dark-700);
-  --border-stronger: var(--colors-gray-dark-800);
-  --border-strong: var(--colors-gray-dark-700);
-  --border-alternative: var(--colors-gray-dark-500);
-  --border-control: var(--colors-gray-dark-600);
-  --border-overlay: var(--colors-gray-dark-500);
-  --border-secondary: var(--colors-gray-dark-500);
-  --border-muted: var(--colors-gray-dark-500);
-  --border-default: var(--colors-gray-dark-600);
   --background-button-default: var(--colors-gray-dark-500);
-  --background-muted: var(--colors-gray-dark-400);
-  --background-overlay-hover: var(--colors-gray-dark-500);
-  --background-overlay-default: var(--colors-gray-dark-300);
-  --background-surface-400: var(--colors-gray-dark-700);
-  --background-surface-300: var(--colors-gray-dark-500);
-  --background-surface-200: var(--colors-gray-dark-400);
-  --background-surface-100: var(--colors-gray-dark-300);
-  --background-control: var(--colors-gray-dark-300);
-  --background-selection: var(--colors-gray-dark-600);
-  --background-alternative-default: var(--colors-gray-dark-100);
   --background-alternative-200: var(--colors-gray-dark-200);
-  --background-default: var(--colors-gray-dark-200);
-  --foreground-muted: var(--colors-gray-dark-900);
-  --foreground-lighter: var(--colors-gray-dark-1000);
-  --foreground-light: var(--colors-gray-dark-1100);
-  --foreground-default: var(--colors-gray-dark-1200);
 }
diff --git a/packages/ui/build/css/themes/deep-dark.css b/packages/ui/build/css/themes/deep-dark.css
deleted file mode 100644
index 641dd925ab1..00000000000
--- a/packages/ui/build/css/themes/deep-dark.css
+++ /dev/null
@@ -1,62 +0,0 @@
-[data-theme='deep-dark'],
-.deep-dark {
-  --helpers-os-appearance: Dark;
-  --code-block-5: 13.8deg 89.7% 69.6%;
-  --code-block-4: 276.1deg 67.7% 74.5%;
-  --code-block-3: 83.8deg 61.7% 63.1%;
-  --code-block-2: 33.2deg 90.3% 75.7%;
-  --code-block-1: 170.8deg 43.1% 61.4%;
-  --secondary-default: 247.8deg 100% 70%;
-  --secondary-400: 248.3deg 54.5% 25.9%;
-  --secondary-200: 248deg 53.6% 11%;
-  --brand-link: 155deg 100% 38.6%;
-  --brand-button: 154.9deg 100% 19.2%;
-  --brand-default: 153.1deg 60.2% 52.7%;
-  --brand-600: 154.9deg 59.5% 70%;
-  --brand-500: 154.9deg 100% 19.2%;
-  --brand-400: 155.5deg 100% 9.6%;
-  --brand-300: 155.1deg 100% 8%;
-  --brand-200: 162deg 100% 2%;
-  --warning-default: 38.9deg 100% 42.9%;
-  --warning-600: 38.9deg 100% 42.9%;
-  --warning-500: 34.8deg 90.9% 21.6%;
-  --warning-400: 33.2deg 100% 14.5%;
-  --warning-300: 32.3deg 100% 10.2%;
-  --warning-200: 36.6deg 100% 8%;
-  --destructive-default: 10.2deg 77.9% 53.9%;
-  --destructive-600: 9.7deg 85.2% 62.9%;
-  --destructive-500: 7.9deg 71.6% 29%;
-  --destructive-400: 6.7deg 60% 20.6%;
-  --destructive-300: 7.5deg 51.3% 15.3%;
-  --destructive-200: 10.9deg 23.4% 9.2%;
-  --border-stronger: 0deg 0% 22%;
-  --border-strong: 0deg 0% 20%;
-  --border-alternative: 0deg 0% 26.7%;
-  --border-control: 0deg 0% 22.4%;
-  --border-overlay: 0deg 0% 20%;
-  --border-secondary: 0deg 0% 14.1%;
-  --border-muted: 0deg 0% 14.1%;
-  --border-default: 0deg 0% 16.1%;
-  --background-muted: 0deg 0% 14.1%;
-  --background-overlay-hover: 0deg 0% 18%;
-  --background-overlay-default: 0deg 0% 14.1%;
-  --background-surface-400: 0deg 0% 16.1%;
-  --background-surface-300: 0deg 0% 16.1%;
-  --background-surface-200: 0deg 0% 12.9%;
-  --background-surface-100: 0deg 0% 12.2%;
-  --background-surface-75: 0deg 0% 9%;
-  --background-control: 0deg 0% 14.1%;
-  --background-selection: 0deg 0% 19.2%;
-  --background-alternative-default: 0deg 0% 5.9%;
-  --background-default: 0deg 0% 7.1%;
-  --background-200: 0deg 0% 9%;
-  --foreground-contrast: 0deg 0% 8.6%;
-  --foreground-muted: 0deg 0% 30.2%;
-  --foreground-lighter: 0deg 0% 53.7%;
-  --foreground-light: 0deg 0% 70.6%;
-  --foreground-default: 0deg 0% 98%;
-  --border-button-hover: var(--colors-gray-dark-800);
-  --border-button-default: var(--colors-gray-dark-700);
-  --background-button-default: var(--colors-gray-dark-500);
-  --background-alternative-200: var(--colors-gray-dark-200);
-}
diff --git a/packages/ui/build/css/themes/light.css b/packages/ui/build/css/themes/light.css
index 98dd1b02050..1450f69c67c 100644
--- a/packages/ui/build/css/themes/light.css
+++ b/packages/ui/build/css/themes/light.css
@@ -32,6 +32,7 @@
   --border-stronger: 0deg 0% 56.1%;
   --border-strong: 0deg 0% 83.1%;
   --border-default: 0deg 0% 87.5%;
+  --background-dialog-default: 0deg 0% 100%;
   --background-muted: 0deg 0% 96.9%;
   --background-surface-400: 0deg 0% 89.8%;
   --background-surface-300: 0deg 0% 92.9%;
diff --git a/packages/ui/build/css/tw-extend/color.js b/packages/ui/build/css/tw-extend/color.js
index 5e7282ce1ec..0cd2028ea30 100644
--- a/packages/ui/build/css/tw-extend/color.js
+++ b/packages/ui/build/css/tw-extend/color.js
@@ -479,6 +479,10 @@ module.exports = {
   cssVariable: "var(--background-button-default)",
   value: "hsl(0, 0%, 18%)"
 },
+"background-dialog-DEFAULT": {
+  cssVariable: "var(--background-dialog-default)",
+  value: "hsl(0, 0%, 7.1%)"
+},
 "border-DEFAULT": {
   cssVariable: "var(--border-default)",
   value: "hsl(0, 0%, 16.1%)"
diff --git a/packages/ui/src/lib/tailwind-demo-classes.ts b/packages/ui/src/lib/tailwind-demo-classes.ts
index 46845c97460..d8673159670 100644
--- a/packages/ui/src/lib/tailwind-demo-classes.ts
+++ b/packages/ui/src/lib/tailwind-demo-classes.ts
@@ -14,7 +14,8 @@ export default {
     "bg-overlay",
     "bg-overlay-hover",
     "bg-muted",
-    "bg-button"
+    "bg-button",
+    "bg-dialog"
   ],
   "border": [
     "border",
diff --git a/packages/ui/transformTokens.js b/packages/ui/transformTokens.js
index 4113d18a2c7..52823869958 100644
--- a/packages/ui/transformTokens.js
+++ b/packages/ui/transformTokens.js
@@ -228,7 +228,8 @@ themeFiles.map(function (filePath, i) {
   let fileName = fileNameCleaner(filePath)
 
   // rename concept-one to dark-new
-  fileName = fileName === 'concept-one' ? 'deep-dark' : fileName
+  fileName = fileName === 'dark' ? 'classic-dark' : fileName
+  fileName = fileName === 'concept-one' ? 'dark' : fileName
 
   let configTailwindFilesByType = []