diff --git a/src/features/SetupFont/ui/TypographyMenu/TypographyMenu.svelte b/src/features/SetupFont/ui/TypographyMenu/TypographyMenu.svelte
index e81bae3..f49a28a 100644
--- a/src/features/SetupFont/ui/TypographyMenu/TypographyMenu.svelte
+++ b/src/features/SetupFont/ui/TypographyMenu/TypographyMenu.svelte
@@ -80,7 +80,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-white dark:bg-[#1e1e1e] border-black/5 dark:border-white/10 shadow-sm',
+                            isOpen && 'bg-paper dark:bg-dark-card border-black/5 dark:border-white/10 shadow-sm',
                             className,
                         )}
                     >
@@ -96,7 +96,7 @@ $effect(() => {
                     sideOffset={8}
                     class={cn(
                         'z-50 w-72',
-                        'bg-[#f3f0e9] dark:bg-[#1e1e1e]',
+                        'bg-surface dark:bg-dark-card',
                         'border border-black/5 dark:border-white/10',
                         'shadow-[0_20px_40px_-10px_rgba(0,0,0,0.15)]',
                         'rounded-none p-4',
@@ -112,9 +112,9 @@ $effect(() => {
                     <!-- 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 gap-1.5">
-                            <Settings2Icon size={12} class="text-[#ff3b30]" />
+                            <Settings2Icon size={12} class="text-swiss-red" />
                             <span
-                                class="text-[0.5625rem] font-mono uppercase tracking-widest font-bold text-[#1a1a1a] dark:text-[#e5e5e5]"
+                                class="text-[0.5625rem] font-mono uppercase tracking-widest font-bold text-swiss-black dark:text-neutral-200"
                             >
                                 CONTROLS
                             </span>
@@ -154,17 +154,17 @@ $effect(() => {
             <div
                 class={cn(
                     'flex items-center gap-1 md:gap-2 p-1.5 md:p-2',
-                    'bg-[#f3f0e9]/95 dark:bg-[#121212]/95 backdrop-blur-xl',
+                    'bg-surface/95 dark:bg-dark-bg/95 backdrop-blur-xl',
                     'border border-black/5 dark:border-white/10',
                     '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-[#1a1a1a] dark:text-[#e5e5e5] shrink-0">
+                <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">
                     <Settings2Icon
                         size={14}
-                        class="text-[#ff3b30]"
+                        class="text-swiss-red"
                     />
                     <span
                         class="text-[0.5625rem] md:text-[0.625rem] font-mono uppercase tracking-widest font-bold hidden sm:inline whitespace-nowrap"
diff --git a/src/shared/ui/Button/Button.svelte b/src/shared/ui/Button/Button.svelte
index 339cc37..cdd2196 100644
--- a/src/shared/ui/Button/Button.svelte
+++ b/src/shared/ui/Button/Button.svelte
@@ -138,11 +138,11 @@ const variantStyles: Record<ButtonVariant, string> = {
         'text-neutral-400 dark:text-neutral-400',
         'border border-transparent',
         // Hover (inactive) — semi-transparent lift, no bg-paper token
-        'hover:bg-white/50 dark:hover:bg-[#1e1e1e]/50',
+        'hover:bg-paper/50 dark:hover:bg-dark-card/50',
         'hover:text-neutral-900 dark:hover:text-neutral-100',
         'hover:border-black/5 dark:hover:border-white/10',
         // Press
-        'active:bg-white/70 dark:active:bg-[#1e1e1e]/70',
+        'active:bg-paper/70 dark:active:bg-dark-card/70',
         // Disabled
         'disabled:text-neutral-300 dark:disabled:text-neutral-600',
         'disabled:cursor-not-allowed',
@@ -169,7 +169,7 @@ const iconSizeStyles: Record<ButtonSize, string> = {
 const activeStyles: Partial<Record<ButtonVariant, string>> = {
     secondary: 'bg-paper dark:bg-paper shadow-sm border-black/20 dark:border-white/20',
     tertiary:
-        'bg-paper dark:bg-[#1e1e1e] border-black/10 dark:border-white/10 shadow-sm text-neutral-900 dark:text-neutral-100',
+        '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',
diff --git a/src/shared/ui/ComboControl/ComboControl.svelte b/src/shared/ui/ComboControl/ComboControl.svelte
index ce3c211..5750544 100644
--- a/src/shared/ui/ComboControl/ComboControl.svelte
+++ b/src/shared/ui/ComboControl/ComboControl.svelte
@@ -129,8 +129,8 @@ const displayLabel = $derived(label ?? controlLabel ?? '');
                                 'border border-transparent',
                                 'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand/30',
                                 open
-                                    ? 'bg-white dark:bg-[#1e1e1e] shadow-sm border-black/5 dark:border-white/10'
-                                    : 'hover:bg-white/50 dark:hover:bg-[#1e1e1e]/50',
+                                    ? 'bg-paper dark:bg-dark-card shadow-sm border-black/5 dark:border-white/10'
+                                    : 'hover:bg-paper/50 dark:hover:bg-dark-card/50',
                             )}
                             aria-label={controlLabel}
                         >
@@ -157,7 +157,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-white dark:bg-[#1e1e1e]"
+                    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"
                     align="center"
                     side="top"
                 >
diff --git a/src/shared/ui/Section/SectionTitle/SectionTitle.svelte b/src/shared/ui/Section/SectionTitle/SectionTitle.svelte
index 3a0be33..53325c0 100644
--- a/src/shared/ui/Section/SectionTitle/SectionTitle.svelte
+++ b/src/shared/ui/Section/SectionTitle/SectionTitle.svelte
@@ -13,7 +13,7 @@ interface Props {
 const { text }: Props = $props();
 </script>
 {#if text}
-    <h2 class="text-3xl md:text-4xl lg:text-5xl font-['Space_Grotesk'] font-bold text-[#1a1a1a] dark:text-[#e5e5e5] tracking-tight">
+    <h2 class="text-3xl md:text-4xl lg:text-5xl font-['Space_Grotesk'] font-bold text-swiss-black dark:text-neutral-200 tracking-tight">
         {text}
     </h2>
 {/if}
diff --git a/src/shared/ui/SidebarContainer/SidebarContainer.svelte b/src/shared/ui/SidebarContainer/SidebarContainer.svelte
index e1d789c..e83c8d2 100644
--- a/src/shared/ui/SidebarContainer/SidebarContainer.svelte
+++ b/src/shared/ui/SidebarContainer/SidebarContainer.svelte
@@ -85,7 +85,7 @@ function close() {
             'will-change-[width]',
             'transition-[width] duration-300 ease-out',
             'border-r border-black/5 dark:border-white/10',
-            'bg-[#f3f0e9] dark:bg-[#121212]',
+            'bg-surface dark:bg-dark-bg',
             isOpen ? 'w-80 opacity-100' : 'w-0 opacity-0',
             'transition-[width,opacity] duration-300 ease-out',
             className,
diff --git a/src/widgets/ComparisonView/ui/ComparisonView/ComparisonView.svelte b/src/widgets/ComparisonView/ui/ComparisonView/ComparisonView.svelte
index 2b716e5..5c8ffae 100644
--- a/src/widgets/ComparisonView/ui/ComparisonView/ComparisonView.svelte
+++ b/src/widgets/ComparisonView/ui/ComparisonView/ComparisonView.svelte
@@ -37,7 +37,7 @@ $effect(() => {
 
 <NavigationWrapper index={0} title="Comparison">
     {#snippet content(action)}
-        <div class="flex h-screen w-full overflow-hidden bg-[#f3f0e9] dark:bg-[#0a0a0a]">
+        <div class="flex h-screen w-full overflow-hidden bg-surface dark:bg-background">
             <!-- Sidebar -->
             <SidebarContainer bind:isOpen={isSidebarOpen}>
                 {#snippet sidebar()}
diff --git a/src/widgets/ComparisonView/ui/SliderArea/SliderArea.svelte b/src/widgets/ComparisonView/ui/SliderArea/SliderArea.svelte
index e701933..3fa1948 100644
--- a/src/widgets/ComparisonView/ui/SliderArea/SliderArea.svelte
+++ b/src/widgets/ComparisonView/ui/SliderArea/SliderArea.svelte
@@ -173,7 +173,7 @@ const scaleClass = $derived(
     <div
         class={cn(
             'w-full h-full flex flex-col items-center justify-center relative',
-            'bg-white dark:bg-[#1e1e1e]',
+            'bg-paper dark:bg-dark-card',
             'shadow-2xl shadow-black/5 dark:shadow-black/20',
             'transition-transform duration-300 ease-out',
             scaleClass,
@@ -181,7 +181,7 @@ const scaleClass = $derived(
     >
         <!-- Subtle grid overlay — pointer-events-none, very low opacity -->
         <div
-            class="absolute inset-0 pointer-events-none opacity-[0.03] dark:opacity-[0.05] text-black dark:text-white"
+            class="absolute inset-0 pointer-events-none opacity-[0.03] dark:opacity-[0.05] text-swiss-black dark:text-swiss-white"
             style={gridStyle}
             aria-hidden="true"
         >