diff --git a/frontend/src/styles/globals-brand-selectors.test.ts b/frontend/src/styles/globals-brand-selectors.test.ts
index f2a1da3e..c43ca64c 100644
--- a/frontend/src/styles/globals-brand-selectors.test.ts
+++ b/frontend/src/styles/globals-brand-selectors.test.ts
@@ -10,4 +10,6 @@ const globalsCss = readFileSync(path.join(currentDir, "globals.css"), "utf8");
 void test("brand selectors target :root to outrank default root variables", () => {
   assert.match(globalsCss, /:root\.brand-xclaw\s*\{/);
   assert.match(globalsCss, /:root\.brand-sxwz\s*\{/);
+  assert.match(globalsCss, /:root\.brand-xclaw\s*\{[\s\S]*--ws-color-surface-elevated\s*:/);
+  assert.match(globalsCss, /:root\.brand-sxwz\s*\{[\s\S]*--ws-color-surface-elevated\s*:/);
 });
diff --git a/frontend/src/styles/globals.css b/frontend/src/styles/globals.css
index b1fe575e..e4e1fae3 100644
--- a/frontend/src/styles/globals.css
+++ b/frontend/src/styles/globals.css
@@ -68,16 +68,18 @@
 @source inline("bg-{background,muted,primary,secondary,accent}");
 @source inline("border-{border,input}");
 
-.brand-xclaw {
+:root.brand-xclaw {
   --brand-color-primary: #150033;
   --brand-color-primary-10: #1500331a;
   --brand-color-primary-60: #15003399;
+  --ws-color-surface-elevated: #fbfafc;
 }
 
-.brand-sxwz {
+:root.brand-sxwz {
   --brand-color-primary: #000f33;
   --brand-color-primary-10: #000f331a;
   --brand-color-primary-60: #000f3399;
+  --ws-color-surface-elevated: #f8f9fa;
 }
 
 @custom-variant dark (&:is(.dark *));
@@ -647,7 +649,7 @@ code {
 
 .workspace-code-editor .ͼ4k,
 .workspace-code-editor .ͼ4s,
-.workspace-code-editor .ͼ4q
+.workspace-code-editor .ͼ4q,
 .workspace-code-editor .ͼ4r {
   color: var(--ws-color-fg-primary);
 }