diff --git a/src/prototypes/example-codex-kitchen-sink/index.vue b/src/prototypes/example-codex-kitchen-sink/index.vue
new file mode 100644
index 00000000..0cd97a9b
--- /dev/null
+++ b/src/prototypes/example-codex-kitchen-sink/index.vue
@@ -0,0 +1,126 @@
+<script setup lang="ts">
+import { ref, type Component } from 'vue'
+import { CdxTab, CdxTabs, CdxToastContainer } from '@wikimedia/codex'
+
+import { parseLeafTab, type MainTabId } from './lib/playground-tabs'
+import {
+  providePlaygroundLeafTab,
+  syncMainTabWithLeafTab,
+  usePlaygroundLeafTab,
+} from './lib/use-playground-leaf-tab'
+
+import ButtonsSection from './sections/ButtonsSection.vue'
+import FeedbackSection from './sections/FeedbackSection.vue'
+import IconsSection from './sections/IconsSection.vue'
+import FormElementsSection from './sections/FormElementsSection.vue'
+import MediaSection from './sections/MediaSection.vue'
+import NavigationSection from './sections/NavigationSection.vue'
+import SearchSection from './sections/SearchSection.vue'
+import ContentDataSection from './sections/ContentDataSection.vue'
+import ColorSection from './sections/ColorSection.vue'
+import TokenSection from './sections/TokenSection.vue'
+import TypographySection from './sections/TypographySection.vue'
+
+definePage({
+  meta: {
+    title: 'Codex playground',
+    description: 'Full Codex component, token, typography, and icon catalogue.',
+  },
+})
+
+const navItems = [
+  { id: 'typography', label: 'Typography' },
+  { id: 'color', label: 'Color' },
+  { id: 'tokens-layout', label: 'Layout' },
+  { id: 'tokens-appearance', label: 'Appearance' },
+  { id: 'tokens-animation', label: 'Animation' },
+  { id: 'icons', label: 'Icons' },
+  { id: 'components-buttons', label: 'Buttons' },
+  { id: 'components-form-elements', label: 'Form elements' },
+  { id: 'components-feedback', label: 'Feedback' },
+  { id: 'components-content-data', label: 'Content & data' },
+  { id: 'components-media', label: 'Media' },
+  { id: 'components-navigation', label: 'Navigation' },
+  { id: 'components-search', label: 'Search' },
+] as const
+
+const sectionByTab: Record<(typeof navItems)[number]['id'], Component> = {
+  typography: TypographySection,
+  color: ColorSection,
+  'tokens-layout': TokenSection,
+  'tokens-appearance': TokenSection,
+  'tokens-animation': TokenSection,
+  icons: IconsSection,
+  'components-buttons': ButtonsSection,
+  'components-form-elements': FormElementsSection,
+  'components-feedback': FeedbackSection,
+  'components-content-data': ContentDataSection,
+  'components-media': MediaSection,
+  'components-navigation': NavigationSection,
+  'components-search': SearchSection,
+}
+
+const tokenSectionByTab: Partial<Record<(typeof navItems)[number]['id'], 'layout' | 'appearance' | 'animation'>> = {
+  'tokens-layout': 'layout',
+  'tokens-appearance': 'appearance',
+  'tokens-animation': 'animation',
+}
+
+type TabId = MainTabId
+
+const leafTab = usePlaygroundLeafTab()
+const { subTabMemory } = providePlaygroundLeafTab(leafTab)
+
+const activeTab = ref<TabId>(parseLeafTab(leafTab.value)?.main ?? 'typography')
+syncMainTabWithLeafTab(activeTab, leafTab, subTabMemory)
+</script>
+
+<template>
+  <main>
+    <!-- <h1>Codex playground</h1> -->
+
+    <CdxTabs v-model:active="activeTab" class="playground-tabs" aria-label="Sections">
+      <CdxTab v-for="item in navItems" :key="item.id" :name="item.id" :label="item.label">
+        <article>
+          <TokenSection
+            v-if="tokenSectionByTab[item.id]"
+            :section="tokenSectionByTab[item.id]!"
+          />
+          <component v-else :is="sectionByTab[item.id]" />
+        </article>
+      </CdxTab>
+    </CdxTabs>
+
+    <CdxToastContainer />
+  </main>
+</template>
+
+<style scoped>
+main {
+  /* padding: 6px 0px; */
+  background-color: var(--background-color-base);
+}
+
+.playground-tabs {
+  /* padding: 0px var(--spacing-100); */
+  /* margin: 0px 0px; */
+  /* padding: 0px 4px; */
+  /* padding-top: 4px; */
+  /* background-color: var(--background-color-base); */
+}
+
+.playground-tabs :deep(> .cdx-tabs__header) {
+  position: sticky;
+  top: 0px;
+  z-index: 2;
+  background-color: var(--background-color-base);
+  padding-top: 4px;
+  margin: 0px 0px;
+  padding-left: 4px;
+  padding-right: 4px;
+}
+
+article {
+  /* padding: 0px 16px; */
+}
+</style>
diff --git a/src/prototypes/example-codex-kitchen-sink/lib/color-contrast.ts b/src/prototypes/example-codex-kitchen-sink/lib/color-contrast.ts
new file mode 100644
index 00000000..46127f37
--- /dev/null
+++ b/src/prototypes/example-codex-kitchen-sink/lib/color-contrast.ts
@@ -0,0 +1,99 @@
+interface Rgba {
+  r: number
+  g: number
+  b: number
+  a: number
+}
+
+function parseColor(color: string): Rgba | null {
+  if (!color || color === 'transparent') {
+    return { r: 0, g: 0, b: 0, a: 0 }
+  }
+
+  const rgbaMatch = color.match(
+    /rgba?\(\s*([\d.]+)[,\s]+([\d.]+)[,\s]+([\d.]+)(?:[,\s/]+([\d.]+))?\s*\)/,
+  )
+  if (rgbaMatch) {
+    return {
+      r: Number(rgbaMatch[1]),
+      g: Number(rgbaMatch[2]),
+      b: Number(rgbaMatch[3]),
+      a: rgbaMatch[4] !== undefined ? Number(rgbaMatch[4]) : 1,
+    }
+  }
+
+  const hexMatch = color.match(/^#([0-9a-f]{3,8})$/i)
+  if (!hexMatch) return null
+
+  let hex = hexMatch[1]
+  if (hex.length === 3) {
+    hex = hex
+      .split('')
+      .map((char) => char + char)
+      .join('')
+  }
+
+  if (hex.length < 6) return null
+
+  return {
+    r: parseInt(hex.slice(0, 2), 16),
+    g: parseInt(hex.slice(2, 4), 16),
+    b: parseInt(hex.slice(4, 6), 16),
+    a: 1,
+  }
+}
+
+function relativeLuminance(r: number, g: number, b: number): number {
+  const channel = (value: number) => {
+    const normalized = value / 255
+    return normalized <= 0.03928
+      ? normalized / 12.92
+      : ((normalized + 0.055) / 1.055) ** 2.4
+  }
+
+  return 0.2126 * channel(r) + 0.7152 * channel(g) + 0.0722 * channel(b)
+}
+
+function compositeOver(fg: Rgba, bg: Rgba): [number, number, number] {
+  if (fg.a <= 0) return [bg.r, bg.g, bg.b]
+  if (fg.a >= 1) return [fg.r, fg.g, fg.b]
+
+  const backdropAlpha = bg.a * (1 - fg.a)
+  const outAlpha = fg.a + backdropAlpha
+  if (outAlpha <= 0) return [bg.r, bg.g, bg.b]
+
+  return [
+    Math.round((fg.r * fg.a + bg.r * backdropAlpha) / outAlpha),
+    Math.round((fg.g * fg.a + bg.g * backdropAlpha) / outAlpha),
+    Math.round((fg.b * fg.a + bg.b * backdropAlpha) / outAlpha),
+  ]
+}
+
+function getCanvasColor(): Rgba | null {
+  return parseColor(getComputedStyle(document.documentElement).backgroundColor)
+}
+
+function resolvedBackgroundLuminance(element: HTMLElement): number | null {
+  const canvasColor = getCanvasColor()
+  const backgroundColor = parseColor(getComputedStyle(element).backgroundColor)
+  if (!backgroundColor || !canvasColor) return null
+
+  const [r, g, b] = compositeOver(backgroundColor, canvasColor)
+  return relativeLuminance(r, g, b)
+}
+
+export type SwatchTextTone = 'light' | 'dark'
+
+export function getSwatchTextToneForBackground(element: HTMLElement): SwatchTextTone {
+  const luminance = resolvedBackgroundLuminance(element)
+  if (luminance === null) return 'dark'
+
+  return luminance > 0.5 ? 'dark' : 'light'
+}
+
+export function needsInvertedTextBackground(element: HTMLElement): boolean {
+  const color = parseColor(getComputedStyle(element).color)
+  if (!color) return false
+
+  return relativeLuminance(color.r, color.g, color.b) > 0.65
+}
diff --git a/src/prototypes/example-codex-kitchen-sink/lib/component-tabs.ts b/src/prototypes/example-codex-kitchen-sink/lib/component-tabs.ts
new file mode 100644
index 00000000..62a58975
--- /dev/null
+++ b/src/prototypes/example-codex-kitchen-sink/lib/component-tabs.ts
@@ -0,0 +1,70 @@
+export const buttonsSubTabs = [
+  { id: 'button', label: 'Button' },
+  { id: 'button-group', label: 'ButtonGroup' },
+  { id: 'menu-button', label: 'MenuButton' },
+  { id: 'toggle-button', label: 'ToggleButton' },
+  { id: 'toggle-button-group', label: 'ToggleButtonGroup' },
+] as const
+
+export const formElementsSubTabs = [
+  { id: 'checkbox', label: 'Checkbox' },
+  { id: 'chip-input', label: 'ChipInput' },
+  { id: 'combobox', label: 'Combobox' },
+  { id: 'field', label: 'Field' },
+  { id: 'label', label: 'Label' },
+  { id: 'lookup', label: 'Lookup' },
+  { id: 'multiselect-lookup', label: 'MultiselectLookup' },
+  { id: 'radio', label: 'Radio' },
+  { id: 'select', label: 'Select' },
+  { id: 'text-area', label: 'TextArea' },
+  { id: 'text-input', label: 'TextInput' },
+  { id: 'toggle-switch', label: 'ToggleSwitch' },
+] as const
+
+export const contentDataSubTabs = [
+  { id: 'accordion', label: 'Accordion' },
+  { id: 'card', label: 'Card' },
+  { id: 'dialog', label: 'Dialog' },
+  { id: 'menu', label: 'Menu' },
+  { id: 'menu-item', label: 'MenuItem' },
+  { id: 'popover', label: 'Popover' },
+  { id: 'table', label: 'Table' },
+  { id: 'tooltip', label: 'Tooltip' },
+] as const
+
+export const feedbackSubTabs = [
+  { id: 'info-chip', label: 'InfoChip' },
+  { id: 'message', label: 'Message' },
+  { id: 'progress-bar', label: 'ProgressBar' },
+  { id: 'progress-indicator', label: 'ProgressIndicator' },
+  { id: 'toast', label: 'Toast' },
+] as const
+
+export const mediaSubTabs = [
+  { id: 'image', label: 'Image' },
+  { id: 'thumbnail', label: 'Thumbnail' },
+] as const
+
+export const navigationSubTabs = [
+  { id: 'link', label: 'Link' },
+  { id: 'tabs', label: 'Tabs' },
+] as const
+
+export const searchSubTabs = [
+  { id: 'search-input', label: 'SearchInput' },
+  { id: 'typeahead-search', label: 'TypeaheadSearch' },
+  { id: 'search-result-title', label: 'SearchResultTitle' },
+] as const
+
+export const iconsSubTabs = [
+  { id: 'size', label: 'Size' },
+  { id: 'type', label: 'Type' },
+] as const
+
+/** Codex 2.x IconSizes — xx-small was removed and no longer applies sizing. */
+export const iconSizeEntries = [
+  { id: 'x-small', deprecated: false },
+  { id: 'small', deprecated: false },
+  { id: 'medium', deprecated: false },
+  { id: 'xx-small', deprecated: true },
+] as const
diff --git a/src/prototypes/example-codex-kitchen-sink/lib/fixtures.ts b/src/prototypes/example-codex-kitchen-sink/lib/fixtures.ts
new file mode 100644
index 00000000..debc51ea
--- /dev/null
+++ b/src/prototypes/example-codex-kitchen-sink/lib/fixtures.ts
@@ -0,0 +1,113 @@
+import { cdxIconAdd, cdxIconEdit, cdxIconTrash } from '@wikimedia/codex-icons'
+import type { ChipInputItem, MenuItemData, SearchResult, TableColumn, TableRow } from '@wikimedia/codex'
+
+export const menuItems: MenuItemData[] = [
+  { label: 'Edit', value: 'edit', icon: cdxIconEdit },
+  { label: 'Delete', value: 'delete', icon: cdxIconTrash },
+  { label: 'Add', value: 'add', icon: cdxIconAdd },
+]
+
+export const selectOptions = [
+  { label: 'Option A', value: 'a' },
+  { label: 'Option B', value: 'b' },
+  { label: 'Option C', value: 'c' },
+]
+
+export const lookupResults: MenuItemData[] = [
+  { label: 'Albert Einstein', value: 'Albert Einstein' },
+  { label: 'Albert Camus', value: 'Albert Camus' },
+  { label: 'Alberta', value: 'Alberta' },
+]
+
+export const chipItems: ChipInputItem[] = [
+  { value: 'alpha' },
+  { value: 'beta' },
+]
+
+export const tableColumns: TableColumn[] = [
+  { id: 'title', label: 'Title', sortable: true },
+  { id: 'status', label: 'Status', sortable: true },
+  { id: 'views', label: 'Views', sortable: true },
+]
+
+export const tableRows: TableRow[] = [
+  { id: '1', title: 'Mont Blanc', status: 'Published', views: 1200 },
+  { id: '2', title: 'Lake Geneva', status: 'Draft', views: 340 },
+  { id: '3', title: 'Rhine', status: 'Published', views: 890 },
+]
+
+const wetLegImageUrl = `${import.meta.env.BASE_URL}images/wet-leg-o2-infobox.jpg`
+
+export const thumbnailUrl = wetLegImageUrl
+
+export const imageUrl = wetLegImageUrl
+
+export const typeaheadSearchCatalog: SearchResult[] = [
+  {
+    value: 'Albert Einstein',
+    label: 'Albert Einstein',
+    description: 'German-born theoretical physicist',
+    url: 'https://en.wikipedia.org/wiki/Albert_Einstein',
+    thumbnail: { url: thumbnailUrl, width: 40, height: 40 },
+  },
+  {
+    value: 'Albert Camus',
+    label: 'Albert Camus',
+    description: 'French philosopher and author',
+    url: 'https://en.wikipedia.org/wiki/Albert_Camus',
+  },
+  {
+    value: 'Alberta',
+    label: 'Alberta',
+    description: 'Province of Canada',
+    url: 'https://en.wikipedia.org/wiki/Alberta',
+  },
+  {
+    value: 'Albert, Prince Consort',
+    label: 'Albert, Prince Consort',
+    description: 'Consort of Queen Victoria',
+    url: 'https://en.wikipedia.org/wiki/Albert,_Prince_Consort',
+  },
+  {
+    value: 'Albrecht Dürer',
+    label: 'Albrecht Dürer',
+    description: 'German painter and printmaker',
+    url: 'https://en.wikipedia.org/wiki/Albrecht_D%C3%BCrer',
+  },
+  {
+    value: 'Alberta (disambiguation)',
+    label: 'Alberta (disambiguation)',
+    description: 'Topics referred to by the same term',
+    url: 'https://en.wikipedia.org/wiki/Alberta_(disambiguation)',
+  },
+]
+
+export function filterTypeaheadSearchResults(query: string): SearchResult[] {
+  const trimmed = query.trim().toLowerCase()
+  if (!trimmed.length) return []
+
+  return typeaheadSearchCatalog.filter((result) => {
+    const label = String(result.label ?? result.value).toLowerCase()
+    const description = result.description?.toLowerCase() ?? ''
+    return label.includes(trimmed) || description.includes(trimmed)
+  })
+}
+
+export const buttonGroupItems = [
+  { value: 'edit', label: 'Edit' },
+  { value: 'history', label: 'History' },
+  { value: 'watch', label: 'Watch' },
+]
+
+export const buttonGroupLongItems = [
+  { value: 'all', label: 'All' },
+  { value: 'newcomers', label: 'Newcomers' },
+  { value: 'mobile', label: 'Mobile edits' },
+  { value: 'needs-review', label: 'Needs review' },
+]
+
+export const toggleGroupItems = [
+  { value: 'left', label: 'Left' },
+  { value: 'center', label: 'Center' },
+  { value: 'right', label: 'Right' },
+]
diff --git a/src/prototypes/example-codex-kitchen-sink/lib/palette-colors.ts b/src/prototypes/example-codex-kitchen-sink/lib/palette-colors.ts
new file mode 100644
index 00000000..a5a22e05
--- /dev/null
+++ b/src/prototypes/example-codex-kitchen-sink/lib/palette-colors.ts
@@ -0,0 +1,183 @@
+export interface PaletteColor {
+  name: string
+  value: string
+}
+
+export interface PaletteGroup {
+  family: string
+  colors: PaletteColor[]
+}
+
+/** Raw Codex palette from https://doc.wikimedia.org/codex/latest/style-guide/colors.html */
+export const codexPaletteGroups: PaletteGroup[] = [
+  {
+    family: 'White',
+    colors: [{ name: 'white', value: '#fff' }],
+  },
+  {
+    family: 'Black',
+    colors: [{ name: 'black', value: '#000' }],
+  },
+  {
+    family: 'Gray',
+    colors: [
+      { name: 'gray50', value: '#f8f9fa' },
+      { name: 'gray100', value: '#eaecf0' },
+      { name: 'gray200', value: '#dadde3' },
+      { name: 'gray300', value: '#c8ccd1' },
+      { name: 'gray400', value: '#a2a9b1' },
+      { name: 'gray500', value: '#72777d' },
+      { name: 'gray600', value: '#54595d' },
+      { name: 'gray700', value: '#404244' },
+      { name: 'gray800', value: '#27292d' },
+      { name: 'gray900', value: '#202122' },
+      { name: 'gray1000', value: '#101418' },
+    ],
+  },
+  {
+    family: 'Red',
+    colors: [
+      { name: 'red50', value: '#ffe9e5' },
+      { name: 'red100', value: '#ffdad3' },
+      { name: 'red200', value: '#ffc8bd' },
+      { name: 'red300', value: '#fea898' },
+      { name: 'red400', value: '#fd7865' },
+      { name: 'red500', value: '#f54739' },
+      { name: 'red600', value: '#d74032' },
+      { name: 'red700', value: '#bf3c2c' },
+      { name: 'red800', value: '#9f3526' },
+      { name: 'red900', value: '#612419' },
+      { name: 'red1000', value: '#3c1a13' },
+    ],
+  },
+  {
+    family: 'Orange',
+    colors: [
+      { name: 'orange50', value: '#ffead4' },
+      { name: 'orange100', value: '#ffdcb8' },
+      { name: 'orange200', value: '#ffc894' },
+      { name: 'orange300', value: '#ffa758' },
+      { name: 'orange400', value: '#f97f26' },
+      { name: 'orange500', value: '#d46926' },
+      { name: 'orange600', value: '#bb5c26' },
+      { name: 'orange700', value: '#a95226' },
+      { name: 'orange800', value: '#8e4424' },
+      { name: 'orange900', value: '#572c19' },
+      { name: 'orange1000', value: '#361d13' },
+    ],
+  },
+  {
+    family: 'Yellow',
+    colors: [
+      { name: 'yellow50', value: '#fdf2d5' },
+      { name: 'yellow100', value: '#ffe49c' },
+      { name: 'yellow200', value: '#ffcf4f' },
+      { name: 'yellow300', value: '#edb537' },
+      { name: 'yellow400', value: '#ca982e' },
+      { name: 'yellow500', value: '#ab7f2a' },
+      { name: 'yellow600', value: '#987027' },
+      { name: 'yellow700', value: '#886425' },
+      { name: 'yellow800', value: '#735421' },
+      { name: 'yellow900', value: '#453217' },
+      { name: 'yellow1000', value: '#2d2212' },
+    ],
+  },
+  {
+    family: 'Lime',
+    colors: [
+      { name: 'lime50', value: '#e3f2e4' },
+      { name: 'lime100', value: '#d1e9d2' },
+      { name: 'lime200', value: '#b9debc' },
+      { name: 'lime300', value: '#94cb9a' },
+      { name: 'lime400', value: '#5db26c' },
+      { name: 'lime500', value: '#259948' },
+      { name: 'lime600', value: '#1f893f' },
+      { name: 'lime700', value: '#1f7a39' },
+      { name: 'lime800', value: '#1f6631' },
+      { name: 'lime900', value: '#183f20' },
+      { name: 'lime1000', value: '#142817' },
+    ],
+  },
+  {
+    family: 'Green',
+    colors: [
+      { name: 'green50', value: '#dff2eb' },
+      { name: 'green100', value: '#c9eadd' },
+      { name: 'green200', value: '#aedfcd' },
+      { name: 'green300', value: '#80cdb3' },
+      { name: 'green400', value: '#2cb491' },
+      { name: 'green500', value: '#099979' },
+      { name: 'green600', value: '#14876b' },
+      { name: 'green700', value: '#177860' },
+      { name: 'green800', value: '#196551' },
+      { name: 'green900', value: '#153d31' },
+      { name: 'green1000', value: '#132821' },
+    ],
+  },
+  {
+    family: 'Blue',
+    colors: [
+      { name: 'blue50', value: '#e8eeff' },
+      { name: 'blue100', value: '#d9e2ff' },
+      { name: 'blue200', value: '#b6d4fb' },
+      { name: 'blue300', value: '#a6bbf5' },
+      { name: 'blue400', value: '#88a3e8' },
+      { name: 'blue500', value: '#6485d1' },
+      { name: 'blue600', value: '#4b77d6' },
+      { name: 'blue700', value: '#36c' },
+      { name: 'blue800', value: '#3056a9' },
+      { name: 'blue900', value: '#233566' },
+      { name: 'blue1000', value: '#1b223d' },
+    ],
+  },
+  {
+    family: 'Purple',
+    colors: [
+      { name: 'purple50', value: '#f0ecf6' },
+      { name: 'purple100', value: '#e6e0f0' },
+      { name: 'purple200', value: '#d9d0e9' },
+      { name: 'purple300', value: '#c5b9dd' },
+      { name: 'purple400', value: '#a799cd' },
+      { name: 'purple500', value: '#8d7ebd' },
+      { name: 'purple600', value: '#7a6db7' },
+      { name: 'purple700', value: '#6a60b0' },
+      { name: 'purple800', value: '#534fa3' },
+      { name: 'purple900', value: '#353262' },
+      { name: 'purple1000', value: '#23203b' },
+    ],
+  },
+  {
+    family: 'Pink',
+    colors: [
+      { name: 'pink50', value: '#f5ebf2' },
+      { name: 'pink100', value: '#eedeea' },
+      { name: 'pink200', value: '#e6cede' },
+      { name: 'pink300', value: '#d9b4cd' },
+      { name: 'pink400', value: '#c690b4' },
+      { name: 'pink500', value: '#b5739e' },
+      { name: 'pink600', value: '#ac5c90' },
+      { name: 'pink700', value: '#9b527f' },
+      { name: 'pink800', value: '#82456a' },
+      { name: 'pink900', value: '#4e2c40' },
+      { name: 'pink1000', value: '#311e28' },
+    ],
+  },
+  {
+    family: 'Maroon',
+    colors: [
+      { name: 'maroon50', value: '#f6ebeb' },
+      { name: 'maroon100', value: '#f0dedd' },
+      { name: 'maroon200', value: '#e8cecd' },
+      { name: 'maroon300', value: '#dcb5b3' },
+      { name: 'maroon400', value: '#c99391' },
+      { name: 'maroon500', value: '#b57775' },
+      { name: 'maroon600', value: '#ac6262' },
+      { name: 'maroon700', value: '#9f5555' },
+      { name: 'maroon800', value: '#854848' },
+      { name: 'maroon900', value: '#512e2e' },
+      { name: 'maroon1000', value: '#321f1e' },
+    ],
+  },
+]
+
+export const codexPaletteColors = codexPaletteGroups.flatMap((group) => group.colors)
diff --git a/src/prototypes/example-codex-kitchen-sink/lib/parse-tokens.ts b/src/prototypes/example-codex-kitchen-sink/lib/parse-tokens.ts
new file mode 100644
index 00000000..52855da0
--- /dev/null
+++ b/src/prototypes/example-codex-kitchen-sink/lib/parse-tokens.ts
@@ -0,0 +1,1025 @@
+export type TokenKind =
+  | 'color-text'
+  | 'color-bg'
+  | 'color-border'
+  | 'color-accent'
+  | 'spacing'
+  | 'radius'
+  | 'font-size'
+  | 'font-weight'
+  | 'font-family'
+  | 'line-height'
+  | 'text-decoration'
+  | 'text-overflow'
+  | 'shadow'
+  | 'opacity'
+  | 'size'
+  | 'generic'
+
+export type TokenFamily =
+  | 'Color'
+  | 'Spacing'
+  | 'Typography'
+  | 'Border'
+  | 'Shadow'
+  | 'Sizing'
+  | 'Opacity'
+  | 'Transition'
+  | 'Z-index'
+  | 'Other'
+
+export interface TokenEntry {
+  name: string
+  value: string
+  category: string
+  kind: TokenKind
+  family: TokenFamily
+  deprecated: boolean
+}
+
+export interface TokenFamilyGroup {
+  family: TokenFamily
+  categories: { category: string; tokens: TokenEntry[] }[]
+}
+
+export function inferTokenKind(name: string): TokenKind {
+  if (name.startsWith('--background-color-')) return 'color-bg'
+  if (name.startsWith('--border-color-')) return 'color-border'
+  if (name.startsWith('--accent-color-')) return 'color-accent'
+  if (name.startsWith('--color-')) return 'color-text'
+  if (name.startsWith('--spacing-')) return 'spacing'
+  if (name.startsWith('--border-radius-')) return 'radius'
+  if (name.startsWith('--font-size-')) return 'font-size'
+  if (name.startsWith('--font-weight-')) return 'font-weight'
+  if (name.startsWith('--font-family-')) return 'font-family'
+  if (name.startsWith('--line-height-')) return 'line-height'
+  if (name.startsWith('--text-decoration-')) return 'text-decoration'
+  if (name.startsWith('--text-overflow-')) return 'text-overflow'
+  if (name.startsWith('--box-shadow-')) return 'shadow'
+  if (name.startsWith('--opacity-')) return 'opacity'
+  if (
+    name.startsWith('--size-') ||
+    name.startsWith('--min-size-') ||
+    name.startsWith('--max-size-') ||
+    name.startsWith('--min-width-') ||
+    name.startsWith('--max-width-') ||
+    name.startsWith('--width-') ||
+    name.startsWith('--height-')
+  ) {
+    return 'size'
+  }
+  return 'generic'
+}
+
+export function inferTokenFamily(name: string): TokenFamily {
+  if (
+    name.startsWith('--color-') ||
+    name.startsWith('--background-color-') ||
+    name.startsWith('--border-color-') ||
+    name.startsWith('--accent-color-')
+  ) {
+    return 'Color'
+  }
+  if (name.startsWith('--spacing-')) return 'Spacing'
+  if (
+    name.startsWith('--font-') ||
+    name.startsWith('--line-height-') ||
+    name.startsWith('--letter-spacing-') ||
+    name.startsWith('--text-decoration-') ||
+    name.startsWith('--text-overflow-')
+  ) {
+    return 'Typography'
+  }
+  if (
+    name.startsWith('--border-radius-') ||
+    name.startsWith('--border-width-') ||
+    name.startsWith('--border-style-') ||
+    name.startsWith('--position-offset-')
+  ) {
+    return 'Border'
+  }
+  if (name.startsWith('--box-shadow-')) return 'Shadow'
+  if (name.startsWith('--opacity-')) return 'Opacity'
+  if (name.startsWith('--transition-') || name.startsWith('--animation-')) return 'Transition'
+  if (name.startsWith('--z-index-')) return 'Z-index'
+  if (
+    name.startsWith('--size-') ||
+    name.startsWith('--min-') ||
+    name.startsWith('--max-') ||
+    name.startsWith('--width-') ||
+    name.startsWith('--height-')
+  ) {
+    return 'Sizing'
+  }
+  return 'Other'
+}
+
+export function inferTokenCategory(name: string): string {
+  if (name.startsWith('--background-color-')) return 'Background colors'
+  if (name.startsWith('--border-color-')) return 'Border colors'
+  if (name.startsWith('--color-')) return 'Text colors'
+  if (name.startsWith('--spacing-')) return 'Spacing'
+  if (
+    name.startsWith('--border-radius-') ||
+    name.startsWith('--border-width-') ||
+    name.startsWith('--border-style-') ||
+    name.startsWith('--position-offset-')
+  ) {
+    return 'Border'
+  }
+  if (name.startsWith('--font-') || name.startsWith('--line-height-') || name.startsWith('--letter-spacing-')) {
+    return 'Typography'
+  }
+  if (name.startsWith('--box-shadow-')) return 'Shadow'
+  if (name.startsWith('--opacity-')) return 'Opacity'
+  if (name.startsWith('--size-') || name.startsWith('--min-') || name.startsWith('--max-') || name.startsWith('--width-') || name.startsWith('--height-')) {
+    return 'Sizing'
+  }
+  if (name.startsWith('--transition-')) return 'Transition'
+  if (name.startsWith('--animation-')) return 'Animation'
+  if (name.startsWith('--z-index-')) return 'Z-index'
+  if (name.startsWith('--cursor-')) return 'Cursor'
+  if (name.startsWith('--filter-')) return 'Filter'
+  if (name.startsWith('--outline-')) return 'Outline'
+  if (name.startsWith('--mix-blend-mode-')) return 'Blend mode'
+  if (name.startsWith('--text-decoration-')) return 'Text decoration'
+  if (name.startsWith('--text-overflow-')) return 'Text overflow'
+  if (name.startsWith('--transform-')) return 'Transform'
+  if (name.startsWith('--accent-color-')) return 'Accent'
+  if (name.startsWith('--position-')) return 'Position'
+  if (name.startsWith('--tab-size-')) return 'Tab size'
+  return 'Other'
+}
+
+export function sortTokensWithDeprecatedLast(
+  tokens: TokenEntry[],
+  compare: (a: TokenEntry, b: TokenEntry) => number = (a, b) => a.name.localeCompare(b.name),
+): TokenEntry[] {
+  return [...tokens].sort((a, b) => {
+    if (a.deprecated !== b.deprecated) return a.deprecated ? 1 : -1
+    return compare(a, b)
+  })
+}
+
+function parseDeprecatedTokenNames(cssBlock: string): Set<string> {
+  const deprecated = new Set<string>()
+  const re =
+    /\/\*\s*Warning:\s*the following token name is deprecated[^*]*\*\/\s*\n\s*(--[a-z0-9-]+):/g
+  let match: RegExpExecArray | null
+
+  while ((match = re.exec(cssBlock)) !== null) {
+    deprecated.add(match[1])
+  }
+
+  return deprecated
+}
+
+export function parseTokensFromCss(css: string): TokenEntry[] {
+  const rootMatch = css.match(/:root\s*\{([\s\S]*?)\n\}/)
+  if (!rootMatch) return []
+
+  const rootBlock = rootMatch[1]
+  const deprecatedNames = parseDeprecatedTokenNames(rootBlock)
+  const seen = new Set<string>()
+  const tokens: TokenEntry[] = []
+  const re = /^\s*(--[a-z0-9-]+):\s*([^;]+);/gm
+  let match: RegExpExecArray | null
+
+  while ((match = re.exec(rootBlock)) !== null) {
+    const name = match[1]
+    if (seen.has(name)) continue
+    seen.add(name)
+    tokens.push({
+      name,
+      value: match[2].trim(),
+      category: inferTokenCategory(name),
+      kind: inferTokenKind(name),
+      family: inferTokenFamily(name),
+      deprecated: deprecatedNames.has(name),
+    })
+  }
+
+  return sortTokensWithDeprecatedLast(tokens)
+}
+
+const categoryOrder = [
+  'Text colors',
+  'Background colors',
+  'Border colors',
+  'Spacing',
+  'Border',
+  'Typography',
+  'Shadow',
+  'Opacity',
+  'Sizing',
+  'Transition',
+  'Animation',
+  'Z-index',
+  'Cursor',
+  'Filter',
+  'Outline',
+  'Blend mode',
+  'Text decoration',
+  'Transform',
+  'Accent',
+  'Position',
+  'Tab size',
+  'Other',
+] as const
+
+const familyOrder: TokenFamily[] = [
+  'Color',
+  'Spacing',
+  'Typography',
+  'Border',
+  'Shadow',
+  'Sizing',
+  'Opacity',
+  'Transition',
+  'Z-index',
+  'Other',
+]
+
+function groupByCategory(tokens: TokenEntry[]): { category: string; tokens: TokenEntry[] }[] {
+  const map = new Map<string, TokenEntry[]>()
+  for (const token of tokens) {
+    const list = map.get(token.category) ?? []
+    list.push(token)
+    map.set(token.category, list)
+  }
+
+  return categoryOrder
+    .filter((category) => map.has(category))
+    .map((category) => ({
+      category,
+      tokens: sortTokensWithDeprecatedLast(map.get(category)!),
+    }))
+}
+
+export function groupTokensByCategory(tokens: TokenEntry[]): { category: string; tokens: TokenEntry[] }[] {
+  return groupByCategory(tokens)
+}
+
+export function groupTokensByFamily(
+  tokens: TokenEntry[],
+  options: { exclude?: TokenFamily[] } = {},
+): TokenFamilyGroup[] {
+  const excluded = new Set(options.exclude ?? [])
+  const byFamily = new Map<TokenFamily, TokenEntry[]>()
+
+  for (const token of tokens) {
+    if (excluded.has(token.family)) continue
+    const list = byFamily.get(token.family) ?? []
+    list.push(token)
+    byFamily.set(token.family, list)
+  }
+
+  return familyOrder
+    .filter((family) => !excluded.has(family) && byFamily.has(family))
+    .map((family) => ({
+      family,
+      categories: groupByCategory(byFamily.get(family)!),
+    }))
+}
+
+export function getTokensForFamily(tokens: TokenEntry[], family: TokenFamily): TokenEntry[] {
+  return tokens.filter((token) => token.family === family)
+}
+
+export type TypographySubTab =
+  | 'style'
+  | 'font'
+  | 'size'
+  | 'weight'
+  | 'line-height'
+  | 'decoration'
+  | 'overflow'
+
+const typographySubTabOrder: TypographySubTab[] = [
+  'style',
+  'font',
+  'size',
+  'weight',
+  'line-height',
+  'decoration',
+  'overflow',
+]
+
+const typographySubTabLabels: Record<TypographySubTab, string> = {
+  style: 'Style',
+  font: 'Font',
+  size: 'Size',
+  weight: 'Weight',
+  'line-height': 'Line height',
+  decoration: 'Decoration',
+  overflow: 'Overflow',
+}
+
+export const typographySubTabs = typographySubTabOrder.map((id) => ({
+  id,
+  label: typographySubTabLabels[id],
+}))
+
+export function getTypographyTokensForSubTab(
+  tokens: TokenEntry[],
+  subTab: Exclude<TypographySubTab, 'style'>,
+): TokenEntry[] {
+  const kindBySubTab: Record<Exclude<TypographySubTab, 'style'>, TokenKind> = {
+    font: 'font-family',
+    size: 'font-size',
+    weight: 'font-weight',
+    'line-height': 'line-height',
+    decoration: 'text-decoration',
+    overflow: 'text-overflow',
+  }
+
+  const filtered = getTokensForFamily(tokens, 'Typography').filter(
+    (token) => token.kind === kindBySubTab[subTab],
+  )
+
+  if (subTab === 'size') {
+    return sortTokensWithDeprecatedLast(filtered, (a, b) => parseFontSizeValue(a.value) - parseFontSizeValue(b.value))
+  }
+
+  if (subTab === 'weight') {
+    return sortTokensWithDeprecatedLast(filtered, (a, b) => parseFontWeightValue(a.value) - parseFontWeightValue(b.value))
+  }
+
+  if (subTab === 'line-height') {
+    return sortTokensWithDeprecatedLast(filtered, (a, b) => lineHeightSortIndex(a.name) - lineHeightSortIndex(b.name))
+  }
+
+  if (subTab === 'decoration') {
+    return sortTokensWithDeprecatedLast(filtered, (a, b) => textDecorationSortIndex(a.name) - textDecorationSortIndex(b.name))
+  }
+
+  if (subTab === 'overflow') {
+    return sortTokensWithDeprecatedLast(filtered, (a, b) => textOverflowSortIndex(a.name) - textOverflowSortIndex(b.name))
+  }
+
+  return sortTokensWithDeprecatedLast(filtered)
+}
+
+const lineHeightScaleOrder = [
+  'x-small',
+  'small',
+  'medium',
+  'content',
+  'large',
+  'x-large',
+  'xx-large',
+  'xxx-large',
+] as const
+
+function lineHeightSortIndex(name: string): number {
+  const suffix = name.slice('--line-height-'.length)
+  const index = lineHeightScaleOrder.indexOf(suffix as (typeof lineHeightScaleOrder)[number])
+  return index === -1 ? lineHeightScaleOrder.length : index
+}
+
+const textDecorationOrder = ['none', 'underline', 'line-through'] as const
+
+function textDecorationSortIndex(name: string): number {
+  const suffix = name.slice('--text-decoration-'.length)
+  const index = textDecorationOrder.indexOf(suffix as (typeof textDecorationOrder)[number])
+  return index === -1 ? textDecorationOrder.length : index
+}
+
+const textOverflowOrder = ['clip', 'ellipsis'] as const
+
+function textOverflowSortIndex(name: string): number {
+  const suffix = name.slice('--text-overflow-'.length)
+  const index = textOverflowOrder.indexOf(suffix as (typeof textOverflowOrder)[number])
+  return index === -1 ? textOverflowOrder.length : index
+}
+
+function parseFontSizeValue(value: string): number {
+  const match = value.match(/^([\d.]+)rem$/)
+  return match ? parseFloat(match[1]) : 0
+}
+
+function parseFontWeightValue(value: string): number {
+  return parseFloat(value) || 0
+}
+
+export type ColorSubTab = 'text' | 'background' | 'border' | 'accent' | 'palette'
+
+const colorSubTabOrder: ColorSubTab[] = ['text', 'background', 'border', 'accent', 'palette']
+
+const colorSubTabLabels: Record<ColorSubTab, string> = {
+  text: 'Text',
+  background: 'Background',
+  border: 'Border',
+  accent: 'Accent',
+  palette: 'Palette',
+}
+
+export const colorSubTabs = colorSubTabOrder.map((id) => ({
+  id,
+  label: colorSubTabLabels[id],
+}))
+
+export function getColorTokensForSubTab(tokens: TokenEntry[], subTab: ColorSubTab): TokenEntry[] {
+  if (subTab === 'palette') return []
+
+  const kindBySubTab: Record<Exclude<ColorSubTab, 'palette'>, TokenKind> = {
+    text: 'color-text',
+    background: 'color-bg',
+    border: 'color-border',
+    accent: 'color-accent',
+  }
+
+  return sortTokensWithDeprecatedLast(
+    getTokensForFamily(tokens, 'Color').filter((token) => token.kind === kindBySubTab[subTab]),
+  )
+}
+
+export type TokenSection = 'layout' | 'appearance' | 'animation'
+
+export type LayoutSubTab =
+  | 'spacing'
+  | 'size'
+  | 'breakpoint'
+  | 'z-index'
+  | 'box-sizing'
+
+export type AppearanceSubTab = 'border' | 'box-shadow' | 'cursor' | 'opacity' | 'outline'
+
+export type AnimationSubTab = 'animation' | 'transition'
+
+export type TokenSubTab = LayoutSubTab | AppearanceSubTab | AnimationSubTab
+
+const layoutSubTabOrder: LayoutSubTab[] = [
+  'spacing',
+  'size',
+  'breakpoint',
+  'z-index',
+  'box-sizing',
+]
+
+const appearanceSubTabOrder: AppearanceSubTab[] = [
+  'border',
+  'box-shadow',
+  'cursor',
+  'opacity',
+  'outline',
+]
+
+const animationSubTabOrder: AnimationSubTab[] = ['animation', 'transition']
+
+const layoutSubTabLabels: Record<LayoutSubTab, string> = {
+  spacing: 'Spacing',
+  size: 'Size',
+  breakpoint: 'Breakpoint',
+  'z-index': 'Z-index',
+  'box-sizing': 'Box-sizing',
+}
+
+const appearanceSubTabLabels: Record<AppearanceSubTab, string> = {
+  border: 'Border',
+  'box-shadow': 'Box-shadow',
+  cursor: 'Cursor',
+  opacity: 'Opacity',
+  outline: 'Outline',
+}
+
+const animationSubTabLabels: Record<AnimationSubTab, string> = {
+  animation: 'Animation',
+  transition: 'Transition',
+}
+
+export const tokenSectionTabs = [
+  {
+    id: 'layout' as const,
+    label: 'Layout',
+    subTabs: layoutSubTabOrder.map((id) => ({ id, label: layoutSubTabLabels[id] })),
+  },
+  {
+    id: 'appearance' as const,
+    label: 'Appearance',
+    subTabs: appearanceSubTabOrder.map((id) => ({ id, label: appearanceSubTabLabels[id] })),
+  },
+  {
+    id: 'animation' as const,
+    label: 'Animation',
+    subTabs: animationSubTabOrder.map((id) => ({ id, label: animationSubTabLabels[id] })),
+  },
+]
+
+const borderShorthandNames = new Set([
+  '--border-base',
+  '--border-subtle',
+  '--border-progressive',
+  '--border-destructive',
+  '--border-transparent',
+])
+
+export type BorderTokenGroup = 'Shorthand' | 'Radius' | 'Style' | 'Width' | 'Offset'
+
+export function isPositionOffsetToken(name: string): boolean {
+  return name.startsWith('--position-offset-')
+}
+
+export type TransitionTokenGroup = 'Property' | 'Timing' | 'Duration'
+
+export type AnimationTokenGroup = 'Timing' | 'Iteration' | 'Duration' | 'Delay' | 'Transform'
+
+export function getBorderTokenGroup(name: string): BorderTokenGroup {
+  if (borderShorthandNames.has(name)) return 'Shorthand'
+  if (name.startsWith('--border-radius-')) return 'Radius'
+  if (name.startsWith('--border-style-')) return 'Style'
+  if (isPositionOffsetToken(name)) return 'Offset'
+  return 'Width'
+}
+
+export function getTransitionTokenGroup(name: string): TransitionTokenGroup {
+  if (name.startsWith('--transition-property-')) return 'Property'
+  if (name.startsWith('--transition-timing-function-')) return 'Timing'
+  return 'Duration'
+}
+
+export function getAnimationTokenGroup(name: string): AnimationTokenGroup {
+  if (name.startsWith('--animation-timing-function-')) return 'Timing'
+  if (name.startsWith('--animation-iteration-count-')) return 'Iteration'
+  if (name.startsWith('--animation-duration-')) return 'Duration'
+  if (name.startsWith('--animation-delay-')) return 'Delay'
+  return 'Transform'
+}
+
+const borderTokenOrder = [
+  '--border-base',
+  '--border-subtle',
+  '--border-progressive',
+  '--border-destructive',
+  '--border-transparent',
+  '--border-radius-sharp',
+  '--border-radius-base',
+  '--border-radius-pill',
+  '--border-radius-circle',
+  '--border-style-base',
+  '--border-style-dashed',
+  '--border-width-base',
+  '--border-width-thick',
+  '--border-width-input-radio--checked',
+  '--position-offset-border-width-base',
+] as const
+
+export type BoxShadowTokenGroup = 'Shorthand' | 'Color' | 'Inset' | 'Outset' | 'Deprecated'
+
+const deprecatedBoxShadowTokens = new Set([
+  '--box-shadow-drop-small',
+  '--box-shadow-drop-medium',
+  '--box-shadow-drop-xx-large',
+])
+
+export function getBoxShadowTokenGroup(name: string): BoxShadowTokenGroup {
+  if (name.startsWith('--box-shadow-color-')) return 'Color'
+  if (name.startsWith('--box-shadow-inset-')) return 'Inset'
+  if (name.startsWith('--box-shadow-outset-')) return 'Outset'
+  if (deprecatedBoxShadowTokens.has(name)) return 'Deprecated'
+  return 'Shorthand'
+}
+
+const boxShadowTokenOrder = [
+  '--box-shadow-small',
+  '--box-shadow-small-top',
+  '--box-shadow-small-bottom',
+  '--box-shadow-medium',
+  '--box-shadow-large',
+  '--box-shadow-inset-small',
+  '--box-shadow-inset-medium',
+  '--box-shadow-inset-medium-vertical',
+  '--box-shadow-outset-small',
+  '--box-shadow-outset-small-top',
+  '--box-shadow-outset-small-bottom',
+  '--box-shadow-outset-small-start',
+  '--box-shadow-outset-medium-below',
+  '--box-shadow-outset-medium-around',
+  '--box-shadow-outset-large-below',
+  '--box-shadow-outset-large-around',
+  '--box-shadow-color-alpha-base',
+  '--box-shadow-color-base',
+  '--box-shadow-color-destructive--focus',
+  '--box-shadow-color-inverted',
+  '--box-shadow-color-progressive--active',
+  '--box-shadow-color-progressive--focus',
+  '--box-shadow-color-progressive-selected',
+  '--box-shadow-color-progressive-selected--active',
+  '--box-shadow-color-progressive-selected--hover',
+  '--box-shadow-color-transparent',
+  '--box-shadow-drop-small',
+  '--box-shadow-drop-medium',
+  '--box-shadow-drop-xx-large',
+] as const
+
+const cursorTokenOrder = [
+  '--cursor-base',
+  '--cursor-base--disabled',
+  '--cursor-base--hover',
+  '--cursor-grab',
+  '--cursor-grabbing',
+  '--cursor-help',
+  '--cursor-move',
+  '--cursor-not-allowed',
+  '--cursor-resize-nesw',
+  '--cursor-resize-nwse',
+  '--cursor-text',
+  '--cursor-zoom-in',
+  '--cursor-zoom-out',
+] as const
+
+const opacityTokenOrder = [
+  '--opacity-base',
+  '--opacity-medium',
+  '--opacity-low',
+  '--opacity-transparent',
+  '--opacity-icon-base',
+  '--opacity-icon-base--hover',
+  '--opacity-icon-base--selected',
+  '--opacity-icon-base--disabled',
+  '--opacity-icon-placeholder',
+  '--opacity-icon-subtle',
+] as const
+
+const outlineTokenOrder = [
+  '--outline-base--focus',
+  '--outline-color-progressive--focus',
+] as const
+
+const transitionTokenOrder = [
+  '--transition-property-base',
+  '--transition-property-fade',
+  '--transition-property-icon',
+  '--transition-property-icon-css-only',
+  '--transition-property-toast',
+  '--transition-property-toggle-switch-grip',
+  '--transition-timing-function-system',
+  '--transition-timing-function-user',
+  '--transition-duration-base',
+  '--transition-duration-medium',
+] as const
+
+const animationTokenOrder = [
+  '--animation-timing-function-base',
+  '--animation-timing-function-bouncing',
+  '--animation-iteration-count-base',
+  '--animation-duration-fast',
+  '--animation-duration-medium',
+  '--animation-duration-slow',
+  '--animation-delay-none',
+  '--animation-delay-medium',
+  '--animation-delay-slow',
+  '--transform-checkbox-tick--checked',
+  '--transform-progress-indicator-spinner-start',
+  '--transform-progress-indicator-spinner-end',
+] as const
+
+const breakpointTokenOrder = [
+  '--min-width-breakpoint-mobile',
+  '--min-width-breakpoint-tablet',
+  '--min-width-breakpoint-desktop',
+  '--min-width-breakpoint-desktop-wide',
+  '--max-width-breakpoint-mobile',
+  '--max-width-breakpoint-tablet',
+  '--max-width-breakpoint-desktop',
+] as const
+
+export function inferTokenSubTab(name: string): TokenSubTab | null {
+  if (name.startsWith('--spacing-')) return 'spacing'
+  if (name.startsWith('--box-sizing-')) return 'box-sizing'
+  if (name.startsWith('--z-index-')) return 'z-index'
+  if (name.includes('breakpoint')) return 'breakpoint'
+  if (name.startsWith('--background-position-') || name.startsWith('--background-size-')) return 'size'
+  if (name.startsWith('--position-offset-')) return 'border'
+
+  if (
+    name.startsWith('--size-') ||
+    name.startsWith('--min-size-') ||
+    name.startsWith('--max-size-') ||
+    name.startsWith('--min-width-') ||
+    name.startsWith('--max-width-') ||
+    name.startsWith('--width-') ||
+    name.startsWith('--height-') ||
+    name.startsWith('--min-height-') ||
+    name.startsWith('--max-height-') ||
+    name.startsWith('--background-size-') ||
+    name.startsWith('--tab-size-')
+  ) {
+    return 'size'
+  }
+
+  if (
+    name.startsWith('--border-radius-') ||
+    name.startsWith('--border-width-') ||
+    name.startsWith('--border-style-') ||
+    borderShorthandNames.has(name)
+  ) {
+    return 'border'
+  }
+
+  if (name.startsWith('--box-shadow-')) return 'box-shadow'
+  if (name.startsWith('--cursor-')) return 'cursor'
+  if (name.startsWith('--opacity-')) return 'opacity'
+  if (name.startsWith('--outline-')) return 'outline'
+
+  if (name.startsWith('--transition-')) return 'transition'
+  if (name.startsWith('--animation-') || name.startsWith('--transform-')) return 'animation'
+
+  return null
+}
+
+export function inferTokenSection(subTab: TokenSubTab): TokenSection {
+  if (layoutSubTabOrder.includes(subTab as LayoutSubTab)) return 'layout'
+  if (appearanceSubTabOrder.includes(subTab as AppearanceSubTab)) return 'appearance'
+  return 'animation'
+}
+
+export function getGeneralTokens(tokens: TokenEntry[]): TokenEntry[] {
+  return tokens.filter((token) => token.family !== 'Color' && token.family !== 'Typography')
+}
+
+const spacingTokenOrder = [
+  '--spacing-0',
+  '--spacing-6',
+  '--spacing-12',
+  '--spacing-25',
+  '--spacing-30',
+  '--spacing-35',
+  '--spacing-50',
+  '--spacing-65',
+  '--spacing-75',
+  '--spacing-100',
+  '--spacing-125',
+  '--spacing-150',
+  '--spacing-200',
+  '--spacing-250',
+  '--spacing-300',
+  '--spacing-400',
+  '--spacing-half',
+  '--spacing-full',
+  '--spacing-horizontal-button',
+  '--spacing-horizontal-button-large',
+  '--spacing-horizontal-button-small',
+  '--spacing-horizontal-button-icon-only',
+  '--spacing-horizontal-button-small-icon-only',
+  '--spacing-horizontal-input-text-two-end-icons',
+  '--spacing-start-typeahead-search-figure',
+  '--spacing-start-typeahead-search-icon',
+  '--spacing-typeahead-search-focus-addition',
+  '--spacing-toggle-switch-grip-start',
+  '--spacing-toggle-switch-grip-end',
+] as const
+
+const sizeTokenOrder = [
+  '--size-0',
+  '--size-6',
+  '--size-12',
+  '--size-25',
+  '--size-50',
+  '--size-75',
+  '--size-100',
+  '--size-125',
+  '--size-150',
+  '--size-200',
+  '--size-250',
+  '--size-275',
+  '--size-300',
+  '--size-400',
+  '--size-800',
+  '--size-1200',
+  '--size-1600',
+  '--size-2400',
+  '--size-2800',
+  '--size-3200',
+  '--size-4000',
+  '--size-5600',
+  '--size-absolute-1',
+  '--size-absolute-9999',
+  '--size-viewport-width-full',
+  '--size-viewport-height-full',
+  '--size-content-min',
+  '--size-content-fit',
+  '--size-content-max',
+  '--size-third',
+  '--size-half',
+  '--size-full',
+  '--size-double',
+  '--size-search-figure',
+  '--size-icon-x-small',
+  '--size-icon-small',
+  '--size-icon-medium',
+  '--size-toggle-switch-grip',
+  '--min-size-interactive-pointer',
+  '--min-size-interactive-touch',
+  '--min-size-icon-x-small',
+  '--min-size-icon-small',
+  '--min-size-icon-medium',
+  '--min-size-search-figure',
+  '--min-size-input-binary',
+  '--min-size-input-chip-clear-button',
+  '--min-size-toggle-switch-grip',
+  '--min-width-medium',
+  '--min-width-breakpoint-mobile',
+  '--min-width-breakpoint-tablet',
+  '--min-width-breakpoint-desktop',
+  '--min-width-breakpoint-desktop-wide',
+  '--min-width-toggle-switch',
+  '--max-width-base',
+  '--max-width-breakpoint-mobile',
+  '--max-width-breakpoint-tablet',
+  '--max-width-breakpoint-desktop',
+  '--max-width-button',
+  '--min-height-text-area',
+  '--min-height-table-header',
+  '--min-height-table-footer',
+  '--min-height-toggle-switch',
+  '--max-height-chip',
+  '--width-toggle-switch',
+  '--height-toggle-switch',
+  '--background-position-base',
+  '--background-size-search-figure',
+  '--tab-size-base',
+] as const
+
+function manualTokenSortIndex(name: string, order: readonly string[]): number {
+  const index = order.indexOf(name)
+  return index === -1 ? order.length : index
+}
+
+export type SpacingTokenGroup = 'Scale' | 'Positioning' | 'Components'
+
+export function getSpacingTokenGroup(name: string): SpacingTokenGroup {
+  if (name === '--spacing-half' || name === '--spacing-full') return 'Positioning'
+  if (/^--spacing-\d/.test(name)) return 'Scale'
+  return 'Components'
+}
+
+export type SizeTokenGroup =
+  | 'Scale'
+  | 'Absolute'
+  | 'Viewport'
+  | 'Content sizing'
+  | 'Fractions'
+  | 'Component sizes'
+  | 'Minimum sizes'
+  | 'Minimum widths'
+  | 'Maximum widths'
+  | 'Minimum heights'
+  | 'Maximum heights'
+  | 'Component dimensions'
+  | 'Other'
+
+export type BreakpointTokenGroup = 'Minimum width' | 'Maximum width'
+
+export function getBreakpointTokenGroup(name: string): BreakpointTokenGroup {
+  return name.startsWith('--max-width-breakpoint-') ? 'Maximum width' : 'Minimum width'
+}
+
+export function getSizeTokenGroup(name: string): SizeTokenGroup {
+  if (/^--size-\d/.test(name)) return 'Scale'
+  if (name.startsWith('--size-absolute-')) return 'Absolute'
+  if (name.startsWith('--size-viewport-')) return 'Viewport'
+  if (name.startsWith('--size-content-')) return 'Content sizing'
+  if (
+    name === '--size-third' ||
+    name === '--size-half' ||
+    name === '--size-full' ||
+    name === '--size-double'
+  ) {
+    return 'Fractions'
+  }
+  if (
+    name.startsWith('--size-search-') ||
+    name.startsWith('--size-icon-') ||
+    name.startsWith('--size-toggle-')
+  ) {
+    return 'Component sizes'
+  }
+  if (name.startsWith('--min-size-')) return 'Minimum sizes'
+  if (name.startsWith('--min-width-')) return 'Minimum widths'
+  if (name.startsWith('--max-width-')) return 'Maximum widths'
+  if (name.startsWith('--min-height-')) return 'Minimum heights'
+  if (name.startsWith('--max-height-')) return 'Maximum heights'
+  if (name.startsWith('--width-') || name.startsWith('--height-')) return 'Component dimensions'
+  if (name.startsWith('--background-position-') || name.startsWith('--background-size-')) return 'Background'
+  return 'Other'
+}
+
+export function isBackgroundPositionToken(name: string): boolean {
+  return name.startsWith('--background-position-')
+}
+
+export function isBackgroundSizeToken(name: string): boolean {
+  return name.startsWith('--background-size-')
+}
+
+export type ZIndexTokenGroup = 'Layout' | 'Stacking'
+
+export function getZIndexTokenGroup(name: string): ZIndexTokenGroup {
+  return name.startsWith('--z-index-stacking-') ? 'Stacking' : 'Layout'
+}
+
+export function parseZIndexValue(value: string): number {
+  return Number.parseInt(value.trim(), 10)
+}
+
+export function usesDimensionBarDemo(token: TokenEntry): boolean {
+  const { name, value } = token
+  if (value === 'none' || value === 'cover') return false
+  if (name.startsWith('--size-content-')) return false
+  if (name === '--tab-size-base') return false
+  return true
+}
+
+export function parsePlainPercentage(value: string): number | null {
+  const match = value.trim().match(/^([\d.]+)%$/)
+  return match ? parseFloat(match[1]) : null
+}
+
+export function isZeroDimensionToken(token: TokenEntry): boolean {
+  const value = token.value.trim()
+  if (value === '0') return true
+  if (/^0(?:px|rem|em|%|vw|vh|ch|ex)?$/i.test(value)) return true
+  return parsePlainPercentage(value) === 0
+}
+
+export function getTokensForTokenSubTab(
+  tokens: TokenEntry[],
+  section: TokenSection,
+  subTab: TokenSubTab,
+): TokenEntry[] {
+  const filtered = getGeneralTokens(tokens).filter((token) => {
+    const tokenSubTab = inferTokenSubTab(token.name)
+    return tokenSubTab === subTab && inferTokenSection(tokenSubTab) === section
+  })
+
+  if (subTab === 'spacing') {
+    return sortTokensWithDeprecatedLast(filtered, (a, b) =>
+      manualTokenSortIndex(a.name, spacingTokenOrder) - manualTokenSortIndex(b.name, spacingTokenOrder),
+    )
+  }
+
+  if (subTab === 'size') {
+    return sortTokensWithDeprecatedLast(filtered, (a, b) =>
+      manualTokenSortIndex(a.name, sizeTokenOrder) - manualTokenSortIndex(b.name, sizeTokenOrder),
+    )
+  }
+
+  if (subTab === 'breakpoint') {
+    return sortTokensWithDeprecatedLast(filtered, (a, b) =>
+      manualTokenSortIndex(a.name, breakpointTokenOrder) - manualTokenSortIndex(b.name, breakpointTokenOrder),
+    )
+  }
+
+  if (subTab === 'z-index') {
+    return sortTokensWithDeprecatedLast(filtered, (a, b) => {
+      const groupOrder = getZIndexTokenGroup(a.name).localeCompare(getZIndexTokenGroup(b.name))
+      if (groupOrder !== 0) return groupOrder
+      return parseZIndexValue(a.value) - parseZIndexValue(b.value)
+    })
+  }
+
+  if (subTab === 'border') {
+    return sortTokensWithDeprecatedLast(filtered, (a, b) =>
+      manualTokenSortIndex(a.name, borderTokenOrder) - manualTokenSortIndex(b.name, borderTokenOrder),
+    )
+  }
+
+  if (subTab === 'box-shadow') {
+    return sortTokensWithDeprecatedLast(filtered, (a, b) =>
+      manualTokenSortIndex(a.name, boxShadowTokenOrder) - manualTokenSortIndex(b.name, boxShadowTokenOrder),
+    )
+  }
+
+  if (subTab === 'cursor') {
+    return sortTokensWithDeprecatedLast(filtered, (a, b) =>
+      manualTokenSortIndex(a.name, cursorTokenOrder) - manualTokenSortIndex(b.name, cursorTokenOrder),
+    )
+  }
+
+  if (subTab === 'opacity') {
+    return sortTokensWithDeprecatedLast(filtered, (a, b) =>
+      manualTokenSortIndex(a.name, opacityTokenOrder) - manualTokenSortIndex(b.name, opacityTokenOrder),
+    )
+  }
+
+  if (subTab === 'outline') {
+    return sortTokensWithDeprecatedLast(filtered, (a, b) =>
+      manualTokenSortIndex(a.name, outlineTokenOrder) - manualTokenSortIndex(b.name, outlineTokenOrder),
+    )
+  }
+
+  if (subTab === 'transition') {
+    return sortTokensWithDeprecatedLast(filtered, (a, b) =>
+      manualTokenSortIndex(a.name, transitionTokenOrder) - manualTokenSortIndex(b.name, transitionTokenOrder),
+    )
+  }
+
+  if (subTab === 'animation') {
+    return sortTokensWithDeprecatedLast(filtered, (a, b) =>
+      manualTokenSortIndex(a.name, animationTokenOrder) - manualTokenSortIndex(b.name, animationTokenOrder),
+    )
+  }
+
+  return sortTokensWithDeprecatedLast(filtered)
+}
diff --git a/src/prototypes/example-codex-kitchen-sink/lib/playground-tabs.ts b/src/prototypes/example-codex-kitchen-sink/lib/playground-tabs.ts
new file mode 100644
index 00000000..0a3c2dc4
--- /dev/null
+++ b/src/prototypes/example-codex-kitchen-sink/lib/playground-tabs.ts
@@ -0,0 +1,132 @@
+import { buttonsSubTabs, contentDataSubTabs, feedbackSubTabs, formElementsSubTabs, iconsSubTabs, mediaSubTabs, navigationSubTabs, searchSubTabs } from './component-tabs'
+import {
+  colorSubTabs,
+  tokenSectionTabs,
+  typographySubTabs,
+  type TokenSection,
+} from './parse-tokens'
+
+export const mainTabIds = [
+  'typography',
+  'color',
+  'tokens-layout',
+  'tokens-appearance',
+  'tokens-animation',
+  'icons',
+  'components-buttons',
+  'components-form-elements',
+  'components-feedback',
+  'components-content-data',
+  'components-media',
+  'components-navigation',
+  'components-search',
+] as const
+
+export type MainTabId = (typeof mainTabIds)[number]
+
+export const tokenMainTabBySection: Record<TokenSection, MainTabId> = {
+  layout: 'tokens-layout',
+  appearance: 'tokens-appearance',
+  animation: 'tokens-animation',
+}
+
+const subTabIdsByMain: Partial<Record<MainTabId, readonly string[]>> = {
+  typography: typographySubTabs.map((tab) => tab.id),
+  color: colorSubTabs.map((tab) => tab.id),
+  icons: iconsSubTabs.map((tab) => tab.id),
+  'components-buttons': buttonsSubTabs.map((tab) => tab.id),
+  'components-form-elements': formElementsSubTabs.map((tab) => tab.id),
+  'components-content-data': contentDataSubTabs.map((tab) => tab.id),
+  'components-feedback': feedbackSubTabs.map((tab) => tab.id),
+  'components-media': mediaSubTabs.map((tab) => tab.id),
+  'components-navigation': navigationSubTabs.map((tab) => tab.id),
+  'components-search': searchSubTabs.map((tab) => tab.id),
+  'tokens-layout': tokenSectionTabs.find((entry) => entry.id === 'layout')!.subTabs.map((tab) => tab.id),
+  'tokens-appearance': tokenSectionTabs
+    .find((entry) => entry.id === 'appearance')!
+    .subTabs.map((tab) => tab.id),
+  'tokens-animation': tokenSectionTabs
+    .find((entry) => entry.id === 'animation')!
+    .subTabs.map((tab) => tab.id),
+}
+
+export const defaultLeafTab = 'typography/style'
+
+function isMainTabId(value: string): value is MainTabId {
+  return (mainTabIds as readonly string[]).includes(value)
+}
+
+export function getDefaultLeafTab(main: MainTabId): string {
+  const subTabs = subTabIdsByMain[main]
+  return subTabs ? `${main}/${subTabs[0]}` : main
+}
+
+export function parseLeafTab(raw: string): { main: MainTabId; sub?: string } | null {
+  const slash = raw.indexOf('/')
+  if (slash === -1) {
+    if (!isMainTabId(raw)) return null
+    if (subTabIdsByMain[raw]) return null
+    return { main: raw }
+  }
+
+  const main = raw.slice(0, slash)
+  const sub = raw.slice(slash + 1)
+  if (!isMainTabId(main)) return null
+
+  const subTabs = subTabIdsByMain[main]
+  if (!subTabs || !subTabs.includes(sub)) return null
+
+  return { main, sub }
+}
+
+export function isValidLeafTab(value: string): boolean {
+  return parseLeafTab(value) !== null
+}
+
+export function resolveLeafTab(raw: string | undefined): string {
+  if (raw && isValidLeafTab(raw)) return raw
+
+  if (raw && isMainTabId(raw) && subTabIdsByMain[raw]) {
+    return getDefaultLeafTab(raw)
+  }
+
+  return defaultLeafTab
+}
+
+export function getSubTabForMain(
+  mainTabId: MainTabId,
+  subTabMemory: Partial<Record<MainTabId, string>>,
+): string {
+  const remembered = subTabMemory[mainTabId]
+  const subTabs = subTabIdsByMain[mainTabId]
+  if (remembered && subTabs?.includes(remembered)) return remembered
+  return subTabs?.[0] ?? ''
+}
+
+export function getRememberedLeafTab(
+  main: MainTabId,
+  subTabMemory: Partial<Record<MainTabId, string>>,
+): string {
+  const subTabs = subTabIdsByMain[main]
+  return subTabs ? `${main}/${getSubTabForMain(main, subTabMemory)}` : main
+}
+
+export function subTabForMain(
+  leafTab: string,
+  mainTabId: MainTabId,
+  subTabMemory: Partial<Record<MainTabId, string>> = {},
+): string {
+  const parsed = parseLeafTab(leafTab)
+  if (parsed?.main === mainTabId && parsed.sub) return parsed.sub
+  return getSubTabForMain(mainTabId, subTabMemory)
+}
+
+export function rememberSubTabForMain(
+  subTabMemory: Partial<Record<MainTabId, string>>,
+  mainTabId: MainTabId,
+  subTabId: string,
+): void {
+  if (subTabIdsByMain[mainTabId]?.includes(subTabId)) {
+    subTabMemory[mainTabId] = subTabId
+  }
+}
diff --git a/src/prototypes/example-codex-kitchen-sink/lib/use-playground-leaf-tab.ts b/src/prototypes/example-codex-kitchen-sink/lib/use-playground-leaf-tab.ts
new file mode 100644
index 00000000..de57425d
--- /dev/null
+++ b/src/prototypes/example-codex-kitchen-sink/lib/use-playground-leaf-tab.ts
@@ -0,0 +1,112 @@
+import { inject, provide, ref, watch, type InjectionKey, type Ref } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+
+import {
+  defaultLeafTab,
+  getRememberedLeafTab,
+  parseLeafTab,
+  rememberSubTabForMain,
+  resolveLeafTab,
+  subTabForMain,
+  type MainTabId,
+} from './playground-tabs'
+import { readQueryValue } from './use-url-query-param'
+
+export interface PlaygroundLeafTabContext {
+  leafTab: Ref<string>
+  subTabFor: (mainTabId: MainTabId) => string
+  setSubTab: (mainTabId: MainTabId, subTabId: string) => void
+}
+
+export const playgroundLeafTabKey: InjectionKey<PlaygroundLeafTabContext> = Symbol('playgroundLeafTab')
+
+export function usePlaygroundLeafTab(): Ref<string> {
+  const route = useRoute()
+  const router = useRouter()
+
+  function read(): string {
+    return resolveLeafTab(readQueryValue(route.query.tab))
+  }
+
+  const leafTab = ref(read())
+  let syncingFromRoute = false
+
+  watch(
+    () => route.query.tab,
+    () => {
+      const next = read()
+      if (next === leafTab.value) return
+      syncingFromRoute = true
+      leafTab.value = next
+      syncingFromRoute = false
+    },
+  )
+
+  watch(leafTab, (value) => {
+    if (syncingFromRoute) return
+
+    const normalized = value === defaultLeafTab ? undefined : value
+    const current = readQueryValue(route.query.tab)
+    if (current === normalized) return
+
+    const query = { ...route.query }
+    if (normalized === undefined) {
+      delete query.tab
+    } else {
+      query.tab = normalized
+    }
+    void router.replace({ query })
+  })
+
+  return leafTab
+}
+
+export function providePlaygroundLeafTab(
+  leafTab: Ref<string>,
+): PlaygroundLeafTabContext & { subTabMemory: Partial<Record<MainTabId, string>> } {
+  const subTabMemory: Partial<Record<MainTabId, string>> = {}
+
+  function rememberFromPath(path: string): void {
+    const parsed = parseLeafTab(path)
+    if (parsed?.sub) rememberSubTabForMain(subTabMemory, parsed.main, parsed.sub)
+  }
+
+  rememberFromPath(leafTab.value)
+
+  watch(leafTab, rememberFromPath)
+
+  const context: PlaygroundLeafTabContext = {
+    leafTab,
+    subTabFor: (mainTabId) => subTabForMain(leafTab.value, mainTabId, subTabMemory),
+    setSubTab: (mainTabId, subTabId) => {
+      rememberSubTabForMain(subTabMemory, mainTabId, subTabId)
+      leafTab.value = `${mainTabId}/${subTabId}`
+    },
+  }
+
+  provide(playgroundLeafTabKey, context)
+  return { ...context, subTabMemory }
+}
+
+export function usePlaygroundLeafTabContext(): PlaygroundLeafTabContext | undefined {
+  return inject(playgroundLeafTabKey)
+}
+
+export function syncMainTabWithLeafTab(
+  activeTab: Ref<MainTabId>,
+  leafTab: Ref<string>,
+  subTabMemory: Partial<Record<MainTabId, string>>,
+): void {
+  watch(leafTab, (path) => {
+    const parsed = parseLeafTab(path)
+    if (parsed && parsed.main !== activeTab.value) {
+      activeTab.value = parsed.main
+    }
+  })
+
+  watch(activeTab, (main) => {
+    const parsed = parseLeafTab(leafTab.value)
+    if (parsed?.main === main) return
+    leafTab.value = getRememberedLeafTab(main, subTabMemory)
+  })
+}
diff --git a/src/prototypes/example-codex-kitchen-sink/lib/use-url-query-param.ts b/src/prototypes/example-codex-kitchen-sink/lib/use-url-query-param.ts
new file mode 100644
index 00000000..607505cb
--- /dev/null
+++ b/src/prototypes/example-codex-kitchen-sink/lib/use-url-query-param.ts
@@ -0,0 +1,57 @@
+import { ref, watch, type Ref } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+
+function readQueryValue(raw: unknown): string | undefined {
+  if (typeof raw === 'string') return raw
+  if (Array.isArray(raw) && typeof raw[0] === 'string') return raw[0]
+  return undefined
+}
+
+export { readQueryValue }
+
+export function useUrlQueryParam<T extends string>(
+  key: string,
+  defaultValue: T,
+  isValid: (value: string) => value is T,
+): Ref<T> {
+  const route = useRoute()
+  const router = useRouter()
+
+  function parse(): T {
+    const value = readQueryValue(route.query[key])
+    if (value && isValid(value)) return value
+    return defaultValue
+  }
+
+  const param = ref(parse()) as Ref<T>
+  let syncingFromRoute = false
+
+  watch(
+    () => route.query[key],
+    () => {
+      const next = parse()
+      if (next === param.value) return
+      syncingFromRoute = true
+      param.value = next
+      syncingFromRoute = false
+    },
+  )
+
+  watch(param, (value) => {
+    if (syncingFromRoute) return
+
+    const normalized = value === defaultValue ? undefined : value
+    const current = readQueryValue(route.query[key])
+    if (current === normalized) return
+
+    const query = { ...route.query }
+    if (normalized === undefined) {
+      delete query[key]
+    } else {
+      query[key] = normalized
+    }
+    void router.replace({ query })
+  })
+
+  return param
+}
diff --git a/src/prototypes/example-codex-kitchen-sink/playground/AnimationTokenList.vue b/src/prototypes/example-codex-kitchen-sink/playground/AnimationTokenList.vue
new file mode 100644
index 00000000..3762cae1
--- /dev/null
+++ b/src/prototypes/example-codex-kitchen-sink/playground/AnimationTokenList.vue
@@ -0,0 +1,416 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import type { TokenEntry } from '../lib/parse-tokens'
+import {
+  getAnimationTokenGroup,
+  getTransitionTokenGroup,
+} from '../lib/parse-tokens'
+import TokenDeprecatedLabel from './TokenDeprecatedLabel.vue'
+import TokenListGroupHeading from './TokenListGroupHeading.vue'
+
+const props = defineProps<{
+  kind: 'animation' | 'transition'
+  tokens: TokenEntry[]
+}>()
+
+type ListEntry =
+  | { type: 'group'; label: string }
+  | { type: 'token'; token: TokenEntry }
+
+type PreviewKind =
+  | 'transition-property'
+  | 'transition-timing-function'
+  | 'animation-timing-function'
+  | 'animation-iteration-count'
+  | 'transform'
+  | 'transition-duration'
+  | 'animation-duration'
+  | 'delay'
+
+const entries = computed(() => {
+  const items: ListEntry[] = []
+  let currentGroup: string | null = null
+  let skipNextGroupHeading = props.kind === 'transition'
+
+  for (const token of props.tokens) {
+    const group =
+      props.kind === 'transition'
+        ? getTransitionTokenGroup(token.name)
+        : getAnimationTokenGroup(token.name)
+
+    if (group !== currentGroup) {
+      if (!skipNextGroupHeading) {
+        items.push({ type: 'group', label: group })
+      }
+      currentGroup = group
+      skipNextGroupHeading = false
+    }
+
+    items.push({ type: 'token', token })
+  }
+
+  return items
+})
+
+function isTransitionPropertyToken(token: TokenEntry): boolean {
+  return props.kind === 'transition' && token.name.startsWith('--transition-property-')
+}
+
+function previewKind(token: TokenEntry): PreviewKind {
+  if (props.kind === 'transition') {
+    if (token.name.startsWith('--transition-property-')) return 'transition-property'
+    if (token.name.startsWith('--transition-timing-function-')) return 'transition-timing-function'
+    return 'transition-duration'
+  }
+
+  if (token.name.startsWith('--animation-timing-function-')) return 'animation-timing-function'
+  if (token.name.startsWith('--animation-iteration-count-')) return 'animation-iteration-count'
+  if (token.name.startsWith('--animation-duration-')) return 'animation-duration'
+  if (token.name.startsWith('--animation-delay-')) return 'delay'
+  return 'transform'
+}
+
+function previewHint(kind: PreviewKind): string | null {
+  if (kind === 'transition-timing-function' || kind === 'transition-duration') {
+    return 'Hover to preview'
+  }
+  return null
+}
+</script>
+
+<template>
+  <ul class="animation-token-list">
+    <template v-for="(entry, index) in entries" :key="index">
+      <TokenListGroupHeading v-if="entry.type === 'group'" :label="entry.label" />
+      <li
+        v-else
+        class="animation-token-list__item"
+        :class="{
+          'animation-token-list__item--deprecated': entry.token.deprecated,
+          'animation-token-list__item--property': isTransitionPropertyToken(entry.token),
+        }"
+      >
+        <div
+          v-if="isTransitionPropertyToken(entry.token)"
+          class="animation-token-list__property-wrap"
+        >
+          <span
+            class="animation-token-list__sample animation-token-list__sample--property"
+            :style="{
+              transitionProperty: `var(${entry.token.name})`,
+              transitionDuration: '600ms',
+              transitionTimingFunction: 'ease',
+            }"
+          >
+            {{ entry.token.name }}
+            <span class="animation-token-list__value">{{ entry.token.value }}</span>
+            <span class="animation-token-list__hint">Hover to preview</span>
+          </span>
+          <TokenDeprecatedLabel v-if="entry.token.deprecated" />
+        </div>
+
+        <template v-else>
+        <div class="animation-token-list__preview">
+          <div
+            v-if="previewKind(entry.token) === 'transition-timing-function'"
+            class="animation-token-list__track"
+          >
+            <span
+              class="animation-token-list__bar animation-token-list__bar--transition"
+              :style="{
+                transitionProperty: 'transform',
+                transitionDuration: '800ms',
+                transitionTimingFunction: `var(${entry.token.name})`,
+              }"
+              aria-hidden="true"
+            />
+          </div>
+
+          <div
+            v-else-if="previewKind(entry.token) === 'animation-timing-function'"
+            class="animation-token-list__track"
+          >
+            <span
+              class="animation-token-list__bar animation-token-list__bar--animated"
+              :style="{ animationTimingFunction: `var(${entry.token.name})` }"
+              aria-hidden="true"
+            />
+          </div>
+
+          <div
+            v-else-if="previewKind(entry.token) === 'animation-iteration-count'"
+            class="animation-token-list__track"
+          >
+            <span
+              class="animation-token-list__bar animation-token-list__bar--animated animation-token-list__bar--pulse"
+              :style="{ animationIterationCount: `var(${entry.token.name})` }"
+              aria-hidden="true"
+            />
+          </div>
+
+          <span
+            v-else-if="previewKind(entry.token) === 'transform'"
+            class="animation-token-list__transform-host"
+            aria-hidden="true"
+          >
+            <span
+              class="animation-token-list__transform-arm"
+              :style="{ transform: `var(${entry.token.name})` }"
+            />
+          </span>
+
+          <div
+            v-else-if="previewKind(entry.token) === 'transition-duration'"
+            class="animation-token-list__track"
+          >
+            <span
+              class="animation-token-list__bar animation-token-list__bar--transition"
+              :style="{
+                transitionProperty: 'transform',
+                transitionDuration: `var(${entry.token.name})`,
+                transitionTimingFunction: 'ease',
+              }"
+              aria-hidden="true"
+            />
+          </div>
+
+          <div
+            v-else-if="previewKind(entry.token) === 'animation-duration'"
+            class="animation-token-list__track"
+          >
+            <span
+              class="animation-token-list__bar animation-token-list__bar--animated"
+              :style="{ animationDuration: `var(${entry.token.name})` }"
+              aria-hidden="true"
+            />
+          </div>
+
+          <div v-else class="animation-token-list__track">
+            <span
+              class="animation-token-list__bar animation-token-list__bar--delayed"
+              :style="{ animationDelay: `var(${entry.token.name})` }"
+              aria-hidden="true"
+            />
+          </div>
+        </div>
+
+        <div class="animation-token-list__meta">
+          <code class="animation-token-list__name">{{ entry.token.name }}</code>
+          <span class="animation-token-list__value">{{ entry.token.value }}</span>
+          <span v-if="previewHint(previewKind(entry.token))" class="animation-token-list__hint">
+            {{ previewHint(previewKind(entry.token)) }}
+          </span>
+          <TokenDeprecatedLabel v-if="entry.token.deprecated" />
+        </div>
+        </template>
+      </li>
+    </template>
+  </ul>
+</template>
+
+<style scoped>
+.animation-token-list {
+  display: flex;
+  flex-direction: column;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.animation-token-list__item {
+  display: grid;
+  grid-template-columns: 12rem 1fr;
+  align-items: center;
+  gap: var(--spacing-100);
+  padding-block: var(--spacing-75);
+  border-bottom: var(--border-subtle);
+}
+
+.animation-token-list__item--property {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: var(--spacing-25);
+  padding-block: 0;
+  border-bottom: none;
+  margin-top: var(--spacing-75);
+}
+
+.animation-token-list__item--property:first-child {
+  margin-top: 0;
+}
+
+.animation-token-list__property-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: var(--spacing-25);
+}
+
+.animation-token-list__preview {
+  display: flex;
+  align-items: center;
+  min-height: 2.75rem;
+}
+
+.animation-token-list__sample--property {
+  display: inline-flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: var(--spacing-25);
+  width: auto;
+  min-height: 0;
+  padding: var(--spacing-35) var(--spacing-50);
+  font-family: var(--font-family-monospace);
+  font-size: var(--font-size-medium);
+  line-height: var(--line-height-medium);
+  color: var(--color-base);
+  background: var(--background-color-neutral-subtle);
+  border: var(--border-subtle);
+  border-radius: var(--border-radius-base);
+  box-shadow: none;
+  opacity: 1;
+  transform: scale(1);
+}
+
+.animation-token-list__item:hover .animation-token-list__sample--property {
+  background: var(--color-progressive);
+  color: var(--color-inverted);
+  border-color: var(--color-progressive--hover);
+  box-shadow: var(--box-shadow-medium);
+  opacity: 0.85;
+  transform: scale(1.02);
+}
+
+.animation-token-list__sample--property .animation-token-list__value,
+.animation-token-list__sample--property .animation-token-list__hint {
+  font-size: var(--font-size-small);
+  line-height: var(--line-height-small);
+  color: var(--color-subtle);
+}
+
+.animation-token-list__item:hover .animation-token-list__sample--property .animation-token-list__value,
+.animation-token-list__item:hover .animation-token-list__sample--property .animation-token-list__hint {
+  color: inherit;
+  opacity: 0.85;
+}
+
+.animation-token-list__track {
+  position: relative;
+  width: 100%;
+  height: 0.5rem;
+  background: var(--background-color-neutral);
+  border-radius: var(--border-radius-pill);
+  overflow: hidden;
+}
+
+.animation-token-list__bar {
+  position: absolute;
+  inset-block: 0;
+  inset-inline-start: 0;
+  width: 2rem;
+  background: var(--color-progressive);
+  border-radius: var(--border-radius-pill);
+}
+
+.animation-token-list__bar--transition {
+  transform: translateX(0);
+}
+
+.animation-token-list__item:hover .animation-token-list__bar--transition {
+  transform: translateX(calc(12rem - 2rem));
+}
+
+.animation-token-list__bar--animated {
+  animation: animation-token-list-slide 2s ease-in-out infinite alternate;
+}
+
+.animation-token-list__bar--pulse {
+  width: 100%;
+  transform-origin: left center;
+  animation-name: animation-token-list-pulse;
+}
+
+.animation-token-list__bar--delayed {
+  animation: animation-token-list-slide 2s linear infinite;
+}
+
+.animation-token-list__transform-host {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 3rem;
+  height: 3rem;
+  background: var(--background-color-neutral-subtle);
+  border: var(--border-subtle);
+  border-radius: var(--border-radius-base);
+}
+
+.animation-token-list__transform-arm {
+  display: block;
+  width: 0.125rem;
+  height: 1.25rem;
+  background: var(--color-progressive);
+  border-radius: var(--border-radius-pill);
+  transform-origin: center bottom;
+}
+
+.animation-token-list__meta {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: var(--spacing-25);
+  min-width: 0;
+}
+
+.animation-token-list__name {
+  font-family: var(--font-family-monospace);
+  font-size: var(--font-size-small);
+  line-height: var(--line-height-small);
+  color: var(--color-base);
+  overflow-wrap: anywhere;
+  word-break: break-word;
+}
+
+.animation-token-list__value {
+  font-family: var(--font-family-monospace);
+  font-size: var(--font-size-small);
+  line-height: var(--line-height-small);
+  color: var(--color-subtle);
+  overflow-wrap: anywhere;
+  word-break: break-word;
+}
+
+.animation-token-list__hint {
+  font-size: var(--font-size-small);
+  line-height: var(--line-height-small);
+  color: var(--color-subtle);
+}
+
+.animation-token-list__item--deprecated .animation-token-list__preview {
+  opacity: 0.75;
+}
+
+@keyframes animation-token-list-slide {
+  from {
+    transform: translateX(0);
+  }
+
+  to {
+    transform: translateX(calc(12rem - 2rem));
+  }
+}
+
+@keyframes animation-token-list-pulse {
+  0%,
+  100% {
+    transform: scaleX(0.2);
+    opacity: 0.35;
+  }
+
+  50% {
+    transform: scaleX(1);
+    opacity: 1;
+  }
+}
+</style>
diff --git a/src/prototypes/example-codex-kitchen-sink/playground/BorderTokenList.vue b/src/prototypes/example-codex-kitchen-sink/playground/BorderTokenList.vue
new file mode 100644
index 00000000..373e00cb
--- /dev/null
+++ b/src/prototypes/example-codex-kitchen-sink/playground/BorderTokenList.vue
@@ -0,0 +1,246 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import type { TokenEntry } from '../lib/parse-tokens'
+import { getBorderTokenGroup, isPositionOffsetToken } from '../lib/parse-tokens'
+import TokenDeprecatedLabel from './TokenDeprecatedLabel.vue'
+import TokenListGroupHeading from './TokenListGroupHeading.vue'
+
+const props = defineProps<{
+  tokens: TokenEntry[]
+}>()
+
+type ListEntry =
+  | { type: 'group'; label: string }
+  | { type: 'token'; token: TokenEntry }
+
+const entries = computed(() => {
+  const items: ListEntry[] = []
+  let currentGroup: string | null = null
+  let skipNextGroupHeading = true
+
+  for (const token of props.tokens) {
+    const group = getBorderTokenGroup(token.name)
+    if (group !== currentGroup) {
+      if (!skipNextGroupHeading) {
+        items.push({ type: 'group', label: group })
+      }
+      currentGroup = group
+      skipNextGroupHeading = false
+    }
+    items.push({ type: 'token', token })
+  }
+
+  return items
+})
+
+type PreviewKind = 'shorthand' | 'radius' | 'style' | 'width'
+
+function previewKind(name: string): PreviewKind {
+  if (name.startsWith('--border-radius-')) return 'radius'
+  if (name.startsWith('--border-style-')) return 'style'
+  if (name.startsWith('--border-width-')) return 'width'
+  return 'shorthand'
+}
+
+function previewStyle(token: TokenEntry): Record<string, string> {
+  const cssVar = `var(${token.name})`
+  switch (previewKind(token.name)) {
+    case 'radius':
+      return { borderRadius: cssVar }
+    case 'style':
+      return { border: `var(--border-width-thick) ${cssVar} var(--border-color-progressive)` }
+    case 'width':
+      return { border: `${cssVar} solid var(--border-color-progressive)` }
+    default:
+      return { border: cssVar }
+  }
+}
+
+function previewClass(name: string): Record<string, boolean> {
+  return {
+    'border-token-list__preview--radius': name.startsWith('--border-radius-'),
+    'border-token-list__preview--pill': name === '--border-radius-pill',
+    'border-token-list__preview--shorthand': previewKind(name) === 'shorthand',
+  }
+}
+</script>
+
+<template>
+  <ul class="border-token-list">
+    <template v-for="(entry, index) in entries" :key="index">
+      <TokenListGroupHeading v-if="entry.type === 'group'" :label="entry.label" />
+      <li
+        v-else
+        class="border-token-list__item"
+        :class="{ 'border-token-list__item--deprecated': entry.token.deprecated }"
+      >
+        <div
+          v-if="isPositionOffsetToken(entry.token.name)"
+          class="border-token-list__offset-demo"
+          aria-hidden="true"
+        >
+          <div class="border-token-list__offset-example">
+            <span class="border-token-list__offset-caption">inset: 0</span>
+            <div class="border-token-list__offset-box">
+              <span class="border-token-list__overlay border-token-list__overlay--inset-zero" />
+            </div>
+          </div>
+          <div class="border-token-list__offset-example">
+            <span class="border-token-list__offset-caption">with token</span>
+            <div class="border-token-list__offset-box">
+              <span
+                class="border-token-list__overlay border-token-list__overlay--with-offset"
+              />
+            </div>
+          </div>
+        </div>
+        <div
+          v-else
+          class="border-token-list__preview"
+          :class="previewClass(entry.token.name)"
+          :style="previewStyle(entry.token)"
+          aria-hidden="true"
+        />
+        <div class="border-token-list__meta">
+          <code class="border-token-list__name">{{ entry.token.name }}</code>
+          <span class="border-token-list__value">{{ entry.token.value }}</span>
+          <p
+            v-if="isPositionOffsetToken(entry.token.name)"
+            class="border-token-list__hint"
+          >
+            Negative inset equal to <code>--border-width-base</code> pulls an overlay outward so
+            its edges align with the component’s outer border.
+          </p>
+          <TokenDeprecatedLabel v-if="entry.token.deprecated" />
+        </div>
+      </li>
+    </template>
+  </ul>
+</template>
+
+<style scoped>
+.border-token-list {
+  display: flex;
+  flex-direction: column;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.border-token-list__item {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  align-items: center;
+  gap: var(--spacing-100);
+  padding-block: var(--spacing-75);
+  border-bottom: var(--border-subtle);
+}
+
+.border-token-list__meta {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: var(--spacing-25);
+  min-width: 0;
+}
+
+.border-token-list__preview {
+  flex-shrink: 0;
+  width: 3.5rem;
+  height: 2.5rem;
+  background: var(--background-color-base);
+}
+
+.border-token-list__preview--radius {
+  background: var(--color-progressive);
+}
+
+.border-token-list__preview--pill {
+  width: 5rem;
+}
+
+.border-token-list__preview--shorthand {
+  box-sizing: border-box;
+}
+
+.border-token-list__offset-demo {
+  display: flex;
+  flex-shrink: 0;
+  gap: var(--spacing-100);
+}
+
+.border-token-list__offset-example {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--spacing-25);
+}
+
+.border-token-list__offset-caption {
+  font-size: var(--font-size-small);
+  line-height: var(--line-height-small);
+  color: var(--color-subtle);
+  white-space: nowrap;
+}
+
+.border-token-list__offset-box {
+  position: relative;
+  box-sizing: border-box;
+  width: 3.5rem;
+  height: 2.5rem;
+  border: var(--border-width-base) solid var(--border-color-progressive);
+  border-radius: var(--border-radius-base);
+  background: var(--background-color-base);
+}
+
+.border-token-list__overlay {
+  position: absolute;
+  box-sizing: border-box;
+  border: var(--border-width-base) solid var(--color-progressive);
+  border-radius: var(--border-radius-base);
+  background: var(--background-color-progressive-subtle);
+  pointer-events: none;
+}
+
+.border-token-list__overlay--inset-zero {
+  inset: 0;
+}
+
+.border-token-list__overlay--with-offset {
+  inset: calc(-1 * var(--border-width-base));
+}
+
+.border-token-list__hint code {
+  font-family: var(--font-family-monospace);
+  font-size: inherit;
+}
+
+.border-token-list__hint {
+  margin: 0;
+  font-size: var(--font-size-small);
+  line-height: var(--line-height-small);
+  color: var(--color-subtle);
+}
+
+.border-token-list__name {
+  font-family: var(--font-family-monospace);
+  font-size: var(--font-size-small);
+  line-height: var(--line-height-small);
+  color: var(--color-base);
+  overflow-wrap: anywhere;
+  word-break: break-word;
+}
+
+.border-token-list__value {
+  font-family: var(--font-family-monospace);
+  font-size: var(--font-size-small);
+  line-height: var(--line-height-small);
+  color: var(--color-subtle);
+  overflow-wrap: anywhere;
+  word-break: break-word;
+}
+
+.border-token-list__item--deprecated .border-token-list__preview {
+  opacity: 0.75;
+}
+</style>
diff --git a/src/prototypes/example-codex-kitchen-sink/playground/BoxShadowTokenList.vue b/src/prototypes/example-codex-kitchen-sink/playground/BoxShadowTokenList.vue
new file mode 100644
index 00000000..ccdb6ea9
--- /dev/null
+++ b/src/prototypes/example-codex-kitchen-sink/playground/BoxShadowTokenList.vue
@@ -0,0 +1,232 @@
+<script setup lang="ts">
+import { computed, nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue'
+import type { TokenEntry } from '../lib/parse-tokens'
+import { getBoxShadowTokenGroup } from '../lib/parse-tokens'
+import { getSwatchTextToneForBackground } from '../lib/color-contrast'
+import type { SwatchTextTone } from '../lib/color-contrast'
+import TokenDeprecatedLabel from './TokenDeprecatedLabel.vue'
+import TokenListGroupHeading from './TokenListGroupHeading.vue'
+
+const props = defineProps<{
+  tokens: TokenEntry[]
+}>()
+
+type ListEntry =
+  | { type: 'group'; label: string }
+  | { type: 'token'; token: TokenEntry }
+
+const shadowColorTokensWithDarkWrap = new Set(['--box-shadow-color-inverted'])
+
+const textToneByToken = ref<Record<string, SwatchTextTone>>({})
+const sampleRefs = new Map<string, HTMLElement>()
+
+const entries = computed(() => {
+  const items: ListEntry[] = []
+  let currentGroup: string | null = null
+  let skipNextGroupHeading = true
+
+  for (const token of props.tokens) {
+    const group = getBoxShadowTokenGroup(token.name)
+    if (group !== currentGroup) {
+      if (!skipNextGroupHeading) {
+        items.push({ type: 'group', label: group })
+      }
+      currentGroup = group
+      skipNextGroupHeading = false
+    }
+    items.push({ type: 'token', token })
+  }
+
+  return items
+})
+
+function setSampleRef(name: string, el: unknown) {
+  if (el instanceof HTMLElement) sampleRefs.set(name, el)
+  else sampleRefs.delete(name)
+}
+
+function updateContrast() {
+  nextTick(() => {
+    const tones: Record<string, SwatchTextTone> = {}
+
+    for (const token of props.tokens) {
+      if (getBoxShadowTokenGroup(token.name) !== 'Color') continue
+      const sample = sampleRefs.get(token.name)
+      if (!sample) continue
+      tones[token.name] = getSwatchTextToneForBackground(sample)
+    }
+
+    textToneByToken.value = tones
+  })
+}
+
+function shadowColorForToken(name: string): string {
+  if (name.includes('medium') || name.includes('large') || name.includes('around')) {
+    return 'var(--box-shadow-color-alpha-base)'
+  }
+  return 'var(--box-shadow-color-base)'
+}
+
+function sampleStyle(token: TokenEntry): Record<string, string> {
+  const cssVar = `var(${token.name})`
+  const group = getBoxShadowTokenGroup(token.name)
+
+  if (group === 'Color') {
+    return { backgroundColor: cssVar }
+  }
+
+  if (group === 'Inset' || group === 'Outset') {
+    return { boxShadow: `${cssVar} ${shadowColorForToken(token.name)}` }
+  }
+
+  return { boxShadow: cssVar }
+}
+
+function needsShadowHost(token: TokenEntry): boolean {
+  return getBoxShadowTokenGroup(token.name) !== 'Color'
+}
+
+function needsInvertedWrap(name: string): boolean {
+  return shadowColorTokensWithDarkWrap.has(name)
+}
+
+function isTransparentColor(name: string): boolean {
+  return name === '--box-shadow-color-transparent'
+}
+
+let themeObserver: MutationObserver | null = null
+
+onMounted(() => {
+  updateContrast()
+  themeObserver = new MutationObserver(updateContrast)
+  themeObserver.observe(document.documentElement, {
+    attributes: true,
+    attributeFilter: ['data-theme'],
+  })
+})
+
+onBeforeUnmount(() => themeObserver?.disconnect())
+
+watch(() => props.tokens, updateContrast, { deep: true })
+</script>
+
+<template>
+  <ul class="box-shadow-token-list">
+    <template v-for="(entry, index) in entries" :key="index">
+      <TokenListGroupHeading v-if="entry.type === 'group'" :label="entry.label" />
+      <li
+        v-else
+        class="box-shadow-token-list__item"
+        :class="{ 'box-shadow-token-list__item--deprecated': entry.token.deprecated }"
+      >
+        <div
+          class="box-shadow-token-list__host"
+          :class="{
+            'box-shadow-token-list__host--shadow': needsShadowHost(entry.token),
+            'box-shadow-token-list__host--inverted': needsInvertedWrap(entry.token.name),
+          }"
+        >
+          <span
+            :ref="(el) => setSampleRef(entry.token.name, el)"
+            class="box-shadow-token-list__sample"
+            :class="{
+              'box-shadow-token-list__sample--color': getBoxShadowTokenGroup(entry.token.name) === 'Color',
+              'box-shadow-token-list__sample--transparent': isTransparentColor(entry.token.name),
+              'box-shadow-token-list__sample--light-text':
+                textToneByToken[entry.token.name] === 'light',
+            }"
+            :style="sampleStyle(entry.token)"
+            aria-hidden="true"
+          />
+        </div>
+        <div class="box-shadow-token-list__meta">
+          <code class="box-shadow-token-list__name">{{ entry.token.name }}</code>
+          <span class="box-shadow-token-list__value">{{ entry.token.value }}</span>
+          <TokenDeprecatedLabel v-if="entry.token.deprecated" />
+        </div>
+      </li>
+    </template>
+  </ul>
+</template>
+
+<style scoped>
+.box-shadow-token-list {
+  display: flex;
+  flex-direction: column;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.box-shadow-token-list__item {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  align-items: center;
+  gap: var(--spacing-100);
+  padding-block: var(--spacing-75);
+  border-bottom: var(--border-subtle);
+}
+
+.box-shadow-token-list__host {
+  display: inline-flex;
+}
+
+.box-shadow-token-list__host--shadow {
+  padding: var(--spacing-200);
+  border-radius: var(--border-radius-base);
+  background: var(--background-color-neutral-subtle);
+}
+
+.box-shadow-token-list__host--inverted {
+  padding: var(--spacing-75);
+  background: var(--background-color-inverted);
+}
+
+.box-shadow-token-list__sample {
+  display: block;
+  width: 3.5rem;
+  height: 2.5rem;
+  background: var(--background-color-base);
+  border-radius: var(--border-radius-base);
+}
+
+.box-shadow-token-list__sample--color {
+  width: 5rem;
+}
+
+.box-shadow-token-list__sample--transparent {
+  background:
+    repeating-conic-gradient(var(--border-color-subtle) 0% 25%, transparent 0% 50%) 50% / 10px 10px,
+    var(--background-color-base);
+}
+
+.box-shadow-token-list__meta {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: var(--spacing-25);
+  min-width: 0;
+}
+
+.box-shadow-token-list__name {
+  font-family: var(--font-family-monospace);
+  font-size: var(--font-size-small);
+  line-height: var(--line-height-small);
+  color: var(--color-base);
+  overflow-wrap: anywhere;
+  word-break: break-word;
+}
+
+.box-shadow-token-list__value {
+  font-family: var(--font-family-monospace);
+  font-size: var(--font-size-small);
+  line-height: var(--line-height-small);
+  color: var(--color-subtle);
+  overflow-wrap: anywhere;
+  word-break: break-word;
+}
+
+.box-shadow-token-list__item--deprecated .box-shadow-token-list__host {
+  opacity: 0.75;
+}
+</style>
diff --git a/src/prototypes/example-codex-kitchen-sink/playground/ColorPaletteList.vue b/src/prototypes/example-codex-kitchen-sink/playground/ColorPaletteList.vue
new file mode 100644
index 00000000..99ccc855
--- /dev/null
+++ b/src/prototypes/example-codex-kitchen-sink/playground/ColorPaletteList.vue
@@ -0,0 +1,184 @@
+<script setup lang="ts">
+import { computed, nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue'
+import { codexPaletteGroups } from '../lib/palette-colors'
+import type { PaletteColor } from '../lib/palette-colors'
+import { getSwatchTextToneForBackground } from '../lib/color-contrast'
+import type { SwatchTextTone } from '../lib/color-contrast'
+
+const accentFamilies = new Set(['White', 'Black'])
+
+const accentGroups = computed(() =>
+  codexPaletteGroups.filter((group) => accentFamilies.has(group.family)),
+)
+
+const rampGroups = computed(() =>
+  codexPaletteGroups.filter((group) => !accentFamilies.has(group.family)),
+)
+
+const textToneByColor = ref<Record<string, SwatchTextTone>>({})
+const sampleRefs = new Map<string, HTMLElement>()
+
+function setSampleRef(name: string, el: unknown) {
+  if (el instanceof HTMLElement) sampleRefs.set(name, el)
+  else sampleRefs.delete(name)
+}
+
+function updateContrast() {
+  nextTick(() => {
+    const next: Record<string, SwatchTextTone> = {}
+    for (const color of codexPaletteGroups.flatMap((group) => group.colors)) {
+      const sample = sampleRefs.get(color.name)
+      if (sample) next[color.name] = getSwatchTextToneForBackground(sample)
+    }
+    textToneByColor.value = next
+  })
+}
+
+function sampleStyle(color: PaletteColor) {
+  return { backgroundColor: color.value }
+}
+
+let themeObserver: MutationObserver | null = null
+
+onMounted(() => {
+  updateContrast()
+  themeObserver = new MutationObserver(updateContrast)
+  themeObserver.observe(document.documentElement, {
+    attributes: true,
+    attributeFilter: ['data-theme'],
+  })
+})
+
+onBeforeUnmount(() => themeObserver?.disconnect())
+
+watch(() => codexPaletteGroups, updateContrast, { deep: true })
+</script>
+
+<template>
+  <div class="color-palette">
+    <div class="color-palette__accent">
+      <section v-for="group in accentGroups" :key="group.family" class="color-palette__family">
+        <h3 class="color-palette__title">{{ group.family }}</h3>
+        <ul class="color-palette__stack">
+          <li v-for="color in group.colors" :key="color.name" class="color-palette__item">
+            <div class="color-palette__sample-host">
+              <span
+                :ref="(el) => setSampleRef(color.name, el)"
+                class="color-palette__sample color-palette__sample--filled"
+                :class="{ 'color-palette__sample--light-text': textToneByColor[color.name] === 'light' }"
+                :style="sampleStyle(color)"
+              >
+                {{ color.name }}
+                <span class="color-palette__value">{{ color.value }}</span>
+              </span>
+            </div>
+          </li>
+        </ul>
+      </section>
+    </div>
+
+    <div class="color-palette__ramps">
+      <section v-for="group in rampGroups" :key="group.family" class="color-palette__family">
+        <h3 class="color-palette__title">{{ group.family }}</h3>
+        <ul class="color-palette__stack">
+          <li v-for="color in group.colors" :key="color.name" class="color-palette__item">
+            <div class="color-palette__sample-host">
+              <span
+                :ref="(el) => setSampleRef(color.name, el)"
+                class="color-palette__sample color-palette__sample--filled"
+                :class="{ 'color-palette__sample--light-text': textToneByColor[color.name] === 'light' }"
+                :style="sampleStyle(color)"
+              >
+                {{ color.name }}
+                <span class="color-palette__value">{{ color.value }}</span>
+              </span>
+            </div>
+          </li>
+        </ul>
+      </section>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.color-palette {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-75);
+}
+
+.color-palette__accent {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--spacing-50) var(--spacing-75);
+}
+
+.color-palette__ramps {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr));
+  gap: var(--spacing-50) var(--spacing-75);
+}
+
+.color-palette__family {
+  min-width: 0;
+}
+
+.color-palette__title {
+  margin: 0 0 var(--spacing-35);
+  font-family: var(--font-family-base);
+  font-size: var(--font-size-medium);
+  font-weight: var(--font-weight-bold);
+  line-height: var(--line-height-medium);
+  color: var(--color-base);
+}
+
+.color-palette__stack {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-25);
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.color-palette__item {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+}
+
+.color-palette__sample-host {
+  display: inline-flex;
+}
+
+.color-palette__sample {
+  display: inline-flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: var(--spacing-25);
+  font-family: var(--font-family-monospace);
+  font-size: var(--font-size-medium);
+  line-height: var(--line-height-medium);
+  color: #202122;
+}
+
+.color-palette__value {
+  font-size: var(--font-size-small);
+  line-height: var(--line-height-small);
+  color: var(--color-subtle);
+}
+
+.color-palette__sample--filled {
+  padding: var(--spacing-35) var(--spacing-50);
+  border-radius: var(--border-radius-base);
+}
+
+.color-palette__sample--filled .color-palette__value {
+  color: inherit;
+  opacity: 0.85;
+}
+
+.color-palette__sample--filled.color-palette__sample--light-text {
+  color: #fff;
+}
+</style>
diff --git a/src/prototypes/example-codex-kitchen-sink/playground/ColorTokenList.vue b/src/prototypes/example-codex-kitchen-sink/playground/ColorTokenList.vue
new file mode 100644
index 00000000..a5be698a
--- /dev/null
+++ b/src/prototypes/example-codex-kitchen-sink/playground/ColorTokenList.vue
@@ -0,0 +1,220 @@
+<script setup lang="ts">
+import { computed, nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue'
+import type { ColorSubTab, TokenEntry } from '../lib/parse-tokens'
+import { getSwatchTextToneForBackground, needsInvertedTextBackground } from '../lib/color-contrast'
+import type { SwatchTextTone } from '../lib/color-contrast'
+import TokenDeprecatedLabel from './TokenDeprecatedLabel.vue'
+
+const props = defineProps<{
+  mode: ColorSubTab
+  tokens: TokenEntry[]
+}>()
+
+const borderTokensWithDarkWrap = new Set([
+  '--border-color-inverted',
+  '--border-color-inverted-fixed',
+])
+
+const backgroundTokensWithDarkText = new Set([
+  '--background-color-button-quiet--hover',
+  '--background-color-button-quiet--active',
+  '--background-color-transparent',
+])
+
+const textToneByToken = ref<Record<string, SwatchTextTone>>({})
+const needsInvertedBgByToken = ref<Record<string, boolean>>({})
+const sampleRefs = new Map<string, HTMLElement>()
+
+const isFilledMode = computed(() => props.mode === 'background' || props.mode === 'accent')
+
+function needsBorderDarkWrap(tokenName: string): boolean {
+  return props.mode === 'border' && borderTokensWithDarkWrap.has(tokenName)
+}
+
+function setSampleRef(name: string, el: unknown) {
+  if (el instanceof HTMLElement) sampleRefs.set(name, el)
+  else sampleRefs.delete(name)
+}
+
+function updateContrast() {
+  nextTick(() => {
+    const tones: Record<string, SwatchTextTone> = {}
+    const invertedBgs: Record<string, boolean> = {}
+
+    for (const token of props.tokens) {
+      const sample = sampleRefs.get(token.name)
+      if (!sample) continue
+
+      if (isFilledMode.value) {
+        tones[token.name] = backgroundTokensWithDarkText.has(token.name)
+          ? 'dark'
+          : getSwatchTextToneForBackground(sample)
+      } else if (props.mode === 'text') {
+        invertedBgs[token.name] = needsInvertedTextBackground(sample)
+      }
+    }
+
+    textToneByToken.value = tones
+    needsInvertedBgByToken.value = invertedBgs
+  })
+}
+
+function sampleStyle(token: TokenEntry) {
+  if (props.mode === 'text') {
+    return { color: `var(${token.name})` }
+  }
+
+  if (isFilledMode.value) {
+    return { backgroundColor: `var(${token.name})` }
+  }
+
+  return { borderColor: `var(${token.name})` }
+}
+
+let themeObserver: MutationObserver | null = null
+
+onMounted(() => {
+  updateContrast()
+  themeObserver = new MutationObserver(updateContrast)
+  themeObserver.observe(document.documentElement, {
+    attributes: true,
+    attributeFilter: ['data-theme'],
+  })
+})
+
+onBeforeUnmount(() => themeObserver?.disconnect())
+
+watch(() => [props.tokens, props.mode], updateContrast, { deep: true })
+</script>
+
+<template>
+  <ul class="color-token-list">
+    <li
+      v-for="token in tokens"
+      :key="token.name"
+      class="color-token-list__item"
+      :class="{ 'color-token-list__item--deprecated': token.deprecated }"
+    >
+      <div
+        class="color-token-list__sample-host"
+        :class="{ 'color-token-list__sample-host--inverted-border': needsBorderDarkWrap(token.name) }"
+      >
+        <span
+          :ref="(el) => setSampleRef(token.name, el)"
+          class="color-token-list__sample"
+          :class="{
+            'color-token-list__sample--filled': isFilledMode,
+            'color-token-list__sample--bordered': mode === 'border',
+            'color-token-list__sample--inverted-border-inner': needsBorderDarkWrap(token.name),
+            'color-token-list__sample--light-text': textToneByToken[token.name] === 'light',
+            'color-token-list__sample--inverted-bg':
+              mode === 'text' && needsInvertedBgByToken[token.name],
+          }"
+          :style="sampleStyle(token)"
+        >
+          {{ token.name }}
+          <span class="color-token-list__value">{{ token.value }}</span>
+        </span>
+      </div>
+      <TokenDeprecatedLabel v-if="token.deprecated" />
+    </li>
+  </ul>
+</template>
+
+<style scoped>
+.color-token-list {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-75);
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.color-token-list__item {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: var(--spacing-25);
+}
+
+.color-token-list__sample-host {
+  display: inline-flex;
+}
+
+.color-token-list__sample-host--inverted-border {
+  padding: var(--spacing-75);
+  border-radius: var(--border-radius-base);
+  background: var(--background-color-inverted);
+}
+
+.color-token-list__sample {
+  display: inline-flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: var(--spacing-25);
+  font-family: var(--font-family-monospace);
+  font-size: var(--font-size-medium);
+  line-height: var(--line-height-medium);
+  color: var(--color-base);
+}
+
+.color-token-list__value {
+  font-size: var(--font-size-small);
+  line-height: var(--line-height-small);
+  color: inherit;
+  overflow-wrap: anywhere;
+  word-break: break-word;
+}
+
+.color-token-list__sample--filled,
+.color-token-list__sample--bordered {
+  padding: var(--spacing-35) var(--spacing-50);
+  border-radius: var(--border-radius-base);
+}
+
+.color-token-list__sample--filled {
+  color: #202122;
+}
+
+.color-token-list__sample--filled .color-token-list__value {
+  color: inherit;
+  opacity: 0.85;
+}
+
+.color-token-list__sample--filled.color-token-list__sample--light-text {
+  color: #fff;
+}
+
+.color-token-list__sample--bordered {
+  border: var(--border-width-base) solid;
+  background: var(--background-color-base);
+  color: #202122;
+}
+
+.color-token-list__sample--bordered.color-token-list__sample--inverted-border-inner {
+  background: var(--background-color-inverted);
+  color: #fff;
+}
+
+.color-token-list__sample--bordered.color-token-list__sample--inverted-border-inner
+  .color-token-list__value {
+  color: inherit;
+  opacity: 0.85;
+}
+
+.color-token-list__sample--inverted-bg {
+  padding: var(--spacing-35) var(--spacing-50);
+  border-radius: var(--border-radius-base);
+  background: var(--background-color-inverted);
+}
+
+.color-token-list__sample--inverted-bg .color-token-list__value {
+  color: inherit;
+  opacity: 0.85;
+}
+
+.color-token-list__item--deprecated .color-token-list__sample {
+  opacity: 0.75;
+}
+</style>
diff --git a/src/prototypes/example-codex-kitchen-sink/playground/CursorTokenList.vue b/src/prototypes/example-codex-kitchen-sink/playground/CursorTokenList.vue
new file mode 100644
index 00000000..4b2a6436
--- /dev/null
+++ b/src/prototypes/example-codex-kitchen-sink/playground/CursorTokenList.vue
@@ -0,0 +1,79 @@
+<script setup lang="ts">
+import type { TokenEntry } from '../lib/parse-tokens'
+import TokenDeprecatedLabel from './TokenDeprecatedLabel.vue'
+
+defineProps<{
+  tokens: TokenEntry[]
+}>()
+</script>
+
+<template>
+  <ul class="cursor-token-list">
+    <li
+      v-for="token in tokens"
+      :key="token.name"
+      class="cursor-token-list__item"
+      :class="{ 'cursor-token-list__item--deprecated': token.deprecated }"
+    >
+      <span
+        class="cursor-token-list__preview"
+        :style="{ '--cursor-value': `var(${token.name})` }"
+      >
+        {{ token.name }}
+        <span class="cursor-token-list__value">{{ token.value }}</span>
+      </span>
+      <TokenDeprecatedLabel v-if="token.deprecated" />
+    </li>
+  </ul>
+</template>
+
+<style scoped>
+.cursor-token-list {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-75);
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.cursor-token-list__item {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: var(--spacing-25);
+}
+
+.cursor-token-list__preview {
+  display: inline-flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: var(--spacing-25);
+  padding: var(--spacing-35) var(--spacing-50);
+  font-family: var(--font-family-monospace);
+  font-size: var(--font-size-medium);
+  line-height: var(--line-height-medium);
+  color: var(--color-base);
+  background: var(--background-color-neutral-subtle);
+  border: var(--border-subtle);
+  border-radius: var(--border-radius-base);
+  cursor: default;
+}
+
+.cursor-token-list__item:hover .cursor-token-list__preview {
+  cursor: var(--cursor-value);
+  background: var(--background-color-base);
+}
+
+.cursor-token-list__value {
+  font-size: var(--font-size-small);
+  line-height: var(--line-height-small);
+  color: var(--color-subtle);
+  overflow-wrap: anywhere;
+  word-break: break-word;
+}
+
+.cursor-token-list__item--deprecated .cursor-token-list__preview {
+  opacity: 0.75;
+}
+</style>
diff --git a/src/prototypes/example-codex-kitchen-sink/playground/DimensionTokenList.vue b/src/prototypes/example-codex-kitchen-sink/playground/DimensionTokenList.vue
new file mode 100644
index 00000000..6228b253
--- /dev/null
+++ b/src/prototypes/example-codex-kitchen-sink/playground/DimensionTokenList.vue
@@ -0,0 +1,370 @@
+<script setup lang="ts">
+import { computed, nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue'
+import type { TokenEntry } from '../lib/parse-tokens'
+import {
+  getBreakpointTokenGroup,
+  getSizeTokenGroup,
+  getSpacingTokenGroup,
+  isBackgroundPositionToken,
+  isBackgroundSizeToken,
+  isZeroDimensionToken,
+  parsePlainPercentage,
+  usesDimensionBarDemo,
+} from '../lib/parse-tokens'
+import TokenDeprecatedLabel from './TokenDeprecatedLabel.vue'
+import TokenListGroupHeading from './TokenListGroupHeading.vue'
+
+const props = defineProps<{
+  kind: 'spacing' | 'size' | 'breakpoint'
+  tokens: TokenEntry[]
+}>()
+
+type ListEntry =
+  | { type: 'group'; label: string }
+  | { type: 'token'; token: TokenEntry }
+
+const overflowEnd = ref(new Set<string>())
+const demoRefs = new Map<string, HTMLElement>()
+
+const entries = computed(() => {
+  const items: ListEntry[] = []
+  let currentGroup: string | null = null
+
+  for (const token of props.tokens) {
+    const group =
+      props.kind === 'spacing'
+        ? getSpacingTokenGroup(token.name)
+        : props.kind === 'breakpoint'
+          ? getBreakpointTokenGroup(token.name)
+          : getSizeTokenGroup(token.name)
+
+    if (group !== currentGroup) {
+      items.push({ type: 'group', label: group })
+      currentGroup = group
+    }
+
+    items.push({ type: 'token', token })
+  }
+
+  return items
+})
+
+const barReference = '8rem'
+
+function barWidthStyle(token: TokenEntry): Record<string, string> | undefined {
+  if (isZeroDimensionToken(token)) return undefined
+  const pct = parsePlainPercentage(token.value)
+  if (pct !== null) return { width: `calc(${barReference} * ${pct} / 100)` }
+  return { width: `calc(var(${token.name}))` }
+}
+
+function trackStyle(token: TokenEntry): Record<string, string> {
+  const barWidth = barWidthStyle(token)?.width
+  if (!barWidth) return { minWidth: '100%' }
+  return { minWidth: `max(100%, ${barWidth})` }
+}
+
+function hasOverflowEnd(el: HTMLElement): boolean {
+  return (
+    el.scrollWidth > el.clientWidth + 1 &&
+    el.scrollLeft + el.clientWidth < el.scrollWidth - 1
+  )
+}
+
+function setsEqual(a: Set<string>, b: Set<string>): boolean {
+  if (a.size !== b.size) return false
+  for (const value of a) {
+    if (!b.has(value)) return false
+  }
+  return true
+}
+
+function updateOverflow() {
+  const next = new Set<string>()
+
+  for (const [name, el] of demoRefs) {
+    if (hasOverflowEnd(el)) next.add(name)
+  }
+
+  if (setsEqual(next, overflowEnd.value)) return
+  overflowEnd.value = next
+}
+
+let overflowUpdateQueued = false
+
+function scheduleOverflowUpdate() {
+  if (overflowUpdateQueued) return
+  overflowUpdateQueued = true
+  nextTick(() => {
+    overflowUpdateQueued = false
+    updateOverflow()
+  })
+}
+
+function setDemoRef(name: string, el: unknown) {
+  const existing = demoRefs.get(name)
+  if (existing === el) return
+
+  if (existing) {
+    existing.removeEventListener('scroll', scheduleOverflowUpdate)
+    resizeObserver?.unobserve(existing)
+    demoRefs.delete(name)
+  }
+
+  if (el instanceof HTMLElement) {
+    demoRefs.set(name, el)
+    el.addEventListener('scroll', scheduleOverflowUpdate, { passive: true })
+    resizeObserver?.observe(el)
+  }
+
+  scheduleOverflowUpdate()
+}
+
+let resizeObserver: ResizeObserver | null = null
+let themeObserver: MutationObserver | null = null
+
+onMounted(() => {
+  resizeObserver = new ResizeObserver(scheduleOverflowUpdate)
+  themeObserver = new MutationObserver(scheduleOverflowUpdate)
+  themeObserver.observe(document.documentElement, {
+    attributes: true,
+    attributeFilter: ['data-theme'],
+  })
+  scheduleOverflowUpdate()
+})
+
+onBeforeUnmount(() => {
+  for (const el of demoRefs.values()) {
+    el.removeEventListener('scroll', scheduleOverflowUpdate)
+  }
+  resizeObserver?.disconnect()
+  themeObserver?.disconnect()
+})
+
+watch(() => props.tokens, scheduleOverflowUpdate, { deep: true })
+watch(entries, scheduleOverflowUpdate)
+</script>
+
+<template>
+  <ul class="dimension-token-list">
+    <template v-for="(entry, index) in entries" :key="index">
+      <TokenListGroupHeading v-if="entry.type === 'group'" :label="entry.label" />
+      <li
+        v-else
+        class="dimension-token-list__item"
+        :class="{ 'dimension-token-list__item--deprecated': entry.token.deprecated }"
+      >
+        <div v-if="usesDimensionBarDemo(entry.token)" class="dimension-token-list__demo">
+          <div
+            class="dimension-token-list__scroll-wrap"
+            :class="{ 'dimension-token-list__scroll-wrap--overflow-end': overflowEnd.has(entry.token.name) }"
+          >
+            <div
+              :ref="(el) => setDemoRef(entry.token.name, el)"
+              class="dimension-token-list__scroll"
+            >
+              <span
+                class="dimension-token-list__track"
+                :class="{ 'dimension-token-list__track--zero': isZeroDimensionToken(entry.token) }"
+                :style="trackStyle(entry.token)"
+              >
+                <span
+                  v-if="!isZeroDimensionToken(entry.token)"
+                  class="dimension-token-list__box"
+                  :style="barWidthStyle(entry.token)"
+                  aria-hidden="true"
+                />
+                <span class="dimension-token-list__label">
+                  <span class="dimension-token-list__name">{{ entry.token.name }}</span>
+                  <span class="dimension-token-list__value">{{ entry.token.value }}</span>
+                  <TokenDeprecatedLabel v-if="entry.token.deprecated" />
+                </span>
+              </span>
+            </div>
+          </div>
+        </div>
+        <div
+          v-else-if="isBackgroundPositionToken(entry.token.name) || isBackgroundSizeToken(entry.token.name)"
+          class="dimension-token-list__demo dimension-token-list__demo--background"
+        >
+          <div
+            class="dimension-token-list__background-preview"
+            :class="{
+              'dimension-token-list__background-preview--position': isBackgroundPositionToken(entry.token.name),
+              'dimension-token-list__background-preview--size': isBackgroundSizeToken(entry.token.name),
+            }"
+            :style="
+              isBackgroundPositionToken(entry.token.name)
+                ? { backgroundPosition: `var(${entry.token.name})` }
+                : { backgroundSize: `var(${entry.token.name})` }
+            "
+            aria-hidden="true"
+          />
+          <div class="dimension-token-list__background-meta">
+            <span class="dimension-token-list__name">{{ entry.token.name }}</span>
+            <span class="dimension-token-list__value">{{ entry.token.value }}</span>
+            <TokenDeprecatedLabel v-if="entry.token.deprecated" />
+          </div>
+        </div>
+        <div v-else class="dimension-token-list__demo">
+          <span class="dimension-token-list__swatch dimension-token-list__swatch--generic">
+            <span class="dimension-token-list__label">
+              <span class="dimension-token-list__name">{{ entry.token.name }}</span>
+              <span class="dimension-token-list__value">{{ entry.token.value }}</span>
+              <TokenDeprecatedLabel v-if="entry.token.deprecated" />
+            </span>
+          </span>
+        </div>
+      </li>
+    </template>
+  </ul>
+</template>
+
+<style scoped>
+.dimension-token-list {
+  display: flex;
+  flex-direction: column;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.dimension-token-list__item {
+  padding-block: var(--spacing-75);
+  border-bottom: var(--border-subtle);
+}
+
+.dimension-token-list__demo {
+  min-width: 0;
+}
+
+.dimension-token-list__scroll-wrap {
+  position: relative;
+  min-width: 0;
+}
+
+.dimension-token-list__scroll-wrap--overflow-end::after {
+  content: '';
+  position: absolute;
+  inset-block: 0;
+  inset-inline-end: 0;
+  z-index: 2;
+  width: 1.5rem;
+  pointer-events: none;
+  background-image: linear-gradient(
+    to left,
+    var(--background-color-base) 0,
+    var(--background-color-transparent) 100%
+  );
+}
+
+.dimension-token-list__scroll {
+  min-width: 0;
+  overflow-x: auto;
+  overflow-y: hidden;
+}
+
+.dimension-token-list__track {
+  position: relative;
+  display: block;
+  min-height: 2.75rem;
+}
+
+.dimension-token-list__demo--background {
+  display: grid;
+  grid-template-columns: 6rem 1fr;
+  align-items: center;
+  gap: var(--spacing-100);
+}
+
+.dimension-token-list__background-preview {
+  width: 6rem;
+  height: 4rem;
+  border: var(--border-subtle);
+  border-radius: var(--border-radius-base);
+  background-color: var(--background-color-neutral-subtle);
+  background-repeat: no-repeat;
+}
+
+.dimension-token-list__background-preview--position {
+  background-image: radial-gradient(
+    circle at center,
+    var(--color-progressive) 0.65rem,
+    var(--color-progressive) 0.65rem,
+    transparent 0.66rem
+  );
+  background-size: 200% 200%;
+}
+
+.dimension-token-list__background-preview--size {
+  background-image: linear-gradient(
+    135deg,
+    var(--color-progressive) 0%,
+    var(--color-progressive) 45%,
+    var(--background-color-neutral) 45%,
+    var(--background-color-neutral) 100%
+  );
+  background-position: center;
+}
+
+.dimension-token-list__background-meta {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: var(--spacing-25);
+  min-width: 0;
+}
+
+.dimension-token-list__value {
+  font-family: var(--font-family-monospace);
+  font-size: var(--font-size-small);
+  line-height: var(--line-height-small);
+  color: var(--color-subtle);
+  overflow-wrap: anywhere;
+  word-break: break-word;
+}
+
+.dimension-token-list__swatch {
+  position: relative;
+  display: inline-block;
+}
+
+.dimension-token-list__box {
+  position: absolute;
+  inset-block: 0;
+  inset-inline-start: 0;
+  z-index: 0;
+  border-radius: var(--border-radius-base);
+  background: var(--background-color-progressive-subtle);
+}
+
+.dimension-token-list__label {
+  position: sticky;
+  inset-inline-start: 0;
+  z-index: 1;
+  display: inline-flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: var(--spacing-25);
+  padding: var(--spacing-35) var(--spacing-50);
+  font-family: var(--font-family-monospace);
+  font-size: var(--font-size-medium);
+  line-height: var(--line-height-medium);
+  color: var(--color-base);
+}
+
+.dimension-token-list__name {
+  white-space: nowrap;
+}
+
+.dimension-token-list__swatch--generic .dimension-token-list__label {
+  border: var(--border-subtle);
+  border-radius: var(--border-radius-base);
+  background: var(--background-color-neutral-subtle);
+}
+
+.dimension-token-list__item--deprecated .dimension-token-list__track,
+.dimension-token-list__item--deprecated .dimension-token-list__swatch {
+  opacity: 0.75;
+}
+</style>
diff --git a/src/prototypes/example-codex-kitchen-sink/playground/FontFamilyList.vue b/src/prototypes/example-codex-kitchen-sink/playground/FontFamilyList.vue
new file mode 100644
index 00000000..a34ce5cf
--- /dev/null
+++ b/src/prototypes/example-codex-kitchen-sink/playground/FontFamilyList.vue
@@ -0,0 +1,48 @@
+<script setup lang="ts">
+import type { TokenEntry } from '../lib/parse-tokens'
+import TokenDeprecatedLabel from './TokenDeprecatedLabel.vue'
+
+defineProps<{
+  tokens: TokenEntry[]
+}>()
+</script>
+
+<template>
+  <ul class="font-family-list">
+    <li
+      v-for="token in tokens"
+      :key="token.name"
+      class="font-family-list__item"
+      :class="{ 'font-family-list__item--deprecated': token.deprecated }"
+      :style="{ fontFamily: `var(${token.name})` }"
+    >
+      <span>{{ token.name }}</span>
+      <TokenDeprecatedLabel v-if="token.deprecated" />
+    </li>
+  </ul>
+</template>
+
+<style scoped>
+.font-family-list {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-75);
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.font-family-list__item {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: var(--spacing-25);
+  font-size: var(--font-size-medium);
+  line-height: var(--line-height-medium);
+  color: var(--color-base);
+}
+
+.font-family-list__item--deprecated {
+  color: var(--color-subtle);
+}
+</style>
diff --git a/src/prototypes/example-codex-kitchen-sink/playground/FontSizeList.vue b/src/prototypes/example-codex-kitchen-sink/playground/FontSizeList.vue
new file mode 100644
index 00000000..38a466a7
--- /dev/null
+++ b/src/prototypes/example-codex-kitchen-sink/playground/FontSizeList.vue
@@ -0,0 +1,48 @@
+<script setup lang="ts">
+import type { TokenEntry } from '../lib/parse-tokens'
+import TokenDeprecatedLabel from './TokenDeprecatedLabel.vue'
+
+defineProps<{
+  tokens: TokenEntry[]
+}>()
+</script>
+
+<template>
+  <ul class="font-size-list">
+    <li
+      v-for="token in tokens"
+      :key="token.name"
+      class="font-size-list__item"
+      :class="{ 'font-size-list__item--deprecated': token.deprecated }"
+      :style="{ fontSize: `var(${token.name})` }"
+    >
+      <span>{{ token.name }}</span>
+      <TokenDeprecatedLabel v-if="token.deprecated" />
+    </li>
+  </ul>
+</template>
+
+<style scoped>
+.font-size-list {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-75);
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.font-size-list__item {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: var(--spacing-25);
+  font-family: var(--font-family-monospace);
+  line-height: var(--line-height-medium);
+  color: var(--color-base);
+}
+
+.font-size-list__item--deprecated {
+  color: var(--color-subtle);
+}
+</style>
diff --git a/src/prototypes/example-codex-kitchen-sink/playground/FontWeightList.vue b/src/prototypes/example-codex-kitchen-sink/playground/FontWeightList.vue
new file mode 100644
index 00000000..e51b4dc6
--- /dev/null
+++ b/src/prototypes/example-codex-kitchen-sink/playground/FontWeightList.vue
@@ -0,0 +1,49 @@
+<script setup lang="ts">
+import type { TokenEntry } from '../lib/parse-tokens'
+import TokenDeprecatedLabel from './TokenDeprecatedLabel.vue'
+
+defineProps<{
+  tokens: TokenEntry[]
+}>()
+</script>
+
+<template>
+  <ul class="font-weight-list">
+    <li
+      v-for="token in tokens"
+      :key="token.name"
+      class="font-weight-list__item"
+      :class="{ 'font-weight-list__item--deprecated': token.deprecated }"
+      :style="{ fontWeight: `var(${token.name})` }"
+    >
+      <span>{{ token.name }}</span>
+      <TokenDeprecatedLabel v-if="token.deprecated" />
+    </li>
+  </ul>
+</template>
+
+<style scoped>
+.font-weight-list {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-75);
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.font-weight-list__item {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: var(--spacing-25);
+  font-family: var(--font-family-base);
+  font-size: var(--font-size-medium);
+  line-height: var(--line-height-medium);
+  color: var(--color-base);
+}
+
+.font-weight-list__item--deprecated {
+  color: var(--color-subtle);
+}
+</style>
diff --git a/src/prototypes/example-codex-kitchen-sink/playground/LineHeightList.vue b/src/prototypes/example-codex-kitchen-sink/playground/LineHeightList.vue
new file mode 100644
index 00000000..82fd3bef
--- /dev/null
+++ b/src/prototypes/example-codex-kitchen-sink/playground/LineHeightList.vue
@@ -0,0 +1,68 @@
+<script setup lang="ts">
+import type { TokenEntry } from '../lib/parse-tokens'
+import PlaygroundGrid from './PlaygroundGrid.vue'
+import TokenDeprecatedLabel from './TokenDeprecatedLabel.vue'
+
+defineProps<{
+  tokens: TokenEntry[]
+}>()
+</script>
+
+<template>
+  <PlaygroundGrid min="220px">
+    <div
+      v-for="token in tokens"
+      :key="token.name"
+      class="line-height-item"
+      :class="{ 'line-height-item--deprecated': token.deprecated }"
+    >
+      <div
+        class="line-height-item__preview"
+        :style="{ lineHeight: `var(${token.name})` }"
+      >
+        Line one<br />
+        Line two<br />
+        Line three
+      </div>
+      <code class="line-height-item__name">
+        {{ token.name }}
+        <TokenDeprecatedLabel v-if="token.deprecated" />
+      </code>
+    </div>
+  </PlaygroundGrid>
+</template>
+
+<style scoped>
+.line-height-item {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-35);
+  min-width: 0;
+}
+
+.line-height-item__preview {
+  padding: var(--spacing-75);
+  border: var(--border-subtle);
+  border-radius: var(--border-radius-base);
+  background: var(--background-color-neutral-subtle);
+  font-family: var(--font-family-base);
+  font-size: var(--font-size-medium);
+  color: var(--color-base);
+}
+
+.line-height-item__name {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: var(--spacing-25);
+  font-family: var(--font-family-monospace);
+  font-size: var(--font-size-small);
+  line-height: var(--line-height-small);
+  color: var(--color-subtle);
+  word-break: break-all;
+}
+
+.line-height-item--deprecated .line-height-item__preview {
+  opacity: 0.75;
+}
+</style>
diff --git a/src/prototypes/example-codex-kitchen-sink/playground/OpacityTokenList.vue b/src/prototypes/example-codex-kitchen-sink/playground/OpacityTokenList.vue
new file mode 100644
index 00000000..60ca4b02
--- /dev/null
+++ b/src/prototypes/example-codex-kitchen-sink/playground/OpacityTokenList.vue
@@ -0,0 +1,164 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { CdxIcon } from '@wikimedia/codex'
+import { cdxIconSearch } from '@wikimedia/codex-icons'
+import type { TokenEntry } from '../lib/parse-tokens'
+import TokenDeprecatedLabel from './TokenDeprecatedLabel.vue'
+import TokenListGroupHeading from './TokenListGroupHeading.vue'
+
+const props = defineProps<{
+  tokens: TokenEntry[]
+}>()
+
+type ListEntry =
+  | { type: 'group'; label: string }
+  | { type: 'token'; token: TokenEntry }
+
+function isIconOpacityToken(name: string): boolean {
+  return name.startsWith('--opacity-icon-')
+}
+
+const entries = computed(() => {
+  const items: ListEntry[] = []
+  let currentGroup: string | null = null
+  let skipNextGroupHeading = true
+
+  for (const token of props.tokens) {
+    const group = isIconOpacityToken(token.name) ? 'Icon' : 'General'
+    if (group !== currentGroup) {
+      if (!skipNextGroupHeading) {
+        items.push({ type: 'group', label: group })
+      }
+      currentGroup = group
+      skipNextGroupHeading = false
+    }
+    items.push({ type: 'token', token })
+  }
+
+  return items
+})
+</script>
+
+<template>
+  <ul class="opacity-token-list">
+    <template v-for="entry in entries" :key="entry.type === 'token' ? entry.token.name : entry.label">
+      <TokenListGroupHeading v-if="entry.type === 'group'" :label="entry.label" />
+      <li
+        v-else
+        class="opacity-token-list__item"
+        :class="{ 'opacity-token-list__item--deprecated': entry.token.deprecated }"
+      >
+        <div
+          class="opacity-token-list__host"
+          :class="{
+            'opacity-token-list__host--icon': isIconOpacityToken(entry.token.name),
+            'opacity-token-list__host--fill': !isIconOpacityToken(entry.token.name),
+          }"
+        >
+          <CdxIcon
+            v-if="isIconOpacityToken(entry.token.name)"
+            class="opacity-token-list__icon"
+            :icon="cdxIconSearch"
+            :style="{ opacity: `var(${entry.token.name})` }"
+            aria-hidden="true"
+          />
+          <span
+            v-else
+            class="opacity-token-list__fill"
+            :style="{ opacity: `var(${entry.token.name})` }"
+            aria-hidden="true"
+          />
+        </div>
+        <div class="opacity-token-list__meta">
+          <code class="opacity-token-list__name">{{ entry.token.name }}</code>
+          <span class="opacity-token-list__value">{{ entry.token.value }}</span>
+          <TokenDeprecatedLabel v-if="entry.token.deprecated" />
+        </div>
+      </li>
+    </template>
+  </ul>
+</template>
+
+<style scoped>
+.opacity-token-list {
+  display: flex;
+  flex-direction: column;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.opacity-token-list__item {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  align-items: center;
+  gap: var(--spacing-100);
+  padding-block: var(--spacing-75);
+  border-bottom: var(--border-subtle);
+}
+
+.opacity-token-list__host {
+  position: relative;
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 3.5rem;
+  height: 2.5rem;
+  border: var(--border-subtle);
+  border-radius: var(--border-radius-base);
+  overflow: hidden;
+}
+
+.opacity-token-list__host--fill {
+  background:
+    repeating-conic-gradient(var(--border-color-subtle) 0% 25%, transparent 0% 50%) 50% / 10px 10px,
+    var(--background-color-base);
+}
+
+.opacity-token-list__host--icon {
+  background: var(--background-color-base);
+}
+
+.opacity-token-list__icon {
+  flex-shrink: 0;
+  color: var(--color-base);
+}
+
+.opacity-token-list__fill {
+  position: absolute;
+  inset: 0;
+  background: var(--color-progressive);
+  pointer-events: none;
+}
+
+.opacity-token-list__meta {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: var(--spacing-25);
+  min-width: 0;
+}
+
+.opacity-token-list__name {
+  font-family: var(--font-family-monospace);
+  font-size: var(--font-size-small);
+  line-height: var(--line-height-small);
+  color: var(--color-base);
+  overflow-wrap: anywhere;
+  word-break: break-word;
+}
+
+.opacity-token-list__value {
+  font-family: var(--font-family-monospace);
+  font-size: var(--font-size-small);
+  line-height: var(--line-height-small);
+  color: var(--color-subtle);
+  overflow-wrap: anywhere;
+  word-break: break-word;
+}
+
+.opacity-token-list__item--deprecated .opacity-token-list__host {
+  opacity: 0.75;
+}
+</style>
diff --git a/src/prototypes/example-codex-kitchen-sink/playground/OutlineTokenList.vue b/src/prototypes/example-codex-kitchen-sink/playground/OutlineTokenList.vue
new file mode 100644
index 00000000..f75ccf59
--- /dev/null
+++ b/src/prototypes/example-codex-kitchen-sink/playground/OutlineTokenList.vue
@@ -0,0 +1,109 @@
+<script setup lang="ts">
+import type { TokenEntry } from '../lib/parse-tokens'
+import TokenDeprecatedLabel from './TokenDeprecatedLabel.vue'
+
+defineProps<{
+  tokens: TokenEntry[]
+}>()
+
+function isOutlineColorToken(name: string): boolean {
+  return name.startsWith('--outline-color-')
+}
+
+function sampleStyle(token: TokenEntry): Record<string, string> {
+  if (isOutlineColorToken(token.name)) {
+    return {
+      outline: 'var(--outline-base--focus)',
+      outlineColor: `var(${token.name})`,
+    }
+  }
+
+  return {
+    outline: `var(${token.name})`,
+    outlineColor: 'var(--outline-color-progressive--focus)',
+  }
+}
+</script>
+
+<template>
+  <ul class="outline-token-list">
+    <li
+      v-for="token in tokens"
+      :key="token.name"
+      class="outline-token-list__item"
+      :class="{ 'outline-token-list__item--deprecated': token.deprecated }"
+    >
+      <div class="outline-token-list__host">
+        <span class="outline-token-list__preview" :style="sampleStyle(token)" aria-hidden="true" />
+      </div>
+      <div class="outline-token-list__meta">
+        <code class="outline-token-list__name">{{ token.name }}</code>
+        <span class="outline-token-list__value">{{ token.value }}</span>
+        <TokenDeprecatedLabel v-if="token.deprecated" />
+      </div>
+    </li>
+  </ul>
+</template>
+
+<style scoped>
+.outline-token-list {
+  display: flex;
+  flex-direction: column;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.outline-token-list__item {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  align-items: center;
+  gap: var(--spacing-100);
+  padding-block: var(--spacing-75);
+  border-bottom: var(--border-subtle);
+}
+
+.outline-token-list__host {
+  display: inline-flex;
+  padding: var(--spacing-50);
+}
+
+.outline-token-list__preview {
+  display: block;
+  width: 3.5rem;
+  height: 2.5rem;
+  background: var(--background-color-base);
+  border: var(--border-subtle);
+  border-radius: var(--border-radius-base);
+}
+
+.outline-token-list__meta {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: var(--spacing-25);
+  min-width: 0;
+}
+
+.outline-token-list__name {
+  font-family: var(--font-family-monospace);
+  font-size: var(--font-size-small);
+  line-height: var(--line-height-small);
+  color: var(--color-base);
+  overflow-wrap: anywhere;
+  word-break: break-word;
+}
+
+.outline-token-list__value {
+  font-family: var(--font-family-monospace);
+  font-size: var(--font-size-small);
+  line-height: var(--line-height-small);
+  color: var(--color-subtle);
+  overflow-wrap: anywhere;
+  word-break: break-word;
+}
+
+.outline-token-list__item--deprecated .outline-token-list__host {
+  opacity: 0.75;
+}
+</style>
diff --git a/src/prototypes/example-codex-kitchen-sink/playground/PlaygroundCell.vue b/src/prototypes/example-codex-kitchen-sink/playground/PlaygroundCell.vue
new file mode 100644
index 00000000..b8b3283c
--- /dev/null
+++ b/src/prototypes/example-codex-kitchen-sink/playground/PlaygroundCell.vue
@@ -0,0 +1,75 @@
+<script setup lang="ts">
+interface Props {
+  label?: string
+  row?: boolean
+}
+
+defineProps<Props>()
+</script>
+
+<template>
+  <div class="playground-cell" :class="{ 'playground-cell--row': row }">
+    <div class="playground-cell__content">
+      <slot />
+    </div>
+    <code v-if="label" class="playground-cell__label">{{ label }}</code>
+  </div>
+</template>
+
+<style scoped>
+.playground-cell {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-35);
+  min-width: 0;
+}
+
+.playground-cell--row {
+  flex-direction: row;
+  align-items: flex-start;
+  gap: var(--spacing-100);
+  padding-block: var(--spacing-35);
+  border-bottom: var(--border-subtle);
+}
+
+.playground-cell--row:last-child {
+  border-bottom: none;
+}
+
+.playground-cell--row .playground-cell__label {
+  flex-shrink: 0;
+  min-width: 5rem;
+  padding-top: var(--spacing-35);
+}
+
+.playground-cell--row .playground-cell__content {
+  flex: 1;
+  max-width: 20rem;
+}
+
+.playground-cell__content {
+  min-width: 0;
+}
+
+/* Codex form controls default to min-width: 256px; shrink to fit grid cells. */
+.playground-cell__content :deep(.cdx-text-input),
+.playground-cell__content :deep(.cdx-search-input),
+.playground-cell__content :deep(.cdx-text-area),
+.playground-cell__content :deep(.cdx-select),
+.playground-cell__content :deep(.cdx-combobox),
+.playground-cell__content :deep(.cdx-lookup),
+.playground-cell__content :deep(.cdx-multiselect-lookup),
+.playground-cell__content :deep(.cdx-chip-input) {
+  width: 100%;
+  max-width: 100%;
+  min-width: 0;
+}
+
+.playground-cell__label {
+  font-family: var(--font-family-monospace);
+  font-size: var(--font-size-small);
+  line-height: var(--line-height-small);
+  color: var(--color-subtle);
+  word-break: break-all;
+}
+</style>
diff --git a/src/prototypes/example-codex-kitchen-sink/playground/PlaygroundGrid.vue b/src/prototypes/example-codex-kitchen-sink/playground/PlaygroundGrid.vue
new file mode 100644
index 00000000..0ff6e425
--- /dev/null
+++ b/src/prototypes/example-codex-kitchen-sink/playground/PlaygroundGrid.vue
@@ -0,0 +1,35 @@
+<script setup lang="ts">
+interface Props {
+  min?: string
+  dense?: boolean
+}
+
+withDefaults(defineProps<Props>(), {
+  min: '160px',
+  dense: false,
+})
+</script>
+
+<template>
+  <div
+    class="playground-grid"
+    :class="{ 'playground-grid--dense': dense }"
+    :style="{ '--playground-grid-min': min }"
+  >
+    <slot />
+  </div>
+</template>
+
+<style scoped>
+.playground-grid {
+  display: grid;
+  gap: var(--spacing-100);
+  grid-template-columns: repeat(auto-fill, minmax(var(--playground-grid-min, 160px), 1fr));
+  align-items: start;
+}
+
+.playground-grid--dense {
+  gap: var(--spacing-50);
+  grid-template-columns: repeat(auto-fill, minmax(var(--playground-grid-min, 120px), 1fr));
+}
+</style>
diff --git a/src/prototypes/example-codex-kitchen-sink/playground/PlaygroundList.vue b/src/prototypes/example-codex-kitchen-sink/playground/PlaygroundList.vue
new file mode 100644
index 00000000..a8eec57a
--- /dev/null
+++ b/src/prototypes/example-codex-kitchen-sink/playground/PlaygroundList.vue
@@ -0,0 +1,13 @@
+<template>
+  <div class="playground-list">
+    <slot />
+  </div>
+</template>
+
+<style scoped>
+.playground-list {
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+}
+</style>
diff --git a/src/prototypes/example-codex-kitchen-sink/playground/PlaygroundSection.vue b/src/prototypes/example-codex-kitchen-sink/playground/PlaygroundSection.vue
new file mode 100644
index 00000000..15b65588
--- /dev/null
+++ b/src/prototypes/example-codex-kitchen-sink/playground/PlaygroundSection.vue
@@ -0,0 +1,39 @@
+<script setup lang="ts">
+interface Props {
+  id?: string
+  title?: string
+}
+
+withDefaults(defineProps<Props>(), {
+  id: undefined,
+})
+</script>
+
+<template>
+  <section :id="id" :class="{ 'playground-section--untitled': !title }" class="playground-section">
+    <h4 v-if="title" class="playground-section__title">
+      {{ title }}
+    </h4>
+    <slot />
+  </section>
+</template>
+
+<style scoped>
+.playground-section {
+  /* display: flex; */
+  /* flex-direction: column; */
+  /* gap: var(--spacing-75); */
+}
+
+.playground-section--untitled {
+  padding: var(--spacing-100) 0;
+}
+
+/* .playground-section__title {
+  font-family: var(--font-family-base);
+  font-size: var(--font-size-medium);
+  font-weight: var(--font-weight-bold);
+  line-height: var(--line-height-medium);
+  color: var(--color-base);
+} */
+</style>
diff --git a/src/prototypes/example-codex-kitchen-sink/playground/PlaygroundSubTabs.vue b/src/prototypes/example-codex-kitchen-sink/playground/PlaygroundSubTabs.vue
new file mode 100644
index 00000000..9db451f7
--- /dev/null
+++ b/src/prototypes/example-codex-kitchen-sink/playground/PlaygroundSubTabs.vue
@@ -0,0 +1,48 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { CdxTab, CdxTabs } from '@wikimedia/codex'
+
+import type { MainTabId } from '../lib/playground-tabs'
+import { usePlaygroundLeafTabContext } from '../lib/use-playground-leaf-tab'
+
+export interface PlaygroundSubTabItem {
+  id: string
+  label: string
+}
+
+const props = defineProps<{
+  items: PlaygroundSubTabItem[]
+  mainTabId: MainTabId
+  defaultActive: string
+  ariaLabel: string
+}>()
+
+const playgroundTab = usePlaygroundLeafTabContext()
+
+const active = computed({
+  get: () => playgroundTab?.subTabFor(props.mainTabId) ?? props.defaultActive,
+  set: (value: string) => playgroundTab?.setSubTab(props.mainTabId, value),
+})
+</script>
+
+<template>
+  <CdxTabs v-model:active="active" class="playground-sub-tabs" :aria-label="ariaLabel" framed>
+    <CdxTab v-for="item in items" :key="item.id" :name="item.id" :label="item.label">
+      <div class="playground-sub-tabs__panel">
+        <slot :id="item.id" :label="item.label" :item="item" />
+      </div>
+    </CdxTab>
+  </CdxTabs>
+</template>
+
+<style scoped>
+.playground-sub-tabs :deep(> .cdx-tabs__header) {
+  position: sticky;
+  top: 35px;
+  z-index: 2;
+}
+
+.playground-sub-tabs__panel {
+  padding: 0 var(--spacing-100);
+}
+</style>
diff --git a/src/prototypes/example-codex-kitchen-sink/playground/PlaygroundTab.vue b/src/prototypes/example-codex-kitchen-sink/playground/PlaygroundTab.vue
new file mode 100644
index 00000000..7c9f21da
--- /dev/null
+++ b/src/prototypes/example-codex-kitchen-sink/playground/PlaygroundTab.vue
@@ -0,0 +1,15 @@
+<script setup lang="ts">
+defineProps<{}>()
+</script>
+
+<template>
+  <div>
+    <slot />
+  </div>
+</template>
+
+<style scoped>
+div {
+  padding: 0px var(--spacing-100);
+}
+</style>
diff --git a/src/prototypes/example-codex-kitchen-sink/playground/TextDecorationList.vue b/src/prototypes/example-codex-kitchen-sink/playground/TextDecorationList.vue
new file mode 100644
index 00000000..fa2bbc46
--- /dev/null
+++ b/src/prototypes/example-codex-kitchen-sink/playground/TextDecorationList.vue
@@ -0,0 +1,49 @@
+<script setup lang="ts">
+import type { TokenEntry } from '../lib/parse-tokens'
+import TokenDeprecatedLabel from './TokenDeprecatedLabel.vue'
+
+defineProps<{
+  tokens: TokenEntry[]
+}>()
+</script>
+
+<template>
+  <ul class="text-decoration-list">
+    <li
+      v-for="token in tokens"
+      :key="token.name"
+      class="text-decoration-list__item"
+      :class="{ 'text-decoration-list__item--deprecated': token.deprecated }"
+      :style="{ textDecoration: `var(${token.name})` }"
+    >
+      <span>{{ token.name }}</span>
+      <TokenDeprecatedLabel v-if="token.deprecated" />
+    </li>
+  </ul>
+</template>
+
+<style scoped>
+.text-decoration-list {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-75);
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.text-decoration-list__item {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: var(--spacing-25);
+  font-family: var(--font-family-monospace);
+  font-size: var(--font-size-medium);
+  line-height: var(--line-height-medium);
+  color: var(--color-base);
+}
+
+.text-decoration-list__item--deprecated {
+  color: var(--color-subtle);
+}
+</style>
diff --git a/src/prototypes/example-codex-kitchen-sink/playground/TextOverflowList.vue b/src/prototypes/example-codex-kitchen-sink/playground/TextOverflowList.vue
new file mode 100644
index 00000000..dff5b6a2
--- /dev/null
+++ b/src/prototypes/example-codex-kitchen-sink/playground/TextOverflowList.vue
@@ -0,0 +1,77 @@
+<script setup lang="ts">
+import type { TokenEntry } from '../lib/parse-tokens'
+import PlaygroundGrid from './PlaygroundGrid.vue'
+import TokenDeprecatedLabel from './TokenDeprecatedLabel.vue'
+
+defineProps<{
+  tokens: TokenEntry[]
+}>()
+
+const sampleText = 'Long text that overflows the container'
+</script>
+
+<template>
+  <PlaygroundGrid min="220px">
+    <div
+      v-for="token in tokens"
+      :key="token.name"
+      class="text-overflow-item"
+      :class="{ 'text-overflow-item--deprecated': token.deprecated }"
+    >
+      <div class="text-overflow-item__preview">
+        <span
+          class="text-overflow-item__sample"
+          :style="{ textOverflow: `var(${token.name})` }"
+        >
+          {{ sampleText }}
+        </span>
+      </div>
+      <code class="text-overflow-item__name">
+        {{ token.name }}
+        <TokenDeprecatedLabel v-if="token.deprecated" />
+      </code>
+    </div>
+  </PlaygroundGrid>
+</template>
+
+<style scoped>
+.text-overflow-item {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-35);
+  min-width: 0;
+}
+
+.text-overflow-item__preview {
+  padding: var(--spacing-75);
+  border: var(--border-subtle);
+  border-radius: var(--border-radius-base);
+  background: var(--background-color-neutral-subtle);
+}
+
+.text-overflow-item__sample {
+  display: block;
+  overflow: hidden;
+  white-space: nowrap;
+  font-family: var(--font-family-base);
+  font-size: var(--font-size-medium);
+  line-height: var(--line-height-medium);
+  color: var(--color-base);
+}
+
+.text-overflow-item__name {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: var(--spacing-25);
+  font-family: var(--font-family-monospace);
+  font-size: var(--font-size-small);
+  line-height: var(--line-height-small);
+  color: var(--color-subtle);
+  word-break: break-all;
+}
+
+.text-overflow-item--deprecated .text-overflow-item__preview {
+  opacity: 0.75;
+}
+</style>
diff --git a/src/prototypes/example-codex-kitchen-sink/playground/TokenDeprecatedLabel.vue b/src/prototypes/example-codex-kitchen-sink/playground/TokenDeprecatedLabel.vue
new file mode 100644
index 00000000..8ecaf2e4
--- /dev/null
+++ b/src/prototypes/example-codex-kitchen-sink/playground/TokenDeprecatedLabel.vue
@@ -0,0 +1,14 @@
+<template>
+  <span class="token-deprecated-label">Deprecated</span>
+</template>
+
+<style scoped>
+.token-deprecated-label {
+  font-family: var(--font-family-base);
+  font-size: var(--font-size-small);
+  font-weight: var(--font-weight-normal);
+  font-style: italic;
+  line-height: var(--line-height-small);
+  color: var(--color-subtle);
+}
+</style>
diff --git a/src/prototypes/example-codex-kitchen-sink/playground/TokenListGroupHeading.vue b/src/prototypes/example-codex-kitchen-sink/playground/TokenListGroupHeading.vue
new file mode 100644
index 00000000..f9478f3b
--- /dev/null
+++ b/src/prototypes/example-codex-kitchen-sink/playground/TokenListGroupHeading.vue
@@ -0,0 +1,26 @@
+<script setup lang="ts">
+defineProps<{
+  label: string
+}>()
+</script>
+
+<template>
+  <li class="token-list-group">
+    <h4 class="token-list-group__heading">{{ label }}</h4>
+  </li>
+</template>
+
+<style scoped>
+.token-list-group {
+  padding: var(--spacing-100) 0 var(--spacing-50);
+  list-style: none;
+}
+
+.token-list-group:first-child {
+  padding-top: 0;
+}
+
+.token-list-group__heading {
+  margin: 0;
+}
+</style>
diff --git a/src/prototypes/example-codex-kitchen-sink/playground/TokenSwatch.vue b/src/prototypes/example-codex-kitchen-sink/playground/TokenSwatch.vue
new file mode 100644
index 00000000..dec6e475
--- /dev/null
+++ b/src/prototypes/example-codex-kitchen-sink/playground/TokenSwatch.vue
@@ -0,0 +1,240 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import type { TokenEntry } from '../lib/parse-tokens'
+import TokenDeprecatedLabel from './TokenDeprecatedLabel.vue'
+
+const props = defineProps<{
+  token: TokenEntry
+}>()
+
+const cssVar = computed(() => `var(${props.token.name})`)
+</script>
+
+<template>
+  <div class="token-swatch">
+    <div class="token-swatch__preview" :data-kind="token.kind">
+      <div
+        v-if="token.kind === 'color-text'"
+        class="token-swatch__fill"
+        :style="{ backgroundColor: cssVar }"
+      />
+      <div
+        v-else-if="token.kind === 'color-bg'"
+        class="token-swatch__fill"
+        :style="{ backgroundColor: cssVar }"
+      />
+      <div
+        v-else-if="token.kind === 'color-border'"
+        class="token-swatch__border-box"
+        :style="{ borderColor: cssVar }"
+      />
+      <div
+        v-else-if="token.kind === 'color-accent'"
+        class="token-swatch__fill"
+        :style="{ backgroundColor: cssVar }"
+      />
+      <div
+        v-else-if="token.kind === 'spacing' || token.kind === 'size'"
+        class="token-swatch__bar-track"
+      >
+        <div class="token-swatch__bar" :style="{ width: cssVar }" />
+      </div>
+      <div
+        v-else-if="token.kind === 'radius'"
+        class="token-swatch__radius-box"
+        :style="{ borderRadius: cssVar }"
+      />
+      <div
+        v-else-if="token.kind === 'font-size'"
+        class="token-swatch__type-sample"
+        :style="{ fontSize: cssVar }"
+      >
+        Aa
+      </div>
+      <div
+        v-else-if="token.kind === 'font-weight'"
+        class="token-swatch__type-sample"
+        :style="{ fontWeight: cssVar }"
+      >
+        Sample
+      </div>
+      <div
+        v-else-if="token.kind === 'font-family'"
+        class="token-swatch__type-sample token-swatch__type-sample--clamp"
+        :style="{ fontFamily: cssVar }"
+      >
+        Aa
+      </div>
+      <div
+        v-else-if="token.kind === 'line-height'"
+        class="token-swatch__line-height"
+        :style="{ lineHeight: cssVar }"
+      >
+        Line one<br />Line two
+      </div>
+      <div
+        v-else-if="token.kind === 'text-decoration'"
+        class="token-swatch__type-sample"
+        :style="{ textDecoration: cssVar }"
+      >
+        {{ token.value }}
+      </div>
+      <div
+        v-else-if="token.kind === 'text-overflow'"
+        class="token-swatch__type-sample token-swatch__text-overflow"
+        :style="{ textOverflow: cssVar }"
+      >
+        Long text that overflows
+      </div>
+      <div
+        v-else-if="token.kind === 'shadow'"
+        class="token-swatch__shadow-box"
+        :style="{ boxShadow: cssVar }"
+      />
+      <div v-else-if="token.kind === 'opacity'" class="token-swatch__opacity">
+        <div class="token-swatch__opacity-base" />
+        <div class="token-swatch__opacity-overlay" :style="{ opacity: cssVar }" />
+      </div>
+      <div v-else class="token-swatch__generic">
+        {{ token.value }}
+      </div>
+    </div>
+    <code class="token-swatch__name" :class="{ 'token-swatch__name--deprecated': token.deprecated }">
+      {{ token.name }}
+      <TokenDeprecatedLabel v-if="token.deprecated" />
+    </code>
+  </div>
+</template>
+
+<style scoped>
+.token-swatch {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-35);
+  min-width: 0;
+}
+
+.token-swatch__preview {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 3rem;
+  padding: var(--spacing-50);
+  border: var(--border-subtle);
+  border-radius: var(--border-radius-base);
+  background: var(--background-color-neutral-subtle);
+}
+
+.token-swatch__fill {
+  width: 100%;
+  height: 2.5rem;
+  border-radius: var(--border-radius-base);
+  border: 1px solid var(--border-color-subtle);
+}
+
+.token-swatch__border-box {
+  width: 100%;
+  height: 2.5rem;
+  border: 3px solid transparent;
+  border-radius: var(--border-radius-base);
+  background: var(--background-color-base);
+}
+
+.token-swatch__bar-track {
+  width: 100%;
+  height: 0.5rem;
+  background: var(--background-color-neutral);
+  border-radius: var(--border-radius-base);
+}
+
+.token-swatch__bar {
+  height: 100%;
+  max-width: 100%;
+  background: var(--color-progressive);
+  border-radius: var(--border-radius-base);
+}
+
+.token-swatch__radius-box {
+  width: 3rem;
+  height: 3rem;
+  background: var(--color-progressive);
+}
+
+.token-swatch__type-sample {
+  font-family: var(--font-family-base);
+  color: var(--color-base);
+}
+
+.token-swatch__type-sample--clamp {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  max-width: 100%;
+}
+
+.token-swatch__text-overflow {
+  overflow: hidden;
+  white-space: nowrap;
+  max-width: 100%;
+}
+
+.token-swatch__line-height {
+  width: 100%;
+  font-size: var(--font-size-small);
+  color: var(--color-base);
+}
+
+.token-swatch__shadow-box {
+  width: 3rem;
+  height: 3rem;
+  background: var(--background-color-base);
+  border-radius: var(--border-radius-base);
+}
+
+.token-swatch__opacity {
+  position: relative;
+  width: 100%;
+  height: 2.5rem;
+}
+
+.token-swatch__opacity-base,
+.token-swatch__opacity-overlay {
+  position: absolute;
+  inset: 0;
+  border-radius: var(--border-radius-base);
+}
+
+.token-swatch__opacity-base {
+  background: repeating-conic-gradient(var(--border-color-subtle) 0% 25%, transparent 0% 50%) 50% /
+    12px 12px;
+}
+
+.token-swatch__opacity-overlay {
+  background: var(--color-progressive);
+}
+
+.token-swatch__generic {
+  width: 100%;
+  font-family: var(--font-family-monospace);
+  font-size: var(--font-size-small);
+  line-height: var(--line-height-small);
+  color: var(--color-base);
+  word-break: break-all;
+}
+
+.token-swatch__name {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: var(--spacing-25);
+  font-family: var(--font-family-monospace);
+  font-size: var(--font-size-small);
+  line-height: var(--line-height-small);
+  color: var(--color-subtle);
+  word-break: break-all;
+}
+
+.token-swatch__name--deprecated {
+  color: var(--color-subtle);
+}
+</style>
diff --git a/src/prototypes/example-codex-kitchen-sink/playground/ZIndexTokenList.vue b/src/prototypes/example-codex-kitchen-sink/playground/ZIndexTokenList.vue
new file mode 100644
index 00000000..bc97082b
--- /dev/null
+++ b/src/prototypes/example-codex-kitchen-sink/playground/ZIndexTokenList.vue
@@ -0,0 +1,162 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import type { TokenEntry } from '../lib/parse-tokens'
+import { getZIndexTokenGroup, parseZIndexValue } from '../lib/parse-tokens'
+import TokenDeprecatedLabel from './TokenDeprecatedLabel.vue'
+import TokenListGroupHeading from './TokenListGroupHeading.vue'
+
+const props = defineProps<{
+  tokens: TokenEntry[]
+}>()
+
+type ListEntry = { type: 'group'; label: string } | { type: 'token'; token: TokenEntry }
+
+const entries = computed(() => {
+  const items: ListEntry[] = []
+  let currentGroup: string | null = null
+
+  for (const token of props.tokens) {
+    const group = getZIndexTokenGroup(token.name)
+    if (group !== currentGroup) {
+      items.push({ type: 'group', label: group })
+      currentGroup = group
+    }
+    items.push({ type: 'token', token })
+  }
+
+  return items
+})
+
+function tokenLayerStyle(token: TokenEntry): Record<string, string> {
+  return { zIndex: `var(${token.name})` }
+}
+</script>
+
+<template>
+  <ul class="z-index-token-list">
+    <template v-for="(entry, index) in entries" :key="index">
+      <TokenListGroupHeading v-if="entry.type === 'group'" :label="entry.label" />
+      <li
+        v-else
+        class="z-index-token-list__item"
+        :class="{ 'z-index-token-list__item--deprecated': entry.token.deprecated }"
+      >
+        <div class="z-index-token-list__preview" aria-hidden="true">
+          <span class="z-index-token-list__layer z-index-token-list__layer--back">0</span>
+          <span class="z-index-token-list__layer z-index-token-list__layer--mid">1</span>
+          <span
+            class="z-index-token-list__layer z-index-token-list__layer--token"
+            :style="tokenLayerStyle(entry.token)"
+          >
+            {{ parseZIndexValue(entry.token.value) }}
+          </span>
+        </div>
+
+        <div class="z-index-token-list__meta">
+          <code class="z-index-token-list__name">{{ entry.token.name }}</code>
+          <span class="z-index-token-list__value">{{ entry.token.value }}</span>
+          <TokenDeprecatedLabel v-if="entry.token.deprecated" />
+        </div>
+      </li>
+    </template>
+  </ul>
+</template>
+
+<style scoped>
+.z-index-token-list {
+  display: flex;
+  flex-direction: column;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.z-index-token-list__item {
+  display: grid;
+  grid-template-columns: 6rem 1fr;
+  align-items: center;
+  gap: var(--spacing-100);
+  padding-block: var(--spacing-75);
+  border-bottom: var(--border-subtle);
+}
+
+.z-index-token-list__preview {
+  position: relative;
+  isolation: isolate;
+  width: 6rem;
+  height: 4rem;
+  border: var(--border-subtle);
+  border-radius: var(--border-radius-base);
+  background: var(--background-color-neutral-subtle);
+}
+
+.z-index-token-list__layer {
+  position: absolute;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 2.75rem;
+  height: 1.75rem;
+  font-family: var(--font-family-monospace);
+  font-size: var(--font-size-small);
+  line-height: var(--line-height-small);
+  border-radius: var(--border-radius-base);
+}
+
+.z-index-token-list__layer--back {
+  inset-block-start: var(--spacing-25);
+  inset-inline-start: var(--spacing-25);
+  z-index: 0;
+  color: var(--color-subtle);
+  background: var(--background-color-base);
+  border: var(--border-subtle);
+}
+
+.z-index-token-list__layer--mid {
+  inset-block-start: var(--spacing-75);
+  inset-inline-start: var(--spacing-75);
+  z-index: 1;
+  color: var(--color-subtle);
+  background: var(--background-color-neutral);
+  border: var(--border-subtle);
+}
+
+.z-index-token-list__layer--token {
+  inset-block-start: var(--spacing-125);
+  inset-inline-start: var(--spacing-125);
+  color: var(--color-inverted);
+  background: var(--color-progressive);
+  border: 1px solid var(--color-progressive--hover);
+  box-shadow: var(--box-shadow-small);
+}
+
+.z-index-token-list__meta {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: var(--spacing-25);
+  min-width: 0;
+}
+
+.z-index-token-list__name {
+  font-family: var(--font-family-monospace);
+  font-size: var(--font-size-small);
+  line-height: var(--line-height-small);
+  color: var(--color-base);
+  overflow-wrap: anywhere;
+  word-break: break-word;
+}
+
+.z-index-token-list__value {
+  font-family: var(--font-family-monospace);
+  font-size: var(--font-size-small);
+  line-height: var(--line-height-small);
+  color: var(--color-subtle);
+  overflow-wrap: anywhere;
+  word-break: break-word;
+}
+
+.z-index-token-list__item--deprecated .z-index-token-list__preview {
+  opacity: 0.75;
+}
+</style>
diff --git a/src/prototypes/example-codex-kitchen-sink/sections/ButtonsSection.vue b/src/prototypes/example-codex-kitchen-sink/sections/ButtonsSection.vue
new file mode 100644
index 00000000..4c63ea41
--- /dev/null
+++ b/src/prototypes/example-codex-kitchen-sink/sections/ButtonsSection.vue
@@ -0,0 +1,259 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+import {
+  CdxButton,
+  CdxButtonGroup,
+  CdxIcon,
+  CdxMenuButton,
+  CdxToggleButton,
+  CdxToggleButtonGroup,
+} from '@wikimedia/codex'
+import { cdxIconAdd, cdxIconEdit, cdxIconEllipsis, cdxIconSearch } from '@wikimedia/codex-icons'
+import type { ButtonAction, ButtonSize, ButtonWeight } from '@wikimedia/codex'
+
+import { buttonsSubTabs } from '../lib/component-tabs'
+import {
+  buttonGroupItems,
+  buttonGroupLongItems,
+  menuItems,
+  toggleGroupItems,
+} from '../lib/fixtures'
+import PlaygroundSection from '../playground/PlaygroundSection.vue'
+import PlaygroundGrid from '../playground/PlaygroundGrid.vue'
+import PlaygroundCell from '../playground/PlaygroundCell.vue'
+import PlaygroundSubTabs from '../playground/PlaygroundSubTabs.vue'
+
+const actions: ButtonAction[] = ['default', 'progressive', 'destructive']
+const weights: ButtonWeight[] = ['normal', 'primary', 'quiet']
+const sizes: ButtonSize[] = ['small', 'medium', 'large']
+
+const actionLabels: Record<ButtonAction, string> = {
+  default: 'Default',
+  progressive: 'Progressive',
+  destructive: 'Destructive',
+}
+
+const disabledVariants = computed(() => {
+  const variants: { action: ButtonAction; weight: ButtonWeight; label: string }[] = []
+  for (const action of actions) {
+    for (const weight of weights) {
+      if (weight === 'quiet') continue
+      variants.push({
+        action,
+        weight,
+        label: `${action} / ${weight}`,
+      })
+    }
+  }
+  return variants
+})
+
+const toggleBold = ref(false)
+const toggleBoldDisabled = ref(true)
+const toggleAlignment = ref('center')
+const menuButtonSelected = ref<string | null>(null)
+</script>
+
+<template>
+  <PlaygroundSubTabs
+    main-tab-id="components-buttons"
+    :items="buttonsSubTabs"
+    default-active="button"
+    ariaLabel="Buttons"
+  >
+    <template #default="{ id }">
+      <PlaygroundSection v-if="id === 'button'">
+        <div class="button-showcase">
+          <section v-for="action in actions" :key="action" class="button-showcase__group">
+            <h5 class="button-showcase__heading">{{ actionLabels[action] }}</h5>
+            <div class="button-showcase__matrix">
+              <div class="button-showcase__row button-showcase__row--header">
+                <span class="button-showcase__corner" />
+                <code v-for="size in sizes" :key="size" class="button-showcase__col-label">{{ size }}</code>
+              </div>
+              <div v-for="weight in weights" :key="weight" class="button-showcase__row">
+                <code class="button-showcase__row-label">{{ weight }}</code>
+                <div v-for="size in sizes" :key="size" class="button-showcase__cell">
+                  <CdxButton :action="action" :weight="weight" :size="size">Label</CdxButton>
+                </div>
+              </div>
+            </div>
+          </section>
+
+          <section class="button-showcase__group">
+            <h5 class="button-showcase__heading">Disabled</h5>
+            <div class="button-showcase__stack">
+              <div
+                v-for="variant in disabledVariants"
+                :key="variant.label"
+                class="button-showcase__stack-item"
+              >
+                <CdxButton
+                  :action="variant.action"
+                  :weight="variant.weight"
+                  size="medium"
+                  disabled
+                >
+                  Label
+                </CdxButton>
+                <code class="button-showcase__stack-label">{{ variant.label }}</code>
+              </div>
+            </div>
+          </section>
+
+          <section class="button-showcase__group">
+            <h5 class="button-showcase__heading">Icons</h5>
+            <div class="button-showcase__stack">
+              <div class="button-showcase__stack-item">
+                <CdxButton action="progressive">
+                  <CdxIcon :icon="cdxIconAdd" />
+                  Add
+                </CdxButton>
+                <code class="button-showcase__stack-label">icon + label</code>
+              </div>
+              <div class="button-showcase__stack-item">
+                <CdxButton weight="quiet" aria-label="Search">
+                  <CdxIcon :icon="cdxIconSearch" />
+                </CdxButton>
+                <code class="button-showcase__stack-label">icon-only / quiet</code>
+              </div>
+              <div class="button-showcase__stack-item">
+                <CdxButton weight="quiet" size="large" aria-label="Edit">
+                  <CdxIcon :icon="cdxIconEdit" />
+                </CdxButton>
+                <code class="button-showcase__stack-label">icon-only / large</code>
+              </div>
+            </div>
+          </section>
+        </div>
+      </PlaygroundSection>
+
+      <PlaygroundSection v-else-if="id === 'button-group'">
+        <PlaygroundGrid min="280px">
+          <PlaygroundCell label="default">
+            <CdxButtonGroup :buttons="buttonGroupItems" />
+          </PlaygroundCell>
+          <PlaygroundCell label="long labels">
+            <CdxButtonGroup :buttons="buttonGroupLongItems" />
+          </PlaygroundCell>
+          <PlaygroundCell label="disabled item">
+            <CdxButtonGroup
+              :buttons="[
+                { value: 'a', label: 'A' },
+                { value: 'b', label: 'B' },
+                { value: 'c', label: 'C', disabled: true },
+              ]"
+            />
+          </PlaygroundCell>
+        </PlaygroundGrid>
+      </PlaygroundSection>
+
+      <PlaygroundSection v-else-if="id === 'menu-button'">
+        <PlaygroundGrid min="160px">
+          <PlaygroundCell label="default">
+            <CdxMenuButton v-model:selected="menuButtonSelected" :menu-items="menuItems">
+              <CdxIcon :icon="cdxIconEllipsis" />
+            </CdxMenuButton>
+          </PlaygroundCell>
+        </PlaygroundGrid>
+      </PlaygroundSection>
+
+      <PlaygroundSection v-else-if="id === 'toggle-button'">
+        <PlaygroundGrid min="120px">
+          <PlaygroundCell label="off">
+            <CdxToggleButton v-model="toggleBoldDisabled">
+              <CdxIcon :icon="cdxIconEdit" />
+            </CdxToggleButton>
+          </PlaygroundCell>
+          <PlaygroundCell label="on">
+            <CdxToggleButton v-model="toggleBold">
+              <CdxIcon :icon="cdxIconEdit" />
+            </CdxToggleButton>
+          </PlaygroundCell>
+          <PlaygroundCell label="disabled">
+            <CdxToggleButton :model-value="false" disabled>
+              <CdxIcon :icon="cdxIconEdit" />
+            </CdxToggleButton>
+          </PlaygroundCell>
+        </PlaygroundGrid>
+      </PlaygroundSection>
+
+      <PlaygroundSection v-else-if="id === 'toggle-button-group'">
+        <PlaygroundGrid min="280px">
+          <PlaygroundCell label="default">
+            <CdxToggleButtonGroup v-model="toggleAlignment" :buttons="toggleGroupItems" />
+          </PlaygroundCell>
+          <PlaygroundCell label="disabled">
+            <CdxToggleButtonGroup
+              model-value="center"
+              :buttons="toggleGroupItems.map((b) => ({ ...b, disabled: true }))"
+            />
+          </PlaygroundCell>
+        </PlaygroundGrid>
+      </PlaygroundSection>
+    </template>
+  </PlaygroundSubTabs>
+</template>
+
+<style scoped>
+.button-showcase {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-100);
+}
+
+.button-showcase__heading {
+  margin: 0 0 var(--spacing-50);
+  font-family: var(--font-family-base);
+  font-size: var(--font-size-medium);
+  font-weight: var(--font-weight-bold);
+  line-height: var(--line-height-medium);
+  color: var(--color-base);
+}
+
+.button-showcase__matrix {
+  display: grid;
+  grid-template-columns: 4rem repeat(3, max-content);
+  gap: var(--spacing-50) var(--spacing-75);
+  align-items: center;
+}
+
+.button-showcase__row {
+  display: contents;
+}
+
+.button-showcase__corner {
+  display: block;
+}
+
+.button-showcase__col-label,
+.button-showcase__row-label,
+.button-showcase__stack-label {
+  font-family: var(--font-family-monospace);
+  font-size: var(--font-size-small);
+  line-height: var(--line-height-small);
+  color: var(--color-subtle);
+}
+
+.button-showcase__col-label {
+  text-align: center;
+}
+
+.button-showcase__cell {
+  display: flex;
+  justify-content: center;
+  min-width: 5.5rem;
+}
+
+.button-showcase__stack {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-50);
+}
+
+.button-showcase__stack-item {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-75);
+}
+</style>
diff --git a/src/prototypes/example-codex-kitchen-sink/sections/ColorSection.vue b/src/prototypes/example-codex-kitchen-sink/sections/ColorSection.vue
new file mode 100644
index 00000000..1a9dcca0
--- /dev/null
+++ b/src/prototypes/example-codex-kitchen-sink/sections/ColorSection.vue
@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import tokensCss from '../../../../.agents/skills/codex-tokens/assets/tokens.css?raw'
+import { colorSubTabs, getColorTokensForSubTab, parseTokensFromCss } from '../lib/parse-tokens'
+import type { ColorSubTab } from '../lib/parse-tokens'
+import ColorPaletteList from '../playground/ColorPaletteList.vue'
+import ColorTokenList from '../playground/ColorTokenList.vue'
+import PlaygroundSection from '../playground/PlaygroundSection.vue'
+import PlaygroundSubTabs from '../playground/PlaygroundSubTabs.vue'
+
+const allTokens = parseTokensFromCss(tokensCss)
+</script>
+
+<template>
+  <PlaygroundSubTabs
+    main-tab-id="color"
+    :items="colorSubTabs"
+    default-active="text"
+    ariaLabel="Color"
+  >
+    <template #default="{ id }">
+      <PlaygroundSection>
+        <ColorPaletteList v-if="id === 'palette'" />
+        <ColorTokenList
+          v-else
+          :mode="id as Exclude<ColorSubTab, 'palette'>"
+          :tokens="getColorTokensForSubTab(allTokens, id as Exclude<ColorSubTab, 'palette'>)"
+        />
+      </PlaygroundSection>
+    </template>
+  </PlaygroundSubTabs>
+</template>
diff --git a/src/prototypes/example-codex-kitchen-sink/sections/ContentDataSection.vue b/src/prototypes/example-codex-kitchen-sink/sections/ContentDataSection.vue
new file mode 100644
index 00000000..1d2ea4ff
--- /dev/null
+++ b/src/prototypes/example-codex-kitchen-sink/sections/ContentDataSection.vue
@@ -0,0 +1,261 @@
+<script setup lang="ts">
+import { ref, useTemplateRef } from 'vue'
+import {
+  CdxAccordion,
+  CdxButton,
+  CdxCard,
+  CdxDialog,
+  CdxIcon,
+  CdxMenu,
+  CdxMenuItem,
+  CdxPopover,
+  CdxTable,
+  CdxTooltip,
+} from '@wikimedia/codex'
+import { cdxIconAdd, cdxIconBook, cdxIconEdit } from '@wikimedia/codex-icons'
+
+import { contentDataSubTabs } from '../lib/component-tabs'
+import { menuItems, tableColumns, tableRows, thumbnailUrl } from '../lib/fixtures'
+import PlaygroundSection from '../playground/PlaygroundSection.vue'
+import PlaygroundGrid from '../playground/PlaygroundGrid.vue'
+import PlaygroundCell from '../playground/PlaygroundCell.vue'
+import PlaygroundSubTabs from '../playground/PlaygroundSubTabs.vue'
+
+const vTooltip = CdxTooltip
+
+const accordionOpen = ref(true)
+const accordionSeparations = ['none', 'minimal', 'divider', 'outline'] as const
+
+const dialogProgressive = ref(false)
+const dialogDestructive = ref(false)
+const dialogCustomFooter = ref(false)
+const dialogSubtitle = ref(false)
+
+const menuExpanded = ref(false)
+const menuSelected = ref<string | null>('edit')
+
+const popoverOpen = ref(false)
+const popoverAnchor = useTemplateRef<HTMLElement>('popoverAnchor')
+
+const tableSort = ref({ column: 'title', direction: 'asc' as const })
+</script>
+
+<template>
+  <PlaygroundSubTabs
+    main-tab-id="components-content-data"
+    :items="contentDataSubTabs"
+    default-active="accordion"
+    ariaLabel="Content & data"
+  >
+    <template #default="{ id }">
+      <PlaygroundSection v-if="id === 'accordion'">
+        <PlaygroundGrid min="280px">
+          <PlaygroundCell v-for="separation in accordionSeparations" :key="separation" :label="separation">
+            <CdxAccordion v-model="accordionOpen" :separation="separation">
+              <template #title>Title</template>
+              <template #description>Description</template>
+              <p>Body content</p>
+            </CdxAccordion>
+          </PlaygroundCell>
+          <PlaygroundCell label="open">
+            <CdxAccordion open separation="outline">
+              <template #title>Title</template>
+              <p>Body content</p>
+            </CdxAccordion>
+          </PlaygroundCell>
+        </PlaygroundGrid>
+      </PlaygroundSection>
+
+      <PlaygroundSection v-else-if="id === 'card'">
+        <PlaygroundGrid min="240px">
+          <PlaygroundCell label="default">
+            <CdxCard>
+              <template #title>Title</template>
+              <template #description>Description</template>
+            </CdxCard>
+          </PlaygroundCell>
+          <PlaygroundCell label="url">
+            <CdxCard url="#">
+              <template #title>Title</template>
+              <template #description>Description</template>
+            </CdxCard>
+          </PlaygroundCell>
+          <PlaygroundCell label="icon">
+            <CdxCard :icon="cdxIconBook">
+              <template #title>Title</template>
+            </CdxCard>
+          </PlaygroundCell>
+          <PlaygroundCell label="thumbnail">
+            <CdxCard :thumbnail="{ url: thumbnailUrl, width: 40, height: 40 }">
+              <template #title>Title</template>
+            </CdxCard>
+          </PlaygroundCell>
+        </PlaygroundGrid>
+      </PlaygroundSection>
+
+      <PlaygroundSection v-else-if="id === 'dialog'">
+        <PlaygroundGrid min="180px">
+          <PlaygroundCell label="progressive primary">
+            <CdxButton @click="dialogProgressive = true">Open</CdxButton>
+          </PlaygroundCell>
+          <PlaygroundCell label="destructive primary">
+            <CdxButton action="destructive" @click="dialogDestructive = true">Open</CdxButton>
+          </PlaygroundCell>
+          <PlaygroundCell label="custom footer">
+            <CdxButton @click="dialogCustomFooter = true">Open</CdxButton>
+          </PlaygroundCell>
+          <PlaygroundCell label="subtitle">
+            <CdxButton @click="dialogSubtitle = true">Open</CdxButton>
+          </PlaygroundCell>
+        </PlaygroundGrid>
+
+        <CdxDialog
+          v-model:open="dialogProgressive"
+          title="Title"
+          close-button-label="Close"
+          :primary-action="{ label: 'Primary', actionType: 'progressive' }"
+          :default-action="{ label: 'Default' }"
+          dismissable
+          @primary="dialogProgressive = false"
+          @default="dialogProgressive = false"
+        >
+          Body
+        </CdxDialog>
+
+        <CdxDialog
+          v-model:open="dialogDestructive"
+          title="Title"
+          close-button-label="Close"
+          :primary-action="{ label: 'Delete', actionType: 'destructive' }"
+          :default-action="{ label: 'Cancel' }"
+          dismissable
+          @primary="dialogDestructive = false"
+          @default="dialogDestructive = false"
+        >
+          Body
+        </CdxDialog>
+
+        <CdxDialog
+          v-model:open="dialogCustomFooter"
+          title="Title"
+          close-button-label="Close"
+          dismissable
+        >
+          Body
+          <template #footer>
+            <CdxButton weight="quiet" @click="dialogCustomFooter = false">Cancel</CdxButton>
+            <CdxButton action="progressive" :icon="cdxIconAdd" @click="dialogCustomFooter = false">
+              Add
+            </CdxButton>
+          </template>
+        </CdxDialog>
+
+        <CdxDialog
+          v-model:open="dialogSubtitle"
+          title="Title"
+          subtitle="Subtitle"
+          close-button-label="Close"
+          :primary-action="{ label: 'Primary', actionType: 'progressive' }"
+          dismissable
+          @primary="dialogSubtitle = false"
+        >
+          Body
+        </CdxDialog>
+      </PlaygroundSection>
+
+      <PlaygroundSection v-else-if="id === 'menu'">
+        <PlaygroundGrid min="220px">
+          <PlaygroundCell label="expanded">
+            <CdxMenu
+              v-model:expanded="menuExpanded"
+              v-model:selected="menuSelected"
+              :menu-items="menuItems"
+            />
+          </PlaygroundCell>
+          <PlaygroundCell label="show-pending">
+            <CdxMenu
+              v-model:expanded="menuExpanded"
+              v-model:selected="menuSelected"
+              :menu-items="[]"
+              show-pending
+            >
+              <template #pending>Pending</template>
+            </CdxMenu>
+          </PlaygroundCell>
+        </PlaygroundGrid>
+      </PlaygroundSection>
+
+      <PlaygroundSection v-else-if="id === 'menu-item'">
+        <PlaygroundGrid min="200px">
+          <PlaygroundCell label="default">
+            <CdxMenuItem label="Menu item" value="item" />
+          </PlaygroundCell>
+          <PlaygroundCell label="with icon">
+            <CdxMenuItem label="Edit" value="edit" :icon="cdxIconEdit" />
+          </PlaygroundCell>
+          <PlaygroundCell label="disabled">
+            <CdxMenuItem label="Disabled" value="disabled" disabled />
+          </PlaygroundCell>
+        </PlaygroundGrid>
+      </PlaygroundSection>
+
+      <PlaygroundSection v-else-if="id === 'popover'">
+        <PlaygroundGrid min="240px">
+          <PlaygroundCell label="open">
+            <CdxButton ref="popoverAnchor" @click="popoverOpen = !popoverOpen">Toggle</CdxButton>
+            <CdxPopover
+              v-model:open="popoverOpen"
+              :anchor="popoverAnchor"
+              title="Title"
+              use-close-button
+              :primary-action="{ label: 'Primary', actionType: 'progressive' }"
+              :default-action="{ label: 'Default' }"
+            >
+              Body
+            </CdxPopover>
+          </PlaygroundCell>
+        </PlaygroundGrid>
+      </PlaygroundSection>
+
+      <PlaygroundSection v-else-if="id === 'table'">
+        <PlaygroundGrid min="100%">
+          <PlaygroundCell label="default">
+            <CdxTable
+              caption="Table"
+              :columns="tableColumns"
+              :data="tableRows"
+              v-model:sort="tableSort"
+            />
+          </PlaygroundCell>
+          <PlaygroundCell label="paginate">
+            <CdxTable
+              caption="Table"
+              :columns="tableColumns"
+              :data="tableRows"
+              paginate
+              :pagination-size-default="2"
+            />
+          </PlaygroundCell>
+          <PlaygroundCell label="vertical-borders">
+            <CdxTable caption="Table" :columns="tableColumns" :data="tableRows" show-vertical-borders />
+          </PlaygroundCell>
+        </PlaygroundGrid>
+      </PlaygroundSection>
+
+      <PlaygroundSection v-else-if="id === 'tooltip'">
+        <PlaygroundGrid min="160px">
+          <PlaygroundCell label="directive">
+            <CdxButton v-tooltip="'Tooltip text'">Hover</CdxButton>
+          </PlaygroundCell>
+          <PlaygroundCell label="icon">
+            <CdxButton v-tooltip="'Edit'" weight="quiet" aria-label="Edit">
+              <CdxIcon :icon="cdxIconEdit" />
+            </CdxButton>
+          </PlaygroundCell>
+        </PlaygroundGrid>
+      </PlaygroundSection>
+    </template>
+  </PlaygroundSubTabs>
+</template>
+
+<style scoped></style>
diff --git a/src/prototypes/example-codex-kitchen-sink/sections/FeedbackSection.vue b/src/prototypes/example-codex-kitchen-sink/sections/FeedbackSection.vue
new file mode 100644
index 00000000..ea2dade9
--- /dev/null
+++ b/src/prototypes/example-codex-kitchen-sink/sections/FeedbackSection.vue
@@ -0,0 +1,116 @@
+<script setup lang="ts">
+import {
+  CdxButton,
+  CdxInfoChip,
+  CdxMessage,
+  CdxProgressBar,
+  CdxProgressIndicator,
+  useToast,
+} from '@wikimedia/codex'
+import { cdxIconAlert } from '@wikimedia/codex-icons'
+import type { StatusType } from '@wikimedia/codex'
+
+import { feedbackSubTabs } from '../lib/component-tabs'
+import PlaygroundSection from '../playground/PlaygroundSection.vue'
+import PlaygroundGrid from '../playground/PlaygroundGrid.vue'
+import PlaygroundCell from '../playground/PlaygroundCell.vue'
+import PlaygroundSubTabs from '../playground/PlaygroundSubTabs.vue'
+
+const toast = useToast()
+
+const messageTypes: StatusType[] = ['notice', 'warning', 'error', 'success']
+
+function showToast(type: StatusType) {
+  toast.show({ type, message: 'Toast message', autoDismiss: 3000 })
+}
+</script>
+
+<template>
+  <PlaygroundSubTabs
+    main-tab-id="components-feedback"
+    :items="feedbackSubTabs"
+    default-active="info-chip"
+    ariaLabel="Feedback"
+  >
+    <template #default="{ id }">
+      <PlaygroundSection v-if="id === 'info-chip'">
+        <div class="info-chip-stack">
+          <CdxInfoChip status="notice" :icon="cdxIconAlert">Notice</CdxInfoChip>
+          <CdxInfoChip status="warning" :icon="cdxIconAlert">Warning</CdxInfoChip>
+          <CdxInfoChip status="error" :icon="cdxIconAlert">Error</CdxInfoChip>
+          <CdxInfoChip status="success" :icon="cdxIconAlert">Success</CdxInfoChip>
+          <CdxInfoChip status="notice">No icon</CdxInfoChip>
+        </div>
+      </PlaygroundSection>
+
+      <PlaygroundSection v-else-if="id === 'message'">
+        <PlaygroundGrid min="280px">
+          <PlaygroundCell v-for="type in messageTypes" :key="`${type}-block`" :label="`${type} / block`">
+            <CdxMessage :type="type">Message text</CdxMessage>
+          </PlaygroundCell>
+          <PlaygroundCell v-for="type in messageTypes" :key="`${type}-inline`" :label="`${type} / inline`">
+            <CdxMessage :type="type" inline>Message text</CdxMessage>
+          </PlaygroundCell>
+          <PlaygroundCell label="dismissable">
+            <CdxMessage type="notice" allow-user-dismiss dismiss-button-label="Close">
+              Message text
+            </CdxMessage>
+          </PlaygroundCell>
+        </PlaygroundGrid>
+      </PlaygroundSection>
+
+      <PlaygroundSection v-else-if="id === 'progress-bar'">
+        <PlaygroundGrid min="220px">
+          <PlaygroundCell label="default / indeterminate">
+            <CdxProgressBar aria-label="Loading" />
+          </PlaygroundCell>
+          <PlaygroundCell label="inline / indeterminate">
+            <CdxProgressBar inline aria-label="Loading" />
+          </PlaygroundCell>
+          <PlaygroundCell label="determinate / 42">
+            <CdxProgressBar :value="42" aria-label="Progress" />
+          </PlaygroundCell>
+          <PlaygroundCell label="disabled">
+            <CdxProgressBar disabled aria-label="Loading" />
+          </PlaygroundCell>
+        </PlaygroundGrid>
+      </PlaygroundSection>
+
+      <PlaygroundSection v-else-if="id === 'progress-indicator'">
+        <PlaygroundGrid min="180px">
+          <PlaygroundCell label="spinner only">
+            <CdxProgressIndicator aria-label="Loading" />
+          </PlaygroundCell>
+          <PlaygroundCell label="with label">
+            <CdxProgressIndicator show-label>
+              Loading
+            </CdxProgressIndicator>
+          </PlaygroundCell>
+          <PlaygroundCell label="in button">
+            <CdxButton action="progressive" disabled>
+              <CdxProgressIndicator />
+              Loading
+            </CdxButton>
+          </PlaygroundCell>
+        </PlaygroundGrid>
+      </PlaygroundSection>
+
+      <PlaygroundSection v-else-if="id === 'toast'">
+        <PlaygroundGrid min="180px">
+          <PlaygroundCell v-for="type in messageTypes" :key="type" :label="type">
+            <CdxButton @click="showToast(type)">Show</CdxButton>
+          </PlaygroundCell>
+        </PlaygroundGrid>
+      </PlaygroundSection>
+    </template>
+  </PlaygroundSubTabs>
+</template>
+
+<style scoped>
+.info-chip-stack {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: var(--spacing-75);
+}
+</style>
diff --git a/src/prototypes/example-codex-kitchen-sink/sections/FormElementsSection.vue b/src/prototypes/example-codex-kitchen-sink/sections/FormElementsSection.vue
new file mode 100644
index 00000000..634ec670
--- /dev/null
+++ b/src/prototypes/example-codex-kitchen-sink/sections/FormElementsSection.vue
@@ -0,0 +1,268 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import {
+  CdxCheckbox,
+  CdxChipInput,
+  CdxCombobox,
+  CdxField,
+  CdxLabel,
+  CdxLookup,
+  CdxMultiselectLookup,
+  CdxRadio,
+  CdxSelect,
+  CdxTextArea,
+  CdxTextInput,
+  CdxToggleSwitch,
+} from '@wikimedia/codex'
+import { cdxIconSearch } from '@wikimedia/codex-icons'
+import type { ValidationStatusType } from '@wikimedia/codex'
+
+import { formElementsSubTabs } from '../lib/component-tabs'
+import { chipItems, lookupResults, selectOptions } from '../lib/fixtures'
+import PlaygroundSection from '../playground/PlaygroundSection.vue'
+import PlaygroundGrid from '../playground/PlaygroundGrid.vue'
+import PlaygroundCell from '../playground/PlaygroundCell.vue'
+import PlaygroundList from '../playground/PlaygroundList.vue'
+import PlaygroundSubTabs from '../playground/PlaygroundSubTabs.vue'
+
+const textValue = ref('Sample text')
+const textAreaValue = ref('Multiline\nsample text')
+const selectValue = ref('a')
+const comboboxValue = ref('a')
+const lookupSelected = ref<string | null>(null)
+const lookupInput = ref('Albert')
+const multiSelected = ref<string[]>([])
+const multiChips = ref([...chipItems])
+const chips = ref([...chipItems])
+const chipInputValue = ref('')
+const checkboxSingle = ref(false)
+const checkboxGroup = ref<string[]>(['b'])
+const radioValue = ref('draft')
+const toggleSwitch = ref(true)
+const toggleSwitchDisabled = ref(true)
+
+const fieldStatuses: ValidationStatusType[] = ['default', 'warning', 'error', 'success']
+const inputTypes = [
+  'text',
+  'search',
+  'number',
+  'email',
+  'password',
+  'tel',
+  'url',
+  'date',
+  'time',
+  'color',
+] as const
+
+function rejectInvalidChip(value: string | number) {
+  return String(value).length >= 2
+}
+</script>
+
+<template>
+  <PlaygroundSubTabs
+    main-tab-id="components-form-elements"
+    :items="formElementsSubTabs"
+    default-active="checkbox"
+    ariaLabel="Form elements"
+  >
+    <template #default="{ id }">
+      <PlaygroundSection v-if="id === 'checkbox'">
+        <PlaygroundList>
+          <PlaygroundCell label="unchecked" row>
+            <CdxCheckbox v-model="checkboxSingle">Label</CdxCheckbox>
+          </PlaygroundCell>
+          <PlaygroundCell label="checked" row>
+            <CdxCheckbox :model-value="true">Label</CdxCheckbox>
+          </PlaygroundCell>
+          <PlaygroundCell label="disabled" row>
+            <CdxCheckbox :model-value="true" disabled>Label</CdxCheckbox>
+          </PlaygroundCell>
+          <PlaygroundCell label="group" row>
+            <CdxCheckbox v-model="checkboxGroup" input-value="a">A</CdxCheckbox>
+            <CdxCheckbox v-model="checkboxGroup" input-value="b">B</CdxCheckbox>
+            <CdxCheckbox v-model="checkboxGroup" input-value="c">C</CdxCheckbox>
+          </PlaygroundCell>
+        </PlaygroundList>
+      </PlaygroundSection>
+
+      <PlaygroundSection v-else-if="id === 'chip-input'">
+        <PlaygroundList>
+          <PlaygroundCell label="default" row>
+            <CdxChipInput v-model:input-chips="chips" v-model:input-value="chipInputValue" />
+          </PlaygroundCell>
+          <PlaygroundCell label="separate-input" row>
+            <CdxChipInput v-model:input-chips="chips" separate-input />
+          </PlaygroundCell>
+          <PlaygroundCell label="validator" row>
+            <CdxChipInput v-model:input-chips="chips" :chip-validator="rejectInvalidChip" />
+          </PlaygroundCell>
+          <PlaygroundCell label="disabled" row>
+            <CdxChipInput :input-chips="chipItems" disabled />
+          </PlaygroundCell>
+        </PlaygroundList>
+      </PlaygroundSection>
+
+      <PlaygroundSection v-else-if="id === 'combobox'">
+        <PlaygroundList>
+          <PlaygroundCell label="default" row>
+            <CdxCombobox v-model:selected="comboboxValue" :menu-items="selectOptions" />
+          </PlaygroundCell>
+          <PlaygroundCell label="disabled" row>
+            <CdxCombobox selected="a" :menu-items="selectOptions" disabled />
+          </PlaygroundCell>
+        </PlaygroundList>
+      </PlaygroundSection>
+
+      <PlaygroundSection v-else-if="id === 'field'">
+        <PlaygroundList>
+          <PlaygroundCell v-for="status in fieldStatuses" :key="status" :label="status" row>
+            <CdxField :status="status" :messages="{ [status]: 'Message' }">
+              <template #label>Label</template>
+              <template #description>Description</template>
+              <CdxTextInput v-model="textValue" />
+              <template #help-text>Help text</template>
+            </CdxField>
+          </PlaygroundCell>
+        </PlaygroundList>
+      </PlaygroundSection>
+
+      <PlaygroundSection v-else-if="id === 'label'">
+        <PlaygroundList>
+          <PlaygroundCell label="default" row>
+            <CdxLabel>Label</CdxLabel>
+          </PlaygroundCell>
+          <PlaygroundCell label="optional" row>
+            <CdxLabel optional>Label</CdxLabel>
+          </PlaygroundCell>
+        </PlaygroundList>
+      </PlaygroundSection>
+
+      <PlaygroundSection v-else-if="id === 'lookup'">
+        <PlaygroundList>
+          <PlaygroundCell label="default" row>
+            <CdxLookup
+              v-model:selected="lookupSelected"
+              v-model:input-value="lookupInput"
+              :menu-items="lookupResults"
+            />
+          </PlaygroundCell>
+          <PlaygroundCell label="disabled" row>
+            <CdxLookup
+              selected="Albert Einstein"
+              input-value="Albert Einstein"
+              :menu-items="lookupResults"
+              disabled
+            />
+          </PlaygroundCell>
+        </PlaygroundList>
+      </PlaygroundSection>
+
+      <PlaygroundSection v-else-if="id === 'multiselect-lookup'">
+        <PlaygroundGrid min="280px">
+          <PlaygroundCell label="default">
+            <CdxMultiselectLookup
+              v-model:selected="multiSelected"
+              v-model:input-chips="multiChips"
+              :menu-items="lookupResults"
+            />
+          </PlaygroundCell>
+          <PlaygroundCell label="disabled">
+            <CdxMultiselectLookup
+              :selected="['Albert Einstein']"
+              :input-chips="[{ value: 'Albert Einstein' }]"
+              :menu-items="lookupResults"
+              disabled
+            />
+          </PlaygroundCell>
+        </PlaygroundGrid>
+      </PlaygroundSection>
+
+      <PlaygroundSection v-else-if="id === 'radio'">
+        <PlaygroundGrid min="180px">
+          <PlaygroundCell label="group">
+            <CdxRadio v-model="radioValue" input-value="published">Published</CdxRadio>
+            <CdxRadio v-model="radioValue" input-value="draft">Draft</CdxRadio>
+          </PlaygroundCell>
+          <PlaygroundCell label="disabled">
+            <CdxRadio model-value="draft" input-value="draft" disabled>Draft</CdxRadio>
+          </PlaygroundCell>
+        </PlaygroundGrid>
+      </PlaygroundSection>
+
+      <PlaygroundSection v-else-if="id === 'select'">
+        <PlaygroundGrid min="220px">
+          <PlaygroundCell label="default">
+            <CdxSelect v-model:selected="selectValue" :menu-items="selectOptions" default-label="Choose" />
+          </PlaygroundCell>
+          <PlaygroundCell label="disabled">
+            <CdxSelect
+              selected="a"
+              :menu-items="selectOptions"
+              default-label="Choose"
+              disabled
+            />
+          </PlaygroundCell>
+        </PlaygroundGrid>
+      </PlaygroundSection>
+
+      <PlaygroundSection v-else-if="id === 'text-area'">
+        <PlaygroundGrid min="240px">
+          <PlaygroundCell label="default">
+            <CdxTextArea v-model="textAreaValue" :rows="3" />
+          </PlaygroundCell>
+          <PlaygroundCell label="disabled">
+            <CdxTextArea model-value="Disabled" :rows="3" disabled />
+          </PlaygroundCell>
+          <PlaygroundCell label="readonly">
+            <CdxTextArea model-value="Readonly" :rows="3" readonly />
+          </PlaygroundCell>
+        </PlaygroundGrid>
+      </PlaygroundSection>
+
+      <PlaygroundSection v-else-if="id === 'text-input'">
+        <PlaygroundGrid min="220px">
+          <PlaygroundCell label="default">
+            <CdxTextInput v-model="textValue" placeholder="Placeholder" />
+          </PlaygroundCell>
+          <PlaygroundCell label="start-icon">
+            <CdxTextInput v-model="textValue" :start-icon="cdxIconSearch" />
+          </PlaygroundCell>
+          <PlaygroundCell label="clearable">
+            <CdxTextInput v-model="textValue" clearable />
+          </PlaygroundCell>
+          <PlaygroundCell label="disabled">
+            <CdxTextInput model-value="Disabled" disabled />
+          </PlaygroundCell>
+          <PlaygroundCell label="readonly">
+            <CdxTextInput model-value="Readonly" readonly />
+          </PlaygroundCell>
+          <PlaygroundCell v-for="inputType in inputTypes" :key="inputType" :label="inputType">
+            <CdxTextInput :input-type="inputType" :model-value="inputType === 'number' ? 42 : 'Sample'" />
+          </PlaygroundCell>
+        </PlaygroundGrid>
+      </PlaygroundSection>
+
+      <PlaygroundSection v-else-if="id === 'toggle-switch'">
+        <PlaygroundGrid min="180px">
+          <PlaygroundCell label="off">
+            <CdxToggleSwitch v-model="toggleSwitchDisabled">Off</CdxToggleSwitch>
+          </PlaygroundCell>
+          <PlaygroundCell label="on">
+            <CdxToggleSwitch v-model="toggleSwitch">On</CdxToggleSwitch>
+          </PlaygroundCell>
+          <PlaygroundCell label="disabled">
+            <CdxToggleSwitch :model-value="true" disabled>Disabled</CdxToggleSwitch>
+          </PlaygroundCell>
+        </PlaygroundGrid>
+      </PlaygroundSection>
+    </template>
+  </PlaygroundSubTabs>
+</template>
+
+<style scoped>
+:deep(.playground-cell__content > * + *) {
+  margin-top: var(--spacing-35);
+}
+</style>
diff --git a/src/prototypes/example-codex-kitchen-sink/sections/IconsSection.vue b/src/prototypes/example-codex-kitchen-sink/sections/IconsSection.vue
new file mode 100644
index 00000000..289ceffd
--- /dev/null
+++ b/src/prototypes/example-codex-kitchen-sink/sections/IconsSection.vue
@@ -0,0 +1,314 @@
+<script setup lang="ts">
+import { computed, nextTick, ref, watch } from 'vue'
+import { CdxButton, CdxIcon, CdxToggleSwitch, CdxTooltip } from '@wikimedia/codex'
+import * as codexIcons from '@wikimedia/codex-icons'
+import type { IconSize } from '@wikimedia/codex'
+import { cdxIconSearch } from '@wikimedia/codex-icons'
+
+import { iconSizeEntries, iconsSubTabs } from '../lib/component-tabs'
+import PlaygroundSection from '../playground/PlaygroundSection.vue'
+import PlaygroundSubTabs from '../playground/PlaygroundSubTabs.vue'
+import TokenDeprecatedLabel from '../playground/TokenDeprecatedLabel.vue'
+
+const vTooltip = CdxTooltip
+
+type TooltipInstance = {
+  show: () => void
+  hide: () => void
+  remove: () => void
+  removeEventListeners: () => void
+  tooltipElement?: HTMLElement
+}
+
+type TooltipHost = HTMLElement & {
+  tooltip?: TooltipInstance
+}
+
+const iconsOnly = ref(false)
+const pinnedIconName = ref<string | null>(null)
+const buttonHosts = new Map<string, TooltipHost>()
+let pinnedEscapeHandler: ((event: KeyboardEvent) => void) | null = null
+let pinnedInteractionCleanup: (() => void) | null = null
+let pinnedOutsidePointerHandler: ((event: PointerEvent) => void) | null = null
+
+const iconEntries = computed(() =>
+  Object.entries(codexIcons)
+    .filter(([name]) => name.startsWith('cdxIcon'))
+    .sort(([a], [b]) => a.localeCompare(b)),
+)
+
+function setButtonHost(name: string, instance: unknown) {
+  const root = (instance as { $el?: unknown })?.$el ?? instance
+  if (root instanceof HTMLElement) {
+    buttonHosts.set(name, root as TooltipHost)
+  } else {
+    buttonHosts.delete(name)
+  }
+}
+
+function isInsidePinnedRegion(name: string, target: EventTarget | null): boolean {
+  if (!(target instanceof Node)) return false
+
+  const host = buttonHosts.get(name)
+  const tooltipEl = host?.tooltip?.tooltipElement
+  if (host?.contains(target)) return true
+  if (tooltipEl?.contains(target)) return true
+  return false
+}
+
+function scheduleDismissUnlessPinnedFocus(name: string, relatedTarget: EventTarget | null) {
+  if (pinnedIconName.value !== name) return
+  if (isInsidePinnedRegion(name, relatedTarget)) return
+
+  queueMicrotask(() => {
+    if (pinnedIconName.value !== name) return
+    if (isInsidePinnedRegion(name, document.activeElement)) return
+    unpinTooltip(name)
+  })
+}
+
+function detachPinnedInteractionListeners() {
+  pinnedInteractionCleanup?.()
+  pinnedInteractionCleanup = null
+
+  if (pinnedOutsidePointerHandler) {
+    document.removeEventListener('pointerdown', pinnedOutsidePointerHandler, true)
+    pinnedOutsidePointerHandler = null
+  }
+}
+
+function attachPinnedInteractionListeners(name: string) {
+  detachPinnedInteractionListeners()
+
+  const host = buttonHosts.get(name)
+  const tooltipEl = host?.tooltip?.tooltipElement
+  if (!host || !tooltipEl) return
+
+  tooltipEl.tabIndex = -1
+
+  const onTooltipPointerDown = () => {
+    tooltipEl.focus({ preventScroll: true })
+  }
+
+  const onHostFocusOut = (event: FocusEvent) => {
+    scheduleDismissUnlessPinnedFocus(name, event.relatedTarget)
+  }
+
+  const onTooltipFocusOut = (event: FocusEvent) => {
+    scheduleDismissUnlessPinnedFocus(name, event.relatedTarget)
+  }
+
+  tooltipEl.addEventListener('pointerdown', onTooltipPointerDown)
+  host.addEventListener('focusout', onHostFocusOut)
+  tooltipEl.addEventListener('focusout', onTooltipFocusOut)
+
+  pinnedOutsidePointerHandler = (event: PointerEvent) => {
+    if (pinnedIconName.value !== name) return
+    if (isInsidePinnedRegion(name, event.target)) return
+    unpinTooltip(name)
+  }
+  document.addEventListener('pointerdown', pinnedOutsidePointerHandler, true)
+
+  pinnedInteractionCleanup = () => {
+    tooltipEl.removeEventListener('pointerdown', onTooltipPointerDown)
+    host.removeEventListener('focusout', onHostFocusOut)
+    tooltipEl.removeEventListener('focusout', onTooltipFocusOut)
+    tooltipEl.removeAttribute('tabindex')
+  }
+}
+
+function detachPinnedEscapeListener() {
+  if (!pinnedEscapeHandler) return
+  document.removeEventListener('keyup', pinnedEscapeHandler)
+  pinnedEscapeHandler = null
+}
+
+function attachPinnedEscapeListener(name: string) {
+  detachPinnedEscapeListener()
+  pinnedEscapeHandler = (event: KeyboardEvent) => {
+    if (event.key === 'Escape' && pinnedIconName.value === name) {
+      unpinTooltip(name)
+    }
+  }
+  document.addEventListener('keyup', pinnedEscapeHandler)
+}
+
+function removeTooltip(name: string) {
+  const host = buttonHosts.get(name)
+  if (!host?.tooltip) return
+  host.tooltip.remove()
+  delete host.tooltip
+}
+
+function unpinTooltip(name: string) {
+  detachPinnedEscapeListener()
+  detachPinnedInteractionListeners()
+  removeTooltip(name)
+  if (pinnedIconName.value === name) {
+    pinnedIconName.value = null
+  }
+}
+
+async function pinTooltip(name: string) {
+  if (pinnedIconName.value && pinnedIconName.value !== name) {
+    unpinTooltip(pinnedIconName.value)
+  }
+
+  pinnedIconName.value = name
+  await nextTick()
+
+  const tooltip = buttonHosts.get(name)?.tooltip
+  if (!tooltip) return
+
+  // Disable Codex hover/focus hide behaviour; dismiss is handled below.
+  tooltip.removeEventListeners()
+  tooltip.show()
+  attachPinnedInteractionListeners(name)
+  attachPinnedEscapeListener(name)
+}
+
+async function onIconButtonClick(name: string) {
+  if (pinnedIconName.value === name) return
+  await pinTooltip(name)
+}
+
+function onIconButtonMouseEnter(name: string, event: Event) {
+  if (pinnedIconName.value === name) return
+  ;(event.currentTarget as TooltipHost).tooltip?.hide()
+}
+
+watch(iconsOnly, (only) => {
+  if (!only && pinnedIconName.value) {
+    unpinTooltip(pinnedIconName.value)
+  }
+})
+</script>
+
+<template>
+  <PlaygroundSubTabs
+    main-tab-id="icons"
+    :items="iconsSubTabs"
+    default-active="size"
+    ariaLabel="Icons"
+  >
+    <template #default="{ id }">
+      <PlaygroundSection v-if="id === 'size'">
+        <div class="icon-size-list">
+          <div
+            v-for="entry in iconSizeEntries"
+            :key="entry.id"
+            class="icon-size-list__item"
+            :class="{ 'icon-size-list__item--deprecated': entry.deprecated }"
+          >
+            <CdxIcon :icon="cdxIconSearch" :size="entry.id as IconSize" />
+            <code class="icon-size-list__label">{{ entry.id }}</code>
+            <TokenDeprecatedLabel v-if="entry.deprecated" />
+          </div>
+        </div>
+      </PlaygroundSection>
+
+      <PlaygroundSection v-else-if="id === 'type'">
+        <CdxToggleSwitch v-model="iconsOnly" class="icon-catalogue__toggle">
+          Icons only
+        </CdxToggleSwitch>
+        <div
+          class="icon-catalogue"
+          :class="{ 'icon-catalogue--icons-only': iconsOnly }"
+        >
+          <div v-for="[name, icon] in iconEntries" :key="name" class="icon-catalogue__item">
+            <template v-if="!iconsOnly">
+              <span class="icon-catalogue__icon-wrap">
+                <CdxIcon :icon="icon" />
+              </span>
+              <code class="icon-catalogue__name">{{ name }}</code>
+            </template>
+            <CdxButton
+              v-else
+              :ref="(instance) => setButtonHost(name, instance)"
+              v-tooltip="pinnedIconName === name ? name : null"
+              weight="quiet"
+              :aria-label="name"
+              @click="onIconButtonClick(name)"
+              @mouseenter="onIconButtonMouseEnter(name, $event)"
+            >
+              <CdxIcon :icon="icon" aria-hidden="true" />
+            </CdxButton>
+          </div>
+        </div>
+      </PlaygroundSection>
+    </template>
+  </PlaygroundSubTabs>
+</template>
+
+<style scoped>
+.icon-size-list {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: var(--spacing-75);
+}
+
+.icon-size-list__item {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-75);
+}
+
+.icon-size-list__label {
+  font-family: var(--font-family-monospace);
+  font-size: var(--font-size-small);
+  line-height: var(--line-height-small);
+  color: var(--color-subtle);
+}
+
+.icon-size-list__item--deprecated {
+  opacity: 0.7;
+}
+
+.icon-catalogue__toggle {
+  margin-bottom: var(--spacing-100);
+}
+
+.icon-catalogue {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(17.5rem, 1fr));
+  column-gap: var(--spacing-100);
+  row-gap: var(--spacing-35);
+}
+
+.icon-catalogue--icons-only {
+  grid-template-columns: repeat(auto-fill, minmax(2.75rem, 1fr));
+  column-gap: var(--spacing-50);
+  row-gap: var(--spacing-50);
+}
+
+.icon-catalogue__item {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-75);
+  min-width: 0;
+}
+
+.icon-catalogue--icons-only .icon-catalogue__item {
+  justify-content: center;
+}
+
+.icon-catalogue--icons-only :deep(.cdx-tooltip) {
+  user-select: text;
+}
+
+.icon-catalogue__icon-wrap {
+  display: inline-flex;
+  flex-shrink: 0;
+}
+
+.icon-catalogue__name {
+  font-family: var(--font-family-monospace);
+  font-size: var(--font-size-small);
+  line-height: var(--line-height-small);
+  color: var(--color-subtle);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+</style>
diff --git a/src/prototypes/example-codex-kitchen-sink/sections/MediaSection.vue b/src/prototypes/example-codex-kitchen-sink/sections/MediaSection.vue
new file mode 100644
index 00000000..b3764b41
--- /dev/null
+++ b/src/prototypes/example-codex-kitchen-sink/sections/MediaSection.vue
@@ -0,0 +1,51 @@
+<script setup lang="ts">
+import { CdxImage, CdxThumbnail } from '@wikimedia/codex'
+import { cdxIconImage } from '@wikimedia/codex-icons'
+
+import { mediaSubTabs } from '../lib/component-tabs'
+import { imageUrl, thumbnailUrl } from '../lib/fixtures'
+import PlaygroundSection from '../playground/PlaygroundSection.vue'
+import PlaygroundGrid from '../playground/PlaygroundGrid.vue'
+import PlaygroundCell from '../playground/PlaygroundCell.vue'
+import PlaygroundSubTabs from '../playground/PlaygroundSubTabs.vue'
+
+const aspectRatios = ['16:9', '3:2', '4:3', '1:1', '3:4', '2:3'] as const
+</script>
+
+<template>
+  <PlaygroundSubTabs
+    main-tab-id="components-media"
+    :items="mediaSubTabs"
+    default-active="image"
+    ariaLabel="Media"
+  >
+    <template #default="{ id }">
+      <PlaygroundSection v-if="id === 'image'">
+        <PlaygroundGrid min="200px">
+          <PlaygroundCell v-for="ratio in aspectRatios" :key="ratio" :label="ratio">
+            <CdxImage :src="imageUrl" alt="Sample" :aspect-ratio="ratio" />
+          </PlaygroundCell>
+          <PlaygroundCell label="object-fit cover">
+            <CdxImage :src="imageUrl" alt="Sample" aspect-ratio="1:1" object-fit="cover" />
+          </PlaygroundCell>
+          <PlaygroundCell label="object-fit contain">
+            <CdxImage :src="imageUrl" alt="Sample" aspect-ratio="1:1" object-fit="contain" />
+          </PlaygroundCell>
+        </PlaygroundGrid>
+      </PlaygroundSection>
+
+      <PlaygroundSection v-else-if="id === 'thumbnail'">
+        <PlaygroundGrid min="120px">
+          <PlaygroundCell label="image">
+            <CdxThumbnail :thumbnail="{ url: thumbnailUrl, width: 80, height: 80 }" />
+          </PlaygroundCell>
+          <PlaygroundCell label="placeholder">
+            <CdxThumbnail :placeholder-icon="cdxIconImage" />
+          </PlaygroundCell>
+        </PlaygroundGrid>
+      </PlaygroundSection>
+    </template>
+  </PlaygroundSubTabs>
+</template>
+
+<style scoped></style>
diff --git a/src/prototypes/example-codex-kitchen-sink/sections/NavigationSection.vue b/src/prototypes/example-codex-kitchen-sink/sections/NavigationSection.vue
new file mode 100644
index 00000000..8863eb16
--- /dev/null
+++ b/src/prototypes/example-codex-kitchen-sink/sections/NavigationSection.vue
@@ -0,0 +1,136 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { CdxIcon, CdxTab, CdxTabs } from '@wikimedia/codex'
+import { cdxIconLinkExternal } from '@wikimedia/codex-icons'
+
+import { navigationSubTabs } from '../lib/component-tabs'
+import PlaygroundSection from '../playground/PlaygroundSection.vue'
+import PlaygroundGrid from '../playground/PlaygroundGrid.vue'
+import PlaygroundCell from '../playground/PlaygroundCell.vue'
+import PlaygroundSubTabs from '../playground/PlaygroundSubTabs.vue'
+
+const activeTab = ref('article')
+const activeTabFramed = ref('article')
+</script>
+
+<template>
+  <PlaygroundSubTabs
+    main-tab-id="components-navigation"
+    :items="navigationSubTabs"
+    default-active="link"
+    ariaLabel="Navigation"
+  >
+    <template #default="{ id }">
+      <PlaygroundSection v-if="id === 'link'">
+        <PlaygroundGrid min="280px">
+          <PlaygroundCell label="base">
+            <p>
+              The cat (Felis catus) is a
+              <a class="playground-link" href="https://en.wikipedia.org/wiki/Species">domestic species</a>
+              of small
+              <a class="playground-link" href="https://en.wikipedia.org/wiki/Carnivore">carnivorous mammal</a>.
+            </p>
+          </PlaygroundCell>
+          <PlaygroundCell label="underlined">
+            <p>
+              As a
+              <a class="playground-link is-underlined" href="https://en.wikipedia.org/wiki/Predation">predator</a>,
+              it is
+              <a class="playground-link is-underlined" href="https://en.wikipedia.org/wiki/Crepuscular_animal">crepuscular</a>.
+            </p>
+          </PlaygroundCell>
+          <PlaygroundCell label="external">
+            <p>
+              According to
+              <a class="playground-link is-underlined" href="https://example.com">
+                "Living with a Cat"
+                <CdxIcon :icon="cdxIconLinkExternal" />
+              </a>,
+              cats are ready to go to new homes at about 12 weeks of age.
+            </p>
+          </PlaygroundCell>
+          <PlaygroundCell label="red link">
+            <p>
+              Websites for cat lovers include
+              <a class="playground-link is-red-link" href="#">The Catnip Times</a>
+              and
+              <a class="playground-link is-red-link" href="#">Vanggy</a>.
+            </p>
+          </PlaygroundCell>
+        </PlaygroundGrid>
+      </PlaygroundSection>
+
+      <PlaygroundSection v-else-if="id === 'tabs'">
+        <PlaygroundGrid min="280px">
+          <PlaygroundCell label="default">
+            <CdxTabs v-model:active="activeTab">
+              <CdxTab name="article" label="Article">
+                <p>Article</p>
+              </CdxTab>
+              <CdxTab name="talk" label="Talk">
+                <p>Talk</p>
+              </CdxTab>
+              <CdxTab name="history" label="History" disabled>
+                <p>History</p>
+              </CdxTab>
+            </CdxTabs>
+          </PlaygroundCell>
+          <PlaygroundCell label="framed">
+            <CdxTabs v-model:active="activeTabFramed" framed>
+              <CdxTab name="article" label="Article">
+                <p>Article</p>
+              </CdxTab>
+              <CdxTab name="talk" label="Talk">
+                <p>Talk</p>
+              </CdxTab>
+            </CdxTabs>
+          </PlaygroundCell>
+        </PlaygroundGrid>
+      </PlaygroundSection>
+    </template>
+  </PlaygroundSubTabs>
+</template>
+
+<style scoped>
+.playground-link {
+  color: var(--color-link);
+  text-decoration: none;
+}
+
+.playground-link:hover {
+  color: var(--color-link--hover);
+  text-decoration: underline;
+}
+
+.playground-link:visited {
+  color: var(--color-link--visited);
+}
+
+.playground-link:visited:hover {
+  color: var(--color-link--visited--hover);
+}
+
+.playground-link.is-underlined {
+  text-decoration: underline;
+}
+
+.playground-link.is-red-link {
+  color: var(--color-link-red);
+}
+
+.playground-link.is-red-link:hover {
+  color: var(--color-link-red--hover);
+}
+
+.playground-link.is-red-link:visited {
+  color: var(--color-link-red--visited);
+}
+
+.playground-link.is-red-link:visited:hover {
+  color: var(--color-link-red--visited--hover);
+}
+
+.playground-link :deep(.cdx-icon) {
+  color: inherit;
+}
+</style>
diff --git a/src/prototypes/example-codex-kitchen-sink/sections/SearchSection.vue b/src/prototypes/example-codex-kitchen-sink/sections/SearchSection.vue
new file mode 100644
index 00000000..b5d08cde
--- /dev/null
+++ b/src/prototypes/example-codex-kitchen-sink/sections/SearchSection.vue
@@ -0,0 +1,117 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+import { CdxSearchInput, CdxSearchResultTitle, CdxTypeaheadSearch } from '@wikimedia/codex'
+import type { SearchResult } from '@wikimedia/codex'
+
+import { searchSubTabs } from '../lib/component-tabs'
+import { filterTypeaheadSearchResults } from '../lib/fixtures'
+import PlaygroundSection from '../playground/PlaygroundSection.vue'
+import PlaygroundGrid from '../playground/PlaygroundGrid.vue'
+import PlaygroundCell from '../playground/PlaygroundCell.vue'
+import PlaygroundSubTabs from '../playground/PlaygroundSubTabs.vue'
+
+const searchValue = ref('')
+
+const typeaheadInitialQuery = 'Albert'
+
+const defaultTypeaheadQuery = ref(typeaheadInitialQuery)
+const defaultTypeaheadResults = ref<SearchResult[]>(
+  filterTypeaheadSearchResults(typeaheadInitialQuery),
+)
+const buttonTypeaheadQuery = ref(typeaheadInitialQuery)
+const buttonTypeaheadResults = ref<SearchResult[]>(
+  filterTypeaheadSearchResults(typeaheadInitialQuery),
+)
+
+function typeaheadFooterUrl(query: string): string {
+  return `https://en.wikipedia.org/wiki/Special:Search?search=${encodeURIComponent(query)}`
+}
+
+const defaultTypeaheadFooterUrl = computed(() => typeaheadFooterUrl(defaultTypeaheadQuery.value))
+const buttonTypeaheadFooterUrl = computed(() => typeaheadFooterUrl(buttonTypeaheadQuery.value))
+
+function onDefaultTypeaheadInput(value: string) {
+  defaultTypeaheadQuery.value = value
+  defaultTypeaheadResults.value = filterTypeaheadSearchResults(value)
+}
+
+function onButtonTypeaheadInput(value: string) {
+  buttonTypeaheadQuery.value = value
+  buttonTypeaheadResults.value = filterTypeaheadSearchResults(value)
+}
+</script>
+
+<template>
+  <PlaygroundSubTabs
+    main-tab-id="components-search"
+    :items="searchSubTabs"
+    default-active="search-input"
+    ariaLabel="Search"
+  >
+    <template #default="{ id }">
+      <PlaygroundSection v-if="id === 'search-input'">
+        <PlaygroundGrid min="240px">
+          <PlaygroundCell label="default">
+            <CdxSearchInput v-model="searchValue" placeholder="Search" />
+          </PlaygroundCell>
+          <PlaygroundCell label="disabled">
+            <CdxSearchInput model-value="Disabled" disabled />
+          </PlaygroundCell>
+        </PlaygroundGrid>
+      </PlaygroundSection>
+
+      <PlaygroundSection v-else-if="id === 'typeahead-search'">
+        <PlaygroundGrid min="320px">
+          <PlaygroundCell label="default">
+            <CdxTypeaheadSearch
+              id="playground-search"
+              form-action="https://en.wikipedia.org/w/index.php"
+              placeholder="Search Wikipedia"
+              :initial-input-value="typeaheadInitialQuery"
+              :search-results="defaultTypeaheadResults"
+              :search-footer-url="defaultTypeaheadFooterUrl"
+              search-results-label="Search results"
+              @input="onDefaultTypeaheadInput"
+            >
+              <template #search-footer-text="{ searchQuery }">
+                Search Wikipedia for pages containing
+                <strong>{{ searchQuery }}</strong>
+              </template>
+            </CdxTypeaheadSearch>
+          </PlaygroundCell>
+          <PlaygroundCell label="use-button">
+            <CdxTypeaheadSearch
+              id="playground-search-button"
+              form-action="https://en.wikipedia.org/w/index.php"
+              placeholder="Search Wikipedia"
+              :initial-input-value="typeaheadInitialQuery"
+              :search-results="buttonTypeaheadResults"
+              :search-footer-url="buttonTypeaheadFooterUrl"
+              search-results-label="Search results"
+              use-button
+              @input="onButtonTypeaheadInput"
+            >
+              <template #search-footer-text="{ searchQuery }">
+                Search Wikipedia for pages containing
+                <strong>{{ searchQuery }}</strong>
+              </template>
+            </CdxTypeaheadSearch>
+          </PlaygroundCell>
+        </PlaygroundGrid>
+      </PlaygroundSection>
+
+      <PlaygroundSection v-else-if="id === 'search-result-title'">
+        <PlaygroundGrid min="240px">
+          <PlaygroundCell label="with query">
+            <CdxSearchResultTitle title="Albert Einstein" search-query="Albert" />
+          </PlaygroundCell>
+          <PlaygroundCell label="no query">
+            <CdxSearchResultTitle title="Albert Einstein" />
+          </PlaygroundCell>
+        </PlaygroundGrid>
+      </PlaygroundSection>
+    </template>
+  </PlaygroundSubTabs>
+</template>
+
+<style scoped></style>
diff --git a/src/prototypes/example-codex-kitchen-sink/sections/TokenSection.vue b/src/prototypes/example-codex-kitchen-sink/sections/TokenSection.vue
new file mode 100644
index 00000000..7d6f63e0
--- /dev/null
+++ b/src/prototypes/example-codex-kitchen-sink/sections/TokenSection.vue
@@ -0,0 +1,91 @@
+<script setup lang="ts">
+import tokensCss from '../../../../.agents/skills/codex-tokens/assets/tokens.css?raw'
+import {
+  getTokensForTokenSubTab,
+  parseTokensFromCss,
+  tokenSectionTabs,
+} from '../lib/parse-tokens'
+import type { TokenSection, TokenSubTab } from '../lib/parse-tokens'
+import { tokenMainTabBySection } from '../lib/playground-tabs'
+import AnimationTokenList from '../playground/AnimationTokenList.vue'
+import BorderTokenList from '../playground/BorderTokenList.vue'
+import BoxShadowTokenList from '../playground/BoxShadowTokenList.vue'
+import CursorTokenList from '../playground/CursorTokenList.vue'
+import DimensionTokenList from '../playground/DimensionTokenList.vue'
+import OpacityTokenList from '../playground/OpacityTokenList.vue'
+import OutlineTokenList from '../playground/OutlineTokenList.vue'
+import ZIndexTokenList from '../playground/ZIndexTokenList.vue'
+import PlaygroundGrid from '../playground/PlaygroundGrid.vue'
+import PlaygroundSection from '../playground/PlaygroundSection.vue'
+import PlaygroundSubTabs from '../playground/PlaygroundSubTabs.vue'
+import TokenSwatch from '../playground/TokenSwatch.vue'
+
+const props = defineProps<{
+  section: TokenSection
+}>()
+
+const allTokens = parseTokensFromCss(tokensCss)
+
+const sectionConfig = tokenSectionTabs.find((entry) => entry.id === props.section)!
+</script>
+
+<template>
+  <PlaygroundSubTabs
+    :main-tab-id="tokenMainTabBySection[section]"
+    :items="sectionConfig.subTabs"
+    :default-active="sectionConfig.subTabs[0].id"
+    :ariaLabel="`${sectionConfig.label} tokens`"
+  >
+    <template #default="{ id: subTabId }">
+      <PlaygroundSection>
+        <DimensionTokenList
+          v-if="subTabId === 'spacing' || subTabId === 'size' || subTabId === 'breakpoint'"
+          :kind="subTabId"
+          :tokens="
+            getTokensForTokenSubTab(allTokens, section, subTabId as TokenSubTab)
+          "
+        />
+        <ZIndexTokenList
+          v-else-if="subTabId === 'z-index'"
+          :tokens="getTokensForTokenSubTab(allTokens, section, subTabId as TokenSubTab)"
+        />
+        <BorderTokenList
+          v-else-if="subTabId === 'border'"
+          :tokens="getTokensForTokenSubTab(allTokens, section, subTabId as TokenSubTab)"
+        />
+        <BoxShadowTokenList
+          v-else-if="subTabId === 'box-shadow'"
+          :tokens="getTokensForTokenSubTab(allTokens, section, subTabId as TokenSubTab)"
+        />
+        <CursorTokenList
+          v-else-if="subTabId === 'cursor'"
+          :tokens="getTokensForTokenSubTab(allTokens, section, subTabId as TokenSubTab)"
+        />
+        <OpacityTokenList
+          v-else-if="subTabId === 'opacity'"
+          :tokens="getTokensForTokenSubTab(allTokens, section, subTabId as TokenSubTab)"
+        />
+        <OutlineTokenList
+          v-else-if="subTabId === 'outline'"
+          :tokens="getTokensForTokenSubTab(allTokens, section, subTabId as TokenSubTab)"
+        />
+        <AnimationTokenList
+          v-else-if="subTabId === 'animation' || subTabId === 'transition'"
+          :kind="subTabId"
+          :tokens="getTokensForTokenSubTab(allTokens, section, subTabId as TokenSubTab)"
+        />
+        <PlaygroundGrid v-else min="140px" dense>
+          <TokenSwatch
+            v-for="token in getTokensForTokenSubTab(
+              allTokens,
+              section,
+              subTabId as TokenSubTab,
+            )"
+            :key="token.name"
+            :token="token"
+          />
+        </PlaygroundGrid>
+      </PlaygroundSection>
+    </template>
+  </PlaygroundSubTabs>
+</template>
diff --git a/src/prototypes/example-codex-kitchen-sink/sections/TypographySection.vue b/src/prototypes/example-codex-kitchen-sink/sections/TypographySection.vue
new file mode 100644
index 00000000..87f18e4e
--- /dev/null
+++ b/src/prototypes/example-codex-kitchen-sink/sections/TypographySection.vue
@@ -0,0 +1,67 @@
+<script setup lang="ts">
+import tokensCss from '../../../../.agents/skills/codex-tokens/assets/tokens.css?raw'
+import {
+  getTypographyTokensForSubTab,
+  parseTokensFromCss,
+  typographySubTabs,
+} from '../lib/parse-tokens'
+import FontFamilyList from '../playground/FontFamilyList.vue'
+import FontSizeList from '../playground/FontSizeList.vue'
+import FontWeightList from '../playground/FontWeightList.vue'
+import LineHeightList from '../playground/LineHeightList.vue'
+import PlaygroundSection from '../playground/PlaygroundSection.vue'
+import PlaygroundSubTabs from '../playground/PlaygroundSubTabs.vue'
+import TextDecorationList from '../playground/TextDecorationList.vue'
+import TextOverflowList from '../playground/TextOverflowList.vue'
+
+const allTokens = parseTokensFromCss(tokensCss)
+</script>
+
+<template>
+  <PlaygroundSubTabs
+    main-tab-id="typography"
+    :items="typographySubTabs"
+    default-active="style"
+    ariaLabel="Typography"
+  >
+    <template #default="{ id }">
+      <PlaygroundSection v-if="id === 'style'">
+        <h1>Heading 1</h1>
+        <h2>Heading 2</h2>
+        <h3>Heading 3</h3>
+        <h4>Heading 4</h4>
+        <p>Body</p>
+        <p><small>Small</small></p>
+        <p><cite>Cite</cite></p>
+        <figcaption>Figure caption</figcaption>
+        <p><code>Code</code></p>
+        <blockquote>Block quote</blockquote>
+        <pre>Pre</pre>
+      </PlaygroundSection>
+
+      <PlaygroundSection v-else-if="id === 'font'">
+        <FontFamilyList :tokens="getTypographyTokensForSubTab(allTokens, 'font')" />
+      </PlaygroundSection>
+
+      <PlaygroundSection v-else-if="id === 'size'">
+        <FontSizeList :tokens="getTypographyTokensForSubTab(allTokens, 'size')" />
+      </PlaygroundSection>
+
+      <PlaygroundSection v-else-if="id === 'weight'">
+        <FontWeightList :tokens="getTypographyTokensForSubTab(allTokens, 'weight')" />
+      </PlaygroundSection>
+
+      <PlaygroundSection v-else-if="id === 'line-height'">
+        <LineHeightList :tokens="getTypographyTokensForSubTab(allTokens, 'line-height')" />
+      </PlaygroundSection>
+
+      <PlaygroundSection v-else-if="id === 'decoration'">
+        <TextDecorationList :tokens="getTypographyTokensForSubTab(allTokens, 'decoration')" />
+      </PlaygroundSection>
+
+      <PlaygroundSection v-else-if="id === 'overflow'">
+        <TextOverflowList :tokens="getTypographyTokensForSubTab(allTokens, 'overflow')" />
+      </PlaygroundSection>
+    </template>
+  </PlaygroundSubTabs>
+</template>