src/app/styles/app.css

@@ -16,7 +16,7 @@
 
   /* Semantic mode-switching colors. These are redefined inside `.dark`
      so utilities that reference them auto-adapt without a `dark:` variant. */
-  --color-border-subtle: rgb(0 0 0 / 0.05);
+  --color-border-subtle: var(--neutral-300);
   --color-text-subtle: var(--neutral-500);
   --color-skeleton: var(--neutral-200);
 
@@ -336,6 +336,13 @@
   border-color: var(--color-border-subtle);
 }
 
+/* Same color as border-subtle, applied via background-color — for 1px
+   dividers, inline separator strips, and other hairlines that aren't
+   element borders. */
+@utility bg-subtle {
+  background-color: var(--color-border-subtle);
+}
+
 /* Muted text color — paired with `border-subtle` naming. The previous
    name `text-secondary` collided with Tailwind v4 auto-generating a
    utility from `--color-secondary` (the shadcn near-white surface token

src/features/AdjustTypography/ui/TypographyMenu/TypographyMenu.svelte

@@ -168,7 +168,7 @@ $effect(() => {
                 <!-- Controls with dividers between each -->
                 {#each typographySettingsStore.controls as control, i (control.id)}
                     {#if i > 0}
-                        <div class="w-px h-6 md:h-8 bg-black/5 dark:bg-white/10 mx-0.5 md:mx-1 shrink-0"></div>
+                        <div class="w-px h-6 md:h-8 bg-subtle mx-0.5 md:mx-1 shrink-0"></div>
                     {/if}
 
                     <ComboControl

src/shared/ui/Button/Button.svelte

@@ -143,9 +143,11 @@ const variantStyles: Record<ButtonVariant, string> = {
     tertiary: cn(
         // Font override — must come after base in cn() to win via tailwind-merge
         'font-secondary font-medium normal-case tracking-normal',
-        // Inactive state
+        // Inactive state — bumped in light mode for readable contrast against
+        // bg-surface (~7.5:1 vs. the prior ~2.7:1 with neutral-400). Dark
+        // unchanged because the existing tone reads well on dark-bg.
         'bg-transparent',
-        'text-neutral-400 dark:text-neutral-400',
+        'text-neutral-600 dark:text-neutral-400',
         'border border-transparent',
         // Hover (inactive) — semi-transparent lift, no bg-paper token
         'hover:bg-paper/50 dark:hover:bg-dark-card/50',

src/shared/ui/Divider/Divider.svelte

@@ -25,7 +25,7 @@ let {
 
 <div
     class={cn(
-        'bg-black/10 dark:bg-white/10',
+        'bg-subtle',
         orientation === 'horizontal' ? 'w-full h-px' : 'w-px h-full',
         className,
     )}

src/shared/ui/Label/config.ts

@@ -25,7 +25,9 @@ export const labelSizeConfig: Record<LabelSize, string> = {
 export const labelVariantConfig: Record<LabelVariant, string> = {
     default: 'text-neutral-900 dark:text-neutral-100',
     accent: 'text-brand',
-    muted: 'text-neutral-400 dark:text-neutral-500',
+    /* Light mode bumped from neutral-400 (~2.7:1 contrast, barely visible)
+       to neutral-600 (~7.5:1). Dark mode unchanged. */
+    muted: 'text-neutral-600 dark:text-neutral-500',
     success: 'text-green-600 dark:text-green-400',
     warning: 'text-yellow-600 dark:text-yellow-400',
     error: 'text-brand',

src/shared/ui/Link/Link.svelte

@@ -34,7 +34,7 @@ let {
 <a
     class={cn(
         'group inline-flex items-center gap-1 text-2xs font-mono uppercase tracking-wider-mono',
-        'text-neutral-400 hover:text-brand transition-colors',
+        'text-neutral-500 dark:text-neutral-400 hover:text-brand transition-colors',
         'bg-surface/80 dark:bg-dark-bg/80 backdrop-blur-sm px-2 py-1 pointer-events-auto',
         className,
     )}

src/widgets/ComparisonView/ui/Search/Search.svelte

@@ -9,7 +9,7 @@ import { appliedFilterStore } from '$features/FilterAndSortFonts';
 import { SearchBar } from '$shared/ui';
 </script>
 
-<div class="p-6 border-b border-black/5">
+<div class="p-6 border-b border-subtle">
     <SearchBar
         id="font-search"
         class="w-full"

src/widgets/FontSearch/ui/FontSearch/FontSearch.svelte

@@ -51,8 +51,8 @@ function toggleFilters() {
 }
 </script>
 
-<div class="flex flex-col gap-3 border-b border-t border-swiss-black/5 dark:border-white/10">
+<div class="flex flex-col gap-3 border-b border-t border-subtle">
-    <div class="relative w-full flex flex-col md:flex-row gap-y-4 border-b border-swiss-black/5 dark:border-white/10 py-4 md:py-6">
+    <div class="relative w-full flex flex-col md:flex-row gap-y-4 border-b border-subtle py-4 md:py-6">
         <SearchBar
             id="font-search"
             class="w-full"