diff --git a/src/components/RecommendedCard.tsx b/src/components/RecommendedCard.tsx
index 1f6d082..486bdcb 100644
--- a/src/components/RecommendedCard.tsx
+++ b/src/components/RecommendedCard.tsx
@@ -22,7 +22,7 @@ function isPlaceholderAsset(path: string | undefined | null) {
 }
 
 const CARD_BASE_CLASS =
-  "group flex shrink-0 flex-col overflow-hidden rounded-xl border bg-[#272632] transition hover:border-ark-gold/55 hover:shadow-lg hover:shadow-black/30";
+  "group flex shrink-0 flex-col overflow-hidden rounded-xl border bg-[#1D1E23] transition hover:border-ark-gold/55 hover:shadow-lg hover:shadow-black/30";
 
 const CARD_HOVER_SPRING = {
   type: "spring",
@@ -107,7 +107,7 @@ export function RecommendedCard({
         layout === "grid" ? CARD_GRID_SIZE_CLASS : CARD_CAROUSEL_SIZE_CLASS
       } ${
         useFigmaDesign
-          ? "border-[#27292E] bg-[#272632]"
+          ? "border-[#27292E] bg-[#1D1E23]"
           : "border-transparent md:border-ark-line md:bg-ark-panel"
       }`}
     >
@@ -119,7 +119,7 @@ export function RecommendedCard({
       <div
         className={
           useFigmaDesign
-            ? "relative block h-[131px] overflow-hidden bg-[#272632]"
+            ? "relative block h-[131px] overflow-hidden bg-[#1D1E23]"
             : "relative block aspect-[208/108] overflow-hidden bg-[#111116]"
         }
       >