diff --git a/patterns/public-page-patterns.html b/patterns/public-page-patterns.html
index 4062ad3..b92bc28 100644
--- a/patterns/public-page-patterns.html
+++ b/patterns/public-page-patterns.html
@@ -218,8 +218,8 @@
       <p class="sg-preview-label">pattern: Public Call to Action Box light</p>
 
       <div class="sg-preview-area">
-        <div class="sg-content-group-box sg-public-page-pattern-call-to-action-box--light" data-component="content-group-box">
-          <article class="sg-card sg-card--content-card sg-card--content-card-dark sg-public-page-pattern-call-to-action-box" data-pattern="public-call-to-action-box-light" aria-label="Public Call to Action Box light">
+        <div class="sg-content-group-box" data-component="content-group-box">
+          <article class="sg-card sg-card--content-card sg-public-page-pattern-call-to-action-box sg-public-page-pattern-call-to-action-box--light" data-pattern="public-call-to-action-box-light" aria-label="Public Call to Action Box light">
             <div class="sg-card-segment sg-card-segment--body" data-component-part="card-body">
               <ul class="sg-bullet-list">
                 <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</li>
diff --git a/styles/45-patterns-public-page-patterns.css b/styles/45-patterns-public-page-patterns.css
index af537a2..513c31b 100644
--- a/styles/45-patterns-public-page-patterns.css
+++ b/styles/45-patterns-public-page-patterns.css
@@ -16,6 +16,16 @@
 
 .sg-public-page-pattern-call-to-action-box--light {
   background: var(--surface-public-page-pattern-call-to-action-box-light);
+  color: var(--color-font-dark);
+}
+
+.sg-public-page-pattern-call-to-action-box--light .sg-card-segment--body {
+  background: var(--surface-public-page-pattern-call-to-action-box-light);
+  color: var(--color-font-dark);
+}
+
+.sg-public-page-pattern-call-to-action-box--light .sg-bullet-list {
+  color: var(--color-font-dark);
 }
 
 .sg-public-page-pattern-call-to-action-box__action {