diff --git a/app/client/packages/design-system/theming/src/color/tests/DarkModeTheme.test.ts b/app/client/packages/design-system/theming/src/color/tests/DarkModeTheme.test.ts
index ff4f04c63e..b85cebc825 100644
--- a/app/client/packages/design-system/theming/src/color/tests/DarkModeTheme.test.ts
+++ b/app/client/packages/design-system/theming/src/color/tests/DarkModeTheme.test.ts
@@ -1,91 +1,190 @@
 import { DarkModeTheme } from "../src/DarkModeTheme";
 
-describe("@design-system/theming/color/DarkModeTheme", () => {
-  it("checks bg color", () => {
-    // chroma < 0.04
+describe("bg color", () => {
+  it("should return correct color when chroma is less than 0.04", () => {
     const { bg: bg1 } = new DarkModeTheme("oklch(0.92 0.02 110)").getColors();
     expect(bg1).toBe("rgb(4.3484% 4.3484% 4.3484%)");
+  });
 
-    // chroma > 0.04
+  it("should return correct color when chroma is greater than 0.04", () => {
     const { bg: bg2 } = new DarkModeTheme("oklch(0.92 0.05 110)").getColors();
     expect(bg2).toBe("rgb(5.3377% 4.7804% 0%)");
   });
+});
 
-  it("checks bgAccent color", () => {
-    // lightness < 0.3
+describe("bgAccent color", () => {
+  it("should return correct color when lightness is less than 0.3", () => {
     const { bgAccent: bgAccent1 } = new DarkModeTheme(
       "oklch(0.2 0.09 231)",
     ).getColors();
     expect(bgAccent1).toBe("rgb(0% 19.987% 30.122%)");
   });
+});
 
-  it("checks bgAccentHover color", () => {
-    // lightness < 0.3
+describe("bgAccentHover color", () => {
+  it("should return correct color when lightness is less than 0.3", () => {
     const { bgAccentHover: bgAccentHover1 } = new DarkModeTheme(
       "oklch(0.2 0.09 231)",
     ).getColors();
     expect(bgAccentHover1).toBe("rgb(0% 25.498% 37.079%)");
+  });
 
-    // lightness > 0.3 && lightness < 0.45
-    const { bgAccent: bgAccentHover2 } = new DarkModeTheme(
+  it("should return correct color when lightness is between 0.3 and 0.45", () => {
+    const { bgAccentHover: bgAccentHover2 } = new DarkModeTheme(
       "oklch(0.35 0.09 231)",
     ).getColors();
-    expect(bgAccentHover2).toBe("rgb(0% 25.498% 37.079%)");
+    expect(bgAccentHover2).toBe("rgb(0% 29.954% 42.35%)");
+  });
 
-    // lightness > 0.45 && lightness < 0.77
+  it("should return correct color when lightness is between 0.45 and 0.77", () => {
     const { bgAccentHover: bgAccentHover3 } = new DarkModeTheme(
       "oklch(0.50 0.09 231)",
     ).getColors();
     expect(bgAccentHover3).toBe("rgb(15.696% 45.773% 58.926%)");
+  });
 
-    // lightness > 0.77 && lightness < 0.85 && hue > 120 or hue < 300 && chroma > 0.04
+  it("should return correct color when lightness is between 0.77 and 0.85, hue is outside 120-300, and chroma is greater than 0.04", () => {
     const { bgAccentHover: bgAccentHover4 } = new DarkModeTheme(
       "oklch(0.80 0.09 150)",
     ).getColors();
     expect(bgAccentHover4).toBe("rgb(51.184% 89.442% 60.062%)");
+  });
 
-    // l lightness > 0.77 && lightness < 0.85 && hue < 120 or hue > 300 && chroma > 0.04
+  it("should return correct color when lightness is between 0.77 and 0.85, hue is inside 120-300, and chroma is greater than 0.04", () => {
     const { bgAccentHover: bgAccentHover5 } = new DarkModeTheme(
       "oklch(0.80 0.09 110)",
     ).getColors();
     expect(bgAccentHover5).toBe("rgb(85.364% 85.594% 0%)");
+  });
 
-    // lightness > 0.77 && lightness < 0.85 0 && chroma < 0.04
+  it("should return correct color when lightness is between 0.77 and 0.85, and chroma is less than 0.04", () => {
     const { bgAccentHover: bgAccentHover6 } = new DarkModeTheme(
       "oklch(0.80 0.03 110)",
     ).getColors();
     expect(bgAccentHover6).toBe("rgb(79.687% 80.239% 71.58%)");
+  });
 
-    // lightness > 0.85
+  it("should return correct color when lightness is greater than 0.85", () => {
     const { bgAccentHover: bgAccentHover7 } = new DarkModeTheme(
       "oklch(0.90 0.03 110)",
     ).getColors();
     expect(bgAccentHover7).toBe("rgb(78.426% 78.975% 70.34%)");
   });
+});
 
-  it("it checks bgAccentActive color", () => {
-    // seedLightness < 0.4
+describe("bgAccentActive color", () => {
+  it("should return correct color when seedLightness is less than 0.4", () => {
     const { bgAccentActive: bgAccentActive1 } = new DarkModeTheme(
       "oklch(0.2 0.09 231)",
     ).getColors();
     expect(bgAccentActive1).toBe("rgb(0% 17.836% 27.428%)");
+  });
 
-    // seedLightness >= 0.4 && seedLightness < 0.7
+  it("should return correct color when seedLightness is between 0.4 and 0.7", () => {
     const { bgAccentActive: bgAccentActive2 } = new DarkModeTheme(
       "oklch(0.45 0.09 231)",
     ).getColors();
     expect(bgAccentActive2).toBe("rgb(0% 32.155% 44.665%)");
+  });
 
-    // seedLightness >= 0.7 && seedLightness < 0.85
+  it("should return correct color when seedLightness is between 0.7 and 0.85", () => {
     const { bgAccentActive: bgAccentActive3 } = new DarkModeTheme(
       "oklch(0.75 0.09 231)",
     ).getColors();
     expect(bgAccentActive3).toBe("rgb(37.393% 66.165% 80.119%)");
+  });
 
-    // seedLightness >= 0.85
+  it("should return correct color when seedLightness is greater than or equal to 0.85", () => {
     const { bgAccentActive: bgAccentActive4 } = new DarkModeTheme(
       "oklch(0.90 0.09 231)",
     ).getColors();
     expect(bgAccentActive4).toBe("rgb(46.054% 74.898% 89.15%)");
   });
 });
+
+describe("bgAccentSubtle color", () => {
+  it("should return correct color when seedLightness is greater than 0.25", () => {
+    const { bgAccentSubtle: bgAccentSubtle1 } = new DarkModeTheme(
+      "oklch(0.30 0.09 231)",
+    ).getColors();
+    expect(bgAccentSubtle1).toBe("rgb(0% 14.671% 23.499%)");
+  });
+
+  it("should return correct color when seedLightness is less than 0.2", () => {
+    const { bgAccentSubtle: bgAccentSubtle2 } = new DarkModeTheme(
+      "oklch(0.15 0.09 231)",
+    ).getColors();
+    expect(bgAccentSubtle2).toBe("rgb(0% 9.5878% 17.677%)");
+  });
+
+  it("should return correct color when seedChroma is greater than 0.1", () => {
+    const { bgAccentSubtle: bgAccentSubtle3 } = new DarkModeTheme(
+      "oklch(0.30 0.15 231)",
+    ).getColors();
+    expect(bgAccentSubtle3).toBe("rgb(0% 14.556% 23.9%)");
+  });
+
+  it("should return correct color when seedChroma is less than 0.04", () => {
+    const { bgAccentSubtle: bgAccentSubtle4 } = new DarkModeTheme(
+      "oklch(0.30 0.03 231)",
+    ).getColors();
+    expect(bgAccentSubtle4).toBe("rgb(13.15% 13.15% 13.15%)");
+  });
+});
+
+describe("bgAccentSubtle color", () => {
+  it("should return correct color when seedLightness is greater than 0.25", () => {
+    const { bgAccentSubtle: bgAccentSubtle1 } = new DarkModeTheme(
+      "oklch(0.30 0.09 231)",
+    ).getColors();
+    expect(bgAccentSubtle1).toBe("rgb(0% 14.671% 23.499%)");
+  });
+
+  it("should return correct color when seedLightness is less than 0.2", () => {
+    const { bgAccentSubtle: bgAccentSubtle2 } = new DarkModeTheme(
+      "oklch(0.15 0.09 231)",
+    ).getColors();
+    expect(bgAccentSubtle2).toBe("rgb(0% 9.5878% 17.677%)");
+  });
+
+  it("should return correct color when seedChroma is greater than 0.1", () => {
+    const { bgAccentSubtle: bgAccentSubtle3 } = new DarkModeTheme(
+      "oklch(0.30 0.15 231)",
+    ).getColors();
+    expect(bgAccentSubtle3).toBe("rgb(0% 14.556% 23.9%)");
+  });
+
+  it("should return correct color when seedChroma is less than 0.04", () => {
+    const { bgAccentSubtle: bgAccentSubtle4 } = new DarkModeTheme(
+      "oklch(0.30 0.03 231)",
+    ).getColors();
+    expect(bgAccentSubtle4).toBe("rgb(13.15% 13.15% 13.15%)");
+  });
+});
+
+describe("bgAccentSubtleHover color", () => {
+  it("should return correct color for bgAccentSubtleHover1", () => {
+    const { bgAccentSubtleHover: bgAccentSubtleHover1 } = new DarkModeTheme(
+      "oklch(0.35 0.09 70)",
+    ).getColors();
+    expect(bgAccentSubtleHover1).toBe("rgb(25.181% 12.291% 0%)");
+  });
+});
+
+describe("bgAccentSubtleActive color", () => {
+  it("should return correct color for bgAccentSubtleActive1", () => {
+    const { bgAccentSubtleActive: bgAccentSubtleActive1 } = new DarkModeTheme(
+      "oklch(0.35 0.09 70)",
+    ).getColors();
+    expect(bgAccentSubtleActive1).toBe("rgb(19.651% 7.4427% 0%)");
+  });
+});
+
+describe("bgAssistive color", () => {
+  it("should return correct color for bgAssistive1 when seed is achromatic", () => {
+    const { bgAssistive: bgAssistive1 } = new DarkModeTheme(
+      "oklch(0.95 0.03 170)",
+    ).getColors();
+    expect(bgAssistive1).toBe("rgb(92.148% 92.148% 92.148%)");
+  });
+});
diff --git a/app/client/packages/design-system/theming/src/color/tests/LightModeTheme.test.ts b/app/client/packages/design-system/theming/src/color/tests/LightModeTheme.test.ts
index eda1596b1d..d855c4fd63 100644
--- a/app/client/packages/design-system/theming/src/color/tests/LightModeTheme.test.ts
+++ b/app/client/packages/design-system/theming/src/color/tests/LightModeTheme.test.ts
@@ -1,115 +1,196 @@
 import { LightModeTheme } from "../src/LightModeTheme";
 
-describe("@design-system/theming/color/LightModeTheme", () => {
-  it("checks bg color", () => {
-    // lightness > 0.93
+describe("bg color", () => {
+  it("should return correct color when lightness > 0.93", () => {
     const { bg: bg1 } = new LightModeTheme("oklch(0.95 0.09 231)").getColors();
     expect(bg1).toBe("rgb(84.831% 87.516% 88.974%)");
+  });
 
-    // lightness < 0.93
+  it("should return correct color when lightness < 0.93", () => {
     const { bg: bg2 } = new LightModeTheme("oklch(0.92 0.09 231)").getColors();
     expect(bg2).toBe("rgb(95.828% 98.573% 100%)");
+  });
 
-    // hue > 120 && hue < 300
+  it("should return correct color when hue > 120 && hue < 300", () => {
     const { bg: bg3 } = new LightModeTheme("oklch(0.95 0.07 231)").getColors();
     expect(bg3).toBe("rgb(84.831% 87.516% 88.974%)");
+  });
 
-    // hue < 120 or hue > 300
+  it("should return correct color when hue < 120 or hue > 300", () => {
     const { bg: bg4 } = new LightModeTheme("oklch(0.92 0.07 110)").getColors();
     expect(bg4).toBe("rgb(98.101% 98.258% 96.176%)");
+  });
 
-    // chroma < 0.04
+  it("should return correct color when chroma < 0.04", () => {
     const { bg: bg5 } = new LightModeTheme("oklch(0.92 0.02 110)").getColors();
     expect(bg5).toBe("rgb(98.026% 98.026% 98.026%)");
   });
+});
 
-  it("checks bgAccent color", () => {
-    // lightness > 0.93
+describe("bgAccent color", () => {
+  it("should return correct color when lightness > 0.93", () => {
     const { bgAccent: bgAccent1 } = new LightModeTheme(
       "oklch(0.95 0.09 231)",
     ).getColors();
     expect(bgAccent1).toBe("rgb(91.762% 98.141% 100%)");
   });
+});
 
-  it("checks bgAccentHover color", () => {
-    // lightness < 0.06
+describe("bgAccentHover color", () => {
+  it("should return correct color when lightness is less than 0.06", () => {
     const { bgAccentHover: bgAccentHover1 } = new LightModeTheme(
       "oklch(0.05 0.09 231)",
     ).getColors();
     expect(bgAccentHover1).toBe("rgb(0% 23.271% 34.263%)");
+  });
 
-    // lightness > 0.06 && lightness < 0.14
-    const { bgAccent: bgAccentHover2 } = new LightModeTheme(
+  it("should return correct color when lightness is between 0.06 and 0.14", () => {
+    const { bgAccentHover: bgAccentHover2 } = new LightModeTheme(
       "oklch(0.08 0.09 231)",
     ).getColors();
-    expect(bgAccentHover2).toBe("rgb(0% 0% 9.1079%)");
+    expect(bgAccentHover2).toBe("rgb(0% 17.836% 27.428%)");
+  });
 
-    // lightness > 0.14 && lightness < 0.21 && hue > 120 && hue < 300
+  it("should return correct color when lightness is between 0.14 and 0.21 and hue is between 120 and 300", () => {
     const { bgAccentHover: bgAccentHover3 } = new LightModeTheme(
       "oklch(0.17 0.09 231)",
     ).getColors();
     expect(bgAccentHover3).toBe("rgb(0% 16.773% 26.103%)");
+  });
 
-    // lightness > 0.14 && lightness < 0.21 && hue < 120 or hue > 300
+  it("should return correct color when lightness is between 0.14 and 0.21 and hue is not between 120 and 300", () => {
     const { bgAccentHover: bgAccentHover4 } = new LightModeTheme(
       "oklch(0.17 0.09 110)",
     ).getColors();
     expect(bgAccentHover4).toBe("rgb(19.339% 18.943% 0%)");
+  });
 
-    // lightness > 0.21 && lightness < 0.4
+  it("should return correct color when lightness is between 0.21 and 0.4", () => {
     const { bgAccentHover: bgAccentHover5 } = new LightModeTheme(
       "oklch(0.3 0.09 110)",
     ).getColors();
     expect(bgAccentHover5).toBe("rgb(28.395% 28.425% 0%)");
+  });
 
-    // lightness > 0.4 && lightness < 0.7
+  it("should return correct color when lightness is between 0.4 and 0.7", () => {
     const { bgAccentHover: bgAccentHover6 } = new LightModeTheme(
       "oklch(0.5 0.09 110)",
     ).getColors();
     expect(bgAccentHover6).toBe("rgb(45.795% 46.287% 19.839%)");
+  });
 
-    // lightness > 0.7
+  it("should return correct color when lightness is greater than 0.7", () => {
     const { bgAccentHover: bgAccentHover7 } = new LightModeTheme(
       "oklch(0.9 0.09 110)",
     ).getColors();
     expect(bgAccentHover7).toBe("rgb(92.14% 93.271% 65.642%)");
+  });
 
-    // lightness > 0.93 && hue > 60 && hue < 115
+  it("should return correct color when lightness is greater than 0.93 and hue is between 60 and 115", () => {
     const { bgAccentHover: bgAccentHover8 } = new LightModeTheme(
       "oklch(0.95 0.09 70)",
     ).getColors();
     expect(bgAccentHover8).toBe("rgb(100% 90.701% 78.457%)");
+  });
 
-    // lightness > 0.93 && hue > 116 or hue < 165
+  it("should return correct color when lightness is greater than 0.93 and hue is not between 116 and 165", () => {
     const { bgAccentHover: bgAccentHover9 } = new LightModeTheme(
       "oklch(0.95 0.09 120)",
     ).getColors();
     expect(bgAccentHover9).toBe("rgb(89.886% 97.8% 66.657%)");
   });
+});
 
-  it("checks bgAccentActive color", () => {
-    // lightness < 0.4
+describe("bgAccentActive color", () => {
+  it("should return correct color when lightness is less than 0.4", () => {
     const { bgAccentActive: bgAccentActive1 } = new LightModeTheme(
       "oklch(0.35 0.09 70)",
     ).getColors();
     expect(bgAccentActive1).toBe("rgb(28.712% 15.185% 0%)");
+  });
 
-    // lightness >= 0.4 && lightness < 0.7)
+  it("should return correct color when lightness is between 0.4 and 0.7", () => {
     const { bgAccentActive: bgAccentActive2 } = new LightModeTheme(
       "oklch(0.50 0.09 70)",
     ).getColors();
     expect(bgAccentActive2).toBe("rgb(49.27% 32.745% 10.549%)");
+  });
 
-    // lightness >= 0.7
+  it("should return correct color when lightness is greater than or equal to 0.7", () => {
     const { bgAccentActive: bgAccentActive3 } = new LightModeTheme(
       "oklch(0.75 0.09 70)",
     ).getColors();
     expect(bgAccentActive3).toBe("rgb(81.395% 63.124% 41.808%)");
+  });
 
-    // lightness > 0.93
+  it("should return correct color when lightness is greater than 0.93", () => {
     const { bgAccentActive: bgAccentActive4 } = new LightModeTheme(
       "oklch(0.95 0.09 70)",
     ).getColors();
     expect(bgAccentActive4).toBe("rgb(100% 88.945% 74.563%)");
   });
 });
+
+describe("bgAccentSubtle color", () => {
+  it("should return correct color when seedLightness is greater than 0.93", () => {
+    const { bgAccentSubtle: bgAccentSubtle1 } = new LightModeTheme(
+      "oklch(0.95 0.09 231)",
+    ).getColors();
+    expect(bgAccentSubtle1).toBe("rgb(85.876% 96.17% 100%)");
+  });
+
+  it("should return correct color when seedLightness is less than 0.93", () => {
+    const { bgAccentSubtle: bgAccentSubtle2 } = new LightModeTheme(
+      "oklch(0.92 0.09 231)",
+    ).getColors();
+    expect(bgAccentSubtle2).toBe("rgb(78.235% 93.705% 100%)");
+  });
+
+  it("should return correct color when seedChroma is greater than 0.09 and hue is between 116 and 165", () => {
+    const { bgAccentSubtle: bgAccentSubtle3 } = new LightModeTheme(
+      "oklch(0.95 0.10 120)",
+    ).getColors();
+    expect(bgAccentSubtle3).toBe("rgb(90.964% 97.964% 71.119%)");
+  });
+
+  it("should return correct color when seedChroma is greater than 0.06 and hue is not between 116 and 165", () => {
+    const { bgAccentSubtle: bgAccentSubtle4 } = new LightModeTheme(
+      "oklch(0.95 0.07 170)",
+    ).getColors();
+    expect(bgAccentSubtle4).toBe("rgb(75.944% 100% 91.359%)");
+  });
+
+  it("should return correct color when seedChroma is less than 0.04", () => {
+    const { bgAccentSubtle: bgAccentSubtle5 } = new LightModeTheme(
+      "oklch(0.95 0.03 170)",
+    ).getColors();
+    expect(bgAccentSubtle5).toBe("rgb(94.099% 94.099% 94.099%)");
+  });
+});
+
+describe("bgAccentSubtleHover color", () => {
+  it("should return correct color", () => {
+    const { bgAccentSubtleHover: bgAccentSubtleHover1 } = new LightModeTheme(
+      "oklch(0.35 0.09 70)",
+    ).getColors();
+    expect(bgAccentSubtleHover1).toBe("rgb(100% 91.599% 80.256%)");
+  });
+});
+
+describe("bgAccentSubtleActive color", () => {
+  it("should return correct color", () => {
+    const { bgAccentSubtleActive: bgAccentSubtleActive1 } = new LightModeTheme(
+      "oklch(0.35 0.09 70)",
+    ).getColors();
+    expect(bgAccentSubtleActive1).toBe("rgb(100% 87.217% 72.911%)");
+  });
+});
+
+describe("bgAssistive color", () => {
+  it("should return correct color when seed is achromatic", () => {
+    const { bgAssistive: bgAssistive1 } = new LightModeTheme(
+      "oklch(0.95 0.03 170)",
+    ).getColors();
+    expect(bgAssistive1).toBe("rgb(5.1758% 5.1758% 5.1759%)");
+  });
+});