diff --git a/packages/ui/src/theme/dashboard-layout.css b/packages/ui/src/theme/dashboard-layout.css
index 2424a7d..284c491 100644
--- a/packages/ui/src/theme/dashboard-layout.css
+++ b/packages/ui/src/theme/dashboard-layout.css
@@ -8,6 +8,10 @@
   --hm-dashboard-sidebar-width: 272px;
   --hm-dashboard-min-width: 960px;
   --hm-dashboard-header-background: linear-gradient(180deg, var(--hm-sem-action-surface-stop-0) 0%, var(--hm-sem-action-surface-stop-30) 30%, var(--hm-sem-action-surface-stop-65) 65%, var(--hm-sem-action-surface-stop-100) 100%);
+  /* Compact 48px source surface; independent of shared action/GNB/LNB gradients. */
+  --hm-dashboard-compact-background:
+    linear-gradient(270deg, rgba(18, 66, 51, 0.4) 0%, rgba(20, 112, 95, 0.4) 100%),
+    linear-gradient(178deg, #103D2E 1.07%, #2A6652 11.07%, #12352A 87.72%);
   --hm-dashboard-nav-text: var(--hm-sem-on-action-primary);
   --hm-dashboard-nav-text-secondary: var(--hm-sem-palette-green-tint);
   --hm-dashboard-nav-text-stroke-width: 1px;
diff --git a/src/patterns/dashboard-composition.css b/src/patterns/dashboard-composition.css
index a2aeff1..af9ec3f 100644
--- a/src/patterns/dashboard-composition.css
+++ b/src/patterns/dashboard-composition.css
@@ -1,4 +1,4 @@
-@import "./dashboard-status-contract.css";
+@import "@hm-design/ui/dashboard-status.css";
 
 /* Runtime-neutral status contract → Story mapping. HM has no exact public status semantics for these three inks. */
 .dashboard-production {
@@ -31,6 +31,10 @@
 /* Story-only Variant C Compact Header (ui_viz patterns-variant-c--all). Geometry follows the reference: header 48 / padding-x 20,
    title + 18 after it, status bar 40 high floating from the header top and centred at 50% + 18px, padding-x 36, gap 8, 28px controls,
    1x16 dividers, bottom radius 16 with concave wings. Colours and type are HM tokens. Content join / padding stay Dashboard Layout's. */
+.dashboard-story-compact [data-slot="dashboard-layout"] {
+  background: var(--hm-dashboard-compact-background);
+}
+
 .dashboard-story-compact [data-story-slot="compact-header"] {
   position: relative;
   z-index: 1;
@@ -39,7 +43,7 @@
   align-items: center;
   height: 48px;
   padding: 0 20px;
-  background: var(--hm-dashboard-header-background);
+  background: var(--hm-dashboard-compact-background);
   color: var(--hm-dashboard-nav-text);
 }
 
diff --git a/src/patterns/dashboard-layout.stories.css b/src/patterns/dashboard-layout.stories.css
index 1662e3f..1f6227a 100644
--- a/src/patterns/dashboard-layout.stories.css
+++ b/src/patterns/dashboard-layout.stories.css
@@ -1,4 +1,4 @@
-@import "./dashboard-status-contract.css";
+@import "@hm-design/ui/dashboard-status.css";
 
 /* Runtime-neutral status contract → Story mapping. HM has no exact public status semantics for these three inks. */
 .dashboard-story {
@@ -31,6 +31,10 @@
 /* Story-only Variant C Compact Header (ui_viz patterns-variant-c--all). Geometry follows the reference: header 48 / padding-x 20,
    title + 18 after it, status bar 40 high floating from the header top and centred at 50% + 18px, padding-x 36, gap 8, 28px controls,
    1x16 dividers, bottom radius 16 with concave wings. Colours and type are HM tokens. Content join / padding stay Dashboard Layout's. */
+.dashboard-story-compact [data-slot="dashboard-layout"] {
+  background: var(--hm-dashboard-compact-background);
+}
+
 .dashboard-story-compact [data-story-slot="compact-header"] {
   position: relative;
   z-index: 1;
@@ -39,7 +43,7 @@
   align-items: center;
   height: 48px;
   padding: 0 20px;
-  background: var(--hm-dashboard-header-background);
+  background: var(--hm-dashboard-compact-background);
   color: var(--hm-dashboard-nav-text);
 }