diff --git a/.claude/launch.json b/.claude/launch.json
new file mode 100644
index 0000000..f585122
--- /dev/null
+++ b/.claude/launch.json
@@ -0,0 +1,12 @@
+{
+  "version": "0.0.1",
+  "configurations": [
+    {
+      "name": "sheetly-dev",
+      "runtimeExecutable": "npm",
+      "runtimeArgs": ["run", "dev"],
+      "port": 5173,
+      "autoPort": true
+    }
+  ]
+}
diff --git a/app/eslint.config.js b/app/eslint.config.js
index 6e372c2..b723ee3 100644
--- a/app/eslint.config.js
+++ b/app/eslint.config.js
@@ -5,6 +5,54 @@ import reactRefresh from 'eslint-plugin-react-refresh';
 import globals from 'globals';
 import tseslint from 'typescript-eslint';
 
+// Inline plugin: bans raw Tailwind color utilities that should be replaced
+// with semantic design-system tokens (bg-surface, text-text, border-border…).
+// Exceptions live in app/src/app/styles/ (token definitions) and are
+// implicitly excluded because those files are .css, not .ts/.tsx.
+const colorBanPlugin = {
+  rules: {
+    'no-hardcoded-colors': {
+      create(context) {
+        const banned = [
+          /\bbg-white\b/,
+          /\bbg-zinc-\d+/,
+          /\bbg-slate-\d+/,
+          /\btext-zinc-\d+/,
+          /\btext-red-\d+/,
+          /\btext-green-\d+/,
+          /\btext-indigo-\d+/,
+          /\bborder-zinc-\d+/,
+          /\bring-red-\d+/,
+          /\bring-indigo-\d+/,
+          /\bhover:bg-zinc-\d+/,
+        ];
+
+        function check(node, value) {
+          for (const re of banned) {
+            const match = re.exec(value);
+            if (match) {
+              context.report({
+                node,
+                message: `Hardcoded color "${match[0]}" is not allowed. Use a semantic token instead (e.g. bg-surface, text-text, border-border).`,
+              });
+              return;
+            }
+          }
+        }
+
+        return {
+          Literal(node) {
+            if (typeof node.value === 'string') check(node, node.value);
+          },
+          TemplateLiteral(node) {
+            for (const q of node.quasis) check(q, q.value.raw);
+          },
+        };
+      },
+    },
+  },
+};
+
 export default defineConfig([
   globalIgnores(['dist', 'coverage']),
   {
@@ -19,4 +67,11 @@ export default defineConfig([
       globals: globals.browser,
     },
   },
+  {
+    files: ['src/**/*.{ts,tsx}'],
+    plugins: { 'color-ban': colorBanPlugin },
+    rules: {
+      'color-ban/no-hardcoded-colors': 'error',
+    },
+  },
 ]);
diff --git a/app/index.html b/app/index.html
index caa61aa..c69fbde 100644
--- a/app/index.html
+++ b/app/index.html
@@ -14,6 +14,20 @@
     <script src="https://accounts.google.com/gsi/client" async defer></script>
   </head>
   <body>
+    <script>
+      (function () {
+        var t = localStorage.getItem('theme') || 'system';
+        var d =
+          t === 'dark'
+            ? 'dark'
+            : t === 'light'
+              ? 'light'
+              : window.matchMedia('(prefers-color-scheme: dark)').matches
+                ? 'dark'
+                : 'light';
+        document.documentElement.setAttribute('data-theme', d);
+      })();
+    </script>
     <div id="root"></div>
     <script type="module" src="/src/main.tsx"></script>
   </body>
diff --git a/app/package.json b/app/package.json
index 3b6ab4d..8d53f1f 100644
--- a/app/package.json
+++ b/app/package.json
@@ -34,6 +34,9 @@
   },
   "devDependencies": {
     "@eslint/js": "^10.0.1",
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^16.3.2",
+    "@testing-library/user-event": "^14.6.1",
     "@types/node": "^24.12.3",
     "@types/react": "^19.2.14",
     "@types/react-dom": "^19.2.3",
diff --git a/app/src/app/providers/AppProviders.tsx b/app/src/app/providers/AppProviders.tsx
index 76e67a3..64aaf6d 100644
--- a/app/src/app/providers/AppProviders.tsx
+++ b/app/src/app/providers/AppProviders.tsx
@@ -2,6 +2,7 @@ import type { ReactNode } from 'react';
 import { BrowserRouter } from 'react-router-dom';
 
 import { GoogleAuthProvider } from '@features/google-auth';
+import { ThemeProvider } from './theme-provider';
 
 type AppProvidersProps = {
   children: ReactNode;
@@ -9,8 +10,10 @@ type AppProvidersProps = {
 
 export function AppProviders({ children }: AppProvidersProps) {
   return (
-    <GoogleAuthProvider>
-      <BrowserRouter basename={import.meta.env.BASE_URL}>{children}</BrowserRouter>
-    </GoogleAuthProvider>
+    <ThemeProvider>
+      <GoogleAuthProvider>
+        <BrowserRouter basename={import.meta.env.BASE_URL}>{children}</BrowserRouter>
+      </GoogleAuthProvider>
+    </ThemeProvider>
   );
 }
diff --git a/app/src/app/providers/theme-provider.test.tsx b/app/src/app/providers/theme-provider.test.tsx
new file mode 100644
index 0000000..bb7325e
--- /dev/null
+++ b/app/src/app/providers/theme-provider.test.tsx
@@ -0,0 +1,127 @@
+import { render, renderHook, act } from '@testing-library/react';
+import { afterEach, describe, expect, it, vi } from 'vitest';
+
+import { getEffectiveTheme, ThemeProvider, useTheme } from './theme-provider';
+
+function mockMatchMedia(dark: boolean) {
+  const mq = {
+    matches: dark,
+    addEventListener: vi.fn(),
+    removeEventListener: vi.fn(),
+  };
+  vi.stubGlobal('matchMedia', vi.fn().mockReturnValue(mq));
+  return mq;
+}
+
+afterEach(() => {
+  localStorage.clear();
+  document.documentElement.removeAttribute('data-theme');
+  vi.unstubAllGlobals();
+});
+
+// ── getEffectiveTheme ──────────────────────────────────────────────────────────
+
+describe('getEffectiveTheme', () => {
+  it("'dark' always resolves to 'dark'", () => {
+    mockMatchMedia(false);
+    expect(getEffectiveTheme('dark')).toBe('dark');
+  });
+
+  it("'light' always resolves to 'light'", () => {
+    mockMatchMedia(true);
+    expect(getEffectiveTheme('light')).toBe('light');
+  });
+
+  it("'system' resolves to 'dark' when OS prefers dark", () => {
+    mockMatchMedia(true);
+    expect(getEffectiveTheme('system')).toBe('dark');
+  });
+
+  it("'system' resolves to 'light' when OS prefers light", () => {
+    mockMatchMedia(false);
+    expect(getEffectiveTheme('system')).toBe('light');
+  });
+});
+
+// ── ThemeProvider DOM integration ─────────────────────────────────────────────
+
+describe('ThemeProvider', () => {
+  it('sets data-theme on documentElement on mount', () => {
+    mockMatchMedia(false);
+    render(<ThemeProvider>child</ThemeProvider>);
+    expect(document.documentElement.getAttribute('data-theme')).toBe('light');
+  });
+
+  it('reads initial theme from localStorage', () => {
+    localStorage.setItem('theme', 'dark');
+    mockMatchMedia(false);
+    render(<ThemeProvider>child</ThemeProvider>);
+    expect(document.documentElement.getAttribute('data-theme')).toBe('dark');
+  });
+
+  it('falls back to system when localStorage is empty', () => {
+    mockMatchMedia(true);
+    render(<ThemeProvider>child</ThemeProvider>);
+    expect(document.documentElement.getAttribute('data-theme')).toBe('dark');
+  });
+});
+
+// ── useTheme hook ─────────────────────────────────────────────────────────────
+
+describe('useTheme', () => {
+  it('throws when used outside ThemeProvider', () => {
+    expect(() => renderHook(() => useTheme())).toThrow(
+      'useTheme must be used inside ThemeProvider',
+    );
+  });
+
+  it('returns the current theme value', () => {
+    localStorage.setItem('theme', 'light');
+    mockMatchMedia(false);
+    const { result } = renderHook(() => useTheme(), {
+      wrapper: ({ children }) => <ThemeProvider>{children}</ThemeProvider>,
+    });
+    expect(result.current.theme).toBe('light');
+  });
+
+  it('setTheme updates the theme state and persists to localStorage', () => {
+    mockMatchMedia(false);
+    const { result } = renderHook(() => useTheme(), {
+      wrapper: ({ children }) => <ThemeProvider>{children}</ThemeProvider>,
+    });
+
+    act(() => {
+      result.current.setTheme('dark');
+    });
+
+    expect(result.current.theme).toBe('dark');
+    expect(localStorage.getItem('theme')).toBe('dark');
+  });
+
+  it('setTheme updates data-theme attribute on documentElement', () => {
+    mockMatchMedia(false);
+    const { result } = renderHook(() => useTheme(), {
+      wrapper: ({ children }) => <ThemeProvider>{children}</ThemeProvider>,
+    });
+
+    act(() => {
+      result.current.setTheme('dark');
+    });
+
+    expect(document.documentElement.getAttribute('data-theme')).toBe('dark');
+  });
+
+  it('switching to system registers a matchMedia listener', () => {
+    localStorage.setItem('theme', 'light');
+    const mq = mockMatchMedia(false);
+    const { result } = renderHook(() => useTheme(), {
+      wrapper: ({ children }) => <ThemeProvider>{children}</ThemeProvider>,
+    });
+
+    act(() => {
+      result.current.setTheme('system');
+    });
+
+    expect(mq.addEventListener).toHaveBeenCalledWith('change', expect.any(Function));
+  });
+});
diff --git a/app/src/app/providers/theme-provider.tsx b/app/src/app/providers/theme-provider.tsx
new file mode 100644
index 0000000..27c667f
--- /dev/null
+++ b/app/src/app/providers/theme-provider.tsx
@@ -0,0 +1,50 @@
+/* eslint-disable react-refresh/only-export-components */
+import { createContext, useContext, useEffect, useState, type ReactNode } from 'react';
+
+import { localStorageService } from '@shared/lib/storage/local-storage.service';
+
+export type ThemeValue = 'dark' | 'light' | 'system';
+
+type ThemeContextValue = {
+  setTheme: (theme: ThemeValue) => void;
+  theme: ThemeValue;
+};
+
+const ThemeContext = createContext<ThemeContextValue | null>(null);
+
+export function getEffectiveTheme(theme: ThemeValue): 'dark' | 'light' {
+  if (theme === 'dark') return 'dark';
+  if (theme === 'light') return 'light';
+  return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+}
+
+export function ThemeProvider({ children }: { children: ReactNode }) {
+  const [theme, setThemeState] = useState<ThemeValue>(
+    () => (localStorageService.get('theme') as ThemeValue | null) ?? 'system',
+  );
+
+  function setTheme(next: ThemeValue) {
+    localStorageService.set('theme', next);
+    setThemeState(next);
+  }
+
+  useEffect(() => {
+    document.documentElement.setAttribute('data-theme', getEffectiveTheme(theme));
+
+    if (theme === 'system') {
+      const mq = window.matchMedia('(prefers-color-scheme: dark)');
+      const apply = () =>
+        document.documentElement.setAttribute('data-theme', getEffectiveTheme('system'));
+      mq.addEventListener('change', apply);
+      return () => mq.removeEventListener('change', apply);
+    }
+  }, [theme]);
+
+  return <ThemeContext.Provider value={{ setTheme, theme }}>{children}</ThemeContext.Provider>;
+}
+
+export function useTheme(): ThemeContextValue {
+  const ctx = useContext(ThemeContext);
+  if (!ctx) throw new Error('useTheme must be used inside ThemeProvider');
+  return ctx;
+}
diff --git a/app/src/app/styles/index.css b/app/src/app/styles/index.css
index 0a3f9cd..ae5153d 100644
--- a/app/src/app/styles/index.css
+++ b/app/src/app/styles/index.css
@@ -1,14 +1,84 @@
 @import 'tailwindcss';
 
 @theme {
+  /* Surface */
+  --color-app-bg: #ffffff;
+  --color-surface: #ffffff;
+  --color-surface-muted: #f8fafc;
+  --color-surface-hover: #f1f5f9;
+  --color-surface-strong: #18181b;
+
+  /* Border */
+  --color-border: #e4e4e7;
+  --color-border-strong: #a1a1aa;
+
+  /* Text */
+  --color-text: #18181b;
+  --color-text-muted: #52525b;
+  --color-text-soft: #a1a1aa;
+  --color-text-inverted: #ffffff;
+
+  /* Brand */
   --color-brand: #6366f1;
-  --color-success: #22c55e;
-  --color-danger: #ef4444;
+  --color-brand-hover: #4f46e5;
+  --color-brand-soft: #eef2ff;
+  --color-brand-ring: #c7d2fe;
+
+  /* Semantic states */
+  --color-danger: #dc2626;
+  --color-danger-hover: #b91c1c;
+  --color-danger-soft: #fef2f2;
+  --color-danger-ring: #fecaca;
+
+  --color-success: #16a34a;
+  --color-success-soft: #f0fdf4;
+
+  --color-warning: #d97706;
+  --color-warning-soft: #fffbeb;
+
+  --color-info: #6366f1;
+  --color-info-soft: #eef2ff;
+}
+
+/* Dark theme overrides */
+[data-theme='dark'] {
+  --color-app-bg: #0a0f1e;
+  --color-surface: #111827;
+  --color-surface-muted: #1f2937;
+  --color-surface-hover: #2d3748;
+  --color-surface-strong: #64748b;
+
+  --color-border: #1e293b;
+  --color-border-strong: #334155;
+
+  --color-text: #f1f5f9;
+  --color-text-muted: #94a3b8;
+  --color-text-soft: #64748b;
+  --color-text-inverted: #ffffff;
+
+  --color-brand: #818cf8;
+  --color-brand-hover: #6366f1;
+  --color-brand-soft: #1e1b4b;
+  --color-brand-ring: #3730a3;
+
+  --color-danger: #f87171;
+  --color-danger-hover: #ef4444;
+  --color-danger-soft: #450a0a;
+  --color-danger-ring: #7f1d1d;
+
+  --color-success: #4ade80;
+  --color-success-soft: #052e16;
+
+  --color-warning: #fbbf24;
+  --color-warning-soft: #451a03;
+
+  --color-info: #818cf8;
+  --color-info-soft: #1e1b4b;
 }
 
 :root {
-  color: #18181b;
-  background: #f8fafc;
+  color: var(--color-text);
+  background-color: var(--color-app-bg);
   font-family:
     Inter,
     ui-sans-serif,
diff --git a/app/src/features/create-transaction/ui/CreateTransactionModal.tsx b/app/src/features/create-transaction/ui/CreateTransactionModal.tsx
index ba8c9ad..131c9ad 100644
--- a/app/src/features/create-transaction/ui/CreateTransactionModal.tsx
+++ b/app/src/features/create-transaction/ui/CreateTransactionModal.tsx
@@ -267,7 +267,7 @@ export function CreateTransactionModal({
         <div className="-mt-2 flex flex-wrap gap-2">
           {amountPresets.map((amount) => (
             <button
-              className="rounded-full border border-zinc-200 px-3 py-1 text-sm font-medium text-zinc-600 transition hover:border-brand hover:text-brand"
+              className="rounded-full border border-border px-3 py-1 text-sm font-medium text-text-muted transition hover:border-brand hover:text-brand"
               key={amount}
               onClick={() => setValues({ ...values, amount })}
               type="button"
diff --git a/app/src/features/manage-containers/ui/ManageContainersModal.tsx b/app/src/features/manage-containers/ui/ManageContainersModal.tsx
index 996aa64..efccd65 100644
--- a/app/src/features/manage-containers/ui/ManageContainersModal.tsx
+++ b/app/src/features/manage-containers/ui/ManageContainersModal.tsx
@@ -57,15 +57,15 @@ export function ManageContainersModal({ isOpen, onClose }: ManageContainersModal
             Add
           </Button>
         </div>
-        <div className="divide-y divide-zinc-100 rounded-md border border-zinc-200">
+        <div className="divide-y divide-border rounded-md border border-border">
           {isLoading ? (
-            <div className="px-3 py-4 text-sm text-zinc-500">Loading containers...</div>
+            <div className="px-3 py-4 text-sm text-text-soft">Loading containers...</div>
           ) : containers.length ? (
             containers.map((container) => (
               <div className="flex items-center justify-between gap-3 px-3 py-3" key={container.id}>
                 <div>
-                  <p className="font-medium text-zinc-950">{container.name}</p>
-                  <p className="text-sm text-zinc-500">{container.currency}</p>
+                  <p className="font-medium text-text">{container.name}</p>
+                  <p className="text-sm text-text-soft">{container.currency}</p>
                 </div>
                 <Badge variant={container.isDefault ? 'neutral' : 'info'}>
                   {container.isDefault ? 'Default' : 'Custom'}
@@ -73,7 +73,7 @@ export function ManageContainersModal({ isOpen, onClose }: ManageContainersModal
               </div>
             ))
           ) : (
-            <div className="px-3 py-4 text-sm text-zinc-500">No containers yet.</div>
+            <div className="px-3 py-4 text-sm text-text-soft">No containers yet.</div>
           )}
         </div>
       </div>
diff --git a/app/src/features/manage-currencies/ui/CurrencySelect.tsx b/app/src/features/manage-currencies/ui/CurrencySelect.tsx
index d7700a3..1a67a42 100644
--- a/app/src/features/manage-currencies/ui/CurrencySelect.tsx
+++ b/app/src/features/manage-currencies/ui/CurrencySelect.tsx
@@ -47,8 +47,9 @@ export function CurrencySelect({
 
   return (
     <Select
-      hint={warning ?? (isLoading ? 'Loading currencies...' : undefined)}
+      hint={warning ?? undefined}
       id={id}
+      isLoading={isLoading}
       label={label}
       onChange={onChange}
       options={options.map((currency) => ({
diff --git a/app/src/features/setup-spreadsheet/ui/SetupSpreadsheetButton.tsx b/app/src/features/setup-spreadsheet/ui/SetupSpreadsheetButton.tsx
index d74a3ec..ba11da7 100644
--- a/app/src/features/setup-spreadsheet/ui/SetupSpreadsheetButton.tsx
+++ b/app/src/features/setup-spreadsheet/ui/SetupSpreadsheetButton.tsx
@@ -12,14 +12,14 @@ export function SetupSpreadsheetButton() {
     <div className="flex flex-col gap-3 md:flex-row md:items-center md:justify-between">
       <div>
         <div className="flex flex-wrap items-center gap-2">
-          <h2 className="text-lg font-semibold text-zinc-950">Spreadsheet template</h2>
+          <h2 className="text-lg font-semibold text-text">Spreadsheet template</h2>
           <Badge
             variant={status === 'ready' ? 'success' : status === 'error' ? 'danger' : 'neutral'}
           >
             {status === 'ready' ? 'Ready' : status === 'error' ? 'Needs attention' : 'Not checked'}
           </Badge>
         </div>
-        <p className="mt-1 text-sm text-zinc-600">
+        <p className="mt-1 text-sm text-text-muted">
           Create required sheets, headers, default categories and template version.
         </p>
         {error ? <p className="mt-2 text-sm text-danger">{error}</p> : null}
diff --git a/app/src/pages/dashboard/ui/DashboardPage.tsx b/app/src/pages/dashboard/ui/DashboardPage.tsx
index 757f6f6..29eae3b 100644
--- a/app/src/pages/dashboard/ui/DashboardPage.tsx
+++ b/app/src/pages/dashboard/ui/DashboardPage.tsx
@@ -33,14 +33,14 @@ type SummaryCardProps = {
 function SummaryCard({ label, getValue, summaries }: SummaryCardProps) {
   return (
     <Card>
-      <p className="text-sm text-zinc-500">{label}</p>
+      <p className="text-sm text-text-soft">{label}</p>
       {summaries.length === 0 ? (
-        <p className="mt-2 text-xl font-semibold text-zinc-500 md:text-2xl">—</p>
+        <p className="mt-2 text-xl font-semibold text-text-soft md:text-2xl">—</p>
       ) : (
         <ul className="mt-2 space-y-1">
           {summaries.map((entry) => (
             <li
-              className="break-words text-xl font-semibold text-zinc-950 md:text-2xl"
+              className="break-words text-xl font-semibold text-text md:text-2xl"
               key={entry.currency}
             >
               {formatMoney(getValue(entry), entry.currency)}
diff --git a/app/src/pages/settings/ui/SettingsPage.tsx b/app/src/pages/settings/ui/SettingsPage.tsx
index 750eebb..2367aeb 100644
--- a/app/src/pages/settings/ui/SettingsPage.tsx
+++ b/app/src/pages/settings/ui/SettingsPage.tsx
@@ -1,5 +1,6 @@
 import { type ChangeEvent, useRef, useState } from 'react';
 
+import { useTheme, type ThemeValue } from '@app/providers/theme-provider';
 import { ConnectSpreadsheetModal } from '@features/connect-spreadsheet';
 import { GoogleConnectButton, GoogleConnectionStatus, useGoogleAuth } from '@features/google-auth';
 import { ManageContainersModal } from '@features/manage-containers';
@@ -13,6 +14,7 @@ import { AppLayout } from '@widgets/app-layout';
 import { Badge } from '@shared/ui/badge';
 import { Button } from '@shared/ui/button';
 import { Card } from '@shared/ui/card';
+import { cn } from '@shared/lib/classnames/cn';
 import { ConfirmModal } from '@shared/ui/confirm-modal';
 import { Input } from '@shared/ui/input';
 import { localStorageService } from '@shared/lib/storage/local-storage.service';
@@ -20,8 +22,196 @@ import { PageHeader } from '@shared/ui/page-header';
 import { Select } from '@shared/ui/select';
 import { Toast } from '@shared/ui/toast';
 
+// ---------- theme mini-previews (hardcoded colors — always show fixed appearance) ----------
+
+function ThemeMiniPreview({ variant }: { variant: ThemeValue }) {
+  if (variant === 'system') {
+    return (
+      <div
+        style={{
+          border: '1px solid #e4e4e7',
+          borderRadius: 6,
+          display: 'flex',
+          height: 72,
+          overflow: 'hidden',
+        }}
+      >
+        <div style={{ backgroundColor: '#ffffff', flex: 1, padding: 8 }}>
+          <div
+            style={{
+              backgroundColor: '#18181b',
+              borderRadius: 2,
+              height: 4,
+              marginBottom: 4,
+              width: '100%',
+            }}
+          />
+          <div
+            style={{
+              backgroundColor: '#a1a1aa',
+              borderRadius: 2,
+              height: 3,
+              marginBottom: 6,
+              width: '65%',
+            }}
+          />
+          <div style={{ backgroundColor: '#6366f1', borderRadius: 3, height: 9, width: 28 }} />
+        </div>
+        <div style={{ backgroundColor: '#e4e4e7', width: 1 }} />
+        <div style={{ backgroundColor: '#111827', flex: 1, padding: 8 }}>
+          <div
+            style={{
+              backgroundColor: '#f1f5f9',
+              borderRadius: 2,
+              height: 4,
+              marginBottom: 4,
+              width: '100%',
+            }}
+          />
+          <div
+            style={{
+              backgroundColor: '#64748b',
+              borderRadius: 2,
+              height: 3,
+              marginBottom: 6,
+              width: '65%',
+            }}
+          />
+          <div style={{ backgroundColor: '#818cf8', borderRadius: 3, height: 9, width: 28 }} />
+        </div>
+      </div>
+    );
+  }
+
+  const isLight = variant === 'light';
+  const c = {
+    bg: isLight ? '#ffffff' : '#111827',
+    border: isLight ? '#e4e4e7' : '#1e293b',
+    brand: isLight ? '#6366f1' : '#818cf8',
+    navBg: isLight ? '#f8fafc' : '#1f2937',
+    navDot: isLight ? '#a1a1aa' : '#334155',
+    text: isLight ? '#18181b' : '#f1f5f9',
+    textMuted: isLight ? '#a1a1aa' : '#64748b',
+  };
+
+  return (
+    <div
+      style={{
+        backgroundColor: c.bg,
+        border: `1px solid ${c.border}`,
+        borderRadius: 6,
+        height: 72,
+        overflow: 'hidden',
+      }}
+    >
+      <div
+        style={{
+          backgroundColor: c.navBg,
+          borderBottom: `1px solid ${c.border}`,
+          display: 'flex',
+          gap: 4,
+          padding: '5px 8px',
+        }}
+      >
+        <div style={{ backgroundColor: c.navDot, borderRadius: 2, height: 3, width: 20 }} />
+        <div style={{ backgroundColor: c.navDot, borderRadius: 2, height: 3, width: 12 }} />
+        <div style={{ backgroundColor: c.navDot, borderRadius: 2, height: 3, width: 12 }} />
+      </div>
+      <div style={{ padding: '6px 8px' }}>
+        <div
+          style={{
+            backgroundColor: c.text,
+            borderRadius: 2,
+            height: 4,
+            marginBottom: 4,
+            width: '70%',
+          }}
+        />
+        <div
+          style={{
+            backgroundColor: c.textMuted,
+            borderRadius: 2,
+            height: 3,
+            marginBottom: 6,
+            width: '50%',
+          }}
+        />
+        <div style={{ backgroundColor: c.brand, borderRadius: 3, height: 9, width: 32 }} />
+      </div>
+    </div>
+  );
+}
+
+type ThemeCardProps = {
+  description: string;
+  isActive: boolean;
+  label: string;
+  onClick: () => void;
+  variant: ThemeValue;
+};
+
+function ThemeCard({ description, isActive, label, onClick, variant }: ThemeCardProps) {
+  return (
+    <button
+      className={cn(
+        'rounded-lg border p-3 text-left transition-colors focus-visible:outline-2 focus-visible:outline-brand',
+        isActive
+          ? 'border-brand bg-brand-soft ring-1 ring-brand'
+          : 'border-border bg-surface hover:border-border-strong hover:bg-surface-hover',
+      )}
+      onClick={onClick}
+      type="button"
+    >
+      <ThemeMiniPreview variant={variant} />
+      <p className="mt-2 text-sm font-semibold text-text">{label}</p>
+      <p className="mt-0.5 text-xs text-text-soft">{description}</p>
+    </button>
+  );
+}
+
+function ThemePreview() {
+  return (
+    <div className="overflow-hidden rounded-lg border border-border bg-app-bg">
+      {/* Mock nav header */}
+      <div className="flex items-center justify-between border-b border-border bg-surface px-4 py-2.5">
+        <div>
+          <p className="text-xs font-semibold uppercase tracking-wide text-brand">Sheetly</p>
+          <p className="text-xs text-text-soft">Personal finance</p>
+        </div>
+        <div className="flex items-center gap-2">
+          <span className="inline-flex items-center rounded-full bg-success-soft px-2 py-0.5 text-xs font-medium text-success">
+            Synced
+          </span>
+        </div>
+      </div>
+      {/* Mock page content */}
+      <div className="p-4">
+        <p className="mb-3 text-xs font-semibold text-text-soft">Dashboard</p>
+        {/* Mock balance card */}
+        <div className="mb-3 rounded-md border border-border bg-surface p-3">
+          <p className="text-xs text-text-soft">Balance</p>
+          <p className="mt-0.5 text-base font-semibold text-text">12,400 UAH</p>
+        </div>
+        {/* Mock action buttons */}
+        <div className="flex gap-2">
+          <div className="flex h-7 items-center rounded-md bg-brand px-3 text-xs font-medium text-text-inverted">
+            Add transaction
+          </div>
+          <div className="flex h-7 items-center rounded-md bg-surface-strong px-3 text-xs font-medium text-text-inverted">
+            Export
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+// ---------- page ----------
+
 export function SettingsPage() {
   const fileInputRef = useRef<HTMLInputElement>(null);
+  const { setTheme, theme } = useTheme();
+  const [isAdvancedOpen, setIsAdvancedOpen] = useState(false);
   const [isConnectOpen, setIsConnectOpen] = useState(false);
   const [isContainersOpen, setIsContainersOpen] = useState(false);
   const [isResetOpen, setIsResetOpen] = useState(false);
@@ -31,7 +221,6 @@ export function SettingsPage() {
   const [currency, setCurrency] = useState(localStorageService.get('currency') ?? 'UAH');
   const [language, setLanguage] = useState(localStorageService.get('language') ?? 'en');
   const [settingsMessage, setSettingsMessage] = useState<string | null>(null);
-  const [theme, setTheme] = useState(localStorageService.get('theme') ?? 'system');
   const spreadsheetId = localStorageService.get('spreadsheetId');
   const googleAuth = useGoogleAuth();
   const { refresh: refreshSyncStatus, status: syncStatus } = useOfflineSyncStatus(spreadsheetId);
@@ -42,21 +231,11 @@ export function SettingsPage() {
     localStorageService.set('containersEnabled', String(enabled));
   }
 
-  function updatePreference(key: 'currency' | 'language' | 'theme', value: string) {
+  function updatePreference(key: 'currency' | 'language', value: string) {
     localStorageService.set(key, value);
     setSettingsMessage('Preferences saved locally.');
-
-    if (key === 'currency') {
-      setCurrency(value);
-    }
-
-    if (key === 'language') {
-      setLanguage(value);
-    }
-
-    if (key === 'theme') {
-      setTheme(value);
-    }
+    if (key === 'currency') setCurrency(value);
+    if (key === 'language') setLanguage(value);
   }
 
   function exportSettings() {
@@ -65,9 +244,7 @@ export function SettingsPage() {
       settings: localStorageService.exportKnownKeys(),
       version: 1,
     };
-    const blob = new Blob([JSON.stringify(payload, null, 2)], {
-      type: 'application/json',
-    });
+    const blob = new Blob([JSON.stringify(payload, null, 2)], { type: 'application/json' });
     const url = URL.createObjectURL(blob);
     const anchor = document.createElement('a');
 
@@ -81,24 +258,19 @@ export function SettingsPage() {
   async function importSettings(event: ChangeEvent<HTMLInputElement>) {
     const file = event.target.files?.[0];
 
-    if (!file) {
-      return;
-    }
+    if (!file) return;
 
     try {
       const payload = JSON.parse(await file.text()) as {
         settings?: ReturnType<typeof localStorageService.exportKnownKeys>;
       };
 
-      if (!payload.settings) {
-        throw new Error('Invalid settings file.');
-      }
+      if (!payload.settings) throw new Error('Invalid settings file.');
 
       localStorageService.importKnownKeys(payload.settings);
       setContainersEnabled(localStorageService.get('containersEnabled') === 'true');
       setCurrency(localStorageService.get('currency') ?? 'UAH');
       setLanguage(localStorageService.get('language') ?? 'en');
-      setTheme(localStorageService.get('theme') ?? 'system');
       setSettingsMessage('Settings imported. Reload the page if connection state looks stale.');
     } catch (error) {
       setSettingsMessage(error instanceof Error ? error.message : 'Could not import settings.');
@@ -134,73 +306,134 @@ export function SettingsPage() {
         </>
       }
     >
-      <PageHeader
-        description="Manage Sheetly preferences and connections without leaving the main app shell."
-        title="Settings"
-      />
+      <PageHeader description="Manage Sheetly preferences and connections." title="Settings" />
       {settingsMessage ? <Toast message={settingsMessage} variant="info" /> : null}
+
+      {/* Appearance */}
       <Card>
-        <div className="flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
-          <div>
-            <div className="flex flex-wrap items-center gap-2">
-              <h2 className="text-lg font-semibold text-zinc-950">Spreadsheet connection</h2>
-              <Badge variant={spreadsheetId ? 'success' : 'warning'}>
-                {spreadsheetId ? 'Connected' : 'Not connected'}
-              </Badge>
-            </div>
-            <p className="mt-1 text-sm text-zinc-600">
-              {spreadsheetId
-                ? `Current spreadsheet id: ${spreadsheetId}`
-                : 'No spreadsheet is connected yet.'}
-            </p>
-          </div>
-          <Button onClick={() => setIsConnectOpen(true)} variant="secondary">
-            Change connection
-          </Button>
+        <h2 className="text-lg font-semibold text-text">Appearance</h2>
+        <p className="mt-1 text-sm text-text-muted">Choose how Sheetly looks on this device.</p>
+        <div className="mt-4 grid grid-cols-1 gap-3 sm:grid-cols-3">
+          <ThemeCard
+            description="White background, clean borders."
+            isActive={theme === 'light'}
+            label="Light"
+            onClick={() => setTheme('light')}
+            variant="light"
+          />
+          <ThemeCard
+            description="Dark navy, reduced eye strain."
+            isActive={theme === 'dark'}
+            label="Dark"
+            onClick={() => setTheme('dark')}
+            variant="dark"
+          />
+          <ThemeCard
+            description="Follows your OS preference."
+            isActive={theme === 'system'}
+            label="System"
+            onClick={() => setTheme('system')}
+            variant="system"
+          />
+        </div>
+        <div className="mt-4">
+          <p className="mb-2 text-xs font-semibold uppercase text-text-soft">Preview</p>
+          <ThemePreview />
         </div>
       </Card>
+
+      {/* General */}
       <Card>
-        <div className="flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
-          <div>
-            <h2 className="text-lg font-semibold text-zinc-950">Google authorization</h2>
-            <p className="mt-1 text-sm text-zinc-600">
-              {googleAuth.isConfigured
-                ? 'Google OAuth client id is configured. Access tokens are kept in memory only.'
-                : 'Set VITE_GOOGLE_CLIENT_ID before using Google authorization.'}
-            </p>
-            {googleAuth.error ? (
-              <p className="mt-2 text-sm text-danger">{googleAuth.error}</p>
-            ) : null}
-          </div>
-          <GoogleConnectButton />
+        <h2 className="text-lg font-semibold text-text">General</h2>
+        <div className="mt-4 grid gap-4 md:grid-cols-2">
+          <Input
+            hint="Fallback currency used in forms."
+            id="default-currency"
+            label="Default currency"
+            maxLength={3}
+            onChange={(event) => updatePreference('currency', event.target.value.toUpperCase())}
+            value={currency}
+          />
+          <Select
+            hint="Stored locally for upcoming localization."
+            id="language"
+            label="Language"
+            onChange={(value) => updatePreference('language', value)}
+            options={[
+              { label: 'English', value: 'en' },
+              { label: 'Russian', value: 'ru' },
+              { label: 'Ukrainian', value: 'uk' },
+            ]}
+            value={language}
+          />
         </div>
       </Card>
+
+      {/* Spreadsheet */}
       <Card>
-        <SetupSpreadsheetButton />
+        <h2 className="text-lg font-semibold text-text">Spreadsheet</h2>
+        <div className="mt-4 divide-y divide-border">
+          <div className="flex flex-col gap-4 pb-4 md:flex-row md:items-center md:justify-between">
+            <div>
+              <div className="flex flex-wrap items-center gap-2">
+                <p className="text-sm font-medium text-text">Connection</p>
+                <Badge variant={spreadsheetId ? 'success' : 'warning'}>
+                  {spreadsheetId ? 'Connected' : 'Not connected'}
+                </Badge>
+              </div>
+              <p className="mt-1 text-sm text-text-muted">
+                {spreadsheetId
+                  ? `Spreadsheet ID: ${spreadsheetId}`
+                  : 'No spreadsheet connected yet.'}
+              </p>
+            </div>
+            <Button onClick={() => setIsConnectOpen(true)} variant="secondary">
+              Change
+            </Button>
+          </div>
+          <div className="flex flex-col gap-4 py-4 md:flex-row md:items-center md:justify-between">
+            <div>
+              <p className="text-sm font-medium text-text">Google authorization</p>
+              <p className="mt-1 text-sm text-text-muted">
+                {googleAuth.isConfigured
+                  ? 'OAuth client ID configured. Tokens are kept in memory only.'
+                  : 'Set VITE_GOOGLE_CLIENT_ID to enable Google authorization.'}
+              </p>
+              {googleAuth.error ? (
+                <p className="mt-1 text-sm text-danger">{googleAuth.error}</p>
+              ) : null}
+            </div>
+            <GoogleConnectButton />
+          </div>
+          <div className="pt-4">
+            <SetupSpreadsheetButton />
+          </div>
+        </div>
       </Card>
+
+      {/* Containers */}
       <Card>
         <div className="flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
           <div>
             <div className="flex flex-wrap items-center gap-2">
-              <h2 className="text-lg font-semibold text-zinc-950">Containers</h2>
+              <h2 className="text-lg font-semibold text-text">Containers</h2>
               <Badge variant={containersEnabled ? 'success' : 'neutral'}>
                 {containersEnabled ? 'Enabled' : 'Disabled'}
               </Badge>
             </div>
-            <p className="mt-1 text-sm text-zinc-600">
-              Containers are separate money stores used by transactions. When enabled, every new
-              transaction requires one.
+            <p className="mt-1 text-sm text-text-muted">
+              Separate money stores for transactions. When enabled, every transaction requires one.
             </p>
           </div>
           <div className="flex flex-wrap items-center gap-3">
-            <label className="flex items-center gap-2 text-sm font-medium text-zinc-700">
+            <label className="flex items-center gap-2 text-sm font-medium text-text-muted">
               <input
                 checked={containersEnabled}
                 className="h-4 w-4 accent-brand"
                 onChange={(event) => toggleContainers(event.target.checked)}
                 type="checkbox"
               />
-              Enable containers
+              Enable
             </label>
             <Button onClick={() => setIsContainersOpen(true)} variant="secondary">
               Manage containers
@@ -208,50 +441,14 @@ export function SettingsPage() {
           </div>
         </div>
       </Card>
-      <Card>
-        <h2 className="text-lg font-semibold text-zinc-950">Preferences</h2>
-        <div className="mt-4 grid gap-4 md:grid-cols-3">
-          <Input
-            hint="Used as the fallback currency in forms."
-            id="default-currency"
-            label="Default currency"
-            maxLength={3}
-            onChange={(event) => updatePreference('currency', event.target.value.toUpperCase())}
-            value={currency}
-          />
-          <Select
-            hint="Stored locally for upcoming localization polish."
-            id="language"
-            label="Language"
-            onChange={(value) => updatePreference('language', value)}
-            options={[
-              { label: 'English', value: 'en' },
-              { label: 'Russian', value: 'ru' },
-              { label: 'Ukrainian', value: 'uk' },
-            ]}
-            value={language}
-          />
-          <Select
-            hint="Theme wiring is prepared for the next UI polish pass."
-            id="theme"
-            label="Theme"
-            onChange={(value) => updatePreference('theme', value)}
-            options={[
-              { label: 'System', value: 'system' },
-              { label: 'Light', value: 'light' },
-              { label: 'Dark', value: 'dark' },
-            ]}
-            value={theme}
-          />
-        </div>
-      </Card>
+
+      {/* Data & Sync */}
       <Card>
         <div className="flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
           <div>
-            <h2 className="text-lg font-semibold text-zinc-950">Local data</h2>
-            <p className="mt-1 text-sm text-zinc-600">
-              Export or import local Sheetly preferences, and reset only this browser cache when
-              diagnostics look stale.
+            <h2 className="text-lg font-semibold text-text">Data &amp; Sync</h2>
+            <p className="mt-1 text-sm text-text-muted">
+              Export or import local preferences, and reset the browser cache when needed.
             </p>
           </div>
           <div className="flex flex-wrap gap-2">
@@ -274,83 +471,138 @@ export function SettingsPage() {
           </div>
         </div>
       </Card>
-      <Card>
-        <div className="flex flex-col gap-4">
-          <div>
-            <h2 className="text-lg font-semibold text-zinc-950">Diagnostics</h2>
-            <div className="mt-3 grid gap-2 text-sm text-zinc-600">
-              <p>Spreadsheet: {spreadsheetId ?? 'not connected'}</p>
-              <p>Google: {googleAuth.status}</p>
-              <p>Network: {syncStatus.isOnline ? 'online' : 'offline'}</p>
-              <p>Cached transactions: {syncStatus.cachedTransactions}</p>
-              <p>
-                Queue: {syncStatus.pending} pending, {syncStatus.failed} failed
-              </p>
-              <p>Last sync: {syncStatus.lastSuccessfulSyncAt ?? 'never'}</p>
-              {syncStatus.lastError ? (
-                <p className="text-danger">Last sync error: {syncStatus.lastError}</p>
-              ) : null}
+
+      {/* Advanced diagnostics — collapsible with mini sync summary when closed */}
+      <div>
+        <div className="overflow-hidden rounded-lg border border-border bg-surface">
+          <button
+            className="flex w-full items-center justify-between px-4 py-3 text-left transition-colors hover:bg-surface-hover"
+            onClick={() => setIsAdvancedOpen((prev) => !prev)}
+            type="button"
+          >
+            <p className="text-sm font-semibold text-text">Advanced diagnostics</p>
+            <span className="shrink-0 text-xs font-medium text-text-soft">
+              {isAdvancedOpen ? 'Hide ↑' : 'Show ↓'}
+            </span>
+          </button>
+          {!isAdvancedOpen ? (
+            <div className="border-t border-border px-4 pb-4 pt-3">
+              <div className="grid gap-1.5 text-sm">
+                <div className="flex gap-2">
+                  <span className="text-text-soft">Sync status:</span>
+                  <span
+                    className={cn(
+                      syncStatus.failed > 0
+                        ? 'text-danger'
+                        : syncStatus.pending > 0
+                          ? 'text-warning'
+                          : 'text-success',
+                    )}
+                  >
+                    {syncStatus.failed > 0
+                      ? `${syncStatus.failed} failed`
+                      : syncStatus.pending > 0
+                        ? `${syncStatus.pending} pending`
+                        : syncStatus.isOnline
+                          ? 'Up to date'
+                          : 'Offline'}
+                  </span>
+                </div>
+                <div className="flex gap-2">
+                  <span className="text-text-soft">Cached transactions:</span>
+                  <span className="text-text">{syncStatus.cachedTransactions}</span>
+                </div>
+                <div className="flex gap-2">
+                  <span className="text-text-soft">Pending changes:</span>
+                  <span className="text-text">{syncStatus.totalQueued}</span>
+                </div>
+              </div>
             </div>
-            <div className="mt-5 rounded-md border border-zinc-200">
-              <div className="flex flex-col gap-3 border-b border-zinc-200 px-3 py-3 md:flex-row md:items-center md:justify-between">
-                <div>
-                  <h3 className="text-sm font-semibold text-zinc-950">Queue inspector</h3>
-                  <p className="text-sm text-zinc-500">
-                    Pending and failed local changes waiting for Google Sheets sync.
+          ) : null}
+        </div>
+        {isAdvancedOpen ? (
+          <Card className="mt-2">
+            <div className="flex flex-col gap-4">
+              <div>
+                <h3 className="text-base font-semibold text-text">Diagnostics</h3>
+                <div className="mt-3 grid gap-2 text-sm text-text-muted">
+                  <p>Spreadsheet: {spreadsheetId ?? 'not connected'}</p>
+                  <p>Google: {googleAuth.status}</p>
+                  <p>Network: {syncStatus.isOnline ? 'online' : 'offline'}</p>
+                  <p>Cached transactions: {syncStatus.cachedTransactions}</p>
+                  <p>
+                    Queue: {syncStatus.pending} pending, {syncStatus.failed} failed
                   </p>
-                </div>
-                <div className="flex flex-wrap gap-2">
-                  <Button
-                    disabled={!syncStatus.totalQueued || isSyncing}
-                    isLoading={isSyncing}
-                    onClick={() => void retryQueuedChanges()}
-                    size="sm"
-                    variant="secondary"
-                  >
-                    Retry all
-                  </Button>
-                  <Button onClick={() => void refreshSyncStatus()} size="sm" variant="ghost">
-                    Refresh queue
-                  </Button>
-                  <Button
-                    disabled={!syncStatus.failed}
-                    onClick={() => void clearFailedQueue()}
-                    size="sm"
-                    variant="danger"
-                  >
-                    Clear failed
-                  </Button>
+                  <p>Last sync: {syncStatus.lastSuccessfulSyncAt ?? 'never'}</p>
+                  {syncStatus.lastError ? (
+                    <p className="text-danger">Last sync error: {syncStatus.lastError}</p>
+                  ) : null}
                 </div>
               </div>
-              <div className="divide-y divide-zinc-100">
-                {syncStatus.queueItems.length ? (
-                  syncStatus.queueItems.map((item) => (
-                    <div className="grid gap-1 px-3 py-3 text-sm text-zinc-600" key={item.id}>
-                      <div className="flex flex-wrap items-center gap-2">
-                        <Badge variant={item.lastError ? 'danger' : 'warning'}>
-                          {item.operation}
-                        </Badge>
-                        <span className="font-medium text-zinc-950">
-                          {item.transaction?.categoryName ?? item.transactionId}
-                        </span>
-                        {item.transaction?.comment ? <span>{item.transaction.comment}</span> : null}
+              <div className="rounded-md border border-border">
+                <div className="flex flex-col gap-3 border-b border-border px-3 py-3 md:flex-row md:items-center md:justify-between">
+                  <div>
+                    <h3 className="text-sm font-semibold text-text">Queue inspector</h3>
+                    <p className="text-sm text-text-soft">
+                      Pending and failed changes waiting for Google Sheets sync.
+                    </p>
+                  </div>
+                  <div className="flex flex-wrap gap-2">
+                    <Button
+                      disabled={!syncStatus.totalQueued || isSyncing}
+                      isLoading={isSyncing}
+                      onClick={() => void retryQueuedChanges()}
+                      size="sm"
+                      variant="secondary"
+                    >
+                      Retry all
+                    </Button>
+                    <Button onClick={() => void refreshSyncStatus()} size="sm" variant="ghost">
+                      Refresh queue
+                    </Button>
+                    <Button
+                      disabled={!syncStatus.failed}
+                      onClick={() => void clearFailedQueue()}
+                      size="sm"
+                      variant="danger"
+                    >
+                      Clear failed
+                    </Button>
+                  </div>
+                </div>
+                <div className="divide-y divide-border">
+                  {syncStatus.queueItems.length ? (
+                    syncStatus.queueItems.map((item) => (
+                      <div className="grid gap-1 px-3 py-3 text-sm text-text-muted" key={item.id}>
+                        <div className="flex flex-wrap items-center gap-2">
+                          <Badge variant={item.lastError ? 'danger' : 'warning'}>
+                            {item.operation}
+                          </Badge>
+                          <span className="font-medium text-text">
+                            {item.transaction?.categoryName ?? item.transactionId}
+                          </span>
+                          {item.transaction?.comment ? (
+                            <span>{item.transaction.comment}</span>
+                          ) : null}
+                        </div>
+                        <p>
+                          Attempts: {item.attempts} · Created: {item.createdAt}
+                        </p>
+                        {item.lastError ? (
+                          <p className="text-danger">Last error: {item.lastError}</p>
+                        ) : null}
                       </div>
-                      <p>
-                        Attempts: {item.attempts} · Created: {item.createdAt}
-                      </p>
-                      {item.lastError ? (
-                        <p className="text-danger">Last error: {item.lastError}</p>
-                      ) : null}
-                    </div>
-                  ))
-                ) : (
-                  <div className="px-3 py-4 text-sm text-zinc-500">Queue is empty.</div>
-                )}
+                    ))
+                  ) : (
+                    <div className="px-3 py-4 text-sm text-text-soft">Queue is empty.</div>
+                  )}
+                </div>
               </div>
             </div>
-          </div>
-        </div>
-      </Card>
+          </Card>
+        ) : null}
+      </div>
+
       <ConnectSpreadsheetModal isOpen={isConnectOpen} onClose={() => setIsConnectOpen(false)} />
       <ManageContainersModal isOpen={isContainersOpen} onClose={() => setIsContainersOpen(false)} />
       <ConfirmModal
diff --git a/app/src/pages/setup/ui/SetupPage.tsx b/app/src/pages/setup/ui/SetupPage.tsx
index 3a99c76..dd25a3a 100644
--- a/app/src/pages/setup/ui/SetupPage.tsx
+++ b/app/src/pages/setup/ui/SetupPage.tsx
@@ -12,7 +12,7 @@ export function SetupPage() {
   const [isConnectOpen, setIsConnectOpen] = useState(false);
 
   return (
-    <main className="grid min-h-screen place-items-center bg-slate-50 p-4">
+    <main className="grid min-h-screen place-items-center bg-app-bg p-4">
       <Card className="w-full max-w-xl">
         <PageHeader
           description="Sheetly stores finance data in your own Google Sheet. Paste a spreadsheet link to create the local connection; Google authorization comes in the next milestone."
diff --git a/app/src/shared/lib/color-ban/color-ban-patterns.test.ts b/app/src/shared/lib/color-ban/color-ban-patterns.test.ts
new file mode 100644
index 0000000..ea97ed3
--- /dev/null
+++ b/app/src/shared/lib/color-ban/color-ban-patterns.test.ts
@@ -0,0 +1,89 @@
+/* eslint-disable color-ban/no-hardcoded-colors */
+import { describe, expect, it } from 'vitest';
+
+// Mirrors the patterns in app/eslint.config.js colorBanPlugin.
+// Keeping them here provides a regression-test spec: if someone edits the rule,
+// the test fails and forces a conscious decision about what's allowed.
+const BANNED: RegExp[] = [
+  /\bbg-white\b/,
+  /\bbg-zinc-\d+/,
+  /\bbg-slate-\d+/,
+  /\btext-zinc-\d+/,
+  /\btext-red-\d+/,
+  /\btext-green-\d+/,
+  /\btext-indigo-\d+/,
+  /\bborder-zinc-\d+/,
+  /\bring-red-\d+/,
+  /\bring-indigo-\d+/,
+  /\bhover:bg-zinc-\d+/,
+];
+
+function findBanned(value: string): string | null {
+  for (const re of BANNED) {
+    const match = re.exec(value);
+    if (match) return match[0];
+  }
+  return null;
+}
+
+describe('color-ban patterns — must catch banned Tailwind utilities', () => {
+  const bannedCases: [string, string][] = [
+    ['bg-white', 'bg-white'],
+    ['bg-zinc-100', 'bg-zinc-100'],
+    ['bg-zinc-900', 'bg-zinc-900'],
+    ['bg-slate-800', 'bg-slate-800'],
+    ['text-zinc-500', 'text-zinc-500'],
+    ['text-red-500', 'text-red-500'],
+    ['text-green-500', 'text-green-500'],
+    ['text-indigo-600', 'text-indigo-600'],
+    ['border-zinc-200', 'border-zinc-200'],
+    ['ring-red-500', 'ring-red-500'],
+    ['ring-indigo-200', 'ring-indigo-200'],
+    // hover: prefix doesn't escape the check — bg-zinc-\d+ catches it first via \b after ':'
+    ['hover:bg-zinc-100', 'bg-zinc-100'],
+    ['embedded in a template className="bg-zinc-50 px-3"', 'bg-zinc-50'],
+    ['multiple classes "text-red-600 font-bold"', 'text-red-600'],
+  ];
+
+  it.each(bannedCases)('catches "%s"', (input, expected) => {
+    expect(findBanned(input)).toBe(expected);
+  });
+});
+
+describe('color-ban patterns — must allow semantic tokens', () => {
+  const allowedCases = [
+    'bg-surface',
+    'bg-surface-hover',
+    'bg-surface-muted',
+    'bg-surface-strong',
+    'bg-app-bg',
+    'bg-brand',
+    'bg-brand-soft',
+    'bg-danger',
+    'bg-danger-soft',
+    'bg-success-soft',
+    'bg-warning-soft',
+    'text-text',
+    'text-text-soft',
+    'text-text-muted',
+    'text-text-inverted',
+    'text-brand',
+    'text-danger',
+    'text-success',
+    'text-warning',
+    'border-border',
+    'border-border-strong',
+    'ring-brand-ring',
+    'ring-danger-soft',
+    'hover:bg-surface-hover',
+    'hover:text-text',
+    // partial words that contain banned substrings but are NOT banned
+    'bg-zinc', // no digit suffix
+    'text-reds', // not text-red-<digit>
+    'bg-whites-soft', // bg-white is only the exact token
+  ];
+
+  it.each(allowedCases)('allows "%s"', (input) => {
+    expect(findBanned(input)).toBeNull();
+  });
+});
diff --git a/app/src/shared/lib/storage/local-storage.service.test.ts b/app/src/shared/lib/storage/local-storage.service.test.ts
new file mode 100644
index 0000000..b68fcbc
--- /dev/null
+++ b/app/src/shared/lib/storage/local-storage.service.test.ts
@@ -0,0 +1,110 @@
+import { afterEach, describe, expect, it } from 'vitest';
+
+import { localStorageService } from './local-storage.service';
+
+afterEach(() => {
+  localStorage.clear();
+});
+
+describe('localStorageService.get', () => {
+  it('returns null for a key that has never been set', () => {
+    expect(localStorageService.get('theme')).toBeNull();
+  });
+
+  it('returns the stored string value', () => {
+    localStorage.setItem('theme', 'dark');
+    expect(localStorageService.get('theme')).toBe('dark');
+  });
+});
+
+describe('localStorageService.set', () => {
+  it('persists the value so get returns it', () => {
+    localStorageService.set('theme', 'light');
+    expect(localStorage.getItem('theme')).toBe('light');
+  });
+
+  it('overwrites an existing value', () => {
+    localStorageService.set('theme', 'dark');
+    localStorageService.set('theme', 'system');
+    expect(localStorage.getItem('theme')).toBe('system');
+  });
+});
+
+describe('localStorageService.remove', () => {
+  it('deletes a previously stored key', () => {
+    localStorageService.set('theme', 'dark');
+    localStorageService.remove('theme');
+    expect(localStorage.getItem('theme')).toBeNull();
+  });
+
+  it('is a no-op for a key that does not exist', () => {
+    expect(() => localStorageService.remove('theme')).not.toThrow();
+  });
+});
+
+describe('localStorageService.exportKnownKeys', () => {
+  it('returns null for all keys when storage is empty', () => {
+    const snapshot = localStorageService.exportKnownKeys();
+    expect(Object.values(snapshot).every((v) => v === null)).toBe(true);
+  });
+
+  it('includes the stored value for each set key', () => {
+    localStorageService.set('theme', 'dark');
+    localStorageService.set('currency', 'USD');
+    const snapshot = localStorageService.exportKnownKeys();
+    expect(snapshot.theme).toBe('dark');
+    expect(snapshot.currency).toBe('USD');
+    expect(snapshot.language).toBeNull();
+  });
+
+  it('does not include unknown/external keys', () => {
+    localStorage.setItem('someRandomKey', 'value');
+    const snapshot = localStorageService.exportKnownKeys();
+    expect(Object.keys(snapshot)).not.toContain('someRandomKey');
+  });
+});
+
+describe('localStorageService.importKnownKeys', () => {
+  it('writes provided keys to storage', () => {
+    localStorageService.importKnownKeys({ theme: 'light', currency: 'EUR' });
+    expect(localStorage.getItem('theme')).toBe('light');
+    expect(localStorage.getItem('currency')).toBe('EUR');
+  });
+
+  it('skips keys with null values', () => {
+    localStorage.setItem('theme', 'dark');
+    localStorageService.importKnownKeys({ theme: null });
+    expect(localStorage.getItem('theme')).toBe('dark');
+  });
+
+  it('skips keys with undefined values', () => {
+    localStorage.setItem('theme', 'dark');
+    localStorageService.importKnownKeys({ language: undefined });
+    expect(localStorage.getItem('theme')).toBe('dark');
+  });
+
+  it('only imports known keys — unknown keys are ignored', () => {
+    localStorageService.importKnownKeys({ theme: 'dark' } as never);
+    expect(localStorage.getItem('rogue')).toBeNull();
+  });
+});
+
+describe('localStorageService.clearKnownKeys', () => {
+  it('removes all known keys', () => {
+    localStorageService.set('theme', 'dark');
+    localStorageService.set('currency', 'USD');
+    localStorageService.set('spreadsheetId', 'abc123');
+
+    localStorageService.clearKnownKeys();
+
+    expect(localStorage.getItem('theme')).toBeNull();
+    expect(localStorage.getItem('currency')).toBeNull();
+    expect(localStorage.getItem('spreadsheetId')).toBeNull();
+  });
+
+  it('does not remove unknown keys', () => {
+    localStorage.setItem('externalKey', 'should-survive');
+    localStorageService.clearKnownKeys();
+    expect(localStorage.getItem('externalKey')).toBe('should-survive');
+  });
+});
diff --git a/app/src/shared/ui/badge/Badge.tsx b/app/src/shared/ui/badge/Badge.tsx
index c3ba8c8..f7f48ea 100644
--- a/app/src/shared/ui/badge/Badge.tsx
+++ b/app/src/shared/ui/badge/Badge.tsx
@@ -9,11 +9,11 @@ type BadgeProps = HTMLAttributes<HTMLSpanElement> & {
 };
 
 const variantClasses: Record<BadgeVariant, string> = {
-  danger: 'bg-red-50 text-red-700 ring-red-200',
-  info: 'bg-indigo-50 text-indigo-700 ring-indigo-200',
-  neutral: 'bg-zinc-100 text-zinc-700 ring-zinc-200',
-  success: 'bg-green-50 text-green-700 ring-green-200',
-  warning: 'bg-amber-50 text-amber-700 ring-amber-200',
+  danger: 'bg-danger-soft text-danger ring-danger/20',
+  info: 'bg-info-soft text-info ring-info/20',
+  neutral: 'bg-surface-muted text-text-muted ring-border',
+  success: 'bg-success-soft text-success ring-success/20',
+  warning: 'bg-warning-soft text-warning ring-warning/20',
 };
 
 export function Badge({ className, variant = 'neutral', ...props }: BadgeProps) {
diff --git a/app/src/shared/ui/button/button-variants.ts b/app/src/shared/ui/button/button-variants.ts
index da81ca6..510d618 100644
--- a/app/src/shared/ui/button/button-variants.ts
+++ b/app/src/shared/ui/button/button-variants.ts
@@ -4,10 +4,12 @@ export type ButtonVariant = 'primary' | 'secondary' | 'ghost' | 'danger';
 export type ButtonSize = 'sm' | 'md' | 'lg';
 
 const variantClasses: Record<ButtonVariant, string> = {
-  primary: 'bg-brand text-white hover:bg-indigo-500 focus-visible:outline-brand',
-  secondary: 'bg-zinc-900 text-white hover:bg-zinc-700 focus-visible:outline-zinc-900',
-  ghost: 'bg-transparent text-zinc-700 hover:bg-zinc-100 focus-visible:outline-zinc-400',
-  danger: 'bg-danger text-white hover:bg-red-500 focus-visible:outline-danger',
+  primary: 'bg-brand text-text-inverted hover:bg-brand-hover focus-visible:outline-brand',
+  secondary:
+    'bg-surface-strong text-text-inverted hover:bg-surface-strong/80 focus-visible:outline-surface-strong',
+  ghost:
+    'bg-transparent text-text-muted hover:bg-surface-hover focus-visible:outline-border-strong',
+  danger: 'bg-danger text-text-inverted hover:bg-danger-hover focus-visible:outline-danger',
 };
 
 const sizeClasses: Record<ButtonSize, string> = {
diff --git a/app/src/shared/ui/card/Card.tsx b/app/src/shared/ui/card/Card.tsx
index 454877e..f313769 100644
--- a/app/src/shared/ui/card/Card.tsx
+++ b/app/src/shared/ui/card/Card.tsx
@@ -5,7 +5,7 @@ import { cn } from '@shared/lib/classnames/cn';
 export function Card({ className, ...props }: HTMLAttributes<HTMLDivElement>) {
   return (
     <div
-      className={cn('rounded-lg border border-zinc-200 bg-white p-5 shadow-sm', className)}
+      className={cn('rounded-lg border border-border bg-surface p-5 shadow-sm', className)}
       {...props}
     />
   );
diff --git a/app/src/shared/ui/combobox/Combobox.tsx b/app/src/shared/ui/combobox/Combobox.tsx
index a10535e..3d6b409 100644
--- a/app/src/shared/ui/combobox/Combobox.tsx
+++ b/app/src/shared/ui/combobox/Combobox.tsx
@@ -82,7 +82,7 @@ export function Combobox<TItem extends ComboboxItem>({
   }
 
   return (
-    <div className="relative grid gap-2 text-sm font-medium text-zinc-700" ref={rootRef}>
+    <div className="relative grid gap-2 text-sm font-medium text-text-muted" ref={rootRef}>
       <label htmlFor={generatedId}>{label}</label>
       <input
         aria-activedescendant={
@@ -94,8 +94,8 @@ export function Combobox<TItem extends ComboboxItem>({
         aria-expanded={isOpen}
         aria-invalid={Boolean(error)}
         className={cn(
-          'h-10 rounded-md border border-zinc-200 bg-white px-3 text-sm text-zinc-900 outline-none transition placeholder:text-zinc-400 focus:border-brand focus:ring-2 focus:ring-indigo-100 disabled:cursor-not-allowed disabled:bg-zinc-100 disabled:text-zinc-500',
-          error && 'border-danger focus:border-danger focus:ring-red-100',
+          'h-10 rounded-md border border-border bg-surface px-3 text-sm text-text outline-none transition placeholder:text-text-soft focus:border-brand focus:ring-2 focus:ring-brand-ring disabled:cursor-not-allowed disabled:bg-surface-muted disabled:text-text-soft',
+          error && 'border-danger focus:border-danger focus:ring-danger-soft',
         )}
         disabled={disabled}
         id={generatedId}
@@ -134,7 +134,7 @@ export function Combobox<TItem extends ComboboxItem>({
       />
       {description ? (
         <span
-          className={cn('text-xs font-normal text-zinc-500', error && 'text-danger')}
+          className={cn('text-xs font-normal text-text-soft', error && 'text-danger')}
           id={descriptionId}
         >
           {description}
@@ -142,7 +142,7 @@ export function Combobox<TItem extends ComboboxItem>({
       ) : null}
       {isOpen ? (
         <div
-          className="absolute top-full z-40 mt-1 max-h-60 w-full overflow-auto rounded-md border border-zinc-200 bg-white p-1 shadow-lg"
+          className="absolute top-full z-40 mt-1 max-h-60 w-full overflow-auto rounded-md border border-border bg-surface p-1 shadow-lg"
           id={listboxId}
           role="listbox"
         >
@@ -150,8 +150,8 @@ export function Combobox<TItem extends ComboboxItem>({
             options.map((option, index) => (
               <button
                 className={cn(
-                  'flex w-full items-center rounded px-3 py-2 text-left text-sm text-zinc-700 hover:bg-zinc-100',
-                  index === activeIndex && 'bg-zinc-100',
+                  'flex w-full items-center rounded px-3 py-2 text-left text-sm text-text-muted hover:bg-surface-hover',
+                  index === activeIndex && 'bg-surface-hover',
                   option.kind === 'create' && 'font-medium text-brand',
                 )}
                 id={`${generatedId}-option-${index}`}
@@ -168,7 +168,7 @@ export function Combobox<TItem extends ComboboxItem>({
               </button>
             ))
           ) : (
-            <div className="px-3 py-2 text-sm text-zinc-500">{emptyLabel}</div>
+            <div className="px-3 py-2 text-sm text-text-soft">{emptyLabel}</div>
           )}
         </div>
       ) : null}
diff --git a/app/src/shared/ui/date-picker/DatePicker.tsx b/app/src/shared/ui/date-picker/DatePicker.tsx
index eab2290..dd625bf 100644
--- a/app/src/shared/ui/date-picker/DatePicker.tsx
+++ b/app/src/shared/ui/date-picker/DatePicker.tsx
@@ -85,7 +85,7 @@ export function DatePicker({ error, hint, id, label, onChange, value }: DatePick
   const todayStr = toDateString(today);
 
   return (
-    <div className="relative grid gap-2 text-sm font-medium text-zinc-700" ref={containerRef}>
+    <div className="relative grid gap-2 text-sm font-medium text-text-muted" ref={containerRef}>
       {label ? <span id={`${inputId}-label`}>{label}</span> : null}
 
       <button
@@ -93,9 +93,9 @@ export function DatePicker({ error, hint, id, label, onChange, value }: DatePick
         aria-haspopup="dialog"
         aria-labelledby={label ? `${inputId}-label` : undefined}
         className={cn(
-          'flex h-10 w-full items-center justify-between gap-2 rounded-md border border-zinc-200 bg-white px-3 text-left text-sm outline-none transition hover:border-zinc-300 focus:border-brand focus:ring-2 focus:ring-indigo-100',
-          value ? 'text-zinc-900' : 'text-zinc-400',
-          error && 'border-danger focus:border-danger focus:ring-red-100',
+          'flex h-10 w-full items-center justify-between gap-2 rounded-md border border-border bg-surface px-3 text-left text-sm outline-none transition hover:border-border-strong focus:border-brand focus:ring-2 focus:ring-brand-ring',
+          value ? 'text-text' : 'text-text-soft',
+          error && 'border-danger focus:border-danger focus:ring-danger-soft',
         )}
         id={inputId}
         onClick={() => setIsOpen((o) => !o)}
@@ -106,29 +106,29 @@ export function DatePicker({ error, hint, id, label, onChange, value }: DatePick
       </button>
 
       {description ? (
-        <span className={cn('text-xs font-normal text-zinc-500', error && 'text-danger')}>
+        <span className={cn('text-xs font-normal text-text-soft', error && 'text-danger')}>
           {description}
         </span>
       ) : null}
 
       {isOpen ? (
         <div
-          className="absolute left-0 top-full z-50 mt-1.5 w-[min(18rem,calc(100vw-2rem))] overflow-hidden rounded-xl border border-zinc-200 bg-white shadow-xl"
+          className="absolute left-0 top-full z-50 mt-1.5 w-[min(18rem,calc(100vw-2rem))] overflow-hidden rounded-xl border border-border bg-surface shadow-xl"
           role="dialog"
         >
           <div className="flex items-center justify-between px-3 py-2.5">
             <button
-              className="flex size-7 items-center justify-center rounded-md text-zinc-400 transition hover:bg-zinc-100 hover:text-zinc-700"
+              className="flex size-7 items-center justify-center rounded-md text-text-soft transition hover:bg-surface-hover hover:text-text-muted"
               onClick={() => moveMonth(-1)}
               type="button"
             >
               <ChevronLeftIcon />
             </button>
-            <span className="text-sm font-semibold text-zinc-900">
+            <span className="text-sm font-semibold text-text">
               {MONTHS[viewDate.getMonth()]} {viewDate.getFullYear()}
             </span>
             <button
-              className="flex size-7 items-center justify-center rounded-md text-zinc-400 transition hover:bg-zinc-100 hover:text-zinc-700"
+              className="flex size-7 items-center justify-center rounded-md text-text-soft transition hover:bg-surface-hover hover:text-text-muted"
               onClick={() => moveMonth(1)}
               type="button"
             >
@@ -139,7 +139,7 @@ export function DatePicker({ error, hint, id, label, onChange, value }: DatePick
           <div className="px-3 pb-2">
             <div className="grid grid-cols-7">
               {WEEKDAYS.map((day) => (
-                <div className="py-1 text-center text-xs font-medium text-zinc-400" key={day}>
+                <div className="py-1 text-center text-xs font-medium text-text-soft" key={day}>
                   {day}
                 </div>
               ))}
@@ -162,10 +162,10 @@ export function DatePicker({ error, hint, id, label, onChange, value }: DatePick
                     className={cn(
                       'flex h-8 w-full items-center justify-center rounded-lg text-sm transition',
                       isSelected
-                        ? 'bg-brand font-semibold text-white'
+                        ? 'bg-brand font-semibold text-text-inverted'
                         : isToday
-                          ? 'border border-brand font-semibold text-brand hover:bg-indigo-50'
-                          : 'text-zinc-700 hover:bg-zinc-100 hover:text-zinc-900',
+                          ? 'border border-brand font-semibold text-brand hover:bg-brand-soft'
+                          : 'text-text-muted hover:bg-surface-hover hover:text-text',
                     )}
                     key={day}
                     onClick={() => {
@@ -181,9 +181,9 @@ export function DatePicker({ error, hint, id, label, onChange, value }: DatePick
             </div>
           </div>
 
-          <div className="flex items-center justify-between border-t border-zinc-100 px-4 py-2.5">
+          <div className="flex items-center justify-between border-t border-border px-4 py-2.5">
             <button
-              className="text-xs font-medium text-zinc-500 transition hover:text-danger"
+              className="text-xs font-medium text-text-soft transition hover:text-danger"
               onClick={() => {
                 onChange('');
                 setIsOpen(false);
@@ -193,7 +193,7 @@ export function DatePicker({ error, hint, id, label, onChange, value }: DatePick
               Clear
             </button>
             <button
-              className="text-xs font-medium text-brand transition hover:text-indigo-500"
+              className="text-xs font-medium text-brand transition hover:text-brand-hover"
               onClick={() => {
                 const t = new Date();
                 setViewDate(new Date(t.getFullYear(), t.getMonth(), 1));
@@ -215,7 +215,7 @@ function CalendarIcon() {
   return (
     <svg
       aria-hidden="true"
-      className="size-4 shrink-0 text-zinc-400"
+      className="size-4 shrink-0 text-text-soft"
       fill="none"
       stroke="currentColor"
       strokeWidth={1.5}
diff --git a/app/src/shared/ui/empty-state/EmptyState.tsx b/app/src/shared/ui/empty-state/EmptyState.tsx
index 610d362..89c19e7 100644
--- a/app/src/shared/ui/empty-state/EmptyState.tsx
+++ b/app/src/shared/ui/empty-state/EmptyState.tsx
@@ -23,12 +23,12 @@ export function EmptyState({
   return (
     <div
       className={cn(
-        'rounded-lg border border-dashed border-zinc-300 bg-white p-8 text-center',
+        'rounded-lg border border-dashed border-border-strong bg-surface p-8 text-center',
         className,
       )}
     >
-      <h2 className="text-lg font-semibold text-zinc-950">{title}</h2>
-      <p className="mx-auto mt-2 max-w-md text-sm text-zinc-600">{description}</p>
+      <h2 className="text-lg font-semibold text-text">{title}</h2>
+      <p className="mx-auto mt-2 max-w-md text-sm text-text-muted">{description}</p>
       {actionLabel && onAction ? (
         <div className="mt-5 flex justify-center gap-2">
           <Button onClick={onAction}>{actionLabel}</Button>
diff --git a/app/src/shared/ui/input/Input.tsx b/app/src/shared/ui/input/Input.tsx
index babf2ef..6a2e424 100644
--- a/app/src/shared/ui/input/Input.tsx
+++ b/app/src/shared/ui/input/Input.tsx
@@ -16,14 +16,14 @@ export function Input({ className, error, hint, id, label, ...props }: InputProp
   const description = error ?? hint;
 
   return (
-    <label className="grid gap-2 text-sm font-medium text-zinc-700" htmlFor={inputId}>
+    <label className="grid gap-2 text-sm font-medium text-text-muted" htmlFor={inputId}>
       {label ? <span>{label}</span> : null}
       <input
         aria-describedby={description ? descriptionId : undefined}
         aria-invalid={Boolean(error)}
         className={cn(
-          'h-10 rounded-md border border-zinc-200 bg-white px-3 text-sm text-zinc-900 outline-none transition placeholder:text-zinc-400 focus:border-brand focus:ring-2 focus:ring-indigo-100 disabled:cursor-not-allowed disabled:bg-zinc-100 disabled:text-zinc-500',
-          error && 'border-danger focus:border-danger focus:ring-red-100',
+          'h-10 rounded-md border border-border bg-surface px-3 text-sm text-text outline-none transition placeholder:text-text-soft focus:border-brand focus:ring-2 focus:ring-brand-ring disabled:cursor-not-allowed disabled:bg-surface-muted disabled:text-text-soft',
+          error && 'border-danger focus:border-danger focus:ring-danger-soft',
           className,
         )}
         id={inputId}
@@ -31,7 +31,7 @@ export function Input({ className, error, hint, id, label, ...props }: InputProp
       />
       {description ? (
         <span
-          className={cn('text-xs font-normal text-zinc-500', error && 'text-danger')}
+          className={cn('text-xs font-normal text-text-soft', error && 'text-danger')}
           id={descriptionId}
         >
           {description}
diff --git a/app/src/shared/ui/loader/Loader.tsx b/app/src/shared/ui/loader/Loader.tsx
index 68c8e81..1ef476a 100644
--- a/app/src/shared/ui/loader/Loader.tsx
+++ b/app/src/shared/ui/loader/Loader.tsx
@@ -4,8 +4,8 @@ type LoaderProps = {
 
 export function Loader({ label = 'Loading' }: LoaderProps) {
   return (
-    <div className="flex items-center gap-3 text-sm text-zinc-600">
-      <span className="size-4 animate-spin rounded-full border-2 border-zinc-200 border-t-brand" />
+    <div className="flex items-center gap-3 text-sm text-text-muted">
+      <span className="size-4 animate-spin rounded-full border-2 border-border border-t-brand" />
       <span>{label}</span>
     </div>
   );
diff --git a/app/src/shared/ui/modal/Modal.tsx b/app/src/shared/ui/modal/Modal.tsx
index 55f850f..018a3e7 100644
--- a/app/src/shared/ui/modal/Modal.tsx
+++ b/app/src/shared/ui/modal/Modal.tsx
@@ -38,7 +38,7 @@ export function Modal({ children, description, footer, isOpen, onClose, title }:
 
   return (
     <div
-      className="fixed inset-0 z-50 grid place-items-end bg-zinc-950/40 p-0 sm:place-items-center sm:p-4"
+      className="fixed inset-0 z-50 grid place-items-end bg-text/40 p-0 sm:place-items-center sm:p-4"
       onMouseDown={(event) => {
         if (event.target === event.currentTarget) {
           onClose();
@@ -49,16 +49,16 @@ export function Modal({ children, description, footer, isOpen, onClose, title }:
         aria-describedby={description ? descriptionId : undefined}
         aria-labelledby={titleId}
         aria-modal="true"
-        className="max-h-[92vh] w-full overflow-y-auto rounded-t-lg bg-white shadow-xl sm:max-w-lg sm:rounded-lg"
+        className="max-h-[92vh] w-full overflow-y-auto rounded-t-lg bg-surface shadow-xl sm:max-w-lg sm:rounded-lg"
         role="dialog"
       >
-        <header className="flex items-start justify-between gap-3 border-b border-zinc-200 p-4 sm:p-5">
+        <header className="flex items-start justify-between gap-3 border-b border-border p-4 sm:p-5">
           <div>
-            <h2 className="text-lg font-semibold text-zinc-950" id={titleId}>
+            <h2 className="text-lg font-semibold text-text" id={titleId}>
               {title}
             </h2>
             {description ? (
-              <p className="mt-1 text-sm text-zinc-600" id={descriptionId}>
+              <p className="mt-1 text-sm text-text-muted" id={descriptionId}>
                 {description}
               </p>
             ) : null}
@@ -68,7 +68,7 @@ export function Modal({ children, description, footer, isOpen, onClose, title }:
           </Button>
         </header>
         <div className="p-4 sm:p-5">{children}</div>
-        {footer ? <footer className="border-t border-zinc-200 p-4 sm:p-5">{footer}</footer> : null}
+        {footer ? <footer className="border-t border-border p-4 sm:p-5">{footer}</footer> : null}
       </section>
     </div>
   );
diff --git a/app/src/shared/ui/page-header/PageHeader.tsx b/app/src/shared/ui/page-header/PageHeader.tsx
index a440bed..41d4f38 100644
--- a/app/src/shared/ui/page-header/PageHeader.tsx
+++ b/app/src/shared/ui/page-header/PageHeader.tsx
@@ -10,9 +10,9 @@ export function PageHeader({ actions, description, title }: PageHeaderProps) {
   return (
     <div className="flex flex-col gap-4 md:flex-row md:items-start md:justify-between">
       <div className="min-w-0">
-        <h1 className="text-2xl font-semibold text-zinc-950">{title}</h1>
+        <h1 className="text-2xl font-semibold text-text">{title}</h1>
         {description ? (
-          <p className="mt-2 max-w-2xl text-sm leading-6 text-zinc-600">{description}</p>
+          <p className="mt-2 max-w-2xl text-sm leading-6 text-text-muted">{description}</p>
         ) : null}
       </div>
       {actions ? (
diff --git a/app/src/shared/ui/select/Select.test.tsx b/app/src/shared/ui/select/Select.test.tsx
new file mode 100644
index 0000000..57ecb62
--- /dev/null
+++ b/app/src/shared/ui/select/Select.test.tsx
@@ -0,0 +1,116 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { describe, expect, it, vi } from 'vitest';
+
+import { Select } from './Select';
+
+const OPTIONS = [
+  { label: 'Apple', value: 'apple' },
+  { label: 'Banana', value: 'banana' },
+  { label: 'Cherry', value: 'cherry' },
+];
+
+function setup(overrides = {}) {
+  const onChange = vi.fn();
+  const user = userEvent.setup();
+  render(<Select onChange={onChange} options={OPTIONS} value="" {...overrides} />);
+  return { onChange, user };
+}
+
+// ── Rendering ─────────────────────────────────────────────────────────────────
+
+describe('Select rendering', () => {
+  it('shows the label when provided', () => {
+    setup({ label: 'Fruit' });
+    expect(screen.getByText('Fruit')).toBeInTheDocument();
+  });
+
+  it('shows fallback text when no option matches the value', () => {
+    setup({ value: '' });
+    expect(screen.getByRole('button', { name: /select\.\.\./i })).toBeInTheDocument();
+  });
+
+  it('shows the selected option label', () => {
+    setup({ value: 'banana' });
+    expect(screen.getByRole('button').textContent).toContain('Banana');
+  });
+
+  it('renders a chevron icon by default (not loading)', () => {
+    const { container } = render(<Select onChange={vi.fn()} options={OPTIONS} value="apple" />);
+    // Spinner has a specific arc path; chevron has the down-chevron path
+    expect(container.querySelector('path[d="m6 9 6 6 6-6"]')).not.toBeNull();
+    expect(container.querySelector('path[d="M12 2C6.477 2 2 6.477 2 12"]')).toBeNull();
+  });
+
+  it('renders spinner icon when isLoading is true', () => {
+    const { container } = render(
+      <Select isLoading onChange={vi.fn()} options={OPTIONS} value="apple" />,
+    );
+    expect(container.querySelector('path[d="M12 2C6.477 2 2 6.477 2 12"]')).not.toBeNull();
+    expect(container.querySelector('path[d="m6 9 6 6 6-6"]')).toBeNull();
+  });
+
+  it('shows error message when error prop is provided', () => {
+    setup({ error: 'Required field' });
+    expect(screen.getByText('Required field')).toBeInTheDocument();
+  });
+
+  it('shows hint text when hint prop is provided', () => {
+    setup({ hint: 'Choose a fruit' });
+    expect(screen.getByText('Choose a fruit')).toBeInTheDocument();
+  });
+});
+
+// ── Interaction ───────────────────────────────────────────────────────────────
+
+describe('Select interaction', () => {
+  it('opens the dropdown when trigger is clicked', async () => {
+    const { user } = setup({ value: 'apple' });
+    await user.click(screen.getByRole('button', { name: /apple/i }));
+    expect(screen.getByRole('listbox')).toBeInTheDocument();
+  });
+
+  it('closes the dropdown after selecting an option', async () => {
+    const { user } = setup({ value: 'apple' });
+    await user.click(screen.getByRole('button', { name: /apple/i }));
+    await user.click(screen.getByRole('option', { name: /banana/i }));
+    expect(screen.queryByRole('listbox')).toBeNull();
+  });
+
+  it('calls onChange with the selected option value', async () => {
+    const { user, onChange } = setup({ value: 'apple' });
+    await user.click(screen.getByRole('button', { name: /apple/i }));
+    await user.click(screen.getByRole('option', { name: /cherry/i }));
+    expect(onChange).toHaveBeenCalledWith('cherry');
+  });
+
+  it('closes on Escape key', async () => {
+    const { user } = setup({ value: 'apple' });
+    await user.click(screen.getByRole('button', { name: /apple/i }));
+    expect(screen.getByRole('listbox')).toBeInTheDocument();
+    await user.keyboard('{Escape}');
+    expect(screen.queryByRole('listbox')).toBeNull();
+  });
+
+  it('does NOT open when isLoading is true', async () => {
+    const { user } = setup({ isLoading: true, value: 'apple' });
+    // The trigger button is disabled-by-design when loading: clicking it opens nothing
+    const trigger = screen.getAllByRole('button')[0];
+    await user.click(trigger);
+    expect(screen.queryByRole('listbox')).toBeNull();
+  });
+
+  it('does NOT open when disabled', async () => {
+    const { user } = setup({ disabled: true, value: 'apple' });
+    const trigger = screen.getByRole('button');
+    await user.click(trigger);
+    expect(screen.queryByRole('listbox')).toBeNull();
+  });
+
+  it('marks the currently selected option with aria-selected', async () => {
+    const { user } = setup({ value: 'banana' });
+    await user.click(screen.getByRole('button', { name: /banana/i }));
+    const selected = screen.getByRole('option', { name: /banana/i });
+    expect(selected).toHaveAttribute('aria-selected', 'true');
+  });
+});
diff --git a/app/src/shared/ui/select/Select.tsx b/app/src/shared/ui/select/Select.tsx
index b36122c..a929a3e 100644
--- a/app/src/shared/ui/select/Select.tsx
+++ b/app/src/shared/ui/select/Select.tsx
@@ -12,6 +12,7 @@ type SelectProps = {
   error?: string;
   hint?: string;
   id?: string;
+  isLoading?: boolean;
   label?: string;
   onChange: (value: string) => void;
   options: SelectOption[];
@@ -23,6 +24,7 @@ export function Select({
   error,
   hint,
   id,
+  isLoading,
   label,
   onChange,
   options,
@@ -59,7 +61,7 @@ export function Select({
   }, [isOpen]);
 
   return (
-    <div className="relative grid gap-2 text-sm font-medium text-zinc-700" ref={containerRef}>
+    <div className="relative grid gap-2 text-sm font-medium text-text-muted" ref={containerRef}>
       {label ? <span id={`${selectId}-label`}>{label}</span> : null}
 
       <button
@@ -68,32 +70,38 @@ export function Select({
         aria-invalid={Boolean(error)}
         aria-labelledby={label ? `${selectId}-label` : undefined}
         className={cn(
-          'flex h-10 w-full items-center justify-between gap-2 rounded-md border border-zinc-200 bg-white px-3 text-left text-sm text-zinc-900 outline-none transition hover:border-zinc-300 focus:border-brand focus:ring-2 focus:ring-indigo-100',
-          disabled && 'cursor-not-allowed bg-zinc-100 text-zinc-500 hover:border-zinc-200',
-          error && 'border-danger focus:border-danger focus:ring-red-100',
+          'flex h-10 w-full items-center justify-between gap-2 rounded-md border border-border bg-surface px-3 text-left text-sm text-text outline-none transition hover:border-border-strong focus:border-brand focus:ring-2 focus:ring-brand-ring',
+          disabled && 'cursor-not-allowed bg-surface-muted text-text-soft hover:border-border',
+          error && 'border-danger focus:border-danger focus:ring-danger-soft',
         )}
         disabled={disabled}
-        onClick={() => setIsOpen((o) => !o)}
+        onClick={() => {
+          if (!isLoading) setIsOpen((o) => !o);
+        }}
         type="button"
       >
         <span className="truncate">{selectedOption?.label ?? 'Select...'}</span>
-        <ChevronDownIcon
-          className={cn(
-            'size-4 shrink-0 text-zinc-400 transition-transform duration-150',
-            isOpen && 'rotate-180',
-          )}
-        />
+        {isLoading ? (
+          <SpinnerIcon className="size-4 shrink-0 animate-spin text-text-soft" />
+        ) : (
+          <ChevronDownIcon
+            className={cn(
+              'size-4 shrink-0 text-text-soft transition-transform duration-150',
+              isOpen && 'rotate-180',
+            )}
+          />
+        )}
       </button>
 
       {description ? (
-        <span className={cn('text-xs font-normal text-zinc-500', error && 'text-danger')}>
+        <span className={cn('text-xs font-normal text-text-soft', error && 'text-danger')}>
           {description}
         </span>
       ) : null}
 
       {isOpen && !disabled ? (
         <div
-          className="absolute top-full z-50 mt-1.5 max-h-64 w-full min-w-max overflow-auto rounded-xl border border-zinc-200 bg-white p-1 shadow-xl"
+          className="absolute top-full z-50 mt-1.5 max-h-64 w-full min-w-max overflow-auto rounded-xl border border-border bg-surface p-1 shadow-xl"
           role="listbox"
         >
           {options.map((option) => {
@@ -104,8 +112,8 @@ export function Select({
                 className={cn(
                   'flex w-full items-center gap-2 rounded-lg px-3 py-2 text-left text-sm transition',
                   isSelected
-                    ? 'bg-indigo-50 font-medium text-brand'
-                    : 'text-zinc-700 hover:bg-zinc-50 hover:text-zinc-900',
+                    ? 'bg-brand-soft font-medium text-brand'
+                    : 'text-text-muted hover:bg-surface-hover hover:text-text',
                 )}
                 key={option.value}
                 onClick={() => {
@@ -157,3 +165,18 @@ function CheckIcon({ className }: { className?: string }) {
     </svg>
   );
 }
+
+function SpinnerIcon({ className }: { className?: string }) {
+  return (
+    <svg
+      aria-hidden="true"
+      className={className}
+      fill="none"
+      stroke="currentColor"
+      strokeWidth={2}
+      viewBox="0 0 24 24"
+    >
+      <path d="M12 2C6.477 2 2 6.477 2 12" strokeLinecap="round" />
+    </svg>
+  );
+}
diff --git a/app/src/shared/ui/skeleton/Skeleton.tsx b/app/src/shared/ui/skeleton/Skeleton.tsx
index db29825..3e0bb4e 100644
--- a/app/src/shared/ui/skeleton/Skeleton.tsx
+++ b/app/src/shared/ui/skeleton/Skeleton.tsx
@@ -6,7 +6,7 @@ export function Skeleton({ className, ...props }: HTMLAttributes<HTMLDivElement>
   return (
     <div
       aria-hidden="true"
-      className={cn('animate-pulse rounded-md bg-zinc-200', className)}
+      className={cn('animate-pulse rounded-md bg-border', className)}
       {...props}
     />
   );
diff --git a/app/src/shared/ui/toast/Toast.tsx b/app/src/shared/ui/toast/Toast.tsx
index bf49155..f005748 100644
--- a/app/src/shared/ui/toast/Toast.tsx
+++ b/app/src/shared/ui/toast/Toast.tsx
@@ -9,9 +9,9 @@ type ToastProps = {
 };
 
 const variantClasses: Record<ToastVariant, string> = {
-  error: 'border-red-200 bg-red-50 text-red-900',
-  info: 'border-indigo-200 bg-indigo-50 text-indigo-950',
-  success: 'border-green-200 bg-green-50 text-green-900',
+  error: 'border-danger/20 bg-danger-soft text-danger',
+  info: 'border-info/20 bg-info-soft text-info',
+  success: 'border-success/20 bg-success-soft text-success',
 };
 
 export function Toast({ message, title, variant = 'info' }: ToastProps) {
diff --git a/app/src/test-setup.ts b/app/src/test-setup.ts
new file mode 100644
index 0000000..7b0828b
--- /dev/null
+++ b/app/src/test-setup.ts
@@ -0,0 +1 @@
+import '@testing-library/jest-dom';
diff --git a/app/src/widgets/app-layout/ui/AppLayout.tsx b/app/src/widgets/app-layout/ui/AppLayout.tsx
index 24d7725..efc6455 100644
--- a/app/src/widgets/app-layout/ui/AppLayout.tsx
+++ b/app/src/widgets/app-layout/ui/AppLayout.tsx
@@ -22,25 +22,25 @@ export function AppLayout({ actions, children }: AppLayoutProps) {
     : { label: 'Offline', variant: 'warning' as const };
 
   return (
-    <div className="min-h-screen bg-slate-50">
-      <header className="border-b border-zinc-200 bg-white">
+    <div className="min-h-screen bg-app-bg">
+      <header className="border-b border-border bg-surface">
         <div className="mx-auto flex max-w-6xl flex-col gap-4 px-4 py-4 md:flex-row md:items-center md:justify-between">
           <div className="min-w-0">
             <p className="text-xs font-semibold uppercase tracking-wide text-brand">
               {appConfig.name}
             </p>
-            <p className="text-sm text-zinc-600">{appConfig.description}</p>
+            <p className="text-sm text-text-muted">{appConfig.description}</p>
           </div>
           <nav className="flex w-full flex-wrap items-center gap-2 text-sm md:w-auto md:justify-end">
             <Badge variant={syncBadge.variant}>{syncBadge.label}</Badge>
             <NavLink
-              className="rounded-md px-3 py-2 text-zinc-700 hover:bg-zinc-100"
+              className="rounded-md px-3 py-2 text-text-muted hover:bg-surface-hover"
               to={routePaths.home}
             >
               Dashboard
             </NavLink>
             <NavLink
-              className="rounded-md px-3 py-2 text-zinc-700 hover:bg-zinc-100"
+              className="rounded-md px-3 py-2 text-text-muted hover:bg-surface-hover"
               to={routePaths.settings}
             >
               Settings
diff --git a/app/src/widgets/dashboard-analytics/ui/DashboardAnalytics.tsx b/app/src/widgets/dashboard-analytics/ui/DashboardAnalytics.tsx
index 0c2135a..740ccfb 100644
--- a/app/src/widgets/dashboard-analytics/ui/DashboardAnalytics.tsx
+++ b/app/src/widgets/dashboard-analytics/ui/DashboardAnalytics.tsx
@@ -1,4 +1,4 @@
-import { useMemo, useState } from 'react';
+import { type JSX, useMemo, useState } from 'react';
 
 import type { Transaction } from '@entities/transaction';
 import {
@@ -95,16 +95,48 @@ function getExpenseCategoryStats(categoryStats: CategoryStats[]) {
   return categoryStats.filter((categoryStatsItem) => categoryStatsItem.kind === 'expense');
 }
 
-function renderEmptyChart(title: string) {
-  return <EmptyState description="Add transactions to see this chart." title={title} />;
+type ChartTooltipContentProps = {
+  active?: boolean;
+  formatter?: (value: number) => string;
+  label?: string;
+  payload?: Array<{ color?: string; name?: string; value?: number }>;
+};
+
+function ChartTooltipContent({ active, formatter, label, payload }: ChartTooltipContentProps) {
+  if (!active || !payload?.length) return null;
+  return (
+    <div className="rounded-md border border-border bg-surface px-3 py-2 shadow-lg">
+      {label ? <p className="mb-1 text-xs text-text-soft">{label}</p> : null}
+      {payload.map((entry) => (
+        <p className="text-sm text-text" key={entry.name}>
+          <span style={{ color: entry.color }}>{'● '}</span>
+          {entry.name}: {formatter ? formatter(Number(entry.value)) : String(entry.value)}
+        </p>
+      ))}
+    </div>
+  );
+}
+
+function getChartEmptyTitle(chartId: ChartId): string {
+  if (chartId === 'monthly-cashflow') return 'No monthly stats';
+  if (chartId === 'balance-trend') return 'No balance trend';
+  if (chartId === 'expense-categories') return 'No expenses yet';
+  if (chartId === 'category-bar') return 'No category totals';
+  if (chartId === 'income-expense-ratio') return 'No totals yet';
+  return 'No daily expenses';
 }
 
+const axisTickStyle = { fill: 'var(--color-text-soft)', fontSize: 12 };
+
 function renderChart({
   categoryStats,
   chartId,
   dailyExpenseStats,
   monthlyStats,
-}: Pick<ChartSlotProps, 'categoryStats' | 'chartId' | 'dailyExpenseStats' | 'monthlyStats'>) {
+}: Pick<
+  ChartSlotProps,
+  'categoryStats' | 'chartId' | 'dailyExpenseStats' | 'monthlyStats'
+>): JSX.Element | null {
   const expenseCategoryStats = getExpenseCategoryStats(categoryStats);
   const ratioStats = [
     {
@@ -117,18 +149,18 @@ function renderChart({
     },
   ];
 
+  const tooltipEl = <ChartTooltipContent formatter={formatMoney} />;
+
   if (chartId === 'monthly-cashflow') {
-    if (!monthlyStats.length) {
-      return renderEmptyChart('No monthly stats');
-    }
+    if (!monthlyStats.length) return null;
 
     return (
       <BarChart data={monthlyStats}>
-        <CartesianGrid stroke="#e4e4e7" strokeDasharray="3 3" vertical={false} />
-        <XAxis dataKey="label" tickLine={false} />
-        <YAxis tickFormatter={formatMoney} tickLine={false} width={56} />
-        <Tooltip formatter={(value) => formatMoney(Number(value))} />
-        <Legend />
+        <CartesianGrid stroke="var(--color-border)" strokeDasharray="3 3" vertical={false} />
+        <XAxis dataKey="label" tick={axisTickStyle} tickLine={false} />
+        <YAxis tick={axisTickStyle} tickFormatter={formatMoney} tickLine={false} width={56} />
+        <Tooltip content={tooltipEl} />
+        <Legend wrapperStyle={{ color: 'var(--color-text-muted)', fontSize: 12 }} />
         <Bar dataKey="income" fill="#059669" name="Income" radius={[4, 4, 0, 0]} />
         <Bar dataKey="expense" fill="#dc2626" name="Expense" radius={[4, 4, 0, 0]} />
       </BarChart>
@@ -136,25 +168,21 @@ function renderChart({
   }
 
   if (chartId === 'balance-trend') {
-    if (!monthlyStats.length) {
-      return renderEmptyChart('No balance trend');
-    }
+    if (!monthlyStats.length) return null;
 
     return (
       <LineChart data={monthlyStats}>
-        <CartesianGrid stroke="#e4e4e7" strokeDasharray="3 3" vertical={false} />
-        <XAxis dataKey="label" tickLine={false} />
-        <YAxis tickFormatter={formatMoney} tickLine={false} width={56} />
-        <Tooltip formatter={(value) => formatMoney(Number(value))} />
+        <CartesianGrid stroke="var(--color-border)" strokeDasharray="3 3" vertical={false} />
+        <XAxis dataKey="label" tick={axisTickStyle} tickLine={false} />
+        <YAxis tick={axisTickStyle} tickFormatter={formatMoney} tickLine={false} width={56} />
+        <Tooltip content={tooltipEl} />
         <Line dataKey="balance" name="Balance" stroke="#4f46e5" strokeWidth={3} type="monotone" />
       </LineChart>
     );
   }
 
   if (chartId === 'expense-categories') {
-    if (!expenseCategoryStats.length) {
-      return renderEmptyChart('No expenses yet');
-    }
+    if (!expenseCategoryStats.length) return null;
 
     return (
       <PieChart>
@@ -173,38 +201,34 @@ function renderChart({
             />
           ))}
         </Pie>
-        <Tooltip formatter={(value) => formatMoney(Number(value))} />
+        <Tooltip content={tooltipEl} />
       </PieChart>
     );
   }
 
   if (chartId === 'category-bar') {
-    if (!expenseCategoryStats.length) {
-      return renderEmptyChart('No category totals');
-    }
+    if (!expenseCategoryStats.length) return null;
 
     return (
       <BarChart data={[...expenseCategoryStats].sort((left, right) => right.total - left.total)}>
-        <CartesianGrid stroke="#e4e4e7" strokeDasharray="3 3" vertical={false} />
-        <XAxis dataKey="categoryName" tickLine={false} />
-        <YAxis tickFormatter={formatMoney} tickLine={false} width={56} />
-        <Tooltip formatter={(value) => formatMoney(Number(value))} />
+        <CartesianGrid stroke="var(--color-border)" strokeDasharray="3 3" vertical={false} />
+        <XAxis dataKey="categoryName" tick={axisTickStyle} tickLine={false} />
+        <YAxis tick={axisTickStyle} tickFormatter={formatMoney} tickLine={false} width={56} />
+        <Tooltip content={tooltipEl} />
         <Bar dataKey="total" fill="#0f766e" name="Total" radius={[4, 4, 0, 0]} />
       </BarChart>
     );
   }
 
   if (chartId === 'income-expense-ratio') {
-    if (!ratioStats.some((stat) => stat.total > 0)) {
-      return renderEmptyChart('No totals yet');
-    }
+    if (!ratioStats.some((stat) => stat.total > 0)) return null;
 
     return (
       <BarChart data={ratioStats}>
-        <CartesianGrid stroke="#e4e4e7" strokeDasharray="3 3" vertical={false} />
-        <XAxis dataKey="label" tickLine={false} />
-        <YAxis tickFormatter={formatMoney} tickLine={false} width={56} />
-        <Tooltip formatter={(value) => formatMoney(Number(value))} />
+        <CartesianGrid stroke="var(--color-border)" strokeDasharray="3 3" vertical={false} />
+        <XAxis dataKey="label" tick={axisTickStyle} tickLine={false} />
+        <YAxis tick={axisTickStyle} tickFormatter={formatMoney} tickLine={false} width={56} />
+        <Tooltip content={tooltipEl} />
         <Bar dataKey="total" name="Total" radius={[4, 4, 0, 0]}>
           {ratioStats.map((stat, index) => (
             <Cell fill={index === 0 ? '#059669' : '#dc2626'} key={stat.label} />
@@ -214,16 +238,14 @@ function renderChart({
     );
   }
 
-  if (!dailyExpenseStats.length) {
-    return renderEmptyChart('No daily expenses');
-  }
+  if (!dailyExpenseStats.length) return null;
 
   return (
     <LineChart data={dailyExpenseStats}>
-      <CartesianGrid stroke="#e4e4e7" strokeDasharray="3 3" vertical={false} />
-      <XAxis dataKey="label" tickLine={false} />
-      <YAxis tickFormatter={formatMoney} tickLine={false} width={56} />
-      <Tooltip formatter={(value) => formatMoney(Number(value))} />
+      <CartesianGrid stroke="var(--color-border)" strokeDasharray="3 3" vertical={false} />
+      <XAxis dataKey="label" tick={axisTickStyle} tickLine={false} />
+      <YAxis tick={axisTickStyle} tickFormatter={formatMoney} tickLine={false} width={56} />
+      <Tooltip content={tooltipEl} />
       <Line dataKey="expense" name="Expense" stroke="#dc2626" strokeWidth={3} type="monotone" />
     </LineChart>
   );
@@ -241,6 +263,7 @@ function ChartSlot({
   slotLabel,
 }: ChartSlotProps) {
   const chartMeta = getChartMeta(chartId);
+  const chart = renderChart({ categoryStats, chartId, dailyExpenseStats, monthlyStats });
 
   return (
     <Card
@@ -250,7 +273,7 @@ function ChartSlot({
         const droppedChartId = event.dataTransfer.getData('text/plain');
 
         if (
-          chartCatalog.some((chart) => chart.id === droppedChartId) &&
+          chartCatalog.some((c) => c.id === droppedChartId) &&
           (!isWide || supportsWideChart(droppedChartId as ChartId))
         ) {
           onDropChart(droppedChartId as ChartId);
@@ -259,9 +282,9 @@ function ChartSlot({
     >
       <div className="mb-4 flex flex-col gap-3 md:flex-row md:items-start md:justify-between">
         <div>
-          <p className="text-xs font-semibold uppercase text-zinc-400">{slotLabel}</p>
-          <h2 className="mt-1 text-base font-semibold text-zinc-950">{chartMeta.title}</h2>
-          <p className="mt-1 text-sm text-zinc-500">{chartMeta.description}</p>
+          <p className="text-xs font-semibold uppercase text-text-soft">{slotLabel}</p>
+          <h2 className="mt-1 text-base font-semibold text-text">{chartMeta.title}</h2>
+          <p className="mt-1 text-sm text-text-soft">{chartMeta.description}</p>
         </div>
         <div className="flex flex-wrap gap-2">
           {isWide && onSplit ? (
@@ -275,9 +298,18 @@ function ChartSlot({
         </div>
       </div>
       <div className={isWide ? 'h-64 md:h-80' : 'h-56 md:h-72'}>
-        <ResponsiveContainer height="100%" width="100%">
-          {renderChart({ categoryStats, chartId, dailyExpenseStats, monthlyStats })}
-        </ResponsiveContainer>
+        {chart ? (
+          <ResponsiveContainer height="100%" width="100%">
+            {chart}
+          </ResponsiveContainer>
+        ) : (
+          <div className="flex h-full items-center justify-center">
+            <EmptyState
+              description="Add transactions to see this chart."
+              title={getChartEmptyTitle(chartId)}
+            />
+          </div>
+        )}
       </div>
     </Card>
   );
@@ -290,21 +322,29 @@ function ChartDragPreview({
   monthlyStats,
 }: Pick<ChartSlotProps, 'categoryStats' | 'chartId' | 'dailyExpenseStats' | 'monthlyStats'>) {
   const chartMeta = getChartMeta(chartId);
+  const chart = renderChart({ categoryStats, chartId, dailyExpenseStats, monthlyStats });
 
   return (
     <div
       aria-hidden
-      className="pointer-events-none fixed -left-[10000px] top-0 w-80 rounded-md border border-zinc-200 bg-white p-3 shadow-xl"
+      className="pointer-events-none fixed -left-[10000px] top-0 w-80 rounded-md border border-border bg-surface p-3 shadow-xl"
       data-chart-drag-preview
     >
       <div className="mb-2">
-        <p className="text-xs font-semibold uppercase text-zinc-400">Chart preview</p>
-        <h3 className="mt-1 text-sm font-semibold text-zinc-950">{chartMeta.title}</h3>
+        <p className="text-xs font-semibold uppercase text-text-soft">Chart preview</p>
+        <h3 className="mt-1 text-sm font-semibold text-text">{chartMeta.title}</h3>
       </div>
       <div className="h-44">
-        <ResponsiveContainer height="100%" width="100%">
-          {renderChart({ categoryStats, chartId, dailyExpenseStats, monthlyStats })}
-        </ResponsiveContainer>
+        {chart ? (
+          <ResponsiveContainer height="100%" width="100%">
+            {chart}
+          </ResponsiveContainer>
+        ) : (
+          <EmptyState
+            description="Add transactions to see this chart."
+            title={getChartEmptyTitle(chartId)}
+          />
+        )}
       </div>
     </div>
   );
@@ -400,7 +440,7 @@ export function DashboardAnalytics({ transactions }: DashboardAnalyticsProps) {
     <section className="relative">
       <div>
         <div className="mb-3 flex flex-wrap items-center justify-between gap-3">
-          <p className="text-sm font-medium text-zinc-500">
+          <p className="text-sm font-medium text-text-soft">
             {source === 'google-sheets' ? 'Google Sheets analytics' : 'Local analytics'}
           </p>
           <div className="flex flex-wrap items-center gap-2">
@@ -468,8 +508,8 @@ export function DashboardAnalytics({ transactions }: DashboardAnalyticsProps) {
             <div className="mb-4">
               <div className="flex items-start justify-between gap-3">
                 <div>
-                  <h2 className="text-base font-semibold text-zinc-950">Chart library</h2>
-                  <p className="mt-1 text-sm text-zinc-500">
+                  <h2 className="text-base font-semibold text-text">Chart library</h2>
+                  <p className="mt-1 text-sm text-text-soft">
                     Choose chart for slot {selectedSlotIndex + 1} or wide view.
                   </p>
                 </div>
@@ -483,8 +523,8 @@ export function DashboardAnalytics({ transactions }: DashboardAnalyticsProps) {
                 <div
                   className={
                     chartSlots[selectedSlotIndex] === chart.id || wideChartId === chart.id
-                      ? 'rounded-md border border-brand bg-indigo-50 px-3 py-3 text-left'
-                      : 'rounded-md border border-zinc-200 bg-white px-3 py-3 text-left hover:border-zinc-300 hover:bg-zinc-50'
+                      ? 'rounded-md border border-brand bg-brand-soft px-3 py-3 text-left'
+                      : 'rounded-md border border-border bg-surface px-3 py-3 text-left hover:border-border-strong hover:bg-surface-hover'
                   }
                   draggable
                   key={chart.id}
@@ -502,8 +542,8 @@ export function DashboardAnalytics({ transactions }: DashboardAnalyticsProps) {
                   }}
                   tabIndex={0}
                 >
-                  <span className="block text-sm font-semibold text-zinc-950">{chart.title}</span>
-                  <span className="mt-1 block text-sm text-zinc-500">{chart.description}</span>
+                  <span className="block text-sm font-semibold text-text">{chart.title}</span>
+                  <span className="mt-1 block text-sm text-text-soft">{chart.description}</span>
                   <ChartDragPreview
                     categoryStats={categoryStats}
                     chartId={chart.id}
diff --git a/app/src/widgets/transactions-history/ui/TransactionsHistory.tsx b/app/src/widgets/transactions-history/ui/TransactionsHistory.tsx
index 07cc494..2d1d62d 100644
--- a/app/src/widgets/transactions-history/ui/TransactionsHistory.tsx
+++ b/app/src/widgets/transactions-history/ui/TransactionsHistory.tsx
@@ -98,12 +98,12 @@ function hasActiveFilters(filters: TransactionFilters) {
 function TransactionsHistorySkeleton() {
   return (
     <div aria-label="Loading transactions" role="status">
-      <div className="hidden grid-cols-[120px_96px_1fr_140px_160px_1fr] gap-3 border-b border-zinc-200 px-5 py-3 md:grid">
+      <div className="hidden grid-cols-[120px_96px_1fr_140px_160px_1fr] gap-3 border-b border-border px-5 py-3 md:grid">
         {Array.from({ length: 6 }, (_, index) => (
           <Skeleton className="h-3" key={index} />
         ))}
       </div>
-      <div className="divide-y divide-zinc-100">
+      <div className="divide-y divide-border">
         {Array.from({ length: 6 }, (_, index) => (
           <div
             className="grid gap-3 px-5 py-4 md:grid-cols-[120px_96px_1fr_140px_160px_1fr] md:items-center"
@@ -135,16 +135,16 @@ function RowActions({ onDelete, onEdit }: RowActionsProps) {
     <div className="relative flex justify-start md:justify-end" ref={wrapperRef}>
       <button
         aria-label="Transaction actions"
-        className="grid size-8 place-items-center rounded-md border border-zinc-200 text-lg leading-none text-zinc-500 hover:bg-zinc-50 hover:text-zinc-900"
+        className="grid size-8 place-items-center rounded-md border border-border text-lg leading-none text-text-soft hover:bg-surface-hover hover:text-text"
         onClick={() => setIsOpen((current) => !current)}
         type="button"
       >
         ...
       </button>
       {isOpen ? (
-        <div className="absolute right-0 top-full z-20 mt-2 w-32 rounded-md border border-zinc-200 bg-white p-1 shadow-lg">
+        <div className="absolute right-0 top-full z-20 mt-2 w-32 rounded-md border border-border bg-surface p-1 shadow-lg">
           <button
-            className="w-full rounded px-3 py-2 text-left text-sm text-zinc-700 hover:bg-zinc-50"
+            className="w-full rounded px-3 py-2 text-left text-sm text-text-muted hover:bg-surface-hover"
             onClick={() => {
               onEdit();
               setIsOpen(false);
@@ -154,7 +154,7 @@ function RowActions({ onDelete, onEdit }: RowActionsProps) {
             Edit
           </button>
           <button
-            className="w-full rounded px-3 py-2 text-left text-sm text-danger hover:bg-red-50"
+            className="w-full rounded px-3 py-2 text-left text-sm text-danger hover:bg-danger-soft"
             onClick={() => {
               void onDelete();
               setIsOpen(false);
@@ -171,11 +171,11 @@ function RowActions({ onDelete, onEdit }: RowActionsProps) {
 
 function CommentCell({ value }: { value?: string }) {
   if (!value) {
-    return <div className="text-zinc-600">-</div>;
+    return <div className="text-text-muted">-</div>;
   }
 
   return (
-    <div className="max-w-56 truncate text-zinc-600" title={value}>
+    <div className="max-w-56 truncate text-text-muted" title={value}>
       {value}
     </div>
   );
@@ -184,7 +184,7 @@ function CommentCell({ value }: { value?: string }) {
 function TransactionField({ children, label }: { children: ReactNode; label: string }) {
   return (
     <div className="flex items-start justify-between gap-3 md:block">
-      <span className="shrink-0 text-xs font-semibold uppercase text-zinc-400 md:hidden">
+      <span className="shrink-0 text-xs font-semibold uppercase text-text-soft md:hidden">
         {label}
       </span>
       <div className="min-w-0 text-right md:text-left">{children}</div>
@@ -242,7 +242,7 @@ export function TransactionsHistory({
 
   if (error && !transactions.length) {
     return (
-      <Card className="border-red-200 bg-red-50">
+      <Card className="border-danger/20 bg-danger-soft">
         <div className="flex flex-col gap-3 md:flex-row md:items-center md:justify-between">
           <p className="text-sm text-danger">{error}</p>
           <Button onClick={() => void onRefresh()} variant="secondary">
@@ -268,15 +268,15 @@ export function TransactionsHistory({
 
   return (
     <Card className="mb-16 p-0">
-      <div className="flex flex-col gap-4 border-b border-zinc-200 px-5 py-4 md:flex-row md:items-center md:justify-between">
+      <div className="flex flex-col gap-4 border-b border-border px-5 py-4 md:flex-row md:items-center md:justify-between">
         <div>
-          <h2 className="text-base font-semibold text-zinc-950">Transactions history</h2>
-          <p className="mt-1 text-sm text-zinc-500">
+          <h2 className="text-base font-semibold text-text">Transactions history</h2>
+          <p className="mt-1 text-sm text-text-soft">
             {`${filteredTransactions.length} of ${transactions.length} transactions`}
             {isLoading ? <span className="ml-2 text-brand">Refreshing...</span> : null}
           </p>
           {error ? <p className="mt-1 text-sm text-danger">{error}</p> : null}
-          {syncWarning ? <p className="mt-1 text-sm text-amber-700">{syncWarning}</p> : null}
+          {syncWarning ? <p className="mt-1 text-sm text-warning">{syncWarning}</p> : null}
         </div>
         <div className="grid grid-cols-2 gap-2 sm:flex sm:flex-wrap">
           {hasPendingSync ? (
@@ -300,7 +300,7 @@ export function TransactionsHistory({
           </Button>
         </div>
       </div>
-      <div className="border-b border-zinc-200 bg-zinc-50/60 px-5 py-4">
+      <div className="border-b border-border bg-surface-muted/60 px-5 py-4">
         <div className="grid gap-3 lg:grid-cols-[minmax(220px,1.5fr)_minmax(120px,0.8fr)_minmax(160px,1fr)_auto_auto] lg:items-end">
           <Input
             className="truncate"
@@ -350,7 +350,7 @@ export function TransactionsHistory({
           </Button>
         </div>
         {isAdvancedFiltersOpen ? (
-          <div className="mt-4 grid gap-4 rounded-md border border-zinc-200 bg-white p-4 sm:grid-cols-2 lg:grid-cols-[repeat(4,minmax(130px,1fr))]">
+          <div className="mt-4 grid gap-4 rounded-md border border-border bg-surface p-4 sm:grid-cols-2 lg:grid-cols-[repeat(4,minmax(130px,1fr))]">
             <DatePicker
               id="transactions-date-from"
               label="Date from"
@@ -415,7 +415,7 @@ export function TransactionsHistory({
               ]}
               value={filters.syncStatus}
             />
-            <label className="flex items-end gap-2 pb-2 text-sm font-medium text-zinc-700">
+            <label className="flex items-end gap-2 pb-2 text-sm font-medium text-text-muted">
               <input
                 checked={filters.showDeleted}
                 className="mb-1 h-4 w-4 accent-brand"
@@ -439,7 +439,7 @@ export function TransactionsHistory({
         />
       ) : (
         <div>
-          <div className="hidden grid-cols-[110px_78px_1fr_110px_120px_1fr_110px_86px_104px] gap-3 border-b border-zinc-200 px-5 py-3 text-xs font-semibold uppercase text-zinc-500 md:grid">
+          <div className="hidden grid-cols-[110px_78px_1fr_110px_120px_1fr_110px_86px_104px] gap-3 border-b border-border px-5 py-3 text-xs font-semibold uppercase text-text-soft md:grid">
             <span>Date</span>
             <span>Type</span>
             <span>Category</span>
@@ -450,24 +450,24 @@ export function TransactionsHistory({
             <span>Status</span>
             <span className="text-right">Actions</span>
           </div>
-          <div className="divide-y divide-zinc-100">
+          <div className="divide-y divide-border">
             {filteredTransactions.map((transaction) => (
               <div
                 className={
                   transaction.deletedAt
-                    ? 'grid gap-3 bg-zinc-50 px-4 py-4 text-sm opacity-70 md:grid-cols-[110px_78px_1fr_110px_120px_1fr_110px_86px_104px] md:items-center md:gap-3 md:px-5'
+                    ? 'grid gap-3 bg-surface-muted px-4 py-4 text-sm opacity-70 md:grid-cols-[110px_78px_1fr_110px_120px_1fr_110px_86px_104px] md:items-center md:gap-3 md:px-5'
                     : 'grid gap-3 px-4 py-4 text-sm md:grid-cols-[110px_78px_1fr_110px_120px_1fr_110px_86px_104px] md:items-center md:gap-3 md:px-5'
                 }
                 key={transaction.id}
               >
                 <TransactionField label="Date">
-                  <div className="text-zinc-500">{transaction.date}</div>
+                  <div className="text-text-soft">{transaction.date}</div>
                 </TransactionField>
                 <TransactionField label="Type">
-                  <div className="font-medium text-zinc-700">{formatKind(transaction.kind)}</div>
+                  <div className="font-medium text-text-muted">{formatKind(transaction.kind)}</div>
                 </TransactionField>
                 <TransactionField label="Category">
-                  <div className="font-medium text-zinc-950">{transaction.categoryName}</div>
+                  <div className="font-medium text-text">{transaction.categoryName}</div>
                 </TransactionField>
                 <TransactionField label="Amount">
                   <div
@@ -481,13 +481,13 @@ export function TransactionsHistory({
                   </div>
                 </TransactionField>
                 <TransactionField label="Payment">
-                  <div className="text-zinc-600">{transaction.paymentMethod || '-'}</div>
+                  <div className="text-text-muted">{transaction.paymentMethod || '-'}</div>
                 </TransactionField>
                 <TransactionField label="Comment">
                   <CommentCell value={transaction.comment} />
                 </TransactionField>
                 <TransactionField label="Container">
-                  <div className="text-zinc-600">{transaction.containerName || '-'}</div>
+                  <div className="text-text-muted">{transaction.containerName || '-'}</div>
                 </TransactionField>
                 <TransactionField label="Status">
                   <div className="flex flex-wrap gap-1">
diff --git a/app/vite.config.ts b/app/vite.config.ts
index 4622691..0bfd660 100644
--- a/app/vite.config.ts
+++ b/app/vite.config.ts
@@ -18,6 +18,7 @@ export default defineConfig({
     },
   },
   test: {
+    setupFiles: ['./src/test-setup.ts'],
     coverage: {
       exclude: [
         'dist/**',
@@ -30,6 +31,12 @@ export default defineConfig({
       provider: 'v8',
       reporter: ['text', 'html', 'json-summary', 'lcov'],
       reportsDirectory: './coverage',
+      thresholds: {
+        branches: 33,
+        functions: 33,
+        lines: 35,
+        statements: 35,
+      },
     },
     environment: 'jsdom',
     globals: true,
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index ba7b6f3..2687364 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -35,6 +35,15 @@ importers:
       '@eslint/js':
         specifier: ^10.0.1
         version: 10.0.1(eslint@10.4.0(jiti@2.7.0))
+      '@testing-library/jest-dom':
+        specifier: ^6.9.1
+        version: 6.9.1
+      '@testing-library/react':
+        specifier: ^16.3.2
+        version: 16.3.2(@testing-library/dom@10.4.1)(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      '@testing-library/user-event':
+        specifier: ^14.6.1
+        version: 14.6.1(@testing-library/dom@10.4.1)
       '@types/node':
         specifier: ^24.12.3
         version: 24.12.4
@@ -89,6 +98,9 @@ importers:
 
 packages:
 
+  '@adobe/css-tools@4.5.0':
+    resolution: {integrity: sha512-6OzddxPio9UiWTCemp4N8cYLV2ZN1ncRnV1cVGtve7dhPOtRkleRyx32GQCYSwDYgaHU3USMm84tNsvKzRCa1Q==}
+
   '@asamuzakjp/css-color@5.1.11':
     resolution: {integrity: sha512-KVw6qIiCTUQhByfTd78h2yD1/00waTmm9uy/R7Ck/ctUyAPj+AEDLkQIdJW0T8+qGgj3j5bpNKK7Q3G+LedJWg==}
     engines: {node: ^20.19.0 || ^22.12.0 || >=24.0.0}
@@ -159,6 +171,10 @@ packages:
     engines: {node: '>=6.0.0'}
     hasBin: true
 
+  '@babel/runtime@7.29.7':
+    resolution: {integrity: sha512-Nq8OhGWiZIZGV6hLHoyAKLLcJihP/xFeBMGJoUrxTX2psI8dCifzLhZISFb+VWS3wFMRDmCGw5R+dOySCqPLhw==}
+    engines: {node: '>=6.9.0'}
+
   '@babel/template@7.28.6':
     resolution: {integrity: sha512-YA6Ma2KsCdGb+WC6UpBVFJGXL58MDA6oyONbjyF/+5sBgxY/dwkhLogbMT2GXXyU84/IhRw/2D1Os1B/giz+BQ==}
     engines: {node: '>=6.9.0'}
@@ -526,9 +542,41 @@ packages:
     peerDependencies:
       vite: ^5.2.0 || ^6 || ^7 || ^8
 
+  '@testing-library/dom@10.4.1':
+    resolution: {integrity: sha512-o4PXJQidqJl82ckFaXUeoAW+XysPLauYI43Abki5hABd853iMhitooc6znOnczgbTYmEP6U6/y1ZyKAIsvMKGg==}
+    engines: {node: '>=18'}
+
+  '@testing-library/jest-dom@6.9.1':
+    resolution: {integrity: sha512-zIcONa+hVtVSSep9UT3jZ5rizo2BsxgyDYU7WFD5eICBE7no3881HGeb/QkGfsJs6JTkY1aQhT7rIPC7e+0nnA==}
+    engines: {node: '>=14', npm: '>=6', yarn: '>=1'}
+
+  '@testing-library/react@16.3.2':
+    resolution: {integrity: sha512-XU5/SytQM+ykqMnAnvB2umaJNIOsLF3PVv//1Ew4CTcpz0/BRyy/af40qqrt7SjKpDdT1saBMc42CUok5gaw+g==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      '@testing-library/dom': ^10.0.0
+      '@types/react': ^18.0.0 || ^19.0.0
+      '@types/react-dom': ^18.0.0 || ^19.0.0
+      react: ^18.0.0 || ^19.0.0
+      react-dom: ^18.0.0 || ^19.0.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@testing-library/user-event@14.6.1':
+    resolution: {integrity: sha512-vq7fv0rnt+QTXgPxr5Hjc210p6YKq2kmdziLgnsZGgLJ9e6VAShx1pACLuRjd/AS/sr7phAR58OIIpf0LlmQNw==}
+    engines: {node: '>=12', npm: '>=6'}
+    peerDependencies:
+      '@testing-library/dom': '>=7.21.4'
+
   '@tybys/wasm-util@0.10.2':
     resolution: {integrity: sha512-RoBvJ2X0wuKlWFIjrwffGw1IqZHKQqzIchKaadZZfnNpsAYp2mM0h36JtPCjNDAHGgYez/15uMBpfGwchhiMgg==}
 
+  '@types/aria-query@5.0.4':
+    resolution: {integrity: sha512-rfT93uj5s0PRL7EzccGMs3brplhcrghnDoV26NqKhCAS1hVo+WdNsPvE/yb6ilfr5hi2MEk6d5EWJTKdxg8jVw==}
+
   '@types/chai@5.2.3':
     resolution: {integrity: sha512-Mw558oeA9fFbv65/y4mHtXDs9bPnFMZAL/jxdPFUpOHHIXX91mcgEHbS5Lahr+pwZFR8A7GQleRWeI6cGFC2UA==}
 
@@ -712,14 +760,25 @@ packages:
     resolution: {integrity: sha512-BvU8nYgGQBxcmMuEeUEmNTvrMVjJNSH7RgW24vXexN4Ven6qCvy4TntnvlnwnMLTVlcRQQdbRY8NKnaIoeWDNg==}
     engines: {node: '>=18'}
 
+  ansi-regex@5.0.1:
+    resolution: {integrity: sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==}
+    engines: {node: '>=8'}
+
   ansi-regex@6.2.2:
     resolution: {integrity: sha512-Bq3SmSpyFHaWjPk8If9yc6svM8c56dB5BAtW4Qbw5jHTwwXXcTLoRMkpDJp6VL0XzlWaCHTXrkFURMYmD0sLqg==}
     engines: {node: '>=12'}
 
+  ansi-styles@5.2.0:
+    resolution: {integrity: sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==}
+    engines: {node: '>=10'}
+
   ansi-styles@6.2.3:
     resolution: {integrity: sha512-4Dj6M28JB+oAH8kFkTLUo+a2jwOFkuqb3yucU0CANcRRUbxS0cP0nZYCGjcc3BNXwRIsUVmDGgzawme7zvJHvg==}
     engines: {node: '>=12'}
 
+  aria-query@5.3.0:
+    resolution: {integrity: sha512-b0P0sZPKtyu8HkeRAfCq0IfURZK+SuwMjY1UXGBU27wpAiTwQAIlq56IbIO+ytk/JjS1fMR14ee5WBBfKi5J6A==}
+
   assertion-error@2.0.1:
     resolution: {integrity: sha512-Izi8RQcffqCeNVgFigKli1ssklIbpHnCYc6AknXGYoB6grJqyeby7jv12JUQgmTAnIDnbck1uxksT4dzN3PWBA==}
     engines: {node: '>=12'}
@@ -782,6 +841,9 @@ packages:
     resolution: {integrity: sha512-X7sjQzceUhu1u7Y/ylrRZFU2FS6LRiFVp6rKLPg23y3x3c3DOKAwuXGDp+PAGjh6CSnCjYeAul8pcT8bAl+lSA==}
     engines: {node: ^10 || ^12.20.0 || ^14.13.0 || >=15.0.0}
 
+  css.escape@1.5.1:
+    resolution: {integrity: sha512-YUifsXXuknHlUsmlgyY0PKzgPOr7/FjCePfHNt0jxm83wHZi44VDMQ7/fGNkjY3/jV1MC+1CmZbaHzugyeRtpg==}
+
   csstype@3.2.3:
     resolution: {integrity: sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==}
 
@@ -851,10 +913,20 @@ packages:
   deep-is@0.1.4:
     resolution: {integrity: sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==}
 
+  dequal@2.0.3:
+    resolution: {integrity: sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==}
+    engines: {node: '>=6'}
+
   detect-libc@2.1.2:
     resolution: {integrity: sha512-Btj2BOOO83o3WyH59e8MgXsxEQVcarkUOpEYrubB0urwnN10yQ364rsiByU11nZlqWYZm05i/of7io4mzihBtQ==}
     engines: {node: '>=8'}
 
+  dom-accessibility-api@0.5.16:
+    resolution: {integrity: sha512-X7BJ2yElsnOJ30pZF4uIIDfBEVgF4XEBxL9Bxhy6dnrm5hkzqmsWHGTiHqRiITNhMyFLyAiWndIJP7Z1NTteDg==}
+
+  dom-accessibility-api@0.6.3:
+    resolution: {integrity: sha512-7ZgogeTnjuHbo+ct10G9Ffp0mif17idi0IyWNVA/wcwcm7NPOD/WEHVP3n7n3MhXqxoIYm8d6MuZohYWIZ4T3w==}
+
   electron-to-chromium@1.5.359:
     resolution: {integrity: sha512-8lPELWuYZIWk7NDvCNthtmMw/7Q5Wu25NpM4djFMHBmk8DubPAtL4YTOp7ou0e7HyJtwkVlWv8XMLURnrtgJQw==}
 
@@ -1047,6 +1119,10 @@ packages:
     resolution: {integrity: sha512-JmXMZ6wuvDmLiHEml9ykzqO6lwFbof0GG4IkcGaENdCRDDmMVnny7s5HsIgHCbaq0w2MyPhDqkhTUgS2LU2PHA==}
     engines: {node: '>=0.8.19'}
 
+  indent-string@4.0.0:
+    resolution: {integrity: sha512-EdDDZu4A2OyIK7Lr/2zG+w5jmbuk1DVBnEwREQvBzspBJkCEbRa8GxU1lghYcaGJCnRWibjDXlq779X1/y5xwg==}
+    engines: {node: '>=8'}
+
   internmap@2.0.3:
     resolution: {integrity: sha512-5Hh7Y1wQbvY5ooGgPbDaL5iYLAPzMTUrjMulskHLH6wnv/A+1q5rgEaiuqEjB+oxGXIVZs1FF+R/KPN3ZSQYYg==}
     engines: {node: '>=12'}
@@ -1224,6 +1300,10 @@ packages:
   lru-cache@5.1.1:
     resolution: {integrity: sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==}
 
+  lz-string@1.5.0:
+    resolution: {integrity: sha512-h5bgJWpxJNswbU7qCrV0tIKQCaS3blPDrqKWx+QxzuzL1zGUzij9XCWLrSLsJPu5t+eWA/ycetzYAO5IOMcWAQ==}
+    hasBin: true
+
   magic-string@0.30.21:
     resolution: {integrity: sha512-vd2F4YUyEXKGcLHoq+TEyCjxueSeHnFxyyjNp80yg0XV4vUhnDer/lvvlqM/arB5bXQN5K2/3oinyCRyx8T2CQ==}
 
@@ -1241,6 +1321,10 @@ packages:
     resolution: {integrity: sha512-VP79XUPxV2CigYP3jWwAUFSku2aKqBH7uTAapFWCBqutsbmDo96KY5o8uh6U+/YSIn5OxJnXp73beVkpqMIGhA==}
     engines: {node: '>=18'}
 
+  min-indent@1.0.1:
+    resolution: {integrity: sha512-I9jwMn07Sy/IwOj3zVkVik2JTvgpaykDZEigL6Rx6N9LbMywwUSMtxET+7lVoDLLd3O3IXwJwvuuns8UB/HeAg==}
+    engines: {node: '>=4'}
+
   minimatch@10.2.5:
     resolution: {integrity: sha512-MULkVLfKGYDFYejP07QOurDLLQpcjk7Fw+7jXS2R2czRQzR56yHRveU5NDJEOviH+hETZKSkIk5c+T23GjFUMg==}
     engines: {node: 18 || 20 || >=22}
@@ -1312,6 +1396,10 @@ packages:
     engines: {node: '>=14'}
     hasBin: true
 
+  pretty-format@27.5.1:
+    resolution: {integrity: sha512-Qb1gy5OrP5+zDf2Bvnzdl3jsTf1qXVMazbvCoKhtKqVs4/YK4ozX4gKQJJVyNe+cajNPn0KoC0MC3FUmaHWEmQ==}
+    engines: {node: ^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0}
+
   punycode@2.3.1:
     resolution: {integrity: sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==}
     engines: {node: '>=6'}
@@ -1321,6 +1409,9 @@ packages:
     peerDependencies:
       react: ^19.2.6
 
+  react-is@17.0.2:
+    resolution: {integrity: sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==}
+
   react-is@19.2.6:
     resolution: {integrity: sha512-XjBR15BhXuylgWGuslhDKqlSayuqvqBX91BP8pauG8kd1zY8kotkNWbXksTCNRarse4kuGbe2kIY05ARtwNIvw==}
 
@@ -1365,6 +1456,10 @@ packages:
       react-dom: ^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
       react-is: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
 
+  redent@3.0.0:
+    resolution: {integrity: sha512-6tDA8g98We0zd0GvVeMT9arEOnTw9qM03L9cJXaCjrip1OO764RDBLBfrB4cwzNGDj5OA5ioymC9GkizgWJDUg==}
+    engines: {node: '>=8'}
+
   redux-thunk@3.1.0:
     resolution: {integrity: sha512-NW2r5T6ksUKXCabzhL9z+h206HQw/NJkcLm1GPImRQ8IzfXwRGqjVhKJGauHirT0DAuyy6hjdnMZaRoAcy0Klw==}
     peerDependencies:
@@ -1460,6 +1555,10 @@ packages:
     resolution: {integrity: sha512-yDPMNjp4WyfYBkHnjIRLfca1i6KMyGCtsVgoKe/z1+6vukgaENdgGBZt+ZmKPc4gavvEZ5OgHfHdrazhgNyG7w==}
     engines: {node: '>=12'}
 
+  strip-indent@3.0.0:
+    resolution: {integrity: sha512-laJTa3Jb+VQpaC6DseHhF7dXVqHTfJPCRDaEbid/drOhgitgYku/letMUqOXFoWV0zIIUbjpdH2t+tYj4bQMRQ==}
+    engines: {node: '>=8'}
+
   supports-color@7.2.0:
     resolution: {integrity: sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==}
     engines: {node: '>=8'}
@@ -1708,6 +1807,8 @@ packages:
 
 snapshots:
 
+  '@adobe/css-tools@4.5.0': {}
+
   '@asamuzakjp/css-color@5.1.11':
     dependencies:
       '@asamuzakjp/generational-cache': 1.0.1
@@ -1805,6 +1906,8 @@ snapshots:
     dependencies:
       '@babel/types': 7.29.0
 
+  '@babel/runtime@7.29.7': {}
+
   '@babel/template@7.28.6':
     dependencies:
       '@babel/code-frame': 7.29.0
@@ -2089,11 +2192,47 @@ snapshots:
       tailwindcss: 4.3.0
       vite: 8.0.13(@types/node@24.12.4)(jiti@2.7.0)(yaml@2.9.0)
 
+  '@testing-library/dom@10.4.1':
+    dependencies:
+      '@babel/code-frame': 7.29.0
+      '@babel/runtime': 7.29.7
+      '@types/aria-query': 5.0.4
+      aria-query: 5.3.0
+      dom-accessibility-api: 0.5.16
+      lz-string: 1.5.0
+      picocolors: 1.1.1
+      pretty-format: 27.5.1
+
+  '@testing-library/jest-dom@6.9.1':
+    dependencies:
+      '@adobe/css-tools': 4.5.0
+      aria-query: 5.3.0
+      css.escape: 1.5.1
+      dom-accessibility-api: 0.6.3
+      picocolors: 1.1.1
+      redent: 3.0.0
+
+  '@testing-library/react@16.3.2(@testing-library/dom@10.4.1)(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)':
+    dependencies:
+      '@babel/runtime': 7.29.7
+      '@testing-library/dom': 10.4.1
+      react: 19.2.6
+      react-dom: 19.2.6(react@19.2.6)
+    optionalDependencies:
+      '@types/react': 19.2.14
+      '@types/react-dom': 19.2.3(@types/react@19.2.14)
+
+  '@testing-library/user-event@14.6.1(@testing-library/dom@10.4.1)':
+    dependencies:
+      '@testing-library/dom': 10.4.1
+
   '@tybys/wasm-util@0.10.2':
     dependencies:
       tslib: 2.8.1
     optional: true
 
+  '@types/aria-query@5.0.4': {}
+
   '@types/chai@5.2.3':
     dependencies:
       '@types/deep-eql': 4.0.2
@@ -2313,10 +2452,18 @@ snapshots:
     dependencies:
       environment: 1.1.0
 
+  ansi-regex@5.0.1: {}
+
   ansi-regex@6.2.2: {}
 
+  ansi-styles@5.2.0: {}
+
   ansi-styles@6.2.3: {}
 
+  aria-query@5.3.0:
+    dependencies:
+      dequal: 2.0.3
+
   assertion-error@2.0.1: {}
 
   ast-v8-to-istanbul@1.0.0:
@@ -2375,6 +2522,8 @@ snapshots:
       mdn-data: 2.27.1
       source-map-js: 1.2.1
 
+  css.escape@1.5.1: {}
+
   csstype@3.2.3: {}
 
   d3-array@3.2.4:
@@ -2432,8 +2581,14 @@ snapshots:
 
   deep-is@0.1.4: {}
 
+  dequal@2.0.3: {}
+
   detect-libc@2.1.2: {}
 
+  dom-accessibility-api@0.5.16: {}
+
+  dom-accessibility-api@0.6.3: {}
+
   electron-to-chromium@1.5.359: {}
 
   emoji-regex@10.6.0: {}
@@ -2613,6 +2768,8 @@ snapshots:
 
   imurmurhash@0.1.4: {}
 
+  indent-string@4.0.0: {}
+
   internmap@2.0.3: {}
 
   is-extglob@2.1.1: {}
@@ -2777,6 +2934,8 @@ snapshots:
     dependencies:
       yallist: 3.1.1
 
+  lz-string@1.5.0: {}
+
   magic-string@0.30.21:
     dependencies:
       '@jridgewell/sourcemap-codec': 1.5.5
@@ -2795,6 +2954,8 @@ snapshots:
 
   mimic-function@5.0.1: {}
 
+  min-indent@1.0.1: {}
+
   minimatch@10.2.5:
     dependencies:
       brace-expansion: 5.0.6
@@ -2854,6 +3015,12 @@ snapshots:
 
   prettier@3.8.3: {}
 
+  pretty-format@27.5.1:
+    dependencies:
+      ansi-regex: 5.0.1
+      ansi-styles: 5.2.0
+      react-is: 17.0.2
+
   punycode@2.3.1: {}
 
   react-dom@19.2.6(react@19.2.6):
@@ -2861,6 +3028,8 @@ snapshots:
       react: 19.2.6
       scheduler: 0.27.0
 
+  react-is@17.0.2: {}
+
   react-is@19.2.6: {}
 
   react-redux@9.3.0(@types/react@19.2.14)(react@19.2.6)(redux@5.0.1):
@@ -2908,6 +3077,11 @@ snapshots:
       - '@types/react'
       - redux
 
+  redent@3.0.0:
+    dependencies:
+      indent-string: 4.0.0
+      strip-indent: 3.0.0
+
   redux-thunk@3.1.0(redux@5.0.1):
     dependencies:
       redux: 5.0.1
@@ -3001,6 +3175,10 @@ snapshots:
     dependencies:
       ansi-regex: 6.2.2
 
+  strip-indent@3.0.0:
+    dependencies:
+      min-indent: 1.0.1
+
   supports-color@7.2.0:
     dependencies:
       has-flag: 4.0.0