diff --git a/frontend/src/routes/enrich/+page.svelte b/frontend/src/routes/enrich/+page.svelte
index a03383c2..2f2be719 100644
--- a/frontend/src/routes/enrich/+page.svelte
+++ b/frontend/src/routes/enrich/+page.svelte
@@ -31,13 +31,13 @@ function formatUploadDate(createdAt: string): string {
 	</a>
 
 	<!-- Page Header -->
-	<div class="border-brand-sand mb-8 flex items-center justify-between border-b pb-6">
+	<div class="mb-8 flex items-center justify-between border-b border-line pb-6">
 		<div>
-			<h1 class="font-serif text-3xl font-medium text-brand-navy">
+			<h1 class="font-serif text-3xl font-medium text-ink">
 				{m.enrich_list_heading()}
 			</h1>
 			{#if count > 0}
-				<p class="mt-2 font-sans text-sm text-brand-navy/60">
+				<p class="mt-2 font-sans text-sm text-ink-2">
 					{count}
 					{m.enrich_list_count()}
 				</p>
@@ -57,9 +57,9 @@ function formatUploadDate(createdAt: string): string {
 	<!-- Empty State -->
 	{#if count === 0}
 		<div
-			class="border-brand-sand flex flex-col items-center justify-center rounded-sm border border-dashed bg-white py-20 text-center"
+			class="flex flex-col items-center justify-center rounded-sm border border-dashed border-line bg-surface py-20 text-center"
 		>
-			<div class="bg-brand-sand/60 mb-4 flex h-14 w-14 items-center justify-center rounded-full">
+			<div class="mb-4 flex h-14 w-14 items-center justify-center rounded-full bg-muted">
 				<img
 					src="/degruyter-icons/Simple/Medium-24px/SVG/Action/Check/Check-Circle-MD.svg"
 					alt=""
@@ -67,27 +67,27 @@ function formatUploadDate(createdAt: string): string {
 					class="h-7 w-7 opacity-50"
 				/>
 			</div>
-			<p class="font-serif text-lg font-medium text-brand-navy">
+			<p class="font-serif text-lg font-medium text-ink">
 				{m.enrich_list_empty_heading()}
 			</p>
-			<p class="mt-2 max-w-xs font-sans text-sm text-brand-navy/60">
+			<p class="mt-2 max-w-xs font-sans text-sm text-ink-2">
 				{m.enrich_list_empty_body()}
 			</p>
 		</div>
 	{:else}
 		<!-- Document Rows -->
-		<div class="border border-line bg-white shadow-sm">
+		<div class="border border-line bg-surface shadow-sm">
 			<ul class="divide-y divide-line-2">
 				{#each documents as doc (doc.id)}
-					<li class="group hover:bg-brand-sand/30 transition-colors duration-200">
+					<li class="group transition-colors duration-200 hover:bg-muted">
 						<a href="/enrich/{doc.id}" class="flex items-center justify-between p-6">
 							<div class="min-w-0 flex-1">
 								<p
-									class="font-serif text-lg font-medium text-brand-navy decoration-brand-mint decoration-2 underline-offset-4 group-hover:underline"
+									class="font-serif text-lg font-medium text-ink decoration-accent decoration-2 underline-offset-4 group-hover:underline"
 								>
 									{doc.title || doc.originalFilename}
 								</p>
-								<p class="mt-1 font-sans text-xs text-brand-navy/50">
+								<p class="mt-1 font-sans text-xs text-ink-3">
 									{formatUploadDate(doc.createdAt)}
 								</p>
 							</div>