diff --git a/nextjs-app/components/Footer.module.css b/nextjs-app/components/Footer.module.css
index 1b271e3..53ebe8d 100644
--- a/nextjs-app/components/Footer.module.css
+++ b/nextjs-app/components/Footer.module.css
@@ -98,7 +98,11 @@
   font-size: var(--step--1);
   font-weight: 700;
   line-height: 1;
-  color: var(--sage);
+  /* --sage flips with the theme; this band does not (it is teal in both), so
+     the pairing only held in one of them — the dark sage measured 4.08:1 here
+     against a 4.5 floor, on every page. The --on-sunken-* family exists
+     precisely because this surface is theme-invariant. */
+  color: var(--on-sunken-muted);
   text-transform: uppercase;
   letter-spacing: 0.1em;
 }
diff --git a/nextjs-app/components/HomeView.module.css b/nextjs-app/components/HomeView.module.css
index a72161d..04bb74c 100644
--- a/nextjs-app/components/HomeView.module.css
+++ b/nextjs-app/components/HomeView.module.css
@@ -133,7 +133,10 @@
   font-weight: 600;
   letter-spacing: 0.08em;
   text-transform: uppercase;
-  color: var(--brand);
+  /* --brand on its own 10% tint over Sand measures 4.19:1 — the tint darkens
+     the ground under the label, and the token was specced against the ground,
+     not against the tint. --brand-strong on the same composite is 5.85:1. */
+  color: var(--brand-strong);
   background: rgba(var(--brand-rgb), 0.1);
   padding: 0.3rem 0.7rem;
   border-radius: 999px;
@@ -779,8 +782,19 @@
   gap: 0.9rem;
 }
 
+/*
+ * The preview panel sits on the card surface, not on Sand.
+ *
+ * Everything inside it is a translucent status or brand tint, and those tokens
+ * are specced to clear AA over --bg-card. Over Sand the same tints composite
+ * darker, which put the report-card chips at 4.22:1 and 4.29:1 against a 4.5
+ * floor — the ratio depended on a ground two levels up. On the card surface
+ * they are 5.69:1 and 5.81:1. The border keeps it reading as an inset frame
+ * now that panel and card share a colour.
+ */
 .hiwVisual {
-  background: var(--bg-secondary);
+  background: var(--bg-card);
+  border: 1px solid var(--border);
   border-radius: 10px;
   padding: 0.9rem;
   min-height: 180px;
@@ -1126,7 +1140,10 @@
 .compareHeadLabel {
   font-family: inherit;
   font-size: 0.48rem;
-  color: var(--text-muted);
+  /* --text-muted on the header row's tint is 4.45:1 in the dark theme —
+     under the floor by a hair, because the tint darkens the ground beneath
+     the label. --text-secondary clears it on both grounds. */
+  color: var(--text-secondary);
   font-weight: 500;
   letter-spacing: 0.08em;
   text-transform: uppercase;