diff --git a/frontend/src/lib/components/CommentThread.svelte b/frontend/src/lib/components/CommentThread.svelte
index f8a26585..775f1ef6 100644
--- a/frontend/src/lib/components/CommentThread.svelte
+++ b/frontend/src/lib/components/CommentThread.svelte
@@ -230,7 +230,7 @@ onMount(() => {
 									</span>
 								{/if}
 							</div>
-							<p class="mt-1 font-serif text-sm leading-relaxed text-gray-700">{thread.content}</p>
+							<p class="mt-1 font-serif text-sm leading-relaxed text-ink-2">{thread.content}</p>
 						</div>
 						{#if canModify(thread)}
 							<div class="flex shrink-0 items-center gap-2">
@@ -302,7 +302,7 @@ onMount(() => {
 										</span>
 									{/if}
 								</div>
-								<p class="mt-1 font-serif text-sm leading-relaxed text-gray-700">{reply.content}</p>
+								<p class="mt-1 font-serif text-sm leading-relaxed text-ink-2">{reply.content}</p>
 							</div>
 							{#if canModify(reply)}
 								<div class="flex shrink-0 items-center gap-2">
diff --git a/frontend/src/lib/components/DocumentBottomPanel.svelte b/frontend/src/lib/components/DocumentBottomPanel.svelte
index f727c63e..eb9a21af 100644
--- a/frontend/src/lib/components/DocumentBottomPanel.svelte
+++ b/frontend/src/lib/components/DocumentBottomPanel.svelte
@@ -137,7 +137,7 @@ const panelHeight = $derived(open ? height : MIN_HEIGHT);
 		onpointerup={onDragEnd}
 		onpointercancel={onDragEnd}
 	>
-		<div class="h-1 w-12 rounded-full bg-gray-200"></div>
+		<div class="h-1 w-12 rounded-full bg-line"></div>
 	</div>
 
 	<!-- Tab bar -->
diff --git a/frontend/src/lib/components/PanelMetadata.svelte b/frontend/src/lib/components/PanelMetadata.svelte
index 12d9d385..547aab74 100644
--- a/frontend/src/lib/components/PanelMetadata.svelte
+++ b/frontend/src/lib/components/PanelMetadata.svelte
@@ -165,7 +165,7 @@ let { doc }: { doc: Doc } = $props();
 						>
 							<a href="/persons/{receiver.id}" class="flex min-w-0 flex-1 items-center gap-3">
 								<div
-									class="flex h-6 w-6 items-center justify-center rounded-full bg-gray-100 font-serif text-xs text-ink-2"
+									class="flex h-6 w-6 items-center justify-center rounded-full bg-muted font-serif text-xs text-ink-2"
 								>
 									{receiver.firstName[0]}{receiver.lastName[0]}
 								</div>
diff --git a/frontend/src/lib/components/PersonMultiSelect.svelte b/frontend/src/lib/components/PersonMultiSelect.svelte
index cdedec8c..5fc1171f 100644
--- a/frontend/src/lib/components/PersonMultiSelect.svelte
+++ b/frontend/src/lib/components/PersonMultiSelect.svelte
@@ -80,7 +80,7 @@ function clickOutside(node: HTMLElement) {
 
 <div class="relative" use:clickOutside>
 	<div
-		class="flex min-h-[42px] flex-wrap gap-2 rounded border border-gray-300 bg-surface p-2 focus-within:border-ink focus-within:ring-1 focus-within:ring-ink"
+		class="flex min-h-[42px] flex-wrap gap-2 rounded border border-line bg-surface p-2 focus-within:border-ink focus-within:ring-1 focus-within:ring-ink"
 	>
 		{#each selectedPersons as person (person.id)}
 			<span
@@ -128,7 +128,7 @@ function clickOutside(node: HTMLElement) {
 			{:else}
 				{#each results as person (person.id)}
 					<div
-						class="cursor-pointer py-2 pr-9 pl-3 text-gray-900 select-none hover:bg-muted"
+						class="cursor-pointer py-2 pr-9 pl-3 text-ink select-none hover:bg-muted"
 						onclick={() => selectPerson(person)}
 						onkeydown={(e) => e.key === 'Enter' && selectPerson(person)}
 						role="button"
diff --git a/frontend/src/lib/components/PersonTypeahead.svelte b/frontend/src/lib/components/PersonTypeahead.svelte
index bc2c4acd..91df7d02 100644
--- a/frontend/src/lib/components/PersonTypeahead.svelte
+++ b/frontend/src/lib/components/PersonTypeahead.svelte
@@ -111,7 +111,7 @@ function clickOutside(node: HTMLElement) {
 </script>
 
 <div class="relative" use:clickOutside>
-	<label for={name} class="block text-sm font-medium text-gray-700">{label}</label>
+	<label for={name} class="block text-sm font-medium text-ink-2">{label}</label>
 
 	<input type="hidden" name={name} bind:value={value} />
 
@@ -123,7 +123,7 @@ function clickOutside(node: HTMLElement) {
 		oninput={handleInput}
 		onfocus={handleFocus}
 		placeholder={m.comp_typeahead_placeholder()}
-		class="mt-1 block w-full rounded-md border border-gray-300 p-2 shadow-sm focus:border-blue-500 focus:ring-blue-500"
+		class="mt-1 block w-full rounded-md border border-line p-2 shadow-sm focus:border-accent focus:ring-accent"
 	/>
 
 	{#if showDropdown && (results.length > 0 || loading)}
@@ -135,7 +135,7 @@ function clickOutside(node: HTMLElement) {
 			{:else}
 				{#each results as person (person.id)}
 					<div
-						class="relative cursor-pointer py-2 pr-9 pl-3 text-gray-900 select-none hover:bg-blue-100"
+						class="relative cursor-pointer py-2 pr-9 pl-3 text-ink select-none hover:bg-accent-bg"
 						onclick={() => selectPerson(person)}
 						onkeydown={(e) => e.key === 'Enter' && selectPerson(person)}
 						role="button"
diff --git a/frontend/src/lib/components/TagInput.svelte b/frontend/src/lib/components/TagInput.svelte
index aa822f0e..b16cd67e 100644
--- a/frontend/src/lib/components/TagInput.svelte
+++ b/frontend/src/lib/components/TagInput.svelte
@@ -85,7 +85,7 @@ function clickOutside(node: HTMLElement) {
 <div class="w-full" use:clickOutside>
 	<!-- Tag Container -->
 	<div
-		class="flex min-h-[42px] flex-wrap gap-2 rounded border border-gray-300 bg-surface p-2 focus-within:border-ink focus-within:ring-1 focus-within:ring-ink"
+		class="flex min-h-[42px] flex-wrap gap-2 rounded border border-line bg-surface p-2 focus-within:border-ink focus-within:ring-1 focus-within:ring-ink"
 	>
 		<!-- Render Selected Tags -->
 		{#each tags as tag, i (i)}
@@ -137,7 +137,7 @@ function clickOutside(node: HTMLElement) {
 							tabindex="0"
 							class="cursor-pointer px-3 py-2 text-sm hover:bg-muted {i === activeIndex
                                 ? 'bg-muted font-bold text-ink'
-                                : 'text-gray-700'}"
+                                : 'text-ink-2'}"
 							onclick={() => addTag(suggestion)}
 							onkeydown={(e) => e.key === 'Enter' && addTag(suggestion)}
 						>
diff --git a/frontend/src/routes/+page.svelte b/frontend/src/routes/+page.svelte
index f8a3a4b5..cbe28932 100644
--- a/frontend/src/routes/+page.svelte
+++ b/frontend/src/routes/+page.svelte
@@ -90,7 +90,7 @@ $effect(() => {
 					onfocus={() => (qFocused = true)}
 					onblur={() => (qFocused = false)}
 					placeholder={m.docs_search_placeholder()}
-					class="block w-full border-gray-300 py-2.5 pr-10 pl-3 placeholder-gray-400 shadow-sm focus:border-ink focus:ring-ink"
+					class="block w-full border-line py-2.5 pr-10 pl-3 placeholder-ink-3 shadow-sm focus:border-ink focus:ring-ink"
 				/>
 				<div class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3">
 					<img
@@ -105,7 +105,7 @@ $effect(() => {
 			<!-- Toggle Advanced Button -->
 			<button
 				onclick={() => (showAdvanced = !showAdvanced)}
-				class="flex items-center gap-2 border border-gray-300 bg-gray-50 px-4 py-2.5 text-sm font-bold tracking-wide text-ink-2 uppercase transition hover:bg-gray-100 hover:text-ink"
+				class="flex items-center gap-2 border border-line bg-muted px-4 py-2.5 text-sm font-bold tracking-wide text-ink-2 uppercase transition hover:bg-muted hover:text-ink"
 			>
 				<img
 					src="/degruyter-icons/Simple/Small-16px/SVG/Action/Chevron/Chevron-Down-SM.svg"
@@ -148,7 +148,7 @@ $effect(() => {
 				<!-- Sender -->
 				<div class="md:col-span-3">
 					<div
-						class="[&_input]:border-gray-300 [&_input]:py-2.5 [&_label]:mb-2 [&_label]:text-xs [&_label]:font-bold [&_label]:tracking-widest [&_label]:text-ink-2 [&_label]:uppercase"
+						class="[&_input]:border-line [&_input]:py-2.5 [&_label]:mb-2 [&_label]:text-xs [&_label]:font-bold [&_label]:tracking-widest [&_label]:text-ink-2 [&_label]:uppercase"
 					>
 						<PersonTypeahead
 							name="senderId"
@@ -163,7 +163,7 @@ $effect(() => {
 				<!-- Receiver -->
 				<div class="md:col-span-3">
 					<div
-						class="[&_input]:border-gray-300 [&_input]:py-2.5 [&_label]:mb-2 [&_label]:text-xs [&_label]:font-bold [&_label]:tracking-widest [&_label]:text-ink-2 [&_label]:uppercase"
+						class="[&_input]:border-line [&_input]:py-2.5 [&_label]:mb-2 [&_label]:text-xs [&_label]:font-bold [&_label]:tracking-widest [&_label]:text-ink-2 [&_label]:uppercase"
 					>
 						<PersonTypeahead
 							name="receiverId"
@@ -188,7 +188,7 @@ $effect(() => {
 							id="from"
 							bind:value={from}
 							onchange={triggerSearch}
-							class="block w-full border-gray-300 py-2.5 text-sm shadow-sm"
+							class="block w-full border-line py-2.5 text-sm shadow-sm"
 						/>
 					</div>
 					<div>
@@ -202,7 +202,7 @@ $effect(() => {
 							id="to"
 							bind:value={to}
 							onchange={triggerSearch}
-							class="block w-full border-gray-300 py-2.5 text-sm shadow-sm"
+							class="block w-full border-line py-2.5 text-sm shadow-sm"
 						/>
 					</div>
 				</div>
@@ -284,9 +284,7 @@ $effect(() => {
 												>{m.docs_list_from()}</span
 											>
 											{#if doc.sender}
-												<span class="text-gray-900"
-													>{doc.sender.firstName} {doc.sender.lastName}</span
-												>
+												<span class="text-ink">{doc.sender.firstName} {doc.sender.lastName}</span>
 											{:else}
 												<span class="text-ink-3 italic">{m.docs_list_unknown()}</span>
 											{/if}
@@ -297,7 +295,7 @@ $effect(() => {
 												>{m.docs_list_to()}</span
 											>
 											{#if doc.receivers && doc.receivers.length > 0}
-												<span class="text-gray-900">
+												<span class="text-ink">
 													{doc.receivers.map((p) => p.firstName + ' ' + p.lastName).join(', ')}
 												</span>
 											{:else}
diff --git a/frontend/src/routes/admin/+page.svelte b/frontend/src/routes/admin/+page.svelte
index 252e7caf..a40ca891 100644
--- a/frontend/src/routes/admin/+page.svelte
+++ b/frontend/src/routes/admin/+page.svelte
@@ -109,7 +109,7 @@ async function backfillFileHashes() {
 	{#if activeTab === 'users'}
 		<div class="overflow-hidden rounded-lg border border-line bg-surface shadow-sm" in:slide>
 			<div class="flex items-center justify-between border-b border-line-2 p-6">
-				<h2 class="text-lg font-bold text-gray-700">{m.admin_section_users()}</h2>
+				<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"
@@ -126,8 +126,8 @@ async function backfillFileHashes() {
 				</a>
 			</div>
 
-			<table class="min-w-full divide-y divide-gray-200">
-				<thead class="bg-gray-50">
+			<table class="min-w-full divide-y divide-line">
+				<thead class="bg-muted">
 					<tr>
 						<th class="px-6 py-3 text-left text-xs font-bold tracking-wider text-ink-2 uppercase"
 							>{m.admin_col_login()}</th
@@ -143,10 +143,10 @@ async function backfillFileHashes() {
 						>
 					</tr>
 				</thead>
-				<tbody class="divide-y divide-gray-200 bg-surface">
+				<tbody class="divide-y divide-line bg-surface">
 					{#each data.users as user (user.id)}
-						<tr class="group/row hover:bg-gray-50">
-							<td class="px-6 py-4 text-sm font-medium whitespace-nowrap text-gray-900">
+						<tr class="group/row hover:bg-muted">
+							<td class="px-6 py-4 text-sm font-medium whitespace-nowrap text-ink">
 								{user.username}
 							</td>
 							<td class="px-6 py-4 text-sm whitespace-nowrap text-ink-2">
@@ -218,15 +218,15 @@ async function backfillFileHashes() {
 	{:else if activeTab === 'tags'}
 		<div class="overflow-hidden rounded-lg border border-line bg-surface shadow-sm" in:slide>
 			<div class="border-b border-line-2 bg-yellow-50/50 p-6">
-				<h2 class="text-lg font-bold text-gray-700">{m.admin_section_tags()}</h2>
+				<h2 class="text-lg font-bold text-ink-2">{m.admin_section_tags()}</h2>
 				<p class="mt-1 text-xs text-yellow-800">
 					{m.admin_tags_warning()}
 				</p>
 			</div>
 
-			<ul class="max-h-[600px] divide-y divide-gray-100 overflow-y-auto">
+			<ul class="max-h-[600px] divide-y divide-line-2 overflow-y-auto">
 				{#each data.tags as tag (tag.id)}
-					<li class="group flex items-center justify-between px-6 py-3 hover:bg-gray-50">
+					<li class="group flex items-center justify-between px-6 py-3 hover:bg-muted">
 						{#if editingTagId === tag.id}
 							<form
 								method="POST"
@@ -243,7 +243,7 @@ async function backfillFileHashes() {
 									type="text"
 									name="name"
 									bind:value={editingTagName}
-									class="flex-1 rounded border-accent px-2 py-1 text-sm ring-1 ring-brand-mint"
+									class="flex-1 rounded border-accent px-2 py-1 text-sm ring-1 ring-accent"
 								/>
 								<button aria-label={m.btn_save()} class="text-green-600 hover:text-green-800"
 									><svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"
@@ -330,11 +330,11 @@ async function backfillFileHashes() {
 	{:else if activeTab === 'groups'}
 		<div class="overflow-hidden rounded-lg border border-line bg-surface shadow-sm" in:slide>
 			<div class="flex items-center justify-between border-b border-line-2 p-6">
-				<h2 class="text-lg font-bold text-gray-700">{m.admin_section_groups()}</h2>
+				<h2 class="text-lg font-bold text-ink-2">{m.admin_section_groups()}</h2>
 			</div>
 
-			<table class="min-w-full divide-y divide-gray-200">
-				<thead class="bg-gray-50">
+			<table class="min-w-full divide-y divide-line">
+				<thead class="bg-muted">
 					<tr>
 						<th class="px-6 py-3 text-left text-xs font-bold tracking-wider text-ink-2 uppercase"
 							>{m.admin_col_name()}</th
@@ -347,9 +347,9 @@ async function backfillFileHashes() {
 						>
 					</tr>
 				</thead>
-				<tbody class="divide-y divide-gray-200 bg-surface">
+				<tbody class="divide-y divide-line bg-surface">
 					{#each data.groups as group (group.id)}
-						<tr class="group/row hover:bg-gray-50">
+						<tr class="group/row hover:bg-muted">
 							{#if editingGroupId === group.id}
 								<!-- EDIT MODE -->
 								<td colspan="3" class="px-6 py-4">
@@ -385,7 +385,7 @@ async function backfillFileHashes() {
 														name="permissions"
 														value={perm}
 														checked={group.permissions.includes(perm)}
-														class="mr-2 rounded border-gray-300 text-ink focus:ring-accent"
+														class="mr-2 rounded border-line text-ink focus:ring-accent"
 													/>
 													{perm.replace('_', ' ')}
 												</label>
@@ -437,7 +437,7 @@ async function backfillFileHashes() {
 												class="rounded-full px-2 py-0.5 text-[10px] font-bold uppercase
                                                 {perm === 'ADMIN'
 													? 'border-red-100 bg-red-50 text-red-700'
-													: 'border-line bg-gray-100 text-ink-2'}"
+													: 'border-line bg-muted text-ink-2'}"
 											>
 												{perm}
 											</span>
@@ -489,7 +489,7 @@ async function backfillFileHashes() {
 			</table>
 
 			<!-- CREATE GROUP FORM -->
-			<div class="border-t border-line bg-gray-50 p-6">
+			<div class="border-t border-line bg-muted p-6">
 				<h3 class="mb-4 text-xs font-bold tracking-wide text-ink-2 uppercase">
 					{m.admin_section_new_group()}
 				</h3>
@@ -505,7 +505,7 @@ async function backfillFileHashes() {
 							name="name"
 							placeholder={m.admin_group_name_placeholder()}
 							required
-							class="w-full rounded border-gray-300 text-sm"
+							class="w-full rounded border-line text-sm"
 						/>
 					</div>
 
@@ -516,7 +516,7 @@ async function backfillFileHashes() {
 									type="checkbox"
 									name="permissions"
 									value={perm}
-									class="mr-2 rounded border-gray-300 text-ink focus:ring-accent"
+									class="mr-2 rounded border-line text-ink focus:ring-accent"
 								/>
 								{perm.replace('_', ' ')}
 							</label>
@@ -534,7 +534,7 @@ async function backfillFileHashes() {
 		</div>
 	{:else if activeTab === 'system'}
 		<div class="rounded-sm border border-line bg-surface p-6 shadow-sm">
-			<h2 class="mb-1 text-lg font-bold text-gray-700">{m.admin_system_backfill_heading()}</h2>
+			<h2 class="mb-1 text-lg font-bold text-ink-2">{m.admin_system_backfill_heading()}</h2>
 			<p class="mb-4 text-sm text-ink-2">{m.admin_system_backfill_description()}</p>
 			<button
 				onclick={backfillVersions}
@@ -551,7 +551,7 @@ async function backfillFileHashes() {
 		</div>
 
 		<div class="mt-4 rounded-sm border border-line bg-surface p-6 shadow-sm">
-			<h2 class="mb-1 text-lg font-bold text-gray-700">
+			<h2 class="mb-1 text-lg font-bold text-ink-2">
 				{m.admin_system_backfill_hashes_heading()}
 			</h2>
 			<p class="mb-4 text-sm text-ink-2">{m.admin_system_backfill_hashes_description()}</p>
diff --git a/frontend/src/routes/admin/users/[id]/+page.svelte b/frontend/src/routes/admin/users/[id]/+page.svelte
index 973ecb74..85369c6d 100644
--- a/frontend/src/routes/admin/users/[id]/+page.svelte
+++ b/frontend/src/routes/admin/users/[id]/+page.svelte
@@ -157,13 +157,13 @@ function handleBirthDateInput(e: Event) {
 
 			<div class="flex flex-wrap gap-3">
 				{#each data.groups as group (group.id)}
-					<label class="inline-flex items-center gap-2 text-sm text-gray-700">
+					<label class="inline-flex items-center gap-2 text-sm text-ink-2">
 						<input
 							type="checkbox"
 							name="groupIds"
 							value={group.id}
 							checked={data.editUser.groups?.some((g: { id: string }) => g.id === group.id)}
-							class="rounded border-gray-300 text-ink focus:ring-accent"
+							class="rounded border-line text-ink focus:ring-accent"
 						/>
 						{group.name}
 					</label>
diff --git a/frontend/src/routes/admin/users/new/+page.svelte b/frontend/src/routes/admin/users/new/+page.svelte
index 6972e6d0..01fe3e7f 100644
--- a/frontend/src/routes/admin/users/new/+page.svelte
+++ b/frontend/src/routes/admin/users/new/+page.svelte
@@ -156,12 +156,12 @@ function handleBirthDateInput(e: Event) {
 
 			<div class="flex flex-wrap gap-3">
 				{#each data.groups as group (group.id)}
-					<label class="inline-flex items-center gap-2 text-sm text-gray-700">
+					<label class="inline-flex items-center gap-2 text-sm text-ink-2">
 						<input
 							type="checkbox"
 							name="groupIds"
 							value={group.id}
-							class="rounded border-gray-300 text-ink focus:ring-accent"
+							class="rounded border-line text-ink focus:ring-accent"
 						/>
 						{group.name}
 					</label>
diff --git a/frontend/src/routes/conversations/+page.svelte b/frontend/src/routes/conversations/+page.svelte
index c7b8bbcb..0d6bc148 100644
--- a/frontend/src/routes/conversations/+page.svelte
+++ b/frontend/src/routes/conversations/+page.svelte
@@ -79,7 +79,7 @@ const enrichedDocuments = $derived(
 		<div class="mb-6 grid grid-cols-1 items-end gap-4 md:grid-cols-[1fr_auto_1fr] md:gap-6">
 			<!-- Sender -->
 			<div
-				class="relative z-30 [&_input]:border-gray-300 [&_input]:py-2.5 [&_input]:focus:border-ink [&_input]:focus:ring-ink [&_label]:mb-2 [&_label]:text-xs [&_label]:font-bold [&_label]:tracking-widest [&_label]:text-ink-2 [&_label]:uppercase"
+				class="relative z-30 [&_input]:border-line [&_input]:py-2.5 [&_input]:focus:border-ink [&_input]:focus:ring-ink [&_label]:mb-2 [&_label]:text-xs [&_label]:font-bold [&_label]:tracking-widest [&_label]:text-ink-2 [&_label]:uppercase"
 			>
 				<PersonTypeahead
 					name="senderId"
@@ -123,7 +123,7 @@ const enrichedDocuments = $derived(
 
 			<!-- Receiver -->
 			<div
-				class="relative z-30 [&_input]:border-gray-300 [&_input]:py-2.5 [&_input]:focus:border-ink [&_input]:focus:ring-ink [&_label]:mb-2 [&_label]:text-xs [&_label]:font-bold [&_label]:tracking-widest [&_label]:text-ink-2 [&_label]:uppercase"
+				class="relative z-30 [&_input]:border-line [&_input]:py-2.5 [&_input]:focus:border-ink [&_input]:focus:ring-ink [&_label]:mb-2 [&_label]:text-xs [&_label]:font-bold [&_label]:tracking-widest [&_label]:text-ink-2 [&_label]:uppercase"
 			>
 				<PersonTypeahead
 					name="receiverId"
@@ -149,7 +149,7 @@ const enrichedDocuments = $derived(
 					type="date"
 					bind:value={fromDate}
 					onchange={() => applyFilters()}
-					class="block w-full border-gray-300 py-2.5 text-sm shadow-sm focus:border-ink focus:ring-ink"
+					class="block w-full border-line py-2.5 text-sm shadow-sm focus:border-ink focus:ring-ink"
 				/>
 			</div>
 
@@ -165,7 +165,7 @@ const enrichedDocuments = $derived(
 					type="date"
 					bind:value={toDate}
 					onchange={() => applyFilters()}
-					class="block w-full border-gray-300 py-2.5 text-sm shadow-sm focus:border-ink focus:ring-ink"
+					class="block w-full border-line py-2.5 text-sm shadow-sm focus:border-ink focus:ring-ink"
 				/>
 			</div>
 
diff --git a/frontend/src/routes/documents/[id]/edit/+page.svelte b/frontend/src/routes/documents/[id]/edit/+page.svelte
index 706a45f0..4d65db42 100644
--- a/frontend/src/routes/documents/[id]/edit/+page.svelte
+++ b/frontend/src/routes/documents/[id]/edit/+page.svelte
@@ -73,7 +73,7 @@ function handleDateInput(e: Event) {
 			<div class="grid grid-cols-1 gap-5 md:grid-cols-2">
 				<!-- Datum -->
 				<div>
-					<label for="documentDate" class="mb-1 block text-sm font-medium text-gray-700"
+					<label for="documentDate" class="mb-1 block text-sm font-medium text-ink-2"
 						>{m.form_label_date()}</label
 					>
 					<input
@@ -84,7 +84,7 @@ function handleDateInput(e: Event) {
 						oninput={handleDateInput}
 						placeholder={m.form_placeholder_date()}
 						maxlength="10"
-						class="block w-full rounded border border-gray-300 p-2 text-sm shadow-sm
+						class="block w-full rounded border border-line p-2 text-sm shadow-sm
                                {dateInvalid ? 'border-red-400 focus:border-red-500 focus:ring-red-500' : 'focus:border-ink focus:ring-ink'}"
 						aria-describedby={dateInvalid ? 'date-error' : undefined}
 					/>
@@ -96,7 +96,7 @@ function handleDateInput(e: Event) {
 
 				<!-- Ort -->
 				<div>
-					<label for="location" class="mb-1 block text-sm font-medium text-gray-700"
+					<label for="location" class="mb-1 block text-sm font-medium text-ink-2"
 						>{m.form_label_location()}</label
 					>
 					<input
@@ -105,7 +105,7 @@ function handleDateInput(e: Event) {
 						name="location"
 						value={doc.location || ''}
 						placeholder={m.form_placeholder_location()}
-						class="block w-full rounded border border-gray-300 p-2 text-sm shadow-sm focus:border-ink focus:ring-ink"
+						class="block w-full rounded border border-line p-2 text-sm shadow-sm focus:border-ink focus:ring-ink"
 					/>
 				</div>
 
@@ -121,7 +121,7 @@ function handleDateInput(e: Event) {
 
 				<!-- Empfänger -->
 				<div>
-					<p class="mb-1 block text-sm font-medium text-gray-700">{m.form_label_receivers()}</p>
+					<p class="mb-1 block text-sm font-medium text-ink-2">{m.form_label_receivers()}</p>
 					<PersonMultiSelect bind:selectedPersons={selectedReceivers} />
 				</div>
 			</div>
@@ -136,7 +136,7 @@ function handleDateInput(e: Event) {
 			<div class="space-y-5">
 				<!-- Titel -->
 				<div>
-					<label for="title" class="mb-1 block text-sm font-medium text-gray-700"
+					<label for="title" class="mb-1 block text-sm font-medium text-ink-2"
 						>{m.form_label_title()} *</label
 					>
 					<input
@@ -145,13 +145,13 @@ function handleDateInput(e: Event) {
 						name="title"
 						value={doc.title || ''}
 						required
-						class="block w-full rounded border border-gray-300 p-2 text-sm shadow-sm focus:border-ink focus:ring-ink"
+						class="block w-full rounded border border-line p-2 text-sm shadow-sm focus:border-ink focus:ring-ink"
 					/>
 				</div>
 
 				<!-- Aufbewahrungsort -->
 				<div>
-					<label for="documentLocation" class="mb-1 block text-sm font-medium text-gray-700"
+					<label for="documentLocation" class="mb-1 block text-sm font-medium text-ink-2"
 						>{m.form_label_archive_location()}</label
 					>
 					<input
@@ -160,21 +160,21 @@ function handleDateInput(e: Event) {
 						name="documentLocation"
 						value={doc.documentLocation || ''}
 						placeholder={m.form_placeholder_archive_location()}
-						class="block w-full rounded border border-gray-300 p-2 text-sm shadow-sm focus:border-ink focus:ring-ink"
+						class="block w-full rounded border border-line p-2 text-sm shadow-sm focus:border-ink focus:ring-ink"
 					/>
 					<p class="mt-1 text-xs text-ink-3">{m.form_helper_archive_location()}</p>
 				</div>
 
 				<!-- Schlagworte -->
 				<div>
-					<p class="mb-1 block text-sm font-medium text-gray-700">{m.form_label_tags()}</p>
+					<p class="mb-1 block text-sm font-medium text-ink-2">{m.form_label_tags()}</p>
 					<TagInput bind:tags={tags} />
 					<input type="hidden" name="tags" value={tags.join(',')} />
 				</div>
 
 				<!-- Inhalt -->
 				<div>
-					<label for="summary" class="mb-1 block text-sm font-medium text-gray-700"
+					<label for="summary" class="mb-1 block text-sm font-medium text-ink-2"
 						>{m.form_label_content()}</label
 					>
 					<textarea
@@ -182,7 +182,7 @@ function handleDateInput(e: Event) {
 						name="summary"
 						rows="5"
 						placeholder={m.form_placeholder_content()}
-						class="block w-full rounded border border-gray-300 p-2 font-serif text-sm shadow-sm focus:border-ink focus:ring-ink"
+						class="block w-full rounded border border-line p-2 font-serif text-sm shadow-sm focus:border-ink focus:ring-ink"
 						>{doc.summary || ''}</textarea
 					>
 				</div>
@@ -199,7 +199,7 @@ function handleDateInput(e: Event) {
 				name="transcription"
 				rows="12"
 				placeholder={m.form_placeholder_transcription()}
-				class="block w-full rounded border border-gray-300 p-2 font-serif text-sm shadow-sm focus:border-ink focus:ring-ink"
+				class="block w-full rounded border border-line p-2 font-serif text-sm shadow-sm focus:border-ink focus:ring-ink"
 				>{doc.transcription || ''}</textarea
 			>
 		</div>
@@ -223,7 +223,7 @@ function handleDateInput(e: Event) {
 				>
 			</div>
 
-			<label for="file-upload" class="mb-1 block text-sm font-medium text-gray-700">
+			<label for="file-upload" class="mb-1 block text-sm font-medium text-ink-2">
 				{m.doc_file_replace_label()}
 				<span class="font-normal text-ink-3">({m.doc_file_replace_note()})</span>
 			</label>
diff --git a/frontend/src/routes/documents/new/+page.svelte b/frontend/src/routes/documents/new/+page.svelte
index 11afc9c1..0b8355f6 100644
--- a/frontend/src/routes/documents/new/+page.svelte
+++ b/frontend/src/routes/documents/new/+page.svelte
@@ -84,7 +84,7 @@ function handleDateInput(e: Event) {
 			<div class="grid grid-cols-1 gap-5 md:grid-cols-2">
 				<!-- Datum -->
 				<div>
-					<label for="documentDate" class="mb-1 block text-sm font-medium text-gray-700"
+					<label for="documentDate" class="mb-1 block text-sm font-medium text-ink-2"
 						>{m.form_label_date()}</label
 					>
 					<input
@@ -95,7 +95,7 @@ function handleDateInput(e: Event) {
 						oninput={handleDateInput}
 						placeholder={m.form_placeholder_date()}
 						maxlength="10"
-						class="block w-full rounded border border-gray-300 p-2 text-sm shadow-sm
+						class="block w-full rounded border border-line p-2 text-sm shadow-sm
                                {dateInvalid ? 'border-red-400 focus:border-red-500 focus:ring-red-500' : 'focus:border-ink focus:ring-ink'}"
 						aria-describedby={dateInvalid ? 'date-error' : undefined}
 					/>
@@ -109,7 +109,7 @@ function handleDateInput(e: Event) {
 
 				<!-- Ort -->
 				<div>
-					<label for="location" class="mb-1 block text-sm font-medium text-gray-700"
+					<label for="location" class="mb-1 block text-sm font-medium text-ink-2"
 						>{m.form_label_location()}</label
 					>
 					<input
@@ -117,7 +117,7 @@ function handleDateInput(e: Event) {
 						type="text"
 						name="location"
 						placeholder={m.form_placeholder_location()}
-						class="block w-full rounded border border-gray-300 p-2 text-sm shadow-sm focus:border-ink focus:ring-ink"
+						class="block w-full rounded border border-line p-2 text-sm shadow-sm focus:border-ink focus:ring-ink"
 					/>
 				</div>
 
@@ -133,7 +133,7 @@ function handleDateInput(e: Event) {
 
 				<!-- Empfänger -->
 				<div>
-					<p class="mb-1 block text-sm font-medium text-gray-700">{m.form_label_receivers()}</p>
+					<p class="mb-1 block text-sm font-medium text-ink-2">{m.form_label_receivers()}</p>
 					<PersonMultiSelect bind:selectedPersons={selectedReceivers} />
 				</div>
 			</div>
@@ -148,7 +148,7 @@ function handleDateInput(e: Event) {
 			<div class="space-y-5">
 				<!-- Titel -->
 				<div>
-					<label for="title" class="mb-1 block text-sm font-medium text-gray-700"
+					<label for="title" class="mb-1 block text-sm font-medium text-ink-2"
 						>{m.form_label_title()} *</label
 					>
 					<input
@@ -156,13 +156,13 @@ function handleDateInput(e: Event) {
 						type="text"
 						name="title"
 						required
-						class="block w-full rounded border border-gray-300 p-2 text-sm shadow-sm focus:border-ink focus:ring-ink"
+						class="block w-full rounded border border-line p-2 text-sm shadow-sm focus:border-ink focus:ring-ink"
 					/>
 				</div>
 
 				<!-- Aufbewahrungsort -->
 				<div>
-					<label for="documentLocation" class="mb-1 block text-sm font-medium text-gray-700"
+					<label for="documentLocation" class="mb-1 block text-sm font-medium text-ink-2"
 						>{m.form_label_archive_location()}</label
 					>
 					<input
@@ -170,21 +170,21 @@ function handleDateInput(e: Event) {
 						type="text"
 						name="documentLocation"
 						placeholder={m.form_placeholder_archive_location()}
-						class="block w-full rounded border border-gray-300 p-2 text-sm shadow-sm focus:border-ink focus:ring-ink"
+						class="block w-full rounded border border-line p-2 text-sm shadow-sm focus:border-ink focus:ring-ink"
 					/>
 					<p class="mt-1 text-xs text-ink-3">{m.form_helper_archive_location()}</p>
 				</div>
 
 				<!-- Schlagworte -->
 				<div>
-					<p class="mb-1 block text-sm font-medium text-gray-700">{m.form_label_tags()}</p>
+					<p class="mb-1 block text-sm font-medium text-ink-2">{m.form_label_tags()}</p>
 					<TagInput bind:tags={tags} />
 					<input type="hidden" name="tags" value={tags.join(',')} />
 				</div>
 
 				<!-- Inhalt -->
 				<div>
-					<label for="summary" class="mb-1 block text-sm font-medium text-gray-700"
+					<label for="summary" class="mb-1 block text-sm font-medium text-ink-2"
 						>{m.form_label_content()}</label
 					>
 					<textarea
@@ -192,7 +192,7 @@ function handleDateInput(e: Event) {
 						name="summary"
 						rows="5"
 						placeholder={m.form_placeholder_content()}
-						class="block w-full rounded border border-gray-300 p-2 font-serif text-sm shadow-sm focus:border-ink focus:ring-ink"
+						class="block w-full rounded border border-line p-2 font-serif text-sm shadow-sm focus:border-ink focus:ring-ink"
 					></textarea>
 				</div>
 			</div>
@@ -208,7 +208,7 @@ function handleDateInput(e: Event) {
 				name="transcription"
 				rows="12"
 				placeholder={m.form_placeholder_transcription()}
-				class="block w-full rounded border border-gray-300 p-2 font-serif text-sm shadow-sm focus:border-ink focus:ring-ink"
+				class="block w-full rounded border border-line p-2 font-serif text-sm shadow-sm focus:border-ink focus:ring-ink"
 			></textarea>
 		</div>
 
@@ -218,7 +218,7 @@ function handleDateInput(e: Event) {
 				{m.doc_section_file()}
 			</h2>
 
-			<label for="file-upload" class="mb-1 block text-sm font-medium text-gray-700">
+			<label for="file-upload" class="mb-1 block text-sm font-medium text-ink-2">
 				{m.doc_file_upload_label()}
 				<span class="font-normal text-ink-3">({m.doc_file_upload_note()})</span>
 			</label>
diff --git a/frontend/src/routes/forgot-password/+page.svelte b/frontend/src/routes/forgot-password/+page.svelte
index 565ca21a..63eb48ac 100644
--- a/frontend/src/routes/forgot-password/+page.svelte
+++ b/frontend/src/routes/forgot-password/+page.svelte
@@ -47,7 +47,7 @@ let { form }: { form?: { error?: string; success?: boolean } } = $props();
 								id="email"
 								required
 								autocomplete="email"
-								class="block w-full border border-gray-300 px-3 py-2.5 font-serif text-sm text-ink placeholder-gray-400 focus:border-ink focus:ring-1 focus:ring-ink focus:outline-none"
+								class="block w-full border border-line px-3 py-2.5 font-serif text-sm text-ink placeholder-ink-3 focus:border-ink focus:ring-1 focus:ring-ink focus:outline-none"
 							/>
 						</div>
 
diff --git a/frontend/src/routes/login/+page.svelte b/frontend/src/routes/login/+page.svelte
index b265ba18..f1c0785f 100644
--- a/frontend/src/routes/login/+page.svelte
+++ b/frontend/src/routes/login/+page.svelte
@@ -59,7 +59,7 @@ const activeLocale = $derived(getLocale().toUpperCase());
 							id="username"
 							required
 							autocomplete="username"
-							class="block w-full border border-gray-300 px-3 py-2.5 font-serif text-sm text-ink placeholder-gray-400 focus:border-ink focus:ring-1 focus:ring-ink focus:outline-none"
+							class="block w-full border border-line px-3 py-2.5 font-serif text-sm text-ink placeholder-ink-3 focus:border-ink focus:ring-1 focus:ring-ink focus:outline-none"
 						/>
 					</div>
 
@@ -75,7 +75,7 @@ const activeLocale = $derived(getLocale().toUpperCase());
 							id="password"
 							required
 							autocomplete="current-password"
-							class="block w-full border border-gray-300 px-3 py-2.5 font-serif text-sm text-ink placeholder-gray-400 focus:border-ink focus:ring-1 focus:ring-ink focus:outline-none"
+							class="block w-full border border-line px-3 py-2.5 font-serif text-sm text-ink placeholder-ink-3 focus:border-ink focus:ring-1 focus:ring-ink focus:outline-none"
 						/>
 					</div>
 
diff --git a/frontend/src/routes/persons/+page.svelte b/frontend/src/routes/persons/+page.svelte
index 09eb6dd8..381c5772 100644
--- a/frontend/src/routes/persons/+page.svelte
+++ b/frontend/src/routes/persons/+page.svelte
@@ -61,7 +61,7 @@ function handleSearch() {
 					oninput={handleSearch}
 					onfocus={() => (qFocused = true)}
 					onblur={() => (qFocused = false)}
-					class="block w-full rounded-sm border border-gray-300 bg-surface py-2.5 pr-10 pl-4 font-sans text-sm text-ink placeholder-gray-400 shadow-sm focus:border-ink focus:ring-1 focus:ring-ink focus:outline-none"
+					class="block w-full rounded-sm border border-line bg-surface py-2.5 pr-10 pl-4 font-sans text-sm text-ink placeholder-ink-3 shadow-sm focus:border-ink focus:ring-1 focus:ring-ink focus:outline-none"
 				/>
 				<div
 					class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3 text-ink-3"
diff --git a/frontend/src/routes/persons/[id]/+page.svelte b/frontend/src/routes/persons/[id]/+page.svelte
index 7fdd4215..5566055c 100644
--- a/frontend/src/routes/persons/[id]/+page.svelte
+++ b/frontend/src/routes/persons/[id]/+page.svelte
@@ -142,7 +142,7 @@ $effect(() => {
 									type="text"
 									required
 									value={person.firstName}
-									class="block w-full rounded border border-gray-300 px-3 py-2 font-serif text-ink focus:border-ink focus:outline-none"
+									class="block w-full rounded border border-line px-3 py-2 font-serif text-ink focus:border-ink focus:outline-none"
 								/>
 							</div>
 							<div>
@@ -157,7 +157,7 @@ $effect(() => {
 									type="text"
 									required
 									value={person.lastName}
-									class="block w-full rounded border border-gray-300 px-3 py-2 font-serif text-ink focus:border-ink focus:outline-none"
+									class="block w-full rounded border border-line px-3 py-2 font-serif text-ink focus:border-ink focus:outline-none"
 								/>
 							</div>
 							<div class="md:col-span-2">
@@ -171,7 +171,7 @@ $effect(() => {
 									name="alias"
 									type="text"
 									value={person.alias ?? ''}
-									class="block w-full rounded border border-gray-300 px-3 py-2 font-serif text-ink focus:border-ink focus:outline-none"
+									class="block w-full rounded border border-line px-3 py-2 font-serif text-ink focus:border-ink focus:outline-none"
 								/>
 							</div>
 							<div>
@@ -188,7 +188,7 @@ $effect(() => {
 									max="2100"
 									placeholder={m.person_placeholder_year()}
 									value={person.birthYear ?? ''}
-									class="block w-full rounded border border-gray-300 px-3 py-2 font-serif text-ink focus:border-ink focus:outline-none"
+									class="block w-full rounded border border-line px-3 py-2 font-serif text-ink focus:border-ink focus:outline-none"
 								/>
 							</div>
 							<div>
@@ -205,7 +205,7 @@ $effect(() => {
 									max="2100"
 									placeholder={m.person_placeholder_year()}
 									value={person.deathYear ?? ''}
-									class="block w-full rounded border border-gray-300 px-3 py-2 font-serif text-ink focus:border-ink focus:outline-none"
+									class="block w-full rounded border border-line px-3 py-2 font-serif text-ink focus:border-ink focus:outline-none"
 								/>
 							</div>
 							<div class="md:col-span-2">
@@ -219,7 +219,7 @@ $effect(() => {
 									name="notes"
 									rows="4"
 									placeholder={m.person_placeholder_notes()}
-									class="block w-full resize-y rounded border border-gray-300 px-3 py-2 font-serif text-ink focus:border-ink focus:outline-none"
+									class="block w-full resize-y rounded border border-line px-3 py-2 font-serif text-ink focus:border-ink focus:outline-none"
 									>{person.notes ?? ''}</textarea
 								>
 							</div>
@@ -235,7 +235,7 @@ $effect(() => {
 							<button
 								type="button"
 								onclick={() => (editMode = false)}
-								class="rounded border border-gray-300 px-5 py-2 text-sm font-bold tracking-widest text-ink-2 uppercase transition-colors hover:bg-gray-50"
+								class="rounded border border-line px-5 py-2 text-sm font-bold tracking-widest text-ink-2 uppercase transition-colors hover:bg-muted"
 							>
 								{m.btn_cancel()}
 							</button>
@@ -263,7 +263,7 @@ $effect(() => {
 								{#if data.canWrite}
 									<button
 										onclick={() => (editMode = true)}
-										class="inline-flex items-center gap-1.5 rounded border border-gray-300 px-3 py-1.5 text-xs font-bold tracking-widest text-ink-2 uppercase transition-colors hover:border-primary hover:text-ink"
+										class="inline-flex items-center gap-1.5 rounded border border-line px-3 py-1.5 text-xs font-bold tracking-widest text-ink-2 uppercase transition-colors hover:border-primary hover:text-ink"
 									>
 										<img
 											src="/degruyter-icons/Simple/Small-16px/SVG/Action/Edit-Content-SM.svg"
@@ -379,7 +379,7 @@ $effect(() => {
 									<button
 										type="button"
 										onclick={() => (showMergeConfirm = false)}
-										class="rounded border border-gray-300 px-4 py-2 text-sm font-bold tracking-widest text-ink-2 uppercase transition-colors hover:bg-gray-50"
+										class="rounded border border-line px-4 py-2 text-sm font-bold tracking-widest text-ink-2 uppercase transition-colors hover:bg-muted"
 									>
 										{m.btn_cancel()}
 									</button>
diff --git a/frontend/src/routes/persons/new/+page.svelte b/frontend/src/routes/persons/new/+page.svelte
index 1ee4da29..75e10b01 100644
--- a/frontend/src/routes/persons/new/+page.svelte
+++ b/frontend/src/routes/persons/new/+page.svelte
@@ -40,7 +40,7 @@ let { form } = $props();
 
 			<div class="grid grid-cols-1 gap-5 md:grid-cols-2">
 				<div>
-					<label for="firstName" class="mb-1 block text-sm font-medium text-gray-700"
+					<label for="firstName" class="mb-1 block text-sm font-medium text-ink-2"
 						>{m.form_label_first_name()} *</label
 					>
 					<input
@@ -48,12 +48,12 @@ let { form } = $props();
 						name="firstName"
 						type="text"
 						required
-						class="block w-full rounded border border-gray-300 p-2 text-sm shadow-sm focus:border-ink focus:ring-ink"
+						class="block w-full rounded border border-line p-2 text-sm shadow-sm focus:border-ink focus:ring-ink"
 					/>
 				</div>
 
 				<div>
-					<label for="lastName" class="mb-1 block text-sm font-medium text-gray-700"
+					<label for="lastName" class="mb-1 block text-sm font-medium text-ink-2"
 						>{m.form_label_last_name()} *</label
 					>
 					<input
@@ -61,12 +61,12 @@ let { form } = $props();
 						name="lastName"
 						type="text"
 						required
-						class="block w-full rounded border border-gray-300 p-2 text-sm shadow-sm focus:border-ink focus:ring-ink"
+						class="block w-full rounded border border-line p-2 text-sm shadow-sm focus:border-ink focus:ring-ink"
 					/>
 				</div>
 
 				<div class="md:col-span-2">
-					<label for="alias" class="mb-1 block text-sm font-medium text-gray-700"
+					<label for="alias" class="mb-1 block text-sm font-medium text-ink-2"
 						>{m.form_label_alias()}</label
 					>
 					<input
@@ -74,7 +74,7 @@ let { form } = $props();
 						name="alias"
 						type="text"
 						placeholder={m.form_placeholder_alias()}
-						class="block w-full rounded border border-gray-300 p-2 text-sm shadow-sm focus:border-ink focus:ring-ink"
+						class="block w-full rounded border border-line p-2 text-sm shadow-sm focus:border-ink focus:ring-ink"
 					/>
 				</div>
 			</div>
diff --git a/frontend/src/routes/reset-password/+page.svelte b/frontend/src/routes/reset-password/+page.svelte
index c2fb324c..e3a6bc7e 100644
--- a/frontend/src/routes/reset-password/+page.svelte
+++ b/frontend/src/routes/reset-password/+page.svelte
@@ -56,7 +56,7 @@ let {
 								id="newPassword"
 								required
 								autocomplete="new-password"
-								class="block w-full border border-gray-300 px-3 py-2.5 font-serif text-sm text-ink placeholder-gray-400 focus:border-ink focus:ring-1 focus:ring-ink focus:outline-none"
+								class="block w-full border border-line px-3 py-2.5 font-serif text-sm text-ink placeholder-ink-3 focus:border-ink focus:ring-1 focus:ring-ink focus:outline-none"
 							/>
 						</div>
 
@@ -72,7 +72,7 @@ let {
 								id="confirmPassword"
 								required
 								autocomplete="new-password"
-								class="block w-full border border-gray-300 px-3 py-2.5 font-serif text-sm text-ink placeholder-gray-400 focus:border-ink focus:ring-1 focus:ring-ink focus:outline-none"
+								class="block w-full border border-line px-3 py-2.5 font-serif text-sm text-ink placeholder-ink-3 focus:border-ink focus:ring-1 focus:ring-ink focus:outline-none"
 							/>
 						</div>