diff --git a/projects/docs/src/app/app.html b/projects/docs/src/app/app.html
index 9588e23..9a5c65f 100644
--- a/projects/docs/src/app/app.html
+++ b/projects/docs/src/app/app.html
@@ -58,7 +58,7 @@
         iconOnly
         [attr.aria-label]="
           'Customize appearance. Palette: ' +
-          activePalette().name +
+          activePaletteName() +
           ', density: ' +
           activeDensity().name +
           ', corners: ' +
@@ -91,7 +91,7 @@ <h2 id="docs-appearance-title">Appearance</h2>
             <div class="docs-appearance-section">
               <div class="docs-appearance-section__header">
                 <span>Palette</span>
-                <small>{{ activePalette().name }}</small>
+                <small>{{ activePaletteName() }}</small>
               </div>
               <div
                 class="docs-palette-options"
@@ -216,7 +216,7 @@ <h2 id="docs-appearance-title">Appearance</h2>
             </div>
 
             <footer class="docs-appearance-summary">
-              <span>{{ activePalette().name }}</span>
+              <span>{{ activePaletteName() }}</span>
               <span>{{ activeDensity().name }}</span>
               <span>{{ activeRadius().name }}</span>
               <span>{{ activeDirection().name }}</span>
diff --git a/projects/docs/src/app/app.ts b/projects/docs/src/app/app.ts
index bd65b43..b5706ce 100644
--- a/projects/docs/src/app/app.ts
+++ b/projects/docs/src/app/app.ts
@@ -9,12 +9,7 @@ import { AerisDrawerModule } from '@aeris-ui/core/drawer';
 import { AerisIconField } from '@aeris-ui/core/icon-field';
 import { AerisInputText } from '@aeris-ui/core/input-text';
 import { AerisScrollTop } from '@aeris-ui/core/scroll-top';
-import {
-  AerisThemeService,
-  type AerisDensityName,
-  type AerisDirection,
-  type AerisRadiusName,
-} from '@aeris-ui/core/theming';
+import { AerisThemeService } from '@aeris-ui/core/theming';
 import { AerisToolbarModule } from '@aeris-ui/core/toolbar';
 import { LucideDynamicIcon } from '@lucide/angular';
 import { filter } from 'rxjs';
@@ -25,76 +20,23 @@ import {
   type ComponentCategory,
 } from './data/component-catalog';
 import { AERIS_CURRENT_VERSION } from './data/aeris-version';
-import { DOCS_PALETTES, type DocsPaletteId } from './data/docs-palettes';
+import type { DocsPaletteId } from './data/docs-palettes';
 import {
   GUIDE_GROUPS,
   GUIDE_SUMMARIES,
   GUIDE_SUMMARY_BY_ID,
   type GuideGroupTitle,
 } from './pages/guides/guide-navigation';
+import {
+  DocsAppearanceService,
+  type DocsDensityId,
+  type DocsDirectionId,
+  type DocsRadiusId,
+} from './shared/appearance/docs-appearance.service';
 import { AerisLogoMarkComponent } from './shared/branding/aeris-logo-mark.component';
 import { DOC_ICONS } from './shared/documentation/doc-icons';
 import { DocsSeoService } from './shared/seo/docs-seo.service';
 
-type DocsDensityId = 'compact' | 'medium' | 'comfortable';
-type DocsRadiusId = 'soft' | 'rounded' | 'pill';
-type DocsDirectionId = 'ltr' | 'rtl';
-
-interface DocsThemeOption<T extends string> {
-  readonly id: T;
-  readonly name: string;
-  readonly description: string;
-}
-
-const DOCS_DENSITIES: readonly DocsThemeOption<DocsDensityId>[] = [
-  {
-    id: 'compact',
-    name: 'Compact',
-    description: 'Tighter controls for dense documentation pages.',
-  },
-  {
-    id: 'medium',
-    name: 'Medium',
-    description: 'Balanced spacing for everyday reading.',
-  },
-  {
-    id: 'comfortable',
-    name: 'Comfortable',
-    description: 'Larger controls with more breathing room.',
-  },
-];
-
-const DOCS_RADII: readonly DocsThemeOption<DocsRadiusId>[] = [
-  {
-    id: 'soft',
-    name: 'Soft',
-    description: 'Subtle corners with a quieter interface shape.',
-  },
-  {
-    id: 'rounded',
-    name: 'Rounded',
-    description: 'The default Aeris corner rhythm.',
-  },
-  {
-    id: 'pill',
-    name: 'Pill',
-    description: 'Fuller corners for a more rounded surface system.',
-  },
-];
-
-const DOCS_DIRECTIONS: readonly DocsThemeOption<DocsDirectionId>[] = [
-  {
-    id: 'ltr',
-    name: 'LTR',
-    description: 'Left-to-right layout direction.',
-  },
-  {
-    id: 'rtl',
-    name: 'RTL',
-    description: 'Right-to-left layout direction.',
-  },
-];
-
 @Component({
   selector: 'app-root',
   imports: [
@@ -122,45 +64,30 @@ const DOCS_DIRECTIONS: readonly DocsThemeOption<DocsDirectionId>[] = [
   },
 })
 export class App {
-  private readonly paletteStorageKey = 'aeris-docs-palette';
-  private readonly densityStorageKey = 'aeris-docs-density';
-  private readonly radiusStorageKey = 'aeris-docs-radius';
-  private readonly directionStorageKey = 'aeris-docs-direction';
   private readonly appearanceTrigger =
     viewChild<ElementRef<HTMLButtonElement>>('appearanceTrigger');
   protected readonly icons = DOC_ICONS;
   private readonly document = inject(DOCUMENT);
   private readonly router = inject(Router);
   private readonly seo = inject(DocsSeoService);
+  private readonly docsAppearance = inject(DocsAppearanceService);
   protected readonly themeService = inject(AerisThemeService);
 
   protected readonly sidebarOpen = signal(false);
   protected readonly searchOpen = signal(false);
   protected readonly appearanceOpen = signal(false);
-  protected readonly palettes = DOCS_PALETTES;
-  protected readonly densities = DOCS_DENSITIES;
-  protected readonly radii = DOCS_RADII;
-  protected readonly directions = DOCS_DIRECTIONS;
-  protected readonly activePaletteId = signal<DocsPaletteId>(this.readStoredPalette());
-  protected readonly activeDensityId = signal<DocsDensityId>(this.readStoredDensity());
-  protected readonly activeRadiusId = signal<DocsRadiusId>(this.readStoredRadius());
-  protected readonly activeDirectionId = signal<DocsDirectionId>(this.readStoredDirection());
-  protected readonly activePalette = computed(
-    () =>
-      this.palettes.find((palette) => palette.id === this.activePaletteId()) ?? this.palettes[0],
-  );
-  protected readonly activeDensity = computed(
-    () =>
-      this.densities.find((density) => density.id === this.activeDensityId()) ?? this.densities[1],
-  );
-  protected readonly activeRadius = computed(
-    () => this.radii.find((radius) => radius.id === this.activeRadiusId()) ?? this.radii[1],
-  );
-  protected readonly activeDirection = computed(
-    () =>
-      this.directions.find((direction) => direction.id === this.activeDirectionId()) ??
-      this.directions[0],
-  );
+  protected readonly palettes = this.docsAppearance.palettes;
+  protected readonly densities = this.docsAppearance.densities;
+  protected readonly radii = this.docsAppearance.radii;
+  protected readonly directions = this.docsAppearance.directions;
+  protected readonly activePaletteId = this.docsAppearance.activePaletteId;
+  protected readonly activePaletteName = this.docsAppearance.activePaletteName;
+  protected readonly activeDensityId = this.docsAppearance.activeDensityId;
+  protected readonly activeRadiusId = this.docsAppearance.activeRadiusId;
+  protected readonly activeDirectionId = this.docsAppearance.activeDirectionId;
+  protected readonly activeDensity = this.docsAppearance.activeDensity;
+  protected readonly activeRadius = this.docsAppearance.activeRadius;
+  protected readonly activeDirection = this.docsAppearance.activeDirection;
   protected readonly query = signal('');
   protected readonly theme = this.themeService.mode;
   protected readonly componentCount = COMPONENT_CATALOG.length;
@@ -219,28 +146,6 @@ export class App {
       .slice(0, 10);
   });
 
-  private readonly syncPalette = effect(() => {
-    const palette = this.activePalette();
-    const density = this.activeDensityId();
-    const radius = this.activeRadiusId();
-    const direction = this.activeDirectionId();
-    this.themeService.setTheme({
-      ...palette.theme,
-      density: density satisfies AerisDensityName,
-      radius: radius satisfies AerisRadiusName,
-      direction: direction satisfies AerisDirection,
-    });
-
-    try {
-      globalThis.localStorage?.setItem(this.paletteStorageKey, palette.id);
-      globalThis.localStorage?.setItem(this.densityStorageKey, density);
-      globalThis.localStorage?.setItem(this.radiusStorageKey, radius);
-      globalThis.localStorage?.setItem(this.directionStorageKey, direction);
-    } catch {
-      // Storage can be unavailable in privacy modes or non-browser environments.
-    }
-  });
-
   private readonly expandActiveComponentGroup = effect(() => {
     this.navigationEnd();
     const slug = this.router.url.split(/[?#]/)[0]?.split('/')[2];
@@ -285,19 +190,19 @@ export class App {
   }
 
   protected selectPalette(id: DocsPaletteId): void {
-    this.activePaletteId.set(id);
+    this.docsAppearance.selectPalette(id);
   }
 
   protected selectDensity(id: DocsDensityId): void {
-    this.activeDensityId.set(id);
+    this.docsAppearance.selectDensity(id);
   }
 
   protected selectRadius(id: DocsRadiusId): void {
-    this.activeRadiusId.set(id);
+    this.docsAppearance.selectRadius(id);
   }
 
   protected selectDirection(id: DocsDirectionId): void {
-    this.activeDirectionId.set(id);
+    this.docsAppearance.selectDirection(id);
   }
 
   protected closeAppearanceMenu(): void {
@@ -360,61 +265,4 @@ export class App {
       this.sidebarOpen.set(false);
     }
   }
-
-  private readStoredPalette(): DocsPaletteId {
-    try {
-      const stored = globalThis.localStorage?.getItem(this.paletteStorageKey);
-      if (
-        stored === 'earth' ||
-        stored === 'coastal' ||
-        stored === 'orchid' ||
-        stored === 'monochrome'
-      ) {
-        return stored;
-      }
-    } catch {
-      // Storage can be unavailable in privacy modes or non-browser environments.
-    }
-
-    return 'earth';
-  }
-
-  private readStoredDensity(): DocsDensityId {
-    try {
-      const stored = globalThis.localStorage?.getItem(this.densityStorageKey);
-      if (stored === 'compact' || stored === 'medium' || stored === 'comfortable') {
-        return stored;
-      }
-    } catch {
-      // Storage can be unavailable in privacy modes or non-browser environments.
-    }
-
-    return 'medium';
-  }
-
-  private readStoredRadius(): DocsRadiusId {
-    try {
-      const stored = globalThis.localStorage?.getItem(this.radiusStorageKey);
-      if (stored === 'soft' || stored === 'rounded' || stored === 'pill') {
-        return stored;
-      }
-    } catch {
-      // Storage can be unavailable in privacy modes or non-browser environments.
-    }
-
-    return 'rounded';
-  }
-
-  private readStoredDirection(): DocsDirectionId {
-    try {
-      const stored = globalThis.localStorage?.getItem(this.directionStorageKey);
-      if (stored === 'ltr' || stored === 'rtl') {
-        return stored;
-      }
-    } catch {
-      // Storage can be unavailable in privacy modes or non-browser environments.
-    }
-
-    return 'ltr';
-  }
 }
diff --git a/projects/docs/src/app/features/design-lab/design-lab.html b/projects/docs/src/app/features/design-lab/design-lab.html
index 085f475..bdc237d 100644
--- a/projects/docs/src/app/features/design-lab/design-lab.html
+++ b/projects/docs/src/app/features/design-lab/design-lab.html
@@ -31,8 +31,13 @@ <h2 id="theme-controls-title">Make the system yours.</h2>
           <span>5 seeds</span>
         </div>
         <div class="design-lab__presets" aria-label="Palette presets">
-          @for (preset of presets; track preset.name) {
-            <button type="button" (click)="applyPreset(preset)">
+          @for (preset of presets; track preset.id) {
+            <button
+              type="button"
+              [class.active]="activePresetId() === preset.id"
+              [attr.aria-pressed]="activePresetId() === preset.id"
+              (click)="applyPreset(preset)"
+            >
               <span aria-hidden="true">
                 @for (
                   color of [
diff --git a/projects/docs/src/app/features/design-lab/design-lab.scss b/projects/docs/src/app/features/design-lab/design-lab.scss
index d31350d..b82621d 100644
--- a/projects/docs/src/app/features/design-lab/design-lab.scss
+++ b/projects/docs/src/app/features/design-lab/design-lab.scss
@@ -147,6 +147,13 @@
   background: var(--surface-2);
 }
 
+.design-lab__presets button.active {
+  border-color: color-mix(in srgb, var(--aeris-primary) 38%, transparent);
+  background: color-mix(in srgb, var(--aeris-primary) 10%, var(--surface));
+  color: var(--text);
+  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--aeris-primary) 12%, transparent);
+}
+
 .design-lab__presets button > span {
   width: 2.5rem;
   height: 0.75rem;
diff --git a/projects/docs/src/app/features/design-lab/design-lab.ts b/projects/docs/src/app/features/design-lab/design-lab.ts
index 0f35a4e..027623e 100644
--- a/projects/docs/src/app/features/design-lab/design-lab.ts
+++ b/projects/docs/src/app/features/design-lab/design-lab.ts
@@ -1,4 +1,4 @@
-import { Component, computed, inject, linkedSignal, signal } from '@angular/core';
+import { Component, computed, effect, inject, linkedSignal, signal } from '@angular/core';
 import { AerisBadgeModule } from '@aeris-ui/core/badge';
 import { AerisButton } from '@aeris-ui/core/button';
 import { AerisCardModule } from '@aeris-ui/core/card';
@@ -12,9 +12,7 @@ import {
   type AerisContrastCategory,
   type AerisContrastCheck,
   type AerisContrastStatus,
-  type AerisDensityName,
   type AerisPaletteConfig,
-  type AerisRadiusName,
   type AerisResolvedSemanticTone,
   type AerisSemanticTone,
   type AerisSemanticToneName,
@@ -25,6 +23,7 @@ import {
 } from '@aeris-ui/core/theming';
 
 import { DOCS_PALETTES, type DocsPalette } from '../../data/docs-palettes';
+import { DocsAppearanceService } from '../../shared/appearance/docs-appearance.service';
 import { CodeBlockComponent } from '../../shared/code-block.component';
 import { AerisApplicationShowcaseComponent } from '../../shared/showcase/aeris-application-showcase.component';
 
@@ -235,9 +234,11 @@ function createContrastReport(theme: AerisTheme, mode: LabScheme): LabContrastRe
   styleUrl: './design-lab.scss',
 })
 export class DesignLab {
+  private readonly docsAppearance = inject(DocsAppearanceService);
   private readonly aerisTheme = inject(AerisThemeService);
   protected readonly paletteOptions = PALETTE_OPTIONS;
   protected readonly presets = DOCS_PALETTES;
+  protected readonly activePresetId = this.docsAppearance.activePaletteId;
   protected readonly toneProperties: readonly {
     readonly key: LabToneProperty;
     readonly label: string;
@@ -264,6 +265,20 @@ export class DesignLab {
     light: editableToneOverrides(this.aerisTheme.theme().light.tones),
     dark: editableToneOverrides(this.aerisTheme.theme().dark.tones),
   });
+  private readonly syncEditableTheme = effect(() => {
+    const theme = this.aerisTheme.theme();
+    this.palette.set({
+      surface: theme.palette.surface,
+      primary: theme.palette.primary,
+      secondary: theme.palette.secondary,
+      accent: theme.palette.accent,
+      contrast: theme.palette.contrast,
+    });
+    this.toneOverrides.set({
+      light: editableToneOverrides(theme.light.tones),
+      dark: editableToneOverrides(theme.dark.tones),
+    });
+  });
   protected readonly toneRows = computed<readonly LabToneRow[]>(() => {
     const scheme = this.resolvedMode();
     const resolved = this.aerisTheme.semanticTones();
@@ -375,26 +390,20 @@ export const appConfig: ApplicationConfig = {
   }
 
   protected setDensity(density: LabDensity): void {
-    this.aerisTheme.updateTheme({ density: density satisfies AerisDensityName });
+    this.docsAppearance.selectDensity(density);
   }
 
   protected setRadius(radius: LabRadius): void {
-    this.aerisTheme.updateTheme({ radius: radius satisfies AerisRadiusName });
+    this.docsAppearance.selectRadius(radius);
   }
 
   protected applyPreset(preset: DocsPalette): void {
-    const current = this.aerisTheme.theme();
     this.palette.set(preset.palette);
     this.toneOverrides.set({
       light: editableToneOverrides(preset.theme.light?.tones),
       dark: editableToneOverrides(preset.theme.dark?.tones),
     });
-    this.aerisTheme.setTheme({
-      ...preset.theme,
-      density: current.density,
-      radius: current.radius,
-      direction: current.direction,
-    });
+    this.docsAppearance.selectPalette(preset.id);
   }
 
   protected resetTheme(): void {
diff --git a/projects/docs/src/app/shared/appearance/docs-appearance.service.spec.ts b/projects/docs/src/app/shared/appearance/docs-appearance.service.spec.ts
new file mode 100644
index 0000000..9880e49
--- /dev/null
+++ b/projects/docs/src/app/shared/appearance/docs-appearance.service.spec.ts
@@ -0,0 +1,79 @@
+import { TestBed } from '@angular/core/testing';
+import { AERIS_THEME_PRESETS, AerisThemeService, provideAeris } from '@aeris-ui/core/theming';
+
+import { DocsAppearanceService } from './docs-appearance.service';
+
+function createMemoryStorage(): Storage {
+  const values = new Map<string, string>();
+  return {
+    get length() {
+      return values.size;
+    },
+    clear: () => values.clear(),
+    getItem: (key) => values.get(key) ?? null,
+    key: (index) => [...values.keys()][index] ?? null,
+    removeItem: (key) => values.delete(key),
+    setItem: (key, value) => values.set(key, value),
+  };
+}
+
+describe('DocsAppearanceService', () => {
+  beforeEach(() => {
+    vi.stubGlobal('localStorage', createMemoryStorage());
+    TestBed.configureTestingModule({ providers: [provideAeris({ mode: 'system' })] });
+  });
+
+  afterEach(() => {
+    TestBed.resetTestingModule();
+    vi.unstubAllGlobals();
+  });
+
+  it('restores one shared documentation appearance state', () => {
+    globalThis.localStorage.setItem('aeris-docs-palette', 'orchid');
+    globalThis.localStorage.setItem('aeris-docs-density', 'compact');
+    globalThis.localStorage.setItem('aeris-docs-radius', 'soft');
+    globalThis.localStorage.setItem('aeris-docs-direction', 'rtl');
+
+    const appearance = TestBed.inject(DocsAppearanceService);
+
+    expect(appearance.activePaletteId()).toBe('orchid');
+    expect(appearance.activeDensityId()).toBe('compact');
+    expect(appearance.activeRadiusId()).toBe('soft');
+    expect(appearance.activeDirectionId()).toBe('rtl');
+  });
+
+  it('reflects direct theme updates made by the Design Lab', () => {
+    const appearance = TestBed.inject(DocsAppearanceService);
+    const theme = TestBed.inject(AerisThemeService);
+
+    theme.setTheme({
+      ...AERIS_THEME_PRESETS.coastal,
+      density: 'comfortable',
+      radius: 'pill',
+    });
+
+    expect(appearance.activePaletteId()).toBe('coastal');
+    expect(appearance.activePaletteName()).toBe('Coastal Glass');
+    expect(appearance.activeDensityId()).toBe('comfortable');
+    expect(appearance.activeRadiusId()).toBe('pill');
+
+    theme.updateTheme({ palette: { primary: '#123456' } });
+
+    expect(appearance.activePaletteId()).toBeNull();
+    expect(appearance.activePaletteName()).toBe('Custom palette');
+  });
+
+  it('preserves density, corners, and direction when the menu changes palettes', () => {
+    const appearance = TestBed.inject(DocsAppearanceService);
+
+    appearance.selectDensity('compact');
+    appearance.selectRadius('soft');
+    appearance.selectDirection('rtl');
+    appearance.selectPalette('monochrome');
+
+    expect(appearance.activePaletteId()).toBe('monochrome');
+    expect(appearance.activeDensityId()).toBe('compact');
+    expect(appearance.activeRadiusId()).toBe('soft');
+    expect(appearance.activeDirectionId()).toBe('rtl');
+  });
+});
diff --git a/projects/docs/src/app/shared/appearance/docs-appearance.service.ts b/projects/docs/src/app/shared/appearance/docs-appearance.service.ts
new file mode 100644
index 0000000..e854955
--- /dev/null
+++ b/projects/docs/src/app/shared/appearance/docs-appearance.service.ts
@@ -0,0 +1,246 @@
+import { Service, computed, effect, inject } from '@angular/core';
+import {
+  AerisThemeService,
+  type AerisDensityName,
+  type AerisDirection,
+  type AerisPaletteConfig,
+  type AerisRadiusName,
+} from '@aeris-ui/core/theming';
+
+import { DOCS_PALETTES, type DocsPaletteId } from '../../data/docs-palettes';
+
+export type DocsDensityId = 'compact' | 'medium' | 'comfortable';
+export type DocsRadiusId = 'soft' | 'rounded' | 'pill';
+export type DocsDirectionId = 'ltr' | 'rtl';
+
+export interface DocsThemeOption<T extends string> {
+  readonly id: T;
+  readonly name: string;
+  readonly description: string;
+}
+
+export const DOCS_DENSITIES: readonly DocsThemeOption<DocsDensityId>[] = [
+  {
+    id: 'compact',
+    name: 'Compact',
+    description: 'Tighter controls for dense documentation pages.',
+  },
+  {
+    id: 'medium',
+    name: 'Medium',
+    description: 'Balanced spacing for everyday reading.',
+  },
+  {
+    id: 'comfortable',
+    name: 'Comfortable',
+    description: 'Larger controls with more breathing room.',
+  },
+];
+
+export const DOCS_RADII: readonly DocsThemeOption<DocsRadiusId>[] = [
+  {
+    id: 'soft',
+    name: 'Soft',
+    description: 'Subtle corners with a quieter interface shape.',
+  },
+  {
+    id: 'rounded',
+    name: 'Rounded',
+    description: 'The default Aeris corner rhythm.',
+  },
+  {
+    id: 'pill',
+    name: 'Pill',
+    description: 'Fuller corners for a more rounded surface system.',
+  },
+];
+
+export const DOCS_DIRECTIONS: readonly DocsThemeOption<DocsDirectionId>[] = [
+  {
+    id: 'ltr',
+    name: 'LTR',
+    description: 'Left-to-right layout direction.',
+  },
+  {
+    id: 'rtl',
+    name: 'RTL',
+    description: 'Right-to-left layout direction.',
+  },
+];
+
+const PALETTE_STORAGE_KEY = 'aeris-docs-palette';
+const DENSITY_STORAGE_KEY = 'aeris-docs-density';
+const RADIUS_STORAGE_KEY = 'aeris-docs-radius';
+const DIRECTION_STORAGE_KEY = 'aeris-docs-direction';
+
+function palettesMatch(left: AerisPaletteConfig, right: AerisPaletteConfig): boolean {
+  return (
+    left.surface === right.surface &&
+    left.primary === right.primary &&
+    left.secondary === right.secondary &&
+    left.accent === right.accent &&
+    left.contrast === right.contrast
+  );
+}
+
+function isDocsDensity(value: string): value is DocsDensityId {
+  return value === 'compact' || value === 'medium' || value === 'comfortable';
+}
+
+function isDocsRadius(value: string): value is DocsRadiusId {
+  return value === 'soft' || value === 'rounded' || value === 'pill';
+}
+
+@Service()
+export class DocsAppearanceService {
+  private readonly themeService = inject(AerisThemeService);
+
+  readonly palettes = DOCS_PALETTES;
+  readonly densities = DOCS_DENSITIES;
+  readonly radii = DOCS_RADII;
+  readonly directions = DOCS_DIRECTIONS;
+
+  readonly activePaletteId = computed<DocsPaletteId | null>(
+    () =>
+      this.palettes.find((preset) =>
+        palettesMatch(preset.palette, this.themeService.theme().palette),
+      )?.id ?? null,
+  );
+  readonly activePaletteName = computed(
+    () =>
+      this.palettes.find((palette) => palette.id === this.activePaletteId())?.name ??
+      'Custom palette',
+  );
+  readonly activeDensityId = computed<DocsDensityId>(() => {
+    const density = this.themeService.theme().density;
+    return isDocsDensity(density) ? density : 'medium';
+  });
+  readonly activeRadiusId = computed<DocsRadiusId>(() => {
+    const radius = this.themeService.theme().radius;
+    return isDocsRadius(radius) ? radius : 'rounded';
+  });
+  readonly activeDirectionId = computed<DocsDirectionId>(() =>
+    this.themeService.theme().direction === 'rtl' ? 'rtl' : 'ltr',
+  );
+  readonly activeDensity = computed(
+    () =>
+      this.densities.find((density) => density.id === this.activeDensityId()) ?? this.densities[1],
+  );
+  readonly activeRadius = computed(
+    () => this.radii.find((radius) => radius.id === this.activeRadiusId()) ?? this.radii[1],
+  );
+  readonly activeDirection = computed(
+    () =>
+      this.directions.find((direction) => direction.id === this.activeDirectionId()) ??
+      this.directions[0],
+  );
+
+  constructor() {
+    const palette =
+      this.palettes.find((preset) => preset.id === this.readStoredPalette()) ?? this.palettes[0];
+    this.themeService.setTheme({
+      ...palette.theme,
+      density: this.readStoredDensity() satisfies AerisDensityName,
+      radius: this.readStoredRadius() satisfies AerisRadiusName,
+      direction: this.readStoredDirection() satisfies AerisDirection,
+    });
+
+    effect(() => {
+      const paletteId = this.activePaletteId();
+      const density = this.activeDensityId();
+      const radius = this.activeRadiusId();
+      const direction = this.activeDirectionId();
+
+      try {
+        if (paletteId) globalThis.localStorage?.setItem(PALETTE_STORAGE_KEY, paletteId);
+        globalThis.localStorage?.setItem(DENSITY_STORAGE_KEY, density);
+        globalThis.localStorage?.setItem(RADIUS_STORAGE_KEY, radius);
+        globalThis.localStorage?.setItem(DIRECTION_STORAGE_KEY, direction);
+      } catch {
+        // Storage can be unavailable in privacy modes or non-browser environments.
+      }
+    });
+  }
+
+  selectPalette(id: DocsPaletteId): void {
+    const preset = this.palettes.find((palette) => palette.id === id);
+    if (!preset) return;
+
+    const current = this.themeService.theme();
+    this.themeService.setTheme({
+      ...preset.theme,
+      density: current.density,
+      radius: current.radius,
+      direction: current.direction,
+    });
+  }
+
+  selectDensity(id: DocsDensityId): void {
+    this.themeService.updateTheme({ density: id satisfies AerisDensityName });
+  }
+
+  selectRadius(id: DocsRadiusId): void {
+    this.themeService.updateTheme({ radius: id satisfies AerisRadiusName });
+  }
+
+  selectDirection(id: DocsDirectionId): void {
+    this.themeService.setDirection(id satisfies AerisDirection);
+  }
+
+  private readStoredPalette(): DocsPaletteId {
+    try {
+      const stored = globalThis.localStorage?.getItem(PALETTE_STORAGE_KEY);
+      if (
+        stored === 'earth' ||
+        stored === 'coastal' ||
+        stored === 'orchid' ||
+        stored === 'monochrome'
+      ) {
+        return stored;
+      }
+    } catch {
+      // Storage can be unavailable in privacy modes or non-browser environments.
+    }
+
+    return 'earth';
+  }
+
+  private readStoredDensity(): DocsDensityId {
+    try {
+      const stored = globalThis.localStorage?.getItem(DENSITY_STORAGE_KEY);
+      if (stored === 'compact' || stored === 'medium' || stored === 'comfortable') {
+        return stored;
+      }
+    } catch {
+      // Storage can be unavailable in privacy modes or non-browser environments.
+    }
+
+    return 'medium';
+  }
+
+  private readStoredRadius(): DocsRadiusId {
+    try {
+      const stored = globalThis.localStorage?.getItem(RADIUS_STORAGE_KEY);
+      if (stored === 'soft' || stored === 'rounded' || stored === 'pill') {
+        return stored;
+      }
+    } catch {
+      // Storage can be unavailable in privacy modes or non-browser environments.
+    }
+
+    return 'rounded';
+  }
+
+  private readStoredDirection(): DocsDirectionId {
+    try {
+      const stored = globalThis.localStorage?.getItem(DIRECTION_STORAGE_KEY);
+      if (stored === 'ltr' || stored === 'rtl') {
+        return stored;
+      }
+    } catch {
+      // Storage can be unavailable in privacy modes or non-browser environments.
+    }
+
+    return 'ltr';
+  }
+}