diff --git a/src/components/common/CreatorCard.tsx b/src/components/common/CreatorCard.tsx
index 1bf4740..0d13078 100644
--- a/src/components/common/CreatorCard.tsx
+++ b/src/components/common/CreatorCard.tsx
@@ -112,7 +112,7 @@ const CreatorCard: React.FC<CreatorCardProps> = ({ creator, className }) => {
 	return (
 		<div
 			className={cn(
-				'group relative overflow-hidden rounded-2xl border border-white/10 bg-white/5 p-4 transition-all duration-300 focus-within:ring-2 focus-within:ring-amber-400/40 focus-within:ring-offset-2 focus-within:ring-offset-slate-950 md:hover:-translate-y-0.5 md:hover:border-amber-500/25 md:hover:bg-white/[0.08] md:hover:shadow-[0_12px_32px_-20px_rgba(251,191,36,0.5)]',
+				'marketplace-card-surface marketplace-card-surface-hover group relative overflow-hidden rounded-2xl border p-4 transition-all duration-300 focus-within:ring-2 focus-within:ring-amber-400/40 focus-within:ring-offset-2 focus-within:ring-offset-slate-950 md:hover:-translate-y-0.5 md:hover:border-amber-500/25 md:hover:shadow-[0_12px_32px_-20px_rgba(251,191,36,0.5)]',
 				className
 			)}
 		>
@@ -148,14 +148,14 @@ const CreatorCard: React.FC<CreatorCardProps> = ({ creator, className }) => {
 					<Change24hBadge change={creator.change24h} />
 					<KeySupplyBadge supply={creator.creatorShareSupply} />
 				</div>
-				<p className="font-jakarta text-sm text-white/50">
+				<p className="marketplace-label-muted font-jakarta text-sm">
 					@{creator.instructorId || 'creator'}
 				</p>
 
 				<CreatorBio bio={creator.description} variant="card" className="mt-2" />
 
 				{creator.socialHandle ? (
-					<div className="mt-2 flex items-center gap-1.5 text-xs text-white/60">
+					<div className="marketplace-label-muted mt-2 flex items-center gap-1.5 text-xs">
 						<LinkIcon className="size-3 text-amber-500/70" />
 						<span className="truncate">@{creator.socialHandle}</span>
 					</div>
diff --git a/src/index.css b/src/index.css
index 80b9c4d..6b79ca9 100644
--- a/src/index.css
+++ b/src/index.css
@@ -88,6 +88,11 @@
 	--sidebar-accent-foreground: oklch(0.21 0.006 285.885);
 	--sidebar-border: oklch(0.92 0.004 286.32);
 	--sidebar-ring: oklch(0.705 0.015 286.067);
+	--marketplace-card-bg: rgba(255, 255, 255, 0.05);
+	--marketplace-card-bg-hover: rgba(255, 255, 255, 0.08);
+	--marketplace-card-border: rgba(255, 255, 255, 0.1);
+	--marketplace-label-muted: rgba(255, 255, 255, 0.6);
+	--marketplace-label-strong: rgba(255, 255, 255, 0.85);
 }
 
 .dark {
@@ -122,6 +127,22 @@
 	--sidebar-accent-foreground: oklch(0.985 0 0);
 	--sidebar-border: oklch(1 0 0 / 10%);
 	--sidebar-ring: oklch(0.552 0.016 285.938);
+	--marketplace-card-bg: rgba(255, 255, 255, 0.05);
+	--marketplace-card-bg-hover: rgba(255, 255, 255, 0.08);
+	--marketplace-card-border: rgba(255, 255, 255, 0.1);
+	--marketplace-label-muted: rgba(255, 255, 255, 0.6);
+	--marketplace-label-strong: rgba(255, 255, 255, 0.85);
+}
+
+@media (prefers-contrast: more) {
+	:root,
+	.dark {
+		--marketplace-card-bg: rgba(4, 12, 24, 0.88);
+		--marketplace-card-bg-hover: rgba(7, 20, 40, 0.94);
+		--marketplace-card-border: rgba(255, 255, 255, 0.4);
+		--marketplace-label-muted: rgba(255, 255, 255, 0.88);
+		--marketplace-label-strong: rgba(255, 255, 255, 0.97);
+	}
 }
 
 @layer base {
@@ -167,6 +188,23 @@
 		animation: skeleton-shimmer 1.6s linear infinite;
 	}
 
+	.marketplace-card-surface {
+		background-color: var(--marketplace-card-bg);
+		border-color: var(--marketplace-card-border);
+	}
+
+	.marketplace-card-surface-hover:hover {
+		background-color: var(--marketplace-card-bg-hover);
+	}
+
+	.marketplace-label-muted {
+		color: var(--marketplace-label-muted);
+	}
+
+	.marketplace-label-strong {
+		color: var(--marketplace-label-strong);
+	}
+
 	@media (prefers-reduced-motion: reduce) {
 		.skeleton-shimmer {
 			animation: none;
diff --git a/src/pages/LandingPage.tsx b/src/pages/LandingPage.tsx
index 51cf16c..c86b638 100644
--- a/src/pages/LandingPage.tsx
+++ b/src/pages/LandingPage.tsx
@@ -378,7 +378,7 @@ function LandingPage() {
 						<div className="flex items-center gap-3">
 							<label
 								htmlFor="creator-sort"
-								className="text-xs font-semibold uppercase tracking-[0.16em] text-white/60"
+								className="marketplace-label-muted text-xs font-semibold uppercase tracking-[0.16em]"
 							>
 								Sort
 							</label>
@@ -441,7 +441,7 @@ function LandingPage() {
 								>
 									Previous
 								</Button>
-								<span className="text-xs text-white/60">
+								<span className="marketplace-label-muted text-xs">
 									Page {safePage + 1} of {totalPages}
 								</span>
 								<Button
@@ -490,7 +490,7 @@ function LandingPage() {
 
 				<MarketplaceSection
 					spacing="relaxed"
-					className="grid gap-8 rounded-[2rem] border border-white/10 bg-white/[0.045] p-6 shadow-[0_24px_80px_-60px_rgba(8,17,31,0.95)] backdrop-blur-sm md:p-8 lg:grid-cols-[1.1fr_0.9fr] lg:items-start"
+					className="marketplace-card-surface grid gap-8 rounded-[2rem] border p-6 shadow-[0_24px_80px_-60px_rgba(8,17,31,0.95)] backdrop-blur-sm md:p-8 lg:grid-cols-[1.1fr_0.9fr] lg:items-start"
 				>
 					<div>
 						<SectionHeading