diff --git a/app/assets/stylesheets/framework.scss b/app/assets/stylesheets/framework.scss
index 9042da5ea01cc2b863c88c8d8f83c4fbb957d99b..c33bd3a5a0f35ba6e2bb67981e37278e2a074e5b 100644
--- a/app/assets/stylesheets/framework.scss
+++ b/app/assets/stylesheets/framework.scss
@@ -40,6 +40,7 @@
 @import 'framework/secondary_navigation_elements';
 @import 'framework/sidebar';
 @import 'framework/super_sidebar';
+@import 'framework/themes';
 @import 'framework/tables';
 @import 'framework/tabs';
 @import 'framework/typography';
diff --git a/app/assets/stylesheets/framework/themes.scss b/app/assets/stylesheets/framework/themes.scss
new file mode 100644
index 0000000000000000000000000000000000000000..227a2a5227885e12cd6187c6cb26ce07ade5c77b
--- /dev/null
+++ b/app/assets/stylesheets/framework/themes.scss
@@ -0,0 +1,59 @@
+.ui-indigo {
+  --gl-accent-color-default: var(--gl-color-purple-500);
+  --gl-accent-color-hover: var(--gl-color-purple-600);
+  --gl-accent-color-active: var(--gl-color-purple-700);
+
+  &.gl-dark {
+    --gl-accent-color-default: var(--gl-color-purple-400);
+    --gl-accent-color-hover: var(--gl-color-purple-200);
+    --gl-accent-color-active: var(--gl-color-purple-300);
+  }
+}
+
+.ui-blue {
+  --gl-accent-color-default: var(--gl-color-blue-500);
+  --gl-accent-color-hover: var(--gl-color-blue-600);
+  --gl-accent-color-active: var(--gl-color-blue-700);
+
+  &.gl-dark {
+    --gl-accent-color-default: var(--gl-color-blue-400);
+    --gl-accent-color-hover: var(--gl-color-blue-200);
+    --gl-accent-color-active: var(--gl-color-blue-300);
+  }
+}
+
+.ui-green {
+  --gl-accent-color-default: var(--gl-color-green-500);
+  --gl-accent-color-hover: var(--gl-color-green-600);
+  --gl-accent-color-active: var(--gl-color-green-700);
+
+  &.gl-dark {
+    --gl-accent-color-default: var(--gl-color-green-400);
+    --gl-accent-color-hover: var(--gl-color-green-200);
+    --gl-accent-color-active: var(--gl-color-green-300);
+  }
+}
+
+.ui-red {
+  --gl-accent-color-default: var(--gl-color-red-500);
+  --gl-accent-color-hover: var(--gl-color-red-600);
+  --gl-accent-color-active: var(--gl-color-red-700);
+
+  &.gl-dark {
+    --gl-accent-color-default: var(--gl-color-red-400);
+    --gl-accent-color-hover: var(--gl-color-red-200);
+    --gl-accent-color-active: var(--gl-color-red-300);
+  }
+}
+
+.ui-gray {
+  --gl-accent-color-default: var(--gl-color-neutral-500);
+  --gl-accent-color-hover: var(--gl-color-neutral-600);
+  --gl-accent-color-active: var(--gl-color-neutral-700);
+
+  &.gl-dark {
+    --gl-accent-color-default: var(--gl-color-neutral-400);
+    --gl-accent-color-hover: var(--gl-color-neutral-200);
+    --gl-accent-color-active: var(--gl-color-neutral-300);
+  }
+}
diff --git a/package.json b/package.json
index 1bc9371e4b73e02d932aa78b37852d902fe148f2..619f1f328169c434e5904ac99beab641039bcb97 100644
--- a/package.json
+++ b/package.json
@@ -67,7 +67,7 @@
     "@gitlab/fonts": "^1.3.1",
     "@gitlab/query-language-rust": "0.20.9",
     "@gitlab/svgs": "3.147.0",
