diff --git a/core/frontend/src/cards/css/callout.css b/core/frontend/src/cards/css/callout.css
index 9ef5e9324d..af2c394fe1 100644
--- a/core/frontend/src/cards/css/callout.css
+++ b/core/frontend/src/cards/css/callout.css
@@ -5,36 +5,36 @@
 }
 
 .kg-card-callout-grey {
-    background: #eef0f2;
+    background: rgba(124, 139, 154, 0.13);
 }
 
 .kg-card-callout-white {
-    background: #fff;
-    box-shadow: inset 0 0 0 1px #dddedf;
+    background: transparent;
+    box-shadow: inset 0 0 0 1px rgba(124, 139, 154, 0.25);
 }
 
 .kg-card-callout-blue {
-    background: #E9F6FB;
+    background: rgba(33, 172, 232, 0.12);
 }
 
 .kg-card-callout-green {
-    background: #E8F8EA;
+    background: rgba(52, 183, 67, 0.12);
 }
 
 .kg-card-callout-yellow {
-    background: #FCF4E3;
+    background: rgba(240, 165, 15, 0.13);
 }
 
 .kg-card-callout-red {
-    background: #FBE9E9;
+    background: rgba(209, 46, 46, 0.11);
 }
 
 .kg-card-callout-pink {
-    background: #FCEEF8;
+    background: rgba(225, 71, 174, 0.11);
 }
 
 .kg-card-callout-purple {
-    background: #F2EDFC;
+    background: rgba(135, 85, 236, 0.12);
 }
 
 .kg-card-callout-accent {
@@ -47,7 +47,3 @@
     line-height: 1.6;
     font-size: 2rem;
 }
-
-.kg-callout-text {
-    color: #35373A;
-}