diff --git a/web/routes/uix/components/aura/+page.svelte b/web/routes/uix/components/aura/+page.svelte
index 803ab22e7..201141a5c 100644
--- a/web/routes/uix/components/aura/+page.svelte
+++ b/web/routes/uix/components/aura/+page.svelte
@@ -19,6 +19,7 @@
 	import SystemAxes from '../../lib/SystemAxes.svelte';
 	import MotionPanel from '../../lib/MotionPanel.svelte';
 	import SemaPanel from '../../lib/SemaPanel.svelte';
+	import TokensPanel from '../../lib/TokensPanel.svelte';
 	import { DemoTrace } from '../../lib/harness.svelte';
 
 	type Tab =
@@ -30,6 +31,7 @@
 		| 'api'
 		| 'morfo'
 		| 'recipe'
+		| 'tokens'
 		| 'a11y';
 	let tab = $state<Tab>('live');
 
@@ -333,6 +335,9 @@
 		<button data-uix-tab data-active={tab === 'recipe'} onclick={() => (tab = 'recipe')}
 			>Recipe</button
 		>
+		<button data-uix-tab data-active={tab === 'tokens'} onclick={() => (tab = 'tokens')}
+			>Tokens</button
+		>
 		<button data-uix-tab data-active={tab === 'a11y'} onclick={() => (tab = 'a11y')}>A11y</button>
 	</div>
 
@@ -671,6 +676,10 @@
 		</section>
 	{/if}
 
