diff --git a/web/routes/uix/components/float-panel/+page.svelte b/web/routes/uix/components/float-panel/+page.svelte
index 994255a1e..91eb8ec9c 100644
--- a/web/routes/uix/components/float-panel/+page.svelte
+++ b/web/routes/uix/components/float-panel/+page.svelte
@@ -4,11 +4,12 @@
 		type FloatPanelColor,
 		type FloatPanelVariant
 	} from '$uix/eidos/components/float-panel';
+	import TokensPanel from '../../lib/TokensPanel.svelte';
 	import { compileMorfo } from '$uix/morfo';
 	import { floatPanelMorfo } from '@/uix/morfo/components/float-panel';
 	import { getActiveUix } from '$active-uix';
 
-	type Tab = 'live' | 'api' | 'morfo' | 'sema' | 'recipe' | 'a11y';
+	type Tab = 'live' | 'api' | 'morfo' | 'sema' | 'recipe' | 'tokens' | 'a11y';
 	type Side = 'top' | 'right' | 'bottom' | 'left';
 	type Align = 'start' | 'center' | 'end';
 	type TraceEntry = { event: string; family: string; at: number };
@@ -293,6 +294,7 @@
 			<span data-uix-tab-count>{events.length}</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>
 
@@ -515,6 +517,10 @@
 		</section>
 	{/if}
 
+	{#if tab === 'tokens'}
+		<TokensPanel component="float-panel" 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/metrics/+page.svelte b/web/routes/uix/components/metrics/+page.svelte
index 54f7bb4df..6f93a7f0c 100644
--- a/web/routes/uix/components/metrics/+page.svelte
+++ b/web/routes/uix/components/metrics/+page.svelte
@@ -27,13 +27,14 @@
 		ArrowUpRight
 	} from '$uix/eidos/components/icon';
 	import type { ColorRole } from '$uix/eidos/lib/types';
+	import TokensPanel from '../../lib/TokensPanel.svelte';
 	import { compileMorfo } from '$uix/morfo';
 	import { metricsMorfo } from '@/uix/morfo/components/metrics';
 	import { getActiveUix } from '$active-uix';
 
 	const uix = getActiveUix();
 
-	type Tab = 'live' | 'gallery' | 'api' | 'morfo' | 'sema' | 'recipe' | 'a11y';
+	type Tab = 'live' | 'gallery' | 'api' | 'morfo' | 'sema' | 'recipe' | 'tokens' | 'a11y';
 	type TraceEntry = { event: string; family: string; intent?: string; at: number };
 
 	let tab = $state<Tab>('live');
@@ -310,6 +311,7 @@
 			<span data-uix-tab-count>{events.length}</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>
 
@@ -934,6 +936,10 @@
 		</section>
 	{/if}
 
+	{#if tab === 'tokens'}
+		<TokensPanel component="metrics" 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/stepper/+page.svelte b/web/routes/uix/components/stepper/+page.svelte
index f9d8ce4a9..e1669bf3d 100644
--- a/web/routes/uix/components/stepper/+page.svelte
+++ b/web/routes/uix/components/stepper/+page.svelte
@@ -6,6 +6,7 @@
 		type StepperVariant
 	} from '$uix/eidos/components/stepper';
 	import { SvgCheck } from '$uix/eidos/components/svg';
+	import TokensPanel from '../../lib/TokensPanel.svelte';
 	import { compileMorfo } from '$uix/morfo';
 	import { stepperMorfo } from '@/uix/morfo/components/stepper';
 	import type { Intent } from '$uix/intent';
@@ -13,7 +14,7 @@
 	import { page } from '$app/state';
 	import { colorValue, PALETTE_SCALES } from '../../lib/harness.svelte';
 
-	type Tab = 'live' | 'api' | 'morfo' | 'sema' | 'recipe' | 'a11y';
+	type Tab = 'live' | 'api' | 'morfo' | 'sema' | 'recipe' | 'tokens' | 'a11y';
 	type Orientation = 'horizontal' | 'vertical';
 	type Direction = 'ltr' | 'rtl';
 
@@ -311,6 +312,7 @@
 			<span data-uix-tab-count>{events.length}</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>
 
@@ -611,6 +613,10 @@
 		</section>
 	{/if}
 
+	{#if tab === 'tokens'}
+		<TokensPanel component="stepper" 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/tag-group/+page.svelte b/web/routes/uix/components/tag-group/+page.svelte
index 9dce4c19f..c950aa74c 100644
--- a/web/routes/uix/components/tag-group/+page.svelte
+++ b/web/routes/uix/components/tag-group/+page.svelte
@@ -6,6 +6,7 @@
 		type TagGroupSize,
 		type TagGroupVariant
 	} from '$uix/eidos/components/tag-group';
+	import TokensPanel from '../../lib/TokensPanel.svelte';
 	import { compileMorfo } from '$uix/morfo';
 	import { tagGroupMorfo } from '@/uix/morfo/components/tag-group';
 	import type { Intent } from '$uix/intent';
@@ -27,7 +28,7 @@
 		...PALETTE_SCALES
 	] as const;
 
-	type Tab = 'live' | 'api' | 'morfo' | 'sema' | 'recipe' | 'a11y';
+	type Tab = 'live' | 'api' | 'morfo' | 'sema' | 'recipe' | 'tokens' | 'a11y';
 	type TagModel = {
 		value: string;
 		label: string;
@@ -333,6 +334,7 @@
 			<span data-uix-tab-count>{events.length}</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>
 
@@ -615,6 +617,10 @@
 		</section>
 	{/if}
 
+	{#if tab === 'tokens'}
+		<TokensPanel component="tag-group" 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/timeline/+page.svelte b/web/routes/uix/components/timeline/+page.svelte
index e4b1e64d1..d40b1ede5 100644
--- a/web/routes/uix/components/timeline/+page.svelte
+++ b/web/routes/uix/components/timeline/+page.svelte
@@ -16,6 +16,7 @@
 		Wrench,
 		Check
 	} from '$uix/eidos/components/icon';
+	import TokensPanel from '../../lib/TokensPanel.svelte';
 	import { compileMorfo } from '$uix/morfo';
 	import { timelineMorfo } from '@/uix/morfo/components/timeline';
 	import type { Intent } from '$uix/intent';
@@ -23,7 +24,7 @@
 	import { getActiveUix } from '$active-uix';
 	import { page } from '$app/state';
 
-	type Tab = 'live' | 'api' | 'morfo' | 'sema' | 'recipe' | 'a11y';
+	type Tab = 'live' | 'api' | 'morfo' | 'sema' | 'recipe' | 'tokens' | 'a11y';
 
 	const uix = getActiveUix();
 	const params = page.url.searchParams;
@@ -260,6 +261,7 @@
 			<span data-uix-tab-count>{eventsDecl.length}</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>
 
@@ -587,6 +589,10 @@
 		</section>
 	{/if}
 
+	{#if tab === 'tokens'}
+		<TokensPanel component="timeline" stage={stageRef ?? undefined} />
+	{/if}
+
 	{#if tab === 'a11y'}
 		<section data-uix-section>
 			<h2 data-uix-section-title>Accessibility</h2>