-    "@gitlab/ui": "122.8.0",
+    "@gitlab/ui": "https://gitlab.com/gitlab-org/gitlab-services/design.gitlab.com/-/jobs/11411142647/artifacts/raw/packages/gitlab-ui/gitlab-ui.sdejonge-design-token-accent.tgz",
     "@gitlab/vue-router-vue3": "npm:vue-router@4.5.1",
     "@gitlab/vuex-vue3": "npm:vuex@4.1.0",
     "@gitlab/web-ide": "^0.0.1-dev-20250818141247",
diff --git a/yarn.lock b/yarn.lock
index d431c198a274f151a3bbe2f07966ff3fd9808a34..ca4293c2a066fb7b942afcd6540dc70843e67f63 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1430,7 +1430,7 @@
   resolved "https://registry.yarnpkg.com/@gitlab/fonts/-/fonts-1.3.1.tgz#dd335ed25cb33927abc1d80dfbfa31fc93e9bd15"
   integrity sha512-/7Q5Sy9Q3pmutV/1EgURm3iDZtV0HcE4nTwFpHLCrGDdxQ3pNv6SdujzeJExnfiI5Y+1FGfOvKwOlmiVuyDtzA==
 
-"@gitlab/noop@^1.0.1":
+"@gitlab/noop@^1.0.1", jackspeak@^3.1.2, "jackspeak@npm:@gitlab/noop@1.0.1":
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/@gitlab/noop/-/noop-1.0.1.tgz#71a831146ee02732b4a61d2d3c11204564753454"
   integrity sha512-s++4wjMYeDvBp9IO59DBrWjy8SE/gFkjTDO5ck2W0S6Vv7OlqgErwL7pHngAnrSmTJAzyUG8wHGqo0ViS4jn5Q==
@@ -1457,10 +1457,9 @@
   resolved "https://registry.yarnpkg.com/@gitlab/svgs/-/svgs-3.147.0.tgz#94317211774a720accee80de448606d28e8f008f"
   integrity sha512-SrewOFmd9pXSRxXKL2eqAzI9aRf9I1rnUUyJZwsRSnFOirMICTUqZ0bAwwqfIkDlABmfVpBIyLyj7OXn6bx98Q==
 
-"@gitlab/ui@122.8.0":
-  version "122.8.0"
-  resolved "https://registry.yarnpkg.com/@gitlab/ui/-/ui-122.8.0.tgz#3eb07a0cad7c27bed95b60aef0b2010ccdc66162"
-  integrity sha512-laMeKTf3RhRQe5/DJ51Oo02AIFQDMvBRpflOzhsuAxW09vFF7DJzY7IRnXsJuD01s/4Bi+XmElyvljAOjPWf6g==
+"@gitlab/ui@https://gitlab.com/gitlab-org/gitlab-services/design.gitlab.com/-/jobs/11411142647/artifacts/raw/packages/gitlab-ui/gitlab-ui.sdejonge-design-token-accent.tgz":
+  version "122.9.0"
+  resolved "https://gitlab.com/gitlab-org/gitlab-services/design.gitlab.com/-/jobs/11411142647/artifacts/raw/packages/gitlab-ui/gitlab-ui.sdejonge-design-token-accent.tgz#d8418a5b7a540260dccb2e9296b1571eaad72841"
   dependencies:
     "@floating-ui/dom" "1.7.4"
     echarts "^5.6.0"
@@ -9536,11 +9535,6 @@ istanbul-reports@^3.1.3:
     html-escaper "^2.0.0"
     istanbul-lib-report "^3.0.0"
 
-jackspeak@^3.1.2, "jackspeak@npm:@gitlab/noop@1.0.1":
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/@gitlab/noop/-/noop-1.0.1.tgz#71a831146ee02732b4a61d2d3c11204564753454"
-  integrity sha512-s++4wjMYeDvBp9IO59DBrWjy8SE/gFkjTDO5ck2W0S6Vv7OlqgErwL7pHngAnrSmTJAzyUG8wHGqo0ViS4jn5Q==
-
 jed@^1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/jed/-/jed-1.1.1.tgz#7a549bbd9ffe1585b0cd0a191e203055bee574b4"