+	{#if tab === 'tokens'}
+		<TokensPanel component="aura" stage={stageRef ?? undefined} />
+	{/if}
+
 	{#if tab === 'a11y'}
 		<section data-uix-section>
 			<h2 data-uix-section-title>Accessibility</h2>
diff --git a/web/routes/uix/components/gradient-builder/+page.svelte b/web/routes/uix/components/gradient-builder/+page.svelte
index 941ccb2c0..3ed29e6e0 100644
--- a/web/routes/uix/components/gradient-builder/+page.svelte
+++ b/web/routes/uix/components/gradient-builder/+page.svelte
@@ -20,11 +20,22 @@
 	import SystemAxes from '../../lib/SystemAxes.svelte';
 	import MotionPanel from '../../lib/MotionPanel.svelte';
 	import SemaPanel from '../../lib/SemaPanel.svelte';
+	import TokensPanel from '../../lib/TokensPanel.svelte';
 	import { DemoTrace } from '../../lib/harness.svelte';
 
 	const uix = getActiveUix();
 
-	type Tab = 'live' | 'system' | 'motion' | 'sema' | 'services' | 'api' | 'morfo' | 'recipe' | 'a11y';
+	type Tab =
+		| 'live'
+		| 'system'
+		| 'motion'
+		| 'sema'
+		| 'services'
+		| 'api'
+		| 'morfo'
+		| 'recipe'
+		| 'tokens'
+		| 'a11y';
 	let tab = $state<Tab>('live');
 
 	const sizes: GradientBuilderSize[] = ['sm', 'md', 'lg'];
@@ -220,6 +231,9 @@
 		<button data-uix-tab data-active={tab === 'recipe'} onclick={() => (tab = 'recipe')}
 			>Recipe</button
 		>
+		<button data-uix-tab data-active={tab === 'tokens'} onclick={() => (tab = 'tokens')}
+			>Tokens</button
+		>
 		<button data-uix-tab data-active={tab === 'a11y'} onclick={() => (tab = 'a11y')}>A11y</button>
 	</div>
 
@@ -524,6 +538,10 @@
 		</section>
 	{/if}
 
+	{#if tab === 'tokens'}
+		<TokensPanel component="gradient-builder" stage={stageRef ?? undefined} />
+	{/if}
+
 	{#if tab === 'a11y'}
 		<section data-uix-section>
 			<h2 data-uix-section-title>Accessibility</h2>
diff --git a/web/routes/uix/components/nav-tree/+page.svelte b/web/routes/uix/components/nav-tree/+page.svelte
index e6844871f..b7bdc62ee 100644
--- a/web/routes/uix/components/nav-tree/+page.svelte
+++ b/web/routes/uix/components/nav-tree/+page.svelte
@@ -7,12 +7,13 @@
 	import SystemAxes from '../../lib/SystemAxes.svelte';
 	import MotionPanel from '../../lib/MotionPanel.svelte';
 	import SemaPanel from '../../lib/SemaPanel.svelte';
+	import TokensPanel from '../../lib/TokensPanel.svelte';
 	import { DemoTrace } from '../../lib/harness.svelte';
 
 	const uix = getActiveUix();
 
 	// prettier-ignore
-	type Tab = 'live' | 'system' | 'motion' | 'sema' | 'services' | 'api' | 'morfo' | 'recipe' | 'a11y';
+	type Tab = 'live' | 'system' | 'motion' | 'sema' | 'services' | 'api' | 'morfo' | 'recipe' | 'tokens' | 'a11y';
 	let tab = $state<Tab>('live');
 
 	const trace = new DemoTrace();
@@ -391,6 +392,9 @@
 		<button data-uix-tab data-active={tab === 'recipe'} onclick={() => (tab = 'recipe')}>
 			Recipe
 		</button>
+		<button data-uix-tab data-active={tab === 'tokens'} onclick={() => (tab = 'tokens')}>
+			Tokens
+		</button>
 		<button data-uix-tab data-active={tab === 'a11y'} onclick={() => (tab = 'a11y')}>A11y</button>
 	</div>
 
@@ -756,6 +760,10 @@
 		</section>
 	{/if}
 
+	{#if tab === 'tokens'}
+		<TokensPanel component="nav-tree" stage={stageRef ?? undefined} />
+	{/if}
+
 	{#if tab === 'a11y'}
 		<section data-uix-section>
 			<h2 data-uix-section-title>Accessibility</h2>
diff --git a/web/routes/uix/components/password-field/+page.svelte b/web/routes/uix/components/password-field/+page.svelte
index cdaebb62c..b7b44744a 100644
--- a/web/routes/uix/components/password-field/+page.svelte
+++ b/web/routes/uix/components/password-field/+page.svelte
@@ -11,6 +11,7 @@
 	import { getActiveUix } from '$active-uix';
 	import { passwordStrength, SECS_PASSWORD_STRENGTH_MAX } from '$libs/secs';
 	import { colorValue, PALETTE_SCALES } from '../../lib/harness.svelte';
+	import TokensPanel from '../../lib/TokensPanel.svelte';
 
 	// Number of visual segments — one per canonical strength step above zero.
 	const STRENGTH_SEGMENTS = Array.from(
@@ -18,7 +19,7 @@
 		(_, i) => i
 	);
 
-	type Tab = 'live' | 'api' | 'morfo' | 'sema' | 'recipe' | 'a11y';
+	type Tab = 'live' | 'api' | 'morfo' | 'sema' | 'recipe' | 'tokens' | 'a11y';
 	type TraceEntry = { event: string; family: string; intent?: string; at: number };
 
 	const uix = getActiveUix();
@@ -269,6 +270,9 @@
 		</button>
 		<button data-uix-tab data-active={tab === 'recipe'} onclick={() => (tab = 'recipe')}>Recipe</button
 		>
+		<button data-uix-tab data-active={tab === 'tokens'} onclick={() => (tab = 'tokens')}
+			>Tokens</button
+		>
 		<button data-uix-tab data-active={tab === 'a11y'} onclick={() => (tab = 'a11y')}>A11y</button>
 	</div>
 
@@ -718,6 +722,10 @@
 		</section>
 	{/if}
 
+	{#if tab === 'tokens'}
+		<TokensPanel component="password-field" stage={stageRef ?? undefined} />
+	{/if}
+
 	{#if tab === 'a11y'}
 		<section data-uix-section>
 			<h2 data-uix-section-title>Accessibility</h2>
diff --git a/web/routes/uix/components/radio-cards/+page.svelte b/web/routes/uix/components/radio-cards/+page.svelte
index 100a86985..a684dbb98 100644
--- a/web/routes/uix/components/radio-cards/+page.svelte
+++ b/web/routes/uix/components/radio-cards/+page.svelte
@@ -9,10 +9,11 @@
 	import { compileMorfo } from '$uix/morfo';
 	import { radioCardsMorfo } from '@/uix/morfo/components/radio-cards';
 	import { page } from '$app/state';
+	import TokensPanel from '../../lib/TokensPanel.svelte';
 
 	const params = page.url.searchParams;
 
-	type Tab = 'live' | 'examples' | 'api' | 'morfo' | 'recipe' | 'a11y';
+	type Tab = 'live' | 'examples' | 'api' | 'morfo' | 'recipe' | 'tokens' | 'a11y';
 	let tab = $state<Tab>('live');
 
 	let value = $state('pro');
@@ -178,6 +179,9 @@
 			<span data-uix-tab-count>{partsList.length}p</span>
 		</button>
 		<button data-uix-tab data-active={tab === 'recipe'} onclick={() => (tab = 'recipe')}>Recipe</button>
+		<button data-uix-tab data-active={tab === 'tokens'} onclick={() => (tab = 'tokens')}
+			>Tokens</button
+		>
 		<button data-uix-tab data-active={tab === 'a11y'} onclick={() => (tab = 'a11y')}>A11y</button>
 	</div>
 
@@ -390,6 +394,10 @@
 		</section>
 	{/if}
 
+	{#if tab === 'tokens'}
+		<TokensPanel component="radio-cards" stage={stageRef ?? undefined} />
+	{/if}
+
 	{#if tab === 'a11y'}
 		<section data-uix-section>
 			<h2 data-uix-section-title>Accessibility</h2>