diff --git a/DESIGN.md b/DESIGN.md
new file mode 100644
index 0000000..8b397e1
--- /dev/null
+++ b/DESIGN.md
@@ -0,0 +1,340 @@
+# KnowNote Design System
+
+KnowNote is a desktop reading, note-taking and RAG tool. The interface is mostly
+chrome around content that people read for a long time: document text, notes,
+chat answers, settings.
+
+This document is the **single source of truth for UI decisions in this
+repository**. It is written to be executable: every rule names a token or a
+Tailwind class. If you are an agent adding a page or a component, follow the
+recipes in [Component recipes](#component-recipes) instead of inventing values.
+If a rule here is wrong or missing, change this file in the same PR as the code.
+
+Non-goals: this document does not define product behaviour, information
+architecture, branding (logo, hue of the primary colour) or i18n.
+
+## Design principles
+
+1. **Content is the subject.** Chrome is neutral and quiet. Panels are separated
+   by a 1px hairline and a surface step, not by shadows or colours.
+2. **Neutral first, accent rarely.** The accent colour marks focus and the
+   primary action of a view. It is never decoration. Same-screen accent elements
+   should be countable on one hand.
+3. **Hairline over shadow.** Shadows are reserved for things that float above the
+   document (dialogs, popovers, menus, toasts). Panels never float.
+4. **Density over airiness.** 32–36px rows, 44px panel headers, 14px UI text.
+   Density is what makes a knowledge tool feel fast.
+5. **Four states, always.** Every interactive surface has a defined `hover`,
+   `selected`, `focus-visible` and `disabled` expression. Missing states are
+   bugs, not omissions.
+
+Direction reference: Notion's content feel, Linear's information density,
+Raycast's desktop chrome (near-flat dark surfaces, hairlines, almost no shadow).
+
+## Surfaces
+
+The app is a stack of opaque surfaces plus two translucent state fills. Higher
+in the stack means further from the window background, and **lighter** in both
+colour schemes.
+
+| Token                | Tailwind              | Light               | Dark                            | Use for                                                                 |
+| -------------------- | --------------------- | ------------------- | ------------------------------- | ----------------------------------------------------------------------- |
+| `--surface-sunken`   | `bg-surface-sunken`   | `oklch(0.9551 0 0)` | `oklch(0.24 0.0127 258.3724)`   | Window chrome that sits _behind_ content: sidebar, left rail, title bar |
+| `--surface-base`     | `bg-surface-base`     | `oklch(0.9851 0 0)` | `oklch(0.2925 0.0157 264.2965)` | App canvas, page background, the gap between panels                     |
+| `--surface-raised`   | `bg-surface-raised`   | `oklch(1 0 0)`      | `oklch(0.325 0.011 260)`        | Content panels: document list, reader, chat, editor, cards              |
+| `--surface-overlay`  | `bg-surface-overlay`  | `oklch(1 0 0)`      | `oklch(0.365 0.011 260)`        | Floating layers: dialog, sheet, popover, menu, select, tooltip, toast   |
+| `--surface-hover`    | `bg-surface-hover`    | `foreground @ 5%`   | `neutral 0.9 @ 6%`              | Translucent hover fill for rows, menu items, ghost buttons              |
+| `--surface-selected` | `bg-surface-selected` | `foreground @ 9%`   | `neutral 0.9 @ 10%`             | Translucent selected/active fill for rows and toggles                   |
+
+Rules:
+
+- **Never invent a background colour.** `bg-white`, `bg-black`, `bg-gray-*`,
+  `bg-slate-*`, `bg-[…]` and raw `oklch()`/`hsl()` in a component are all
+  violations. If the surface you need is not in the table, the table is wrong —
+  extend it here.
+- `surface-hover` and `surface-selected` are translucent so that they adapt to
+  whatever they are drawn on. Do not add alpha to them again (`bg-surface-hover/50`
+  is a bug).
+- The ladder is monotonic: `sunken < base < raised < overlay` in lightness, in
+  **both** colour schemes. Ordering surfaces the other way (a panel darker than
+  the canvas in dark mode) is the bug this ladder was introduced to fix.
+- Adjacent surfaces must differ in lightness; two neighbours at the same value
+  mean you are expressing hierarchy through a shadow, which is not allowed.
+- Inside a panel, nested containers (a bubble, an inline code block, an icon
+  tile) use `bg-muted` — a quiet opaque fill — not another surface step. Do not
+  nest `surface-raised` inside `surface-raised`.
+
+Legacy aliases kept for compatibility while pages migrate:
+`--background`, `--card`, `--popover`, `--sidebar`, `--accent`,
+`--sidebar-accent` are defined in terms of the tokens above. New code uses
+`surface-*`.
+
+## Borders and elevation
+
+Two border weights exist, and only two:
+
+- **Hairline divider**: `border-b border-border` / `border-r border-border` —
+  panel seams, panel headers, list separators.
+- **Control outline**: `border border-border` on `Input`, `Select` trigger,
+  `outline` buttons and popover/menu containers.
+
+An element gets **both** a border and a shadow only when it floats. Rules:
+
+| Layer                                                   | Border                               | Shadow             |
+| ------------------------------------------------------- | ------------------------------------ | ------------------ |
+| Panel (`surface-raised`)                                | hairline dividers only, `rounded-lg` | **none**           |
+| Card (`surface-raised`)                                 | optional `border border-border`      | **none**           |
+| Overlay (`surface-overlay`)                             | `border border-border`               | `shadow-elevation` |
+| Small controls (switch knob, slider thumb, drag handle) | —                                    | `shadow-control`   |
+| Buttons, inputs, badges, tabs, list rows                | —                                    | **none**           |
+
+`shadow-elevation` and `shadow-control` are the only shadow tokens permitted in
+component code. The legacy `shadow-sm/md/lg/xl/2xl` utilities are aliases of
+`shadow-elevation` and exist only so that un-migrated lines degrade to a
+consistent value instead of a wild one; the design guard fails a build that
+introduces them.
+
+`ring` shadows (`ring-2`, `focus-visible:ring-ring`) are focus rings, not
+elevation, and are always allowed.
+
+## Radius
+
+Three values, no exceptions:
+
+| Value  | Class          | Use for                                                                                |
+| ------ | -------------- | -------------------------------------------------------------------------------------- |
+| 6px    | `rounded-md`   | Controls: buttons, inputs, selects, menu items, list rows, tabs, badges with a label   |
+| 8px    | `rounded-lg`   | Containers: panels, cards, dialogs, popovers, empty states, icon tiles, avatars-in-box |
+| 9999px | `rounded-full` | Pills, avatars, knobs, progress bars, counters                                         |
+
+`--radius: 0.5rem` in `theme.css` derives both scale values, so this is a single
+knob for the whole app. **Forbidden:** `rounded-sm`, `rounded-xl`,
+`rounded-2xl`, `rounded-3xl`, `rounded-[…]`. `rounded-none` is not in the list
+either: a full-bleed element inside a padded container should get its parent
+`p-1` + `rounded-md` items instead of a square child.
+
+Do not round one corner differently (`rounded-t-lg` is allowed only on a header
+that is visually part of a rounded container).
+
+## Spacing and density
+
+Base rhythm is 4 / 8 / 12 / 16 (`gap-1,2,3,4`; `p-2,3,4,6`). Half steps
+(`px-2.5`, `py-1.5`, `gap-1.5`) are tolerated only when aligning text against a
+16/20px icon; do not introduce them anywhere else.
+
+| Element                                    | Height   | Padding                                |
+| ------------------------------------------ | -------- | -------------------------------------- |
+| Panel header                               | `h-11`   | `px-3`, content `gap-2`                |
+| Toolbar icon button (`Button size="icon"`) | `size-8` | —                                      |
+| Button (`default`)                         | `h-9`    | `px-4`                                 |
+| Button (`sm`)                              | `h-8`    | `px-3`                                 |
+| Button (`lg`)                              | `h-10`   | `px-5`                                 |
+| Input / Select trigger                     | `h-9`    | `px-3`                                 |
+| List row, compact                          | `h-8`    | `px-2`                                 |
+| List row, comfortable                      | `h-9`    | `px-3`                                 |
+| Sidebar nav item                           | `h-8`    | `px-2`                                 |
+| Card / panel body padding                  | —        | `p-4`                                  |
+| Dialog padding                             | —        | `p-5`                                  |
+| Section gap inside a panel                 | —        | `space-y-3` / `divide-y divide-border` |
+| Page gutter                                | —        | `px-6 py-4`                            |
+
+Rows are separated with `divide-y divide-border` or a `border-b` hairline, never
+with margin gaps.
+
+## Type scale and text hierarchy
+
+Fonts (bound in `theme.css`, loaded by `index.html`):
+`--font-sans: Inter` for UI and prose, `--font-mono: Fira Code` for code, IDs
+and keycaps. `--font-serif: Lora` is reserved for long-form article titles; it is
+not currently used and must not be introduced without a stated reason.
+
+Three text levels, and only three:
+
+| Level          | Class                    | Use for                                                                                                             |
+| -------------- | ------------------------ | ------------------------------------------------------------------------------------------------------------------- |
+| T1 — primary   | `text-foreground`        | Titles, panel headers, list primary line, body of documents and answers, form values                                |
+| T2 — secondary | `text-muted-foreground`  | Descriptions, list secondary line, help text, placeholders, inactive icons                                          |
+| T3 — tertiary  | `text-subtle-foreground` | Timestamps, counters, keyboard hints, disabled labels — anything that must be readable but must not attract the eye |
+
+Do not express hierarchy by inventing a new grey (`text-gray-500`), and do not
+use opacity on top of a level (`text-muted-foreground/70`).
+
+Sizes:
+
+| Size | Class         | Use for                                                                               |
+| ---- | ------------- | ------------------------------------------------------------------------------------- |
+| 11px | `text-[11px]` | Keycaps, tiny counters (rare; prefer `text-xs`)                                       |
+| 12px | `text-xs`     | Meta line, timestamps, badges, table headers, code                                    |
+| 14px | `text-sm`     | **Default UI size**: buttons, labels, list rows, inputs, prose in chat and the editor |
+| 16px | `text-base`   | Dialog titles, empty-state body (only where 14px reads cramped)                       |
+| 18px | `text-lg`     | Page titles, empty-state titles                                                       |
+| 20px | `text-xl`     | Home hero only                                                                        |
+
+Weights: `font-normal` for body, `font-medium` for interactive labels, panel
+headers, section titles and the selected state of anything. `font-semibold` and
+above are reserved for page titles and the home hero. Never use weight alone to
+express selection — pair it with `bg-surface-selected`.
+
+Line height: UI text uses Tailwind defaults. Long-form reading surfaces
+(`markdown.css`, `noteEditor.css`) use 14px / `line-height: 1.75`.
+
+## Accent and states
+
+`--primary` is the only accent. It is allowed in exactly five places:
+
+1. The primary action of a view (`Button` variant `default`).
+2. Focus indication (`focus-visible:ring-2 focus-visible:ring-ring`).
+3. The selected indicator of a nav/list row: a 2px bar
+   (`before:` / `absolute inset-y-1 left-0 w-0.5 rounded-full bg-primary`) or a
+   filled `bg-primary text-primary-foreground` icon chip.
+4. Inline links: the `Button` variant `link`, and prose links inside long-form
+   content (`.markdown-body`, `.note-editor`).
+5. Progress and slider fill (`bg-primary`), where the colour _is_ the data.
+
+Everywhere else — toolbars, icon buttons, headers, cards, badges, tab labels,
+progress — the UI is neutral. A blue icon in a neutral toolbar is a violation.
+`--destructive` is allowed only on a destructive action and its confirmation
+dialog. `--chart-*` are for charts, graph nodes and mind-map topic colouring.
+
+State expressions (use these literal forms, they are the contract):
+
+| State         | Expression                                                                                                                                                                          |
+| ------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| hover         | `hover:bg-surface-hover` (rows, menu items, ghost/outline buttons)                                                                                                                  |
+| selected      | `bg-surface-selected` + `text-foreground` + `font-medium`; optional 2px primary indicator                                                                                           |
+| focus-visible | `focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background` (inputs use `ring-1` with `border-ring`) |
+| disabled      | `disabled:pointer-events-none disabled:opacity-50`                                                                                                                                  |
+| transition    | `transition-colors` for fills; `transition-[transform,opacity]` for popovers. No bouncy or long animations on chrome.                                                               |
+
+A row that is both hovered and selected keeps the selected fill; do not stack
+`hover:bg-surface-hover` on `bg-surface-selected` elements.
+
+A **segmented control** (`Tabs`) is the one place where selection is expressed as
+a surface step rather than a translucent fill, because the thumb must cover the
+track: track `bg-surface-sunken`, selected segment `bg-surface-raised`, no shadow.
+Both steps are monotonic in dark mode, which `bg-muted` + `bg-background` was not.
+
+Small atoms keep the control radius even though it is proportionally rounder:
+a 16px checkbox is `rounded-md`, not a new radius value.
+
+## Dark mode
+
+Dark mode is a first-class theme, not a filter. Requirements:
+
+- Every surface, border and text token has a dark value defined in `theme.css`;
+  a component must never branch on the theme itself.
+- The surface ladder is monotonic in dark mode too (see [Surfaces](#surfaces)).
+- Text levels keep their contrast ordering: T1 > T2 > T3. Do not ship a dark
+  value that reads below 3:1 against its surface.
+- Colour is never the only carrier of state (selection, error, warning) — pair it
+  with weight, an icon, or a border.
+- Both themes must be usable on every page; a page that "looks off in dark" is a
+  blocker, not a follow-up.
+
+## Do / Don't
+
+Do:
+
+- Separate panels with a hairline and one surface step.
+- Use `bg-surface-hover` for hover, `bg-surface-selected` for selection.
+- Keep a screen to one accent action.
+- Put reading content on `surface-raised` with T1 text and generous line height.
+- Reach for `text-sm` before anything else; go smaller only for meta.
+
+Don't:
+
+- `bg-white`, `bg-black`, `bg-slate-*`, `text-gray-*`, `border-[#…]`, raw
+  `oklch(...)` in a component, `bg-card shadow-md` panels, `rounded-xl` cards,
+  `shadow-sm` buttons or inputs, `rounded-sm` controls.
+- Gradients, glassmorphism (`backdrop-blur` except on a floating toolbar over
+  scrolling content), glow effects.
+- Colour icons in neutral chrome; colour-coded sections chosen from `--chart-*`
+  outside chart/graph surfaces.
+- Express hierarchy with `scale-*` transforms on chrome (allowed only inside
+  mind-map / graph editors, where zoom is part of the interaction).
+- `transition-all` on rows (`transition-colors` is enough and avoids animating
+  layout properties).
+
+## Component recipes
+
+Copy these shapes. `cn()` (`@/lib/utils`) is used for merging class overrides.
+
+### Panel
+
+```tsx
+<div className="flex h-full flex-col overflow-hidden rounded-lg border border-border bg-surface-raised">
+  <PanelHeader … />
+  <div className="min-h-0 flex-1 overflow-y-auto themed-scrollbar">…</div>
+</div>
+```
+
+### Panel header
+
+Implementation: `components/ui/panel-header.tsx`.
+
+```tsx
+<div className="flex h-11 shrink-0 items-center justify-between border-b border-border px-3" />
+```
+
+### Section / list
+
+Separators, not gaps:
+
+```tsx
+<div className="divide-y divide-border">
+  <button className="flex h-9 w-full items-center gap-2 px-3 text-sm text-foreground transition-colors hover:bg-surface-hover" />
+</div>
+```
+
+### Selected row
+
+```tsx
+<button className="flex h-9 items-center gap-2 rounded-md bg-surface-selected px-3 text-sm font-medium text-foreground" />
+```
+
+### Floating layer
+
+Dialog, popover, menu, toast:
+
+```tsx
+<div className="rounded-lg border border-border bg-surface-overlay shadow-elevation" />
+```
+
+### Empty state
+
+Implementation: `components/ui/empty.tsx`. `EmptyMedia variant="icon"` uses
+`bg-muted text-muted-foreground`, never the accent; the container is a
+`rounded-lg` dashed hairline, no shadow.
+
+### Form field
+
+Label is T2 `text-xs font-medium`, control is `h-8 rounded-md border
+border-border bg-surface-base px-3 text-sm`, error text `text-xs text-destructive`.
+Never signal an error with a red border alone.
+
+## Adding a page: order of decisions
+
+1. Pick the surfaces: which panel is `surface-raised`, what is `surface-base`
+   between panels, what is `surface-sunken`.
+2. Pick the panel header height (`h-11`) and the row density (`h-8` / `h-9`).
+3. Build with the [recipes](#component-recipes); pick radius from the radius
+   table, never a literal.
+4. Add the four states to every interactive element.
+5. Add the empty state using `Empty` before adding padding or placeholders.
+6. Check both themes, and check that the only accent on the screen is the primary
+   action and the focus ring.
+
+If any step needed a value that is not in this document, add that value here in
+the same PR.
+
+## Enforcement
+
+`npm run check:design` (`scripts/check-design-tokens.mjs`) fails on:
+
+- a radius utility outside the three allowed values;
+- a shadow utility other than `shadow-elevation` / `shadow-control`;
+- a background colour that is not a surface, `muted`, `transparent` or a
+  `--chart-*` token.
+
+The check runs as part of the `Verify` workflow. It reads source text, so it is
+also the fastest way to audit a branch: `npm run check:design -- --list`.
diff --git a/src/renderer/src/assets/theme.css b/src/renderer/src/assets/theme.css
index 5bab9f2..8dfe8bc 100644
--- a/src/renderer/src/assets/theme.css
+++ b/src/renderer/src/assets/theme.css
@@ -1,116 +1,167 @@
 @import 'tailwindcss';
 
+/*
+ * Token layers, from most primitive to most derived:
+ *
+ *   surfaces / text levels / accent / borders / elevation   <- primitives
+ *   legacy aliases (background, card, popover, sidebar, ...) <- derived
+ *   @theme inline                                            <- Tailwind utilities
+ *
+ * See DESIGN.md for the rules. A component must use the semantic utilities
+ * (bg-surface-*, text-muted-foreground, shadow-elevation, ...), never a
+ * primitive with a literal colour.
+ *
+ * Light-mode text contrast against --surface-raised:
+ *   T1 foreground            7.2:1
+ *   T2 muted-foreground      3.3:1
+ *   T3 subtle-foreground     2.2:1  (meta only, never essential information)
+ * Dark-mode text contrast against --surface-base:
+ *   T1 foreground            4.8:1
+ *   T2 muted-foreground      3.7:1
+ *   T3 subtle-foreground     2.7:1  (meta only, never essential information)
+ */
 :root {
-  --background: oklch(0.9851 0 0);
+  /* Surface ladder: sunken < base < raised < overlay, monotonic in both modes. */
+  --surface-sunken: oklch(0.9551 0 0);
+  --surface-base: oklch(0.9851 0 0);
+  --surface-raised: oklch(1 0 0);
+  --surface-overlay: oklch(1 0 0);
+  /* Translucent state fills: they adapt to whatever surface they are drawn on. */
+  --surface-hover: oklch(0.3496 0.0141 274.5028 / 0.05);
+  --surface-selected: oklch(0.3496 0.0141 274.5028 / 0.09);
+
+  /* Opaque quiet fill for nested containers (bubbles, icon tiles, code). */
+  --muted: oklch(0.9551 0 0);
+
+  /* Text hierarchy: T1 primary, T2 secondary, T3 tertiary. */
   --foreground: oklch(0.3496 0.0141 274.5028);
-  --card: oklch(1 0 0);
-  --card-foreground: oklch(0.3496 0.0141 274.5028);
-  --popover: oklch(1 0 0);
-  --popover-foreground: oklch(0.3496 0.0141 274.5028);
+  --muted-foreground: oklch(0.58 0.0141 274.5028);
+  --subtle-foreground: oklch(0.68 0.0107 267.3269);
+
+  /* Accent: primary action, focus ring, selection indicator. */
   --primary: oklch(0.6017 0.193 263.2461);
   --primary-foreground: oklch(1 0 0);
-  --secondary: oklch(0.9504 0.0042 236.4983);
-  --secondary-foreground: oklch(0.3496 0.0141 274.5028);
-  --muted: oklch(0.9551 0 0);
-  --muted-foreground: oklch(0.7055 0.0107 267.3269);
-  --accent: oklch(0.9335 0.0017 247.8402);
-  --accent-foreground: oklch(0.3496 0.0141 274.5028);
+  --ring: oklch(0.6017 0.193 263.2461);
   --destructive: oklch(0.6058 0.1839 29.6718);
   --destructive-foreground: oklch(1 0 0);
+
+  /* Hairline. --input is the neutral fill of unchecked controls, not a border. */
   --border: oklch(0.9067 0 0);
   --input: oklch(0.9551 0 0);
-  --ring: oklch(0.6017 0.193 263.2461);
+
   --chart-1: oklch(0.7304 0.1213 245.2972);
   --chart-2: oklch(0.7683 0.1103 133);
   --chart-3: oklch(0.6709 0.1448 16.9989);
   --chart-4: oklch(0.8249 0.097 82.2597);
   --chart-5: oklch(0.6936 0.1635 318.2073);
-  --sidebar: oklch(0.9551 0 0);
-  --sidebar-foreground: oklch(0.3496 0.0141 274.5028);
-  --sidebar-primary: oklch(0.6017 0.193 263.2461);
-  --sidebar-primary-foreground: oklch(1 0 0);
-  --sidebar-accent: oklch(0.88 0.01 250);
-  --sidebar-accent-foreground: oklch(0.3496 0.0141 274.5028);
-  --sidebar-border: oklch(0.8576 0 0);
-  --sidebar-ring: oklch(0.6017 0.193 263.2461);
+
+  /* Elevation: floating layers, plus a small lift for knobs and handles. */
+  --shadow-elevation: 0 6px 16px -4px hsl(0 0% 0% / 0.12), 0 2px 4px -1px hsl(0 0% 0% / 0.06);
+  --shadow-control: 0 1px 2px 0 hsl(0 0% 0% / 0.16);
+
   --font-sans: 'Inter', sans-serif;
   --font-serif: 'Lora', serif;
   --font-mono: 'Fira Code', monospace;
   --radius: 0.5rem;
+
   --shadow-x: 0px;
   --shadow-y: 2px;
   --shadow-blur: 8px;
   --shadow-spread: 0px;
   --shadow-opacity: 0.08;
   --shadow-color: #000000;
-  --shadow-2xs: 0px 2px 8px 0px hsl(0 0% 0% / 0.04);
-  --shadow-xs: 0px 2px 8px 0px hsl(0 0% 0% / 0.04);
-  --shadow-sm: 0px 2px 8px 0px hsl(0 0% 0% / 0.08), 0px 1px 2px -1px hsl(0 0% 0% / 0.08);
-  --shadow: 0px 2px 8px 0px hsl(0 0% 0% / 0.08), 0px 1px 2px -1px hsl(0 0% 0% / 0.08);
-  --shadow-md: 0px 2px 8px 0px hsl(0 0% 0% / 0.08), 0px 2px 4px -1px hsl(0 0% 0% / 0.08);
-  --shadow-lg: 0px 2px 8px 0px hsl(0 0% 0% / 0.08), 0px 4px 6px -1px hsl(0 0% 0% / 0.08);
-  --shadow-xl: 0px 2px 8px 0px hsl(0 0% 0% / 0.08), 0px 8px 10px -1px hsl(0 0% 0% / 0.08);
-  --shadow-2xl: 0px 2px 8px 0px hsl(0 0% 0% / 0.2);
   --tracking-normal: 0em;
   --spacing: 0.25rem;
   --shadow-offset-x: 0px;
   --shadow-offset-y: 2px;
   --letter-spacing: 0em;
+
+  /*
+   * Legacy aliases. Kept so un-migrated components keep working while the
+   * surfaces are adopted page by page; new code uses the tokens above.
+   * The shadow aliases collapse onto the two real tokens on purpose: a missed
+   * shadow-sm/md/lg then renders the same elevation instead of a third style.
+   */
+  --background: var(--surface-base);
+  --card: var(--surface-raised);
+  --card-foreground: var(--foreground);
+  --popover: var(--surface-overlay);
+  --popover-foreground: var(--foreground);
+  --secondary: oklch(0.9504 0.0042 236.4983);
+  --secondary-foreground: var(--foreground);
+  --accent: var(--surface-selected);
+  --accent-foreground: var(--foreground);
+  --sidebar: var(--surface-sunken);
+  --sidebar-foreground: var(--foreground);
+  --sidebar-primary: var(--primary);
+  --sidebar-primary-foreground: var(--primary-foreground);
+  --sidebar-accent: var(--surface-selected);
+  --sidebar-accent-foreground: var(--foreground);
+  --sidebar-border: var(--border);
+  --sidebar-ring: var(--ring);
+
+  --shadow-2xs: var(--shadow-control);
+  --shadow-xs: var(--shadow-control);
+  --shadow-sm: var(--shadow-elevation);
+  --shadow: var(--shadow-elevation);
+  --shadow-md: var(--shadow-elevation);
+  --shadow-lg: var(--shadow-elevation);
+  --shadow-xl: var(--shadow-elevation);
+  --shadow-2xl: var(--shadow-elevation);
 }
 
 @custom-variant dark (&:is(.dark *));
 
+/*
+ * Only primitives are redefined here. Every alias above resolves `var(...)` at
+ * use time, so the ladder stays in sync in both modes automatically — including
+ * the shadow aliases, which is why they are not repeated below.
+ */
 .dark {
-  --background: oklch(0.2925 0.0157 264.2965);
+  --surface-sunken: oklch(0.24 0.0127 258.3724);
+  --surface-base: oklch(0.2925 0.0157 264.2965);
+  --surface-raised: oklch(0.325 0.011 260);
+  --surface-overlay: oklch(0.365 0.011 260);
+  --surface-hover: oklch(0.9 0.01 262 / 0.06);
+  --surface-selected: oklch(0.9 0.01 262 / 0.1);
+
+  --muted: oklch(0.3863 0.0235 265.6941);
+
   --foreground: oklch(0.7621 0.0202 262.9873);
-  --card: oklch(0.263 0.0127 258.3724);
-  --card-foreground: oklch(0.7621 0.0202 262.9873);
-  --popover: oklch(0.2925 0.0157 264.2965);
-  --popover-foreground: oklch(0.7621 0.0202 262.9873);
+  --muted-foreground: oklch(0.68 0.02 262.9873);
+  --subtle-foreground: oklch(0.58 0.02 262.9873);
+
   --primary: oklch(0.7304 0.1213 245.2972);
-  --primary-foreground: oklch(1 0 0);
-  --secondary: oklch(0.3863 0.0235 265.6941);
-  --secondary-foreground: oklch(0.7621 0.0202 262.9873);
-  --muted: oklch(0.3863 0.0235 265.6941);
-  --muted-foreground: oklch(0.4983 0.0225 262.9131);
-  --accent: oklch(0.3863 0.0235 265.6941);
-  --accent-foreground: oklch(0.7621 0.0202 262.9873);
+  --ring: oklch(0.7304 0.1213 245.2972);
   --destructive: oklch(0.6709 0.1448 16.9989);
-  --destructive-foreground: oklch(1 0 0);
+
   --border: oklch(0.3863 0.0235 265.6941);
   --input: oklch(0.3863 0.0235 265.6941);
-  --ring: oklch(0.7304 0.1213 245.2972);
+
   --chart-1: oklch(0.7304 0.1213 245.2972);
   --chart-2: oklch(0.7683 0.1103 133);
   --chart-3: oklch(0.6709 0.1448 16.9989);
   --chart-4: oklch(0.8249 0.097 82.2597);
   --chart-5: oklch(0.6936 0.1635 318.2073);
-  --sidebar: oklch(0.263 0.0127 258.3724);
-  --sidebar-foreground: oklch(0.7621 0.0202 262.9873);
-  --sidebar-primary: oklch(0.7304 0.1213 245.2972);
-  --sidebar-primary-foreground: oklch(1 0 0);
-  --sidebar-accent: oklch(0.36 0.015 250);
-  --sidebar-accent-foreground: oklch(0.2925 0.0157 264.2965);
-  --sidebar-border: oklch(0.3863 0.0235 265.6941);
-  --sidebar-ring: oklch(0.7304 0.1213 245.2972);
+
+  --shadow-elevation: 0 8px 22px -6px hsl(0 0% 0% / 0.55), 0 2px 4px -1px hsl(0 0% 0% / 0.35);
+  --shadow-control: 0 1px 2px 0 hsl(0 0% 0% / 0.5);
+
+  --secondary: oklch(0.3863 0.0235 265.6941);
+  /* A hairline on the sunken rail must step from --surface-sunken, not --border. */
+  --sidebar-border: oklch(0.3 0.0127 258.3724);
+
   --font-sans: 'Inter', sans-serif;
   --font-serif: 'Lora', serif;
   --font-mono: 'Fira Code', monospace;
   --radius: 0.5rem;
+
   --shadow-x: 0px;
   --shadow-y: 6px;
   --shadow-blur: 15px;
   --shadow-spread: 0px;
   --shadow-opacity: 0.3;
   --shadow-color: #000000;
-  --shadow-2xs: 0px 6px 15px 0px hsl(0 0% 0% / 0.15);
-  --shadow-xs: 0px 6px 15px 0px hsl(0 0% 0% / 0.15);
-  --shadow-sm: 0px 6px 15px 0px hsl(0 0% 0% / 0.3), 0px 1px 2px -1px hsl(0 0% 0% / 0.3);
-  --shadow: 0px 6px 15px 0px hsl(0 0% 0% / 0.3), 0px 1px 2px -1px hsl(0 0% 0% / 0.3);
-  --shadow-md: 0px 6px 15px 0px hsl(0 0% 0% / 0.3), 0px 2px 4px -1px hsl(0 0% 0% / 0.3);
-  --shadow-lg: 0px 6px 15px 0px hsl(0 0% 0% / 0.3), 0px 4px 6px -1px hsl(0 0% 0% / 0.3);
-  --shadow-xl: 0px 6px 15px 0px hsl(0 0% 0% / 0.3), 0px 8px 10px -1px hsl(0 0% 0% / 0.3);
-  --shadow-2xl: 0px 6px 15px 0px hsl(0 0% 0% / 0.75);
   --shadow-offset-x: 0px;
   --shadow-offset-y: 6px;
   --letter-spacing: 0em;
@@ -118,8 +169,17 @@
 }
 
 @theme inline {
+  --color-surface-sunken: var(--surface-sunken);
+  --color-surface-base: var(--surface-base);
+  --color-surface-raised: var(--surface-raised);
+  --color-surface-overlay: var(--surface-overlay);
+  --color-surface-hover: var(--surface-hover);
+  --color-surface-selected: var(--surface-selected);
+
   --color-background: var(--background);
   --color-foreground: var(--foreground);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-subtle-foreground: var(--subtle-foreground);
   --color-card: var(--card);
   --color-card-foreground: var(--card-foreground);
   --color-popover: var(--popover);
@@ -129,7 +189,6 @@
   --color-secondary: var(--secondary);
   --color-secondary-foreground: var(--secondary-foreground);
   --color-muted: var(--muted);
-  --color-muted-foreground: var(--muted-foreground);
   --color-accent: var(--accent);
   --color-accent-foreground: var(--accent-foreground);
   --color-destructive: var(--destructive);
@@ -155,11 +214,17 @@
   --font-mono: 'Fira Code', monospace;
   --font-serif: 'Lora', serif;
 
+  /* radius: control = md (6px), container = lg (8px), pill = full. */
   --radius-sm: calc(var(--radius) - 4px);
   --radius-md: calc(var(--radius) - 2px);
   --radius-lg: var(--radius);
   --radius-xl: calc(var(--radius) + 4px);
+  --radius-2xl: calc(var(--radius) + 8px);
+  --radius-3xl: calc(var(--radius) + 12px);
+  --radius-4xl: calc(var(--radius) + 16px);
 
+  --shadow-elevation: var(--shadow-elevation);
+  --shadow-control: var(--shadow-control);
   --shadow-2xs: var(--shadow-2xs);
   --shadow-xs: var(--shadow-xs);
   --shadow-sm: var(--shadow-sm);
@@ -168,6 +233,7 @@
   --shadow-lg: var(--shadow-lg);
   --shadow-xl: var(--shadow-xl);
   --shadow-2xl: var(--shadow-2xl);
+
   --radius: 0.5rem;
   --tracking-tighter: calc(var(--tracking-normal) - 0.05em);
   --tracking-tight: calc(var(--tracking-normal) - 0.025em);
@@ -183,9 +249,6 @@
   --shadow-blur: var(--shadow-blur);
   --shadow-opacity: var(--shadow-opacity);
   --color-shadow-color: var(--shadow-color);
-  --radius-2xl: calc(var(--radius) + 8px);
-  --radius-3xl: calc(var(--radius) + 12px);
-  --radius-4xl: calc(var(--radius) + 16px);
 }
 
 @layer base {
@@ -199,7 +262,7 @@
     @apply border-border outline-ring/50;
   }
   body {
-    @apply bg-background text-foreground;
+    @apply bg-surface-base text-foreground;
   }
 }
 
diff --git a/src/renderer/src/components/ui/alert-dialog.tsx b/src/renderer/src/components/ui/alert-dialog.tsx
index e31c9cb..48f46e0 100644
--- a/src/renderer/src/components/ui/alert-dialog.tsx
+++ b/src/renderer/src/components/ui/alert-dialog.tsx
@@ -34,7 +34,7 @@ const AlertDialogContent = React.forwardRef<
     <AlertDialogPrimitive.Content
       ref={ref}
       className={cn(
-        'fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg',
+        'fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border border-border bg-surface-overlay p-5 shadow-elevation duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%]',
         className
       )}
       {...props}
@@ -62,7 +62,7 @@ const AlertDialogTitle = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <AlertDialogPrimitive.Title
     ref={ref}
-    className={cn('text-lg font-semibold', className)}
+    className={cn('text-base font-semibold leading-tight', className)}
     {...props}
   />
 ))
diff --git a/src/renderer/src/components/ui/badge.tsx b/src/renderer/src/components/ui/badge.tsx
index 3d8ee36..b86ae08 100644
--- a/src/renderer/src/components/ui/badge.tsx
+++ b/src/renderer/src/components/ui/badge.tsx
@@ -4,13 +4,12 @@ import { cva, type VariantProps } from 'class-variance-authority'
 import { cn } from '@/lib/utils'
 
 const badgeVariants = cva(
-  'inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2',
+  'inline-flex items-center rounded-full border px-2 py-0.5 text-xs font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2',
   {
     variants: {
       variant: {
         default: 'border-transparent bg-primary text-primary-foreground hover:bg-primary/80',
-        secondary:
-          'border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80',
+        secondary: 'border-transparent bg-muted text-foreground hover:bg-surface-hover',
         destructive:
           'border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80',
         outline: 'text-foreground'
diff --git a/src/renderer/src/components/ui/button.tsx b/src/renderer/src/components/ui/button.tsx
index 94102c2..8e78a92 100644
--- a/src/renderer/src/components/ui/button.tsx
+++ b/src/renderer/src/components/ui/button.tsx
@@ -11,16 +11,16 @@ const buttonVariants = cva(
       variant: {
         default: 'bg-primary text-primary-foreground hover:bg-primary/90',
         destructive: 'bg-destructive text-destructive-foreground hover:bg-destructive/90',
-        outline: 'border border-input bg-background hover:bg-accent hover:text-accent-foreground',
-        secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80',
-        ghost: 'hover:bg-accent hover:text-accent-foreground',
+        outline: 'border border-border bg-transparent hover:bg-surface-hover hover:text-foreground',
+        secondary: 'bg-muted text-foreground hover:bg-surface-hover',
+        ghost: 'hover:bg-surface-hover hover:text-foreground',
         link: 'text-primary underline-offset-4 hover:underline'
       },
       size: {
-        default: 'h-10 px-4 py-2',
-        sm: 'h-9 rounded-md px-3',
-        lg: 'h-11 rounded-md px-8',
-        icon: 'h-10 w-10'
+        default: 'h-9 px-4',
+        sm: 'h-8 rounded-md px-3',
+        lg: 'h-10 rounded-md px-5',
+        icon: 'size-8'
       }
     },
     defaultVariants: {
diff --git a/src/renderer/src/components/ui/card.tsx b/src/renderer/src/components/ui/card.tsx
index 7c2ac64..850af42 100644
--- a/src/renderer/src/components/ui/card.tsx
+++ b/src/renderer/src/components/ui/card.tsx
@@ -6,10 +6,7 @@ const Card = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElemen
   ({ className, ...props }, ref) => (
     <div
       ref={ref}
-      className={cn(
-        'rounded-lg border border-border bg-card text-card-foreground shadow-sm',
-        className
-      )}
+      className={cn('rounded-lg border border-border bg-surface-raised text-foreground', className)}
       {...props}
     />
   )
@@ -18,7 +15,7 @@ Card.displayName = 'Card'
 
 const CardHeader = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
   ({ className, ...props }, ref) => (
-    <div ref={ref} className={cn('flex flex-col space-y-1.5 p-6', className)} {...props} />
+    <div ref={ref} className={cn('flex flex-col space-y-1 p-4', className)} {...props} />
   )
 )
 CardHeader.displayName = 'CardHeader'
@@ -27,7 +24,7 @@ const CardTitle = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivE
   ({ className, ...props }, ref) => (
     <div
       ref={ref}
-      className={cn('text-2xl font-semibold leading-none tracking-tight', className)}
+      className={cn('text-base font-medium leading-tight tracking-tight', className)}
       {...props}
     />
   )
@@ -43,14 +40,14 @@ CardDescription.displayName = 'CardDescription'
 
 const CardContent = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
   ({ className, ...props }, ref) => (
-    <div ref={ref} className={cn('p-6 pt-0', className)} {...props} />
+    <div ref={ref} className={cn('p-4 pt-0', className)} {...props} />
   )
 )
 CardContent.displayName = 'CardContent'
 
 const CardFooter = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
   ({ className, ...props }, ref) => (
-    <div ref={ref} className={cn('flex items-center p-6 pt-0', className)} {...props} />
+    <div ref={ref} className={cn('flex items-center p-4 pt-0', className)} {...props} />
   )
 )
 CardFooter.displayName = 'CardFooter'
diff --git a/src/renderer/src/components/ui/checkbox.tsx b/src/renderer/src/components/ui/checkbox.tsx
index df586e2..2f6631f 100644
--- a/src/renderer/src/components/ui/checkbox.tsx
+++ b/src/renderer/src/components/ui/checkbox.tsx
@@ -11,7 +11,7 @@ const Checkbox = React.forwardRef<
   <CheckboxPrimitive.Root
     ref={ref}
     className={cn(
-      'grid place-content-center peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground',
+      'grid place-content-center peer size-4 shrink-0 rounded-md border border-border ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:border-primary data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground',
       className
     )}
     {...props}
diff --git a/src/renderer/src/components/ui/context-menu.tsx b/src/renderer/src/components/ui/context-menu.tsx
index daa0e74..43a2e2c 100644
--- a/src/renderer/src/components/ui/context-menu.tsx
+++ b/src/renderer/src/components/ui/context-menu.tsx
@@ -27,7 +27,7 @@ const ContextMenuSubTrigger = React.forwardRef<
   <ContextMenuPrimitive.SubTrigger
     ref={ref}
     className={cn(
-      'flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground',
+      'flex cursor-default select-none items-center rounded-md px-2 py-1.5 text-sm text-foreground outline-none focus:bg-surface-hover focus:text-foreground data-[state=open]:bg-surface-hover data-[state=open]:text-foreground',
       inset && 'pl-8',
       className
     )}
@@ -46,7 +46,7 @@ const ContextMenuSubContent = React.forwardRef<
   <ContextMenuPrimitive.SubContent
     ref={ref}
     className={cn(
-      'z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-context-menu-content-transform-origin]',
+      'z-50 min-w-[8rem] overflow-hidden rounded-lg border border-border bg-surface-overlay p-1 text-foreground shadow-elevation data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-context-menu-content-transform-origin]',
       className
     )}
     {...props}
@@ -62,7 +62,7 @@ const ContextMenuContent = React.forwardRef<
     <ContextMenuPrimitive.Content
       ref={ref}
       className={cn(
-        'z-50 max-h-[--radix-context-menu-content-available-height] min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md animate-in fade-in-80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-context-menu-content-transform-origin]',
+        'z-50 max-h-[--radix-context-menu-content-available-height] min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-lg border border-border bg-surface-overlay p-1 text-foreground shadow-elevation animate-in fade-in-80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-context-menu-content-transform-origin]',
         className
       )}
       {...props}
@@ -80,7 +80,7 @@ const ContextMenuItem = React.forwardRef<
   <ContextMenuPrimitive.Item
     ref={ref}
     className={cn(
-      'relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+      'relative flex cursor-default select-none items-center rounded-md px-2 py-1.5 text-sm text-foreground outline-none focus:bg-surface-hover focus:text-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
       inset && 'pl-8',
       className
     )}
@@ -96,7 +96,7 @@ const ContextMenuCheckboxItem = React.forwardRef<
   <ContextMenuPrimitive.CheckboxItem
     ref={ref}
     className={cn(
-      'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+      'relative flex cursor-default select-none items-center rounded-md py-1.5 pl-8 pr-2 text-sm text-foreground outline-none focus:bg-surface-hover focus:text-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
       className
     )}
     checked={checked}
@@ -119,7 +119,7 @@ const ContextMenuRadioItem = React.forwardRef<
   <ContextMenuPrimitive.RadioItem
     ref={ref}
     className={cn(
-      'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+      'relative flex cursor-default select-none items-center rounded-md py-1.5 pl-8 pr-2 text-sm text-foreground outline-none focus:bg-surface-hover focus:text-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
       className
     )}
     {...props}
diff --git a/src/renderer/src/components/ui/dialog.tsx b/src/renderer/src/components/ui/dialog.tsx
index 7691ad8..c540453 100644
--- a/src/renderer/src/components/ui/dialog.tsx
+++ b/src/renderer/src/components/ui/dialog.tsx
@@ -38,14 +38,14 @@ const DialogContent = React.forwardRef<
     <DialogPrimitive.Content
       ref={ref}
       className={cn(
-        'fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg',
+        'fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border border-border bg-surface-overlay p-5 shadow-elevation duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%]',
         className
       )}
       {...props}
     >
       {children}
       {showCloseButton && (
-        <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
+        <DialogPrimitive.Close className="absolute right-3 top-3 rounded-md p-1 opacity-70 ring-offset-background transition-colors hover:bg-surface-hover hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none">
           <X className="h-4 w-4" />
           <span className="sr-only">Close</span>
         </DialogPrimitive.Close>
@@ -74,7 +74,7 @@ const DialogTitle = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <DialogPrimitive.Title
     ref={ref}
-    className={cn('text-lg font-semibold leading-none tracking-tight', className)}
+    className={cn('text-base font-semibold leading-tight tracking-tight', className)}
     {...props}
   />
 ))
diff --git a/src/renderer/src/components/ui/empty.tsx b/src/renderer/src/components/ui/empty.tsx
index b438279..e7c8ab2 100644
--- a/src/renderer/src/components/ui/empty.tsx
+++ b/src/renderer/src/components/ui/empty.tsx
@@ -7,7 +7,7 @@ function Empty({ className, ...props }: React.ComponentProps<'div'>) {
     <div
       data-slot="empty"
       className={cn(
-        'flex min-w-0 flex-1 flex-col items-center justify-center gap-6 text-balance rounded-lg border-dashed p-6 text-center md:p-12',
+        'flex min-w-0 flex-1 flex-col items-center justify-center gap-4 rounded-lg border border-dashed border-border p-6 text-center md:p-10',
         className
       )}
       {...props}
@@ -31,7 +31,7 @@ const emptyMediaVariants = cva(
     variants: {
       variant: {
         default: 'bg-transparent',
-        icon: "bg-muted text-foreground flex size-10 shrink-0 items-center justify-center rounded-lg [&_svg:not([class*='size-'])]:size-6"
+        icon: "bg-muted text-muted-foreground flex size-10 shrink-0 items-center justify-center rounded-lg [&_svg:not([class*='size-'])]:size-6"
       }
     },
     defaultVariants: {
@@ -59,7 +59,7 @@ function EmptyTitle({ className, ...props }: React.ComponentProps<'div'>) {
   return (
     <div
       data-slot="empty-title"
-      className={cn('text-lg font-medium tracking-tight', className)}
+      className={cn('text-base font-medium tracking-tight', className)}
       {...props}
     />
   )
diff --git a/src/renderer/src/components/ui/field.tsx b/src/renderer/src/components/ui/field.tsx
index b9e9db5..79a5158 100644
--- a/src/renderer/src/components/ui/field.tsx
+++ b/src/renderer/src/components/ui/field.tsx
@@ -106,7 +106,7 @@ function FieldLabel({ className, ...props }: React.ComponentProps<typeof Label>)
       className={cn(
         'group/field-label peer/field-label flex w-fit gap-2 leading-snug group-data-[disabled=true]/field:opacity-50',
         'has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col has-[>[data-slot=field]]:rounded-md has-[>[data-slot=field]]:border [&>[data-slot=field]]:p-4',
-        'has-data-[state=checked]:bg-primary/5 has-data-[state=checked]:border-primary dark:has-data-[state=checked]:bg-primary/10',
+        'has-data-[state=checked]:bg-surface-selected has-data-[state=checked]:border-border',
         className
       )}
       {...props}
@@ -162,7 +162,7 @@ function FieldSeparator({
       <Separator className="absolute inset-0 top-1/2" />
       {children && (
         <span
-          className="bg-background text-muted-foreground relative mx-auto block w-fit px-2"
+          className="bg-surface-base text-muted-foreground relative mx-auto block w-fit px-2"
           data-slot="field-separator-content"
         >
           {children}
diff --git a/src/renderer/src/components/ui/input.tsx b/src/renderer/src/components/ui/input.tsx
index e6fe6c0..659c49c 100644
--- a/src/renderer/src/components/ui/input.tsx
+++ b/src/renderer/src/components/ui/input.tsx
@@ -8,7 +8,7 @@ const Input = React.forwardRef<HTMLInputElement, React.ComponentProps<'input'>>(
       <input
         type={type}
         className={cn(
-          'flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-base ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
+          'flex h-9 w-full rounded-md border border-border bg-surface-base px-3 text-sm text-foreground ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
           className
         )}
         ref={ref}
diff --git a/src/renderer/src/components/ui/panel-header.tsx b/src/renderer/src/components/ui/panel-header.tsx
index c8a73d9..099e301 100644
--- a/src/renderer/src/components/ui/panel-header.tsx
+++ b/src/renderer/src/components/ui/panel-header.tsx
@@ -14,7 +14,7 @@ const PanelHeader = React.forwardRef<HTMLDivElement, PanelHeaderProps>(
       <div
         ref={ref}
         className={cn(
-          'h-12 flex items-center justify-between px-4 border-b border-border shrink-0',
+          'h-11 flex items-center justify-between gap-2 px-3 border-b border-border shrink-0',
           className
         )}
         style={draggable ? ({ WebkitAppRegion: 'drag' } as React.CSSProperties) : undefined}
diff --git a/src/renderer/src/components/ui/progress.tsx b/src/renderer/src/components/ui/progress.tsx
index 435d920..bcf7f50 100644
--- a/src/renderer/src/components/ui/progress.tsx
+++ b/src/renderer/src/components/ui/progress.tsx
@@ -11,7 +11,7 @@ const Progress = React.forwardRef<
 >(({ className, value, ...props }, ref) => (
   <ProgressPrimitive.Root
     ref={ref}
-    className={cn('relative h-4 w-full overflow-hidden rounded-full bg-secondary', className)}
+    className={cn('relative h-2 w-full overflow-hidden rounded-full bg-muted', className)}
     {...props}
   >
     <ProgressPrimitive.Indicator
diff --git a/src/renderer/src/components/ui/scroll-area.tsx b/src/renderer/src/components/ui/scroll-area.tsx
index fe70e1c..8e225b2 100644
--- a/src/renderer/src/components/ui/scroll-area.tsx
+++ b/src/renderer/src/components/ui/scroll-area.tsx
@@ -14,7 +14,7 @@ const ScrollArea = React.forwardRef<
     className={cn('relative overflow-hidden', className)}
     {...props}
   >
-    <ScrollAreaPrimitive.Viewport className="h-full w-full rounded-[inherit]">
+    <ScrollAreaPrimitive.Viewport className="h-full w-full">
       {children}
     </ScrollAreaPrimitive.Viewport>
     <ScrollBar />
diff --git a/src/renderer/src/components/ui/select.tsx b/src/renderer/src/components/ui/select.tsx
index 7d88001..b867ce9 100644
--- a/src/renderer/src/components/ui/select.tsx
+++ b/src/renderer/src/components/ui/select.tsx
@@ -17,7 +17,7 @@ const SelectTrigger = React.forwardRef<
   <SelectPrimitive.Trigger
     ref={ref}
     className={cn(
-      'flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background data-[placeholder]:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1',
+      'flex h-9 w-full items-center justify-between rounded-md border border-border bg-surface-base px-3 text-sm text-foreground ring-offset-background data-[placeholder]:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1',
       className
     )}
     {...props}
@@ -38,7 +38,7 @@ const SelectContent = React.forwardRef<
     <SelectPrimitive.Content
       ref={ref}
       className={cn(
-        'relative z-50 max-h-72 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-select-content-transform-origin]',
+        'relative z-50 max-h-72 min-w-[8rem] overflow-hidden rounded-lg border border-border bg-surface-overlay text-foreground shadow-elevation data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-select-content-transform-origin]',
         position === 'popper' &&
           'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',
         className
@@ -65,7 +65,7 @@ const SelectLabel = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <SelectPrimitive.Label
     ref={ref}
-    className={cn('py-1.5 pl-8 pr-2 text-sm font-semibold', className)}
+    className={cn('py-1 pl-1 pr-2 text-xs font-medium text-muted-foreground', className)}
     {...props}
   />
 ))
@@ -78,7 +78,7 @@ const SelectItem = React.forwardRef<
   <SelectPrimitive.Item
     ref={ref}
     className={cn(
-      'relative flex w-full cursor-default select-none items-center rounded-sm py-2 pl-1 pr-8 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+      'relative flex w-full cursor-default select-none items-center rounded-md py-1.5 pl-2 pr-8 text-sm text-foreground outline-none focus:bg-surface-hover focus:text-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
       className
     )}
     {...props}
@@ -100,7 +100,7 @@ const SelectSeparator = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <SelectPrimitive.Separator
     ref={ref}
-    className={cn('-mx-1 my-1 h-px bg-muted', className)}
+    className={cn('-mx-1 my-1 h-px bg-border', className)}
     {...props}
   />
 ))
diff --git a/src/renderer/src/components/ui/sheet.tsx b/src/renderer/src/components/ui/sheet.tsx
index 55b4cb1..0bc508f 100644
--- a/src/renderer/src/components/ui/sheet.tsx
+++ b/src/renderer/src/components/ui/sheet.tsx
@@ -31,16 +31,16 @@ const SheetOverlay = React.forwardRef<
 SheetOverlay.displayName = SheetPrimitive.Overlay.displayName
 
 const sheetVariants = cva(
-  'fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500',
+  'fixed z-50 gap-4 bg-surface-overlay p-5 shadow-elevation transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500',
   {
     variants: {
       side: {
-        top: 'inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top',
+        top: 'inset-x-0 top-0 border-b border-border data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top',
         bottom:
-          'inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom',
-        left: 'inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm',
+          'inset-x-0 bottom-0 border-t border-border data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom',
+        left: 'inset-y-0 left-0 h-full w-3/4 border-r border-border data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm',
         right:
-          'inset-y-0 right-0 h-full w-3/4  border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm'
+          'inset-y-0 right-0 h-full w-3/4 border-l border-border data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm'
       }
     },
     defaultVariants: {
@@ -62,7 +62,7 @@ const SheetContent = React.forwardRef<
     <SheetOverlay />
     <SheetPrimitive.Content ref={ref} className={cn(sheetVariants({ side }), className)} {...props}>
       {children}
-      <SheetPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary">
+      <SheetPrimitive.Close className="absolute right-3 top-3 rounded-md p-1 opacity-70 ring-offset-background transition-colors hover:bg-surface-hover hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none">
         <X className="h-4 w-4" />
         <span className="sr-only">Close</span>
       </SheetPrimitive.Close>
diff --git a/src/renderer/src/components/ui/slider.tsx b/src/renderer/src/components/ui/slider.tsx
index ccbe7fc..84756e7 100644
--- a/src/renderer/src/components/ui/slider.tsx
+++ b/src/renderer/src/components/ui/slider.tsx
@@ -12,10 +12,10 @@ const Slider = React.forwardRef<
     className={cn('relative flex w-full touch-none select-none items-center', className)}
     {...props}
   >
-    <SliderPrimitive.Track className="relative h-2 w-full grow overflow-hidden rounded-full bg-secondary">
+    <SliderPrimitive.Track className="relative h-1.5 w-full grow overflow-hidden rounded-full bg-muted">
       <SliderPrimitive.Range className="absolute h-full bg-primary" />
     </SliderPrimitive.Track>
-    <SliderPrimitive.Thumb className="block h-5 w-5 rounded-full border-2 border-primary bg-background ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50" />
+    <SliderPrimitive.Thumb className="block size-4 rounded-full border-2 border-primary bg-surface-raised shadow-control ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50" />
   </SliderPrimitive.Root>
 ))
 Slider.displayName = SliderPrimitive.Root.displayName
diff --git a/src/renderer/src/components/ui/sonner.tsx b/src/renderer/src/components/ui/sonner.tsx
index bcca321..f9ea870 100644
--- a/src/renderer/src/components/ui/sonner.tsx
+++ b/src/renderer/src/components/ui/sonner.tsx
@@ -22,10 +22,10 @@ const Toaster = ({ ...props }: ToasterProps) => {
       toastOptions={{
         classNames: {
           toast:
-            'group toast group-[.toaster]:bg-card group-[.toaster]:text-card-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg',
+            'group toast group-[.toaster]:bg-surface-overlay group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-elevation',
           description: 'group-[.toast]:text-muted-foreground',
           actionButton: 'group-[.toast]:bg-primary group-[.toast]:text-primary-foreground',
-          cancelButton: 'group-[.toast]:bg-muted group-[.toast]:text-muted-foreground'
+          cancelButton: 'group-[.toast]:bg-muted group-[.toast]:text-foreground'
         }
       }}
       {...props}
diff --git a/src/renderer/src/components/ui/switch.tsx b/src/renderer/src/components/ui/switch.tsx
index 9ca940b..2f8e781 100644
--- a/src/renderer/src/components/ui/switch.tsx
+++ b/src/renderer/src/components/ui/switch.tsx
@@ -9,7 +9,7 @@ const Switch = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <SwitchPrimitives.Root
     className={cn(
-      'peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input',
+      'peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input',
       className
     )}
     {...props}
@@ -17,7 +17,7 @@ const Switch = React.forwardRef<
   >
     <SwitchPrimitives.Thumb
       className={cn(
-        'pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0'
+        'pointer-events-none block size-4 rounded-full bg-primary-foreground shadow-control ring-0 transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0'
       )}
     />
   </SwitchPrimitives.Root>
diff --git a/src/renderer/src/components/ui/tabs.tsx b/src/renderer/src/components/ui/tabs.tsx
index 0a9f086..d67092e 100644
--- a/src/renderer/src/components/ui/tabs.tsx
+++ b/src/renderer/src/components/ui/tabs.tsx
@@ -14,7 +14,7 @@ const TabsList = React.forwardRef<
   <TabsPrimitive.List
     ref={ref}
     className={cn(
-      'inline-flex h-10 items-center justify-center rounded-md bg-muted p-1 text-muted-foreground',
+      'inline-flex h-9 items-center justify-center rounded-md bg-surface-sunken p-1 text-muted-foreground',
       className
     )}
     {...props}
@@ -29,7 +29,7 @@ const TabsTrigger = React.forwardRef<
   <TabsPrimitive.Trigger
     ref={ref}
     className={cn(
-      'inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm',
+      'inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-surface-raised data-[state=active]:text-foreground',
       className
     )}
     {...props}
diff --git a/src/renderer/src/components/ui/textarea.tsx b/src/renderer/src/components/ui/textarea.tsx
index c3043d2..b59bed2 100644
--- a/src/renderer/src/components/ui/textarea.tsx
+++ b/src/renderer/src/components/ui/textarea.tsx
@@ -7,7 +7,7 @@ const Textarea = React.forwardRef<HTMLTextAreaElement, React.ComponentProps<'tex
     return (
       <textarea
         className={cn(
-          'flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-base ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
+          'flex min-h-[80px] w-full rounded-md border border-border bg-surface-base px-3 py-2 text-sm text-foreground ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
           className
         )}
         ref={ref}
diff --git a/src/renderer/src/components/ui/tooltip.tsx b/src/renderer/src/components/ui/tooltip.tsx
index f6072b0..e0268a6 100644
--- a/src/renderer/src/components/ui/tooltip.tsx
+++ b/src/renderer/src/components/ui/tooltip.tsx
@@ -17,7 +17,7 @@ const TooltipContent = React.forwardRef<
     ref={ref}
     sideOffset={sideOffset}
     className={cn(
-      'z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-tooltip-content-transform-origin]',
+      'z-50 overflow-hidden rounded-md border border-border bg-surface-overlay px-2 py-1 text-xs text-foreground shadow-elevation animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-tooltip-content-transform-origin]',
       className
     )}
     {...props}