diff --git a/frontend/src/styles/globals.css b/frontend/src/styles/globals.css
index cb5211c0..6daf1299 100644
--- a/frontend/src/styles/globals.css
+++ b/frontend/src/styles/globals.css
@@ -201,6 +201,18 @@
   --color-sidebar-border: var(--sidebar-border);
   --color-sidebar-ring: var(--sidebar-ring);
   --color-tooltip-background: var(--tooltip-background);
+  --color-ws-150033: var(--ws-color-150033);
+  --color-ws-333333: var(--ws-color-333333);
+  --color-ws-f9f8fa: var(--ws-color-f9f8fa);
+  --color-ws-fbfafc: var(--ws-color-fbfafc);
+  --color-ws-8e47f0: var(--ws-color-8e47f0);
+  --color-ws-e4e7ec: var(--ws-color-e4e7ec);
+  --color-ws-667085: var(--ws-color-667085);
+  --color-ws-a3a1a1: var(--ws-color-a3a1a1);
+  --color-ws-999999: var(--ws-color-999999);
+  --color-ws-000000c5: var(--ws-color-000000c5);
+  --color-ws-00000015: var(--ws-color-00000015);
+  --color-ws-1500331a: var(--ws-color-1500331a);
   --animate-aurora: aurora 8s ease-in-out infinite alternate;
 
   @keyframes aurora {
@@ -289,6 +301,18 @@
   --sidebar-border: oklch(0.922 0.0098 87.47);
   --sidebar-ring: oklch(0.708 0 0);
   --tooltip-background: #00000066;
+  --ws-color-150033: #150033;
+  --ws-color-333333: #333333;
+  --ws-color-f9f8fa: #f9f8fa;
+  --ws-color-fbfafc: #fbfafc;
+  --ws-color-8e47f0: #8e47f0;
+  --ws-color-e4e7ec: #e4e7ec;
+  --ws-color-667085: #667085;
+  --ws-color-a3a1a1: #a3a1a1;
+  --ws-color-999999: #999999;
+  --ws-color-000000c5: #000000c5;
+  --ws-color-00000015: #00000015;
+  --ws-color-1500331a: #1500331a;
 }
 
 .dark {
@@ -324,6 +348,18 @@
   --sidebar-border: oklch(1 0 0 / 10%);
   --sidebar-ring: oklch(0.556 0 0);
   --tooltip-background: oklch(0.85 0 0);
+  --ws-color-150033: #f4ebff;
+  --ws-color-333333: #f5f5f5;
+  --ws-color-f9f8fa: #1f1f1f;
+  --ws-color-fbfafc: #24222a;
+  --ws-color-8e47f0: #b987ff;
+  --ws-color-e4e7ec: #3b3f48;
+  --ws-color-667085: #98a2b3;
+  --ws-color-a3a1a1: #d0d0d0;
+  --ws-color-999999: #c2c2c2;
+  --ws-color-000000c5: #ffffffcc;
+  --ws-color-00000015: #ffffff1f;
+  --ws-color-1500331a: #f4ebff24;
   font-weight: 300;
 }
 
@@ -672,4 +708,4 @@ code {
 
 .ant-tour .ant-tour-section .ant-tour-footer .ant-tour-indicators .ant-tour-indicator-active {
   background: #150055 !important;
-}
\ No newline at end of file
+}
diff --git a/frontend/src/styles/workspace-color-tokens.ts b/frontend/src/styles/workspace-color-tokens.ts
new file mode 100644
index 00000000..e6163d89
--- /dev/null
+++ b/frontend/src/styles/workspace-color-tokens.ts
@@ -0,0 +1,19 @@
+export type WorkspaceColorToken = {
+  light: `#${string}`;
+  dark: `#${string}`;
+};
+
+export const WORKSPACE_COLOR_TOKENS = {
+  "ws-150033": { light: "#150033", dark: "#f4ebff" },
+  "ws-333333": { light: "#333333", dark: "#f5f5f5" },
+  "ws-f9f8fa": { light: "#f9f8fa", dark: "#1f1f1f" },
+  "ws-fbfafc": { light: "#fbfafc", dark: "#24222a" },
+  "ws-8e47f0": { light: "#8e47f0", dark: "#b987ff" },
+  "ws-e4e7ec": { light: "#e4e7ec", dark: "#3b3f48" },
+  "ws-667085": { light: "#667085", dark: "#98a2b3" },
+  "ws-a3a1a1": { light: "#a3a1a1", dark: "#d0d0d0" },
+  "ws-999999": { light: "#999999", dark: "#c2c2c2" },
+  "ws-000000c5": { light: "#000000c5", dark: "#ffffffcc" },
+  "ws-00000015": { light: "#00000015", dark: "#ffffff1f" },
+  "ws-1500331a": { light: "#1500331a", dark: "#f4ebff24" },
+} as const satisfies Record<string, WorkspaceColorToken>;