diff --git a/DESIGN.md b/DESIGN.md
index a1e10a63e6..a1c79fcb61 100644
--- a/DESIGN.md
+++ b/DESIGN.md
@@ -799,6 +799,15 @@ header actions sit 10px from the top and 14px from the right edge.
 The card keeps `overflow: visible` so listbox panels and tooltips can escape
 it. Do not add `overflow: hidden` to the card or the well.
 
+Some pages put a well (`.application-settings-section-body`) directly on the
+page without a card, for example the domains and environment variable tables.
+The well colors are defined on the well itself as well as on the card, so a
+standalone well keeps its background and border. In dark mode a standalone well
+uses the card outer-box surface (`--card-bg`, `--card-border`) instead of the
+black well fill, because the black fill directly on the canvas is darker than
+the page. An `x-empty` inside a
+standalone well shows only its centered text, as it does inside a card.
+
 Inside the dark well, controls use a darker translucent fill and border
 (`--coollabs-recessed: rgb(255 255 255 / 3%)`, `--coollabs-line:
 rgb(255 255 255 / 8%)`), set on `.dark .application-settings-section-body`.
diff --git a/resources/css/app.css b/resources/css/app.css
index cdaffde49c..6e5e9b2672 100644
--- a/resources/css/app.css
+++ b/resources/css/app.css
@@ -1790,6 +1790,7 @@ html[data-theme="custom"] textarea:disabled {
    overflow stays visible so floating panels (listbox, tooltips) can escape
    the card. */
 .application-settings-section,
+.application-settings-section-body,
 .empty-state {
     --card-bg: rgb(0 0 0 / 0.75%);
     --card-border: rgb(0 0 0 / 9%);
@@ -1814,6 +1815,7 @@ html[data-theme="custom"] textarea:disabled {
 }
 
 .dark .application-settings-section,
+.dark .application-settings-section-body,
 .dark .empty-state {
     --card-bg: rgb(255 255 255 / 6%);
     --card-border: rgb(255 255 255 / 8%);
@@ -1930,6 +1932,14 @@ html[data-theme="custom"] textarea:disabled {
     --coollabs-line: rgb(255 255 255 / 8%);
 }
 
+/* A well without a card around it sits straight on the canvas. In dark mode its
+   black fill would make it darker than the page, so it takes the card surface. */
+.dark .application-settings-section-body:not(.application-settings-section *) {
+    --well-bg: var(--card-bg);
+    --well-border: var(--card-border);
+    --well-shadow: 0 1px 2px rgb(0 0 0 / 5%);
+}
+
 /* Floating panels in the well must stay opaque: restore the global dark values. */
 .dark .application-settings-section-body :is(.listbox-panel, .searchable-listbox-panel, [role="listbox"], [role="menu"]) {
     --coollabs-recessed: oklch(25.2% 0.018 300);
@@ -2703,9 +2713,9 @@ input[type="search"]::-webkit-search-results-decoration {
     color: var(--coollabs-subtle);
 }
 
-/* Inside a layer card, the card is the frame: show only the centered text. */
-.application-settings-section .empty-state,
-.application-settings-section .empty-state-well {
+/* Inside a layer card or a well, that box is the frame: show only the centered text. */
+:is(.application-settings-section, .application-settings-section-body) .empty-state,
+:is(.application-settings-section, .application-settings-section-body) .empty-state-well {
     border: 0;
     border-radius: 0;
     padding-inline: 0;
@@ -2713,7 +2723,7 @@ input[type="search"]::-webkit-search-results-decoration {
     box-shadow: none;
 }
 
-.application-settings-section .empty-state {
+:is(.application-settings-section, .application-settings-section-body) .empty-state {
     padding: 0;
 }