diff --git a/.stylelintrc b/.stylelintrc
index b21f43efccf2ee277902e6728480af726843c3e9..ac64963959c6b73da9ba5ace3a5d1527a177d222 100644
--- a/.stylelintrc
+++ b/.stylelintrc
@@ -9,7 +9,7 @@
    ],
    "overrides": [
     {
-      "files": ["app/assets/stylesheets/mailer.scss"],
+      "files": ["app/assets/stylesheets/mailers/mailer.scss"],
       "rules": {
         "color-hex-length": "long"
       }
diff --git a/app/assets/stylesheets/notify_base.scss b/app/assets/stylesheets/mailers/_notify_base.scss
similarity index 69%
rename from app/assets/stylesheets/notify_base.scss
rename to app/assets/stylesheets/mailers/_notify_base.scss
index 0ca1398c609344f33d586fe9ac5c500b9cf4e4e8..9eaaa5293cfef5fcd3b1ad017f6de437a7106cd2 100644
--- a/app/assets/stylesheets/notify_base.scss
+++ b/app/assets/stylesheets/mailers/_notify_base.scss
@@ -1,6 +1,6 @@
-@import 'framework/variables';
-@import 'framework/variables_overrides';
-@import 'framework/mixins';
+@import '../framework/variables';
+@import '../framework/variables_overrides';
+@import '../framework/mixins';
 
 img {
   max-width: 100%;
diff --git a/app/assets/stylesheets/mailer.scss b/app/assets/stylesheets/mailers/mailer.scss
similarity index 99%
rename from app/assets/stylesheets/mailer.scss
rename to app/assets/stylesheets/mailers/mailer.scss
index f37fdf05c7b8c2300638a6d5f8cdc0afdcd4d22a..3fc667b4b2289817c8b6ae8df5ba28abecf4f28a 100644
--- a/app/assets/stylesheets/mailer.scss
+++ b/app/assets/stylesheets/mailers/mailer.scss
@@ -1,4 +1,4 @@
-@import 'framework/variables';
+@import '../framework/variables';
 
 // Do not use 3-letter hex codes, bgcolor vs css background-color is problematic in emails
 //
diff --git a/app/assets/stylesheets/mailer_client_specific.scss b/app/assets/stylesheets/mailers/mailer_client_specific.scss
similarity index 100%
rename from app/assets/stylesheets/mailer_client_specific.scss
rename to app/assets/stylesheets/mailers/mailer_client_specific.scss
diff --git a/app/assets/stylesheets/notify.scss b/app/assets/stylesheets/mailers/notify.scss
similarity index 100%
rename from app/assets/stylesheets/notify.scss
rename to app/assets/stylesheets/mailers/notify.scss
diff --git a/app/assets/stylesheets/notify_enhanced.scss b/app/assets/stylesheets/mailers/notify_enhanced.scss
similarity index 92%
rename from app/assets/stylesheets/notify_enhanced.scss
rename to app/assets/stylesheets/mailers/notify_enhanced.scss
index 36f8c68d99fa3f498cb1fb965ca7b2267f00970c..4310d3ff261a902448251ed5202ce03d8b85a112 100644
--- a/app/assets/stylesheets/notify_enhanced.scss
+++ b/app/assets/stylesheets/mailers/notify_enhanced.scss
@@ -22,10 +22,10 @@
 // gitlab styles
 @import 'bootstrap_migration_variables';
 @import 'bootstrap_migration_reset';
-@import 'framework/gfm';
-@import 'framework/kbd';
-@import 'framework/tables';
-@import 'framework/typography';
+@import '../framework/gfm';
+@import '../framework/kbd';
+@import '../framework/tables';
+@import '../framework/typography';
 
 body {
   font-family: $regular-font;
diff --git a/app/views/layouts/_mailer.html.haml b/app/views/layouts/_mailer.html.haml
index 2f438cbfb9755f89b06822179646f79dc9ab5b22..1e5f6d9d8de66ff262edc5b9d3900e80c55a844b 100644
--- a/app/views/layouts/_mailer.html.haml
+++ b/app/views/layouts/_mailer.html.haml
@@ -10,15 +10,15 @@
     -# so we do not inline it with vite. Similar solution to:
     -# app/views/layouts/errors.html.haml
     - if vite_enabled?
-      = universal_stylesheet_link_tag 'mailer_client_specific', data: { premailer: 'ignore' }
+      = universal_stylesheet_link_tag 'mailers/mailer_client_specific', data: { premailer: 'ignore' }
     - else
       -# Avoid premailer processing of client-specific styles (@media tag not supported)
       -# We need to inline the contents here because mail clients (e.g. iOS Mail, Outlook)
       -# do not support linked stylesheets.
       %style{ type: 'text/css', 'data-premailer': 'ignore' }
-        = asset_to_string('mailer_client_specific.css').html_safe
+        = asset_to_string('mailers/mailer_client_specific.css').html_safe
 
-    = universal_stylesheet_link_tag 'mailer'
+    = universal_stylesheet_link_tag 'mailers/mailer'
   %body
     = yield :preview_text
     -# Test stub for RSpec testing of Notify and associated modules
diff --git a/app/views/layouts/notify.html.haml b/app/views/layouts/notify.html.haml
index 7a9a5762cc0a46549b0f0fbb3a275024607e168e..dd7cda6a18be545c8d608cac4ca9677c5526f08c 100644
--- a/app/views/layouts/notify.html.haml
+++ b/app/views/layouts/notify.html.haml
@@ -12,13 +12,13 @@
     %title
       GitLab
     - if Feature.enabled?(:enhanced_notify_css)
-      = universal_stylesheet_link_tag 'notify_enhanced'
+      = universal_stylesheet_link_tag 'mailers/notify_enhanced'
       %style{ type: 'text/css', 'data-premailer': 'ignore' }
         -# The MUA automatically turns some text into links.
         -# Match the color of explicit links ($blue-600 from typography.scss).
         a { color: #1068bf; }
     - else
-      = universal_stylesheet_link_tag 'notify'
+      = universal_stylesheet_link_tag 'mailers/notify'
     = yield :head
   %body
     -# Test stub for RSpec testing of Notify and associated modules
diff --git a/app/views/layouts/service_desk.html.haml b/app/views/layouts/service_desk.html.haml
index f5e43962bd57297cc228fa14a0d0a382fa15fbb0..7cabd4acaeaebdc639fee5b815b3428cc4c75f7d 100644
--- a/app/views/layouts/service_desk.html.haml
+++ b/app/views/layouts/service_desk.html.haml
@@ -6,13 +6,13 @@
       GitLab
     -# haml-lint:enable NoPlainNodes
     - if Feature.enabled?(:enhanced_notify_css)
-      = universal_stylesheet_link_tag 'notify_enhanced'
+      = universal_stylesheet_link_tag 'mailers/notify_enhanced'
       %style{ type: 'text/css', 'data-premailer': 'ignore' }
         -# The MUA automatically turns some text into links.
         -# Match the color of explicit links ($blue-600 from typography.scss).
         a { color: #1068bf; }
     - else
-      = universal_stylesheet_link_tag 'notify'
+      = universal_stylesheet_link_tag 'mailers/notify'
     = yield :head
   %body
     = html_header_message
diff --git a/config/application.rb b/config/application.rb
index ecfa9d77e40e0537c503168c3b343c63f47016c5..2b22ef67b741f9c5195d01e049952ac1b5c0ce96 100644
--- a/config/application.rb
+++ b/config/application.rb
@@ -272,11 +272,11 @@ class Application < Rails::Application
     config.assets.precompile << "tailwind.css"
 
     config.assets.precompile << "print.css"
-    config.assets.precompile << "mailer.css"
-    config.assets.precompile << "mailer_client_specific.css"
-    config.assets.precompile << "notify.css"
-    config.assets.precompile << "notify_enhanced.css"
-    config.assets.precompile << "mailers/*.css"
+    config.assets.precompile << "mailers/highlighted_diff_email.css"
+    config.assets.precompile << "mailers/mailer.css"
+    config.assets.precompile << "mailers/mailer_client_specific.css"
+    config.assets.precompile << "mailers/notify.css"
+    config.assets.precompile << "mailers/notify_enhanced.css"
     config.assets.precompile << "page_bundles/_mixins_and_variables_and_functions.css"
     config.assets.precompile << "page_bundles/admin/application_settings_metrics_and_profiling.css"
     config.assets.precompile << "page_bundles/admin/elasticsearch_form.css"
diff --git a/package.json b/package.json
index 18dcf7192fc048533f936d35628bea8b942b3382..92b4fe75fe1fe84274151e5f4edacbd6a4954911 100644
--- a/package.json
+++ b/package.json
@@ -57,6 +57,7 @@
     "@apollo/client": "^3.5.10",
     "@babel/core": "^7.23.7",
     "@babel/preset-env": "^7.23.7",
+    "@csstools/postcss-global-data": "^2.1.1",
     "@cubejs-client/core": "^0.35.23",
     "@cubejs-client/vue": "^0.35.23",
     "@floating-ui/dom": "^1.2.9",
@@ -187,6 +188,7 @@
     "popper.js": "^1.16.1",
     "portal-vue": "^2.1.7",
     "postcss": "^8.4.35",
+    "postcss-custom-properties": "^13.3.12",
     "prettier": "^3.3.2",
     "prosemirror-markdown": "1.11.2",
     "raphael": "^2.2.7",
diff --git a/scripts/frontend/lib/compile_css.mjs b/scripts/frontend/lib/compile_css.mjs
index 3ce71e3cbff5ca9da01a8e6923deafa0631b50a8..d20465885595ab6b43c9231716171ce1cd3ff20e 100644
--- a/scripts/frontend/lib/compile_css.mjs
+++ b/scripts/frontend/lib/compile_css.mjs
@@ -3,6 +3,8 @@ import { fileURLToPath } from 'node:url';
 import path from 'node:path';
 import autoprefixer from 'autoprefixer';
 import postcss from 'postcss';
+import postcssCustomProperties from 'postcss-custom-properties';
+import postcssGlobalData from '@csstools/postcss-global-data';
 import { compile, Logger } from 'sass';
 import glob from 'glob';
 /* eslint-disable import/extensions */
@@ -185,6 +187,14 @@ export function resolveCompilationTargetsForVite() {
 function createPostCSSProcessors() {
   return {
     tailwind: postcss([tailwindcss(tailwindConfig), autoprefixer()]),
+    mailers: postcss([
+      tailwindcss(tailwindConfig),
+      postcssGlobalData({
+        files: [path.join(ROOT_PATH, 'node_modules/@gitlab/ui/src/tokens/build/css/tokens.css')],
+      }),
+      postcssCustomProperties({ preserve: false }),
+      autoprefixer(),
+    ]),
     default: postcss([autoprefixer()]),
   };
 }
@@ -219,7 +229,13 @@ export async function compileAllStyles({
   }
 
   async function postProcessCSS(content, source) {
-    const processor = content.css.includes('@apply') ? processors.tailwind : processors.default;
+    let processor = processors.default;
+
+    if (source.includes('/mailers/')) {
+      processor = processors.mailers;
+    } else if (content.css.includes('@apply')) {
+      processor = processors.tailwind;
+    }
 
     return processor.process(content.css, {
       from: source,
diff --git a/yarn.lock b/yarn.lock
index 30ef4224c20b7a95e92f85a0d8096a0f047acc4d..ea774cf77836f718eb06638fb86f3e0b350d196a 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1056,26 +1056,41 @@
   resolved "https://registry.yarnpkg.com/@braintree/sanitize-url/-/sanitize-url-6.0.4.tgz#923ca57e173c6b232bbbb07347b1be982f03e783"
   integrity sha512-s3jaWicZd0pkP0jf5ysyHUI/RE7MHos6qlToFcGWXVp+ykHOy77OUMrfbgJ9it2C5bow7OIQwYYaHjk9XlBQ2A==
 
-"@csstools/css-parser-algorithms@^2.4.0":
-  version "2.5.0"
-  resolved "https://registry.yarnpkg.com/@csstools/css-parser-algorithms/-/css-parser-algorithms-2.5.0.tgz#0c03cd5418a9f404a05ff2ffcb1b69d04e8ec532"
-  integrity sha512-abypo6m9re3clXA00eu5syw+oaPHbJTPapu9C4pzNsJ4hdZDzushT50Zhu+iIYXgEe1CxnRMn7ngsbV+MLrlpQ==
+"@csstools/cascade-layer-name-parser@^1.0.13":
+  version "1.0.13"
+  resolved "https://registry.yarnpkg.com/@csstools/cascade-layer-name-parser/-/cascade-layer-name-parser-1.0.13.tgz#6900157489bc53da1f6a66eaccd432025f6cd6fb"
+  integrity sha512-MX0yLTwtZzr82sQ0zOjqimpZbzjMaK/h2pmlrLK7DCzlmiZLYFpoO94WmN1akRVo6ll/TdpHb53vihHLUMyvng==
 
-"@csstools/css-tokenizer@^2.2.2":
-  version "2.2.3"
-  resolved "https://registry.yarnpkg.com/@csstools/css-tokenizer/-/css-tokenizer-2.2.3.tgz#b099d543ea57b64f495915a095ead583866c50c6"
-  integrity sha512-pp//EvZ9dUmGuGtG1p+n17gTHEOqu9jO+FiCUjNN3BDmyhdA2Jq9QsVeR7K8/2QCK17HSsioPlTW9ZkzoWb3Lg==
+"@csstools/css-parser-algorithms@^2.4.0", "@csstools/css-parser-algorithms@^2.7.1":
+  version "2.7.1"
+  resolved "https://registry.yarnpkg.com/@csstools/css-parser-algorithms/-/css-parser-algorithms-2.7.1.tgz#6d93a8f7d8aeb7cd9ed0868f946e46f021b6aa70"
+  integrity sha512-2SJS42gxmACHgikc1WGesXLIT8d/q2l0UFM7TaEeIzdFCE/FPMtTiizcPGGJtlPo2xuQzY09OhrLTzRxqJqwGw==
+
+"@csstools/css-tokenizer@^2.2.2", "@csstools/css-tokenizer@^2.4.1":
+  version "2.4.1"
+  resolved "https://registry.yarnpkg.com/@csstools/css-tokenizer/-/css-tokenizer-2.4.1.tgz#1d8b2e200197cf5f35ceb07ca2dade31f3a00ae8"
+  integrity sha512-eQ9DIktFJBhGjioABJRtUucoWR2mwllurfnM8LuNGAqX3ViZXaUchqk+1s7jjtkFiT9ySdACsFEA3etErkALUg==
 
 "@csstools/media-query-list-parser@^2.1.6":
   version "2.1.7"
   resolved "https://registry.yarnpkg.com/@csstools/media-query-list-parser/-/media-query-list-parser-2.1.7.tgz#a4836e3dbd693081a30b32ce9c2a781e1be16788"
   integrity sha512-lHPKJDkPUECsyAvD60joYfDmp8UERYxHGkFfyLJFTVK/ERJe0sVlIFLXU5XFxdjNDTerp5L4KeaKG+Z5S94qxQ==
 
+"@csstools/postcss-global-data@^2.1.1":
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/@csstools/postcss-global-data/-/postcss-global-data-2.1.1.tgz#b7250b5387f529cd3aa1a8dd966c1123f58c718b"
+  integrity sha512-tihdBLogY2G5jgUSu2jKSEVeOcnWqsz6k7UmPM7+ezhuV9FP5MIyX35Hc/YvqipQLRNsfBj9wRkBvsE7k1GM8A==
+
 "@csstools/selector-specificity@^3.0.1":
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/@csstools/selector-specificity/-/selector-specificity-3.0.1.tgz#d84597fbc0f897240c12fc0a31e492b036c70e40"
   integrity sha512-NPljRHkq4a14YzZ3YD406uaxh7s0g6eAq3L9aLOWywoqe8PkYamAvtsh7KNX6c++ihDrJ0RiU+/z7rGnhlZ5ww==
 
+"@csstools/utilities@^1.0.0":
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/@csstools/utilities/-/utilities-1.0.0.tgz#42f3c213f2fb929324d465684ab9f46a0febd4bb"
+  integrity sha512-tAgvZQe/t2mlvpNosA4+CkMiZ2azISW5WPAcdSalZlEjQvUfghHxfQcrCiK/7/CrfAWVxyM88kGFYO82heIGDg==
+
 "@cubejs-client/core@^0.35.23":
   version "0.35.23"
   resolved "https://registry.yarnpkg.com/@cubejs-client/core/-/core-0.35.23.tgz#6d899269aa8f029482e7e4f113f198032c089e26"
@@ -11267,6 +11282,17 @@ posix-character-classes@^0.1.0:
   resolved "https://registry.yarnpkg.com/posix-character-classes/-/posix-character-classes-0.1.1.tgz#01eac0fe3b5af71a2a6c02feabb8c1fef7e00eab"
   integrity sha1-AerA/jta9xoqbAL+q7jB/vfgDqs=
 
+postcss-custom-properties@^13.3.12:
+  version "13.3.12"
+  resolved "https://registry.yarnpkg.com/postcss-custom-properties/-/postcss-custom-properties-13.3.12.tgz#e21960c7d13aed960b28236412d4da67f75317b0"
+  integrity sha512-oPn/OVqONB2ZLNqN185LDyaVByELAA/u3l2CS2TS16x2j2XsmV4kd8U49+TMxmUsEU9d8fB/I10E6U7kB0L1BA==
+  dependencies:
+    "@csstools/cascade-layer-name-parser" "^1.0.13"
+    "@csstools/css-parser-algorithms" "^2.7.1"
+    "@csstools/css-tokenizer" "^2.4.1"
+    "@csstools/utilities" "^1.0.0"
+    postcss-value-parser "^4.2.0"
+
 postcss-import@^15.1.0:
   version "15.1.0"
   resolved "https://registry.yarnpkg.com/postcss-import/-/postcss-import-15.1.0.tgz#41c64ed8cc0e23735a9698b3249ffdbf704adc70"