diff --git a/docs/src/styles/custom.css b/docs/src/styles/custom.css
index 04c0fa492dd..37a7d070eec 100644
--- a/docs/src/styles/custom.css
+++ b/docs/src/styles/custom.css
@@ -101,6 +101,7 @@
   --aw-border: rgba(208, 215, 222, 0.9);
   --aw-border-strong: rgba(175, 184, 193, 0.95);
   --aw-text-muted: #57606a;
+  --aw-callout-preview-text: #6a4500;
   --aw-shadow: 0 18px 42px rgba(31, 35, 40, 0.08);
   --aw-accent-rgb: 130, 80, 223;
 }
@@ -300,6 +301,10 @@
   color: var(--aw-text-muted);
 }
 
+:root[data-theme='light'] .hero .hero-preview-callout {
+  color: var(--aw-callout-preview-text);
+}
+
 /* Light Theme Experimental Badge */
 :root[data-theme='light'] .experimental-badge {
   background: rgba(107, 70, 193, 0.12) !important;