diff --git a/apps/demo/src/demo-banner.tsx b/apps/demo/src/demo-banner.tsx
index 65baf0c2..8cab7c42 100644
--- a/apps/demo/src/demo-banner.tsx
+++ b/apps/demo/src/demo-banner.tsx
@@ -14,7 +14,7 @@ export function DemoBanner() {
           href="https://docs.snapotter.com/guide/getting-started"
           target="_blank"
           rel="noopener noreferrer"
-          className="font-semibold underline underline-offset-2 hover:text-primary-subtle"
+          className="font-semibold underline underline-offset-2 hover:no-underline"
         >
           Self-host SnapOtter
         </a>{" "}
@@ -23,7 +23,7 @@ export function DemoBanner() {
       <button
         type="button"
         onClick={() => setDismissed(true)}
-        className="ms-2 shrink-0 rounded px-1.5 py-0.5 text-xs font-medium hover:bg-primary-dark"
+        className="ms-2 shrink-0 rounded px-1.5 py-0.5 text-xs font-medium hover:bg-primary-light"
         aria-label="Dismiss banner"
       >
         Dismiss
diff --git a/apps/demo/src/main.tsx b/apps/demo/src/main.tsx
index d608b799..c8acc80b 100644
--- a/apps/demo/src/main.tsx
+++ b/apps/demo/src/main.tsx
@@ -19,8 +19,8 @@ function patchDemoErrors(root: Element) {
       if (!el.textContent?.includes(DEMO_MARKER)) return;
       if (el.dataset.demoPatch) return;
       el.dataset.demoPatch = "1";
-      el.classList.remove("text-red-500");
-      el.style.color = "var(--color-primary)";
+      el.classList.remove("text-red-500", "text-destructive-ink");
+      el.style.color = "var(--color-primary-ink)";
       el.style.fontSize = "13px";
       el.style.lineHeight = "1.5";
 
diff --git a/apps/docs/.vitepress/theme/github-stars.css b/apps/docs/.vitepress/theme/github-stars.css
index 68530298..a307e4c9 100644
--- a/apps/docs/.vitepress/theme/github-stars.css
+++ b/apps/docs/.vitepress/theme/github-stars.css
@@ -111,7 +111,7 @@
   font-size: 12px;
   font-weight: 600;
   line-height: 30px;
-  color: #db2777;
+  color: #cf236f;
   background: rgba(219, 39, 119, 0.08);
   border: 1px solid rgba(219, 39, 119, 0.3);
   border-radius: 6px;
diff --git a/apps/landing/src/components/CategoryCards.astro b/apps/landing/src/components/CategoryCards.astro
index 01c1459f..a87da70f 100644
--- a/apps/landing/src/components/CategoryCards.astro
+++ b/apps/landing/src/components/CategoryCards.astro
@@ -62,7 +62,7 @@ const MODALITIES = [
     label: t(locale, "home.categoryCards.file.label"),
     blurb: t(locale, "home.categoryCards.file.blurb"),
     icon: "Database",
-    color: "#5C8642",
+    color: "#51763A",
   },
 ];
 
@@ -77,21 +77,21 @@ const cards = MODALITIES.map((m) => {
     {cards.map((c) => (
       <a
         href={localizeHref(locale, `/tools/${c.section}/`)}
-        class="group flex flex-col rounded-2xl p-4 text-start text-white no-underline shadow-sm transition-all hover:-translate-y-1 hover:shadow-lg"
-        style={`background-color: ${c.color}`}
+        class="group flex flex-col rounded-2xl p-4 text-start no-underline shadow-sm transition-all hover:-translate-y-1 hover:shadow-lg"
+        style={`background-color: ${c.color}; color: ${c.id === "image" ? "#1A1814" : "#FFFFFF"}`}
       >
         <div class="flex items-center justify-between">
-          <span class="flex h-9 w-9 items-center justify-center rounded-lg bg-white/20">
+          <span class={`flex h-9 w-9 items-center justify-center rounded-lg ${c.id === "image" ? "bg-white/20" : "bg-black/20"}`}>
             <svg class="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" set:html={renderIcon(c.icon)} />
           </span>
-          <span class="rounded-full bg-white/20 px-2.5 py-0.5 text-xs font-semibold">{t(locale, "home.categoryCards.toolCount", { count: c.count })}</span>
+          <span class={`rounded-full px-2.5 py-0.5 text-xs font-semibold ${c.id === "image" ? "bg-white/20" : "bg-black/20"}`}>{t(locale, "home.categoryCards.toolCount", { count: c.count })}</span>
         </div>
 
         <div class="mt-4 flex items-center gap-1.5">
           <p class="font-display text-base font-bold leading-tight">{c.label}</p>
           <svg class="h-4 w-4 -translate-x-1 opacity-0 transition-all group-hover:translate-x-0 group-hover:opacity-100" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/></svg>
         </div>
-        <p class="mt-1 text-xs text-white/80">{c.blurb}</p>
+        <p class="mt-1 text-xs">{c.blurb}</p>
       </a>
     ))}
   </div>
diff --git a/apps/landing/src/components/EnterpriseSection.astro b/apps/landing/src/components/EnterpriseSection.astro
index c9af43c6..4cd33ed0 100644
--- a/apps/landing/src/components/EnterpriseSection.astro
+++ b/apps/landing/src/components/EnterpriseSection.astro
@@ -107,7 +107,7 @@ const frameworks = ["SOC 2", "ISO 27001", "HIPAA", "GDPR"];
                 set:html={feature.icon}
               />
             </div>
-            <span class="font-mono text-[10px] uppercase tracking-[0.15em] text-primary/60">{feature.tag}</span>
+            <span class="font-mono text-[10px] uppercase tracking-[0.15em] text-primary-light">{feature.tag}</span>
           </div>
           <h3 class="mt-4 font-display text-base font-bold text-dark-fg">{feature.title}</h3>
           <p class="mt-2 text-sm leading-relaxed text-dark-muted">{feature.description}</p>
diff --git a/apps/landing/src/components/FeatureHighlights.astro b/apps/landing/src/components/FeatureHighlights.astro
index 8d346ece..98c5e643 100644
--- a/apps/landing/src/components/FeatureHighlights.astro
+++ b/apps/landing/src/components/FeatureHighlights.astro
@@ -41,7 +41,7 @@ const aiPillColors = [
 
 <section class="px-6 py-20 md:py-28">
   <div class="reveal mx-auto mb-16 max-w-3xl text-center md:mb-20">
-    <span class="inline-flex items-center gap-2 rounded-full border border-primary/20 bg-primary/5 px-4 py-1.5 text-xs font-semibold uppercase tracking-[0.2em] text-primary-dark">
+    <span class="inline-flex items-center gap-2 rounded-full border border-primary/20 bg-primary/5 px-4 py-1.5 text-xs font-semibold uppercase tracking-[0.2em] text-primary-ink">
       <svg class="h-3.5 w-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="11" width="18" height="11" rx="2" ry="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg>
       {t(locale, "home.features.badge")}
     </span>
@@ -58,7 +58,7 @@ const aiPillColors = [
     <!-- Feature 1: Data Sovereignty — text left, visual right -->
     <div class="reveal grid grid-cols-1 md:grid-cols-2 gap-8 md:gap-16 items-center">
       <div class="md:order-1">
-        <span class="font-mono text-xs font-semibold uppercase tracking-[0.15em] text-primary">{t(locale, "home.features.f1.kicker")}</span>
+        <span class="font-mono text-xs font-semibold uppercase tracking-[0.15em] text-primary-ink">{t(locale, "home.features.f1.kicker")}</span>
         <h3 class="mt-3 font-display text-2xl font-bold tracking-tight sm:text-3xl">
           {t(locale, "home.features.f1.title")}
         </h3>
@@ -70,7 +70,7 @@ const aiPillColors = [
         <div class="rounded-xl border border-border bg-surface p-6 md:p-8">
           <!-- Outer infrastructure box -->
           <div class="rounded-lg border-2 border-dashed border-primary/30 p-5">
-            <span class="mb-4 block text-xs font-semibold uppercase tracking-wider text-primary">{t(locale, "home.features.f1.yourInfra")}</span>
+            <span class="mb-4 block text-xs font-semibold uppercase tracking-wider text-primary-ink">{t(locale, "home.features.f1.yourInfra")}</span>
             <div class="grid grid-cols-2 gap-4">
               <div class="flex flex-col items-center gap-2 rounded-lg bg-primary-subtle p-4">
                 <svg class="h-8 w-8 text-primary" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
@@ -78,14 +78,14 @@ const aiPillColors = [
                   <path d="M8 12h8M8 16h5" />
                   <circle cx="18" cy="7" r="1" fill="currentColor" />
                 </svg>
-                <span class="text-xs font-semibold text-primary">{t(locale, "home.features.f1.snapotter")}</span>
+                <span class="text-xs font-semibold text-primary-ink">{t(locale, "home.features.f1.snapotter")}</span>
               </div>
               <div class="flex flex-col items-center gap-2 rounded-lg bg-primary-subtle p-4">
                 <svg class="h-8 w-8 text-primary" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
                   <path d="M13 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z" />
                   <polyline points="13 2 13 9 20 9" />
                 </svg>
-                <span class="text-xs font-semibold text-primary">{t(locale, "home.features.f1.yourFiles")}</span>
+                <span class="text-xs font-semibold text-primary-ink">{t(locale, "home.features.f1.yourFiles")}</span>
               </div>
             </div>
             <!-- Internal arrows -->
@@ -113,7 +113,7 @@ const aiPillColors = [
     <!-- Feature 2: REST API — visual left, text right -->
     <div class="reveal grid grid-cols-1 md:grid-cols-2 gap-8 md:gap-16 items-center">
       <div class="md:order-2">
-        <span class="font-mono text-xs font-semibold uppercase tracking-[0.15em] text-primary">{t(locale, "home.features.f2.kicker")}</span>
+        <span class="font-mono text-xs font-semibold uppercase tracking-[0.15em] text-primary-ink">{t(locale, "home.features.f2.kicker")}</span>
         <h3 class="mt-3 font-display text-2xl font-bold tracking-tight sm:text-3xl">
           {t(locale, "home.features.f2.title")}
         </h3>
@@ -138,7 +138,7 @@ const aiPillColors = [
     <!-- Feature 3: AI Models — text left, visual right -->
     <div class="reveal grid grid-cols-1 md:grid-cols-2 gap-8 md:gap-16 items-center">
       <div class="md:order-1">
-        <span class="font-mono text-xs font-semibold uppercase tracking-[0.15em] text-primary">{t(locale, "home.features.f3.kicker")}</span>
+        <span class="font-mono text-xs font-semibold uppercase tracking-[0.15em] text-primary-ink">{t(locale, "home.features.f3.kicker")}</span>
         <h3 class="mt-3 font-display text-2xl font-bold tracking-tight sm:text-3xl">
           {t(locale, "home.features.f3.title")}
         </h3>
@@ -160,7 +160,7 @@ const aiPillColors = [
     <!-- Feature 4: Deployment — visual left, text right -->
     <div class="reveal grid grid-cols-1 md:grid-cols-2 gap-8 md:gap-16 items-center">
       <div class="md:order-2">
-        <span class="font-mono text-xs font-semibold uppercase tracking-[0.15em] text-primary">{t(locale, "home.features.f4.kicker")}</span>
+        <span class="font-mono text-xs font-semibold uppercase tracking-[0.15em] text-primary-ink">{t(locale, "home.features.f4.kicker")}</span>
         <h3 class="mt-3 font-display text-2xl font-bold tracking-tight sm:text-3xl">
           {t(locale, "home.features.f4.title")}
         </h3>
diff --git a/apps/landing/src/components/Hero.astro b/apps/landing/src/components/Hero.astro
index 1cb020ad..034da85b 100644
--- a/apps/landing/src/components/Hero.astro
+++ b/apps/landing/src/components/Hero.astro
@@ -52,7 +52,7 @@ const trustBadges = [
     </h1>
 
     <!-- Subtitle: capability breadth plus the infrastructure surfaces -->
-    <p class="animate-fade-up mx-auto mt-6 max-w-2xl text-lg text-white/90 md:text-xl" style="animation-delay: 0.15s; text-shadow: 0 1px 16px rgba(90, 20, 0, 0.22);">
+    <p class="animate-fade-up mx-auto mt-6 max-w-2xl text-lg text-white md:text-xl" style="animation-delay: 0.15s; text-shadow: 0 1px 16px rgba(90, 20, 0, 0.22);">
       {t(locale, "home.hero.subtitle")}
     </p>
 
diff --git a/apps/landing/src/components/HeroQuickstart.astro b/apps/landing/src/components/HeroQuickstart.astro
index 3e7a6cbd..3c59d62c 100644
--- a/apps/landing/src/components/HeroQuickstart.astro
+++ b/apps/landing/src/components/HeroQuickstart.astro
@@ -15,7 +15,7 @@ const DOCKER_CMD =
 ---
 
 <div class="animate-fade-up mt-6 text-center" style="animation-delay: 0.24s;">
-  <p class="mb-3 font-mono text-xs font-semibold uppercase tracking-[0.15em] text-primary">
+  <p class="mb-3 font-mono text-xs font-semibold uppercase tracking-[0.15em] text-primary-ink">
     {t(locale, "home.quickstart.label")}
   </p>
 
diff --git a/apps/landing/src/components/HeroSearch.astro b/apps/landing/src/components/HeroSearch.astro
index aa55dd96..e7647abe 100644
--- a/apps/landing/src/components/HeroSearch.astro
+++ b/apps/landing/src/components/HeroSearch.astro
@@ -15,12 +15,12 @@ const { locale = "en" } = Astro.props;
 // Tool name/description come from shared i18n (translated in all 21 langs).
 const toolStrings = await loadToolStrings(locale);
 
-const MODALITY_META: Record<string, { label: string; color: string }> = {
-  image: { label: "Image", color: "#E07832" },
-  video: { label: "Video", color: "#BE4A3C" },
-  audio: { label: "Audio", color: "#2C7A75" },
-  document: { label: "PDF", color: "#44568C" },
-  file: { label: "Files", color: "#5C8642" },
+const MODALITY_META: Record<string, { label: string; color: string; ink: string }> = {
+  image: { label: "Image", color: "#E07832", ink: "#A85518" },
+  video: { label: "Video", color: "#BE4A3C", ink: "#B54639" },
+  audio: { label: "Audio", color: "#2C7A75", ink: "#2B7672" },
+  document: { label: "PDF", color: "#44568C", ink: "#44568C" },
+  file: { label: "Files", color: "#5C8642", ink: "#51763A" },
 };
 
 function renderIcon(iconName: string): string {
@@ -89,7 +89,7 @@ function renderIcon(iconName: string): string {
               <span class="flex-1 text-sm font-medium text-foreground">{toolName}</span>
               <span
                 class="shrink-0 rounded-full px-2 py-0.5 text-[11px] font-semibold"
-                style={`background-color: ${mod?.color}1a; color: ${mod?.color}`}
+                style={`background-color: ${mod?.color}1a; color: ${mod?.ink}`}
               >
                 {mod?.label}
               </span>
diff --git a/apps/landing/src/components/MachineTranslationBanner.astro b/apps/landing/src/components/MachineTranslationBanner.astro
index 0b867cb0..cf25f738 100644
--- a/apps/landing/src/components/MachineTranslationBanner.astro
+++ b/apps/landing/src/components/MachineTranslationBanner.astro
@@ -19,7 +19,7 @@ const CONTRIBUTE_URL = "https://docs.snapotter.com/guide/translations";
     hidden
   >
     <span>{t(locale, "banner.machineTranslated")} </span>
-    <a href={CONTRIBUTE_URL} target="_blank" rel="noopener noreferrer" class="font-semibold text-primary-dark underline">
+    <a href={CONTRIBUTE_URL} target="_blank" rel="noopener noreferrer" class="font-semibold text-primary-ink underline">
       {t(locale, "banner.machineTranslated")}
     </a>
     <button
diff --git a/apps/landing/src/components/Pricing.astro b/apps/landing/src/components/Pricing.astro
index 94af5667..cc720260 100644
--- a/apps/landing/src/components/Pricing.astro
+++ b/apps/landing/src/components/Pricing.astro
@@ -56,7 +56,7 @@ const checkIcon =
       <div class="pointer-events-none absolute inset-x-0 top-0 h-32 bg-gradient-to-b from-primary/[0.04] to-transparent"></div>
 
       <div class="relative">
-        <span class="mb-4 inline-block rounded-full bg-primary/10 px-3 py-1 text-xs font-semibold text-primary">
+        <span class="mb-4 inline-block rounded-full bg-primary/10 px-3 py-1 text-xs font-semibold text-primary-ink">
           {t(locale, "home.pricing.oss.badge")}
         </span>
         <h3 class="font-display text-2xl font-bold">{t(locale, "home.pricing.oss.name")}</h3>
diff --git a/apps/landing/src/components/QuickstartBlock.astro b/apps/landing/src/components/QuickstartBlock.astro
index fcbff4de..c0ce02d3 100644
--- a/apps/landing/src/components/QuickstartBlock.astro
+++ b/apps/landing/src/components/QuickstartBlock.astro
@@ -25,7 +25,7 @@ const blocks = [
 <div class="not-prose space-y-5">
   {blocks.map((b) => (
     <div>
-      <p class="mb-2 font-mono text-xs font-semibold uppercase tracking-[0.15em] text-primary">
+      <p class="mb-2 font-mono text-xs font-semibold uppercase tracking-[0.15em] text-primary-ink">
         {b.label}
       </p>
       <button
diff --git a/apps/landing/src/components/ToolGrid.astro b/apps/landing/src/components/ToolGrid.astro
index 28a2a267..2ded55ac 100644
--- a/apps/landing/src/components/ToolGrid.astro
+++ b/apps/landing/src/components/ToolGrid.astro
@@ -254,12 +254,12 @@ const safeStringsJson = JSON.stringify(toolGridStrings).replace(/</g, "\\u003c")
                 class:list={[
                   "tool-command-modality rounded-md px-3 py-2 text-sm font-semibold transition-colors",
                   modality.id === "all"
-                    ? "bg-primary text-white shadow-sm"
+                    ? "bg-primary text-foreground shadow-sm"
                     : "text-muted hover:bg-background-alt hover:text-foreground",
                 ]}
               >
                 <span>{modality.label}</span>
-                <span class="ms-1 text-xs opacity-75">{modality.count}</span>
+                <span class="ms-1 text-xs">{modality.count}</span>
               </button>
             ))}
           </div>
@@ -273,7 +273,7 @@ const safeStringsJson = JSON.stringify(toolGridStrings).replace(/</g, "\\u003c")
             <button
               id="tool-command-reset-workflow"
               type="button"
-              class="hidden rounded-md px-2 py-1 text-xs font-semibold text-primary transition-colors hover:bg-primary-subtle"
+              class="hidden rounded-md px-2 py-1 text-xs font-semibold text-primary-ink transition-colors hover:bg-primary-subtle"
             >
               {t(locale, "home.toolGrid.reset")}
             </button>
@@ -304,7 +304,7 @@ const safeStringsJson = JSON.stringify(toolGridStrings).replace(/</g, "\\u003c")
                   </span>
                   <span class="min-w-0">
                     <span class="block text-sm font-semibold text-foreground">{workflow.label}</span>
-                    <span class="mt-0.5 block text-xs font-medium text-primary-dark">{workflow.metric}</span>
+                    <span class="mt-0.5 block text-xs font-medium text-primary-ink">{workflow.metric}</span>
                   </span>
                 </span>
                 <span class="mt-2 block text-xs leading-relaxed text-muted">{workflow.description}</span>
@@ -411,13 +411,13 @@ const safeStringsJson = JSON.stringify(toolGridStrings).replace(/</g, "\\u003c")
             target="_blank"
             rel="noopener noreferrer"
             id="tool-command-request"
-            class="font-semibold text-primary hover:underline"
+            class="font-semibold text-primary-ink hover:underline"
           >
             {t(locale, "home.toolGrid.requestTool")}
           </a>
           {t(locale, "home.toolGrid.requestSuffix")}
         </div>
-        <a href={localizeHref(locale, "/tools")} class="inline-flex items-center gap-2 text-sm font-semibold text-primary hover:underline">
+        <a href={localizeHref(locale, "/tools")} class="inline-flex items-center gap-2 text-sm font-semibold text-primary-ink hover:underline">
           {t(locale, "home.toolGrid.browseCatalog")}
           <svg
             class="h-4 w-4"
@@ -545,7 +545,7 @@ const safeStringsJson = JSON.stringify(toolGridStrings).replace(/</g, "\\u003c")
       const reason = formatReason(result.reason);
       const reasonHtml =
         showReason && reason
-          ? `<span class="mt-3 inline-flex w-fit rounded-md bg-primary-subtle px-2 py-1 text-[11px] font-semibold text-primary-dark">${escapeHtml(reason)}</span>`
+          ? `<span class="mt-3 inline-flex w-fit rounded-md bg-primary-subtle px-2 py-1 text-[11px] font-semibold text-primary-ink">${escapeHtml(reason)}</span>`
           : "";
 
       return `
@@ -580,7 +580,7 @@ const safeStringsJson = JSON.stringify(toolGridStrings).replace(/</g, "\\u003c")
         const isActive = button.dataset.modality === activeModality;
         button.setAttribute("aria-pressed", String(isActive));
         button.classList.toggle("bg-primary", isActive);
-        button.classList.toggle("text-white", isActive);
+        button.classList.toggle("text-foreground", isActive);
         button.classList.toggle("shadow-sm", isActive);
         button.classList.toggle("text-muted", !isActive);
         button.classList.toggle("hover:bg-background-alt", !isActive);
diff --git a/apps/landing/src/components/TrustSignals.astro b/apps/landing/src/components/TrustSignals.astro
index ec21d886..6d6fd5b4 100644
--- a/apps/landing/src/components/TrustSignals.astro
+++ b/apps/landing/src/components/TrustSignals.astro
@@ -43,7 +43,7 @@ const stats = [
       {stats.map((stat) => {
         const inner = (
           <div class="text-center">
-            <p class="font-display text-5xl font-extrabold tracking-tight text-primary md:text-6xl">
+            <p class="font-display text-5xl font-extrabold tracking-tight text-primary-ink md:text-6xl">
               {stat.value}
             </p>
             <p class="mt-2 text-sm font-semibold text-foreground">{stat.label}</p>
diff --git a/apps/landing/src/pages/404.astro b/apps/landing/src/pages/404.astro
index 954b8770..55441274 100644
--- a/apps/landing/src/pages/404.astro
+++ b/apps/landing/src/pages/404.astro
@@ -19,7 +19,7 @@ const locale = "en";
 
   <main id="main" class="flex min-h-[60vh] flex-col items-center justify-center px-6 pt-32 pb-20 text-center">
     <div class="reveal">
-      <p class="text-6xl font-bold text-primary">{t(locale, "notFound.code")}</p>
+      <p class="text-6xl font-bold text-primary-ink">{t(locale, "notFound.code")}</p>
       <h1 class="mt-4 font-display text-3xl font-bold tracking-tight md:text-4xl">
         {t(locale, "notFound.title")}
       </h1>
diff --git a/apps/landing/src/pages/[...locale]/alternatives/[slug].astro b/apps/landing/src/pages/[...locale]/alternatives/[slug].astro
index d13039db..3841b507 100644
--- a/apps/landing/src/pages/[...locale]/alternatives/[slug].astro
+++ b/apps/landing/src/pages/[...locale]/alternatives/[slug].astro
@@ -115,7 +115,7 @@ const allJsonLd = [breadcrumbJsonLd, ...(faqJsonLd ? [faqJsonLd] : [])];
     <!-- Hero -->
     <section class="mx-auto max-w-4xl px-6 pt-8 pb-12">
       <div class="reveal">
-        <span class="rounded-full border border-primary/20 bg-primary/5 px-3 py-1 text-xs font-semibold text-primary-dark">
+        <span class="rounded-full border border-primary/20 bg-primary/5 px-3 py-1 text-xs font-semibold text-primary-ink">
           {alt.category}
         </span>
         <h1 class="mt-5 font-display text-4xl font-bold tracking-tight md:text-5xl">
@@ -160,7 +160,7 @@ const allJsonLd = [breadcrumbJsonLd, ...(faqJsonLd ? [faqJsonLd] : [])];
               <thead class="border-b border-border bg-background-alt">
                 <tr>
                   <th class="px-5 py-4 text-start font-semibold">&nbsp;</th>
-                  <th class="px-5 py-4 text-start font-semibold text-primary-dark">SnapOtter</th>
+                  <th class="px-5 py-4 text-start font-semibold text-primary-ink">SnapOtter</th>
                   <th class="px-5 py-4 text-start font-semibold">{alt.competitor}</th>
                 </tr>
               </thead>
@@ -196,7 +196,7 @@ const allJsonLd = [breadcrumbJsonLd, ...(faqJsonLd ? [faqJsonLd] : [])];
                     href={source.url}
                     target="_blank"
                     rel="noopener noreferrer"
-                    class="text-primary transition-colors hover:text-primary-dark"
+                    class="text-primary-ink transition-colors hover:text-primary-ink-strong"
                   >
                     {source.label}
                   </a>
diff --git a/apps/landing/src/pages/[...locale]/alternatives/index.astro b/apps/landing/src/pages/[...locale]/alternatives/index.astro
index f84fee62..e82d7da0 100644
--- a/apps/landing/src/pages/[...locale]/alternatives/index.astro
+++ b/apps/landing/src/pages/[...locale]/alternatives/index.astro
@@ -91,7 +91,7 @@ const formatReviewDate = (date: string) =>
             href={localizeHref(locale, `/alternatives/${alt.slug}`)}
             class="group flex flex-col rounded-xl border border-border bg-surface p-6 transition-all hover:border-primary hover:shadow-md"
           >
-            <span class="text-xs font-semibold text-primary-dark">{alt.category}</span>
+            <span class="text-xs font-semibold text-primary-ink">{alt.category}</span>
             <span class="mt-2 font-display text-lg font-bold tracking-tight">
               {alt.competitorOpenSource
                 ? t(locale, "altIndex.card.versus", { competitor: alt.competitor })
@@ -103,7 +103,7 @@ const formatReviewDate = (date: string) =>
             <span class="mt-4 text-xs text-muted">
               {t(locale, "altIndex.card.reviewed", { date: formatReviewDate(alt.lastReviewed) })}
             </span>
-            <span class="mt-auto inline-flex items-center gap-1 pt-5 text-sm font-medium text-primary transition-all group-hover:gap-2">
+            <span class="mt-auto inline-flex items-center gap-1 pt-5 text-sm font-medium text-primary-ink transition-all group-hover:gap-2">
               {t(locale, "altIndex.card.compare")}
               <svg class="h-3.5 w-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                 <path d="M5 12h14" /><path d="m12 5 7 7-7 7" />
diff --git a/apps/landing/src/pages/[...locale]/contact.astro b/apps/landing/src/pages/[...locale]/contact.astro
index 33338e84..818a5e5f 100644
--- a/apps/landing/src/pages/[...locale]/contact.astro
+++ b/apps/landing/src/pages/[...locale]/contact.astro
@@ -90,7 +90,7 @@ const subjects = [
         </div>
 
         <p class="mt-10 text-sm text-muted">
-          {t(locale, "contact.emailPrefix")} <a href="mailto:contact@snapotter.com" class="font-medium text-primary hover:underline">contact@snapotter.com</a>
+          {t(locale, "contact.emailPrefix")} <a href="mailto:contact@snapotter.com" class="font-medium text-primary-ink hover:underline">contact@snapotter.com</a>
         </p>
       </div>
 
diff --git a/apps/landing/src/pages/[...locale]/enterprise.astro b/apps/landing/src/pages/[...locale]/enterprise.astro
index 0dd0f824..5489c937 100644
--- a/apps/landing/src/pages/[...locale]/enterprise.astro
+++ b/apps/landing/src/pages/[...locale]/enterprise.astro
@@ -96,10 +96,10 @@ const permissionMatrix = {
 };
 
 const storageProviders = [
-  { name: t(locale, "enterprise.storage.provider.awsS3"), color: "text-[#FF9900]" },
+  { name: t(locale, "enterprise.storage.provider.awsS3"), color: "text-[#996306]" },
   { name: t(locale, "enterprise.storage.provider.minio"), color: "text-[#C72C48]" },
-  { name: t(locale, "enterprise.storage.provider.r2"), color: "text-[#F6821F]" },
-  { name: t(locale, "enterprise.storage.provider.local"), color: "text-primary" },
+  { name: t(locale, "enterprise.storage.provider.r2"), color: "text-[#B45309]" },
+  { name: t(locale, "enterprise.storage.provider.local"), color: "text-primary-ink" },
 ];
 
 const deploymentTargets = [
@@ -273,10 +273,10 @@ const xSvg =
           </div>
           <div class="md:order-2">
             <div class="rounded-xl border border-border bg-surface p-6">
-              <span class="mb-4 block text-xs font-semibold uppercase tracking-wider text-primary">{t(locale, "enterprise.identity.supportedProviders")}</span>
+              <span class="mb-4 block text-xs font-semibold uppercase tracking-wider text-primary-ink">{t(locale, "enterprise.identity.supportedProviders")}</span>
               <div class="flex flex-wrap gap-2.5">
                 {identityProviders.map((provider) => (
-                  <span class="inline-flex items-center gap-1.5 rounded-full border border-primary/20 bg-primary-subtle px-3.5 py-1.5 text-sm font-medium text-primary-dark">
+                  <span class="inline-flex items-center gap-1.5 rounded-full border border-primary/20 bg-primary-subtle px-3.5 py-1.5 text-sm font-medium text-primary-ink">
                     <svg class="h-3.5 w-3.5 text-primary" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
                     {provider}
                   </span>
@@ -286,7 +286,7 @@ const xSvg =
                 <svg class="h-4 w-4 shrink-0 text-primary" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                   <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/>
                 </svg>
-                <span class="text-xs text-primary-dark">{t(locale, "enterprise.identity.mfaEnforced")}</span>
+                <span class="text-xs text-primary-ink">{t(locale, "enterprise.identity.mfaEnforced")}</span>
               </div>
             </div>
           </div>
@@ -304,7 +304,7 @@ const xSvg =
           </div>
           <div class="md:order-1">
             <div class="rounded-xl border border-border bg-surface p-6 overflow-x-auto">
-              <span class="mb-4 block text-xs font-semibold uppercase tracking-wider text-primary">{t(locale, "enterprise.permissions.matrix")}</span>
+              <span class="mb-4 block text-xs font-semibold uppercase tracking-wider text-primary-ink">{t(locale, "enterprise.permissions.matrix")}</span>
               <table class="w-full text-xs">
                 <thead>
                   <tr>
@@ -407,7 +407,7 @@ const xSvg =
               <th class="pb-4 text-start text-sm font-semibold text-muted"></th>
               <th class="pb-4 text-start text-sm font-semibold text-muted">{t(locale, "enterprise.comparison.cloudHeader")}</th>
               <th class="pb-4 text-start text-sm font-semibold">
-                <span class="text-primary">SnapOtter</span> <span class="text-muted font-normal">{t(locale, "enterprise.comparison.selfHostedHeader")}</span>
+                <span class="text-primary-ink">SnapOtter</span> <span class="text-muted font-normal">{t(locale, "enterprise.comparison.selfHostedHeader")}</span>
               </th>
             </tr>
           </thead>
diff --git a/apps/landing/src/pages/[...locale]/privacy.astro b/apps/landing/src/pages/[...locale]/privacy.astro
index 8bbd89b0..84829c85 100644
--- a/apps/landing/src/pages/[...locale]/privacy.astro
+++ b/apps/landing/src/pages/[...locale]/privacy.astro
@@ -131,7 +131,7 @@ const breadcrumbJsonLd = {
             {t(locale, "privacy.contact.pre")}
             <a
               href="mailto:contact@snapotter.com"
-              class="text-primary font-medium hover:underline underline-offset-4"
+              class="text-primary-ink font-medium hover:underline underline-offset-4"
             >
               contact@snapotter.com
             </a>.
diff --git a/apps/landing/src/pages/[...locale]/terms.astro b/apps/landing/src/pages/[...locale]/terms.astro
index 5632c8e5..0ba66fba 100644
--- a/apps/landing/src/pages/[...locale]/terms.astro
+++ b/apps/landing/src/pages/[...locale]/terms.astro
@@ -80,7 +80,7 @@ const breadcrumbJsonLd = {
               {t(locale, "terms.license.item4.pre")}
               <a
                 href="mailto:contact@snapotter.com"
-                class="text-primary font-medium hover:underline underline-offset-4"
+                class="text-primary-ink font-medium hover:underline underline-offset-4"
               >
                 contact@snapotter.com
               </a>
@@ -134,7 +134,7 @@ const breadcrumbJsonLd = {
             {t(locale, "terms.contact.pre")}
             <a
               href="mailto:contact@snapotter.com"
-              class="text-primary font-medium hover:underline underline-offset-4"
+              class="text-primary-ink font-medium hover:underline underline-offset-4"
             >
               contact@snapotter.com
             </a>.
diff --git a/apps/landing/src/pages/[...locale]/tools/[section]/index.astro b/apps/landing/src/pages/[...locale]/tools/[section]/index.astro
index 9f0e08c3..887c0067 100644
--- a/apps/landing/src/pages/[...locale]/tools/[section]/index.astro
+++ b/apps/landing/src/pages/[...locale]/tools/[section]/index.astro
@@ -104,7 +104,7 @@ const toolDesc = (id: string, fallback: string) => toolStrings[id]?.description
                   <div class="min-w-0">
                     <span class="text-sm font-bold">{toolName(tool.id, tool.name)}</span>
                     <p class="mt-1 line-clamp-2 text-xs leading-relaxed text-muted">{toolDesc(tool.id, tool.description)}</p>
-                    <span class="mt-2 inline-flex items-center gap-1 text-xs font-medium text-primary transition-all group-hover:gap-2">
+                    <span class="mt-2 inline-flex items-center gap-1 text-xs font-medium text-primary-ink transition-all group-hover:gap-2">
                       {t(locale, "common.learnMore")}
                       <svg class="h-3 w-3" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                         <path d="M5 12h14" /><path d="m12 5 7 7-7 7" />
diff --git a/apps/landing/src/pages/[...locale]/tools/index.astro b/apps/landing/src/pages/[...locale]/tools/index.astro
index 29143411..2eb11f65 100644
--- a/apps/landing/src/pages/[...locale]/tools/index.astro
+++ b/apps/landing/src/pages/[...locale]/tools/index.astro
@@ -173,7 +173,7 @@ const collectionJsonLd = {
               data-modality={m.id}
               class:list={[
                 "tools-mod-btn shrink-0 rounded-full px-4 py-1.5 text-sm font-medium transition-colors",
-                m.id === "all" ? "bg-primary text-white" : "border border-border bg-surface hover:bg-background-alt",
+                m.id === "all" ? "bg-primary text-foreground" : "border border-border bg-surface hover:bg-background-alt",
               ]}
             >
               {m.label} ({m.count})
@@ -263,7 +263,7 @@ const collectionJsonLd = {
                     <p class="mt-1 line-clamp-2 text-xs leading-relaxed text-muted">
                       {toolDesc(tool.id, tool.description)}
                     </p>
-                    <span class="mt-2 inline-flex items-center gap-1 text-xs font-medium text-primary transition-all group-hover:gap-2">
+                    <span class="mt-2 inline-flex items-center gap-1 text-xs font-medium text-primary-ink transition-all group-hover:gap-2">
                       {t(locale, "common.learnMore")}
                       <svg class="h-3 w-3" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                         <path d="M5 12h14" /><path d="m12 5 7 7-7 7" />
@@ -341,7 +341,7 @@ const collectionJsonLd = {
           const on = b.getAttribute("data-modality") === activeMod;
           b.className =
             "tools-mod-btn shrink-0 rounded-full px-4 py-1.5 text-sm font-medium transition-colors " +
-            (on ? "bg-primary text-white" : "border border-border bg-surface hover:bg-background-alt");
+            (on ? "bg-primary text-foreground" : "border border-border bg-surface hover:bg-background-alt");
         }
       };
 
diff --git a/apps/landing/src/pages/self-hosted/[slug].astro b/apps/landing/src/pages/self-hosted/[slug].astro
index 576dca17..75387ffb 100644
--- a/apps/landing/src/pages/self-hosted/[slug].astro
+++ b/apps/landing/src/pages/self-hosted/[slug].astro
@@ -81,7 +81,7 @@ const allJsonLd = [breadcrumbJsonLd, ...(faqJsonLd ? [faqJsonLd] : [])];
         <h1 class="font-display text-4xl font-bold tracking-tight md:text-5xl">{uc.h1}</h1>
         <p class="mt-4 text-lg leading-relaxed text-muted md:text-xl">{uc.intro}</p>
         {uc.isAiBundle && (
-          <p class="mt-4 inline-flex rounded-full border border-primary/20 bg-primary/5 px-3 py-1 text-xs font-semibold text-primary-dark">
+          <p class="mt-4 inline-flex rounded-full border border-primary/20 bg-primary/5 px-3 py-1 text-xs font-semibold text-primary-ink">
             Local AI, one-time bundle install
           </p>
         )}
@@ -119,12 +119,12 @@ const allJsonLd = [breadcrumbJsonLd, ...(faqJsonLd ? [faqJsonLd] : [])];
           </div>
           <div class="mt-6 flex flex-wrap gap-x-6 gap-y-2 text-sm">
             {uc.toolRoutes.map((route, i) => (
-              <a href={route} class="text-primary transition-colors hover:text-primary-dark">
+              <a href={route} class="text-primary-ink transition-colors hover:text-primary-ink-strong">
                 Open the {uc.toolIds[i]} tool
               </a>
             ))}
             {alt && (
-              <a href={`/alternatives/${alt.slug}`} class="text-primary transition-colors hover:text-primary-dark">
+              <a href={`/alternatives/${alt.slug}`} class="text-primary-ink transition-colors hover:text-primary-ink-strong">
                 Compare with {alt.competitor}
               </a>
             )}
@@ -135,7 +135,7 @@ const allJsonLd = [breadcrumbJsonLd, ...(faqJsonLd ? [faqJsonLd] : [])];
             {uc.sources.map((s, i) => (
               <Fragment>
                 {i > 0 && ", "}
-                <a href={s.url} target="_blank" rel="noopener noreferrer" class="text-primary hover:text-primary-dark">{s.label}</a>
+                <a href={s.url} target="_blank" rel="noopener noreferrer" class="text-primary-ink hover:text-primary-ink-strong">{s.label}</a>
               </Fragment>
             ))}
           </p>
diff --git a/apps/landing/src/pages/self-hosted/index.astro b/apps/landing/src/pages/self-hosted/index.astro
index 8a0ef66a..586aa955 100644
--- a/apps/landing/src/pages/self-hosted/index.astro
+++ b/apps/landing/src/pages/self-hosted/index.astro
@@ -32,7 +32,7 @@ const description =
             <a href={`/self-hosted/${uc.slug}`} class="group flex flex-col rounded-xl border border-border bg-surface p-6 transition-all hover:border-primary hover:shadow-md">
               <span class="font-display text-lg font-bold">{uc.h1}</span>
               <span class="mt-2 text-sm text-muted">{uc.intro}</span>
-              <span class="mt-4 text-xs font-semibold text-primary">Read more →</span>
+              <span class="mt-4 text-xs font-semibold text-primary-ink">Read more →</span>
             </a>
           ))}
         </div>
diff --git a/apps/landing/src/pages/tools/[section]/[tool].astro b/apps/landing/src/pages/tools/[section]/[tool].astro
index 8f9c6527..e1537710 100644
--- a/apps/landing/src/pages/tools/[section]/[tool].astro
+++ b/apps/landing/src/pages/tools/[section]/[tool].astro
@@ -340,7 +340,7 @@ const allJsonLd = [breadcrumbJsonLd, softwareJsonLd];
                     />
                     <span class="mt-3 text-sm font-bold">{t.name}</span>
                     <p class="mt-1.5 text-xs leading-relaxed text-muted">{t.description}</p>
-                    <span class="mt-auto inline-flex items-center gap-1 pt-4 text-xs font-medium text-primary transition-all group-hover:gap-2">
+                    <span class="mt-auto inline-flex items-center gap-1 pt-4 text-xs font-medium text-primary-ink transition-all group-hover:gap-2">
                       Learn more
                       <svg class="h-3 w-3" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                         <path d="M5 12h14" /><path d="m12 5 7 7-7 7" />
diff --git a/apps/landing/src/styles/globals.css b/apps/landing/src/styles/globals.css
index a8eeb609..0de88808 100644
--- a/apps/landing/src/styles/globals.css
+++ b/apps/landing/src/styles/globals.css
@@ -35,6 +35,8 @@ html {
   --color-primary-light: #F09550;
   --color-primary-dark: #C06520;
   --color-primary-subtle: #FFF5ED;
+  --color-primary-ink: #A85518;
+  --color-primary-ink-strong: #8F4712;
 
   /* Neutrals -- Warm Cream & Stone (sandy riverbank) */
   --color-background: #FAFAF7;
@@ -59,8 +61,8 @@ html {
   --color-terminal-green: #4ADE80;
 
   /* Semantic */
-  --color-success: #2D9D78;
-  --color-danger: #D44C47;
+  --color-success: #1E7B5C;
+  --color-danger: #BE3A35;
 
   /* Fonts */
   --font-display: "Bricolage Grotesque", system-ui, sans-serif;
@@ -281,7 +283,7 @@ code, pre, kbd {
 /* ─── BUTTONS ─── */
 .btn-primary {
   background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-light) 100%);
-  color: white;
+  color: var(--color-foreground);
   transition: box-shadow 0.2s, transform 0.1s;
 }
 .btn-primary:hover {
@@ -318,7 +320,7 @@ code, pre, kbd {
 .code-block .code-string { color: #C3E88D; }
 .code-block .code-flag { color: #82AAFF; }
 .code-block .code-url { color: #89DDFF; }
-.code-block .code-comment { color: #546E7A; }
+.code-block .code-comment { color: #7E99A8; }
 
 /* ─── SECTION DIVIDER ─── */
 .section-divider {
@@ -343,7 +345,7 @@ code, pre, kbd {
   z-index: 100;
   padding: 0.5rem 1rem;
   background: var(--color-primary);
-  color: white;
+  color: var(--color-foreground);
   border-radius: 0 0 0.5rem 0.5rem;
   transition: top 0.2s;
 }
diff --git a/apps/web/src/components/automate/template-card.tsx b/apps/web/src/components/automate/template-card.tsx
index 877aff8e..c4f31f5e 100644
--- a/apps/web/src/components/automate/template-card.tsx
+++ b/apps/web/src/components/automate/template-card.tsx
@@ -32,7 +32,7 @@ export function TemplateCard({ template, onUse }: TemplateCardProps) {
         className="text-start"
         data-testid={`template-use-${template.id}`}
       >
-        <span className="text-xs font-medium text-foreground hover:text-primary">{name}</span>
+        <span className="text-xs font-medium text-foreground hover:text-primary-ink">{name}</span>
         {description ? (
           <span className="block text-[11px] text-muted-foreground mt-0.5">{description}</span>
         ) : null}
diff --git a/apps/web/src/components/common/before-after-slider.tsx b/apps/web/src/components/common/before-after-slider.tsx
index 95974730..1516745b 100644
--- a/apps/web/src/components/common/before-after-slider.tsx
+++ b/apps/web/src/components/common/before-after-slider.tsx
@@ -302,7 +302,7 @@ export function BeforeAfterSlider({
           <span className="px-2 py-1 rounded bg-muted text-muted-foreground">
             Original: {formatSize(beforeSize)}
           </span>
-          <span className="px-2 py-1 rounded bg-primary/10 text-primary font-medium">
+          <span className="px-2 py-1 rounded bg-primary/10 text-primary-ink font-medium">
             Processed: {formatSize(afterSize)}
             {savingsPercent !== null && Number(savingsPercent) > 0 && (
               <span className="ms-1">({savingsPercent}% smaller)</span>
diff --git a/apps/web/src/components/common/collapsible-section.tsx b/apps/web/src/components/common/collapsible-section.tsx
index d538dd55..e08853bd 100644
--- a/apps/web/src/components/common/collapsible-section.tsx
+++ b/apps/web/src/components/common/collapsible-section.tsx
@@ -29,7 +29,9 @@ export function CollapsibleSection({
           <ChevronRight className="h-3 w-3 shrink-0" />
         )}
         <span className="flex-1 text-start">{title}</span>
-        {warning && <AlertTriangle className="h-3 w-3 text-amber-500 shrink-0" />}
+        {warning && (
+          <AlertTriangle className="h-3 w-3 text-amber-700 dark:text-amber-400 shrink-0" />
+        )}
         {badge && (
           <span className="px-1.5 py-0.5 rounded bg-muted text-muted-foreground text-[10px]">
             {badge}
diff --git a/apps/web/src/components/common/dropzone.tsx b/apps/web/src/components/common/dropzone.tsx
index 1c451531..20a918f1 100644
--- a/apps/web/src/components/common/dropzone.tsx
+++ b/apps/web/src/components/common/dropzone.tsx
@@ -334,7 +334,7 @@ export function Dropzone({
                 e.stopPropagation();
                 setShowBulkModal(true);
               }}
-              className="text-xs text-primary hover:text-primary/80"
+              className="text-xs text-primary-ink hover:text-primary-ink-strong"
             >
               {t.dropzone.importMultipleUrls}
             </button>
@@ -343,7 +343,7 @@ export function Dropzone({
 
         {hasMultipleFiles && (
           <div className="flex flex-col items-center gap-2 mt-1">
-            <span className="inline-flex items-center gap-1.5 px-3 py-1 rounded-full bg-primary/10 text-primary text-xs font-medium">
+            <span className="inline-flex items-center gap-1.5 px-3 py-1 rounded-full bg-primary/10 text-primary-ink text-xs font-medium">
               <FileImage className="h-3.5 w-3.5" />
               {currentFiles.length} files selected
             </span>
diff --git a/apps/web/src/components/common/image-viewer.tsx b/apps/web/src/components/common/image-viewer.tsx
index 02e0fe52..648cf06c 100644
--- a/apps/web/src/components/common/image-viewer.tsx
+++ b/apps/web/src/components/common/image-viewer.tsx
@@ -224,7 +224,7 @@ export function ImageViewer({
         <button
           type="button"
           onClick={fitToContainer}
-          className={`px-2 py-1 rounded text-xs ${fitMode === "fit" ? "bg-primary/10 text-primary" : "text-muted-foreground hover:text-foreground hover:bg-muted"}`}
+          className={`px-2 py-1 rounded text-xs ${fitMode === "fit" ? "bg-primary/10 text-primary-ink" : "text-muted-foreground hover:text-foreground hover:bg-muted"}`}
           title="Fit to view"
           aria-label={t.a11y.fitToView}
         >
@@ -233,7 +233,7 @@ export function ImageViewer({
         <button
           type="button"
           onClick={actualSize}
-          className={`px-2 py-1 rounded text-xs ${fitMode === "actual" && zoom === 100 ? "bg-primary/10 text-primary" : "text-muted-foreground hover:text-foreground hover:bg-muted"}`}
+          className={`px-2 py-1 rounded text-xs ${fitMode === "actual" && zoom === 100 ? "bg-primary/10 text-primary-ink" : "text-muted-foreground hover:text-foreground hover:bg-muted"}`}
           title="Actual size (100%)"
           aria-label={t.a11y.actualSize}
         >
diff --git a/apps/web/src/components/common/metadata-grid.tsx b/apps/web/src/components/common/metadata-grid.tsx
index bb6751be..0ecdfc00 100644
--- a/apps/web/src/components/common/metadata-grid.tsx
+++ b/apps/web/src/components/common/metadata-grid.tsx
@@ -33,13 +33,13 @@ export function MetadataGrid({
         return (
           <div key={k} className="contents">
             <div
-              className={`text-[10px] text-muted-foreground truncate ${isRemoved ? "line-through opacity-50" : ""}`}
+              className={`text-[10px] text-muted-foreground truncate ${isRemoved ? "line-through" : ""}`}
               title={k}
             >
               {labelMap?.[k] ?? k}
             </div>
             <div
-              className={`text-[10px] text-foreground font-mono truncate ${isRemoved ? "line-through opacity-50" : ""}`}
+              className={`text-[10px] text-foreground font-mono truncate ${isRemoved ? "line-through" : ""}`}
               title={formatExifValue(k, v)}
             >
               {formatExifValue(k, v)}
@@ -50,7 +50,7 @@ export function MetadataGrid({
                   <button
                     type="button"
                     onClick={() => onRemove(k)}
-                    className={`p-0.5 rounded hover:bg-muted/50 transition-colors ${isRemoved ? "text-red-500" : "text-muted-foreground hover:text-red-500"}`}
+                    className={`p-0.5 rounded hover:bg-muted/50 transition-colors ${isRemoved ? "text-destructive-ink" : "text-muted-foreground hover:text-destructive-ink"}`}
                     title={
                       isRemoved ? `Restore ${labelMap?.[k] ?? k}` : `Remove ${labelMap?.[k] ?? k}`
                     }
diff --git a/apps/web/src/components/common/multi-image-viewer.tsx b/apps/web/src/components/common/multi-image-viewer.tsx
index 886fae61..36d8f550 100644
--- a/apps/web/src/components/common/multi-image-viewer.tsx
+++ b/apps/web/src/components/common/multi-image-viewer.tsx
@@ -95,7 +95,7 @@ export function MultiImageViewer() {
           !currentEntry.blobUrl ? (
             <div className="flex flex-col items-center justify-center h-full gap-3 text-center p-8">
               <div className="w-12 h-12 rounded-full bg-green-100 dark:bg-green-900/30 flex items-center justify-center">
-                <CheckCircle2 className="h-6 w-6 text-green-600 dark:text-green-400" />
+                <CheckCircle2 className="h-6 w-6 text-success-ink" />
               </div>
               <p className="text-sm font-medium">{processedFilename}</p>
               <p className="text-xs text-muted-foreground">
diff --git a/apps/web/src/components/common/progress-card.tsx b/apps/web/src/components/common/progress-card.tsx
index ee2675bf..ff7a4308 100644
--- a/apps/web/src/components/common/progress-card.tsx
+++ b/apps/web/src/components/common/progress-card.tsx
@@ -43,7 +43,7 @@ export function ProgressCard({ active, phase, label, stage, percent, elapsed }:
           <div className="text-sm font-medium text-foreground truncate">{label}</div>
           <div className="text-[11px] text-muted-foreground truncate">{sublabel}</div>
         </div>
-        <span className="text-sm font-semibold text-primary font-mono tabular-nums">
+        <span className="text-sm font-semibold text-primary-ink font-mono tabular-nums">
           {Math.round(percent)}%
         </span>
       </div>
diff --git a/apps/web/src/components/common/review-panel.tsx b/apps/web/src/components/common/review-panel.tsx
index 52e98443..cee1b988 100644
--- a/apps/web/src/components/common/review-panel.tsx
+++ b/apps/web/src/components/common/review-panel.tsx
@@ -123,14 +123,14 @@ export function ReviewPanel({
 
       {/* Success indicator */}
       <div className="flex items-center gap-2">
-        <CheckCircle2 className="h-4 w-4 text-emerald-600 shrink-0" />
+        <CheckCircle2 className="h-4 w-4 text-success-ink shrink-0" />
         <span className="text-sm font-medium text-foreground">{t.toolPage.conversionComplete}</span>
       </div>
 
       {/* Batch partial failure summary */}
       {hasBatchStats && failedCount > 0 && (
         <div className="flex items-start gap-2 rounded-lg bg-amber-50 dark:bg-amber-950/30 p-2.5 text-xs">
-          <AlertCircle className="h-3.5 w-3.5 text-amber-600 dark:text-amber-400 shrink-0 mt-0.5" />
+          <AlertCircle className="h-3.5 w-3.5 text-amber-700 dark:text-amber-400 shrink-0 mt-0.5" />
           <span className="text-amber-800 dark:text-amber-300">
             {format(t.toolPage.batchPartialSuccess, {
               success: successCount,
@@ -157,7 +157,7 @@ export function ReviewPanel({
           {sizeDelta > 0 && (
             <div className="flex justify-between">
               <span className="text-muted-foreground">{t.toolPage.saved}</span>
-              <span className="tabular-nums font-medium text-emerald-600">{sizeDelta}%</span>
+              <span className="tabular-nums font-medium text-success-ink">{sizeDelta}%</span>
             </div>
           )}
         </div>
@@ -173,7 +173,7 @@ export function ReviewPanel({
           <button
             type="button"
             onClick={handleDownload}
-            className="w-full text-center text-xs text-primary hover:text-primary/80 underline underline-offset-2"
+            className="w-full text-center text-xs text-primary-ink hover:text-primary-ink-strong underline underline-offset-2"
           >
             {t.toolPage.downloadAsFile}
           </button>
@@ -200,7 +200,7 @@ export function ReviewPanel({
       {/* Result already auto-saved to the library: show where it went
           instead of the manual save link (avoids duplicate saves). */}
       {!isDataOutput && savedLibraryFileId && (
-        <div className="flex items-center justify-center gap-1.5 text-xs text-emerald-600 dark:text-emerald-400">
+        <div className="flex items-center justify-center gap-1.5 text-xs text-success-ink">
           <CheckCircle2 className="h-3 w-3" />
           {t.toolPage.savedToFiles}
           <Link to="/files" className="underline underline-offset-2 hover:text-foreground">
@@ -219,7 +219,7 @@ export function ReviewPanel({
             className={cn(
               "text-xs flex items-center gap-1.5 transition-colors",
               saveStatus === "saved"
-                ? "text-emerald-600 dark:text-emerald-400"
+                ? "text-success-ink"
                 : "text-muted-foreground hover:text-foreground disabled:opacity-50",
             )}
           >
@@ -271,7 +271,7 @@ export function ReviewPanel({
       <div className="flex justify-center">
         <Link
           to="/"
-          className="text-xs text-muted-foreground/60 hover:text-muted-foreground flex items-center gap-1"
+          className="text-xs text-muted-foreground hover:text-foreground flex items-center gap-1"
         >
           <ArrowLeft className="h-3 w-3" />
           {t.toolPage.backToTools}
diff --git a/apps/web/src/components/common/side-by-side-comparison.tsx b/apps/web/src/components/common/side-by-side-comparison.tsx
index bf0e18dc..c3e94f9f 100644
--- a/apps/web/src/components/common/side-by-side-comparison.tsx
+++ b/apps/web/src/components/common/side-by-side-comparison.tsx
@@ -92,7 +92,7 @@ export function SideBySideComparison({
       {/* Size savings */}
       {savingsPercent !== null && (
         <p
-          className={`text-sm font-medium ${Number(savingsPercent) > 0 ? "text-green-600 dark:text-green-400" : "text-red-500"}`}
+          className={`text-sm font-medium ${Number(savingsPercent) > 0 ? "text-success-ink" : "text-destructive-ink"}`}
         >
           {Number(savingsPercent) > 0
             ? format(t.toolSettings["optimize-for-web"].smaller, { percent: savingsPercent })
diff --git a/apps/web/src/components/common/tool-card.tsx b/apps/web/src/components/common/tool-card.tsx
index 5dfa0436..49fe5ee6 100644
--- a/apps/web/src/components/common/tool-card.tsx
+++ b/apps/web/src/components/common/tool-card.tsx
@@ -59,6 +59,16 @@ const SECTION_COLOR_MAP: Record<string, string> = Object.fromEntries(
   SECTIONS.map((s) => [s.id, s.color]),
 );
 
+// Darkened per-section text colors: the vivid section colors sit below the
+// WCAG AA 4.5:1 floor as small text on the 12.5% tint chips (issue #557).
+const SECTION_INK_MAP: Record<string, string> = {
+  image: "#0B61ED",
+  video: "#D31212",
+  audio: "#0B7C57",
+  pdf: "#7942F5",
+  files: "#996306",
+};
+
 export function ToolCard({
   tool,
   variant = "compact",
@@ -95,7 +105,7 @@ export function ToolCard({
       className="text-[10px] px-1.5 py-0.5 rounded-full font-medium shrink-0"
       style={{
         backgroundColor: `${sectionColor}20`,
-        color: sectionColor,
+        color: SECTION_INK_MAP[section] ?? "#3D3832",
       }}
     >
       {SECTIONS.find((s) => s.id === section)?.name ?? section}
@@ -139,7 +149,7 @@ export function ToolCard({
             </span>
             {sectionBadge}
             {tool.experimental && (
-              <span className="text-[10px] px-1.5 py-0.5 rounded bg-orange-100 text-orange-600 font-medium">
+              <span className="text-[10px] px-1.5 py-0.5 rounded bg-primary-subtle text-primary-ink font-medium">
                 {t.common.experimental}
               </span>
             )}
@@ -178,7 +188,7 @@ export function ToolCard({
       </span>
       {sectionBadge}
       {tool.experimental && (
-        <span className="text-[10px] px-1.5 py-0.5 rounded bg-orange-100 text-orange-600 font-medium">
+        <span className="text-[10px] px-1.5 py-0.5 rounded bg-primary-subtle text-primary-ink font-medium">
           {t.common.experimental}
         </span>
       )}
diff --git a/apps/web/src/components/common/url-import-modal.tsx b/apps/web/src/components/common/url-import-modal.tsx
index af010bb8..68389f4e 100644
--- a/apps/web/src/components/common/url-import-modal.tsx
+++ b/apps/web/src/components/common/url-import-modal.tsx
@@ -22,7 +22,7 @@ function StatusIcon({ status }: { status: UrlImportEntry["status"] }) {
     case "fetching":
       return <Loader2 className="h-4 w-4 text-primary animate-spin" />;
     case "ready":
-      return <Check className="h-4 w-4 text-emerald-500" />;
+      return <Check className="h-4 w-4 text-success-ink" />;
     case "failed":
       return <AlertCircle className="h-4 w-4 text-destructive" />;
   }
diff --git a/apps/web/src/components/common/zoom-toolbar.tsx b/apps/web/src/components/common/zoom-toolbar.tsx
index 30c2ee1a..582bdaad 100644
--- a/apps/web/src/components/common/zoom-toolbar.tsx
+++ b/apps/web/src/components/common/zoom-toolbar.tsx
@@ -94,7 +94,7 @@ export function ZoomToolbar({
           title={t.a11y.pan}
           aria-label={t.a11y.pan}
           aria-pressed={handToolActive}
-          className={`${btn} ${handToolActive ? "bg-primary/10 text-primary hover:text-primary" : ""}`}
+          className={`${btn} ${handToolActive ? "bg-primary/10 text-primary-ink hover:text-primary-ink" : ""}`}
         >
           <Hand className="h-4 w-4" />
         </button>
diff --git a/apps/web/src/components/editor/common/export-dialog.tsx b/apps/web/src/components/editor/common/export-dialog.tsx
index b029cab1..54ba86d2 100644
--- a/apps/web/src/components/editor/common/export-dialog.tsx
+++ b/apps/web/src/components/editor/common/export-dialog.tsx
@@ -568,7 +568,7 @@ export function ExportDialog({ onClose }: { onClose: () => void }) {
                   height: canvasSize.height,
                 }))
               }
-              className="mt-1 text-[10px] text-primary hover:underline"
+              className="mt-1 text-[10px] text-primary-ink hover:underline"
             >
               Reset to original size ({canvasSize.width} x {canvasSize.height})
             </button>
@@ -826,7 +826,7 @@ export function AutosaveRecoveryBanner({
 
   return (
     <div className="flex items-center gap-3 px-4 py-2 bg-yellow-500/10 border-b border-yellow-500/30 text-xs">
-      <Save size={14} className="text-yellow-600 shrink-0" />
+      <Save size={14} className="text-amber-700 dark:text-amber-400 shrink-0" />
       <span className="text-foreground">Recovered unsaved work from {timeStr}.</span>
       <div className="flex items-center gap-2 ms-auto">
         <button
diff --git a/apps/web/src/components/editor/common/welcome-screen.tsx b/apps/web/src/components/editor/common/welcome-screen.tsx
index 00de1d89..30cb6e59 100644
--- a/apps/web/src/components/editor/common/welcome-screen.tsx
+++ b/apps/web/src/components/editor/common/welcome-screen.tsx
@@ -74,7 +74,7 @@ export function WelcomeScreen() {
           <div className="text-center">
             <h2 className="text-xl font-semibold text-foreground mb-1 flex items-center justify-center gap-2">
               {t.editor.welcome.heading}
-              <span className="rounded px-1.5 py-0.5 text-[10px] font-bold uppercase tracking-wide bg-primary/15 text-primary">
+              <span className="rounded px-1.5 py-0.5 text-[10px] font-bold uppercase tracking-wide bg-primary/15 text-primary-ink">
                 Beta
               </span>
             </h2>
diff --git a/apps/web/src/components/editor/panels/adjustments-panel.tsx b/apps/web/src/components/editor/panels/adjustments-panel.tsx
index c470a747..5e190f30 100644
--- a/apps/web/src/components/editor/panels/adjustments-panel.tsx
+++ b/apps/web/src/components/editor/panels/adjustments-panel.tsx
@@ -437,9 +437,9 @@ function LevelsSection() {
 
   const channelColors: Record<LevelsChannel, string> = {
     rgb: "text-foreground",
-    red: "text-red-400",
-    green: "text-green-400",
-    blue: "text-blue-400",
+    red: "text-red-700 dark:text-red-400",
+    green: "text-green-700 dark:text-green-400",
+    blue: "text-blue-700 dark:text-blue-400",
   };
 
   return (
diff --git a/apps/web/src/components/editor/panels/histogram-panel.tsx b/apps/web/src/components/editor/panels/histogram-panel.tsx
index ed6dba31..b474b294 100644
--- a/apps/web/src/components/editor/panels/histogram-panel.tsx
+++ b/apps/web/src/components/editor/panels/histogram-panel.tsx
@@ -187,23 +187,23 @@ export function HistogramPanel({ imageData }: HistogramPanelProps) {
           <div>
             <span className="font-medium">Mean</span>
             <br />
-            <span className="text-red-400">{stats.mean[0]}</span>{" "}
-            <span className="text-green-400">{stats.mean[1]}</span>{" "}
-            <span className="text-blue-400">{stats.mean[2]}</span>
+            <span className="text-red-700 dark:text-red-400">{stats.mean[0]}</span>{" "}
+            <span className="text-green-700 dark:text-green-400">{stats.mean[1]}</span>{" "}
+            <span className="text-blue-700 dark:text-blue-400">{stats.mean[2]}</span>
           </div>
           <div>
             <span className="font-medium">StdDev</span>
             <br />
-            <span className="text-red-400">{stats.stdDev[0]}</span>{" "}
-            <span className="text-green-400">{stats.stdDev[1]}</span>{" "}
-            <span className="text-blue-400">{stats.stdDev[2]}</span>
+            <span className="text-red-700 dark:text-red-400">{stats.stdDev[0]}</span>{" "}
+            <span className="text-green-700 dark:text-green-400">{stats.stdDev[1]}</span>{" "}
+            <span className="text-blue-700 dark:text-blue-400">{stats.stdDev[2]}</span>
           </div>
           <div>
             <span className="font-medium">Median</span>
             <br />
-            <span className="text-red-400">{stats.median[0]}</span>{" "}
-            <span className="text-green-400">{stats.median[1]}</span>{" "}
-            <span className="text-blue-400">{stats.median[2]}</span>
+            <span className="text-red-700 dark:text-red-400">{stats.median[0]}</span>{" "}
+            <span className="text-green-700 dark:text-green-400">{stats.median[1]}</span>{" "}
+            <span className="text-blue-700 dark:text-blue-400">{stats.median[2]}</span>
           </div>
         </div>
       )}
diff --git a/apps/web/src/components/editor/panels/history-panel.tsx b/apps/web/src/components/editor/panels/history-panel.tsx
index acefcfab..5bfcacf4 100644
--- a/apps/web/src/components/editor/panels/history-panel.tsx
+++ b/apps/web/src/components/editor/panels/history-panel.tsx
@@ -210,7 +210,7 @@ export function HistoryPanel() {
               className={cn(
                 "flex items-center gap-2 w-full px-2 py-1.5 text-start text-xs transition-colors",
                 isCurrent && "bg-primary/10 text-foreground font-medium",
-                isFuture && "text-muted-foreground/40",
+                isFuture && "text-muted-foreground",
                 !isCurrent &&
                   !isFuture &&
                   "text-muted-foreground hover:bg-muted hover:text-foreground",
diff --git a/apps/web/src/components/editor/panels/layers-panel.tsx b/apps/web/src/components/editor/panels/layers-panel.tsx
index 9d5c8082..cb484d16 100644
--- a/apps/web/src/components/editor/panels/layers-panel.tsx
+++ b/apps/web/src/components/editor/panels/layers-panel.tsx
@@ -653,7 +653,7 @@ function LayerContextMenu({
             item.disabled
               ? "text-muted-foreground/40 cursor-not-allowed"
               : "text-foreground hover:bg-muted",
-            item.label === "Delete" && !item.disabled && "text-red-500",
+            item.label === "Delete" && !item.disabled && "text-destructive-ink",
           )}
         >
           <item.icon size={14} />
diff --git a/apps/web/src/components/features/feature-install-prompt.tsx b/apps/web/src/components/features/feature-install-prompt.tsx
index d00a5f46..c70bfa1d 100644
--- a/apps/web/src/components/features/feature-install-prompt.tsx
+++ b/apps/web/src/components/features/feature-install-prompt.tsx
@@ -218,7 +218,7 @@ export function FeatureInstallPrompt({
             const statusClass = isCandidateInstalled
               ? "bg-emerald-500/10 text-emerald-700 dark:text-emerald-300"
               : isCandidateInstalling || isCandidateQueued
-                ? "bg-primary/10 text-primary"
+                ? "bg-primary/10 text-primary-ink"
                 : candidate.status === "error"
                   ? "bg-destructive/10 text-destructive"
                   : "bg-muted text-muted-foreground";
diff --git a/apps/web/src/components/feedback/feedback-dialog.tsx b/apps/web/src/components/feedback/feedback-dialog.tsx
index ec8a3376..0de8a67f 100644
--- a/apps/web/src/components/feedback/feedback-dialog.tsx
+++ b/apps/web/src/components/feedback/feedback-dialog.tsx
@@ -241,14 +241,14 @@ export function FeedbackDialog({
                   href={buildToolRequestDiscussionUrl(searchQuery ?? "")}
                   target="_blank"
                   rel="noopener noreferrer"
-                  className="text-primary hover:underline"
+                  className="text-primary-ink hover:underline"
                 >
                   {t.feedback.searchMissDiscussionsFallback}
                 </a>
               </p>
             ) : (
               <div className="flex items-start gap-3">
-                <CheckCircle2 className="h-5 w-5 text-emerald-600 shrink-0 mt-0.5" />
+                <CheckCircle2 className="h-5 w-5 text-success-ink shrink-0 mt-0.5" />
                 <div className="space-y-1">
                   <p className="text-sm font-medium text-foreground">{t.feedback.thanksTitle}</p>
                   <p className="text-sm text-muted-foreground">{t.feedback.thanksDescription}</p>
@@ -313,7 +313,7 @@ export function FeedbackDialog({
                         className={cn(
                           "py-2 rounded-lg border text-sm font-medium transition-colors",
                           sentiment === value
-                            ? "border-primary bg-primary/10 text-primary"
+                            ? "border-primary bg-primary/10 text-primary-ink"
                             : "border-border text-muted-foreground hover:bg-muted hover:text-foreground",
                         )}
                       >
diff --git a/apps/web/src/components/feedback/tool-feedback-prompt.tsx b/apps/web/src/components/feedback/tool-feedback-prompt.tsx
index 6ca3bc8a..5442f3e1 100644
--- a/apps/web/src/components/feedback/tool-feedback-prompt.tsx
+++ b/apps/web/src/components/feedback/tool-feedback-prompt.tsx
@@ -194,9 +194,7 @@ export function ToolFeedbackPrompt({
         </div>
       )}
 
-      {thanks && (
-        <p className="text-xs text-emerald-600 dark:text-emerald-400">{t.feedback.quickThanks}</p>
-      )}
+      {thanks && <p className="text-xs text-success-ink">{t.feedback.quickThanks}</p>}
 
       <FeedbackDialog
         open={dialogOpen}
diff --git a/apps/web/src/components/files/file-details.tsx b/apps/web/src/components/files/file-details.tsx
index a04c4cb4..080f5050 100644
--- a/apps/web/src/components/files/file-details.tsx
+++ b/apps/web/src/components/files/file-details.tsx
@@ -496,9 +496,7 @@ export function FileDetails({ mobile = false }: FileDetailsProps) {
       <div className="flex-1">
         <div className="rounded-lg border border-border overflow-hidden">
           <div className="bg-primary/10 border-b border-border px-3 py-2">
-            <h4 className="text-sm font-semibold text-primary-dark dark:text-primary-light">
-              {t.files.fileDetailsHeading}
-            </h4>
+            <h4 className="text-sm font-semibold text-primary-ink">{t.files.fileDetailsHeading}</h4>
           </div>
           <div className="divide-y divide-border">
             <DetailRow label={t.files.name} value={details.originalName} />
diff --git a/apps/web/src/components/files/file-list-item.tsx b/apps/web/src/components/files/file-list-item.tsx
index 614d19eb..86a0150c 100644
--- a/apps/web/src/components/files/file-list-item.tsx
+++ b/apps/web/src/components/files/file-list-item.tsx
@@ -69,7 +69,7 @@ export function FileListItem({ file, disabled }: FileListItemProps) {
 
       {/* Tool chain */}
       {file.toolChain.length > 0 && (
-        <span className="hidden md:block text-xs text-primary shrink-0">
+        <span className="hidden md:block text-xs text-primary-ink shrink-0">
           {file.toolChain.map(toolName).join(" → ")}
         </span>
       )}
diff --git a/apps/web/src/components/files/file-upload-area.tsx b/apps/web/src/components/files/file-upload-area.tsx
index b9285c6e..285dd88b 100644
--- a/apps/web/src/components/files/file-upload-area.tsx
+++ b/apps/web/src/components/files/file-upload-area.tsx
@@ -49,7 +49,7 @@ export function FileUploadArea() {
           <div className="flex flex-col items-center gap-2">
             <div className="h-10 w-10 border-2 border-primary border-t-transparent rounded-full animate-spin" />
             {uploadProgress !== null && uploadProgress > 0 && (
-              <span className="text-xs font-medium text-primary">{uploadProgress}%</span>
+              <span className="text-xs font-medium text-primary-ink">{uploadProgress}%</span>
             )}
           </div>
         ) : (
diff --git a/apps/web/src/components/help/help-dialog.tsx b/apps/web/src/components/help/help-dialog.tsx
index b7da0947..3e8ab39d 100644
--- a/apps/web/src/components/help/help-dialog.tsx
+++ b/apps/web/src/components/help/help-dialog.tsx
@@ -118,7 +118,7 @@ export function HelpDialog({ open, onClose }: HelpDialogProps) {
                 href="https://github.com/snapotter-hq/snapotter"
                 target="_blank"
                 rel="noopener noreferrer"
-                className="flex items-center gap-1.5 text-sm text-primary hover:underline"
+                className="flex items-center gap-1.5 text-sm text-primary-ink hover:underline"
               >
                 {t.help.resources.githubLink}
                 <ExternalLink className="h-3 w-3" />
@@ -127,7 +127,7 @@ export function HelpDialog({ open, onClose }: HelpDialogProps) {
                 href="https://github.com/snapotter-hq/snapotter/issues"
                 target="_blank"
                 rel="noopener noreferrer"
-                className="flex items-center gap-1.5 text-sm text-primary hover:underline"
+                className="flex items-center gap-1.5 text-sm text-primary-ink hover:underline"
               >
                 {t.help.resources.reportIssueLink}
                 <ExternalLink className="h-3 w-3" />
@@ -136,7 +136,7 @@ export function HelpDialog({ open, onClose }: HelpDialogProps) {
                 href="https://docs.snapotter.com/"
                 target="_blank"
                 rel="noopener noreferrer"
-                className="flex items-center gap-1.5 text-sm text-primary hover:underline"
+                className="flex items-center gap-1.5 text-sm text-primary-ink hover:underline"
               >
                 {t.help.resources.docsLink}
                 <ExternalLink className="h-3 w-3" />
@@ -145,7 +145,7 @@ export function HelpDialog({ open, onClose }: HelpDialogProps) {
                 href="/api/docs"
                 target="_blank"
                 rel="noopener noreferrer"
-                className="flex items-center gap-1.5 text-sm text-primary hover:underline"
+                className="flex items-center gap-1.5 text-sm text-primary-ink hover:underline"
               >
                 {t.help.resources.apiRefLink}
                 <ExternalLink className="h-3 w-3" />
diff --git a/apps/web/src/components/layout/top-nav.tsx b/apps/web/src/components/layout/top-nav.tsx
index 70f420f3..c478092f 100644
--- a/apps/web/src/components/layout/top-nav.tsx
+++ b/apps/web/src/components/layout/top-nav.tsx
@@ -79,6 +79,7 @@ export function TopNav({
           <div className="flex items-center gap-2 flex-1 min-w-0">
             <Link
               to="/"
+              aria-label={t.common.goHome}
               className={cn(
                 "shrink-0",
                 isDark
@@ -179,7 +180,7 @@ export function TopNav({
               <ChevronRight
                 className={cn(
                   "h-3.5 w-3.5 shrink-0",
-                  isDark ? "text-[#666]" : "text-muted-foreground/50",
+                  isDark ? "text-[#8a8a8a]" : "text-muted-foreground",
                 )}
               />
               {breadcrumb.modalityTab ? (
@@ -204,7 +205,7 @@ export function TopNav({
           <ChevronRight
             className={cn(
               "h-3.5 w-3.5 shrink-0",
-              isDark ? "text-[#666]" : "text-muted-foreground/50",
+              isDark ? "text-[#8a8a8a]" : "text-muted-foreground",
             )}
           />
           <span
@@ -234,7 +235,7 @@ export function TopNav({
               >
                 {link.label}
                 {link.badge && (
-                  <span className="ml-1.5 rounded px-1 py-0.5 text-[9px] font-bold uppercase tracking-wide bg-primary/15 text-primary align-middle">
+                  <span className="ml-1.5 rounded px-1 py-0.5 text-[9px] font-bold uppercase tracking-wide bg-primary/15 text-primary-ink-strong align-middle">
                     {link.badge}
                   </span>
                 )}
diff --git a/apps/web/src/components/onboarding/usage-survey-overlay.tsx b/apps/web/src/components/onboarding/usage-survey-overlay.tsx
index 0554e263..1b74c20b 100644
--- a/apps/web/src/components/onboarding/usage-survey-overlay.tsx
+++ b/apps/web/src/components/onboarding/usage-survey-overlay.tsx
@@ -205,7 +205,7 @@ export function UsageSurveyOverlay() {
               className={cn(
                 "flex items-center gap-2 rounded-lg border px-3 py-2.5 text-sm font-medium text-start transition-colors",
                 usageType === value
-                  ? "border-primary bg-primary/10 text-primary"
+                  ? "border-primary bg-primary/10 text-primary-ink"
                   : "border-border text-foreground hover:bg-muted",
                 wide && "col-span-2 justify-center",
               )}
@@ -238,7 +238,7 @@ export function UsageSurveyOverlay() {
                 className={cn(
                   "flex items-center gap-2 rounded-lg border px-3 py-2.5 text-sm font-medium text-start transition-colors",
                   importantAreas.includes(value)
-                    ? "border-primary bg-primary/10 text-primary"
+                    ? "border-primary bg-primary/10 text-primary-ink"
                     : "border-border text-foreground hover:bg-muted",
                   wide && "col-span-2 justify-center",
                 )}
@@ -270,7 +270,7 @@ export function UsageSurveyOverlay() {
                 className={cn(
                   "rounded-lg border px-3 py-2.5 text-sm font-medium text-start transition-colors",
                   installMethod === value
-                    ? "border-primary bg-primary/10 text-primary"
+                    ? "border-primary bg-primary/10 text-primary-ink"
                     : "border-border text-foreground hover:bg-muted",
                 )}
               >
diff --git a/apps/web/src/components/settings/ai-features-section.tsx b/apps/web/src/components/settings/ai-features-section.tsx
index 1c86c873..03cabc7f 100644
--- a/apps/web/src/components/settings/ai-features-section.tsx
+++ b/apps/web/src/components/settings/ai-features-section.tsx
@@ -405,7 +405,7 @@ function ImportBundleSection({ onImported }: { onImported: () => void }) {
         <p
           role={feedback.type === "error" ? "alert" : "status"}
           aria-live="polite"
-          className={`text-xs ${feedback.type === "success" ? "text-green-600 dark:text-green-400" : "text-destructive"}`}
+          className={`text-xs ${feedback.type === "success" ? "text-success-ink" : "text-destructive"}`}
         >
           {feedback.message}
         </p>
diff --git a/apps/web/src/components/settings/settings-dialog.tsx b/apps/web/src/components/settings/settings-dialog.tsx
index ea6665b2..81405b13 100644
--- a/apps/web/src/components/settings/settings-dialog.tsx
+++ b/apps/web/src/components/settings/settings-dialog.tsx
@@ -437,7 +437,7 @@ function GeneralSection() {
       {/* User info */}
       <div className="flex items-center justify-between p-4 rounded-lg border border-border bg-muted/20">
         <div className="flex items-center gap-3">
-          <div className="w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center text-primary font-semibold">
+          <div className="w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center text-primary-ink font-semibold">
             {loading ? (
               <Loader2 className="h-4 w-4 animate-spin" />
             ) : (
@@ -516,9 +516,7 @@ function GeneralSection() {
           <span
             className={cn(
               "text-sm",
-              saveMsg === t.settings.general.saveFailed
-                ? "text-destructive"
-                : "text-green-600 dark:text-green-400",
+              saveMsg === t.settings.general.saveFailed ? "text-destructive" : "text-success-ink",
             )}
           >
             {saveMsg}
@@ -837,9 +835,7 @@ function SystemSection() {
           <span
             className={cn(
               "text-sm",
-              saveMsg === t.settings.system.saveFailed
-                ? "text-destructive"
-                : "text-green-600 dark:text-green-400",
+              saveMsg === t.settings.system.saveFailed ? "text-destructive" : "text-success-ink",
             )}
           >
             {saveMsg}
@@ -1045,9 +1041,7 @@ function SecuritySection() {
               role="alert"
               className={cn(
                 "text-sm",
-                message.type === "error"
-                  ? "text-destructive"
-                  : "text-green-600 dark:text-green-400",
+                message.type === "error" ? "text-destructive" : "text-success-ink",
               )}
             >
               {message.text}
@@ -1347,7 +1341,7 @@ export function AdminSecuritySettings() {
           <span
             className={cn(
               "text-sm",
-              saveMsg.type === "error" ? "text-destructive" : "text-green-600 dark:text-green-400",
+              saveMsg.type === "error" ? "text-destructive" : "text-success-ink",
             )}
           >
             {saveMsg.text}
@@ -1614,7 +1608,7 @@ function PeopleSection() {
             "text-sm px-3 py-2 rounded-lg",
             actionMsg.type === "error"
               ? "bg-destructive/10 text-destructive"
-              : "bg-green-500/10 text-green-600 dark:text-green-400",
+              : "bg-green-500/10 text-success-ink",
           )}
         >
           {actionMsg.text}
@@ -1715,7 +1709,7 @@ function PeopleSection() {
                   className={cn(
                     "shrink-0 p-2 rounded-lg border border-border transition-colors",
                     pwCopied
-                      ? "text-green-500 bg-green-500/10"
+                      ? "text-success-ink bg-green-500/10"
                       : "text-muted-foreground hover:bg-muted hover:text-foreground",
                   )}
                   title={
@@ -1778,7 +1772,7 @@ function PeopleSection() {
                 setShowGeneratedPw(true);
                 setPwCopied(false);
               }}
-              className="flex items-center gap-1.5 px-3 py-2 rounded-lg border border-primary/30 bg-primary/10 text-xs text-primary hover:bg-primary/20 font-medium transition-colors"
+              className="flex items-center gap-1.5 px-3 py-2 rounded-lg border border-primary/30 bg-primary/10 text-xs text-primary-ink hover:bg-primary/20 font-medium transition-colors"
             >
               <Sparkles className="h-3 w-3" />
               {t.changePassword.generateButton}
@@ -1801,7 +1795,7 @@ function PeopleSection() {
             </button>
           </div>
           {showGeneratedPw && !pwCopied && (
-            <p className="text-xs text-amber-500 flex items-center gap-1.5">
+            <p className="text-xs text-amber-700 dark:text-amber-400 flex items-center gap-1.5">
               <Key className="h-3.5 w-3.5 shrink-0" />
               {t.settings.people.copyPasswordWarning}
             </p>
@@ -1894,7 +1888,7 @@ function PeopleSection() {
             />
             <button
               type="submit"
-              className="px-4 py-2 rounded-lg bg-orange-500 text-white text-sm font-medium hover:bg-orange-600 transition-colors"
+              className="px-4 py-2 rounded-lg bg-primary text-primary-foreground text-sm font-medium hover:bg-primary-light transition-colors"
             >
               {t.settings.people.resetPasswordButton}
             </button>
@@ -1942,7 +1936,7 @@ function PeopleSection() {
               {isMobile ? (
                 <>
                   {/* Mobile card layout */}
-                  <div className="w-8 h-8 rounded-full bg-primary/10 flex items-center justify-center text-primary font-semibold text-sm shrink-0">
+                  <div className="w-8 h-8 rounded-full bg-primary/10 flex items-center justify-center text-primary-ink font-semibold text-sm shrink-0">
                     {u.username.charAt(0).toUpperCase()}
                   </div>
                   <div className="flex-1 min-w-0">
@@ -1966,7 +1960,7 @@ function PeopleSection() {
                         className={cn(
                           "inline-block px-2 py-0.5 rounded text-xs font-semibold uppercase tracking-wide",
                           u.role === "admin"
-                            ? "bg-primary/15 text-primary"
+                            ? "bg-primary/15 text-primary-ink"
                             : "bg-muted text-muted-foreground",
                         )}
                       >
@@ -1980,7 +1974,7 @@ function PeopleSection() {
                 <>
                   {/* Desktop row layout */}
                   <div className="flex items-center gap-3 min-w-0">
-                    <div className="w-8 h-8 rounded-full bg-primary/10 flex items-center justify-center text-primary font-semibold text-sm shrink-0">
+                    <div className="w-8 h-8 rounded-full bg-primary/10 flex items-center justify-center text-primary-ink font-semibold text-sm shrink-0">
                       {u.username.charAt(0).toUpperCase()}
                     </div>
                     <span className="text-sm font-medium text-foreground truncate">
@@ -2004,7 +1998,7 @@ function PeopleSection() {
                       className={cn(
                         "inline-block px-2 py-0.5 rounded text-xs font-semibold uppercase tracking-wide",
                         u.role === "admin"
-                          ? "bg-primary/15 text-primary"
+                          ? "bg-primary/15 text-primary-ink"
                           : "bg-muted text-muted-foreground",
                       )}
                     >
@@ -2282,7 +2276,11 @@ function ApiKeysSection() {
               title="Copy"
               aria-label={t.common.copy}
             >
-              {copied ? <Check className="h-4 w-4 text-green-500" /> : <Copy className="h-4 w-4" />}
+              {copied ? (
+                <Check className="h-4 w-4 text-success-ink" />
+              ) : (
+                <Copy className="h-4 w-4" />
+              )}
             </button>
           </div>
           <p className="text-xs text-muted-foreground">{t.settings.apiKeys.keyWarning}</p>
@@ -2311,7 +2309,7 @@ function ApiKeysSection() {
                   </p>
                 )}
                 {k.expiresAt && (
-                  <span className="text-xs text-amber-500">
+                  <span className="text-xs text-amber-700 dark:text-amber-400">
                     Expires {new Date(k.expiresAt).toLocaleDateString()}
                   </span>
                 )}
@@ -2502,7 +2500,7 @@ function TeamsSection() {
             "text-sm px-3 py-2 rounded-lg",
             actionMsg.type === "error"
               ? "bg-destructive/10 text-destructive"
-              : "bg-green-500/10 text-green-600 dark:text-green-400",
+              : "bg-green-500/10 text-success-ink",
           )}
         >
           {actionMsg.text}
@@ -2603,7 +2601,7 @@ function TeamsSection() {
                       <button
                         type="button"
                         onClick={() => handleRename(tm.id)}
-                        className="text-xs text-primary hover:underline"
+                        className="text-xs text-primary-ink hover:underline"
                       >
                         {t.common.save}
                       </button>
@@ -2917,7 +2915,7 @@ function RolesSection() {
             "text-sm px-3 py-2 rounded-lg",
             actionMsg.type === "error"
               ? "bg-destructive/10 text-destructive"
-              : "bg-green-500/10 text-green-600 dark:text-green-400",
+              : "bg-green-500/10 text-success-ink",
           )}
         >
           {actionMsg.text}
@@ -3095,7 +3093,7 @@ function RolesSection() {
                       {t.settings.roles.builtInBadge}
                     </span>
                   )}
-                  <span className="inline-block px-2 py-0.5 rounded-full bg-primary/10 text-xs font-medium text-primary">
+                  <span className="inline-block px-2 py-0.5 rounded-full bg-primary/10 text-xs font-medium text-primary-ink">
                     {role.userCount} user{role.userCount !== 1 ? "s" : ""}
                   </span>
                 </div>
@@ -3595,7 +3593,7 @@ function AboutSection() {
         <div className="flex items-center gap-3">
           <OtterLogo className="h-8 w-8 text-primary" />
           <div className="text-2xl font-bold text-foreground">
-            <span className="text-primary">SnapOtter</span>
+            <span className="text-primary-ink">SnapOtter</span>
           </div>
         </div>
         <p className="text-sm text-muted-foreground">{t.settings.about.appDescription}</p>
@@ -3620,7 +3618,7 @@ function AboutSection() {
             href="https://github.com/snapotter-hq/snapotter"
             target="_blank"
             rel="noopener noreferrer"
-            className="text-sm text-primary hover:underline"
+            className="text-sm text-primary-ink hover:underline"
           >
             {t.settings.about.githubLink}
           </a>
@@ -3628,7 +3626,7 @@ function AboutSection() {
             href="https://docs.snapotter.com/"
             target="_blank"
             rel="noopener noreferrer"
-            className="text-sm text-primary hover:underline"
+            className="text-sm text-primary-ink hover:underline"
           >
             {t.settings.about.docsLink}
           </a>
@@ -3636,7 +3634,7 @@ function AboutSection() {
             href="/api/docs"
             target="_blank"
             rel="noopener noreferrer"
-            className="text-sm text-primary hover:underline"
+            className="text-sm text-primary-ink hover:underline"
           >
             {t.settings.about.apiRefLink}
           </a>
diff --git a/apps/web/src/components/settings/two-factor-settings.tsx b/apps/web/src/components/settings/two-factor-settings.tsx
index 6c7a2da8..965c2cdc 100644
--- a/apps/web/src/components/settings/two-factor-settings.tsx
+++ b/apps/web/src/components/settings/two-factor-settings.tsx
@@ -198,7 +198,7 @@ export function TwoFactorSettings() {
             <button
               type="button"
               onClick={handleCopyCodes}
-              className="mt-2 text-xs text-primary hover:underline"
+              className="mt-2 text-xs text-primary-ink hover:underline"
             >
               {codesCopied
                 ? t.settings.security.twoFactorCodesCopied
@@ -229,9 +229,7 @@ export function TwoFactorSettings() {
             <p
               className={cn(
                 "text-sm",
-                message.type === "error"
-                  ? "text-destructive"
-                  : "text-green-600 dark:text-green-400",
+                message.type === "error" ? "text-destructive" : "text-success-ink",
               )}
             >
               {message.text}
@@ -277,9 +275,7 @@ export function TwoFactorSettings() {
             <p
               className={cn(
                 "text-sm",
-                message.type === "error"
-                  ? "text-destructive"
-                  : "text-green-600 dark:text-green-400",
+                message.type === "error" ? "text-destructive" : "text-success-ink",
               )}
             >
               {message.text}
@@ -311,7 +307,7 @@ export function TwoFactorSettings() {
         <p
           className={cn(
             "text-sm",
-            message.type === "error" ? "text-destructive" : "text-green-600 dark:text-green-400",
+            message.type === "error" ? "text-destructive" : "text-success-ink",
           )}
         >
           {message.text}
diff --git a/apps/web/src/components/settings/usage-section.tsx b/apps/web/src/components/settings/usage-section.tsx
index a6da7df2..fa95de57 100644
--- a/apps/web/src/components/settings/usage-section.tsx
+++ b/apps/web/src/components/settings/usage-section.tsx
@@ -106,7 +106,7 @@ export function UsageSection() {
                             {row.total}
                           </span>
                         </div>
-                        <span className="w-14 shrink-0 text-end text-green-600 dark:text-green-400">
+                        <span className="w-14 shrink-0 text-end text-success-ink">
                           {row.completed}
                         </span>
                         <span className="w-10 shrink-0 text-end text-destructive">
diff --git a/apps/web/src/components/tools/ai-canvas-expand-settings.tsx b/apps/web/src/components/tools/ai-canvas-expand-settings.tsx
index 033b04d7..279d581c 100644
--- a/apps/web/src/components/tools/ai-canvas-expand-settings.tsx
+++ b/apps/web/src/components/tools/ai-canvas-expand-settings.tsx
@@ -208,7 +208,7 @@ export function AiCanvasExpandSettings() {
           </p>
         )}
 
-      {error && <p className="text-xs text-red-500">{error}</p>}
+      {error && <p className="text-xs text-destructive-ink">{error}</p>}
 
       {processing ? (
         <ProgressCard
@@ -237,7 +237,7 @@ export function AiCanvasExpandSettings() {
           href={downloadUrl}
           download
           data-testid="ai-canvas-expand-download"
-          className="w-full py-2.5 rounded-lg border border-primary text-primary font-medium flex items-center justify-center gap-2 hover:bg-primary/5"
+          className="w-full py-2.5 rounded-lg border border-primary text-primary-ink font-medium flex items-center justify-center gap-2 hover:bg-primary/5"
         >
           <Download className="h-4 w-4" />
           Download
diff --git a/apps/web/src/components/tools/aspect-pad-settings.tsx b/apps/web/src/components/tools/aspect-pad-settings.tsx
index c822431a..00a84c40 100644
--- a/apps/web/src/components/tools/aspect-pad-settings.tsx
+++ b/apps/web/src/components/tools/aspect-pad-settings.tsx
@@ -65,7 +65,7 @@ export function AspectPadSettings() {
         <p className="text-[10px] text-muted-foreground mt-0.5">{s.colorHint}</p>
       </div>
 
-      {error && <p className="text-xs text-red-500">{error}</p>}
+      {error && <p className="text-xs text-destructive-ink">{error}</p>}
 
       {processing ? (
         <ProgressCard
diff --git a/apps/web/src/components/tools/audio-channels-settings.tsx b/apps/web/src/components/tools/audio-channels-settings.tsx
index e3316551..77056948 100644
--- a/apps/web/src/components/tools/audio-channels-settings.tsx
+++ b/apps/web/src/components/tools/audio-channels-settings.tsx
@@ -46,7 +46,7 @@ export function AudioChannelsSettings() {
         </select>
       </div>
 
-      {error && <p className="text-xs text-red-500">{error}</p>}
+      {error && <p className="text-xs text-destructive-ink">{error}</p>}
 
       {processing ? (
         <ProgressCard
diff --git a/apps/web/src/components/tools/audio-metadata-settings.tsx b/apps/web/src/components/tools/audio-metadata-settings.tsx
index f4c20e16..4f5f1e97 100644
--- a/apps/web/src/components/tools/audio-metadata-settings.tsx
+++ b/apps/web/src/components/tools/audio-metadata-settings.tsx
@@ -86,7 +86,7 @@ export function AudioMetadataSettings() {
         />
       </div>
 
-      {error && <p className="text-xs text-red-500">{error}</p>}
+      {error && <p className="text-xs text-destructive-ink">{error}</p>}
 
       {processing ? (
         <ProgressCard
diff --git a/apps/web/src/components/tools/audio-speed-settings.tsx b/apps/web/src/components/tools/audio-speed-settings.tsx
index ae9b042f..ebcbcc89 100644
--- a/apps/web/src/components/tools/audio-speed-settings.tsx
+++ b/apps/web/src/components/tools/audio-speed-settings.tsx
@@ -44,7 +44,7 @@ export function AudioSpeedSettings() {
         />
       </div>
 
-      {error && <p className="text-xs text-red-500">{error}</p>}
+      {error && <p className="text-xs text-destructive-ink">{error}</p>}
 
       {processing ? (
         <ProgressCard
diff --git a/apps/web/src/components/tools/barcode-generate-settings.tsx b/apps/web/src/components/tools/barcode-generate-settings.tsx
index e5a88349..636f1d17 100644
--- a/apps/web/src/components/tools/barcode-generate-settings.tsx
+++ b/apps/web/src/components/tools/barcode-generate-settings.tsx
@@ -133,7 +133,7 @@ export function BarcodeGenerateSettings() {
         {ts.includeText}
       </label>
 
-      {error && <p className="text-xs text-red-500">{error}</p>}
+      {error && <p className="text-xs text-destructive-ink">{error}</p>}
 
       {/* Result preview */}
       {resultUrl && (
@@ -147,7 +147,7 @@ export function BarcodeGenerateSettings() {
             href={resultUrl}
             download="barcode.png"
             data-testid="barcode-generate-download"
-            className="w-full py-2.5 rounded-lg border border-primary text-primary font-medium flex items-center justify-center gap-2 hover:bg-primary/5"
+            className="w-full py-2.5 rounded-lg border border-primary text-primary-ink font-medium flex items-center justify-center gap-2 hover:bg-primary/5"
           >
             <Download className="h-4 w-4" />
             {ts.download}
diff --git a/apps/web/src/components/tools/barcode-read-settings.tsx b/apps/web/src/components/tools/barcode-read-settings.tsx
index 4a4fc3e1..d9b26b4e 100644
--- a/apps/web/src/components/tools/barcode-read-settings.tsx
+++ b/apps/web/src/components/tools/barcode-read-settings.tsx
@@ -45,11 +45,11 @@ const FORMAT_LABELS: Record<string, string> = {
 /** Badge colors by barcode family. */
 function getBadgeColor(type: string): string {
   if (type.includes("QR") || type === "Aztec" || type === "DataMatrix" || type === "MaxiCode")
-    return "bg-primary/15 text-primary-dark dark:text-primary-light";
+    return "bg-primary/15 text-primary-ink";
   if (type.includes("EAN") || type.includes("UPC") || type.includes("DataBar"))
-    return "bg-green-500/15 text-green-600 dark:text-green-400";
+    return "bg-green-500/15 text-success-ink";
   if (type === "PDF417") return "bg-purple-500/15 text-purple-600 dark:text-purple-400";
-  return "bg-amber-500/15 text-amber-600 dark:text-amber-400";
+  return "bg-amber-500/15 text-amber-700 dark:text-amber-400";
 }
 
 function SectionLabel({ children }: { children: React.ReactNode }) {
@@ -264,7 +264,7 @@ export function BarcodeReadSettings() {
       </label>
 
       {/* Error */}
-      {error && <p className="text-xs text-red-500">{error}</p>}
+      {error && <p className="text-xs text-destructive-ink">{error}</p>}
 
       {/* Process button / progress */}
       {processing ? (
@@ -360,7 +360,7 @@ export function BarcodeReadSettings() {
                         title="Copy value"
                       >
                         {copiedIndex === idx ? (
-                          <Check className="h-3.5 w-3.5 text-green-500" />
+                          <Check className="h-3.5 w-3.5 text-success-ink" />
                         ) : (
                           <Copy className="h-3.5 w-3.5" />
                         )}
diff --git a/apps/web/src/components/tools/beautify-settings.tsx b/apps/web/src/components/tools/beautify-settings.tsx
index 9b2bb70d..0642614a 100644
--- a/apps/web/src/components/tools/beautify-settings.tsx
+++ b/apps/web/src/components/tools/beautify-settings.tsx
@@ -1374,7 +1374,7 @@ export function BeautifySettings({
         onBackgroundImage={handleBgImageChange}
       />
 
-      {displayError && <p className="text-xs text-red-500">{displayError}</p>}
+      {displayError && <p className="text-xs text-destructive-ink">{displayError}</p>}
 
       {processing ? (
         <ProgressCard
@@ -1405,7 +1405,7 @@ export function BeautifySettings({
           href={displayDownloadUrl}
           download
           data-testid="beautify-download"
-          className="w-full py-2.5 rounded-lg border border-primary text-primary font-medium flex items-center justify-center gap-2 hover:bg-primary/5"
+          className="w-full py-2.5 rounded-lg border border-primary text-primary-ink font-medium flex items-center justify-center gap-2 hover:bg-primary/5"
         >
           <Download className="h-4 w-4" />
           Download
diff --git a/apps/web/src/components/tools/blur-background-settings.tsx b/apps/web/src/components/tools/blur-background-settings.tsx
index a0309872..cbcfbbf9 100644
--- a/apps/web/src/components/tools/blur-background-settings.tsx
+++ b/apps/web/src/components/tools/blur-background-settings.tsx
@@ -92,7 +92,7 @@ export function BlurBackgroundSettings() {
               onClick={() => setOutputFormat(fmt)}
               className={`rounded-lg border py-2 px-2 text-xs font-medium uppercase transition-colors ${
                 outputFormat === fmt
-                  ? "border-primary bg-primary/10 text-primary"
+                  ? "border-primary bg-primary/10 text-primary-ink"
                   : "border-border text-muted-foreground hover:border-primary/50"
               }`}
             >
diff --git a/apps/web/src/components/tools/blur-faces-settings.tsx b/apps/web/src/components/tools/blur-faces-settings.tsx
index 2d594ef9..2d1ab8c1 100644
--- a/apps/web/src/components/tools/blur-faces-settings.tsx
+++ b/apps/web/src/components/tools/blur-faces-settings.tsx
@@ -114,9 +114,9 @@ export function BlurFacesSettings() {
     <div className="space-y-4">
       <BlurFacesControls onChange={setSettings} />
 
-      {error && <p className="text-xs text-red-500">{error}</p>}
+      {error && <p className="text-xs text-destructive-ink">{error}</p>}
 
-      {warning && <p className="text-xs text-amber-600 dark:text-amber-400">{warning}</p>}
+      {warning && <p className="text-xs text-amber-700 dark:text-amber-400">{warning}</p>}
 
       {/* Size info */}
       {originalSize != null && processedSize != null && (
@@ -153,7 +153,7 @@ export function BlurFacesSettings() {
           href={downloadUrl}
           download
           data-testid="blur-faces-download"
-          className="w-full py-2.5 rounded-lg border border-primary text-primary font-medium flex items-center justify-center gap-2 hover:bg-primary/5"
+          className="w-full py-2.5 rounded-lg border border-primary text-primary-ink font-medium flex items-center justify-center gap-2 hover:bg-primary/5"
         >
           <Download className="h-4 w-4" />
           {t.common.download}
diff --git a/apps/web/src/components/tools/blur-pad-settings.tsx b/apps/web/src/components/tools/blur-pad-settings.tsx
index 797b6f65..8d79cd53 100644
--- a/apps/web/src/components/tools/blur-pad-settings.tsx
+++ b/apps/web/src/components/tools/blur-pad-settings.tsx
@@ -65,7 +65,7 @@ export function BlurPadSettings() {
         />
       </div>
 
-      {error && <p className="text-xs text-red-500">{error}</p>}
+      {error && <p className="text-xs text-destructive-ink">{error}</p>}
 
       {processing ? (
         <ProgressCard
diff --git a/apps/web/src/components/tools/booklet-pdf-settings.tsx b/apps/web/src/components/tools/booklet-pdf-settings.tsx
index eb87d12b..0f085981 100644
--- a/apps/web/src/components/tools/booklet-pdf-settings.tsx
+++ b/apps/web/src/components/tools/booklet-pdf-settings.tsx
@@ -47,7 +47,7 @@ export function BookletPdfSettings() {
         </select>
       </div>
 
-      {error && <p className="text-xs text-red-500">{error}</p>}
+      {error && <p className="text-xs text-destructive-ink">{error}</p>}
 
       {processing ? (
         <ProgressCard
diff --git a/apps/web/src/components/tools/border-settings.tsx b/apps/web/src/components/tools/border-settings.tsx
index a4cf942f..df5a2cca 100644
--- a/apps/web/src/components/tools/border-settings.tsx
+++ b/apps/web/src/components/tools/border-settings.tsx
@@ -613,7 +613,7 @@ export function BorderSettings({
     <form onSubmit={handleSubmit} className="space-y-4">
       <BorderControls onChange={handleSettingsChange} onImageStyle={onImageStyle} />
 
-      {error && <p className="text-xs text-red-500">{error}</p>}
+      {error && <p className="text-xs text-destructive-ink">{error}</p>}
 
       {processing ? (
         <ProgressCard
@@ -640,7 +640,7 @@ export function BorderSettings({
           href={downloadUrl}
           download
           data-testid="border-download"
-          className="w-full py-2.5 rounded-lg border border-primary text-primary font-medium flex items-center justify-center gap-2 hover:bg-primary/5"
+          className="w-full py-2.5 rounded-lg border border-primary text-primary-ink font-medium flex items-center justify-center gap-2 hover:bg-primary/5"
         >
           <Download className="h-4 w-4" />
           Download
diff --git a/apps/web/src/components/tools/bulk-rename-settings.tsx b/apps/web/src/components/tools/bulk-rename-settings.tsx
index 0627c78e..e60b008e 100644
--- a/apps/web/src/components/tools/bulk-rename-settings.tsx
+++ b/apps/web/src/components/tools/bulk-rename-settings.tsx
@@ -119,7 +119,7 @@ export function BulkRenameSettings() {
         </div>
       )}
 
-      {error && <p className="text-xs text-red-500">{error}</p>}
+      {error && <p className="text-xs text-destructive-ink">{error}</p>}
 
       <button
         type="button"
@@ -135,7 +135,7 @@ export function BulkRenameSettings() {
       </button>
 
       {downloadReady && (
-        <p className="text-xs text-green-600 flex items-center gap-1">
+        <p className="text-xs text-success-ink flex items-center gap-1">
           <Download className="h-3 w-3" /> {t.toolSettings["bulk-rename"].zipDownloaded}
         </p>
       )}
diff --git a/apps/web/src/components/tools/burn-subtitles-settings.tsx b/apps/web/src/components/tools/burn-subtitles-settings.tsx
index 924de271..9622d352 100644
--- a/apps/web/src/components/tools/burn-subtitles-settings.tsx
+++ b/apps/web/src/components/tools/burn-subtitles-settings.tsx
@@ -38,7 +38,7 @@ export function BurnSubtitlesSettings() {
 
       <p className="text-[10px] text-muted-foreground">{s.hint}</p>
 
-      {error && <p className="text-xs text-red-500">{error}</p>}
+      {error && <p className="text-xs text-destructive-ink">{error}</p>}
 
       {processing ? (
         <ProgressCard
diff --git a/apps/web/src/components/tools/change-fps-settings.tsx b/apps/web/src/components/tools/change-fps-settings.tsx
index 4140c5ca..a14d16d3 100644
--- a/apps/web/src/components/tools/change-fps-settings.tsx
+++ b/apps/web/src/components/tools/change-fps-settings.tsx
@@ -44,7 +44,7 @@ export function ChangeFpsSettings() {
         />
       </div>
 
-      {error && <p className="text-xs text-red-500">{error}</p>}
+      {error && <p className="text-xs text-destructive-ink">{error}</p>}
 
       {processing ? (
         <ProgressCard
diff --git a/apps/web/src/components/tools/chart-maker-settings.tsx b/apps/web/src/components/tools/chart-maker-settings.tsx
index 08e349cb..736dba89 100644
--- a/apps/web/src/components/tools/chart-maker-settings.tsx
+++ b/apps/web/src/components/tools/chart-maker-settings.tsx
@@ -116,7 +116,7 @@ export function ChartMakerSettings() {
         />
       </div>
 
-      {error && <p className="text-xs text-red-500">{error}</p>}
+      {error && <p className="text-xs text-destructive-ink">{error}</p>}
 
       {processing ? (
         <ProgressCard
@@ -143,7 +143,7 @@ export function ChartMakerSettings() {
           href={downloadUrl}
           download
           data-testid="chart-maker-download"
-          className="w-full py-2.5 rounded-lg border border-primary text-primary font-medium flex items-center justify-center gap-2 hover:bg-primary/5"
+          className="w-full py-2.5 rounded-lg border border-primary text-primary-ink font-medium flex items-center justify-center gap-2 hover:bg-primary/5"
         >
           <Download className="h-4 w-4" />
           {t.common.download}
diff --git a/apps/web/src/components/tools/circle-crop-settings.tsx b/apps/web/src/components/tools/circle-crop-settings.tsx
index b4be67cf..30061e79 100644
--- a/apps/web/src/components/tools/circle-crop-settings.tsx
+++ b/apps/web/src/components/tools/circle-crop-settings.tsx
@@ -238,7 +238,7 @@ export function CircleCropSettings() {
         />
       </div>
 
-      {error && <p className="text-xs text-red-500">{error}</p>}
+      {error && <p className="text-xs text-destructive-ink">{error}</p>}
 
       {processing ? (
         <ProgressCard
@@ -268,7 +268,7 @@ export function CircleCropSettings() {
           href={downloadUrl}
           download
           data-testid="circle-crop-download"
-          className="w-full py-2.5 rounded-lg border border-primary text-primary font-medium flex items-center justify-center gap-2 hover:bg-primary/5"
+          className="w-full py-2.5 rounded-lg border border-primary text-primary-ink font-medium flex items-center justify-center gap-2 hover:bg-primary/5"
         >
           <Download className="h-4 w-4" />
           {t.common.download}
diff --git a/apps/web/src/components/tools/collage-preview.tsx b/apps/web/src/components/tools/collage-preview.tsx
index c4eb7c1a..ad1eacb1 100644
--- a/apps/web/src/components/tools/collage-preview.tsx
+++ b/apps/web/src/components/tools/collage-preview.tsx
@@ -137,7 +137,7 @@ function UploadArea() {
         <button
           type="button"
           onClick={handleClick}
-          className="flex items-center gap-2 px-6 py-2.5 rounded-lg border border-primary text-primary hover:bg-primary/5 transition-colors text-sm font-medium"
+          className="flex items-center gap-2 px-6 py-2.5 rounded-lg border border-primary text-primary-ink hover:bg-primary/5 transition-colors text-sm font-medium"
         >
           <Upload className="h-4 w-4" />
           Upload images for collage
@@ -520,7 +520,7 @@ function CollageCell({
             className={cn(
               "flex items-center gap-1 rounded px-1.5 py-1 text-[11px] font-medium backdrop-blur-sm transition-colors",
               transform.objectFit === "contain"
-                ? "bg-primary/80 text-white hover:bg-primary/90"
+                ? "bg-primary/80 text-primary-foreground hover:bg-primary/90"
                 : "bg-black/50 text-white hover:bg-black/70",
             )}
             title={transform.objectFit === "cover" ? "Fit entire image" : "Fill cell"}
diff --git a/apps/web/src/components/tools/collage-settings.tsx b/apps/web/src/components/tools/collage-settings.tsx
index b88524ef..1760f1cf 100644
--- a/apps/web/src/components/tools/collage-settings.tsx
+++ b/apps/web/src/components/tools/collage-settings.tsx
@@ -361,7 +361,7 @@ export function CollageSettings() {
       </CollapsibleSection>
 
       {/* Error */}
-      {error && <p className="text-xs text-red-500">{error}</p>}
+      {error && <p className="text-xs text-destructive-ink">{error}</p>}
 
       {/* Actions */}
       <button
@@ -380,7 +380,7 @@ export function CollageSettings() {
           href={resultUrl}
           download
           data-testid="collage-download"
-          className="w-full py-2.5 rounded-lg border border-primary text-primary font-medium flex items-center justify-center gap-2 hover:bg-primary/5"
+          className="w-full py-2.5 rounded-lg border border-primary text-primary-ink font-medium flex items-center justify-center gap-2 hover:bg-primary/5"
         >
           <Download className="h-4 w-4" />
           Download Collage
diff --git a/apps/web/src/components/tools/color-blindness-settings.tsx b/apps/web/src/components/tools/color-blindness-settings.tsx
index 19703a6f..b62514c9 100644
--- a/apps/web/src/components/tools/color-blindness-settings.tsx
+++ b/apps/web/src/components/tools/color-blindness-settings.tsx
@@ -121,7 +121,7 @@ export function ColorBlindnessSettings() {
         )}
       </div>
 
-      {error && <p className="text-xs text-red-500">{error}</p>}
+      {error && <p className="text-xs text-destructive-ink">{error}</p>}
 
       {originalSize != null && processedSize != null && (
         <div className="text-xs text-muted-foreground space-y-0.5">
@@ -158,7 +158,7 @@ export function ColorBlindnessSettings() {
           href={downloadUrl}
           download
           data-testid="color-blindness-download"
-          className="w-full py-2.5 rounded-lg border border-primary text-primary font-medium flex items-center justify-center gap-2 hover:bg-primary/5"
+          className="w-full py-2.5 rounded-lg border border-primary text-primary-ink font-medium flex items-center justify-center gap-2 hover:bg-primary/5"
         >
           <Download className="h-4 w-4" />
           {t.common.download}
diff --git a/apps/web/src/components/tools/color-palette-settings.tsx b/apps/web/src/components/tools/color-palette-settings.tsx
index ff1be741..250db8b3 100644
--- a/apps/web/src/components/tools/color-palette-settings.tsx
+++ b/apps/web/src/components/tools/color-palette-settings.tsx
@@ -130,7 +130,7 @@ export function ColorPaletteSettings() {
         {processing ? ts.extracting : ts.submit}
       </button>
 
-      {error && <p className="text-xs text-red-500">{error}</p>}
+      {error && <p className="text-xs text-destructive-ink">{error}</p>}
 
       {colors.length > 0 && (
         <div className="space-y-3">
@@ -157,7 +157,7 @@ export function ColorPaletteSettings() {
                 data-testid="color-palette-copy-css"
               >
                 {copiedExport === "css" ? (
-                  <Check className="h-3 w-3 text-green-500" />
+                  <Check className="h-3 w-3 text-success-ink" />
                 ) : (
                   <ClipboardCopy className="h-3 w-3" />
                 )}
@@ -170,7 +170,7 @@ export function ColorPaletteSettings() {
                 data-testid="color-palette-copy-json"
               >
                 {copiedExport === "json" ? (
-                  <Check className="h-3 w-3 text-green-500" />
+                  <Check className="h-3 w-3 text-success-ink" />
                 ) : (
                   <ClipboardCopy className="h-3 w-3" />
                 )}
@@ -196,7 +196,7 @@ export function ColorPaletteSettings() {
                   {color}
                 </span>
                 {copiedIdx === i ? (
-                  <Check className="h-3 w-3 text-green-500 shrink-0" />
+                  <Check className="h-3 w-3 text-success-ink shrink-0" />
                 ) : (
                   <Copy className="h-3 w-3 text-muted-foreground shrink-0" />
                 )}
diff --git a/apps/web/src/components/tools/color-settings.tsx b/apps/web/src/components/tools/color-settings.tsx
index a727fc45..9941b9f6 100644
--- a/apps/web/src/components/tools/color-settings.tsx
+++ b/apps/web/src/components/tools/color-settings.tsx
@@ -275,7 +275,9 @@ export function ColorControls({
       >
         {channelsOpen ? <ChevronDown className="h-3 w-3" /> : <ChevronRight className="h-3 w-3" />}
         Color Channels
-        {hasChannelChanges && <span className="ms-auto text-primary text-[10px]">modified</span>}
+        {hasChannelChanges && (
+          <span className="ms-auto text-primary-ink text-[10px]">modified</span>
+        )}
       </button>
       {channelsOpen && (
         <div className="space-y-2 ps-1">
@@ -285,7 +287,7 @@ export function ColorControls({
             onChange={setRed}
             min={0}
             max={200}
-            color="text-red-500"
+            color="text-destructive-ink"
           />
           <SliderControl
             label="Green"
@@ -293,7 +295,7 @@ export function ColorControls({
             onChange={setGreen}
             min={0}
             max={200}
-            color="text-green-500"
+            color="text-success-ink"
           />
           <SliderControl
             label="Blue"
@@ -301,7 +303,7 @@ export function ColorControls({
             onChange={setBlue}
             min={0}
             max={200}
-            color="text-blue-500"
+            color="text-blue-700 dark:text-blue-400"
           />
         </div>
       )}
@@ -379,7 +381,7 @@ export function ColorSettings({ toolId, onPreviewFilter }: ColorSettingsProps) {
     <form onSubmit={handleSubmit} className="space-y-3">
       <ColorControls toolId={toolId} onChange={setSettings} onPreviewFilter={onPreviewFilter} />
 
-      {error && <p className="text-xs text-red-500">{error}</p>}
+      {error && <p className="text-xs text-destructive-ink">{error}</p>}
 
       {originalSize != null && processedSize != null && (
         <div className="text-xs text-muted-foreground space-y-0.5">
@@ -414,7 +416,7 @@ export function ColorSettings({ toolId, onPreviewFilter }: ColorSettingsProps) {
           href={downloadUrl}
           download
           data-testid="adjust-colors-download"
-          className="w-full py-2.5 rounded-lg border border-primary text-primary font-medium flex items-center justify-center gap-2 hover:bg-primary/5"
+          className="w-full py-2.5 rounded-lg border border-primary text-primary-ink font-medium flex items-center justify-center gap-2 hover:bg-primary/5"
         >
           <Download className="h-4 w-4" />
           Download
diff --git a/apps/web/src/components/tools/colorize-settings.tsx b/apps/web/src/components/tools/colorize-settings.tsx
index e11044a7..bc7c6f6f 100644
--- a/apps/web/src/components/tools/colorize-settings.tsx
+++ b/apps/web/src/components/tools/colorize-settings.tsx
@@ -104,7 +104,7 @@ export function ColorizeSettings() {
         </p>
       </div>
 
-      {error && <p className="text-xs text-red-500">{error}</p>}
+      {error && <p className="text-xs text-destructive-ink">{error}</p>}
 
       {originalSize != null && processedSize != null && (
         <div className="text-xs text-muted-foreground space-y-0.5">
@@ -140,7 +140,7 @@ export function ColorizeSettings() {
           href={downloadUrl}
           download
           data-testid="colorize-download"
-          className="w-full py-2.5 rounded-lg border border-primary text-primary font-medium flex items-center justify-center gap-2 hover:bg-primary/5"
+          className="w-full py-2.5 rounded-lg border border-primary text-primary-ink font-medium flex items-center justify-center gap-2 hover:bg-primary/5"
         >
           <Download className="h-4 w-4" />
           Download
diff --git a/apps/web/src/components/tools/compare-settings.tsx b/apps/web/src/components/tools/compare-settings.tsx
index db7aa6a1..8a0675e3 100644
--- a/apps/web/src/components/tools/compare-settings.tsx
+++ b/apps/web/src/components/tools/compare-settings.tsx
@@ -72,7 +72,7 @@ export function CompareSettings() {
         </button>
       </div>
 
-      {error && <p className="text-xs text-red-500">{error}</p>}
+      {error && <p className="text-xs text-destructive-ink">{error}</p>}
 
       {similarity !== null && (
         <div className="p-3 rounded-lg bg-muted">
@@ -101,7 +101,7 @@ export function CompareSettings() {
           href={downloadUrl}
           download
           data-testid="compare-download"
-          className="w-full py-2.5 rounded-lg border border-primary text-primary font-medium flex items-center justify-center gap-2 hover:bg-primary/5"
+          className="w-full py-2.5 rounded-lg border border-primary text-primary-ink font-medium flex items-center justify-center gap-2 hover:bg-primary/5"
         >
           <Download className="h-4 w-4" />
           Download Diff Image
diff --git a/apps/web/src/components/tools/compose-settings.tsx b/apps/web/src/components/tools/compose-settings.tsx
index 4c75c60a..1b17794b 100644
--- a/apps/web/src/components/tools/compose-settings.tsx
+++ b/apps/web/src/components/tools/compose-settings.tsx
@@ -151,7 +151,7 @@ export function ComposeSettings() {
         </select>
       </div>
 
-      {error && <p className="text-xs text-red-500">{error}</p>}
+      {error && <p className="text-xs text-destructive-ink">{error}</p>}
 
       {originalSize != null && processedSize != null && (
         <div className="text-xs text-muted-foreground space-y-0.5">
@@ -176,7 +176,7 @@ export function ComposeSettings() {
           href={downloadUrl}
           download
           data-testid="compose-download"
-          className="w-full py-2.5 rounded-lg border border-primary text-primary font-medium flex items-center justify-center gap-2 hover:bg-primary/5"
+          className="w-full py-2.5 rounded-lg border border-primary text-primary-ink font-medium flex items-center justify-center gap-2 hover:bg-primary/5"
         >
           <Download className="h-4 w-4" />
           Download
diff --git a/apps/web/src/components/tools/compress-pdf-settings.tsx b/apps/web/src/components/tools/compress-pdf-settings.tsx
index 80289b77..18bddb05 100644
--- a/apps/web/src/components/tools/compress-pdf-settings.tsx
+++ b/apps/web/src/components/tools/compress-pdf-settings.tsx
@@ -51,15 +51,15 @@ export function CompressPdfSettings() {
         <p className="text-[11px] text-muted-foreground">{s.bestEffortHint}</p>
       )}
 
-      {error && <p className="text-xs text-red-500">{error}</p>}
+      {error && <p className="text-xs text-destructive-ink">{error}</p>}
 
       {targetMet === false && (
-        <p className="text-xs text-amber-600">
+        <p className="text-xs text-amber-700 dark:text-amber-400">
           {format(s.targetMissed, { target: targetLabel, size: achievedLabel })}
         </p>
       )}
       {targetMet === true && (
-        <p className="text-xs text-green-600">
+        <p className="text-xs text-success-ink">
           {format(s.targetReached, { target: targetLabel, size: achievedLabel })}
         </p>
       )}
diff --git a/apps/web/src/components/tools/compress-settings.tsx b/apps/web/src/components/tools/compress-settings.tsx
index fde7e00b..5794e19d 100644
--- a/apps/web/src/components/tools/compress-settings.tsx
+++ b/apps/web/src/components/tools/compress-settings.tsx
@@ -206,7 +206,7 @@ export function CompressSettings() {
       <CompressControls onChange={setSettings} />
 
       {/* Error */}
-      {error && <p className="text-xs text-red-500">{error}</p>}
+      {error && <p className="text-xs text-destructive-ink">{error}</p>}
 
       {/* Size info */}
       {originalSize != null && processedSize != null && (
@@ -255,7 +255,7 @@ export function CompressSettings() {
           href={downloadUrl}
           download
           data-testid="compress-download"
-          className="w-full py-2.5 rounded-lg border border-primary text-primary font-medium flex items-center justify-center gap-2 hover:bg-primary/5"
+          className="w-full py-2.5 rounded-lg border border-primary text-primary-ink font-medium flex items-center justify-center gap-2 hover:bg-primary/5"
         >
           <Download className="h-4 w-4" />
           {t.common.download}
diff --git a/apps/web/src/components/tools/compress-video-settings.tsx b/apps/web/src/components/tools/compress-video-settings.tsx
index 80fcbf2d..a5177311 100644
--- a/apps/web/src/components/tools/compress-video-settings.tsx
+++ b/apps/web/src/components/tools/compress-video-settings.tsx
@@ -65,7 +65,7 @@ export function CompressVideoSettings() {
         </select>
       </div>
 
-      {error && <p className="text-xs text-red-500">{error}</p>}
+      {error && <p className="text-xs text-destructive-ink">{error}</p>}
 
       {processing ? (
         <ProgressCard
diff --git a/apps/web/src/components/tools/content-aware-resize-settings.tsx b/apps/web/src/components/tools/content-aware-resize-settings.tsx
index fdfe7a48..ba105909 100644
--- a/apps/web/src/components/tools/content-aware-resize-settings.tsx
+++ b/apps/web/src/components/tools/content-aware-resize-settings.tsx
@@ -197,7 +197,7 @@ export function ContentAwareResizeSettings() {
     <form onSubmit={handleSubmit} className="space-y-4">
       <ContentAwareResizeControls onChange={handleSettingsChange} />
 
-      {error && <p className="text-xs text-red-500">{error}</p>}
+      {error && <p className="text-xs text-destructive-ink">{error}</p>}
 
       {processing ? (
         <ProgressCard
@@ -226,7 +226,7 @@ export function ContentAwareResizeSettings() {
           href={downloadUrl}
           download
           data-testid="content-aware-resize-download"
-          className="w-full py-2.5 rounded-lg border border-primary text-primary font-medium flex items-center justify-center gap-2 hover:bg-primary/5"
+          className="w-full py-2.5 rounded-lg border border-primary text-primary-ink font-medium flex items-center justify-center gap-2 hover:bg-primary/5"
         >
           <Download className="h-4 w-4" />
           Download
diff --git a/apps/web/src/components/tools/conversion-preset-settings.tsx b/apps/web/src/components/tools/conversion-preset-settings.tsx
index 75217532..ddc1e79b 100644
--- a/apps/web/src/components/tools/conversion-preset-settings.tsx
+++ b/apps/web/src/components/tools/conversion-preset-settings.tsx
@@ -130,7 +130,7 @@ export function ConversionPresetSettings() {
         </div>
       )}
 
-      {error && <p className="text-xs text-red-500">{error}</p>}
+      {error && <p className="text-xs text-destructive-ink">{error}</p>}
 
       {processing ? (
         <ProgressCard
@@ -159,7 +159,7 @@ export function ConversionPresetSettings() {
           href={downloadUrl}
           download
           data-testid="preset-download"
-          className="w-full py-2.5 rounded-lg border border-primary text-primary font-medium flex items-center justify-center gap-2 hover:bg-primary/5"
+          className="w-full py-2.5 rounded-lg border border-primary text-primary-ink font-medium flex items-center justify-center gap-2 hover:bg-primary/5"
         >
           <Download className="h-4 w-4" />
           {t.common.download}
diff --git a/apps/web/src/components/tools/convert-audio-settings.tsx b/apps/web/src/components/tools/convert-audio-settings.tsx
index a7bb5a32..cb4196b9 100644
--- a/apps/web/src/components/tools/convert-audio-settings.tsx
+++ b/apps/web/src/components/tools/convert-audio-settings.tsx
@@ -128,7 +128,7 @@ export function ConvertAudioSettings() {
         </select>
       </div>
 
-      {error && <p className="text-xs text-red-500">{error}</p>}
+      {error && <p className="text-xs text-destructive-ink">{error}</p>}
 
       {processing ? (
         <ProgressCard
diff --git a/apps/web/src/components/tools/convert-document-settings.tsx b/apps/web/src/components/tools/convert-document-settings.tsx
index 75870fbb..9ea6a19c 100644
--- a/apps/web/src/components/tools/convert-document-settings.tsx
+++ b/apps/web/src/components/tools/convert-document-settings.tsx
@@ -64,7 +64,7 @@ export function ConvertDocumentSettings() {
         </select>
       </div>
 
-      {error && <p className="text-xs text-red-500">{error}</p>}
+      {error && <p className="text-xs text-destructive-ink">{error}</p>}
 
       {processing ? (
         <ProgressCard
diff --git a/apps/web/src/components/tools/convert-presentation-settings.tsx b/apps/web/src/components/tools/convert-presentation-settings.tsx
index 1c709da4..0504d6ec 100644
--- a/apps/web/src/components/tools/convert-presentation-settings.tsx
+++ b/apps/web/src/components/tools/convert-presentation-settings.tsx
@@ -62,7 +62,7 @@ export function ConvertPresentationSettings() {
         </select>
       </div>
 
-      {error && <p className="text-xs text-red-500">{error}</p>}
+      {error && <p className="text-xs text-destructive-ink">{error}</p>}
 
       {processing ? (
         <ProgressCard
diff --git a/apps/web/src/components/tools/convert-settings.tsx b/apps/web/src/components/tools/convert-settings.tsx
index ee58ad05..afed7a61 100644
--- a/apps/web/src/components/tools/convert-settings.tsx
+++ b/apps/web/src/components/tools/convert-settings.tsx
@@ -174,7 +174,7 @@ export function ConvertSettings() {
       <ConvertControls onChange={setSettings} />
 
       {/* Error */}
-      {error && <p className="text-xs text-red-500">{error}</p>}
+      {error && <p className="text-xs text-destructive-ink">{error}</p>}
 
       {/* Size info */}
       {originalSize != null && processedSize != null && (
@@ -213,7 +213,7 @@ export function ConvertSettings() {
           href={downloadUrl}
           download
           data-testid="convert-download"
-          className="w-full py-2.5 rounded-lg border border-primary text-primary font-medium flex items-center justify-center gap-2 hover:bg-primary/5"
+          className="w-full py-2.5 rounded-lg border border-primary text-primary-ink font-medium flex items-center justify-center gap-2 hover:bg-primary/5"
         >
           <Download className="h-4 w-4" />
           {t.common.download}
diff --git a/apps/web/src/components/tools/convert-spreadsheet-settings.tsx b/apps/web/src/components/tools/convert-spreadsheet-settings.tsx
index ab397363..47d035ae 100644
--- a/apps/web/src/components/tools/convert-spreadsheet-settings.tsx
+++ b/apps/web/src/components/tools/convert-spreadsheet-settings.tsx
@@ -65,7 +65,7 @@ export function ConvertSpreadsheetSettings() {
 
       <p className="text-[10px] text-muted-foreground">{s.hint}</p>
 
-      {error && <p className="text-xs text-red-500">{error}</p>}
+      {error && <p className="text-xs text-destructive-ink">{error}</p>}
 
       {processing ? (
         <ProgressCard
diff --git a/apps/web/src/components/tools/convert-video-settings.tsx b/apps/web/src/components/tools/convert-video-settings.tsx
index cfb8867f..3b9db386 100644
--- a/apps/web/src/components/tools/convert-video-settings.tsx
+++ b/apps/web/src/components/tools/convert-video-settings.tsx
@@ -64,7 +64,7 @@ export function ConvertVideoSettings() {
         </select>
       </div>
 
-      {error && <p className="text-xs text-red-500">{error}</p>}
+      {error && <p className="text-xs text-destructive-ink">{error}</p>}
 
       {processing ? (
         <ProgressCard
diff --git a/apps/web/src/components/tools/create-zip-settings.tsx b/apps/web/src/components/tools/create-zip-settings.tsx
index 9eaf7da8..6f241e39 100644
--- a/apps/web/src/components/tools/create-zip-settings.tsx
+++ b/apps/web/src/components/tools/create-zip-settings.tsx
@@ -17,7 +17,7 @@ export function CreateZipSettings() {
 
   return (
     <div className="space-y-4">
-      {error && <p className="text-xs text-red-500">{error}</p>}
+      {error && <p className="text-xs text-destructive-ink">{error}</p>}
 
       {processing ? (
         <ProgressCard
diff --git a/apps/web/src/components/tools/crop-pdf-settings.tsx b/apps/web/src/components/tools/crop-pdf-settings.tsx
index 5899dea3..fb3266fd 100644
--- a/apps/web/src/components/tools/crop-pdf-settings.tsx
+++ b/apps/web/src/components/tools/crop-pdf-settings.tsx
@@ -44,7 +44,7 @@ export function CropPdfSettings() {
         />
       </div>
 
-      {error && <p className="text-xs text-red-500">{error}</p>}
+      {error && <p className="text-xs text-destructive-ink">{error}</p>}
 
       {processing ? (
         <ProgressCard
diff --git a/apps/web/src/components/tools/crop-settings.tsx b/apps/web/src/components/tools/crop-settings.tsx
index 3d931836..3c2f36e3 100644
--- a/apps/web/src/components/tools/crop-settings.tsx
+++ b/apps/web/src/components/tools/crop-settings.tsx
@@ -365,7 +365,7 @@ export function CropSettings({
       </label>
 
       {/* Error */}
-      {error && <p className="text-xs text-red-500">{error}</p>}
+      {error && <p className="text-xs text-destructive-ink">{error}</p>}
 
       {/* Process */}
       {processing ? (
@@ -396,7 +396,7 @@ export function CropSettings({
           href={downloadUrl}
           download
           data-testid="crop-download"
-          className="w-full py-2.5 rounded-lg border border-primary text-primary font-medium flex items-center justify-center gap-2 hover:bg-primary/5"
+          className="w-full py-2.5 rounded-lg border border-primary text-primary-ink font-medium flex items-center justify-center gap-2 hover:bg-primary/5"
         >
           <Download className="h-4 w-4" />
           {t.common.download}
diff --git a/apps/web/src/components/tools/crop-video-settings.tsx b/apps/web/src/components/tools/crop-video-settings.tsx
index e343fd28..4d96bbb2 100644
--- a/apps/web/src/components/tools/crop-video-settings.tsx
+++ b/apps/web/src/components/tools/crop-video-settings.tsx
@@ -88,7 +88,7 @@ export function CropVideoSettings() {
         />
       </div>
 
-      {error && <p className="text-xs text-red-500">{error}</p>}
+      {error && <p className="text-xs text-destructive-ink">{error}</p>}
 
       {processing ? (
         <ProgressCard
diff --git a/apps/web/src/components/tools/csv-excel-settings.tsx b/apps/web/src/components/tools/csv-excel-settings.tsx
index d5262d74..da95292c 100644
--- a/apps/web/src/components/tools/csv-excel-settings.tsx
+++ b/apps/web/src/components/tools/csv-excel-settings.tsx
@@ -48,7 +48,7 @@ export function CsvExcelSettings() {
         </div>
       )}
 
-      {error && <p className="text-xs text-red-500">{error}</p>}
+      {error && <p className="text-xs text-destructive-ink">{error}</p>}
 
       {processing ? (
         <ProgressCard
diff --git a/apps/web/src/components/tools/csv-json-settings.tsx b/apps/web/src/components/tools/csv-json-settings.tsx
index 71c430b9..f53c1b0a 100644
--- a/apps/web/src/components/tools/csv-json-settings.tsx
+++ b/apps/web/src/components/tools/csv-json-settings.tsx
@@ -38,7 +38,7 @@ export function CsvJsonSettings() {
         {s.pretty}
       </label>
 
-      {error && <p className="text-xs text-red-500">{error}</p>}
+      {error && <p className="text-xs text-destructive-ink">{error}</p>}
 
       {processing ? (
         <ProgressCard
diff --git a/apps/web/src/components/tools/duotone-settings.tsx b/apps/web/src/components/tools/duotone-settings.tsx
index 93c86d56..d8d473e5 100644
--- a/apps/web/src/components/tools/duotone-settings.tsx
+++ b/apps/web/src/components/tools/duotone-settings.tsx
@@ -185,7 +185,7 @@ export function DuotoneSettings({ onImageStyle, onImageOverlay }: DuotoneSetting
         />
       </div>
 
-      {error && <p className="text-xs text-red-500">{error}</p>}
+      {error && <p className="text-xs text-destructive-ink">{error}</p>}
 
       {processing ? (
         <ProgressCard
@@ -214,7 +214,7 @@ export function DuotoneSettings({ onImageStyle, onImageOverlay }: DuotoneSetting
           href={downloadUrl}
           download
           data-testid="duotone-download"
-          className="w-full py-2.5 rounded-lg border border-primary text-primary font-medium flex items-center justify-center gap-2 hover:bg-primary/5"
+          className="w-full py-2.5 rounded-lg border border-primary text-primary-ink font-medium flex items-center justify-center gap-2 hover:bg-primary/5"
         >
           <Download className="h-4 w-4" />
           {t.common.download}
diff --git a/apps/web/src/components/tools/edit-metadata-settings.tsx b/apps/web/src/components/tools/edit-metadata-settings.tsx
index 5c48aeb8..f289c474 100644
--- a/apps/web/src/components/tools/edit-metadata-settings.tsx
+++ b/apps/web/src/components/tools/edit-metadata-settings.tsx
@@ -587,9 +587,9 @@ export function EditMetadataSettings() {
           <div className="space-y-2.5">
             {gpsCoords && (
               <div className="flex items-start gap-2 px-2.5 py-2 rounded-md bg-amber-500/10 border border-amber-500/20">
-                <MapPin className="h-3.5 w-3.5 text-amber-500 shrink-0 mt-0.5" />
+                <MapPin className="h-3.5 w-3.5 text-amber-700 dark:text-amber-400 shrink-0 mt-0.5" />
                 <div className="flex-1 min-w-0">
-                  <p className="text-[11px] text-amber-600 dark:text-amber-400 font-medium">
+                  <p className="text-[11px] text-amber-700 dark:text-amber-400 font-medium">
                     Location data found
                   </p>
                   <p className="text-[10px] text-muted-foreground font-mono">
@@ -659,13 +659,13 @@ export function EditMetadataSettings() {
                 {form.keywords.map((kw) => (
                   <span
                     key={kw}
-                    className="inline-flex items-center gap-1 px-2 py-0.5 rounded-full bg-primary/10 text-primary text-[11px]"
+                    className="inline-flex items-center gap-1 px-2 py-0.5 rounded-full bg-primary/10 text-primary-ink text-[11px]"
                   >
                     {kw}
                     <button
                       type="button"
                       onClick={() => removeKeyword(kw)}
-                      className="hover:text-red-500"
+                      className="hover:text-destructive-ink"
                     >
                       <X className="h-2.5 w-2.5" />
                     </button>
@@ -783,7 +783,7 @@ export function EditMetadataSettings() {
                   <button
                     type="button"
                     onClick={() => deleteTemplate(t.name)}
-                    className="p-1 text-muted-foreground hover:text-red-500"
+                    className="p-1 text-muted-foreground hover:text-destructive-ink"
                   >
                     <X className="h-3 w-3" />
                   </button>
@@ -820,7 +820,7 @@ export function EditMetadataSettings() {
         </div>
       )}
 
-      {error && <p className="text-xs text-red-500">{error}</p>}
+      {error && <p className="text-xs text-destructive-ink">{error}</p>}
 
       {/* Changes summary */}
       {hasFile && changes.total > 0 && !processing && (
@@ -866,7 +866,7 @@ export function EditMetadataSettings() {
           href={downloadUrl}
           download
           data-testid="edit-metadata-download"
-          className="w-full py-2.5 rounded-lg border border-primary text-primary font-medium flex items-center justify-center gap-2 hover:bg-primary/5"
+          className="w-full py-2.5 rounded-lg border border-primary text-primary-ink font-medium flex items-center justify-center gap-2 hover:bg-primary/5"
         >
           <Download className="h-4 w-4" />
           Download
diff --git a/apps/web/src/components/tools/embed-subtitles-settings.tsx b/apps/web/src/components/tools/embed-subtitles-settings.tsx
index aa268ca8..c5f90cfd 100644
--- a/apps/web/src/components/tools/embed-subtitles-settings.tsx
+++ b/apps/web/src/components/tools/embed-subtitles-settings.tsx
@@ -35,7 +35,7 @@ export function EmbedSubtitlesSettings() {
         <p className="text-[10px] text-muted-foreground mt-0.5">{s.languageHint}</p>
       </div>
 
-      {error && <p className="text-xs text-red-500">{error}</p>}
+      {error && <p className="text-xs text-destructive-ink">{error}</p>}
 
       {processing ? (
         <ProgressCard
diff --git a/apps/web/src/components/tools/enhance-faces-settings.tsx b/apps/web/src/components/tools/enhance-faces-settings.tsx
index 5d7fbbdd..751bbc55 100644
--- a/apps/web/src/components/tools/enhance-faces-settings.tsx
+++ b/apps/web/src/components/tools/enhance-faces-settings.tsx
@@ -172,7 +172,7 @@ export function EnhanceFacesSettings() {
       <EnhanceFacesControls onChange={setSettings} />
 
       {/* Error */}
-      {error && <p className="text-xs text-red-500">{error}</p>}
+      {error && <p className="text-xs text-destructive-ink">{error}</p>}
 
       {/* Size info */}
       {originalSize != null && processedSize != null && (
@@ -209,7 +209,7 @@ export function EnhanceFacesSettings() {
           href={downloadUrl}
           download
           data-testid="enhance-faces-download"
-          className="w-full py-2.5 rounded-lg border border-primary text-primary font-medium flex items-center justify-center gap-2 hover:bg-primary/5"
+          className="w-full py-2.5 rounded-lg border border-primary text-primary-ink font-medium flex items-center justify-center gap-2 hover:bg-primary/5"
         >
           <Download className="h-4 w-4" />
           Download
diff --git a/apps/web/src/components/tools/epub-convert-settings.tsx b/apps/web/src/components/tools/epub-convert-settings.tsx
index c37cfde8..83d0cc89 100644
--- a/apps/web/src/components/tools/epub-convert-settings.tsx
+++ b/apps/web/src/components/tools/epub-convert-settings.tsx
@@ -49,7 +49,7 @@ export function EpubConvertSettings() {
 
       <p className="text-[10px] text-muted-foreground">{s.hint}</p>
 
-      {error && <p className="text-xs text-red-500">{error}</p>}
+      {error && <p className="text-xs text-destructive-ink">{error}</p>}
 
       {processing ? (
         <ProgressCard
diff --git a/apps/web/src/components/tools/erase-object-settings.tsx b/apps/web/src/components/tools/erase-object-settings.tsx
index 59981d67..75a78253 100644
--- a/apps/web/src/components/tools/erase-object-settings.tsx
+++ b/apps/web/src/components/tools/erase-object-settings.tsx
@@ -580,7 +580,7 @@ export function EraseObjectSettings({
       )}
 
       {/* Error */}
-      {error && <p className="text-xs text-red-500">{error}</p>}
+      {error && <p className="text-xs text-destructive-ink">{error}</p>}
 
       {/* Size info */}
       {currentEntry?.originalSize != null &&
@@ -621,7 +621,7 @@ export function EraseObjectSettings({
           href={currentEntry.processedUrl}
           download
           data-testid="erase-object-download"
-          className="w-full py-2.5 rounded-lg border border-primary text-primary font-medium flex items-center justify-center gap-2 hover:bg-primary/5"
+          className="w-full py-2.5 rounded-lg border border-primary text-primary-ink font-medium flex items-center justify-center gap-2 hover:bg-primary/5"
         >
           <Download className="h-4 w-4" />
           Download
diff --git a/apps/web/src/components/tools/excel-to-pdf-settings.tsx b/apps/web/src/components/tools/excel-to-pdf-settings.tsx
index 6cb8d1f0..290f306d 100644
--- a/apps/web/src/components/tools/excel-to-pdf-settings.tsx
+++ b/apps/web/src/components/tools/excel-to-pdf-settings.tsx
@@ -25,7 +25,7 @@ export function ExcelToPdfSettings() {
 
   return (
     <div className="space-y-4">
-      {error && <p className="text-xs text-red-500">{error}</p>}
+      {error && <p className="text-xs text-destructive-ink">{error}</p>}
 
       {processing ? (
         <ProgressCard
diff --git a/apps/web/src/components/tools/extract-audio-settings.tsx b/apps/web/src/components/tools/extract-audio-settings.tsx
index fc63a08b..61d93878 100644
--- a/apps/web/src/components/tools/extract-audio-settings.tsx
+++ b/apps/web/src/components/tools/extract-audio-settings.tsx
@@ -46,7 +46,7 @@ export function ExtractAudioSettings() {
         </select>
       </div>
 
-      {error && <p className="text-xs text-red-500">{error}</p>}
+      {error && <p className="text-xs text-destructive-ink">{error}</p>}
 
       {processing ? (
         <ProgressCard
diff --git a/apps/web/src/components/tools/extract-pages-settings.tsx b/apps/web/src/components/tools/extract-pages-settings.tsx
index c3dae93f..d08d904b 100644
--- a/apps/web/src/components/tools/extract-pages-settings.tsx
+++ b/apps/web/src/components/tools/extract-pages-settings.tsx
@@ -42,7 +42,7 @@ export function ExtractPagesSettings() {
         <p className="text-[10px] text-muted-foreground mt-0.5">{s.rangeHint}</p>
       </div>
 
-      {error && <p className="text-xs text-red-500">{error}</p>}
+      {error && <p className="text-xs text-destructive-ink">{error}</p>}
 
       {processing ? (
         <ProgressCard
diff --git a/apps/web/src/components/tools/extract-subtitles-settings.tsx b/apps/web/src/components/tools/extract-subtitles-settings.tsx
index be9f213e..4d4e6a24 100644
--- a/apps/web/src/components/tools/extract-subtitles-settings.tsx
+++ b/apps/web/src/components/tools/extract-subtitles-settings.tsx
@@ -25,7 +25,7 @@ export function ExtractSubtitlesSettings() {
 
   return (
     <div className="space-y-4">
-      {error && <p className="text-xs text-red-500">{error}</p>}
+      {error && <p className="text-xs text-destructive-ink">{error}</p>}
 
       {processing ? (
         <ProgressCard
diff --git a/apps/web/src/components/tools/extract-zip-settings.tsx b/apps/web/src/components/tools/extract-zip-settings.tsx
index 3d120351..e841f039 100644
--- a/apps/web/src/components/tools/extract-zip-settings.tsx
+++ b/apps/web/src/components/tools/extract-zip-settings.tsx
@@ -25,7 +25,7 @@ export function ExtractZipSettings() {
 
   return (
     <div className="space-y-4">
-      {error && <p className="text-xs text-red-500">{error}</p>}
+      {error && <p className="text-xs text-destructive-ink">{error}</p>}
 
       {processing ? (
         <ProgressCard
diff --git a/apps/web/src/components/tools/fade-audio-settings.tsx b/apps/web/src/components/tools/fade-audio-settings.tsx
index 88cbd73e..b212e6f8 100644
--- a/apps/web/src/components/tools/fade-audio-settings.tsx
+++ b/apps/web/src/components/tools/fade-audio-settings.tsx
@@ -61,7 +61,7 @@ export function FadeAudioSettings() {
         />
       </div>
 
-      {error && <p className="text-xs text-red-500">{error}</p>}
+      {error && <p className="text-xs text-destructive-ink">{error}</p>}
 
       {processing ? (
         <ProgressCard
diff --git a/apps/web/src/components/tools/favicon-settings.tsx b/apps/web/src/components/tools/favicon-settings.tsx
index 8f41f616..2e961094 100644
--- a/apps/web/src/components/tools/favicon-settings.tsx
+++ b/apps/web/src/components/tools/favicon-settings.tsx
@@ -351,7 +351,7 @@ export function FaviconSettings() {
         </p>
       </div>
 
-      {error && <p className="text-xs text-red-500">{error}</p>}
+      {error && <p className="text-xs text-destructive-ink">{error}</p>}
 
       {busy ? (
         <ProgressCard
@@ -385,7 +385,7 @@ export function FaviconSettings() {
           href={downloadUrl}
           download="favicons.zip"
           data-testid="favicon-download"
-          className="w-full py-2.5 rounded-lg border border-primary text-primary font-medium flex items-center justify-center gap-2 hover:bg-primary/5"
+          className="w-full py-2.5 rounded-lg border border-primary text-primary-ink font-medium flex items-center justify-center gap-2 hover:bg-primary/5"
         >
           <Download className="h-4 w-4" />
           Download Favicons ZIP
diff --git a/apps/web/src/components/tools/find-duplicates-results.tsx b/apps/web/src/components/tools/find-duplicates-results.tsx
index 6e06e1ce..b7b567c5 100644
--- a/apps/web/src/components/tools/find-duplicates-results.tsx
+++ b/apps/web/src/components/tools/find-duplicates-results.tsx
@@ -27,19 +27,21 @@ function OverviewGrid() {
         <div className="w-px h-4 bg-border" />
         <div className="flex items-center gap-1.5">
           <span className="text-muted-foreground">Duplicate groups:</span>
-          <span className="text-yellow-500 font-semibold">{results.duplicateGroups.length}</span>
+          <span className="text-amber-700 dark:text-amber-400 font-semibold">
+            {results.duplicateGroups.length}
+          </span>
         </div>
         <div className="w-px h-4 bg-border" />
         <div className="flex items-center gap-1.5">
           <span className="text-muted-foreground">Unique:</span>
-          <span className="text-green-500 font-semibold">{results.uniqueImages}</span>
+          <span className="text-success-ink font-semibold">{results.uniqueImages}</span>
         </div>
         {results.spaceSaveable > 0 && (
           <>
             <div className="w-px h-4 bg-border" />
             <div className="flex items-center gap-1.5">
               <span className="text-muted-foreground">Space saveable:</span>
-              <span className="text-primary font-semibold">
+              <span className="text-primary-ink font-semibold">
                 {formatFileSize(results.spaceSaveable)}
               </span>
             </div>
@@ -50,7 +52,7 @@ function OverviewGrid() {
       {results.duplicateGroups.length === 0 ? (
         <div className="flex flex-col items-center justify-center py-16 gap-3">
           <div className="w-12 h-12 rounded-full bg-green-100 dark:bg-green-900/30 flex items-center justify-center">
-            <Search className="h-6 w-6 text-green-600 dark:text-green-400" />
+            <Search className="h-6 w-6 text-success-ink" />
           </div>
           <p className="text-sm font-medium text-foreground">No duplicates found</p>
           <p className="text-xs text-muted-foreground">
@@ -147,7 +149,7 @@ function DetailComparison() {
         <button
           type="button"
           onClick={() => setViewMode("overview")}
-          className="flex items-center gap-1 text-xs text-primary hover:text-primary/80"
+          className="flex items-center gap-1 text-xs text-primary-ink hover:text-primary-ink-strong"
         >
           <ArrowLeft className="h-3.5 w-3.5" />
           Back to Overview
@@ -173,7 +175,7 @@ function DetailComparison() {
             <ChevronRight className="h-3.5 w-3.5" />
           </button>
         </div>
-        <span className="text-xs font-medium text-yellow-500">
+        <span className="text-xs font-medium text-amber-700 dark:text-amber-400">
           {Math.max(...group.files.map((f) => f.similarity))}% Similar
         </span>
       </div>
@@ -228,7 +230,7 @@ function DetailComparison() {
                   <span className="text-foreground text-end">{file.format.toUpperCase()}</span>
                   <span className="text-muted-foreground">Similarity</span>
                   <span
-                    className={`text-end font-medium ${file.similarity === 100 ? "text-green-500" : "text-yellow-500"}`}
+                    className={`text-end font-medium ${file.similarity === 100 ? "text-success-ink" : "text-amber-700 dark:text-amber-400"}`}
                   >
                     {file.similarity}%
                   </span>
diff --git a/apps/web/src/components/tools/find-duplicates-settings.tsx b/apps/web/src/components/tools/find-duplicates-settings.tsx
index 81bca59a..58b24e77 100644
--- a/apps/web/src/components/tools/find-duplicates-settings.tsx
+++ b/apps/web/src/components/tools/find-duplicates-settings.tsx
@@ -276,7 +276,7 @@ export function FindDuplicatesSettings() {
 
       {activeDesc && <p className="text-[10px] text-muted-foreground">{activeDesc}</p>}
 
-      {error && <p className="text-xs text-red-500">{error}</p>}
+      {error && <p className="text-xs text-destructive-ink">{error}</p>}
 
       {/* Scan button + progress */}
       {!results && (
@@ -317,16 +317,18 @@ export function FindDuplicatesSettings() {
             </div>
             <div className="flex justify-between">
               <span className="text-muted-foreground">Duplicate groups</span>
-              <span className="text-yellow-500 font-medium">{results.duplicateGroups.length}</span>
+              <span className="text-amber-700 dark:text-amber-400 font-medium">
+                {results.duplicateGroups.length}
+              </span>
             </div>
             <div className="flex justify-between">
               <span className="text-muted-foreground">Unique images</span>
-              <span className="text-green-500 font-medium">{results.uniqueImages}</span>
+              <span className="text-success-ink font-medium">{results.uniqueImages}</span>
             </div>
             {results.spaceSaveable > 0 && (
               <div className="flex justify-between">
                 <span className="text-muted-foreground">Space saveable</span>
-                <span className="text-primary font-medium">
+                <span className="text-primary-ink font-medium">
                   {formatFileSize(results.spaceSaveable)}
                 </span>
               </div>
@@ -334,14 +336,16 @@ export function FindDuplicatesSettings() {
             {results.skippedFiles && results.skippedFiles.length > 0 && (
               <div className="flex justify-between">
                 <span className="text-muted-foreground">Skipped</span>
-                <span className="text-orange-500 font-medium">{results.skippedFiles.length}</span>
+                <span className="text-amber-700 dark:text-amber-400 font-medium">
+                  {results.skippedFiles.length}
+                </span>
               </div>
             )}
           </div>
 
           {results.skippedFiles && results.skippedFiles.length > 0 && (
             <details className="text-xs">
-              <summary className="text-orange-500 cursor-pointer">
+              <summary className="text-amber-700 dark:text-amber-400 cursor-pointer">
                 {results.skippedFiles.length} file{results.skippedFiles.length > 1 ? "s" : ""} could
                 not be analyzed
               </summary>
@@ -369,7 +373,7 @@ export function FindDuplicatesSettings() {
               <button
                 type="button"
                 onClick={handleDownloadUnique}
-                className="w-full py-2.5 rounded-lg border border-primary text-primary font-medium flex items-center justify-center gap-2 hover:bg-primary/5"
+                className="w-full py-2.5 rounded-lg border border-primary text-primary-ink font-medium flex items-center justify-center gap-2 hover:bg-primary/5"
               >
                 <Download className="h-4 w-4" />
                 Download Unique Only
diff --git a/apps/web/src/components/tools/flatten-pdf-settings.tsx b/apps/web/src/components/tools/flatten-pdf-settings.tsx
index aa601620..5429219d 100644
--- a/apps/web/src/components/tools/flatten-pdf-settings.tsx
+++ b/apps/web/src/components/tools/flatten-pdf-settings.tsx
@@ -25,7 +25,7 @@ export function FlattenPdfSettings() {
 
   return (
     <div className="space-y-4">
-      {error && <p className="text-xs text-red-500">{error}</p>}
+      {error && <p className="text-xs text-destructive-ink">{error}</p>}
 
       {processing ? (
         <ProgressCard
diff --git a/apps/web/src/components/tools/gif-to-video-settings.tsx b/apps/web/src/components/tools/gif-to-video-settings.tsx
index 8d2bbd86..03ae36b4 100644
--- a/apps/web/src/components/tools/gif-to-video-settings.tsx
+++ b/apps/web/src/components/tools/gif-to-video-settings.tsx
@@ -45,7 +45,7 @@ export function GifToVideoSettings() {
         </select>
       </div>
 
-      {error && <p className="text-xs text-red-500">{error}</p>}
+      {error && <p className="text-xs text-destructive-ink">{error}</p>}
 
       {processing ? (
         <ProgressCard
diff --git a/apps/web/src/components/tools/gif-tools-settings.tsx b/apps/web/src/components/tools/gif-tools-settings.tsx
index f0db2840..144c0e32 100644
--- a/apps/web/src/components/tools/gif-tools-settings.tsx
+++ b/apps/web/src/components/tools/gif-tools-settings.tsx
@@ -194,7 +194,7 @@ export function GifToolsControls({ settings: initialSettings, onChange }: GifToo
             </>
           ) : (
             <>
-              <span className="text-amber-500 font-medium">Static image</span>
+              <span className="text-amber-700 dark:text-amber-400 font-medium">Static image</span>
               <span className="text-border">|</span>
               <span>
                 {info.width}x{info.height}
@@ -673,7 +673,7 @@ export function GifToolsSettings() {
     <div className="space-y-4">
       <GifToolsControls onChange={setSettings} />
 
-      {error && <p className="text-xs text-red-500">{error}</p>}
+      {error && <p className="text-xs text-destructive-ink">{error}</p>}
 
       {originalSize != null && processedSize != null && (
         <div className="text-xs text-muted-foreground space-y-0.5">
@@ -717,7 +717,7 @@ export function GifToolsSettings() {
           href={downloadUrl}
           download
           data-testid="gif-tools-download"
-          className="w-full py-2.5 rounded-lg border border-primary text-primary font-medium flex items-center justify-center gap-2 hover:bg-primary/5"
+          className="w-full py-2.5 rounded-lg border border-primary text-primary-ink font-medium flex items-center justify-center gap-2 hover:bg-primary/5"
         >
           <Download className="h-4 w-4" />
           Download
diff --git a/apps/web/src/components/tools/gif-webp-settings.tsx b/apps/web/src/components/tools/gif-webp-settings.tsx
index 30a9daf7..227ee6e0 100644
--- a/apps/web/src/components/tools/gif-webp-settings.tsx
+++ b/apps/web/src/components/tools/gif-webp-settings.tsx
@@ -106,7 +106,7 @@ export function GifWebpSettings() {
         />
       </div>
 
-      {error && <p className="text-xs text-red-500">{error}</p>}
+      {error && <p className="text-xs text-destructive-ink">{error}</p>}
 
       {processing ? (
         <ProgressCard
@@ -136,7 +136,7 @@ export function GifWebpSettings() {
             href={downloadUrl}
             download
             data-testid="gif-webp-download"
-            className="w-full py-2.5 rounded-lg border border-primary text-primary font-medium flex items-center justify-center gap-2 hover:bg-primary/5"
+            className="w-full py-2.5 rounded-lg border border-primary text-primary-ink font-medium flex items-center justify-center gap-2 hover:bg-primary/5"
           >
             <Download className="h-4 w-4" />
             {t.common.download}
diff --git a/apps/web/src/components/tools/grayscale-pdf-settings.tsx b/apps/web/src/components/tools/grayscale-pdf-settings.tsx
index 9c2bf776..73694473 100644
--- a/apps/web/src/components/tools/grayscale-pdf-settings.tsx
+++ b/apps/web/src/components/tools/grayscale-pdf-settings.tsx
@@ -25,7 +25,7 @@ export function GrayscalePdfSettings() {
 
   return (
     <div className="space-y-4">
-      {error && <p className="text-xs text-red-500">{error}</p>}
+      {error && <p className="text-xs text-destructive-ink">{error}</p>}
 
       {processing ? (
         <ProgressCard
diff --git a/apps/web/src/components/tools/histogram-settings.tsx b/apps/web/src/components/tools/histogram-settings.tsx
index b0ee87e1..8df4100b 100644
--- a/apps/web/src/components/tools/histogram-settings.tsx
+++ b/apps/web/src/components/tools/histogram-settings.tsx
@@ -91,7 +91,7 @@ export function HistogramSettings() {
         Generates an RGB histogram chart showing the color distribution of the image.
       </p>
 
-      {error && <p className="text-xs text-red-500">{error}</p>}
+      {error && <p className="text-xs text-destructive-ink">{error}</p>}
 
       {processing ? (
         <ProgressCard
@@ -199,7 +199,7 @@ export function HistogramSettings() {
                   </span>
                 </div>
               ))}
-              <p className="col-span-2 text-[9px] text-muted-foreground/60 mt-0.5">
+              <p className="col-span-2 text-[9px] text-muted-foreground mt-0.5">
                 mean / median / stdev
               </p>
             </div>
@@ -212,7 +212,7 @@ export function HistogramSettings() {
           href={downloadUrl}
           download
           data-testid="histogram-download"
-          className="w-full py-2.5 rounded-lg border border-primary text-primary font-medium flex items-center justify-center gap-2 hover:bg-primary/5"
+          className="w-full py-2.5 rounded-lg border border-primary text-primary-ink font-medium flex items-center justify-center gap-2 hover:bg-primary/5"
         >
           <Download className="h-4 w-4" />
           {t.common.download}
diff --git a/apps/web/src/components/tools/html-to-pdf-settings.tsx b/apps/web/src/components/tools/html-to-pdf-settings.tsx
index a8466cbe..cd841041 100644
--- a/apps/web/src/components/tools/html-to-pdf-settings.tsx
+++ b/apps/web/src/components/tools/html-to-pdf-settings.tsx
@@ -27,7 +27,7 @@ export function HtmlToPdfSettings() {
     <div className="space-y-4">
       <p className="text-[10px] text-muted-foreground">{s.hint}</p>
 
-      {error && <p className="text-xs text-red-500">{error}</p>}
+      {error && <p className="text-xs text-destructive-ink">{error}</p>}
 
       {processing ? (
         <ProgressCard
diff --git a/apps/web/src/components/tools/image-enhancement-settings.tsx b/apps/web/src/components/tools/image-enhancement-settings.tsx
index e6617782..220bda3a 100644
--- a/apps/web/src/components/tools/image-enhancement-settings.tsx
+++ b/apps/web/src/components/tools/image-enhancement-settings.tsx
@@ -380,7 +380,7 @@ export function ImageEnhancementControls({
                     onClick={() => toggleKey && toggleCorrection(toggleKey)}
                     className={`inline-flex items-center gap-1 text-[11px] px-2 py-1 rounded-full transition-colors ${
                       isEnabled
-                        ? "bg-amber-500/15 text-amber-600 dark:text-amber-400"
+                        ? "bg-amber-500/15 text-amber-700 dark:text-amber-400"
                         : "bg-muted text-muted-foreground line-through"
                     }`}
                   >
@@ -462,7 +462,7 @@ export function ImageEnhancementSettings({
     <form onSubmit={handleSubmit} className="space-y-3">
       <ImageEnhancementControls onChange={setSettings} onPreviewFilter={onPreviewFilter} />
 
-      {error && <p className="text-xs text-red-500">{error}</p>}
+      {error && <p className="text-xs text-destructive-ink">{error}</p>}
 
       {originalSize != null && processedSize != null && (
         <div className="text-xs text-muted-foreground space-y-0.5">
@@ -499,7 +499,7 @@ export function ImageEnhancementSettings({
           href={downloadUrl}
           download
           data-testid="image-enhancement-download"
-          className="w-full py-2.5 rounded-lg border border-primary text-primary font-medium flex items-center justify-center gap-2 hover:bg-primary/5"
+          className="w-full py-2.5 rounded-lg border border-primary text-primary-ink font-medium flex items-center justify-center gap-2 hover:bg-primary/5"
         >
           <Download className="h-4 w-4" />
           Download
diff --git a/apps/web/src/components/tools/image-pad-settings.tsx b/apps/web/src/components/tools/image-pad-settings.tsx
index 13f2028b..fd9355c3 100644
--- a/apps/web/src/components/tools/image-pad-settings.tsx
+++ b/apps/web/src/components/tools/image-pad-settings.tsx
@@ -270,7 +270,7 @@ export function ImagePadSettings({ onImageStyle, onImageOverlay }: ImagePadSetti
         />
       </div>
 
-      {error && <p className="text-xs text-red-500">{error}</p>}
+      {error && <p className="text-xs text-destructive-ink">{error}</p>}
 
       {processing ? (
         <ProgressCard
@@ -299,7 +299,7 @@ export function ImagePadSettings({ onImageStyle, onImageOverlay }: ImagePadSetti
           href={downloadUrl}
           download
           data-testid="image-pad-download"
-          className="w-full py-2.5 rounded-lg border border-primary text-primary font-medium flex items-center justify-center gap-2 hover:bg-primary/5"
+          className="w-full py-2.5 rounded-lg border border-primary text-primary-ink font-medium flex items-center justify-center gap-2 hover:bg-primary/5"
         >
           <Download className="h-4 w-4" />
           {t.common.download}
diff --git a/apps/web/src/components/tools/image-to-base64-results.tsx b/apps/web/src/components/tools/image-to-base64-results.tsx
index f7614554..dad39dff 100644
--- a/apps/web/src/components/tools/image-to-base64-results.tsx
+++ b/apps/web/src/components/tools/image-to-base64-results.tsx
@@ -117,7 +117,9 @@ function FileResult({ result }: { result: Base64Result }) {
           <p className="text-[11px] text-muted-foreground">
             {result.width}x{result.height} &middot; {formatBytes(result.originalSize)} &rarr;{" "}
             {formatBytes(result.encodedSize)}{" "}
-            <span className={result.overheadPercent > 50 ? "text-amber-500" : ""}>
+            <span
+              className={result.overheadPercent > 50 ? "text-amber-700 dark:text-amber-400" : ""}
+            >
               (+{result.overheadPercent}%)
             </span>
           </p>
@@ -133,7 +135,7 @@ function FileResult({ result }: { result: Base64Result }) {
             onClick={() => setActiveTab(t.id)}
             className={`px-3 py-1.5 text-xs whitespace-nowrap transition-colors ${
               activeTab === t.id
-                ? "text-primary border-b-2 border-primary font-medium"
+                ? "text-primary-ink border-b-2 border-primary font-medium"
                 : "text-muted-foreground hover:text-foreground"
             }`}
           >
@@ -308,8 +310,10 @@ export function ImageToBase64Results() {
         ) : currentError ? (
           <div className="flex items-center justify-center h-full">
             <div className="text-center">
-              <p className="text-sm text-red-500 font-medium mb-1">{currentError.filename}</p>
-              <p className="text-xs text-red-500/80">{currentError.error}</p>
+              <p className="text-sm text-destructive-ink font-medium mb-1">
+                {currentError.filename}
+              </p>
+              <p className="text-xs text-destructive-ink">{currentError.error}</p>
             </div>
           </div>
         ) : (
diff --git a/apps/web/src/components/tools/image-to-base64-settings.tsx b/apps/web/src/components/tools/image-to-base64-settings.tsx
index 30366e98..3942e426 100644
--- a/apps/web/src/components/tools/image-to-base64-settings.tsx
+++ b/apps/web/src/components/tools/image-to-base64-settings.tsx
@@ -173,7 +173,7 @@ export function ImageToBase64Settings() {
           : `Convert to Base64${files.length > 1 ? ` (${files.length})` : ""}`}
       </button>
 
-      {error && <p className="text-xs text-red-500">{error}</p>}
+      {error && <p className="text-xs text-destructive-ink">{error}</p>}
     </div>
   );
 }
diff --git a/apps/web/src/components/tools/image-to-pdf-settings.tsx b/apps/web/src/components/tools/image-to-pdf-settings.tsx
index 8f797623..dc9c1abc 100644
--- a/apps/web/src/components/tools/image-to-pdf-settings.tsx
+++ b/apps/web/src/components/tools/image-to-pdf-settings.tsx
@@ -97,7 +97,7 @@ function PdfPagePreview({
           {/* Empty state placeholder */}
           {!imgUrl && (
             <div className="absolute inset-0 flex items-center justify-center">
-              <span className="text-[10px] text-muted-foreground/40">No image</span>
+              <span className="text-[10px] text-muted-foreground">No image</span>
             </div>
           )}
         </div>
@@ -365,7 +365,7 @@ export function ImageToPdfSettings() {
         imgUrl={entries[selectedIndex]?.blobUrl ?? entries[0]?.blobUrl ?? null}
       />
 
-      {error && <p className="text-xs text-red-500">{error}</p>}
+      {error && <p className="text-xs text-destructive-ink">{error}</p>}
 
       {busy ? (
         <ProgressCard
@@ -397,7 +397,7 @@ export function ImageToPdfSettings() {
           href={downloadUrl}
           download
           data-testid="image-to-pdf-download"
-          className="w-full py-2.5 rounded-lg border border-primary text-primary font-medium flex items-center justify-center gap-2 hover:bg-primary/5"
+          className="w-full py-2.5 rounded-lg border border-primary text-primary-ink font-medium flex items-center justify-center gap-2 hover:bg-primary/5"
         >
           <Download className="h-4 w-4" />
           {collate ? "Download PDF" : "Download ZIP"}
@@ -409,8 +409,8 @@ export function ImageToPdfSettings() {
           data-testid="image-to-pdf-compression-result"
           className={`text-xs px-3 py-2 rounded ${
             compressionResult.targetMet
-              ? "bg-green-500/10 text-green-600"
-              : "bg-amber-500/10 text-amber-600"
+              ? "bg-green-500/10 text-success-ink"
+              : "bg-amber-500/10 text-amber-700 dark:text-amber-400"
           }`}
         >
           {compressionResult.targetMet ? (
diff --git a/apps/web/src/components/tools/images-to-video-settings.tsx b/apps/web/src/components/tools/images-to-video-settings.tsx
index 78ddd518..8df9c9fc 100644
--- a/apps/web/src/components/tools/images-to-video-settings.tsx
+++ b/apps/web/src/components/tools/images-to-video-settings.tsx
@@ -72,7 +72,7 @@ export function ImagesToVideoSettings() {
         />
       </div>
 
-      {error && <p className="text-xs text-red-500">{error}</p>}
+      {error && <p className="text-xs text-destructive-ink">{error}</p>}
 
       {processing ? (
         <ProgressCard
diff --git a/apps/web/src/components/tools/info-settings.tsx b/apps/web/src/components/tools/info-settings.tsx
index b7932256..261e9bb5 100644
--- a/apps/web/src/components/tools/info-settings.tsx
+++ b/apps/web/src/components/tools/info-settings.tsx
@@ -138,7 +138,7 @@ export function InfoSettings() {
         {processing ? ts.reading : ts.readInfo}
       </button>
 
-      {error && <p className="text-xs text-red-500">{error}</p>}
+      {error && <p className="text-xs text-destructive-ink">{error}</p>}
 
       {info && (
         <div className="space-y-3">
diff --git a/apps/web/src/components/tools/json-xml-settings.tsx b/apps/web/src/components/tools/json-xml-settings.tsx
index 5fa2687d..1cc4a163 100644
--- a/apps/web/src/components/tools/json-xml-settings.tsx
+++ b/apps/web/src/components/tools/json-xml-settings.tsx
@@ -38,7 +38,7 @@ export function JsonXmlSettings() {
         {s.pretty}
       </label>
 
-      {error && <p className="text-xs text-red-500">{error}</p>}
+      {error && <p className="text-xs text-destructive-ink">{error}</p>}
 
       {processing ? (
         <ProgressCard
diff --git a/apps/web/src/components/tools/linearize-pdf-settings.tsx b/apps/web/src/components/tools/linearize-pdf-settings.tsx
index d21ad16f..319e075d 100644
--- a/apps/web/src/components/tools/linearize-pdf-settings.tsx
+++ b/apps/web/src/components/tools/linearize-pdf-settings.tsx
@@ -25,7 +25,7 @@ export function LinearizePdfSettings() {
 
   return (
     <div className="space-y-4">
-      {error && <p className="text-xs text-red-500">{error}</p>}
+      {error && <p className="text-xs text-destructive-ink">{error}</p>}
 
       {processing ? (
         <ProgressCard
diff --git a/apps/web/src/components/tools/lqip-placeholder-settings.tsx b/apps/web/src/components/tools/lqip-placeholder-settings.tsx
index f0a475e4..f7ce58d7 100644
--- a/apps/web/src/components/tools/lqip-placeholder-settings.tsx
+++ b/apps/web/src/components/tools/lqip-placeholder-settings.tsx
@@ -156,7 +156,7 @@ export function LqipPlaceholderSettings() {
         </div>
       )}
 
-      {error && <p className="text-xs text-red-500">{error}</p>}
+      {error && <p className="text-xs text-destructive-ink">{error}</p>}
 
       {processing ? (
         <ProgressCard
@@ -188,7 +188,7 @@ export function LqipPlaceholderSettings() {
           href={downloadUrl}
           download
           data-testid="lqip-placeholder-download"
-          className="w-full py-2.5 rounded-lg border border-primary text-primary font-medium flex items-center justify-center gap-2 hover:bg-primary/5"
+          className="w-full py-2.5 rounded-lg border border-primary text-primary-ink font-medium flex items-center justify-center gap-2 hover:bg-primary/5"
         >
           <Download className="h-4 w-4" />
           {t.common.download}
@@ -267,7 +267,7 @@ function CopyBlock({
           onClick={onCopy}
           className="flex items-center gap-1 text-xs text-muted-foreground hover:text-foreground"
         >
-          {copied ? <Check className="h-3 w-3 text-green-500" /> : <Copy className="h-3 w-3" />}
+          {copied ? <Check className="h-3 w-3 text-success-ink" /> : <Copy className="h-3 w-3" />}
           Copy
         </button>
       </div>
diff --git a/apps/web/src/components/tools/markdown-to-docx-settings.tsx b/apps/web/src/components/tools/markdown-to-docx-settings.tsx
index d354b329..731ee42b 100644
--- a/apps/web/src/components/tools/markdown-to-docx-settings.tsx
+++ b/apps/web/src/components/tools/markdown-to-docx-settings.tsx
@@ -25,7 +25,7 @@ export function MarkdownToDocxSettings() {
 
   return (
     <div className="space-y-4">
-      {error && <p className="text-xs text-red-500">{error}</p>}
+      {error && <p className="text-xs text-destructive-ink">{error}</p>}
 
       {processing ? (
         <ProgressCard
diff --git a/apps/web/src/components/tools/markdown-to-html-settings.tsx b/apps/web/src/components/tools/markdown-to-html-settings.tsx
index 398d2fe3..51dbd777 100644
--- a/apps/web/src/components/tools/markdown-to-html-settings.tsx
+++ b/apps/web/src/components/tools/markdown-to-html-settings.tsx
@@ -27,7 +27,7 @@ export function MarkdownToHtmlSettings() {
     <div className="space-y-4">
       <p className="text-[10px] text-muted-foreground">{s.hint}</p>
 
-      {error && <p className="text-xs text-red-500">{error}</p>}
+      {error && <p className="text-xs text-destructive-ink">{error}</p>}
 
       {processing ? (
         <ProgressCard
diff --git a/apps/web/src/components/tools/markdown-to-pdf-settings.tsx b/apps/web/src/components/tools/markdown-to-pdf-settings.tsx
index 9ee5fb0f..f0fdb8fe 100644
--- a/apps/web/src/components/tools/markdown-to-pdf-settings.tsx
+++ b/apps/web/src/components/tools/markdown-to-pdf-settings.tsx
@@ -27,7 +27,7 @@ export function MarkdownToPdfSettings() {
     <div className="space-y-4">
       <p className="text-[10px] text-muted-foreground">{s.hint}</p>
 
-      {error && <p className="text-xs text-red-500">{error}</p>}
+      {error && <p className="text-xs text-destructive-ink">{error}</p>}
 
       {processing ? (
         <ProgressCard
diff --git a/apps/web/src/components/tools/meme-generator-preview.tsx b/apps/web/src/components/tools/meme-generator-preview.tsx
index e2aebee7..c8eb4c98 100644
--- a/apps/web/src/components/tools/meme-generator-preview.tsx
+++ b/apps/web/src/components/tools/meme-generator-preview.tsx
@@ -452,7 +452,7 @@ function ErrorView() {
         <button
           type="button"
           onClick={() => window.location.reload()}
-          className="text-xs text-primary hover:underline"
+          className="text-xs text-primary-ink hover:underline"
         >
           Retry
         </button>
diff --git a/apps/web/src/components/tools/merge-audio-settings.tsx b/apps/web/src/components/tools/merge-audio-settings.tsx
index 535f549c..ea14d619 100644
--- a/apps/web/src/components/tools/merge-audio-settings.tsx
+++ b/apps/web/src/components/tools/merge-audio-settings.tsx
@@ -41,7 +41,7 @@ export function MergeAudioSettings() {
 
       <p className="text-[10px] text-muted-foreground">{s["order-hint"]}</p>
 
-      {error && <p className="text-xs text-red-500">{error}</p>}
+      {error && <p className="text-xs text-destructive-ink">{error}</p>}
 
       {processing ? (
         <ProgressCard
diff --git a/apps/web/src/components/tools/merge-csvs-settings.tsx b/apps/web/src/components/tools/merge-csvs-settings.tsx
index 1e02764e..0f61ed74 100644
--- a/apps/web/src/components/tools/merge-csvs-settings.tsx
+++ b/apps/web/src/components/tools/merge-csvs-settings.tsx
@@ -17,7 +17,7 @@ export function MergeCsvsSettings() {
 
   return (
     <div className="space-y-4">
-      {error && <p className="text-xs text-red-500">{error}</p>}
+      {error && <p className="text-xs text-destructive-ink">{error}</p>}
 
       {processing ? (
         <ProgressCard
diff --git a/apps/web/src/components/tools/merge-pdf-settings.tsx b/apps/web/src/components/tools/merge-pdf-settings.tsx
index f02cafc7..c59d8486 100644
--- a/apps/web/src/components/tools/merge-pdf-settings.tsx
+++ b/apps/web/src/components/tools/merge-pdf-settings.tsx
@@ -24,7 +24,7 @@ export function MergePdfSettings() {
         </p>
       )}
 
-      {error && <p className="text-xs text-red-500">{error}</p>}
+      {error && <p className="text-xs text-destructive-ink">{error}</p>}
 
       {processing ? (
         <ProgressCard
diff --git a/apps/web/src/components/tools/merge-videos-settings.tsx b/apps/web/src/components/tools/merge-videos-settings.tsx
index 408bc091..bbea0be3 100644
--- a/apps/web/src/components/tools/merge-videos-settings.tsx
+++ b/apps/web/src/components/tools/merge-videos-settings.tsx
@@ -19,7 +19,7 @@ export function MergeVideosSettings() {
     <div className="space-y-4">
       <p className="text-[10px] text-muted-foreground">{s.hint}</p>
 
-      {error && <p className="text-xs text-red-500">{error}</p>}
+      {error && <p className="text-xs text-destructive-ink">{error}</p>}
 
       {processing ? (
         <ProgressCard
diff --git a/apps/web/src/components/tools/mute-video-settings.tsx b/apps/web/src/components/tools/mute-video-settings.tsx
index 365363bf..5611e0e5 100644
--- a/apps/web/src/components/tools/mute-video-settings.tsx
+++ b/apps/web/src/components/tools/mute-video-settings.tsx
@@ -25,7 +25,7 @@ export function MuteVideoSettings() {
 
   return (
     <div className="space-y-4">
-      {error && <p className="text-xs text-red-500">{error}</p>}
+      {error && <p className="text-xs text-destructive-ink">{error}</p>}
 
       {processing ? (
         <ProgressCard
diff --git a/apps/web/src/components/tools/noise-reduction-settings.tsx b/apps/web/src/components/tools/noise-reduction-settings.tsx
index 8b070525..41d039ce 100644
--- a/apps/web/src/components/tools/noise-reduction-settings.tsx
+++ b/apps/web/src/components/tools/noise-reduction-settings.tsx
@@ -46,7 +46,7 @@ export function NoiseReductionSettings() {
         </select>
       </div>
 
-      {error && <p className="text-xs text-red-500">{error}</p>}
+      {error && <p className="text-xs text-destructive-ink">{error}</p>}
 
       {processing ? (
         <ProgressCard
diff --git a/apps/web/src/components/tools/noise-removal-settings.tsx b/apps/web/src/components/tools/noise-removal-settings.tsx
index 9eccb766..b1870244 100644
--- a/apps/web/src/components/tools/noise-removal-settings.tsx
+++ b/apps/web/src/components/tools/noise-removal-settings.tsx
@@ -240,14 +240,14 @@ export function NoiseRemovalSettings() {
 
       {/* GIF + AI tier warning */}
       {isGif && isAiTier && (
-        <p className="text-xs text-amber-500">
+        <p className="text-xs text-amber-700 dark:text-amber-400">
           AI denoising on GIF files processes only the first frame. For animated GIFs, use the Quick
           or Balanced tier.
         </p>
       )}
 
       {/* Error */}
-      {error && <p className="text-xs text-red-500">{error}</p>}
+      {error && <p className="text-xs text-destructive-ink">{error}</p>}
 
       {/* Size info */}
       {originalSize != null && processedSize != null && (
@@ -286,7 +286,7 @@ export function NoiseRemovalSettings() {
           href={downloadUrl}
           download
           data-testid="noise-removal-download"
-          className="w-full py-2.5 rounded-lg border border-primary text-primary font-medium flex items-center justify-center gap-2 hover:bg-primary/5"
+          className="w-full py-2.5 rounded-lg border border-primary text-primary-ink font-medium flex items-center justify-center gap-2 hover:bg-primary/5"
         >
           <Download className="h-4 w-4" />
           Download
diff --git a/apps/web/src/components/tools/normalize-audio-settings.tsx b/apps/web/src/components/tools/normalize-audio-settings.tsx
index 46c1b3c8..d277c590 100644
--- a/apps/web/src/components/tools/normalize-audio-settings.tsx
+++ b/apps/web/src/components/tools/normalize-audio-settings.tsx
@@ -27,7 +27,7 @@ export function NormalizeAudioSettings() {
     <div className="space-y-4">
       <p className="text-[10px] text-muted-foreground">{s.hint}</p>
 
-      {error && <p className="text-xs text-red-500">{error}</p>}
+      {error && <p className="text-xs text-destructive-ink">{error}</p>}
 
       {processing ? (
         <ProgressCard
diff --git a/apps/web/src/components/tools/nup-pdf-settings.tsx b/apps/web/src/components/tools/nup-pdf-settings.tsx
index bb410af0..3b38221c 100644
--- a/apps/web/src/components/tools/nup-pdf-settings.tsx
+++ b/apps/web/src/components/tools/nup-pdf-settings.tsx
@@ -50,7 +50,7 @@ export function NupPdfSettings() {
         </select>
       </div>
 
-      {error && <p className="text-xs text-red-500">{error}</p>}
+      {error && <p className="text-xs text-destructive-ink">{error}</p>}
 
       {processing ? (
         <ProgressCard
diff --git a/apps/web/src/components/tools/ocr-quality-control.tsx b/apps/web/src/components/tools/ocr-quality-control.tsx
index ca3a22f1..71ff43f1 100644
--- a/apps/web/src/components/tools/ocr-quality-control.tsx
+++ b/apps/web/src/components/tools/ocr-quality-control.tsx
@@ -98,7 +98,7 @@ export function OcrQualityControl({
               onClick={() => onChange(option.value)}
               className={`rounded-lg border px-2 py-2 text-xs font-medium transition-colors disabled:cursor-not-allowed disabled:opacity-50 ${
                 quality === option.value
-                  ? "border-primary bg-primary/10 text-primary"
+                  ? "border-primary bg-primary/10 text-primary-ink"
                   : "border-border text-muted-foreground hover:border-primary/50"
               }`}
             >
diff --git a/apps/web/src/components/tools/ocr-settings.tsx b/apps/web/src/components/tools/ocr-settings.tsx
index 698fbbb4..b3de4dbb 100644
--- a/apps/web/src/components/tools/ocr-settings.tsx
+++ b/apps/web/src/components/tools/ocr-settings.tsx
@@ -333,7 +333,7 @@ export function OcrSettings() {
         >
           {langOpen ? <ChevronDown className="h-3 w-3" /> : <ChevronRight className="h-3 w-3" />}
           Language
-          <span className="ms-auto text-primary text-[10px] normal-case font-normal">
+          <span className="ms-auto text-primary-ink text-[10px] normal-case font-normal">
             {langLabel}
           </span>
         </button>
@@ -353,7 +353,7 @@ export function OcrSettings() {
       </div>
 
       {/* Error */}
-      {error && <p className="text-xs text-red-500">{error}</p>}
+      {error && <p className="text-xs text-destructive-ink">{error}</p>}
 
       {/* Process button / progress */}
       {processing ? (
diff --git a/apps/web/src/components/tools/optimize-for-web-settings.tsx b/apps/web/src/components/tools/optimize-for-web-settings.tsx
index 1524482e..0d022ba1 100644
--- a/apps/web/src/components/tools/optimize-for-web-settings.tsx
+++ b/apps/web/src/components/tools/optimize-for-web-settings.tsx
@@ -338,7 +338,7 @@ export function OptimizeForWebSettings() {
           {savings != null && (
             <div
               className={`text-sm font-semibold ${
-                Number(savings) > 0 ? "text-green-500" : "text-red-500"
+                Number(savings) > 0 ? "text-success-ink" : "text-destructive-ink"
               }`}
             >
               {Number(savings) > 0 ? `${savings}% smaller` : `${Math.abs(Number(savings))}% larger`}
@@ -348,7 +348,7 @@ export function OptimizeForWebSettings() {
       )}
 
       {/* Error */}
-      {error && <p className="text-xs text-red-500">{error}</p>}
+      {error && <p className="text-xs text-destructive-ink">{error}</p>}
 
       {/* Process / Download */}
       {processing ? (
@@ -374,7 +374,7 @@ export function OptimizeForWebSettings() {
         <a
           href={downloadUrl}
           download
-          className="w-full py-2.5 rounded-lg border border-primary text-primary font-medium flex items-center justify-center gap-2 hover:bg-primary/5"
+          className="w-full py-2.5 rounded-lg border border-primary text-primary-ink font-medium flex items-center justify-center gap-2 hover:bg-primary/5"
         >
           <Download className="h-4 w-4" />
           Download
diff --git a/apps/web/src/components/tools/organize-pdf-settings.tsx b/apps/web/src/components/tools/organize-pdf-settings.tsx
index ee78971e..8f812c59 100644
--- a/apps/web/src/components/tools/organize-pdf-settings.tsx
+++ b/apps/web/src/components/tools/organize-pdf-settings.tsx
@@ -42,7 +42,7 @@ export function OrganizePdfSettings() {
         <p className="text-[10px] text-muted-foreground mt-0.5">{s.orderHint}</p>
       </div>
 
-      {error && <p className="text-xs text-red-500">{error}</p>}
+      {error && <p className="text-xs text-destructive-ink">{error}</p>}
 
       {processing ? (
         <ProgressCard
diff --git a/apps/web/src/components/tools/passport-photo-settings.tsx b/apps/web/src/components/tools/passport-photo-settings.tsx
index 75dacf70..0e6d23e7 100644
--- a/apps/web/src/components/tools/passport-photo-settings.tsx
+++ b/apps/web/src/components/tools/passport-photo-settings.tsx
@@ -320,7 +320,7 @@ function CountryOption({
       type="button"
       onClick={onSelect}
       className={`w-full flex items-center gap-2 px-3 py-1.5 text-xs transition-colors ${
-        selected ? "bg-primary/10 text-primary" : "text-foreground hover:bg-muted"
+        selected ? "bg-primary/10 text-primary-ink" : "text-foreground hover:bg-muted"
       }`}
     >
       <span>{spec.flag}</span>
@@ -622,7 +622,7 @@ export function PassportPhotoSettings() {
                     setSearchQuery("");
                   }}
                   className={`w-full flex items-center gap-2 px-3 py-1.5 text-xs transition-colors border-b border-border ${
-                    isCustom ? "bg-primary/10 text-primary" : "text-foreground hover:bg-muted"
+                    isCustom ? "bg-primary/10 text-primary-ink" : "text-foreground hover:bg-muted"
                   }`}
                 >
                   <span>{"\u2699\uFE0F"}</span>
@@ -690,7 +690,7 @@ export function PassportPhotoSettings() {
                 onClick={() => setDocumentType(type)}
                 className={`py-2 px-2 rounded-lg border text-xs font-medium transition-colors capitalize ${
                   documentType === type
-                    ? "border-primary bg-primary/10 text-primary"
+                    ? "border-primary bg-primary/10 text-primary-ink"
                     : "border-border text-muted-foreground hover:border-primary/50"
                 }`}
               >
@@ -803,7 +803,7 @@ export function PassportPhotoSettings() {
               }}
               className={`py-1.5 px-2.5 rounded-lg border text-xs font-medium transition-colors ${
                 maxFileSizeKb === preset.value
-                  ? "border-primary bg-primary/10 text-primary"
+                  ? "border-primary bg-primary/10 text-primary-ink"
                   : "border-border text-muted-foreground hover:border-primary/50"
               }`}
             >
@@ -838,9 +838,9 @@ export function PassportPhotoSettings() {
       </div>
 
       {/* Errors */}
-      {analyzeError && <p className="text-xs text-red-500">{analyzeError}</p>}
-      {generateError && <p className="text-xs text-red-500">{generateError}</p>}
-      {error && <p className="text-xs text-red-500">{error}</p>}
+      {analyzeError && <p className="text-xs text-destructive-ink">{analyzeError}</p>}
+      {generateError && <p className="text-xs text-destructive-ink">{generateError}</p>}
+      {error && <p className="text-xs text-destructive-ink">{error}</p>}
 
       {/* Analyze progress */}
       {analyzing && (
@@ -1190,11 +1190,13 @@ export function PassportPhotoPreview() {
           {complianceChecks.map((check) => (
             <div key={check.label} className="flex items-center gap-1.5 text-xs">
               {check.pass ? (
-                <Check className="h-3.5 w-3.5 text-emerald-500 shrink-0" />
+                <Check className="h-3.5 w-3.5 text-success-ink shrink-0" />
               ) : (
-                <X className="h-3.5 w-3.5 text-red-500 shrink-0" />
+                <X className="h-3.5 w-3.5 text-destructive-ink shrink-0" />
               )}
-              <span className={check.pass ? "text-foreground" : "text-red-400"}>{check.label}</span>
+              <span className={check.pass ? "text-foreground" : "text-destructive-ink"}>
+                {check.label}
+              </span>
               {!check.pass && (
                 <span className="text-muted-foreground text-[10px]">- {check.detail}</span>
               )}
@@ -1205,7 +1207,7 @@ export function PassportPhotoPreview() {
 
       {/* Generated result notification */}
       {generateResult && (
-        <div className="flex items-center gap-2 text-xs text-emerald-600 bg-emerald-50 dark:bg-emerald-900/20 dark:text-emerald-400 px-3 py-2 rounded-lg shrink-0">
+        <div className="flex items-center gap-2 text-xs text-success-ink bg-emerald-50 dark:bg-emerald-900/20 px-3 py-2 rounded-lg shrink-0">
           <Check className="h-4 w-4" />
           Photo generated. Download from the left panel.
         </div>
diff --git a/apps/web/src/components/tools/pdf-metadata-settings.tsx b/apps/web/src/components/tools/pdf-metadata-settings.tsx
index f7602542..840ee7e6 100644
--- a/apps/web/src/components/tools/pdf-metadata-settings.tsx
+++ b/apps/web/src/components/tools/pdf-metadata-settings.tsx
@@ -91,7 +91,7 @@ export function PdfMetadataSettings() {
         />
       </div>
 
-      {error && <p className="text-xs text-red-500">{error}</p>}
+      {error && <p className="text-xs text-destructive-ink">{error}</p>}
 
       {processing ? (
         <ProgressCard
diff --git a/apps/web/src/components/tools/pdf-page-numbers-settings.tsx b/apps/web/src/components/tools/pdf-page-numbers-settings.tsx
index 5210113a..38b36e2c 100644
--- a/apps/web/src/components/tools/pdf-page-numbers-settings.tsx
+++ b/apps/web/src/components/tools/pdf-page-numbers-settings.tsx
@@ -66,7 +66,7 @@ export function PdfPageNumbersSettings() {
         />
       </div>
 
-      {error && <p className="text-xs text-red-500">{error}</p>}
+      {error && <p className="text-xs text-destructive-ink">{error}</p>}
 
       {processing ? (
         <ProgressCard
diff --git a/apps/web/src/components/tools/pdf-to-image-preview.tsx b/apps/web/src/components/tools/pdf-to-image-preview.tsx
index 88d3e901..6c4f3fd5 100644
--- a/apps/web/src/components/tools/pdf-to-image-preview.tsx
+++ b/apps/web/src/components/tools/pdf-to-image-preview.tsx
@@ -163,7 +163,7 @@ export function PdfToImagePreview() {
               <button
                 type="button"
                 onClick={() => store.selectAllPages()}
-                className="text-xs text-primary hover:underline"
+                className="text-xs text-primary-ink hover:underline"
               >
                 Select All
               </button>
@@ -172,7 +172,7 @@ export function PdfToImagePreview() {
               <button
                 type="button"
                 onClick={() => store.deselectAllPages()}
-                className="text-xs text-primary hover:underline"
+                className="text-xs text-primary-ink hover:underline"
               >
                 Deselect All
               </button>
diff --git a/apps/web/src/components/tools/pdf-to-image-settings.tsx b/apps/web/src/components/tools/pdf-to-image-settings.tsx
index f1eb0981..d4ebaa69 100644
--- a/apps/web/src/components/tools/pdf-to-image-settings.tsx
+++ b/apps/web/src/components/tools/pdf-to-image-settings.tsx
@@ -213,7 +213,7 @@ export function PdfToImageSettings() {
       </div>
 
       {/* Error */}
-      {store.error && <p className="text-xs text-red-500">{store.error}</p>}
+      {store.error && <p className="text-xs text-destructive-ink">{store.error}</p>}
 
       {/* Convert button */}
       <button
@@ -235,7 +235,7 @@ export function PdfToImageSettings() {
           href={store.zipUrl}
           download="pdf-pages.zip"
           data-testid="pdf-to-image-download"
-          className="w-full py-2.5 rounded-lg border border-primary text-primary font-medium flex items-center justify-center gap-2 hover:bg-primary/5"
+          className="w-full py-2.5 rounded-lg border border-primary text-primary-ink font-medium flex items-center justify-center gap-2 hover:bg-primary/5"
         >
           <Download className="h-4 w-4" />
           Download All (ZIP)
diff --git a/apps/web/src/components/tools/pdf-to-text-settings.tsx b/apps/web/src/components/tools/pdf-to-text-settings.tsx
index c3cbb357..a01b6a92 100644
--- a/apps/web/src/components/tools/pdf-to-text-settings.tsx
+++ b/apps/web/src/components/tools/pdf-to-text-settings.tsx
@@ -25,7 +25,7 @@ export function PdfToTextSettings() {
 
   return (
     <div className="space-y-4">
-      {error && <p className="text-xs text-red-500">{error}</p>}
+      {error && <p className="text-xs text-destructive-ink">{error}</p>}
 
       {processing ? (
         <ProgressCard
diff --git a/apps/web/src/components/tools/pdf-to-word-settings.tsx b/apps/web/src/components/tools/pdf-to-word-settings.tsx
index b854efa6..3d923037 100644
--- a/apps/web/src/components/tools/pdf-to-word-settings.tsx
+++ b/apps/web/src/components/tools/pdf-to-word-settings.tsx
@@ -27,7 +27,7 @@ export function PdfToWordSettings() {
     <div className="space-y-4">
       <p className="text-[10px] text-muted-foreground">{s.hint}</p>
 
-      {error && <p className="text-xs text-red-500">{error}</p>}
+      {error && <p className="text-xs text-destructive-ink">{error}</p>}
 
       {processing ? (
         <ProgressCard
diff --git a/apps/web/src/components/tools/pdfa-convert-settings.tsx b/apps/web/src/components/tools/pdfa-convert-settings.tsx
index 1ad8da41..ba5b3c5c 100644
--- a/apps/web/src/components/tools/pdfa-convert-settings.tsx
+++ b/apps/web/src/components/tools/pdfa-convert-settings.tsx
@@ -25,7 +25,7 @@ export function PdfaConvertSettings() {
 
   return (
     <div className="space-y-4">
-      {error && <p className="text-xs text-red-500">{error}</p>}
+      {error && <p className="text-xs text-destructive-ink">{error}</p>}
 
       {processing ? (
         <ProgressCard
diff --git a/apps/web/src/components/tools/pipeline-builder.tsx b/apps/web/src/components/tools/pipeline-builder.tsx
index ba0f6ee5..9cf7cc93 100644
--- a/apps/web/src/components/tools/pipeline-builder.tsx
+++ b/apps/web/src/components/tools/pipeline-builder.tsx
@@ -110,7 +110,7 @@ function SortableStep({
           }
 
           {/* Step number badge */}
-          <span className="w-6 h-6 rounded-full bg-primary/10 text-primary text-xs font-semibold flex items-center justify-center shrink-0">
+          <span className="w-6 h-6 rounded-full bg-primary/10 text-primary-ink text-xs font-semibold flex items-center justify-center shrink-0">
             {index + 1}
           </span>
 
@@ -127,7 +127,7 @@ function SortableStep({
                 expected: warning.expects,
                 received: warning.receives,
               })}
-              className="inline-flex items-center gap-1 text-[10px] text-amber-600 dark:text-amber-400 ms-1"
+              className="inline-flex items-center gap-1 text-[10px] text-amber-700 dark:text-amber-400 ms-1"
             >
               <AlertTriangle className="h-3 w-3" />
               {t.automate.modalityWarning}
diff --git a/apps/web/src/components/tools/pitch-shift-settings.tsx b/apps/web/src/components/tools/pitch-shift-settings.tsx
index fef0c8a2..ce0f8aab 100644
--- a/apps/web/src/components/tools/pitch-shift-settings.tsx
+++ b/apps/web/src/components/tools/pitch-shift-settings.tsx
@@ -45,7 +45,7 @@ export function PitchShiftSettings() {
         <p className="text-[10px] text-muted-foreground mt-0.5">{s.hint}</p>
       </div>
 
-      {error && <p className="text-xs text-red-500">{error}</p>}
+      {error && <p className="text-xs text-destructive-ink">{error}</p>}
 
       {processing ? (
         <ProgressCard
diff --git a/apps/web/src/components/tools/pixelate-settings.tsx b/apps/web/src/components/tools/pixelate-settings.tsx
index d2c5d183..3aa81001 100644
--- a/apps/web/src/components/tools/pixelate-settings.tsx
+++ b/apps/web/src/components/tools/pixelate-settings.tsx
@@ -295,7 +295,7 @@ export function PixelateSettings({
         </div>
       )}
 
-      {error && <p className="text-xs text-red-500">{error}</p>}
+      {error && <p className="text-xs text-destructive-ink">{error}</p>}
 
       {processing ? (
         <ProgressCard
@@ -324,7 +324,7 @@ export function PixelateSettings({
           href={downloadUrl}
           download
           data-testid="pixelate-download"
-          className="w-full py-2.5 rounded-lg border border-primary text-primary font-medium flex items-center justify-center gap-2 hover:bg-primary/5"
+          className="w-full py-2.5 rounded-lg border border-primary text-primary-ink font-medium flex items-center justify-center gap-2 hover:bg-primary/5"
         >
           <Download className="h-4 w-4" />
           {t.common.download}
diff --git a/apps/web/src/components/tools/powerpoint-to-pdf-settings.tsx b/apps/web/src/components/tools/powerpoint-to-pdf-settings.tsx
index a825ba44..870efe91 100644
--- a/apps/web/src/components/tools/powerpoint-to-pdf-settings.tsx
+++ b/apps/web/src/components/tools/powerpoint-to-pdf-settings.tsx
@@ -25,7 +25,7 @@ export function PowerpointToPdfSettings() {
 
   return (
     <div className="space-y-4">
-      {error && <p className="text-xs text-red-500">{error}</p>}
+      {error && <p className="text-xs text-destructive-ink">{error}</p>}
 
       {processing ? (
         <ProgressCard
diff --git a/apps/web/src/components/tools/protect-pdf-settings.tsx b/apps/web/src/components/tools/protect-pdf-settings.tsx
index 8b2090de..e5fdac5f 100644
--- a/apps/web/src/components/tools/protect-pdf-settings.tsx
+++ b/apps/web/src/components/tools/protect-pdf-settings.tsx
@@ -59,7 +59,7 @@ export function ProtectPdfSettings() {
         <p className="text-[10px] text-muted-foreground mt-0.5">{s.ownerPasswordHint}</p>
       </div>
 
-      {error && <p className="text-xs text-red-500">{error}</p>}
+      {error && <p className="text-xs text-destructive-ink">{error}</p>}
 
       {processing ? (
         <ProgressCard
diff --git a/apps/web/src/components/tools/qr-generate-settings.tsx b/apps/web/src/components/tools/qr-generate-settings.tsx
index 4490dd99..837582fd 100644
--- a/apps/web/src/components/tools/qr-generate-settings.tsx
+++ b/apps/web/src/components/tools/qr-generate-settings.tsx
@@ -670,7 +670,7 @@ export function QrGenerateSettings() {
             onChange={handleLogoUpload}
             className="hidden"
           />
-          {store.logoError && <p className="text-xs text-red-500">{store.logoError}</p>}
+          {store.logoError && <p className="text-xs text-destructive-ink">{store.logoError}</p>}
           {store.logoDataUrl ? (
             <div className="flex items-center gap-2">
               <img
@@ -775,7 +775,7 @@ export function QrGenerateSettings() {
                   <span
                     className={`block text-[10px] ${
                       store.downloadFormat === value
-                        ? "text-primary-foreground/70"
+                        ? "text-primary-foreground"
                         : "text-muted-foreground"
                     }`}
                   >
diff --git a/apps/web/src/components/tools/red-eye-removal-settings.tsx b/apps/web/src/components/tools/red-eye-removal-settings.tsx
index 0ee5c8aa..91adf382 100644
--- a/apps/web/src/components/tools/red-eye-removal-settings.tsx
+++ b/apps/web/src/components/tools/red-eye-removal-settings.tsx
@@ -172,7 +172,7 @@ export function RedEyeRemovalSettings() {
       <RedEyeRemovalControls onChange={setSettings} />
 
       {/* Error */}
-      {error && <p className="text-xs text-red-500">{error}</p>}
+      {error && <p className="text-xs text-destructive-ink">{error}</p>}
 
       {/* Size info */}
       {originalSize != null && processedSize != null && (
@@ -211,7 +211,7 @@ export function RedEyeRemovalSettings() {
           href={downloadUrl}
           download
           data-testid="red-eye-removal-download"
-          className="w-full py-2.5 rounded-lg border border-primary text-primary font-medium flex items-center justify-center gap-2 hover:bg-primary/5"
+          className="w-full py-2.5 rounded-lg border border-primary text-primary-ink font-medium flex items-center justify-center gap-2 hover:bg-primary/5"
         >
           <Download className="h-4 w-4" />
           Download
diff --git a/apps/web/src/components/tools/redact-pdf-settings.tsx b/apps/web/src/components/tools/redact-pdf-settings.tsx
index 6489115e..cdccd231 100644
--- a/apps/web/src/components/tools/redact-pdf-settings.tsx
+++ b/apps/web/src/components/tools/redact-pdf-settings.tsx
@@ -61,7 +61,7 @@ export function RedactPdfSettings() {
         </label>
       </div>
 
-      {error && <p className="text-xs text-red-500">{error}</p>}
+      {error && <p className="text-xs text-destructive-ink">{error}</p>}
 
       {processing ? (
         <ProgressCard
diff --git a/apps/web/src/components/tools/remove-bg-settings.tsx b/apps/web/src/components/tools/remove-bg-settings.tsx
index e56bd386..c373b697 100644
--- a/apps/web/src/components/tools/remove-bg-settings.tsx
+++ b/apps/web/src/components/tools/remove-bg-settings.tsx
@@ -233,7 +233,7 @@ export function RemoveBgControls({ settings, onChange }: RemoveBgControlsProps)
               }}
               className={`flex flex-col items-center gap-1 py-2 px-2 rounded-lg border text-xs font-medium transition-colors ${
                 subject === opt.value
-                  ? "border-primary bg-primary/10 text-primary"
+                  ? "border-primary bg-primary/10 text-primary-ink"
                   : "border-border text-muted-foreground hover:border-primary/50"
               }`}
             >
@@ -269,7 +269,7 @@ export function RemoveBgControls({ settings, onChange }: RemoveBgControlsProps)
             onClick={() => setQuality(opt.value)}
             className={`py-2 px-2 rounded-lg border text-xs font-medium transition-colors ${
               effectiveQuality === opt.value
-                ? "border-primary bg-primary/10 text-primary"
+                ? "border-primary bg-primary/10 text-primary-ink"
                 : "border-border text-muted-foreground hover:border-primary/50"
             }`}
           >
@@ -447,7 +447,7 @@ export function RemoveBgControls({ settings, onChange }: RemoveBgControlsProps)
             onClick={() => setOutputFormat(fmt)}
             className={`py-2 px-2 rounded-lg border text-xs font-medium uppercase transition-colors ${
               outputFormat === fmt
-                ? "border-primary bg-primary/10 text-primary"
+                ? "border-primary bg-primary/10 text-primary-ink"
                 : "border-border text-muted-foreground hover:border-primary/50"
             }`}
           >
@@ -465,7 +465,9 @@ export function RemoveBgControls({ settings, onChange }: RemoveBgControlsProps)
         {effectsOpen ? <ChevronDown className="h-3 w-3" /> : <ChevronRight className="h-3 w-3" />}
         Effects
         {(blurEnabled || shadowEnabled || edgeRefine > 0 || decontaminate) && (
-          <span className="ms-auto text-primary text-[10px] normal-case font-normal">active</span>
+          <span className="ms-auto text-primary-ink text-[10px] normal-case font-normal">
+            active
+          </span>
         )}
       </button>
 
@@ -627,7 +629,7 @@ function BgTypeButton({
       onClick={onClick}
       className={`flex items-center gap-1.5 px-2.5 py-1.5 rounded-lg border text-xs font-medium transition-colors ${
         active
-          ? "border-primary bg-primary/10 text-primary"
+          ? "border-primary bg-primary/10 text-primary-ink"
           : "border-border text-muted-foreground hover:border-primary/50"
       }`}
     >
@@ -904,8 +906,8 @@ export function RemoveBgSettings({ onBgPreview }: RemoveBgSettingsProps = {}) {
       <RemoveBgControls settings={settings} onChange={setSettings} />
 
       {/* Errors */}
-      {error && <p className="text-xs text-red-500">{error}</p>}
-      {effectsError && <p className="text-xs text-red-500">{effectsError}</p>}
+      {error && <p className="text-xs text-destructive-ink">{error}</p>}
+      {effectsError && <p className="text-xs text-destructive-ink">{effectsError}</p>}
 
       {/* Size info */}
       {originalSize != null && processedSize != null && !processing && (
diff --git a/apps/web/src/components/tools/remove-gif-background-settings.tsx b/apps/web/src/components/tools/remove-gif-background-settings.tsx
index 020b254c..d99d7d42 100644
--- a/apps/web/src/components/tools/remove-gif-background-settings.tsx
+++ b/apps/web/src/components/tools/remove-gif-background-settings.tsx
@@ -277,7 +277,7 @@ export function RemoveGifBackgroundSettings() {
 
       <p className="text-xs text-muted-foreground">{s.frameNote}</p>
 
-      {error && <p className="text-xs text-red-500">{error}</p>}
+      {error && <p className="text-xs text-destructive-ink">{error}</p>}
 
       {processing ? (
         <ProgressCard
diff --git a/apps/web/src/components/tools/remove-pages-settings.tsx b/apps/web/src/components/tools/remove-pages-settings.tsx
index a2d12514..e55a8e83 100644
--- a/apps/web/src/components/tools/remove-pages-settings.tsx
+++ b/apps/web/src/components/tools/remove-pages-settings.tsx
@@ -42,7 +42,7 @@ export function RemovePagesSettings() {
         <p className="text-[10px] text-muted-foreground mt-0.5">{s.pagesHint}</p>
       </div>
 
-      {error && <p className="text-xs text-red-500">{error}</p>}
+      {error && <p className="text-xs text-destructive-ink">{error}</p>}
 
       {processing ? (
         <ProgressCard
diff --git a/apps/web/src/components/tools/repair-pdf-settings.tsx b/apps/web/src/components/tools/repair-pdf-settings.tsx
index 11a62df5..4a09ba54 100644
--- a/apps/web/src/components/tools/repair-pdf-settings.tsx
+++ b/apps/web/src/components/tools/repair-pdf-settings.tsx
@@ -25,7 +25,7 @@ export function RepairPdfSettings() {
 
   return (
     <div className="space-y-4">
-      {error && <p className="text-xs text-red-500">{error}</p>}
+      {error && <p className="text-xs text-destructive-ink">{error}</p>}
 
       {processing ? (
         <ProgressCard
diff --git a/apps/web/src/components/tools/replace-audio-settings.tsx b/apps/web/src/components/tools/replace-audio-settings.tsx
index 51b9a84e..daf803e7 100644
--- a/apps/web/src/components/tools/replace-audio-settings.tsx
+++ b/apps/web/src/components/tools/replace-audio-settings.tsx
@@ -19,7 +19,7 @@ export function ReplaceAudioSettings() {
     <div className="space-y-4">
       <p className="text-[10px] text-muted-foreground">{s.hint}</p>
 
-      {error && <p className="text-xs text-red-500">{error}</p>}
+      {error && <p className="text-xs text-destructive-ink">{error}</p>}
 
       {processing ? (
         <ProgressCard
diff --git a/apps/web/src/components/tools/replace-color-settings.tsx b/apps/web/src/components/tools/replace-color-settings.tsx
index b681c032..5ced55b1 100644
--- a/apps/web/src/components/tools/replace-color-settings.tsx
+++ b/apps/web/src/components/tools/replace-color-settings.tsx
@@ -138,7 +138,7 @@ export function ReplaceColorSettings() {
     <div className="space-y-4">
       <ReplaceColorControls onChange={setSettings} />
 
-      {error && <p className="text-xs text-red-500">{error}</p>}
+      {error && <p className="text-xs text-destructive-ink">{error}</p>}
 
       {originalSize != null && processedSize != null && (
         <div className="text-xs text-muted-foreground space-y-0.5">
@@ -173,7 +173,7 @@ export function ReplaceColorSettings() {
           href={downloadUrl}
           download
           data-testid="replace-color-download"
-          className="w-full py-2.5 rounded-lg border border-primary text-primary font-medium flex items-center justify-center gap-2 hover:bg-primary/5"
+          className="w-full py-2.5 rounded-lg border border-primary text-primary-ink font-medium flex items-center justify-center gap-2 hover:bg-primary/5"
         >
           <Download className="h-4 w-4" />
           Download
diff --git a/apps/web/src/components/tools/resize-settings.tsx b/apps/web/src/components/tools/resize-settings.tsx
index 041e8a80..47e901aa 100644
--- a/apps/web/src/components/tools/resize-settings.tsx
+++ b/apps/web/src/components/tools/resize-settings.tsx
@@ -495,7 +495,7 @@ export function ResizeSettings() {
       <ResizeControls onChange={handleSettingsChange} />
 
       {/* Error */}
-      {error && <p className="text-xs text-red-500">{error}</p>}
+      {error && <p className="text-xs text-destructive-ink">{error}</p>}
 
       {/* Process button */}
       {processing ? (
@@ -526,7 +526,7 @@ export function ResizeSettings() {
           href={downloadUrl}
           download
           data-testid="resize-download"
-          className="w-full py-2.5 rounded-lg border border-primary text-primary font-medium flex items-center justify-center gap-2 hover:bg-primary/5"
+          className="w-full py-2.5 rounded-lg border border-primary text-primary-ink font-medium flex items-center justify-center gap-2 hover:bg-primary/5"
         >
           <Download className="h-4 w-4" />
           {t.common.download}
diff --git a/apps/web/src/components/tools/resize-video-settings.tsx b/apps/web/src/components/tools/resize-video-settings.tsx
index b7bf9552..c2e7d97c 100644
--- a/apps/web/src/components/tools/resize-video-settings.tsx
+++ b/apps/web/src/components/tools/resize-video-settings.tsx
@@ -94,7 +94,7 @@ export function ResizeVideoSettings() {
         </>
       )}
 
-      {error && <p className="text-xs text-red-500">{error}</p>}
+      {error && <p className="text-xs text-destructive-ink">{error}</p>}
 
       {processing ? (
         <ProgressCard
diff --git a/apps/web/src/components/tools/restore-photo-settings.tsx b/apps/web/src/components/tools/restore-photo-settings.tsx
index 86e10b89..05582fab 100644
--- a/apps/web/src/components/tools/restore-photo-settings.tsx
+++ b/apps/web/src/components/tools/restore-photo-settings.tsx
@@ -241,7 +241,7 @@ export function RestorePhotoSettings() {
       <RestorePhotoControls onChange={setSettings} />
 
       {/* Error */}
-      {error && <p className="text-xs text-red-500">{error}</p>}
+      {error && <p className="text-xs text-destructive-ink">{error}</p>}
 
       {/* Size info */}
       {originalSize != null && processedSize != null && (
@@ -280,7 +280,7 @@ export function RestorePhotoSettings() {
           href={downloadUrl}
           download
           data-testid="restore-photo-download"
-          className="w-full py-2.5 rounded-lg border border-primary text-primary font-medium flex items-center justify-center gap-2 hover:bg-primary/5"
+          className="w-full py-2.5 rounded-lg border border-primary text-primary-ink font-medium flex items-center justify-center gap-2 hover:bg-primary/5"
         >
           <Download className="h-4 w-4" />
           Download
diff --git a/apps/web/src/components/tools/reverse-audio-settings.tsx b/apps/web/src/components/tools/reverse-audio-settings.tsx
index 9f64236f..8910ae6e 100644
--- a/apps/web/src/components/tools/reverse-audio-settings.tsx
+++ b/apps/web/src/components/tools/reverse-audio-settings.tsx
@@ -25,7 +25,7 @@ export function ReverseAudioSettings() {
 
   return (
     <div className="space-y-4">
-      {error && <p className="text-xs text-red-500">{error}</p>}
+      {error && <p className="text-xs text-destructive-ink">{error}</p>}
 
       {processing ? (
         <ProgressCard
diff --git a/apps/web/src/components/tools/reverse-video-settings.tsx b/apps/web/src/components/tools/reverse-video-settings.tsx
index 1efa98d4..fffff76c 100644
--- a/apps/web/src/components/tools/reverse-video-settings.tsx
+++ b/apps/web/src/components/tools/reverse-video-settings.tsx
@@ -27,7 +27,7 @@ export function ReverseVideoSettings() {
     <div className="space-y-4">
       <p className="text-[10px] text-muted-foreground">{s.hint}</p>
 
-      {error && <p className="text-xs text-red-500">{error}</p>}
+      {error && <p className="text-xs text-destructive-ink">{error}</p>}
 
       {processing ? (
         <ProgressCard
diff --git a/apps/web/src/components/tools/ringtone-maker-settings.tsx b/apps/web/src/components/tools/ringtone-maker-settings.tsx
index dd72d52e..b0f52285 100644
--- a/apps/web/src/components/tools/ringtone-maker-settings.tsx
+++ b/apps/web/src/components/tools/ringtone-maker-settings.tsx
@@ -61,7 +61,7 @@ export function RingtoneMakerSettings() {
         <p className="text-[10px] text-muted-foreground mt-0.5">{s["max-hint"]}</p>
       </div>
 
-      {error && <p className="text-xs text-red-500">{error}</p>}
+      {error && <p className="text-xs text-destructive-ink">{error}</p>}
 
       {processing ? (
         <ProgressCard
diff --git a/apps/web/src/components/tools/rotate-pdf-settings.tsx b/apps/web/src/components/tools/rotate-pdf-settings.tsx
index 081a4423..11565d06 100644
--- a/apps/web/src/components/tools/rotate-pdf-settings.tsx
+++ b/apps/web/src/components/tools/rotate-pdf-settings.tsx
@@ -61,7 +61,7 @@ export function RotatePdfSettings() {
         <p className="text-[10px] text-muted-foreground mt-0.5">{s.rangeHint}</p>
       </div>
 
-      {error && <p className="text-xs text-red-500">{error}</p>}
+      {error && <p className="text-xs text-destructive-ink">{error}</p>}
 
       {processing ? (
         <ProgressCard
diff --git a/apps/web/src/components/tools/rotate-settings.tsx b/apps/web/src/components/tools/rotate-settings.tsx
index 58c641f6..f9db0af3 100644
--- a/apps/web/src/components/tools/rotate-settings.tsx
+++ b/apps/web/src/components/tools/rotate-settings.tsx
@@ -302,7 +302,7 @@ export function RotateSettings({ onPreviewTransform }: RotateSettingsProps) {
       />
 
       {/* Error */}
-      {error && <p className="text-xs text-red-500">{error}</p>}
+      {error && <p className="text-xs text-destructive-ink">{error}</p>}
 
       {/* Process */}
       {processing ? (
diff --git a/apps/web/src/components/tools/rotate-video-settings.tsx b/apps/web/src/components/tools/rotate-video-settings.tsx
index d4a22aa5..fc57bfa6 100644
--- a/apps/web/src/components/tools/rotate-video-settings.tsx
+++ b/apps/web/src/components/tools/rotate-video-settings.tsx
@@ -48,7 +48,7 @@ export function RotateVideoSettings() {
         </select>
       </div>
 
-      {error && <p className="text-xs text-red-500">{error}</p>}
+      {error && <p className="text-xs text-destructive-ink">{error}</p>}
 
       {processing ? (
         <ProgressCard
diff --git a/apps/web/src/components/tools/sharpening-settings.tsx b/apps/web/src/components/tools/sharpening-settings.tsx
index b587d38a..ecbc559b 100644
--- a/apps/web/src/components/tools/sharpening-settings.tsx
+++ b/apps/web/src/components/tools/sharpening-settings.tsx
@@ -349,7 +349,7 @@ export function SharpeningSettings() {
         </div>
       )}
 
-      {error && <p className="text-xs text-red-500">{error}</p>}
+      {error && <p className="text-xs text-destructive-ink">{error}</p>}
 
       {originalSize != null && processedSize != null && (
         <div className="text-xs text-muted-foreground space-y-0.5">
@@ -385,7 +385,7 @@ export function SharpeningSettings() {
           href={downloadUrl}
           download
           data-testid="sharpening-download"
-          className="w-full py-2.5 rounded-lg border border-primary text-primary font-medium flex items-center justify-center gap-2 hover:bg-primary/5"
+          className="w-full py-2.5 rounded-lg border border-primary text-primary-ink font-medium flex items-center justify-center gap-2 hover:bg-primary/5"
         >
           <Download className="h-4 w-4" />
           Download
diff --git a/apps/web/src/components/tools/silence-removal-settings.tsx b/apps/web/src/components/tools/silence-removal-settings.tsx
index c4fa77b9..bfe0ac00 100644
--- a/apps/web/src/components/tools/silence-removal-settings.tsx
+++ b/apps/web/src/components/tools/silence-removal-settings.tsx
@@ -61,7 +61,7 @@ export function SilenceRemovalSettings() {
         />
       </div>
 
-      {error && <p className="text-xs text-red-500">{error}</p>}
+      {error && <p className="text-xs text-destructive-ink">{error}</p>}
 
       {processing ? (
         <ProgressCard
diff --git a/apps/web/src/components/tools/smart-crop-settings.tsx b/apps/web/src/components/tools/smart-crop-settings.tsx
index aa461361..a145b1e8 100644
--- a/apps/web/src/components/tools/smart-crop-settings.tsx
+++ b/apps/web/src/components/tools/smart-crop-settings.tsx
@@ -587,7 +587,7 @@ export function SmartCropSettings() {
     <form onSubmit={handleSubmit} className="space-y-4">
       <SmartCropControls onChange={setSettings} />
 
-      {error && <p className="text-xs text-red-500">{error}</p>}
+      {error && <p className="text-xs text-destructive-ink">{error}</p>}
 
       {processing ? (
         <ProgressCard
diff --git a/apps/web/src/components/tools/split-audio-settings.tsx b/apps/web/src/components/tools/split-audio-settings.tsx
index f86cc259..cb9e0fd2 100644
--- a/apps/web/src/components/tools/split-audio-settings.tsx
+++ b/apps/web/src/components/tools/split-audio-settings.tsx
@@ -128,7 +128,7 @@ export function SplitAudioSettings() {
         </>
       )}
 
-      {error && <p className="text-xs text-red-500">{error}</p>}
+      {error && <p className="text-xs text-destructive-ink">{error}</p>}
 
       {processing ? (
         <ProgressCard
diff --git a/apps/web/src/components/tools/split-csv-settings.tsx b/apps/web/src/components/tools/split-csv-settings.tsx
index 1df24cdd..dfdd4e98 100644
--- a/apps/web/src/components/tools/split-csv-settings.tsx
+++ b/apps/web/src/components/tools/split-csv-settings.tsx
@@ -54,7 +54,7 @@ export function SplitCsvSettings() {
         {s.keepHeader}
       </label>
 
-      {error && <p className="text-xs text-red-500">{error}</p>}
+      {error && <p className="text-xs text-destructive-ink">{error}</p>}
 
       {processing ? (
         <ProgressCard
diff --git a/apps/web/src/components/tools/split-pdf-settings.tsx b/apps/web/src/components/tools/split-pdf-settings.tsx
index a915ac4e..f07e92e2 100644
--- a/apps/web/src/components/tools/split-pdf-settings.tsx
+++ b/apps/web/src/components/tools/split-pdf-settings.tsx
@@ -81,7 +81,7 @@ export function SplitPdfSettings() {
         </div>
       )}
 
-      {error && <p className="text-xs text-red-500">{error}</p>}
+      {error && <p className="text-xs text-destructive-ink">{error}</p>}
 
       {processing ? (
         <ProgressCard
diff --git a/apps/web/src/components/tools/split-settings.tsx b/apps/web/src/components/tools/split-settings.tsx
index 29bebc7d..3e792843 100644
--- a/apps/web/src/components/tools/split-settings.tsx
+++ b/apps/web/src/components/tools/split-settings.tsx
@@ -346,7 +346,9 @@ export function SplitSettings() {
         </div>
       )}
 
-      {tileWarning && <p className="text-[11px] text-amber-500">{tileWarning}</p>}
+      {tileWarning && (
+        <p className="text-[11px] text-amber-700 dark:text-amber-400">{tileWarning}</p>
+      )}
 
       <CollapsibleSection
         title="Output Format"
@@ -391,7 +393,7 @@ export function SplitSettings() {
         </div>
       </CollapsibleSection>
 
-      {error && <p className="text-xs text-red-500">{error}</p>}
+      {error && <p className="text-xs text-destructive-ink">{error}</p>}
 
       <button
         type="button"
@@ -450,7 +452,7 @@ export function SplitSettings() {
           <button
             type="button"
             onClick={handleDownloadZip}
-            className="w-full py-2.5 rounded-lg border border-primary text-primary font-medium flex items-center justify-center gap-2 hover:bg-primary/5 transition-colors"
+            className="w-full py-2.5 rounded-lg border border-primary text-primary-ink font-medium flex items-center justify-center gap-2 hover:bg-primary/5 transition-colors"
           >
             <PackageOpen className="h-4 w-4" />
             Download All as ZIP
diff --git a/apps/web/src/components/tools/sprite-sheet-settings.tsx b/apps/web/src/components/tools/sprite-sheet-settings.tsx
index 0a0491e7..72c7ecab 100644
--- a/apps/web/src/components/tools/sprite-sheet-settings.tsx
+++ b/apps/web/src/components/tools/sprite-sheet-settings.tsx
@@ -148,7 +148,7 @@ export function SpriteSheetSettings() {
         </div>
       )}
 
-      {error && <p className="text-xs text-red-500">{error}</p>}
+      {error && <p className="text-xs text-destructive-ink">{error}</p>}
 
       {processing ? (
         <ProgressCard
@@ -175,7 +175,7 @@ export function SpriteSheetSettings() {
           href={downloadUrl}
           download
           data-testid="sprite-sheet-download"
-          className="w-full py-2.5 rounded-lg border border-primary text-primary font-medium flex items-center justify-center gap-2 hover:bg-primary/5"
+          className="w-full py-2.5 rounded-lg border border-primary text-primary-ink font-medium flex items-center justify-center gap-2 hover:bg-primary/5"
         >
           <Download className="h-4 w-4" />
           {t.common.download}
@@ -259,7 +259,7 @@ function SpriteOutput({
           data-testid="sprite-sheet-copy-css"
         >
           {copiedExport === "css" ? (
-            <Check className="h-3 w-3 text-green-500" />
+            <Check className="h-3 w-3 text-success-ink" />
           ) : (
             <ClipboardCopy className="h-3 w-3" />
           )}
@@ -272,7 +272,7 @@ function SpriteOutput({
           data-testid="sprite-sheet-copy-json"
         >
           {copiedExport === "json" ? (
-            <Check className="h-3 w-3 text-green-500" />
+            <Check className="h-3 w-3 text-success-ink" />
           ) : (
             <ClipboardCopy className="h-3 w-3" />
           )}
diff --git a/apps/web/src/components/tools/stabilize-video-settings.tsx b/apps/web/src/components/tools/stabilize-video-settings.tsx
index 4477afb8..42291fcd 100644
--- a/apps/web/src/components/tools/stabilize-video-settings.tsx
+++ b/apps/web/src/components/tools/stabilize-video-settings.tsx
@@ -46,7 +46,7 @@ export function StabilizeVideoSettings() {
 
       <p className="text-[10px] text-muted-foreground">{s.hint}</p>
 
-      {error && <p className="text-xs text-red-500">{error}</p>}
+      {error && <p className="text-xs text-destructive-ink">{error}</p>}
 
       {processing ? (
         <ProgressCard
diff --git a/apps/web/src/components/tools/stitch-settings.tsx b/apps/web/src/components/tools/stitch-settings.tsx
index af7e922b..772b3e15 100644
--- a/apps/web/src/components/tools/stitch-settings.tsx
+++ b/apps/web/src/components/tools/stitch-settings.tsx
@@ -291,7 +291,7 @@ export function StitchSettings() {
         </div>
       )}
 
-      {error && <p className="text-xs text-red-500">{error}</p>}
+      {error && <p className="text-xs text-destructive-ink">{error}</p>}
 
       {processing && (
         <div className="space-y-1">
@@ -332,7 +332,7 @@ export function StitchSettings() {
           href={downloadUrl}
           download
           data-testid="stitch-download"
-          className="w-full py-2.5 rounded-lg border border-primary text-primary font-medium flex items-center justify-center gap-2 hover:bg-primary/5"
+          className="w-full py-2.5 rounded-lg border border-primary text-primary-ink font-medium flex items-center justify-center gap-2 hover:bg-primary/5"
         >
           <Download className="h-4 w-4" />
           Download Stitched Image
diff --git a/apps/web/src/components/tools/strip-metadata-settings.tsx b/apps/web/src/components/tools/strip-metadata-settings.tsx
index 3deeef59..784a38fe 100644
--- a/apps/web/src/components/tools/strip-metadata-settings.tsx
+++ b/apps/web/src/components/tools/strip-metadata-settings.tsx
@@ -119,7 +119,9 @@ export function StripMetadataControls({
           />
           Strip GPS (location data)
           {hasGps && !stripAll && (
-            <span className="ms-auto text-[10px] text-amber-500">location found</span>
+            <span className="ms-auto text-[10px] text-amber-700 dark:text-amber-400">
+              location found
+            </span>
           )}
         </label>
 
@@ -273,7 +275,7 @@ export function StripMetadataSettings() {
             </div>
           )}
 
-          {inspectError && <p className="text-[10px] text-red-500">{inspectError}</p>}
+          {inspectError && <p className="text-[10px] text-destructive-ink">{inspectError}</p>}
 
           {metadata && !hasAnyMetadata && !inspecting && (
             <p className="text-xs text-muted-foreground italic py-1">
@@ -289,8 +291,8 @@ export function StripMetadataSettings() {
               {hasGps && gpsLat != null && gpsLon != null && (
                 <div className="space-y-2">
                   <div className="flex items-center gap-2 px-2.5 py-1.5 rounded-md bg-amber-500/10 border border-amber-500/20">
-                    <MapPin className="h-3 w-3 text-amber-500 shrink-0" />
-                    <span className="text-[10px] text-amber-600 dark:text-amber-400 font-medium">
+                    <MapPin className="h-3 w-3 text-amber-700 dark:text-amber-400 shrink-0" />
+                    <span className="text-[10px] text-amber-700 dark:text-amber-400 font-medium">
                       Location data: {gpsLat.toFixed(6)}, {gpsLon.toFixed(6)}
                     </span>
                   </div>
@@ -298,12 +300,12 @@ export function StripMetadataSettings() {
                     href={`https://www.openstreetmap.org/?mlat=${gpsLat}&mlon=${gpsLon}#map=15/${gpsLat}/${gpsLon}`}
                     target="_blank"
                     rel="noopener noreferrer"
-                    className="inline-flex items-center gap-1 text-[10px] text-primary hover:underline"
+                    className="inline-flex items-center gap-1 text-[10px] text-primary-ink hover:underline"
                   >
                     <ExternalLink className="h-3 w-3" />
                     {t.toolSettings["strip-metadata"].viewOnMap}
                   </a>
-                  <p className="text-[10px] text-amber-600 dark:text-amber-400">
+                  <p className="text-[10px] text-amber-700 dark:text-amber-400">
                     This image contains your precise location. Consider removing GPS data before
                     sharing.
                   </p>
@@ -370,7 +372,7 @@ export function StripMetadataSettings() {
       />
 
       {/* Error */}
-      {error && <p className="text-xs text-red-500">{error}</p>}
+      {error && <p className="text-xs text-destructive-ink">{error}</p>}
 
       {/* Size info */}
       {originalSize != null && processedSize != null && (
@@ -408,7 +410,7 @@ export function StripMetadataSettings() {
           href={downloadUrl}
           download
           data-testid="strip-metadata-download"
-          className="w-full py-2.5 rounded-lg border border-primary text-primary font-medium flex items-center justify-center gap-2 hover:bg-primary/5"
+          className="w-full py-2.5 rounded-lg border border-primary text-primary-ink font-medium flex items-center justify-center gap-2 hover:bg-primary/5"
         >
           <Download className="h-4 w-4" />
           Download
diff --git a/apps/web/src/components/tools/svg-to-raster-settings.tsx b/apps/web/src/components/tools/svg-to-raster-settings.tsx
index a816e6fc..04ef0514 100644
--- a/apps/web/src/components/tools/svg-to-raster-settings.tsx
+++ b/apps/web/src/components/tools/svg-to-raster-settings.tsx
@@ -343,7 +343,7 @@ export function SvgToRasterSettings() {
       )}
 
       {/* Error */}
-      {error && <p className="text-xs text-red-500">{error}</p>}
+      {error && <p className="text-xs text-destructive-ink">{error}</p>}
 
       {/* Process / Progress */}
       {processing ? (
@@ -373,7 +373,7 @@ export function SvgToRasterSettings() {
           href={downloadUrl}
           download
           data-testid="svg-to-raster-download"
-          className="w-full py-2.5 rounded-lg border border-primary text-primary font-medium flex items-center justify-center gap-2 hover:bg-primary/5"
+          className="w-full py-2.5 rounded-lg border border-primary text-primary-ink font-medium flex items-center justify-center gap-2 hover:bg-primary/5"
         >
           <Download className="h-4 w-4" />
           Download
diff --git a/apps/web/src/components/tools/text-overlay-settings.tsx b/apps/web/src/components/tools/text-overlay-settings.tsx
index 75ab93df..1f2146f4 100644
--- a/apps/web/src/components/tools/text-overlay-settings.tsx
+++ b/apps/web/src/components/tools/text-overlay-settings.tsx
@@ -189,7 +189,7 @@ export function TextOverlaySettings() {
     <div className="space-y-4">
       <TextOverlayControls onChange={setSettings} />
 
-      {error && <p className="text-xs text-red-500">{error}</p>}
+      {error && <p className="text-xs text-destructive-ink">{error}</p>}
 
       {originalSize != null && processedSize != null && (
         <div className="text-xs text-muted-foreground space-y-0.5">
@@ -224,7 +224,7 @@ export function TextOverlaySettings() {
           href={downloadUrl}
           download
           data-testid="text-overlay-download"
-          className="w-full py-2.5 rounded-lg border border-primary text-primary font-medium flex items-center justify-center gap-2 hover:bg-primary/5"
+          className="w-full py-2.5 rounded-lg border border-primary text-primary-ink font-medium flex items-center justify-center gap-2 hover:bg-primary/5"
         >
           <Download className="h-4 w-4" />
           {ts.download}
diff --git a/apps/web/src/components/tools/to-epub-settings.tsx b/apps/web/src/components/tools/to-epub-settings.tsx
index e9f896d3..8539eec3 100644
--- a/apps/web/src/components/tools/to-epub-settings.tsx
+++ b/apps/web/src/components/tools/to-epub-settings.tsx
@@ -25,7 +25,7 @@ export function ToEpubSettings() {
 
   return (
     <div className="space-y-4">
-      {error && <p className="text-xs text-red-500">{error}</p>}
+      {error && <p className="text-xs text-destructive-ink">{error}</p>}
 
       {processing ? (
         <ProgressCard
diff --git a/apps/web/src/components/tools/tool-palette.tsx b/apps/web/src/components/tools/tool-palette.tsx
index 7c38102b..b39502ec 100644
--- a/apps/web/src/components/tools/tool-palette.tsx
+++ b/apps/web/src/components/tools/tool-palette.tsx
@@ -129,7 +129,7 @@ function ToolItem({ tool, onAdd }: ToolItemProps) {
       className="flex items-center gap-2.5 w-full px-2.5 py-2 rounded-lg hover:bg-muted text-start transition-colors group"
     >
       <div className="p-1.5 rounded-md bg-muted group-hover:bg-primary/10 transition-colors shrink-0">
-        <Icon className="h-3.5 w-3.5 text-muted-foreground group-hover:text-primary transition-colors" />
+        <Icon className="h-3.5 w-3.5 text-muted-foreground group-hover:text-primary-ink transition-colors" />
       </div>
       <div className="flex-1 min-w-0">
         <div className="text-sm font-medium text-foreground leading-tight">
diff --git a/apps/web/src/components/tools/transparency-fixer-settings.tsx b/apps/web/src/components/tools/transparency-fixer-settings.tsx
index f94a3834..4ff6f27b 100644
--- a/apps/web/src/components/tools/transparency-fixer-settings.tsx
+++ b/apps/web/src/components/tools/transparency-fixer-settings.tsx
@@ -143,7 +143,7 @@ export function TransparencyFixerSettings() {
       <TransparencyFixerControls settings={settings} onChange={setSettings} />
 
       {/* Error */}
-      {error && <p className="text-xs text-red-500">{error}</p>}
+      {error && <p className="text-xs text-destructive-ink">{error}</p>}
 
       {/* Process button / progress */}
       {processing ? (
diff --git a/apps/web/src/components/tools/trim-audio-settings.tsx b/apps/web/src/components/tools/trim-audio-settings.tsx
index b1767a23..1f2be7aa 100644
--- a/apps/web/src/components/tools/trim-audio-settings.tsx
+++ b/apps/web/src/components/tools/trim-audio-settings.tsx
@@ -59,11 +59,13 @@ export function TrimAudioSettings() {
           className="w-full mt-0.5 px-2 py-1.5 rounded border border-border bg-background text-sm text-foreground"
         />
         {!rangeValid && (
-          <p className="text-[10px] text-amber-500 mt-0.5">End time must be after start time</p>
+          <p className="text-[10px] text-amber-700 dark:text-amber-400 mt-0.5">
+            End time must be after start time
+          </p>
         )}
       </div>
 
-      {error && <p className="text-xs text-red-500">{error}</p>}
+      {error && <p className="text-xs text-destructive-ink">{error}</p>}
 
       {processing ? (
         <ProgressCard
diff --git a/apps/web/src/components/tools/trim-video-settings.tsx b/apps/web/src/components/tools/trim-video-settings.tsx
index d1b0ed59..c9edd816 100644
--- a/apps/web/src/components/tools/trim-video-settings.tsx
+++ b/apps/web/src/components/tools/trim-video-settings.tsx
@@ -60,7 +60,9 @@ export function TrimVideoSettings() {
           className="w-full mt-0.5 px-2 py-1.5 rounded border border-border bg-background text-sm text-foreground"
         />
         {!rangeValid && (
-          <p className="text-[10px] text-amber-500 mt-0.5">End time must be after start time</p>
+          <p className="text-[10px] text-amber-700 dark:text-amber-400 mt-0.5">
+            End time must be after start time
+          </p>
         )}
       </div>
 
@@ -74,7 +76,7 @@ export function TrimVideoSettings() {
         {s.precise}
       </label>
 
-      {error && <p className="text-xs text-red-500">{error}</p>}
+      {error && <p className="text-xs text-destructive-ink">{error}</p>}
 
       {processing ? (
         <ProgressCard
diff --git a/apps/web/src/components/tools/unlock-pdf-settings.tsx b/apps/web/src/components/tools/unlock-pdf-settings.tsx
index 52fe402e..cb259577 100644
--- a/apps/web/src/components/tools/unlock-pdf-settings.tsx
+++ b/apps/web/src/components/tools/unlock-pdf-settings.tsx
@@ -41,7 +41,7 @@ export function UnlockPdfSettings() {
         />
       </div>
 
-      {error && <p className="text-xs text-red-500">{error}</p>}
+      {error && <p className="text-xs text-destructive-ink">{error}</p>}
 
       {processing ? (
         <ProgressCard
diff --git a/apps/web/src/components/tools/upscale-settings.tsx b/apps/web/src/components/tools/upscale-settings.tsx
index c0d2aa25..8f71f16d 100644
--- a/apps/web/src/components/tools/upscale-settings.tsx
+++ b/apps/web/src/components/tools/upscale-settings.tsx
@@ -235,7 +235,7 @@ export function UpscaleSettings() {
       <UpscaleControls onChange={setSettings} />
 
       {/* Error */}
-      {error && <p className="text-xs text-red-500">{error}</p>}
+      {error && <p className="text-xs text-destructive-ink">{error}</p>}
 
       {/* Size info */}
       {originalSize != null && processedSize != null && (
@@ -277,7 +277,7 @@ export function UpscaleSettings() {
           href={downloadUrl}
           download
           data-testid="upscale-download"
-          className="w-full py-2.5 rounded-lg border border-primary text-primary font-medium flex items-center justify-center gap-2 hover:bg-primary/5"
+          className="w-full py-2.5 rounded-lg border border-primary text-primary-ink font-medium flex items-center justify-center gap-2 hover:bg-primary/5"
         >
           <Download className="h-4 w-4" />
           Download
diff --git a/apps/web/src/components/tools/vectorize-settings.tsx b/apps/web/src/components/tools/vectorize-settings.tsx
index baef30a0..1436b4dc 100644
--- a/apps/web/src/components/tools/vectorize-settings.tsx
+++ b/apps/web/src/components/tools/vectorize-settings.tsx
@@ -344,7 +344,7 @@ export function VectorizeSettings() {
       <div className="border-t border-border" />
 
       {/* Error */}
-      {error && <p className="text-xs text-red-500">{error}</p>}
+      {error && <p className="text-xs text-destructive-ink">{error}</p>}
 
       {/* Size info */}
       {originalSize != null && processedSize != null && (
@@ -384,7 +384,7 @@ export function VectorizeSettings() {
           href={downloadUrl}
           download
           data-testid="vectorize-download"
-          className="w-full py-2.5 rounded-lg border border-primary text-primary font-medium flex items-center justify-center gap-2 hover:bg-primary/5"
+          className="w-full py-2.5 rounded-lg border border-primary text-primary-ink font-medium flex items-center justify-center gap-2 hover:bg-primary/5"
         >
           <Download className="h-4 w-4" />
           Download SVG
diff --git a/apps/web/src/components/tools/video-color-settings.tsx b/apps/web/src/components/tools/video-color-settings.tsx
index 52e421bb..a641ff60 100644
--- a/apps/web/src/components/tools/video-color-settings.tsx
+++ b/apps/web/src/components/tools/video-color-settings.tsx
@@ -95,7 +95,7 @@ export function VideoColorSettings() {
         />
       </div>
 
-      {error && <p className="text-xs text-red-500">{error}</p>}
+      {error && <p className="text-xs text-destructive-ink">{error}</p>}
 
       {processing ? (
         <ProgressCard
diff --git a/apps/web/src/components/tools/video-loudnorm-settings.tsx b/apps/web/src/components/tools/video-loudnorm-settings.tsx
index a50eef48..0414b9e9 100644
--- a/apps/web/src/components/tools/video-loudnorm-settings.tsx
+++ b/apps/web/src/components/tools/video-loudnorm-settings.tsx
@@ -27,7 +27,7 @@ export function VideoLoudnormSettings() {
     <div className="space-y-4">
       <p className="text-[10px] text-muted-foreground">{s.hint}</p>
 
-      {error && <p className="text-xs text-red-500">{error}</p>}
+      {error && <p className="text-xs text-destructive-ink">{error}</p>}
 
       {processing ? (
         <ProgressCard
diff --git a/apps/web/src/components/tools/video-metadata-settings.tsx b/apps/web/src/components/tools/video-metadata-settings.tsx
index 6ad3f659..312e2c75 100644
--- a/apps/web/src/components/tools/video-metadata-settings.tsx
+++ b/apps/web/src/components/tools/video-metadata-settings.tsx
@@ -27,7 +27,7 @@ export function VideoMetadataSettings() {
     <div className="space-y-4">
       <p className="text-[10px] text-muted-foreground">{s.hint}</p>
 
-      {error && <p className="text-xs text-red-500">{error}</p>}
+      {error && <p className="text-xs text-destructive-ink">{error}</p>}
 
       {processing ? (
         <ProgressCard
diff --git a/apps/web/src/components/tools/video-speed-settings.tsx b/apps/web/src/components/tools/video-speed-settings.tsx
index eabcabe6..7b8a2856 100644
--- a/apps/web/src/components/tools/video-speed-settings.tsx
+++ b/apps/web/src/components/tools/video-speed-settings.tsx
@@ -55,7 +55,7 @@ export function VideoSpeedSettings() {
         {s.keepPitch}
       </label>
 
-      {error && <p className="text-xs text-red-500">{error}</p>}
+      {error && <p className="text-xs text-destructive-ink">{error}</p>}
 
       {processing ? (
         <ProgressCard
diff --git a/apps/web/src/components/tools/video-to-frames-settings.tsx b/apps/web/src/components/tools/video-to-frames-settings.tsx
index 47edd03a..8ece4e25 100644
--- a/apps/web/src/components/tools/video-to-frames-settings.tsx
+++ b/apps/web/src/components/tools/video-to-frames-settings.tsx
@@ -101,7 +101,7 @@ export function VideoToFramesSettings() {
         </select>
       </div>
 
-      {error && <p className="text-xs text-red-500">{error}</p>}
+      {error && <p className="text-xs text-destructive-ink">{error}</p>}
 
       {processing ? (
         <ProgressCard
diff --git a/apps/web/src/components/tools/video-to-gif-settings.tsx b/apps/web/src/components/tools/video-to-gif-settings.tsx
index 2b2c0cb5..70b4ce54 100644
--- a/apps/web/src/components/tools/video-to-gif-settings.tsx
+++ b/apps/web/src/components/tools/video-to-gif-settings.tsx
@@ -94,7 +94,7 @@ export function VideoToGifSettings() {
         />
       </div>
 
-      {error && <p className="text-xs text-red-500">{error}</p>}
+      {error && <p className="text-xs text-destructive-ink">{error}</p>}
 
       {processing ? (
         <ProgressCard
diff --git a/apps/web/src/components/tools/video-to-webp-settings.tsx b/apps/web/src/components/tools/video-to-webp-settings.tsx
index f5670c0a..c9c62bf2 100644
--- a/apps/web/src/components/tools/video-to-webp-settings.tsx
+++ b/apps/web/src/components/tools/video-to-webp-settings.tsx
@@ -89,7 +89,7 @@ export function VideoToWebpSettings() {
         {s.loop}
       </label>
 
-      {error && <p className="text-xs text-red-500">{error}</p>}
+      {error && <p className="text-xs text-destructive-ink">{error}</p>}
 
       {processing ? (
         <ProgressCard
diff --git a/apps/web/src/components/tools/vignette-settings.tsx b/apps/web/src/components/tools/vignette-settings.tsx
index f890b7fb..83d60ca0 100644
--- a/apps/web/src/components/tools/vignette-settings.tsx
+++ b/apps/web/src/components/tools/vignette-settings.tsx
@@ -231,7 +231,7 @@ export function VignetteSettings({
         </div>
       </div>
 
-      {error && <p className="text-xs text-red-500">{error}</p>}
+      {error && <p className="text-xs text-destructive-ink">{error}</p>}
 
       {processing ? (
         <ProgressCard
@@ -260,7 +260,7 @@ export function VignetteSettings({
           href={downloadUrl}
           download
           data-testid="vignette-download"
-          className="w-full py-2.5 rounded-lg border border-primary text-primary font-medium flex items-center justify-center gap-2 hover:bg-primary/5"
+          className="w-full py-2.5 rounded-lg border border-primary text-primary-ink font-medium flex items-center justify-center gap-2 hover:bg-primary/5"
         >
           <Download className="h-4 w-4" />
           {t.common.download}
diff --git a/apps/web/src/components/tools/volume-adjust-settings.tsx b/apps/web/src/components/tools/volume-adjust-settings.tsx
index ce98f11f..7f8a1281 100644
--- a/apps/web/src/components/tools/volume-adjust-settings.tsx
+++ b/apps/web/src/components/tools/volume-adjust-settings.tsx
@@ -44,7 +44,7 @@ export function VolumeAdjustSettings() {
         />
       </div>
 
-      {error && <p className="text-xs text-red-500">{error}</p>}
+      {error && <p className="text-xs text-destructive-ink">{error}</p>}
 
       {processing ? (
         <ProgressCard
diff --git a/apps/web/src/components/tools/watermark-image-settings.tsx b/apps/web/src/components/tools/watermark-image-settings.tsx
index 65a0e351..fc8af629 100644
--- a/apps/web/src/components/tools/watermark-image-settings.tsx
+++ b/apps/web/src/components/tools/watermark-image-settings.tsx
@@ -181,7 +181,7 @@ export function WatermarkImageSettings() {
         />
       </div>
 
-      {error && <p className="text-xs text-red-500">{error}</p>}
+      {error && <p className="text-xs text-destructive-ink">{error}</p>}
 
       {originalSize != null && processedSize != null && (
         <div className="text-xs text-muted-foreground space-y-0.5">
@@ -210,7 +210,7 @@ export function WatermarkImageSettings() {
           href={downloadUrl}
           download
           data-testid="watermark-image-download"
-          className="w-full py-2.5 rounded-lg border border-primary text-primary font-medium flex items-center justify-center gap-2 hover:bg-primary/5"
+          className="w-full py-2.5 rounded-lg border border-primary text-primary-ink font-medium flex items-center justify-center gap-2 hover:bg-primary/5"
         >
           <Download className="h-4 w-4" />
           Download
diff --git a/apps/web/src/components/tools/watermark-pdf-settings.tsx b/apps/web/src/components/tools/watermark-pdf-settings.tsx
index 8e44cc6b..3ac05b6d 100644
--- a/apps/web/src/components/tools/watermark-pdf-settings.tsx
+++ b/apps/web/src/components/tools/watermark-pdf-settings.tsx
@@ -118,7 +118,7 @@ export function WatermarkPdfSettings() {
         />
       </div>
 
-      {error && <p className="text-xs text-red-500">{error}</p>}
+      {error && <p className="text-xs text-destructive-ink">{error}</p>}
 
       {processing ? (
         <ProgressCard
diff --git a/apps/web/src/components/tools/watermark-text-settings.tsx b/apps/web/src/components/tools/watermark-text-settings.tsx
index d143a6d3..fcb0f256 100644
--- a/apps/web/src/components/tools/watermark-text-settings.tsx
+++ b/apps/web/src/components/tools/watermark-text-settings.tsx
@@ -179,7 +179,7 @@ export function WatermarkTextSettings() {
     <div className="space-y-4">
       <WatermarkTextControls onChange={setSettings} />
 
-      {error && <p className="text-xs text-red-500">{error}</p>}
+      {error && <p className="text-xs text-destructive-ink">{error}</p>}
 
       {originalSize != null && processedSize != null && (
         <div className="text-xs text-muted-foreground space-y-0.5">
@@ -214,7 +214,7 @@ export function WatermarkTextSettings() {
           href={downloadUrl}
           download
           data-testid="watermark-text-download"
-          className="w-full py-2.5 rounded-lg border border-primary text-primary font-medium flex items-center justify-center gap-2 hover:bg-primary/5"
+          className="w-full py-2.5 rounded-lg border border-primary text-primary-ink font-medium flex items-center justify-center gap-2 hover:bg-primary/5"
         >
           <Download className="h-4 w-4" />
           Download
diff --git a/apps/web/src/components/tools/watermark-video-settings.tsx b/apps/web/src/components/tools/watermark-video-settings.tsx
index 193396d2..783bb713 100644
--- a/apps/web/src/components/tools/watermark-video-settings.tsx
+++ b/apps/web/src/components/tools/watermark-video-settings.tsx
@@ -118,7 +118,7 @@ export function WatermarkVideoSettings() {
         <p className="text-[10px] text-muted-foreground mt-0.5">{s.colorHint}</p>
       </div>
 
-      {error && <p className="text-xs text-red-500">{error}</p>}
+      {error && <p className="text-xs text-destructive-ink">{error}</p>}
 
       {processing ? (
         <ProgressCard
diff --git a/apps/web/src/components/tools/waveform-image-settings.tsx b/apps/web/src/components/tools/waveform-image-settings.tsx
index 5e405117..5fd39733 100644
--- a/apps/web/src/components/tools/waveform-image-settings.tsx
+++ b/apps/web/src/components/tools/waveform-image-settings.tsx
@@ -76,7 +76,7 @@ export function WaveformImageSettings() {
         />
       </div>
 
-      {error && <p className="text-xs text-red-500">{error}</p>}
+      {error && <p className="text-xs text-destructive-ink">{error}</p>}
 
       {processing ? (
         <ProgressCard
diff --git a/apps/web/src/components/tools/word-to-pdf-settings.tsx b/apps/web/src/components/tools/word-to-pdf-settings.tsx
index ae2286cf..4cdbe69c 100644
--- a/apps/web/src/components/tools/word-to-pdf-settings.tsx
+++ b/apps/web/src/components/tools/word-to-pdf-settings.tsx
@@ -25,7 +25,7 @@ export function WordToPdfSettings() {
 
   return (
     <div className="space-y-4">
-      {error && <p className="text-xs text-red-500">{error}</p>}
+      {error && <p className="text-xs text-destructive-ink">{error}</p>}
 
       {processing ? (
         <ProgressCard
diff --git a/apps/web/src/components/tools/xml-to-csv-settings.tsx b/apps/web/src/components/tools/xml-to-csv-settings.tsx
index a83956ee..c2368eb5 100644
--- a/apps/web/src/components/tools/xml-to-csv-settings.tsx
+++ b/apps/web/src/components/tools/xml-to-csv-settings.tsx
@@ -25,7 +25,7 @@ export function XmlToCsvSettings() {
 
   return (
     <div className="space-y-4">
-      {error && <p className="text-xs text-red-500">{error}</p>}
+      {error && <p className="text-xs text-destructive-ink">{error}</p>}
 
       {processing ? (
         <ProgressCard
diff --git a/apps/web/src/components/tools/yaml-json-settings.tsx b/apps/web/src/components/tools/yaml-json-settings.tsx
index acd73598..546538c1 100644
--- a/apps/web/src/components/tools/yaml-json-settings.tsx
+++ b/apps/web/src/components/tools/yaml-json-settings.tsx
@@ -25,7 +25,7 @@ export function YamlJsonSettings() {
 
   return (
     <div className="space-y-4">
-      {error && <p className="text-xs text-red-500">{error}</p>}
+      {error && <p className="text-xs text-destructive-ink">{error}</p>}
 
       {processing ? (
         <ProgressCard
diff --git a/apps/web/src/pages/automate-page.tsx b/apps/web/src/pages/automate-page.tsx
index 6aa7f96c..ee5bbdff 100644
--- a/apps/web/src/pages/automate-page.tsx
+++ b/apps/web/src/pages/automate-page.tsx
@@ -475,7 +475,7 @@ export function AutomatePage() {
         <div className="flex items-center justify-center h-full">
           <div className="text-center p-6 max-w-xs">
             <div className="mx-auto w-14 h-14 rounded-2xl bg-emerald-50 dark:bg-emerald-950/30 flex items-center justify-center mb-3">
-              <CheckCircle2 className="h-7 w-7 text-emerald-600 dark:text-emerald-400" />
+              <CheckCircle2 className="h-7 w-7 text-success-ink" />
             </div>
             <p className="font-medium text-foreground mb-1">{fname}</p>
             <p className="text-xs text-muted-foreground">
@@ -563,7 +563,7 @@ export function AutomatePage() {
                 <button
                   type="button"
                   onClick={() => setLibraryModalOpen(true)}
-                  className="w-full flex items-center justify-center gap-2 px-3 py-2 text-sm text-primary border border-dashed border-primary/40 rounded-lg hover:bg-primary/5 transition-colors"
+                  className="w-full flex items-center justify-center gap-2 px-3 py-2 text-sm text-primary-ink border border-dashed border-primary/40 rounded-lg hover:bg-primary/5 transition-colors"
                 >
                   <FolderOpen className="h-4 w-4" />
                   {t.automate.importFromLibrary}
@@ -573,21 +573,21 @@ export function AutomatePage() {
 
             {hasFile && (
               <div className="flex items-center gap-2 mb-3 p-2 rounded-lg bg-muted/50">
-                <CheckCircle2 className="h-4 w-4 text-green-500 shrink-0" />
+                <CheckCircle2 className="h-4 w-4 text-success-ink shrink-0" />
                 <span className="text-sm text-foreground truncate flex-1">
                   {selectedFileName ?? files[0].name}
                 </span>
                 <button
                   type="button"
                   onClick={handleAddMore}
-                  className="text-xs text-primary hover:text-primary/80"
+                  className="text-xs text-primary-ink hover:text-primary-ink-strong"
                 >
                   + Add
                 </button>
                 <button
                   type="button"
                   onClick={() => setLibraryModalOpen(true)}
-                  className="text-xs text-primary hover:text-primary/80"
+                  className="text-xs text-primary-ink hover:text-primary-ink-strong"
                 >
                   Library
                 </button>
@@ -624,7 +624,7 @@ export function AutomatePage() {
 
             {hasFile && !hasProcessed && currentEntry?.status === "failed" && (
               <div className="mb-3 rounded-lg border border-border p-3 text-center">
-                <p className="text-sm text-red-500">
+                <p className="text-sm text-destructive-ink">
                   {currentEntry.error ?? t.toolPage.processingFailed}
                 </p>
               </div>
@@ -651,7 +651,7 @@ export function AutomatePage() {
             />
 
             {error && (
-              <div className="mt-3 text-xs text-red-500 bg-red-50 dark:bg-red-950/30 rounded px-2 py-1.5 flex items-start gap-1.5">
+              <div className="mt-3 text-xs text-destructive-ink bg-red-50 dark:bg-red-950/30 rounded px-2 py-1.5 flex items-start gap-1.5">
                 <X className="h-3.5 w-3.5 shrink-0 mt-0.5" />
                 <span>{error}</span>
               </div>
@@ -690,7 +690,7 @@ export function AutomatePage() {
               <button
                 type="button"
                 onClick={handleDownloadAll}
-                className="px-4 py-2.5 rounded-lg border border-primary text-primary"
+                className="px-4 py-2.5 rounded-lg border border-primary text-primary-ink"
               >
                 <Download className="h-4 w-4" />
               </button>
@@ -699,7 +699,7 @@ export function AutomatePage() {
               <button
                 type="button"
                 onClick={handleDownloadSingle}
-                className="px-4 py-2.5 rounded-lg border border-primary text-primary"
+                className="px-4 py-2.5 rounded-lg border border-primary text-primary-ink"
               >
                 <Download className="h-4 w-4" />
               </button>
@@ -782,14 +782,14 @@ export function AutomatePage() {
               <button
                 type="button"
                 onClick={handleImportPipeline}
-                className="text-xs text-muted-foreground hover:text-primary flex items-center gap-1 transition-colors"
+                className="text-xs text-muted-foreground hover:text-primary-ink flex items-center gap-1 transition-colors"
               >
                 <Upload className="h-3 w-3" />
                 Import
               </button>
             </div>
             {importError && (
-              <div className="text-xs text-red-500 bg-red-50 dark:bg-red-950/30 rounded px-2 py-1.5 mb-1.5 flex items-start gap-1.5">
+              <div className="text-xs text-destructive-ink bg-red-50 dark:bg-red-950/30 rounded px-2 py-1.5 mb-1.5 flex items-start gap-1.5">
                 <X className="h-3 w-3 shrink-0 mt-0.5" />
                 <span>{importError}</span>
               </div>
@@ -803,7 +803,7 @@ export function AutomatePage() {
                     <button
                       type="button"
                       onClick={() => handleLoadPipeline(p)}
-                      className="flex-1 text-start text-xs text-foreground hover:text-primary truncate py-1 px-2 rounded hover:bg-muted"
+                      className="flex-1 text-start text-xs text-foreground hover:text-primary-ink truncate py-1 px-2 rounded hover:bg-muted"
                     >
                       {p.name}
                       <span className="text-muted-foreground ms-1">
@@ -813,7 +813,7 @@ export function AutomatePage() {
                     <button
                       type="button"
                       onClick={() => handleExportPipeline(p)}
-                      className="p-1 rounded hover:bg-primary/10 text-muted-foreground hover:text-primary transition-all shrink-0"
+                      className="p-1 rounded hover:bg-primary/10 text-muted-foreground hover:text-primary-ink transition-all shrink-0"
                       title="Export pipeline"
                     >
                       <Download className="h-3 w-3" />
@@ -843,7 +843,7 @@ export function AutomatePage() {
                     <button
                       type="button"
                       onClick={() => handleLoadPipeline(p)}
-                      className="flex-1 text-start text-xs text-foreground hover:text-primary truncate py-1 px-2 rounded hover:bg-muted"
+                      className="flex-1 text-start text-xs text-foreground hover:text-primary-ink truncate py-1 px-2 rounded hover:bg-muted"
                     >
                       {p.name}
                       <span className="text-muted-foreground ms-1">
@@ -853,7 +853,7 @@ export function AutomatePage() {
                     <button
                       type="button"
                       onClick={() => handleExportPipeline(p)}
-                      className="p-1 rounded hover:bg-primary/10 text-muted-foreground hover:text-primary transition-all shrink-0"
+                      className="p-1 rounded hover:bg-primary/10 text-muted-foreground hover:text-primary-ink transition-all shrink-0"
                       title="Export pipeline"
                     >
                       <Download className="h-3 w-3" />
@@ -894,7 +894,7 @@ export function AutomatePage() {
             {hasFile ? (
               <div className="flex items-center gap-2 shrink-0">
                 <div className="flex items-center gap-1.5 text-xs bg-muted rounded-full px-3 py-1">
-                  <CheckCircle2 className="h-3.5 w-3.5 text-green-500" />
+                  <CheckCircle2 className="h-3.5 w-3.5 text-success-ink" />
                   <span className="text-foreground max-w-[120px] truncate">
                     {files.length > 1
                       ? `${files.length} files`
@@ -907,14 +907,14 @@ export function AutomatePage() {
                 <button
                   type="button"
                   onClick={handleAddMore}
-                  className="text-xs text-primary hover:text-primary/80"
+                  className="text-xs text-primary-ink hover:text-primary-ink-strong"
                 >
                   + Add
                 </button>
                 <button
                   type="button"
                   onClick={() => setLibraryModalOpen(true)}
-                  className="text-xs text-primary hover:text-primary/80 flex items-center gap-1"
+                  className="text-xs text-primary-ink hover:text-primary-ink-strong flex items-center gap-1"
                 >
                   <FolderOpen className="h-3 w-3" />
                   Library
@@ -935,7 +935,7 @@ export function AutomatePage() {
                 <button
                   type="button"
                   onClick={() => setLibraryModalOpen(true)}
-                  className="text-xs text-primary hover:text-primary/80 flex items-center gap-1"
+                  className="text-xs text-primary-ink hover:text-primary-ink-strong flex items-center gap-1"
                 >
                   <FolderOpen className="h-3 w-3" />
                   {t.automate.importFromLibrary}
@@ -949,7 +949,7 @@ export function AutomatePage() {
             {/* Pipeline steps area */}
             <div className="flex-1 overflow-y-auto px-5 py-4 min-h-0">
               {error && (
-                <div className="mb-3 text-xs text-red-500 bg-red-50 dark:bg-red-950/30 rounded-lg px-3 py-2 flex items-start gap-1.5">
+                <div className="mb-3 text-xs text-destructive-ink bg-red-50 dark:bg-red-950/30 rounded-lg px-3 py-2 flex items-start gap-1.5">
                   <X className="h-3.5 w-3.5 shrink-0 mt-0.5" />
                   <span>{error}</span>
                 </div>
@@ -1001,7 +1001,7 @@ export function AutomatePage() {
                 <button
                   type="button"
                   onClick={handleDownloadAll}
-                  className="px-4 py-2.5 rounded-lg border border-primary text-primary font-medium flex items-center gap-2 hover:bg-primary/5"
+                  className="px-4 py-2.5 rounded-lg border border-primary text-primary-ink font-medium flex items-center gap-2 hover:bg-primary/5"
                 >
                   <Download className="h-4 w-4" />
                   {t.automate.downloadZip}
@@ -1011,7 +1011,7 @@ export function AutomatePage() {
                 <button
                   type="button"
                   onClick={handleDownloadSingle}
-                  className="px-4 py-2.5 rounded-lg border border-primary text-primary font-medium flex items-center gap-2 hover:bg-primary/5"
+                  className="px-4 py-2.5 rounded-lg border border-primary text-primary-ink font-medium flex items-center gap-2 hover:bg-primary/5"
                 >
                   <Download className="h-4 w-4" />
                   {t.common.download}
@@ -1147,7 +1147,7 @@ export function AutomatePage() {
                         <button
                           type="button"
                           onClick={() => setLibraryModalOpen(true)}
-                          className="flex items-center gap-2 px-4 py-1.5 text-sm text-primary border border-dashed border-primary/40 rounded-lg hover:bg-primary/5 transition-colors"
+                          className="flex items-center gap-2 px-4 py-1.5 text-sm text-primary-ink border border-dashed border-primary/40 rounded-lg hover:bg-primary/5 transition-colors"
                         >
                           <FolderOpen className="h-4 w-4" />
                           {t.automate.importFromLibrary}
@@ -1157,7 +1157,7 @@ export function AutomatePage() {
 
                     {hasFile && !hasProcessed && currentEntry?.status === "failed" && (
                       <div className="flex flex-col items-center justify-center gap-2 h-full text-center px-4">
-                        <p className="text-sm text-red-500">
+                        <p className="text-sm text-destructive-ink">
                           {currentEntry.error ?? t.toolPage.processingFailed}
                         </p>
                       </div>
diff --git a/apps/web/src/pages/change-password-page.tsx b/apps/web/src/pages/change-password-page.tsx
index 57357307..85b1fd65 100644
--- a/apps/web/src/pages/change-password-page.tsx
+++ b/apps/web/src/pages/change-password-page.tsx
@@ -123,7 +123,7 @@ export function ChangePasswordPage() {
         <div className="w-full max-w-md space-y-8">
           <div>
             <h1 className="text-3xl font-bold text-foreground">
-              <span className="text-primary">SnapOtter</span>
+              <span className="text-primary-ink">SnapOtter</span>
             </h1>
             <h2 className="text-2xl font-bold mt-4 text-foreground">{t.changePassword.title}</h2>
             <p className="text-sm text-muted-foreground mt-2">{t.changePassword.description}</p>
@@ -169,7 +169,7 @@ export function ChangePasswordPage() {
                 <button
                   type="button"
                   onClick={handleGenerate}
-                  className="flex items-center gap-1.5 px-2.5 py-1 rounded-lg border border-primary/30 bg-primary/10 text-xs text-primary hover:bg-primary/20 font-medium transition-colors"
+                  className="flex items-center gap-1.5 px-2.5 py-1 rounded-lg border border-primary/30 bg-primary/10 text-xs text-primary-ink hover:bg-primary/20 font-medium transition-colors"
                 >
                   <Sparkles className="h-3 w-3" />
                   {t.changePassword.generateButton}
@@ -223,11 +223,11 @@ export function ChangePasswordPage() {
           </form>
         </div>
       </div>
-      <div className="hidden lg:flex flex-1 bg-primary/90 items-center justify-center p-12 text-white rounded-s-3xl">
+      <div className="hidden lg:flex flex-1 bg-primary/90 items-center justify-center p-12 text-primary-foreground rounded-s-3xl">
         <div className="max-w-lg space-y-6 text-center">
           <span className="text-7xl">🦦</span>
           <h2 className="text-3xl font-bold">{t.changePassword.sidebarTitle}</h2>
-          <p className="text-lg text-white/80">{t.changePassword.sidebarDescription}</p>
+          <p className="text-lg text-primary-foreground">{t.changePassword.sidebarDescription}</p>
         </div>
       </div>
     </div>
diff --git a/apps/web/src/pages/files-page.tsx b/apps/web/src/pages/files-page.tsx
index a8ec9045..35a1030f 100644
--- a/apps/web/src/pages/files-page.tsx
+++ b/apps/web/src/pages/files-page.tsx
@@ -39,7 +39,7 @@ export function FilesPage() {
               onClick={() => setActiveTab("recent")}
               className={`flex-1 py-2.5 text-sm font-medium text-center transition-colors ${
                 activeTab === "recent"
-                  ? "text-primary border-b-2 border-primary"
+                  ? "text-primary-ink border-b-2 border-primary"
                   : "text-muted-foreground"
               }`}
             >
@@ -50,7 +50,7 @@ export function FilesPage() {
               onClick={() => setActiveTab("upload")}
               className={`flex-1 py-2.5 text-sm font-medium text-center transition-colors ${
                 activeTab === "upload"
-                  ? "text-primary border-b-2 border-primary"
+                  ? "text-primary-ink border-b-2 border-primary"
                   : "text-muted-foreground"
               }`}
             >
diff --git a/apps/web/src/pages/home-page.tsx b/apps/web/src/pages/home-page.tsx
index a844b99d..fce87032 100644
--- a/apps/web/src/pages/home-page.tsx
+++ b/apps/web/src/pages/home-page.tsx
@@ -250,7 +250,7 @@ function HomeSearchBar({
         }}
         placeholder={placeholder}
         aria-label={placeholder}
-        className="w-full ps-11 pe-20 py-2.5 rounded-lg border border-border bg-card text-sm text-foreground placeholder:text-muted-foreground/60 focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary/40 transition-shadow"
+        className="w-full ps-11 pe-20 py-2.5 rounded-lg border border-border bg-card text-sm text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary/40 transition-shadow"
       />
       {value ? (
         <button
@@ -305,9 +305,7 @@ function ModalityTabs({
             )}
           >
             {tab.label}
-            <span className={cn("ms-1", activeTab === tab.key ? "opacity-80" : "opacity-50")}>
-              {counts[tab.key] ?? 0}
-            </span>
+            <span className="ms-1">{counts[tab.key] ?? 0}</span>
           </button>
         ))}
       </div>
@@ -335,7 +333,7 @@ function RequestToolAffordance({
       : t.homePage.requestToolBelowResults;
   const promptVariant: FeedbackPromptVariant =
     variant === "empty" ? "search-empty-v1" : "search-results-v1";
-  const className = "inline-flex items-center gap-1.5 text-sm text-primary hover:underline";
+  const className = "inline-flex items-center gap-1.5 text-sm text-primary-ink hover:underline";
 
   if (analyticsOn) {
     return (
@@ -391,7 +389,11 @@ function SearchResults({
             analyticsOn={analyticsOn}
             onRequest={onRequest}
           />
-          <button type="button" onClick={onClear} className="text-sm text-primary hover:underline">
+          <button
+            type="button"
+            onClick={onClear}
+            className="text-sm text-primary-ink hover:underline"
+          >
             {t.homePage.clearSearch}
           </button>
         </div>
@@ -478,7 +480,7 @@ function AllTabContent({
       {/* Pinned */}
       {pinnedTools.length > 0 && (
         <section>
-          <h2 className="text-[11px] font-semibold uppercase text-muted-foreground/70 tracking-widest mb-2">
+          <h2 className="text-[11px] font-semibold uppercase text-muted-foreground tracking-widest mb-2">
             {t.homePage.pinned}
           </h2>
           <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-2">
@@ -492,7 +494,7 @@ function AllTabContent({
       {/* Recent */}
       {recentTools.length > 0 && (
         <section>
-          <h2 className="text-[11px] font-semibold uppercase text-muted-foreground/70 tracking-widest mb-2">
+          <h2 className="text-[11px] font-semibold uppercase text-muted-foreground tracking-widest mb-2">
             {t.homePage.recent}
           </h2>
           <div className="flex flex-wrap gap-1.5">
@@ -555,7 +557,7 @@ function AllTabContent({
                   const tools = categoryMap.get(category.id) ?? [];
                   return (
                     <div key={category.id}>
-                      <h3 className="text-[11px] font-semibold uppercase text-muted-foreground/50 tracking-widest mb-1.5">
+                      <h3 className="text-[11px] font-semibold uppercase text-muted-foreground tracking-widest mb-1.5">
                         {getCategoryName(t, category.id, category.name)}
                       </h3>
                       <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-2">
@@ -592,7 +594,7 @@ function CategoryGrid({ groupedTools }: { groupedTools: Map<string, Tool[]> }) {
         const tools = groupedTools.get(category.id) ?? [];
         return (
           <section key={category.id}>
-            <h2 className="text-[11px] font-semibold uppercase text-muted-foreground/70 tracking-widest mb-2 pb-1.5 border-b border-border/40">
+            <h2 className="text-[11px] font-semibold uppercase text-muted-foreground tracking-widest mb-2 pb-1.5 border-b border-border/40">
               {getCategoryName(t, category.id, category.name)}
             </h2>
             <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-2">
diff --git a/apps/web/src/pages/login-page.tsx b/apps/web/src/pages/login-page.tsx
index fc353d6c..49a905f6 100644
--- a/apps/web/src/pages/login-page.tsx
+++ b/apps/web/src/pages/login-page.tsx
@@ -27,7 +27,7 @@ function RotatingPhrase() {
 
   return (
     <span
-      className="inline-block transition-all duration-300 text-white/90"
+      className="inline-block transition-all duration-300 text-primary-foreground"
       style={{
         opacity: visible ? 1 : 0,
         transform: visible ? "translateY(0)" : "translateY(-8px)",
@@ -251,7 +251,7 @@ export function LoginPage() {
         <div className="w-full max-w-md space-y-8">
           <div>
             <h1 className="text-3xl font-bold text-foreground">
-              <span className="text-primary">SnapOtter</span>
+              <span className="text-primary-ink">SnapOtter</span>
             </h1>
             <h2 className="text-2xl font-bold mt-4 text-foreground">{t.auth.login}</h2>
           </div>
@@ -260,7 +260,7 @@ export function LoginPage() {
               {oidcEnabled && (
                 <a
                   href="/api/auth/oidc/login"
-                  className="w-full py-3 px-4 rounded-lg bg-primary text-primary-foreground font-medium shadow-sm hover:bg-primary-dark transition-colors flex items-center justify-center gap-2.5"
+                  className="w-full py-3 px-4 rounded-lg bg-primary text-primary-foreground font-medium shadow-sm hover:bg-primary-light transition-colors flex items-center justify-center gap-2.5"
                 >
                   <KeyRound className="w-[18px] h-[18px]" aria-hidden="true" />
                   {format(t.auth.signInWith, { provider: oidcProviderName || "SSO" })}
@@ -269,7 +269,7 @@ export function LoginPage() {
               {samlEnabled && (
                 <a
                   href="/api/auth/saml/login"
-                  className="w-full py-3 px-4 rounded-lg bg-primary text-primary-foreground font-medium shadow-sm hover:bg-primary-dark transition-colors flex items-center justify-center gap-2.5"
+                  className="w-full py-3 px-4 rounded-lg bg-primary text-primary-foreground font-medium shadow-sm hover:bg-primary-light transition-colors flex items-center justify-center gap-2.5"
                 >
                   <KeyRound className="w-[18px] h-[18px]" aria-hidden="true" />
                   {format(t.auth.signInWith, { provider: samlProviderName || "SSO" })}
@@ -415,7 +415,7 @@ export function LoginPage() {
                   className="group w-full py-3 px-4 rounded-lg border border-border bg-card text-foreground font-medium shadow-sm hover:border-primary hover:bg-primary-subtle transition-colors flex items-center justify-center gap-2.5"
                 >
                   <KeyRound
-                    className="w-[18px] h-[18px] text-muted-foreground group-hover:text-primary transition-colors"
+                    className="w-[18px] h-[18px] text-muted-foreground group-hover:text-primary-ink transition-colors"
                     aria-hidden="true"
                   />
                   {format(t.auth.signInWith, { provider: oidcProviderName || "SSO" })}
@@ -427,7 +427,7 @@ export function LoginPage() {
                   className="group w-full mt-2 py-3 px-4 rounded-lg border border-border bg-card text-foreground font-medium shadow-sm hover:border-primary hover:bg-primary-subtle transition-colors flex items-center justify-center gap-2.5"
                 >
                   <KeyRound
-                    className="w-[18px] h-[18px] text-muted-foreground group-hover:text-primary transition-colors"
+                    className="w-[18px] h-[18px] text-muted-foreground group-hover:text-primary-ink transition-colors"
                     aria-hidden="true"
                   />
                   {format(t.auth.signInWith, { provider: samlProviderName || "SSO" })}
@@ -440,10 +440,10 @@ export function LoginPage() {
           </div>
         </div>
       </div>
-      <div className="hidden lg:flex flex-1 bg-primary/90 items-center justify-center p-12 text-white rounded-s-3xl">
+      <div className="hidden lg:flex flex-1 bg-primary/90 items-center justify-center p-12 text-primary-foreground rounded-s-3xl">
         <div className="max-w-lg space-y-4 text-center">
           <h2 className="text-4xl font-extrabold tracking-tight">{t.auth.heroTitle}</h2>
-          <p className="text-lg text-white/70">{t.auth.heroSubtitle}</p>
+          <p className="text-lg text-primary-foreground">{t.auth.heroSubtitle}</p>
           <p className="text-xl font-medium h-8">
             <RotatingPhrase />
           </p>
diff --git a/apps/web/src/pages/not-found-page.tsx b/apps/web/src/pages/not-found-page.tsx
index 277991d4..5ab81108 100644
--- a/apps/web/src/pages/not-found-page.tsx
+++ b/apps/web/src/pages/not-found-page.tsx
@@ -7,7 +7,7 @@ export function NotFoundPage() {
   return (
     <div className="flex h-dvh items-center justify-center bg-background text-foreground">
       <div className="text-center space-y-4 max-w-md px-6">
-        <h1 className="text-6xl font-bold text-primary">404</h1>
+        <h1 className="text-6xl font-bold text-primary-ink">404</h1>
         <h2 className="text-xl font-semibold">{t.common.pageNotFound}</h2>
         <p className="text-sm text-muted-foreground">{t.common.pageNotFoundDescription}</p>
         <Link
diff --git a/apps/web/src/pages/tool-page.tsx b/apps/web/src/pages/tool-page.tsx
index 04a89ffd..b221064a 100644
--- a/apps/web/src/pages/tool-page.tsx
+++ b/apps/web/src/pages/tool-page.tsx
@@ -115,7 +115,7 @@ const COLLAPSED_LIMIT = 5;
 function FileStatusIcon({ status }: { status: FileEntry["status"] }) {
   switch (status) {
     case "completed":
-      return <CheckCircle2 className="h-3 w-3 text-emerald-600 shrink-0" />;
+      return <CheckCircle2 className="h-3 w-3 text-success-ink shrink-0" />;
     case "failed":
       return <XCircle className="h-3 w-3 text-destructive shrink-0" />;
     case "processing":
@@ -161,7 +161,7 @@ function FileSelectionInfo({
         <button
           type="button"
           onClick={onAddMore}
-          className="text-xs text-primary hover:text-primary/80"
+          className="text-xs text-primary-ink hover:text-primary-ink-strong"
         >
           + Add more
         </button>
@@ -198,7 +198,7 @@ function FileSelectionInfo({
           <button
             type="button"
             onClick={() => setExpanded(!expanded)}
-            className="text-xs text-primary hover:text-primary/80"
+            className="text-xs text-primary-ink hover:text-primary-ink-strong"
           >
             {expanded ? "Show less" : `Show ${files.length - COLLAPSED_LIMIT} more`}
           </button>
@@ -910,12 +910,12 @@ export function ToolPage() {
         <div className="flex-1 flex items-center justify-center">
           <div className="text-center p-8 max-w-xs">
             <div className="mx-auto w-16 h-16 rounded-2xl bg-emerald-50 dark:bg-emerald-950/30 flex items-center justify-center mb-4">
-              <CheckCircle2 className="h-8 w-8 text-emerald-600 dark:text-emerald-400" />
+              <CheckCircle2 className="h-8 w-8 text-success-ink" />
             </div>
             <p className="font-medium text-foreground mb-1">{t.toolPage.conversionComplete}</p>
             <p className="text-sm text-muted-foreground mb-1">{processedFileName}</p>
             {processedSize != null && (
-              <p className="text-xs text-muted-foreground/60">
+              <p className="text-xs text-muted-foreground">
                 {processedFileType} &middot; {formatFileSize(processedSize)}
               </p>
             )}
@@ -1016,7 +1016,7 @@ export function ToolPage() {
               <p className="text-sm text-muted-foreground mb-1">
                 {ext} &middot; {formatFileSize(fsize)}
               </p>
-              <p className="text-xs text-muted-foreground/60">{t.toolPage.previewUnavailable}</p>
+              <p className="text-xs text-muted-foreground">{t.toolPage.previewUnavailable}</p>
             </div>
           </div>
         );
@@ -1144,7 +1144,7 @@ export function ToolPage() {
           <button
             type="button"
             onClick={handleDownloadAll}
-            className="w-full py-2.5 rounded-lg border border-primary text-primary font-medium flex items-center justify-center gap-2 hover:bg-primary/5"
+            className="w-full py-2.5 rounded-lg border border-primary text-primary-ink font-medium flex items-center justify-center gap-2 hover:bg-primary/5"
           >
             <Download className="h-4 w-4" />
             {t.toolPage.downloadAllZip}
diff --git a/apps/web/src/styles/globals.css b/apps/web/src/styles/globals.css
index 824f7597..b5e47684 100644
--- a/apps/web/src/styles/globals.css
+++ b/apps/web/src/styles/globals.css
@@ -19,12 +19,20 @@ body {
     "Apple Color Emoji", "Segoe UI Emoji";
 }
 
+/*
+ * Contrast contract (issue #557, guarded by tests/unit/palette-contrast.test.ts):
+ * fills and their -foreground labels are theme-static; text roles use the
+ * theme-aware -ink tokens; vivid primary/accent are fills and graphics, never
+ * small text. Opacity modifiers on text colors blend below AA; don't add them.
+ */
 @theme {
   --color-primary: #E07832;
-  --color-primary-foreground: #ffffff;
+  --color-primary-foreground: #1A1814;
   --color-primary-light: #F09550;
   --color-primary-dark: #C06520;
   --color-primary-subtle: #FFF5ED;
+  --color-primary-ink: #A85518;
+  --color-primary-ink-strong: #8F4712;
   --color-background: #FAFAF7;
   --color-foreground: #1A1814;
   --color-muted: #F3EEE6;
@@ -35,8 +43,13 @@ body {
   --color-sidebar: #F3EEE6;
   --color-sidebar-foreground: #3D3832;
   --color-accent: #F09550;
-  --color-destructive: #D44C47;
-  --color-success: #2D9D78;
+  --color-accent-foreground: #1A1814;
+  --color-destructive: #BE3A35;
+  --color-destructive-foreground: #ffffff;
+  --color-destructive-ink: #BE3A35;
+  --color-success: #1E7B5C;
+  --color-success-foreground: #ffffff;
+  --color-success-ink: #1E7B5C;
 }
 
 .dark {
@@ -49,6 +62,10 @@ body {
   --color-card-foreground: #F0EBE4;
   --color-sidebar: #262018;
   --color-sidebar-foreground: #C5BAB0;
+  --color-primary-ink: #F0A766;
+  --color-primary-ink-strong: #F09550;
+  --color-destructive-ink: #D9635E;
+  --color-success-ink: #2D9D78;
 }
 
 input[type="range"] {
diff --git a/tests/e2e-docker/analytics-no-data-leak.spec.ts b/tests/e2e-docker/analytics-no-data-leak.spec.ts
index 23c6d476..bde08f64 100644
--- a/tests/e2e-docker/analytics-no-data-leak.spec.ts
+++ b/tests/e2e-docker/analytics-no-data-leak.spec.ts
@@ -117,7 +117,7 @@ test.describe("No data leak when analytics disabled", () => {
     await processBtn.click();
     await waitForProcessingDone(page);
 
-    const error = page.locator(".text-red-500");
+    const error = page.locator(".text-destructive-ink, .text-red-500");
     expect(await error.isVisible({ timeout: 2_000 }).catch(() => false)).toBe(false);
 
     const downloadLink = page.locator(
diff --git a/tests/e2e-docker/fixes-verification.spec.ts b/tests/e2e-docker/fixes-verification.spec.ts
index 4fba676d..732bdf16 100644
--- a/tests/e2e-docker/fixes-verification.spec.ts
+++ b/tests/e2e-docker/fixes-verification.spec.ts
@@ -65,7 +65,7 @@ async function verifyAccurateOcrTier(
   await processButton.click();
   await waitForProcessingDone(page, 120_000);
   await expect(page.getByText(/extracted text/i)).toBeVisible({ timeout: 120_000 });
-  await expect(page.locator(".text-red-500")).toHaveCount(0);
+  await expect(page.locator(".text-destructive-ink, .text-red-500")).toHaveCount(0);
 }
 
 // ─── 1. Error messages should never show [object Object] ─────────────
@@ -114,7 +114,7 @@ test.describe("Image-to-PDF", () => {
     await waitForProcessingDone(page);
 
     // Should NOT see "Authentication required"
-    const errorEl = page.locator(".text-red-500, [class*='text-red']");
+    const errorEl = page.locator(".text-destructive-ink, .text-red-500, [class*='text-red']");
     if (await errorEl.isVisible({ timeout: 3000 })) {
       const text = await errorEl.textContent();
       expect(text).not.toContain("Authentication required");
@@ -140,7 +140,7 @@ test.describe("Image-to-PDF", () => {
     await processBtn.click();
     await waitForProcessingDone(page);
 
-    const errorEl = page.locator(".text-red-500, [class*='text-red']");
+    const errorEl = page.locator(".text-destructive-ink, .text-red-500, [class*='text-red']");
     if (await errorEl.isVisible({ timeout: 3000 })) {
       const text = await errorEl.textContent();
       expect(text).not.toContain("Authentication required");
@@ -176,7 +176,7 @@ test.describe("Split tool", () => {
     await expect(page.getByRole("button", { name: /download all/i })).toBeVisible();
 
     // No errors
-    const error = page.locator(".text-red-500");
+    const error = page.locator(".text-destructive-ink, .text-red-500");
     expect(await error.isVisible({ timeout: 1000 }).catch(() => false)).toBe(false);
   });
 
@@ -286,7 +286,9 @@ test.describe("Passport photo", () => {
     await page.waitForTimeout(5000);
 
     // Check for error message
-    const errorEl = page.locator(".text-red-500, [class*='text-red'], [class*='error']");
+    const errorEl = page.locator(
+      ".text-destructive-ink, .text-red-500, [class*='text-red'], [class*='error']",
+    );
     if (await errorEl.isVisible({ timeout: 10_000 })) {
       const text = await errorEl.textContent();
       expect(text).not.toContain("[object Object]");
@@ -309,7 +311,7 @@ test.describe("Passport photo", () => {
 
     // Face detection should succeed — look for the Generate button
     const generateBtn = page.getByRole("button", { name: /generate|create/i });
-    const analyzeError = page.locator("p.text-red-500");
+    const analyzeError = page.locator("p.text-destructive-ink, .text-red-500");
     const gotButton = await generateBtn.isVisible({ timeout: 10_000 }).catch(() => false);
     const gotError = await analyzeError.isVisible({ timeout: 1000 }).catch(() => false);
     if (gotError) {
@@ -343,7 +345,7 @@ test.describe("OCR", () => {
     // this GUI regression must reach the result state, even when the fixture
     // legitimately contains no recognized text.
     await expect(page.getByText(/extracted text/i)).toBeVisible({ timeout: 120_000 });
-    await expect(page.locator("p.text-red-500")).toHaveCount(0);
+    await expect(page.locator("p.text-destructive-ink, .text-red-500")).toHaveCount(0);
     await expect(
       page.getByTestId("ocr-result-text").or(page.getByText(/no text detected/i)),
     ).toBeVisible();
@@ -382,7 +384,7 @@ test.describe("Regression checks", () => {
     await processBtn.click();
     await waitForProcessingDone(page);
 
-    const error = page.locator(".text-red-500");
+    const error = page.locator(".text-destructive-ink, .text-red-500");
     expect(await error.isVisible({ timeout: 2000 }).catch(() => false)).toBe(false);
   });
 
@@ -395,7 +397,7 @@ test.describe("Regression checks", () => {
     await processBtn.click();
     await waitForProcessingDone(page);
 
-    const error = page.locator(".text-red-500");
+    const error = page.locator(".text-destructive-ink, .text-red-500");
     expect(await error.isVisible({ timeout: 2000 }).catch(() => false)).toBe(false);
   });
 
diff --git a/tests/e2e-landing/a11y-contrast.spec.ts b/tests/e2e-landing/a11y-contrast.spec.ts
new file mode 100644
index 00000000..d3e7a5cf
--- /dev/null
+++ b/tests/e2e-landing/a11y-contrast.spec.ts
@@ -0,0 +1,26 @@
+import AxeBuilder from "@axe-core/playwright";
+import { expect, test } from "@playwright/test";
+
+/**
+ * Color-contrast smoke for the landing site (issue #557). The landing shares
+ * the Otter palette with the app but had no axe coverage, so AA regressions
+ * shipped unnoticed. Scans the pages that exercise every palette role:
+ * hero + CTA gradient + category cards (/), tool grid chips (/tools),
+ * dark sections and comparison table (/enterprise), prose links (/faq),
+ * and the SEO card grids (/self-hosted).
+ */
+
+const PAGES = ["/", "/tools", "/enterprise", "/faq", "/self-hosted"];
+
+for (const path of PAGES) {
+  test(`landing ${path} has no color-contrast violations`, async ({ page }) => {
+    await page.goto(path);
+    await page.waitForLoadState("networkidle");
+    const results = await new AxeBuilder({ page }).withTags(["wcag2aa"]).analyze();
+    const contrast = results.violations.filter((v) => v.id === "color-contrast");
+    const offenders = contrast.flatMap((v) =>
+      v.nodes.map((n) => `${n.target.join(" ")}: ${n.failureSummary?.split("\n")[1] ?? ""}`),
+    );
+    expect(offenders, `color-contrast violations on ${path}`).toEqual([]);
+  });
+}
diff --git a/tests/e2e/__screenshots__/device-visual.spec.ts/device-home-mobile-darwin.png b/tests/e2e/__screenshots__/device-visual.spec.ts/device-home-mobile-darwin.png
index 23799b80..80563e9a 100644
Binary files a/tests/e2e/__screenshots__/device-visual.spec.ts/device-home-mobile-darwin.png and b/tests/e2e/__screenshots__/device-visual.spec.ts/device-home-mobile-darwin.png differ
diff --git a/tests/e2e/__screenshots__/device-visual.spec.ts/device-home-tablet-darwin.png b/tests/e2e/__screenshots__/device-visual.spec.ts/device-home-tablet-darwin.png
index 3fde89a3..603817a7 100644
Binary files a/tests/e2e/__screenshots__/device-visual.spec.ts/device-home-tablet-darwin.png and b/tests/e2e/__screenshots__/device-visual.spec.ts/device-home-tablet-darwin.png differ
diff --git a/tests/e2e/__screenshots__/device-visual.spec.ts/device-resize-mobile-darwin.png b/tests/e2e/__screenshots__/device-visual.spec.ts/device-resize-mobile-darwin.png
index 137d29a3..c7fa9cc0 100644
Binary files a/tests/e2e/__screenshots__/device-visual.spec.ts/device-resize-mobile-darwin.png and b/tests/e2e/__screenshots__/device-visual.spec.ts/device-resize-mobile-darwin.png differ
diff --git a/tests/e2e/__screenshots__/device-visual.spec.ts/device-resize-tablet-darwin.png b/tests/e2e/__screenshots__/device-visual.spec.ts/device-resize-tablet-darwin.png
index 7b92acf6..19b83b94 100644
Binary files a/tests/e2e/__screenshots__/device-visual.spec.ts/device-resize-tablet-darwin.png and b/tests/e2e/__screenshots__/device-visual.spec.ts/device-resize-tablet-darwin.png differ
diff --git a/tests/e2e/__screenshots__/device-visual.spec.ts/device-settings-mobile-darwin.png b/tests/e2e/__screenshots__/device-visual.spec.ts/device-settings-mobile-darwin.png
index b973360f..2bc6f722 100644
Binary files a/tests/e2e/__screenshots__/device-visual.spec.ts/device-settings-mobile-darwin.png and b/tests/e2e/__screenshots__/device-visual.spec.ts/device-settings-mobile-darwin.png differ
diff --git a/tests/e2e/__screenshots__/device-visual.spec.ts/device-settings-tablet-darwin.png b/tests/e2e/__screenshots__/device-visual.spec.ts/device-settings-tablet-darwin.png
index b316e7b6..19e1f41e 100644
Binary files a/tests/e2e/__screenshots__/device-visual.spec.ts/device-settings-tablet-darwin.png and b/tests/e2e/__screenshots__/device-visual.spec.ts/device-settings-tablet-darwin.png differ
diff --git a/tests/e2e/__screenshots__/gui-visual-desktop.spec.ts/desktop-automate-3steps-file-dark-darwin.png b/tests/e2e/__screenshots__/gui-visual-desktop.spec.ts/desktop-automate-3steps-file-dark-darwin.png
index 23488d81..282a1622 100644
Binary files a/tests/e2e/__screenshots__/gui-visual-desktop.spec.ts/desktop-automate-3steps-file-dark-darwin.png and b/tests/e2e/__screenshots__/gui-visual-desktop.spec.ts/desktop-automate-3steps-file-dark-darwin.png differ
diff --git a/tests/e2e/__screenshots__/gui-visual-desktop.spec.ts/desktop-automate-3steps-file-light-darwin.png b/tests/e2e/__screenshots__/gui-visual-desktop.spec.ts/desktop-automate-3steps-file-light-darwin.png
index 492f91cd..9ae4ebe5 100644
Binary files a/tests/e2e/__screenshots__/gui-visual-desktop.spec.ts/desktop-automate-3steps-file-light-darwin.png and b/tests/e2e/__screenshots__/gui-visual-desktop.spec.ts/desktop-automate-3steps-file-light-darwin.png differ
diff --git a/tests/e2e/__screenshots__/gui-visual-desktop.spec.ts/desktop-automate-empty-dark-darwin.png b/tests/e2e/__screenshots__/gui-visual-desktop.spec.ts/desktop-automate-empty-dark-darwin.png
index ab0cb2aa..8661e45c 100644
Binary files a/tests/e2e/__screenshots__/gui-visual-desktop.spec.ts/desktop-automate-empty-dark-darwin.png and b/tests/e2e/__screenshots__/gui-visual-desktop.spec.ts/desktop-automate-empty-dark-darwin.png differ
diff --git a/tests/e2e/__screenshots__/gui-visual-desktop.spec.ts/desktop-automate-empty-light-darwin.png b/tests/e2e/__screenshots__/gui-visual-desktop.spec.ts/desktop-automate-empty-light-darwin.png
index d179e565..959e5ddc 100644
Binary files a/tests/e2e/__screenshots__/gui-visual-desktop.spec.ts/desktop-automate-empty-light-darwin.png and b/tests/e2e/__screenshots__/gui-visual-desktop.spec.ts/desktop-automate-empty-light-darwin.png differ
diff --git a/tests/e2e/__screenshots__/gui-visual-desktop.spec.ts/desktop-change-password-dark-darwin.png b/tests/e2e/__screenshots__/gui-visual-desktop.spec.ts/desktop-change-password-dark-darwin.png
index 5587e3e3..d5d61312 100644
Binary files a/tests/e2e/__screenshots__/gui-visual-desktop.spec.ts/desktop-change-password-dark-darwin.png and b/tests/e2e/__screenshots__/gui-visual-desktop.spec.ts/desktop-change-password-dark-darwin.png differ
diff --git a/tests/e2e/__screenshots__/gui-visual-desktop.spec.ts/desktop-change-password-light-darwin.png b/tests/e2e/__screenshots__/gui-visual-desktop.spec.ts/desktop-change-password-light-darwin.png
index 8a436bc7..b0ff4ca2 100644
Binary files a/tests/e2e/__screenshots__/gui-visual-desktop.spec.ts/desktop-change-password-light-darwin.png and b/tests/e2e/__screenshots__/gui-visual-desktop.spec.ts/desktop-change-password-light-darwin.png differ
diff --git a/tests/e2e/__screenshots__/gui-visual-desktop.spec.ts/desktop-editor-welcome-dark-darwin.png b/tests/e2e/__screenshots__/gui-visual-desktop.spec.ts/desktop-editor-welcome-dark-darwin.png
index 11a6c9a4..0712adfc 100644
Binary files a/tests/e2e/__screenshots__/gui-visual-desktop.spec.ts/desktop-editor-welcome-dark-darwin.png and b/tests/e2e/__screenshots__/gui-visual-desktop.spec.ts/desktop-editor-welcome-dark-darwin.png differ
diff --git a/tests/e2e/__screenshots__/gui-visual-desktop.spec.ts/desktop-editor-welcome-light-darwin.png b/tests/e2e/__screenshots__/gui-visual-desktop.spec.ts/desktop-editor-welcome-light-darwin.png
index 4d7bd127..3fd720a9 100644
Binary files a/tests/e2e/__screenshots__/gui-visual-desktop.spec.ts/desktop-editor-welcome-light-darwin.png and b/tests/e2e/__screenshots__/gui-visual-desktop.spec.ts/desktop-editor-welcome-light-darwin.png differ
diff --git a/tests/e2e/__screenshots__/gui-visual-desktop.spec.ts/desktop-files-empty-dark-darwin.png b/tests/e2e/__screenshots__/gui-visual-desktop.spec.ts/desktop-files-empty-dark-darwin.png
index cd3b3699..a8ab7238 100644
Binary files a/tests/e2e/__screenshots__/gui-visual-desktop.spec.ts/desktop-files-empty-dark-darwin.png and b/tests/e2e/__screenshots__/gui-visual-desktop.spec.ts/desktop-files-empty-dark-darwin.png differ
diff --git a/tests/e2e/__screenshots__/gui-visual-desktop.spec.ts/desktop-files-empty-light-darwin.png b/tests/e2e/__screenshots__/gui-visual-desktop.spec.ts/desktop-files-empty-light-darwin.png
index cb6fa926..3cab8a8d 100644
Binary files a/tests/e2e/__screenshots__/gui-visual-desktop.spec.ts/desktop-files-empty-light-darwin.png and b/tests/e2e/__screenshots__/gui-visual-desktop.spec.ts/desktop-files-empty-light-darwin.png differ
diff --git a/tests/e2e/__screenshots__/gui-visual-desktop.spec.ts/desktop-fullscreen-details-hidden-dark-darwin.png b/tests/e2e/__screenshots__/gui-visual-desktop.spec.ts/desktop-fullscreen-details-hidden-dark-darwin.png
index 2d88cf52..eb1b0bea 100644
Binary files a/tests/e2e/__screenshots__/gui-visual-desktop.spec.ts/desktop-fullscreen-details-hidden-dark-darwin.png and b/tests/e2e/__screenshots__/gui-visual-desktop.spec.ts/desktop-fullscreen-details-hidden-dark-darwin.png differ
diff --git a/tests/e2e/__screenshots__/gui-visual-desktop.spec.ts/desktop-fullscreen-details-hidden-light-darwin.png b/tests/e2e/__screenshots__/gui-visual-desktop.spec.ts/desktop-fullscreen-details-hidden-light-darwin.png
index 8aab3d0a..6ed84ebe 100644
Binary files a/tests/e2e/__screenshots__/gui-visual-desktop.spec.ts/desktop-fullscreen-details-hidden-light-darwin.png and b/tests/e2e/__screenshots__/gui-visual-desktop.spec.ts/desktop-fullscreen-details-hidden-light-darwin.png differ
diff --git a/tests/e2e/__screenshots__/gui-visual-desktop.spec.ts/desktop-fullscreen-details-shown-dark-darwin.png b/tests/e2e/__screenshots__/gui-visual-desktop.spec.ts/desktop-fullscreen-details-shown-dark-darwin.png
index 46376b6c..5657fcf9 100644
Binary files a/tests/e2e/__screenshots__/gui-visual-desktop.spec.ts/desktop-fullscreen-details-shown-dark-darwin.png and b/tests/e2e/__screenshots__/gui-visual-desktop.spec.ts/desktop-fullscreen-details-shown-dark-darwin.png differ
diff --git a/tests/e2e/__screenshots__/gui-visual-desktop.spec.ts/desktop-fullscreen-details-shown-light-darwin.png b/tests/e2e/__screenshots__/gui-visual-desktop.spec.ts/desktop-fullscreen-details-shown-light-darwin.png
index 4cbc6a9d..39d8a400 100644
Binary files a/tests/e2e/__screenshots__/gui-visual-desktop.spec.ts/desktop-fullscreen-details-shown-light-darwin.png and b/tests/e2e/__screenshots__/gui-visual-desktop.spec.ts/desktop-fullscreen-details-shown-light-darwin.png differ
diff --git a/tests/e2e/__screenshots__/gui-visual-desktop.spec.ts/desktop-help-dialog-dark-darwin.png b/tests/e2e/__screenshots__/gui-visual-desktop.spec.ts/desktop-help-dialog-dark-darwin.png
index 9a53d017..86d7693f 100644
Binary files a/tests/e2e/__screenshots__/gui-visual-desktop.spec.ts/desktop-help-dialog-dark-darwin.png and b/tests/e2e/__screenshots__/gui-visual-desktop.spec.ts/desktop-help-dialog-dark-darwin.png differ
diff --git a/tests/e2e/__screenshots__/gui-visual-desktop.spec.ts/desktop-help-dialog-light-darwin.png b/tests/e2e/__screenshots__/gui-visual-desktop.spec.ts/desktop-help-dialog-light-darwin.png
index 3fc2802d..38f28297 100644
Binary files a/tests/e2e/__screenshots__/gui-visual-desktop.spec.ts/desktop-help-dialog-light-darwin.png and b/tests/e2e/__screenshots__/gui-visual-desktop.spec.ts/desktop-help-dialog-light-darwin.png differ
diff --git a/tests/e2e/__screenshots__/gui-visual-desktop.spec.ts/desktop-home-empty-dark-darwin.png b/tests/e2e/__screenshots__/gui-visual-desktop.spec.ts/desktop-home-empty-dark-darwin.png
index 46376b6c..5657fcf9 100644
Binary files a/tests/e2e/__screenshots__/gui-visual-desktop.spec.ts/desktop-home-empty-dark-darwin.png and b/tests/e2e/__screenshots__/gui-visual-desktop.spec.ts/desktop-home-empty-dark-darwin.png differ
diff --git a/tests/e2e/__screenshots__/gui-visual-desktop.spec.ts/desktop-home-empty-light-darwin.png b/tests/e2e/__screenshots__/gui-visual-desktop.spec.ts/desktop-home-empty-light-darwin.png
index e29476ee..1544d03a 100644
Binary files a/tests/e2e/__screenshots__/gui-visual-desktop.spec.ts/desktop-home-empty-light-darwin.png and b/tests/e2e/__screenshots__/gui-visual-desktop.spec.ts/desktop-home-empty-light-darwin.png differ
diff --git a/tests/e2e/__screenshots__/gui-visual-desktop.spec.ts/desktop-home-search-focused-dark-darwin.png b/tests/e2e/__screenshots__/gui-visual-desktop.spec.ts/desktop-home-search-focused-dark-darwin.png
index e1024461..d616db33 100644
Binary files a/tests/e2e/__screenshots__/gui-visual-desktop.spec.ts/desktop-home-search-focused-dark-darwin.png and b/tests/e2e/__screenshots__/gui-visual-desktop.spec.ts/desktop-home-search-focused-dark-darwin.png differ
diff --git a/tests/e2e/__screenshots__/gui-visual-desktop.spec.ts/desktop-home-search-focused-light-darwin.png b/tests/e2e/__screenshots__/gui-visual-desktop.spec.ts/desktop-home-search-focused-light-darwin.png
index 1d2b378d..13780be2 100644
Binary files a/tests/e2e/__screenshots__/gui-visual-desktop.spec.ts/desktop-home-search-focused-light-darwin.png and b/tests/e2e/__screenshots__/gui-visual-desktop.spec.ts/desktop-home-search-focused-light-darwin.png differ
diff --git a/tests/e2e/__screenshots__/gui-visual-desktop.spec.ts/desktop-home-uploaded-dark-darwin.png b/tests/e2e/__screenshots__/gui-visual-desktop.spec.ts/desktop-home-uploaded-dark-darwin.png
index 46376b6c..5657fcf9 100644
Binary files a/tests/e2e/__screenshots__/gui-visual-desktop.spec.ts/desktop-home-uploaded-dark-darwin.png and b/tests/e2e/__screenshots__/gui-visual-desktop.spec.ts/desktop-home-uploaded-dark-darwin.png differ
diff --git a/tests/e2e/__screenshots__/gui-visual-desktop.spec.ts/desktop-home-uploaded-light-darwin.png b/tests/e2e/__screenshots__/gui-visual-desktop.spec.ts/desktop-home-uploaded-light-darwin.png
index e29476ee..1544d03a 100644
Binary files a/tests/e2e/__screenshots__/gui-visual-desktop.spec.ts/desktop-home-uploaded-light-darwin.png and b/tests/e2e/__screenshots__/gui-visual-desktop.spec.ts/desktop-home-uploaded-light-darwin.png differ
diff --git a/tests/e2e/__screenshots__/gui-visual-desktop.spec.ts/desktop-login-empty-dark-darwin.png b/tests/e2e/__screenshots__/gui-visual-desktop.spec.ts/desktop-login-empty-dark-darwin.png
index 50020d8d..4a3e05f4 100644
Binary files a/tests/e2e/__screenshots__/gui-visual-desktop.spec.ts/desktop-login-empty-dark-darwin.png and b/tests/e2e/__screenshots__/gui-visual-desktop.spec.ts/desktop-login-empty-dark-darwin.png differ
diff --git a/tests/e2e/__screenshots__/gui-visual-desktop.spec.ts/desktop-login-empty-light-darwin.png b/tests/e2e/__screenshots__/gui-visual-desktop.spec.ts/desktop-login-empty-light-darwin.png
index 001f2e86..c045789a 100644
Binary files a/tests/e2e/__screenshots__/gui-visual-desktop.spec.ts/desktop-login-empty-light-darwin.png and b/tests/e2e/__screenshots__/gui-visual-desktop.spec.ts/desktop-login-empty-light-darwin.png differ
diff --git a/tests/e2e/__screenshots__/gui-visual-desktop.spec.ts/desktop-login-error-dark-darwin.png b/tests/e2e/__screenshots__/gui-visual-desktop.spec.ts/desktop-login-error-dark-darwin.png
index e33268fe..7d46498b 100644
Binary files a/tests/e2e/__screenshots__/gui-visual-desktop.spec.ts/desktop-login-error-dark-darwin.png and b/tests/e2e/__screenshots__/gui-visual-desktop.spec.ts/desktop-login-error-dark-darwin.png differ
diff --git a/tests/e2e/__screenshots__/gui-visual-desktop.spec.ts/desktop-login-error-light-darwin.png b/tests/e2e/__screenshots__/gui-visual-desktop.spec.ts/desktop-login-error-light-darwin.png
index 53a376b4..f051f98a 100644
Binary files a/tests/e2e/__screenshots__/gui-visual-desktop.spec.ts/desktop-login-error-light-darwin.png and b/tests/e2e/__screenshots__/gui-visual-desktop.spec.ts/desktop-login-error-light-darwin.png differ
diff --git a/tests/e2e/__screenshots__/gui-visual-desktop.spec.ts/desktop-not-found-dark-darwin.png b/tests/e2e/__screenshots__/gui-visual-desktop.spec.ts/desktop-not-found-dark-darwin.png
index a3150e86..0cf4ed6d 100644
Binary files a/tests/e2e/__screenshots__/gui-visual-desktop.spec.ts/desktop-not-found-dark-darwin.png and b/tests/e2e/__screenshots__/gui-visual-desktop.spec.ts/desktop-not-found-dark-darwin.png differ
diff --git a/tests/e2e/__screenshots__/gui-visual-desktop.spec.ts/desktop-not-found-light-darwin.png b/tests/e2e/__screenshots__/gui-visual-desktop.spec.ts/desktop-not-found-light-darwin.png
index c7369250..e798369d 100644
Binary files a/tests/e2e/__screenshots__/gui-visual-desktop.spec.ts/desktop-not-found-light-darwin.png and b/tests/e2e/__screenshots__/gui-visual-desktop.spec.ts/desktop-not-found-light-darwin.png differ
diff --git a/tests/e2e/__screenshots__/gui-visual-desktop.spec.ts/desktop-privacy-policy-dark-darwin.png b/tests/e2e/__screenshots__/gui-visual-desktop.spec.ts/desktop-privacy-policy-dark-darwin.png
index b7525de6..534716ca 100644
Binary files a/tests/e2e/__screenshots__/gui-visual-desktop.spec.ts/desktop-privacy-policy-dark-darwin.png and b/tests/e2e/__screenshots__/gui-visual-desktop.spec.ts/desktop-privacy-policy-dark-darwin.png differ
diff --git a/tests/e2e/__screenshots__/gui-visual-desktop.spec.ts/desktop-privacy-policy-light-darwin.png b/tests/e2e/__screenshots__/gui-visual-desktop.spec.ts/desktop-privacy-policy-light-darwin.png
index 2b62732c..5a2eac62 100644
Binary files a/tests/e2e/__screenshots__/gui-visual-desktop.spec.ts/desktop-privacy-policy-light-darwin.png and b/tests/e2e/__screenshots__/gui-visual-desktop.spec.ts/desktop-privacy-policy-light-darwin.png differ
diff --git a/tests/e2e/__screenshots__/gui-visual-desktop.spec.ts/desktop-settings-about-dark-darwin.png b/tests/e2e/__screenshots__/gui-visual-desktop.spec.ts/desktop-settings-about-dark-darwin.png
index 977e64d6..045a4db6 100644
Binary files a/tests/e2e/__screenshots__/gui-visual-desktop.spec.ts/desktop-settings-about-dark-darwin.png and b/tests/e2e/__screenshots__/gui-visual-desktop.spec.ts/desktop-settings-about-dark-darwin.png differ
diff --git a/tests/e2e/__screenshots__/gui-visual-desktop.spec.ts/desktop-settings-about-light-darwin.png b/tests/e2e/__screenshots__/gui-visual-desktop.spec.ts/desktop-settings-about-light-darwin.png
index e2fe1911..dca9af03 100644
Binary files a/tests/e2e/__screenshots__/gui-visual-desktop.spec.ts/desktop-settings-about-light-darwin.png and b/tests/e2e/__screenshots__/gui-visual-desktop.spec.ts/desktop-settings-about-light-darwin.png differ
diff --git a/tests/e2e/__screenshots__/gui-visual-desktop.spec.ts/desktop-settings-general-dark-darwin.png b/tests/e2e/__screenshots__/gui-visual-desktop.spec.ts/desktop-settings-general-dark-darwin.png
index c68b76ad..076b38be 100644
Binary files a/tests/e2e/__screenshots__/gui-visual-desktop.spec.ts/desktop-settings-general-dark-darwin.png and b/tests/e2e/__screenshots__/gui-visual-desktop.spec.ts/desktop-settings-general-dark-darwin.png differ
diff --git a/tests/e2e/__screenshots__/gui-visual-desktop.spec.ts/desktop-settings-general-light-darwin.png b/tests/e2e/__screenshots__/gui-visual-desktop.spec.ts/desktop-settings-general-light-darwin.png
index 996200f3..87d89b77 100644
Binary files a/tests/e2e/__screenshots__/gui-visual-desktop.spec.ts/desktop-settings-general-light-darwin.png and b/tests/e2e/__screenshots__/gui-visual-desktop.spec.ts/desktop-settings-general-light-darwin.png differ
diff --git a/tests/e2e/__screenshots__/gui-visual-desktop.spec.ts/desktop-settings-people-dark-darwin.png b/tests/e2e/__screenshots__/gui-visual-desktop.spec.ts/desktop-settings-people-dark-darwin.png
index 6a6d6d8a..8301f6e3 100644
Binary files a/tests/e2e/__screenshots__/gui-visual-desktop.spec.ts/desktop-settings-people-dark-darwin.png and b/tests/e2e/__screenshots__/gui-visual-desktop.spec.ts/desktop-settings-people-dark-darwin.png differ
diff --git a/tests/e2e/__screenshots__/gui-visual-desktop.spec.ts/desktop-settings-people-light-darwin.png b/tests/e2e/__screenshots__/gui-visual-desktop.spec.ts/desktop-settings-people-light-darwin.png
index 866c7f3d..d1b8557e 100644
Binary files a/tests/e2e/__screenshots__/gui-visual-desktop.spec.ts/desktop-settings-people-light-darwin.png and b/tests/e2e/__screenshots__/gui-visual-desktop.spec.ts/desktop-settings-people-light-darwin.png differ
diff --git a/tests/e2e/__screenshots__/gui-visual-desktop.spec.ts/desktop-settings-security-dark-darwin.png b/tests/e2e/__screenshots__/gui-visual-desktop.spec.ts/desktop-settings-security-dark-darwin.png
index f887ced7..5deadbeb 100644
Binary files a/tests/e2e/__screenshots__/gui-visual-desktop.spec.ts/desktop-settings-security-dark-darwin.png and b/tests/e2e/__screenshots__/gui-visual-desktop.spec.ts/desktop-settings-security-dark-darwin.png differ
diff --git a/tests/e2e/__screenshots__/gui-visual-desktop.spec.ts/desktop-settings-security-light-darwin.png b/tests/e2e/__screenshots__/gui-visual-desktop.spec.ts/desktop-settings-security-light-darwin.png
index 82a12e55..d8cb74f0 100644
Binary files a/tests/e2e/__screenshots__/gui-visual-desktop.spec.ts/desktop-settings-security-light-darwin.png and b/tests/e2e/__screenshots__/gui-visual-desktop.spec.ts/desktop-settings-security-light-darwin.png differ
diff --git a/tests/e2e/__screenshots__/gui-visual-desktop.spec.ts/desktop-sidebar-expanded-dark-darwin.png b/tests/e2e/__screenshots__/gui-visual-desktop.spec.ts/desktop-sidebar-expanded-dark-darwin.png
index ba7aa703..1cc2ef5a 100644
Binary files a/tests/e2e/__screenshots__/gui-visual-desktop.spec.ts/desktop-sidebar-expanded-dark-darwin.png and b/tests/e2e/__screenshots__/gui-visual-desktop.spec.ts/desktop-sidebar-expanded-dark-darwin.png differ
diff --git a/tests/e2e/__screenshots__/gui-visual-desktop.spec.ts/desktop-sidebar-expanded-light-darwin.png b/tests/e2e/__screenshots__/gui-visual-desktop.spec.ts/desktop-sidebar-expanded-light-darwin.png
index cc612c7c..7e31caf6 100644
Binary files a/tests/e2e/__screenshots__/gui-visual-desktop.spec.ts/desktop-sidebar-expanded-light-darwin.png and b/tests/e2e/__screenshots__/gui-visual-desktop.spec.ts/desktop-sidebar-expanded-light-darwin.png differ
diff --git a/tests/e2e/__screenshots__/gui-visual-desktop.spec.ts/desktop-tool-border-empty-dark-darwin.png b/tests/e2e/__screenshots__/gui-visual-desktop.spec.ts/desktop-tool-border-empty-dark-darwin.png
index 40bb87bc..c97ab2b5 100644
Binary files a/tests/e2e/__screenshots__/gui-visual-desktop.spec.ts/desktop-tool-border-empty-dark-darwin.png and b/tests/e2e/__screenshots__/gui-visual-desktop.spec.ts/desktop-tool-border-empty-dark-darwin.png differ
diff --git a/tests/e2e/__screenshots__/gui-visual-desktop.spec.ts/desktop-tool-border-empty-light-darwin.png b/tests/e2e/__screenshots__/gui-visual-desktop.spec.ts/desktop-tool-border-empty-light-darwin.png
index 5b02493b..0caecf5e 100644
Binary files a/tests/e2e/__screenshots__/gui-visual-desktop.spec.ts/desktop-tool-border-empty-light-darwin.png and b/tests/e2e/__screenshots__/gui-visual-desktop.spec.ts/desktop-tool-border-empty-light-darwin.png differ
diff --git a/tests/e2e/__screenshots__/gui-visual-desktop.spec.ts/desktop-tool-collage-templates-dark-darwin.png b/tests/e2e/__screenshots__/gui-visual-desktop.spec.ts/desktop-tool-collage-templates-dark-darwin.png
index a826258b..0a6f5a26 100644
Binary files a/tests/e2e/__screenshots__/gui-visual-desktop.spec.ts/desktop-tool-collage-templates-dark-darwin.png and b/tests/e2e/__screenshots__/gui-visual-desktop.spec.ts/desktop-tool-collage-templates-dark-darwin.png differ
diff --git a/tests/e2e/__screenshots__/gui-visual-desktop.spec.ts/desktop-tool-collage-templates-light-darwin.png b/tests/e2e/__screenshots__/gui-visual-desktop.spec.ts/desktop-tool-collage-templates-light-darwin.png
index 52c6cd42..9e28bd53 100644
Binary files a/tests/e2e/__screenshots__/gui-visual-desktop.spec.ts/desktop-tool-collage-templates-light-darwin.png and b/tests/e2e/__screenshots__/gui-visual-desktop.spec.ts/desktop-tool-collage-templates-light-darwin.png differ
diff --git a/tests/e2e/__screenshots__/gui-visual-desktop.spec.ts/desktop-tool-compress-result-dark-darwin.png b/tests/e2e/__screenshots__/gui-visual-desktop.spec.ts/desktop-tool-compress-result-dark-darwin.png
index bf2e7fbd..b19f5bd5 100644
Binary files a/tests/e2e/__screenshots__/gui-visual-desktop.spec.ts/desktop-tool-compress-result-dark-darwin.png and b/tests/e2e/__screenshots__/gui-visual-desktop.spec.ts/desktop-tool-compress-result-dark-darwin.png differ
diff --git a/tests/e2e/__screenshots__/gui-visual-desktop.spec.ts/desktop-tool-compress-result-light-darwin.png b/tests/e2e/__screenshots__/gui-visual-desktop.spec.ts/desktop-tool-compress-result-light-darwin.png
index 4e932f9c..04caa85c 100644
Binary files a/tests/e2e/__screenshots__/gui-visual-desktop.spec.ts/desktop-tool-compress-result-light-darwin.png and b/tests/e2e/__screenshots__/gui-visual-desktop.spec.ts/desktop-tool-compress-result-light-darwin.png differ
diff --git a/tests/e2e/__screenshots__/gui-visual-desktop.spec.ts/desktop-tool-convert-empty-dark-darwin.png b/tests/e2e/__screenshots__/gui-visual-desktop.spec.ts/desktop-tool-convert-empty-dark-darwin.png
index b6002c27..353ec24f 100644
Binary files a/tests/e2e/__screenshots__/gui-visual-desktop.spec.ts/desktop-tool-convert-empty-dark-darwin.png and b/tests/e2e/__screenshots__/gui-visual-desktop.spec.ts/desktop-tool-convert-empty-dark-darwin.png differ
diff --git a/tests/e2e/__screenshots__/gui-visual-desktop.spec.ts/desktop-tool-convert-empty-light-darwin.png b/tests/e2e/__screenshots__/gui-visual-desktop.spec.ts/desktop-tool-convert-empty-light-darwin.png
index 20a9e88f..a549eeb6 100644
Binary files a/tests/e2e/__screenshots__/gui-visual-desktop.spec.ts/desktop-tool-convert-empty-light-darwin.png and b/tests/e2e/__screenshots__/gui-visual-desktop.spec.ts/desktop-tool-convert-empty-light-darwin.png differ
diff --git a/tests/e2e/__screenshots__/gui-visual-desktop.spec.ts/desktop-tool-convert-settings-dark-darwin.png b/tests/e2e/__screenshots__/gui-visual-desktop.spec.ts/desktop-tool-convert-settings-dark-darwin.png
index 3082ff86..6f5ca951 100644
Binary files a/tests/e2e/__screenshots__/gui-visual-desktop.spec.ts/desktop-tool-convert-settings-dark-darwin.png and b/tests/e2e/__screenshots__/gui-visual-desktop.spec.ts/desktop-tool-convert-settings-dark-darwin.png differ
diff --git a/tests/e2e/__screenshots__/gui-visual-desktop.spec.ts/desktop-tool-convert-settings-light-darwin.png b/tests/e2e/__screenshots__/gui-visual-desktop.spec.ts/desktop-tool-convert-settings-light-darwin.png
index b70b9bbb..844555eb 100644
Binary files a/tests/e2e/__screenshots__/gui-visual-desktop.spec.ts/desktop-tool-convert-settings-light-darwin.png and b/tests/e2e/__screenshots__/gui-visual-desktop.spec.ts/desktop-tool-convert-settings-light-darwin.png differ
diff --git a/tests/e2e/__screenshots__/gui-visual-desktop.spec.ts/desktop-tool-crop-canvas-dark-darwin.png b/tests/e2e/__screenshots__/gui-visual-desktop.spec.ts/desktop-tool-crop-canvas-dark-darwin.png
index b3b80a7c..1118243b 100644
Binary files a/tests/e2e/__screenshots__/gui-visual-desktop.spec.ts/desktop-tool-crop-canvas-dark-darwin.png and b/tests/e2e/__screenshots__/gui-visual-desktop.spec.ts/desktop-tool-crop-canvas-dark-darwin.png differ
diff --git a/tests/e2e/__screenshots__/gui-visual-desktop.spec.ts/desktop-tool-crop-canvas-light-darwin.png b/tests/e2e/__screenshots__/gui-visual-desktop.spec.ts/desktop-tool-crop-canvas-light-darwin.png
index ea02db53..ebae0724 100644
Binary files a/tests/e2e/__screenshots__/gui-visual-desktop.spec.ts/desktop-tool-crop-canvas-light-darwin.png and b/tests/e2e/__screenshots__/gui-visual-desktop.spec.ts/desktop-tool-crop-canvas-light-darwin.png differ
diff --git a/tests/e2e/__screenshots__/gui-visual-desktop.spec.ts/desktop-tool-info-empty-dark-darwin.png b/tests/e2e/__screenshots__/gui-visual-desktop.spec.ts/desktop-tool-info-empty-dark-darwin.png
index e6f47e8b..3e604d99 100644
Binary files a/tests/e2e/__screenshots__/gui-visual-desktop.spec.ts/desktop-tool-info-empty-dark-darwin.png and b/tests/e2e/__screenshots__/gui-visual-desktop.spec.ts/desktop-tool-info-empty-dark-darwin.png differ
diff --git a/tests/e2e/__screenshots__/gui-visual-desktop.spec.ts/desktop-tool-info-empty-light-darwin.png b/tests/e2e/__screenshots__/gui-visual-desktop.spec.ts/desktop-tool-info-empty-light-darwin.png
index 672674ec..d16a4ac8 100644
Binary files a/tests/e2e/__screenshots__/gui-visual-desktop.spec.ts/desktop-tool-info-empty-light-darwin.png and b/tests/e2e/__screenshots__/gui-visual-desktop.spec.ts/desktop-tool-info-empty-light-darwin.png differ
diff --git a/tests/e2e/__screenshots__/gui-visual-desktop.spec.ts/desktop-tool-qr-generate-preview-dark-darwin.png b/tests/e2e/__screenshots__/gui-visual-desktop.spec.ts/desktop-tool-qr-generate-preview-dark-darwin.png
index 6a7d36eb..c7731603 100644
Binary files a/tests/e2e/__screenshots__/gui-visual-desktop.spec.ts/desktop-tool-qr-generate-preview-dark-darwin.png and b/tests/e2e/__screenshots__/gui-visual-desktop.spec.ts/desktop-tool-qr-generate-preview-dark-darwin.png differ
diff --git a/tests/e2e/__screenshots__/gui-visual-desktop.spec.ts/desktop-tool-qr-generate-preview-light-darwin.png b/tests/e2e/__screenshots__/gui-visual-desktop.spec.ts/desktop-tool-qr-generate-preview-light-darwin.png
index 960108a9..cc328bc0 100644
Binary files a/tests/e2e/__screenshots__/gui-visual-desktop.spec.ts/desktop-tool-qr-generate-preview-light-darwin.png and b/tests/e2e/__screenshots__/gui-visual-desktop.spec.ts/desktop-tool-qr-generate-preview-light-darwin.png differ
diff --git a/tests/e2e/__screenshots__/gui-visual-desktop.spec.ts/desktop-tool-resize-empty-dark-darwin.png b/tests/e2e/__screenshots__/gui-visual-desktop.spec.ts/desktop-tool-resize-empty-dark-darwin.png
index 4f698e4d..43630258 100644
Binary files a/tests/e2e/__screenshots__/gui-visual-desktop.spec.ts/desktop-tool-resize-empty-dark-darwin.png and b/tests/e2e/__screenshots__/gui-visual-desktop.spec.ts/desktop-tool-resize-empty-dark-darwin.png differ
diff --git a/tests/e2e/__screenshots__/gui-visual-desktop.spec.ts/desktop-tool-resize-empty-light-darwin.png b/tests/e2e/__screenshots__/gui-visual-desktop.spec.ts/desktop-tool-resize-empty-light-darwin.png
index ebc852eb..b55c95d7 100644
Binary files a/tests/e2e/__screenshots__/gui-visual-desktop.spec.ts/desktop-tool-resize-empty-light-darwin.png and b/tests/e2e/__screenshots__/gui-visual-desktop.spec.ts/desktop-tool-resize-empty-light-darwin.png differ
diff --git a/tests/e2e/__screenshots__/gui-visual-desktop.spec.ts/desktop-tool-resize-settings-dark-darwin.png b/tests/e2e/__screenshots__/gui-visual-desktop.spec.ts/desktop-tool-resize-settings-dark-darwin.png
index 60e64712..e7507fd7 100644
Binary files a/tests/e2e/__screenshots__/gui-visual-desktop.spec.ts/desktop-tool-resize-settings-dark-darwin.png and b/tests/e2e/__screenshots__/gui-visual-desktop.spec.ts/desktop-tool-resize-settings-dark-darwin.png differ
diff --git a/tests/e2e/__screenshots__/gui-visual-desktop.spec.ts/desktop-tool-resize-settings-light-darwin.png b/tests/e2e/__screenshots__/gui-visual-desktop.spec.ts/desktop-tool-resize-settings-light-darwin.png
index 5f72e95e..493e8093 100644
Binary files a/tests/e2e/__screenshots__/gui-visual-desktop.spec.ts/desktop-tool-resize-settings-light-darwin.png and b/tests/e2e/__screenshots__/gui-visual-desktop.spec.ts/desktop-tool-resize-settings-light-darwin.png differ
diff --git a/tests/e2e/__screenshots__/gui-visual-desktop.spec.ts/desktop-tool-strip-metadata-empty-dark-darwin.png b/tests/e2e/__screenshots__/gui-visual-desktop.spec.ts/desktop-tool-strip-metadata-empty-dark-darwin.png
index 663ef227..aa6e7a20 100644
Binary files a/tests/e2e/__screenshots__/gui-visual-desktop.spec.ts/desktop-tool-strip-metadata-empty-dark-darwin.png and b/tests/e2e/__screenshots__/gui-visual-desktop.spec.ts/desktop-tool-strip-metadata-empty-dark-darwin.png differ
diff --git a/tests/e2e/__screenshots__/gui-visual-desktop.spec.ts/desktop-tool-strip-metadata-empty-light-darwin.png b/tests/e2e/__screenshots__/gui-visual-desktop.spec.ts/desktop-tool-strip-metadata-empty-light-darwin.png
index af7db887..d03bb810 100644
Binary files a/tests/e2e/__screenshots__/gui-visual-desktop.spec.ts/desktop-tool-strip-metadata-empty-light-darwin.png and b/tests/e2e/__screenshots__/gui-visual-desktop.spec.ts/desktop-tool-strip-metadata-empty-light-darwin.png differ
diff --git a/tests/e2e/__screenshots__/gui-visual-desktop.spec.ts/desktop-tool-watermark-text-empty-dark-darwin.png b/tests/e2e/__screenshots__/gui-visual-desktop.spec.ts/desktop-tool-watermark-text-empty-dark-darwin.png
index 63376de0..e316d772 100644
Binary files a/tests/e2e/__screenshots__/gui-visual-desktop.spec.ts/desktop-tool-watermark-text-empty-dark-darwin.png and b/tests/e2e/__screenshots__/gui-visual-desktop.spec.ts/desktop-tool-watermark-text-empty-dark-darwin.png differ
diff --git a/tests/e2e/__screenshots__/gui-visual-desktop.spec.ts/desktop-tool-watermark-text-empty-light-darwin.png b/tests/e2e/__screenshots__/gui-visual-desktop.spec.ts/desktop-tool-watermark-text-empty-light-darwin.png
index 1f1960ba..b6b20f05 100644
Binary files a/tests/e2e/__screenshots__/gui-visual-desktop.spec.ts/desktop-tool-watermark-text-empty-light-darwin.png and b/tests/e2e/__screenshots__/gui-visual-desktop.spec.ts/desktop-tool-watermark-text-empty-light-darwin.png differ
diff --git a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-aac-to-flac-darwin.png b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-aac-to-flac-darwin.png
new file mode 100644
index 00000000..9c7aee26
Binary files /dev/null and b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-aac-to-flac-darwin.png differ
diff --git a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-aac-to-mp3-darwin.png b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-aac-to-mp3-darwin.png
new file mode 100644
index 00000000..225fe825
Binary files /dev/null and b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-aac-to-mp3-darwin.png differ
diff --git a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-aac-to-wav-darwin.png b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-aac-to-wav-darwin.png
new file mode 100644
index 00000000..be4d51b3
Binary files /dev/null and b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-aac-to-wav-darwin.png differ
diff --git a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-adjust-colors-darwin.png b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-adjust-colors-darwin.png
index 043954cf..665120f4 100644
Binary files a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-adjust-colors-darwin.png and b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-adjust-colors-darwin.png differ
diff --git a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-ai-canvas-expand-darwin.png b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-ai-canvas-expand-darwin.png
index 74ff20df..d405414b 100644
Binary files a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-ai-canvas-expand-darwin.png and b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-ai-canvas-expand-darwin.png differ
diff --git a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-aspect-pad-darwin.png b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-aspect-pad-darwin.png
index df15d492..9cc7588c 100644
Binary files a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-aspect-pad-darwin.png and b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-aspect-pad-darwin.png differ
diff --git a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-audio-channels-darwin.png b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-audio-channels-darwin.png
index f24beb89..22a556b2 100644
Binary files a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-audio-channels-darwin.png and b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-audio-channels-darwin.png differ
diff --git a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-audio-metadata-darwin.png b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-audio-metadata-darwin.png
index a26e0573..9d53b5a3 100644
Binary files a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-audio-metadata-darwin.png and b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-audio-metadata-darwin.png differ
diff --git a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-audio-speed-darwin.png b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-audio-speed-darwin.png
index ac118d00..c93c0d66 100644
Binary files a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-audio-speed-darwin.png and b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-audio-speed-darwin.png differ
diff --git a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-auto-subtitles-darwin.png b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-auto-subtitles-darwin.png
index 28e1253b..fe331ae4 100644
Binary files a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-auto-subtitles-darwin.png and b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-auto-subtitles-darwin.png differ
diff --git a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-avi-to-gif-darwin.png b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-avi-to-gif-darwin.png
new file mode 100644
index 00000000..61ff8794
Binary files /dev/null and b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-avi-to-gif-darwin.png differ
diff --git a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-avi-to-mkv-darwin.png b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-avi-to-mkv-darwin.png
new file mode 100644
index 00000000..a2e9d3d2
Binary files /dev/null and b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-avi-to-mkv-darwin.png differ
diff --git a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-avi-to-mov-darwin.png b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-avi-to-mov-darwin.png
new file mode 100644
index 00000000..db07db78
Binary files /dev/null and b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-avi-to-mov-darwin.png differ
diff --git a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-avi-to-mp3-darwin.png b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-avi-to-mp3-darwin.png
new file mode 100644
index 00000000..0e2814c0
Binary files /dev/null and b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-avi-to-mp3-darwin.png differ
diff --git a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-avi-to-mp4-darwin.png b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-avi-to-mp4-darwin.png
new file mode 100644
index 00000000..4e11b75b
Binary files /dev/null and b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-avi-to-mp4-darwin.png differ
diff --git a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-background-replace-darwin.png b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-background-replace-darwin.png
index c71d8b0c..8d4ac648 100644
Binary files a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-background-replace-darwin.png and b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-background-replace-darwin.png differ
diff --git a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-barcode-generate-darwin.png b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-barcode-generate-darwin.png
index a029f8f3..078555cc 100644
Binary files a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-barcode-generate-darwin.png and b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-barcode-generate-darwin.png differ
diff --git a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-barcode-read-darwin.png b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-barcode-read-darwin.png
index 0d5b2868..727159b4 100644
Binary files a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-barcode-read-darwin.png and b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-barcode-read-darwin.png differ
diff --git a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-beautify-darwin.png b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-beautify-darwin.png
index 90c464c5..5cf5d475 100644
Binary files a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-beautify-darwin.png and b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-beautify-darwin.png differ
diff --git a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-blur-background-darwin.png b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-blur-background-darwin.png
index 33879793..d6b2987c 100644
Binary files a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-blur-background-darwin.png and b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-blur-background-darwin.png differ
diff --git a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-blur-faces-darwin.png b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-blur-faces-darwin.png
index 8e5017e3..5cd25060 100644
Binary files a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-blur-faces-darwin.png and b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-blur-faces-darwin.png differ
diff --git a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-blur-pad-darwin.png b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-blur-pad-darwin.png
index 68f5a605..ece941cc 100644
Binary files a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-blur-pad-darwin.png and b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-blur-pad-darwin.png differ
diff --git a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-booklet-pdf-darwin.png b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-booklet-pdf-darwin.png
index b9d969e4..8af17e88 100644
Binary files a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-booklet-pdf-darwin.png and b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-booklet-pdf-darwin.png differ
diff --git a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-border-darwin.png b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-border-darwin.png
index 5b02493b..0caecf5e 100644
Binary files a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-border-darwin.png and b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-border-darwin.png differ
diff --git a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-bulk-rename-darwin.png b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-bulk-rename-darwin.png
index 29516b82..e139fbc8 100644
Binary files a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-bulk-rename-darwin.png and b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-bulk-rename-darwin.png differ
diff --git a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-burn-subtitles-darwin.png b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-burn-subtitles-darwin.png
index 2a4970e0..7d8c8c5d 100644
Binary files a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-burn-subtitles-darwin.png and b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-burn-subtitles-darwin.png differ
diff --git a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-change-fps-darwin.png b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-change-fps-darwin.png
index a32ceb84..b87a780f 100644
Binary files a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-change-fps-darwin.png and b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-change-fps-darwin.png differ
diff --git a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-chart-maker-darwin.png b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-chart-maker-darwin.png
index 0563e1af..7173aa51 100644
Binary files a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-chart-maker-darwin.png and b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-chart-maker-darwin.png differ
diff --git a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-circle-crop-darwin.png b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-circle-crop-darwin.png
index b2cc6a7d..be48e3fe 100644
Binary files a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-circle-crop-darwin.png and b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-circle-crop-darwin.png differ
diff --git a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-collage-darwin.png b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-collage-darwin.png
index 52c6cd42..9e28bd53 100644
Binary files a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-collage-darwin.png and b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-collage-darwin.png differ
diff --git a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-color-blindness-darwin.png b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-color-blindness-darwin.png
index 5eb2ec7a..41b6af0f 100644
Binary files a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-color-blindness-darwin.png and b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-color-blindness-darwin.png differ
diff --git a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-color-palette-darwin.png b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-color-palette-darwin.png
index 8ba83260..8c1e8858 100644
Binary files a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-color-palette-darwin.png and b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-color-palette-darwin.png differ
diff --git a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-colorize-darwin.png b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-colorize-darwin.png
index 5c24cbb3..6d1993d4 100644
Binary files a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-colorize-darwin.png and b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-colorize-darwin.png differ
diff --git a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-compare-darwin.png b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-compare-darwin.png
index bdecbd75..2071ba2d 100644
Binary files a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-compare-darwin.png and b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-compare-darwin.png differ
diff --git a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-compose-darwin.png b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-compose-darwin.png
index 449b2206..b88307da 100644
Binary files a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-compose-darwin.png and b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-compose-darwin.png differ
diff --git a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-compress-darwin.png b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-compress-darwin.png
index d50e05f8..e6fc047c 100644
Binary files a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-compress-darwin.png and b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-compress-darwin.png differ
diff --git a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-compress-pdf-darwin.png b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-compress-pdf-darwin.png
index 95842f91..a2cd6266 100644
Binary files a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-compress-pdf-darwin.png and b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-compress-pdf-darwin.png differ
diff --git a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-compress-video-darwin.png b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-compress-video-darwin.png
index d234301e..9456d52d 100644
Binary files a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-compress-video-darwin.png and b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-compress-video-darwin.png differ
diff --git a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-content-aware-resize-darwin.png b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-content-aware-resize-darwin.png
index 352566fb..1a095a91 100644
Binary files a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-content-aware-resize-darwin.png and b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-content-aware-resize-darwin.png differ
diff --git a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-convert-audio-darwin.png b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-convert-audio-darwin.png
index 64b1f16a..18fddc76 100644
Binary files a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-convert-audio-darwin.png and b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-convert-audio-darwin.png differ
diff --git a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-convert-darwin.png b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-convert-darwin.png
index 20a9e88f..a549eeb6 100644
Binary files a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-convert-darwin.png and b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-convert-darwin.png differ
diff --git a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-convert-document-darwin.png b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-convert-document-darwin.png
index 7a3ce3eb..ecca643d 100644
Binary files a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-convert-document-darwin.png and b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-convert-document-darwin.png differ
diff --git a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-convert-presentation-darwin.png b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-convert-presentation-darwin.png
index c7a31cb8..46ab3014 100644
Binary files a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-convert-presentation-darwin.png and b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-convert-presentation-darwin.png differ
diff --git a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-convert-spreadsheet-darwin.png b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-convert-spreadsheet-darwin.png
index 70b4091d..2ee5375c 100644
Binary files a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-convert-spreadsheet-darwin.png and b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-convert-spreadsheet-darwin.png differ
diff --git a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-convert-video-darwin.png b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-convert-video-darwin.png
index 718ad1c6..fc6786a1 100644
Binary files a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-convert-video-darwin.png and b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-convert-video-darwin.png differ
diff --git a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-create-zip-darwin.png b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-create-zip-darwin.png
index 79ba7854..1a4aba4c 100644
Binary files a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-create-zip-darwin.png and b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-create-zip-darwin.png differ
diff --git a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-crop-darwin.png b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-crop-darwin.png
index b433b6c1..39eeaffd 100644
Binary files a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-crop-darwin.png and b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-crop-darwin.png differ
diff --git a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-crop-pdf-darwin.png b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-crop-pdf-darwin.png
index d1ad95b2..9e4140dd 100644
Binary files a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-crop-pdf-darwin.png and b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-crop-pdf-darwin.png differ
diff --git a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-crop-video-darwin.png b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-crop-video-darwin.png
index 177f8aea..28585e70 100644
Binary files a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-crop-video-darwin.png and b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-crop-video-darwin.png differ
diff --git a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-csv-excel-darwin.png b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-csv-excel-darwin.png
index 23d0732e..0a856270 100644
Binary files a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-csv-excel-darwin.png and b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-csv-excel-darwin.png differ
diff --git a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-csv-json-darwin.png b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-csv-json-darwin.png
index df098821..4857d7ff 100644
Binary files a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-csv-json-darwin.png and b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-csv-json-darwin.png differ
diff --git a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-duotone-darwin.png b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-duotone-darwin.png
index dc900ea2..e00e6fec 100644
Binary files a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-duotone-darwin.png and b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-duotone-darwin.png differ
diff --git a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-edit-metadata-darwin.png b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-edit-metadata-darwin.png
index 68d17a2a..a3421bf2 100644
Binary files a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-edit-metadata-darwin.png and b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-edit-metadata-darwin.png differ
diff --git a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-embed-subtitles-darwin.png b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-embed-subtitles-darwin.png
index adce779a..2dcfb790 100644
Binary files a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-embed-subtitles-darwin.png and b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-embed-subtitles-darwin.png differ
diff --git a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-enhance-faces-darwin.png b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-enhance-faces-darwin.png
index ba1b38b2..ac995c9a 100644
Binary files a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-enhance-faces-darwin.png and b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-enhance-faces-darwin.png differ
diff --git a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-eps-to-jpg-darwin.png b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-eps-to-jpg-darwin.png
new file mode 100644
index 00000000..083cbc6b
Binary files /dev/null and b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-eps-to-jpg-darwin.png differ
diff --git a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-eps-to-pdf-darwin.png b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-eps-to-pdf-darwin.png
new file mode 100644
index 00000000..db0d21a7
Binary files /dev/null and b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-eps-to-pdf-darwin.png differ
diff --git a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-eps-to-png-darwin.png b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-eps-to-png-darwin.png
new file mode 100644
index 00000000..683d69ed
Binary files /dev/null and b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-eps-to-png-darwin.png differ
diff --git a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-eps-to-svg-darwin.png b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-eps-to-svg-darwin.png
new file mode 100644
index 00000000..c31b9804
Binary files /dev/null and b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-eps-to-svg-darwin.png differ
diff --git a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-epub-convert-darwin.png b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-epub-convert-darwin.png
index 9b6acbf9..3148cd83 100644
Binary files a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-epub-convert-darwin.png and b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-epub-convert-darwin.png differ
diff --git a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-erase-object-darwin.png b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-erase-object-darwin.png
index d434e819..040c44ab 100644
Binary files a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-erase-object-darwin.png and b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-erase-object-darwin.png differ
diff --git a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-excel-to-csv-darwin.png b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-excel-to-csv-darwin.png
new file mode 100644
index 00000000..f70e7fa6
Binary files /dev/null and b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-excel-to-csv-darwin.png differ
diff --git a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-excel-to-pdf-darwin.png b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-excel-to-pdf-darwin.png
index 03b3c086..afc3148e 100644
Binary files a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-excel-to-pdf-darwin.png and b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-excel-to-pdf-darwin.png differ
diff --git a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-extract-audio-darwin.png b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-extract-audio-darwin.png
index d6d2daaa..23d9651a 100644
Binary files a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-extract-audio-darwin.png and b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-extract-audio-darwin.png differ
diff --git a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-extract-pages-darwin.png b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-extract-pages-darwin.png
index 95f75c2b..fa9cdbad 100644
Binary files a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-extract-pages-darwin.png and b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-extract-pages-darwin.png differ
diff --git a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-extract-subtitles-darwin.png b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-extract-subtitles-darwin.png
index f9bd955e..7ed264bb 100644
Binary files a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-extract-subtitles-darwin.png and b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-extract-subtitles-darwin.png differ
diff --git a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-extract-zip-darwin.png b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-extract-zip-darwin.png
index 7854fb1e..ae1dbdb8 100644
Binary files a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-extract-zip-darwin.png and b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-extract-zip-darwin.png differ
diff --git a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-fade-audio-darwin.png b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-fade-audio-darwin.png
index c67b0f83..71f8cdeb 100644
Binary files a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-fade-audio-darwin.png and b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-fade-audio-darwin.png differ
diff --git a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-favicon-darwin.png b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-favicon-darwin.png
index 0f93b3c5..79165754 100644
Binary files a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-favicon-darwin.png and b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-favicon-darwin.png differ
diff --git a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-find-duplicates-darwin.png b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-find-duplicates-darwin.png
index 072f4dc9..34cdcac2 100644
Binary files a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-find-duplicates-darwin.png and b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-find-duplicates-darwin.png differ
diff --git a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-flac-to-mp3-darwin.png b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-flac-to-mp3-darwin.png
new file mode 100644
index 00000000..580b45b7
Binary files /dev/null and b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-flac-to-mp3-darwin.png differ
diff --git a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-flatten-pdf-darwin.png b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-flatten-pdf-darwin.png
index 5c2cdf0e..2e731db8 100644
Binary files a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-flatten-pdf-darwin.png and b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-flatten-pdf-darwin.png differ
diff --git a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-gif-to-jpg-darwin.png b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-gif-to-jpg-darwin.png
new file mode 100644
index 00000000..565f40f0
Binary files /dev/null and b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-gif-to-jpg-darwin.png differ
diff --git a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-gif-to-mov-darwin.png b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-gif-to-mov-darwin.png
new file mode 100644
index 00000000..0f66050b
Binary files /dev/null and b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-gif-to-mov-darwin.png differ
diff --git a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-gif-to-mp4-darwin.png b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-gif-to-mp4-darwin.png
new file mode 100644
index 00000000..0d6659d4
Binary files /dev/null and b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-gif-to-mp4-darwin.png differ
diff --git a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-gif-to-pdf-darwin.png b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-gif-to-pdf-darwin.png
new file mode 100644
index 00000000..e2b43062
Binary files /dev/null and b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-gif-to-pdf-darwin.png differ
diff --git a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-gif-to-png-darwin.png b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-gif-to-png-darwin.png
new file mode 100644
index 00000000..685663ee
Binary files /dev/null and b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-gif-to-png-darwin.png differ
diff --git a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-gif-to-video-darwin.png b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-gif-to-video-darwin.png
index 6656fc67..48e18634 100644
Binary files a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-gif-to-video-darwin.png and b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-gif-to-video-darwin.png differ
diff --git a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-gif-to-webm-darwin.png b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-gif-to-webm-darwin.png
new file mode 100644
index 00000000..d51417be
Binary files /dev/null and b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-gif-to-webm-darwin.png differ
diff --git a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-gif-tools-darwin.png b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-gif-tools-darwin.png
index a03c0696..5b2e8cd1 100644
Binary files a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-gif-tools-darwin.png and b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-gif-tools-darwin.png differ
diff --git a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-gif-webp-darwin.png b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-gif-webp-darwin.png
index 848d67a1..c77118cc 100644
Binary files a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-gif-webp-darwin.png and b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-gif-webp-darwin.png differ
diff --git a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-grayscale-pdf-darwin.png b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-grayscale-pdf-darwin.png
index a9d061c2..0aa185ba 100644
Binary files a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-grayscale-pdf-darwin.png and b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-grayscale-pdf-darwin.png differ
diff --git a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-heic-to-avif-darwin.png b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-heic-to-avif-darwin.png
new file mode 100644
index 00000000..fc10bfdc
Binary files /dev/null and b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-heic-to-avif-darwin.png differ
diff --git a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-heic-to-jpg-darwin.png b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-heic-to-jpg-darwin.png
new file mode 100644
index 00000000..1039da12
Binary files /dev/null and b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-heic-to-jpg-darwin.png differ
diff --git a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-heic-to-pdf-darwin.png b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-heic-to-pdf-darwin.png
new file mode 100644
index 00000000..cbbbb316
Binary files /dev/null and b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-heic-to-pdf-darwin.png differ
diff --git a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-heic-to-png-darwin.png b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-heic-to-png-darwin.png
new file mode 100644
index 00000000..29547816
Binary files /dev/null and b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-heic-to-png-darwin.png differ
diff --git a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-histogram-darwin.png b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-histogram-darwin.png
index 49be816c..0f91ee00 100644
Binary files a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-histogram-darwin.png and b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-histogram-darwin.png differ
diff --git a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-html-to-image-darwin.png b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-html-to-image-darwin.png
index 63d8acb7..bd8fc54a 100644
Binary files a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-html-to-image-darwin.png and b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-html-to-image-darwin.png differ
diff --git a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-html-to-pdf-darwin.png b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-html-to-pdf-darwin.png
index 8380dedf..8ad92aeb 100644
Binary files a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-html-to-pdf-darwin.png and b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-html-to-pdf-darwin.png differ
diff --git a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-image-enhancement-darwin.png b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-image-enhancement-darwin.png
index 3460048b..74fb0ee3 100644
Binary files a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-image-enhancement-darwin.png and b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-image-enhancement-darwin.png differ
diff --git a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-image-pad-darwin.png b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-image-pad-darwin.png
index d3029d5e..9cd0af41 100644
Binary files a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-image-pad-darwin.png and b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-image-pad-darwin.png differ
diff --git a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-image-to-base64-darwin.png b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-image-to-base64-darwin.png
index 44ccec86..e7273c85 100644
Binary files a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-image-to-base64-darwin.png and b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-image-to-base64-darwin.png differ
diff --git a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-image-to-pdf-darwin.png b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-image-to-pdf-darwin.png
index ce898cd3..05322795 100644
Binary files a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-image-to-pdf-darwin.png and b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-image-to-pdf-darwin.png differ
diff --git a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-images-to-video-darwin.png b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-images-to-video-darwin.png
index 275afd02..b1396fdd 100644
Binary files a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-images-to-video-darwin.png and b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-images-to-video-darwin.png differ
diff --git a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-info-darwin.png b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-info-darwin.png
index 672674ec..d16a4ac8 100644
Binary files a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-info-darwin.png and b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-info-darwin.png differ
diff --git a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-jpg-to-avif-darwin.png b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-jpg-to-avif-darwin.png
new file mode 100644
index 00000000..4d082315
Binary files /dev/null and b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-jpg-to-avif-darwin.png differ
diff --git a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-jpg-to-eps-darwin.png b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-jpg-to-eps-darwin.png
new file mode 100644
index 00000000..4bd0e8a3
Binary files /dev/null and b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-jpg-to-eps-darwin.png differ
diff --git a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-jpg-to-gif-darwin.png b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-jpg-to-gif-darwin.png
new file mode 100644
index 00000000..46263ebb
Binary files /dev/null and b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-jpg-to-gif-darwin.png differ
diff --git a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-jpg-to-pdf-darwin.png b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-jpg-to-pdf-darwin.png
new file mode 100644
index 00000000..ea6a1d67
Binary files /dev/null and b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-jpg-to-pdf-darwin.png differ
diff --git a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-jpg-to-png-darwin.png b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-jpg-to-png-darwin.png
new file mode 100644
index 00000000..ee905ba6
Binary files /dev/null and b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-jpg-to-png-darwin.png differ
diff --git a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-jpg-to-svg-darwin.png b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-jpg-to-svg-darwin.png
new file mode 100644
index 00000000..65b58feb
Binary files /dev/null and b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-jpg-to-svg-darwin.png differ
diff --git a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-jpg-to-tiff-darwin.png b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-jpg-to-tiff-darwin.png
new file mode 100644
index 00000000..9af60ff0
Binary files /dev/null and b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-jpg-to-tiff-darwin.png differ
diff --git a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-jpg-to-webp-darwin.png b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-jpg-to-webp-darwin.png
new file mode 100644
index 00000000..4c9967b0
Binary files /dev/null and b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-jpg-to-webp-darwin.png differ
diff --git a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-json-xml-darwin.png b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-json-xml-darwin.png
index aa7941fe..18da8c58 100644
Binary files a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-json-xml-darwin.png and b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-json-xml-darwin.png differ
diff --git a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-linearize-pdf-darwin.png b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-linearize-pdf-darwin.png
index 3d710fd7..7c4e9e37 100644
Binary files a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-linearize-pdf-darwin.png and b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-linearize-pdf-darwin.png differ
diff --git a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-lqip-placeholder-darwin.png b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-lqip-placeholder-darwin.png
index a58a7855..8a82330d 100644
Binary files a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-lqip-placeholder-darwin.png and b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-lqip-placeholder-darwin.png differ
diff --git a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-m4a-to-mp3-darwin.png b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-m4a-to-mp3-darwin.png
new file mode 100644
index 00000000..be63a683
Binary files /dev/null and b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-m4a-to-mp3-darwin.png differ
diff --git a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-m4a-to-wav-darwin.png b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-m4a-to-wav-darwin.png
new file mode 100644
index 00000000..a5eb6828
Binary files /dev/null and b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-m4a-to-wav-darwin.png differ
diff --git a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-markdown-to-docx-darwin.png b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-markdown-to-docx-darwin.png
index 96392e8d..3d2e70bd 100644
Binary files a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-markdown-to-docx-darwin.png and b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-markdown-to-docx-darwin.png differ
diff --git a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-markdown-to-html-darwin.png b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-markdown-to-html-darwin.png
index 50570668..3e79144e 100644
Binary files a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-markdown-to-html-darwin.png and b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-markdown-to-html-darwin.png differ
diff --git a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-markdown-to-pdf-darwin.png b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-markdown-to-pdf-darwin.png
index da66f2a4..22c3f7a5 100644
Binary files a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-markdown-to-pdf-darwin.png and b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-markdown-to-pdf-darwin.png differ
diff --git a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-meme-generator-darwin.png b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-meme-generator-darwin.png
index efaa2156..3be7e9c0 100644
Binary files a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-meme-generator-darwin.png and b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-meme-generator-darwin.png differ
diff --git a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-merge-audio-darwin.png b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-merge-audio-darwin.png
index 745fd85f..e48cba8f 100644
Binary files a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-merge-audio-darwin.png and b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-merge-audio-darwin.png differ
diff --git a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-merge-csvs-darwin.png b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-merge-csvs-darwin.png
index 33337b43..a36ef042 100644
Binary files a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-merge-csvs-darwin.png and b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-merge-csvs-darwin.png differ
diff --git a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-merge-pdf-darwin.png b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-merge-pdf-darwin.png
index 6364d1d2..62ad8b74 100644
Binary files a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-merge-pdf-darwin.png and b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-merge-pdf-darwin.png differ
diff --git a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-merge-videos-darwin.png b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-merge-videos-darwin.png
index 54a65c2b..afd8850c 100644
Binary files a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-merge-videos-darwin.png and b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-merge-videos-darwin.png differ
diff --git a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-mkv-to-avi-darwin.png b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-mkv-to-avi-darwin.png
new file mode 100644
index 00000000..400c49d6
Binary files /dev/null and b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-mkv-to-avi-darwin.png differ
diff --git a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-mkv-to-gif-darwin.png b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-mkv-to-gif-darwin.png
new file mode 100644
index 00000000..5233bf5b
Binary files /dev/null and b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-mkv-to-gif-darwin.png differ
diff --git a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-mkv-to-mov-darwin.png b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-mkv-to-mov-darwin.png
new file mode 100644
index 00000000..7a1d204c
Binary files /dev/null and b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-mkv-to-mov-darwin.png differ
diff --git a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-mkv-to-mp3-darwin.png b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-mkv-to-mp3-darwin.png
new file mode 100644
index 00000000..8d373af4
Binary files /dev/null and b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-mkv-to-mp3-darwin.png differ
diff --git a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-mkv-to-mp4-darwin.png b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-mkv-to-mp4-darwin.png
new file mode 100644
index 00000000..abaff42c
Binary files /dev/null and b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-mkv-to-mp4-darwin.png differ
diff --git a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-mov-to-avi-darwin.png b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-mov-to-avi-darwin.png
new file mode 100644
index 00000000..8814982c
Binary files /dev/null and b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-mov-to-avi-darwin.png differ
diff --git a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-mov-to-gif-darwin.png b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-mov-to-gif-darwin.png
new file mode 100644
index 00000000..e9dbf2f2
Binary files /dev/null and b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-mov-to-gif-darwin.png differ
diff --git a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-mov-to-mp3-darwin.png b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-mov-to-mp3-darwin.png
new file mode 100644
index 00000000..20d69b70
Binary files /dev/null and b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-mov-to-mp3-darwin.png differ
diff --git a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-mov-to-mp4-darwin.png b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-mov-to-mp4-darwin.png
new file mode 100644
index 00000000..a296a6df
Binary files /dev/null and b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-mov-to-mp4-darwin.png differ
diff --git a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-mov-to-wav-darwin.png b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-mov-to-wav-darwin.png
new file mode 100644
index 00000000..7a20f4ca
Binary files /dev/null and b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-mov-to-wav-darwin.png differ
diff --git a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-mp3-to-wav-darwin.png b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-mp3-to-wav-darwin.png
new file mode 100644
index 00000000..2d21153d
Binary files /dev/null and b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-mp3-to-wav-darwin.png differ
diff --git a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-mp4-to-avi-darwin.png b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-mp4-to-avi-darwin.png
new file mode 100644
index 00000000..70d875ca
Binary files /dev/null and b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-mp4-to-avi-darwin.png differ
diff --git a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-mp4-to-gif-darwin.png b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-mp4-to-gif-darwin.png
new file mode 100644
index 00000000..4914f19c
Binary files /dev/null and b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-mp4-to-gif-darwin.png differ
diff --git a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-mp4-to-mov-darwin.png b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-mp4-to-mov-darwin.png
new file mode 100644
index 00000000..ea61a754
Binary files /dev/null and b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-mp4-to-mov-darwin.png differ
diff --git a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-mp4-to-mp3-darwin.png b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-mp4-to-mp3-darwin.png
new file mode 100644
index 00000000..0e329cdc
Binary files /dev/null and b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-mp4-to-mp3-darwin.png differ
diff --git a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-mp4-to-ogg-darwin.png b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-mp4-to-ogg-darwin.png
new file mode 100644
index 00000000..84a062e1
Binary files /dev/null and b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-mp4-to-ogg-darwin.png differ
diff --git a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-mp4-to-wav-darwin.png b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-mp4-to-wav-darwin.png
new file mode 100644
index 00000000..ecce4e7a
Binary files /dev/null and b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-mp4-to-wav-darwin.png differ
diff --git a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-mp4-to-webm-darwin.png b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-mp4-to-webm-darwin.png
new file mode 100644
index 00000000..ce60979c
Binary files /dev/null and b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-mp4-to-webm-darwin.png differ
diff --git a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-mute-video-darwin.png b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-mute-video-darwin.png
index 124fce78..8d48b8c4 100644
Binary files a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-mute-video-darwin.png and b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-mute-video-darwin.png differ
diff --git a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-noise-reduction-darwin.png b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-noise-reduction-darwin.png
index 94726823..15884e4c 100644
Binary files a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-noise-reduction-darwin.png and b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-noise-reduction-darwin.png differ
diff --git a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-noise-removal-darwin.png b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-noise-removal-darwin.png
index 91c97035..bb83d3fd 100644
Binary files a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-noise-removal-darwin.png and b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-noise-removal-darwin.png differ
diff --git a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-normalize-audio-darwin.png b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-normalize-audio-darwin.png
index 24165467..bd73e3fb 100644
Binary files a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-normalize-audio-darwin.png and b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-normalize-audio-darwin.png differ
diff --git a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-nup-pdf-darwin.png b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-nup-pdf-darwin.png
index 7e22d0cd..cc837f10 100644
Binary files a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-nup-pdf-darwin.png and b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-nup-pdf-darwin.png differ
diff --git a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-ocr-darwin.png b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-ocr-darwin.png
index 45e82e8f..a1b71238 100644
Binary files a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-ocr-darwin.png and b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-ocr-darwin.png differ
diff --git a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-ocr-pdf-darwin.png b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-ocr-pdf-darwin.png
index 740a8bc2..31f4eed2 100644
Binary files a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-ocr-pdf-darwin.png and b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-ocr-pdf-darwin.png differ
diff --git a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-ogg-to-mp3-darwin.png b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-ogg-to-mp3-darwin.png
new file mode 100644
index 00000000..3a5d78ee
Binary files /dev/null and b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-ogg-to-mp3-darwin.png differ
diff --git a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-ogg-to-wav-darwin.png b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-ogg-to-wav-darwin.png
new file mode 100644
index 00000000..74e469b8
Binary files /dev/null and b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-ogg-to-wav-darwin.png differ
diff --git a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-optimize-for-web-darwin.png b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-optimize-for-web-darwin.png
index 9cffcc99..b58b3ecc 100644
Binary files a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-optimize-for-web-darwin.png and b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-optimize-for-web-darwin.png differ
diff --git a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-organize-pdf-darwin.png b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-organize-pdf-darwin.png
index 3073e5ba..13237f2a 100644
Binary files a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-organize-pdf-darwin.png and b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-organize-pdf-darwin.png differ
diff --git a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-passport-photo-darwin.png b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-passport-photo-darwin.png
index 7744a6d1..0d9106c4 100644
Binary files a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-passport-photo-darwin.png and b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-passport-photo-darwin.png differ
diff --git a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-pdf-metadata-darwin.png b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-pdf-metadata-darwin.png
index f06ef1dd..bd2784ea 100644
Binary files a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-pdf-metadata-darwin.png and b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-pdf-metadata-darwin.png differ
diff --git a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-pdf-page-numbers-darwin.png b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-pdf-page-numbers-darwin.png
index 460f7024..426542a0 100644
Binary files a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-pdf-page-numbers-darwin.png and b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-pdf-page-numbers-darwin.png differ
diff --git a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-pdf-to-image-darwin.png b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-pdf-to-image-darwin.png
index 71ae0810..2b079a64 100644
Binary files a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-pdf-to-image-darwin.png and b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-pdf-to-image-darwin.png differ
diff --git a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-pdf-to-jpg-darwin.png b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-pdf-to-jpg-darwin.png
new file mode 100644
index 00000000..a7647b17
Binary files /dev/null and b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-pdf-to-jpg-darwin.png differ
diff --git a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-pdf-to-png-darwin.png b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-pdf-to-png-darwin.png
new file mode 100644
index 00000000..0ec9163a
Binary files /dev/null and b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-pdf-to-png-darwin.png differ
diff --git a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-pdf-to-text-darwin.png b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-pdf-to-text-darwin.png
index e0626c84..e1979784 100644
Binary files a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-pdf-to-text-darwin.png and b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-pdf-to-text-darwin.png differ
diff --git a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-pdf-to-tiff-darwin.png b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-pdf-to-tiff-darwin.png
new file mode 100644
index 00000000..edb593f1
Binary files /dev/null and b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-pdf-to-tiff-darwin.png differ
diff --git a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-pdf-to-word-darwin.png b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-pdf-to-word-darwin.png
index fdec6520..307163b1 100644
Binary files a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-pdf-to-word-darwin.png and b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-pdf-to-word-darwin.png differ
diff --git a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-pdfa-convert-darwin.png b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-pdfa-convert-darwin.png
index a6ad4f14..1ab12236 100644
Binary files a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-pdfa-convert-darwin.png and b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-pdfa-convert-darwin.png differ
diff --git a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-pitch-shift-darwin.png b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-pitch-shift-darwin.png
index d165a2eb..f2ccad8a 100644
Binary files a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-pitch-shift-darwin.png and b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-pitch-shift-darwin.png differ
diff --git a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-pixelate-darwin.png b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-pixelate-darwin.png
index 8f838772..ae525f96 100644
Binary files a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-pixelate-darwin.png and b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-pixelate-darwin.png differ
diff --git a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-png-to-avif-darwin.png b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-png-to-avif-darwin.png
new file mode 100644
index 00000000..e40643eb
Binary files /dev/null and b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-png-to-avif-darwin.png differ
diff --git a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-png-to-eps-darwin.png b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-png-to-eps-darwin.png
new file mode 100644
index 00000000..6e641042
Binary files /dev/null and b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-png-to-eps-darwin.png differ
diff --git a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-png-to-gif-darwin.png b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-png-to-gif-darwin.png
new file mode 100644
index 00000000..7451e126
Binary files /dev/null and b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-png-to-gif-darwin.png differ
diff --git a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-png-to-jpg-darwin.png b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-png-to-jpg-darwin.png
new file mode 100644
index 00000000..affdeba1
Binary files /dev/null and b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-png-to-jpg-darwin.png differ
diff --git a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-png-to-pdf-darwin.png b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-png-to-pdf-darwin.png
new file mode 100644
index 00000000..269b26f9
Binary files /dev/null and b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-png-to-pdf-darwin.png differ
diff --git a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-png-to-svg-darwin.png b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-png-to-svg-darwin.png
new file mode 100644
index 00000000..fc8a5450
Binary files /dev/null and b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-png-to-svg-darwin.png differ
diff --git a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-png-to-tiff-darwin.png b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-png-to-tiff-darwin.png
new file mode 100644
index 00000000..d5387762
Binary files /dev/null and b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-png-to-tiff-darwin.png differ
diff --git a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-png-to-webp-darwin.png b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-png-to-webp-darwin.png
new file mode 100644
index 00000000..fe95f864
Binary files /dev/null and b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-png-to-webp-darwin.png differ
diff --git a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-powerpoint-to-pdf-darwin.png b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-powerpoint-to-pdf-darwin.png
index 36e0744c..34e31cc3 100644
Binary files a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-powerpoint-to-pdf-darwin.png and b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-powerpoint-to-pdf-darwin.png differ
diff --git a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-protect-pdf-darwin.png b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-protect-pdf-darwin.png
index 0b82e652..88598b64 100644
Binary files a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-protect-pdf-darwin.png and b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-protect-pdf-darwin.png differ
diff --git a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-psd-to-jpg-darwin.png b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-psd-to-jpg-darwin.png
new file mode 100644
index 00000000..bc0e7498
Binary files /dev/null and b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-psd-to-jpg-darwin.png differ
diff --git a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-psd-to-png-darwin.png b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-psd-to-png-darwin.png
new file mode 100644
index 00000000..033eab3c
Binary files /dev/null and b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-psd-to-png-darwin.png differ
diff --git a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-psd-to-svg-darwin.png b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-psd-to-svg-darwin.png
new file mode 100644
index 00000000..60226ebc
Binary files /dev/null and b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-psd-to-svg-darwin.png differ
diff --git a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-qr-generate-darwin.png b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-qr-generate-darwin.png
index a762f452..8070dc33 100644
Binary files a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-qr-generate-darwin.png and b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-qr-generate-darwin.png differ
diff --git a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-red-eye-removal-darwin.png b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-red-eye-removal-darwin.png
index 9e924097..ff3d2743 100644
Binary files a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-red-eye-removal-darwin.png and b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-red-eye-removal-darwin.png differ
diff --git a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-redact-pdf-darwin.png b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-redact-pdf-darwin.png
index 2a7474da..30e87052 100644
Binary files a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-redact-pdf-darwin.png and b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-redact-pdf-darwin.png differ
diff --git a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-remove-background-darwin.png b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-remove-background-darwin.png
index f3520596..feb135be 100644
Binary files a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-remove-background-darwin.png and b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-remove-background-darwin.png differ
diff --git a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-remove-gif-background-darwin.png b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-remove-gif-background-darwin.png
new file mode 100644
index 00000000..5e1840bb
Binary files /dev/null and b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-remove-gif-background-darwin.png differ
diff --git a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-remove-pages-darwin.png b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-remove-pages-darwin.png
index f2b6e6d2..24046e48 100644
Binary files a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-remove-pages-darwin.png and b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-remove-pages-darwin.png differ
diff --git a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-repair-pdf-darwin.png b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-repair-pdf-darwin.png
index 9c0ef6c1..814b5285 100644
Binary files a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-repair-pdf-darwin.png and b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-repair-pdf-darwin.png differ
diff --git a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-replace-audio-darwin.png b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-replace-audio-darwin.png
index 259db978..028e9dd1 100644
Binary files a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-replace-audio-darwin.png and b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-replace-audio-darwin.png differ
diff --git a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-replace-color-darwin.png b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-replace-color-darwin.png
index f3e4a28d..4a7fe841 100644
Binary files a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-replace-color-darwin.png and b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-replace-color-darwin.png differ
diff --git a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-resize-darwin.png b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-resize-darwin.png
index ebc852eb..b55c95d7 100644
Binary files a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-resize-darwin.png and b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-resize-darwin.png differ
diff --git a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-resize-video-darwin.png b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-resize-video-darwin.png
index d19f7005..5a75e630 100644
Binary files a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-resize-video-darwin.png and b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-resize-video-darwin.png differ
diff --git a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-restore-photo-darwin.png b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-restore-photo-darwin.png
index e962fdad..77b39f38 100644
Binary files a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-restore-photo-darwin.png and b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-restore-photo-darwin.png differ
diff --git a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-reverse-audio-darwin.png b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-reverse-audio-darwin.png
index acfb4dbb..38e7bde9 100644
Binary files a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-reverse-audio-darwin.png and b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-reverse-audio-darwin.png differ
diff --git a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-reverse-video-darwin.png b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-reverse-video-darwin.png
index a6311d0a..0ab94deb 100644
Binary files a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-reverse-video-darwin.png and b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-reverse-video-darwin.png differ
diff --git a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-ringtone-maker-darwin.png b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-ringtone-maker-darwin.png
index 24064391..2d969e05 100644
Binary files a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-ringtone-maker-darwin.png and b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-ringtone-maker-darwin.png differ
diff --git a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-rotate-darwin.png b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-rotate-darwin.png
index 91582665..ed0d26fc 100644
Binary files a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-rotate-darwin.png and b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-rotate-darwin.png differ
diff --git a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-rotate-pdf-darwin.png b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-rotate-pdf-darwin.png
index 9d6d87eb..03b8133a 100644
Binary files a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-rotate-pdf-darwin.png and b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-rotate-pdf-darwin.png differ
diff --git a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-rotate-video-darwin.png b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-rotate-video-darwin.png
index a314e4f1..71b774d0 100644
Binary files a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-rotate-video-darwin.png and b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-rotate-video-darwin.png differ
diff --git a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-sharpening-darwin.png b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-sharpening-darwin.png
index 2fc857c9..21053bfb 100644
Binary files a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-sharpening-darwin.png and b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-sharpening-darwin.png differ
diff --git a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-sign-pdf-darwin.png b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-sign-pdf-darwin.png
new file mode 100644
index 00000000..6302ab34
Binary files /dev/null and b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-sign-pdf-darwin.png differ
diff --git a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-silence-removal-darwin.png b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-silence-removal-darwin.png
index 7dcbe945..e642edc8 100644
Binary files a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-silence-removal-darwin.png and b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-silence-removal-darwin.png differ
diff --git a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-smart-crop-darwin.png b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-smart-crop-darwin.png
index 856cd113..f0f7570a 100644
Binary files a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-smart-crop-darwin.png and b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-smart-crop-darwin.png differ
diff --git a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-split-audio-darwin.png b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-split-audio-darwin.png
index 3a063e8d..98afba51 100644
Binary files a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-split-audio-darwin.png and b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-split-audio-darwin.png differ
diff --git a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-split-csv-darwin.png b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-split-csv-darwin.png
index 165efc47..1fb113b1 100644
Binary files a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-split-csv-darwin.png and b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-split-csv-darwin.png differ
diff --git a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-split-darwin.png b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-split-darwin.png
index dbcb13c2..5cf64ed8 100644
Binary files a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-split-darwin.png and b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-split-darwin.png differ
diff --git a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-split-pdf-darwin.png b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-split-pdf-darwin.png
index e344d11b..46c17e12 100644
Binary files a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-split-pdf-darwin.png and b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-split-pdf-darwin.png differ
diff --git a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-sprite-sheet-darwin.png b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-sprite-sheet-darwin.png
index f17a260a..25e0424f 100644
Binary files a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-sprite-sheet-darwin.png and b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-sprite-sheet-darwin.png differ
diff --git a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-stabilize-video-darwin.png b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-stabilize-video-darwin.png
index 74e67bdb..2209c64f 100644
Binary files a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-stabilize-video-darwin.png and b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-stabilize-video-darwin.png differ
diff --git a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-stitch-darwin.png b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-stitch-darwin.png
index de88a5c4..aeb04f64 100644
Binary files a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-stitch-darwin.png and b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-stitch-darwin.png differ
diff --git a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-strip-metadata-darwin.png b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-strip-metadata-darwin.png
index af7db887..d03bb810 100644
Binary files a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-strip-metadata-darwin.png and b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-strip-metadata-darwin.png differ
diff --git a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-svg-to-jpg-darwin.png b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-svg-to-jpg-darwin.png
new file mode 100644
index 00000000..fb181b27
Binary files /dev/null and b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-svg-to-jpg-darwin.png differ
diff --git a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-svg-to-png-darwin.png b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-svg-to-png-darwin.png
new file mode 100644
index 00000000..979bd704
Binary files /dev/null and b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-svg-to-png-darwin.png differ
diff --git a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-svg-to-raster-darwin.png b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-svg-to-raster-darwin.png
index eca15cb5..6e3f5693 100644
Binary files a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-svg-to-raster-darwin.png and b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-svg-to-raster-darwin.png differ
diff --git a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-text-overlay-darwin.png b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-text-overlay-darwin.png
index d60aaac4..7cb13553 100644
Binary files a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-text-overlay-darwin.png and b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-text-overlay-darwin.png differ
diff --git a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-tiff-to-jpg-darwin.png b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-tiff-to-jpg-darwin.png
new file mode 100644
index 00000000..f69e702b
Binary files /dev/null and b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-tiff-to-jpg-darwin.png differ
diff --git a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-tiff-to-pdf-darwin.png b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-tiff-to-pdf-darwin.png
new file mode 100644
index 00000000..8ff589fd
Binary files /dev/null and b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-tiff-to-pdf-darwin.png differ
diff --git a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-tiff-to-png-darwin.png b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-tiff-to-png-darwin.png
new file mode 100644
index 00000000..23d87773
Binary files /dev/null and b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-tiff-to-png-darwin.png differ
diff --git a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-tiff-to-svg-darwin.png b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-tiff-to-svg-darwin.png
new file mode 100644
index 00000000..dc7af5bf
Binary files /dev/null and b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-tiff-to-svg-darwin.png differ
diff --git a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-to-epub-darwin.png b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-to-epub-darwin.png
index d9945a73..355dc872 100644
Binary files a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-to-epub-darwin.png and b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-to-epub-darwin.png differ
diff --git a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-transcribe-audio-darwin.png b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-transcribe-audio-darwin.png
index 7b167b2c..7e92d9a1 100644
Binary files a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-transcribe-audio-darwin.png and b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-transcribe-audio-darwin.png differ
diff --git a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-transparency-fixer-darwin.png b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-transparency-fixer-darwin.png
index ebb154a9..9f7a1519 100644
Binary files a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-transparency-fixer-darwin.png and b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-transparency-fixer-darwin.png differ
diff --git a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-trim-audio-darwin.png b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-trim-audio-darwin.png
index 30ca902f..16a43112 100644
Binary files a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-trim-audio-darwin.png and b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-trim-audio-darwin.png differ
diff --git a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-trim-video-darwin.png b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-trim-video-darwin.png
index 84d557c7..7d37de1f 100644
Binary files a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-trim-video-darwin.png and b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-trim-video-darwin.png differ
diff --git a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-unlock-pdf-darwin.png b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-unlock-pdf-darwin.png
index 9b0746cb..bab70b97 100644
Binary files a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-unlock-pdf-darwin.png and b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-unlock-pdf-darwin.png differ
diff --git a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-upscale-darwin.png b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-upscale-darwin.png
index 209a2bbd..26a0684c 100644
Binary files a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-upscale-darwin.png and b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-upscale-darwin.png differ
diff --git a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-vectorize-darwin.png b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-vectorize-darwin.png
index 1201c8a9..c2590be6 100644
Binary files a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-vectorize-darwin.png and b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-vectorize-darwin.png differ
diff --git a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-video-color-darwin.png b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-video-color-darwin.png
index 3f8c78aa..a6d1dff2 100644
Binary files a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-video-color-darwin.png and b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-video-color-darwin.png differ
diff --git a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-video-loudnorm-darwin.png b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-video-loudnorm-darwin.png
index 65f3c324..22b380cd 100644
Binary files a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-video-loudnorm-darwin.png and b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-video-loudnorm-darwin.png differ
diff --git a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-video-metadata-darwin.png b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-video-metadata-darwin.png
index 0ee54c57..7b0dfb60 100644
Binary files a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-video-metadata-darwin.png and b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-video-metadata-darwin.png differ
diff --git a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-video-speed-darwin.png b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-video-speed-darwin.png
index 321b3a39..6e30250c 100644
Binary files a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-video-speed-darwin.png and b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-video-speed-darwin.png differ
diff --git a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-video-to-frames-darwin.png b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-video-to-frames-darwin.png
index 839d440b..5f9ad5e5 100644
Binary files a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-video-to-frames-darwin.png and b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-video-to-frames-darwin.png differ
diff --git a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-video-to-gif-darwin.png b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-video-to-gif-darwin.png
index ac36c090..215e94b3 100644
Binary files a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-video-to-gif-darwin.png and b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-video-to-gif-darwin.png differ
diff --git a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-video-to-webp-darwin.png b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-video-to-webp-darwin.png
index 1b567074..550cb29f 100644
Binary files a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-video-to-webp-darwin.png and b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-video-to-webp-darwin.png differ
diff --git a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-vignette-darwin.png b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-vignette-darwin.png
index 48a2f39e..edf79598 100644
Binary files a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-vignette-darwin.png and b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-vignette-darwin.png differ
diff --git a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-volume-adjust-darwin.png b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-volume-adjust-darwin.png
index 2a9f5cc4..bc25e891 100644
Binary files a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-volume-adjust-darwin.png and b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-volume-adjust-darwin.png differ
diff --git a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-watermark-image-darwin.png b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-watermark-image-darwin.png
index e8695146..1a2a5911 100644
Binary files a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-watermark-image-darwin.png and b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-watermark-image-darwin.png differ
diff --git a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-watermark-pdf-darwin.png b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-watermark-pdf-darwin.png
index 79641c75..8a678ec3 100644
Binary files a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-watermark-pdf-darwin.png and b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-watermark-pdf-darwin.png differ
diff --git a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-watermark-text-darwin.png b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-watermark-text-darwin.png
index 1f1960ba..b6b20f05 100644
Binary files a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-watermark-text-darwin.png and b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-watermark-text-darwin.png differ
diff --git a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-watermark-video-darwin.png b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-watermark-video-darwin.png
index 3023e77e..373da8e6 100644
Binary files a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-watermark-video-darwin.png and b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-watermark-video-darwin.png differ
diff --git a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-wav-to-mp3-darwin.png b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-wav-to-mp3-darwin.png
new file mode 100644
index 00000000..8046f5bd
Binary files /dev/null and b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-wav-to-mp3-darwin.png differ
diff --git a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-waveform-image-darwin.png b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-waveform-image-darwin.png
index a611463c..0ad473a7 100644
Binary files a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-waveform-image-darwin.png and b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-waveform-image-darwin.png differ
diff --git a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-webm-to-mov-darwin.png b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-webm-to-mov-darwin.png
new file mode 100644
index 00000000..e5fa0c9b
Binary files /dev/null and b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-webm-to-mov-darwin.png differ
diff --git a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-webm-to-mp3-darwin.png b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-webm-to-mp3-darwin.png
new file mode 100644
index 00000000..81ee4d8a
Binary files /dev/null and b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-webm-to-mp3-darwin.png differ
diff --git a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-webm-to-mp4-darwin.png b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-webm-to-mp4-darwin.png
new file mode 100644
index 00000000..d0148f2d
Binary files /dev/null and b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-webm-to-mp4-darwin.png differ
diff --git a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-webp-to-avif-darwin.png b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-webp-to-avif-darwin.png
new file mode 100644
index 00000000..6c03497b
Binary files /dev/null and b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-webp-to-avif-darwin.png differ
diff --git a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-webp-to-gif-darwin.png b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-webp-to-gif-darwin.png
new file mode 100644
index 00000000..a59f99a0
Binary files /dev/null and b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-webp-to-gif-darwin.png differ
diff --git a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-webp-to-jpg-darwin.png b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-webp-to-jpg-darwin.png
new file mode 100644
index 00000000..614ada0a
Binary files /dev/null and b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-webp-to-jpg-darwin.png differ
diff --git a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-webp-to-pdf-darwin.png b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-webp-to-pdf-darwin.png
new file mode 100644
index 00000000..c84e9cea
Binary files /dev/null and b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-webp-to-pdf-darwin.png differ
diff --git a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-webp-to-png-darwin.png b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-webp-to-png-darwin.png
new file mode 100644
index 00000000..92d872de
Binary files /dev/null and b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-webp-to-png-darwin.png differ
diff --git a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-word-to-pdf-darwin.png b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-word-to-pdf-darwin.png
index 4df7ac16..ed25a961 100644
Binary files a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-word-to-pdf-darwin.png and b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-word-to-pdf-darwin.png differ
diff --git a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-xml-to-csv-darwin.png b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-xml-to-csv-darwin.png
index 7d07e126..4707ce5b 100644
Binary files a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-xml-to-csv-darwin.png and b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-xml-to-csv-darwin.png differ
diff --git a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-yaml-json-darwin.png b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-yaml-json-darwin.png
index acb95642..20cb14ac 100644
Binary files a/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-yaml-json-darwin.png and b/tests/e2e/__screenshots__/gui-visual-tools.spec.ts/tool-yaml-json-darwin.png differ
diff --git a/tests/e2e/__screenshots__/visual-regression.spec.ts/compress-empty-desktop-darwin.png b/tests/e2e/__screenshots__/visual-regression.spec.ts/compress-empty-desktop-darwin.png
deleted file mode 100644
index ec3d3038..00000000
Binary files a/tests/e2e/__screenshots__/visual-regression.spec.ts/compress-empty-desktop-darwin.png and /dev/null differ
diff --git a/tests/e2e/__screenshots__/visual-regression.spec.ts/convert-empty-desktop-darwin.png b/tests/e2e/__screenshots__/visual-regression.spec.ts/convert-empty-desktop-darwin.png
deleted file mode 100644
index 2fffb5a2..00000000
Binary files a/tests/e2e/__screenshots__/visual-regression.spec.ts/convert-empty-desktop-darwin.png and /dev/null differ
diff --git a/tests/e2e/__screenshots__/visual-regression.spec.ts/fullscreen-grid-desktop-darwin.png b/tests/e2e/__screenshots__/visual-regression.spec.ts/fullscreen-grid-desktop-darwin.png
deleted file mode 100644
index 7f036aa2..00000000
Binary files a/tests/e2e/__screenshots__/visual-regression.spec.ts/fullscreen-grid-desktop-darwin.png and /dev/null differ
diff --git a/tests/e2e/__screenshots__/visual-regression.spec.ts/fullscreen-grid-mobile-darwin.png b/tests/e2e/__screenshots__/visual-regression.spec.ts/fullscreen-grid-mobile-darwin.png
deleted file mode 100644
index 587f20f1..00000000
Binary files a/tests/e2e/__screenshots__/visual-regression.spec.ts/fullscreen-grid-mobile-darwin.png and /dev/null differ
diff --git a/tests/e2e/__screenshots__/visual-regression.spec.ts/fullscreen-grid-tablet-darwin.png b/tests/e2e/__screenshots__/visual-regression.spec.ts/fullscreen-grid-tablet-darwin.png
deleted file mode 100644
index 4df5ff70..00000000
Binary files a/tests/e2e/__screenshots__/visual-regression.spec.ts/fullscreen-grid-tablet-darwin.png and /dev/null differ
diff --git a/tests/e2e/__screenshots__/visual-regression.spec.ts/home-desktop-darwin.png b/tests/e2e/__screenshots__/visual-regression.spec.ts/home-desktop-darwin.png
deleted file mode 100644
index a2ad1792..00000000
Binary files a/tests/e2e/__screenshots__/visual-regression.spec.ts/home-desktop-darwin.png and /dev/null differ
diff --git a/tests/e2e/__screenshots__/visual-regression.spec.ts/home-mobile-darwin.png b/tests/e2e/__screenshots__/visual-regression.spec.ts/home-mobile-darwin.png
deleted file mode 100644
index 32433113..00000000
Binary files a/tests/e2e/__screenshots__/visual-regression.spec.ts/home-mobile-darwin.png and /dev/null differ
diff --git a/tests/e2e/__screenshots__/visual-regression.spec.ts/home-tablet-darwin.png b/tests/e2e/__screenshots__/visual-regression.spec.ts/home-tablet-darwin.png
deleted file mode 100644
index e4cc1739..00000000
Binary files a/tests/e2e/__screenshots__/visual-regression.spec.ts/home-tablet-darwin.png and /dev/null differ
diff --git a/tests/e2e/__screenshots__/visual-regression.spec.ts/login-desktop-darwin.png b/tests/e2e/__screenshots__/visual-regression.spec.ts/login-desktop-darwin.png
deleted file mode 100644
index 210d3606..00000000
Binary files a/tests/e2e/__screenshots__/visual-regression.spec.ts/login-desktop-darwin.png and /dev/null differ
diff --git a/tests/e2e/__screenshots__/visual-regression.spec.ts/login-mobile-darwin.png b/tests/e2e/__screenshots__/visual-regression.spec.ts/login-mobile-darwin.png
deleted file mode 100644
index c455cbe6..00000000
Binary files a/tests/e2e/__screenshots__/visual-regression.spec.ts/login-mobile-darwin.png and /dev/null differ
diff --git a/tests/e2e/__screenshots__/visual-regression.spec.ts/resize-empty-desktop-darwin.png b/tests/e2e/__screenshots__/visual-regression.spec.ts/resize-empty-desktop-darwin.png
deleted file mode 100644
index 4fe49458..00000000
Binary files a/tests/e2e/__screenshots__/visual-regression.spec.ts/resize-empty-desktop-darwin.png and /dev/null differ
diff --git a/tests/e2e/__screenshots__/visual-regression.spec.ts/resize-empty-mobile-darwin.png b/tests/e2e/__screenshots__/visual-regression.spec.ts/resize-empty-mobile-darwin.png
deleted file mode 100644
index b43aedb9..00000000
Binary files a/tests/e2e/__screenshots__/visual-regression.spec.ts/resize-empty-mobile-darwin.png and /dev/null differ
diff --git a/tests/e2e/__screenshots__/visual-regression.spec.ts/resize-uploaded-desktop-darwin.png b/tests/e2e/__screenshots__/visual-regression.spec.ts/resize-uploaded-desktop-darwin.png
deleted file mode 100644
index 000d6a53..00000000
Binary files a/tests/e2e/__screenshots__/visual-regression.spec.ts/resize-uploaded-desktop-darwin.png and /dev/null differ
diff --git a/tests/e2e/__screenshots__/visual-regression.spec.ts/sidebar-desktop-darwin.png b/tests/e2e/__screenshots__/visual-regression.spec.ts/sidebar-desktop-darwin.png
deleted file mode 100644
index 0ca380cd..00000000
Binary files a/tests/e2e/__screenshots__/visual-regression.spec.ts/sidebar-desktop-darwin.png and /dev/null differ
diff --git a/tests/e2e/a11y-baseline.json b/tests/e2e/a11y-baseline.json
index 82c35b3e..30ea65e2 100644
--- a/tests/e2e/a11y-baseline.json
+++ b/tests/e2e/a11y-baseline.json
@@ -1,51 +1,16 @@
 {
   "_comment": "Known axe a11y violations. Keyed by pageKey:ruleId. This baseline lets CI catch NEW regressions without failing on documented existing debt. Regenerate by running the a11y spec with A11Y_UPDATE_BASELINE=1.",
   "violations": {
-    "home-en:color-contrast": {
-      "impact": "serious",
-      "description": "Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds",
-      "count": 11
-    },
     "home-en:heading-order": {
       "impact": "moderate",
       "description": "Ensure the order of headings is semantically correct",
       "count": 1
     },
-    "image-resize-en:color-contrast": {
-      "impact": "serious",
-      "description": "Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds",
-      "count": 2
-    },
-    "video-convert-en:color-contrast": {
-      "impact": "serious",
-      "description": "Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds",
-      "count": 2
-    },
-    "audio-convert-en:color-contrast": {
-      "impact": "serious",
-      "description": "Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds",
-      "count": 2
-    },
-    "document-pdf-to-image-en:color-contrast": {
-      "impact": "serious",
-      "description": "Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds",
-      "count": 2
-    },
-    "data-csv-excel-en:color-contrast": {
-      "impact": "serious",
-      "description": "Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds",
-      "count": 2
-    },
     "editor-en:aria-required-children": {
       "impact": "critical",
       "description": "Ensure elements with an ARIA role that require child roles contain them",
       "count": 1
     },
-    "editor-en:color-contrast": {
-      "impact": "serious",
-      "description": "Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds",
-      "count": 2
-    },
     "editor-en:label": {
       "impact": "critical",
       "description": "Ensure every form element has a label",
@@ -66,11 +31,6 @@
       "description": "Ensure all skip links have a focusable target",
       "count": 1
     },
-    "login-en:color-contrast": {
-      "impact": "serious",
-      "description": "Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds",
-      "count": 4
-    },
     "login-en:region": {
       "impact": "moderate",
       "description": "Ensure all page content is contained by landmarks",
@@ -81,31 +41,16 @@
       "description": "Ensure all skip links have a focusable target",
       "count": 1
     },
-    "home-ar:color-contrast": {
-      "impact": "serious",
-      "description": "Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds",
-      "count": 9
-    },
     "home-ar:heading-order": {
       "impact": "moderate",
       "description": "Ensure the order of headings is semantically correct",
       "count": 1
     },
-    "image-resize-ar:color-contrast": {
-      "impact": "serious",
-      "description": "Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds",
-      "count": 1
-    },
     "editor-ar:aria-required-children": {
       "impact": "critical",
       "description": "Ensure elements with an ARIA role that require child roles contain them",
       "count": 1
     },
-    "editor-ar:color-contrast": {
-      "impact": "serious",
-      "description": "Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds",
-      "count": 2
-    },
     "editor-ar:label": {
       "impact": "critical",
       "description": "Ensure every form element has a label",
@@ -126,11 +71,6 @@
       "description": "Ensure all skip links have a focusable target",
       "count": 1
     },
-    "login-ar:color-contrast": {
-      "impact": "serious",
-      "description": "Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds",
-      "count": 2
-    },
     "login-ar:region": {
       "impact": "moderate",
       "description": "Ensure all page content is contained by landmarks",
@@ -141,66 +81,11 @@
       "description": "Ensure all skip links have a focusable target",
       "count": 1
     },
-    "mobile-home-en:color-contrast": {
-      "impact": "serious",
-      "description": "Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds",
-      "count": 7
-    },
     "mobile-home-en:heading-order": {
       "impact": "moderate",
       "description": "Ensure the order of headings is semantically correct",
       "count": 1
     },
-    "mobile-image-resize-en:color-contrast": {
-      "impact": "serious",
-      "description": "Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds",
-      "count": 2
-    },
-    "mobile-image-resize-en:link-name": {
-      "impact": "serious",
-      "description": "Ensure links have discernible text",
-      "count": 1
-    },
-    "mobile-video-convert-en:color-contrast": {
-      "impact": "serious",
-      "description": "Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds",
-      "count": 2
-    },
-    "mobile-video-convert-en:link-name": {
-      "impact": "serious",
-      "description": "Ensure links have discernible text",
-      "count": 1
-    },
-    "mobile-audio-convert-en:color-contrast": {
-      "impact": "serious",
-      "description": "Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds",
-      "count": 2
-    },
-    "mobile-audio-convert-en:link-name": {
-      "impact": "serious",
-      "description": "Ensure links have discernible text",
-      "count": 1
-    },
-    "mobile-document-pdf-to-image-en:color-contrast": {
-      "impact": "serious",
-      "description": "Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds",
-      "count": 2
-    },
-    "mobile-document-pdf-to-image-en:link-name": {
-      "impact": "serious",
-      "description": "Ensure links have discernible text",
-      "count": 1
-    },
-    "mobile-data-csv-excel-en:color-contrast": {
-      "impact": "serious",
-      "description": "Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds",
-      "count": 2
-    },
-    "mobile-data-csv-excel-en:link-name": {
-      "impact": "serious",
-      "description": "Ensure links have discernible text",
-      "count": 1
-    },
     "mobile-editor-en:page-has-heading-one": {
       "impact": "moderate",
       "description": "Ensure that the page, or at least one of its frames contains a level-one heading",
@@ -216,11 +101,6 @@
       "description": "Ensure all skip links have a focusable target",
       "count": 1
     },
-    "mobile-login-en:color-contrast": {
-      "impact": "serious",
-      "description": "Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds",
-      "count": 1
-    },
     "mobile-login-en:region": {
       "impact": "moderate",
       "description": "Ensure all page content is contained by landmarks",
@@ -231,31 +111,11 @@
       "description": "Ensure all skip links have a focusable target",
       "count": 1
     },
-    "mobile-home-ar:color-contrast": {
-      "impact": "serious",
-      "description": "Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds",
-      "count": 8
-    },
     "mobile-home-ar:heading-order": {
       "impact": "moderate",
       "description": "Ensure the order of headings is semantically correct",
       "count": 1
     },
-    "mobile-image-resize-ar:color-contrast": {
-      "impact": "serious",
-      "description": "Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds",
-      "count": 1
-    },
-    "mobile-image-resize-ar:link-name": {
-      "impact": "serious",
-      "description": "Ensure links have discernible text",
-      "count": 1
-    },
-    "mobile-login-ar:color-contrast": {
-      "impact": "serious",
-      "description": "Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds",
-      "count": 1
-    },
     "mobile-login-ar:region": {
       "impact": "moderate",
       "description": "Ensure all page content is contained by landmarks",
diff --git a/tests/e2e/a11y.spec.ts b/tests/e2e/a11y.spec.ts
index 23ddb59d..874e2d84 100644
--- a/tests/e2e/a11y.spec.ts
+++ b/tests/e2e/a11y.spec.ts
@@ -38,7 +38,7 @@ interface ViolationEntry {
   id: string;
   impact: string | undefined;
   description: string;
-  nodes: { length: number }[];
+  nodes: { target?: unknown[]; failureSummary?: string }[];
 }
 
 function buildKey(pageKey: string, ruleId: string): string {
@@ -53,8 +53,20 @@ async function auditPage(
   page: import("@playwright/test").Page,
   pageKey: string,
   baseline: BaselineFile,
-  newViolations: { key: string; impact: string; description: string; count: number }[],
-  allViolations: { key: string; impact: string; description: string; count: number }[],
+  newViolations: {
+    key: string;
+    impact: string;
+    description: string;
+    count: number;
+    targets: string[];
+  }[],
+  allViolations: {
+    key: string;
+    impact: string;
+    description: string;
+    count: number;
+    targets: string[];
+  }[],
 ) {
   const results = await new AxeBuilder({ page })
     .withTags(["wcag2a", "wcag2aa", "best-practice"])
@@ -67,6 +79,7 @@ async function auditPage(
       impact: v.impact ?? "unknown",
       description: v.description,
       count: v.nodes.length,
+      targets: v.nodes.map((n) => (n.target ?? []).join(" ")),
     };
     allViolations.push(entry);
 
@@ -84,8 +97,8 @@ const PAGES_EN = [
   { key: "image-resize-en", path: "/image/resize", needsAuth: true },
   { key: "video-convert-en", path: "/video/convert-video", needsAuth: true },
   { key: "audio-convert-en", path: "/audio/convert-audio", needsAuth: true },
-  { key: "document-pdf-to-image-en", path: "/document/pdf-to-image", needsAuth: true },
-  { key: "data-csv-excel-en", path: "/data/csv-excel", needsAuth: true },
+  { key: "pdf-pdf-to-image-en", path: "/pdf/pdf-to-image", needsAuth: true },
+  { key: "files-csv-excel-en", path: "/files/csv-excel", needsAuth: true },
   { key: "editor-en", path: "/editor", needsAuth: true },
   { key: "login-en", path: "/login", needsAuth: false },
 ];
@@ -167,7 +180,12 @@ test.describe("Axe a11y audit -- desktop EN", () => {
       newCriticalSerious,
       `${newCriticalSerious.length} NEW critical/serious a11y violation(s) found. ` +
         `Run with A11Y_UPDATE_BASELINE=1 to baseline after review.\n` +
-        newCriticalSerious.map((v) => `  ${v.key} [${v.impact}]: ${v.description}`).join("\n"),
+        newCriticalSerious
+          .map(
+            (v) =>
+              `  ${v.key} [${v.impact}]: ${v.description}\n${v.targets.map((t) => `    - ${t}`).join("\n")}`,
+          )
+          .join("\n"),
     ).toHaveLength(0);
   });
 });
@@ -248,7 +266,12 @@ test.describe("Axe a11y audit -- desktop AR (RTL)", () => {
     expect(
       newCriticalSerious,
       `${newCriticalSerious.length} NEW critical/serious a11y violation(s) in AR locale.\n` +
-        newCriticalSerious.map((v) => `  ${v.key} [${v.impact}]: ${v.description}`).join("\n"),
+        newCriticalSerious
+          .map(
+            (v) =>
+              `  ${v.key} [${v.impact}]: ${v.description}\n${v.targets.map((t) => `    - ${t}`).join("\n")}`,
+          )
+          .join("\n"),
     ).toHaveLength(0);
   });
 });
diff --git a/tests/e2e/device-a11y.spec.ts b/tests/e2e/device-a11y.spec.ts
index 58e78ec0..1e772fc5 100644
--- a/tests/e2e/device-a11y.spec.ts
+++ b/tests/e2e/device-a11y.spec.ts
@@ -37,7 +37,7 @@ interface ViolationEntry {
   id: string;
   impact: string | undefined;
   description: string;
-  nodes: { length: number }[];
+  nodes: { target?: unknown[]; failureSummary?: string }[];
 }
 
 function buildKey(pageKey: string, ruleId: string): string {
@@ -48,8 +48,20 @@ async function auditPage(
   page: import("@playwright/test").Page,
   pageKey: string,
   baseline: BaselineFile,
-  newViolations: { key: string; impact: string; description: string; count: number }[],
-  allViolations: { key: string; impact: string; description: string; count: number }[],
+  newViolations: {
+    key: string;
+    impact: string;
+    description: string;
+    count: number;
+    targets: string[];
+  }[],
+  allViolations: {
+    key: string;
+    impact: string;
+    description: string;
+    count: number;
+    targets: string[];
+  }[],
 ) {
   const results = await new AxeBuilder({ page })
     .withTags(["wcag2a", "wcag2aa", "best-practice"])
@@ -62,6 +74,7 @@ async function auditPage(
       impact: v.impact ?? "unknown",
       description: v.description,
       count: v.nodes.length,
+      targets: v.nodes.map((n) => (n.target ?? []).join(" ")),
     };
     allViolations.push(entry);
 
@@ -78,8 +91,8 @@ const PAGES_MOBILE_EN = [
   { key: "mobile-image-resize-en", path: "/image/resize", needsAuth: true },
   { key: "mobile-video-convert-en", path: "/video/convert-video", needsAuth: true },
   { key: "mobile-audio-convert-en", path: "/audio/convert-audio", needsAuth: true },
-  { key: "mobile-document-pdf-to-image-en", path: "/document/pdf-to-image", needsAuth: true },
-  { key: "mobile-data-csv-excel-en", path: "/data/csv-excel", needsAuth: true },
+  { key: "mobile-pdf-pdf-to-image-en", path: "/pdf/pdf-to-image", needsAuth: true },
+  { key: "mobile-files-csv-excel-en", path: "/files/csv-excel", needsAuth: true },
   { key: "mobile-editor-en", path: "/editor", needsAuth: true },
   { key: "mobile-login-en", path: "/login", needsAuth: false },
 ];
@@ -99,8 +112,20 @@ test.describe("@mobile Axe a11y audit -- mobile EN", () => {
     browser,
   }) => {
     const baseline = loadBaseline();
-    const newViolations: { key: string; impact: string; description: string; count: number }[] = [];
-    const allViolations: { key: string; impact: string; description: string; count: number }[] = [];
+    const newViolations: {
+      key: string;
+      impact: string;
+      description: string;
+      count: number;
+      targets: string[];
+    }[] = [];
+    const allViolations: {
+      key: string;
+      impact: string;
+      description: string;
+      count: number;
+      targets: string[];
+    }[] = [];
 
     for (const p of PAGES_MOBILE_EN) {
       if (p.needsAuth) {
@@ -153,7 +178,12 @@ test.describe("@mobile Axe a11y audit -- mobile EN", () => {
     expect(
       newCriticalSerious,
       `${newCriticalSerious.length} NEW critical/serious a11y violation(s) on mobile.\n` +
-        newCriticalSerious.map((v) => `  ${v.key} [${v.impact}]: ${v.description}`).join("\n"),
+        newCriticalSerious
+          .map(
+            (v) =>
+              `  ${v.key} [${v.impact}]: ${v.description}\n${v.targets.map((t) => `    - ${t}`).join("\n")}`,
+          )
+          .join("\n"),
     ).toHaveLength(0);
   });
 });
@@ -165,8 +195,20 @@ test.describe("@mobile Axe a11y audit -- mobile AR (RTL)", () => {
     browser,
   }) => {
     const baseline = loadBaseline();
-    const newViolations: { key: string; impact: string; description: string; count: number }[] = [];
-    const allViolations: { key: string; impact: string; description: string; count: number }[] = [];
+    const newViolations: {
+      key: string;
+      impact: string;
+      description: string;
+      count: number;
+      targets: string[];
+    }[] = [];
+    const allViolations: {
+      key: string;
+      impact: string;
+      description: string;
+      count: number;
+      targets: string[];
+    }[] = [];
 
     for (const p of PAGES_MOBILE_AR) {
       if (p.needsAuth) {
@@ -223,7 +265,12 @@ test.describe("@mobile Axe a11y audit -- mobile AR (RTL)", () => {
     expect(
       newCriticalSerious,
       `${newCriticalSerious.length} NEW critical/serious a11y violation(s) on mobile AR.\n` +
-        newCriticalSerious.map((v) => `  ${v.key} [${v.impact}]: ${v.description}`).join("\n"),
+        newCriticalSerious
+          .map(
+            (v) =>
+              `  ${v.key} [${v.impact}]: ${v.description}\n${v.targets.map((t) => `    - ${t}`).join("\n")}`,
+          )
+          .join("\n"),
     ).toHaveLength(0);
   });
 });
diff --git a/tests/e2e/gui-accessibility.spec.ts b/tests/e2e/gui-accessibility.spec.ts
index 0acd4240..2132a04c 100644
--- a/tests/e2e/gui-accessibility.spec.ts
+++ b/tests/e2e/gui-accessibility.spec.ts
@@ -811,13 +811,6 @@ test.describe("Color Contrast", () => {
     }
   });
 
-  // NOTE: the contrast checks below are deferred via test.fixme, not deleted.
-  // They surface a genuine finding: the Otter Orange brand (--color-primary
-  // #E07832) gives ~3.04:1 for white button text and ~2.91:1 for orange text
-  // on the off-white background, below WCAG AA (4.5:1 normal / 3:1 large). This
-  // needs a product/brand decision (darken the accent for text, or scope these
-  // checks to non-brand elements) rather than a silent test edit. Un-fixme once
-  // the palette decision lands.
   test("button text meets WCAG AA contrast ratio (4.5:1 for normal text)", async ({
     loggedInPage: page,
   }) => {
diff --git a/tests/qa/multifile.qa.spec.ts b/tests/qa/multifile.qa.spec.ts
index 03aca9e0..99c288fb 100644
--- a/tests/qa/multifile.qa.spec.ts
+++ b/tests/qa/multifile.qa.spec.ts
@@ -238,7 +238,7 @@ test.describe("A) Multi-input tools", () => {
       // Since merge-audio requires 2+ inputs, each individual file fails, yielding
       // "All files failed processing". This confirms the batch-instead-of-merge bug.
       const errorText = await page
-        .locator("[role='alert'], .text-red-500")
+        .locator("[role='alert'], .text-destructive-ink, .text-red-500")
         .first()
         .innerText()
         .catch(() => "no error visible");
@@ -319,7 +319,7 @@ test.describe("A) Multi-input tools", () => {
       // Same bug as merge-audio: processAllFiles sends each file individually,
       // merge-csvs needs 2+ files, so each individual file fails.
       const errorText = await page
-        .locator("[role='alert'], .text-red-500")
+        .locator("[role='alert'], .text-destructive-ink, .text-red-500")
         .first()
         .innerText()
         .catch(() => "no error visible");
@@ -561,7 +561,7 @@ test.describe("A) Multi-input tools", () => {
         ).toBe(inputFiles.length);
       } else {
         const errorText = await page
-          .locator("[role='alert'], .text-red-500")
+          .locator("[role='alert'], .text-destructive-ink, .text-red-500")
           .first()
           .innerText()
           .catch(() => "no error visible");
@@ -771,7 +771,7 @@ test.describe("C) Edge cases", () => {
     let gotDownload = false;
     while (Date.now() < deadline) {
       const errorRegion = page
-        .locator("[role='alert'], [aria-live='assertive'], .text-red-500")
+        .locator("[role='alert'], [aria-live='assertive'], .text-destructive-ink, .text-red-500")
         .filter({ hasText: /error|failed|too many|maximum|limit|exceeded|invalid/i })
         .first();
       if (await errorRegion.isVisible().catch(() => false)) {
diff --git a/tests/qa/output-preview.qa.spec.ts b/tests/qa/output-preview.qa.spec.ts
index 28202adf..e32491f4 100644
--- a/tests/qa/output-preview.qa.spec.ts
+++ b/tests/qa/output-preview.qa.spec.ts
@@ -398,7 +398,9 @@ test.describe("1: Modality-crossing output previews", () => {
         }
       }
       // Check for error
-      const errorMsg = page.locator(".text-destructive, .text-red-500").first();
+      const errorMsg = page
+        .locator(".text-destructive, .text-destructive-ink, .text-red-500")
+        .first();
       if (await errorMsg.isVisible().catch(() => false)) {
         errorFound = true;
         break;
diff --git a/tests/qa/pipeline-ui.qa.spec.ts b/tests/qa/pipeline-ui.qa.spec.ts
index 8d6d253b..cbab957e 100644
--- a/tests/qa/pipeline-ui.qa.spec.ts
+++ b/tests/qa/pipeline-ui.qa.spec.ts
@@ -127,7 +127,7 @@ test.describe("Pipeline Builder UI", () => {
 
     if (!hasPreview) {
       // Also check for error
-      const errorEl = page.locator(".text-red-500").first();
+      const errorEl = page.locator(".text-destructive-ink, .text-red-500").first();
       const errorText = await errorEl.textContent().catch(() => null);
       if (errorText) {
         console.log(`Pipeline UI error displayed: ${errorText}`);
diff --git a/tests/qa/settings-extended.qa.spec.ts b/tests/qa/settings-extended.qa.spec.ts
index c7b07dcc..c92be3d4 100644
--- a/tests/qa/settings-extended.qa.spec.ts
+++ b/tests/qa/settings-extended.qa.spec.ts
@@ -1490,7 +1490,7 @@ test.describe("FILE: csv-excel", () => {
     const issues = instrument(page);
     await setupTool(page, "csv-excel", CSV);
     // Process but check for inline errors too (the csv-excel tool surfaces
-    // errors in a <p class="text-red-500"> that waitForResult doesn't catch).
+    // errors in a <p class="text-destructive-ink"> that waitForResult doesn't catch).
     const submit = page.getByTestId("csv-excel-submit");
     await submit.first().click();
     // Wait up to 60s for either download button or an inline error
@@ -1498,7 +1498,7 @@ test.describe("FILE: csv-excel", () => {
     let gotResult = false;
     let inlineError = "";
     while (Date.now() < deadline) {
-      const errEl = page.locator(".text-red-500").first();
+      const errEl = page.locator(".text-destructive-ink, .text-red-500").first();
       if (await errEl.isVisible().catch(() => false)) {
         inlineError = await errEl.innerText().catch(() => "unknown error");
         gotResult = true;
diff --git a/tests/unit/palette-contrast.test.ts b/tests/unit/palette-contrast.test.ts
new file mode 100644
index 00000000..9b20c71a
--- /dev/null
+++ b/tests/unit/palette-contrast.test.ts
@@ -0,0 +1,148 @@
+import fs from "node:fs";
+import path from "node:path";
+import { describe, expect, it } from "vitest";
+
+/**
+ * Guards the Otter Orange palette against WCAG AA drift (issue #557).
+ * Parses the design tokens straight out of the two globals.css files and
+ * recomputes contrast with the same math axe-core uses, so any token edit
+ * that breaks AA fails unit tests on the PR, not a nightly axe run.
+ */
+
+const WEB_CSS = fs.readFileSync(
+  path.resolve(__dirname, "../../apps/web/src/styles/globals.css"),
+  "utf-8",
+);
+const LANDING_CSS = fs.readFileSync(
+  path.resolve(__dirname, "../../apps/landing/src/styles/globals.css"),
+  "utf-8",
+);
+
+function tokensIn(block: string): Record<string, string> {
+  const out: Record<string, string> = {};
+  for (const m of block.matchAll(/--color-([a-z0-9-]+):\s*(#[0-9a-fA-F]{6})/g)) {
+    out[m[1]] = m[2].toUpperCase();
+  }
+  return out;
+}
+
+function extractBlock(css: string, opener: RegExp): string {
+  const start = css.search(opener);
+  if (start === -1) return "";
+  const open = css.indexOf("{", start);
+  let depth = 0;
+  for (let i = open; i < css.length; i++) {
+    if (css[i] === "{") depth++;
+    if (css[i] === "}") {
+      depth--;
+      if (depth === 0) return css.slice(open + 1, i);
+    }
+  }
+  return "";
+}
+
+const webLight = tokensIn(extractBlock(WEB_CSS, /@theme/));
+const webDark = { ...webLight, ...tokensIn(extractBlock(WEB_CSS, /\.dark\s*\{/)) };
+const landing = tokensIn(LANDING_CSS);
+
+function luminance(hex: string): number {
+  const [r, g, b] = [1, 3, 5].map((i) => Number.parseInt(hex.slice(i, i + 2), 16) / 255);
+  const f = (c: number) => (c <= 0.04045 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4);
+  return 0.2126 * f(r) + 0.7152 * f(g) + 0.0722 * f(b);
+}
+
+function ratio(fg: string, bg: string): number {
+  const [hi, lo] = [luminance(fg), luminance(bg)].sort((a, b) => b - a);
+  return (hi + 0.05) / (lo + 0.05);
+}
+
+function expectPair(tokens: Record<string, string>, fg: string, bg: string, min = 4.5) {
+  expect(tokens[fg], `token --color-${fg} must be defined`).toBeDefined();
+  expect(tokens[bg], `token --color-${bg} must be defined`).toBeDefined();
+  const r = ratio(tokens[fg], tokens[bg]);
+  expect(
+    r,
+    `--color-${fg} (${tokens[fg]}) on --color-${bg} (${tokens[bg]}) is ${r.toFixed(2)}:1, needs >= ${min}:1`,
+  ).toBeGreaterThanOrEqual(min);
+}
+
+describe("web light theme", () => {
+  it("defines the label tokens the app uses", () => {
+    for (const t of [
+      "primary-foreground",
+      "destructive-foreground",
+      "success-foreground",
+      "accent-foreground",
+    ]) {
+      expect(
+        webLight[t],
+        `--color-${t} must be defined (undefined utilities render no CSS)`,
+      ).toBeDefined();
+    }
+  });
+
+  it("labels pass AA on their fills", () => {
+    expectPair(webLight, "primary-foreground", "primary");
+    expectPair(webLight, "primary-foreground", "primary-light");
+    expectPair(webLight, "destructive-foreground", "destructive");
+    expectPair(webLight, "success-foreground", "success");
+    expectPair(webLight, "accent-foreground", "accent");
+  });
+
+  it("ink text passes AA on every light surface", () => {
+    for (const bg of ["background", "card", "primary-subtle", "muted"]) {
+      expectPair(webLight, "primary-ink", bg);
+    }
+    expectPair(webLight, "primary-ink-strong", "background");
+    for (const bg of ["background", "card"]) {
+      expectPair(webLight, "destructive-ink", bg);
+      expectPair(webLight, "success-ink", bg);
+    }
+  });
+
+  it("neutral text passes AA", () => {
+    expectPair(webLight, "foreground", "background");
+    expectPair(webLight, "muted-foreground", "background");
+    expectPair(webLight, "muted-foreground", "card");
+    expectPair(webLight, "muted-foreground", "muted");
+    expectPair(webLight, "sidebar-foreground", "sidebar");
+  });
+});
+
+describe("web dark theme", () => {
+  it("labels still pass on fills (theme-static)", () => {
+    expectPair(webDark, "primary-foreground", "primary");
+    expectPair(webDark, "destructive-foreground", "destructive");
+    expectPair(webDark, "success-foreground", "success");
+  });
+
+  it("ink text passes AA on dark surfaces", () => {
+    for (const bg of ["background", "card"]) {
+      expectPair(webDark, "primary-ink", bg);
+      expectPair(webDark, "destructive-ink", bg);
+      expectPair(webDark, "success-ink", bg);
+      expectPair(webDark, "muted-foreground", bg);
+    }
+    expectPair(webDark, "foreground", "background");
+  });
+});
+
+describe("landing", () => {
+  it("ink text passes AA on light surfaces", () => {
+    for (const bg of ["background", "surface", "background-alt", "primary-subtle"]) {
+      expectPair(landing, "primary-ink", bg);
+    }
+    expectPair(landing, "primary-ink-strong", "background");
+  });
+
+  it("CTA label passes on both gradient ends", () => {
+    expectPair(landing, "foreground", "primary");
+    expectPair(landing, "foreground", "primary-light");
+  });
+
+  it("semantic and muted text pass", () => {
+    expectPair(landing, "success", "background");
+    expectPair(landing, "muted", "background");
+    expectPair(landing, "dark-fg", "dark-bg");
+  });
+});