refactor: tailwind tier 1 — border-subtle/text-secondary/focus-ring utilities + Input config extraction

src/app/styles/app.css

@@ -265,6 +265,21 @@
   }
 }
 
+@layer utilities {
+  /* 21× border-black/5 dark:border-white/10 → single token */
+  .border-subtle {
+    @apply border-black/5 dark:border-white/10;
+  }
+  /* Secondary text pair */
+  .text-secondary {
+    @apply text-neutral-500 dark:text-neutral-400;
+  }
+  /* Standard focus ring */
+  .focus-ring {
+    @apply focus-visible:ring-2 focus-visible:ring-brand focus-visible:ring-offset-2;
+  }
+}
+
 /* Global utility - useful across your app */
 @media (prefers-reduced-motion: reduce) {
     * {

src/entities/Breadcrumb/ui/BreadcrumbHeader/BreadcrumbHeader.svelte

@@ -44,7 +44,7 @@ function createButtonText(item: BreadcrumbItem) {
             flex items-center justify-between
             z-40
             bg-surface/90 dark:bg-dark-bg/90 backdrop-blur-md
-            border-b border-black/5 dark:border-white/10
+            border-b border-subtle
         "
     >
         <div class="max-w-8xl px-4 sm:px-6 h-full w-full flex items-center justify-between gap-2 sm:gap-4">

src/features/DisplayFont/ui/FontSampler/FontSampler.svelte

@@ -59,7 +59,7 @@ const stats = $derived([
         group relative
         w-full h-full
         bg-paper dark:bg-dark-card
-        border border-black/5 dark:border-white/10
+        border border-subtle
         hover:border-brand dark:hover:border-brand
         hover:shadow-brand/10
         hover:shadow-[5px_5px_0px_0px]
@@ -76,7 +76,7 @@ const stats = $derived([
         class="
             flex items-center justify-between
             px-4 sm:px-5 md:px-6 py-3 sm:py-4
-            border-b border-black/5 dark:border-white/10
+            border-b border-subtle
             bg-paper dark:bg-dark-card
         "
     >
@@ -145,7 +145,7 @@ const stats = $derived([
     </div>
 
     <!-- ── Mobile stats footer (md:hidden — header stats take over above) -->
-    <div class="md:hidden px-4 sm:px-5 py-1.5 sm:py-2 border-t border-black/5 dark:border-white/10 flex gap-2 sm:gap-4 bg-paper dark:bg-dark-card mt-auto">
+    <div class="md:hidden px-4 sm:px-5 py-1.5 sm:py-2 border-t border-subtle flex gap-2 sm:gap-4 bg-paper dark:bg-dark-card mt-auto">
         {#each stats as stat, i}
             <Footnote class="text-[0.4375rem] sm:text-[0.5rem] tracking-wider {i === 0 ? 'ml-auto' : ''}">
                 {stat.label}:{stat.value}

src/features/SetupFont/ui/TypographyMenu/TypographyMenu.svelte

@@ -79,7 +79,7 @@ $effect(() => {
                             'transition-colors duration-150',
                             'hover:bg-white/50 dark:hover:bg-white/5',
                             'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand/30',
-                            isOpen && 'bg-paper dark:bg-dark-card border-black/5 dark:border-white/10 shadow-sm',
+                            isOpen && 'bg-paper dark:bg-dark-card border-subtle shadow-sm',
                             className,
                         )}
                     >
@@ -96,7 +96,7 @@ $effect(() => {
                     class={cn(
                         'z-50 w-72',
                         'bg-surface dark:bg-dark-card',
-                        'border border-black/5 dark:border-white/10',
+                        'border border-subtle',
                         'shadow-[0_20px_40px_-10px_rgba(0,0,0,0.15)]',
                         'rounded-none p-4',
                         'data-[state=open]:animate-in data-[state=closed]:animate-out',
@@ -109,7 +109,7 @@ $effect(() => {
                     escapeKeydownBehavior="close"
                 >
                     <!-- Header -->
-                    <div class="flex items-center justify-between mb-3 pb-3 border-b border-black/5 dark:border-white/10">
+                    <div class="flex items-center justify-between mb-3 pb-3 border-b border-subtle">
                         <div class="flex items-center gap-1.5">
                             <Settings2Icon size={12} class="text-swiss-red" />
                             <span
@@ -154,13 +154,13 @@ $effect(() => {
                 class={cn(
                     'flex items-center gap-1 md:gap-2 p-1.5 md:p-2',
                     'bg-surface/95 dark:bg-dark-bg/95 backdrop-blur-xl',
-                    'border border-black/5 dark:border-white/10',
+                    'border border-subtle',
                     'shadow-[0_20px_40px_-10px_rgba(0,0,0,0.1)]',
                     'rounded-none ring-1 ring-black/5 dark:ring-white/5',
                 )}
             >
                 <!-- Header: icon + label -->
-                <div class="px-2 md:px-3 flex items-center gap-1.5 md:gap-2 border-r border-black/5 dark:border-white/10 mr-1 text-swiss-black dark:text-neutral-200 shrink-0">
+                <div class="px-2 md:px-3 flex items-center gap-1.5 md:gap-2 border-r border-subtle mr-1 text-swiss-black dark:text-neutral-200 shrink-0">
                     <Settings2Icon
                         size={14}
                         class="text-swiss-red"

src/shared/ui/Button/Button.svelte

@@ -111,7 +111,7 @@ const variantStyles: Record<ButtonVariant, string> = {
     ),
     ghost: cn(
         'bg-transparent',
-        'text-neutral-500 dark:text-neutral-400',
+        'text-secondary',
         'border border-transparent',
         'hover:bg-transparent dark:hover:bg-transparent',
         'hover:text-brand dark:hover:text-brand',
@@ -121,7 +121,7 @@ const variantStyles: Record<ButtonVariant, string> = {
     ),
     icon: cn(
         'bg-surface dark:bg-dark-bg',
-        'text-neutral-500 dark:text-neutral-400',
+        'text-secondary',
         'border border-transparent',
         'hover:bg-paper dark:hover:bg-paper',
         'hover:text-brand',
@@ -172,7 +172,7 @@ const activeStyles: Partial<Record<ButtonVariant, string>> = {
         'bg-paper dark:bg-dark-card border-black/10 dark:border-white/10 shadow-sm text-neutral-900 dark:text-neutral-100',
     ghost: 'bg-transparent dark:bg-transparent text-brand dark:text-brand',
     outline: 'bg-surface dark:bg-paper border-brand',
-    icon: 'bg-paper dark:bg-paper text-brand border-black/5 dark:border-white/10',
+    icon: 'bg-paper dark:bg-paper text-brand border-subtle',
 };
 
 const classes = $derived(cn(
@@ -184,7 +184,7 @@ const classes = $derived(cn(
     'select-none',
     'outline-none',
     'cursor-pointer',
-    'focus-visible:ring-2 focus-visible:ring-brand focus-visible:ring-offset-2',
+    'focus-ring',
     'focus-visible:ring-offset-surface dark:focus-visible:ring-offset-dark-bg',
     'disabled:cursor-not-allowed disabled:pointer-events-none',
     // Variant

src/shared/ui/Button/ButtonGroup.svelte

@@ -26,7 +26,7 @@ let { children, class: className, ...rest }: Props = $props();
     class={cn(
         'flex items-center gap-1 p-1',
         'bg-surface dark:bg-dark-bg',
-        'border border-black/5 dark:border-white/10',
+        'border border-subtle',
         'rounded-none',
         'transition-colors duration-500',
         className,

src/shared/ui/ComboControl/ComboControl.svelte

@@ -93,9 +93,7 @@ const displayLabel = $derived(label ?? controlLabel ?? '');
             step={control.step}
             orientation="horizontal"
         />
-        <span
+        <span class="font-mono text-[0.6875rem] text-secondary tabular-nums w-10 text-right shrink-0">
-            class="font-mono text-[0.6875rem] text-neutral-500 dark:text-neutral-400 tabular-nums w-10 text-right shrink-0"
-        >
             {formattedValue()}
         </span>
     </div>
@@ -129,7 +127,7 @@ const displayLabel = $derived(label ?? controlLabel ?? '');
                                 'border border-transparent',
                                 'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand/30',
                                 open
-                                    ? 'bg-paper dark:bg-dark-card shadow-sm border-black/5 dark:border-white/10'
+                                    ? 'bg-paper dark:bg-dark-card shadow-sm border-subtle'
                                     : 'hover:bg-paper/50 dark:hover:bg-dark-card/50',
                             )}
                             aria-label={controlLabel}
@@ -157,7 +155,7 @@ const displayLabel = $derived(label ?? controlLabel ?? '');
 
                 <!-- Vertical slider popover -->
                 <PopoverContent
-                    class="w-auto py-4 px-3 h-64 flex items-center justify-center rounded-none border border-black/5 dark:border-white/10 shadow-sm bg-paper dark:bg-dark-card"
+                    class="w-auto py-4 px-3 h-64 flex items-center justify-center rounded-none border border-subtle shadow-sm bg-paper dark:bg-dark-card"
                     align="center"
                     side="top"
                 >

src/shared/ui/ControlGroup/ControlGroup.svelte

@@ -24,7 +24,7 @@ interface Props {
 const { label, children, class: className }: Props = $props();
 </script>
 
-<div class={cn('flex flex-col gap-3 py-6 border-b border-black/5 dark:border-white/10 last:border-0', className)}>
+<div class={cn('flex flex-col gap-3 py-6 border-b border-subtle last:border-0', className)}>
     <div class="flex justify-between items-center text-[0.6875rem] font-primary font-bold tracking-tight text-neutral-900 dark:text-neutral-100 uppercase leading-none">
         {label}
     </div>

src/shared/ui/Input/Input.svelte

@@ -9,6 +9,10 @@ import type { Snippet } from 'svelte';
 import { cubicOut } from 'svelte/easing';
 import type { HTMLInputAttributes } from 'svelte/elements';
 import { scale } from 'svelte/transition';
+import {
+    inputSizeConfig,
+    inputVariantConfig,
+} from './config';
 import type {
     InputSize,
     InputVariant,
@@ -80,36 +84,11 @@ let {
     ...rest
 }: Props = $props();
 
-const sizeConfig: Record<InputSize, { input: string; text: string; height: string; clearIcon: number }> = {
-    sm: { input: 'px-3 py-1.5', text: 'text-sm', height: 'h-8', clearIcon: 12 },
-    md: { input: 'px-4 py-2', text: 'text-base', height: 'h-10', clearIcon: 14 },
-    lg: { input: 'px-4 py-3', text: 'text-lg md:text-xl', height: 'h-12', clearIcon: 16 },
-    xl: { input: 'px-4 py-3', text: 'text-xl md:text-2xl', height: 'h-14', clearIcon: 18 },
-};
-
-const variantConfig: Record<InputVariant, { base: string; focus: string; error: string }> = {
-    default: {
-        base: 'bg-paper dark:bg-paper border border-black/5 dark:border-white/10',
-        focus: 'focus:border-brand focus:ring-1 focus:ring-brand/20',
-        error: 'border-brand ring-1 ring-brand/20',
-    },
-    underline: {
-        base: 'bg-transparent border-0 border-b border-neutral-300 dark:border-neutral-700',
-        focus: 'focus:border-brand',
-        error: 'border-brand',
-    },
-    filled: {
-        base: 'bg-surface dark:bg-paper border border-transparent',
-        focus: 'focus:border-brand focus:ring-1 focus:ring-brand/20',
-        error: 'border-brand ring-1 ring-brand/20',
-    },
-};
-
 const hasValue = $derived(value !== undefined && value !== '');
 const showClear = $derived(showClearButton && hasValue && !!onclear);
 const hasRightSlot = $derived(!!rightIcon || showClearButton);
-const cfg = $derived(sizeConfig[size]);
+const cfg = $derived(inputSizeConfig[size]);
-const styles = $derived(variantConfig[variant]);
+const styles = $derived(inputVariantConfig[variant]);
 
 const inputClasses = $derived(cn(
     'font-primary rounded-none outline-none transition-all duration-200',
@@ -170,7 +149,7 @@ const inputClasses = $derived(cn(
         <span
             class={cn(
                 'text-[0.625rem] font-mono tracking-wide px-1',
-                error ? 'text-brand ' : 'text-neutral-500 dark:text-neutral-400',
+                error ? 'text-brand ' : 'text-secondary',
             )}
         >
             {helperText}

src/shared/ui/Input/config.ts

@@ -0,0 +1,31 @@
+import type {
+    InputSize,
+    InputVariant,
+} from './types';
+
+/** Size-specific layout classes: padding, text size, height, and clear-icon pixel size. */
+export const inputSizeConfig: Record<InputSize, { input: string; text: string; height: string; clearIcon: number }> = {
+    sm: { input: 'px-3 py-1.5', text: 'text-sm', height: 'h-8', clearIcon: 12 },
+    md: { input: 'px-4 py-2', text: 'text-base', height: 'h-10', clearIcon: 14 },
+    lg: { input: 'px-4 py-3', text: 'text-lg md:text-xl', height: 'h-12', clearIcon: 16 },
+    xl: { input: 'px-4 py-3', text: 'text-xl md:text-2xl', height: 'h-14', clearIcon: 18 },
+};
+
+/** Variant-specific classes: base background/border, focus ring, and error state. */
+export const inputVariantConfig: Record<InputVariant, { base: string; focus: string; error: string }> = {
+    default: {
+        base: 'bg-paper dark:bg-paper border border-subtle',
+        focus: 'focus:border-brand focus:ring-1 focus:ring-brand/20',
+        error: 'border-brand ring-1 ring-brand/20',
+    },
+    underline: {
+        base: 'bg-transparent border-0 border-b border-neutral-300 dark:border-neutral-700',
+        focus: 'focus:border-brand',
+        error: 'border-brand',
+    },
+    filled: {
+        base: 'bg-surface dark:bg-paper border border-transparent',
+        focus: 'focus:border-brand focus:ring-1 focus:ring-brand/20',
+        error: 'border-brand ring-1 ring-brand/20',
+    },
+};

src/shared/ui/SidebarContainer/SidebarContainer.svelte

@@ -84,7 +84,7 @@ function close() {
             'overflow-hidden',
             'will-change-[width]',
             'transition-[width] duration-300 ease-out',
-            'border-r border-black/5 dark:border-white/10',
+            'border-r border-subtle',
             'bg-surface dark:bg-dark-bg',
             isOpen ? 'w-80 opacity-100' : 'w-0 opacity-0',
             'transition-[width,opacity] duration-300 ease-out',

src/shared/ui/Slider/Slider.svelte

@@ -70,7 +70,7 @@ let {
 const isVertical = $derived(orientation === 'vertical');
 
 const labelClasses = `font-mono text-[0.625rem] tabular-nums shrink-0
-    text-neutral-500 dark:text-neutral-400
+    text-secondary
     group-hover:text-neutral-700 dark:group-hover:text-neutral-300
     transition-colors`;
 

src/widgets/ComparisonView/ui/FontList/FontList.svelte

@@ -71,7 +71,7 @@ $effect(() => {
 
 <div class="flex-1 min-h-0 h-full">
     <div class="py-2 relative flex flex-col min-h-0 h-full">
-        <div class="py-2 mx-6 sticky border-b border-black/5 dark:border-white/10">
+        <div class="py-2 mx-6 sticky border-b border-subtle">
             <Label class="font-primary text-neutral-400" bold variant="default" size="sm" uppercase>
                 Typeface Selection
             </Label>

src/widgets/ComparisonView/ui/Header/Header.svelte

@@ -53,7 +53,7 @@ const fontBName = $derived(comparisonStore.fontB?.name ?? '');
         'flex items-center justify-between',
         'px-4 md:px-8 py-4 md:py-6',
         'h-16 md:h-20 z-20',
-        'border-b border-black/5 dark:border-white/10',
+        'border-b border-subtle',
         'bg-surface dark:bg-dark-bg',
         className,
     )}

src/widgets/ComparisonView/ui/Sidebar/Sidebar.svelte

@@ -44,7 +44,7 @@ let {
         'flex flex-col h-full',
         'w-80',
         'bg-surface dark:bg-dark-bg',
-        'border-r border-black/5 dark:border-white/10',
+        'border-r border-subtle',
         'transition-colors duration-500',
         className,
     )}
@@ -53,7 +53,7 @@ let {
     <div
         class="
             p-6 shrink-0
-            border-b border-black/5 dark:border-white/10
+            border-b border-subtle
             bg-surface dark:bg-dark-bg
         "
     >
@@ -100,7 +100,7 @@ let {
             class="
                 shrink-0 p-6
                 bg-surface dark:bg-dark-bg
-                border-t border-black/5 dark:border-white/10
+                border-t border-subtle
                 z-10
             "
         >