diff --git a/docs/assets/styles/docs.css b/docs/assets/styles/docs.css
index 644404b4d..1945013dc 100644
--- a/docs/assets/styles/docs.css
+++ b/docs/assets/styles/docs.css
@@ -4,6 +4,10 @@
 @import 'outline.css';
 @import 'search.css';
 
+wa-page {
+  --wa-flow-spacing: var(--wa-space-xl);
+}
+
 wa-page[view='desktop'] [data-toggle-nav] {
   display: none;
 }
diff --git a/docs/assets/styles/theme-headers.css b/docs/assets/styles/theme-headers.css
new file mode 100644
index 000000000..a48700312
--- /dev/null
+++ b/docs/assets/styles/theme-headers.css
@@ -0,0 +1,50 @@
+/* #region Custom Styles */
+@container preview (min-width: 0) {
+  .hero-background {
+    height: 47rem;
+    background-color: var(--wa-color-brand-fill-loud);
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    z-index: -1;
+  }
+
+  .hero-background::after {
+    background: url(/assets/images/themer/default/hero.png) 10rem bottom no-repeat;
+    background-size: 95%;
+    content: '';
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+  }
+
+  .hero wa-button[variant='brand'] {
+    --background: var(--wa-color-neutral-fill-quiet);
+    --label-color: var(--wa-color-neutral-on-normal);
+  }
+
+  .project-header {
+    color: var(--wa-color-brand-on-loud);
+  }
+
+  .strata.hero {
+    height: 26rem;
+  }
+
+  .hero .title {
+    margin-inline-end: 40%;
+    color: var(--wa-color-brand-on-loud);
+  }
+}
+
+/* responsive */
+@container preview (min-width: 1040px) {
+  .hero-background::after {
+    background-position: right bottom;
+    background-size: 90%;
+  }
+}
+/* #endregion */
diff --git a/src/themes/active.css b/src/themes/active.css
index a5c875b8a..181d235f7 100644
--- a/src/themes/active.css
+++ b/src/themes/active.css
@@ -352,8 +352,6 @@
 
   --wa-panel-border-radius: var(--wa-border-radius-m);
 
-  --wa-flow-spacing: 1.5rem;
-
   /**
    * From 2.x
    */
diff --git a/src/themes/applied.css b/src/themes/applied.css
index a6ec20d39..5ae18482a 100644
--- a/src/themes/applied.css
+++ b/src/themes/applied.css
@@ -63,7 +63,7 @@ pre,
 table,
 ul,
 video {
-  margin: 0 0 var(--wa-flow-spacing) 0;
+  margin: 0 0 var(--wa-space-xl) 0;
 }
 
 /* Headings & text */
