diff --git a/configurator/src/components/TokenRow.svelte b/configurator/src/components/TokenRow.svelte
index b6267d34..97da5c89 100644
--- a/configurator/src/components/TokenRow.svelte
+++ b/configurator/src/components/TokenRow.svelte
@@ -78,7 +78,7 @@
   }
 </script>
 
-<div class="row" class:row--modified={modified}>
+<div class="row" class:row--modified={modified && !isConsume} class:row--consume={isConsume}>
   <div class="row__info">
     {#if friendly}
       <div class="row__name-line">
@@ -162,14 +162,23 @@
   </div>
 
   <div class="row__control">
-    <TokenEditor {token} />
-    <button
-      class="cfg-btn cfg-btn--ghost cfg-btn--icon row__reset"
-      onclick={() => clearOverride(token.name)}
-      disabled={!modified}
-      title={modified ? 'Reset to framework default' : 'No override to reset'}
-      aria-label="Reset {token.name}"
-    >⟲</button>
+    {#if isConsume}
+      <div
+        class="row__readonly"
+        title="Consumption token — derived from configure tokens. Edit the upstream source instead."
+      >
+        <code class="row__readonly-val">{token.value}</code>
+      </div>
+    {:else}
+      <TokenEditor {token} />
+      <button
+        class="cfg-btn cfg-btn--ghost cfg-btn--icon row__reset"
+        onclick={() => clearOverride(token.name)}
+        disabled={!modified}
+        title={modified ? 'Reset to framework default' : 'No override to reset'}
+        aria-label="Reset {token.name}"
+      >⟲</button>
+    {/if}
   </div>
 </div>
 
@@ -325,6 +334,30 @@
   }
   .row__reset { flex-shrink: 0; font-size: 14px; line-height: 1; }
 
+  /* Consume tokens — whole row is subtly de-emphasised and not interactive. */
+  .row--consume { opacity: 0.7; }
+  .row--consume:hover { background: transparent; }
+
+  .row__readonly {
+    flex: 1;
+    min-width: 0;
+    display: flex;
+    align-items: center;
+    padding: 7px 10px;
+    background: var(--cfg-bg-2);
+    border: 1px dashed var(--cfg-border);
+    border-radius: var(--cfg-radius-s);
+    overflow: hidden;
+  }
+  .row__readonly-val {
+    font-family: var(--cfg-mono);
+    font-size: 11.5px;
+    color: var(--cfg-text-faint);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
   @media (max-width: 720px) {
     .row {
       grid-template-columns: 1fr;
diff --git a/configurator/tests-e2e/presets.spec.js b/configurator/tests-e2e/presets.spec.js
index cadbb720..87d3201d 100644
--- a/configurator/tests-e2e/presets.spec.js
+++ b/configurator/tests-e2e/presets.spec.js
@@ -32,18 +32,18 @@ test('shadow presets: switching leaves no leftovers from the previous preset', a
 
 test('hand-edited values show NO active preset (never a wrong one)', async ({ page }) => {
   await gotoClean(page);
-  await sideItem(page, 'Borders').click();
-  await page.locator('.presets__btn', { hasText: 'Pill' }).click();
+  await sideItem(page, 'Shadows').click();
+  await page.locator('.presets__btn', { hasText: 'Strong' }).click();
   await page.keyboard.press('a');
-  // Hand-edit one of the preset's tokens in Advanced search.
-  await page.fill('#cfg-search', '--sf-radius-m');
-  const row = page.locator('.row', { hasText: '--sf-radius-m' }).first();
-  const input = row.locator('input[type="text"], input:not([type])').first();
-  await input.fill('3px');
-  await input.press('Enter');
-  await page.fill('#cfg-search', '');
+  // Open the power-knobs section and hand-edit --sf-shadow-strength to a value
+  // that differs from what the Strong preset set, deactivating it.
+  const power = page.locator('details.power');
+  await power.locator('summary').click();
+  const knob = power.locator('.knob', { hasText: '--sf-shadow-strength' });
+  await knob.locator('input[type="number"]').fill('0.05');
+  await knob.locator('input[type="number"]').press('Enter');
   await page.keyboard.press('b');
-  await sideItem(page, 'Borders').click();
+  await sideItem(page, 'Shadows').click();
   await expect(page.locator('.presets__btn[aria-pressed="true"]')).toHaveCount(0);
 });