diff --git a/lib/behat/classes/behat_session_trait.php b/lib/behat/classes/behat_session_trait.php
index ea76d0e795e..97bd908a034 100644
--- a/lib/behat/classes/behat_session_trait.php
+++ b/lib/behat/classes/behat_session_trait.php
@@ -1007,6 +1007,31 @@ EOF;
         }
     }
 
+    /**
+     * Internal step definition to find deprecated styles.
+     *
+     * Part of behat_hooks class as is part of the testing framework, is auto-executed
+     * after each step so no features will splicitly use it.
+     *
+     * @throws Exception Unknown type, depending on what we caught in the hook or basic \Exception.
+     * @see Moodle\BehatExtension\Tester\MoodleStepTester
+     */
+    public function look_for_deprecated_styles() {
+        if (!$this->running_javascript()) {
+            return;
+        }
+
+        // Look for any DOM element with deprecated message in before pseudo-element.
+        $js = <<<EOF
+            [...document.querySelectorAll('*')].some(
+                el => window.getComputedStyle(el, ':before').content === '"Deprecated style in use"'
+            );
+        EOF;
+        if ($this->evaluate_script($js)) {
+            throw new \Exception(html_entity_decode("Deprecated style in use", ENT_COMPAT));
+        }
+    }
+
     /**
      * Converts HTML tags to line breaks to display the info in CLI
      *
@@ -1045,6 +1070,9 @@ EOF;
 
         // Look for exceptions.
         $this->look_for_exceptions();
+
+        // Look for deprecated styles.
+        $this->look_for_deprecated_styles();
     }
 
     /**
diff --git a/lib/pagelib.php b/lib/pagelib.php
index 8d5df8334d5..795542d5504 100644
--- a/lib/pagelib.php
+++ b/lib/pagelib.php
@@ -2116,6 +2116,10 @@ class moodle_page {
             $this->add_body_class($this->_devicetypeinuse . 'theme');
         }
 
+        if (!empty($CFG->themedesignermode)) {
+            $this->add_body_class('themedesignermode');
+        }
+
         // Add class for behat site to apply behat related fixes.
         if (defined('BEHAT_SITE_RUNNING')) {
             $this->add_body_class('behat-site');
diff --git a/theme/boost/scss/moodle.scss b/theme/boost/scss/moodle.scss
index c6e90c8a8de..a790a5f4ea1 100644
--- a/theme/boost/scss/moodle.scss
+++ b/theme/boost/scss/moodle.scss
@@ -52,3 +52,4 @@ $breadcrumb-divider-rtl: "◀" !default;
 @import "moodle/process-monitor";
 @import "moodle/moodlenet";
 @import "moodle/dropdown";
+@import "moodle/deprecated";
diff --git a/theme/boost/scss/moodle/deprecated.scss b/theme/boost/scss/moodle/deprecated.scss
new file mode 100644
index 00000000000..739c0022b08
--- /dev/null
+++ b/theme/boost/scss/moodle/deprecated.scss
@@ -0,0 +1,38 @@
+/**
+ Deprecations
+ */
+
+//
+// Deprecation mixin.
+//
+@mixin deprecated-styles() {
+    /* stylelint-disable declaration-no-important */
+    body.behat-site &,
+    body.behat-site#{&},
+    body.themedesignermode &,
+    body.themedesignermode#{&} {
+        outline: 3px dotted $red !important;
+        background-color: lighten($red, 50%) !important;
+        &::before {
+            content: "Deprecated style in use" !important;
+            color: $red !important;
+            font-size: smaller !important;
+        }
+    }
+    /* stylelint-enable */
+}
+
+//
+// Deprecated styles.
+//
+
+// All deprecated styles should include "deprecated-styles" mixin.
+// Example:
+// .foo {
+//     .bar {
+//         color: $blue;
+//         @include deprecated-styles();
+//     }
+//     color: $red;
+//     @include deprecated-styles();
+// }
diff --git a/theme/boost/style/moodle.css b/theme/boost/style/moodle.css
index 0985355e6b1..aedc7ab0ba8 100644
--- a/theme/boost/style/moodle.css
+++ b/theme/boost/style/moodle.css
@@ -38779,6 +38779,9 @@ div.editor_atto_toolbar button .icon {
   color: #fff !important; /* stylelint-disable-line declaration-no-important */
 }
 
+/**
+ Deprecations
+ */
 body {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
diff --git a/theme/classic/style/moodle.css b/theme/classic/style/moodle.css
index 39d4c4990b2..68e3e96209f 100644
--- a/theme/classic/style/moodle.css
+++ b/theme/classic/style/moodle.css
@@ -38713,6 +38713,9 @@ div.editor_atto_toolbar button .icon {
   color: #fff !important; /* stylelint-disable-line declaration-no-important */
 }
 
+/**
+ Deprecations
+ */
 body {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;