diff --git a/frontend/src/lib/components/CommentThread.svelte b/frontend/src/lib/components/CommentThread.svelte
index 212add7e..5fa6bbbf 100644
--- a/frontend/src/lib/components/CommentThread.svelte
+++ b/frontend/src/lib/components/CommentThread.svelte
@@ -188,7 +188,7 @@ onMount(() => {
 			></textarea>
 			<div class="flex items-center gap-3">
 				<button
-					class="rounded bg-primary px-3 py-1.5 font-sans text-xs font-medium text-white hover:bg-primary/80 disabled:opacity-40"
+					class="rounded bg-primary px-3 py-1.5 font-sans text-xs font-medium text-primary-fg hover:bg-primary/80 disabled:opacity-40"
 					disabled={posting}
 					onclick={() => saveEdit(comment.id)}
 				>
@@ -291,7 +291,7 @@ onMount(() => {
 					></textarea>
 					<div class="flex items-center gap-3">
 						<button
-							class="rounded bg-primary px-3 py-1.5 font-sans text-xs font-medium text-white hover:bg-primary/80 disabled:opacity-40"
+							class="rounded bg-primary px-3 py-1.5 font-sans text-xs font-medium text-primary-fg hover:bg-primary/80 disabled:opacity-40"
 							disabled={posting}
 							onclick={() => postReply(thread.id)}
 						>
@@ -321,7 +321,7 @@ onMount(() => {
 				></textarea>
 				<div>
 					<button
-						class="rounded bg-primary px-3 py-1.5 font-sans text-xs font-medium text-white hover:bg-primary/80 disabled:opacity-40"
+						class="rounded bg-primary px-3 py-1.5 font-sans text-xs font-medium text-primary-fg hover:bg-primary/80 disabled:opacity-40"
 						disabled={posting || !newText.trim()}
 						onclick={postComment}
 					>
diff --git a/frontend/src/lib/components/DocumentTopBar.svelte b/frontend/src/lib/components/DocumentTopBar.svelte
index c3cfd9d1..6205e2ff 100644
--- a/frontend/src/lib/components/DocumentTopBar.svelte
+++ b/frontend/src/lib/components/DocumentTopBar.svelte
@@ -102,8 +102,8 @@ const compactMeta = $derived.by(() => {
 				onclick={() => (annotateMode = !annotateMode)}
 				aria-label={annotateMode ? m.doc_panel_annotate_stop() : m.doc_panel_annotate()}
 				class="flex items-center gap-1.5 rounded px-3 py-1.5 font-sans text-xs font-medium transition {annotateMode
-					? 'bg-primary text-white'
-					: 'border border-primary text-ink hover:bg-primary hover:text-white'}"
+					? 'bg-primary text-primary-fg'
+					: 'border border-primary text-ink hover:bg-primary hover:text-primary-fg'}"
 			>
 				<img
 					src="/degruyter-icons/Simple/Medium-24px/SVG/Action/Note/Note-Add-MD.svg"
@@ -118,7 +118,7 @@ const compactMeta = $derived.by(() => {
 		{#if canWrite}
 			<a
 				href="/documents/{doc.id}/edit"
-				class="flex items-center gap-2 rounded border border-primary bg-transparent px-3 py-1.5 text-xs font-medium text-ink transition hover:bg-primary hover:text-white"
+				class="flex items-center gap-2 rounded border border-primary bg-transparent px-3 py-1.5 text-xs font-medium text-ink transition hover:bg-primary hover:text-primary-fg"
 			>
 				<img
 					src="/degruyter-icons/Simple/Medium-24px/SVG/Action/Edit-Content-MD.svg"
diff --git a/frontend/src/lib/components/PanelHistory.svelte b/frontend/src/lib/components/PanelHistory.svelte
index d98cafde..7b4bfb1d 100644
--- a/frontend/src/lib/components/PanelHistory.svelte
+++ b/frontend/src/lib/components/PanelHistory.svelte
@@ -328,7 +328,7 @@ $effect(() => {
 				<button
 					onclick={applyCompare}
 					disabled={!compareA || !compareB || compareA === compareB}
-					class="w-full rounded bg-primary px-3 py-1.5 font-sans text-xs font-medium text-white transition hover:bg-primary/80 disabled:cursor-not-allowed disabled:opacity-40"
+					class="w-full rounded bg-primary px-3 py-1.5 font-sans text-xs font-medium text-primary-fg transition hover:bg-primary/80 disabled:cursor-not-allowed disabled:opacity-40"
 				>
 					{m.history_compare_apply()}
 				</button>
diff --git a/frontend/src/lib/components/PanelMetadata.svelte b/frontend/src/lib/components/PanelMetadata.svelte
index 547aab74..a652f0c2 100644
--- a/frontend/src/lib/components/PanelMetadata.svelte
+++ b/frontend/src/lib/components/PanelMetadata.svelte
@@ -100,7 +100,7 @@ let { doc }: { doc: Doc } = $props();
 							{#each doc.tags as tag (tag.id)}
 								<a
 									href="/?tag={encodeURIComponent(tag.name)}"
-									class="inline-flex items-center rounded bg-muted px-2 py-0.5 text-xs font-bold tracking-wide text-ink uppercase transition-colors hover:bg-primary hover:text-white"
+									class="inline-flex items-center rounded bg-muted px-2 py-0.5 text-xs font-bold tracking-wide text-ink uppercase transition-colors hover:bg-primary hover:text-primary-fg"
 									title={m.doc_tag_filter_title({ name: tag.name })}
 								>
 									{tag.name}
@@ -131,7 +131,7 @@ let { doc }: { doc: Doc } = $props();
 				>
 					<div class="flex items-center gap-3">
 						<div
-							class="flex h-8 w-8 items-center justify-center rounded-full bg-primary font-serif text-sm text-white"
+							class="flex h-8 w-8 items-center justify-center rounded-full bg-primary font-serif text-sm text-primary-fg"
 						>
 							{doc.sender.firstName[0]}{doc.sender.lastName[0]}
 						</div>
diff --git a/frontend/src/routes/DocumentList.svelte b/frontend/src/routes/DocumentList.svelte
index 9ac8537a..983ec960 100644
--- a/frontend/src/routes/DocumentList.svelte
+++ b/frontend/src/routes/DocumentList.svelte
@@ -121,7 +121,7 @@ let {
 										{#each doc.tags as tag (tag.id)}
 											<button
 												type="button"
-												class="relative z-10 inline-flex cursor-pointer items-center rounded bg-muted px-2 py-1 text-[10px] font-bold tracking-widest text-ink uppercase transition-colors hover:bg-primary hover:text-white"
+												class="relative z-10 inline-flex cursor-pointer items-center rounded bg-muted px-2 py-1 text-[10px] font-bold tracking-widest text-ink uppercase transition-colors hover:bg-primary hover:text-primary-fg"
 												onclick={(e) => {
 													e.preventDefault();
 													e.stopPropagation();
diff --git a/frontend/src/routes/UserMenu.svelte b/frontend/src/routes/UserMenu.svelte
index cb954c84..dca5e916 100644
--- a/frontend/src/routes/UserMenu.svelte
+++ b/frontend/src/routes/UserMenu.svelte
@@ -33,7 +33,7 @@ function clickOutside(node: HTMLElement) {
 			aria-expanded={userMenuOpen}
 			aria-haspopup="true"
 			onclick={() => (userMenuOpen = !userMenuOpen)}
-			class="flex h-8 w-8 items-center justify-center rounded-full bg-primary font-sans text-xs font-bold text-white transition-opacity hover:opacity-80"
+			class="flex h-8 w-8 items-center justify-center rounded-full bg-primary font-sans text-xs font-bold text-primary-fg transition-opacity hover:opacity-80"
 		>
 			{userInitials}
 		</button>
diff --git a/frontend/src/routes/admin/+page.svelte b/frontend/src/routes/admin/+page.svelte
index 5ea95469..96d6602a 100644
--- a/frontend/src/routes/admin/+page.svelte
+++ b/frontend/src/routes/admin/+page.svelte
@@ -20,28 +20,28 @@ let activeTab = $state('users');
 			<button
 				class="rounded-md px-2 py-2 text-sm font-bold tracking-wide uppercase transition sm:px-4 {activeTab ===
 				'users'
-					? 'bg-primary text-white'
+					? 'bg-primary text-primary-fg'
 					: 'text-ink-2 hover:text-ink'}"
 				onclick={() => (activeTab = 'users')}>{m.admin_tab_users()}</button
 			>
 			<button
 				class="rounded-md px-2 py-2 text-sm font-bold tracking-wide uppercase transition sm:px-4 {activeTab ===
 				'groups'
-					? 'bg-primary text-white'
+					? 'bg-primary text-primary-fg'
 					: 'text-ink-2 hover:text-ink'}"
 				onclick={() => (activeTab = 'groups')}>{m.admin_tab_groups()}</button
 			>
 			<button
 				class="rounded-md px-2 py-2 text-sm font-bold tracking-wide uppercase transition sm:px-4 {activeTab ===
 				'tags'
-					? 'bg-primary text-white'
+					? 'bg-primary text-primary-fg'
 					: 'text-ink-2 hover:text-ink'}"
 				onclick={() => (activeTab = 'tags')}>{m.admin_tab_tags()}</button
 			>
 			<button
 				class="rounded-md px-2 py-2 text-sm font-bold tracking-wide uppercase transition sm:px-4 {activeTab ===
 				'system'
-					? 'bg-primary text-white'
+					? 'bg-primary text-primary-fg'
 					: 'text-ink-2 hover:text-ink'}"
 				onclick={() => (activeTab = 'system')}>{m.admin_tab_system()}</button
 			>
diff --git a/frontend/src/routes/admin/GroupsTab.svelte b/frontend/src/routes/admin/GroupsTab.svelte
index 0f96cc22..d171ad0d 100644
--- a/frontend/src/routes/admin/GroupsTab.svelte
+++ b/frontend/src/routes/admin/GroupsTab.svelte
@@ -212,7 +212,7 @@ function cancelEditGroup() {
 
 			<button
 				type="submit"
-				class="w-full rounded bg-primary px-6 py-2 text-sm font-bold text-white uppercase hover:bg-accent hover:text-ink md:w-auto"
+				class="w-full rounded bg-primary px-6 py-2 text-sm font-bold text-primary-fg uppercase hover:bg-accent hover:text-ink md:w-auto"
 			>
 				{m.btn_create()}
 			</button>
diff --git a/frontend/src/routes/admin/SystemTab.svelte b/frontend/src/routes/admin/SystemTab.svelte
index bd80e61c..bc4301ac 100644
--- a/frontend/src/routes/admin/SystemTab.svelte
+++ b/frontend/src/routes/admin/SystemTab.svelte
@@ -41,7 +41,7 @@ async function backfillFileHashes() {
 	<button
 		onclick={backfillVersions}
 		disabled={backfillLoading}
-		class="rounded bg-primary px-6 py-2 text-sm font-bold text-white uppercase transition hover:bg-accent hover:text-ink disabled:cursor-not-allowed disabled:opacity-50"
+		class="rounded bg-primary px-6 py-2 text-sm font-bold text-primary-fg uppercase transition hover:bg-accent hover:text-ink disabled:cursor-not-allowed disabled:opacity-50"
 	>
 		{backfillLoading ? '…' : m.admin_system_backfill_btn()}
 	</button>
@@ -60,7 +60,7 @@ async function backfillFileHashes() {
 	<button
 		onclick={backfillFileHashes}
 		disabled={backfillHashesLoading}
-		class="rounded bg-primary px-6 py-2 text-sm font-bold text-white uppercase transition hover:bg-accent hover:text-ink disabled:cursor-not-allowed disabled:opacity-50"
+		class="rounded bg-primary px-6 py-2 text-sm font-bold text-primary-fg uppercase transition hover:bg-accent hover:text-ink disabled:cursor-not-allowed disabled:opacity-50"
 	>
 		{backfillHashesLoading ? '…' : m.admin_system_backfill_hashes_btn()}
 	</button>
diff --git a/frontend/src/routes/admin/UsersTab.svelte b/frontend/src/routes/admin/UsersTab.svelte
index de8dd02a..52d40709 100644
--- a/frontend/src/routes/admin/UsersTab.svelte
+++ b/frontend/src/routes/admin/UsersTab.svelte
@@ -20,7 +20,7 @@ let {
 		<h2 class="text-lg font-bold text-ink-2">{m.admin_section_users()}</h2>
 		<a
 			href="/admin/users/new"
-			class="inline-flex items-center gap-1 rounded-sm bg-primary px-4 py-2 font-sans text-xs font-bold tracking-widest text-white uppercase transition-opacity hover:opacity-80"
+			class="inline-flex items-center gap-1 rounded-sm bg-primary px-4 py-2 font-sans text-xs font-bold tracking-widest text-primary-fg uppercase transition-opacity hover:opacity-80"
 		>
 			<svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
 				<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
diff --git a/frontend/src/routes/admin/users/[id]/+page.svelte b/frontend/src/routes/admin/users/[id]/+page.svelte
index 2159d6ed..2ebe7691 100644
--- a/frontend/src/routes/admin/users/[id]/+page.svelte
+++ b/frontend/src/routes/admin/users/[id]/+page.svelte
@@ -85,7 +85,7 @@ const selectedGroupIds = $derived(data.editUser.groups?.map((g: { id: string })
 			</a>
 			<button
 				type="submit"
-				class="rounded-sm bg-primary px-5 py-2 font-sans text-xs font-bold tracking-widest text-white uppercase transition-opacity hover:opacity-80"
+				class="rounded-sm bg-primary px-5 py-2 font-sans text-xs font-bold tracking-widest text-primary-fg uppercase transition-opacity hover:opacity-80"
 			>
 				{m.btn_save()}
 			</button>
diff --git a/frontend/src/routes/admin/users/new/+page.svelte b/frontend/src/routes/admin/users/new/+page.svelte
index ae79f96b..4af6d8ba 100644
--- a/frontend/src/routes/admin/users/new/+page.svelte
+++ b/frontend/src/routes/admin/users/new/+page.svelte
@@ -61,7 +61,7 @@ let { data, form } = $props();
 				</a>
 				<button
 					type="submit"
-					class="rounded-sm bg-primary px-5 py-2 font-sans text-xs font-bold tracking-widest text-white uppercase transition-opacity hover:opacity-80"
+					class="rounded-sm bg-primary px-5 py-2 font-sans text-xs font-bold tracking-widest text-primary-fg uppercase transition-opacity hover:opacity-80"
 				>
 					{m.btn_create()}
 				</button>
diff --git a/frontend/src/routes/conversations/ConversationFilterBar.svelte b/frontend/src/routes/conversations/ConversationFilterBar.svelte
index 1dfdd1f4..25e00e5d 100644
--- a/frontend/src/routes/conversations/ConversationFilterBar.svelte
+++ b/frontend/src/routes/conversations/ConversationFilterBar.svelte
@@ -48,7 +48,7 @@ let {
 			<button
 				data-testid="conv-swap-btn"
 				onclick={onswapPersons}
-				class="flex w-full items-center justify-center gap-2 border border-line px-3 py-2.5 text-xs font-bold tracking-widest text-ink uppercase transition-colors hover:bg-primary hover:text-white md:w-auto {senderId &&
+				class="flex w-full items-center justify-center gap-2 border border-line px-3 py-2.5 text-xs font-bold tracking-widest text-ink uppercase transition-colors hover:bg-primary hover:text-primary-fg md:w-auto {senderId &&
 				receiverId
 					? ''
 					: 'invisible'}"
@@ -121,7 +121,7 @@ let {
 		<div>
 			<button
 				onclick={ontoggleSort}
-				class="flex h-[42px] w-full items-center justify-center border border-line text-xs font-bold tracking-wide text-ink uppercase transition-colors hover:bg-primary hover:text-white"
+				class="flex h-[42px] w-full items-center justify-center border border-line text-xs font-bold tracking-wide text-ink uppercase transition-colors hover:bg-primary hover:text-primary-fg"
 			>
 				<span class="mr-2">{m.conv_sort_label()}</span>
 				<span>{sortDir === 'DESC' ? m.conv_sort_newest() : m.conv_sort_oldest()}</span>
diff --git a/frontend/src/routes/documents/[id]/edit/SaveBar.svelte b/frontend/src/routes/documents/[id]/edit/SaveBar.svelte
index 8550207e..56b66d47 100644
--- a/frontend/src/routes/documents/[id]/edit/SaveBar.svelte
+++ b/frontend/src/routes/documents/[id]/edit/SaveBar.svelte
@@ -71,7 +71,7 @@ let confirmDelete = $state(false);
 		</button>
 		<button
 			type="submit"
-			class="rounded bg-primary px-6 py-2 text-sm font-bold tracking-widest text-white uppercase transition-colors hover:bg-primary/80"
+			class="rounded bg-primary px-6 py-2 text-sm font-bold tracking-widest text-primary-fg uppercase transition-colors hover:bg-primary/80"
 		>
 			{m.btn_save()}
 		</button>
diff --git a/frontend/src/routes/documents/new/+page.svelte b/frontend/src/routes/documents/new/+page.svelte
index 5e84accb..6699a4c5 100644
--- a/frontend/src/routes/documents/new/+page.svelte
+++ b/frontend/src/routes/documents/new/+page.svelte
@@ -140,7 +140,7 @@ $effect(() => {
 					name="metadataComplete"
 					value="true"
 					formaction="?/saveReviewed"
-					class="rounded-sm bg-brand-navy px-5 py-2 font-sans text-xs font-bold tracking-widest text-white uppercase transition-colors hover:bg-brand-navy/90"
+					class="rounded-sm bg-primary px-5 py-2 font-sans text-xs font-bold tracking-widest text-primary-fg uppercase transition-colors hover:bg-primary/90"
 				>
 					{m.btn_save_and_mark_reviewed()}
 				</button>
diff --git a/frontend/src/routes/enrich/+page.svelte b/frontend/src/routes/enrich/+page.svelte
index 77d069df..1838c1fa 100644
--- a/frontend/src/routes/enrich/+page.svelte
+++ b/frontend/src/routes/enrich/+page.svelte
@@ -47,7 +47,7 @@ function formatUploadDate(createdAt: string): string {
 		{#if count > 0}
 			<a
 				href="/enrich/{documents[0].id}"
-				class="bg-brand-navy px-5 py-2 font-sans text-xs font-bold tracking-widest text-white uppercase transition-colors hover:bg-brand-navy/90"
+				class="bg-primary px-5 py-2 font-sans text-xs font-bold tracking-widest text-primary-fg uppercase transition-colors hover:bg-primary/90"
 			>
 				{m.enrich_list_start()}
 			</a>
diff --git a/frontend/src/routes/enrich/[id]/+page.svelte b/frontend/src/routes/enrich/[id]/+page.svelte
index 0e08d185..d1011e74 100644
--- a/frontend/src/routes/enrich/[id]/+page.svelte
+++ b/frontend/src/routes/enrich/[id]/+page.svelte
@@ -156,7 +156,7 @@ let selectedReceivers = $state(untrack(() => doc.receivers ?? []));
 						type="submit"
 						form="save-form"
 						formaction="?/saveAndReview"
-						class="rounded-sm bg-brand-navy px-5 py-2 font-sans text-xs font-bold tracking-widest text-white uppercase transition-colors hover:bg-brand-navy/90"
+						class="rounded-sm bg-primary px-5 py-2 font-sans text-xs font-bold tracking-widest text-primary-fg uppercase transition-colors hover:bg-primary/90"
 					>
 						{m.btn_save_and_mark_reviewed()}
 					</button>
diff --git a/frontend/src/routes/enrich/done/+page.svelte b/frontend/src/routes/enrich/done/+page.svelte
index bac7aa45..0d3ceda5 100644
--- a/frontend/src/routes/enrich/done/+page.svelte
+++ b/frontend/src/routes/enrich/done/+page.svelte
@@ -24,7 +24,7 @@ import { m } from '$lib/paraglide/messages.js';
 		<div class="mt-8 flex flex-col items-center gap-4">
 			<a
 				href="/"
-				class="bg-brand-navy px-6 py-2 font-sans text-xs font-bold tracking-widest text-white uppercase transition-colors hover:bg-brand-navy/90"
+				class="bg-primary px-6 py-2 font-sans text-xs font-bold tracking-widest text-primary-fg uppercase transition-colors hover:bg-primary/90"
 			>
 				{m.btn_back_to_overview()}
 			</a>
diff --git a/frontend/src/routes/forgot-password/+page.svelte b/frontend/src/routes/forgot-password/+page.svelte
index bb9e34f4..9512fd84 100644
--- a/frontend/src/routes/forgot-password/+page.svelte
+++ b/frontend/src/routes/forgot-password/+page.svelte
@@ -54,7 +54,7 @@ let { form }: { form?: { error?: string; success?: boolean } } = $props();
 
 						<button
 							type="submit"
-							class="mt-2 w-full bg-primary py-2.5 font-sans text-xs font-bold tracking-widest text-white uppercase transition-colors hover:bg-primary/90"
+							class="mt-2 w-full bg-primary py-2.5 font-sans text-xs font-bold tracking-widest text-primary-fg uppercase transition-colors hover:bg-primary/90"
 						>
 							{m.forgot_password_submit()}
 						</button>
diff --git a/frontend/src/routes/login/+page.svelte b/frontend/src/routes/login/+page.svelte
index 56b32ab1..96f0c920 100644
--- a/frontend/src/routes/login/+page.svelte
+++ b/frontend/src/routes/login/+page.svelte
@@ -82,7 +82,7 @@ const activeLocale = $derived(getLocale().toUpperCase());
 
 					<button
 						type="submit"
-						class="mt-2 w-full bg-primary py-2.5 font-sans text-xs font-bold tracking-widest text-white uppercase transition-colors hover:bg-primary/90"
+						class="mt-2 w-full bg-primary py-2.5 font-sans text-xs font-bold tracking-widest text-primary-fg uppercase transition-colors hover:bg-primary/90"
 					>
 						{m.login_btn_submit()}
 					</button>
diff --git a/frontend/src/routes/persons/+page.svelte b/frontend/src/routes/persons/+page.svelte
index 381c5772..77e48481 100644
--- a/frontend/src/routes/persons/+page.svelte
+++ b/frontend/src/routes/persons/+page.svelte
@@ -107,7 +107,7 @@ function handleSearch() {
 						<!-- Avatar -->
 						<div class="flex-shrink-0">
 							<div
-								class="flex h-12 w-12 items-center justify-center rounded-full bg-primary font-serif text-lg text-white transition-colors group-hover:bg-accent group-hover:text-ink"
+								class="flex h-12 w-12 items-center justify-center rounded-full bg-primary font-serif text-lg text-primary-fg transition-colors group-hover:bg-accent group-hover:text-ink"
 							>
 								{person.firstName[0]}{person.lastName[0]}
 							</div>
diff --git a/frontend/src/routes/persons/[id]/PersonCard.svelte b/frontend/src/routes/persons/[id]/PersonCard.svelte
index c5e2e9e0..27844aad 100644
--- a/frontend/src/routes/persons/[id]/PersonCard.svelte
+++ b/frontend/src/routes/persons/[id]/PersonCard.svelte
@@ -143,7 +143,7 @@ $effect(() => {
 					<div class="flex gap-3">
 						<button
 							type="submit"
-							class="rounded bg-primary px-5 py-2 text-sm font-bold tracking-widest text-white uppercase transition-colors hover:bg-primary/80"
+							class="rounded bg-primary px-5 py-2 text-sm font-bold tracking-widest text-primary-fg uppercase transition-colors hover:bg-primary/80"
 						>
 							{m.btn_save()}
 						</button>
diff --git a/frontend/src/routes/persons/[id]/PersonDocumentList.svelte b/frontend/src/routes/persons/[id]/PersonDocumentList.svelte
index 97e6a7e1..cb084aea 100644
--- a/frontend/src/routes/persons/[id]/PersonDocumentList.svelte
+++ b/frontend/src/routes/persons/[id]/PersonDocumentList.svelte
@@ -44,7 +44,7 @@ const visibleDocuments = $derived(
 <div class="mb-10">
 	<div class="mb-6 flex items-center gap-3 border-b border-ink/10 pb-2">
 		<h2 class="font-serif text-xl text-ink">{heading}</h2>
-		<span class="rounded-full bg-primary px-2 py-1 text-xs font-bold text-white">
+		<span class="rounded-full bg-primary px-2 py-1 text-xs font-bold text-primary-fg">
 			{documents.length}
 		</span>
 		{#if yearRange}
diff --git a/frontend/src/routes/persons/new/+page.svelte b/frontend/src/routes/persons/new/+page.svelte
index 75e10b01..df4380dd 100644
--- a/frontend/src/routes/persons/new/+page.svelte
+++ b/frontend/src/routes/persons/new/+page.svelte
@@ -89,7 +89,7 @@ let { form } = $props();
 			</a>
 			<button
 				type="submit"
-				class="rounded bg-primary px-6 py-2 text-sm font-bold tracking-widest text-white uppercase transition-colors hover:bg-primary/80"
+				class="rounded bg-primary px-6 py-2 text-sm font-bold tracking-widest text-primary-fg uppercase transition-colors hover:bg-primary/80"
 			>
 				{m.btn_create()}
 			</button>
diff --git a/frontend/src/routes/profile/PasswordChangeForm.svelte b/frontend/src/routes/profile/PasswordChangeForm.svelte
index 27f22efd..3009ad47 100644
--- a/frontend/src/routes/profile/PasswordChangeForm.svelte
+++ b/frontend/src/routes/profile/PasswordChangeForm.svelte
@@ -70,7 +70,7 @@ let {
 
 		<button
 			type="submit"
-			class="mt-5 rounded-sm bg-primary px-5 py-2 font-sans text-xs font-bold tracking-widest text-white uppercase transition-opacity hover:opacity-80"
+			class="mt-5 rounded-sm bg-primary px-5 py-2 font-sans text-xs font-bold tracking-widest text-primary-fg uppercase transition-opacity hover:opacity-80"
 		>
 			{m.btn_save()}
 		</button>
diff --git a/frontend/src/routes/profile/PersonalInfoForm.svelte b/frontend/src/routes/profile/PersonalInfoForm.svelte
index 8cd37f7a..9f223975 100644
--- a/frontend/src/routes/profile/PersonalInfoForm.svelte
+++ b/frontend/src/routes/profile/PersonalInfoForm.svelte
@@ -115,7 +115,7 @@ function handleBirthDateInput(e: Event) {
 
 		<button
 			type="submit"
-			class="mt-5 rounded-sm bg-primary px-5 py-2 font-sans text-xs font-bold tracking-widest text-white uppercase transition-opacity hover:opacity-80"
+			class="mt-5 rounded-sm bg-primary px-5 py-2 font-sans text-xs font-bold tracking-widest text-primary-fg uppercase transition-opacity hover:opacity-80"
 		>
 			{m.btn_save()}
 		</button>
diff --git a/frontend/src/routes/reset-password/+page.svelte b/frontend/src/routes/reset-password/+page.svelte
index 2a76e692..0562a8d2 100644
--- a/frontend/src/routes/reset-password/+page.svelte
+++ b/frontend/src/routes/reset-password/+page.svelte
@@ -83,7 +83,7 @@ let {
 
 						<button
 							type="submit"
-							class="mt-2 w-full bg-primary py-2.5 font-sans text-xs font-bold tracking-widest text-white uppercase transition-colors hover:bg-primary/90"
+							class="mt-2 w-full bg-primary py-2.5 font-sans text-xs font-bold tracking-widest text-primary-fg uppercase transition-colors hover:bg-primary/90"
 						>
 							{m.reset_password_submit()}
 						</button>
diff --git a/frontend/src/routes/users/[id]/+page.svelte b/frontend/src/routes/users/[id]/+page.svelte
index bb0d5ae9..a33b89dc 100644
--- a/frontend/src/routes/users/[id]/+page.svelte
+++ b/frontend/src/routes/users/[id]/+page.svelte
@@ -45,13 +45,13 @@ const initials = $derived.by(() => {
 			<div class="mb-5 flex justify-center">
 				{#if initials}
 					<div
-						class="flex h-16 w-16 items-center justify-center rounded-full bg-primary text-white"
+						class="flex h-16 w-16 items-center justify-center rounded-full bg-primary text-primary-fg"
 					>
 						<span class="font-serif text-xl font-bold">{initials}</span>
 					</div>
 				{:else}
 					<div
-						class="flex h-16 w-16 items-center justify-center rounded-full bg-primary text-white"
+						class="flex h-16 w-16 items-center justify-center rounded-full bg-primary text-primary-fg"
 					>
 						<svg
 							class="h-8 w-8"