src/app/ui/Layout.svelte

@@ -74,7 +74,7 @@ onDestroy(() => themeManager.destroy());
     <div
         id="app-root"
         class={cn(
-            'min-h-dvh w-auto flex flex-col bg-surface dark:bg-dark-bg relative',
+            'min-h-dvh w-auto flex flex-col surface-canvas relative',
             theme === 'dark' ? 'dark' : '',
         )}
     >

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

@@ -43,8 +43,8 @@ function createButtonText(item: BreadcrumbItem) {
             md:h-16 px-4 md:px-6 lg:px-8
             flex items-center justify-between
             z-40
-            bg-surface/90 dark:bg-dark-bg/90 backdrop-blur-md
-            border-b border-subtle
+            surface-floating bg-surface/90 dark:bg-dark-bg/90
+            border-x-0 border-t-0
         "
     >
         <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/AdjustTypography/ui/TypographyMenu/TypographyMenu.svelte

@@ -90,11 +90,8 @@ $effect(() => {
                         align="end"
                         sideOffset={8}
                         class={cn(
-                            'z-50 w-72',
-                            'bg-surface dark:bg-dark-card',
-                            'border border-subtle',
-                            'shadow-[0_20px_40px_-10px_rgba(0,0,0,0.15)]',
-                            'rounded-none p-4',
+                            'z-50 w-72 p-4 rounded-none',
+                            'surface-popover',
                             'data-[state=open]:animate-in data-[state=closed]:animate-out',
                             'data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
                             'data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95',
@@ -118,7 +115,7 @@ $effect(() => {
                                 {#snippet child({ props })}
                                     <button
                                         {...props}
-                                        class="inline-flex items-center justify-center size-6 rounded-none hover:bg-black/5 dark:hover:bg-white/5 transition-colors"
+                                        class="flex-center size-6 rounded-none hover:bg-black/5 dark:hover:bg-white/5 transition-colors"
                                         aria-label="Close controls"
                                     >
                                         <XIcon class="size-3.5 text-neutral-500" />
@@ -150,10 +147,9 @@ $effect(() => {
             <div
                 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-subtle',
-                    'shadow-[0_20px_40px_-10px_rgba(0,0,0,0.1)]',
-                    'rounded-none ring-1 ring-black/5 dark:ring-white/5',
+                    'surface-floating bg-surface/95 dark:bg-dark-bg/95 backdrop-blur-xl',
+                    'shadow-popover rounded-none',
+                    'ring-1 ring-black/5 dark:ring-white/5',
                 )}
             >
                 <!-- Header: icon + label -->

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

@@ -58,12 +58,10 @@ const stats = $derived([
     class="
         group relative
         w-full h-full
-        bg-paper dark:bg-dark-card
-        border border-subtle
+        surface-card
         hover:border-brand dark:hover:border-brand
-        hover:shadow-brand/10
-        hover:shadow-[5px_5px_0px_0px]
-        transition-all duration-200
+        hover:shadow-stamp-card
+        transition-all duration-normal
         overflow-hidden
         flex flex-col
         min-h-60

src/shared/ui/Button/ButtonGroup.svelte

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

src/shared/ui/ComboControl/ComboControl.svelte

@@ -91,7 +91,7 @@ const displayLabel = $derived(label ?? controlLabel ?? '');
             step={control.step}
             orientation="horizontal"
         />
-        <span class="font-mono text-xs text-secondary tabular-nums w-10 text-right shrink-0">
+        <span class="font-mono text-xs text-subtle tabular-nums w-10 text-right shrink-0">
             {formattedValue()}
         </span>
     </div>
@@ -120,12 +120,12 @@ const displayLabel = $derived(label ?? controlLabel ?? '');
                         <button
                             {...props}
                             class={cn(
-                                'flex flex-col items-center justify-center w-14 py-1',
-                                'select-none rounded-none transition-all duration-150',
+                                'flex flex-col flex-center w-14 py-1',
+                                'select-none rounded-none transition-all duration-fast',
                                 '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-subtle'
+                                    ? 'surface-card-elevated'
                                     : 'hover:bg-paper/50 dark:hover:bg-dark-card/50',
                             )}
                             aria-label={controlLabel ? `${controlLabel}: ${formattedValue()}` : undefined}
@@ -134,7 +134,7 @@ const displayLabel = $derived(label ?? controlLabel ?? '');
                             {#if displayLabel}
                                 <span
                                     class="
-                                        text-3xs font-primary font-bold tracking-tight uppercase
+                                        text-3xs text-label-mono
                                         text-neutral-900 dark:text-neutral-100
                                         mb-0.5 leading-none
                                     "
@@ -153,7 +153,7 @@ const displayLabel = $derived(label ?? controlLabel ?? '');
 
                 <!-- Vertical slider popover -->
                 <Popover.Content
-                    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"
+                    class="w-auto py-4 px-3 h-64 flex-center rounded-none surface-card-elevated"
                     align="center"
                     side="top"
                 >

src/shared/ui/FilterGroup/FilterGroup.svelte

@@ -83,9 +83,9 @@ $effect(() => {
             <div transition:fly={{ y: 20, duration: 200, easing: cubicOut }}>
                 <Button
                     variant="tertiary"
+                    layout="block-list-row"
                     active={property.selected}
                     onclick={() => (property.selected = !property.selected)}
-                    class="w-full px-3 md:px-4 py-2.5 md:py-3 justify-between text-left text-sm flex"
                     iconPosition="right"
                     icon={property.selected ? icon : undefined}
                 >
@@ -96,8 +96,8 @@ $effect(() => {
         {#if hasMore}
             <Button
                 variant="icon"
+                layout="block-list-row"
                 onclick={() => (showMore = !showMore)}
-                class="w-full px-3 md:px-4 py-2.5 md:py-3 justify-between text-left text-sm flex"
                 iconPosition="left"
             >
                 {#snippet icon()}

src/shared/ui/Input/Input.svelte

@@ -149,7 +149,7 @@ const inputClasses = $derived(cn(
         <span
             class={cn(
                 'text-2xs font-mono tracking-wide px-1',
-                error ? 'text-brand ' : 'text-secondary',
+                error ? 'text-brand ' : 'text-subtle',
             )}
         >
             {helperText}

src/shared/ui/Loader/Loader.svelte

@@ -26,7 +26,7 @@ let { size = 20, class: className = '', message = 'analyzing_data' }: Props = $p
 </script>
 
 <div
-    class="absolute inset-x-0 inset-y-0 flex items-center justify-center gap-4 {className}"
+    class="absolute inset-x-0 inset-y-0 flex-center gap-4 {className}"
     in:fade={{ duration: 300 }}
     out:fade={{ duration: 300 }}
 >

src/shared/ui/SidebarContainer/SidebarContainer.svelte

@@ -59,7 +59,7 @@ function close() {
 
         <!-- Panel -->
         <div
-            class="fixed left-0 top-0 bottom-0 w-80 z-50 shadow-2xl"
+            class="fixed left-0 top-0 bottom-0 w-80 z-50 shadow-overlay"
             in:fly={{ x: -320, duration: 300, easing: cubicOut }}
             out:fly={{ x: -320, duration: 250, easing: cubicOut }}
         >
@@ -83,11 +83,10 @@ function close() {
             'shrink-0 z-30 h-full relative',
             'overflow-hidden',
             'will-change-[width]',
-            'transition-[width] duration-300 ease-out',
             'border-r border-subtle',
-            'bg-surface dark:bg-dark-bg',
+            'surface-canvas',
             isOpen ? 'w-80 opacity-100' : 'w-0 opacity-0',
-            'transition-[width,opacity] duration-300 ease-out',
+            'transition-[width,opacity] duration-slow ease-out',
             className,
         )}
     >

src/shared/ui/Slider/Slider.svelte

@@ -70,17 +70,17 @@ let {
 const isVertical = $derived(orientation === 'vertical');
 
 const labelClasses = `font-mono text-2xs tabular-nums shrink-0
-    text-secondary
+    text-subtle
     group-hover:text-neutral-700 dark:group-hover:text-neutral-300
     transition-colors`;
 
 const thumbClasses = `block w-2.5 h-2.5 bg-brand
-    rotate-45 shadow-sm
+    rotate-45 shadow-rest
     hover:scale-125
     focus-visible:outline-none
     focus-visible:ring-2 focus-visible:ring-brand/20
     data-active:scale-90
-    transition-transform duration-150
+    transition-transform duration-fast
     disabled:pointer-events-none disabled:opacity-50
     cursor-grab active:cursor-grabbing`;
 </script>

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

@@ -110,28 +110,28 @@ function isFontReady(font: UnifiedFont): boolean {
                         <div class="w-full px-3 py-3 flex items-center justify-between">
                             <div class="flex-1 flex items-center gap-3">
                                 <Skeleton
-                                    class="h-4 w-32 bg-neutral-200/70 dark:bg-neutral-800/70"
+                                    class="h-4 w-32 skeleton-fill"
                                     style="width: {getSkeletonWidth(index)}"
                                 />
                             </div>
-                            <Skeleton class="w-1.5 h-1.5 rounded-full bg-neutral-200/70 dark:bg-neutral-800/70" />
+                            <Skeleton class="w-1.5 h-1.5 rounded-full skeleton-fill" />
                         </div>
                     {/each}
                 </div>
             {/snippet}
 
             {#snippet children({ item: font, index })}
-                <div class="relative h-[44px] w-full">
+                <div class="relative h-11 w-full">
                     {#if !isFontReady(font)}
                         <div
                             class="absolute inset-0 px-3 md:px-4 flex items-center justify-between border border-transparent"
                             transition:fade={{ duration: 300 }}
                         >
                             <Skeleton
-                                class="h-4 bg-neutral-200/70 dark:bg-neutral-800/70"
+                                class="h-4 skeleton-fill"
                                 style="width: {getSkeletonWidth(index)}"
                             />
-                            <Skeleton class="w-1.5 h-1.5 rounded-full bg-neutral-200/70 dark:bg-neutral-800/70" />
+                            <Skeleton class="w-1.5 h-1.5 rounded-full skeleton-fill" />
                         </div>
                     {:else}
                         {@const isSelectedA = font.id === comparisonStore.fontA?.id}
@@ -141,9 +141,10 @@ function isFontReady(font: UnifiedFont): boolean {
                         <div transition:fade={{ duration: 300 }} class="h-full">
                             <Button
                                 variant="tertiary"
+                                layout="block-list-row"
                                 {active}
                                 onclick={() => handleSelect(font)}
-                                class="w-full h-full px-3 md:px-4 py-2.5 md:py-3 flex !justify-between text-left text-sm"
+                                class="h-full"
                                 iconPosition="right"
                             >
                                 <FontApplicator {font}>

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

@@ -53,7 +53,7 @@ const fontBName = $derived(comparisonStore.fontB?.name ?? '');
         'px-4 md:px-8 py-4 md:py-6',
         'h-16 md:h-20 z-20',
         'border-b border-subtle',
-        'bg-surface dark:bg-dark-bg',
+        'surface-canvas',
         className,
     )}
 >

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

@@ -43,7 +43,7 @@ let {
     class={cn(
         'flex flex-col h-full',
         'w-80',
-        'bg-surface dark:bg-dark-bg',
+        'surface-canvas',
         'border-r border-subtle',
         'transition-colors duration-500',
         className,
@@ -54,7 +54,7 @@ let {
         class="
             p-6 shrink-0
             border-b border-subtle
-            bg-surface dark:bg-dark-bg
+            surface-canvas
         "
     >
         <!-- Title -->
@@ -90,7 +90,7 @@ let {
     </div>
 
     <!-- ── Main: content area (no scroll - VirtualList handles scrolling) ─────────────────────────────── -->
-    <div class="flex-1 min-h-0 bg-surface dark:bg-dark-bg">
+    <div class="flex-1 min-h-0 surface-canvas">
         {#if main}
             {@render main()}
         {/if}
@@ -101,7 +101,7 @@ let {
         <div
             class="
                 shrink-0 p-6
-                bg-surface dark:bg-dark-bg
+                surface-canvas
                 border-t border-subtle
                 z-10
             "

src/widgets/ComparisonView/ui/SliderArea/SliderArea.svelte

@@ -233,14 +233,14 @@ const scaleClass = $derived(
     Outer flex container — fills parent.
     The paper div inside scales down when the sidebar opens on desktop.
 -->
-<div class={cn('flex-1 relative flex items-center justify-center p-0 overflow-hidden bg-surface dark:bg-dark-bg', className)}>
+<div class={cn('flex-1 relative flex-center p-0 overflow-hidden surface-canvas', className)}>
     <!-- Paper surface -->
     <div
         class={cn(
-            'w-full h-full flex flex-col items-center justify-center relative',
+            'w-full h-full flex flex-col flex-center relative',
             'bg-paper dark:bg-dark-card',
-            'shadow-2xl shadow-black/5 dark:shadow-black/20',
-            'transition-transform duration-300 ease-out',
+            'shadow-floating-panel dark:shadow-floating-panel-dark',
+            'transition-transform duration-slow ease-out',
             scaleClass,
         )}
     >

src/widgets/ComparisonView/ui/Thumb/Thumb.svelte

@@ -36,9 +36,9 @@ let { sliderPos, isDragging }: Props = $props();
             '-ml-2.5 md:-ml-3',
             'mt-2 md:mt-4',
             'bg-brand text-white',
-            'flex items-center justify-center',
+            'flex-center',
             'rounded-none shadow-md',
-            'transition-transform duration-150',
+            'transition-transform duration-fast',
             isDragging ? 'scale-110' : 'scale-100',
         )}
     >
@@ -52,9 +52,9 @@ let { sliderPos, isDragging }: Props = $props();
             '-ml-2.5 md:-ml-3',
             'mb-2 md:mb-4',
             'bg-brand text-white',
-            'flex items-center justify-center',
+            'flex-center',
             'rounded-none shadow-md',
-            'transition-transform duration-150',
+            'transition-transform duration-fast',
             isDragging ? 'scale-110' : 'scale-100',
         )}
     >

src/widgets/Footer/ui/Footer/Footer.svelte

@@ -14,15 +14,19 @@ const isVertical = $derived(responsive?.isDesktop || responsive?.isDesktopLarge)
 const currentYear = new Date().getFullYear();
 </script>
 
+<!--
+    z-20 keeps the footer below the sidebar's mobile/tablet overlay
+    (z-40) and panel (z-50) so an open sidebar fully covers the link.
+-->
 <footer
     class={cn(
-        'fixed z-10 flex flex-row items-end gap-1 pointer-events-none',
+        'fixed z-20 flex flex-row items-end gap-1 pointer-events-none',
         isVertical ? 'bottom-2.5 right-2.5 [writing-mode:vertical-rl] rotate-180' : 'bottom-4 left-4',
     )}
 >
     <!-- Project Name (Horizontal) -->
     {#if isVertical}
-        <div class="flex flex-row pointer-events-auto items-center gap-2 bg-surface/80 dark:bg-dark-bg/80 backdrop-blur-sm px-2 py-1 border border-subtle">
+        <div class="flex flex-row pointer-events-auto items-center gap-2 surface-floating backdrop-blur-sm px-2 py-1">
             <div class="w-1.5 h-1.5 bg-brand"></div>
             <span class="text-2xs font-mono uppercase tracking-wider-mono text-neutral-500 dark:text-neutral-400">
                 GlyphDiff © 2025 — {currentYear}

src/widgets/SampleList/ui/SampleList/SampleList.svelte

@@ -84,7 +84,7 @@ const fontRowHeight = $derived.by(() =>
 {#snippet skeleton()}
     <div class="flex flex-col gap-3 sm:gap-4 p-3 sm:p-4">
         {#each Array(5) as _, i}
-            <div class="flex flex-col gap-1.5 sm:gap-2 p-3 sm:p-4 border rounded-lg sm:rounded-xl border-border-subtle bg-background-40">
+            <div class="flex flex-col gap-1.5 sm:gap-2 p-3 sm:p-4 border rounded-lg sm:rounded-xl border-subtle bg-background/40">
                 <div class="flex items-center justify-between mb-3 sm:mb-4">
                     <Skeleton class="h-6 sm:h-8 w-1/3" />
                     <Skeleton class="h-6 sm:h-8 w-6 sm:w-8 rounded-full" />