diff --git a/resources/css/ui.css b/resources/css/ui.css
index 13ecbea644b..6b3884609b8 100644
--- a/resources/css/ui.css
+++ b/resources/css/ui.css
@@ -18,6 +18,16 @@
     --color-gray-950: var(--color-zinc-950);
     --color-volt: oklch(93.86% 0.2018 122.24);
 
+    --color-content-bg: var(--color-white);
+    --color-content-border: var(--color-gray-200);
+    --color-content-dark-bg: var(--color-gray-900);
+    --color-content-dark-border: var(--color-gray-800);
+
+    --color-body-bg: var(--color-gray-100);
+    --color-body-border: transparent;
+    --color-body-dark-bg: var(--color-gray-900);
+    --color-body-dark-border: var(--color-black);
+
     /* Temp */
     --color-dark-100: #dfe1e5;
     --color-dark-150: #bbbdc0;
@@ -125,7 +135,8 @@
 
 @layer components {
     .content-card {
-        @apply min-h-full px-3 sm:px-6 md:px-12 sm:pb-6 bg-white border dark:bg-gray-900 dark:border-y-0 dark:border-r-0 border-gray-200 dark:border-white/7 rounded-2xl dark:rounded-none;
+        @apply min-h-full px-3 sm:px-6 md:px-12 sm:pb-6 bg-content-bg border dark:bg-content-dark-bg dark:border-y-0 dark:border-r-0 border-content-border dark:border-content-dark-border rounded-2xl dark:rounded-none;
+
     }
 }
 
diff --git a/resources/views/layout.blade.php b/resources/views/layout.blade.php
index 09522a5e7f3..df1646886b7 100644
--- a/resources/views/layout.blade.php
+++ b/resources/views/layout.blade.php
@@ -25,7 +25,7 @@ class="@yield('content-class') pt-14"
                         'showing-license-banner': showBanner
                     }"
                 >
-                    <main id="main" class="flex bg-gray-100 dark:bg-gray-900 dark:border-t rounded-t-2xl dark:border-white/10 fixed top-14 inset-x-0 bottom-0 min-h-[calc(100vh-3.5rem)]">
+                    <main id="main" class="flex bg-body-bg dark:bg-body-dark-bg dark:border-t rounded-t-2xl dark:border-body-dark-border fixed top-14 inset-x-0 bottom-0 min-h-[calc(100vh-3.5rem)]">
                         @include('statamic::partials.nav-main')
                         <div id="main-content" v-cloak class="main-content p-2 h-full flex-1 overflow-y-auto">
                             <div class="relative content-card @yield('content-card-modifiers') min-h-full">