@@ -106,7 +106,7 @@ h6 {
 hr {
   border: none;
   border-bottom: solid var(--wa-border-width-s) var(--wa-color-surface-border);
-  margin: var(--wa-flow-spacing) 0;
+  margin: var(--wa-space-xl) 0;
 }
 
 em,
@@ -254,7 +254,7 @@ blockquote > :last-child {
 ul,
 ol {
   padding: 0;
-  margin: 0 0 var(--wa-flow-spacing) var(--wa-space-xl);
+  margin: 0 0 var(--wa-space-xl) var(--wa-space-xl);
 }
 
 ul {
@@ -277,7 +277,7 @@ details {
   padding: 0;
   margin: 0;
   padding-inline: var(--wa-space-m);
-  margin-block-end: var(--wa-flow-spacing);
+  margin-block-end: var(--wa-space-xl);
 }
 
 details :last-child {
@@ -321,7 +321,7 @@ details[open] > summary::before {
 }
 
 details + details {
-  margin-top: calc(-1 * var(--wa-flow-spacing) + var(--wa-border-width-s));
+  margin-top: calc(-1 * var(--wa-space-xl) + var(--wa-border-width-s));
 }
 
 /* Tables */
diff --git a/src/themes/brutalist.css b/src/themes/brutalist.css
index 89fe80492..438659d13 100644
--- a/src/themes/brutalist.css
+++ b/src/themes/brutalist.css
@@ -353,8 +353,6 @@
 
   --wa-panel-border-radius: var(--wa-border-radius-m);
 
-  --wa-flow-spacing: 1.5rem;
-
   /**
    * From 2.x
    */
diff --git a/src/themes/classic.css b/src/themes/classic.css
index 42262490d..399129c2e 100644
--- a/src/themes/classic.css
+++ b/src/themes/classic.css
@@ -350,8 +350,6 @@
 
   --wa-panel-border-radius: var(--wa-border-radius-s);
 
-  --wa-flow-spacing: 1.5rem;
-
   /**
    * From 2.x
    */
diff --git a/src/themes/default.css b/src/themes/default.css
index 8c1e433e9..e21a92e17 100644
--- a/src/themes/default.css
+++ b/src/themes/default.css
@@ -6,7 +6,7 @@
   /**
    * Literal Colors
    * Each color is identified by a number that corresponds to its perceived lightness, where 100 is equal to white and 0 is equal to black.
-   * Lightness on this scale strongly correlates to relative luminance, so each lightness value has nearly uniform WCAG 2.1 contrast across hues.
+   * Each lightness value has nearly uniform WCAG 2.1 contrast across hues.
    * A difference of 40 between lightness values ensures a minimum 3:1 contrast ratio.
    * A difference of 50 between lightness values ensures a minimum 4.5:1 contrast ratio.
    * A difference of 60 between lightness values ensures a minimum 7:1 contrast ratio.
@@ -414,8 +414,6 @@
   --wa-tooltip-content-color: var(--wa-color-neutral-on-loud);
   --wa-tooltip-font-size: var(--wa-font-size-s);
   --wa-tooltip-line-height: var(--wa-line-height-normal);
-
-  --wa-flow-spacing: var(--wa-space-2xl);
 }
 
 .wa-theme-default-dark,
@@ -497,54 +495,3 @@
   --wa-color-neutral-on-normal: var(--wa-color-base-70);
   --wa-color-neutral-on-loud: var(--wa-color-base-05);
 }
-
-/* #region Custom Styles */
-@container preview (min-width: 0) {
-  .hero-background {
-    height: 47rem;
-    background-color: var(--wa-color-brand-fill-loud);
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    z-index: -1;
-  }
-
-  .hero-background::after {
-    background: url(/assets/images/themer/default/hero.png) 10rem bottom no-repeat;
-    background-size: 95%;
-    content: '';
-    position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-  }
-
-  .hero wa-button[variant='brand'] {
-    --background: var(--wa-color-neutral-fill-quiet);
-    --label-color: var(--wa-color-neutral-on-normal);
-  }
-
-  .project-header {
-    color: var(--wa-color-brand-on-loud);
-  }
-
-  .strata.hero {
-    height: 26rem;
-  }
-
-  .hero .title {
-    margin-inline-end: 40%;
-    color: var(--wa-color-brand-on-loud);
-  }
-}
-
-/* responsive */
-@container preview (min-width: 1040px) {
-  .hero-background::after {
-    background-position: right bottom;
-    background-size: 90%;
-  }
-}
-/* #endregion */
diff --git a/src/themes/fa.css b/src/themes/fa.css
index 6e4b6ff01..d2f6c280e 100644
--- a/src/themes/fa.css
+++ b/src/themes/fa.css
@@ -357,8 +357,6 @@
 
   --wa-panel-border-radius: var(--wa-border-radius-m);
 
-  --wa-flow-spacing: 1.5rem;
-
   /**
   * From 2.x
   */
diff --git a/src/themes/glassy.css b/src/themes/glassy.css
index e744daace..863ba42f5 100644
--- a/src/themes/glassy.css
+++ b/src/themes/glassy.css
@@ -351,8 +351,6 @@
 
   --wa-panel-border-radius: var(--wa-border-radius-m);
 
-  --wa-flow-spacing: 1.5rem;
-
   /**
    * From 2.x
    */
diff --git a/src/themes/mellow.css b/src/themes/mellow.css
index 42e63c845..3423a3880 100644
--- a/src/themes/mellow.css
+++ b/src/themes/mellow.css
@@ -351,8 +351,6 @@
 
   --wa-panel-border-radius: var(--wa-border-radius-m);
 
-  --wa-flow-spacing: 1.5rem;
-
   /**
    * From 2.x
    */
diff --git a/src/themes/migration.css b/src/themes/migration.css
index ffd1bce45..9c7c681ee 100644
--- a/src/themes/migration.css
+++ b/src/themes/migration.css
@@ -354,8 +354,6 @@
 
   --wa-panel-border-radius: var(--wa-border-radius-m);
 
-  --wa-flow-spacing: 1.5rem;
-
   /**
    * From 2.x
    */
diff --git a/src/themes/playful.css b/src/themes/playful.css
index d690a8a51..9e3c8f2fc 100644
--- a/src/themes/playful.css
+++ b/src/themes/playful.css
@@ -366,8 +366,6 @@
 
   --wa-panel-border-radius: var(--wa-border-radius-m);
 
-  --wa-flow-spacing: 1.5rem;
-
   /**
    * From 2.x
    */
@@ -769,8 +767,8 @@
 
   .product-card .badge-stock {
     position: absolute;
-    top: var(--wa-flow-spacing);
-    right: var(--wa-flow-spacing);
+    top: var(--wa-space-xl);
+    right: var(--wa-space-xl);
   }
 
   .product-card {
diff --git a/src/themes/premium.css b/src/themes/premium.css
index b69f4384a..09c5d01ea 100644
--- a/src/themes/premium.css
+++ b/src/themes/premium.css
@@ -354,8 +354,6 @@
 
   --wa-panel-border-radius: var(--wa-border-radius-s);
 
-  --wa-flow-spacing: 1.5rem;
-
   /**
    * From 2.x
    */
@@ -593,8 +591,8 @@
 
   .product-card .badge-stock {
     position: absolute;
-    top: var(--wa-flow-spacing);
-    right: var(--wa-flow-spacing);
+    top: var(--wa-space-xl);
+    right: var(--wa-space-xl);
   }
 
   .product-card wa-rating {