diff --git a/apps/website/src/globals.css b/apps/website/src/globals.css
index 6f54d1890..c5a011e17 100644
--- a/apps/website/src/globals.css
+++ b/apps/website/src/globals.css
@@ -30,6 +30,7 @@
     --background: 20 14.3% 4.1%;
     --foreground: 0 0% 95%;
     --card: 24 9.8% 10%;
+    --card-landing: 240, 2%, 9%;
     --card-foreground: 0 0% 95%;
     --popover: 12 7% 6%;
     --popover-foreground: 0 0% 95%;
diff --git a/packages/ui/src/card.tsx b/packages/ui/src/card.tsx
index d87d98b41..e4bac546f 100644
--- a/packages/ui/src/card.tsx
+++ b/packages/ui/src/card.tsx
@@ -9,7 +9,7 @@ const Card = React.forwardRef<
   <div
     ref={ref}
     className={cn(
-      "rounded-lg border bg-card text-card-foreground shadow-sm",
+      "rounded-lg border bg-landingCard text-card-foreground shadow-sm",
       className,
     )}
     {...props}
@@ -117,7 +117,7 @@ const CardBorderIlluminated = ({
         ref={spotlightRef}
         className=" absolute  z-[-1] overflow-clip rounded-full bg-gray-50 shadow-[0_0_150px_90px_white]"
       ></div>
-      <div className="z-[2] h-full w-full rounded-[calc(var(--radius)-1px)] bg-card">
+      <div className="z-[2] h-full w-full rounded-[calc(var(--radius)-1px)] bg-landingCard">
         {children}
       </div>
     </div>
diff --git a/tooling/tailwind/base.ts b/tooling/tailwind/base.ts
index 15fd759ad..de4e1722d 100644
--- a/tooling/tailwind/base.ts
+++ b/tooling/tailwind/base.ts
@@ -39,6 +39,10 @@ export default {
           DEFAULT: "hsl(var(--card))",
           foreground: "hsl(var(--card-foreground))",
         },
+        landingCard: {
+          DEFAULT: "hsl(var(--card-landing))",
+          foreground: "hsl(var(--card-foreground))",
+        },
       },
       borderColor: {
         DEFAULT: "hsl(var(--border))",