diff --git a/apps/browser/package.json b/apps/browser/package.json
index cf2be624a22..de51739c9a2 100644
--- a/apps/browser/package.json
+++ b/apps/browser/package.json
@@ -63,6 +63,8 @@
     "test:watch": "jest --watch",
     "test:watch:all": "jest --watchAll",
     "test:clearCache": "jest --clear-cache",
-    "update:dev:chrome": "./scripts/update-manifest-dev.sh"
+    "update:dev:chrome": "./scripts/update-manifest-dev.sh",
+    "compile:autofill-variables": "node ./scripts/compile-autofill-variables.js",
+    "watch:autofill-variables": "nodemon --watch src/autofill/shared/styles/variables.scss --exec 'npm run compile:autofill-variables'"
   }
 }
diff --git a/apps/browser/src/autofill/overlay/inline-menu/pages/list/list.css b/apps/browser/src/autofill/overlay/inline-menu/pages/list/list.css
index adde58f3b83..2ee67dd4230 100644
--- a/apps/browser/src/autofill/overlay/inline-menu/pages/list/list.css
+++ b/apps/browser/src/autofill/overlay/inline-menu/pages/list/list.css
@@ -1,12 +1,4 @@
-@import "../../../../../../../../libs/components/src/tw-theme-variables.css";
-
-:root {
-  --inline-menu-scrollbar-track: #fcfcfc;
-}
-
-.theme_dark {
-  --inline-menu-scrollbar-track: #2d323a;
-}
+@import "../../../../shared/styles/variables-export.css";
 
 * {
   box-sizing: border-box;
@@ -26,10 +18,10 @@ body {
   width: 100%;
   padding: 0;
   margin: 0;
-  font-family: Inter, "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-family: var(--autofill-font-family-sans-serif);
   font-weight: 400;
-  color: rgb(var(--color-text-main));
-  background-color: rgb(var(--color-background));
+  color: var(--autofill-body-color);
+  background-color: var(--autofill-background-color);
 }
 
 body * {
@@ -41,7 +33,8 @@ body * {
   line-height: 1.5;
   width: 100%;
   padding: 0.8rem;
-  color: rgb(var(--color-text-main));
+  color: var(--autofill-text-color);
+  font-family: var(--autofill-font-family-sans-serif);
 }
 
 .inline-menu-list-message.no-items,
@@ -53,7 +46,7 @@ body * {
 .inline-menu-list-message.save-login:has(:focus-visible) {
   outline-width: 0.2rem;
   outline-style: solid;
-  outline-color: rgb(var(--color-primary-700));
+  outline-color: var(--autofill-focus-outline-color);
 }
 
 .inline-menu-list-button-container {
@@ -62,12 +55,12 @@ body * {
   transition: background-color 0.2s ease-in-out;
   border-top-width: 0.1rem;
   border-top-style: solid;
-  background: rgb(var(--color-background));
-  border-top-color: rgb(var(--color-secondary-300));
+  background: var(--autofill-background-color);
+  border-top-color: var(--autofill-border-color);
 }
 
 .inline-menu-list-button-container:hover {
-  background: var(--color-hover-default);
+  background: var(--autofill-background-offset-color);
 }
 
 .inline-menu-list-button {
@@ -75,7 +68,7 @@ body * {
   align-content: center;
   justify-content: flex-start;
   width: 100%;
-  font-family: Inter, "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-family: var(--autofill-font-family-sans-serif);
   font-size: 1.6rem;
   font-weight: 500;
   text-align: left;
@@ -85,13 +78,13 @@ body * {
   margin: 0;
   cursor: pointer;
   border-radius: 0.4rem;
-  color: rgb(var(--color-primary-600));
+  color: var(--autofill-brand-primary);
 }
 
 .inline-menu-list-button:focus:focus-visible {
   outline-width: 0.2rem;
   outline-style: solid;
-  outline-color: rgb(var(--color-primary-700));
+  outline-color: var(--autofill-focus-outline-color);
 }
 
 .inline-menu-list-button svg {
@@ -101,7 +94,7 @@ body * {
 }
 
 .inline-menu-list-button svg path {
-  fill: rgb(var(--color-primary-600)) !important;
+  fill: var(--autofill-brand-primary) !important;
 }
 
 .unlock-button svg {
@@ -122,8 +115,8 @@ body * {
   max-height: 18rem;
   -ms-overflow-style: none;
   scrollbar-width: thin;
-  scrollbar-color: rgb(var(--color-secondary-300)) var(--inline-menu-scrollbar-track);
-  border-right-color: rgb(var(--color-secondary-300));
+  scrollbar-color: var(--autofill-input-border-color) var(--autofill-scrollbar-track-color);
+  border-right-color: var(--autofill-border-color);
 }
 
 .inline-menu-list-actions--scrollbar {
@@ -156,14 +149,14 @@ body * {
 
 .inline-menu-list-actions::-webkit-scrollbar-thumb {
   border-radius: 1rem;
-  background-color: rgb(var(--color-secondary-300));
+  background-color: var(--autofill-border-color);
 }
 
 .inline-menu-list-heading {
   position: sticky;
   top: 0;
   z-index: 1;
-  font-family: Inter, "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-family: var(--autofill-font-family-sans-serif);
   font-weight: 500;
   font-size: 1rem;
   line-height: 1.3;
@@ -172,14 +165,14 @@ body * {
   padding: 0.6rem 0.8rem;
   will-change: transform;
   border-bottom: 0.1rem solid;
-  color: rgb(var(--color-text-main));
-  background-color: rgb(var(--color-background));
-  border-bottom-color: rgb(var(--color-background));
+  color: var(--autofill-text-color);
+  background-color: var(--autofill-background-color);
+  border-bottom-color: var(--autofill-background-color);
 }
 
 .inline-menu-list-heading--bordered {
   transition: border-bottom-color 0.15s ease;
-  border-bottom-color: rgb(var(--color-secondary-300));
+  border-bottom-color: var(--autofill-border-color);
 }
 
 .inline-menu-list-container--with-new-item-button .inline-menu-list-actions {
@@ -195,11 +188,11 @@ body * {
 .inline-menu-list-actions-item:not(:last-child) {
   border-bottom-width: 0.1rem;
   border-bottom-style: solid;
-  border-bottom-color: rgb(var(--color-secondary-300));
+  border-bottom-color: var(--autofill-border-color);
 }
 
 .inline-menu-list-actions-item:hover {
-  background: var(--color-hover-default);
+  background: var(--autofill-background-offset-color);
 }
 
 .inline-menu-list-actions-item .cipher-container {
@@ -214,7 +207,7 @@ body * {
 .inline-menu-list-actions-item .cipher-container:has(:focus-visible):not(.remove-outline) {
   outline-width: 0.2rem;
   outline-style: solid;
-  outline-color: rgb(var(--color-primary-700));
+  outline-color: var(--autofill-focus-outline-color);
 }
 
 .inline-menu-list-actions-item .fill-cipher-button,
@@ -249,11 +242,11 @@ body * {
 .inline-menu-list-actions-item .view-cipher-button:focus:focus-visible {
   outline-width: 0.2rem;
   outline-style: solid;
-  outline-color: rgb(var(--color-primary-700));
+  outline-color: var(--autofill-focus-outline-color);
 }
 
 .inline-menu-list-actions-item .view-cipher-button svg path {
-  fill: rgb(var(--color-primary-600)) !important;
+  fill: var(--autofill-brand-primary) !important;
 }
 
 .inline-menu-list-actions-item .cipher-icon {
@@ -269,7 +262,7 @@ body * {
   background-size: 2.6rem;
   background-position: center;
   background-repeat: no-repeat;
-  color: rgb(var(--color-primary-600));
+  color: var(--autofill-brand-primary);
 }
 
 .inline-menu-list-actions-item .cipher-icon svg {
@@ -279,7 +272,7 @@ body * {
 }
 
 .inline-menu-list-actions-item .cipher-icon svg path {
-  fill: rgb(var(--color-primary-600)) !important;
+  fill: var(--autofill-brand-primary) !important;
 }
 
 .inline-menu-list-actions-item .cipher-icon.bwi {
@@ -299,15 +292,15 @@ body * {
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
-  color: rgb(var(--color-text-main));
+  color: var(--autofill-text-color);
 }
 
 .inline-menu-list-actions-item .totp-sec-span-danger {
-  color: rgb(var(--color-danger-600));
+  color: var(--autofill-password-special-color);
 }
 
 .inline-menu-list-actions-item .circle-color {
-  stroke: rgb(var(--color-primary-600));
+  stroke: var(--autofill-brand-primary);
 }
 
 .inline-menu-list-actions-item .circle-danger-color {
@@ -319,7 +312,7 @@ body * {
   display: block;
   width: 100%;
   line-height: 1.5;
-  font-family: Inter, "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-family: var(--autofill-font-family-sans-serif);
   font-weight: 400;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -329,12 +322,12 @@ body * {
 
 .inline-menu-list-actions-item .cipher-name {
   font-size: 1.6rem;
-  color: rgb(var(--color-text-main));
+  color: var(--autofill-text-color);
 }
 
 .inline-menu-list-actions-item .cipher-subtitle {
   font-size: 1.4rem;
-  color: rgb(var(--color-text-muted));
+  color: var(--autofill-muted-text-color);
 }
 
 .inline-menu-list-actions-item .cipher-subtitle.masked-totp {
@@ -353,11 +346,11 @@ body * {
   width: 1.5rem;
   height: 1.5rem;
   margin-right: 0.2rem;
-  fill: rgb(var(--color-text-muted)) !important;
+  fill: var(--autofill-muted-text-color) !important;
 }
 
 .inline-menu-list-actions-item .cipher-subtitle--passkey svg path {
-  fill: rgb(var(--color-text-muted)) !important;
+  fill: var(--autofill-muted-text-color) !important;
 }
 
 @keyframes bwi-spin {
@@ -378,7 +371,7 @@ body * {
   padding: 1rem 0.8rem;
   font-size: 1.4rem;
   font-weight: 400;
-  color: rgb(var(--color-secondary-500));
+  color: var(--autofill-muted-blue);
 }
 
 .passkey-authenticating-loader svg {
@@ -387,7 +380,7 @@ body * {
 }
 
 .passkey-authenticating-loader svg path {
-  fill: rgb(var(--color-secondary-500)) !important;
+  fill: var(--autofill-muted-blue) !important;
 }
 
 /* Password generator styles */
@@ -406,13 +399,13 @@ body * {
 }
 
 .password-generator-actions:hover {
-  background: var(--color-hover-default);
+  background: var(--autofill-background-offset-color);
 }
 
 .password-generator-actions:has(:focus-visible):not(.remove-outline) {
   outline-width: 0.2rem;
   outline-style: solid;
-  outline-color: rgb(var(--color-primary-700));
+  outline-color: rgb(var(--autofill-focus-outline-color));
 }
 
 .password-generator-actions .inline-menu-list-action {
@@ -421,11 +414,11 @@ body * {
   border: none;
   background-color: transparent;
   cursor: pointer;
-  color: rgb(var(--color-text-main));
+  color: var(--autofill-text-color);
 }
 
 .password-generator-actions .inline-menu-list-action svg path {
-  fill: rgb(var(--color-primary-600)) !important;
+  fill: var(--autofill-brand-primary) !important;
 }
 
 .password-generator-actions .fill-generated-password-button {
@@ -458,7 +451,7 @@ body * {
 .password-generator-actions .refresh-generated-password-button:focus:focus-visible {
   outline-width: 0.2rem;
   outline-style: solid;
-  outline-color: rgb(var(--color-primary-700));
+  outline-color: var(--autofill-focus-outline-color);
 }
 
 .password-generator-actions .refresh-generated-password-button svg {
@@ -466,7 +459,7 @@ body * {
 }
 
 .password-generator-actions .refresh-generated-password-button svg path {
-  fill: rgb(var(--color-primary-600)) !important;
+  fill: var(--autofill-brand-primary) !important;
 }
 
 .password-generator-actions .password-generator-content {
@@ -477,13 +470,13 @@ body * {
   font-size: 1.4rem;
   line-height: 1.6;
   margin-bottom: 0.1rem;
-  font-family: Inter, "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-family: var(--autofill-font-family-sans-serif);
 }
 
 .password-generator-actions .colorized-password {
   font-size: 1.2rem;
   line-height: 1.3;
-  font-family: "Source Code Pro", monospace;
+  font-family: var(--autofill-font-family-source-code-pro);
   letter-spacing: 0.05rem;
   font-weight: 400;
   display: flex;
@@ -495,9 +488,9 @@ body * {
 }
 
 .password-generator-actions .colorized-password .password-special {
-  color: rgb(var(--color-danger-600)) !important;
+  color: var(--autofill-password-special-color) !important;
 }
 
 .password-generator-actions .colorized-password .password-number {
-  color: rgb(var(--color-primary-700)) !important;
+  color: var(--autofill-password-number-color) !important;
 }
diff --git a/apps/browser/src/autofill/shared/styles/variables-export.css b/apps/browser/src/autofill/shared/styles/variables-export.css
new file mode 100644
index 00000000000..2ad84bfc6c1
--- /dev/null
+++ b/apps/browser/src/autofill/shared/styles/variables-export.css
@@ -0,0 +1,67 @@
+:root {
+  --autofill-font-family-sans-serif: Inter, Helvetica Neue, Helvetica, Arial, sans-serif;
+  --autofill-font-family-source-code-pro: Source Code Pro, monospace;
+  --autofill-font-size-base: 14px;
+  --autofill-text-color-light: #212529;
+  --autofill-muted-text-color-light: #6c747c;
+  --autofill-background-color-light: #ffffff;
+  --autofill-background-offset-color-light: #f0f0f0;
+  --autofill-body-color-light: #cfd4db;
+  --autofill-border-color-light: #ced4dc;
+  --autofill-brand-primary-light: #175ddc;
+  --autofill-input-border-color-light: #d6d6d6;
+  --autofill-password-special-color-light: #b80017;
+  --autofill-password-number-color-light: #1452c1;
+  --autofill-success-color-light: #017e45;
+  --autofill-error-color-light: #c83522;
+  --autofill-focus-outline-color-light: #1252a3;
+  --autofill-scrollbar-track-light: #fcfcfc;
+  --autofill-text-color-dark: #ffffff;
+  --autofill-muted-text-color-dark: #bac0ce;
+  --autofill-background-color-dark: #2f343d;
+  --autofill-background-offset-color-dark: #29252e;
+  --autofill-body-color-dark: #4d525e;
+  --autofill-border-color-dark: #4c525f;
+  --autofill-brand-primary-dark: #6f9df1;
+  --autofill-input-border-color-dark: #4c525f;
+  --autofill-password-special-color-dark: #ff8d85;
+  --autofill-password-number-color-dark: #6f9df1;
+  --autofill-success-color-dark: #8db89b;
+  --autofill-error-color-dark: #ee9792;
+  --autofill-focus-outline-color-dark: #4d8fe6;
+  --autofill-scrollbar-track-dark: #2d323a;
+  --autofill-muted-blue: #5a6d91;
+  --autofill-muted-grey: #bac0ce;
+  --autofill-border-radius: 3px;
+  --autofill-text-color: var(--autofill-text-color-light);
+  --autofill-muted-text-color: var(--autofill-muted-text-color-light);
+  --autofill-background-color: var(--autofill-background-color-light);
+  --autofill-background-offset-color: var(--autofill-background-offset-color-light);
+  --autofill-body-color: var(--autofill-body-color-light);
+  --autofill-border-color: var(--autofill-border-color-light);
+  --autofill-brand-primary: var(--autofill-brand-primary-light);
+  --autofill-input-border-color: var(--autofill-input-border-color-light);
+  --autofill-password-special-color: var(--autofill-password-special-color-light);
+  --autofill-password-number-color: var(--autofill-password-number-color-light);
+  --autofill-success-color: var(--autofill-success-color-light);
+  --autofill-error-color: var(--autofill-error-color-light);
+  --autofill-focus-outline-color: var(--autofill-focus-outline-color-light);
+  --autofill-scrollbar-track: var(--autofill-scrollbar-track-light);
+}
+
+.theme_dark {
+  --autofill-text-color: var(--autofill-text-color-dark);
+  --autofill-muted-text-color: var(--autofill-muted-text-color-dark);
+  --autofill-background-color: var(--autofill-background-color-dark);
+  --autofill-background-offset-color: var(--autofill-background-offset-color-dark);
+  --autofill-body-color: var(--autofill-body-color-dark);
+  --autofill-border-color: var(--autofill-border-color-dark);
+  --autofill-brand-primary: var(--autofill-brand-primary-dark);
+  --autofill-input-border-color: var(--autofill-input-border-color-dark);
+  --autofill-password-special-color: var(--autofill-password-special-color-dark);
+  --autofill-password-number-color: var(--autofill-password-number-color-dark);
+  --autofill-success-color: var(--autofill-success-color-dark);
+  --autofill-error-color: var(--autofill-error-color-dark);
+  --autofill-focus-outline-color: var(--autofill-focus-outline-color-dark);
+  --autofill-scrollbar-track: var(--autofill-scrollbar-track-dark);
+}
diff --git a/libs/components/src/tw-theme-variables.css b/libs/components/src/tw-theme-variables.css
deleted file mode 100644
index 33577380e1b..00000000000
--- a/libs/components/src/tw-theme-variables.css
+++ /dev/null
@@ -1,145 +0,0 @@
-/**
- * Shared Theme Variables
- *
- * CSS custom properties for light and dark themes.
- * This file contains only variables without any Tailwind directives,
- * allowing it to be imported by any CSS file.
- *
- * Usage:
- *   - For Tailwind components: imported by tw-theme.css
- *   - For standalone CSS (e.g., inline menu): import directly
- *
- * Note: Color values are space-separated RGB values (e.g., "255 255 255")
- * to support Tailwind's opacity modifier syntax. When using in plain CSS,
- * wrap with rgb(): background-color: rgb(var(--color-background));
- */
-
-:root {
-  --color-transparent-hover: rgb(0 0 0 / 0.02);
-  --color-shadow: 168 179 200;
-
-  --color-background: 255 255 255;
-  --color-background-alt: 243 246 249;
-  --color-background-alt2: 23 92 219;
-  --color-background-alt3: 22 55 146;
-  --color-background-alt4: 2 15 102;
-
-  --color-primary-100: 219 229 246;
-  --color-primary-300: 121 161 233;
-  --color-primary-600: 23 93 220;
-  --color-primary-700: 26 65 172;
-
-  --color-secondary-100: 230 233 239;
-  --color-secondary-300: 168 179 200;
-  --color-secondary-500: 90 109 145;
-  --color-secondary-600: 83 99 131;
-  --color-secondary-700: 63 75 99;
-
-  --color-info-100: 219 229 246;
-  --color-info-600: 121 161 233;
-  --color-info-700: 13 36 123;
-
-  --color-warning-100: 255 244 212;
-  --color-warning-600: 255 191 0;
-  --color-warning-700: 142 64 0;
-
-  --color-danger-100: 255 236 239;
-  --color-danger-600: 203 38 58;
-  --color-danger-700: 149 27 42;
-
-  --color-success-100: 213 243 216;
-  --color-success-600: 12 128 24;
-  --color-success-700: 8 81 15;
-
-  --color-notification-100: 255 225 247;
-  --color-notification-600: 192 17 118;
-
-  --color-text-main: 27 32 41;
-  --color-text-muted: 96 109 145;
-  --color-text-contrast: 255 255 255;
-  --color-text-alt2: 255 255 255;
-  --color-text-code: 192 17 118;
-
-  --color-hover-default: rgb(26 65 172 / 0.1);
-  --color-hover-contrast: rgb(255 255 255 / 0.15);
-
-  --color-marketing-logo: 23 93 220;
-  --color-bw-blue: 23 93 220;
-
-  --tw-ring-offset-color: #ffffff;
-
-  --tw-sm-breakpoint: 640px;
-
-  --color-illustration-outline: 2 15 102;
-  --color-illustration-bg-primary: 219 229 246;
-  --color-illustration-bg-secondary: 170 195 239;
-  --color-illustration-bg-tertiary: 255 255 255;
-  --color-illustration-tertiary: 255 191 0;
-  --color-illustration-logo: 23 93 220;
-}
-
-.theme_light {
-  /* should be left empty as white is the default */
-}
-
-.theme_dark {
-  --color-transparent-hover: rgb(255 255 255 / 0.02);
-  --color-shadow: 0 0 0;
-
-  --color-background: 47 52 61;
-  --color-background-alt: 18 26 39;
-  --color-background-alt2: 32 39 51;
-  --color-background-alt3: 48 57 70;
-  --color-background-alt4: 18 26 39;
-
-  --color-primary-100: 29 46 99;
-  --color-primary-300: 26 65 172;
-  --color-primary-600: 101 171 255;
-  --color-primary-700: 170 195 239;
-
-  --color-secondary-100: 48 57 70;
-  --color-secondary-300: 82 91 106;
-  --color-secondary-500: 121 128 142;
-  --color-secondary-600: 143 152 166;
-  --color-secondary-700: 158 167 181;
-
-  --color-success-100: 8 81 15;
-  --color-success-600: 107 241 120;
-  --color-success-700: 213 243 216;
-
-  --color-danger-100: 149 27 42;
-  --color-danger-600: 255 78 99;
-  --color-danger-700: 255 236 239;
-
-  --color-warning-100: 142 64 0;
-  --color-warning-600: 255 191 0;
-  --color-warning-700: 255 244 212;
-
-  --color-info-100: 13 36 123;
-  --color-info-600: 121 161 233;
-  --color-info-700: 219 229 246;
-
-  --color-notification-100: 117 37 83;
-  --color-notification-600: 255 143 208;
-
-  --color-text-main: 243 246 249;
-  --color-text-muted: 136 152 181;
-  --color-text-contrast: 18 26 39;
-  --color-text-alt2: 255 255 255;
-  --color-text-code: 255 143 208;
-
-  --color-hover-default: rgb(0 0 0 / 0.15);
-  --color-hover-contrast: rgb(170 195 239 / 0.1);
-
-  --color-marketing-logo: 255 255 255;
-  --color-bw-blue: 23 93 220;
-
-  --tw-ring-offset-color: #1f242e;
-
-  --color-illustration-outline: 23 93 220;
-  --color-illustration-bg-primary: 170 195 239;
-  --color-illustration-bg-secondary: 121 161 233;
-  --color-illustration-bg-tertiary: 243 246 249;
-  --color-illustration-tertiary: 255 191 0;
-  --color-illustration-logo: 255 255 255;
-}
diff --git a/libs/components/src/tw-theme.css b/libs/components/src/tw-theme.css
index 90e0e488832..bbcf3e0c56c 100644
--- a/libs/components/src/tw-theme.css
+++ b/libs/components/src/tw-theme.css
@@ -1,5 +1,4 @@
 @import "theme.css";
-@import "tw-theme-variables.css";
 @import "@angular/cdk/a11y-prebuilt.css";
 @import "@angular/cdk/text-field-prebuilt.css";
 @import "./reset.css";
@@ -13,6 +12,136 @@
 @tailwind components;
 @tailwind utilities;
 
+:root {
+  --color-transparent-hover: rgb(0 0 0 / 0.02);
+  --color-shadow: 168 179 200;
+
+  --color-background: 255 255 255;
+  --color-background-alt: 243 246 249;
+  --color-background-alt2: 23 92 219;
+  --color-background-alt3: 22 55 146;
+  --color-background-alt4: 2 15 102;
+
+  --color-primary-100: 219 229 246;
+  --color-primary-300: 121 161 233;
+  --color-primary-600: 23 93 220;
+  --color-primary-700: 26 65 172;
+
+  --color-secondary-100: 230 233 239;
+  --color-secondary-300: 168 179 200;
+  --color-secondary-500: 90 109 145;
+  --color-secondary-600: 83 99 131;
+  --color-secondary-700: 63 75 99;
+
+  --color-info-100: 219 229 246;
+  --color-info-600: 121 161 233;
+  --color-info-700: 13 36 123;
+
+  --color-warning-100: 255 244 212;
+  --color-warning-600: 255 191 0;
+  --color-warning-700: 142 64 0;
+
+  --color-danger-100: 255 236 239;
+  --color-danger-600: 203 38 58;
+  --color-danger-700: 149 27 42;
+
+  --color-success-100: 213 243 216;
+  --color-success-600: 12 128 24;
+  --color-success-700: 8 81 15;
+
+  --color-notification-100: 255 225 247;
+  --color-notification-600: 192 17 118;
+
+  --color-text-main: 27 32 41;
+  --color-text-muted: 96 109 145;
+  --color-text-contrast: 255 255 255;
+  --color-text-alt2: 255 255 255;
+  --color-text-code: 192 17 118;
+
+  --color-hover-default: rgb(26 65 172 / 0.1);
+  --color-hover-contrast: rgb(255 255 255 / 0.15);
+
+  --color-marketing-logo: 23 93 220;
+  --color-bw-blue: 23 93 220;
+
+  --tw-ring-offset-color: #ffffff;
+
+  --tw-sm-breakpoint: 640px;
+
+  --color-illustration-outline: 2 15 102;
+  --color-illustration-bg-primary: 219 229 246;
+  --color-illustration-bg-secondary: 170 195 239;
+  --color-illustration-bg-tertiary: 255 255 255;
+  --color-illustration-tertiary: 255 191 0;
+  --color-illustration-logo: 23 93 220;
+}
+
+.theme_light {
+  /* should be left empty as white is the default */
+}
+
+.theme_dark {
+  --color-transparent-hover: rgb(255 255 255 / 0.02);
+  --color-shadow: 0 0 0;
+
+  --color-background: 47 52 61;
+  --color-background-alt: 18 26 39;
+  --color-background-alt2: 32 39 51;
+  --color-background-alt3: 48 57 70;
+  --color-background-alt4: 18 26 39;
+
+  --color-primary-100: 29 46 99;
+  --color-primary-300: 26 65 172;
+  --color-primary-600: 101 171 255;
+  --color-primary-700: 170 195 239;
+
+  --color-secondary-100: 48 57 70;
+  --color-secondary-300: 82 91 106;
+  --color-secondary-500: 121 128 142;
+  --color-secondary-600: 143 152 166;
+  --color-secondary-700: 158 167 181;
+
+  --color-success-100: 8 81 15;
+  --color-success-600: 107 241 120;
+  --color-success-700: 213 243 216;
+
+  --color-danger-100: 149 27 42;
+  --color-danger-600: 255 78 99;
+  --color-danger-700: 255 236 239;
+
+  --color-warning-100: 142 64 0;
+  --color-warning-600: 255 191 0;
+  --color-warning-700: 255 244 212;
+
+  --color-info-100: 13 36 123;
+  --color-info-600: 121 161 233;
+  --color-info-700: 219 229 246;
+
+  --color-notification-100: 117 37 83;
+  --color-notification-600: 255 143 208;
+
+  --color-text-main: 243 246 249;
+  --color-text-muted: 136 152 181;
+  --color-text-contrast: 18 26 39;
+  --color-text-alt2: 255 255 255;
+  --color-text-code: 255 143 208;
+
+  --color-hover-default: rgb(0 0 0 / 0.15);
+  --color-hover-contrast: rgb(170 195 239 / 0.1);
+
+  --color-marketing-logo: 255 255 255;
+  --color-bw-blue: 23 93 220;
+
+  --tw-ring-offset-color: #1f242e;
+
+  --color-illustration-outline: 23 93 220;
+  --color-illustration-bg-primary: 170 195 239;
+  --color-illustration-bg-secondary: 121 161 233;
+  --color-illustration-bg-tertiary: 243 246 249;
+  --color-illustration-tertiary: 255 191 0;
+  --color-illustration-logo: 255 255 255;
+}
+
 @layer components {
   /**
   * tw-break-words does not work with table cells: