diff --git a/configurator/src/components/inputs/AspectRatioInput.svelte b/configurator/src/components/inputs/AspectRatioInput.svelte
new file mode 100644
index 000000000..6ab5d4748
--- /dev/null
+++ b/configurator/src/components/inputs/AspectRatioInput.svelte
@@ -0,0 +1,49 @@
+<script lang="ts">
+  /**
+   * AspectRatioInput — one shared preset grid for "pick a raw aspect ratio for
+   * a single token" controls (Macros --sf-aspect, Layout --sf-frame-ratio).
+   * Clicking the default preset resets the override. Optional live preview box.
+   */
+  type Preset = string | { label: string; value: string };
+
+  let { token, value, defaultValue, presets, columns = 3, dense = false, showPreview = false, onSet, onReset }: {
+    token: string;
+    value: string;
+    defaultValue: string;
+    presets: Preset[];
+    columns?: number;
+    dense?: boolean;
+    showPreview?: boolean;
+    onSet: (name: string, value: string) => void;
+    onReset: (name: string) => void;
+  } = $props();
+
+  const COLS: Record<number, string> = {
+    2: "grid-cols-2", 3: "grid-cols-3", 4: "grid-cols-4", 5: "grid-cols-5", 6: "grid-cols-6",
+  };
+  const norm = (s: string) => s.replace(/\s/g, "");
+  let items = $derived(presets.map((p) => (typeof p === "string" ? { label: p, value: p } : p)));
+  let colClass = $derived(COLS[columns] ?? "grid-cols-3");
+</script>
+
+<div class={`grid ${colClass} ${dense ? "gap-1" : "gap-1.5"}`}>
+  {#each items as p (p.value)}
+    <button
+      onclick={() => p.value === defaultValue ? onReset(token) : onSet(token, p.value)}
+      class={`${dense ? "py-1 text-[9px]" : "py-1.5 text-[10px]"} rounded-lg border transition-all cursor-pointer font-mono ${
+        norm(value) === norm(p.value)
+          ? "bg-indigo-500/15 border-indigo-500/40 text-indigo-800 dark:text-indigo-200"
+          : "border-black/8 dark:border-white/8 text-slate-600 dark:text-slate-400 hover:bg-black/5 dark:hover:bg-white/5 hover:text-slate-800 dark:hover:text-slate-200"
+      }`}
+    >{p.label}</button>
+  {/each}
+</div>
+
+{#if showPreview}
+  <div class="bg-black/4 dark:bg-white/4 rounded-xl border border-black/8 dark:border-white/8 p-3 flex justify-center mt-2">
+    <div
+      class="bg-indigo-500/30 border border-indigo-500/30 rounded-lg flex items-center justify-center text-[9px] font-mono text-indigo-800 dark:text-indigo-200"
+      style={`aspect-ratio:${value};max-height:120px;max-width:100%;width:auto;height:120px`}
+    >{value}</div>
+  </div>
+{/if}
diff --git a/configurator/src/components/inputs/RawTokenRow.svelte b/configurator/src/components/inputs/RawTokenRow.svelte
new file mode 100644
index 000000000..7550f5d6c
--- /dev/null
+++ b/configurator/src/components/inputs/RawTokenRow.svelte
@@ -0,0 +1,34 @@
+<script lang="ts">
+  /**
+   * RawTokenRow — a labelled free-text field for arbitrary CSS token values
+   * (ratios, shadows, urls, keyframes…) with an inline reset. Replaces the
+   * hand-rolled "text input + reset" blocks duplicated across panels. Empty
+   * input (after trim) resets the override; the raw value is stored verbatim
+   * so intentional leading whitespace (e.g. markers) is preserved.
+   */
+  let { label, labelWidth = "w-20", value, placeholder, overridden, onSet, onReset }: {
+    label?: string;
+    labelWidth?: string;
+    value: string;
+    placeholder?: string;
+    overridden: boolean;
+    onSet: (value: string) => void;
+    onReset: () => void;
+  } = $props();
+</script>
+
+<div class="flex items-center gap-2">
+  {#if label}
+    <span class={`text-[10px] font-semibold text-slate-600 dark:text-slate-400 ${labelWidth} shrink-0`}>{label}</span>
+  {/if}
+  <input
+    type="text"
+    {value}
+    {placeholder}
+    oninput={(e) => { const v = (e.target as HTMLInputElement).value; v.trim() ? onSet(v) : onReset(); }}
+    class="flex-1 min-w-0 bg-black/5 dark:bg-white/5 border border-black/10 dark:border-white/10 rounded px-1.5 py-1 text-[9px] font-mono text-slate-700 dark:text-slate-300 placeholder:text-slate-600 focus:outline-none focus:border-indigo-500"
+  />
+  {#if overridden}
+    <button onclick={onReset} class="text-[8px] text-slate-500 hover:text-rose-600 dark:hover:text-rose-400 cursor-pointer shrink-0">reset</button>
+  {/if}
+</div>
diff --git a/configurator/src/components/inputs/Section.svelte b/configurator/src/components/inputs/Section.svelte
new file mode 100644
index 000000000..6d018d4a8
--- /dev/null
+++ b/configurator/src/components/inputs/Section.svelte
@@ -0,0 +1,36 @@
+<script lang="ts">
+  /**
+   * Section — the shared collapsible panel section. Replaces the
+   * button[aria-expanded] + {#if} header block that was hand-copied ~50 times
+   * across every panel. `open` is bindable so panels keep their own $state.
+   * `variant="advanced"` renders the de-emphasised sub-section header used for
+   * "Advanced" power-knob groups.
+   */
+  import type { Snippet } from 'svelte';
+
+  let { title, open = $bindable(false), variant = 'default', spacing = 'space-y-3', children }: {
+    title: string;
+    open?: boolean;
+    variant?: 'default' | 'advanced';
+    spacing?: string;
+    children: Snippet;
+  } = $props();
+</script>
+
+<section class={spacing}>
+  <button
+    onclick={() => open = !open}
+    aria-expanded={open}
+    class={variant === 'advanced'
+      ? "w-full flex items-center justify-between text-slate-400 dark:text-slate-600 hover:text-slate-600 dark:hover:text-slate-400 transition-colors cursor-pointer"
+      : "w-full flex items-center justify-between cursor-pointer"}
+  >
+    <div class={variant === 'advanced'
+      ? "text-[10px] font-semibold uppercase tracking-widest"
+      : "text-[10px] font-bold text-slate-500 uppercase tracking-widest"}>{title}</div>
+    <span class={variant === 'advanced' ? "text-[10px]" : "text-[10px] text-slate-500"}>{open ? "▲" : "▼"}</span>
+  </button>
+  {#if open}
+    {@render children()}
+  {/if}
+</section>
diff --git a/configurator/src/components/inputs/Toggle.svelte b/configurator/src/components/inputs/Toggle.svelte
new file mode 100644
index 000000000..82a6a4588
--- /dev/null
+++ b/configurator/src/components/inputs/Toggle.svelte
@@ -0,0 +1,29 @@
+<script lang="ts">
+  /**
+   * Toggle — the shared pill switch used across panels (shadow glow, disable
+   * motion, boolean state flags…). Previously hand-rolled inline in three
+   * panels with slightly different markup; this unifies them. Two sizes:
+   * `md` (default) and `sm`.
+   */
+  let { checked, onToggle, size = "md", ariaLabel, title }: {
+    checked: boolean;
+    onToggle: () => void;
+    size?: "sm" | "md";
+    ariaLabel?: string;
+    title?: string;
+  } = $props();
+
+  let track = $derived(size === "sm" ? "w-8 h-4" : "w-9 h-5");
+  let thumb = $derived(size === "sm" ? "w-3 h-3" : "w-4 h-4");
+</script>
+
+<button
+  type="button"
+  aria-label={ariaLabel}
+  aria-pressed={checked}
+  {title}
+  onclick={onToggle}
+  class={`${track} rounded-full transition-colors relative cursor-pointer shrink-0 ${checked ? "bg-indigo-600" : "bg-black/10 dark:bg-white/10"}`}
+>
+  <div class={`absolute top-0.5 ${thumb} bg-white rounded-full shadow transition-transform ${checked ? "translate-x-4" : "translate-x-0.5"}`}></div>
+</button>
diff --git a/configurator/src/components/inputs/TokenRow.svelte b/configurator/src/components/inputs/TokenRow.svelte
index 9699b8dfd..70691ee52 100644
--- a/configurator/src/components/inputs/TokenRow.svelte
+++ b/configurator/src/components/inputs/TokenRow.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
   import type { SlashedToken } from '../../types';
   import { resolveColor, previewVersion } from '../../lib/previewResolver.svelte';
+  import { scaleForValue } from '../../lib/variableScales';
 
   let { token, overrideValue, onSet, onReset }: {
     token: SlashedToken;
@@ -9,8 +10,20 @@
     onReset: () => void;
   } = $props();
 
+  const CUSTOM = "__sf_custom__";
   let expanded = $state(false);
 
+  // When a token's default is itself a scale variable (e.g. var(--sf-space-m)),
+  // offer that scale's steps as a dropdown — variable-first, with the raw text
+  // box available via "Custom…". Mirrors SliderRow's picker for the generic row.
+  let scaleOpts = $derived(scaleForValue(token.value));
+  let matchedScale = $derived(
+    !!scaleOpts && (scaleOpts.some((o) => o.value === (overrideValue ?? token.value)))
+  );
+  let showScalePicker = $derived(
+    !!scaleOpts && !expanded && (overrideValue === undefined || matchedScale)
+  );
+
   function guessType(t: SlashedToken): "color" | "font" | "number" | "text" {
     const n = t.name;
     if (n.includes("color") || n.includes("source") || n.includes("-bg") || n.includes("-border")) return "color";
@@ -54,7 +67,26 @@
     {/if}
   </div>
 
-  {#if expanded}
+  {#if showScalePicker && scaleOpts}
+    <select
+      value={displayValue}
+      aria-label={`${shortName} value`}
+      onchange={(e) => {
+        const v = (e.target as HTMLSelectElement).value;
+        if (v === CUSTOM) { expanded = true; return; }
+        if (v === token.value) onReset(); else onSet(v);
+      }}
+      class="w-32 shrink-0 bg-black/5 dark:bg-white/5 border border-black/10 dark:border-white/10 rounded px-1.5 py-0.5 text-[10px] font-mono text-slate-700 dark:text-slate-300 focus:outline-none focus:border-indigo-500 cursor-pointer"
+    >
+      {#if !scaleOpts.some((o) => o.value === token.value)}
+        <option value={token.value}>{token.value} (default)</option>
+      {/if}
+      {#each scaleOpts as o (o.value)}
+        <option value={o.value}>{o.label}</option>
+      {/each}
+      <option value={CUSTOM}>Custom…</option>
+    </select>
+  {:else if expanded}
     <input
       value={displayValue}
       onblur={(e) => {
diff --git a/configurator/src/components/panels/BordersPanel.svelte b/configurator/src/components/panels/BordersPanel.svelte
index f018e8d88..acb20af22 100644
--- a/configurator/src/components/panels/BordersPanel.svelte
+++ b/configurator/src/components/panels/BordersPanel.svelte
@@ -3,6 +3,7 @@
   import PowerKnobRow from '../inputs/PowerKnobRow.svelte';
   import SliderRow from '../inputs/SliderRow.svelte';
   import ColorInput from '../inputs/ColorInput.svelte';
+  import Section from '../inputs/Section.svelte';
   import { SPACE_SCALE, RADIUS_SCALE, BORDER_WIDTH_SCALE, type VarOption } from '../../lib/variableScales';
 
   let { overrides, onSet, onReset }: {
@@ -85,16 +86,7 @@
 <div class="p-4 space-y-5">
 
   <!-- BORDER COLOR -->
-  <section class="space-y-3">
-    <button
-      onclick={() => { showBorderColor = !showBorderColor; }}
-      aria-expanded={showBorderColor}
-      class="w-full flex items-center justify-between cursor-pointer"
-    >
-      <div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Border color</div>
-      <span class="text-[10px] text-slate-500">{showBorderColor ? "▲" : "▼"}</span>
-    </button>
-    {#if showBorderColor}
+  <Section title="Border color" bind:open={showBorderColor}>
       <ColorInput
         token="--sf-color-border"
         value={borderColor}
@@ -106,22 +98,12 @@
       <p class="text-[9px] text-slate-400 dark:text-slate-600">
         Drives --sf-color-border--strong, --subtle, --translucent automatically.
       </p>
-    {/if}
-  </section>
+  </Section>
 
   <div class="h-px bg-black/6 dark:bg-white/6"></div>
 
   <!-- BORDER SCALE -->
-  <section class="space-y-3">
-    <button
-      onclick={() => { showBorderWidths = !showBorderWidths; }}
-      aria-expanded={showBorderWidths}
-      class="w-full flex items-center justify-between cursor-pointer"
-    >
-      <div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Border widths</div>
-      <span class="text-[10px] text-slate-500">{showBorderWidths ? "▲" : "▼"}</span>
-    </button>
-    {#if showBorderWidths}
+  <Section title="Border widths" bind:open={showBorderWidths}>
       <SliderRow
         label="Border scale" value={borderScale} min={0} max={4} step={0.25}
         help="Multiplier applied to all border widths. 0 hides all borders."
@@ -159,22 +141,12 @@
           </div>
         {/each}
       </div>
-    {/if}
-  </section>
+  </Section>
 
   <div class="h-px bg-black/6 dark:bg-white/6"></div>
 
   <!-- LINE STYLES -->
-  <section class="space-y-4">
-    <button
-      onclick={() => { showLineStyles = !showLineStyles; }}
-      aria-expanded={showLineStyles}
-      class="w-full flex items-center justify-between cursor-pointer"
-    >
-      <div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Line styles</div>
-      <span class="text-[10px] text-slate-500">{showLineStyles ? "▲" : "▼"}</span>
-    </button>
-    {#if showLineStyles}
+  <Section title="Line styles" spacing="space-y-4" bind:open={showLineStyles}>
       <div class="grid grid-cols-2 gap-3">
         {#each [
           { label: "Border", token: "--sf-border-style", default: "solid" },
@@ -212,22 +184,12 @@
         </div>
         <span class="text-[9px] font-mono text-slate-400 dark:text-slate-600">{(1 * borderScale).toFixed(1)}px · {borderStyle}</span>
       </div>
-    {/if}
-  </section>
+  </Section>
 
   <div class="h-px bg-black/6 dark:bg-white/6"></div>
 
   <!-- DIVIDERS -->
-  <section class="space-y-3">
-    <button
-      onclick={() => { showDividers = !showDividers; }}
-      aria-expanded={showDividers}
-      class="w-full flex items-center justify-between cursor-pointer"
-    >
-      <div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Dividers</div>
-      <span class="text-[10px] text-slate-500">{showDividers ? "▲" : "▼"}</span>
-    </button>
-    {#if showDividers}
+  <Section title="Dividers" bind:open={showDividers}>
       <div class="flex items-center gap-2">
         <div class="text-[10px] font-semibold text-slate-600 dark:text-slate-400 w-24 shrink-0">Color</div>
         <ColorInput
@@ -261,22 +223,12 @@
         currentRaw={overrides["--sf-divider-gap"]}
         onRawSet={(v) => onSet("--sf-divider-gap", v)}
       />
-    {/if}
-  </section>
+  </Section>
 
   <div class="h-px bg-black/6 dark:bg-white/6"></div>
 
   <!-- FOCUS RING -->
-  <section class="space-y-3">
-    <button
-      onclick={() => { showFocusRing = !showFocusRing; }}
-      aria-expanded={showFocusRing}
-      class="w-full flex items-center justify-between cursor-pointer"
-    >
-      <div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Focus ring</div>
-      <span class="text-[10px] text-slate-500">{showFocusRing ? "▲" : "▼"}</span>
-    </button>
-    {#if showFocusRing}
+  <Section title="Focus ring" bind:open={showFocusRing}>
       <SliderRow
         label="Ring width" value={focusWidth} min={0} max={6} step={0.5} unit="px"
         help="Thickness of the keyboard focus indicator"
@@ -311,8 +263,7 @@
           Focus preview
         </div>
       </div>
-    {/if}
-  </section>
+  </Section>
 
   <div class="h-px bg-black/6 dark:bg-white/6"></div>
 
@@ -383,16 +334,7 @@
   <div class="h-px bg-black/6 dark:bg-white/6"></div>
 
   <!-- GLOBAL MEDIA RADIUS -->
-  <section class="space-y-3">
-    <button
-      onclick={() => { showMediaRadius = !showMediaRadius; }}
-      aria-expanded={showMediaRadius}
-      class="w-full flex items-center justify-between cursor-pointer"
-    >
-      <div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Global media radius</div>
-      <span class="text-[10px] text-slate-500">{showMediaRadius ? "▲" : "▼"}</span>
-    </button>
-    {#if showMediaRadius}
+  <Section title="Global media radius" bind:open={showMediaRadius}>
       <p class="text-[9px] text-slate-400 dark:text-slate-600">
         --sf-media-radius — 0 by default (off). Rounds every &lt;img&gt;/&lt;figure&gt; globally via a
         zero-specificity :where() rule; .sf-bg-layer and component-level radii still win.
@@ -414,8 +356,7 @@
           style={`border-radius: ${mediaRadius}rem`}
         ></div>
       </div>
-    {/if}
-  </section>
+  </Section>
 
   <div class="h-px bg-black/6 dark:bg-white/6"></div>
 
diff --git a/configurator/src/components/panels/ColorsPanel.svelte b/configurator/src/components/panels/ColorsPanel.svelte
index aa964e009..feb4da4b1 100644
--- a/configurator/src/components/panels/ColorsPanel.svelte
+++ b/configurator/src/components/panels/ColorsPanel.svelte
@@ -7,7 +7,9 @@
   import OklchColorDesk from '../inputs/OklchColorDesk.svelte';
   import PowerKnobRow from '../inputs/PowerKnobRow.svelte';
   import SliderRow from '../inputs/SliderRow.svelte';
+  import RangeWithNumber from '../inputs/RangeWithNumber.svelte';
   import ColorInput from '../inputs/ColorInput.svelte';
+  import Section from '../inputs/Section.svelte';
 
   let { tokens, overrides, onSet, onReset, onBulkChange, onSelectDomain }: {
     tokens: SlashedToken[];
@@ -426,6 +428,25 @@
     onSet(light.name, newVal);
   }
 
+  // Brand keys that offer a "Copy to dark" action (snapshot the light source
+  // into the dark source — same effect as pasting the same colour into both).
+  const COPY_TO_DARK_KEYS = ["primary", "secondary", "tertiary", "action"];
+
+  // One-shot: copy the light source's current concrete oklch value into the
+  // dark source token and switch the row to manual. Not live-linked — a later
+  // edit to light leaves this copied dark value untouched (copy-paste, not a ref).
+  function copyLightToDark(colorKey: string, dark: ColorSource | undefined, light: ColorSource) {
+    if (!dark) return;
+    autoDarkSet = new Set([...autoDarkSet].filter(k => k !== colorKey));
+    const lv = sourceValue(light);
+    // Freeze a concrete snapshot. A plain oklch/hex/rgb literal is copied as-is
+    // (keeps the OKLCH authoring intact); only a value that references another
+    // token (var()) is resolved, so the copy can't keep tracking that
+    // dependency. Falls back to the literal if resolution isn't available.
+    const snapshot = lv.includes("var(") ? (resolveColorForTheme(lv, "light") || lv) : lv;
+    onSet(dark.name, snapshot);
+  }
+
   function toggleDarkMode(colorKey: string, dark: ColorSource | undefined, lightName: string) {
     const darkOverridden = !!(dark && (dark.name in overrides));
     const effectivelyAuto = autoDarkSet.has(colorKey) && !darkOverridden;
@@ -506,16 +527,7 @@
   <div class="h-px bg-black/6 dark:bg-white/6"></div>
 
   <!-- BRAND SOURCES -->
-  <section class="space-y-3">
-    <button
-      onclick={() => { showBrandSources = !showBrandSources; }}
-      aria-expanded={showBrandSources}
-      class="w-full flex items-center justify-between cursor-pointer"
-    >
-      <div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Brand color sources</div>
-      <span class="text-[10px] text-slate-500">{showBrandSources ? "▲" : "▼"}</span>
-    </button>
-    {#if showBrandSources}
+  <Section title="Brand color sources" bind:open={showBrandSources}>
     <p class="text-[10px] text-slate-400 dark:text-slate-600 leading-relaxed">
       OKLCH source values — all 200+ derived color steps are computed automatically. Tints (50–400) mix toward Base
       (the "Surface" color) and shades (600–950) mix toward Text (driven by Neutral) — so editing Base or Neutral below
@@ -529,14 +541,23 @@
           <div class="flex items-center justify-between">
             <div class="text-[9px] font-semibold text-slate-500 uppercase tracking-widest">{light.label}</div>
             {#if dark}
-              <button
-                onclick={() => toggleDarkMode(light.colorKey, dark, light.name)}
-                class={`text-[8px] px-1.5 py-0.5 rounded border transition-all cursor-pointer ${
-                  isAutoMode
-                    ? "border-indigo-500/40 bg-indigo-500/15 text-indigo-700 dark:text-indigo-300"
-                    : "border-black/10 dark:border-white/10 text-slate-500 hover:text-slate-700 dark:hover:text-slate-300"
-                }`}
-              >{isAutoMode ? "Auto dark" : "Manual dark"}</button>
+              <div class="flex items-center gap-1">
+                {#if COPY_TO_DARK_KEYS.includes(light.colorKey)}
+                  <button
+                    onclick={() => copyLightToDark(light.colorKey, dark, light)}
+                    title="Copy the light value into the dark source (snapshot)"
+                    class="text-[8px] px-1.5 py-0.5 rounded border border-black/10 dark:border-white/10 text-slate-500 hover:text-slate-700 dark:hover:text-slate-300 transition-all cursor-pointer"
+                  >Copy to dark</button>
+                {/if}
+                <button
+                  onclick={() => toggleDarkMode(light.colorKey, dark, light.name)}
+                  class={`text-[8px] px-1.5 py-0.5 rounded border transition-all cursor-pointer ${
+                    isAutoMode
+                      ? "border-indigo-500/40 bg-indigo-500/15 text-indigo-700 dark:text-indigo-300"
+                      : "border-black/10 dark:border-white/10 text-slate-500 hover:text-slate-700 dark:hover:text-slate-300"
+                  }`}
+                >{isAutoMode ? "Auto dark" : "Manual dark"}</button>
+              </div>
             {/if}
           </div>
           <OklchColorDesk
@@ -616,22 +637,12 @@
         </div>
       {/each}
     </div>
-    {/if}
-  </section>
+  </Section>
 
   <div class="h-px bg-black/6 dark:bg-white/6"></div>
 
   <!-- LUMLOCKER -->
-  <section class="space-y-3">
-    <button
-      onclick={() => { showLumlocker = !showLumlocker; }}
-      aria-expanded={showLumlocker}
-      class="w-full flex items-center justify-between cursor-pointer"
-    >
-      <div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">LumLocker</div>
-      <span class="text-[10px] text-slate-500">{showLumlocker ? "▲" : "▼"}</span>
-    </button>
-    {#if showLumlocker}
+  <Section title="LumLocker" bind:open={showLumlocker}>
       <p class="text-[10px] text-slate-400 dark:text-slate-600 leading-relaxed">
         Pins brand colors (primary, secondary, tertiary, action) to a fixed OKLCH
         lightness — useful for always-stable sections. Enable on canvas to preview.
@@ -674,22 +685,12 @@
             : "border-black/10 dark:border-white/10 text-slate-600 dark:text-slate-400 hover:bg-black/5 dark:hover:bg-white/5 hover:text-slate-800 dark:hover:text-slate-200"
         }`}
       >{lumlockerPreview.value ? "✓ LumLocker active on canvas — click to disable" : "Preview LumLocker on live canvas"}</button>
-    {/if}
-  </section>
+  </Section>
 
   <div class="h-px bg-black/6 dark:bg-white/6"></div>
 
   <!-- STATUS SOURCES -->
-  <section class="space-y-3">
-    <button
-      onclick={() => { showStatus = !showStatus; }}
-      aria-expanded={showStatus}
-      class="w-full flex items-center justify-between cursor-pointer"
-    >
-      <div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Status colors</div>
-      <span class="text-[10px] text-slate-500">{showStatus ? "▲" : "▼"}</span>
-    </button>
-    {#if showStatus}
+  <Section title="Status colors" bind:open={showStatus}>
       <p class="text-[10px] text-slate-400 dark:text-slate-600 leading-relaxed">
         Dark mode is auto-derived from each light source by default. Switch to
         Manual dark to set a bespoke dark value.
@@ -774,22 +775,12 @@
           </div>
         {/each}
       </div>
-    {/if}
-  </section>
+  </Section>
 
   <div class="h-px bg-black/6 dark:bg-white/6"></div>
 
   <!-- TEXT CONTRAST -->
-  <section class="space-y-4">
-    <button
-      onclick={() => { showTextContrast = !showTextContrast; }}
-      aria-expanded={showTextContrast}
-      class="w-full flex items-center justify-between cursor-pointer"
-    >
-      <div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Text contrast</div>
-      <span class="text-[10px] text-slate-500">{showTextContrast ? "▲" : "▼"}</span>
-    </button>
-    {#if showTextContrast}
+  <Section title="Text contrast" spacing="space-y-4" bind:open={showTextContrast}>
     <p class="text-[10px] text-slate-400 dark:text-slate-600 leading-relaxed">
       Controls whether text on brand-coloured surfaces is light or dark.
     </p>
@@ -835,22 +826,12 @@
         onChange={(name, val) => val === null ? onReset(name) : onSet(name, val)}
       />
     {/each}
-    {/if}
-  </section>
+  </Section>
 
   <div class="h-px bg-black/6 dark:bg-white/6"></div>
 
   <!-- SHADE CURVE -->
-  <section class="space-y-4">
-    <button
-      onclick={() => { showShadeCurve = !showShadeCurve; }}
-      aria-expanded={showShadeCurve}
-      class="w-full flex items-center justify-between cursor-pointer"
-    >
-      <div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Palette ramp</div>
-      <span class="text-[10px] text-slate-500">{showShadeCurve ? "▲" : "▼"}</span>
-    </button>
-    {#if showShadeCurve}
+  <Section title="Palette ramp" spacing="space-y-4" bind:open={showShadeCurve}>
     {@const _curvePrimLightSrc = overrides["--sf-color-primary-source-light"] ?? BRAND_SOURCES.find(s => s.name === "--sf-color-primary-source-light")?.default ?? "oklch(0.47 0.27 264)"}
     {@const _curvePrimDarkOv = overrides["--sf-color-primary-source-dark"]}
     {@const _curvePrimDarkSrc = _curvePrimDarkOv ?? (!autoDarkSet.has("primary") || _curvePrimDarkOv
@@ -965,22 +946,12 @@
         </div>
       {/each}
     </div>
-    {/if}
-  </section>
+  </Section>
 
   <div class="h-px bg-black/6 dark:bg-white/6"></div>
 
   <!-- GRADIENTS -->
-  <section class="space-y-3">
-    <button
-      onclick={() => { showGradients = !showGradients; }}
-      aria-expanded={showGradients}
-      class="w-full flex items-center justify-between cursor-pointer"
-    >
-      <div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Gradients</div>
-      <span class="text-[10px] text-slate-500">{showGradients ? "▲" : "▼"}</span>
-    </button>
-    {#if showGradients}
+  <Section title="Gradients" bind:open={showGradients}>
       <p class="text-[10px] text-slate-400 dark:text-slate-600 leading-relaxed">
         Auto-derived from your brand colors. Use the angle/direction and stop
         controls, or edit the raw value for full control.
@@ -1017,12 +988,12 @@
                 {:else if g.kind !== "dir"}
                   <div class="flex items-center gap-2">
                     <span class="text-[8px] text-slate-500 w-10 shrink-0">Angle</span>
-                    <input
-                      type="range" min="0" max="360" step="1" value={e.angle}
-                      oninput={(ev) => setGradientPart(g, "angle", parseInt((ev.target as HTMLInputElement).value))}
-                      class="flex-1 accent-indigo-500"
-                    />
-                    <span class="text-[9px] font-mono text-slate-600 dark:text-slate-400 w-9 text-right shrink-0">{e.angle}°</span>
+                    <div class="flex-1 min-w-0">
+                      <RangeWithNumber
+                        value={e.angle} min={0} max={360} step={1} unit="°"
+                        onChange={(v) => setGradientPart(g, "angle", v)}
+                      />
+                    </div>
                   </div>
                 {/if}
 
@@ -1062,22 +1033,12 @@
           {/each}
         </div>
       {/each}
-    {/if}
-  </section>
+  </Section>
 
   <div class="h-px bg-black/6 dark:bg-white/6"></div>
 
   <!-- COLOR SCHEME -->
-  <section class="space-y-3">
-    <button
-      onclick={() => { showColorScheme = !showColorScheme; }}
-      aria-expanded={showColorScheme}
-      class="w-full flex items-center justify-between cursor-pointer"
-    >
-      <div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Color scheme</div>
-      <span class="text-[10px] text-slate-500">{showColorScheme ? "▲" : "▼"}</span>
-    </button>
-    {#if showColorScheme}
+  <Section title="Color scheme" bind:open={showColorScheme}>
       <p class="text-[9px] text-slate-400 dark:text-slate-600 leading-relaxed">
         --sf-color-scheme — sets the CSS <span class="font-mono text-slate-600 dark:text-slate-400">color-scheme</span> property on the root, controlling browser UI (scrollbars, inputs) and default background.
       </p>
@@ -1094,22 +1055,12 @@
           >{label}</button>
         {/each}
       </div>
-    {/if}
-  </section>
+  </Section>
 
   <div class="h-px bg-black/6 dark:bg-white/6"></div>
 
   <!-- SEMANTIC OVERRIDES -->
-  <section class="space-y-3">
-    <button
-      onclick={() => { showSemanticOverrides = !showSemanticOverrides; }}
-      aria-expanded={showSemanticOverrides}
-      class="w-full flex items-center justify-between cursor-pointer"
-    >
-      <div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Semantic overrides</div>
-      <span class="text-[10px] text-slate-500">{showSemanticOverrides ? "▲" : "▼"}</span>
-    </button>
-    {#if showSemanticOverrides}
+  <Section title="Semantic overrides" bind:open={showSemanticOverrides}>
       <p class="text-[10px] text-slate-400 dark:text-slate-600 leading-relaxed">
         Direct color overrides for tokens the framework auto-derives. Use for edge cases.
       </p>
@@ -1129,8 +1080,7 @@
           </div>
         {/each}
       </div>
-    {/if}
-  </section>
+  </Section>
 
   <div class="rounded-lg bg-black/3 dark:bg-white/3 border border-black/6 dark:border-white/6 p-3">
     <p class="text-[10px] text-slate-500 leading-relaxed">
diff --git a/configurator/src/components/panels/ComponentsPanel.svelte b/configurator/src/components/panels/ComponentsPanel.svelte
index 76b807057..f81d97cc5 100644
--- a/configurator/src/components/panels/ComponentsPanel.svelte
+++ b/configurator/src/components/panels/ComponentsPanel.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
   import SliderRow from '../inputs/SliderRow.svelte';
+  import Section from '../inputs/Section.svelte';
   import { SPACE_SCALE, RADIUS_SCALE, BORDER_WIDTH_SCALE, SIZE_SCALE, type VarOption } from '../../lib/variableScales';
   import { themeState } from '../../lib/theme.svelte';
 
@@ -188,16 +189,7 @@
 <div class="p-4 space-y-5">
 
   <!-- BUTTON -->
-  <section class="space-y-3">
-    <button
-      onclick={() => { showButton = !showButton; }}
-      aria-expanded={showButton}
-      class="w-full flex items-center justify-between cursor-pointer"
-    >
-      <div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Button (.sf-btn)</div>
-      <span class="text-[10px] text-slate-500">{showButton ? "▲" : "▼"}</span>
-    </button>
-    {#if showButton}
+  <Section title="Button (.sf-btn)" bind:open={showButton}>
       <!-- Preview pickers — local state only, not overrides -->
       <div class="space-y-2">
         <div class="text-[9px] text-slate-500">Variant (preview only)</div>
@@ -397,22 +389,12 @@
           >Reset all button tokens</button>
         {/if}
       </div>
-    {/if}
-  </section>
+  </Section>
 
   <div class="h-px bg-black/6 dark:bg-white/6"></div>
 
   <!-- CARD -->
-  <section class="space-y-3">
-    <button
-      onclick={() => { showCard = !showCard; }}
-      aria-expanded={showCard}
-      class="w-full flex items-center justify-between cursor-pointer"
-    >
-      <div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Card (.sf-card)</div>
-      <span class="text-[10px] text-slate-500">{showCard ? "▲" : "▼"}</span>
-    </button>
-    {#if showCard}
+  <Section title="Card (.sf-card)" bind:open={showCard}>
       <div class="flex items-center gap-3">
         <label class="flex items-center gap-1.5 text-[9px] text-slate-500 cursor-pointer">
           <input type="checkbox" bind:checked={cardBordered} class="cursor-pointer" /> bordered
@@ -603,6 +585,5 @@
           </div>
         </div>
       </div>
-    {/if}
-  </section>
+  </Section>
 </div>
diff --git a/configurator/src/components/panels/EffectsPanel.svelte b/configurator/src/components/panels/EffectsPanel.svelte
index d9ca47272..27d190864 100644
--- a/configurator/src/components/panels/EffectsPanel.svelte
+++ b/configurator/src/components/panels/EffectsPanel.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
   import SliderRow from '../inputs/SliderRow.svelte';
   import ColorInput from '../inputs/ColorInput.svelte';
+  import Section from '../inputs/Section.svelte';
 
   let { overrides, onSet, onReset }: {
     overrides: Record<string, string>;
@@ -8,13 +9,6 @@
     onReset: (name: string) => void;
   } = $props();
 
-  const SCRIM_DIRECTIONS = [
-    { label: "To top",    value: "to top" },
-    { label: "To bottom", value: "to bottom" },
-    { label: "To left",   value: "to left" },
-    { label: "To right",  value: "to right" },
-  ];
-
   const TEXT_SHADOW_TOKENS = [
     { label: "Extra small", token: "--sf-text-shadow-xs", default: "0 0.5px 1px oklch(…)" },
     { label: "Small",       token: "--sf-text-shadow-s",  default: "0 1px 2px oklch(…)" },
@@ -34,18 +28,13 @@
   let blur            = $derived(parseNum(overrides["--sf-blur"], 12, "px"));
   let opacityMuted    = $derived(parseNum(overrides["--sf-opacity-muted"], 0.5));
   let opacityDisabled = $derived(parseNum(overrides["--sf-opacity-disabled"], 0.45));
-  let scrimDir        = $derived(overrides["--sf-scrim-direction"] ?? "to top");
-  let scrimColor      = $derived(overrides["--sf-scrim-color"] ?? "");
-  let scrollShadowSize = $derived(parseNum(overrides["--sf-scroll-shadow-size"]?.replace("rem",""), 2));
   let pendingOpacity  = $derived(parseNum(overrides["--sf-state-pending-opacity"], 0.7));
   let scrollbarThumb  = $derived(overrides["--sf-scrollbar-thumb"] ?? "");
   let scrollbarTrack  = $derived(overrides["--sf-scrollbar-track"] ?? "");
 
   let showBlur = $state(false);
   let showOpacity = $state(false);
-  let showScrim = $state(false);
   let showScrollbar = $state(false);
-  let showScrollShadow = $state(false);
   let showTextShadow = $state(false);
   let showDropShadow = $state(false);
 </script>
@@ -53,16 +42,7 @@
 <div class="p-4 space-y-6">
 
   <!-- BLUR -->
-  <section class="space-y-3">
-    <button
-      onclick={() => { showBlur = !showBlur; }}
-      aria-expanded={showBlur}
-      class="w-full flex items-center justify-between cursor-pointer"
-    >
-      <div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Blur</div>
-      <span class="text-[10px] text-slate-500">{showBlur ? "▲" : "▼"}</span>
-    </button>
-    {#if showBlur}
+  <Section title="Blur" bind:open={showBlur}>
       <SliderRow
         label="Blur radius" value={blur} min={0} max={48} step={1} unit="px"
         help="--sf-blur — used for frosted glass, modals, tooltips"
@@ -84,22 +64,12 @@
           <span class="text-[9px] font-mono text-slate-900/70 dark:text-white/70">{blur}px</span>
         </div>
       </div>
-    {/if}
-  </section>
+  </Section>
 
   <div class="h-px bg-black/6 dark:bg-white/6"></div>
 
   <!-- OPACITY -->
-  <section class="space-y-4">
-    <button
-      onclick={() => { showOpacity = !showOpacity; }}
-      aria-expanded={showOpacity}
-      class="w-full flex items-center justify-between cursor-pointer"
-    >
-      <div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Opacity</div>
-      <span class="text-[10px] text-slate-500">{showOpacity ? "▲" : "▼"}</span>
-    </button>
-    {#if showOpacity}
+  <Section title="Opacity" spacing="space-y-4" bind:open={showOpacity}>
       <SliderRow
         label="Muted opacity" value={opacityMuted} min={0} max={1} step={0.05}
         help="--sf-opacity-muted — secondary text, icons, and placeholder content"
@@ -135,86 +105,12 @@
           </div>
         {/each}
       </div>
-    {/if}
-  </section>
-
-  <div class="h-px bg-black/6 dark:bg-white/6"></div>
-
-  <!-- SCRIM -->
-  <section class="space-y-4">
-    <button
-      onclick={() => { showScrim = !showScrim; }}
-      aria-expanded={showScrim}
-      class="w-full flex items-center justify-between cursor-pointer"
-    >
-      <div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Scrim overlay</div>
-      <span class="text-[10px] text-slate-500">{showScrim ? "▲" : "▼"}</span>
-    </button>
-    {#if showScrim}
-      <p class="text-[10px] text-slate-400 dark:text-slate-600 leading-relaxed">
-        Gradient overlay for hero images and media content. Used by the <code class="text-slate-600 dark:text-slate-400">.sf-scrim</code> macro.
-      </p>
-
-      <!-- Scrim color -->
-      <div class="flex items-center gap-2">
-        <div class="text-[10px] font-semibold text-slate-600 dark:text-slate-400 w-16 shrink-0">Color</div>
-        <ColorInput
-          token="--sf-scrim-color"
-          value={scrimColor}
-          placeholder="default (base color)"
-          isOverridden={"--sf-scrim-color" in overrides}
-          onSet={(v) => onSet("--sf-scrim-color", v)}
-          onReset={() => onReset("--sf-scrim-color")}
-        />
-      </div>
-
-      <div>
-        <div class="text-[10px] font-semibold text-slate-600 dark:text-slate-400 mb-2">Direction</div>
-        <div class="grid grid-cols-2 gap-1">
-          {#each SCRIM_DIRECTIONS as d (d.value)}
-            <button
-              onclick={() => d.value === "to top" ? onReset("--sf-scrim-direction") : onSet("--sf-scrim-direction", d.value)}
-              class={`py-2 px-3 rounded-lg text-[10px] border transition-all cursor-pointer text-left ${
-                scrimDir === d.value
-                  ? "bg-indigo-500/15 border-indigo-500/40 text-indigo-800 dark:text-indigo-200"
-                  : "border-black/8 dark:border-white/8 text-slate-600 dark:text-slate-400 hover:bg-black/5 dark:hover:bg-white/5 hover:text-slate-800 dark:hover:text-slate-200"
-              }`}
-            >
-              {d.label}
-            </button>
-          {/each}
-        </div>
-      </div>
-
-      <!-- Scrim preview -->
-      <div class="rounded-xl overflow-hidden border border-black/8 dark:border-white/8" style="height: 80px">
-        <div
-          class="w-full h-full relative"
-          style="background: linear-gradient(135deg, oklch(0.3 0.15 264), oklch(0.25 0.1 300))"
-        >
-          <div
-            class="absolute inset-0"
-            style={`background: linear-gradient(${scrimDir}, ${scrimColor || "oklch(0 0 0 / 0.6)"}, transparent)`}
-          ></div>
-          <div class="absolute bottom-2 left-3 text-[10px] text-white/80 font-medium">Scrim preview</div>
-        </div>
-      </div>
-    {/if}
-  </section>
+  </Section>
 
   <div class="h-px bg-black/6 dark:bg-white/6"></div>
 
   <!-- SCROLLBAR -->
-  <section class="space-y-3">
-    <button
-      onclick={() => { showScrollbar = !showScrollbar; }}
-      aria-expanded={showScrollbar}
-      class="w-full flex items-center justify-between cursor-pointer"
-    >
-      <div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Scrollbar</div>
-      <span class="text-[10px] text-slate-500">{showScrollbar ? "▲" : "▼"}</span>
-    </button>
-    {#if showScrollbar}
+  <Section title="Scrollbar" bind:open={showScrollbar}>
       {#each [
         { label: "Thumb color", token: "--sf-scrollbar-thumb", val: scrollbarThumb },
         { label: "Track color", token: "--sf-scrollbar-track", val: scrollbarTrack },
@@ -238,45 +134,12 @@
         </div>
         <span class="text-[9px] text-slate-400 dark:text-slate-600">Scrollbar preview</span>
       </div>
-    {/if}
-  </section>
-
-  <div class="h-px bg-black/6 dark:bg-white/6"></div>
-
-  <!-- SCROLL SHADOW -->
-  <section class="space-y-3">
-    <button
-      onclick={() => { showScrollShadow = !showScrollShadow; }}
-      aria-expanded={showScrollShadow}
-      class="w-full flex items-center justify-between cursor-pointer"
-    >
-      <div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Scroll shadow</div>
-      <span class="text-[10px] text-slate-500">{showScrollShadow ? "▲" : "▼"}</span>
-    </button>
-    {#if showScrollShadow}
-      <SliderRow
-        label="Shadow size" value={scrollShadowSize} min={0} max={6} step={0.25} unit="rem"
-        help="--sf-scroll-shadow-size — gradient edge mask on .sf-scroll-shadow elements"
-        overridden={"--sf-scroll-shadow-size" in overrides}
-        onChange={(v) => onSet("--sf-scroll-shadow-size", `${v}rem`)}
-        onReset={() => onReset("--sf-scroll-shadow-size")}
-      />
-    {/if}
-  </section>
+  </Section>
 
   <div class="h-px bg-black/6 dark:bg-white/6"></div>
 
   <!-- TEXT SHADOW PRESETS -->
-  <section class="space-y-3">
-    <button
-      onclick={() => { showTextShadow = !showTextShadow; }}
-      aria-expanded={showTextShadow}
-      class="w-full flex items-center justify-between cursor-pointer"
-    >
-      <div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Text shadow</div>
-      <span class="text-[10px] text-slate-500">{showTextShadow ? "▲" : "▼"}</span>
-    </button>
-    {#if showTextShadow}
+  <Section title="Text shadow" bind:open={showTextShadow}>
       <p class="text-[10px] text-slate-400 dark:text-slate-600 leading-relaxed">
         Controls text legibility over images. Applied via <code class="text-slate-600 dark:text-slate-400">text-shadow: var(--sf-text-shadow-m)</code>.
         Edit each token directly — use <code class="text-slate-600 dark:text-slate-400">none</code> to disable.
@@ -301,22 +164,12 @@
           </div>
         {/each}
       </div>
-    {/if}
-  </section>
+  </Section>
 
   <div class="h-px bg-black/6 dark:bg-white/6"></div>
 
   <!-- DROP SHADOW PRESETS -->
-  <section class="space-y-3">
-    <button
-      onclick={() => { showDropShadow = !showDropShadow; }}
-      aria-expanded={showDropShadow}
-      class="w-full flex items-center justify-between cursor-pointer"
-    >
-      <div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Drop shadow</div>
-      <span class="text-[10px] text-slate-500">{showDropShadow ? "▲" : "▼"}</span>
-    </button>
-    {#if showDropShadow}
+  <Section title="Drop shadow" bind:open={showDropShadow}>
       <p class="text-[10px] text-slate-400 dark:text-slate-600 leading-relaxed">
         <code class="text-slate-600 dark:text-slate-400">filter: drop-shadow(…)</code> — unlike box-shadow, follows the
         element's actual alpha shape (SVG icons, PNG cutouts, transparent logos). Edit each token directly —
@@ -360,6 +213,5 @@
           </div>
         {/each}
       </div>
-    {/if}
-  </section>
+  </Section>
 </div>
diff --git a/configurator/src/components/panels/LayoutPanel.svelte b/configurator/src/components/panels/LayoutPanel.svelte
index 94cfd1a04..c533c31e7 100644
--- a/configurator/src/components/panels/LayoutPanel.svelte
+++ b/configurator/src/components/panels/LayoutPanel.svelte
@@ -2,6 +2,9 @@
   import type { SlashedToken } from '../../types';
   import SliderRow from '../inputs/SliderRow.svelte';
   import ColorInput from '../inputs/ColorInput.svelte';
+  import AspectRatioInput from '../inputs/AspectRatioInput.svelte';
+  import RawTokenRow from '../inputs/RawTokenRow.svelte';
+  import Section from '../inputs/Section.svelte';
   import { themeState } from '../../lib/theme.svelte';
   import { SPACE_SCALE, CONTAINER_SCALE } from '../../lib/variableScales';
 
@@ -89,16 +92,7 @@
 <div class="p-4 space-y-6">
 
   <!-- CONTAINERS -->
-  <section class="space-y-4">
-    <button
-      onclick={() => { showContainerWidths = !showContainerWidths; }}
-      aria-expanded={showContainerWidths}
-      class="w-full flex items-center justify-between cursor-pointer"
-    >
-      <div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Container widths</div>
-      <span class="text-[10px] text-slate-500">{showContainerWidths ? "▲" : "▼"}</span>
-    </button>
-    {#if showContainerWidths}
+  <Section title="Container widths" spacing="space-y-4" bind:open={showContainerWidths}>
       <!-- Compact pairs -->
       <div class="grid grid-cols-2 gap-3">
         <div>
@@ -159,22 +153,12 @@
           </div>
         {/each}
       </div>
-    {/if}
-  </section>
+  </Section>
 
   <div class="h-px bg-black/6 dark:bg-white/6"></div>
 
   <!-- CENTER WRAPPER -->
-  <section class="space-y-3">
-    <button
-      onclick={() => { showCenterWrapper = !showCenterWrapper; }}
-      aria-expanded={showCenterWrapper}
-      class="w-full flex items-center justify-between cursor-pointer"
-    >
-      <div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Center wrapper</div>
-      <span class="text-[10px] text-slate-500">{showCenterWrapper ? "▲" : "▼"}</span>
-    </button>
-    {#if showCenterWrapper}
+  <Section title="Center wrapper" bind:open={showCenterWrapper}>
       <SliderRow
         label="Max width" value={centerMax} min={30} max={160} step={1} unit="rem"
         help="--sf-center-max — max-width of the .sf-center centering wrapper"
@@ -197,22 +181,12 @@
         currentRaw={overrides["--sf-center-gutter"]}
         onRawSet={(v) => onSet("--sf-center-gutter", v)}
       />
-    {/if}
-  </section>
+  </Section>
 
   <div class="h-px bg-black/6 dark:bg-white/6"></div>
 
   <!-- AUTO GRID -->
-  <section class="space-y-4">
-    <button
-      onclick={() => { showAutoGrid = !showAutoGrid; }}
-      aria-expanded={showAutoGrid}
-      class="w-full flex items-center justify-between cursor-pointer"
-    >
-      <div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Auto grid</div>
-      <span class="text-[10px] text-slate-500">{showAutoGrid ? "▲" : "▼"}</span>
-    </button>
-    {#if showAutoGrid}
+  <Section title="Auto grid" spacing="space-y-4" bind:open={showAutoGrid}>
       <!-- step 0.0625rem (1px) intentionally matches the gap-token sliders in
            SpacingPanel (--sf-gap / --sf-content-gap / --sf-gutter), which
            --sf-grid-gap defaults to — finer than the size controls elsewhere
@@ -268,22 +242,12 @@
           {/each}
         </div>
       </div>
-    {/if}
-  </section>
+  </Section>
 
   <div class="h-px bg-black/6 dark:bg-white/6"></div>
 
   <!-- HEADER -->
-  <section class="space-y-4">
-    <button
-      onclick={() => { showHeaderHeight = !showHeaderHeight; }}
-      aria-expanded={showHeaderHeight}
-      class="w-full flex items-center justify-between cursor-pointer"
-    >
-      <div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Header height</div>
-      <span class="text-[10px] text-slate-500">{showHeaderHeight ? "▲" : "▼"}</span>
-    </button>
-    {#if showHeaderHeight}
+  <Section title="Header height" spacing="space-y-4" bind:open={showHeaderHeight}>
       <div class="grid grid-cols-2 gap-3">
         <div>
           <div class="text-[9px] text-slate-400 dark:text-slate-600 mb-1">Mobile</div>
@@ -318,22 +282,12 @@
         </div>
         <div class="p-2 text-[9px] text-slate-400 dark:text-slate-600 font-mono">{headerMobile}rem mobile · {headerDesktop}rem desktop</div>
       </div>
-    {/if}
-  </section>
+  </Section>
 
   <div class="h-px bg-black/6 dark:bg-white/6"></div>
 
   <!-- STICKY OFFSETS -->
-  <section class="space-y-3">
-    <button
-      onclick={() => { showStickyOffset = !showStickyOffset; }}
-      aria-expanded={showStickyOffset}
-      class="w-full flex items-center justify-between cursor-pointer"
-    >
-      <div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Sticky offset</div>
-      <span class="text-[10px] text-slate-500">{showStickyOffset ? "▲" : "▼"}</span>
-    </button>
-    {#if showStickyOffset}
+  <Section title="Sticky offset" bind:open={showStickyOffset}>
       <p class="text-[9px] text-slate-400 dark:text-slate-600">Offsets position:sticky elements below a fixed header. Defaults to header heights.</p>
       <div class="grid grid-cols-2 gap-3">
         <div>
@@ -361,22 +315,12 @@
           />
         </div>
       </div>
-    {/if}
-  </section>
+  </Section>
 
   <div class="h-px bg-black/6 dark:bg-white/6"></div>
 
   <!-- SIDEBAR -->
-  <section class="space-y-4">
-    <button
-      onclick={() => { showSidebar = !showSidebar; }}
-      aria-expanded={showSidebar}
-      class="w-full flex items-center justify-between cursor-pointer"
-    >
-      <div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Sidebar</div>
-      <span class="text-[10px] text-slate-500">{showSidebar ? "▲" : "▼"}</span>
-    </button>
-    {#if showSidebar}
+  <Section title="Sidebar" spacing="space-y-4" bind:open={showSidebar}>
       <SliderRow
         label="Sidebar width" value={sidebarWidth} min={10} max={32} step={0.5} unit="rem"
         help="--sf-sidebar-width — default sidebar / drawer width"
@@ -393,8 +337,7 @@
         </div>
         <div class="flex-1 bg-black/4 dark:bg-white/4 rounded"></div>
       </div>
-    {/if}
-  </section>
+  </Section>
 
   <div class="h-px bg-black/6 dark:bg-white/6"></div>
 
@@ -511,21 +454,19 @@
           />
           <div class="flex items-center gap-2">
             <span class="text-[10px] font-semibold text-slate-600 dark:text-slate-400 w-20 shrink-0">Rule style</span>
-            <select
-              value={overrides["--sf-equal-rule-style"] ?? "solid"}
-              onchange={(e) => {
-                const v = (e.target as HTMLSelectElement).value;
-                v === "solid" ? onReset("--sf-equal-rule-style") : onSet("--sf-equal-rule-style", v);
-              }}
-              class="flex-1 bg-black/5 dark:bg-white/5 border border-black/10 dark:border-white/10 rounded px-1.5 py-1 text-[9px] font-mono text-slate-700 dark:text-slate-300 focus:outline-none focus:border-indigo-500 cursor-pointer"
-            >
+            <div class="flex-1 grid grid-cols-3 gap-1">
               {#each COLUMN_RULE_STYLES as s (s)}
-                <option value={s} style={`background:${optionBg};`}>{s}</option>
+                {@const cur = overrides["--sf-equal-rule-style"] ?? "solid"}
+                <button
+                  onclick={() => s === "solid" ? onReset("--sf-equal-rule-style") : onSet("--sf-equal-rule-style", s)}
+                  class={`py-1 rounded-lg text-[9px] border transition-all cursor-pointer ${
+                    cur === s
+                      ? "bg-indigo-500/15 border-indigo-500/40 text-indigo-800 dark:text-indigo-200"
+                      : "border-black/8 dark:border-white/8 text-slate-600 dark:text-slate-400 hover:bg-black/5 dark:hover:bg-white/5 hover:text-slate-800 dark:hover:text-slate-200"
+                  }`}
+                >{s}</button>
               {/each}
-            </select>
-            {#if "--sf-equal-rule-style" in overrides}
-              <button onclick={() => onReset("--sf-equal-rule-style")} class="text-[8px] text-slate-500 hover:text-rose-600 dark:hover:text-rose-400 cursor-pointer shrink-0">reset</button>
-            {/if}
+            </div>
           </div>
           <div class="flex items-center gap-2">
             <span class="text-[10px] font-semibold text-slate-600 dark:text-slate-400 w-20 shrink-0">Rule color</span>
@@ -556,18 +497,11 @@
         <section class="space-y-2">
           <div class="text-[9px] font-semibold text-slate-500 uppercase tracking-widest">Frame ratio</div>
           <p class="text-[9px] text-slate-400 dark:text-slate-600">--sf-frame-ratio — aspect ratio for .sf-frame</p>
-          <div class="grid grid-cols-5 gap-1">
-            {#each FRAME_PRESETS as r (r)}
-              <button
-                onclick={() => r === "16 / 9" ? onReset("--sf-frame-ratio") : onSet("--sf-frame-ratio", r)}
-                class={`py-1 rounded-lg text-[9px] border transition-all cursor-pointer font-mono ${
-                  frameRatio.replace(/\s/g, "") === r.replace(/\s/g, "")
-                    ? "bg-indigo-500/15 border-indigo-500/40 text-indigo-800 dark:text-indigo-200"
-                    : "border-black/8 dark:border-white/8 text-slate-600 dark:text-slate-400 hover:bg-black/5 dark:hover:bg-white/5 hover:text-slate-800 dark:hover:text-slate-200"
-                }`}
-              >{r}</button>
-            {/each}
-          </div>
+          <AspectRatioInput
+            token="--sf-frame-ratio" value={frameRatio} defaultValue="16 / 9"
+            presets={FRAME_PRESETS} columns={5} dense
+            {onSet} {onReset}
+          />
         </section>
 
         <!-- Reel -->
@@ -690,22 +624,13 @@
           { label: "Cinema",   token: "--sf-ratio-cinema",   def: "21 / 9"  },
           { label: "Golden",   token: "--sf-ratio-golden",   def: "1.618 / 1" },
         ] as r (r.token)}
-          <div class="flex items-center gap-2">
-            <span class="text-[10px] font-semibold text-slate-600 dark:text-slate-400 w-16 shrink-0">{r.label}</span>
-            <input
-              type="text"
-              value={overrides[r.token] ?? ""}
-              placeholder={r.def}
-              oninput={(e) => {
-                const v = (e.target as HTMLInputElement).value.trim();
-                v ? onSet(r.token, v) : onReset(r.token);
-              }}
-              class="flex-1 min-w-0 bg-black/5 dark:bg-white/5 border border-black/10 dark:border-white/10 rounded px-1.5 py-1 text-[9px] font-mono text-slate-700 dark:text-slate-300 placeholder:text-slate-600 focus:outline-none focus:border-indigo-500"
-            />
-            {#if r.token in overrides}
-              <button onclick={() => onReset(r.token)} class="text-[8px] text-slate-500 hover:text-rose-600 dark:hover:text-rose-400 cursor-pointer shrink-0">reset</button>
-            {/if}
-          </div>
+          <RawTokenRow
+            label={r.label} labelWidth="w-16"
+            value={overrides[r.token] ?? ""} placeholder={r.def}
+            overridden={r.token in overrides}
+            onSet={(v) => onSet(r.token, v)}
+            onReset={() => onReset(r.token)}
+          />
         {/each}
       </div>
     {/if}
diff --git a/configurator/src/components/panels/MacrosPanel.svelte b/configurator/src/components/panels/MacrosPanel.svelte
index 18d3f6416..aa7134fa3 100644
--- a/configurator/src/components/panels/MacrosPanel.svelte
+++ b/configurator/src/components/panels/MacrosPanel.svelte
@@ -1,5 +1,9 @@
 <script lang="ts">
   import SliderRow from '../inputs/SliderRow.svelte';
+  import ColorInput from '../inputs/ColorInput.svelte';
+  import AspectRatioInput from '../inputs/AspectRatioInput.svelte';
+  import RawTokenRow from '../inputs/RawTokenRow.svelte';
+  import Section from '../inputs/Section.svelte';
   import { SPACE_SCALE, RADIUS_SCALE } from '../../lib/variableScales';
 
   let { overrides, onSet, onReset }: {
@@ -115,16 +119,7 @@
   </p>
 
   <!-- FLOW -->
-  <section class="space-y-3">
-    <button
-      onclick={() => { showFlow = !showFlow; }}
-      aria-expanded={showFlow}
-      class="w-full flex items-center justify-between cursor-pointer"
-    >
-      <div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Flow rhythm</div>
-      <span class="text-[10px] text-slate-500">{showFlow ? "▲" : "▼"}</span>
-    </button>
-    {#if showFlow}
+  <Section title="Flow rhythm" bind:open={showFlow}>
       <SliderRow
         label="Flow space" value={flowSpace} min={0} max={4} step={0.0625} unit="rem"
         help="--sf-flow-space — vertical gap between adjacent children of .sf-flow"
@@ -141,22 +136,12 @@
           <div class="h-2.5 rounded bg-indigo-500/40" style={`width:${90 - i * 12}%`}></div>
         {/each}
       </div>
-    {/if}
-  </section>
+  </Section>
 
   <div class="h-px bg-black/6 dark:bg-white/6"></div>
 
   <!-- LINE CLAMP -->
-  <section class="space-y-3">
-    <button
-      onclick={() => { showLineClamp = !showLineClamp; }}
-      aria-expanded={showLineClamp}
-      class="w-full flex items-center justify-between cursor-pointer"
-    >
-      <div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Line clamp</div>
-      <span class="text-[10px] text-slate-500">{showLineClamp ? "▲" : "▼"}</span>
-    </button>
-    {#if showLineClamp}
+  <Section title="Line clamp" bind:open={showLineClamp}>
       <SliderRow
         label="Default lines" value={lineClamp} min={1} max={8} step={1}
         help="--sf-line-clamp — default line count for .sf-line-clamp (override per element)"
@@ -175,57 +160,24 @@
           Extra filler text keeps the block taller than the clamp at every setting.
         </p>
       </div>
-    {/if}
-  </section>
+  </Section>
 
   <div class="h-px bg-black/6 dark:bg-white/6"></div>
 
   <!-- ASPECT -->
-  <section class="space-y-3">
-    <button
-      onclick={() => { showAspect = !showAspect; }}
-      aria-expanded={showAspect}
-      class="w-full flex items-center justify-between cursor-pointer"
-    >
-      <div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Aspect ratio</div>
-      <span class="text-[10px] text-slate-500">{showAspect ? "▲" : "▼"}</span>
-    </button>
-    {#if showAspect}
+  <Section title="Aspect ratio" bind:open={showAspect}>
       <p class="text-[9px] text-slate-400 dark:text-slate-600">--sf-aspect — default ratio for .sf-aspect / .sf-frame</p>
-      <div class="grid grid-cols-3 gap-1.5">
-        {#each ASPECT_PRESETS as p (p.value)}
-          <button
-            onclick={() => p.value === "16 / 9" ? onReset("--sf-aspect") : onSet("--sf-aspect", p.value)}
-            class={`py-1.5 rounded-lg text-[10px] border transition-all cursor-pointer font-mono ${
-              aspectVal.replace(/\s/g, "") === p.value.replace(/\s/g, "")
-                ? "bg-indigo-500/15 border-indigo-500/40 text-indigo-800 dark:text-indigo-200"
-                : "border-black/8 dark:border-white/8 text-slate-600 dark:text-slate-400 hover:bg-black/5 dark:hover:bg-white/5 hover:text-slate-800 dark:hover:text-slate-200"
-            }`}
-          >{p.label}</button>
-        {/each}
-      </div>
-      <div class="bg-black/4 dark:bg-white/4 rounded-xl border border-black/8 dark:border-white/8 p-3 flex justify-center">
-        <div
-          class="bg-indigo-500/30 border border-indigo-500/30 rounded-lg flex items-center justify-center text-[9px] font-mono text-indigo-800 dark:text-indigo-200"
-          style={`aspect-ratio:${aspectVal};max-height:120px;max-width:100%;width:auto;height:120px`}
-        >{aspectVal}</div>
-      </div>
-    {/if}
-  </section>
+      <AspectRatioInput
+        token="--sf-aspect" value={aspectVal} defaultValue="16 / 9"
+        presets={ASPECT_PRESETS} columns={3} showPreview
+        {onSet} {onReset}
+      />
+  </Section>
 
   <div class="h-px bg-black/6 dark:bg-white/6"></div>
 
   <!-- SCROLL SHADOW -->
-  <section class="space-y-3">
-    <button
-      onclick={() => { showScrollShadow = !showScrollShadow; }}
-      aria-expanded={showScrollShadow}
-      class="w-full flex items-center justify-between cursor-pointer"
-    >
-      <div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Scroll shadow</div>
-      <span class="text-[10px] text-slate-500">{showScrollShadow ? "▲" : "▼"}</span>
-    </button>
-    {#if showScrollShadow}
+  <Section title="Scroll shadow" bind:open={showScrollShadow}>
       <SliderRow
         label="Fade size" value={scrollSize} min={0} max={6} step={0.25} unit="rem"
         help="--sf-scroll-shadow-size — size of the edge fade mask on .sf-scroll-shadow / .sf-overflow-fade"
@@ -239,38 +191,25 @@
           style={`mask:linear-gradient(to right, transparent, #000 ${scrollSize}rem, #000 calc(100% - ${scrollSize}rem), transparent)`}
         ></div>
       </div>
-    {/if}
-  </section>
+  </Section>
 
   <div class="h-px bg-black/6 dark:bg-white/6"></div>
 
   <!-- SCRIM -->
-  <section class="space-y-3">
-    <button
-      onclick={() => { showScrim = !showScrim; }}
-      aria-expanded={showScrim}
-      class="w-full flex items-center justify-between cursor-pointer"
-    >
-      <div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Scrim overlay</div>
-      <span class="text-[10px] text-slate-500">{showScrim ? "▲" : "▼"}</span>
-    </button>
-    {#if showScrim}
+  <Section title="Scrim overlay" bind:open={showScrim}>
       <p class="text-[9px] text-slate-400 dark:text-slate-600">--sf-scrim-color / --sf-scrim-direction — darkening gradient for .sf-scrim</p>
       <div class="flex items-center gap-2">
         <div class="text-[10px] font-semibold text-slate-600 dark:text-slate-400 w-20 shrink-0">Color</div>
-        <input
-          type="text"
-          value={overrides["--sf-scrim-color"] ?? ""}
-          placeholder="oklch(0 0 0 / 0.55)"
-          oninput={(e) => {
-            const v = (e.target as HTMLInputElement).value.trim();
-            v ? onSet("--sf-scrim-color", v) : onReset("--sf-scrim-color");
-          }}
-          class="flex-1 min-w-0 bg-black/5 dark:bg-white/5 border border-black/10 dark:border-white/10 rounded px-1.5 py-1 text-[9px] font-mono text-slate-700 dark:text-slate-300 placeholder:text-slate-600 focus:outline-none focus:border-indigo-500"
-        />
-        {#if "--sf-scrim-color" in overrides}
-          <button onclick={() => onReset("--sf-scrim-color")} class="text-[8px] text-slate-500 hover:text-rose-600 dark:hover:text-rose-400 cursor-pointer shrink-0">reset</button>
-        {/if}
+        <div class="flex-1 min-w-0">
+          <ColorInput
+            token="--sf-scrim-color"
+            value={overrides["--sf-scrim-color"] ?? ""}
+            placeholder="oklch(0 0 0 / 0.55)"
+            isOverridden={"--sf-scrim-color" in overrides}
+            onSet={(v) => onSet("--sf-scrim-color", v)}
+            onReset={() => onReset("--sf-scrim-color")}
+          />
+        </div>
       </div>
       <div>
         <div class="text-[10px] font-semibold text-slate-600 dark:text-slate-400 mb-1.5">Direction</div>
@@ -292,38 +231,20 @@
         <div class="absolute inset-0" style={`background:linear-gradient(${scrimDir}, ${scrimColor}, transparent)`}></div>
         <span class="relative text-[11px] font-bold text-white">Caption over scrim</span>
       </div>
-      <div class="flex items-center gap-2">
-        <div class="text-[10px] font-semibold text-slate-600 dark:text-slate-400 w-20 shrink-0">Text shadow</div>
-        <input
-          type="text"
-          value={overrides["--sf-scrim-text-shadow"] ?? ""}
-          placeholder="0 1px 3px oklch(0 0 0 / 0.6)"
-          oninput={(e) => {
-            const v = (e.target as HTMLInputElement).value.trim();
-            v ? onSet("--sf-scrim-text-shadow", v) : onReset("--sf-scrim-text-shadow");
-          }}
-          class="flex-1 min-w-0 bg-black/5 dark:bg-white/5 border border-black/10 dark:border-white/10 rounded px-1.5 py-1 text-[9px] font-mono text-slate-700 dark:text-slate-300 placeholder:text-slate-600 focus:outline-none focus:border-indigo-500"
-        />
-        {#if "--sf-scrim-text-shadow" in overrides}
-          <button onclick={() => onReset("--sf-scrim-text-shadow")} class="text-[8px] text-slate-500 hover:text-rose-600 dark:hover:text-rose-400 cursor-pointer shrink-0">reset</button>
-        {/if}
-      </div>
-    {/if}
-  </section>
+      <RawTokenRow
+        label="Text shadow"
+        value={overrides["--sf-scrim-text-shadow"] ?? ""}
+        placeholder="0 1px 3px oklch(0 0 0 / 0.6)"
+        overridden={"--sf-scrim-text-shadow" in overrides}
+        onSet={(v) => onSet("--sf-scrim-text-shadow", v)}
+        onReset={() => onReset("--sf-scrim-text-shadow")}
+      />
+  </Section>
 
   <div class="h-px bg-black/6 dark:bg-white/6"></div>
 
   <!-- PROSE -->
-  <section class="space-y-3">
-    <button
-      onclick={() => { showProse = !showProse; }}
-      aria-expanded={showProse}
-      class="w-full flex items-center justify-between cursor-pointer"
-    >
-      <div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Prose rhythm</div>
-      <span class="text-[10px] text-slate-500">{showProse ? "▲" : "▼"}</span>
-    </button>
-    {#if showProse}
+  <Section title="Prose rhythm" bind:open={showProse}>
       <p class="text-[9px] text-slate-400 dark:text-slate-600">Spacing tokens for .sf-prose. Defaults track the space scale; sliders write rem overrides.</p>
       <div class="space-y-2">
         {#each PROSE_SPACE as t (t.token)}
@@ -352,35 +273,22 @@
         />
         <div class="flex items-center gap-2 pt-1">
           <div class="text-[10px] font-semibold text-slate-600 dark:text-slate-400 w-20 shrink-0">Marker color</div>
-          <input
-            type="text"
-            value={overrides["--sf-prose-marker-color"] ?? ""}
-            placeholder="var(--sf-color-primary)"
-            oninput={(e) => {
-              const v = (e.target as HTMLInputElement).value.trim();
-              v ? onSet("--sf-prose-marker-color", v) : onReset("--sf-prose-marker-color");
-            }}
-            class="flex-1 min-w-0 bg-black/5 dark:bg-white/5 border border-black/10 dark:border-white/10 rounded px-1.5 py-1 text-[9px] font-mono text-slate-700 dark:text-slate-300 placeholder:text-slate-600 focus:outline-none focus:border-indigo-500"
-          />
-          {#if "--sf-prose-marker-color" in overrides}
-            <button onclick={() => onReset("--sf-prose-marker-color")} class="text-[8px] text-slate-500 hover:text-rose-600 dark:hover:text-rose-400 cursor-pointer shrink-0">reset</button>
-          {/if}
+          <div class="flex-1 min-w-0">
+            <ColorInput
+              token="--sf-prose-marker-color"
+              value={overrides["--sf-prose-marker-color"] ?? ""}
+              placeholder="var(--sf-color-primary)"
+              isOverridden={"--sf-prose-marker-color" in overrides}
+              onSet={(v) => onSet("--sf-prose-marker-color", v)}
+              onReset={() => onReset("--sf-prose-marker-color")}
+            />
+          </div>
         </div>
       </div>
-    {/if}
-  </section>
+  </Section>
 
   <!-- CONTENT VISIBILITY -->
-  <section class="space-y-3">
-    <button
-      onclick={() => { showContentIntrinsic = !showContentIntrinsic; }}
-      aria-expanded={showContentIntrinsic}
-      class="w-full flex items-center justify-between cursor-pointer"
-    >
-      <div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Content visibility</div>
-      <span class="text-[10px] text-slate-500">{showContentIntrinsic ? "▲" : "▼"}</span>
-    </button>
-    {#if showContentIntrinsic}
+  <Section title="Content visibility" bind:open={showContentIntrinsic}>
       <p class="text-[9px] text-slate-400 dark:text-slate-600 leading-relaxed">
         --sf-content-intrinsic-size — placeholder size used with <span class="font-mono text-slate-600 dark:text-slate-400">content-visibility: auto</span> to improve scroll performance on tall pages.
       </p>
@@ -400,22 +308,12 @@
           <button onclick={() => onReset("--sf-content-intrinsic-size")} class="text-[8px] text-slate-500 hover:text-rose-600 dark:hover:text-rose-400 cursor-pointer shrink-0">reset</button>
         {/if}
       </div>
-    {/if}
-  </section>
+  </Section>
 
   <div class="h-px bg-black/6 dark:bg-white/6"></div>
 
   <!-- BACKGROUND SURFACE -->
-  <section class="space-y-3">
-    <button
-      onclick={() => { showSurfaceBg = !showSurfaceBg; }}
-      aria-expanded={showSurfaceBg}
-      class="w-full flex items-center justify-between cursor-pointer"
-    >
-      <div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Background surface</div>
-      <span class="text-[10px] text-slate-500">{showSurfaceBg ? "▲" : "▼"}</span>
-    </button>
-    {#if showSurfaceBg}
+  <Section title="Background surface" bind:open={showSurfaceBg}>
       <p class="text-[9px] text-slate-400 dark:text-slate-600 leading-relaxed">
         --sf-surface-bg-* — input set composed by the <span class="font-mono text-slate-600 dark:text-slate-400">.sf-surface-bg</span>
         macro into a single reusable background (color, image, overlay, sizing and animation).
@@ -424,18 +322,26 @@
       {#each SURFACE_BG_TEXT as t (t.token)}
         <div class="flex items-center gap-2">
           <div class="text-[10px] font-semibold text-slate-600 dark:text-slate-400 w-20 shrink-0">{t.label}</div>
-          <input
-            type="text"
-            value={overrides[t.token] ?? ""}
-            placeholder={t.placeholder}
-            oninput={(e) => {
-              const v = (e.target as HTMLInputElement).value;
-              v.trim() ? onSet(t.token, v) : onReset(t.token);
-            }}
-            class="flex-1 min-w-0 bg-black/5 dark:bg-white/5 border border-black/10 dark:border-white/10 rounded px-1.5 py-1 text-[9px] font-mono text-slate-700 dark:text-slate-300 placeholder:text-slate-600 focus:outline-none focus:border-indigo-500"
-          />
-          {#if t.token in overrides}
-            <button onclick={() => onReset(t.token)} class="text-[8px] text-slate-500 hover:text-rose-600 dark:hover:text-rose-400 cursor-pointer shrink-0">reset</button>
+          {#if t.token === "--sf-surface-bg-color"}
+            <div class="flex-1 min-w-0">
+              <ColorInput
+                token={t.token}
+                value={overrides[t.token] ?? ""}
+                placeholder={t.placeholder}
+                isOverridden={t.token in overrides}
+                onSet={(v) => onSet(t.token, v)}
+                onReset={() => onReset(t.token)}
+              />
+            </div>
+          {:else}
+            <div class="flex-1 min-w-0">
+              <RawTokenRow
+                value={overrides[t.token] ?? ""} placeholder={t.placeholder}
+                overridden={t.token in overrides}
+                onSet={(v) => onSet(t.token, v)}
+                onReset={() => onReset(t.token)}
+              />
+            </div>
           {/if}
         </div>
       {/each}
@@ -464,8 +370,7 @@
       >
         <span class="text-[11px] font-bold text-white mix-blend-difference">.sf-surface-bg preview</span>
       </div>
-    {/if}
-  </section>
+  </Section>
 
   <div class="rounded-lg bg-black/3 dark:bg-white/3 border border-black/6 dark:border-white/6 p-3">
     <p class="text-[10px] text-slate-500 leading-relaxed">
diff --git a/configurator/src/components/panels/MiscPanel.svelte b/configurator/src/components/panels/MiscPanel.svelte
index 2833b9e39..424f14d1b 100644
--- a/configurator/src/components/panels/MiscPanel.svelte
+++ b/configurator/src/components/panels/MiscPanel.svelte
@@ -1,6 +1,8 @@
 <script lang="ts">
   import SliderRow from '../inputs/SliderRow.svelte';
   import ColorInput from '../inputs/ColorInput.svelte';
+  import Toggle from '../inputs/Toggle.svelte';
+  import Section from '../inputs/Section.svelte';
   import { SIZE_SCALE } from '../../lib/variableScales';
 
   let { overrides, onSet, onReset, onBulkChange }: {
@@ -11,16 +13,15 @@
   } = $props();
 
   const Z_INDEX_STEPS = [
-    { label: "Below",     token: "--sf-z-below",     note: "Behind content (e.g. decorative BG)" },
-    { label: "Raised",    token: "--sf-z-raised",    note: "Slightly above flow" },
-    { label: "Dropdown",  token: "--sf-z-dropdown",  note: "Dropdowns, popovers" },
-    { label: "Sticky",    token: "--sf-z-sticky",    note: "Sticky headers, toolbars" },
-    { label: "Fixed",     token: "--sf-z-fixed",     note: "Fixed UI chrome" },
-    { label: "Overlay",   token: "--sf-z-overlay",   note: "Modals, drawers backdrop" },
-    { label: "Modal",     token: "--sf-z-modal",     note: "Modal dialogs" },
-    { label: "Popover",   token: "--sf-z-popover",   note: "Tooltips, menus" },
-    { label: "Tooltip",   token: "--sf-z-tooltip",   note: "Inline tooltips" },
-    { label: "Toast",     token: "--sf-z-toast",     note: "Notifications" },
+    { label: "Below",     token: "--sf-z-below",     note: "Behind content (e.g. decorative BG)", def: -1 },
+    { label: "Raised",    token: "--sf-z-raised",    note: "Slightly above flow",                 def: 1 },
+    { label: "Sticky",    token: "--sf-z-sticky",    note: "Sticky headers, toolbars",            def: 1000 },
+    { label: "Fixed",     token: "--sf-z-fixed",     note: "Fixed UI chrome",                     def: 1010 },
+    { label: "Dropdown",  token: "--sf-z-dropdown",  note: "Dropdowns, popovers",                 def: 1020 },
+    { label: "Overlay",   token: "--sf-z-overlay",   note: "Modals, drawers backdrop",            def: 1030 },
+    { label: "Modal",     token: "--sf-z-modal",     note: "Modal dialogs",                       def: 1040 },
+    { label: "Toast",     token: "--sf-z-toast",     note: "Notifications",                       def: 1050 },
+    { label: "Tooltip",   token: "--sf-z-tooltip",   note: "Inline tooltips",                     def: 1060 },
   ];
 
   const SCROLL_BEHAVIORS = [
@@ -71,16 +72,7 @@
 <div class="p-4 space-y-6">
 
   <!-- TOUCH TARGET -->
-  <section class="space-y-3">
-    <button
-      onclick={() => { showTouchTarget = !showTouchTarget; }}
-      aria-expanded={showTouchTarget}
-      class="w-full flex items-center justify-between cursor-pointer"
-    >
-      <div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Touch target</div>
-      <span class="text-[10px] text-slate-500">{showTouchTarget ? "▲" : "▼"}</span>
-    </button>
-    {#if showTouchTarget}
+  <Section title="Touch target" bind:open={showTouchTarget}>
       <SliderRow
         label="Min touch size" value={touchTarget} min={32} max={64} step={1} unit="px"
         help="--sf-touch-target — minimum tappable area for interactive elements (WCAG 2.5.5)"
@@ -102,22 +94,12 @@
         </div>
         <p class="text-[9px] text-slate-400 dark:text-slate-600">Minimum interactive area — ensures accessibility on touch devices.</p>
       </div>
-    {/if}
-  </section>
+  </Section>
 
   <div class="h-px bg-black/6 dark:bg-white/6"></div>
 
   <!-- SCROLL BEHAVIOR -->
-  <section class="space-y-3">
-    <button
-      onclick={() => { showScrollBehavior = !showScrollBehavior; }}
-      aria-expanded={showScrollBehavior}
-      class="w-full flex items-center justify-between cursor-pointer"
-    >
-      <div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Scroll behavior</div>
-      <span class="text-[10px] text-slate-500">{showScrollBehavior ? "▲" : "▼"}</span>
-    </button>
-    {#if showScrollBehavior}
+  <Section title="Scroll behavior" bind:open={showScrollBehavior}>
       <div class="flex gap-2">
         {#each SCROLL_BEHAVIORS as b (b.value)}
           <button
@@ -132,22 +114,12 @@
           </button>
         {/each}
       </div>
-    {/if}
-  </section>
+  </Section>
 
   <div class="h-px bg-black/6 dark:bg-white/6"></div>
 
   <!-- Z-INDEX -->
-  <section class="space-y-3">
-    <button
-      onclick={() => { showZIndex = !showZIndex; }}
-      aria-expanded={showZIndex}
-      class="w-full flex items-center justify-between cursor-pointer"
-    >
-      <div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Z-index layers</div>
-      <span class="text-[10px] text-slate-500">{showZIndex ? "▲" : "▼"}</span>
-    </button>
-    {#if showZIndex}
+  <Section title="Z-index layers" bind:open={showZIndex}>
       <SliderRow
         label="Base offset" value={zBaseOffset} min={0} max={1000} step={10}
         help="--sf-z-base — added to all z-index tokens to avoid conflicts with existing stacking contexts"
@@ -155,34 +127,23 @@
         onChange={(v) => onSet("--sf-z-base", String(v))}
         onReset={() => onReset("--sf-z-base")}
       />
-      <div class="bg-black/4 dark:bg-white/4 rounded-xl border border-black/8 dark:border-white/8 p-3 space-y-1.5">
+      <div class="space-y-2">
         {#each Z_INDEX_STEPS as z (z.token)}
-          {@const isOverridden = z.token in overrides}
-          <div class="flex items-center gap-2">
-            <div class={`w-1.5 h-1.5 rounded-full shrink-0 ${isOverridden ? "bg-amber-400" : "bg-black/20 dark:bg-white/20"}`}></div>
-            <span class="text-[9px] font-mono text-slate-600 dark:text-slate-400 w-20 shrink-0">{z.label}</span>
-            <span class="text-[8px] text-slate-400 dark:text-slate-600 flex-1">{z.note}</span>
-            <span class="text-[8px] font-mono text-slate-500">{z.token.replace("--sf-z-", "")}</span>
-          </div>
+          <SliderRow
+            label={z.label} value={parseNum(overrides[z.token], z.def)} min={-1} max={1100} step={1}
+            help={`${z.token} — ${z.note}`}
+            overridden={z.token in overrides}
+            onChange={(v) => onSet(z.token, String(v))}
+            onReset={() => onReset(z.token)}
+          />
         {/each}
       </div>
-      <p class="text-[9px] text-slate-400 dark:text-slate-600">Override individual z-index tokens in the "All tokens" tab.</p>
-    {/if}
-  </section>
+  </Section>
 
   <div class="h-px bg-black/6 dark:bg-white/6"></div>
 
   <!-- SELECTION -->
-  <section class="space-y-3">
-    <button
-      onclick={() => { showTextSelection = !showTextSelection; }}
-      aria-expanded={showTextSelection}
-      class="w-full flex items-center justify-between cursor-pointer"
-    >
-      <div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Text selection</div>
-      <span class="text-[10px] text-slate-500">{showTextSelection ? "▲" : "▼"}</span>
-    </button>
-    {#if showTextSelection}
+  <Section title="Text selection" bind:open={showTextSelection}>
       <div class="space-y-2">
         <div>
           <div class="text-[10px] font-semibold text-slate-600 dark:text-slate-400 mb-1.5">Selection background</div>
@@ -254,22 +215,12 @@
           </p>
         </div>
       </div>
-    {/if}
-  </section>
+  </Section>
 
   <div class="h-px bg-black/6 dark:bg-white/6"></div>
 
   <!-- FOCUS RING STYLE -->
-  <section class="space-y-3">
-    <button
-      onclick={() => { showFocusRingStyle = !showFocusRingStyle; }}
-      aria-expanded={showFocusRingStyle}
-      class="w-full flex items-center justify-between cursor-pointer"
-    >
-      <div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Focus ring style</div>
-      <span class="text-[10px] text-slate-500">{showFocusRingStyle ? "▲" : "▼"}</span>
-    </button>
-    {#if showFocusRingStyle}
+  <Section title="Focus ring style" bind:open={showFocusRingStyle}>
       <div class="flex gap-2">
         {#each ["solid", "dashed", "dotted"] as style (style)}
           {@const current = overrides["--sf-focus-ring-style"] ?? "solid"}
@@ -294,22 +245,12 @@
           Focus ring · {focusRingStyle}
         </div>
       </div>
-    {/if}
-  </section>
+  </Section>
 
   <div class="h-px bg-black/6 dark:bg-white/6"></div>
 
   <!-- COMPONENT SIZES -->
-  <section class="space-y-3">
-    <button
-      onclick={() => { showComponentSizes = !showComponentSizes; }}
-      aria-expanded={showComponentSizes}
-      class="w-full flex items-center justify-between cursor-pointer"
-    >
-      <div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Component size scale</div>
-      <span class="text-[10px] text-slate-500">{showComponentSizes ? "▲" : "▼"}</span>
-    </button>
-    {#if showComponentSizes}
+  <Section title="Component size scale" bind:open={showComponentSizes}>
       <p class="text-[10px] text-slate-400 dark:text-slate-600 leading-relaxed">
         Controls the height / tap-target of all sized components (buttons, inputs, badges).
       </p>
@@ -329,31 +270,22 @@
       <div class="bg-black/4 dark:bg-white/4 rounded-xl border border-black/8 dark:border-white/8 p-3 flex items-end gap-2">
         {#each SIZE_TOKENS as s (s.token)}
           {@const val = getSizeValue(s)}
+          {@const maxSize = Math.max(...SIZE_TOKENS.map((x) => getSizeValue(x)), 0.001)}
           <div class="flex flex-col items-center gap-1 flex-1">
             <div
               class="w-full bg-indigo-500/30 border border-indigo-500/30 rounded flex items-center justify-center"
-              style={`height: ${Math.min(val * 14, 64)}px`}
+              style={`height: ${(val / maxSize) * 72}px`}
             ></div>
             <span class="text-[8px] font-mono text-slate-400 dark:text-slate-600">{s.label}</span>
           </div>
         {/each}
       </div>
-    {/if}
-  </section>
+  </Section>
 
   <div class="h-px bg-black/6 dark:bg-white/6"></div>
 
   <!-- CARET & LINKS -->
-  <section class="space-y-3">
-    <button
-      onclick={() => { showCaretLinks = !showCaretLinks; }}
-      aria-expanded={showCaretLinks}
-      class="w-full flex items-center justify-between cursor-pointer"
-    >
-      <div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Caret &amp; links</div>
-      <span class="text-[10px] text-slate-500">{showCaretLinks ? "▲" : "▼"}</span>
-    </button>
-    {#if showCaretLinks}
+  <Section title="Caret &amp; links" bind:open={showCaretLinks}>
       <div>
         <div class="text-[10px] font-semibold text-slate-600 dark:text-slate-400 mb-1.5">Caret color</div>
         <ColorInput
@@ -409,22 +341,12 @@
           >sample link</a> with the current underline settings.
         </p>
       </div>
-    {/if}
-  </section>
+  </Section>
 
   <div class="h-px bg-black/6 dark:bg-white/6"></div>
 
   <!-- ICON SIZES -->
-  <section class="space-y-3">
-    <button
-      onclick={() => { showIconSizes = !showIconSizes; }}
-      aria-expanded={showIconSizes}
-      class="w-full flex items-center justify-between cursor-pointer"
-    >
-      <div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Icon sizes</div>
-      <span class="text-[10px] text-slate-500">{showIconSizes ? "▲" : "▼"}</span>
-    </button>
-    {#if showIconSizes}
+  <Section title="Icon sizes" bind:open={showIconSizes}>
       <p class="text-[10px] text-slate-400 dark:text-slate-600 leading-relaxed">
         Icon scale tokens used by <span class="font-mono text-slate-600 dark:text-slate-400">.sf-icon-*</span> utilities. Values are in <span class="font-mono text-slate-600 dark:text-slate-400">em</span> units relative to surrounding text.
       </p>
@@ -452,22 +374,12 @@
         onChange={(v) => onSet("--sf-icon-box-pad", `${v}em`)}
         onReset={() => onReset("--sf-icon-box-pad")}
       />
-    {/if}
-  </section>
+  </Section>
 
   <div class="h-px bg-black/6 dark:bg-white/6"></div>
 
   <!-- OBJECT FIT / POSITION -->
-  <section class="space-y-3">
-    <button
-      onclick={() => { showObjectFit = !showObjectFit; }}
-      aria-expanded={showObjectFit}
-      class="w-full flex items-center justify-between cursor-pointer"
-    >
-      <div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Object fit</div>
-      <span class="text-[10px] text-slate-500">{showObjectFit ? "▲" : "▼"}</span>
-    </button>
-    {#if showObjectFit}
+  <Section title="Object fit" bind:open={showObjectFit}>
       <p class="text-[9px] text-slate-400 dark:text-slate-600">Default values for <span class="font-mono text-slate-600 dark:text-slate-400">.sf-media</span> images and replaced elements.</p>
       <div class="flex items-center gap-2">
         <span class="text-[10px] font-semibold text-slate-600 dark:text-slate-400 w-16 shrink-0">Fit</span>
@@ -500,22 +412,12 @@
           <button onclick={() => onReset("--sf-object-position")} class="text-[8px] text-slate-500 hover:text-rose-600 dark:hover:text-rose-400 cursor-pointer shrink-0">reset</button>
         {/if}
       </div>
-    {/if}
-  </section>
+  </Section>
 
   <div class="h-px bg-black/6 dark:bg-white/6"></div>
 
   <!-- SAFE AREA INSETS -->
-  <section class="space-y-3">
-    <button
-      onclick={() => { showSafeArea = !showSafeArea; }}
-      aria-expanded={showSafeArea}
-      class="w-full flex items-center justify-between cursor-pointer"
-    >
-      <div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Safe area insets</div>
-      <span class="text-[10px] text-slate-500">{showSafeArea ? "▲" : "▼"}</span>
-    </button>
-    {#if showSafeArea}
+  <Section title="Safe area insets" bind:open={showSafeArea}>
       <p class="text-[9px] text-slate-400 dark:text-slate-600 leading-relaxed">
         Default to the device's <span class="font-mono text-slate-600 dark:text-slate-400">env(safe-area-inset-*)</span>. Override only if you need fixed padding regardless of notch/home-indicator.
       </p>
@@ -544,22 +446,12 @@
           </div>
         {/each}
       </div>
-    {/if}
-  </section>
+  </Section>
 
   <div class="h-px bg-black/6 dark:bg-white/6"></div>
 
   <!-- PRINT -->
-  <section class="space-y-3">
-    <button
-      onclick={() => { showPrint = !showPrint; }}
-      aria-expanded={showPrint}
-      class="w-full flex items-center justify-between cursor-pointer"
-    >
-      <div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Print styles</div>
-      <span class="text-[10px] text-slate-500">{showPrint ? "▲" : "▼"}</span>
-    </button>
-    {#if showPrint}
+  <Section title="Print styles" bind:open={showPrint}>
       <p class="text-[9px] text-slate-400 dark:text-slate-600">Applied inside <span class="font-mono text-slate-600 dark:text-slate-400">@media print</span> via <span class="font-mono text-slate-600 dark:text-slate-400">optional/print.css</span>.</p>
       <div class="flex items-center gap-2">
         <span class="text-[10px] font-semibold text-slate-600 dark:text-slate-400 w-24 shrink-0">Page size</span>
@@ -594,22 +486,12 @@
           {/if}
         </div>
       {/each}
-    {/if}
-  </section>
+  </Section>
 
   <div class="h-px bg-black/6 dark:bg-white/6"></div>
 
   <!-- STATE FLAGS -->
-  <section class="space-y-3">
-    <button
-      onclick={() => { showStateFlags = !showStateFlags; }}
-      aria-expanded={showStateFlags}
-      class="w-full flex items-center justify-between cursor-pointer"
-    >
-      <div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">State flags</div>
-      <span class="text-[10px] text-slate-500">{showStateFlags ? "▲" : "▼"}</span>
-    </button>
-    {#if showStateFlags}
+  <Section title="State flags" bind:open={showStateFlags}>
       <p class="text-[10px] text-slate-400 dark:text-slate-600 leading-relaxed">
         Boolean CSS custom property flags (0 = off, 1 = on). Components toggle these to activate state-specific styles.
         Overriding globally forces all matching elements into that state — useful for testing and demos.
@@ -623,15 +505,12 @@
         ] as f (f.token)}
           {@const cur = overrides[f.token] ?? "0"}
           <div class="flex items-center gap-2 py-0.5">
-            <button
-              type="button"
-              aria-label={f.label}
-              aria-pressed={cur === "1"}
-              onclick={() => cur === "1" ? onReset(f.token) : onSet(f.token, "1")}
-              class={`w-8 h-4 rounded-full transition-colors relative cursor-pointer shrink-0 ${cur === "1" ? "bg-indigo-600" : "bg-black/10 dark:bg-white/10"}`}
-            >
-              <div class={`absolute top-0.5 w-3 h-3 bg-white rounded-full shadow transition-transform ${cur === "1" ? "translate-x-4" : "translate-x-0.5"}`}></div>
-            </button>
+            <Toggle
+              size="sm"
+              checked={cur === "1"}
+              ariaLabel={f.label}
+              onToggle={() => cur === "1" ? onReset(f.token) : onSet(f.token, "1")}
+            />
             <span class="text-[9px] font-mono text-slate-700 dark:text-slate-300 w-24 shrink-0">{f.label}</span>
             <span class="text-[9px] text-slate-400 dark:text-slate-600 flex-1">{f.note}</span>
             {#if f.token in overrides}
@@ -656,8 +535,7 @@
           <button onclick={() => onReset("--sf-field-required-marker")} class="text-[8px] text-slate-500 hover:text-rose-600 dark:hover:text-rose-400 cursor-pointer shrink-0">reset</button>
         {/if}
       </div>
-    {/if}
-  </section>
+  </Section>
 
   <div class="h-px bg-black/6 dark:bg-white/6"></div>
 
diff --git a/configurator/src/components/panels/MotionPanel.svelte b/configurator/src/components/panels/MotionPanel.svelte
index 30e2d2cf3..f61cb56fb 100644
--- a/configurator/src/components/panels/MotionPanel.svelte
+++ b/configurator/src/components/panels/MotionPanel.svelte
@@ -2,6 +2,8 @@
   import { KNOBS_BY_DOMAIN } from '../../lib/powerKnobs';
   import PowerKnobRow from '../inputs/PowerKnobRow.svelte';
   import SliderRow from '../inputs/SliderRow.svelte';
+  import Toggle from '../inputs/Toggle.svelte';
+  import Section from '../inputs/Section.svelte';
   import { themeState } from '../../lib/theme.svelte';
 
   // <option> only reliably accepts a background via inline style (no dark:
@@ -104,20 +106,11 @@
       <div class="text-[11px] font-semibold text-slate-800 dark:text-slate-200">Disable motion</div>
       <div class="text-[9px] text-slate-500 mt-0.5">Respects prefers-reduced-motion</div>
     </div>
-    <button
+    <Toggle
+      checked={motionDisabled}
       title={motionDisabled ? "Enable motion" : "Disable motion"}
-      onclick={() => {
-        if (motionDisabled) onReset("--sf-motion-scale");
-        else onSet("--sf-motion-scale", "0");
-      }}
-      class={`w-9 h-5 rounded-full transition-colors relative cursor-pointer ${
-        motionDisabled ? "bg-indigo-600" : "bg-black/10 dark:bg-white/10"
-      }`}
-    >
-      <div class={`absolute top-0.5 w-4 h-4 bg-white rounded-full shadow transition-transform ${
-        motionDisabled ? "translate-x-4" : "translate-x-0.5"
-      }`}></div>
-    </button>
+      onToggle={() => motionDisabled ? onReset("--sf-motion-scale") : onSet("--sf-motion-scale", "0")}
+    />
   </div>
 
   {#if motionDisabled}
@@ -170,16 +163,7 @@
   <div class="h-px bg-black/6 dark:bg-white/6"></div>
 
   <!-- DURATIONS (with inline preview) -->
-  <section class="space-y-3">
-    <button
-      onclick={() => { showDurations = !showDurations; }}
-      aria-expanded={showDurations}
-      class="w-full flex items-center justify-between cursor-pointer"
-    >
-      <div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Durations</div>
-      <span class="text-[10px] text-slate-500">{showDurations ? "▲" : "▼"}</span>
-    </button>
-    {#if showDurations}
+  <Section title="Durations" bind:open={showDurations}>
       <p class="text-[10px] text-slate-400 dark:text-slate-600 leading-relaxed">
         Named duration tokens. Drag to set an absolute ms value, overriding the global scale.
         {#if motionDisabled}<span class="text-amber-600 dark:text-amber-400"> (No effect while motion is disabled.)</span>{/if}
@@ -202,31 +186,22 @@
       <div class="bg-black/4 dark:bg-white/4 rounded-xl border border-black/8 dark:border-white/8 p-4 space-y-3">
         {#each DURATIONS as d (d.label)}
           {@const actual = getDuration(d.token, d.base)}
+          {@const maxDur = Math.max(...DURATIONS.map((x) => getDuration(x.token, x.base)), 1)}
           <div class="flex items-center gap-3">
             <span class="text-[10px] text-slate-500 w-14 shrink-0">{d.label}</span>
             <div class="flex-1 h-1 bg-black/8 dark:bg-white/8 rounded-full overflow-hidden">
-              <div class="h-full bg-indigo-500 rounded-full" style={`width: ${Math.min((actual / 1200) * 100, 100)}%`}></div>
+              <div class="h-full bg-indigo-500 rounded-full" style={`width: ${(actual / maxDur) * 100}%`}></div>
             </div>
             <span class="text-[9px] font-mono text-slate-500 w-10 text-right">{actual}ms</span>
           </div>
         {/each}
       </div>
-    {/if}
-  </section>
+  </Section>
 
   <div class="h-px bg-black/6 dark:bg-white/6"></div>
 
   <!-- EASING — editable -->
-  <section class="space-y-3">
-    <button
-      onclick={() => { showEasing = !showEasing; }}
-      aria-expanded={showEasing}
-      class="w-full flex items-center justify-between cursor-pointer"
-    >
-      <div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Easing curves</div>
-      <span class="text-[10px] text-slate-500">{showEasing ? "▲" : "▼"}</span>
-    </button>
-    {#if showEasing}
+  <Section title="Easing curves" bind:open={showEasing}>
       <p class="text-[10px] text-slate-400 dark:text-slate-600 leading-relaxed">
         Edit the named easing tokens. Accepts any CSS timing function —
         <span class="font-mono text-slate-600 dark:text-slate-400">cubic-bezier(…)</span> or
@@ -270,22 +245,12 @@
           </div>
         {/each}
       </div>
-    {/if}
-  </section>
+  </Section>
 
   <div class="h-px bg-black/6 dark:bg-white/6"></div>
 
   <!-- STAGGER -->
-  <section class="space-y-3">
-    <button
-      onclick={() => { showStagger = !showStagger; }}
-      aria-expanded={showStagger}
-      class="w-full flex items-center justify-between cursor-pointer"
-    >
-      <div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Stagger</div>
-      <span class="text-[10px] text-slate-500">{showStagger ? "▲" : "▼"}</span>
-    </button>
-    {#if showStagger}
+  <Section title="Stagger" bind:open={showStagger}>
       <p class="text-[10px] text-slate-400 dark:text-slate-600 leading-relaxed">
         One slider sets all five stagger delays (delay-1 through delay-5 are multiples of this base).
       </p>
@@ -307,31 +272,22 @@
       <div class="bg-black/4 dark:bg-white/4 rounded-xl border border-black/8 dark:border-white/8 p-3 space-y-1">
         {#each [1,2,3,4,5] as n (n)}
           {@const delayMs = Math.round(staggerBase * n)}
+          {@const maxStaggerDelay = Math.round(staggerBase * 5)}
           <div class="flex items-center gap-2">
             <span class="text-[9px] font-mono text-slate-400 dark:text-slate-600 w-6">–{n}</span>
             <div class="flex-1 h-1.5 bg-black/8 dark:bg-white/8 rounded-full">
-              <div class="h-full bg-indigo-500 rounded-full" style={`width: ${Math.min((delayMs / 600) * 100, 100)}%`}></div>
+              <div class="h-full bg-indigo-500 rounded-full" style={`width: ${maxStaggerDelay > 0 ? (delayMs / maxStaggerDelay) * 100 : 0}%`}></div>
             </div>
             <span class="text-[9px] font-mono text-slate-500 w-10 text-right">{delayMs}ms</span>
           </div>
         {/each}
       </div>
-    {/if}
-  </section>
+  </Section>
 
   <div class="h-px bg-black/6 dark:bg-white/6"></div>
 
   <!-- ADVANCED — global scale power knob, theme transition, scroll timeline -->
-  <section class="space-y-4">
-    <button
-      onclick={() => { showAdvanced = !showAdvanced; }}
-      aria-expanded={showAdvanced}
-      class="w-full flex items-center justify-between text-slate-400 dark:text-slate-600 hover:text-slate-600 dark:hover:text-slate-400 transition-colors cursor-pointer"
-    >
-      <div class="text-[10px] font-semibold uppercase tracking-widest">Advanced</div>
-      <span class="text-[10px]">{showAdvanced ? "▲" : "▼"}</span>
-    </button>
-    {#if showAdvanced}
+  <Section title="Advanced" spacing="space-y-4" variant="advanced" bind:open={showAdvanced}>
       <!-- Global motion scale (power knob) -->
       <div class="space-y-4">
         {#each knobs as k (k.name)}
@@ -383,6 +339,5 @@
           </div>
         {/each}
       </div>
-    {/if}
-  </section>
+  </Section>
 </div>
diff --git a/configurator/src/components/panels/ShadowsPanel.svelte b/configurator/src/components/panels/ShadowsPanel.svelte
index f6110ad16..9ca171840 100644
--- a/configurator/src/components/panels/ShadowsPanel.svelte
+++ b/configurator/src/components/panels/ShadowsPanel.svelte
@@ -3,6 +3,8 @@
   import PowerKnobRow from '../inputs/PowerKnobRow.svelte';
   import SliderRow from '../inputs/SliderRow.svelte';
   import ColorInput from '../inputs/ColorInput.svelte';
+  import Toggle from '../inputs/Toggle.svelte';
+  import Section from '../inputs/Section.svelte';
 
   let { overrides, onSet, onReset }: {
     overrides: Record<string, string>;
@@ -53,16 +55,7 @@
   <div class="h-px bg-black/6 dark:bg-white/6"></div>
 
   <!-- SHADOW COLOR -->
-  <section class="space-y-4">
-    <button
-      onclick={() => { showShadowColor = !showShadowColor; }}
-      aria-expanded={showShadowColor}
-      class="w-full flex items-center justify-between cursor-pointer"
-    >
-      <div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Shadow color</div>
-      <span class="text-[10px] text-slate-500">{showShadowColor ? "▲" : "▼"}</span>
-    </button>
-    {#if showShadowColor}
+  <Section title="Shadow color" spacing="space-y-4" bind:open={showShadowColor}>
       <div>
         <div class="text-[10px] font-semibold text-slate-600 dark:text-slate-400 mb-1.5">Shadow color</div>
         <ColorInput
@@ -75,42 +68,23 @@
         />
         <p class="text-[9px] text-slate-400 dark:text-slate-600 mt-1">Warm, cool or brand-tinted shadows. Default uses neutral hue.</p>
       </div>
-    {/if}
-  </section>
+  </Section>
 
   <div class="h-px bg-black/6 dark:bg-white/6"></div>
 
   <!-- GLOW -->
-  <section class="space-y-3">
-    <button
-      onclick={() => { showGlow = !showGlow; }}
-      aria-expanded={showGlow}
-      class="w-full flex items-center justify-between cursor-pointer"
-    >
-      <div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Glow</div>
-      <span class="text-[10px] text-slate-500">{showGlow ? "▲" : "▼"}</span>
-    </button>
-    {#if showGlow}
+  <Section title="Glow" bind:open={showGlow}>
       <!-- Glow toggle -->
       <div class="flex items-center justify-between p-3 rounded-xl bg-black/4 dark:bg-white/4 border border-black/8 dark:border-white/8">
         <div>
           <div class="text-[11px] font-semibold text-slate-800 dark:text-slate-200">Shadow glow</div>
           <div class="text-[9px] text-slate-500 mt-0.5">Ambient glow on elevated surfaces</div>
         </div>
-        <button
-          aria-label={glowDisabled ? "Enable shadow glow" : "Disable shadow glow"}
-          onclick={() => {
-            if (glowDisabled) onReset("--sf-shadow-glow");
-            else onSet("--sf-shadow-glow", "none");
-          }}
-          class={`w-9 h-5 rounded-full transition-colors relative cursor-pointer ${
-            !glowDisabled ? "bg-indigo-600" : "bg-black/10 dark:bg-white/10"
-          }`}
-        >
-          <div class={`absolute top-0.5 w-4 h-4 bg-white rounded-full shadow transition-transform ${
-            !glowDisabled ? "translate-x-4" : "translate-x-0.5"
-          }`}></div>
-        </button>
+        <Toggle
+          checked={!glowDisabled}
+          ariaLabel={glowDisabled ? "Enable shadow glow" : "Disable shadow glow"}
+          onToggle={() => glowDisabled ? onReset("--sf-shadow-glow") : onSet("--sf-shadow-glow", "none")}
+        />
       </div>
 
       {#if !glowDisabled}
@@ -138,22 +112,12 @@
       {#if glowDisabled}
         <p class="text-[9px] text-slate-400 dark:text-slate-600 text-center">Glow disabled.</p>
       {/if}
-    {/if}
-  </section>
+  </Section>
 
   <div class="h-px bg-black/6 dark:bg-white/6"></div>
 
   <!-- ADVANCED (power knob, de-emphasised, at end) -->
-  <section class="space-y-3">
-    <button
-      onclick={() => { showAdvanced = !showAdvanced; }}
-      aria-expanded={showAdvanced}
-      class="w-full flex items-center justify-between text-slate-400 dark:text-slate-600 hover:text-slate-600 dark:hover:text-slate-400 transition-colors cursor-pointer"
-    >
-      <div class="text-[10px] font-semibold uppercase tracking-widest">Advanced</div>
-      <span class="text-[10px]">{showAdvanced ? "▲" : "▼"}</span>
-    </button>
-    {#if showAdvanced}
+  <Section title="Advanced" variant="advanced" bind:open={showAdvanced}>
       <div class="space-y-4">
         {#each knobs as k (k.name)}
           <PowerKnobRow
@@ -163,6 +127,5 @@
           />
         {/each}
       </div>
-    {/if}
-  </section>
+  </Section>
 </div>
diff --git a/configurator/src/components/panels/SpacingPanel.svelte b/configurator/src/components/panels/SpacingPanel.svelte
index 427e15413..5de7e8149 100644
--- a/configurator/src/components/panels/SpacingPanel.svelte
+++ b/configurator/src/components/panels/SpacingPanel.svelte
@@ -4,6 +4,7 @@
   import PowerKnobRow from '../inputs/PowerKnobRow.svelte';
   import SliderRow from '../inputs/SliderRow.svelte';
   import ClampField from '../inputs/ClampField.svelte';
+  import Section from '../inputs/Section.svelte';
   import { SPACE_SCALE } from '../../lib/variableScales';
 
   let { overrides, onSet, onReset }: {
@@ -42,6 +43,15 @@
   let vwMin      = $derived(num("--sf-fluid-min-vw", 22.5));
   let vwMax      = $derived(num("--sf-fluid-max-vw", 90));
 
+  // Largest step (4xl, offset +5) — used to normalise the preview bars so the
+  // biggest bar fills the track and every other bar stays proportional (no cap
+  // that would make different sizes render identically).
+  let spacePreviewMax = $derived.by(() => {
+    const midBase = (baseMin + baseMax) / 2;
+    const ratio = (ratioMin + ratioMax) / 2;
+    return midBase * Math.pow(ratio, 5) * spaceScale;
+  });
+
   let showLayoutGap = $state(false);
   let showModularScale = $state(false);
   let showAdvanced = $state(false);
@@ -59,7 +69,7 @@
         {@const offset = i - 3}
         {@const rawRem = offset >= 0 ? midBase * Math.pow(ratio, offset) : midBase / Math.pow(ratio, -offset)}
         {@const scaled = rawRem * spaceScale}
-        {@const barWidth = Math.min(scaled * 28, 240)}
+        {@const barWidth = spacePreviewMax > 0 ? (scaled / spacePreviewMax) * 240 : 0}
         <div class="flex items-center gap-2">
           <span class="text-[9px] font-mono text-slate-400 dark:text-slate-600 w-6 text-right shrink-0">{step}</span>
           <div class="bg-indigo-500/50 rounded shrink-0 h-3" style={`width: ${barWidth}px; min-width: 3px`}></div>
@@ -72,16 +82,7 @@
   <div class="h-px bg-black/6 dark:bg-white/6"></div>
 
   <!-- GAP TOKENS — most used, at the top -->
-  <section class="space-y-3">
-    <button
-      onclick={() => { showLayoutGap = !showLayoutGap; }}
-      aria-expanded={showLayoutGap}
-      class="w-full flex items-center justify-between cursor-pointer"
-    >
-      <div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Layout gap</div>
-      <span class="text-[10px] text-slate-500">{showLayoutGap ? "▲" : "▼"}</span>
-    </button>
-    {#if showLayoutGap}
+  <Section title="Layout gap" bind:open={showLayoutGap}>
       <p class="text-[10px] text-slate-400 dark:text-slate-600 leading-relaxed">
         The two most-referenced spacing tokens. Referenced by every layout primitive (cluster, grid, stack, bento…).
       </p>
@@ -118,22 +119,12 @@
         currentRaw={overrides["--sf-gutter"]}
         onRawSet={(v) => onSet("--sf-gutter", v)}
       />
-    {/if}
-  </section>
+  </Section>
 
   <div class="h-px bg-black/6 dark:bg-white/6"></div>
 
   <!-- FLUID SCALE -->
-  <section class="space-y-4">
-    <button
-      onclick={() => { showModularScale = !showModularScale; }}
-      aria-expanded={showModularScale}
-      class="w-full flex items-center justify-between cursor-pointer"
-    >
-      <div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Modular scale (Mobile → Desktop)</div>
-      <span class="text-[10px] text-slate-500">{showModularScale ? "▲" : "▼"}</span>
-    </button>
-    {#if showModularScale}
+  <Section title="Modular scale (Mobile → Desktop)" spacing="space-y-4" bind:open={showModularScale}>
       <p class="text-[10px] text-slate-400 dark:text-slate-600 leading-relaxed">
         Utopia-style fluid scale — viewport width, base unit and ratio per endpoint.
         The viewport range is shared with the type scale.
@@ -166,22 +157,12 @@
         onRatioMinChange={(v) => onSet("--sf-space-ratio-min", String(v))}
         onRatioMaxChange={(v) => onSet("--sf-space-ratio-max", String(v))}
       />
-    {/if}
-  </section>
+  </Section>
 
   <div class="h-px bg-black/6 dark:bg-white/6"></div>
 
   <!-- ADVANCED (power knobs, de-emphasised, at end) -->
-  <section class="space-y-3">
-    <button
-      onclick={() => { showAdvanced = !showAdvanced; }}
-      aria-expanded={showAdvanced}
-      class="w-full flex items-center justify-between text-slate-400 dark:text-slate-600 hover:text-slate-600 dark:hover:text-slate-400 transition-colors cursor-pointer"
-    >
-      <div class="text-[10px] font-semibold uppercase tracking-widest">Advanced</div>
-      <span class="text-[10px]">{showAdvanced ? "▲" : "▼"}</span>
-    </button>
-    {#if showAdvanced}
+  <Section title="Advanced" variant="advanced" bind:open={showAdvanced}>
       <div class="space-y-4">
         {#each knobs as k (k.name)}
           <PowerKnobRow
@@ -191,6 +172,5 @@
           />
         {/each}
       </div>
-    {/if}
-  </section>
+  </Section>
 </div>
diff --git a/configurator/src/components/panels/TypographyPanel.svelte b/configurator/src/components/panels/TypographyPanel.svelte
index f8e0690f9..c47741bed 100644
--- a/configurator/src/components/panels/TypographyPanel.svelte
+++ b/configurator/src/components/panels/TypographyPanel.svelte
@@ -5,6 +5,7 @@
   import SliderRow from '../inputs/SliderRow.svelte';
   import RangeWithNumber from '../inputs/RangeWithNumber.svelte';
   import ClampField from '../inputs/ClampField.svelte';
+  import Section from '../inputs/Section.svelte';
   import { themeState } from '../../lib/theme.svelte';
 
   // <option> only reliably accepts a background via inline style (no dark:
@@ -160,8 +161,9 @@
   let baseMax   = $derived(num("--sf-text-base-max", 1.25));
   let dispMin   = $derived(num("--sf-text-display-base-min", 2.4));
   let dispMax   = $derived(num("--sf-text-display-base-max", 3));
-  let taper     = $derived(num("--sf-leading-taper", 0));
-  let textScale = $derived(num("--sf-text-scale", 1));
+  let taper        = $derived(num("--sf-leading-taper", 0));
+  let textScale    = $derived(num("--sf-text-scale", 1));
+  let displayScale = $derived(num("--sf-text-display-scale", 1));
   // Shared fluid viewport endpoints (rem, unitless). Min = mobile, max = desktop.
   let vwMin     = $derived(num("--sf-fluid-min-vw", 22.5));
   let vwMax     = $derived(num("--sf-fluid-max-vw", 90));
@@ -251,19 +253,38 @@
   });
 </script>
 
+<!-- Shared weight button-grid — one markup for every role-weight token
+     (body-strong, interactive, display, heading). Clicking the default resets. -->
+{#snippet weightGrid(label: string, tokenName: string, defaultVal: string)}
+  {@const current = overrides[tokenName] ?? defaultVal}
+  {@const isOverridden = tokenName in overrides}
+  <div class="group">
+    <div class="flex items-center justify-between mb-1.5">
+      <span class="text-[11px] font-semibold text-slate-800 dark:text-slate-200">{label} weight</span>
+      {#if isOverridden}
+        <button onclick={() => onReset(tokenName)} class="text-[9px] text-slate-500 hover:text-rose-600 dark:hover:text-rose-400 cursor-pointer opacity-100 sm:opacity-0 sm:group-hover:opacity-100 sm:group-focus-within:opacity-100 focus:opacity-100 transition-colors">reset</button>
+      {/if}
+    </div>
+    <div class="flex gap-1">
+      {#each WEIGHT_OPTIONS as w (w)}
+        <button
+          onclick={() => w === defaultVal ? (tokenName in overrides ? onReset(tokenName) : undefined) : onSet(tokenName, w)}
+          style={`font-weight: ${parseInt(w)}`}
+          class={`flex-1 py-1.5 rounded-lg text-[10px] border transition-all cursor-pointer font-mono ${
+            current === w
+              ? "bg-indigo-500/15 border-indigo-500/40 text-indigo-800 dark:text-indigo-200"
+              : "border-black/8 dark:border-white/8 text-slate-600 dark:text-slate-400 hover:bg-black/5 dark:hover:bg-white/5 hover:text-slate-800 dark:hover:text-slate-200"
+          }`}
+        >{w}</button>
+      {/each}
+    </div>
+  </div>
+{/snippet}
+
 <div class="p-4 space-y-6">
 
   <!-- FONT FAMILIES (compact dropdowns) -->
-  <section class="space-y-3">
-    <button
-      onclick={() => { showFontFamilies = !showFontFamilies; }}
-      aria-expanded={showFontFamilies}
-      class="w-full flex items-center justify-between cursor-pointer"
-    >
-      <div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Font families</div>
-      <span class="text-[10px] text-slate-500">{showFontFamilies ? "▲" : "▼"}</span>
-    </button>
-    {#if showFontFamilies}
+  <Section title="Font families" bind:open={showFontFamilies}>
     {#each [
       { label: "Body", token: "--sf-font-body", current: currentBodyFont, opts: BODY_STACKS },
       { label: "Heading", token: "--sf-font-heading", current: currentHeadingFont, opts: HEADING_STACKS },
@@ -332,22 +353,12 @@
         Load &amp; apply to {customFontTarget}
       </button>
     </div>
-    {/if}
-  </section>
+  </Section>
 
   <div class="h-px bg-black/6 dark:bg-white/6"></div>
 
   <!-- PER-TYPE (body + h1–h6) -->
-  <section class="space-y-3">
-    <button
-      onclick={() => { showPerType = !showPerType; }}
-      aria-expanded={showPerType}
-      class="w-full flex items-center justify-between cursor-pointer"
-    >
-      <div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Per-type styles</div>
-      <span class="text-[10px] text-slate-500">{showPerType ? "▲" : "▼"}</span>
-    </button>
-    {#if showPerType}
+  <Section title="Per-type styles" bind:open={showPerType}>
 
     <!-- Level selector -->
     <div class="flex bg-black/5 dark:bg-white/5 border border-black/8 dark:border-white/8 rounded-lg p-0.5 gap-0.5">
@@ -477,53 +488,16 @@
         >reset {activeLevel.label}</button>
       {/if}
     </div>
-    {/if}
-  </section>
+  </Section>
 
   <div class="h-px bg-black/6 dark:bg-white/6"></div>
 
   <!-- BODY TEXT -->
-  <section class="space-y-4">
-    <button
-      onclick={() => { showBodyText = !showBodyText; }}
-      aria-expanded={showBodyText}
-      class="w-full flex items-center justify-between cursor-pointer"
-    >
-      <div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Body text</div>
-      <span class="text-[10px] text-slate-500">{showBodyText ? "▲" : "▼"}</span>
-    </button>
-    {#if showBodyText}
+  <Section title="Body text" spacing="space-y-4" bind:open={showBodyText}>
 
     <!-- Font weights -->
-    {#each [
-      { label: "Body strong", tokenName: "--sf-font-weight-strong" },
-      { label: "Interactive", tokenName: "--sf-font-weight-interactive" },
-    ] as row (row.tokenName)}
-      {@const defaultVal = WEIGHT_DEFAULTS[row.tokenName] ?? "600"}
-      {@const current = overrides[row.tokenName] ?? defaultVal}
-      {@const isOverridden = row.tokenName in overrides}
-      <div class="group">
-        <div class="flex items-center justify-between mb-1.5">
-          <span class="text-[11px] font-semibold text-slate-800 dark:text-slate-200">{row.label} weight</span>
-          {#if isOverridden}
-            <button onclick={() => onReset(row.tokenName)} class="text-[9px] text-slate-500 hover:text-rose-600 dark:hover:text-rose-400 cursor-pointer opacity-100 sm:opacity-0 sm:group-hover:opacity-100 sm:group-focus-within:opacity-100 focus:opacity-100 transition-colors">reset</button>
-          {/if}
-        </div>
-        <div class="flex gap-1">
-          {#each WEIGHT_OPTIONS as w (w)}
-            <button
-              onclick={() => w === defaultVal && !isOverridden ? undefined : (w === defaultVal ? onReset(row.tokenName) : onSet(row.tokenName, w))}
-              style={`font-weight: ${parseInt(w)}`}
-              class={`flex-1 py-1.5 rounded-lg text-[10px] border transition-all cursor-pointer font-mono ${
-                current === w
-                  ? "bg-indigo-500/15 border-indigo-500/40 text-indigo-800 dark:text-indigo-200"
-                  : "border-black/8 dark:border-white/8 text-slate-600 dark:text-slate-400 hover:bg-black/5 dark:hover:bg-white/5 hover:text-slate-800 dark:hover:text-slate-200"
-              }`}
-            >{w}</button>
-          {/each}
-        </div>
-      </div>
-    {/each}
+    {@render weightGrid("Body strong", "--sf-font-weight-strong", WEIGHT_DEFAULTS["--sf-font-weight-strong"] ?? "600")}
+    {@render weightGrid("Interactive", "--sf-font-weight-interactive", WEIGHT_DEFAULTS["--sf-font-weight-interactive"] ?? "600")}
 
     <!-- Em style toggle -->
     <div>
@@ -610,22 +584,12 @@
         <button onclick={() => onReset("--sf-link-external-label")} class="text-[9px] text-slate-500 hover:text-rose-600 dark:hover:text-rose-400 cursor-pointer shrink-0">reset</button>
       {/if}
     </div>
-    {/if}
-  </section>
+  </Section>
 
   <div class="h-px bg-black/6 dark:bg-white/6"></div>
 
   <!-- FONT WEIGHT SCALE -->
-  <section class="space-y-3">
-    <button
-      onclick={() => { showFontWeights = !showFontWeights; }}
-      aria-expanded={showFontWeights}
-      class="w-full flex items-center justify-between cursor-pointer"
-    >
-      <div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Font weight scale</div>
-      <span class="text-[10px] text-slate-500">{showFontWeights ? "▲" : "▼"}</span>
-    </button>
-    {#if showFontWeights}
+  <Section title="Font weight scale" bind:open={showFontWeights}>
       <p class="text-[9px] text-slate-400 dark:text-slate-600 leading-relaxed">Named weight tokens. Override if your font uses non-standard axis values.</p>
       {#each [
         { label: "Light",    token: "--sf-font-weight-light",    def: 300 },
@@ -657,22 +621,12 @@
           </div>
         </div>
       {/each}
-    {/if}
-  </section>
+  </Section>
 
   <div class="h-px bg-black/6 dark:bg-white/6"></div>
 
   <!-- DISPLAY TYPE -->
-  <section class="space-y-4">
-    <button
-      onclick={() => { showDisplayType = !showDisplayType; }}
-      aria-expanded={showDisplayType}
-      class="w-full flex items-center justify-between cursor-pointer"
-    >
-      <div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Display type</div>
-      <span class="text-[10px] text-slate-500">{showDisplayType ? "▲" : "▼"}</span>
-    </button>
-    {#if showDisplayType}
+  <Section title="Display type" spacing="space-y-4" bind:open={showDisplayType}>
 
     <ClampField
       title="Display base size"
@@ -685,14 +639,29 @@
       onMaxChange={(v) => onSet("--sf-text-display-base-max", String(v))}
     />
 
-    <!-- Display line heights -->
-    <div class="grid grid-cols-2 gap-3">
+    <!-- Display scale multiplier — mirrors the text scale's "Scale multiplier"
+         so both fluid scales expose the same set of adjustments. -->
+    <SliderRow
+      label="Scale multiplier" value={displayScale} min={0.75} max={1.5} step={0.01}
+      help="--sf-text-display-scale — multiplies every display size at once."
+      overridden={"--sf-text-display-scale" in overrides}
+      onChange={(v) => onSet("--sf-text-display-scale", String(v))}
+      onReset={() => onReset("--sf-text-display-scale")}
+    />
+
+    <p class="text-[9px] text-slate-400 dark:text-slate-600 leading-relaxed">
+      Modular ratio is shared with the text scale (Mobile {ratioMin} → Desktop {ratioMax}) — edit it under “Modular scale”.
+    </p>
+
+    <!-- Display line heights (s / m / l) -->
+    <div class="grid grid-cols-3 gap-3">
       {#each [
-        { label: "Display L line-height", token: "--sf-display-l-line-height", def: 1 },
-        { label: "Display M line-height", token: "--sf-display-m-line-height", def: 1.05 },
+        { label: "Display S", token: "--sf-display-s-line-height", def: 1.1 },
+        { label: "Display M", token: "--sf-display-m-line-height", def: 1.05 },
+        { label: "Display L", token: "--sf-display-l-line-height", def: 1 },
       ] as row (row.token)}
         <div>
-          <div class="text-[9px] text-slate-400 dark:text-slate-600 mb-1">{row.label}</div>
+          <div class="text-[9px] text-slate-400 dark:text-slate-600 mb-1">{row.label} line-height</div>
           <SliderRow
             label="" value={num(row.token, row.def)} min={0.8} max={1.5} step={0.025}
             overridden={row.token in overrides}
@@ -704,51 +673,14 @@
     </div>
 
     <!-- Display weight -->
-    {#each [
-      { label: "Display",  tokenName: "--sf-font-weight-display" },
-      { label: "Heading",  tokenName: "--sf-font-weight-heading" },
-    ] as row (row.tokenName)}
-      {@const defaultVal = WEIGHT_DEFAULTS[row.tokenName] ?? "700"}
-      {@const current = overrides[row.tokenName] ?? defaultVal}
-      {@const isOverridden = row.tokenName in overrides}
-      <div class="group">
-        <div class="flex items-center justify-between mb-1.5">
-          <span class="text-[11px] font-semibold text-slate-800 dark:text-slate-200">{row.label} weight</span>
-          {#if isOverridden}
-            <button onclick={() => onReset(row.tokenName)} class="text-[9px] text-slate-500 hover:text-rose-600 dark:hover:text-rose-400 cursor-pointer opacity-100 sm:opacity-0 sm:group-hover:opacity-100 sm:group-focus-within:opacity-100 focus:opacity-100 transition-colors">reset</button>
-          {/if}
-        </div>
-        <div class="flex gap-1">
-          {#each WEIGHT_OPTIONS as w (w)}
-            <button
-              onclick={() => w === defaultVal && !isOverridden ? undefined : (w === defaultVal ? onReset(row.tokenName) : onSet(row.tokenName, w))}
-              style={`font-weight: ${parseInt(w)}`}
-              class={`flex-1 py-1.5 rounded-lg text-[10px] border transition-all cursor-pointer font-mono ${
-                current === w
-                  ? "bg-indigo-500/15 border-indigo-500/40 text-indigo-800 dark:text-indigo-200"
-                  : "border-black/8 dark:border-white/8 text-slate-600 dark:text-slate-400 hover:bg-black/5 dark:hover:bg-white/5 hover:text-slate-800 dark:hover:text-slate-200"
-              }`}
-            >{w}</button>
-          {/each}
-        </div>
-      </div>
-    {/each}
-    {/if}
-  </section>
+    {@render weightGrid("Display", "--sf-font-weight-display", WEIGHT_DEFAULTS["--sf-font-weight-display"] ?? "700")}
+    {@render weightGrid("Heading", "--sf-font-weight-heading", WEIGHT_DEFAULTS["--sf-font-weight-heading"] ?? "700")}
+  </Section>
 
   <div class="h-px bg-black/6 dark:bg-white/6"></div>
 
   <!-- FINE-TUNE (type ramp clamp + rhythm + tracking) -->
-  <section class="space-y-4">
-    <button
-      onclick={() => { showModularScale = !showModularScale; }}
-      aria-expanded={showModularScale}
-      class="w-full flex items-center justify-between cursor-pointer"
-    >
-      <div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Modular scale (Mobile → Desktop)</div>
-      <span class="text-[10px] text-slate-500">{showModularScale ? "▲" : "▼"}</span>
-    </button>
-    {#if showModularScale}
+  <Section title="Modular scale (Mobile → Desktop)" spacing="space-y-4" bind:open={showModularScale}>
     <p class="text-[10px] text-slate-400 dark:text-slate-600 leading-relaxed">
       Utopia-style fluid scale. Each endpoint has three values — viewport width,
       base size, and modular ratio. Sizes interpolate fluidly between mobile and desktop.
@@ -783,6 +715,15 @@
       onRatioMaxChange={(v) => onSet("--sf-text-ratio-max", String(v))}
     />
 
+    <!-- Text scale multiplier — mirrors the display scale's "Scale multiplier". -->
+    <SliderRow
+      label="Scale multiplier" value={textScale} min={0.75} max={1.5} step={0.01}
+      help="--sf-text-scale — multiplies every text size at once."
+      overridden={"--sf-text-scale" in overrides}
+      onChange={(v) => onSet("--sf-text-scale", String(v))}
+      onReset={() => onReset("--sf-text-scale")}
+    />
+
     <!-- Line height scale -->
     <div>
       <div class="text-[10px] font-semibold text-slate-600 dark:text-slate-400 mb-2">Line height scale</div>
@@ -854,8 +795,7 @@
         </div>
       {/if}
     </div>
-    {/if}
-  </section>
+  </Section>
 
   <div class="h-px bg-black/6 dark:bg-white/6"></div>
 
@@ -870,18 +810,38 @@
       <span class="text-[10px] text-slate-500">{showScalePreview ? "▲" : "▼"}</span>
     </button>
     {#if showScalePreview}
-    <div class="bg-black/4 dark:bg-white/4 rounded-xl border border-black/8 dark:border-white/8 p-3 space-y-1 overflow-hidden">
+    {@const midBase = (baseMin + baseMax) / 2}
+    {@const midDisp = (dispMin + dispMax) / 2}
+    {@const midRatio = (ratioMin + ratioMax) / 2}
+    <!-- Each "Aa" renders at its real midpoint rem size — no cap. The box
+         scrolls if the largest steps are tall so nothing is distorted. -->
+    <div class="bg-black/4 dark:bg-white/4 rounded-xl border border-black/8 dark:border-white/8 p-3 space-y-1 max-h-96 overflow-y-auto">
+      <div class="text-[9px] font-semibold text-slate-500 mb-1">Text</div>
       {#each [...TEXT_STEPS].reverse() as { label, factor } (label)}
-        {@const midBase = (baseMin + baseMax) / 2}
         {@const size = midBase * factor * textScale}
         <div class="flex items-baseline gap-2">
           <span class="text-[9px] font-mono text-slate-400 dark:text-slate-600 w-6 shrink-0 text-right">{label}</span>
           <span
-            class="text-slate-900/80 dark:text-white/80 font-medium leading-none truncate"
-            style={`font-size: ${Math.min(size, 2.5)}rem; font-family: ${currentBodyFont || "inherit"}`}
-          >
-            Aa
-          </span>
+            class="text-slate-900/80 dark:text-white/80 font-medium leading-none"
+            style={`font-size: ${size.toFixed(3)}rem; font-family: ${currentBodyFont || "inherit"}`}
+          >Aa</span>
+          <span class="text-[9px] font-mono text-slate-400 dark:text-slate-600 ml-auto shrink-0">{size.toFixed(2)}rem</span>
+        </div>
+      {/each}
+
+      <div class="text-[9px] font-semibold text-slate-500 mt-3 mb-1">Display</div>
+      {#each [
+        { label: "l", factor: midRatio * midRatio },
+        { label: "m", factor: midRatio },
+        { label: "s", factor: 1 },
+      ] as { label, factor } (label)}
+        {@const size = midDisp * factor * displayScale}
+        <div class="flex items-baseline gap-2">
+          <span class="text-[9px] font-mono text-slate-400 dark:text-slate-600 w-6 shrink-0 text-right">{label}</span>
+          <span
+            class="text-slate-900/80 dark:text-white/80 font-medium leading-none"
+            style={`font-size: ${size.toFixed(3)}rem; font-family: ${currentHeadingFont || currentBodyFont || "inherit"}`}
+          >Aa</span>
           <span class="text-[9px] font-mono text-slate-400 dark:text-slate-600 ml-auto shrink-0">{size.toFixed(2)}rem</span>
         </div>
       {/each}
@@ -892,16 +852,7 @@
   <div class="h-px bg-black/6 dark:bg-white/6"></div>
 
   <!-- LINE LENGTHS -->
-  <section class="space-y-3">
-    <button
-      onclick={() => { showLineLengths = !showLineLengths; }}
-      aria-expanded={showLineLengths}
-      class="w-full flex items-center justify-between cursor-pointer"
-    >
-      <div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Line lengths (max-width)</div>
-      <span class="text-[10px] text-slate-500">{showLineLengths ? "▲" : "▼"}</span>
-    </button>
-    {#if showLineLengths}
+  <Section title="Line lengths (max-width)" bind:open={showLineLengths}>
       <p class="text-[9px] text-slate-400 dark:text-slate-600 leading-relaxed">
         Per-text-size max-width caps on <span class="font-mono text-slate-600 dark:text-slate-400">.sf-text-*</span> elements. Set to <span class="font-mono text-slate-600 dark:text-slate-400">none</span> to remove the constraint; use <span class="font-mono text-slate-600 dark:text-slate-400">ch</span> units for character-based measures.
       </p>
@@ -935,22 +886,12 @@
           </div>
         {/each}
       </div>
-    {/if}
-  </section>
+  </Section>
 
   <div class="h-px bg-black/6 dark:bg-white/6"></div>
 
   <!-- ADVANCED TYPOGRAPHY -->
-  <section class="space-y-3">
-    <button
-      onclick={() => { showAdvancedType = !showAdvancedType; }}
-      aria-expanded={showAdvancedType}
-      class="w-full flex items-center justify-between cursor-pointer"
-    >
-      <div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Advanced typography</div>
-      <span class="text-[10px] text-slate-500">{showAdvancedType ? "▲" : "▼"}</span>
-    </button>
-    {#if showAdvancedType}
+  <Section title="Advanced typography" bind:open={showAdvancedType}>
       <p class="text-[9px] text-slate-400 dark:text-slate-600 leading-relaxed">Advanced OpenType and variable-font axes. Leave as <span class="font-mono text-slate-600 dark:text-slate-400">normal</span> unless your font supports these features.</p>
 
       <!-- font-numeric -->
@@ -1024,6 +965,5 @@
           <button onclick={() => onReset("--sf-font-variation")} class="text-[8px] text-slate-500 hover:text-rose-600 dark:hover:text-rose-400 cursor-pointer shrink-0">reset</button>
         {/if}
       </div>
-    {/if}
-  </section>
+  </Section>
 </div>
diff --git a/configurator/src/lib/variableScales.ts b/configurator/src/lib/variableScales.ts
index 4fd07abb3..64f04ab70 100644
--- a/configurator/src/lib/variableScales.ts
+++ b/configurator/src/lib/variableScales.ts
@@ -38,3 +38,26 @@ export const CONTAINER_SCALE: VarOption[] = scale("container", [
 export const SIZE_SCALE: VarOption[] = scale("size", ["xs", "s", "m", "l", "xl"]);
 
 export const SHADOW_SCALE: VarOption[] = scale("shadow", ["xs", "s", "m", "l", "xl"]);
+
+/**
+ * Map a token's default value (e.g. `var(--sf-space-m)`) to the sibling scale
+ * it draws from, so generic editors can offer that scale as a dropdown by
+ * default. Returns null when the value doesn't reference a known scale.
+ */
+export function scaleForValue(value: string | null | undefined): VarOption[] | null {
+  if (!value) return null;
+  // Only a *pure* single-token reference qualifies — not a compound value like
+  // a border shorthand (`var(--sf-border-width-2) solid …`), which the dropdown
+  // would clobber down to just the width.
+  const m = value.trim().match(/^var\(\s*--sf-(space|radius|border-width|container|size|shadow)-[a-z0-9]+\s*\)$/);
+  if (!m) return null;
+  switch (m[1]) {
+    case "space":        return SPACE_SCALE;
+    case "radius":       return RADIUS_SCALE;
+    case "border-width": return BORDER_WIDTH_SCALE;
+    case "container":    return CONTAINER_SCALE;
+    case "size":         return SIZE_SCALE;
+    case "shadow":       return SHADOW_SCALE;
+    default:             return null;
+  }
+}