diff --git a/src/main/config.ts b/src/main/config.ts
index 50a3d9a4e..38b4036f0 100644
--- a/src/main/config.ts
+++ b/src/main/config.ts
@@ -4,6 +4,7 @@ import { pathToFileURL } from 'node:url';
 import type { BrowserWindowConstructorOptions } from 'electron';
 
 import { APPLICATION } from '../shared/constants';
+import { isMacOS } from '../shared/platform';
 
 import { isDevMode } from './utils';
 
@@ -39,6 +40,23 @@ export const WindowConfig: BrowserWindowConstructorOptions = {
   minWidth: 500,
   minHeight: 400,
   resizable: false,
+  /**
+   * macOS Glass uses a native vibrancy material as the window background, which
+   * blurs the real desktop behind it. Deliberately NOT `transparent: true`: a
+   * transparent window makes behind-window vibrancy sample almost nothing (it
+   * renders near-opaque over the desktop), so the material must own the
+   * background instead. `popover` is a bright, frosted menu-style material (a
+   * touch more see-through than `menu`); `under-window` looks solid over the
+   * desktop. `active` keeps it translucent even though the popup shows without
+   * activating the app.
+   * Not applied on Windows/Linux, where the CSS `backdrop-filter` path handles Glass.
+   */
+  ...(isMacOS()
+    ? {
+        vibrancy: 'popover' as const,
+        visualEffectState: 'active' as const,
+      }
+    : {}),
   /** Hide the app from the Windows taskbar */
   skipTaskbar: true,
   webPreferences: {
diff --git a/src/main/handlers/system.test.ts b/src/main/handlers/system.test.ts
index 0787eb126..dbbb44306 100644
--- a/src/main/handlers/system.test.ts
+++ b/src/main/handlers/system.test.ts
@@ -1,3 +1,4 @@
+import { nativeTheme } from 'electron';
 import type { Menubar } from 'electron-menubar';
 
 import { EVENTS } from '../../shared/events';
@@ -30,6 +31,9 @@ vi.mock('electron', () => ({
   powerMonitor: {
     on: vi.fn(),
   } satisfies Pick<Electron.PowerMonitor, 'on'>,
+  nativeTheme: {
+    themeSource: 'system',
+  } satisfies Pick<Electron.NativeTheme, 'themeSource'>,
 }));
 
 describe('main/handlers/system.ts', () => {
@@ -130,6 +134,19 @@ describe('main/handlers/system.ts', () => {
     });
   });
 
+  describe('SET_NATIVE_THEME', () => {
+    it('syncs nativeTheme.themeSource with the requested source', () => {
+      registerSystemHandlers(menubar);
+
+      const handler = handleMock.mock.calls.find(
+        (call: unknown[]) => call[0] === EVENTS.SET_NATIVE_THEME,
+      )?.[1];
+      handler?.({}, 'dark');
+
+      expect(nativeTheme.themeSource).toBe('dark');
+    });
+  });
+
   describe('UPDATE_KEEP_WINDOW_ON_BLUR', () => {
     it('forwards the value to applyKeepWindowOnBlur', () => {
       registerSystemHandlers(menubar);
diff --git a/src/main/handlers/system.ts b/src/main/handlers/system.ts
index 659cc1475..c23c97f27 100644
--- a/src/main/handlers/system.ts
+++ b/src/main/handlers/system.ts
@@ -1,11 +1,12 @@
-import { app, powerMonitor, shell } from 'electron';
+import { app, nativeTheme, powerMonitor, shell } from 'electron';
 import type { Menubar } from 'electron-menubar';
 
 import { EVENTS } from '../../shared/events';
 import { logInfo } from '../../shared/logger';
 
 import { handleMainEvent, onMainEvent, sendRendererEvent } from '../events';
-import { applyKeepWindowOnBlur } from '../lifecycle/window';
+import { applyKeepWindowOnBlur, applyWindowVibrancy } from '../lifecycle/window';
+import { isDevMode } from '../utils';
 
 /**
  * Register IPC handlers for OS-level system operations.
@@ -73,8 +74,14 @@ export function registerSystemHandlers(mb: Menubar): void {
 
   /**
    * Update the application's auto-launch setting based on the provided configuration.
+   *
+   * Skipped in development: the unsigned dev Electron binary cannot register as a
+   * macOS login item, so calling this would only emit a Chromium error log.
    */
   onMainEvent(EVENTS.UPDATE_AUTO_LAUNCH, (_, settings) => {
+    if (isDevMode()) {
+      return;
+    }
     app.setLoginItemSettings(settings);
   });
 
@@ -84,4 +91,24 @@ export function registerSystemHandlers(mb: Menubar): void {
   onMainEvent(EVENTS.UPDATE_KEEP_WINDOW_ON_BLUR, (_, value: boolean) => {
     applyKeepWindowOnBlur(mb, value);
   });
+
+  /**
+   * Toggle the macOS window vibrancy material for the Glass design language.
+   * Request/response so the renderer can await the material before clearing the
+   * window's own background (avoids a black frame during the switch).
+   */
+  handleMainEvent(EVENTS.SET_WINDOW_VIBRANCY, (_, enabled: boolean) => {
+    applyWindowVibrancy(mb, enabled);
+    return undefined;
+  });
+
+  /**
+   * Sync the native appearance with the app's color mode so the macOS vibrancy
+   * material renders light/dark to match; without this, dark Glass gets a light
+   * material and its light text becomes illegible.
+   */
+  handleMainEvent(EVENTS.SET_NATIVE_THEME, (_, source) => {
+    nativeTheme.themeSource = source;
+    return undefined;
+  });
 }
diff --git a/src/main/lifecycle/window.test.ts b/src/main/lifecycle/window.test.ts
index d18963eee..12d42ad28 100644
--- a/src/main/lifecycle/window.test.ts
+++ b/src/main/lifecycle/window.test.ts
@@ -3,8 +3,9 @@ import type { Menubar } from 'electron-menubar';
 import type MenuBuilder from '../menu';
 import {
   __resetWindowLifecycleForTests,
-  configureWindowEvents,
   applyKeepWindowOnBlur,
+  applyWindowVibrancy,
+  configureWindowEvents,
 } from './window';
 
 const appOnMock = vi.fn();
@@ -73,6 +74,8 @@ describe('main/lifecycle/window.ts', () => {
         setSize: vi.fn(),
         center: vi.fn(),
         setAlwaysOnTop: vi.fn(),
+        setVibrancy: vi.fn(),
+        setBackgroundColor: vi.fn(),
         hide: vi.fn(),
         isDestroyed: vi.fn().mockReturnValue(false),
         on: vi.fn(),
@@ -184,6 +187,70 @@ describe('main/lifecycle/window.ts', () => {
     });
   });
 
+  describe('applyWindowVibrancy', () => {
+    it('applies the material on macOS when enabled', () => {
+      setPlatform('darwin');
+
+      applyWindowVibrancy(menubar, true);
+
+      expect(menubar.window?.setVibrancy).toHaveBeenCalledWith('popover');
+    });
+
+    it('removes the material on macOS when disabled', () => {
+      setPlatform('darwin');
+
+      applyWindowVibrancy(menubar, false);
+
+      expect(menubar.window?.setVibrancy).toHaveBeenCalledWith(null);
+    });
+
+    it('is a no-op off macOS', () => {
+      applyWindowVibrancy(menubar, true);
+
+      expect(menubar.window?.setVibrancy).not.toHaveBeenCalled();
+    });
+
+    it('skips the call when the window is destroyed', () => {
+      setPlatform('darwin');
+      // oxlint-disable-next-line no-unsafe-optional-chaining -- window is guaranteed defined in this test
+      (menubar.window?.isDestroyed as ReturnType<typeof vi.fn>).mockReturnValue(true);
+
+      applyWindowVibrancy(menubar, true);
+
+      expect(menubar.window?.setVibrancy).not.toHaveBeenCalled();
+    });
+
+    it('re-applies the remembered material when the window is shown', () => {
+      setPlatform('darwin');
+      configureWindowEvents(menubar, menuBuilder);
+      applyWindowVibrancy(menubar, true);
+      // oxlint-disable-next-line no-unsafe-optional-chaining -- window is guaranteed defined in this test
+      (menubar.window?.setVibrancy as ReturnType<typeof vi.fn>).mockClear();
+
+      findWindowHandler(menubar, 'show')?.({ preventDefault: vi.fn() });
+
+      expect(menubar.window?.setVibrancy).toHaveBeenCalledWith('popover');
+    });
+
+    it('clears the window background when enabled so the material can show', () => {
+      setPlatform('darwin');
+
+      applyWindowVibrancy(menubar, true);
+
+      // Regression: a runtime Classic -> Glass switch must clear the opaque
+      // backdrop left by Classic, otherwise vibrancy cannot sample the desktop.
+      expect(menubar.window?.setBackgroundColor).toHaveBeenCalledWith('#00000000');
+    });
+
+    it('restores an opaque backdrop when disabled', () => {
+      setPlatform('darwin');
+
+      applyWindowVibrancy(menubar, false);
+
+      expect(menubar.window?.setBackgroundColor).toHaveBeenCalledWith('#ffffff');
+    });
+  });
+
   describe('devtools-closed handler', () => {
     it('delegates re-centering to mb.recenterOnTray()', () => {
       configureWindowEvents(menubar, menuBuilder);
diff --git a/src/main/lifecycle/window.ts b/src/main/lifecycle/window.ts
index b1dcd459f..2694722b4 100644
--- a/src/main/lifecycle/window.ts
+++ b/src/main/lifecycle/window.ts
@@ -8,6 +8,7 @@ import type MenuBuilder from '../menu';
 
 let isQuitting = false;
 let keepWindowOnBlur = false;
+let windowVibrancyEnabled = false;
 
 /**
  * Reset module-level lifecycle flags. Module-level state is unavoidable
@@ -19,6 +20,26 @@ let keepWindowOnBlur = false;
 export function __resetWindowLifecycleForTests(): void {
   isQuitting = false;
   keepWindowOnBlur = false;
+  windowVibrancyEnabled = false;
+}
+
+/**
+ * Enable or disable the macOS window vibrancy material (the Glass design
+ * language). No-op off macOS. The desired state is remembered so it can be
+ * re-applied if `electron-menubar` rebuilds the window (see `configureWindowEvents`).
+ */
+export function applyWindowVibrancy(mb: Menubar, enabled: boolean): void {
+  windowVibrancyEnabled = enabled;
+  if (!isMacOS() || !mb.window || mb.window.isDestroyed()) {
+    return;
+  }
+  mb.window.setVibrancy(enabled ? 'popover' : null);
+  // Clear the window's own background so the vibrancy material can sample the
+  // desktop; a prior Classic disable leaves it opaque, which would otherwise
+  // block Glass on a runtime Classic → Glass switch. `#00000000` works without a
+  // `transparent` window because the vibrancy view provides the translucency.
+  // Restore an opaque backdrop for Classic once the material is removed.
+  mb.window.setBackgroundColor(enabled ? '#00000000' : '#ffffff');
 }
 
 /**
@@ -55,6 +76,8 @@ export function configureWindowEvents(mb: Menubar, menuBuilder: MenuBuilder): vo
 
   win.on('show', () => {
     menuBuilder.setWindowVisibility(true);
+    // Re-apply vibrancy in case the window was rebuilt since it was last set.
+    applyWindowVibrancy(mb, windowVibrancyEnabled);
   });
 
   win.on('hide', () => {
diff --git a/src/preload/index.ts b/src/preload/index.ts
index e3f137a77..123527307 100644
--- a/src/preload/index.ts
+++ b/src/preload/index.ts
@@ -1,6 +1,6 @@
 import { contextBridge, webFrame } from 'electron';
 
-import type { IKeyboardShortcut } from '../shared/events';
+import type { IKeyboardShortcut, NativeThemeSource } from '../shared/events';
 import { EVENTS } from '../shared/events';
 import { isLinux, isMacOS, isWindows } from '../shared/platform';
 
@@ -63,6 +63,19 @@ export const api = {
    */
   setKeepWindowOnBlur: (value: boolean) => sendMainEvent(EVENTS.UPDATE_KEEP_WINDOW_ON_BLUR, value),
 
+  /**
+   * Enable or disable the macOS window vibrancy material for Glass. Resolves once
+   * the material has been applied so the renderer can order the visual switch.
+   */
+  setWindowVibrancy: (enabled: boolean) => invokeMainEvent(EVENTS.SET_WINDOW_VIBRANCY, enabled),
+
+  /**
+   * Sync the native window appearance (`nativeTheme.themeSource`) with the app's
+   * color mode, so the macOS vibrancy material renders light/dark to match —
+   * otherwise dark Glass gets a light material and its light text washes out.
+   */
+  setNativeTheme: (source: NativeThemeSource) => invokeMainEvent(EVENTS.SET_NATIVE_THEME, source),
+
   /**
    * Apply the global keyboard shortcut for toggling the app window visibility.
    *
diff --git a/src/renderer/App.css b/src/renderer/App.css
index 6e486a595..fd8fb9f34 100644
--- a/src/renderer/App.css
+++ b/src/renderer/App.css
@@ -7,6 +7,468 @@
 /** Tailwind CSS Configuration */
 @config "../../tailwind.config.mts";
 
+/**
+ * Design-language chrome tokens: a language re-skins radius/shadow/blur by
+ * re-pointing these `--gitify-*` vars under `[data-theme]`. Classic aliases
+ * Tailwind's own values. `@theme inline` (not plain `@theme`) is required so the
+ * utilities re-resolve under the active scope instead of freezing at `:root`.
+ */
+:root {
+  --gitify-radius-sm: var(--radius-sm);
+  --gitify-radius-md: var(--radius-md);
+  --gitify-radius-full: calc(infinity * 1px);
+  --gitify-shadow-sm: var(--shadow-sm);
+
+  --gitify-sidebar: #24292e;
+  --gitify-footer: var(--bgColor-neutral-muted);
+
+  /* Status/accent colours, indirected so Glass can desaturate them. */
+  --gitify-icon-open: var(--fgColor-open);
+  --gitify-icon-closed: var(--fgColor-closed);
+  --gitify-icon-done: var(--fgColor-done);
+  --gitify-icon-attention: var(--fgColor-attention);
+  --gitify-link: var(--fgColor-link);
+}
+
+@theme inline {
+  --radius-gitify-sm: var(--gitify-radius-sm);
+  --radius-gitify-md: var(--gitify-radius-md);
+  --radius-gitify-full: var(--gitify-radius-full);
+  --shadow-gitify-sm: var(--gitify-shadow-sm);
+}
+
+/**
+ * Glass design language. The window is one continuous material: the shell
+ * (sidebar/footer) and every functional control (buttons, inputs, pills,
+ * checkboxes) become translucent tints with hairline borders, while the
+ * content layer (notification rows) stays clear so the material shows through.
+ * The blur comes from the OS on macOS (`vibrancy`) or CSS `backdrop-filter`
+ * elsewhere. Follows Apple's materials guidance: glass for functional chrome,
+ * vibrant foregrounds on top of tints, hairlines for separation.
+ */
+/* `data-theme` lives on the root while Primer sets `data-color-mode` on its
+ * ThemeProvider descendant, so these must use a descendant combinator (not a
+ * same-element compound) to define the mode-specific tints where the content
+ * can inherit them. */
+[data-theme='glass'] [data-color-mode='light'] {
+  /* Lighter tints let the native material carry the look instead of flattening it. */
+  --gitify-glass-tint: rgb(255 255 255 / 0.22);
+  --gitify-glass-border: rgb(0 0 0 / 0.14);
+
+  /* Stepped control fills: rest < hover < active reads as gentle depth on glass. */
+  --gitify-glass-control-rest: rgb(255 255 255 / 0.35);
+  --gitify-glass-control-hover: rgb(255 255 255 / 0.5);
+  --gitify-glass-control-active: rgb(255 255 255 / 0.62);
+  --gitify-glass-control-disabled: rgb(255 255 255 / 0.18);
+}
+
+[data-theme='glass'] [data-color-mode='dark'] {
+  --gitify-glass-tint: rgb(22 27 34 / 0.2);
+  --gitify-glass-border: rgb(255 255 255 / 0.14);
+
+  /* On dark glass, controls lighten the material instead of darkening it. */
+  --gitify-glass-control-rest: rgb(255 255 255 / 0.09);
+  --gitify-glass-control-hover: rgb(255 255 255 / 0.15);
+  --gitify-glass-control-active: rgb(255 255 255 / 0.22);
+  --gitify-glass-control-disabled: rgb(255 255 255 / 0.05);
+}
+
+[data-theme='glass'] {
+  /* Sidebar stays dark in both modes so its forced-white icons stay legible. */
+  --gitify-sidebar: rgb(22 27 34 / 0.55);
+  --gitify-footer: var(--gitify-glass-tint);
+
+  /* Restrained, near-native palette: blend GitHub's vivid status/accent colours
+   * toward the muted foreground (the `45%` is the dial to tune). */
+  --gitify-icon-open: color-mix(in oklab, var(--fgColor-open), var(--fgColor-muted) 45%);
+  --gitify-icon-closed: color-mix(in oklab, var(--fgColor-closed), var(--fgColor-muted) 45%);
+  --gitify-icon-done: color-mix(in oklab, var(--fgColor-done), var(--fgColor-muted) 45%);
+  --gitify-icon-attention: color-mix(in oklab, var(--fgColor-attention), var(--fgColor-muted) 45%);
+  --gitify-link: color-mix(in oklab, var(--fgColor-link), var(--fgColor-muted) 30%);
+}
+
+[data-theme='glass'][data-glass-material='backdrop-filter']
+  :where(.bg-gitify-sidebar, .bg-gitify-footer) {
+  /* Softer, more material-like than a heavy web blur. */
+  -webkit-backdrop-filter: blur(22px) saturate(1.2);
+  backdrop-filter: blur(22px) saturate(1.2);
+}
+
+/**
+ * All-in Glass: when translucency is actually on (`.gitify-translucent`, gated by
+ * a no-preference media query so OS Reduce Transparency still wins), the window is
+ * one continuous glass surface. The sidebar loses its fill and becomes icons
+ * floating directly on the glass.
+ */
+@media (prefers-reduced-transparency: no-preference) {
+  /* Primer sets its colour tokens on the `data-color-mode` wrapper, so Glass
+   * overrides of Primer tokens must target that element (root-level ones are
+   * shadowed by it). This re-skins Primer's button family as glass. */
+  .gitify-translucent [data-color-mode] {
+    /* Neutralise the vivid primary CTA (success-green) toward neutral. */
+    --button-primary-bgColor-rest: color-mix(
+      in oklab,
+      var(--bgColor-success-emphasis),
+      var(--fgColor-muted) 55%
+    );
+    --button-primary-bgColor-hover: color-mix(
+      in oklab,
+      var(--bgColor-success-emphasis),
+      var(--fgColor-muted) 42%
+    );
+    --button-primary-bgColor-active: color-mix(
+      in oklab,
+      var(--bgColor-success-emphasis),
+      var(--fgColor-muted) 34%
+    );
+
+    /* Default buttons (footer pills, steppers, secondary actions) become glass
+     * tiles: stepped translucent fills with a hairline border, no drop shadow. */
+    --button-default-bgColor-rest: var(--gitify-glass-control-rest);
+    --button-default-bgColor-hover: var(--gitify-glass-control-hover);
+    --button-default-bgColor-active: var(--gitify-glass-control-active);
+    --button-default-bgColor-selected: var(--gitify-glass-control-active);
+    --button-default-bgColor-disabled: var(--gitify-glass-control-disabled);
+    --button-default-borderColor-rest: var(--gitify-glass-border);
+    --button-default-borderColor-hover: var(--gitify-glass-border);
+    --button-default-borderColor-active: var(--gitify-glass-border);
+    --button-default-shadow-resting: none;
+    --button-default-shadow-inset: none;
+
+    /* Danger buttons behave like normal glass buttons: the same neutral tile
+     * and wash steps as the default variant, with the red foreground/icon as
+     * the only destructive signal, and it never changes between states
+     * (Primer's danger hover would otherwise flip the text to white). */
+    --button-danger-bgColor-rest: var(--gitify-glass-control-rest);
+    --button-danger-bgColor-hover: var(--gitify-glass-control-hover);
+    --button-danger-bgColor-active: var(--gitify-glass-control-active);
+    --button-danger-bgColor-disabled: var(--gitify-glass-control-disabled);
+    --button-danger-fgColor-hover: var(--button-danger-fgColor-rest);
+    --button-danger-fgColor-active: var(--button-danger-fgColor-rest);
+    --button-danger-iconColor-hover: var(--button-danger-iconColor-rest);
+    --button-danger-iconColor-active: var(--button-danger-iconColor-rest);
+    --button-danger-borderColor-hover: var(--gitify-glass-border);
+    --button-danger-borderColor-active: var(--gitify-glass-border);
+
+    /* Bare-icon buttons (band actions, header icons) lift with a glass wash on
+     * hover instead of Primer's solid gray square. Row hover-actions stay fully
+     * bare (see the `.gitify-hover-actions` rule below). */
+    --button-invisible-bgColor-hover: var(--gitify-glass-control-hover);
+    --button-invisible-bgColor-active: var(--gitify-glass-control-active);
+  }
+
+  .gitify-translucent .gitify-sidebar {
+    background: transparent;
+    /* Active nav item: a translucent accent wash, not a solid GitHub-green tile. */
+    --button-primary-bgColor-rest: color-mix(in oklab, var(--fgColor-accent), transparent 82%);
+    --button-primary-bgColor-hover: color-mix(in oklab, var(--fgColor-accent), transparent 74%);
+    --button-primary-bgColor-active: color-mix(in oklab, var(--fgColor-accent), transparent 68%);
+    /* Sidebar icon hovers stay whisper-quiet against the glass. */
+    --button-invisible-bgColor-hover: var(--gitify-glass-control-rest);
+    --button-invisible-bgColor-active: var(--gitify-glass-control-hover);
+  }
+
+  /* Repo grouping bands become faint glass tints, so the list reads as one
+   * surface while keeping the grouping. The account header floats directly on
+   * the glass with no tint. Bands and notification rows float as rounded cards
+   * on the glass: a small inline inset makes the rounding visible (macOS
+   * list-row geometry), and the band lifts with the same glass wash as row
+   * hover. */
+  .gitify-translucent .bg-gitify-repository {
+    background: color-mix(in oklab, var(--gitify-glass-tint), transparent 62%);
+  }
+
+  .gitify-translucent .bg-gitify-account-rest {
+    background: transparent;
+  }
+
+  .gitify-translucent :where(.bg-gitify-repository, .bg-gitify-account-rest):hover {
+    background: var(--gitify-glass-control-rest);
+  }
+
+  /* The repo-name button inside a band is `variant="invisible"`; suppress its
+   * own hover wash so it doesn't double-paint over the band's wash with a hard
+   * edge where the button ends. The band hover already lifts the whole row. */
+  .gitify-translucent :where(.bg-gitify-repository, .bg-gitify-account-rest) > button {
+    --button-invisible-bgColor-hover: transparent;
+    --button-invisible-bgColor-active: transparent;
+  }
+
+  .gitify-translucent :where(.bg-gitify-repository, .bg-gitify-account-rest),
+  .gitify-translucent .group.relative.border-b {
+    margin-inline: 4px;
+    border-radius: var(--gitify-radius-md);
+  }
+
+  /* Account scope rows (Accounts route) match the control tint. */
+  .gitify-translucent :where(.bg-gitify-accounts) {
+    background: var(--gitify-glass-control-rest);
+  }
+
+  /* The account-profile button (avatar + username) sits bare inside the card:
+   * no tile at rest, just the hover wash. `data-testid` is the stable hook. */
+  .gitify-translucent [data-testid='account-profile'] {
+    --button-default-bgColor-rest: transparent;
+    --button-default-borderColor-rest: transparent;
+  }
+
+  /* Row hover is a light glass wash instead of the solid Classic fill. */
+  .gitify-translucent .hover\:bg-gitify-notification-hover:hover {
+    background-color: var(--gitify-glass-control-rest);
+  }
+
+  /* Inline-code spans inside notification titles share the same token as a
+   * plain (non-hover) class; give them the frosted treatment too. */
+  .gitify-translucent .bg-gitify-notification-hover {
+    background-color: var(--gitify-glass-control-rest);
+  }
+
+  /* Count pills (notification counts, filter counts) become borderless frosted
+   * chips: at this size a hairline reads as noise, and macOS count badges rely
+   * on fill contrast alone. Covers both CustomCounter and the Primer Labels
+   * used by the metric pills (whose muted border is dropped). */
+  .gitify-translucent :where(.bg-gitify-counter-primary, .bg-gitify-counter-secondary) {
+    background-color: var(--gitify-glass-control-rest);
+  }
+
+  .gitify-translucent [data-color-mode] [data-component='Label'][data-variant='secondary'] {
+    background-color: var(--gitify-glass-control-rest);
+    border-color: transparent;
+  }
+
+  /* Metric-pill hover lifts to the next glass step instead of the solid fill. */
+  .gitify-translucent .hover\:bg-gitify-notification-pill-hover:hover {
+    background-color: var(--gitify-glass-control-hover);
+  }
+
+  /* Avatars get a hairline ring so white-backed org logos don't read as solid
+   * tiles floating on the glass. */
+  .gitify-translucent [data-component='Avatar'] {
+    box-shadow: 0 0 0 1px var(--gitify-glass-border);
+  }
+
+  /* Issue-label tokens carry their GitHub colour as inline `--label-r/g/b`
+   * vars; re-render them as tinted glass (same hue, mostly translucent, hue
+   * hairline) instead of solid chips. Text keeps Primer's contrast-chosen
+   * colour, which still reads on the softened fill. */
+  .gitify-translucent [data-color-mode] [style*='--label-r'] {
+    background-color: rgb(var(--label-r) var(--label-g) var(--label-b) / 0.78);
+    border-color: rgb(var(--label-r) var(--label-g) var(--label-b) / 0.4);
+  }
+
+  /* Row action buttons (mark-as-read / done / chevron) float as bare icons under
+   * Glass: drop the hover band behind the group and the invisible-button fills.
+   * The `:hover` variant guards against the `group-hover:` utility winning on
+   * specificity when the row is hovered. */
+  .gitify-translucent .gitify-hover-actions,
+  .gitify-translucent .group:hover .gitify-hover-actions {
+    background: transparent;
+  }
+
+  /* Hover tooltips float as frosted glass with a hairline (the macOS tooltip
+   * material) instead of Primer's solid slab: light frosted with dark text in
+   * light mode, dark frosted with white text in dark mode. Targets
+   * `[data-component='Tooltip']` rather than `[role='tooltip']` because Primer
+   * label-type tooltips (from `aria-label`, e.g. the sidebar issue/PR links)
+   * carry no role and would stay black otherwise. The `::after` caret is only
+   * a hit-area, so restyling the body is safe. */
+  .gitify-translucent [data-color-mode] [data-component='Tooltip'] {
+    -webkit-backdrop-filter: blur(14px) saturate(1.5);
+    backdrop-filter: blur(14px) saturate(1.5);
+    border: 1px solid var(--gitify-glass-border);
+  }
+
+  .gitify-translucent [data-color-mode='light'] [data-component='Tooltip'] {
+    background-color: color-mix(in oklab, var(--bgColor-default), transparent 8%);
+    color: var(--fgColor-default);
+  }
+
+  .gitify-translucent [data-color-mode='dark'] [data-component='Tooltip'] {
+    background-color: color-mix(in oklab, var(--bgColor-neutral-emphasis), transparent 30%);
+  }
+
+  /* Primer's AnchoredOverlay wrapper (what the `?` popouts render inside)
+   * paints a solid background beneath the translucent popout, stacking it to
+   * near-opaque. Clear it so only the popout's own frosted fill shows. */
+  .gitify-translucent [data-color-mode] [data-component='AnchoredOverlay'] {
+    background: transparent;
+  }
+
+  /* The `?` info popouts match the hover-tooltips: the same frosted fill,
+   * blur and hairline. `bgColor-default` keeps them mode-aware without a
+   * per-mode split. (Selector weights past the tooltip rules above.) */
+  .gitify-translucent [role='tooltip'].bg-gitify-tooltip-popout {
+    background-color: color-mix(in oklab, var(--bgColor-default), transparent 8%);
+    -webkit-backdrop-filter: blur(14px) saturate(1.5);
+    backdrop-filter: blur(14px) saturate(1.5);
+    border-color: var(--gitify-glass-border);
+  }
+
+  .gitify-translucent .gitify-hover-actions :where(button) {
+    --button-invisible-bgColor-rest: transparent;
+    --button-invisible-bgColor-hover: transparent;
+    --button-invisible-bgColor-active: transparent;
+
+    /* Bare icons still need affordance: dimmed at rest, full colour on hover,
+     * a press dip on active. */
+    opacity: 0.65;
+    transition: opacity 120ms ease-in-out;
+  }
+
+  .gitify-translucent .gitify-hover-actions :where(button):hover {
+    opacity: 1;
+  }
+
+  .gitify-translucent .gitify-hover-actions :where(button):active {
+    opacity: 0.85;
+  }
+
+  /* Let the glass show through the scrollbar: drop the opaque track fill so only
+   * a slim, floating translucent thumb remains. */
+  .gitify-translucent *::-webkit-scrollbar-track {
+    background-color: transparent;
+  }
+
+  .gitify-translucent *::-webkit-scrollbar-thumb {
+    background-color: color-mix(in oklab, var(--fgColor-muted), transparent 60%);
+    border: 3px solid transparent;
+    background-clip: padding-box;
+  }
+
+  .gitify-translucent *::-webkit-scrollbar-thumb:hover {
+    background-color: color-mix(in oklab, var(--fgColor-muted), transparent 35%);
+  }
+
+  /* With bare (background-less) action buttons there's no band to hide the row
+   * text behind them, so on hover fade the row content out under the buttons
+   * instead — the title/number dissolve into the glass rather than colliding.
+   * `--gitify-actions` (rendered button count, set on the row) sizes the fade so
+   * rows with fewer buttons don't over-fade: each small IconButton is ~1.75rem
+   * plus the group's right padding, with a 2rem soft leading edge. */
+  .gitify-translucent .group:hover .gitify-row-content {
+    --gitify-actions-width: calc(var(--gitify-actions, 3) * 1.75rem + 0.25rem);
+    -webkit-mask-image: linear-gradient(
+      to right,
+      #000 calc(100% - var(--gitify-actions-width) - 2rem),
+      transparent calc(100% - var(--gitify-actions-width))
+    );
+    mask-image: linear-gradient(
+      to right,
+      #000 calc(100% - var(--gitify-actions-width) - 2rem),
+      transparent calc(100% - var(--gitify-actions-width))
+    );
+  }
+
+  /* Form controls (Select / TextInput) read as glass instead of Primer's solid
+   * field: a faint translucent fill, borderless at rest (macOS controls carry
+   * no outline), with an accent ring only while focused. Targets the stable
+   * `[data-component]` wrapper, not Primer's hashed class. */
+  .gitify-translucent [data-color-mode] [data-component='TextInput'] {
+    background-color: var(--gitify-glass-control-rest);
+    border: none;
+    box-shadow: none;
+  }
+
+  .gitify-translucent [data-color-mode] [data-component='TextInput']:focus-within {
+    box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--fgColor-accent), transparent 40%);
+  }
+
+  /* Primer's `<select>` has `background-color: inherit`, which would re-paint
+   * the wrapper's glass fill over itself (a darker slab beside the chevron).
+   * Only the wrapper paints. */
+  .gitify-translucent [data-color-mode] [data-component='Select'] {
+    background-color: transparent;
+  }
+
+  /* Checkboxes and radios trade the stark opaque white face for a glass one;
+   * checked state fills with the vibrant accent (per materials guidance,
+   * vibrant foregrounds carry legibility on translucent surfaces). */
+  .gitify-translucent [data-color-mode] :where(input[type='checkbox'], input[type='radio']) {
+    appearance: none;
+    margin: 0;
+    background-color: var(--gitify-glass-control-rest);
+    border: 1px solid var(--gitify-glass-border);
+    background-position: center;
+    background-repeat: no-repeat;
+  }
+
+  .gitify-translucent [data-color-mode] input[type='radio'] {
+    border-radius: 50%;
+  }
+
+  .gitify-translucent
+    [data-color-mode]
+    :where(input[type='checkbox'], input[type='radio']):checked {
+    background-color: var(--fgColor-accent);
+    border-color: transparent;
+  }
+
+  .gitify-translucent [data-color-mode] input[type='checkbox']:checked {
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23ffffff' d='M13.78 4.22a.75.75 0 0 1 0 1.06l-7.25 7.25a.75.75 0 0 1-1.06 0L2.22 9.28a.75.75 0 0 1 1.06-1.06L6 10.94l6.72-6.72a.75.75 0 0 1 1.06 0z'/%3E%3C/svg%3E");
+    background-size: 0.75rem;
+  }
+
+  .gitify-translucent [data-color-mode] input[type='radio']:checked {
+    background-image: radial-gradient(circle at 50% 50%, #ffffff 0 2.5px, transparent 3px);
+  }
+
+  .gitify-translucent
+    [data-color-mode]
+    :where(input[type='checkbox'], input[type='radio']):focus-visible {
+    outline: 2px solid color-mix(in oklab, var(--fgColor-accent), transparent 30%);
+    outline-offset: 1px;
+  }
+
+  .gitify-translucent .gitify-sidebar :where(svg) {
+    color: var(--fgColor-muted);
+  }
+
+  /* The logo paints a hardcoded gradient fill, so `color` can't reach it; make it
+   * follow the icon colour so it stays visible on light glass. */
+  .gitify-translucent .gitify-sidebar [fill^='url'] {
+    fill: currentColor;
+  }
+}
+
+/* Vibrancy path: `.gitify-vibrant` is set on the root only once the native
+ * material is applied (see useAppearance), so clearing the app's own backgrounds
+ * to reveal it never flashes black mid-switch. */
+.gitify-vibrant {
+  --gitify-background: transparent;
+}
+
+/* The `[data-color-mode]` wrapper (Primer's ThemeProvider) sits below the root and
+ * both paints `background: var(--bgColor-default)` (via `@primer/css`) and re-declares
+ * `--gitify-background` (via Tailwind), so it would shadow the root's transparency for
+ * itself and descendants like AppLayout. Clear both at that level so the native
+ * material shows through the whole window. */
+.gitify-vibrant body,
+.gitify-vibrant #root,
+.gitify-vibrant [data-color-mode] {
+  --gitify-background: transparent;
+  background-color: transparent;
+}
+
+/* Accessibility degradation: solid, legible surfaces under the OS Reduce
+ * Transparency / Increase Contrast settings. The vibrancy base needs no fallback
+ * here: useAppearance withholds `.gitify-vibrant` under reduced transparency. */
+@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
+  [data-theme='glass'] {
+    --gitify-glass-tint: var(--bgColor-neutral-muted);
+    --gitify-sidebar: #24292e;
+    --gitify-icon-open: var(--fgColor-open);
+    --gitify-icon-closed: var(--fgColor-closed);
+    --gitify-icon-done: var(--fgColor-done);
+    --gitify-icon-attention: var(--fgColor-attention);
+    --gitify-link: var(--fgColor-link);
+  }
+
+  [data-theme='glass'] :where(.bg-gitify-sidebar, .bg-gitify-footer) {
+    -webkit-backdrop-filter: none;
+    backdrop-filter: none;
+  }
+}
+
 html,
 body,
 #root {
diff --git a/src/renderer/__helpers__/vitest.setup.ts b/src/renderer/__helpers__/vitest.setup.ts
index 8587efbdf..0b4e1bb2c 100644
--- a/src/renderer/__helpers__/vitest.setup.ts
+++ b/src/renderer/__helpers__/vitest.setup.ts
@@ -84,6 +84,8 @@ function createGitifyBridgeApi(): Window['gitify'] {
     openExternalLink: vi.fn(),
     decryptValue: vi.fn().mockResolvedValue({ token: 'decrypted' }),
     encryptValue: vi.fn().mockResolvedValue('encrypted'),
+    setWindowVibrancy: vi.fn().mockResolvedValue(undefined),
+    setNativeTheme: vi.fn().mockResolvedValue(undefined),
     platform: {
       isLinux: vi.fn().mockReturnValue(false),
       isMacOS: vi.fn().mockReturnValue(true),
diff --git a/src/renderer/__mocks__/state-mocks.ts b/src/renderer/__mocks__/state-mocks.ts
index a9321221b..172305521 100644
--- a/src/renderer/__mocks__/state-mocks.ts
+++ b/src/renderer/__mocks__/state-mocks.ts
@@ -3,6 +3,7 @@ import { Constants } from '../constants';
 import {
   type Account,
   type AppearanceSettingsState,
+  DesignLanguage,
   GroupBy,
   type KeyboardAcceleratorShortcut,
   type NotificationSettingsState,
@@ -24,6 +25,7 @@ export const mockAuth: { accounts: Account[] } = {
 export const mockToken = 'token-123-456' as Token;
 
 const mockAppearanceSettings: AppearanceSettingsState = {
+  designLanguage: DesignLanguage.CLASSIC,
   theme: Theme.SYSTEM,
   increaseContrast: false,
   zoomPercentage: 100 as Percentage,
diff --git a/src/renderer/components/GlobalEffects.tsx b/src/renderer/components/GlobalEffects.tsx
index 5b2b77945..ce3685af4 100644
--- a/src/renderer/components/GlobalEffects.tsx
+++ b/src/renderer/components/GlobalEffects.tsx
@@ -1,10 +1,9 @@
 import { type FC, useEffect } from 'react';
 
-import { useTheme } from '@primer/react';
-
 import { useQueryClient } from '@tanstack/react-query';
 
 import { useAccounts } from '../hooks/useAccounts';
+import { useAppearance } from '../hooks/useAppearance';
 import { useNotifications } from '../hooks/useNotifications';
 import { useOnlineStatus } from '../hooks/useOnlineStatus';
 import {
@@ -14,14 +13,6 @@ import {
 import { useAccountsStore, useFiltersStore, useSettingsStore } from '../stores';
 
 import { setTrayIconColorAndTitle } from '../utils/system/tray';
-import {
-  DEFAULT_DAY_COLOR_SCHEME,
-  DEFAULT_DAY_HIGH_CONTRAST_COLOR_SCHEME,
-  DEFAULT_NIGHT_COLOR_SCHEME,
-  DEFAULT_NIGHT_HIGH_CONTRAST_COLOR_SCHEME,
-  mapThemeModeToColorMode,
-  mapThemeModeToColorScheme,
-} from '../utils/ui/theme';
 
 /**
  * Hosts all app-level side effects. Mount exactly once, inside the Primer
@@ -42,14 +33,11 @@ export const GlobalEffects: FC = () => {
   const useUnreadActiveIcon = useSettingsStore((s) => s.useUnreadActiveIcon);
   const useAlternateIdleIcon = useSettingsStore((s) => s.useAlternateIdleIcon);
 
-  // Subscribe to theme related settings for useEffect dependencies
-  const theme = useSettingsStore((s) => s.theme);
-  const increaseContrast = useSettingsStore((s) => s.increaseContrast);
-
-  const { setColorMode, setDayScheme, setNightScheme } = useTheme();
-
   const isOnline = useOnlineStatus();
 
+  // Appearance side effects: color mode/scheme + design-language/material attributes
+  useAppearance();
+
   // Notification fetching side effects (sound / native alerts, inactivity refetch)
   const { status, notificationCount } = useNotifications({ withSideEffects: true });
 
@@ -59,26 +47,6 @@ export const GlobalEffects: FC = () => {
   // Global keyboard shortcut registration, reverting on failure
   useShortcutRegistration();
 
-  // Theme
-  useEffect(() => {
-    const colorMode = mapThemeModeToColorMode(theme);
-    const colorScheme = mapThemeModeToColorScheme(theme, increaseContrast);
-
-    setColorMode(colorMode);
-
-    // When colorScheme is null (System theme), use appropriate fallbacks
-    // based on whether high contrast is enabled
-    const dayFallback = increaseContrast
-      ? DEFAULT_DAY_HIGH_CONTRAST_COLOR_SCHEME
-      : DEFAULT_DAY_COLOR_SCHEME;
-    const nightFallback = increaseContrast
-      ? DEFAULT_NIGHT_HIGH_CONTRAST_COLOR_SCHEME
-      : DEFAULT_NIGHT_COLOR_SCHEME;
-
-    setDayScheme(colorScheme ?? dayFallback);
-    setNightScheme(colorScheme ?? nightFallback);
-  }, [theme, increaseContrast, setColorMode, setDayScheme, setNightScheme]);
-
   // oxlint-disable-next-line react/exhaustive-deps -- We want to update the tray on setting or notification changes
   useEffect(() => {
     const trayCount = status === 'error' ? -1 : notificationCount;
diff --git a/src/renderer/components/Sidebar.tsx b/src/renderer/components/Sidebar.tsx
index 176d7042d..f65571e2f 100644
--- a/src/renderer/components/Sidebar.tsx
+++ b/src/renderer/components/Sidebar.tsx
@@ -37,7 +37,7 @@ export const Sidebar: FC = () => {
 
   return (
     <Stack
-      className="fixed w-sidebar h-full bg-gitify-sidebar [&_svg]:text-white"
+      className="gitify-sidebar fixed w-sidebar h-full bg-gitify-sidebar [&_svg]:text-white"
       direction="vertical"
       justify="space-between"
     >
diff --git a/src/renderer/components/__snapshots__/Sidebar.test.tsx.snap b/src/renderer/components/__snapshots__/Sidebar.test.tsx.snap
index 367c2e4ea..82cc337cc 100644
--- a/src/renderer/components/__snapshots__/Sidebar.test.tsx.snap
+++ b/src/renderer/components/__snapshots__/Sidebar.test.tsx.snap
@@ -102,7 +102,7 @@ exports[`renderer/components/Sidebar.tsx > notifications icon > renders correct
 exports[`renderer/components/Sidebar.tsx > should render itself & its children (logged in) 1`] = `
 <div>
   <div
-    class="fixed w-sidebar h-full bg-gitify-sidebar [&_svg]:text-white prc-Stack-Stack-UQ9k6"
+    class="gitify-sidebar fixed w-sidebar h-full bg-gitify-sidebar [&_svg]:text-white prc-Stack-Stack-UQ9k6"
     data-align="stretch"
     data-component="Stack"
     data-direction="vertical"
@@ -805,7 +805,7 @@ exports[`renderer/components/Sidebar.tsx > should render itself & its children (
 exports[`renderer/components/Sidebar.tsx > should render itself & its children (logged out) 1`] = `
 <div>
   <div
-    class="fixed w-sidebar h-full bg-gitify-sidebar [&_svg]:text-white prc-Stack-Stack-UQ9k6"
+    class="gitify-sidebar fixed w-sidebar h-full bg-gitify-sidebar [&_svg]:text-white prc-Stack-Stack-UQ9k6"
     data-align="stretch"
     data-component="Stack"
     data-direction="vertical"
diff --git a/src/renderer/components/layout/__snapshots__/AppLayout.test.tsx.snap b/src/renderer/components/layout/__snapshots__/AppLayout.test.tsx.snap
index 86d8e0dd6..eeadab5bd 100644
--- a/src/renderer/components/layout/__snapshots__/AppLayout.test.tsx.snap
+++ b/src/renderer/components/layout/__snapshots__/AppLayout.test.tsx.snap
@@ -13,7 +13,7 @@ exports[`renderer/components/layout/AppLayout.tsx > should render itself & its c
       type="button"
     />
     <div
-      class="fixed w-sidebar h-full bg-gitify-sidebar [&_svg]:text-white prc-Stack-Stack-UQ9k6"
+      class="gitify-sidebar fixed w-sidebar h-full bg-gitify-sidebar [&_svg]:text-white prc-Stack-Stack-UQ9k6"
       data-align="stretch"
       data-component="Stack"
       data-direction="vertical"
diff --git a/src/renderer/components/notifications/NotificationRow.tsx b/src/renderer/components/notifications/NotificationRow.tsx
index 086a14b3e..2e1c478c1 100644
--- a/src/renderer/components/notifications/NotificationRow.tsx
+++ b/src/renderer/components/notifications/NotificationRow.tsx
@@ -1,4 +1,4 @@
-import { type FC, useState } from 'react';
+import { type CSSProperties, type FC, useState } from 'react';
 
 import { BellSlashIcon, CheckIcon, ReadIcon } from '@primer/octicons-react';
 import { Stack, Text, Tooltip } from '@primer/react';
@@ -72,6 +72,14 @@ export const NotificationRow: FC<NotificationRowProps> = ({
   const NotificationIcon = notification.display.icon.type;
   const isNotificationRead = !notification.unread;
 
+  // How many action buttons the HoverGroup below actually renders. Exposed as a
+  // CSS var so the Glass hover-fade (App.css) sizes to the buttons instead of a
+  // fixed width, which would over-fade rows that show fewer than three.
+  const enabledActionCount =
+    Number(!isNotificationRead) +
+    Number(isMarkAsDoneFeatureSupported(notification.account) && notification.unread) +
+    Number(isUnsubscribeThreadSupported(notification.account));
+
   return (
     <div
       className={cn(
@@ -83,8 +91,9 @@ export const NotificationRow: FC<NotificationRowProps> = ({
         isNotificationRead && Opacity.READ,
       )}
       id={notification.id}
+      style={{ '--gitify-actions': enabledActionCount } as CSSProperties}
     >
-      <Stack align="center" direction="horizontal" gap="condensed">
+      <Stack align="center" className="gitify-row-content" direction="horizontal" gap="condensed">
         <Tooltip direction="e" text={notification.display.type}>
           <button type="button">
             <NotificationIcon
diff --git a/src/renderer/components/notifications/__snapshots__/AccountNotifications.test.tsx.snap b/src/renderer/components/notifications/__snapshots__/AccountNotifications.test.tsx.snap
index 42fd0c8e8..d708ccb48 100644
--- a/src/renderer/components/notifications/__snapshots__/AccountNotifications.test.tsx.snap
+++ b/src/renderer/components/notifications/__snapshots__/AccountNotifications.test.tsx.snap
@@ -85,7 +85,7 @@ exports[`renderer/components/notifications/AccountNotifications.tsx > should ren
       </span>
     </button>
     <div
-      class="absolute inset-y-0 right-0 pr-1 opacity-0 transition-opacity group-hover:opacity-100 group-hover:bg-gitify-account-error prc-Stack-Stack-UQ9k6"
+      class="gitify-hover-actions absolute inset-y-0 right-0 pr-1 opacity-0 transition-opacity group-hover:opacity-100 group-hover:bg-gitify-account-error prc-Stack-Stack-UQ9k6"
       data-align="center"
       data-component="Stack"
       data-direction="horizontal"
@@ -329,7 +329,7 @@ exports[`renderer/components/notifications/AccountNotifications.tsx > should ren
       </span>
     </button>
     <div
-      class="absolute inset-y-0 right-0 pr-1 opacity-0 transition-opacity group-hover:opacity-100 group-hover:bg-gitify-account-error prc-Stack-Stack-UQ9k6"
+      class="gitify-hover-actions absolute inset-y-0 right-0 pr-1 opacity-0 transition-opacity group-hover:opacity-100 group-hover:bg-gitify-account-error prc-Stack-Stack-UQ9k6"
       data-align="center"
       data-component="Stack"
       data-direction="horizontal"
@@ -573,7 +573,7 @@ exports[`renderer/components/notifications/AccountNotifications.tsx > should ren
       </span>
     </button>
     <div
-      class="absolute inset-y-0 right-0 pr-1 opacity-0 transition-opacity group-hover:opacity-100 group-hover:bg-gitify-account-rest prc-Stack-Stack-UQ9k6"
+      class="gitify-hover-actions absolute inset-y-0 right-0 pr-1 opacity-0 transition-opacity group-hover:opacity-100 group-hover:bg-gitify-account-rest prc-Stack-Stack-UQ9k6"
       data-align="center"
       data-component="Stack"
       data-direction="horizontal"
@@ -680,9 +680,10 @@ exports[`renderer/components/notifications/AccountNotifications.tsx > should ren
   <div
     class="group relative border-b pl-2.75 pr-1 py-0.75 text-gitify-font border-gitify-notification-border hover:bg-gitify-notification-hover"
     id="138661096"
+    style="--gitify-actions: 3;"
   >
     <div
-      class="prc-Stack-Stack-UQ9k6"
+      class="gitify-row-content prc-Stack-Stack-UQ9k6"
       data-align="center"
       data-component="Stack"
       data-direction="horizontal"
@@ -1009,7 +1010,7 @@ exports[`renderer/components/notifications/AccountNotifications.tsx > should ren
       </div>
     </div>
     <div
-      class="absolute inset-y-0 right-0 pr-1 opacity-0 transition-opacity group-hover:opacity-100 group-hover:bg-gitify-notification-hover prc-Stack-Stack-UQ9k6"
+      class="gitify-hover-actions absolute inset-y-0 right-0 pr-1 opacity-0 transition-opacity group-hover:opacity-100 group-hover:bg-gitify-notification-hover prc-Stack-Stack-UQ9k6"
       data-align="center"
       data-component="Stack"
       data-direction="horizontal"
@@ -1113,9 +1114,10 @@ exports[`renderer/components/notifications/AccountNotifications.tsx > should ren
   <div
     class="group relative border-b pl-2.75 pr-1 py-0.75 text-gitify-font border-gitify-notification-border hover:bg-gitify-notification-hover"
     id="148827438"
+    style="--gitify-actions: 3;"
   >
     <div
-      class="prc-Stack-Stack-UQ9k6"
+      class="gitify-row-content prc-Stack-Stack-UQ9k6"
       data-align="center"
       data-component="Stack"
       data-direction="horizontal"
@@ -1327,7 +1329,7 @@ exports[`renderer/components/notifications/AccountNotifications.tsx > should ren
       </div>
     </div>
     <div
-      class="absolute inset-y-0 right-0 pr-1 opacity-0 transition-opacity group-hover:opacity-100 group-hover:bg-gitify-notification-hover prc-Stack-Stack-UQ9k6"
+      class="gitify-hover-actions absolute inset-y-0 right-0 pr-1 opacity-0 transition-opacity group-hover:opacity-100 group-hover:bg-gitify-notification-hover prc-Stack-Stack-UQ9k6"
       data-align="center"
       data-component="Stack"
       data-direction="horizontal"
@@ -1516,7 +1518,7 @@ exports[`renderer/components/notifications/AccountNotifications.tsx > should ren
       </span>
     </button>
     <div
-      class="absolute inset-y-0 right-0 pr-1 opacity-0 transition-opacity group-hover:opacity-100 group-hover:bg-gitify-account-rest prc-Stack-Stack-UQ9k6"
+      class="gitify-hover-actions absolute inset-y-0 right-0 pr-1 opacity-0 transition-opacity group-hover:opacity-100 group-hover:bg-gitify-account-rest prc-Stack-Stack-UQ9k6"
       data-align="center"
       data-component="Stack"
       data-direction="horizontal"
@@ -1711,7 +1713,7 @@ exports[`renderer/components/notifications/AccountNotifications.tsx > should ren
       </span>
     </button>
     <div
-      class="absolute inset-y-0 right-0 pr-1 opacity-0 transition-opacity group-hover:opacity-100 group-hover:bg-gitify-account-rest prc-Stack-Stack-UQ9k6"
+      class="gitify-hover-actions absolute inset-y-0 right-0 pr-1 opacity-0 transition-opacity group-hover:opacity-100 group-hover:bg-gitify-account-rest prc-Stack-Stack-UQ9k6"
       data-align="center"
       data-component="Stack"
       data-direction="horizontal"
@@ -1950,7 +1952,7 @@ exports[`renderer/components/notifications/AccountNotifications.tsx > should tog
       </span>
     </button>
     <div
-      class="absolute inset-y-0 right-0 pr-1 opacity-0 transition-opacity group-hover:opacity-100 group-hover:bg-gitify-account-rest prc-Stack-Stack-UQ9k6"
+      class="gitify-hover-actions absolute inset-y-0 right-0 pr-1 opacity-0 transition-opacity group-hover:opacity-100 group-hover:bg-gitify-account-rest prc-Stack-Stack-UQ9k6"
       data-align="center"
       data-component="Stack"
       data-direction="horizontal"
diff --git a/src/renderer/components/notifications/__snapshots__/NotificationRow.test.tsx.snap b/src/renderer/components/notifications/__snapshots__/NotificationRow.test.tsx.snap
index 3dc515941..e4658d282 100644
--- a/src/renderer/components/notifications/__snapshots__/NotificationRow.test.tsx.snap
+++ b/src/renderer/components/notifications/__snapshots__/NotificationRow.test.tsx.snap
@@ -5,9 +5,10 @@ exports[`renderer/components/notifications/NotificationRow.tsx > should render i
   <div
     class="group relative border-b pl-2.75 pr-1 py-0.75 text-gitify-font border-gitify-notification-border hover:bg-gitify-notification-hover"
     id="138661096"
+    style="--gitify-actions: 3;"
   >
     <div
-      class="prc-Stack-Stack-UQ9k6"
+      class="gitify-row-content prc-Stack-Stack-UQ9k6"
       data-align="center"
       data-component="Stack"
       data-direction="horizontal"
@@ -334,7 +335,7 @@ exports[`renderer/components/notifications/NotificationRow.tsx > should render i
       </div>
     </div>
     <div
-      class="absolute inset-y-0 right-0 pr-1 opacity-0 transition-opacity group-hover:opacity-100 group-hover:bg-gitify-notification-hover prc-Stack-Stack-UQ9k6"
+      class="gitify-hover-actions absolute inset-y-0 right-0 pr-1 opacity-0 transition-opacity group-hover:opacity-100 group-hover:bg-gitify-notification-hover prc-Stack-Stack-UQ9k6"
       data-align="center"
       data-component="Stack"
       data-direction="horizontal"
@@ -443,9 +444,10 @@ exports[`renderer/components/notifications/NotificationRow.tsx > should render i
   <div
     class="group relative border-b pl-2.75 pr-1 py-0.75 text-gitify-font border-gitify-notification-border hover:bg-gitify-notification-hover"
     id="138661096"
+    style="--gitify-actions: 3;"
   >
     <div
-      class="prc-Stack-Stack-UQ9k6"
+      class="gitify-row-content prc-Stack-Stack-UQ9k6"
       data-align="center"
       data-component="Stack"
       data-direction="horizontal"
@@ -716,7 +718,7 @@ exports[`renderer/components/notifications/NotificationRow.tsx > should render i
       </div>
     </div>
     <div
-      class="absolute inset-y-0 right-0 pr-1 opacity-0 transition-opacity group-hover:opacity-100 group-hover:bg-gitify-notification-hover prc-Stack-Stack-UQ9k6"
+      class="gitify-hover-actions absolute inset-y-0 right-0 pr-1 opacity-0 transition-opacity group-hover:opacity-100 group-hover:bg-gitify-notification-hover prc-Stack-Stack-UQ9k6"
       data-align="center"
       data-component="Stack"
       data-direction="horizontal"
@@ -825,9 +827,10 @@ exports[`renderer/components/notifications/NotificationRow.tsx > should render i
   <div
     class="group relative border-b pl-2.75 pr-1 py-0.75 text-gitify-font border-gitify-notification-border hover:bg-gitify-notification-hover"
     id="138661096"
+    style="--gitify-actions: 3;"
   >
     <div
-      class="prc-Stack-Stack-UQ9k6"
+      class="gitify-row-content prc-Stack-Stack-UQ9k6"
       data-align="center"
       data-component="Stack"
       data-direction="horizontal"
@@ -1098,7 +1101,7 @@ exports[`renderer/components/notifications/NotificationRow.tsx > should render i
       </div>
     </div>
     <div
-      class="absolute inset-y-0 right-0 pr-1 opacity-0 transition-opacity group-hover:opacity-100 group-hover:bg-gitify-notification-hover prc-Stack-Stack-UQ9k6"
+      class="gitify-hover-actions absolute inset-y-0 right-0 pr-1 opacity-0 transition-opacity group-hover:opacity-100 group-hover:bg-gitify-notification-hover prc-Stack-Stack-UQ9k6"
       data-align="center"
       data-component="Stack"
       data-direction="horizontal"
@@ -1207,9 +1210,10 @@ exports[`renderer/components/notifications/NotificationRow.tsx > should render i
   <div
     class="group relative border-b pl-2.75 pr-1 py-0.75 text-gitify-font border-gitify-notification-border hover:bg-gitify-notification-hover opacity-50"
     id="138661096"
+    style="--gitify-actions: 1;"
   >
     <div
-      class="prc-Stack-Stack-UQ9k6"
+      class="gitify-row-content prc-Stack-Stack-UQ9k6"
       data-align="center"
       data-component="Stack"
       data-direction="horizontal"
@@ -1480,7 +1484,7 @@ exports[`renderer/components/notifications/NotificationRow.tsx > should render i
       </div>
     </div>
     <div
-      class="absolute inset-y-0 right-0 pr-1 opacity-0 transition-opacity group-hover:opacity-100 group-hover:bg-gitify-notification-hover prc-Stack-Stack-UQ9k6"
+      class="gitify-hover-actions absolute inset-y-0 right-0 pr-1 opacity-0 transition-opacity group-hover:opacity-100 group-hover:bg-gitify-notification-hover prc-Stack-Stack-UQ9k6"
       data-align="center"
       data-component="Stack"
       data-direction="horizontal"
diff --git a/src/renderer/components/notifications/__snapshots__/RepositoryNotifications.test.tsx.snap b/src/renderer/components/notifications/__snapshots__/RepositoryNotifications.test.tsx.snap
index d529086f7..22902ca03 100644
--- a/src/renderer/components/notifications/__snapshots__/RepositoryNotifications.test.tsx.snap
+++ b/src/renderer/components/notifications/__snapshots__/RepositoryNotifications.test.tsx.snap
@@ -85,7 +85,7 @@ exports[`renderer/components/notifications/RepositoryNotifications.tsx > should
       </span>
     </button>
     <div
-      class="absolute inset-y-0 right-0 pr-1 opacity-0 transition-opacity group-hover:opacity-100 group-hover:bg-gitify-repository prc-Stack-Stack-UQ9k6"
+      class="gitify-hover-actions absolute inset-y-0 right-0 pr-1 opacity-0 transition-opacity group-hover:opacity-100 group-hover:bg-gitify-repository prc-Stack-Stack-UQ9k6"
       data-align="center"
       data-component="Stack"
       data-direction="horizontal"
@@ -220,7 +220,7 @@ exports[`renderer/components/notifications/RepositoryNotifications.tsx > should
       </span>
     </button>
     <div
-      class="absolute inset-y-0 right-0 pr-1 opacity-0 transition-opacity group-hover:opacity-100 group-hover:bg-gitify-repository prc-Stack-Stack-UQ9k6"
+      class="gitify-hover-actions absolute inset-y-0 right-0 pr-1 opacity-0 transition-opacity group-hover:opacity-100 group-hover:bg-gitify-repository prc-Stack-Stack-UQ9k6"
       data-align="center"
       data-component="Stack"
       data-direction="horizontal"
@@ -423,7 +423,7 @@ exports[`renderer/components/notifications/RepositoryNotifications.tsx > should
       </span>
     </button>
     <div
-      class="absolute inset-y-0 right-0 pr-1 opacity-0 transition-opacity group-hover:opacity-100 group-hover:bg-gitify-repository prc-Stack-Stack-UQ9k6"
+      class="gitify-hover-actions absolute inset-y-0 right-0 pr-1 opacity-0 transition-opacity group-hover:opacity-100 group-hover:bg-gitify-repository prc-Stack-Stack-UQ9k6"
       data-align="center"
       data-component="Stack"
       data-direction="horizontal"
@@ -626,7 +626,7 @@ exports[`renderer/components/notifications/RepositoryNotifications.tsx > should
       </span>
     </button>
     <div
-      class="absolute inset-y-0 right-0 pr-1 opacity-0 transition-opacity group-hover:opacity-100 group-hover:bg-gitify-repository prc-Stack-Stack-UQ9k6"
+      class="gitify-hover-actions absolute inset-y-0 right-0 pr-1 opacity-0 transition-opacity group-hover:opacity-100 group-hover:bg-gitify-repository prc-Stack-Stack-UQ9k6"
       data-align="center"
       data-component="Stack"
       data-direction="horizontal"
diff --git a/src/renderer/components/primitives/HoverGroup.tsx b/src/renderer/components/primitives/HoverGroup.tsx
index 065c5342f..e61886ccd 100644
--- a/src/renderer/components/primitives/HoverGroup.tsx
+++ b/src/renderer/components/primitives/HoverGroup.tsx
@@ -18,6 +18,7 @@ export const HoverGroup: FC<HoverGroupProps> = ({ bgColor, children }: HoverGrou
     <Stack
       align="center"
       className={cn(
+        'gitify-hover-actions',
         'absolute inset-y-0 right-0 pr-1',
         'opacity-0 transition-opacity group-hover:opacity-100',
         bgColor,
diff --git a/src/renderer/components/primitives/__snapshots__/HoverGroup.test.tsx.snap b/src/renderer/components/primitives/__snapshots__/HoverGroup.test.tsx.snap
index d6df8f622..aed96897a 100644
--- a/src/renderer/components/primitives/__snapshots__/HoverGroup.test.tsx.snap
+++ b/src/renderer/components/primitives/__snapshots__/HoverGroup.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`renderer/components/primitives/HoverGroup.tsx > should render 1`] = `
 <div>
   <div
-    class="absolute inset-y-0 right-0 pr-1 opacity-0 transition-opacity group-hover:opacity-100 group-hover:bg-gitify-repository prc-Stack-Stack-UQ9k6"
+    class="gitify-hover-actions absolute inset-y-0 right-0 pr-1 opacity-0 transition-opacity group-hover:opacity-100 group-hover:bg-gitify-repository prc-Stack-Stack-UQ9k6"
     data-align="center"
     data-component="Stack"
     data-direction="horizontal"
diff --git a/src/renderer/components/settings/AppearanceSettings.test.tsx b/src/renderer/components/settings/AppearanceSettings.test.tsx
index c5d174f69..215555dc0 100644
--- a/src/renderer/components/settings/AppearanceSettings.test.tsx
+++ b/src/renderer/components/settings/AppearanceSettings.test.tsx
@@ -6,6 +6,8 @@ import { mockGitHubAppAccount } from '../../__mocks__/account-mocks';
 
 import { useSettingsStore } from '../../stores';
 
+import { DesignLanguage } from '../../types';
+
 import * as zoom from '../../utils/ui/zoom';
 import { AppearanceSettings } from './AppearanceSettings';
 
@@ -29,17 +31,29 @@ describe('renderer/components/settings/AppearanceSettings.tsx', () => {
     expect(updateSettingSpy).toHaveBeenCalledWith('theme', 'LIGHT');
   });
 
-  it('should toggle increase contrast checkbox', async () => {
+  it('should change the design language dropdown', async () => {
+    await act(async () => {
+      renderWithProviders(<AppearanceSettings />);
+    });
+
+    await userEvent.selectOptions(screen.getByTestId('settings-design-language'), 'glass');
+
+    expect(updateSettingSpy).toHaveBeenCalledTimes(1);
+    expect(updateSettingSpy).toHaveBeenCalledWith('designLanguage', DesignLanguage.GLASS);
+  });
+
+  it('hides accessibility color modes when Glass is the active design language', async () => {
     await act(async () => {
       renderWithProviders(<AppearanceSettings />, {
-        accounts: [mockGitHubAppAccount],
+        settings: { designLanguage: DesignLanguage.GLASS },
       });
     });
 
-    await userEvent.click(screen.getByTestId('checkbox-increaseContrast'));
-
-    expect(toggleSettingSpy).toHaveBeenCalledTimes(1);
-    expect(toggleSettingSpy).toHaveBeenCalledWith('increaseContrast');
+    expect(screen.getByRole('option', { name: 'System' })).toBeInTheDocument();
+    expect(screen.getByRole('option', { name: 'Dark default' })).toBeInTheDocument();
+    expect(screen.queryByRole('option', { name: 'Soft dark' })).not.toBeInTheDocument();
+    expect(screen.queryByRole('option', { name: 'Light colorblind' })).not.toBeInTheDocument();
+    expect(screen.queryByRole('option', { name: 'Dark Tritanopia' })).not.toBeInTheDocument();
   });
 
   it('should update the zoom values when using the zoom buttons', async () => {
@@ -67,6 +81,29 @@ describe('renderer/components/settings/AppearanceSettings.tsx', () => {
     expect(zoomResetSpy).toHaveBeenCalledTimes(1);
   });
 
+  it('should toggle increase contrast checkbox for Classic', async () => {
+    await act(async () => {
+      renderWithProviders(<AppearanceSettings />, {
+        accounts: [mockGitHubAppAccount],
+      });
+    });
+
+    await userEvent.click(screen.getByTestId('checkbox-increaseContrast'));
+
+    expect(toggleSettingSpy).toHaveBeenCalledTimes(1);
+    expect(toggleSettingSpy).toHaveBeenCalledWith('increaseContrast');
+  });
+
+  it('hides the increase contrast checkbox for Glass', async () => {
+    await act(async () => {
+      renderWithProviders(<AppearanceSettings />, {
+        settings: { designLanguage: DesignLanguage.GLASS },
+      });
+    });
+
+    expect(screen.queryByTestId('checkbox-increaseContrast')).not.toBeInTheDocument();
+  });
+
   it('should toggle account header checkbox', async () => {
     await act(async () => {
       renderWithProviders(<AppearanceSettings />, {
diff --git a/src/renderer/components/settings/AppearanceSettings.tsx b/src/renderer/components/settings/AppearanceSettings.tsx
index 188854459..bab467166 100644
--- a/src/renderer/components/settings/AppearanceSettings.tsx
+++ b/src/renderer/components/settings/AppearanceSettings.tsx
@@ -9,8 +9,9 @@ import { Checkbox } from '../fields/Checkbox';
 import { FieldLabel } from '../fields/FieldLabel';
 import { Title } from '../primitives/Title';
 
-import { Theme } from '../../types';
+import { DesignLanguage, Theme } from '../../types';
 
+import { resolveColorMode, supportedColorModes } from '../../utils/ui/theme';
 import {
   canDecreaseZoom,
   canIncreaseZoom,
@@ -28,8 +29,11 @@ export const AppearanceSettings: FC = () => {
   const updateSetting = useSettingsStore((s) => s.updateSetting);
 
   // Setting store values
+  const designLanguage = useSettingsStore((s) => s.designLanguage);
   const theme = useSettingsStore((s) => s.theme);
   const increaseContrast = useSettingsStore((s) => s.increaseContrast);
+
+  const colorModeSupported = (mode: Theme) => supportedColorModes(designLanguage).includes(mode);
   const showAccountHeader = useSettingsStore((s) => s.showAccountHeader);
   const wrapNotificationTitle = useSettingsStore((s) => s.wrapNotificationTitle);
   const zoomPercentage = useSettingsStore((s) => s.zoomPercentage);
@@ -39,26 +43,48 @@ export const AppearanceSettings: FC = () => {
       <Title icon={PaintbrushIcon}>Appearance</Title>
 
       <Stack direction="vertical" gap="condensed">
+        <Stack align="center" className="text-sm" direction="horizontal" gap="condensed">
+          <FieldLabel label="Design:" name="design-language" />
+          <Select
+            data-testid="settings-design-language"
+            onChange={(evt) => updateSetting('designLanguage', evt.target.value as DesignLanguage)}
+            value={designLanguage}
+          >
+            <Select.Option value={DesignLanguage.CLASSIC}>Classic</Select.Option>
+            <Select.Option value={DesignLanguage.GLASS}>Glass</Select.Option>
+          </Select>
+        </Stack>
+
         <Stack align="center" className="text-sm" direction="horizontal" gap="condensed">
           <FieldLabel label="Theme:" name="theme" />
           <Select
             data-testid="settings-theme"
             onChange={(evt) => updateSetting('theme', evt.target.value as Theme)}
-            value={theme}
+            value={resolveColorMode(designLanguage, theme)}
           >
             <Select.OptGroup label="System">
               <Select.Option value={Theme.SYSTEM}>System</Select.Option>
             </Select.OptGroup>
             <Select.OptGroup label="Light">
               <Select.Option value={Theme.LIGHT}>Light default</Select.Option>
-              <Select.Option value={Theme.LIGHT_COLORBLIND}>Light colorblind</Select.Option>
-              <Select.Option value={Theme.LIGHT_TRITANOPIA}>Light Tritanopia</Select.Option>
+              {colorModeSupported(Theme.LIGHT_COLORBLIND) && (
+                <Select.Option value={Theme.LIGHT_COLORBLIND}>Light colorblind</Select.Option>
+              )}
+              {colorModeSupported(Theme.LIGHT_TRITANOPIA) && (
+                <Select.Option value={Theme.LIGHT_TRITANOPIA}>Light Tritanopia</Select.Option>
+              )}
             </Select.OptGroup>
             <Select.OptGroup label="Dark">
               <Select.Option value={Theme.DARK}>Dark default</Select.Option>
-              <Select.Option value={Theme.DARK_COLORBLIND}>Dark colorblind</Select.Option>
-              <Select.Option value={Theme.DARK_TRITANOPIA}>Dark Tritanopia</Select.Option>
-              <Select.Option value={Theme.DARK_DIMMED}>Soft dark</Select.Option>
+              {colorModeSupported(Theme.DARK_COLORBLIND) && (
+                <Select.Option value={Theme.DARK_COLORBLIND}>Dark colorblind</Select.Option>
+              )}
+              {colorModeSupported(Theme.DARK_TRITANOPIA) && (
+                <Select.Option value={Theme.DARK_TRITANOPIA}>Dark Tritanopia</Select.Option>
+              )}
+              {colorModeSupported(Theme.DARK_DIMMED) && (
+                <Select.Option value={Theme.DARK_DIMMED}>Soft dark</Select.Option>
+              )}
             </Select.OptGroup>
           </Select>
         </Stack>
@@ -70,10 +96,11 @@ export const AppearanceSettings: FC = () => {
           onChange={() => toggleSetting('increaseContrast')}
           tooltip={
             <Text>
-              Enable high contrast colors for improved legibility. This increases color contrast
-              across the UI and may affect some color-specific themes.
+              Use GitHub's high-contrast color schemes for improved legibility. Also applied
+              automatically when your system's increase-contrast setting is enabled.
             </Text>
           }
+          visible={designLanguage === DesignLanguage.CLASSIC}
         />
 
         <Stack align="center" className="text-sm" direction="horizontal" gap="condensed">
@@ -90,7 +117,12 @@ export const AppearanceSettings: FC = () => {
               unsafeDisableTooltip={true}
             />
 
-            <Button aria-label="Zoom percentage" disabled size="small">
+            <Button
+              aria-label="Zoom percentage"
+              className="pointer-events-none"
+              size="small"
+              tabIndex={-1}
+            >
               {zoomPercentage.toFixed(0)}%
             </Button>
 
diff --git a/src/renderer/components/settings/NotificationSettings.tsx b/src/renderer/components/settings/NotificationSettings.tsx
index 7c3f0ebea..56c3380e4 100644
--- a/src/renderer/components/settings/NotificationSettings.tsx
+++ b/src/renderer/components/settings/NotificationSettings.tsx
@@ -111,7 +111,12 @@ export const NotificationSettings: FC = () => {
               unsafeDisableTooltip={true}
             />
 
-            <Button aria-label="Fetch interval" disabled size="small">
+            <Button
+              aria-label="Fetch interval"
+              className="pointer-events-none"
+              size="small"
+              tabIndex={-1}
+            >
               {formatDuration({
                 minutes: millisecondsToMinutes(fetchInterval),
               })}
diff --git a/src/renderer/components/settings/SystemSettings.tsx b/src/renderer/components/settings/SystemSettings.tsx
index 227edb593..3f06b3ee0 100644
--- a/src/renderer/components/settings/SystemSettings.tsx
+++ b/src/renderer/components/settings/SystemSettings.tsx
@@ -226,7 +226,12 @@ export const SystemSettings: FC = () => {
               size="small"
               unsafeDisableTooltip={true}
             />
-            <Button aria-label="Global shortcut" disabled size="small">
+            <Button
+              aria-label="Global shortcut"
+              className="pointer-events-none"
+              size="small"
+              tabIndex={-1}
+            >
               <Text as="strong" className="text-gitify-caution">
                 {recordingShortcut
                   ? hasLiveModifiers
@@ -282,7 +287,12 @@ export const SystemSettings: FC = () => {
               unsafeDisableTooltip={true}
             />
 
-            <Button aria-label="Volume percentage" disabled size="small">
+            <Button
+              aria-label="Volume percentage"
+              className="pointer-events-none"
+              size="small"
+              tabIndex={-1}
+            >
               {notificationVolume.toFixed(0)}%
             </Button>
 
diff --git a/src/renderer/hooks/useAppearance.test.ts b/src/renderer/hooks/useAppearance.test.ts
new file mode 100644
index 000000000..f2a84ca71
--- /dev/null
+++ b/src/renderer/hooks/useAppearance.test.ts
@@ -0,0 +1,180 @@
+import { renderHook, waitFor } from '@testing-library/react';
+
+import { useSettingsStore } from '../stores';
+
+import { DesignLanguage, Theme } from '../types';
+
+import { useAppearance } from './useAppearance';
+
+// Capture the Primer color-scheme setters so high-contrast schemes can be asserted.
+const primerTheme = vi.hoisted(() => ({
+  setColorMode: vi.fn(),
+  setDayScheme: vi.fn(),
+  setNightScheme: vi.fn(),
+}));
+
+vi.mock('@primer/react', async (importOriginal) => ({
+  ...(await importOriginal<typeof import('@primer/react')>()),
+  useTheme: () => primerTheme,
+}));
+
+function mockPrefersContrast(matches: boolean) {
+  return vi.spyOn(window, 'matchMedia').mockImplementation(
+    (query: string) =>
+      ({
+        matches: query.includes('prefers-contrast') ? matches : false,
+        addEventListener: vi.fn(),
+        removeEventListener: vi.fn(),
+      }) as unknown as MediaQueryList,
+  );
+}
+
+describe('renderer/hooks/useAppearance.ts', () => {
+  afterEach(() => {
+    document.documentElement.removeAttribute('data-theme');
+    document.documentElement.removeAttribute('data-glass-material');
+    document.documentElement.classList.remove('gitify-vibrant', 'gitify-translucent');
+  });
+
+  it('marks the root with the Classic design language by default', () => {
+    renderHook(() => useAppearance());
+
+    expect(document.documentElement.getAttribute('data-theme')).toBe('classic');
+  });
+
+  it('reflects the active design language on the root', () => {
+    useSettingsStore.setState({ designLanguage: DesignLanguage.GLASS });
+
+    renderHook(() => useAppearance());
+
+    expect(document.documentElement.getAttribute('data-theme')).toBe('glass');
+  });
+
+  it('derives the glass material from the platform (vibrancy on macOS)', () => {
+    vi.mocked(window.gitify.platform.isMacOS).mockReturnValue(true);
+
+    renderHook(() => useAppearance());
+
+    expect(document.documentElement.getAttribute('data-glass-material')).toBe('vibrancy');
+  });
+
+  it('uses the backdrop-filter material off macOS', () => {
+    vi.mocked(window.gitify.platform.isMacOS).mockReturnValue(false);
+
+    renderHook(() => useAppearance());
+
+    expect(document.documentElement.getAttribute('data-glass-material')).toBe('backdrop-filter');
+  });
+
+  it('applies vibrancy and marks the root vibrant on macOS Glass', async () => {
+    useSettingsStore.setState({ designLanguage: DesignLanguage.GLASS });
+
+    renderHook(() => useAppearance());
+
+    expect(window.gitify.setWindowVibrancy).toHaveBeenCalledWith(true);
+    await waitFor(() =>
+      expect(document.documentElement.classList.contains('gitify-vibrant')).toBe(true),
+    );
+  });
+
+  it('disables vibrancy for Classic on macOS', () => {
+    renderHook(() => useAppearance());
+
+    expect(window.gitify.setWindowVibrancy).toHaveBeenCalledWith(false);
+    expect(document.documentElement.classList.contains('gitify-vibrant')).toBe(false);
+  });
+
+  it('does not touch vibrancy off macOS', () => {
+    vi.mocked(window.gitify.platform.isMacOS).mockReturnValue(false);
+    useSettingsStore.setState({ designLanguage: DesignLanguage.GLASS });
+
+    renderHook(() => useAppearance());
+
+    expect(window.gitify.setWindowVibrancy).not.toHaveBeenCalled();
+  });
+
+  it('syncs the native theme to light for a light color mode', () => {
+    useSettingsStore.setState({ theme: Theme.LIGHT });
+
+    renderHook(() => useAppearance());
+
+    expect(window.gitify.setNativeTheme).toHaveBeenCalledWith('light');
+  });
+
+  it('syncs the native theme to dark for a dark color mode', () => {
+    useSettingsStore.setState({ theme: Theme.DARK });
+
+    renderHook(() => useAppearance());
+
+    expect(window.gitify.setNativeTheme).toHaveBeenCalledWith('dark');
+  });
+
+  it('syncs the native theme to system for the auto color mode', () => {
+    useSettingsStore.setState({ theme: Theme.SYSTEM });
+
+    renderHook(() => useAppearance());
+
+    expect(window.gitify.setNativeTheme).toHaveBeenCalledWith('system');
+  });
+
+  it('syncs the native theme from the Glass-clamped color mode', () => {
+    // Glass clamps DARK_DIMMED down to its base dark; the native theme must
+    // follow the clamped mode, not the raw stored theme.
+    useSettingsStore.setState({
+      designLanguage: DesignLanguage.GLASS,
+      theme: Theme.DARK_DIMMED,
+    });
+
+    renderHook(() => useAppearance());
+
+    expect(window.gitify.setNativeTheme).toHaveBeenCalledWith('dark');
+  });
+
+  it('applies the high-contrast schemes for Classic under the increase contrast setting', () => {
+    useSettingsStore.setState({
+      designLanguage: DesignLanguage.CLASSIC,
+      theme: Theme.LIGHT,
+      increaseContrast: true,
+    });
+
+    renderHook(() => useAppearance());
+
+    expect(primerTheme.setDayScheme).toHaveBeenCalledWith('light_high_contrast');
+  });
+
+  it('does not apply high-contrast schemes for Glass', () => {
+    useSettingsStore.setState({
+      designLanguage: DesignLanguage.GLASS,
+      theme: Theme.LIGHT,
+      increaseContrast: true,
+    });
+
+    renderHook(() => useAppearance());
+
+    expect(primerTheme.setDayScheme).toHaveBeenCalledWith('light');
+  });
+
+  it('applies high contrast for Classic from the OS increase-contrast setting', () => {
+    const spy = mockPrefersContrast(true);
+    useSettingsStore.setState({
+      designLanguage: DesignLanguage.CLASSIC,
+      theme: Theme.LIGHT,
+      increaseContrast: false,
+    });
+
+    renderHook(() => useAppearance());
+
+    expect(primerTheme.setDayScheme).toHaveBeenCalledWith('light_high_contrast');
+    spy.mockRestore();
+  });
+
+  it('degrades Glass to solid under the OS increase-contrast setting', () => {
+    const spy = mockPrefersContrast(true);
+    useSettingsStore.setState({ designLanguage: DesignLanguage.GLASS });
+
+    renderHook(() => useAppearance());
+
+    expect(window.gitify.setWindowVibrancy).toHaveBeenCalledWith(false);
+    spy.mockRestore();
+  });
+});
diff --git a/src/renderer/hooks/useAppearance.ts b/src/renderer/hooks/useAppearance.ts
new file mode 100644
index 000000000..1dcbb6810
--- /dev/null
+++ b/src/renderer/hooks/useAppearance.ts
@@ -0,0 +1,115 @@
+import { useEffect } from 'react';
+
+import { useTheme } from '@primer/react';
+
+import { useSettingsStore } from '../stores';
+
+import { DesignLanguage } from '../types';
+
+import { rendererLogError, toError } from '../utils/core/logger';
+import {
+  DEFAULT_DAY_COLOR_SCHEME,
+  DEFAULT_DAY_HIGH_CONTRAST_COLOR_SCHEME,
+  DEFAULT_NIGHT_COLOR_SCHEME,
+  DEFAULT_NIGHT_HIGH_CONTRAST_COLOR_SCHEME,
+  mapThemeModeToColorMode,
+  mapThemeModeToColorScheme,
+  resolveColorMode,
+} from '../utils/ui/theme';
+import { usePrefersContrast } from './usePrefersContrast';
+import { usePrefersReducedTransparency } from './usePrefersReducedTransparency';
+
+/**
+ * Applies appearance side effects: Primer color mode/scheme plus the root
+ * `data-theme` (design language) and `data-glass-material` attributes.
+ *
+ * Must be called from within the Primer `ThemeProvider` (it consumes `useTheme`).
+ */
+export function useAppearance(): void {
+  const designLanguage = useSettingsStore((s) => s.designLanguage);
+  const theme = useSettingsStore((s) => s.theme);
+  const increaseContrast = useSettingsStore((s) => s.increaseContrast);
+  const prefersReducedTransparency = usePrefersReducedTransparency();
+  const prefersContrast = usePrefersContrast();
+
+  const { setColorMode, setDayScheme, setNightScheme } = useTheme();
+
+  useEffect(() => {
+    const effectiveTheme = resolveColorMode(designLanguage, theme);
+    const colorMode = mapThemeModeToColorMode(effectiveTheme);
+
+    // High contrast swaps in Primer's `*_high_contrast` schemes for Classic, driven by
+    // the in-app setting or the OS "Increase Contrast" preference. Glass never takes
+    // them; it degrades to a solid surface instead (see the vibrancy effect below).
+    const highContrast =
+      designLanguage === DesignLanguage.CLASSIC && (increaseContrast || prefersContrast);
+    const colorScheme = mapThemeModeToColorScheme(effectiveTheme, highContrast);
+
+    setColorMode(colorMode);
+
+    // Keep the native window appearance in sync so the macOS vibrancy material
+    // renders light/dark to match (else dark Glass gets a light material). Not
+    // gated to macOS: on other platforms this simply aligns native chrome with
+    // the chosen theme, which is harmless (SYSTEM sends 'system', i.e. no override).
+    window.gitify
+      .setNativeTheme(colorMode === 'day' ? 'light' : colorMode === 'night' ? 'dark' : 'system')
+      .catch((err) =>
+        rendererLogError('useAppearance', 'Failed to sync native theme source', toError(err)),
+      );
+
+    // System theme has no fixed scheme; fall back to a day/night pair that honours
+    // high contrast.
+    setDayScheme(
+      colorScheme ??
+        (highContrast ? DEFAULT_DAY_HIGH_CONTRAST_COLOR_SCHEME : DEFAULT_DAY_COLOR_SCHEME),
+    );
+    setNightScheme(
+      colorScheme ??
+        (highContrast ? DEFAULT_NIGHT_HIGH_CONTRAST_COLOR_SCHEME : DEFAULT_NIGHT_COLOR_SCHEME),
+    );
+  }, [
+    designLanguage,
+    theme,
+    increaseContrast,
+    prefersContrast,
+    setColorMode,
+    setDayScheme,
+    setNightScheme,
+  ]);
+
+  useEffect(() => {
+    document.documentElement.setAttribute('data-theme', designLanguage);
+  }, [designLanguage]);
+
+  useEffect(() => {
+    document.documentElement.setAttribute(
+      'data-glass-material',
+      window.gitify.platform.isMacOS() ? 'vibrancy' : 'backdrop-filter',
+    );
+  }, []);
+
+  useEffect(() => {
+    const root = document.documentElement;
+
+    // Glass is always translucent; it degrades to solid under the OS Reduce
+    // Transparency or Increase Contrast settings (matched by a media query in App.css).
+    const vibrant =
+      designLanguage === DesignLanguage.GLASS && !prefersReducedTransparency && !prefersContrast;
+    root.classList.toggle('gitify-translucent', vibrant);
+
+    if (!window.gitify.platform.isMacOS()) {
+      return;
+    }
+
+    // Add `.gitify-vibrant` only after the material is applied, and drop it before
+    // vibrancy is removed, so the window never renders black mid-switch.
+    if (!vibrant) {
+      root.classList.remove('gitify-vibrant');
+    }
+
+    window.gitify.setWindowVibrancy(vibrant).then(
+      () => vibrant && root.classList.add('gitify-vibrant'),
+      () => root.classList.remove('gitify-vibrant'),
+    );
+  }, [designLanguage, prefersReducedTransparency, prefersContrast]);
+}
diff --git a/src/renderer/hooks/usePrefersContrast.test.ts b/src/renderer/hooks/usePrefersContrast.test.ts
new file mode 100644
index 000000000..7dd0e7e57
--- /dev/null
+++ b/src/renderer/hooks/usePrefersContrast.test.ts
@@ -0,0 +1,33 @@
+import { renderHook } from '@testing-library/react';
+
+import { usePrefersContrast } from './usePrefersContrast';
+
+function mockMatchMedia(matches: boolean) {
+  vi.spyOn(window, 'matchMedia').mockReturnValue({
+    matches,
+    addEventListener: vi.fn(),
+    removeEventListener: vi.fn(),
+  } as unknown as MediaQueryList);
+}
+
+describe('renderer/hooks/usePrefersContrast.ts', () => {
+  afterEach(() => {
+    vi.restoreAllMocks();
+  });
+
+  it('is false when the OS does not request increased contrast', () => {
+    mockMatchMedia(false);
+
+    const { result } = renderHook(() => usePrefersContrast());
+
+    expect(result.current).toBe(false);
+  });
+
+  it('is true when the OS requests increased contrast', () => {
+    mockMatchMedia(true);
+
+    const { result } = renderHook(() => usePrefersContrast());
+
+    expect(result.current).toBe(true);
+  });
+});
diff --git a/src/renderer/hooks/usePrefersContrast.ts b/src/renderer/hooks/usePrefersContrast.ts
new file mode 100644
index 000000000..37ab9ed0a
--- /dev/null
+++ b/src/renderer/hooks/usePrefersContrast.ts
@@ -0,0 +1,23 @@
+import { useEffect, useState } from 'react';
+
+const QUERY = '(prefers-contrast: more)';
+
+/**
+ * Tracks the OS "Increase Contrast" accessibility setting (live). Drives the
+ * high-contrast Primer schemes for Classic and the solid fallback for Glass, so
+ * raising contrast in the system settings takes effect without an app restart.
+ */
+export function usePrefersContrast(): boolean {
+  const [more, setMore] = useState(() => window.matchMedia(QUERY).matches);
+
+  useEffect(() => {
+    const mql = window.matchMedia(QUERY);
+    const onChange = () => setMore(mql.matches);
+
+    onChange();
+    mql.addEventListener('change', onChange);
+    return () => mql.removeEventListener('change', onChange);
+  }, []);
+
+  return more;
+}
diff --git a/src/renderer/hooks/usePrefersReducedTransparency.test.ts b/src/renderer/hooks/usePrefersReducedTransparency.test.ts
new file mode 100644
index 000000000..387ca76d3
--- /dev/null
+++ b/src/renderer/hooks/usePrefersReducedTransparency.test.ts
@@ -0,0 +1,33 @@
+import { renderHook } from '@testing-library/react';
+
+import { usePrefersReducedTransparency } from './usePrefersReducedTransparency';
+
+function mockMatchMedia(matches: boolean) {
+  vi.spyOn(window, 'matchMedia').mockReturnValue({
+    matches,
+    addEventListener: vi.fn(),
+    removeEventListener: vi.fn(),
+  } as unknown as MediaQueryList);
+}
+
+describe('renderer/hooks/usePrefersReducedTransparency.ts', () => {
+  afterEach(() => {
+    vi.restoreAllMocks();
+  });
+
+  it('is false when the OS does not request reduced transparency', () => {
+    mockMatchMedia(false);
+
+    const { result } = renderHook(() => usePrefersReducedTransparency());
+
+    expect(result.current).toBe(false);
+  });
+
+  it('is true when the OS requests reduced transparency', () => {
+    mockMatchMedia(true);
+
+    const { result } = renderHook(() => usePrefersReducedTransparency());
+
+    expect(result.current).toBe(true);
+  });
+});
diff --git a/src/renderer/hooks/usePrefersReducedTransparency.ts b/src/renderer/hooks/usePrefersReducedTransparency.ts
new file mode 100644
index 000000000..f85903995
--- /dev/null
+++ b/src/renderer/hooks/usePrefersReducedTransparency.ts
@@ -0,0 +1,23 @@
+import { useEffect, useState } from 'react';
+
+const QUERY = '(prefers-reduced-transparency: reduce)';
+
+/**
+ * Tracks the OS "Reduce Transparency" accessibility setting. This is the reliable
+ * live signal (Electron's `nativeTheme` does not surface it); the main process
+ * cannot read it, so Glass degradation is driven from the renderer.
+ */
+export function usePrefersReducedTransparency(): boolean {
+  const [reduced, setReduced] = useState(() => window.matchMedia(QUERY).matches);
+
+  useEffect(() => {
+    const mql = window.matchMedia(QUERY);
+    const onChange = () => setReduced(mql.matches);
+
+    onChange();
+    mql.addEventListener('change', onChange);
+    return () => mql.removeEventListener('change', onChange);
+  }, []);
+
+  return reduced;
+}
diff --git a/src/renderer/routes/__snapshots__/Settings.test.tsx.snap b/src/renderer/routes/__snapshots__/Settings.test.tsx.snap
index d1bbc7900..3751dc40d 100644
--- a/src/renderer/routes/__snapshots__/Settings.test.tsx.snap
+++ b/src/renderer/routes/__snapshots__/Settings.test.tsx.snap
@@ -154,6 +154,63 @@ exports[`renderer/routes/Settings.tsx > should render itself & its children 1`]
           data-padding="none"
           data-wrap="nowrap"
         >
+          <div
+            class="text-sm prc-Stack-Stack-UQ9k6"
+            data-align="center"
+            data-component="Stack"
+            data-direction="horizontal"
+            data-gap="condensed"
+            data-justify="start"
+            data-padding="none"
+            data-wrap="nowrap"
+          >
+            <label
+              class="mr-1 font-medium cursor-pointer"
+              for="design-language"
+            >
+              Design:
+            </label>
+            <span
+              class="prc-Select-TextInputWrapper-5NYFF prc-components-TextInputWrapper-Hpdqi prc-components-TextInputBaseWrapper-wY-n0"
+              data-component="TextInput"
+              data-no-leading-visual="true"
+              data-no-trailing-action="true"
+              data-no-trailing-visual="true"
+            >
+              <select
+                aria-invalid="false"
+                class="prc-Select-Select-dJWwD"
+                data-component="Select"
+                data-hasplaceholder="false"
+                data-testid="settings-design-language"
+              >
+                <option
+                  data-component="Select.Option"
+                  value="classic"
+                >
+                  Classic
+                </option>
+                <option
+                  data-component="Select.Option"
+                  value="glass"
+                >
+                  Glass
+                </option>
+              </select>
+              <svg
+                aria-hidden="true"
+                class="prc-Select-ArrowIndicator-WjH-8 prc-Select-ArrowIndicator-WjH-8"
+                fill="currentColor"
+                height="16"
+                width="16"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="m4.074 9.427 3.396 3.396a.25.25 0 0 0 .354 0l3.396-3.396A.25.25 0 0 0 11.043 9H4.251a.25.25 0 0 0-.177.427ZM4.074 7.47 7.47 4.073a.25.25 0 0 1 .354 0L11.22 7.47a.25.25 0 0 1-.177.426H4.251a.25.25 0 0 1-.177-.426Z"
+                />
+              </svg>
+            </span>
+          </div>
           <div
             class="text-sm prc-Stack-Stack-UQ9k6"
             data-align="center"
@@ -373,13 +430,13 @@ exports[`renderer/routes/Settings.tsx > should render itself & its children 1`]
               >
                 <button
                   aria-label="Zoom percentage"
-                  class="prc-Button-ButtonBase-9n-Xk"
+                  class="prc-Button-ButtonBase-9n-Xk pointer-events-none"
                   data-component="Button"
                   data-loading="false"
                   data-no-visuals="true"
                   data-size="small"
                   data-variant="default"
-                  disabled=""
+                  tabindex="-1"
                   type="button"
                 >
                   <span
@@ -775,13 +832,13 @@ exports[`renderer/routes/Settings.tsx > should render itself & its children 1`]
               >
                 <button
                   aria-label="Fetch interval"
-                  class="prc-Button-ButtonBase-9n-Xk"
+                  class="prc-Button-ButtonBase-9n-Xk pointer-events-none"
                   data-component="Button"
                   data-loading="false"
                   data-no-visuals="true"
                   data-size="small"
                   data-variant="default"
-                  disabled=""
+                  tabindex="-1"
                   type="button"
                 >
                   <span
@@ -1797,13 +1854,13 @@ exports[`renderer/routes/Settings.tsx > should render itself & its children 1`]
               >
                 <button
                   aria-label="Global shortcut"
-                  class="prc-Button-ButtonBase-9n-Xk"
+                  class="prc-Button-ButtonBase-9n-Xk pointer-events-none"
                   data-component="Button"
                   data-loading="false"
                   data-no-visuals="true"
                   data-size="small"
                   data-variant="default"
-                  disabled=""
+                  tabindex="-1"
                   type="button"
                 >
                   <span
@@ -1993,13 +2050,13 @@ exports[`renderer/routes/Settings.tsx > should render itself & its children 1`]
               >
                 <button
                   aria-label="Volume percentage"
-                  class="prc-Button-ButtonBase-9n-Xk"
+                  class="prc-Button-ButtonBase-9n-Xk pointer-events-none"
                   data-component="Button"
                   data-loading="false"
                   data-no-visuals="true"
                   data-size="small"
                   data-variant="default"
-                  disabled=""
+                  tabindex="-1"
                   type="button"
                 >
                   <span
diff --git a/src/renderer/stores/defaults.ts b/src/renderer/stores/defaults.ts
index b05ebcab0..407e501a1 100644
--- a/src/renderer/stores/defaults.ts
+++ b/src/renderer/stores/defaults.ts
@@ -2,6 +2,7 @@ import { Constants } from '../constants';
 
 import {
   type AppearanceSettingsState,
+  DesignLanguage,
   GroupBy,
   type KeyboardAcceleratorShortcut,
   type NotificationSettingsState,
@@ -39,6 +40,7 @@ export const DEFAULT_FILTERS_STATE: FiltersState = {
  * Default appearance settings
  */
 const DEFAULT_APPEARANCE_SETTINGS: AppearanceSettingsState = {
+  designLanguage: DesignLanguage.CLASSIC,
   theme: Theme.SYSTEM,
   increaseContrast: false,
   zoomPercentage: 100 as Percentage,
diff --git a/src/renderer/stores/useSettingsStore.test.ts b/src/renderer/stores/useSettingsStore.test.ts
index 3f6d11460..e59f98b13 100644
--- a/src/renderer/stores/useSettingsStore.test.ts
+++ b/src/renderer/stores/useSettingsStore.test.ts
@@ -1,8 +1,8 @@
 import { act, renderHook } from '@testing-library/react';
 
-import { Theme } from '../../shared/theme';
+import { Constants } from '../constants';
 
-import { OpenPreference, type Percentage } from '../types';
+import { DesignLanguage, OpenPreference, type Percentage, Theme } from '../types';
 
 import { DEFAULT_SETTINGS_STATE } from './defaults';
 import useSettingsStore from './useSettingsStore';
@@ -117,4 +117,42 @@ describe('renderer/stores/useSettingsStore.ts', () => {
       expect(result.current).toMatchObject(DEFAULT_SETTINGS_STATE);
     });
   });
+
+  describe('Design language (additive migration)', () => {
+    afterEach(() => {
+      localStorage.removeItem(Constants.STORAGE.SETTINGS);
+    });
+
+    test('should default the design language to Classic', () => {
+      const { result } = renderHook(() => useSettingsStore());
+
+      expect(result.current.designLanguage).toBe(DesignLanguage.CLASSIC);
+    });
+
+    test('should give an existing persisted blob the Classic default while preserving its theme', async () => {
+      // A blob persisted before designLanguage existed (zustand writes version 0).
+      localStorage.setItem(
+        Constants.STORAGE.SETTINGS,
+        JSON.stringify({ state: { theme: Theme.DARK_DIMMED, increaseContrast: true }, version: 0 }),
+      );
+
+      await act(async () => {
+        await useSettingsStore.persist.rehydrate();
+      });
+
+      expect(useSettingsStore.getState().designLanguage).toBe(DesignLanguage.CLASSIC);
+      expect(useSettingsStore.getState().theme).toBe(Theme.DARK_DIMMED);
+      expect(useSettingsStore.getState().increaseContrast).toBe(true);
+    });
+
+    test('should update the design language', () => {
+      const { result } = renderHook(() => useSettingsStore());
+
+      act(() => {
+        result.current.updateSetting('designLanguage', DesignLanguage.GLASS);
+      });
+
+      expect(result.current.designLanguage).toBe(DesignLanguage.GLASS);
+    });
+  });
 });
diff --git a/src/renderer/types.ts b/src/renderer/types.ts
index 9a27a34ce..7966e51f5 100644
--- a/src/renderer/types.ts
+++ b/src/renderer/types.ts
@@ -89,7 +89,10 @@ export type SettingsState = AppearanceSettingsState &
  * Settings related to the appearance of the application.
  */
 export interface AppearanceSettingsState {
+  designLanguage: DesignLanguage;
+  /** The color-mode axis (color scheme / accessibility palette). */
   theme: Theme;
+  /** High-contrast Primer schemes for Classic; also honours the OS setting. */
   increaseContrast: boolean;
   zoomPercentage: Percentage;
   showAccountHeader: boolean;
@@ -137,6 +140,12 @@ export interface SystemSettingsState {
   keepWindowOnBlur: boolean;
 }
 
+/** Values are lower-cased because they double as the root `data-theme` attribute. */
+export enum DesignLanguage {
+  CLASSIC = 'classic',
+  GLASS = 'glass',
+}
+
 export enum Theme {
   SYSTEM = 'SYSTEM',
   LIGHT = 'LIGHT',
diff --git a/src/renderer/utils/ui/theme.test.ts b/src/renderer/utils/ui/theme.test.ts
index 2803acd83..c3cadfb0a 100644
--- a/src/renderer/utils/ui/theme.test.ts
+++ b/src/renderer/utils/ui/theme.test.ts
@@ -1,4 +1,4 @@
-import { Theme } from '../../types';
+import { DesignLanguage, Theme } from '../../types';
 
 import {
   DEFAULT_DAY_COLOR_SCHEME,
@@ -7,6 +7,8 @@ import {
   DEFAULT_NIGHT_HIGH_CONTRAST_COLOR_SCHEME,
   mapThemeModeToColorMode,
   mapThemeModeToColorScheme,
+  resolveColorMode,
+  supportedColorModes,
 } from './theme';
 
 describe('renderer/utils/theme.ts', () => {
@@ -22,39 +24,75 @@ describe('renderer/utils/theme.ts', () => {
   });
 
   it('should map theme mode to github primer color scheme', () => {
-    expect(mapThemeModeToColorScheme(Theme.LIGHT, false)).toBe('light');
+    expect(mapThemeModeToColorScheme(Theme.LIGHT)).toBe('light');
+    expect(mapThemeModeToColorScheme(Theme.LIGHT_COLORBLIND)).toBe('light_colorblind');
+    expect(mapThemeModeToColorScheme(Theme.LIGHT_TRITANOPIA)).toBe('light_tritanopia');
+    expect(mapThemeModeToColorScheme(Theme.DARK)).toBe('dark');
+    expect(mapThemeModeToColorScheme(Theme.DARK_COLORBLIND)).toBe('dark_colorblind');
+    expect(mapThemeModeToColorScheme(Theme.DARK_TRITANOPIA)).toBe('dark_tritanopia');
+    expect(mapThemeModeToColorScheme(Theme.DARK_DIMMED)).toBe('dark_dimmed');
+    expect(mapThemeModeToColorScheme(Theme.SYSTEM)).toBe(null);
+  });
+
+  it('appends the high-contrast variant when requested', () => {
     expect(mapThemeModeToColorScheme(Theme.LIGHT, true)).toBe('light_high_contrast');
-    expect(mapThemeModeToColorScheme(Theme.LIGHT_COLORBLIND, false)).toBe('light_colorblind');
+    expect(mapThemeModeToColorScheme(Theme.DARK, true)).toBe('dark_high_contrast');
+    expect(mapThemeModeToColorScheme(Theme.DARK_DIMMED, true)).toBe('dark_dimmed_high_contrast');
     expect(mapThemeModeToColorScheme(Theme.LIGHT_COLORBLIND, true)).toBe(
       'light_colorblind_high_contrast',
     );
-    expect(mapThemeModeToColorScheme(Theme.LIGHT_TRITANOPIA, false)).toBe('light_tritanopia');
-    expect(mapThemeModeToColorScheme(Theme.LIGHT_TRITANOPIA, true)).toBe(
-      'light_tritanopia_high_contrast',
-    );
-    expect(mapThemeModeToColorScheme(Theme.DARK, false)).toBe('dark');
-    expect(mapThemeModeToColorScheme(Theme.DARK, true)).toBe('dark_high_contrast');
-    expect(mapThemeModeToColorScheme(Theme.DARK_COLORBLIND, false)).toBe('dark_colorblind');
-    expect(mapThemeModeToColorScheme(Theme.DARK_COLORBLIND, true)).toBe(
-      'dark_colorblind_high_contrast',
-    );
-    expect(mapThemeModeToColorScheme(Theme.DARK_TRITANOPIA, false)).toBe('dark_tritanopia');
-    expect(mapThemeModeToColorScheme(Theme.DARK_TRITANOPIA, true)).toBe(
-      'dark_tritanopia_high_contrast',
-    );
-    expect(mapThemeModeToColorScheme(Theme.DARK_DIMMED, false)).toBe('dark_dimmed');
-    expect(mapThemeModeToColorScheme(Theme.DARK_DIMMED, true)).toBe('dark_dimmed_high_contrast');
-    expect(mapThemeModeToColorScheme(Theme.SYSTEM, false)).toBe(null);
     expect(mapThemeModeToColorScheme(Theme.SYSTEM, true)).toBe(null);
   });
 
-  it('should export high contrast color scheme constants', () => {
+  it('should export default color scheme constants', () => {
+    expect(DEFAULT_DAY_COLOR_SCHEME).toBe('light');
+    expect(DEFAULT_NIGHT_COLOR_SCHEME).toBe('dark');
     expect(DEFAULT_DAY_HIGH_CONTRAST_COLOR_SCHEME).toBe('light_high_contrast');
     expect(DEFAULT_NIGHT_HIGH_CONTRAST_COLOR_SCHEME).toBe('dark_high_contrast');
   });
 
-  it('should export default color scheme constants', () => {
-    expect(DEFAULT_DAY_COLOR_SCHEME).toBe('light');
-    expect(DEFAULT_NIGHT_COLOR_SCHEME).toBe('dark');
+  describe('supportedColorModes', () => {
+    it('Classic supports the full palette including accessibility variants', () => {
+      expect(supportedColorModes(DesignLanguage.CLASSIC)).toEqual([
+        Theme.SYSTEM,
+        Theme.LIGHT,
+        Theme.LIGHT_COLORBLIND,
+        Theme.LIGHT_TRITANOPIA,
+        Theme.DARK,
+        Theme.DARK_COLORBLIND,
+        Theme.DARK_TRITANOPIA,
+        Theme.DARK_DIMMED,
+      ]);
+    });
+
+    it('Glass supports only light / dark / system', () => {
+      expect(supportedColorModes(DesignLanguage.GLASS)).toEqual([
+        Theme.SYSTEM,
+        Theme.LIGHT,
+        Theme.DARK,
+      ]);
+    });
+  });
+
+  describe('resolveColorMode', () => {
+    it('is the identity for Classic (every value supported)', () => {
+      for (const mode of supportedColorModes(DesignLanguage.CLASSIC)) {
+        expect(resolveColorMode(DesignLanguage.CLASSIC, mode)).toBe(mode);
+      }
+    });
+
+    it('keeps system / light / dark unchanged under Glass', () => {
+      expect(resolveColorMode(DesignLanguage.GLASS, Theme.SYSTEM)).toBe(Theme.SYSTEM);
+      expect(resolveColorMode(DesignLanguage.GLASS, Theme.LIGHT)).toBe(Theme.LIGHT);
+      expect(resolveColorMode(DesignLanguage.GLASS, Theme.DARK)).toBe(Theme.DARK);
+    });
+
+    it('clamps Classic-only variants to their base light/dark under Glass', () => {
+      expect(resolveColorMode(DesignLanguage.GLASS, Theme.LIGHT_COLORBLIND)).toBe(Theme.LIGHT);
+      expect(resolveColorMode(DesignLanguage.GLASS, Theme.LIGHT_TRITANOPIA)).toBe(Theme.LIGHT);
+      expect(resolveColorMode(DesignLanguage.GLASS, Theme.DARK_COLORBLIND)).toBe(Theme.DARK);
+      expect(resolveColorMode(DesignLanguage.GLASS, Theme.DARK_TRITANOPIA)).toBe(Theme.DARK);
+      expect(resolveColorMode(DesignLanguage.GLASS, Theme.DARK_DIMMED)).toBe(Theme.DARK);
+    });
   });
 });
diff --git a/src/renderer/utils/ui/theme.ts b/src/renderer/utils/ui/theme.ts
index b6231b7f7..2f6a0f6b7 100644
--- a/src/renderer/utils/ui/theme.ts
+++ b/src/renderer/utils/ui/theme.ts
@@ -1,6 +1,6 @@
 import type { ThemeProviderProps } from '@primer/react';
 
-import { Theme } from '../../types';
+import { DesignLanguage, Theme } from '../../types';
 
 // Derived from public @primer/react component props rather than internal types
 type ColorModeWithAuto = NonNullable<ThemeProviderProps['colorMode']>;
@@ -26,10 +26,7 @@ export function mapThemeModeToColorMode(themeMode: Theme): ColorModeWithAuto {
   }
 }
 
-export function mapThemeModeToColorScheme(
-  themeMode: Theme,
-  increaseContrast: boolean,
-): string | null {
+export function mapThemeModeToColorScheme(themeMode: Theme, highContrast = false): string | null {
   let base: string | null;
 
   switch (themeMode) {
@@ -58,5 +55,46 @@ export function mapThemeModeToColorScheme(
       return null;
   }
 
-  return increaseContrast ? `${base}_high_contrast` : base;
+  return highContrast ? `${base}_high_contrast` : base;
+}
+
+/** The `Theme` values a design language exposes (Glass: light/dark/system only). */
+export function supportedColorModes(designLanguage: DesignLanguage): Theme[] {
+  if (designLanguage === DesignLanguage.GLASS) {
+    return [Theme.SYSTEM, Theme.LIGHT, Theme.DARK];
+  }
+
+  return [
+    Theme.SYSTEM,
+    Theme.LIGHT,
+    Theme.LIGHT_COLORBLIND,
+    Theme.LIGHT_TRITANOPIA,
+    Theme.DARK,
+    Theme.DARK_COLORBLIND,
+    Theme.DARK_TRITANOPIA,
+    Theme.DARK_DIMMED,
+  ];
+}
+
+/**
+ * Clamps a stored color mode to what the active language supports (identity for
+ * Classic). The stored `theme` is never mutated — clamping is render-time only —
+ * so switching Glass → Classic restores the user's original scheme.
+ */
+export function resolveColorMode(designLanguage: DesignLanguage, theme: Theme): Theme {
+  if (designLanguage !== DesignLanguage.GLASS) {
+    return theme;
+  }
+
+  switch (theme) {
+    case Theme.SYSTEM:
+    case Theme.LIGHT:
+    case Theme.DARK:
+      return theme;
+    case Theme.LIGHT_COLORBLIND:
+    case Theme.LIGHT_TRITANOPIA:
+      return Theme.LIGHT;
+    default:
+      return Theme.DARK;
+  }
 }
diff --git a/src/shared/events.ts b/src/shared/events.ts
index c68362eea..3e9eec0a9 100644
--- a/src/shared/events.ts
+++ b/src/shared/events.ts
@@ -17,6 +17,8 @@ export const EVENTS = {
   UPDATE_KEYBOARD_SHORTCUT: `${P}update-keyboard-shortcut`,
   UPDATE_AUTO_LAUNCH: `${P}update-auto-launch`,
   UPDATE_KEEP_WINDOW_ON_BLUR: `${P}update-keep-window-on-blur`,
+  SET_WINDOW_VIBRANCY: `${P}set-window-vibrancy`,
+  SET_NATIVE_THEME: `${P}set-native-theme`,
   SAFE_STORAGE_ENCRYPT: `${P}safe-storage-encrypt`,
   SAFE_STORAGE_DECRYPT: `${P}safe-storage-decrypt`,
   NOTIFICATION_SOUND_PATH: `${P}notification-sound-path`,
@@ -29,6 +31,9 @@ export const EVENTS = {
 /** Union type of all valid IPC event name strings. */
 export type EventType = (typeof EVENTS)[keyof typeof EVENTS];
 
+/** Native appearance source, mirrors Electron's `nativeTheme.themeSource`. */
+export type NativeThemeSource = 'system' | 'light' | 'dark';
+
 /** Payload for the `UPDATE_AUTO_LAUNCH` event. */
 export interface IAutoLaunch {
   openAtLogin: boolean;
@@ -106,6 +111,8 @@ export type EventContracts = AssertEventCoverage<{
     request: boolean;
     response: undefined;
   };
+  [EVENTS.SET_WINDOW_VIBRANCY]: { request: boolean; response: undefined };
+  [EVENTS.SET_NATIVE_THEME]: { request: NativeThemeSource; response: undefined };
   [EVENTS.SAFE_STORAGE_ENCRYPT]: { request: string; response: string };
   [EVENTS.SAFE_STORAGE_DECRYPT]: {
     request: string;
diff --git a/tailwind.config.mts b/tailwind.config.mts
index 81cdd5b04..8e3de9859 100644
--- a/tailwind.config.mts
+++ b/tailwind.config.mts
@@ -39,23 +39,23 @@ const config: Config = {
         gitify: {
           font: 'var(--fgColor-default)',
           background: 'var(--gitify-background)',
-          sidebar: '#24292e',
-          footer: 'var(--bgColor-neutral-muted)',
+          sidebar: 'var(--gitify-sidebar)',
+          footer: 'var(--gitify-footer)',
 
           caution: colors.orange[600],
           error: 'var(--fgColor-danger)',
-          link: 'var(--fgColor-link)',
+          link: 'var(--gitify-link)',
           input: {
             rest: 'var(--control-bgColor-rest)',
             focus: 'var(--control-bgColor-active)',
           },
 
           icon: {
-            attention: 'var(--fgColor-attention)',
-            closed: 'var(--fgColor-closed)',
-            done: 'var(--fgColor-done)',
+            attention: 'var(--gitify-icon-attention)',
+            closed: 'var(--gitify-icon-closed)',
+            done: 'var(--gitify-icon-done)',
             muted: 'var(--fgColor-muted)',
-            open: 'var(--fgColor-open)',
+            open: 'var(--gitify-icon-open)',
           },
 
           counter: {