diff --git a/.gitignore b/.gitignore
index 8b3285e00..a409e24fd 100644
--- a/.gitignore
+++ b/.gitignore
@@ -41,4 +41,6 @@ docs/content/docs/components/*.md
 coverage
 .nyc_output
 
-cypress/screenshots
\ No newline at end of file
+cypress/screenshots
+
+.tmp-screenshots
diff --git a/components.d.ts b/components.d.ts
index ae3256f80..2f855fa3d 100644
--- a/components.d.ts
+++ b/components.d.ts
@@ -62,6 +62,7 @@ declare module 'vue' {
     FormLabel: typeof import('./src/components/FormLabel.vue')['default']
     FrappeUIProvider: typeof import('./src/components/Provider/FrappeUIProvider.vue')['default']
     FunnelChart: typeof import('./src/components/Charts/FunnelChart.vue')['default']
+    Icon: typeof import('./src/components/Icon/Icon.vue')['default']
     IframeNodeView: typeof import('./src/components/TextEditor/extensions/iframe/IframeNodeView.vue')['default']
     ImageGroupNodeView: typeof import('./src/components/TextEditor/extensions/image-group/ImageGroupNodeView.vue')['default']
     ImageGroupUploadDialog: typeof import('./src/components/TextEditor/extensions/image-group/ImageGroupUploadDialog.vue')['default']
@@ -109,6 +110,7 @@ declare module 'vue' {
     OptionIcon: typeof import('./src/components/shared/selection/OptionIcon.vue')['default']
     Password: typeof import('./src/components/Password/Password.vue')['default']
     PickerShell: typeof import('./src/components/shared/picker/PickerShell.vue')['default']
+    Pill: typeof import('./src/components/Pill/Pill.vue')['default']
     Popover: typeof import('./src/components/Popover/Popover.vue')['default']
     Progress: typeof import('./src/components/Progress/Progress.vue')['default']
     Rating: typeof import('./src/components/Rating/Rating.vue')['default']
@@ -129,7 +131,6 @@ declare module 'vue' {
     SuggestionList: typeof import('./src/components/TextEditor/extensions/suggestion/SuggestionList.vue')['default']
     Switch: typeof import('./src/components/Switch/Switch.vue')['default']
     TabButtons: typeof import('./src/components/TabButtons/TabButtons.vue')['default']
-    'TabButtons.story': typeof import('./src/components/TabButtons/TabButtons.story.vue')['default']
     Tabs: typeof import('./src/components/Tabs/Tabs.vue')['default']
     Textarea: typeof import('./src/components/Textarea/Textarea.vue')['default']
     TextEditor: typeof import('./src/components/TextEditor/TextEditor.vue')['default']
diff --git a/docs/.vitepress/config.ts b/docs/.vitepress/config.ts
index 254455a8b..8be13d9c3 100644
--- a/docs/.vitepress/config.ts
+++ b/docs/.vitepress/config.ts
@@ -60,7 +60,10 @@ export default defineConfig({
       dark: 'tokyo-night',
       light: 'github-light',
     },
-    codeTransformers: [toClass],
+    // transformerStyleToClass flushes its CSS only at buildEnd, so in dev
+    // the generated shiki.css stays empty and code blocks lose colors —
+    // skip it in dev and let shiki emit inline --shiki-light/dark styles.
+    codeTransformers: isDev ? [] : [toClass],
     config(md) {
       md.use(componentTransformer)
     },
diff --git a/docs/.vitepress/theme/index.ts b/docs/.vitepress/theme/index.ts
index 5d47ce4bf..d56e5e882 100644
--- a/docs/.vitepress/theme/index.ts
+++ b/docs/.vitepress/theme/index.ts
@@ -1,8 +1,33 @@
 import type { Theme } from 'vitepress'
-import "../../../src/fonts/Inter/inter.css"
-import "../../css/style.css"
-import "../../css/shiki.css"
+import '../../../src/fonts/Inter/inter.css'
+import '../../css/style.css'
+import '../../css/shiki.css'
 import Demo from '../../components/Docs/Demo.vue'
+import ButtonBuilder from '../../components/Docs/ButtonBuilder.vue'
+import BadgeBuilder from '../../components/Docs/BadgeBuilder.vue'
+import PillBuilder from '../../components/Docs/PillBuilder.vue'
+import TabButtonsBuilder from '../../components/Docs/TabButtonsBuilder.vue'
+import AlertBuilder from '../../components/Docs/AlertBuilder.vue'
+import AvatarBuilder from '../../components/Docs/AvatarBuilder.vue'
+import BreadcrumbsBuilder from '../../components/Docs/BreadcrumbsBuilder.vue'
+import CheckboxBuilder from '../../components/Docs/CheckboxBuilder.vue'
+import ComboboxBuilder from '../../components/Docs/ComboboxBuilder.vue'
+import DialogBuilder from '../../components/Docs/DialogBuilder.vue'
+import DividerBuilder from '../../components/Docs/DividerBuilder.vue'
+import DropdownBuilder from '../../components/Docs/DropdownBuilder.vue'
+import ErrorMessageBuilder from '../../components/Docs/ErrorMessageBuilder.vue'
+import FormControlBuilder from '../../components/Docs/FormControlBuilder.vue'
+import MultiSelectBuilder from '../../components/Docs/MultiSelectBuilder.vue'
+import PasswordBuilder from '../../components/Docs/PasswordBuilder.vue'
+import ProgressBuilder from '../../components/Docs/ProgressBuilder.vue'
+import RatingBuilder from '../../components/Docs/RatingBuilder.vue'
+import SelectBuilder from '../../components/Docs/SelectBuilder.vue'
+import SliderBuilder from '../../components/Docs/SliderBuilder.vue'
+import SwitchBuilder from '../../components/Docs/SwitchBuilder.vue'
+import TabsBuilder from '../../components/Docs/TabsBuilder.vue'
+import TextInputBuilder from '../../components/Docs/TextInputBuilder.vue'
+import TextareaBuilder from '../../components/Docs/TextareaBuilder.vue'
+import TooltipBuilder from '../../components/Docs/TooltipBuilder.vue'
 import Layout from '../../components/Layout.vue'
 
 if (process.env.NODE_ENV === 'production') {
@@ -10,8 +35,33 @@ if (process.env.NODE_ENV === 'production') {
 }
 
 export default {
-	Layout,
+  Layout,
   enhanceApp({ app, router, siteData }) {
     app.component('ComponentPreview', Demo)
+    app.component('ButtonBuilder', ButtonBuilder)
+    app.component('BadgeBuilder', BadgeBuilder)
+    app.component('PillBuilder', PillBuilder)
+    app.component('TabButtonsBuilder', TabButtonsBuilder)
+    app.component('AlertBuilder', AlertBuilder)
+    app.component('AvatarBuilder', AvatarBuilder)
+    app.component('BreadcrumbsBuilder', BreadcrumbsBuilder)
+    app.component('CheckboxBuilder', CheckboxBuilder)
+    app.component('ComboboxBuilder', ComboboxBuilder)
+    app.component('DialogBuilder', DialogBuilder)
+    app.component('DividerBuilder', DividerBuilder)
+    app.component('DropdownBuilder', DropdownBuilder)
+    app.component('ErrorMessageBuilder', ErrorMessageBuilder)
+    app.component('FormControlBuilder', FormControlBuilder)
+    app.component('MultiSelectBuilder', MultiSelectBuilder)
+    app.component('PasswordBuilder', PasswordBuilder)
+    app.component('ProgressBuilder', ProgressBuilder)
+    app.component('RatingBuilder', RatingBuilder)
+    app.component('SelectBuilder', SelectBuilder)
+    app.component('SliderBuilder', SliderBuilder)
+    app.component('SwitchBuilder', SwitchBuilder)
+    app.component('TabsBuilder', TabsBuilder)
+    app.component('TextInputBuilder', TextInputBuilder)
+    app.component('TextareaBuilder', TextareaBuilder)
+    app.component('TooltipBuilder', TooltipBuilder)
   },
 } satisfies Theme
diff --git a/docs/components/Docs/AlertBuilder.vue b/docs/components/Docs/AlertBuilder.vue
new file mode 100644
index 000000000..f54e27897
--- /dev/null
+++ b/docs/components/Docs/AlertBuilder.vue
@@ -0,0 +1,61 @@
+<script setup lang="ts">
+import { Alert } from 'frappe-ui'
+import ComponentPlayground, { type Knob } from './ComponentPlayground.vue'
+
+const knobs: Knob[] = [
+  { name: 'title', type: 'text', default: 'Heads up', width: '14rem' },
+  {
+    name: 'description',
+    type: 'text',
+    default: 'You can dismiss this alert.',
+    width: '20rem',
+  },
+  {
+    name: 'theme',
+    type: 'tabs',
+    default: 'blue',
+    options: [
+      { label: 'none', value: 'none' },
+      { label: 'yellow', value: 'yellow' },
+      { label: 'blue', value: 'blue' },
+      { label: 'green', value: 'green' },
+      { label: 'red', value: 'red' },
+    ],
+  },
+  {
+    name: 'variant',
+    type: 'tabs',
+    default: 'subtle',
+    options: [
+      { label: 'subtle', value: 'subtle' },
+      { label: 'outline', value: 'outline' },
+    ],
+  },
+  { name: 'dismissible', type: 'switch', default: true },
+]
+
+function buildCode(v: Record<string, any>) {
+  const attrs = [`title="${v.title}"`]
+  if (v.description) attrs.push(`description="${v.description}"`)
+  if (v.theme !== 'none') attrs.push(`theme="${v.theme}"`)
+  if (v.variant !== 'subtle') attrs.push(`variant="${v.variant}"`)
+  if (!v.dismissible) attrs.push(':dismissible="false"')
+  return ['<Alert', ...attrs.map((a) => '  ' + a), '/>'].join('\n')
+}
+</script>
+
+<template>
+  <ComponentPlayground :knobs="knobs" :code="buildCode" preview-min-height="120px">
+    <template #preview="{ values }">
+      <div class="w-full max-w-md">
+        <Alert
+          :title="values.title"
+          :description="values.description || undefined"
+          :theme="values.theme === 'none' ? undefined : values.theme"
+          :variant="values.variant"
+          :dismissible="values.dismissible"
+        />
+      </div>
+    </template>
+  </ComponentPlayground>
+</template>
diff --git a/docs/components/Docs/AvatarBuilder.vue b/docs/components/Docs/AvatarBuilder.vue
new file mode 100644
index 000000000..dff2932d2
--- /dev/null
+++ b/docs/components/Docs/AvatarBuilder.vue
@@ -0,0 +1,53 @@
+<script setup lang="ts">
+import { Avatar } from 'frappe-ui'
+import ComponentPlayground, { type Knob } from './ComponentPlayground.vue'
+
+const knobs: Knob[] = [
+  { name: 'label', type: 'text', default: 'John Doe', width: '12rem' },
+  { name: 'image', type: 'text', default: '', width: '20rem' },
+  {
+    name: 'size',
+    type: 'tabs',
+    default: 'md',
+    options: [
+      { label: 'xs', value: 'xs' },
+      { label: 'sm', value: 'sm' },
+      { label: 'md', value: 'md' },
+      { label: 'lg', value: 'lg' },
+      { label: 'xl', value: 'xl' },
+      { label: '2xl', value: '2xl' },
+      { label: '3xl', value: '3xl' },
+    ],
+  },
+  {
+    name: 'shape',
+    type: 'tabs',
+    default: 'circle',
+    options: [
+      { label: 'circle', value: 'circle' },
+      { label: 'square', value: 'square' },
+    ],
+  },
+]
+
+function buildCode(v: Record<string, any>) {
+  const attrs = [`label="${v.label}"`]
+  if (v.image) attrs.push(`image="${v.image}"`)
+  if (v.size !== 'md') attrs.push(`size="${v.size}"`)
+  if (v.shape !== 'circle') attrs.push(`shape="${v.shape}"`)
+  return ['<Avatar', ...attrs.map((a) => '  ' + a), '/>'].join('\n')
+}
+</script>
+
+<template>
+  <ComponentPlayground :knobs="knobs" :code="buildCode" preview-min-height="120px">
+    <template #preview="{ values }">
+      <Avatar
+        :label="values.label"
+        :image="values.image || undefined"
+        :size="values.size"
+        :shape="values.shape"
+      />
+    </template>
+  </ComponentPlayground>
+</template>
diff --git a/docs/components/Docs/BadgeBuilder.vue b/docs/components/Docs/BadgeBuilder.vue
new file mode 100644
index 000000000..68b1699e5
--- /dev/null
+++ b/docs/components/Docs/BadgeBuilder.vue
@@ -0,0 +1,79 @@
+<script setup lang="ts">
+import { Badge } from 'frappe-ui'
+import ComponentPlayground, { type Knob } from './ComponentPlayground.vue'
+
+const knobs: Knob[] = [
+  { name: 'label', type: 'text', default: 'Gamma' },
+  {
+    name: 'variant',
+    type: 'tabs',
+    default: 'solid',
+    options: [
+      { label: 'solid', value: 'solid' },
+      { label: 'subtle', value: 'subtle' },
+      { label: 'outline', value: 'outline' },
+      { label: 'ghost', value: 'ghost' },
+    ],
+  },
+  {
+    name: 'theme',
+    type: 'tabs',
+    default: 'green',
+    options: [
+      { label: 'gray', value: 'gray' },
+      { label: 'blue', value: 'blue' },
+      { label: 'green', value: 'green' },
+      { label: 'amber', value: 'amber' },
+      { label: 'red', value: 'red' },
+      { label: 'violet', value: 'violet' },
+    ],
+  },
+  {
+    name: 'size',
+    type: 'tabs',
+    default: 'lg',
+    options: [
+      { label: 'sm', value: 'sm' },
+      { label: 'md', value: 'md' },
+      { label: 'lg', value: 'lg' },
+    ],
+  },
+  { name: 'prefix', type: 'switch', default: true },
+  { name: 'suffix', type: 'switch', default: false },
+]
+
+function buildCode(v: Record<string, any>) {
+  const attrs = [
+    `variant="${v.variant}"`,
+    `theme="${v.theme}"`,
+    `size="${v.size}"`,
+  ]
+  const slots: string[] = []
+  if (v.prefix) {
+    slots.push('  <template #prefix><span class="lucide-check" /></template>')
+  }
+  slots.push(`  ${v.label}`)
+  if (v.suffix) {
+    slots.push(
+      '  <template #suffix><span class="lucide-chevron-down" /></template>',
+    )
+  }
+  return ['<Badge', ...attrs.map((a) => '  ' + a), '>', ...slots, '</Badge>'].join('\n')
+}
+</script>
+
+<template>
+  <ComponentPlayground :knobs="knobs" :code="buildCode">
+    <template #preview="{ values }">
+      <Badge :theme="values.theme" :variant="values.variant" :size="values.size">
+        <template v-if="values.prefix" #prefix>
+          <span class="lucide-check" />
+        </template>
+        {{ values.label }}
+        <template v-if="values.suffix" #suffix>
+          <span class="lucide-chevron-down" />
+        </template>
+      </Badge>
+    </template>
+  </ComponentPlayground>
+</template>
diff --git a/docs/components/Docs/BreadcrumbsBuilder.vue b/docs/components/Docs/BreadcrumbsBuilder.vue
new file mode 100644
index 000000000..98f560972
--- /dev/null
+++ b/docs/components/Docs/BreadcrumbsBuilder.vue
@@ -0,0 +1,48 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { Breadcrumbs } from 'frappe-ui'
+import ComponentPlayground, { type Knob } from './ComponentPlayground.vue'
+
+const allItems = [
+  { label: 'Workspace' },
+  { label: 'Projects' },
+  { label: 'Frappe UI' },
+  { label: 'Pull Requests' },
+  { label: '#716' },
+]
+
+const knobs: Knob[] = [
+  {
+    name: 'count',
+    type: 'tabs',
+    default: '3',
+    options: [
+      { label: '2', value: '2' },
+      { label: '3', value: '3' },
+      { label: '4', value: '4' },
+      { label: '5', value: '5' },
+    ],
+  },
+]
+
+function itemsFor(count: number) {
+  return allItems.slice(0, count)
+}
+
+function buildCode(v: Record<string, any>) {
+  const count = Number(v.count)
+  const items = itemsFor(count)
+  const lines = items
+    .map((i) => `    { label: '${i.label}' },`)
+    .join('\n')
+  return `<Breadcrumbs :items="[\n${lines}\n  ]" />`
+}
+</script>
+
+<template>
+  <ComponentPlayground :knobs="knobs" :code="buildCode" preview-min-height="80px">
+    <template #preview="{ values }">
+      <Breadcrumbs :items="itemsFor(Number(values.count))" />
+    </template>
+  </ComponentPlayground>
+</template>
diff --git a/docs/components/Docs/ButtonBuilder.vue b/docs/components/Docs/ButtonBuilder.vue
new file mode 100644
index 000000000..050d08bf4
--- /dev/null
+++ b/docs/components/Docs/ButtonBuilder.vue
@@ -0,0 +1,95 @@
+<script setup lang="ts">
+import { Button } from 'frappe-ui'
+import ComponentPlayground, { type Knob } from './ComponentPlayground.vue'
+
+const knobs: Knob[] = [
+  { name: 'label', type: 'text', default: 'Save' },
+  {
+    name: 'variant',
+    type: 'tabs',
+    default: 'subtle',
+    options: [
+      { label: 'solid', value: 'solid' },
+      { label: 'subtle', value: 'subtle' },
+      { label: 'outline', value: 'outline' },
+      { label: 'ghost', value: 'ghost' },
+    ],
+  },
+  {
+    name: 'theme',
+    type: 'tabs',
+    default: 'gray',
+    options: [
+      { label: 'gray', value: 'gray' },
+      { label: 'red', value: 'red' },
+    ],
+  },
+  {
+    name: 'size',
+    type: 'tabs',
+    default: 'sm',
+    options: [
+      { label: 'xs', value: 'xs' },
+      { label: 'sm', value: 'sm' },
+      { label: 'md', value: 'md' },
+      { label: 'lg', value: 'lg' },
+    ],
+  },
+  {
+    name: 'iconLeft',
+    type: 'switch',
+    default: false,
+    disabledWhen: (v) => v.icon,
+  },
+  { name: 'icon', type: 'switch', default: false },
+  {
+    name: 'iconRight',
+    type: 'switch',
+    default: false,
+    disabledWhen: (v) => v.icon,
+  },
+  { name: 'disabled', type: 'switch', default: false },
+  { name: 'loading', type: 'switch', default: false },
+]
+
+function buildCode(v: Record<string, any>) {
+  const attrs = [
+    `variant="${v.variant}"`,
+    `theme="${v.theme}"`,
+    `size="${v.size}"`,
+    `label="${v.label}"`,
+  ]
+  if (v.icon) {
+    attrs.push(`icon="lucide-plus"`)
+  } else {
+    if (v.iconLeft) attrs.push(`icon-left="lucide-plus"`)
+    if (v.iconRight) attrs.push(`icon-right="lucide-chevron-right"`)
+  }
+  if (v.disabled) attrs.push('disabled')
+  if (v.loading) attrs.push('loading')
+
+  return ['<Button', ...attrs.map((a) => '  ' + a), '/>'].join('\n')
+}
+</script>
+
+<template>
+  <ComponentPlayground :knobs="knobs" :code="buildCode">
+    <template #preview="{ values }">
+      <Button
+        :theme="values.theme"
+        :variant="values.variant"
+        :size="values.size"
+        :label="values.label"
+        :icon-left="
+          !values.icon && values.iconLeft ? 'lucide-plus' : undefined
+        "
+        :icon="values.icon ? 'lucide-plus' : undefined"
+        :icon-right="
+          !values.icon && values.iconRight ? 'lucide-chevron-right' : undefined
+        "
+        :loading="values.loading"
+        :disabled="values.disabled"
+      />
+    </template>
+  </ComponentPlayground>
+</template>
diff --git a/docs/components/Docs/CheckboxBuilder.vue b/docs/components/Docs/CheckboxBuilder.vue
new file mode 100644
index 000000000..0fffce79f
--- /dev/null
+++ b/docs/components/Docs/CheckboxBuilder.vue
@@ -0,0 +1,49 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { Checkbox } from 'frappe-ui'
+import ComponentPlayground, { type Knob } from './ComponentPlayground.vue'
+
+const model = ref<boolean>(true)
+
+const knobs: Knob[] = [
+  { name: 'label', type: 'text', default: 'I agree', width: '14rem' },
+  { name: 'description', type: 'text', default: '', width: '20rem' },
+  {
+    name: 'size',
+    type: 'tabs',
+    default: 'sm',
+    options: [
+      { label: 'sm', value: 'sm' },
+      { label: 'md', value: 'md' },
+    ],
+  },
+  { name: 'required', type: 'switch', default: false },
+  { name: 'disabled', type: 'switch', default: false },
+]
+
+function buildCode(v: Record<string, any>) {
+  const attrs = []
+  if (v.label) attrs.push(`label="${v.label}"`)
+  if (v.description) attrs.push(`description="${v.description}"`)
+  if (v.size !== 'sm') attrs.push(`size="${v.size}"`)
+  if (v.required) attrs.push('required')
+  if (v.disabled) attrs.push('disabled')
+  attrs.push('v-model="value"')
+  return ['<Checkbox', ...attrs.map((a) => '  ' + a), '/>'].join('\n')
+}
+</script>
+
+<template>
+  <ComponentPlayground :knobs="knobs" :code="buildCode" preview-min-height="120px">
+    <template #preview="{ values }">
+      <Checkbox
+        v-model="model"
+        :label="values.label || undefined"
+        :description="values.description || undefined"
+        :size="values.size"
+        :required="values.required"
+        :disabled="values.disabled"
+      />
+    </template>
+  </ComponentPlayground>
+</template>
diff --git a/docs/components/Docs/ComboboxBuilder.vue b/docs/components/Docs/ComboboxBuilder.vue
new file mode 100644
index 000000000..273258a39
--- /dev/null
+++ b/docs/components/Docs/ComboboxBuilder.vue
@@ -0,0 +1,86 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { Combobox } from 'frappe-ui'
+import ComponentPlayground, { type Knob } from './ComponentPlayground.vue'
+
+const model = ref<string>('')
+
+const options = [
+  { label: 'Backlog', value: 'backlog' },
+  { label: 'In progress', value: 'in_progress' },
+  { label: 'Review', value: 'review' },
+  { label: 'Done', value: 'done' },
+  { label: 'Archived', value: 'archived' },
+]
+
+const knobs: Knob[] = [
+  { name: 'label', type: 'text', default: 'Status', width: '12rem' },
+  { name: 'placeholder', type: 'text', default: 'Pick or search…', width: '16rem' },
+  {
+    name: 'trigger',
+    type: 'tabs',
+    default: 'input',
+    options: [
+      { label: 'input', value: 'input' },
+      { label: 'button', value: 'button' },
+    ],
+  },
+  {
+    name: 'size',
+    type: 'tabs',
+    default: 'sm',
+    options: [
+      { label: 'sm', value: 'sm' },
+      { label: 'md', value: 'md' },
+      { label: 'lg', value: 'lg' },
+      { label: 'xl', value: 'xl' },
+    ],
+  },
+  {
+    name: 'variant',
+    type: 'tabs',
+    default: 'subtle',
+    options: [
+      { label: 'subtle', value: 'subtle' },
+      { label: 'outline', value: 'outline' },
+      { label: 'ghost', value: 'ghost' },
+    ],
+  },
+  { name: 'required', type: 'switch', default: false },
+  { name: 'disabled', type: 'switch', default: false },
+]
+
+function buildCode(v: Record<string, any>) {
+  const attrs = []
+  if (v.label) attrs.push(`label="${v.label}"`)
+  if (v.placeholder) attrs.push(`placeholder="${v.placeholder}"`)
+  if (v.trigger !== 'input') attrs.push(`trigger="${v.trigger}"`)
+  if (v.size !== 'sm') attrs.push(`size="${v.size}"`)
+  if (v.variant !== 'subtle') attrs.push(`variant="${v.variant}"`)
+  if (v.required) attrs.push('required')
+  if (v.disabled) attrs.push('disabled')
+  attrs.push(':options="options"')
+  attrs.push('v-model="value"')
+  return ['<Combobox', ...attrs.map((a) => '  ' + a), '/>'].join('\n')
+}
+</script>
+
+<template>
+  <ComponentPlayground :knobs="knobs" :code="buildCode" preview-min-height="160px">
+    <template #preview="{ values }">
+      <div class="w-full max-w-sm">
+        <Combobox
+          v-model="model"
+          :label="values.label || undefined"
+          :placeholder="values.placeholder || undefined"
+          :trigger="values.trigger"
+          :size="values.size"
+          :variant="values.variant"
+          :required="values.required"
+          :disabled="values.disabled"
+          :options="options"
+        />
+      </div>
+    </template>
+  </ComponentPlayground>
+</template>
diff --git a/docs/components/Docs/ComponentPlayground.vue b/docs/components/Docs/ComponentPlayground.vue
new file mode 100644
index 000000000..87637cd3f
--- /dev/null
+++ b/docs/components/Docs/ComponentPlayground.vue
@@ -0,0 +1,175 @@
+<script setup lang="ts">
+import { computed, reactive, ref, shallowRef, watchEffect } from 'vue'
+import { Switch, TabButtons } from 'frappe-ui'
+
+export type KnobOption = { label: string; value: string }
+export type Knob =
+  | { name: string; type: 'text'; default: string; width?: string }
+  | {
+      name: string
+      type: 'tabs'
+      options: KnobOption[]
+      default: string
+    }
+  | {
+      name: string
+      type: 'switch'
+      default: boolean
+      disabledWhen?: (values: Record<string, any>) => boolean
+    }
+
+const props = withDefaults(
+  defineProps<{
+    knobs: Knob[]
+    code: (values: Record<string, any>) => string
+    previewMinHeight?: string
+  }>(),
+  {
+    previewMinHeight: '200px',
+  },
+)
+
+const values = reactive<Record<string, any>>(
+  Object.fromEntries(props.knobs.map((k) => [k.name, k.default])),
+)
+
+const rowKnobs = props.knobs.filter(
+  (k) => k.type === 'text' || k.type === 'tabs',
+)
+const switchKnobs = props.knobs.filter((k) => k.type === 'switch') as Extract<
+  Knob,
+  { type: 'switch' }
+>[]
+
+const generatedCode = computed(() => props.code(values))
+
+const highlighter = shallowRef<any>(null)
+let highlighterPromise: Promise<any> | null = null
+function ensureHighlighter() {
+  if (highlighter.value) return
+  if (!highlighterPromise) {
+    highlighterPromise = import('shiki').then((shiki) =>
+      shiki.createHighlighter({
+        themes: ['tokyo-night', 'github-light'],
+        langs: ['vue'],
+      }),
+    )
+  }
+  highlighterPromise.then((h) => {
+    highlighter.value = h
+  })
+}
+
+const highlightedCode = ref<string | null>(null)
+watchEffect(() => {
+  if (typeof window === 'undefined') return
+  ensureHighlighter()
+  const h = highlighter.value
+  if (!h) {
+    highlightedCode.value = null
+    return
+  }
+  // `defaultColor: false` makes Shiki emit both themes as CSS variables
+  // (`--shiki-light` / `--shiki-dark`) with no inline color, so the
+  // `[data-theme="dark"] .shiki span` rule in docs/css/style.css can flip
+  // tokens at runtime. Without it, the light theme bakes into `style=`
+  // attributes and wins over the dark override.
+  highlightedCode.value = h.codeToHtml(generatedCode.value, {
+    lang: 'vue',
+    themes: { light: 'github-light', dark: 'tokyo-night' },
+    defaultColor: false,
+  })
+})
+
+const copied = ref(false)
+function onCopy() {
+  navigator.clipboard?.writeText(generatedCode.value)
+  copied.value = true
+  setTimeout(() => (copied.value = false), 1200)
+}
+</script>
+
+<template>
+  <div class="not-prose">
+    <div
+      class="overflow-hidden rounded-xl border border-outline-gray-1 divide-y divide-outline-gray-1"
+    >
+      <div
+        class="flex items-center justify-center bg-surface-base p-8 dot-grid"
+        :style="{ minHeight: previewMinHeight }"
+      >
+        <slot name="preview" :values="values" />
+      </div>
+
+      <div class="flex flex-col gap-3 bg-surface-gray-1 p-4">
+        <div v-for="knob in rowKnobs" :key="knob.name" class="knob-row">
+          <span class="knob-label">{{ knob.name }}</span>
+          <input
+            v-if="knob.type === 'text'"
+            v-model="values[knob.name]"
+            type="text"
+            class="h-7 rounded-md border border-outline-gray-2 bg-surface-base px-2 text-sm text-ink-gray-8 focus:border-outline-gray-3 focus:outline-none"
+            :style="{ width: knob.width ?? '10rem' }"
+          />
+          <TabButtons
+            v-else-if="knob.type === 'tabs'"
+            v-model="values[knob.name]"
+            :options="knob.options"
+          />
+        </div>
+        <div v-if="switchKnobs.length" class="flex flex-wrap items-center gap-6">
+          <div
+            v-for="knob in switchKnobs"
+            :key="knob.name"
+            class="flex items-center gap-2"
+          >
+            <span class="knob-label">{{ knob.name }}</span>
+            <Switch
+              v-model="values[knob.name]"
+              :disabled="knob.disabledWhen?.(values) ?? false"
+            />
+          </div>
+        </div>
+      </div>
+
+      <div class="component-preview-code relative">
+        <div v-if="highlightedCode" v-html="highlightedCode" />
+        <pre
+          v-else
+          class="shiki"
+        ><code>{{ generatedCode }}</code></pre>
+        <button
+          type="button"
+          class="copy"
+          :class="{ copied }"
+          :title="copied ? 'Copied' : 'Copy Code'"
+          @click="onCopy"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.knob-row {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+}
+.knob-label {
+  display: inline-block;
+  width: 96px;
+  flex-shrink: 0;
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-size: 13px;
+  color: var(--p-color-ink-gray-6, #7c7c7c);
+}
+.dot-grid {
+  background-image: radial-gradient(
+    circle,
+    rgba(0, 0, 0, 0.08) 1px,
+    transparent 1px
+  );
+  background-size: 14px 14px;
+}
+</style>
diff --git a/docs/components/Docs/Demo.vue b/docs/components/Docs/Demo.vue
index 4685063f6..2ca5928e1 100644
--- a/docs/components/Docs/Demo.vue
+++ b/docs/components/Docs/Demo.vue
@@ -26,7 +26,7 @@ const isEditorDemo = computed(() => props.name?.startsWith('Editor'))
       <div
         :class="[
           isEditorDemo ? '' : 'not-prose',
-          'bg-surface-white p-4 sm:p-8 overflow-x-auto scrollbar flex flex-wrap gap-3 items-center justify-center min-h-[200px]',
+          'bg-surface-base p-4 sm:p-8 overflow-x-auto scrollbar flex flex-wrap gap-3 items-center justify-center min-h-[200px]',
         ]"
       >
         <slot />
@@ -45,7 +45,7 @@ const isEditorDemo = computed(() => props.name?.startsWith('Editor'))
 
         <div
           v-if="!expanded"
-          class="pointer-events-none absolute inset-0 bg-gradient-to-t from-surface-gray-1 via-surface-gray-1/70 dark:from-surface-white dark:via-surface-white/70 to-transparent"
+          class="pointer-events-none absolute inset-0 bg-gradient-to-t from-surface-gray-1 via-surface-gray-1/70 dark:from-surface-base dark:via-surface-base/70 to-transparent"
         />
 
         <div
diff --git a/docs/components/Docs/DialogBuilder.vue b/docs/components/Docs/DialogBuilder.vue
new file mode 100644
index 000000000..b1138cf3c
--- /dev/null
+++ b/docs/components/Docs/DialogBuilder.vue
@@ -0,0 +1,86 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { Dialog, Button } from 'frappe-ui'
+import ComponentPlayground, { type Knob } from './ComponentPlayground.vue'
+
+const open = ref(false)
+
+const knobs: Knob[] = [
+  { name: 'title', type: 'text', default: 'Delete project', width: '14rem' },
+  {
+    name: 'message',
+    type: 'text',
+    default: 'This will permanently remove the project. This action cannot be undone.',
+    width: '22rem',
+  },
+  {
+    name: 'size',
+    type: 'tabs',
+    default: 'lg',
+    options: [
+      { label: 'sm', value: 'sm' },
+      { label: 'md', value: 'md' },
+      { label: 'lg', value: 'lg' },
+      { label: 'xl', value: 'xl' },
+      { label: '2xl', value: '2xl' },
+    ],
+  },
+  {
+    name: 'position',
+    type: 'tabs',
+    default: 'center',
+    options: [
+      { label: 'center', value: 'center' },
+      { label: 'top', value: 'top' },
+    ],
+  },
+  { name: 'icon', type: 'switch', default: false },
+  { name: 'actions', type: 'switch', default: true },
+  { name: 'dismissible', type: 'switch', default: true },
+  { name: 'showCloseButton', type: 'switch', default: true },
+]
+
+function buildCode(v: Record<string, any>) {
+  const attrs: string[] = [`title="${v.title}"`, `message="${v.message}"`]
+  if (v.size !== 'lg') attrs.push(`size="${v.size}"`)
+  if (v.position !== 'center') attrs.push(`position="${v.position}"`)
+  if (v.icon) attrs.push(`:icon="{ name: 'lucide-trash-2', theme: 'red' }"`)
+  if (v.actions) {
+    attrs.push(`:actions="[
+    { label: 'Cancel' },
+    { label: 'Delete', variant: 'solid', theme: 'red' },
+  ]"`)
+  }
+  if (!v.dismissible) attrs.push(':dismissible="false"')
+  if (!v.showCloseButton) attrs.push(':show-close-button="false"')
+  attrs.push('v-model:open="open"')
+  return ['<Dialog', ...attrs.map((a) => '  ' + a), '/>'].join('\n')
+}
+
+function actionsFor(enabled: boolean) {
+  if (!enabled) return undefined
+  return [
+    { label: 'Cancel' },
+    { label: 'Delete', variant: 'solid', theme: 'red' },
+  ] as any
+}
+</script>
+
+<template>
+  <ComponentPlayground :knobs="knobs" :code="buildCode" preview-min-height="160px">
+    <template #preview="{ values }">
+      <Button label="Open dialog" @click="open = true" />
+      <Dialog
+        v-model:open="open"
+        :title="values.title"
+        :message="values.message"
+        :size="values.size"
+        :position="values.position"
+        :icon="values.icon ? { name: 'lucide-trash-2', theme: 'red' } : undefined"
+        :actions="actionsFor(values.actions)"
+        :dismissible="values.dismissible"
+        :show-close-button="values.showCloseButton"
+      />
+    </template>
+  </ComponentPlayground>
+</template>
diff --git a/docs/components/Docs/DividerBuilder.vue b/docs/components/Docs/DividerBuilder.vue
new file mode 100644
index 000000000..66516ff9b
--- /dev/null
+++ b/docs/components/Docs/DividerBuilder.vue
@@ -0,0 +1,66 @@
+<script setup lang="ts">
+import { Divider } from 'frappe-ui'
+import ComponentPlayground, { type Knob } from './ComponentPlayground.vue'
+
+const knobs: Knob[] = [
+  {
+    name: 'orientation',
+    type: 'tabs',
+    default: 'horizontal',
+    options: [
+      { label: 'horizontal', value: 'horizontal' },
+      { label: 'vertical', value: 'vertical' },
+    ],
+  },
+  {
+    name: 'position',
+    type: 'tabs',
+    default: 'center',
+    options: [
+      { label: 'start', value: 'start' },
+      { label: 'center', value: 'center' },
+      { label: 'end', value: 'end' },
+    ],
+  },
+  { name: 'withAction', type: 'switch', default: false },
+]
+
+function buildCode(v: Record<string, any>) {
+  const attrs: string[] = []
+  if (v.orientation !== 'horizontal') attrs.push(`orientation="${v.orientation}"`)
+  if (v.position !== 'center') attrs.push(`position="${v.position}"`)
+  if (v.withAction) attrs.push(`:action="{ label: 'Add row' }"`)
+  if (!attrs.length) return '<Divider />'
+  return ['<Divider', ...attrs.map((a) => '  ' + a), '/>'].join('\n')
+}
+</script>
+
+<template>
+  <ComponentPlayground :knobs="knobs" :code="buildCode" preview-min-height="140px">
+    <template #preview="{ values }">
+      <div
+        :class="
+          values.orientation === 'vertical'
+            ? 'flex items-stretch gap-4 h-24'
+            : 'w-full max-w-sm'
+        "
+      >
+        <template v-if="values.orientation === 'vertical'">
+          <span class="text-sm text-ink-gray-6 self-center">Before</span>
+          <Divider
+            orientation="vertical"
+            :position="values.position"
+            flex-item
+            :action="values.withAction ? { label: 'Add row' } : undefined"
+          />
+          <span class="text-sm text-ink-gray-6 self-center">After</span>
+        </template>
+        <Divider
+          v-else
+          :position="values.position"
+          :action="values.withAction ? { label: 'Add row' } : undefined"
+        />
+      </div>
+    </template>
+  </ComponentPlayground>
+</template>
diff --git a/docs/components/Docs/DropdownBuilder.vue b/docs/components/Docs/DropdownBuilder.vue
new file mode 100644
index 000000000..5c6d94c27
--- /dev/null
+++ b/docs/components/Docs/DropdownBuilder.vue
@@ -0,0 +1,57 @@
+<script setup lang="ts">
+import { Dropdown } from 'frappe-ui'
+import ComponentPlayground, { type Knob } from './ComponentPlayground.vue'
+
+const options = [
+  { label: 'Edit', icon: 'lucide-pencil', onClick: () => {} },
+  { label: 'Duplicate', icon: 'lucide-copy', onClick: () => {} },
+  { label: 'Archive', icon: 'lucide-archive', onClick: () => {} },
+  { label: 'Delete', icon: 'lucide-trash-2', theme: 'red', onClick: () => {} },
+]
+
+const knobs: Knob[] = [
+  { name: 'label', type: 'text', default: 'Actions', width: '12rem' },
+  {
+    name: 'align',
+    type: 'tabs',
+    default: 'start',
+    options: [
+      { label: 'start', value: 'start' },
+      { label: 'center', value: 'center' },
+      { label: 'end', value: 'end' },
+    ],
+  },
+  {
+    name: 'side',
+    type: 'tabs',
+    default: 'bottom',
+    options: [
+      { label: 'top', value: 'top' },
+      { label: 'right', value: 'right' },
+      { label: 'bottom', value: 'bottom' },
+      { label: 'left', value: 'left' },
+    ],
+  },
+]
+
+function buildCode(v: Record<string, any>) {
+  const attrs = [`:button="{ label: '${v.label}' }"`]
+  if (v.align !== 'start') attrs.push(`align="${v.align}"`)
+  if (v.side !== 'bottom') attrs.push(`side="${v.side}"`)
+  attrs.push(':options="options"')
+  return ['<Dropdown', ...attrs.map((a) => '  ' + a), '/>'].join('\n')
+}
+</script>
+
+<template>
+  <ComponentPlayground :knobs="knobs" :code="buildCode" preview-min-height="220px">
+    <template #preview="{ values }">
+      <Dropdown
+        :button="{ label: values.label }"
+        :align="values.align"
+        :side="values.side"
+        :options="options"
+      />
+    </template>
+  </ComponentPlayground>
+</template>
diff --git a/docs/components/Docs/ErrorMessageBuilder.vue b/docs/components/Docs/ErrorMessageBuilder.vue
new file mode 100644
index 000000000..6c3011f11
--- /dev/null
+++ b/docs/components/Docs/ErrorMessageBuilder.vue
@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import { ErrorMessage } from 'frappe-ui'
+import ComponentPlayground, { type Knob } from './ComponentPlayground.vue'
+
+const knobs: Knob[] = [
+  {
+    name: 'message',
+    type: 'text',
+    default: 'Email is required.',
+    width: '20rem',
+  },
+]
+
+function buildCode(v: Record<string, any>) {
+  return `<ErrorMessage message="${v.message}" />`
+}
+</script>
+
+<template>
+  <ComponentPlayground :knobs="knobs" :code="buildCode" preview-min-height="80px">
+    <template #preview="{ values }">
+      <ErrorMessage :message="values.message" />
+    </template>
+  </ComponentPlayground>
+</template>
diff --git a/docs/components/Docs/FormControlBuilder.vue b/docs/components/Docs/FormControlBuilder.vue
new file mode 100644
index 000000000..cfed3d458
--- /dev/null
+++ b/docs/components/Docs/FormControlBuilder.vue
@@ -0,0 +1,88 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { FormControl } from 'frappe-ui'
+import ComponentPlayground, { type Knob } from './ComponentPlayground.vue'
+
+const model = ref<any>('')
+
+const selectOptions = [
+  { label: 'Backlog', value: 'backlog' },
+  { label: 'In progress', value: 'in_progress' },
+  { label: 'Done', value: 'done' },
+]
+
+const knobs: Knob[] = [
+  {
+    name: 'type',
+    type: 'tabs',
+    default: 'text',
+    options: [
+      { label: 'text', value: 'text' },
+      { label: 'textarea', value: 'textarea' },
+      { label: 'select', value: 'select' },
+      { label: 'checkbox', value: 'checkbox' },
+      { label: 'combobox', value: 'combobox' },
+      { label: 'date', value: 'date' },
+    ],
+  },
+  { name: 'label', type: 'text', default: 'Status', width: '12rem' },
+  { name: 'description', type: 'text', default: '', width: '20rem' },
+  {
+    name: 'size',
+    type: 'tabs',
+    default: 'sm',
+    options: [
+      { label: 'sm', value: 'sm' },
+      { label: 'md', value: 'md' },
+    ],
+  },
+  {
+    name: 'variant',
+    type: 'tabs',
+    default: 'subtle',
+    options: [
+      { label: 'subtle', value: 'subtle' },
+      { label: 'outline', value: 'outline' },
+    ],
+  },
+  { name: 'required', type: 'switch', default: false },
+]
+
+function buildCode(v: Record<string, any>) {
+  const attrs = []
+  if (v.type !== 'text') attrs.push(`type="${v.type}"`)
+  if (v.label) attrs.push(`label="${v.label}"`)
+  if (v.description) attrs.push(`description="${v.description}"`)
+  if (v.size !== 'sm') attrs.push(`size="${v.size}"`)
+  if (v.variant !== 'subtle') attrs.push(`variant="${v.variant}"`)
+  if (v.required) attrs.push('required')
+  if (v.type === 'select' || v.type === 'combobox') {
+    attrs.push(':options="options"')
+  }
+  attrs.push('v-model="value"')
+  return ['<FormControl', ...attrs.map((a) => '  ' + a), '/>'].join('\n')
+}
+
+function optionsFor(type: string) {
+  return type === 'select' || type === 'combobox' ? selectOptions : undefined
+}
+</script>
+
+<template>
+  <ComponentPlayground :knobs="knobs" :code="buildCode" preview-min-height="160px">
+    <template #preview="{ values }">
+      <div class="w-full max-w-sm">
+        <FormControl
+          v-model="model"
+          :type="values.type"
+          :label="values.label || undefined"
+          :description="values.description || undefined"
+          :size="values.size"
+          :variant="values.variant"
+          :required="values.required"
+          :options="optionsFor(values.type)"
+        />
+      </div>
+    </template>
+  </ComponentPlayground>
+</template>
diff --git a/docs/components/Docs/MobileNavSheet.vue b/docs/components/Docs/MobileNavSheet.vue
index eb43054f0..f83d97c8e 100644
--- a/docs/components/Docs/MobileNavSheet.vue
+++ b/docs/components/Docs/MobileNavSheet.vue
@@ -91,7 +91,7 @@ onUnmounted(() => {
   >
     <div
       v-if="state.mobsidebar"
-      class="lg:hidden fixed inset-x-0 bottom-0 z-50 h-[80dvh] bg-surface-white rounded-t-2xl shadow-2xl flex flex-col"
+      class="lg:hidden fixed inset-x-0 bottom-0 z-50 h-[80dvh] bg-surface-base rounded-t-2xl shadow-2xl flex flex-col"
       role="dialog"
       aria-modal="true"
       aria-label="Navigation"
diff --git a/docs/components/Docs/MultiSelectBuilder.vue b/docs/components/Docs/MultiSelectBuilder.vue
new file mode 100644
index 000000000..aaf7e1a66
--- /dev/null
+++ b/docs/components/Docs/MultiSelectBuilder.vue
@@ -0,0 +1,75 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { MultiSelect } from 'frappe-ui'
+import ComponentPlayground, { type Knob } from './ComponentPlayground.vue'
+
+const model = ref<string[]>([])
+
+const options = [
+  { label: 'Bug', value: 'bug' },
+  { label: 'Feature', value: 'feature' },
+  { label: 'Docs', value: 'docs' },
+  { label: 'Question', value: 'question' },
+  { label: 'Polish', value: 'polish' },
+]
+
+const knobs: Knob[] = [
+  { name: 'label', type: 'text', default: 'Labels', width: '12rem' },
+  { name: 'placeholder', type: 'text', default: 'Select labels', width: '14rem' },
+  {
+    name: 'size',
+    type: 'tabs',
+    default: 'sm',
+    options: [
+      { label: 'sm', value: 'sm' },
+      { label: 'md', value: 'md' },
+      { label: 'lg', value: 'lg' },
+      { label: 'xl', value: 'xl' },
+    ],
+  },
+  {
+    name: 'variant',
+    type: 'tabs',
+    default: 'subtle',
+    options: [
+      { label: 'subtle', value: 'subtle' },
+      { label: 'outline', value: 'outline' },
+      { label: 'ghost', value: 'ghost' },
+    ],
+  },
+  { name: 'hideSearch', type: 'switch', default: false },
+  { name: 'disabled', type: 'switch', default: false },
+]
+
+function buildCode(v: Record<string, any>) {
+  const attrs = []
+  if (v.label) attrs.push(`label="${v.label}"`)
+  if (v.placeholder) attrs.push(`placeholder="${v.placeholder}"`)
+  if (v.size !== 'sm') attrs.push(`size="${v.size}"`)
+  if (v.variant !== 'subtle') attrs.push(`variant="${v.variant}"`)
+  if (v.hideSearch) attrs.push('hide-search')
+  if (v.disabled) attrs.push('disabled')
+  attrs.push(':options="options"')
+  attrs.push('v-model="value"')
+  return ['<MultiSelect', ...attrs.map((a) => '  ' + a), '/>'].join('\n')
+}
+</script>
+
+<template>
+  <ComponentPlayground :knobs="knobs" :code="buildCode" preview-min-height="160px">
+    <template #preview="{ values }">
+      <div class="w-full max-w-sm">
+        <MultiSelect
+          v-model="model"
+          :label="values.label || undefined"
+          :placeholder="values.placeholder || undefined"
+          :size="values.size"
+          :variant="values.variant"
+          :hide-search="values.hideSearch"
+          :disabled="values.disabled"
+          :options="options"
+        />
+      </div>
+    </template>
+  </ComponentPlayground>
+</template>
diff --git a/docs/components/Docs/OnThisPage.vue b/docs/components/Docs/OnThisPage.vue
index 624395fcd..fdd263fcd 100644
--- a/docs/components/Docs/OnThisPage.vue
+++ b/docs/components/Docs/OnThisPage.vue
@@ -65,7 +65,7 @@ watch(route, setHeadings)
       @click="activeHeading = x.id"
       :class="{
         'pl-7': x.type == 'h3' && h2Exists,
-        'border-outline-gray-5 text-ink-gray-9':
+        'border-outline-gray-7 text-ink-gray-9':
           activeHeading && x.id == activeHeading,
       }"
       >{{ x.name }}</a
diff --git a/docs/components/Docs/PasswordBuilder.vue b/docs/components/Docs/PasswordBuilder.vue
new file mode 100644
index 000000000..973d1e381
--- /dev/null
+++ b/docs/components/Docs/PasswordBuilder.vue
@@ -0,0 +1,68 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { Password } from 'frappe-ui'
+import ComponentPlayground, { type Knob } from './ComponentPlayground.vue'
+
+const model = ref('')
+
+const knobs: Knob[] = [
+  { name: 'label', type: 'text', default: 'Password', width: '12rem' },
+  { name: 'description', type: 'text', default: '', width: '20rem' },
+  { name: 'placeholder', type: 'text', default: '••••••••', width: '12rem' },
+  {
+    name: 'size',
+    type: 'tabs',
+    default: 'sm',
+    options: [
+      { label: 'sm', value: 'sm' },
+      { label: 'md', value: 'md' },
+      { label: 'lg', value: 'lg' },
+      { label: 'xl', value: 'xl' },
+    ],
+  },
+  {
+    name: 'variant',
+    type: 'tabs',
+    default: 'subtle',
+    options: [
+      { label: 'subtle', value: 'subtle' },
+      { label: 'outline', value: 'outline' },
+      { label: 'ghost', value: 'ghost' },
+    ],
+  },
+  { name: 'required', type: 'switch', default: false },
+  { name: 'disabled', type: 'switch', default: false },
+]
+
+function buildCode(v: Record<string, any>) {
+  const attrs = []
+  if (v.label) attrs.push(`label="${v.label}"`)
+  if (v.description) attrs.push(`description="${v.description}"`)
+  if (v.placeholder) attrs.push(`placeholder="${v.placeholder}"`)
+  if (v.size !== 'sm') attrs.push(`size="${v.size}"`)
+  if (v.variant !== 'subtle') attrs.push(`variant="${v.variant}"`)
+  if (v.required) attrs.push('required')
+  if (v.disabled) attrs.push('disabled')
+  attrs.push('v-model="value"')
+  return ['<Password', ...attrs.map((a) => '  ' + a), '/>'].join('\n')
+}
+</script>
+
+<template>
+  <ComponentPlayground :knobs="knobs" :code="buildCode" preview-min-height="120px">
+    <template #preview="{ values }">
+      <div class="w-full max-w-sm">
+        <Password
+          v-model="model"
+          :label="values.label || undefined"
+          :description="values.description || undefined"
+          :placeholder="values.placeholder || undefined"
+          :size="values.size"
+          :variant="values.variant"
+          :required="values.required"
+          :disabled="values.disabled"
+        />
+      </div>
+    </template>
+  </ComponentPlayground>
+</template>
diff --git a/docs/components/Docs/PillBuilder.vue b/docs/components/Docs/PillBuilder.vue
new file mode 100644
index 000000000..03431197f
--- /dev/null
+++ b/docs/components/Docs/PillBuilder.vue
@@ -0,0 +1,88 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { Pill } from 'frappe-ui'
+import ComponentPlayground, { type Knob } from './ComponentPlayground.vue'
+
+const knobs: Knob[] = [
+  { name: 'label', type: 'text', default: 'Tab' },
+  {
+    name: 'variant',
+    type: 'tabs',
+    default: 'default',
+    options: [
+      { label: 'default', value: 'default' },
+      { label: 'outline', value: 'outline' },
+      { label: 'underline', value: 'underline' },
+      { label: 'browser-tab', value: 'browser-tab' },
+    ],
+  },
+  {
+    name: 'size',
+    type: 'tabs',
+    default: 'sm',
+    options: [
+      { label: 'sm', value: 'sm' },
+      { label: 'md', value: 'md' },
+    ],
+  },
+  { name: 'active', type: 'switch', default: true },
+  { name: 'prefix', type: 'switch', default: false },
+  { name: 'suffix', type: 'switch', default: false },
+]
+
+function browserTabBase(variant: string) {
+  return variant === 'browser-tab' ? 'default' : 'none'
+}
+
+function buildCode(v: Record<string, any>) {
+  const attrs = [`label="${v.label}"`, `variant="${v.variant}"`]
+  if (v.size !== 'md') attrs.push(`size="${v.size}"`)
+  if (v.active) attrs.push('active')
+  if (v.variant === 'browser-tab') attrs.push('browser-tab-base="default"')
+
+  const slots: string[] = []
+  if (v.prefix) {
+    slots.push('  <template #prefix><span class="lucide-star" /></template>')
+  }
+  if (v.suffix) {
+    slots.push('  <template #suffix><span>14</span></template>')
+  }
+
+  if (!slots.length) {
+    return ['<Pill', ...attrs.map((a) => `  ${a}`), '/>'].join('\n')
+  }
+  return ['<Pill', ...attrs.map((a) => `  ${a}`), '>', ...slots, '</Pill>'].join('\n')
+}
+</script>
+
+<template>
+  <ComponentPlayground :knobs="knobs" :code="buildCode">
+    <template #preview="{ values }">
+      <div
+        :class="
+          values.variant === 'underline' || values.variant === 'browser-tab'
+            ? 'border-b border-outline-gray-2'
+            : ''
+        "
+      >
+        <Pill
+          :label="values.label"
+          :variant="values.variant"
+          :size="values.size"
+          :active="values.active"
+          :browser-tab-base="browserTabBase(values.variant)"
+        >
+          <template v-if="values.prefix" #prefix>
+            <span class="lucide-star size-4 shrink-0" aria-hidden="true" />
+          </template>
+          <template v-if="values.suffix" #suffix>
+            <span
+              class="rounded-full bg-surface-gray-2 px-1.5 text-xs text-ink-gray-7"
+              >14</span
+            >
+          </template>
+        </Pill>
+      </div>
+    </template>
+  </ComponentPlayground>
+</template>
diff --git a/docs/components/Docs/ProgressBuilder.vue b/docs/components/Docs/ProgressBuilder.vue
new file mode 100644
index 000000000..bcd708846
--- /dev/null
+++ b/docs/components/Docs/ProgressBuilder.vue
@@ -0,0 +1,57 @@
+<script setup lang="ts">
+import { Progress } from 'frappe-ui'
+import ComponentPlayground, { type Knob } from './ComponentPlayground.vue'
+
+const knobs: Knob[] = [
+  { name: 'value', type: 'text', default: '60', width: '5rem' },
+  { name: 'label', type: 'text', default: 'Upload', width: '12rem' },
+  {
+    name: 'size',
+    type: 'tabs',
+    default: 'sm',
+    options: [
+      { label: 'sm', value: 'sm' },
+      { label: 'md', value: 'md' },
+      { label: 'lg', value: 'lg' },
+      { label: 'xl', value: 'xl' },
+    ],
+  },
+  { name: 'hint', type: 'switch', default: true },
+  { name: 'intervals', type: 'switch', default: false },
+  { name: 'intervalCount', type: 'text', default: '6', width: '4rem' },
+]
+
+function buildCode(v: Record<string, any>) {
+  const attrs: string[] = [`:value="${Number(v.value) || 0}"`]
+  if (v.label) attrs.push(`label="${v.label}"`)
+  if (v.size !== 'sm') attrs.push(`size="${v.size}"`)
+  if (v.hint) attrs.push('hint')
+  if (v.intervals) {
+    attrs.push('intervals')
+    const ic = Number(v.intervalCount)
+    if (ic && ic !== 6) attrs.push(`:interval-count="${ic}"`)
+  }
+  return ['<Progress', ...attrs.map((a) => '  ' + a), '/>'].join('\n')
+}
+</script>
+
+<template>
+  <ComponentPlayground
+    :knobs="knobs"
+    :code="buildCode"
+    preview-min-height="100px"
+  >
+    <template #preview="{ values }">
+      <div class="w-full max-w-sm">
+        <Progress
+          :value="Number(values.value) || 0"
+          :label="values.label || undefined"
+          :size="values.size"
+          :hint="values.hint"
+          :intervals="values.intervals"
+          :interval-count="Number(values.intervalCount) || 6"
+        />
+      </div>
+    </template>
+  </ComponentPlayground>
+</template>
diff --git a/docs/components/Docs/RatingBuilder.vue b/docs/components/Docs/RatingBuilder.vue
new file mode 100644
index 000000000..0676a2f22
--- /dev/null
+++ b/docs/components/Docs/RatingBuilder.vue
@@ -0,0 +1,57 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { Rating } from 'frappe-ui'
+import ComponentPlayground, { type Knob } from './ComponentPlayground.vue'
+
+const model = ref(3)
+
+const knobs: Knob[] = [
+  { name: 'max', type: 'text', default: '5', width: '4rem' },
+  {
+    name: 'step',
+    type: 'tabs',
+    default: '1',
+    options: [
+      { label: '1', value: '1' },
+      { label: '0.5', value: '0.5' },
+    ],
+  },
+  {
+    name: 'size',
+    type: 'tabs',
+    default: 'sm',
+    options: [
+      { label: 'sm', value: 'sm' },
+      { label: 'md', value: 'md' },
+      { label: 'lg', value: 'lg' },
+      { label: 'xl', value: 'xl' },
+    ],
+  },
+  { name: 'readonly', type: 'switch', default: false },
+]
+
+function buildCode(v: Record<string, any>) {
+  const attrs = []
+  const max = Number(v.max)
+  if (max && max !== 5) attrs.push(`:max="${max}"`)
+  if (v.step !== '1') attrs.push(`:step="${v.step}"`)
+  if (v.size !== 'sm') attrs.push(`size="${v.size}"`)
+  if (v.readonly) attrs.push('readonly')
+  attrs.push('v-model="value"')
+  return ['<Rating', ...attrs.map((a) => '  ' + a), '/>'].join('\n')
+}
+</script>
+
+<template>
+  <ComponentPlayground :knobs="knobs" :code="buildCode" preview-min-height="100px">
+    <template #preview="{ values }">
+      <Rating
+        v-model="model"
+        :max="Number(values.max) || 5"
+        :step="Number(values.step) as 1 | 0.5"
+        :size="values.size"
+        :readonly="values.readonly"
+      />
+    </template>
+  </ComponentPlayground>
+</template>
diff --git a/docs/components/Docs/SelectBuilder.vue b/docs/components/Docs/SelectBuilder.vue
new file mode 100644
index 000000000..4a53012ec
--- /dev/null
+++ b/docs/components/Docs/SelectBuilder.vue
@@ -0,0 +1,74 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { Select } from 'frappe-ui'
+import ComponentPlayground, { type Knob } from './ComponentPlayground.vue'
+
+const model = ref<string>('')
+
+const options = [
+  { label: 'Backlog', value: 'backlog' },
+  { label: 'In progress', value: 'in_progress' },
+  { label: 'Review', value: 'review' },
+  { label: 'Done', value: 'done' },
+]
+
+const knobs: Knob[] = [
+  { name: 'label', type: 'text', default: 'Status', width: '12rem' },
+  { name: 'placeholder', type: 'text', default: 'Select status', width: '14rem' },
+  {
+    name: 'size',
+    type: 'tabs',
+    default: 'sm',
+    options: [
+      { label: 'sm', value: 'sm' },
+      { label: 'md', value: 'md' },
+      { label: 'lg', value: 'lg' },
+      { label: 'xl', value: 'xl' },
+    ],
+  },
+  {
+    name: 'variant',
+    type: 'tabs',
+    default: 'subtle',
+    options: [
+      { label: 'subtle', value: 'subtle' },
+      { label: 'outline', value: 'outline' },
+      { label: 'ghost', value: 'ghost' },
+    ],
+  },
+  { name: 'required', type: 'switch', default: false },
+  { name: 'disabled', type: 'switch', default: false },
+]
+
+function buildCode(v: Record<string, any>) {
+  const attrs = []
+  if (v.label) attrs.push(`label="${v.label}"`)
+  if (v.placeholder) attrs.push(`placeholder="${v.placeholder}"`)
+  if (v.size !== 'sm') attrs.push(`size="${v.size}"`)
+  if (v.variant !== 'subtle') attrs.push(`variant="${v.variant}"`)
+  if (v.required) attrs.push('required')
+  if (v.disabled) attrs.push('disabled')
+  attrs.push(':options="options"')
+  attrs.push('v-model="value"')
+  return ['<Select', ...attrs.map((a) => '  ' + a), '/>'].join('\n')
+}
+</script>
+
+<template>
+  <ComponentPlayground :knobs="knobs" :code="buildCode" preview-min-height="140px">
+    <template #preview="{ values }">
+      <div class="w-full max-w-sm">
+        <Select
+          v-model="model"
+          :label="values.label || undefined"
+          :placeholder="values.placeholder || undefined"
+          :size="values.size"
+          :variant="values.variant"
+          :required="values.required"
+          :disabled="values.disabled"
+          :options="options"
+        />
+      </div>
+    </template>
+  </ComponentPlayground>
+</template>
diff --git a/docs/components/Docs/Sidebar.vue b/docs/components/Docs/Sidebar.vue
index 2cf00eebf..16e25b7e4 100644
--- a/docs/components/Docs/Sidebar.vue
+++ b/docs/components/Docs/Sidebar.vue
@@ -24,7 +24,7 @@ const isActive = (link: string) =>
 
 <template>
   <aside
-    class="flex h-screen w-full min-w-fit flex-col border-r bg-surface-gray-1 dark:bg-surface-white pt-1 sticky top-0"
+    class="flex h-screen w-full min-w-fit flex-col border-r bg-surface-sidebar pt-1 sticky top-0"
   >
     <div class="px-1">
       <a
@@ -59,7 +59,7 @@ const isActive = (link: string) =>
                 class="pl-2 flex h-7 items-center rounded text-sm transition-colors"
                 :class="
                   isActive(item.link)
-                    ? 'bg-surface-white dark:bg-surface-gray-2 shadow-sm text-ink-gray-8'
+                    ? 'bg-surface-base dark:bg-surface-gray-2 shadow-sm text-ink-gray-8'
                     : 'text-ink-gray-6 hover:bg-surface-gray-2 hover:text-ink-gray-8'
                 "
               >
diff --git a/docs/components/Docs/SliderBuilder.vue b/docs/components/Docs/SliderBuilder.vue
new file mode 100644
index 000000000..18c6c7378
--- /dev/null
+++ b/docs/components/Docs/SliderBuilder.vue
@@ -0,0 +1,65 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { Slider } from 'frappe-ui'
+import ComponentPlayground, { type Knob } from './ComponentPlayground.vue'
+
+const model = ref<number[]>([40])
+
+const knobs: Knob[] = [
+  { name: 'label', type: 'text', default: 'Volume', width: '12rem' },
+  { name: 'min', type: 'text', default: '0', width: '4rem' },
+  { name: 'max', type: 'text', default: '100', width: '4rem' },
+  { name: 'step', type: 'text', default: '1', width: '4rem' },
+  {
+    name: 'size',
+    type: 'tabs',
+    default: 'sm',
+    options: [
+      { label: 'sm', value: 'sm' },
+      { label: 'md', value: 'md' },
+    ],
+  },
+  { name: 'range', type: 'switch', default: false },
+  { name: 'disabled', type: 'switch', default: false },
+]
+
+function buildCode(v: Record<string, any>) {
+  const attrs: string[] = []
+  if (v.label) attrs.push(`label="${v.label}"`)
+  const min = Number(v.min)
+  const max = Number(v.max)
+  const step = Number(v.step)
+  if (min !== 0) attrs.push(`:min="${min}"`)
+  if (max !== 100) attrs.push(`:max="${max}"`)
+  if (step !== 1) attrs.push(`:step="${step}"`)
+  if (v.size !== 'sm') attrs.push(`size="${v.size}"`)
+  if (v.disabled) attrs.push('disabled')
+  attrs.push('v-model="value"')
+  return ['<Slider', ...attrs.map((a) => '  ' + a), '/>'].join('\n')
+}
+
+function valueFor(range: boolean) {
+  if (range && model.value.length === 1) model.value = [20, 80]
+  if (!range && model.value.length === 2) model.value = [40]
+  return model.value
+}
+</script>
+
+<template>
+  <ComponentPlayground :knobs="knobs" :code="buildCode" preview-min-height="120px">
+    <template #preview="{ values }">
+      <div class="w-full max-w-sm">
+        <Slider
+          :model-value="valueFor(values.range)"
+          @update:model-value="(v: number[]) => (model = v)"
+          :label="values.label || undefined"
+          :min="Number(values.min) || 0"
+          :max="Number(values.max) || 100"
+          :step="Number(values.step) || 1"
+          :size="values.size"
+          :disabled="values.disabled"
+        />
+      </div>
+    </template>
+  </ComponentPlayground>
+</template>
diff --git a/docs/components/Docs/SwitchBuilder.vue b/docs/components/Docs/SwitchBuilder.vue
new file mode 100644
index 000000000..e9d390d81
--- /dev/null
+++ b/docs/components/Docs/SwitchBuilder.vue
@@ -0,0 +1,51 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { Switch } from 'frappe-ui'
+import ComponentPlayground, { type Knob } from './ComponentPlayground.vue'
+
+const model = ref(true)
+
+const knobs: Knob[] = [
+  { name: 'label', type: 'text', default: 'Notifications', width: '14rem' },
+  { name: 'description', type: 'text', default: '', width: '20rem' },
+  {
+    name: 'size',
+    type: 'tabs',
+    default: 'sm',
+    options: [
+      { label: 'sm', value: 'sm' },
+      { label: 'md', value: 'md' },
+    ],
+  },
+  { name: 'required', type: 'switch', default: false },
+  { name: 'disabled', type: 'switch', default: false },
+]
+
+function buildCode(v: Record<string, any>) {
+  const attrs = []
+  if (v.label) attrs.push(`label="${v.label}"`)
+  if (v.description) attrs.push(`description="${v.description}"`)
+  if (v.size !== 'sm') attrs.push(`size="${v.size}"`)
+  if (v.required) attrs.push('required')
+  if (v.disabled) attrs.push('disabled')
+  attrs.push('v-model="value"')
+  return ['<Switch', ...attrs.map((a) => '  ' + a), '/>'].join('\n')
+}
+</script>
+
+<template>
+  <ComponentPlayground :knobs="knobs" :code="buildCode" preview-min-height="120px">
+    <template #preview="{ values }">
+      <div class="min-w-[18rem]">
+        <Switch
+          v-model="model"
+          :label="values.label || undefined"
+          :description="values.description || undefined"
+          :size="values.size"
+          :required="values.required"
+          :disabled="values.disabled"
+        />
+      </div>
+    </template>
+  </ComponentPlayground>
+</template>
diff --git a/docs/components/Docs/TabButtonsBuilder.vue b/docs/components/Docs/TabButtonsBuilder.vue
new file mode 100644
index 000000000..a56c90106
--- /dev/null
+++ b/docs/components/Docs/TabButtonsBuilder.vue
@@ -0,0 +1,119 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { TabButtons } from 'frappe-ui'
+import ComponentPlayground, { type Knob } from './ComponentPlayground.vue'
+
+const knobs: Knob[] = [
+  {
+    name: 'type',
+    type: 'tabs',
+    default: 'subtle',
+    options: [
+      { label: 'subtle', value: 'subtle' },
+      { label: 'ghost', value: 'ghost' },
+      { label: 'underline', value: 'underline' },
+      { label: 'browser-tab', value: 'browser-tab' },
+    ],
+  },
+  {
+    name: 'size',
+    type: 'tabs',
+    default: 'sm',
+    options: [
+      { label: 'sm', value: 'sm' },
+      { label: 'md', value: 'md' },
+    ],
+  },
+  { name: 'vertical', type: 'switch', default: false },
+  { name: 'prefix', type: 'switch', default: false },
+  { name: 'suffix', type: 'switch', default: false },
+]
+
+const modelValue = ref('activity')
+
+const options = [
+  { label: 'Overview', value: 'overview' },
+  { label: 'Activity', value: 'activity' },
+  { label: 'Settings', value: 'settings' },
+]
+
+const iconByValue: Record<string, string> = {
+  overview: 'lucide-home',
+  activity: 'lucide-activity',
+  settings: 'lucide-settings',
+}
+
+const countByValue: Record<string, number> = {
+  overview: 8,
+  activity: 14,
+  settings: 2,
+}
+
+function buildCode(v: Record<string, any>) {
+  const attrs = [`v-model="tab"`, `:options="options"`]
+  if (v.type !== 'subtle') attrs.push(`type="${v.type}"`)
+  if (v.size !== 'sm') attrs.push(`size="${v.size}"`)
+  if (v.vertical) attrs.push('vertical')
+
+  const hasSlots = v.prefix || v.suffix
+
+  return [
+    '<' + 'script setup>',
+    "import { ref } from 'vue'",
+    "import { TabButtons } from 'frappe-ui'",
+    '',
+    "const tab = ref('activity')",
+    'const options = [',
+    ...options.map(
+      (option) => `  { label: '${option.label}', value: '${option.value}' },`,
+    ),
+    ']',
+    '</' + 'script>',
+    '',
+    '<' + 'template>',
+    '  <' + 'TabButtons',
+    ...attrs.map((attr) => `    ${attr}`),
+    hasSlots ? '  >' : '  />',
+    ...(v.prefix
+      ? ['    <template #prefix><span class="lucide-star" /></template>']
+      : []),
+    ...(v.suffix
+      ? ['    <template #suffix><span>14</span></template>']
+      : []),
+    ...(hasSlots ? ['  </TabButtons>'] : []),
+    '</' + 'template>',
+  ].join('\n')
+}
+</script>
+
+<template>
+  <ComponentPlayground
+    :knobs="knobs"
+    :code="buildCode"
+    preview-min-height="220px"
+  >
+    <template #preview="{ values }">
+      <TabButtons
+        v-model="modelValue"
+        :options="options"
+        :type="values.type"
+        :size="values.size"
+        :vertical="values.vertical"
+      >
+        <template v-if="values.prefix" #prefix="{ button }">
+          <span
+            :class="iconByValue[button.modelValue]"
+            class="size-4 shrink-0"
+          />
+        </template>
+        <template v-if="values.suffix" #suffix="{ button }">
+          <span
+            class="rounded-full bg-surface-gray-2 px-1.5 text-xs text-ink-gray-7"
+          >
+            {{ countByValue[button.modelValue] }}
+          </span>
+        </template>
+      </TabButtons>
+    </template>
+  </ComponentPlayground>
+</template>
diff --git a/docs/components/Docs/TabsBuilder.vue b/docs/components/Docs/TabsBuilder.vue
new file mode 100644
index 000000000..f281b5ef6
--- /dev/null
+++ b/docs/components/Docs/TabsBuilder.vue
@@ -0,0 +1,60 @@
+<script setup lang="ts">
+import { Tabs } from 'frappe-ui'
+import ComponentPlayground, { type Knob } from './ComponentPlayground.vue'
+
+const tabs = [
+  { label: 'Overview', icon: 'lucide-layout-dashboard' },
+  { label: 'Activity', icon: 'lucide-activity' },
+  { label: 'Settings', icon: 'lucide-settings' },
+]
+
+const knobs: Knob[] = [
+  { name: 'vertical', type: 'switch', default: false },
+  { name: 'icons', type: 'switch', default: true },
+]
+
+function buildCode(v: Record<string, any>) {
+  const items = (v.icons ? tabs : tabs.map((t) => ({ label: t.label })))
+    .map((t) =>
+      'icon' in t
+        ? `    { label: '${t.label}', icon: '${(t as any).icon}' },`
+        : `    { label: '${t.label}' },`,
+    )
+    .join('\n')
+  const attrs: string[] = []
+  if (v.vertical) attrs.push('vertical')
+  attrs.push(`:tabs="[\n${items}\n  ]"`)
+  return [
+    '<Tabs',
+    ...attrs.map((a) => '  ' + a),
+    '>',
+    '  <template #tab-panel="{ tab }">',
+    '    <div class="p-4 text-ink-gray-7">{{ tab.label }} content</div>',
+    '  </template>',
+    '</Tabs>',
+  ].join('\n')
+}
+
+function tabsFor(icons: boolean) {
+  return icons ? tabs : tabs.map((t) => ({ label: t.label }))
+}
+</script>
+
+<template>
+  <ComponentPlayground :knobs="knobs" :code="buildCode" preview-min-height="220px">
+    <template #preview="{ values }">
+      <div
+        class="w-full max-w-md overflow-hidden rounded-lg border border-outline-gray-1"
+        :class="values.vertical ? 'h-[200px]' : 'h-[160px]'"
+      >
+        <Tabs :tabs="tabsFor(values.icons)" :vertical="values.vertical">
+          <template #tab-panel="{ tab }">
+            <div class="p-4 text-base text-ink-gray-7">
+              {{ tab.label }} content
+            </div>
+          </template>
+        </Tabs>
+      </div>
+    </template>
+  </ComponentPlayground>
+</template>
diff --git a/docs/components/Docs/TextInputBuilder.vue b/docs/components/Docs/TextInputBuilder.vue
new file mode 100644
index 000000000..d5b7578d4
--- /dev/null
+++ b/docs/components/Docs/TextInputBuilder.vue
@@ -0,0 +1,101 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { TextInput } from 'frappe-ui'
+import ComponentPlayground, { type Knob } from './ComponentPlayground.vue'
+
+const model = ref('')
+
+const knobs: Knob[] = [
+  { name: 'label', type: 'text', default: 'Email', width: '12rem' },
+  { name: 'description', type: 'text', default: '', width: '20rem' },
+  { name: 'placeholder', type: 'text', default: 'jane@example.com', width: '14rem' },
+  {
+    name: 'type',
+    type: 'tabs',
+    default: 'text',
+    options: [
+      { label: 'text', value: 'text' },
+      { label: 'email', value: 'email' },
+      { label: 'number', value: 'number' },
+      { label: 'password', value: 'password' },
+      { label: 'date', value: 'date' },
+    ],
+  },
+  {
+    name: 'size',
+    type: 'tabs',
+    default: 'sm',
+    options: [
+      { label: 'sm', value: 'sm' },
+      { label: 'md', value: 'md' },
+      { label: 'lg', value: 'lg' },
+      { label: 'xl', value: 'xl' },
+    ],
+  },
+  {
+    name: 'variant',
+    type: 'tabs',
+    default: 'subtle',
+    options: [
+      { label: 'subtle', value: 'subtle' },
+      { label: 'outline', value: 'outline' },
+      { label: 'ghost', value: 'ghost' },
+    ],
+  },
+  { name: 'prefix', type: 'switch', default: false },
+  { name: 'suffix', type: 'switch', default: false },
+  { name: 'required', type: 'switch', default: false },
+  { name: 'disabled', type: 'switch', default: false },
+]
+
+function buildCode(v: Record<string, any>) {
+  const attrs = []
+  if (v.label) attrs.push(`label="${v.label}"`)
+  if (v.description) attrs.push(`description="${v.description}"`)
+  if (v.placeholder) attrs.push(`placeholder="${v.placeholder}"`)
+  if (v.type !== 'text') attrs.push(`type="${v.type}"`)
+  if (v.size !== 'sm') attrs.push(`size="${v.size}"`)
+  if (v.variant !== 'subtle') attrs.push(`variant="${v.variant}"`)
+  if (v.required) attrs.push('required')
+  if (v.disabled) attrs.push('disabled')
+  attrs.push('v-model="value"')
+  const slots = []
+  if (v.prefix) {
+    slots.push('  <template #prefix><span class="lucide-mail size-4" /></template>')
+  }
+  if (v.suffix) {
+    slots.push('  <template #suffix><span class="lucide-check size-4" /></template>')
+  }
+  if (!slots.length) {
+    return ['<TextInput', ...attrs.map((a) => '  ' + a), '/>'].join('\n')
+  }
+  return ['<TextInput', ...attrs.map((a) => '  ' + a), '>', ...slots, '</TextInput>'].join('\n')
+}
+</script>
+
+<template>
+  <ComponentPlayground :knobs="knobs" :code="buildCode" preview-min-height="120px">
+    <template #preview="{ values }">
+      <div class="w-full max-w-sm">
+        <TextInput
+          v-model="model"
+          :label="values.label || undefined"
+          :description="values.description || undefined"
+          :placeholder="values.placeholder || undefined"
+          :type="values.type"
+          :size="values.size"
+          :variant="values.variant"
+          :required="values.required"
+          :disabled="values.disabled"
+        >
+          <template v-if="values.prefix" #prefix>
+            <span class="lucide-mail size-4 text-ink-gray-5" />
+          </template>
+          <template v-if="values.suffix" #suffix>
+            <span class="lucide-check size-4 text-ink-gray-5" />
+          </template>
+        </TextInput>
+      </div>
+    </template>
+  </ComponentPlayground>
+</template>
diff --git a/docs/components/Docs/TextareaBuilder.vue b/docs/components/Docs/TextareaBuilder.vue
new file mode 100644
index 000000000..bc76af36b
--- /dev/null
+++ b/docs/components/Docs/TextareaBuilder.vue
@@ -0,0 +1,72 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { Textarea } from 'frappe-ui'
+import ComponentPlayground, { type Knob } from './ComponentPlayground.vue'
+
+const model = ref('')
+
+const knobs: Knob[] = [
+  { name: 'label', type: 'text', default: 'Notes', width: '12rem' },
+  { name: 'description', type: 'text', default: '', width: '20rem' },
+  { name: 'placeholder', type: 'text', default: 'Write something…', width: '16rem' },
+  { name: 'rows', type: 'text', default: '3', width: '4rem' },
+  {
+    name: 'size',
+    type: 'tabs',
+    default: 'sm',
+    options: [
+      { label: 'sm', value: 'sm' },
+      { label: 'md', value: 'md' },
+      { label: 'lg', value: 'lg' },
+      { label: 'xl', value: 'xl' },
+    ],
+  },
+  {
+    name: 'variant',
+    type: 'tabs',
+    default: 'subtle',
+    options: [
+      { label: 'subtle', value: 'subtle' },
+      { label: 'outline', value: 'outline' },
+      { label: 'ghost', value: 'ghost' },
+    ],
+  },
+  { name: 'required', type: 'switch', default: false },
+  { name: 'disabled', type: 'switch', default: false },
+]
+
+function buildCode(v: Record<string, any>) {
+  const attrs = []
+  if (v.label) attrs.push(`label="${v.label}"`)
+  if (v.description) attrs.push(`description="${v.description}"`)
+  if (v.placeholder) attrs.push(`placeholder="${v.placeholder}"`)
+  const rowsNum = Number(v.rows)
+  if (rowsNum && rowsNum !== 3) attrs.push(`:rows="${rowsNum}"`)
+  if (v.size !== 'sm') attrs.push(`size="${v.size}"`)
+  if (v.variant !== 'subtle') attrs.push(`variant="${v.variant}"`)
+  if (v.required) attrs.push('required')
+  if (v.disabled) attrs.push('disabled')
+  attrs.push('v-model="value"')
+  return ['<Textarea', ...attrs.map((a) => '  ' + a), '/>'].join('\n')
+}
+</script>
+
+<template>
+  <ComponentPlayground :knobs="knobs" :code="buildCode" preview-min-height="140px">
+    <template #preview="{ values }">
+      <div class="w-full max-w-sm">
+        <Textarea
+          v-model="model"
+          :label="values.label || undefined"
+          :description="values.description || undefined"
+          :placeholder="values.placeholder || undefined"
+          :rows="Number(values.rows) || 3"
+          :size="values.size"
+          :variant="values.variant"
+          :required="values.required"
+          :disabled="values.disabled"
+        />
+      </div>
+    </template>
+  </ComponentPlayground>
+</template>
diff --git a/docs/components/Docs/TooltipBuilder.vue b/docs/components/Docs/TooltipBuilder.vue
new file mode 100644
index 000000000..70a48d6d9
--- /dev/null
+++ b/docs/components/Docs/TooltipBuilder.vue
@@ -0,0 +1,51 @@
+<script setup lang="ts">
+import { Tooltip, Button } from 'frappe-ui'
+import ComponentPlayground, { type Knob } from './ComponentPlayground.vue'
+
+const knobs: Knob[] = [
+  { name: 'text', type: 'text', default: 'Save changes', width: '16rem' },
+  {
+    name: 'placement',
+    type: 'tabs',
+    default: 'top',
+    options: [
+      { label: 'top', value: 'top' },
+      { label: 'right', value: 'right' },
+      { label: 'bottom', value: 'bottom' },
+      { label: 'left', value: 'left' },
+    ],
+  },
+  { name: 'hoverDelay', type: 'text', default: '0.5', width: '4rem' },
+  { name: 'disabled', type: 'switch', default: false },
+]
+
+function buildCode(v: Record<string, any>) {
+  const attrs: string[] = [`text="${v.text}"`]
+  if (v.placement !== 'top') attrs.push(`placement="${v.placement}"`)
+  const hd = Number(v.hoverDelay)
+  if (!Number.isNaN(hd) && hd !== 0.5) attrs.push(`:hover-delay="${hd}"`)
+  if (v.disabled) attrs.push('disabled')
+  return [
+    '<Tooltip',
+    ...attrs.map((a) => '  ' + a),
+    '>',
+    '  <Button label="Hover me" />',
+    '</Tooltip>',
+  ].join('\n')
+}
+</script>
+
+<template>
+  <ComponentPlayground :knobs="knobs" :code="buildCode" preview-min-height="160px">
+    <template #preview="{ values }">
+      <Tooltip
+        :text="values.text"
+        :placement="values.placement"
+        :hover-delay="Number(values.hoverDelay) || 0"
+        :disabled="values.disabled"
+      >
+        <Button label="Hover me" />
+      </Tooltip>
+    </template>
+  </ComponentPlayground>
+</template>
diff --git a/docs/components/Docs/sidebarList.ts b/docs/components/Docs/sidebarList.ts
index be945a08d..f48733c68 100644
--- a/docs/components/Docs/sidebarList.ts
+++ b/docs/components/Docs/sidebarList.ts
@@ -55,16 +55,14 @@ export function getSidebarList(
       ],
     },
     {
-      text: 'Design System',
+      text: 'Foundations',
       items: [
-        {
-          text: 'Background Color',
-          link: '/docs/design-system/background-color',
-        },
-        { text: 'Text Design', link: '/docs/design-system/text' },
-        { text: 'Border Color', link: '/docs/design-system/border-color' },
-        { text: 'Drop Shadow', link: '/docs/design-system/drop-shadow' },
-        { text: 'Border Radius', link: '/docs/design-system/border-radius' },
+        { text: 'Base Colors', link: '/docs/foundations/colors/base' },
+        { text: 'Semantic Colors', link: '/docs/foundations/colors/semantic' },
+        { text: 'Typography', link: '/docs/foundations/typography' },
+        { text: 'Radius', link: '/docs/foundations/radius' },
+        { text: 'Elevation', link: '/docs/foundations/elevation' },
+        { text: 'Focus Ring', link: '/docs/foundations/focus-ring' },
       ],
     },
     {
diff --git a/docs/components/Home/ComponentGroups.vue b/docs/components/Home/ComponentGroups.vue
index c808ce434..6bc8ad803 100644
--- a/docs/components/Home/ComponentGroups.vue
+++ b/docs/components/Home/ComponentGroups.vue
@@ -78,7 +78,7 @@ const componentGroups = {
         class="min-h-[130px] bg-surface-gray-2 dark:bg-surface-gray-1 rounded-t"
       />
 
-      <div class="grid gap-2 p-4 bg-surface-cards rounded-b">
+      <div class="grid gap-2 p-4 bg-surface-elevation-1 rounded-b">
         <h3 class="text-lg font-semibold text-ink-gray-9">
           {{ group }}
         </h3>
diff --git a/docs/components/Home/Hero.vue b/docs/components/Home/Hero.vue
index 22db401ed..f61bfb277 100644
--- a/docs/components/Home/Hero.vue
+++ b/docs/components/Home/Hero.vue
@@ -24,7 +24,7 @@ import { withBase } from 'vitepress'
       <div class="flex gap-3 mt-2 mx-auto">
         <a
           :href="withBase('/docs/getting-started')"
-          class="inline-flex items-center gap-2 h-8 px-2.5 rounded text-base font-medium text-ink-white bg-surface-gray-7 hover:bg-surface-gray-6 active:bg-surface-gray-5 transition-colors focus:outline-none focus-visible:ring focus-visible:ring-outline-gray-3"
+          class="inline-flex items-center gap-2 h-8 px-2.5 rounded text-base font-medium text-ink-base bg-surface-gray-10 hover:bg-surface-gray-9 active:bg-surface-gray-8 transition-colors focus:outline-none focus-visible:ring focus-visible:ring-outline-gray-3"
         >
           Get Started
           <LucideRight class="h-4 w-4" />
diff --git a/docs/components/Home/Showcase/col2.vue b/docs/components/Home/Showcase/col2.vue
index a078e5462..ac2e00f4d 100644
--- a/docs/components/Home/Showcase/col2.vue
+++ b/docs/components/Home/Showcase/col2.vue
@@ -177,7 +177,7 @@ const resetState = () => {
           id="balanced"
           name="power"
           defaultChecked
-          class="m-auto bg-surface-gray-2 text-ink-gray-9 dark:text-ink-gray-3 focus:!ring-outline-gray-5 transition-all"
+          class="m-auto bg-surface-gray-2 text-ink-gray-9 dark:text-ink-gray-3 focus:!ring-outline-gray-7 transition-all"
         />
       </label>
 
@@ -194,7 +194,7 @@ const resetState = () => {
 
         <input
           type="radio"
-          class="m-auto bg-surface-gray-2 text-ink-gray-9 dark:text-ink-gray-3 focus:!ring-outline-gray-5 transition-all"
+          class="m-auto bg-surface-gray-2 text-ink-gray-9 dark:text-ink-gray-3 focus:!ring-outline-gray-7 transition-all"
           id="power-save"
           name="power"
         />
@@ -210,7 +210,7 @@ const resetState = () => {
 
         <input
           type="radio"
-          class="m-auto bg-surface-gray-2 text-ink-gray-9 dark:text-ink-gray-3 focus:!ring-outline-gray-5 transition-all"
+          class="m-auto bg-surface-gray-2 text-ink-gray-9 dark:text-ink-gray-3 focus:!ring-outline-gray-7 transition-all"
           id="perf"
           name="power"
         />
diff --git a/docs/components/Home/Showcase/col3.vue b/docs/components/Home/Showcase/col3.vue
index 027df6661..9d8617ca3 100644
--- a/docs/components/Home/Showcase/col3.vue
+++ b/docs/components/Home/Showcase/col3.vue
@@ -111,7 +111,7 @@ const toggledDiv = ref(false);
           v-for="img in imgs"
           :key="img"
           :image="img"
-          class="border-2 border-surface-white -ml-2"
+          class="border-2 border-surface-base -ml-2"
         />
 
         <span class="ml-3 text-sm !text-ink-gray-9">
@@ -172,7 +172,7 @@ const toggledDiv = ref(false);
 
     <div
       class="p-5 transition-all duration-200"
-      :class='{ "border-outline-gray-5": checkboxVal }'
+      :class='{ "border-outline-gray-7": checkboxVal }'
     >
       <Checkbox
         v-model="checkboxVal"
@@ -184,7 +184,7 @@ const toggledDiv = ref(false);
 
     <div
       class="p-4 grid"
-      :class='{ "animate-bounce bg-surface-white shadow-lg": toggledDiv }'
+      :class='{ "animate-bounce bg-surface-base shadow-lg": toggledDiv }'
     >
       <h3 class="text-xl mb-2 font-semibold flex gap-3 justify-between">
         Schedule an event
@@ -210,12 +210,12 @@ const toggledDiv = ref(false);
             <Avatar
               size="sm"
               :image="imgs[0]"
-              class="border-2 border-surface-white"
+              class="border-2 border-surface-base"
             />
             <Avatar
               size="sm"
               :image="imgs[0]"
-              class="border-2 border-surface-white -ml-2"
+              class="border-2 border-surface-base -ml-2"
             />
 
             1 awaiting
diff --git a/docs/components/Home/Showcase/col4.vue b/docs/components/Home/Showcase/col4.vue
index de6a916bf..796626712 100644
--- a/docs/components/Home/Showcase/col4.vue
+++ b/docs/components/Home/Showcase/col4.vue
@@ -73,10 +73,10 @@ const strengthScore = computed(() =>
 
 const strengthLabel = computed(() =>
   strengthScore.value <= 1
-    ? { text: "Weak", class: "text-ink-red-3" }
+    ? { text: "Weak", class: "text-ink-red-6" }
     : strengthScore.value === 2
     ? { text: "Moderate", class: "text-ink-yellow-3" }
-    : { text: "Strong", class: "text-ink-green-3" }
+    : { text: "Strong", class: "text-ink-green-6" }
 );
 
 const notifs = [
diff --git a/docs/components/Home/dummies/Charts.vue b/docs/components/Home/dummies/Charts.vue
index 7028d33ac..865a2621b 100644
--- a/docs/components/Home/dummies/Charts.vue
+++ b/docs/components/Home/dummies/Charts.vue
@@ -7,7 +7,7 @@ let bars = [22, 36, 28, 44, 30, 52, 34, 40, 26, 48, 32, 44, 28];
   <div
     class="p-3 flex items-end gap-6 overflow-hidden"
   >
-    <div class="flex items-end gap-2 w-full bg-surface-cards p-4 pt-8 rounded overflow-hidden shadow-lg dark:shadow-none ">
+    <div class="flex items-end gap-2 w-full bg-surface-elevation-1 p-4 pt-8 rounded overflow-hidden shadow-lg dark:shadow-none ">
       <div
         v-for="(h, i) in bars"
         :key="i"
diff --git a/docs/components/Home/dummies/DataDisplay.vue b/docs/components/Home/dummies/DataDisplay.vue
index ea14d8215..fcff6c5b4 100644
--- a/docs/components/Home/dummies/DataDisplay.vue
+++ b/docs/components/Home/dummies/DataDisplay.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="p-3 grid grid-cols-3 gap-2">
     <div
-      class="rounded bg-surface-cards dark:bg-surface-cards p-2 flex flex-col gap-2 shadow-lg dark:shadow-none "
+      class="rounded bg-surface-elevation-1 dark:bg-surface-elevation-1 p-2 flex flex-col gap-2 shadow-lg dark:shadow-none "
       v-for="_ in 3"
     >
       <div class="h-2 w-8 rounded bg-surface-gray-2" />
diff --git a/docs/components/Home/dummies/Datetime.vue b/docs/components/Home/dummies/Datetime.vue
index a5f54b00f..68d1c084c 100644
--- a/docs/components/Home/dummies/Datetime.vue
+++ b/docs/components/Home/dummies/Datetime.vue
@@ -1,13 +1,13 @@
 <template>
   <div class="p-5 grid gap-3">
     <div
-      class="bg-surface-cards rounded-sm p-2 flex items-center justify-between shadow-lg dark:shadow-none"
+      class="bg-surface-elevation-1 rounded-sm p-2 flex items-center justify-between shadow-lg dark:shadow-none"
     >
       <div class="h-3 w-1/2 bg-surface-gray-3 rounded" />
       <div class="h-4 w-4 bg-surface-gray-4 rounded" />
     </div>
 
-    <div class="bg-surface-cards rounded p-3 grid grid-cols-7 gap-2 shadow-lg dark:shadow-none">
+    <div class="bg-surface-elevation-1 rounded p-3 grid grid-cols-7 gap-2 shadow-lg dark:shadow-none">
       <div
         v-for="i in 14"
         :key="i"
diff --git a/docs/components/Home/dummies/Feedback.vue b/docs/components/Home/dummies/Feedback.vue
index 83e12ca58..6cf301d9b 100644
--- a/docs/components/Home/dummies/Feedback.vue
+++ b/docs/components/Home/dummies/Feedback.vue
@@ -4,7 +4,7 @@
   >
     <div class="flex flex-col gap-3">
       <div
-        class="shadow-lg dark:shadow-none bg-surface-cards border border-outline-gray-3 rounded p-2 w-32 flex items-center gap-2"
+        class="shadow-lg dark:shadow-none bg-surface-elevation-1 border border-outline-gray-3 rounded p-2 w-32 flex items-center gap-2"
       >
         <div class="flex w-full">
           <span class="h-1.5 w-1/2 bg-gray-500 rounded-l mb-1" />
@@ -13,7 +13,7 @@
       </div>
 
       <div
-        class="shadow-lg dark:shadow-none bg-surface-cards border border-surface-gray-3 rounded p-2 w-32 flex items-center gap-2"
+        class="shadow-lg dark:shadow-none bg-surface-elevation-1 border border-surface-gray-3 rounded p-2 w-32 flex items-center gap-2"
       >
         <div class="h-2 w-2 bg-green-400/40 rounded-full flex-shrink-0" />
         <div class="flex-1">
@@ -23,7 +23,7 @@
       </div>
 
       <div
-        class="shadow-lg dark:shadow-none  bg-surface-cards border border-surface-gray-3 rounded p-2 w-32 flex items-center gap-2"
+        class="shadow-lg dark:shadow-none  bg-surface-elevation-1 border border-surface-gray-3 rounded p-2 w-32 flex items-center gap-2"
       >
         <div class="h-2 w-2 bg-red-400/40 rounded-full flex-shrink-0" />
         <div class="flex-1">
diff --git a/docs/components/Home/dummies/Forms.vue b/docs/components/Home/dummies/Forms.vue
index 141390cd0..cc0ba1747 100644
--- a/docs/components/Home/dummies/Forms.vue
+++ b/docs/components/Home/dummies/Forms.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="p-5">
     <div
-      class="bg-surface-cards rounded p-3 grid grid-cols-2 gap-x-3 w-full shadow-lg dark:shadow-none"
+      class="bg-surface-elevation-1 rounded p-3 grid grid-cols-2 gap-x-3 w-full shadow-lg dark:shadow-none"
     >
       <span class="text-ink-gray-4">****</span>
       <span class="text-ink-gray-4">******</span>
@@ -13,7 +13,7 @@
       <span class="h-3 bg-surface-gray-2 rounded-sm -mt-1" />
 
       <span
-        class="bg-surface-gray-7 p-1 mt-3 w-8 rounded-sm col-span-2 ml-auto"
+        class="bg-surface-gray-10 p-1 mt-3 w-8 rounded-sm col-span-2 ml-auto"
       />
     </div>
   </div>
diff --git a/docs/components/Home/dummies/Navigation.vue b/docs/components/Home/dummies/Navigation.vue
index b23dbebfb..b30196816 100644
--- a/docs/components/Home/dummies/Navigation.vue
+++ b/docs/components/Home/dummies/Navigation.vue
@@ -1,18 +1,18 @@
 <script setup lang="ts">
-import { onMounted, onUnmounted, ref } from "vue";
+import { onMounted, onUnmounted, ref } from 'vue'
 
-const active = ref(0);
-let timer: number;
+const active = ref(0)
+let timer: number
 
 onMounted(() => {
   timer = window.setInterval(() => {
-    active.value = (active.value + 1) % 3;
-  }, 500);
-});
+    active.value = (active.value + 1) % 3
+  }, 500)
+})
 
 onUnmounted(() => {
-  clearInterval(timer);
-});
+  clearInterval(timer)
+})
 </script>
 
 <template>
@@ -24,15 +24,12 @@ onUnmounted(() => {
         v-for="(_, i) in 3"
         :key="i"
         class="h-3 w-full rounded-sm transition-all duration-500 ease-in-out"
-        :class='active === i ? "bg-surface-white" : "bg-surface-gray-2"'
+        :class="active === i ? 'bg-surface-base' : 'bg-surface-gray-2'"
       />
     </div>
 
     <div
-      class="
-        mt-2 p-5 animate-pulse rounded flex items-center w-full bg-surface-gray-4
-        dark:bg-surface-gray-3
-      "
+      class="mt-2 p-5 animate-pulse rounded flex items-center w-full bg-surface-gray-4 dark:bg-surface-gray-3"
     />
   </div>
 </template>
diff --git a/docs/components/Home/dummies/Overlays.vue b/docs/components/Home/dummies/Overlays.vue
index c0522a69b..e3246438c 100644
--- a/docs/components/Home/dummies/Overlays.vue
+++ b/docs/components/Home/dummies/Overlays.vue
@@ -4,7 +4,7 @@
   >
     <div class="mx-auto grid gap-2 relative w-1/2">
       <div
-        class="absolute bottom-3 -left-6 bg-surface-cards rounded shadow-md border border-outline-gray-2 p-1.5 w-20"
+        class="absolute bottom-3 -left-6 bg-surface-elevation-1 rounded shadow-md border border-outline-gray-2 p-1.5 w-20"
       >
         <div class="h-2 w-full bg-surface-gray-2 rounded mb-1.5" />
         <div class="h-2 w-3/4 bg-surface-gray-2 rounded mb-1.5" />
@@ -14,7 +14,7 @@
       <span class="h-2 bg-surface-gray-3 w-6 mr-auto p-2 rounded-sm"> </span>
 
       <div
-        class="bg-surface-cards rounded-lg p-3 shadow-2xl border border-outline-gray-2"
+        class="bg-surface-elevation-1 rounded-lg p-3 shadow-2xl border border-outline-gray-2"
       >
         <div class="flex items-center justify-between mb-2">
           <div class="h-2 w-12 bg-surface-gray-3 rounded" />
diff --git a/docs/components/Layout.vue b/docs/components/Layout.vue
index 84a58ba1e..16b1645af 100644
--- a/docs/components/Layout.vue
+++ b/docs/components/Layout.vue
@@ -42,7 +42,7 @@ const { frontmatter } = useData()
               />
               <PrevNextBtns />
             </main>
-            <OnThisPage />
+            <OnThisPage v-if="frontmatter.outline !== false" />
           </div>
         </div>
       </div>
diff --git a/docs/components/Navbar.vue b/docs/components/Navbar.vue
index d1ed3c1ed..0624e29cc 100644
--- a/docs/components/Navbar.vue
+++ b/docs/components/Navbar.vue
@@ -69,7 +69,7 @@ const devBranch = typeof __DEV_BRANCH__ !== 'undefined' ? __DEV_BRANCH__ : ''
 </script>
 
 <template>
-  <nav class="border-b sticky top-0 bg-surface-white z-10">
+  <nav class="border-b sticky top-0 bg-surface-base z-10">
     <SearchPopup v-model:open="state.searchDialog" />
 
     <div
@@ -152,6 +152,5 @@ const devBranch = typeof __DEV_BRANCH__ !== 'undefined' ? __DEV_BRANCH__ : ''
         </a>
       </div>
     </div>
-
   </nav>
 </template>
diff --git a/docs/components/foundations/ElevationPreview.vue b/docs/components/foundations/ElevationPreview.vue
new file mode 100644
index 000000000..99388f8b7
--- /dev/null
+++ b/docs/components/foundations/ElevationPreview.vue
@@ -0,0 +1,47 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { TabButtons } from 'frappe-ui'
+import { useTheme, setTheme } from '../../composables/useTheme'
+
+// The six shadow steps, all sat on one elevated surface so the scale reads as
+// shadow-only. In light mode `surface-elevation-2` is white, so depth comes
+// from the shadow; in dark mode it steps lighter than the page and carries the
+// lift the (faded) shadow can't. Real per-component pairings live in the
+// Surface pairing table.
+const STEPS = ['sm', 'base', 'md', 'lg', 'xl', '2xl'] as const
+
+// The switcher drives the global theme, so the page and these cards swap
+// together, with no detached preview, and `bg-surface-*` resolves straight from
+// the document's `data-theme`.
+const globalTheme = useTheme()
+const previewTheme = computed({
+  get: () => globalTheme.value,
+  set: (next) => setTheme(next),
+})
+
+const modeButtons = [
+  { label: 'Light', value: 'light' },
+  { label: 'Dark', value: 'dark' },
+]
+</script>
+
+<template>
+  <div>
+    <div class="flex justify-end mb-3">
+      <TabButtons :buttons="modeButtons" v-model="previewTheme" class="w-fit" />
+    </div>
+
+    <div class="grid grid-cols-2 sm:grid-cols-3 gap-x-6 gap-y-8 py-4">
+      <div v-for="step in STEPS" :key="step" class="grid gap-3">
+        <div
+          class="h-24 rounded-lg bg-surface-elevation-2"
+          :class="`shadow-${step}`"
+        ></div>
+        <div class="grid gap-0.5">
+          <span class="text-2xs font-mono text-ink-gray-7">shadow-{{ step }}</span>
+          <span class="text-2xs font-mono text-ink-gray-5">--elevation-{{ step }}</span>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/docs/components/foundations/FocusRingPreview.vue b/docs/components/foundations/FocusRingPreview.vue
new file mode 100644
index 000000000..ccf4f7a1d
--- /dev/null
+++ b/docs/components/foundations/FocusRingPreview.vue
@@ -0,0 +1,82 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { Button, TextInput, Select, Checkbox, Switch } from 'frappe-ui'
+
+// Live controls to tab through. Each renders a native focusable element, so
+// the global :focus-visible ring fires on keyboard focus.
+const text = ref('')
+const choice = ref('One')
+const checked = ref(true)
+const enabled = ref(true)
+
+// Literal class strings on purpose: the focus-ring utilities are registered
+// via `addComponents`, so Tailwind's JIT only emits them when it scans the
+// exact class name in source. A computed `focus-ring-${name}` would never be
+// generated, so the colored variants previously rendered nothing.
+const RINGS = [
+  { label: 'focus-ring', variable: '--focus-default', ringClass: 'focus-ring' },
+  {
+    label: 'focus-ring-red',
+    variable: '--focus-red',
+    ringClass: 'focus-ring-red',
+  },
+  {
+    label: 'focus-ring-green',
+    variable: '--focus-green',
+    ringClass: 'focus-ring-green',
+  },
+  {
+    label: 'focus-ring-amber',
+    variable: '--focus-amber',
+    ringClass: 'focus-ring-amber',
+  },
+  {
+    label: 'focus-ring-blue',
+    variable: '--focus-blue',
+    ringClass: 'focus-ring-blue',
+  },
+  {
+    label: 'focus-ring-violet',
+    variable: '--focus-violet',
+    ringClass: 'focus-ring-violet',
+  },
+] as const
+</script>
+
+<template>
+  <div class="grid gap-10">
+    <div class="flex flex-wrap items-center gap-4">
+      <Button label="Button" />
+      <TextInput v-model="text" placeholder="Text input" />
+      <Select v-model="choice" :options="['One', 'Two', 'Three']" />
+      <Checkbox v-model="checked" label="Checkbox" />
+      <Switch v-model="enabled" label="Switch" />
+    </div>
+
+    <div class="grid gap-4">
+      <p class="text-p-sm text-ink-gray-6 m-0">
+        Retheme a ring with
+        <code class="text-ink-gray-8"
+          >focus-visible:focus-ring-&lt;color&gt;</code
+        >
+        like red for errors or green for success.
+      </p>
+      <div class="grid grid-cols-2 sm:grid-cols-3 gap-x-6 gap-y-7">
+        <div v-for="ring in RINGS" :key="ring.label" class="grid gap-3">
+          <div
+            class="h-16 rounded-md bg-surface-base"
+            :class="ring.ringClass"
+          ></div>
+          <div class="grid gap-0.5">
+            <span class="text-2xs font-mono text-ink-gray-7">{{
+              ring.label
+            }}</span>
+            <span class="text-2xs font-mono text-ink-gray-5">{{
+              ring.variable
+            }}</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/docs/components/foundations/PalettePage.vue b/docs/components/foundations/PalettePage.vue
new file mode 100644
index 000000000..3fdfcf297
--- /dev/null
+++ b/docs/components/foundations/PalettePage.vue
@@ -0,0 +1,226 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { TabButtons } from 'frappe-ui'
+import { useTheme, setTheme } from '../../composables/useTheme'
+import colors from '../../../tailwind/colors.json'
+
+type Mode = 'lightMode' | 'darkMode'
+
+// The switcher drives the global theme so the whole page matches the example.
+const globalTheme = useTheme()
+const mode = computed<Mode>({
+  get: () => (globalTheme.value === 'dark' ? 'darkMode' : 'lightMode'),
+  set: (next) => setTheme(next === 'darkMode' ? 'dark' : 'light'),
+})
+
+const modeButtons = [
+  { label: 'Light', value: 'lightMode' },
+  { label: 'Dark', value: 'darkMode' },
+]
+
+const FAMILIES: { key: string; label: string }[] = [
+  { key: 'gray', label: 'Gray' },
+  { key: 'blue', label: 'Blue' },
+  { key: 'green', label: 'Green' },
+  { key: 'red', label: 'Red' },
+  { key: 'orange', label: 'Orange' },
+  { key: 'amber', label: 'Amber' },
+  { key: 'yellow', label: 'Yellow' },
+  { key: 'teal', label: 'Teal' },
+  { key: 'cyan', label: 'Cyan' },
+  { key: 'purple', label: 'Purple' },
+  { key: 'pink', label: 'Pink' },
+  { key: 'violet', label: 'Violet' },
+]
+
+const ALPHA_FAMILIES: { key: string; label: string }[] = [
+  { key: 'gray-alpha', label: 'Gray Alpha' },
+]
+
+const NEUTRALS: { key: string; label: string; value: string }[] = [
+  { key: 'white', label: 'white', value: colors.neutral.white },
+  { key: 'black', label: 'black', value: colors.neutral.black },
+]
+
+const families = computed(() => {
+  const modeData = colors[mode.value]
+  return FAMILIES.map((f) => ({
+    ...f,
+    shades: modeData[f.key] ? Object.entries(modeData[f.key]) : [],
+  })).filter((f) => f.shades.length > 0)
+})
+
+const alphaFamilies = computed(() => {
+  const modeData = colors[mode.value]
+  return ALPHA_FAMILIES.map((f) => ({
+    ...f,
+    shades: modeData[f.key] ? Object.entries(modeData[f.key]) : [],
+  })).filter((f) => f.shades.length > 0)
+})
+
+const overlayWhite = computed(
+  () => Object.entries(colors.overlay.white) as [string, string][],
+)
+const overlayBlack = computed(
+  () => Object.entries(colors.overlay.black) as [string, string][],
+)
+</script>
+
+<template>
+  <TabButtons :buttons="modeButtons" v-model="mode" class="w-fit" />
+  <div class="grid gap-6 mt-6">
+    <section
+      v-for="family in families"
+      :key="family.key"
+      :id="family.key"
+      class="grid gap-3"
+    >
+      <h2 class="text-xl font-semibold text-ink-gray-8 m-0">
+        {{ family.label }}
+      </h2>
+      <div
+        class="grid gap-1.5"
+        :style="{
+          gridTemplateColumns: `repeat(${family.shades.length}, minmax(0, 1fr))`,
+        }"
+      >
+        <div
+          v-for="[shade, value] in family.shades"
+          :key="shade"
+          class="grid gap-1 text-left"
+        >
+          <div
+            class="aspect-square rounded"
+            :style="{ background: value as string }"
+          ></div>
+          <div class="grid gap-1">
+            <span class="text-xs font-medium text-ink-gray-7">
+              {{ shade }}
+            </span>
+            <span class="text-2xs text-ink-gray-5 font-mono uppercase">
+              {{ value }}
+            </span>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <section
+      v-for="family in alphaFamilies"
+      :key="family.key"
+      :id="family.key"
+      class="grid gap-3"
+    >
+      <h2 class="text-xl font-semibold text-ink-gray-8 m-0">
+        {{ family.label }}
+      </h2>
+      <div
+        class="grid gap-1.5 p-2 -mx-2 rounded"
+        :style="{
+          gridTemplateColumns: `repeat(${family.shades.length}, minmax(0, 1fr))`,
+          background:
+            mode === 'lightMode'
+              ? 'repeating-conic-gradient(#f3f3f3 0% 25%, #ffffff 0% 50%) 50% / 16px 16px'
+              : 'repeating-conic-gradient(#242424 0% 25%, #2b2b2b 0% 50%) 50% / 16px 16px',
+        }"
+      >
+        <div
+          v-for="[shade, value] in family.shades"
+          :key="shade"
+          class="grid gap-1 text-left"
+        >
+          <div
+            class="aspect-square rounded"
+            :style="{ background: value as string }"
+          ></div>
+          <div
+            class="grid gap-1 bg-surface-base/80 dark:bg-surface-gray-1/80 rounded px-1"
+          >
+            <span class="text-xs font-medium text-ink-gray-7">
+              {{ shade }}
+            </span>
+            <span class="text-2xs text-ink-gray-5 font-mono uppercase truncate">
+              {{ value }}
+            </span>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <section id="overlays" class="grid gap-3">
+      <h2 class="text-xl font-semibold text-ink-gray-8 m-0">Overlays</h2>
+
+      <div class="grid gap-4">
+        <div class="grid gap-1.5">
+          <span class="text-sm text-ink-gray-6">white-overlay</span>
+          <div
+            class="grid gap-1.5"
+            :style="{
+              gridTemplateColumns: `repeat(${overlayWhite.length}, minmax(0, 1fr))`,
+            }"
+          >
+            <div
+              v-for="[shade, value] in overlayWhite"
+              :key="shade"
+              class="grid gap-1 text-left"
+            >
+              <div
+                class="aspect-square rounded"
+                :style="{
+                  background: `linear-gradient(${value}, ${value}), #0f0f0f`,
+                }"
+              ></div>
+              <span class="text-2xs text-ink-gray-7 font-mono">{{ shade }}</span>
+            </div>
+          </div>
+        </div>
+        <div class="grid gap-1.5">
+          <span class="text-sm text-ink-gray-6">black-overlay</span>
+          <div
+            class="grid gap-1.5"
+            :style="{
+              gridTemplateColumns: `repeat(${overlayBlack.length}, minmax(0, 1fr))`,
+            }"
+          >
+            <div
+              v-for="[shade, value] in overlayBlack"
+              :key="shade"
+              class="grid gap-1 text-left"
+            >
+              <div
+                class="aspect-square rounded"
+                :style="{
+                  background: `linear-gradient(${value}, ${value}), #ffffff`,
+                }"
+              ></div>
+              <span class="text-2xs text-ink-gray-7 font-mono">{{
+                shade
+              }}</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <section id="neutrals" class="grid gap-3">
+      <h2 class="text-xl font-semibold text-ink-gray-8 m-0">Neutrals</h2>
+      <div
+        class="grid gap-1.5"
+        :style="{ gridTemplateColumns: `repeat(11, minmax(0, 1fr))` }"
+      >
+        <div v-for="n in NEUTRALS" :key="n.key" class="grid gap-1 text-left">
+          <div
+            class="aspect-square rounded border border-outline-gray-2"
+            :style="{ background: n.value }"
+          ></div>
+          <div class="grid gap-1">
+            <span class="text-xs font-medium text-ink-gray-7">{{ n.label }}</span>
+            <span class="text-2xs text-ink-gray-5 font-mono uppercase">{{
+              n.value
+            }}</span>
+          </div>
+        </div>
+      </div>
+    </section>
+  </div>
+</template>
diff --git a/docs/components/foundations/RadiusPage.vue b/docs/components/foundations/RadiusPage.vue
new file mode 100644
index 000000000..614c785f8
--- /dev/null
+++ b/docs/components/foundations/RadiusPage.vue
@@ -0,0 +1,79 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import radius from '../../../tailwind/generated/radius.json'
+
+const NUMERIC_KEYS = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9']
+// Display order for the unified scale: numerics in order, then `full`.
+const SCALE_KEYS = [...NUMERIC_KEYS, 'full']
+
+// Map each alias (`rounded-sm`, `rounded-md`, `rounded`, …) to the numeric
+// scale entry that shares its value. The page renders one row per scale
+// step; aliases land alongside their numeric twin.
+const ALIASES_BY_NUMERIC = computed(() => {
+  const table = radius as Record<string, string>
+  const aliases: Record<string, string[]> = {}
+  const aliasKeys = Object.keys(table).filter(
+    (k) => !NUMERIC_KEYS.includes(k) && k !== 'full',
+  )
+  for (const aliasKey of aliasKeys) {
+    const value = table[aliasKey]
+    const numeric = NUMERIC_KEYS.find((n) => table[n] === value)
+    if (!numeric) continue
+    const cls = aliasKey === 'DEFAULT' ? 'rounded' : `rounded-${aliasKey}`
+    ;(aliases[numeric] ||= []).push(cls)
+  }
+  return aliases
+})
+
+const rows = computed(() =>
+  SCALE_KEYS.filter((k) => k in radius).map((k) => ({
+    name: k,
+    value: (radius as Record<string, string>)[k],
+    aliases: ALIASES_BY_NUMERIC.value[k] || [],
+  })),
+)
+</script>
+
+<template>
+  <div class="grid gap-8">
+    <section class="grid gap-4">
+      <div class="grid divide-y divide-outline-gray-1">
+        <div
+          v-for="r in rows"
+          :key="r.name"
+          class="flex w-full items-center gap-4 py-3 text-left"
+        >
+          <div
+            class="size-16 shrink-0 bg-surface-gray-3 border border-outline-gray-3"
+            :style="{ borderRadius: r.value }"
+          ></div>
+          <div class="grid gap-1 min-w-0 flex-1">
+            <span class="text-sm font-mono text-ink-gray-8 truncate">
+              rounded-{{ r.name }}
+            </span>
+            <span class="text-xs font-mono text-ink-gray-5 truncate">
+              --radius-{{ r.name }}
+            </span>
+          </div>
+          <div
+            v-if="r.aliases.length"
+            class="flex flex-wrap gap-1.5 shrink-0 justify-end"
+          >
+            <span
+              v-for="alias in r.aliases"
+              :key="alias"
+              class="text-2xs font-mono text-ink-gray-6 bg-surface-gray-2 rounded px-1.5 py-0.5"
+            >
+              {{ alias }}
+            </span>
+          </div>
+          <span
+            class="text-xs font-mono text-ink-gray-5 shrink-0 tabular-nums w-12 text-right"
+          >
+            {{ r.value }}
+          </span>
+        </div>
+      </div>
+    </section>
+  </div>
+</template>
diff --git a/docs/components/foundations/SemanticPage.vue b/docs/components/foundations/SemanticPage.vue
new file mode 100644
index 000000000..be49d6d0c
--- /dev/null
+++ b/docs/components/foundations/SemanticPage.vue
@@ -0,0 +1,142 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { TabButtons } from 'frappe-ui'
+import { useTheme, setTheme } from '../../composables/useTheme'
+import colors from '../../../tailwind/colors.json'
+
+type Mode = 'light' | 'dark'
+
+// The switcher drives the global theme so the whole page matches the example.
+const globalTheme = useTheme()
+const mode = computed<Mode>({
+  get: () => globalTheme.value,
+  set: (next) => setTheme(next),
+})
+
+const modeButtons = [
+  { label: 'Light', value: 'light' },
+  { label: 'Dark', value: 'dark' },
+]
+
+function resolveRef(ref: string): string {
+  const [bucket, family, shade] = ref.split('/')
+  if (bucket === 'neutral') return colors.neutral[family as 'white' | 'black']
+  if (bucket === 'overlay')
+    return colors.overlay[family as 'white' | 'black'][shade]
+  const modeData = colors[bucket as 'lightMode' | 'darkMode'] as Record<
+    string,
+    Record<string, string>
+  >
+  return modeData?.[family]?.[shade] ?? ref
+}
+
+// "lightMode/gray/50" → "gray-50"
+// "neutral/white"     → "neutral-white"
+// "overlay/black/10"  → "overlay-black-10"
+function formatRef(ref: string): string {
+  const parts = ref.split('/')
+  if (parts[0] === 'lightMode' || parts[0] === 'darkMode') parts.shift()
+  return parts.join('-')
+}
+
+type Group = {
+  category: 'surface' | 'surface-alpha' | 'ink' | 'outline' | 'outline-alpha'
+  prefix: string
+  description: string
+}
+
+const GROUPS: Group[] = [
+  {
+    category: 'surface',
+    prefix: 'bg-surface-',
+    description:
+      'Use for cards, panels, page chrome, alert backgrounds. Steps from soft (gray-1) to inverted (gray-7).',
+  },
+  {
+    category: 'surface-alpha',
+    prefix: 'bg-surface-alpha-',
+    description:
+      'Use when a surface needs transparency over variable backgrounds, overlays, or layered chrome.',
+  },
+  {
+    category: 'ink',
+    prefix: 'text-ink-',
+    description:
+      'Use for typography, icons, and any glyph-style fill. gray-8 is body text; gray-4/5 is secondary.',
+  },
+  {
+    category: 'outline',
+    prefix: 'border-outline-',
+    description: 'Use for borders, dividers, focus rings, outlined controls.',
+  },
+  {
+    category: 'outline-alpha',
+    prefix: 'border-outline-alpha-',
+    description:
+      'Use for borders and dividers that should preserve translucency across layered surfaces.',
+  },
+]
+
+function pickEntries(category: Group['category']) {
+  const data = colors.themedVariables[mode.value][category] as Record<
+    string,
+    string
+  >
+  return Object.entries(data).map(([name, ref]) => ({
+    name,
+    ref,
+    refLabel: formatRef(ref),
+    value: resolveRef(ref),
+  }))
+}
+
+const sections = computed(() =>
+  GROUPS.map((g) => ({ ...g, entries: pickEntries(g.category) })),
+)
+</script>
+
+<template>
+  <div class="grid gap-14">
+    <TabButtons :buttons="modeButtons" v-model="mode" class="w-fit" />
+
+    <section
+      v-for="section in sections"
+      :key="section.category"
+      :id="section.category"
+      class="grid gap-4"
+    >
+      <div class="grid gap-1">
+        <h2 class="text-xl font-semibold text-ink-gray-8 m-0 capitalize">
+          {{ section.category }}
+        </h2>
+        <p class="text-p-sm text-ink-gray-5 m-0">
+          {{ section.description }}
+        </p>
+      </div>
+
+      <div class="grid divide-y divide-outline-gray-1">
+        <div
+          v-for="entry in section.entries"
+          :key="entry.name"
+          class="flex w-full items-center gap-4 py-3 text-left"
+        >
+          <div
+            class="size-10 rounded-md shrink-0"
+            :style="{ background: entry.value }"
+          ></div>
+          <div class="grid gap-1 min-w-0 flex-1">
+            <span class="text-sm font-mono text-ink-gray-8 truncate">
+              {{ section.prefix }}{{ entry.name }}
+            </span>
+            <span class="text-xs font-mono text-ink-gray-5 truncate">
+              → {{ entry.refLabel }}
+            </span>
+          </div>
+          <span class="text-xs font-mono text-ink-gray-5 shrink-0 tabular-nums">
+            {{ entry.value }}
+          </span>
+        </div>
+      </div>
+    </section>
+  </div>
+</template>
diff --git a/docs/components/foundations/TypographyPage.vue b/docs/components/foundations/TypographyPage.vue
new file mode 100644
index 000000000..6aee1d4d6
--- /dev/null
+++ b/docs/components/foundations/TypographyPage.vue
@@ -0,0 +1,250 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+import { TabButtons } from 'frappe-ui'
+import typography from '../../../tailwind/generated/typography.json'
+
+type SizeMeta = {
+  lineHeight?: string
+  letterSpacing?: string
+  fontWeight?: string
+}
+type SizeEntry = [string, SizeMeta]
+type Weight = 'regular' | 'medium' | 'semibold' | 'bold' | 'black'
+type TrackGroup = 'text' | 'paragraph'
+
+// Group sizes for the page. Order matters: it drives display order.
+const TEXT_KEYS = ['2xs', 'xs', 'sm', 'base', 'lg', 'xl', '2xl', '3xl']
+const DISPLAY_KEYS = [
+  '4xl',
+  '5xl',
+  '6xl',
+  '7xl',
+  '8xl',
+  '9xl',
+  '10xl',
+  '11xl',
+  '12xl',
+]
+const PARAGRAPH_KEYS = ['xs', 'sm', 'base', 'lg', 'xl']
+
+// One weight drives the whole page. Regular is the bare `text-<size>` token;
+// the rest map to the `text-<size>-<weight>` named styles.
+const weight = ref<Weight>('regular')
+const weightButtons = [
+  { label: 'Regular (420)', value: 'regular' },
+  { label: 'Medium (500)', value: 'medium' },
+  { label: 'Semibold (600)', value: 'semibold' },
+  { label: 'Bold (700)', value: 'bold' },
+  { label: 'Black (800)', value: 'black' },
+]
+
+const fontWeight = computed(
+  () => (typography.fontWeight as Record<Weight, number>)[weight.value],
+)
+
+// Resolve the real token class for the current weight, so the sample carries
+// the exact `text-<size>-<weight>` utility (inspectable, not inline styles).
+// A few weight pairings aren't exported (e.g. base+black), so fall back to the
+// bare regular token, which is the only style that ships for them.
+function tokenClass(prefix: string, group: TrackGroup, size: string): string {
+  if (weight.value === 'regular') return `${prefix}${size}`
+  const byWeight = (
+    typography.tracking as Record<
+      TrackGroup,
+      Record<string, Record<string, string>>
+    >
+  )[group]?.[size]
+  return byWeight && weight.value in byWeight
+    ? `${prefix}${size}-${weight.value}`
+    : `${prefix}${size}`
+}
+
+// Figma stores line-height as a px value or a unitless ratio; designers think
+// in ratios (lh / size). Normalize both forms to a ratio for the spec column.
+function lineHeightRatio(
+  size: string,
+  lineHeight?: string,
+): string | undefined {
+  if (!lineHeight) return undefined
+  // Already a unitless ratio (e.g. "1.5").
+  if (!lineHeight.endsWith('px')) {
+    return lineHeight.replace(/\.?0+$/, '')
+  }
+  const sizePx = parseFloat(size)
+  const lhPx = parseFloat(lineHeight)
+  if (!sizePx || !lhPx) return undefined
+  return (lhPx / sizePx).toFixed(2).replace(/\.?0+$/, '')
+}
+
+function entry(key: string) {
+  const v = (typography.fontSize as Record<string, SizeEntry>)[key]
+  if (!v) return null
+  const [size, meta] = v
+  return {
+    name: key,
+    size,
+    lhRatio: lineHeightRatio(size, meta?.lineHeight),
+  }
+}
+
+const text = computed(
+  () =>
+    TEXT_KEYS.map(entry).filter(Boolean) as NonNullable<
+      ReturnType<typeof entry>
+    >[],
+)
+const display = computed(
+  () =>
+    DISPLAY_KEYS.map(entry).filter(Boolean) as NonNullable<
+      ReturnType<typeof entry>
+    >[],
+)
+
+type Para = Record<string, { lineHeight?: string; letterSpacing?: string }>
+const paragraph = computed(
+  () =>
+    PARAGRAPH_KEYS.map((key) => {
+      const base = (typography.fontSize as Record<string, SizeEntry>)[key]
+      const p = (typography.paragraph as Para)[key]
+      if (!base || !p) return null
+      return {
+        name: key,
+        size: base[0],
+        lhRatio: lineHeightRatio(base[0], p.lineHeight),
+      }
+    }).filter(Boolean) as { name: string; size: string; lhRatio?: string }[],
+)
+
+const family = (typography.fontFamily as Record<string, string>).text || 'Inter'
+
+const sample = 'The quick brown fox jumps over the lazy dog'
+const displaySample = 'Build something great'
+const paragraphSample =
+  'Frappe UI uses one type scale across every screen, so the same sizes work in dense tables and on a marketing page without extra CSS.'
+</script>
+
+<template>
+  <div class="grid gap-14">
+    <header class="grid gap-6">
+      <div
+        class="rounded-xl border border-outline-gray-2 bg-surface-gray-1 px-6 py-5 grid gap-3"
+      >
+        <div class="flex items-baseline justify-between gap-4">
+          <span class="text-2xl font-semibold text-ink-gray-8">{{
+            family
+          }}</span>
+        </div>
+        <div class="text-4xl text-ink-gray-8 leading-tight">
+          AaBbCcDdEe 0123456789
+        </div>
+      </div>
+
+      <div class="flex items-center gap-3 flex-wrap">
+        <TabButtons :buttons="weightButtons" v-model="weight" class="w-fit" />
+      </div>
+    </header>
+
+    <section class="grid gap-5">
+      <div class="grid gap-1">
+        <h2 class="text-xl font-semibold text-ink-gray-8 m-0">Text sizes</h2>
+        <p class="text-p-sm text-ink-gray-5 m-0">
+          Sizes for UI text like labels, controls, table cells, and body copy.
+        </p>
+      </div>
+      <div
+        class="grid divide-y divide-outline-gray-1 border-y border-outline-gray-1"
+      >
+        <div
+          v-for="item in text"
+          :key="item.name"
+          class="flex items-center gap-6 py-4"
+        >
+          <div class="w-44 shrink-0 grid gap-0.5">
+            <span class="text-sm font-mono text-ink-gray-8">
+              {{ tokenClass('text-', 'text', item.name) }}
+            </span>
+            <span class="text-2xs font-mono text-ink-gray-5">
+              {{ item.size
+              }}<template v-if="item.lhRatio"> · {{ item.lhRatio }}</template>
+            </span>
+          </div>
+          <div
+            class="min-w-0 flex-1 truncate text-ink-gray-8"
+            :class="tokenClass('text-', 'text', item.name)"
+          >
+            {{ sample }}
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <section class="grid gap-5">
+      <div class="grid gap-1">
+        <h2 class="text-xl font-semibold text-ink-gray-8 m-0">Display sizes</h2>
+        <p class="text-p-sm text-ink-gray-5 m-0">
+          Larger sizes for marketing, landing pages, and headings.
+        </p>
+      </div>
+      <div
+        class="grid divide-y divide-outline-gray-1 border-y border-outline-gray-1"
+      >
+        <div
+          v-for="item in display"
+          :key="item.name"
+          class="flex items-center gap-6 py-6 overflow-hidden"
+        >
+          <div class="w-44 shrink-0 grid gap-0.5">
+            <span class="text-sm font-mono text-ink-gray-8">
+              {{ tokenClass('text-', 'text', item.name) }}
+            </span>
+            <span class="text-2xs font-mono text-ink-gray-5">
+              {{ item.size
+              }}<template v-if="item.lhRatio"> · {{ item.lhRatio }}</template>
+            </span>
+          </div>
+          <div
+            class="min-w-0 flex-1 truncate whitespace-nowrap leading-tight text-ink-gray-8"
+            :class="tokenClass('text-', 'text', item.name)"
+          >
+            {{ displaySample }}
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <section class="grid gap-5">
+      <div class="grid gap-1">
+        <h2 class="text-xl font-semibold text-ink-gray-8 m-0">Paragraph</h2>
+        <p class="text-p-sm text-ink-gray-5 m-0">
+          The <code class="text-ink-gray-8">text-p-*</code> variants use looser
+          line-height and tracking for multi-line text.
+        </p>
+      </div>
+      <div
+        class="grid divide-y divide-outline-gray-1 border-y border-outline-gray-1"
+      >
+        <div
+          v-for="item in paragraph"
+          :key="item.name"
+          class="flex items-start gap-6 py-5"
+        >
+          <div class="w-44 shrink-0 grid gap-0.5 pt-0.5">
+            <span class="text-sm font-mono text-ink-gray-8">
+              {{ tokenClass('text-p-', 'paragraph', item.name) }}
+            </span>
+            <span class="text-2xs font-mono text-ink-gray-5">
+              {{ item.size
+              }}<template v-if="item.lhRatio"> · {{ item.lhRatio }}</template>
+            </span>
+          </div>
+          <div
+            class="min-w-0 flex-1 max-w-xl text-ink-gray-7"
+            :class="tokenClass('text-p-', 'paragraph', item.name)"
+          >
+            {{ paragraphSample }}
+          </div>
+        </div>
+      </div>
+    </section>
+  </div>
+</template>
diff --git a/docs/components/tokens/BgColor.vue b/docs/components/tokens/BgColor.vue
index eb1a4159e..71c09e018 100644
--- a/docs/components/tokens/BgColor.vue
+++ b/docs/components/tokens/BgColor.vue
@@ -24,7 +24,7 @@ const copyToClipboard = (txt: string) => {
     Background colors in Frappe UI are prefixed with "surface", for example:
     surface-gray2
     <br />
-    classes would be: bg-surface-gray-2, bg-surface-cards etc
+    classes would be: bg-surface-gray-2, bg-surface-elevation-1 etc
   </p>
 
   <div class="flex flex-wrap gap-5">
diff --git a/docs/components/tokens/BorderRadius.vue b/docs/components/tokens/BorderRadius.vue
index 6d55df72d..8d924d2a8 100644
--- a/docs/components/tokens/BorderRadius.vue
+++ b/docs/components/tokens/BorderRadius.vue
@@ -33,7 +33,7 @@ const data = props.data.slice(0, props.data.length - 1);
         class="
           border grid gap-3
           border-outline-gray-2
-          bg-surface-cards
+          bg-surface-elevation-1
           p-4
         "
         :style="{ borderRadius: radius.value }"
@@ -59,7 +59,7 @@ const data = props.data.slice(0, props.data.length - 1);
           </span>
 
           <button
-            class="px-3 py-1 text-xs border bg-surface-white"
+            class="px-3 py-1 text-xs border bg-surface-base"
             :style="{ borderRadius: radius.value }"
           >
             Add
diff --git a/docs/components/tokens/DropShadow.vue b/docs/components/tokens/DropShadow.vue
deleted file mode 100644
index e07d6e50d..000000000
--- a/docs/components/tokens/DropShadow.vue
+++ /dev/null
@@ -1,24 +0,0 @@
-<script setup lang="ts">
-const classNames = [
-  "shadow-none",
-  "shadow-sm",
-  "shadow-md",
-  "shadow-lg",
-  "shadow-xl",
-  "shadow-2xl",
-];
-</script>
-
-<template>
-  <div class="grid grid-cols-2 sm:grid-cols-3 gap-6 mt-10">
-    <div v-for="item in classNames" class="grid gap-3">
-      <span>{{ item }} </span>
-
-      <div
-        :class="item"
-        class="rounded border grid gap-3 p-3 bg-surface-cards h-20"
-      >
-      </div>
-    </div>
-  </div>
-</template>
diff --git a/docs/composables/useTheme.ts b/docs/composables/useTheme.ts
new file mode 100644
index 000000000..64fc68296
--- /dev/null
+++ b/docs/composables/useTheme.ts
@@ -0,0 +1,39 @@
+import { onBeforeUnmount, onMounted, ref } from 'vue'
+
+export type DocsTheme = 'light' | 'dark'
+
+// Navbar.vue sets `data-theme` on <html>; observe it so other pages can
+// react to global theme toggles without coupling to the Navbar component.
+export function useTheme() {
+  const theme = ref<DocsTheme>('light')
+  let observer: MutationObserver | null = null
+
+  const read = () => {
+    const value = document.documentElement.getAttribute('data-theme')
+    theme.value = value === 'dark' ? 'dark' : 'light'
+  }
+
+  onMounted(() => {
+    read()
+    observer = new MutationObserver(read)
+    observer.observe(document.documentElement, {
+      attributes: true,
+      attributeFilter: ['data-theme'],
+    })
+  })
+
+  onBeforeUnmount(() => {
+    observer?.disconnect()
+    observer = null
+  })
+
+  return theme
+}
+
+// Flip the global theme the same way Navbar.vue does, so an in-page Light/Dark
+// switcher drives the whole document (not a detached preview). useTheme()'s
+// observer picks the change up reactively.
+export function setTheme(value: DocsTheme) {
+  document.documentElement.setAttribute('data-theme', value)
+  localStorage.theme = value
+}
diff --git a/docs/content/docs/design-system/[token].md b/docs/content/docs/design-system/[token].md
deleted file mode 100644
index 8234e7149..000000000
--- a/docs/content/docs/design-system/[token].md
+++ /dev/null
@@ -1,23 +0,0 @@
-<script setup>
-import { useData } from 'vitepress'
-import BgColor from '@/components/tokens/BgColor.vue'
-import BorderColor from '@/components/tokens/BorderColor.vue'
-import Text from '@/components/tokens/Text.vue'
-import DropShadow from '@/components/tokens/DropShadow.vue'
-import BorderRadius from '@/components/tokens/BorderRadius.vue'
-
-const { params } = useData()
-const data = params.value.data
-
-const title = params.value.token.replace('-', ' ')
-</script>
-
-<h1 class='capitalize mb-5'>
-{{ title }}
-</h1>
-
-<BgColor v-if="params.token =='background-color'"  :data="data" />
-<BorderColor v-if="params.token =='border-color'"  :data="data" />
-<Text v-if="params.token =='text'"  :data="data" />
-<DropShadow v-if="params.token =='drop-shadow'"  />
-<BorderRadius v-if="params.token =='border-radius'"  :data="data" />
diff --git a/docs/content/docs/design-system/[token].paths.ts b/docs/content/docs/design-system/[token].paths.ts
deleted file mode 100644
index 356bcbb51..000000000
--- a/docs/content/docs/design-system/[token].paths.ts
+++ /dev/null
@@ -1,125 +0,0 @@
-import resolveConfig from 'tailwindcss/resolveConfig'
-import config from '../../../../tailwind.config'
-
-const designTokens = resolveConfig(config).theme
-
-const getBgColors = () => {
-  let colors: { name: string; value?: string }[] = []
-  const list = designTokens.backgroundColor.surface
-
-  for (const [key, value] of Object.entries(list)) {
-    const classname = `bg-surface-${key}`
-
-    if (colors.length > 0) {
-      const lastcolor = colors.at(-1).name.split('-')[2]
-      const curColor = key.split('-')[0]
-      if (lastcolor !== curColor) colors.push({ name: curColor })
-    }
-
-    colors.push({ name: classname, value })
-  }
-
-  return colors
-}
-
-const bgColors = getBgColors()
-
-const getTextColors = () => {
-  let colors: { name: string; value?: string }[] = []
-  const list = designTokens.textColor.ink
-
-  for (const [key, value] of Object.entries(list)) {
-    const classname = `text-ink-${key}`
-
-    if (colors.length > 0) {
-      const lastcolor = colors.at(-1).name.split('-')[2]
-      const curColor = key.split('-')[0]
-      if (lastcolor !== curColor) colors.push({ name: curColor })
-    }
-
-    colors.push({ name: classname, value })
-  }
-
-  return colors
-}
-
-const txtColors = getTextColors()
-
-const getBorderColors = () => {
-  let colors: { name: string; value?: string }[] = []
-  const list = designTokens.borderColor.outline
-
-  for (const [key, value] of Object.entries(list)) {
-    const classname = `border-outline-${key}`
-
-    if (colors.length > 0) {
-      const lastcolor = colors.at(-1).name.split('-')[2]
-      const curColor = key.split('-')[0]
-      if (lastcolor !== curColor) colors.push({ name: curColor })
-    }
-
-    colors.push({ name: classname, value })
-  }
-
-  return colors
-}
-
-const borderColors = getBorderColors()
-
-const fontSize = Object.entries(designTokens.fontSize).map(([name, value]) => ({
-  name,
-  value,
-}))
-
-const fontWeight = Object.entries(designTokens.fontWeight).map(
-  ([name, value]) => ({
-    name,
-    value,
-  }),
-)
-
-const letterSpacing = Object.entries(designTokens.letterSpacing).map(
-  ([name, value]) => ({
-    name,
-    value,
-  }),
-)
-
-const lineHeight = Object.entries(designTokens.lineHeight).map(
-  ([name, value]) => ({
-    name,
-    value,
-  }),
-)
-
-// const dropShadow = Object.entries(designTokens.dropShadow).map(
-//   ([name, value]) => ({
-//     name,
-//     value,
-//   }),
-// )
-
-const borderRadius = Object.entries(designTokens.borderRadius).map(
-  ([name, value]) => ({
-    name,
-    value,
-  }),
-)
-
-export default {
-  paths() {
-    return [
-      { params: { token: 'background-color', data: bgColors } },
-      { params: { token: 'text-color', data: txtColors } },
-      { params: { token: 'border-color', data: borderColors } },
-      {
-        params: {
-          token: 'text',
-          data: { fontSize, fontWeight, letterSpacing, lineHeight, txtColors },
-        },
-      },
-      { params: { token: 'drop-shadow' } },
-      { params: { token: 'border-radius', data: borderRadius } },
-    ]
-  },
-}
diff --git a/docs/content/docs/foundations/colors/base.md b/docs/content/docs/foundations/colors/base.md
new file mode 100644
index 000000000..d918791aa
--- /dev/null
+++ b/docs/content/docs/foundations/colors/base.md
@@ -0,0 +1,13 @@
+---
+outline: false
+---
+
+<script setup>
+import PalettePage from '@/components/foundations/PalettePage.vue'
+</script>
+
+# Base Colors
+
+The raw palette. Twelve hues, eleven shades each, plus alpha ramps and neutrals.
+
+<PalettePage />
diff --git a/docs/content/docs/foundations/colors/semantic.md b/docs/content/docs/foundations/colors/semantic.md
new file mode 100644
index 000000000..e672e86d9
--- /dev/null
+++ b/docs/content/docs/foundations/colors/semantic.md
@@ -0,0 +1,13 @@
+---
+outline: false
+---
+
+<script setup>
+import SemanticPage from '@/components/foundations/SemanticPage.vue'
+</script>
+
+# Semantic Colors
+
+Use-case tokens for surface, ink, and outline. They map to the palette and swap with the theme.
+
+<SemanticPage />
diff --git a/docs/content/docs/foundations/elevation.md b/docs/content/docs/foundations/elevation.md
new file mode 100644
index 000000000..7a81495c2
--- /dev/null
+++ b/docs/content/docs/foundations/elevation.md
@@ -0,0 +1,33 @@
+---
+outline: false
+---
+
+<script setup>
+import ElevationPreview from '@/components/foundations/ElevationPreview.vue'
+</script>
+
+# Elevation
+
+Shadow tokens for depth and hierarchy.
+
+## Elevation scale
+
+Six steps from a subtle lift to a floating overlay, plus `shadow-status` for
+status dots.
+
+<ElevationPreview />
+
+## Surface pairing
+
+In dark mode, shadows fade against dark backgrounds, so depth comes from a
+lighter surface instead. The `surface-elevation-*` tokens handle this: they stay
+white in light mode and step lighter in dark mode. Pair shadows with these
+tokens rather than raw `surface-gray-*` so one class works in both themes.
+
+Pairings used by the components:
+
+| Use case                        | Surface               | Shadow                   |
+| ------------------------------- | --------------------- | ------------------------ |
+| Resting card, active nav item   | `surface-elevation-3` | `shadow-sm` / `shadow-base` |
+| Dialog, Popover                 | `surface-elevation-2` | `shadow-xl`              |
+| Dropdown, Select, floating menu | `surface-elevation-2` | `shadow-2xl`             |
diff --git a/docs/content/docs/foundations/focus-ring.md b/docs/content/docs/foundations/focus-ring.md
new file mode 100644
index 000000000..8cc623b44
--- /dev/null
+++ b/docs/content/docs/foundations/focus-ring.md
@@ -0,0 +1,15 @@
+---
+outline: false
+---
+
+<script setup>
+import FocusRingPreview from '@/components/foundations/FocusRingPreview.vue'
+</script>
+
+# Focus Ring
+
+An outline that marks the keyboard-focused element. It is applied globally on `:focus-visible`, so it shows only for keyboard navigation.
+
+Tab through these to see it:
+
+<FocusRingPreview />
diff --git a/docs/content/docs/foundations/radius.md b/docs/content/docs/foundations/radius.md
new file mode 100644
index 000000000..de9acd589
--- /dev/null
+++ b/docs/content/docs/foundations/radius.md
@@ -0,0 +1,13 @@
+---
+outline: false
+---
+
+<script setup>
+import RadiusPage from '@/components/foundations/RadiusPage.vue'
+</script>
+
+# Radius
+
+A corner-radius scale from sharp to pill, with named aliases.
+
+<RadiusPage />
diff --git a/docs/content/docs/foundations/typography.md b/docs/content/docs/foundations/typography.md
new file mode 100644
index 000000000..b481bcf88
--- /dev/null
+++ b/docs/content/docs/foundations/typography.md
@@ -0,0 +1,13 @@
+---
+outline: false
+---
+
+<script setup>
+import TypographyPage from '@/components/foundations/TypographyPage.vue'
+</script>
+
+# Typography
+
+One typeface across a single size ramp, with paragraph and weight variants.
+
+<TypographyPage />
diff --git a/docs/css/style.css b/docs/css/style.css
index 74135a38a..d5016707a 100644
--- a/docs/css/style.css
+++ b/docs/css/style.css
@@ -3,7 +3,7 @@
 @tailwind utilities;
 
 body {
-  background-color: var(--surface-white);
+  background-color: var(--surface-base);
   color: var(--ink-gray-9);
   @apply text-base;
   font-family: Inter, sans-serif;
@@ -89,7 +89,7 @@ code {
   --scrollbar-thumb: var(--surface-gray-2);
   --scrollbar-thumb-hover: var(--surface-gray-3);
 
-  --shiki-track: var(--surface-cards);
+  --shiki-track: var(--surface-elevation-1);
   --shiki-thumb: var(--surface-gray-3);
 }
 
diff --git a/espresso-v2-design-tokens/Colour primitives.Light.tokens.json b/espresso-v2-design-tokens/Colour primitives.Light.tokens.json
new file mode 100644
index 000000000..182478969
--- /dev/null
+++ b/espresso-v2-design-tokens/Colour primitives.Light.tokens.json	
@@ -0,0 +1,1316 @@
+{
+  "neutral": {
+    "white": {
+      "$type": "color",
+      "$value": "#ffffff"
+    },
+    "black": {
+      "$type": "color",
+      "$value": "#000000"
+    },
+    "transparent": {
+      "$type": "color",
+      "$value": "#ffffff00"
+    }
+  },
+  "light": {
+    "gray": {
+      "50": {
+        "$type": "color",
+        "$value": "#f8f8f8"
+      },
+      "100": {
+        "$type": "color",
+        "$value": "#f3f3f3"
+      },
+      "200": {
+        "$type": "color",
+        "$value": "#ededed"
+      },
+      "300": {
+        "$type": "color",
+        "$value": "#e2e2e2"
+      },
+      "400": {
+        "$type": "color",
+        "$value": "#c7c7c7"
+      },
+      "500": {
+        "$type": "color",
+        "$value": "#999999"
+      },
+      "600": {
+        "$type": "color",
+        "$value": "#7c7c7c"
+      },
+      "700": {
+        "$type": "color",
+        "$value": "#525252"
+      },
+      "800": {
+        "$type": "color",
+        "$value": "#383838"
+      },
+      "900": {
+        "$type": "color",
+        "$value": "#171717"
+      },
+      "950": {
+        "$type": "color",
+        "$value": "#0f0f0f"
+      }
+    },
+    "gray-alpha": {
+      "50": {
+        "$type": "color",
+        "$value": "#00000008"
+      },
+      "100": {
+        "$type": "color",
+        "$value": "#0000000b"
+      },
+      "200": {
+        "$type": "color",
+        "$value": "#00000012"
+      },
+      "300": {
+        "$type": "color",
+        "$value": "#0000001d"
+      },
+      "400": {
+        "$type": "color",
+        "$value": "#00000038"
+      },
+      "500": {
+        "$type": "color",
+        "$value": "#00000066"
+      },
+      "600": {
+        "$type": "color",
+        "$value": "#00000083"
+      },
+      "700": {
+        "$type": "color",
+        "$value": "#000000ad"
+      },
+      "800": {
+        "$type": "color",
+        "$value": "#000000c7"
+      },
+      "900": {
+        "$type": "color",
+        "$value": "#000000e8"
+      },
+      "950": {
+        "$type": "color",
+        "$value": "#000000f0"
+      }
+    },
+    "blue": {
+      "50": {
+        "$type": "color",
+        "$value": "#f1f8fe"
+      },
+      "100": {
+        "$type": "color",
+        "$value": "#e6f4ff"
+      },
+      "200": {
+        "$type": "color",
+        "$value": "#d1eaff"
+      },
+      "300": {
+        "$type": "color",
+        "$value": "#b5ddfd"
+      },
+      "400": {
+        "$type": "color",
+        "$value": "#61afef"
+      },
+      "500": {
+        "$type": "color",
+        "$value": "#0d8ef8"
+      },
+      "600": {
+        "$type": "color",
+        "$value": "#077ddf"
+      },
+      "700": {
+        "$type": "color",
+        "$value": "#0375d3"
+      },
+      "800": {
+        "$type": "color",
+        "$value": "#005cad"
+      },
+      "900": {
+        "$type": "color",
+        "$value": "#004880"
+      },
+      "950": {
+        "$type": "color",
+        "$value": "#032e63"
+      }
+    },
+    "green": {
+      "50": {
+        "$type": "color",
+        "$value": "#f0faf3"
+      },
+      "100": {
+        "$type": "color",
+        "$value": "#e4faeb"
+      },
+      "200": {
+        "$type": "color",
+        "$value": "#bdefcc"
+      },
+      "300": {
+        "$type": "color",
+        "$value": "#a8e6be"
+      },
+      "400": {
+        "$type": "color",
+        "$value": "#7edaa1"
+      },
+      "500": {
+        "$type": "color",
+        "$value": "#43ac79"
+      },
+      "600": {
+        "$type": "color",
+        "$value": "#268c5c"
+      },
+      "700": {
+        "$type": "color",
+        "$value": "#14804d"
+      },
+      "800": {
+        "$type": "color",
+        "$value": "#075e35"
+      },
+      "900": {
+        "$type": "color",
+        "$value": "#173b2c"
+      },
+      "950": {
+        "$type": "color",
+        "$value": "#0a3020"
+      }
+    },
+    "red": {
+      "50": {
+        "$type": "color",
+        "$value": "#fff5f5"
+      },
+      "100": {
+        "$type": "color",
+        "$value": "#ffe7e7"
+      },
+      "200": {
+        "$type": "color",
+        "$value": "#ffd8d8"
+      },
+      "300": {
+        "$type": "color",
+        "$value": "#fdc2c2"
+      },
+      "400": {
+        "$type": "color",
+        "$value": "#f79596"
+      },
+      "500": {
+        "$type": "color",
+        "$value": "#e03434"
+      },
+      "600": {
+        "$type": "color",
+        "$value": "#ce2c2c"
+      },
+      "700": {
+        "$type": "color",
+        "$value": "#b41d1d"
+      },
+      "800": {
+        "$type": "color",
+        "$value": "#941f1f"
+      },
+      "900": {
+        "$type": "color",
+        "$value": "#6b1515"
+      },
+      "950": {
+        "$type": "color",
+        "$value": "#4c0d0d"
+      }
+    },
+    "amber": {
+      "50": {
+        "$type": "color",
+        "$value": "#fdf8ed"
+      },
+      "100": {
+        "$type": "color",
+        "$value": "#fff4d3"
+      },
+      "200": {
+        "$type": "color",
+        "$value": "#f6eac0"
+      },
+      "300": {
+        "$type": "color",
+        "$value": "#f3e3b4"
+      },
+      "400": {
+        "$type": "color",
+        "$value": "#f4cd80"
+      },
+      "500": {
+        "$type": "color",
+        "$value": "#df9311"
+      },
+      "600": {
+        "$type": "color",
+        "$value": "#ca7e0c"
+      },
+      "700": {
+        "$type": "color",
+        "$value": "#bb6f0c"
+      },
+      "800": {
+        "$type": "color",
+        "$value": "#91400d"
+      },
+      "900": {
+        "$type": "color",
+        "$value": "#763813"
+      },
+      "950": {
+        "$type": "color",
+        "$value": "#4e2209"
+      }
+    },
+    "violet": {
+      "50": {
+        "$type": "color",
+        "$value": "#f7f6fe"
+      },
+      "100": {
+        "$type": "color",
+        "$value": "#eee8ff"
+      },
+      "200": {
+        "$type": "color",
+        "$value": "#dbd5ff"
+      },
+      "300": {
+        "$type": "color",
+        "$value": "#d2c5fc"
+      },
+      "400": {
+        "$type": "color",
+        "$value": "#b5a1fc"
+      },
+      "500": {
+        "$type": "color",
+        "$value": "#7757ee"
+      },
+      "600": {
+        "$type": "color",
+        "$value": "#6e57d1"
+      },
+      "700": {
+        "$type": "color",
+        "$value": "#4f3da1"
+      },
+      "800": {
+        "$type": "color",
+        "$value": "#392980"
+      },
+      "900": {
+        "$type": "color",
+        "$value": "#251959"
+      },
+      "950": {
+        "$type": "color",
+        "$value": "#150655"
+      }
+    },
+    "yellow": {
+      "50": {
+        "$type": "color",
+        "$value": "#fcfbe8"
+      },
+      "100": {
+        "$type": "color",
+        "$value": "#fff7d3"
+      },
+      "200": {
+        "$type": "color",
+        "$value": "#f7e9a8"
+      },
+      "300": {
+        "$type": "color",
+        "$value": "#f5e171"
+      },
+      "400": {
+        "$type": "color",
+        "$value": "#f2d14b"
+      },
+      "500": {
+        "$type": "color",
+        "$value": "#edba13"
+      },
+      "600": {
+        "$type": "color",
+        "$value": "#ab790d"
+      },
+      "700": {
+        "$type": "color",
+        "$value": "#9a6304"
+      },
+      "800": {
+        "$type": "color",
+        "$value": "#8c5600"
+      },
+      "900": {
+        "$type": "color",
+        "$value": "#733f12"
+      },
+      "950": {
+        "$type": "color",
+        "$value": "#542e0d"
+      }
+    },
+    "orange": {
+      "50": {
+        "$type": "color",
+        "$value": "#fff4ed"
+      },
+      "100": {
+        "$type": "color",
+        "$value": "#ffefe4"
+      },
+      "200": {
+        "$type": "color",
+        "$value": "#ffdec5"
+      },
+      "300": {
+        "$type": "color",
+        "$value": "#ffcba3"
+      },
+      "400": {
+        "$type": "color",
+        "$value": "#f4b07f"
+      },
+      "500": {
+        "$type": "color",
+        "$value": "#e86c13"
+      },
+      "600": {
+        "$type": "color",
+        "$value": "#d35a09"
+      },
+      "700": {
+        "$type": "color",
+        "$value": "#bd3e0c"
+      },
+      "800": {
+        "$type": "color",
+        "$value": "#9e3513"
+      },
+      "900": {
+        "$type": "color",
+        "$value": "#6b2711"
+      },
+      "950": {
+        "$type": "color",
+        "$value": "#491605"
+      }
+    },
+    "teal": {
+      "50": {
+        "$type": "color",
+        "$value": "#eefbf8"
+      },
+      "100": {
+        "$type": "color",
+        "$value": "#e6f7f4"
+      },
+      "200": {
+        "$type": "color",
+        "$value": "#bae8e1"
+      },
+      "300": {
+        "$type": "color",
+        "$value": "#97ded4"
+      },
+      "400": {
+        "$type": "color",
+        "$value": "#73d1c4"
+      },
+      "500": {
+        "$type": "color",
+        "$value": "#36baad"
+      },
+      "600": {
+        "$type": "color",
+        "$value": "#0a857b"
+      },
+      "700": {
+        "$type": "color",
+        "$value": "#0f736b"
+      },
+      "800": {
+        "$type": "color",
+        "$value": "#115c57"
+      },
+      "900": {
+        "$type": "color",
+        "$value": "#114541"
+      },
+      "950": {
+        "$type": "color",
+        "$value": "#053734"
+      }
+    },
+    "cyan": {
+      "50": {
+        "$type": "color",
+        "$value": "#f2fbfd"
+      },
+      "100": {
+        "$type": "color",
+        "$value": "#ddf7ff"
+      },
+      "200": {
+        "$type": "color",
+        "$value": "#b3e8f7"
+      },
+      "300": {
+        "$type": "color",
+        "$value": "#99e2f8"
+      },
+      "400": {
+        "$type": "color",
+        "$value": "#72d5f3"
+      },
+      "500": {
+        "$type": "color",
+        "$value": "#3bbde5"
+      },
+      "600": {
+        "$type": "color",
+        "$value": "#1f8cad"
+      },
+      "700": {
+        "$type": "color",
+        "$value": "#1d7f9d"
+      },
+      "800": {
+        "$type": "color",
+        "$value": "#125c73"
+      },
+      "900": {
+        "$type": "color",
+        "$value": "#164759"
+      },
+      "950": {
+        "$type": "color",
+        "$value": "#05383f"
+      }
+    },
+    "purple": {
+      "50": {
+        "$type": "color",
+        "$value": "#f8f3fb"
+      },
+      "100": {
+        "$type": "color",
+        "$value": "#f6e9ff"
+      },
+      "200": {
+        "$type": "color",
+        "$value": "#ecd3ff"
+      },
+      "300": {
+        "$type": "color",
+        "$value": "#e2b9fc"
+      },
+      "400": {
+        "$type": "color",
+        "$value": "#bf78fa"
+      },
+      "500": {
+        "$type": "color",
+        "$value": "#9c45e3"
+      },
+      "600": {
+        "$type": "color",
+        "$value": "#8e49ca"
+      },
+      "700": {
+        "$type": "color",
+        "$value": "#6e399d"
+      },
+      "800": {
+        "$type": "color",
+        "$value": "#5c2f83"
+      },
+      "900": {
+        "$type": "color",
+        "$value": "#401863"
+      },
+      "950": {
+        "$type": "color",
+        "$value": "#2d084e"
+      }
+    },
+    "pink": {
+      "50": {
+        "$type": "color",
+        "$value": "#fff7fc"
+      },
+      "100": {
+        "$type": "color",
+        "$value": "#fde8f5"
+      },
+      "200": {
+        "$type": "color",
+        "$value": "#ffd5f0"
+      },
+      "300": {
+        "$type": "color",
+        "$value": "#f9b9e0"
+      },
+      "400": {
+        "$type": "color",
+        "$value": "#f77cc6"
+      },
+      "500": {
+        "$type": "color",
+        "$value": "#e34aa6"
+      },
+      "600": {
+        "$type": "color",
+        "$value": "#cf3a96"
+      },
+      "700": {
+        "$type": "color",
+        "$value": "#9c2671"
+      },
+      "800": {
+        "$type": "color",
+        "$value": "#801458"
+      },
+      "900": {
+        "$type": "color",
+        "$value": "#570f3e"
+      },
+      "950": {
+        "$type": "color",
+        "$value": "#40062c"
+      }
+    }
+  },
+  "dark": {
+    "gray": {
+      "50": {
+        "$type": "color",
+        "$value": "#f8f8f8"
+      },
+      "100": {
+        "$type": "color",
+        "$value": "#d9d9d9"
+      },
+      "200": {
+        "$type": "color",
+        "$value": "#afafaf"
+      },
+      "300": {
+        "$type": "color",
+        "$value": "#999999"
+      },
+      "400": {
+        "$type": "color",
+        "$value": "#7a7a7a"
+      },
+      "450": {
+        "$type": "color",
+        "$value": "#575757"
+      },
+      "500": {
+        "$type": "color",
+        "$value": "#424242"
+      },
+      "600": {
+        "$type": "color",
+        "$value": "#383838"
+      },
+      "700": {
+        "$type": "color",
+        "$value": "#292929"
+      },
+      "800": {
+        "$type": "color",
+        "$value": "#242424"
+      },
+      "900": {
+        "$type": "color",
+        "$value": "#1f1f1f"
+      },
+      "950": {
+        "$type": "color",
+        "$value": "#171717"
+      }
+    },
+    "gray-alpha": {
+      "50": {
+        "$type": "color",
+        "$value": "#fffffff7"
+      },
+      "100": {
+        "$type": "color",
+        "$value": "#ffffffd4"
+      },
+      "200": {
+        "$type": "color",
+        "$value": "#ffffffa8"
+      },
+      "300": {
+        "$type": "color",
+        "$value": "#ffffff8f"
+      },
+      "400": {
+        "$type": "color",
+        "$value": "#ffffff6c"
+      },
+      "450": {
+        "$type": "color",
+        "$value": "#ffffff46"
+      },
+      "500": {
+        "$type": "color",
+        "$value": "#ffffff2f"
+      },
+      "600": {
+        "$type": "color",
+        "$value": "#ffffff24"
+      },
+      "700": {
+        "$type": "color",
+        "$value": "#ffffff14"
+      },
+      "800": {
+        "$type": "color",
+        "$value": "#ffffff0e"
+      },
+      "900": {
+        "$type": "color",
+        "$value": "#ffffff09"
+      },
+      "950": {
+        "$type": "color",
+        "$value": "#0000000a"
+      }
+    },
+    "blue": {
+      "50": {
+        "$type": "color",
+        "$value": "#c9e0f5"
+      },
+      "100": {
+        "$type": "color",
+        "$value": "#add2f5"
+      },
+      "200": {
+        "$type": "color",
+        "$value": "#76bef9"
+      },
+      "300": {
+        "$type": "color",
+        "$value": "#349bef"
+      },
+      "400": {
+        "$type": "color",
+        "$value": "#2480cc"
+      },
+      "500": {
+        "$type": "color",
+        "$value": "#1c6ec4"
+      },
+      "600": {
+        "$type": "color",
+        "$value": "#0c59a2"
+      },
+      "700": {
+        "$type": "color",
+        "$value": "#074783"
+      },
+      "800": {
+        "$type": "color",
+        "$value": "#063465"
+      },
+      "900": {
+        "$type": "color",
+        "$value": "#0a2e5c"
+      },
+      "950": {
+        "$type": "color",
+        "$value": "#0f233d"
+      }
+    },
+    "green": {
+      "50": {
+        "$type": "color",
+        "$value": "#c8f3de"
+      },
+      "100": {
+        "$type": "color",
+        "$value": "#9be6c1"
+      },
+      "200": {
+        "$type": "color",
+        "$value": "#7dc5a2"
+      },
+      "300": {
+        "$type": "color",
+        "$value": "#359768"
+      },
+      "400": {
+        "$type": "color",
+        "$value": "#128251"
+      },
+      "500": {
+        "$type": "color",
+        "$value": "#117846"
+      },
+      "600": {
+        "$type": "color",
+        "$value": "#077241"
+      },
+      "700": {
+        "$type": "color",
+        "$value": "#085934"
+      },
+      "800": {
+        "$type": "color",
+        "$value": "#0a4229"
+      },
+      "900": {
+        "$type": "color",
+        "$value": "#0e3521"
+      },
+      "950": {
+        "$type": "color",
+        "$value": "#072716"
+      }
+    },
+    "red": {
+      "50": {
+        "$type": "color",
+        "$value": "#ffdede"
+      },
+      "100": {
+        "$type": "color",
+        "$value": "#ffc1c1"
+      },
+      "200": {
+        "$type": "color",
+        "$value": "#ff7575"
+      },
+      "300": {
+        "$type": "color",
+        "$value": "#eb4c4c"
+      },
+      "400": {
+        "$type": "color",
+        "$value": "#c23838"
+      },
+      "500": {
+        "$type": "color",
+        "$value": "#b03030"
+      },
+      "600": {
+        "$type": "color",
+        "$value": "#8e2e2e"
+      },
+      "700": {
+        "$type": "color",
+        "$value": "#852929"
+      },
+      "800": {
+        "$type": "color",
+        "$value": "#742a2a"
+      },
+      "900": {
+        "$type": "color",
+        "$value": "#592222"
+      },
+      "950": {
+        "$type": "color",
+        "$value": "#391416"
+      }
+    },
+    "amber": {
+      "50": {
+        "$type": "color",
+        "$value": "#ffe59a"
+      },
+      "100": {
+        "$type": "color",
+        "$value": "#f4c25f"
+      },
+      "200": {
+        "$type": "color",
+        "$value": "#e9a144"
+      },
+      "300": {
+        "$type": "color",
+        "$value": "#c67515"
+      },
+      "400": {
+        "$type": "color",
+        "$value": "#bd660f"
+      },
+      "500": {
+        "$type": "color",
+        "$value": "#af5e0e"
+      },
+      "600": {
+        "$type": "color",
+        "$value": "#985315"
+      },
+      "700": {
+        "$type": "color",
+        "$value": "#753a07"
+      },
+      "800": {
+        "$type": "color",
+        "$value": "#5a2d07"
+      },
+      "900": {
+        "$type": "color",
+        "$value": "#452608"
+      },
+      "950": {
+        "$type": "color",
+        "$value": "#331c06"
+      }
+    },
+    "violet": {
+      "50": {
+        "$type": "color",
+        "$value": "#d0c2ff"
+      },
+      "100": {
+        "$type": "color",
+        "$value": "#c2b0fc"
+      },
+      "200": {
+        "$type": "color",
+        "$value": "#baa8f5"
+      },
+      "300": {
+        "$type": "color",
+        "$value": "#9175f0"
+      },
+      "400": {
+        "$type": "color",
+        "$value": "#6c4dd5"
+      },
+      "500": {
+        "$type": "color",
+        "$value": "#593bbf"
+      },
+      "600": {
+        "$type": "color",
+        "$value": "#403397"
+      },
+      "700": {
+        "$type": "color",
+        "$value": "#423691"
+      },
+      "800": {
+        "$type": "color",
+        "$value": "#3c2a92"
+      },
+      "900": {
+        "$type": "color",
+        "$value": "#2f236c"
+      },
+      "950": {
+        "$type": "color",
+        "$value": "#1e1646"
+      }
+    },
+    "yellow": {
+      "50": {
+        "$type": "color",
+        "$value": "#ffeeb8"
+      },
+      "100": {
+        "$type": "color",
+        "$value": "#ffe386"
+      },
+      "200": {
+        "$type": "color",
+        "$value": "#f8d76a"
+      },
+      "300": {
+        "$type": "color",
+        "$value": "#ecc02e"
+      },
+      "400": {
+        "$type": "color",
+        "$value": "#bb972a"
+      },
+      "500": {
+        "$type": "color",
+        "$value": "#9c7e1c"
+      },
+      "600": {
+        "$type": "color",
+        "$value": "#99780a"
+      },
+      "700": {
+        "$type": "color",
+        "$value": "#705606"
+      },
+      "800": {
+        "$type": "color",
+        "$value": "#5b4605"
+      },
+      "900": {
+        "$type": "color",
+        "$value": "#3a2c04"
+      },
+      "950": {
+        "$type": "color",
+        "$value": "#261d03"
+      }
+    },
+    "orange": {
+      "50": {
+        "$type": "color",
+        "$value": "#ffcdad"
+      },
+      "100": {
+        "$type": "color",
+        "$value": "#ffa873"
+      },
+      "200": {
+        "$type": "color",
+        "$value": "#fa8a40"
+      },
+      "300": {
+        "$type": "color",
+        "$value": "#e3701c"
+      },
+      "400": {
+        "$type": "color",
+        "$value": "#e16914"
+      },
+      "500": {
+        "$type": "color",
+        "$value": "#984509"
+      },
+      "600": {
+        "$type": "color",
+        "$value": "#823906"
+      },
+      "700": {
+        "$type": "color",
+        "$value": "#683108"
+      },
+      "800": {
+        "$type": "color",
+        "$value": "#532707"
+      },
+      "900": {
+        "$type": "color",
+        "$value": "#361c09"
+      },
+      "950": {
+        "$type": "color",
+        "$value": "#2b1708"
+      }
+    },
+    "teal": {
+      "50": {
+        "$type": "color",
+        "$value": "#a0f7ed"
+      },
+      "100": {
+        "$type": "color",
+        "$value": "#7ef3e7"
+      },
+      "200": {
+        "$type": "color",
+        "$value": "#51decf"
+      },
+      "300": {
+        "$type": "color",
+        "$value": "#28bcac"
+      },
+      "400": {
+        "$type": "color",
+        "$value": "#2ca094"
+      },
+      "500": {
+        "$type": "color",
+        "$value": "#1b7169"
+      },
+      "600": {
+        "$type": "color",
+        "$value": "#145b54"
+      },
+      "700": {
+        "$type": "color",
+        "$value": "#0b4942"
+      },
+      "800": {
+        "$type": "color",
+        "$value": "#0b3a35"
+      },
+      "900": {
+        "$type": "color",
+        "$value": "#0a2d29"
+      },
+      "950": {
+        "$type": "color",
+        "$value": "#0b2320"
+      }
+    },
+    "cyan": {
+      "50": {
+        "$type": "color",
+        "$value": "#d0f0fa"
+      },
+      "100": {
+        "$type": "color",
+        "$value": "#95e3f6"
+      },
+      "200": {
+        "$type": "color",
+        "$value": "#62cae9"
+      },
+      "300": {
+        "$type": "color",
+        "$value": "#3cb8dc"
+      },
+      "400": {
+        "$type": "color",
+        "$value": "#249cc2"
+      },
+      "500": {
+        "$type": "color",
+        "$value": "#107b9b"
+      },
+      "600": {
+        "$type": "color",
+        "$value": "#0c6783"
+      },
+      "700": {
+        "$type": "color",
+        "$value": "#104f62"
+      },
+      "800": {
+        "$type": "color",
+        "$value": "#0d3b49"
+      },
+      "900": {
+        "$type": "color",
+        "$value": "#0b2932"
+      },
+      "950": {
+        "$type": "color",
+        "$value": "#0b2028"
+      }
+    },
+    "purple": {
+      "50": {
+        "$type": "color",
+        "$value": "#e5c6fb"
+      },
+      "100": {
+        "$type": "color",
+        "$value": "#d9aff5"
+      },
+      "200": {
+        "$type": "color",
+        "$value": "#c993ef"
+      },
+      "300": {
+        "$type": "color",
+        "$value": "#b168e8"
+      },
+      "400": {
+        "$type": "color",
+        "$value": "#a26fce"
+      },
+      "500": {
+        "$type": "color",
+        "$value": "#7a2db9"
+      },
+      "600": {
+        "$type": "color",
+        "$value": "#622195"
+      },
+      "700": {
+        "$type": "color",
+        "$value": "#491870"
+      },
+      "800": {
+        "$type": "color",
+        "$value": "#391457"
+      },
+      "900": {
+        "$type": "color",
+        "$value": "#2c1042"
+      },
+      "950": {
+        "$type": "color",
+        "$value": "#23132f"
+      }
+    },
+    "pink": {
+      "50": {
+        "$type": "color",
+        "$value": "#ffbbe4"
+      },
+      "100": {
+        "$type": "color",
+        "$value": "#f69ad1"
+      },
+      "200": {
+        "$type": "color",
+        "$value": "#ed77be"
+      },
+      "300": {
+        "$type": "color",
+        "$value": "#e359ab"
+      },
+      "400": {
+        "$type": "color",
+        "$value": "#cb5d9e"
+      },
+      "500": {
+        "$type": "color",
+        "$value": "#ac377d"
+      },
+      "600": {
+        "$type": "color",
+        "$value": "#892660"
+      },
+      "700": {
+        "$type": "color",
+        "$value": "#6f1d4d"
+      },
+      "800": {
+        "$type": "color",
+        "$value": "#5b183f"
+      },
+      "900": {
+        "$type": "color",
+        "$value": "#42132f"
+      },
+      "950": {
+        "$type": "color",
+        "$value": "#2e0f22"
+      }
+    }
+  },
+  "white-alpha": {
+    "50": {
+      "$type": "color",
+      "$value": "#ffffff1a"
+    },
+    "100": {
+      "$type": "color",
+      "$value": "#ffffff2e"
+    },
+    "200": {
+      "$type": "color",
+      "$value": "#ffffff45"
+    },
+    "300": {
+      "$type": "color",
+      "$value": "#ffffff5c"
+    },
+    "400": {
+      "$type": "color",
+      "$value": "#ffffff73"
+    },
+    "500": {
+      "$type": "color",
+      "$value": "#ffffff8a"
+    },
+    "600": {
+      "$type": "color",
+      "$value": "#ffffffa1"
+    },
+    "700": {
+      "$type": "color",
+      "$value": "#ffffffb8"
+    },
+    "800": {
+      "$type": "color",
+      "$value": "#ffffffcf"
+    },
+    "900": {
+      "$type": "color",
+      "$value": "#ffffffe5"
+    },
+    "950": {
+      "$type": "color",
+      "$value": "#fffffff2"
+    }
+  },
+  "black-alpha": {
+    "50": {
+      "$type": "color",
+      "$value": "#00000017"
+    },
+    "100": {
+      "$type": "color",
+      "$value": "#0000002e"
+    },
+    "200": {
+      "$type": "color",
+      "$value": "#00000045"
+    },
+    "300": {
+      "$type": "color",
+      "$value": "#0000005c"
+    },
+    "400": {
+      "$type": "color",
+      "$value": "#00000073"
+    },
+    "500": {
+      "$type": "color",
+      "$value": "#0000008a"
+    },
+    "600": {
+      "$type": "color",
+      "$value": "#000000a1"
+    },
+    "700": {
+      "$type": "color",
+      "$value": "#000000b8"
+    },
+    "800": {
+      "$type": "color",
+      "$value": "#000000cf"
+    },
+    "900": {
+      "$type": "color",
+      "$value": "#000000e5"
+    },
+    "950": {
+      "$type": "color",
+      "$value": "#000000f2"
+    }
+  }
+}
\ No newline at end of file
diff --git a/espresso-v2-design-tokens/Styles.Dark.tokens.json b/espresso-v2-design-tokens/Styles.Dark.tokens.json
new file mode 100644
index 000000000..031eeb967
--- /dev/null
+++ b/espresso-v2-design-tokens/Styles.Dark.tokens.json
@@ -0,0 +1,1655 @@
+{
+  "surface": {
+    "base": {
+      "$type": "color",
+      "$value": "{dark.gray.950}",
+      "$description": "base backgrounds"
+    },
+    "gray-1": {
+      "$type": "color",
+      "$value": "{dark.gray.900}",
+      "$description": "offwhite backgrounds"
+    },
+    "gray-2": {
+      "$type": "color",
+      "$value": "{dark.gray.700}",
+      "$description": "subtle backgrounds"
+    },
+    "gray-3": {
+      "$type": "color",
+      "$value": "{dark.gray.600}",
+      "$description": "subtle hover"
+    },
+    "gray-4": {
+      "$type": "color",
+      "$value": "{dark.gray.500}",
+      "$description": "subtle active states"
+    },
+    "gray-5": {
+      "$type": "color",
+      "$value": "{dark.gray.450}",
+      "$description": "new"
+    },
+    "gray-6": {
+      "$type": "color",
+      "$value": "{dark.gray.400}",
+      "$description": "new unused"
+    },
+    "gray-7": {
+      "$type": "color",
+      "$value": "{dark.gray.300}",
+      "$description": "new unused"
+    },
+    "gray-8": {
+      "$type": "color",
+      "$value": "{dark.gray.200}",
+      "$description": "checkbox and radio Disabled states"
+    },
+    "gray-9": {
+      "$type": "color",
+      "$value": "{dark.gray.100}",
+      "$description": "date picker active state"
+    },
+    "gray-10": {
+      "$type": "color",
+      "$value": "{dark.gray.50}",
+      "$description": "solid button backgrounds"
+    },
+    "sidebar": {
+      "$type": "color",
+      "$value": "{neutral.transparent}",
+      "$description": "modal and page sidebar"
+    },
+    "elevation-1": {
+      "$type": "color",
+      "$value": "{dark.gray.900}",
+      "$description": "first level of highlight, say modal, card, popover on base background."
+    },
+    "elevation-2": {
+      "$type": "color",
+      "$value": "{dark.gray.800}",
+      "$description": "second level of highlight, say modal, card, popover on elevation 1 background."
+    },
+    "elevation-3": {
+      "$type": "color",
+      "$value": "{dark.gray.600}",
+      "$description": "for selected states on segment control, dropdown selected state, etc"
+    },
+    "red-1": {
+      "$type": "color",
+      "$value": "{dark.red.950}"
+    },
+    "red-2": {
+      "$type": "color",
+      "$value": "{dark.red.900}"
+    },
+    "red-3": {
+      "$type": "color",
+      "$value": "{dark.red.800}"
+    },
+    "red-4": {
+      "$type": "color",
+      "$value": "{dark.red.700}"
+    },
+    "red-5": {
+      "$type": "color",
+      "$value": "{dark.red.600}"
+    },
+    "red-6": {
+      "$type": "color",
+      "$value": "{dark.red.500}"
+    },
+    "red-7": {
+      "$type": "color",
+      "$value": "{dark.red.400}"
+    },
+    "red-8": {
+      "$type": "color",
+      "$value": "{dark.red.300}"
+    },
+    "red-9": {
+      "$type": "color",
+      "$value": "{dark.red.200}"
+    },
+    "red-10": {
+      "$type": "color",
+      "$value": "{dark.red.100}"
+    },
+    "blue-1": {
+      "$type": "color",
+      "$value": "{dark.blue.950}"
+    },
+    "blue-2": {
+      "$type": "color",
+      "$value": "{dark.blue.900}"
+    },
+    "blue-3": {
+      "$type": "color",
+      "$value": "{dark.blue.800}"
+    },
+    "blue-4": {
+      "$type": "color",
+      "$value": "{dark.blue.700}"
+    },
+    "blue-5": {
+      "$type": "color",
+      "$value": "{dark.blue.600}"
+    },
+    "blue-6": {
+      "$type": "color",
+      "$value": "{dark.blue.500}"
+    },
+    "blue-7": {
+      "$type": "color",
+      "$value": "{dark.blue.400}"
+    },
+    "blue-8": {
+      "$type": "color",
+      "$value": "{dark.blue.300}"
+    },
+    "blue-9": {
+      "$type": "color",
+      "$value": "{dark.blue.200}"
+    },
+    "blue-10": {
+      "$type": "color",
+      "$value": "{dark.blue.100}"
+    },
+    "green-1": {
+      "$type": "color",
+      "$value": "{dark.green.950}"
+    },
+    "green-2": {
+      "$type": "color",
+      "$value": "{dark.green.900}"
+    },
+    "green-3": {
+      "$type": "color",
+      "$value": "{dark.green.800}"
+    },
+    "green-4": {
+      "$type": "color",
+      "$value": "{dark.green.700}"
+    },
+    "green-5": {
+      "$type": "color",
+      "$value": "{dark.green.600}"
+    },
+    "green-6": {
+      "$type": "color",
+      "$value": "{dark.green.500}"
+    },
+    "green-7": {
+      "$type": "color",
+      "$value": "{dark.green.400}"
+    },
+    "green-8": {
+      "$type": "color",
+      "$value": "{dark.green.300}"
+    },
+    "green-9": {
+      "$type": "color",
+      "$value": "{dark.green.200}"
+    },
+    "green-10": {
+      "$type": "color",
+      "$value": "{dark.green.100}"
+    },
+    "amber-1": {
+      "$type": "color",
+      "$value": "{dark.amber.950}"
+    },
+    "amber-2": {
+      "$type": "color",
+      "$value": "{dark.amber.900}"
+    },
+    "amber-3": {
+      "$type": "color",
+      "$value": "{dark.amber.800}"
+    },
+    "amber-4": {
+      "$type": "color",
+      "$value": "{dark.amber.700}"
+    },
+    "amber-5": {
+      "$type": "color",
+      "$value": "{dark.amber.600}"
+    },
+    "amber-6": {
+      "$type": "color",
+      "$value": "{dark.amber.500}"
+    },
+    "amber-7": {
+      "$type": "color",
+      "$value": "{dark.amber.400}"
+    },
+    "amber-8": {
+      "$type": "color",
+      "$value": "{dark.amber.300}"
+    },
+    "amber-9": {
+      "$type": "color",
+      "$value": "{dark.amber.200}"
+    },
+    "amber-10": {
+      "$type": "color",
+      "$value": "{dark.amber.100}"
+    },
+    "violet-1": {
+      "$type": "color",
+      "$value": "{dark.violet.950}"
+    },
+    "violet-2": {
+      "$type": "color",
+      "$value": "{dark.violet.900}"
+    },
+    "violet-3": {
+      "$type": "color",
+      "$value": "{dark.violet.800}"
+    },
+    "violet-4": {
+      "$type": "color",
+      "$value": "{dark.violet.700}"
+    },
+    "violet-5": {
+      "$type": "color",
+      "$value": "{dark.violet.600}"
+    },
+    "violet-6": {
+      "$type": "color",
+      "$value": "{dark.violet.500}"
+    },
+    "violet-7": {
+      "$type": "color",
+      "$value": "{dark.violet.400}"
+    },
+    "violet-8": {
+      "$type": "color",
+      "$value": "{dark.violet.300}"
+    },
+    "violet-9": {
+      "$type": "color",
+      "$value": "{dark.violet.200}"
+    },
+    "violet-10": {
+      "$type": "color",
+      "$value": "{dark.violet.100}"
+    },
+    "yellow-1": {
+      "$type": "color",
+      "$value": "{dark.yellow.950}"
+    },
+    "yellow-2": {
+      "$type": "color",
+      "$value": "{dark.yellow.900}"
+    },
+    "yellow-3": {
+      "$type": "color",
+      "$value": "{dark.yellow.800}"
+    },
+    "yellow-4": {
+      "$type": "color",
+      "$value": "{dark.yellow.700}"
+    },
+    "yellow-5": {
+      "$type": "color",
+      "$value": "{dark.yellow.600}"
+    },
+    "yellow-6": {
+      "$type": "color",
+      "$value": "{dark.yellow.500}"
+    },
+    "yellow-7": {
+      "$type": "color",
+      "$value": "{dark.yellow.400}"
+    },
+    "yellow-8": {
+      "$type": "color",
+      "$value": "{dark.yellow.300}"
+    },
+    "yellow-9": {
+      "$type": "color",
+      "$value": "{dark.yellow.200}"
+    },
+    "yellow-10": {
+      "$type": "color",
+      "$value": "{dark.yellow.100}"
+    },
+    "orange-1": {
+      "$type": "color",
+      "$value": "{dark.orange.950}"
+    },
+    "orange-2": {
+      "$type": "color",
+      "$value": "{dark.orange.900}"
+    },
+    "orange-3": {
+      "$type": "color",
+      "$value": "{dark.orange.800}"
+    },
+    "orange-4": {
+      "$type": "color",
+      "$value": "{dark.orange.700}"
+    },
+    "orange-5": {
+      "$type": "color",
+      "$value": "{dark.orange.600}"
+    },
+    "orange-6": {
+      "$type": "color",
+      "$value": "{dark.orange.500}"
+    },
+    "orange-7": {
+      "$type": "color",
+      "$value": "{dark.orange.400}"
+    },
+    "orange-8": {
+      "$type": "color",
+      "$value": "{dark.orange.300}"
+    },
+    "orange-9": {
+      "$type": "color",
+      "$value": "{dark.orange.200}"
+    },
+    "orange-10": {
+      "$type": "color",
+      "$value": "{dark.orange.100}"
+    },
+    "teal-1": {
+      "$type": "color",
+      "$value": "{dark.teal.950}"
+    },
+    "teal-2": {
+      "$type": "color",
+      "$value": "{dark.teal.900}"
+    },
+    "teal-3": {
+      "$type": "color",
+      "$value": "{dark.teal.800}"
+    },
+    "teal-4": {
+      "$type": "color",
+      "$value": "{dark.teal.700}"
+    },
+    "teal-5": {
+      "$type": "color",
+      "$value": "{dark.teal.600}"
+    },
+    "teal-6": {
+      "$type": "color",
+      "$value": "{dark.teal.500}"
+    },
+    "teal-7": {
+      "$type": "color",
+      "$value": "{dark.teal.400}"
+    },
+    "teal-8": {
+      "$type": "color",
+      "$value": "{dark.teal.300}"
+    },
+    "teal-9": {
+      "$type": "color",
+      "$value": "{dark.teal.200}"
+    },
+    "teal-10": {
+      "$type": "color",
+      "$value": "{dark.teal.100}"
+    },
+    "cyan-1": {
+      "$type": "color",
+      "$value": "{dark.cyan.950}"
+    },
+    "cyan-2": {
+      "$type": "color",
+      "$value": "{dark.cyan.900}"
+    },
+    "cyan-3": {
+      "$type": "color",
+      "$value": "{dark.cyan.800}"
+    },
+    "cyan-4": {
+      "$type": "color",
+      "$value": "{dark.cyan.700}"
+    },
+    "cyan-5": {
+      "$type": "color",
+      "$value": "{dark.cyan.600}"
+    },
+    "cyan-6": {
+      "$type": "color",
+      "$value": "{dark.cyan.500}"
+    },
+    "cyan-7": {
+      "$type": "color",
+      "$value": "{dark.cyan.400}"
+    },
+    "cyan-8": {
+      "$type": "color",
+      "$value": "{dark.cyan.300}"
+    },
+    "cyan-9": {
+      "$type": "color",
+      "$value": "{dark.cyan.200}"
+    },
+    "cyan-10": {
+      "$type": "color",
+      "$value": "{dark.cyan.100}"
+    },
+    "purple-1": {
+      "$type": "color",
+      "$value": "{dark.purple.950}"
+    },
+    "purple-2": {
+      "$type": "color",
+      "$value": "{dark.purple.900}"
+    },
+    "purple-3": {
+      "$type": "color",
+      "$value": "{dark.purple.800}"
+    },
+    "purple-4": {
+      "$type": "color",
+      "$value": "{dark.purple.700}"
+    },
+    "purple-5": {
+      "$type": "color",
+      "$value": "{dark.purple.600}"
+    },
+    "purple-6": {
+      "$type": "color",
+      "$value": "{dark.purple.500}"
+    },
+    "purple-7": {
+      "$type": "color",
+      "$value": "{dark.purple.400}"
+    },
+    "purple-8": {
+      "$type": "color",
+      "$value": "{dark.purple.300}"
+    },
+    "purple-9": {
+      "$type": "color",
+      "$value": "{dark.purple.200}"
+    },
+    "purple-10": {
+      "$type": "color",
+      "$value": "{dark.purple.100}"
+    },
+    "pink-1": {
+      "$type": "color",
+      "$value": "{dark.pink.950}"
+    },
+    "pink-2": {
+      "$type": "color",
+      "$value": "{dark.pink.900}"
+    },
+    "pink-3": {
+      "$type": "color",
+      "$value": "{dark.pink.800}"
+    },
+    "pink-4": {
+      "$type": "color",
+      "$value": "{dark.pink.700}"
+    },
+    "pink-5": {
+      "$type": "color",
+      "$value": "{dark.pink.600}"
+    },
+    "pink-6": {
+      "$type": "color",
+      "$value": "{dark.pink.500}"
+    },
+    "pink-7": {
+      "$type": "color",
+      "$value": "{dark.pink.400}"
+    },
+    "pink-8": {
+      "$type": "color",
+      "$value": "{dark.pink.300}"
+    },
+    "pink-9": {
+      "$type": "color",
+      "$value": "{dark.pink.200}"
+    },
+    "pink-10": {
+      "$type": "color",
+      "$value": "{dark.pink.100}"
+    },
+    "alert-button-default": {
+      "$type": "color",
+      "$value": "{dark.gray.500}"
+    },
+    "alert-button-info": {
+      "$type": "color",
+      "$value": "{dark.blue.700}"
+    },
+    "alert-button-success": {
+      "$type": "color",
+      "$value": "{dark.green.700}"
+    },
+    "alert-button-warning": {
+      "$type": "color",
+      "$value": "{dark.amber.700}"
+    },
+    "alert-button-error": {
+      "$type": "color",
+      "$value": "{dark.red.700}"
+    }
+  },
+  "surface-alpha": {
+    "base": {
+      "$type": "color",
+      "$value": "{dark.gray-alpha.950}"
+    },
+    "gray-1": {
+      "$type": "color",
+      "$value": "{dark.gray-alpha.800}"
+    },
+    "gray-2": {
+      "$type": "color",
+      "$value": "{dark.gray-alpha.700}"
+    },
+    "gray-3": {
+      "$type": "color",
+      "$value": "{dark.gray-alpha.600}"
+    },
+    "gray-4": {
+      "$type": "color",
+      "$value": "{dark.gray-alpha.500}"
+    },
+    "gray-5": {
+      "$type": "color",
+      "$value": "{dark.gray-alpha.450}"
+    },
+    "gray-6": {
+      "$type": "color",
+      "$value": "{dark.gray-alpha.400}"
+    },
+    "gray-7": {
+      "$type": "color",
+      "$value": "{dark.gray-alpha.300}"
+    },
+    "gray-8": {
+      "$type": "color",
+      "$value": "{dark.gray-alpha.200}"
+    },
+    "gray-9": {
+      "$type": "color",
+      "$value": "{dark.gray-alpha.100}"
+    },
+    "gray-10": {
+      "$type": "color",
+      "$value": "{dark.gray-alpha.50}"
+    },
+    "sidebar": {
+      "$type": "color",
+      "$value": "{dark.gray-alpha.950}"
+    },
+    "elevation-1": {
+      "$type": "color",
+      "$value": "{dark.gray-alpha.900}"
+    },
+    "elevation-2": {
+      "$type": "color",
+      "$value": "{dark.gray-alpha.800}"
+    },
+    "elevation-3": {
+      "$type": "color",
+      "$value": "{dark.gray-alpha.600}"
+    },
+    "gray-2-overlay": {
+      "$type": "color",
+      "$value": "{white-alpha.50}"
+    }
+  },
+  "ink": {
+    "base": {
+      "$type": "color",
+      "$value": "{dark.gray.950}",
+      "$description": "primary button text"
+    },
+    "gray-1": {
+      "$type": "color",
+      "$value": "{dark.gray.800}"
+    },
+    "gray-2": {
+      "$type": "color",
+      "$value": "{dark.gray.600}"
+    },
+    "gray-3": {
+      "$type": "color",
+      "$value": "{dark.gray.500}"
+    },
+    "gray-4": {
+      "$type": "color",
+      "$value": "{dark.gray.400}",
+      "$description": "placeholders"
+    },
+    "gray-5": {
+      "$type": "color",
+      "$value": "{dark.gray.400}",
+      "$description": "secondary text"
+    },
+    "gray-6": {
+      "$type": "color",
+      "$value": "{dark.gray.300}"
+    },
+    "gray-7": {
+      "$type": "color",
+      "$value": "{dark.gray.200}"
+    },
+    "gray-8": {
+      "$type": "color",
+      "$value": "{dark.gray.100}"
+    },
+    "gray-9": {
+      "$type": "color",
+      "$value": "{dark.gray.50}"
+    },
+    "red-1": {
+      "$type": "color",
+      "$value": "{neutral.white}"
+    },
+    "red-2": {
+      "$type": "color",
+      "$value": "{dark.red.800}"
+    },
+    "red-3": {
+      "$type": "color",
+      "$value": "{dark.red.700}"
+    },
+    "red-4": {
+      "$type": "color",
+      "$value": "{dark.red.600}"
+    },
+    "red-5": {
+      "$type": "color",
+      "$value": "{dark.red.500}"
+    },
+    "red-6": {
+      "$type": "color",
+      "$value": "{dark.red.400}"
+    },
+    "red-7": {
+      "$type": "color",
+      "$value": "{dark.red.300}"
+    },
+    "red-8": {
+      "$type": "color",
+      "$value": "{dark.red.200}"
+    },
+    "red-9": {
+      "$type": "color",
+      "$value": "{dark.red.100}"
+    },
+    "red-10": {
+      "$type": "color",
+      "$value": "{dark.red.50}"
+    },
+    "blue-1": {
+      "$type": "color",
+      "$value": "{neutral.white}"
+    },
+    "blue-2": {
+      "$type": "color",
+      "$value": "{dark.blue.800}"
+    },
+    "blue-3": {
+      "$type": "color",
+      "$value": "{dark.blue.700}"
+    },
+    "blue-4": {
+      "$type": "color",
+      "$value": "{dark.blue.600}"
+    },
+    "blue-5": {
+      "$type": "color",
+      "$value": "{dark.blue.500}"
+    },
+    "blue-6": {
+      "$type": "color",
+      "$value": "{dark.blue.400}"
+    },
+    "blue-7": {
+      "$type": "color",
+      "$value": "{dark.blue.300}"
+    },
+    "blue-8": {
+      "$type": "color",
+      "$value": "{dark.blue.200}"
+    },
+    "blue-9": {
+      "$type": "color",
+      "$value": "{dark.blue.100}"
+    },
+    "blue-10": {
+      "$type": "color",
+      "$value": "{dark.blue.50}"
+    },
+    "green-1": {
+      "$type": "color",
+      "$value": "{neutral.white}"
+    },
+    "green-2": {
+      "$type": "color",
+      "$value": "{dark.green.800}"
+    },
+    "green-3": {
+      "$type": "color",
+      "$value": "{dark.green.700}"
+    },
+    "green-4": {
+      "$type": "color",
+      "$value": "{dark.green.600}"
+    },
+    "green-5": {
+      "$type": "color",
+      "$value": "{dark.green.500}"
+    },
+    "green-6": {
+      "$type": "color",
+      "$value": "{dark.green.400}"
+    },
+    "green-7": {
+      "$type": "color",
+      "$value": "{dark.green.300}"
+    },
+    "green-8": {
+      "$type": "color",
+      "$value": "{dark.green.200}"
+    },
+    "green-9": {
+      "$type": "color",
+      "$value": "{dark.green.100}"
+    },
+    "green-10": {
+      "$type": "color",
+      "$value": "{dark.green.50}"
+    },
+    "amber-1": {
+      "$type": "color",
+      "$value": "{neutral.white}"
+    },
+    "amber-2": {
+      "$type": "color",
+      "$value": "{dark.amber.800}"
+    },
+    "amber-3": {
+      "$type": "color",
+      "$value": "{dark.amber.700}"
+    },
+    "amber-4": {
+      "$type": "color",
+      "$value": "{dark.amber.600}"
+    },
+    "amber-5": {
+      "$type": "color",
+      "$value": "{dark.amber.500}"
+    },
+    "amber-6": {
+      "$type": "color",
+      "$value": "{dark.amber.400}"
+    },
+    "amber-7": {
+      "$type": "color",
+      "$value": "{dark.amber.300}"
+    },
+    "amber-8": {
+      "$type": "color",
+      "$value": "{dark.amber.200}"
+    },
+    "amber-9": {
+      "$type": "color",
+      "$value": "{dark.amber.100}"
+    },
+    "amber-10": {
+      "$type": "color",
+      "$value": "{dark.amber.50}"
+    },
+    "violet-1": {
+      "$type": "color",
+      "$value": "{neutral.white}"
+    },
+    "violet-2": {
+      "$type": "color",
+      "$value": "{dark.violet.800}"
+    },
+    "violet-3": {
+      "$type": "color",
+      "$value": "{dark.violet.700}"
+    },
+    "violet-4": {
+      "$type": "color",
+      "$value": "{dark.violet.600}"
+    },
+    "violet-5": {
+      "$type": "color",
+      "$value": "{dark.violet.500}"
+    },
+    "violet-6": {
+      "$type": "color",
+      "$value": "{dark.violet.400}"
+    },
+    "violet-7": {
+      "$type": "color",
+      "$value": "{dark.violet.300}"
+    },
+    "violet-8": {
+      "$type": "color",
+      "$value": "{dark.violet.200}"
+    },
+    "violet-9": {
+      "$type": "color",
+      "$value": "{dark.violet.100}"
+    },
+    "violet-10": {
+      "$type": "color",
+      "$value": "{dark.violet.50}"
+    },
+    "yellow-1": {
+      "$type": "color",
+      "$value": "{neutral.white}"
+    },
+    "yellow-2": {
+      "$type": "color",
+      "$value": "{dark.yellow.800}"
+    },
+    "yellow-3": {
+      "$type": "color",
+      "$value": "{dark.yellow.700}"
+    },
+    "yellow-4": {
+      "$type": "color",
+      "$value": "{dark.yellow.600}"
+    },
+    "yellow-5": {
+      "$type": "color",
+      "$value": "{dark.yellow.500}"
+    },
+    "yellow-6": {
+      "$type": "color",
+      "$value": "{dark.yellow.400}"
+    },
+    "yellow-7": {
+      "$type": "color",
+      "$value": "{dark.yellow.300}"
+    },
+    "yellow-8": {
+      "$type": "color",
+      "$value": "{dark.yellow.200}"
+    },
+    "yellow-9": {
+      "$type": "color",
+      "$value": "{dark.yellow.100}"
+    },
+    "yellow-10": {
+      "$type": "color",
+      "$value": "{dark.yellow.50}"
+    },
+    "orange-1": {
+      "$type": "color",
+      "$value": "{neutral.white}"
+    },
+    "orange-2": {
+      "$type": "color",
+      "$value": "{dark.orange.800}"
+    },
+    "orange-3": {
+      "$type": "color",
+      "$value": "{dark.orange.700}"
+    },
+    "orange-4": {
+      "$type": "color",
+      "$value": "{dark.orange.600}"
+    },
+    "orange-5": {
+      "$type": "color",
+      "$value": "{dark.orange.500}"
+    },
+    "orange-6": {
+      "$type": "color",
+      "$value": "{dark.orange.400}"
+    },
+    "orange-7": {
+      "$type": "color",
+      "$value": "{dark.orange.300}"
+    },
+    "orange-8": {
+      "$type": "color",
+      "$value": "{dark.orange.200}"
+    },
+    "orange-9": {
+      "$type": "color",
+      "$value": "{dark.orange.100}"
+    },
+    "orange-10": {
+      "$type": "color",
+      "$value": "{dark.orange.50}"
+    },
+    "teal-1": {
+      "$type": "color",
+      "$value": "{neutral.white}"
+    },
+    "teal-2": {
+      "$type": "color",
+      "$value": "{dark.teal.800}"
+    },
+    "teal-3": {
+      "$type": "color",
+      "$value": "{dark.teal.700}"
+    },
+    "teal-4": {
+      "$type": "color",
+      "$value": "{dark.teal.600}"
+    },
+    "teal-5": {
+      "$type": "color",
+      "$value": "{dark.teal.500}"
+    },
+    "teal-6": {
+      "$type": "color",
+      "$value": "{dark.teal.400}"
+    },
+    "teal-7": {
+      "$type": "color",
+      "$value": "{dark.teal.300}"
+    },
+    "teal-8": {
+      "$type": "color",
+      "$value": "{dark.teal.200}"
+    },
+    "teal-9": {
+      "$type": "color",
+      "$value": "{dark.teal.100}"
+    },
+    "teal-10": {
+      "$type": "color",
+      "$value": "{dark.teal.50}"
+    },
+    "cyan-1": {
+      "$type": "color",
+      "$value": "{neutral.white}"
+    },
+    "cyan-2": {
+      "$type": "color",
+      "$value": "{dark.cyan.800}"
+    },
+    "cyan-3": {
+      "$type": "color",
+      "$value": "{dark.cyan.700}"
+    },
+    "cyan-4": {
+      "$type": "color",
+      "$value": "{dark.cyan.600}"
+    },
+    "cyan-5": {
+      "$type": "color",
+      "$value": "{dark.cyan.500}"
+    },
+    "cyan-6": {
+      "$type": "color",
+      "$value": "{dark.cyan.400}"
+    },
+    "cyan-7": {
+      "$type": "color",
+      "$value": "{dark.cyan.300}"
+    },
+    "cyan-8": {
+      "$type": "color",
+      "$value": "{dark.cyan.200}"
+    },
+    "cyan-9": {
+      "$type": "color",
+      "$value": "{dark.cyan.100}"
+    },
+    "cyan-10": {
+      "$type": "color",
+      "$value": "{dark.cyan.50}"
+    },
+    "purple-1": {
+      "$type": "color",
+      "$value": "{neutral.white}"
+    },
+    "purple-2": {
+      "$type": "color",
+      "$value": "{dark.purple.800}"
+    },
+    "purple-3": {
+      "$type": "color",
+      "$value": "{dark.purple.700}"
+    },
+    "purple-4": {
+      "$type": "color",
+      "$value": "{dark.purple.600}"
+    },
+    "purple-5": {
+      "$type": "color",
+      "$value": "{dark.purple.500}"
+    },
+    "purple-6": {
+      "$type": "color",
+      "$value": "{dark.purple.400}"
+    },
+    "purple-7": {
+      "$type": "color",
+      "$value": "{dark.purple.300}"
+    },
+    "purple-8": {
+      "$type": "color",
+      "$value": "{dark.purple.200}"
+    },
+    "purple-9": {
+      "$type": "color",
+      "$value": "{dark.purple.100}"
+    },
+    "purple-10": {
+      "$type": "color",
+      "$value": "{dark.purple.50}"
+    },
+    "pink-1": {
+      "$type": "color",
+      "$value": "{neutral.white}"
+    },
+    "pink-2": {
+      "$type": "color",
+      "$value": "{dark.pink.800}"
+    },
+    "pink-3": {
+      "$type": "color",
+      "$value": "{dark.pink.700}"
+    },
+    "pink-4": {
+      "$type": "color",
+      "$value": "{dark.pink.600}"
+    },
+    "pink-5": {
+      "$type": "color",
+      "$value": "{dark.pink.500}"
+    },
+    "pink-6": {
+      "$type": "color",
+      "$value": "{dark.pink.400}"
+    },
+    "pink-7": {
+      "$type": "color",
+      "$value": "{dark.pink.300}"
+    },
+    "pink-8": {
+      "$type": "color",
+      "$value": "{dark.pink.200}"
+    },
+    "pink-9": {
+      "$type": "color",
+      "$value": "{dark.pink.100}"
+    },
+    "pink-10": {
+      "$type": "color",
+      "$value": "{dark.pink.50}"
+    },
+    "alert-button-default": {
+      "$type": "color",
+      "$value": "{dark.gray.50}"
+    },
+    "alert-button-info": {
+      "$type": "color",
+      "$value": "{dark.blue.200}"
+    },
+    "alert-button-success": {
+      "$type": "color",
+      "$value": "{dark.green.200}"
+    },
+    "alert-button-warning": {
+      "$type": "color",
+      "$value": "{dark.amber.200}"
+    },
+    "alert-button-error": {
+      "$type": "color",
+      "$value": "{dark.red.200}"
+    },
+    "blue-link": {
+      "$type": "color",
+      "$value": "{dark.blue.500}"
+    }
+  },
+  "outline": {
+    "base": {
+      "$type": "color",
+      "$value": "{dark.gray.950}"
+    },
+    "gray-1": {
+      "$type": "color",
+      "$value": "{dark.gray.800}"
+    },
+    "gray-2": {
+      "$type": "color",
+      "$value": "{dark.gray.600}"
+    },
+    "gray-3": {
+      "$type": "color",
+      "$value": "{dark.gray.500}"
+    },
+    "gray-4": {
+      "$type": "color",
+      "$value": "{dark.gray.450}",
+      "$description": "input focus border"
+    },
+    "gray-5": {
+      "$type": "color",
+      "$value": "{dark.gray.400}"
+    },
+    "gray-6": {
+      "$type": "color",
+      "$value": "{dark.gray.300}"
+    },
+    "gray-7": {
+      "$type": "color",
+      "$value": "{light.gray.200}"
+    },
+    "gray-8": {
+      "$type": "color",
+      "$value": "{light.gray.100}"
+    },
+    "gray-9": {
+      "$type": "color",
+      "$value": "{light.gray.50}"
+    },
+    "red-1": {
+      "$type": "color",
+      "$value": "{dark.red.900}"
+    },
+    "red-2": {
+      "$type": "color",
+      "$value": "{dark.red.800}"
+    },
+    "red-3": {
+      "$type": "color",
+      "$value": "{dark.red.700}"
+    },
+    "red-4": {
+      "$type": "color",
+      "$value": "{dark.red.600}"
+    },
+    "red-5": {
+      "$type": "color",
+      "$value": "{dark.red.500}"
+    },
+    "red-6": {
+      "$type": "color",
+      "$value": "{dark.red.400}"
+    },
+    "red-7": {
+      "$type": "color",
+      "$value": "{dark.red.300}"
+    },
+    "red-8": {
+      "$type": "color",
+      "$value": "{dark.red.200}"
+    },
+    "red-9": {
+      "$type": "color",
+      "$value": "{dark.red.100}"
+    },
+    "red-10": {
+      "$type": "color",
+      "$value": "{dark.red.50}"
+    },
+    "blue-1": {
+      "$type": "color",
+      "$value": "{dark.blue.900}"
+    },
+    "blue-2": {
+      "$type": "color",
+      "$value": "{dark.blue.800}"
+    },
+    "blue-3": {
+      "$type": "color",
+      "$value": "{dark.blue.700}"
+    },
+    "blue-4": {
+      "$type": "color",
+      "$value": "{dark.blue.600}"
+    },
+    "blue-5": {
+      "$type": "color",
+      "$value": "{dark.blue.500}"
+    },
+    "blue-6": {
+      "$type": "color",
+      "$value": "{dark.blue.400}"
+    },
+    "blue-7": {
+      "$type": "color",
+      "$value": "{dark.blue.300}"
+    },
+    "blue-8": {
+      "$type": "color",
+      "$value": "{dark.blue.200}"
+    },
+    "blue-9": {
+      "$type": "color",
+      "$value": "{dark.blue.100}"
+    },
+    "blue-10": {
+      "$type": "color",
+      "$value": "{dark.blue.50}"
+    },
+    "green-1": {
+      "$type": "color",
+      "$value": "{dark.green.900}"
+    },
+    "green-2": {
+      "$type": "color",
+      "$value": "{dark.green.800}"
+    },
+    "green-3": {
+      "$type": "color",
+      "$value": "{dark.green.700}"
+    },
+    "green-4": {
+      "$type": "color",
+      "$value": "{dark.green.600}"
+    },
+    "green-5": {
+      "$type": "color",
+      "$value": "{dark.green.500}"
+    },
+    "green-6": {
+      "$type": "color",
+      "$value": "{dark.green.400}"
+    },
+    "green-7": {
+      "$type": "color",
+      "$value": "{dark.green.300}"
+    },
+    "green-8": {
+      "$type": "color",
+      "$value": "{dark.green.200}"
+    },
+    "green-9": {
+      "$type": "color",
+      "$value": "{dark.green.100}"
+    },
+    "green-10": {
+      "$type": "color",
+      "$value": "{dark.green.50}"
+    },
+    "amber-1": {
+      "$type": "color",
+      "$value": "{dark.amber.900}"
+    },
+    "amber-2": {
+      "$type": "color",
+      "$value": "{dark.amber.800}"
+    },
+    "amber-3": {
+      "$type": "color",
+      "$value": "{dark.amber.700}"
+    },
+    "amber-4": {
+      "$type": "color",
+      "$value": "{dark.amber.600}"
+    },
+    "amber-5": {
+      "$type": "color",
+      "$value": "{dark.amber.500}"
+    },
+    "amber-6": {
+      "$type": "color",
+      "$value": "{dark.amber.400}"
+    },
+    "amber-7": {
+      "$type": "color",
+      "$value": "{dark.amber.300}"
+    },
+    "amber-8": {
+      "$type": "color",
+      "$value": "{dark.amber.200}"
+    },
+    "amber-9": {
+      "$type": "color",
+      "$value": "{dark.amber.100}"
+    },
+    "amber-10": {
+      "$type": "color",
+      "$value": "{dark.amber.50}"
+    },
+    "violet-1": {
+      "$type": "color",
+      "$value": "{dark.violet.900}"
+    },
+    "violet-2": {
+      "$type": "color",
+      "$value": "{dark.violet.800}"
+    },
+    "violet-3": {
+      "$type": "color",
+      "$value": "{dark.violet.700}"
+    },
+    "violet-4": {
+      "$type": "color",
+      "$value": "{dark.violet.600}"
+    },
+    "violet-5": {
+      "$type": "color",
+      "$value": "{dark.violet.500}"
+    },
+    "violet-6": {
+      "$type": "color",
+      "$value": "{dark.violet.400}"
+    },
+    "violet-7": {
+      "$type": "color",
+      "$value": "{dark.violet.300}"
+    },
+    "violet-8": {
+      "$type": "color",
+      "$value": "{dark.violet.200}"
+    },
+    "violet-9": {
+      "$type": "color",
+      "$value": "{dark.violet.100}"
+    },
+    "violet-10": {
+      "$type": "color",
+      "$value": "{dark.violet.50}"
+    },
+    "yellow-1": {
+      "$type": "color",
+      "$value": "{dark.yellow.900}"
+    },
+    "yellow-2": {
+      "$type": "color",
+      "$value": "{dark.yellow.800}"
+    },
+    "yellow-3": {
+      "$type": "color",
+      "$value": "{dark.yellow.700}"
+    },
+    "yellow-4": {
+      "$type": "color",
+      "$value": "{dark.yellow.600}"
+    },
+    "yellow-5": {
+      "$type": "color",
+      "$value": "{dark.yellow.500}"
+    },
+    "yellow-6": {
+      "$type": "color",
+      "$value": "{dark.yellow.400}"
+    },
+    "yellow-7": {
+      "$type": "color",
+      "$value": "{dark.yellow.300}"
+    },
+    "yellow-8": {
+      "$type": "color",
+      "$value": "{dark.yellow.200}"
+    },
+    "yellow-9": {
+      "$type": "color",
+      "$value": "{dark.yellow.100}"
+    },
+    "yellow-10": {
+      "$type": "color",
+      "$value": "{dark.yellow.50}"
+    },
+    "orange-1": {
+      "$type": "color",
+      "$value": "{dark.orange.900}"
+    },
+    "orange-2": {
+      "$type": "color",
+      "$value": "{dark.orange.800}"
+    },
+    "orange-3": {
+      "$type": "color",
+      "$value": "{dark.orange.700}"
+    },
+    "orange-4": {
+      "$type": "color",
+      "$value": "{dark.orange.600}"
+    },
+    "orange-5": {
+      "$type": "color",
+      "$value": "{dark.orange.500}"
+    },
+    "orange-6": {
+      "$type": "color",
+      "$value": "{dark.orange.400}"
+    },
+    "orange-7": {
+      "$type": "color",
+      "$value": "{dark.orange.300}"
+    },
+    "orange-8": {
+      "$type": "color",
+      "$value": "{dark.orange.200}"
+    },
+    "orange-9": {
+      "$type": "color",
+      "$value": "{dark.orange.100}"
+    },
+    "orange-10": {
+      "$type": "color",
+      "$value": "{dark.orange.50}"
+    },
+    "teal-1": {
+      "$type": "color",
+      "$value": "{dark.teal.900}"
+    },
+    "teal-2": {
+      "$type": "color",
+      "$value": "{dark.teal.800}"
+    },
+    "teal-3": {
+      "$type": "color",
+      "$value": "{dark.teal.700}"
+    },
+    "teal-4": {
+      "$type": "color",
+      "$value": "{dark.teal.600}"
+    },
+    "teal-5": {
+      "$type": "color",
+      "$value": "{dark.teal.500}"
+    },
+    "teal-6": {
+      "$type": "color",
+      "$value": "{dark.teal.400}"
+    },
+    "teal-7": {
+      "$type": "color",
+      "$value": "{dark.teal.300}"
+    },
+    "teal-8": {
+      "$type": "color",
+      "$value": "{dark.teal.200}"
+    },
+    "teal-9": {
+      "$type": "color",
+      "$value": "{dark.teal.100}"
+    },
+    "teal-10": {
+      "$type": "color",
+      "$value": "{dark.teal.50}"
+    },
+    "cyan-1": {
+      "$type": "color",
+      "$value": "{dark.cyan.900}"
+    },
+    "cyan-2": {
+      "$type": "color",
+      "$value": "{dark.cyan.800}"
+    },
+    "cyan-3": {
+      "$type": "color",
+      "$value": "{dark.cyan.700}"
+    },
+    "cyan-4": {
+      "$type": "color",
+      "$value": "{dark.cyan.600}"
+    },
+    "cyan-5": {
+      "$type": "color",
+      "$value": "{dark.cyan.500}"
+    },
+    "cyan-6": {
+      "$type": "color",
+      "$value": "{dark.cyan.400}"
+    },
+    "cyan-7": {
+      "$type": "color",
+      "$value": "{dark.cyan.300}"
+    },
+    "cyan-8": {
+      "$type": "color",
+      "$value": "{dark.cyan.200}"
+    },
+    "cyan-9": {
+      "$type": "color",
+      "$value": "{dark.cyan.100}"
+    },
+    "cyan-10": {
+      "$type": "color",
+      "$value": "{dark.cyan.50}"
+    },
+    "purple-1": {
+      "$type": "color",
+      "$value": "{dark.purple.900}"
+    },
+    "purple-2": {
+      "$type": "color",
+      "$value": "{dark.purple.800}"
+    },
+    "purple-3": {
+      "$type": "color",
+      "$value": "{dark.purple.700}"
+    },
+    "purple-4": {
+      "$type": "color",
+      "$value": "{dark.purple.600}"
+    },
+    "purple-5": {
+      "$type": "color",
+      "$value": "{dark.purple.500}"
+    },
+    "purple-6": {
+      "$type": "color",
+      "$value": "{dark.purple.400}"
+    },
+    "purple-7": {
+      "$type": "color",
+      "$value": "{dark.purple.300}"
+    },
+    "purple-8": {
+      "$type": "color",
+      "$value": "{dark.purple.200}"
+    },
+    "purple-9": {
+      "$type": "color",
+      "$value": "{dark.purple.100}"
+    },
+    "purple-10": {
+      "$type": "color",
+      "$value": "{dark.purple.50}"
+    },
+    "pink-1": {
+      "$type": "color",
+      "$value": "{dark.pink.900}"
+    },
+    "pink-2": {
+      "$type": "color",
+      "$value": "{dark.pink.800}"
+    },
+    "pink-3": {
+      "$type": "color",
+      "$value": "{dark.pink.700}"
+    },
+    "pink-4": {
+      "$type": "color",
+      "$value": "{dark.pink.600}"
+    },
+    "pink-5": {
+      "$type": "color",
+      "$value": "{dark.pink.500}"
+    },
+    "pink-6": {
+      "$type": "color",
+      "$value": "{dark.pink.400}"
+    },
+    "pink-7": {
+      "$type": "color",
+      "$value": "{dark.pink.300}"
+    },
+    "pink-8": {
+      "$type": "color",
+      "$value": "{dark.pink.200}"
+    },
+    "pink-9": {
+      "$type": "color",
+      "$value": "{dark.pink.100}"
+    },
+    "pink-10": {
+      "$type": "color",
+      "$value": "{dark.pink.50}"
+    },
+    "elevation-1": {
+      "$type": "color",
+      "$value": "{dark.gray.700}"
+    },
+    "elevation-2": {
+      "$type": "color",
+      "$value": "{dark.gray.600}"
+    }
+  },
+  "outline-alpha": {
+    "base": {
+      "$type": "color",
+      "$value": "{dark.gray-alpha.950}"
+    },
+    "gray-1": {
+      "$type": "color",
+      "$value": "{dark.gray-alpha.800}"
+    },
+    "gray-2": {
+      "$type": "color",
+      "$value": "{dark.gray-alpha.600}"
+    },
+    "gray-3": {
+      "$type": "color",
+      "$value": "{dark.gray-alpha.500}"
+    },
+    "gray-4": {
+      "$type": "color",
+      "$value": "{dark.gray-alpha.450}"
+    },
+    "gray-5": {
+      "$type": "color",
+      "$value": "{dark.gray-alpha.400}"
+    },
+    "gray-6": {
+      "$type": "color",
+      "$value": "{dark.gray-alpha.300}"
+    },
+    "gray-7": {
+      "$type": "color",
+      "$value": "{dark.gray-alpha.200}"
+    },
+    "gray-8": {
+      "$type": "color",
+      "$value": "{dark.gray-alpha.100}"
+    },
+    "gray-9": {
+      "$type": "color",
+      "$value": "{dark.gray-alpha.50}"
+    },
+    "elevation-1": {
+      "$type": "color",
+      "$value": "{dark.gray-alpha.700}"
+    },
+    "elevation-2": {
+      "$type": "color",
+      "$value": "{dark.gray-alpha.600}"
+    }
+  }
+}
\ No newline at end of file
diff --git a/espresso-v2-design-tokens/Styles.Light.tokens.json b/espresso-v2-design-tokens/Styles.Light.tokens.json
new file mode 100644
index 000000000..669b72101
--- /dev/null
+++ b/espresso-v2-design-tokens/Styles.Light.tokens.json
@@ -0,0 +1,1655 @@
+{
+  "surface": {
+    "base": {
+      "$type": "color",
+      "$value": "{neutral.white}",
+      "$description": "base backgrounds"
+    },
+    "gray-1": {
+      "$type": "color",
+      "$value": "{light.gray.50}",
+      "$description": "offwhite backgrounds"
+    },
+    "gray-2": {
+      "$type": "color",
+      "$value": "{light.gray.100}",
+      "$description": "subtle backgrounds"
+    },
+    "gray-3": {
+      "$type": "color",
+      "$value": "{light.gray.200}",
+      "$description": "subtle hover"
+    },
+    "gray-4": {
+      "$type": "color",
+      "$value": "{light.gray.300}",
+      "$description": "subtle active states"
+    },
+    "gray-5": {
+      "$type": "color",
+      "$value": "{light.gray.400}",
+      "$description": "new"
+    },
+    "gray-6": {
+      "$type": "color",
+      "$value": "{light.gray.500}",
+      "$description": "new unused"
+    },
+    "gray-7": {
+      "$type": "color",
+      "$value": "{light.gray.600}",
+      "$description": "new unused"
+    },
+    "gray-8": {
+      "$type": "color",
+      "$value": "{light.gray.700}",
+      "$description": "checkbox and radio Disabled states"
+    },
+    "gray-9": {
+      "$type": "color",
+      "$value": "{light.gray.800}",
+      "$description": "date picker active state"
+    },
+    "gray-10": {
+      "$type": "color",
+      "$value": "{light.gray.900}",
+      "$description": "solid button backgrounds"
+    },
+    "sidebar": {
+      "$type": "color",
+      "$value": "{light.gray.50}",
+      "$description": "modal and page sidebar"
+    },
+    "elevation-1": {
+      "$type": "color",
+      "$value": "{neutral.white}",
+      "$description": "first level of highlight, say modal, card, popover on base background."
+    },
+    "elevation-2": {
+      "$type": "color",
+      "$value": "{neutral.white}",
+      "$description": "second level of highlight, say modal, card, popover on elevation 1 background."
+    },
+    "elevation-3": {
+      "$type": "color",
+      "$value": "{neutral.white}",
+      "$description": "for selected states on segment control, dropdown selected state, etc"
+    },
+    "red-1": {
+      "$type": "color",
+      "$value": "{light.red.50}"
+    },
+    "red-2": {
+      "$type": "color",
+      "$value": "{light.red.100}"
+    },
+    "red-3": {
+      "$type": "color",
+      "$value": "{light.red.200}"
+    },
+    "red-4": {
+      "$type": "color",
+      "$value": "{light.red.300}"
+    },
+    "red-5": {
+      "$type": "color",
+      "$value": "{light.red.400}"
+    },
+    "red-6": {
+      "$type": "color",
+      "$value": "{light.red.500}"
+    },
+    "red-7": {
+      "$type": "color",
+      "$value": "{light.red.600}"
+    },
+    "red-8": {
+      "$type": "color",
+      "$value": "{light.red.700}"
+    },
+    "red-9": {
+      "$type": "color",
+      "$value": "{light.red.800}"
+    },
+    "red-10": {
+      "$type": "color",
+      "$value": "{light.red.900}"
+    },
+    "blue-1": {
+      "$type": "color",
+      "$value": "{light.blue.50}"
+    },
+    "blue-2": {
+      "$type": "color",
+      "$value": "{light.blue.100}"
+    },
+    "blue-3": {
+      "$type": "color",
+      "$value": "{light.blue.200}"
+    },
+    "blue-4": {
+      "$type": "color",
+      "$value": "{light.blue.300}"
+    },
+    "blue-5": {
+      "$type": "color",
+      "$value": "{light.blue.400}"
+    },
+    "blue-6": {
+      "$type": "color",
+      "$value": "{light.blue.500}"
+    },
+    "blue-7": {
+      "$type": "color",
+      "$value": "{light.blue.600}"
+    },
+    "blue-8": {
+      "$type": "color",
+      "$value": "{light.blue.700}"
+    },
+    "blue-9": {
+      "$type": "color",
+      "$value": "{light.blue.800}"
+    },
+    "blue-10": {
+      "$type": "color",
+      "$value": "{light.blue.900}"
+    },
+    "green-1": {
+      "$type": "color",
+      "$value": "{light.green.50}"
+    },
+    "green-2": {
+      "$type": "color",
+      "$value": "{light.green.100}"
+    },
+    "green-3": {
+      "$type": "color",
+      "$value": "{light.green.200}"
+    },
+    "green-4": {
+      "$type": "color",
+      "$value": "{light.green.300}"
+    },
+    "green-5": {
+      "$type": "color",
+      "$value": "{light.green.400}"
+    },
+    "green-6": {
+      "$type": "color",
+      "$value": "{light.green.500}"
+    },
+    "green-7": {
+      "$type": "color",
+      "$value": "{light.green.600}"
+    },
+    "green-8": {
+      "$type": "color",
+      "$value": "{light.green.700}"
+    },
+    "green-9": {
+      "$type": "color",
+      "$value": "{light.green.800}"
+    },
+    "green-10": {
+      "$type": "color",
+      "$value": "{light.green.900}"
+    },
+    "amber-1": {
+      "$type": "color",
+      "$value": "{light.amber.50}"
+    },
+    "amber-2": {
+      "$type": "color",
+      "$value": "{light.amber.100}"
+    },
+    "amber-3": {
+      "$type": "color",
+      "$value": "{light.amber.200}"
+    },
+    "amber-4": {
+      "$type": "color",
+      "$value": "{light.amber.300}"
+    },
+    "amber-5": {
+      "$type": "color",
+      "$value": "{light.amber.400}"
+    },
+    "amber-6": {
+      "$type": "color",
+      "$value": "{light.amber.500}"
+    },
+    "amber-7": {
+      "$type": "color",
+      "$value": "{light.amber.600}"
+    },
+    "amber-8": {
+      "$type": "color",
+      "$value": "{light.amber.700}"
+    },
+    "amber-9": {
+      "$type": "color",
+      "$value": "{light.amber.800}"
+    },
+    "amber-10": {
+      "$type": "color",
+      "$value": "{light.amber.900}"
+    },
+    "violet-1": {
+      "$type": "color",
+      "$value": "{light.violet.50}"
+    },
+    "violet-2": {
+      "$type": "color",
+      "$value": "{light.violet.100}"
+    },
+    "violet-3": {
+      "$type": "color",
+      "$value": "{light.violet.200}"
+    },
+    "violet-4": {
+      "$type": "color",
+      "$value": "{light.violet.300}"
+    },
+    "violet-5": {
+      "$type": "color",
+      "$value": "{light.violet.400}"
+    },
+    "violet-6": {
+      "$type": "color",
+      "$value": "{light.violet.500}"
+    },
+    "violet-7": {
+      "$type": "color",
+      "$value": "{light.violet.600}"
+    },
+    "violet-8": {
+      "$type": "color",
+      "$value": "{light.violet.700}"
+    },
+    "violet-9": {
+      "$type": "color",
+      "$value": "{light.violet.800}"
+    },
+    "violet-10": {
+      "$type": "color",
+      "$value": "{light.violet.900}"
+    },
+    "yellow-1": {
+      "$type": "color",
+      "$value": "{light.yellow.50}"
+    },
+    "yellow-2": {
+      "$type": "color",
+      "$value": "{light.yellow.100}"
+    },
+    "yellow-3": {
+      "$type": "color",
+      "$value": "{light.yellow.200}"
+    },
+    "yellow-4": {
+      "$type": "color",
+      "$value": "{light.yellow.300}"
+    },
+    "yellow-5": {
+      "$type": "color",
+      "$value": "{light.yellow.400}"
+    },
+    "yellow-6": {
+      "$type": "color",
+      "$value": "{light.yellow.500}"
+    },
+    "yellow-7": {
+      "$type": "color",
+      "$value": "{light.yellow.600}"
+    },
+    "yellow-8": {
+      "$type": "color",
+      "$value": "{light.yellow.700}"
+    },
+    "yellow-9": {
+      "$type": "color",
+      "$value": "{light.yellow.800}"
+    },
+    "yellow-10": {
+      "$type": "color",
+      "$value": "{light.yellow.900}"
+    },
+    "orange-1": {
+      "$type": "color",
+      "$value": "{light.orange.50}"
+    },
+    "orange-2": {
+      "$type": "color",
+      "$value": "{light.orange.100}"
+    },
+    "orange-3": {
+      "$type": "color",
+      "$value": "{light.orange.200}"
+    },
+    "orange-4": {
+      "$type": "color",
+      "$value": "{light.orange.300}"
+    },
+    "orange-5": {
+      "$type": "color",
+      "$value": "{light.orange.400}"
+    },
+    "orange-6": {
+      "$type": "color",
+      "$value": "{light.orange.500}"
+    },
+    "orange-7": {
+      "$type": "color",
+      "$value": "{light.orange.600}"
+    },
+    "orange-8": {
+      "$type": "color",
+      "$value": "{light.orange.700}"
+    },
+    "orange-9": {
+      "$type": "color",
+      "$value": "{light.orange.800}"
+    },
+    "orange-10": {
+      "$type": "color",
+      "$value": "{light.orange.900}"
+    },
+    "teal-1": {
+      "$type": "color",
+      "$value": "{light.teal.50}"
+    },
+    "teal-2": {
+      "$type": "color",
+      "$value": "{light.teal.100}"
+    },
+    "teal-3": {
+      "$type": "color",
+      "$value": "{light.teal.200}"
+    },
+    "teal-4": {
+      "$type": "color",
+      "$value": "{light.teal.300}"
+    },
+    "teal-5": {
+      "$type": "color",
+      "$value": "{light.teal.400}"
+    },
+    "teal-6": {
+      "$type": "color",
+      "$value": "{light.teal.500}"
+    },
+    "teal-7": {
+      "$type": "color",
+      "$value": "{light.teal.600}"
+    },
+    "teal-8": {
+      "$type": "color",
+      "$value": "{light.teal.700}"
+    },
+    "teal-9": {
+      "$type": "color",
+      "$value": "{light.teal.800}"
+    },
+    "teal-10": {
+      "$type": "color",
+      "$value": "{light.teal.900}"
+    },
+    "cyan-1": {
+      "$type": "color",
+      "$value": "{light.cyan.50}"
+    },
+    "cyan-2": {
+      "$type": "color",
+      "$value": "{light.cyan.100}"
+    },
+    "cyan-3": {
+      "$type": "color",
+      "$value": "{light.cyan.200}"
+    },
+    "cyan-4": {
+      "$type": "color",
+      "$value": "{light.cyan.300}"
+    },
+    "cyan-5": {
+      "$type": "color",
+      "$value": "{light.cyan.400}"
+    },
+    "cyan-6": {
+      "$type": "color",
+      "$value": "{light.cyan.500}"
+    },
+    "cyan-7": {
+      "$type": "color",
+      "$value": "{light.cyan.600}"
+    },
+    "cyan-8": {
+      "$type": "color",
+      "$value": "{light.cyan.700}"
+    },
+    "cyan-9": {
+      "$type": "color",
+      "$value": "{light.cyan.800}"
+    },
+    "cyan-10": {
+      "$type": "color",
+      "$value": "{light.cyan.900}"
+    },
+    "purple-1": {
+      "$type": "color",
+      "$value": "{light.purple.50}"
+    },
+    "purple-2": {
+      "$type": "color",
+      "$value": "{light.purple.100}"
+    },
+    "purple-3": {
+      "$type": "color",
+      "$value": "{light.purple.200}"
+    },
+    "purple-4": {
+      "$type": "color",
+      "$value": "{light.purple.300}"
+    },
+    "purple-5": {
+      "$type": "color",
+      "$value": "{light.purple.400}"
+    },
+    "purple-6": {
+      "$type": "color",
+      "$value": "{light.purple.500}"
+    },
+    "purple-7": {
+      "$type": "color",
+      "$value": "{light.purple.600}"
+    },
+    "purple-8": {
+      "$type": "color",
+      "$value": "{light.purple.700}"
+    },
+    "purple-9": {
+      "$type": "color",
+      "$value": "{light.purple.800}"
+    },
+    "purple-10": {
+      "$type": "color",
+      "$value": "{light.purple.900}"
+    },
+    "pink-1": {
+      "$type": "color",
+      "$value": "{light.pink.50}"
+    },
+    "pink-2": {
+      "$type": "color",
+      "$value": "{light.pink.100}"
+    },
+    "pink-3": {
+      "$type": "color",
+      "$value": "{light.pink.200}"
+    },
+    "pink-4": {
+      "$type": "color",
+      "$value": "{light.pink.300}"
+    },
+    "pink-5": {
+      "$type": "color",
+      "$value": "{light.pink.400}"
+    },
+    "pink-6": {
+      "$type": "color",
+      "$value": "{light.pink.500}"
+    },
+    "pink-7": {
+      "$type": "color",
+      "$value": "{light.pink.600}"
+    },
+    "pink-8": {
+      "$type": "color",
+      "$value": "{light.pink.700}"
+    },
+    "pink-9": {
+      "$type": "color",
+      "$value": "{light.pink.800}"
+    },
+    "pink-10": {
+      "$type": "color",
+      "$value": "{light.pink.900}"
+    },
+    "alert-button-default": {
+      "$type": "color",
+      "$value": "{neutral.white}"
+    },
+    "alert-button-info": {
+      "$type": "color",
+      "$value": "{neutral.white}"
+    },
+    "alert-button-success": {
+      "$type": "color",
+      "$value": "{neutral.white}"
+    },
+    "alert-button-warning": {
+      "$type": "color",
+      "$value": "{neutral.white}"
+    },
+    "alert-button-error": {
+      "$type": "color",
+      "$value": "{neutral.white}"
+    }
+  },
+  "surface-alpha": {
+    "base": {
+      "$type": "color",
+      "$value": "{neutral.white}"
+    },
+    "gray-1": {
+      "$type": "color",
+      "$value": "{light.gray-alpha.50}"
+    },
+    "gray-2": {
+      "$type": "color",
+      "$value": "{light.gray-alpha.100}"
+    },
+    "gray-3": {
+      "$type": "color",
+      "$value": "{light.gray-alpha.200}"
+    },
+    "gray-4": {
+      "$type": "color",
+      "$value": "{light.gray-alpha.300}"
+    },
+    "gray-5": {
+      "$type": "color",
+      "$value": "{light.gray-alpha.400}"
+    },
+    "gray-6": {
+      "$type": "color",
+      "$value": "{light.gray-alpha.500}"
+    },
+    "gray-7": {
+      "$type": "color",
+      "$value": "{light.gray-alpha.600}"
+    },
+    "gray-8": {
+      "$type": "color",
+      "$value": "{light.gray-alpha.700}"
+    },
+    "gray-9": {
+      "$type": "color",
+      "$value": "{light.gray-alpha.800}"
+    },
+    "gray-10": {
+      "$type": "color",
+      "$value": "{light.gray-alpha.900}"
+    },
+    "sidebar": {
+      "$type": "color",
+      "$value": "{light.gray.50}"
+    },
+    "elevation-1": {
+      "$type": "color",
+      "$value": "{neutral.white}"
+    },
+    "elevation-2": {
+      "$type": "color",
+      "$value": "{neutral.white}"
+    },
+    "elevation-3": {
+      "$type": "color",
+      "$value": "{neutral.white}"
+    },
+    "gray-2-overlay": {
+      "$type": "color",
+      "$value": "{black-alpha.50}"
+    }
+  },
+  "ink": {
+    "base": {
+      "$type": "color",
+      "$value": "{neutral.white}",
+      "$description": "primary button text"
+    },
+    "gray-1": {
+      "$type": "color",
+      "$value": "{light.gray.200}"
+    },
+    "gray-2": {
+      "$type": "color",
+      "$value": "{light.gray.300}"
+    },
+    "gray-3": {
+      "$type": "color",
+      "$value": "{light.gray.400}"
+    },
+    "gray-4": {
+      "$type": "color",
+      "$value": "{light.gray.500}",
+      "$description": "placeholders"
+    },
+    "gray-5": {
+      "$type": "color",
+      "$value": "{light.gray.600}",
+      "$description": "secondary text"
+    },
+    "gray-6": {
+      "$type": "color",
+      "$value": "{light.gray.700}"
+    },
+    "gray-7": {
+      "$type": "color",
+      "$value": "{light.gray.800}"
+    },
+    "gray-8": {
+      "$type": "color",
+      "$value": "{light.gray.900}"
+    },
+    "gray-9": {
+      "$type": "color",
+      "$value": "{light.gray.950}"
+    },
+    "red-1": {
+      "$type": "color",
+      "$value": "{neutral.white}"
+    },
+    "red-2": {
+      "$type": "color",
+      "$value": "{light.red.100}"
+    },
+    "red-3": {
+      "$type": "color",
+      "$value": "{light.red.200}"
+    },
+    "red-4": {
+      "$type": "color",
+      "$value": "{light.red.300}"
+    },
+    "red-5": {
+      "$type": "color",
+      "$value": "{light.red.400}"
+    },
+    "red-6": {
+      "$type": "color",
+      "$value": "{light.red.500}"
+    },
+    "red-7": {
+      "$type": "color",
+      "$value": "{light.red.600}"
+    },
+    "red-8": {
+      "$type": "color",
+      "$value": "{light.red.700}"
+    },
+    "red-9": {
+      "$type": "color",
+      "$value": "{light.red.800}"
+    },
+    "red-10": {
+      "$type": "color",
+      "$value": "{light.red.900}"
+    },
+    "blue-1": {
+      "$type": "color",
+      "$value": "{neutral.white}"
+    },
+    "blue-2": {
+      "$type": "color",
+      "$value": "{light.blue.100}"
+    },
+    "blue-3": {
+      "$type": "color",
+      "$value": "{light.blue.200}"
+    },
+    "blue-4": {
+      "$type": "color",
+      "$value": "{light.blue.300}"
+    },
+    "blue-5": {
+      "$type": "color",
+      "$value": "{light.blue.400}"
+    },
+    "blue-6": {
+      "$type": "color",
+      "$value": "{light.blue.500}"
+    },
+    "blue-7": {
+      "$type": "color",
+      "$value": "{light.blue.600}"
+    },
+    "blue-8": {
+      "$type": "color",
+      "$value": "{light.blue.700}"
+    },
+    "blue-9": {
+      "$type": "color",
+      "$value": "{light.blue.800}"
+    },
+    "blue-10": {
+      "$type": "color",
+      "$value": "{light.blue.900}"
+    },
+    "green-1": {
+      "$type": "color",
+      "$value": "{neutral.white}"
+    },
+    "green-2": {
+      "$type": "color",
+      "$value": "{light.green.100}"
+    },
+    "green-3": {
+      "$type": "color",
+      "$value": "{light.green.200}"
+    },
+    "green-4": {
+      "$type": "color",
+      "$value": "{light.green.300}"
+    },
+    "green-5": {
+      "$type": "color",
+      "$value": "{light.green.400}"
+    },
+    "green-6": {
+      "$type": "color",
+      "$value": "{light.green.500}"
+    },
+    "green-7": {
+      "$type": "color",
+      "$value": "{light.green.600}"
+    },
+    "green-8": {
+      "$type": "color",
+      "$value": "{light.green.700}"
+    },
+    "green-9": {
+      "$type": "color",
+      "$value": "{light.green.800}"
+    },
+    "green-10": {
+      "$type": "color",
+      "$value": "{light.green.900}"
+    },
+    "amber-1": {
+      "$type": "color",
+      "$value": "{neutral.white}"
+    },
+    "amber-2": {
+      "$type": "color",
+      "$value": "{light.amber.100}"
+    },
+    "amber-3": {
+      "$type": "color",
+      "$value": "{light.amber.200}"
+    },
+    "amber-4": {
+      "$type": "color",
+      "$value": "{light.amber.300}"
+    },
+    "amber-5": {
+      "$type": "color",
+      "$value": "{light.amber.400}"
+    },
+    "amber-6": {
+      "$type": "color",
+      "$value": "{light.amber.500}"
+    },
+    "amber-7": {
+      "$type": "color",
+      "$value": "{light.amber.600}"
+    },
+    "amber-8": {
+      "$type": "color",
+      "$value": "{light.amber.700}"
+    },
+    "amber-9": {
+      "$type": "color",
+      "$value": "{light.amber.800}"
+    },
+    "amber-10": {
+      "$type": "color",
+      "$value": "{light.amber.900}"
+    },
+    "violet-1": {
+      "$type": "color",
+      "$value": "{neutral.white}"
+    },
+    "violet-2": {
+      "$type": "color",
+      "$value": "{light.violet.100}"
+    },
+    "violet-3": {
+      "$type": "color",
+      "$value": "{light.violet.200}"
+    },
+    "violet-4": {
+      "$type": "color",
+      "$value": "{light.violet.300}"
+    },
+    "violet-5": {
+      "$type": "color",
+      "$value": "{light.violet.400}"
+    },
+    "violet-6": {
+      "$type": "color",
+      "$value": "{light.violet.500}"
+    },
+    "violet-7": {
+      "$type": "color",
+      "$value": "{light.violet.600}"
+    },
+    "violet-8": {
+      "$type": "color",
+      "$value": "{light.violet.700}"
+    },
+    "violet-9": {
+      "$type": "color",
+      "$value": "{light.violet.800}"
+    },
+    "violet-10": {
+      "$type": "color",
+      "$value": "{light.violet.900}"
+    },
+    "yellow-1": {
+      "$type": "color",
+      "$value": "{neutral.white}"
+    },
+    "yellow-2": {
+      "$type": "color",
+      "$value": "{light.yellow.100}"
+    },
+    "yellow-3": {
+      "$type": "color",
+      "$value": "{light.yellow.200}"
+    },
+    "yellow-4": {
+      "$type": "color",
+      "$value": "{light.yellow.300}"
+    },
+    "yellow-5": {
+      "$type": "color",
+      "$value": "{light.yellow.400}"
+    },
+    "yellow-6": {
+      "$type": "color",
+      "$value": "{light.yellow.500}"
+    },
+    "yellow-7": {
+      "$type": "color",
+      "$value": "{light.yellow.600}"
+    },
+    "yellow-8": {
+      "$type": "color",
+      "$value": "{light.yellow.700}"
+    },
+    "yellow-9": {
+      "$type": "color",
+      "$value": "{light.yellow.800}"
+    },
+    "yellow-10": {
+      "$type": "color",
+      "$value": "{light.yellow.900}"
+    },
+    "orange-1": {
+      "$type": "color",
+      "$value": "{neutral.white}"
+    },
+    "orange-2": {
+      "$type": "color",
+      "$value": "{light.orange.100}"
+    },
+    "orange-3": {
+      "$type": "color",
+      "$value": "{light.orange.200}"
+    },
+    "orange-4": {
+      "$type": "color",
+      "$value": "{light.orange.300}"
+    },
+    "orange-5": {
+      "$type": "color",
+      "$value": "{light.orange.400}"
+    },
+    "orange-6": {
+      "$type": "color",
+      "$value": "{light.orange.500}"
+    },
+    "orange-7": {
+      "$type": "color",
+      "$value": "{light.orange.600}"
+    },
+    "orange-8": {
+      "$type": "color",
+      "$value": "{light.orange.700}"
+    },
+    "orange-9": {
+      "$type": "color",
+      "$value": "{light.orange.800}"
+    },
+    "orange-10": {
+      "$type": "color",
+      "$value": "{light.orange.900}"
+    },
+    "teal-1": {
+      "$type": "color",
+      "$value": "{neutral.white}"
+    },
+    "teal-2": {
+      "$type": "color",
+      "$value": "{light.teal.100}"
+    },
+    "teal-3": {
+      "$type": "color",
+      "$value": "{light.teal.200}"
+    },
+    "teal-4": {
+      "$type": "color",
+      "$value": "{light.teal.300}"
+    },
+    "teal-5": {
+      "$type": "color",
+      "$value": "{light.teal.400}"
+    },
+    "teal-6": {
+      "$type": "color",
+      "$value": "{light.teal.500}"
+    },
+    "teal-7": {
+      "$type": "color",
+      "$value": "{light.teal.600}"
+    },
+    "teal-8": {
+      "$type": "color",
+      "$value": "{light.teal.700}"
+    },
+    "teal-9": {
+      "$type": "color",
+      "$value": "{light.teal.800}"
+    },
+    "teal-10": {
+      "$type": "color",
+      "$value": "{light.teal.900}"
+    },
+    "cyan-1": {
+      "$type": "color",
+      "$value": "{neutral.white}"
+    },
+    "cyan-2": {
+      "$type": "color",
+      "$value": "{light.cyan.100}"
+    },
+    "cyan-3": {
+      "$type": "color",
+      "$value": "{light.cyan.200}"
+    },
+    "cyan-4": {
+      "$type": "color",
+      "$value": "{light.cyan.300}"
+    },
+    "cyan-5": {
+      "$type": "color",
+      "$value": "{light.cyan.400}"
+    },
+    "cyan-6": {
+      "$type": "color",
+      "$value": "{light.cyan.500}"
+    },
+    "cyan-7": {
+      "$type": "color",
+      "$value": "{light.cyan.600}"
+    },
+    "cyan-8": {
+      "$type": "color",
+      "$value": "{light.cyan.700}"
+    },
+    "cyan-9": {
+      "$type": "color",
+      "$value": "{light.cyan.800}"
+    },
+    "cyan-10": {
+      "$type": "color",
+      "$value": "{light.cyan.900}"
+    },
+    "purple-1": {
+      "$type": "color",
+      "$value": "{neutral.white}"
+    },
+    "purple-2": {
+      "$type": "color",
+      "$value": "{light.purple.100}"
+    },
+    "purple-3": {
+      "$type": "color",
+      "$value": "{light.purple.200}"
+    },
+    "purple-4": {
+      "$type": "color",
+      "$value": "{light.purple.300}"
+    },
+    "purple-5": {
+      "$type": "color",
+      "$value": "{light.purple.400}"
+    },
+    "purple-6": {
+      "$type": "color",
+      "$value": "{light.purple.500}"
+    },
+    "purple-7": {
+      "$type": "color",
+      "$value": "{light.purple.600}"
+    },
+    "purple-8": {
+      "$type": "color",
+      "$value": "{light.purple.700}"
+    },
+    "purple-9": {
+      "$type": "color",
+      "$value": "{light.purple.800}"
+    },
+    "purple-10": {
+      "$type": "color",
+      "$value": "{light.purple.900}"
+    },
+    "pink-1": {
+      "$type": "color",
+      "$value": "{neutral.white}"
+    },
+    "pink-2": {
+      "$type": "color",
+      "$value": "{light.pink.100}"
+    },
+    "pink-3": {
+      "$type": "color",
+      "$value": "{light.pink.200}"
+    },
+    "pink-4": {
+      "$type": "color",
+      "$value": "{light.pink.300}"
+    },
+    "pink-5": {
+      "$type": "color",
+      "$value": "{light.pink.400}"
+    },
+    "pink-6": {
+      "$type": "color",
+      "$value": "{light.pink.500}"
+    },
+    "pink-7": {
+      "$type": "color",
+      "$value": "{light.pink.600}"
+    },
+    "pink-8": {
+      "$type": "color",
+      "$value": "{light.pink.700}"
+    },
+    "pink-9": {
+      "$type": "color",
+      "$value": "{light.pink.800}"
+    },
+    "pink-10": {
+      "$type": "color",
+      "$value": "{light.pink.900}"
+    },
+    "alert-button-default": {
+      "$type": "color",
+      "$value": "{light.gray.900}"
+    },
+    "alert-button-info": {
+      "$type": "color",
+      "$value": "{light.gray.900}"
+    },
+    "alert-button-success": {
+      "$type": "color",
+      "$value": "{light.gray.900}"
+    },
+    "alert-button-warning": {
+      "$type": "color",
+      "$value": "{light.gray.900}"
+    },
+    "alert-button-error": {
+      "$type": "color",
+      "$value": "{light.gray.900}"
+    },
+    "blue-link": {
+      "$type": "color",
+      "$value": "{light.blue.500}"
+    }
+  },
+  "outline": {
+    "base": {
+      "$type": "color",
+      "$value": "{neutral.white}"
+    },
+    "gray-1": {
+      "$type": "color",
+      "$value": "{light.gray.200}"
+    },
+    "gray-2": {
+      "$type": "color",
+      "$value": "{light.gray.300}"
+    },
+    "gray-3": {
+      "$type": "color",
+      "$value": "{light.gray.400}"
+    },
+    "gray-4": {
+      "$type": "color",
+      "$value": "{light.gray.500}",
+      "$description": "input focus border"
+    },
+    "gray-5": {
+      "$type": "color",
+      "$value": "{light.gray.600}"
+    },
+    "gray-6": {
+      "$type": "color",
+      "$value": "{light.gray.700}"
+    },
+    "gray-7": {
+      "$type": "color",
+      "$value": "{light.gray.800}"
+    },
+    "gray-8": {
+      "$type": "color",
+      "$value": "{light.gray.900}"
+    },
+    "gray-9": {
+      "$type": "color",
+      "$value": "{light.gray.950}"
+    },
+    "red-1": {
+      "$type": "color",
+      "$value": "{light.red.100}"
+    },
+    "red-2": {
+      "$type": "color",
+      "$value": "{light.red.200}"
+    },
+    "red-3": {
+      "$type": "color",
+      "$value": "{light.red.300}"
+    },
+    "red-4": {
+      "$type": "color",
+      "$value": "{light.red.400}"
+    },
+    "red-5": {
+      "$type": "color",
+      "$value": "{light.red.500}"
+    },
+    "red-6": {
+      "$type": "color",
+      "$value": "{light.red.600}"
+    },
+    "red-7": {
+      "$type": "color",
+      "$value": "{light.red.700}"
+    },
+    "red-8": {
+      "$type": "color",
+      "$value": "{light.red.800}"
+    },
+    "red-9": {
+      "$type": "color",
+      "$value": "{light.red.900}"
+    },
+    "red-10": {
+      "$type": "color",
+      "$value": "{light.red.950}"
+    },
+    "blue-1": {
+      "$type": "color",
+      "$value": "{light.blue.100}"
+    },
+    "blue-2": {
+      "$type": "color",
+      "$value": "{light.blue.200}"
+    },
+    "blue-3": {
+      "$type": "color",
+      "$value": "{light.blue.300}"
+    },
+    "blue-4": {
+      "$type": "color",
+      "$value": "{light.blue.400}"
+    },
+    "blue-5": {
+      "$type": "color",
+      "$value": "{light.blue.500}"
+    },
+    "blue-6": {
+      "$type": "color",
+      "$value": "{light.blue.600}"
+    },
+    "blue-7": {
+      "$type": "color",
+      "$value": "{light.blue.700}"
+    },
+    "blue-8": {
+      "$type": "color",
+      "$value": "{light.blue.800}"
+    },
+    "blue-9": {
+      "$type": "color",
+      "$value": "{light.blue.900}"
+    },
+    "blue-10": {
+      "$type": "color",
+      "$value": "{light.blue.950}"
+    },
+    "green-1": {
+      "$type": "color",
+      "$value": "{light.green.100}"
+    },
+    "green-2": {
+      "$type": "color",
+      "$value": "{light.green.200}"
+    },
+    "green-3": {
+      "$type": "color",
+      "$value": "{light.green.300}"
+    },
+    "green-4": {
+      "$type": "color",
+      "$value": "{light.green.400}"
+    },
+    "green-5": {
+      "$type": "color",
+      "$value": "{light.green.500}"
+    },
+    "green-6": {
+      "$type": "color",
+      "$value": "{light.green.600}"
+    },
+    "green-7": {
+      "$type": "color",
+      "$value": "{light.green.700}"
+    },
+    "green-8": {
+      "$type": "color",
+      "$value": "{light.green.800}"
+    },
+    "green-9": {
+      "$type": "color",
+      "$value": "{light.green.900}"
+    },
+    "green-10": {
+      "$type": "color",
+      "$value": "{light.green.950}"
+    },
+    "amber-1": {
+      "$type": "color",
+      "$value": "{light.amber.100}"
+    },
+    "amber-2": {
+      "$type": "color",
+      "$value": "{light.amber.200}"
+    },
+    "amber-3": {
+      "$type": "color",
+      "$value": "{light.amber.300}"
+    },
+    "amber-4": {
+      "$type": "color",
+      "$value": "{light.amber.400}"
+    },
+    "amber-5": {
+      "$type": "color",
+      "$value": "{light.amber.500}"
+    },
+    "amber-6": {
+      "$type": "color",
+      "$value": "{light.amber.600}"
+    },
+    "amber-7": {
+      "$type": "color",
+      "$value": "{light.amber.700}"
+    },
+    "amber-8": {
+      "$type": "color",
+      "$value": "{light.amber.800}"
+    },
+    "amber-9": {
+      "$type": "color",
+      "$value": "{light.amber.900}"
+    },
+    "amber-10": {
+      "$type": "color",
+      "$value": "{light.amber.950}"
+    },
+    "violet-1": {
+      "$type": "color",
+      "$value": "{light.violet.100}"
+    },
+    "violet-2": {
+      "$type": "color",
+      "$value": "{light.violet.200}"
+    },
+    "violet-3": {
+      "$type": "color",
+      "$value": "{light.violet.300}"
+    },
+    "violet-4": {
+      "$type": "color",
+      "$value": "{light.violet.400}"
+    },
+    "violet-5": {
+      "$type": "color",
+      "$value": "{light.violet.500}"
+    },
+    "violet-6": {
+      "$type": "color",
+      "$value": "{light.violet.600}"
+    },
+    "violet-7": {
+      "$type": "color",
+      "$value": "{light.violet.700}"
+    },
+    "violet-8": {
+      "$type": "color",
+      "$value": "{light.violet.800}"
+    },
+    "violet-9": {
+      "$type": "color",
+      "$value": "{light.violet.900}"
+    },
+    "violet-10": {
+      "$type": "color",
+      "$value": "{light.violet.950}"
+    },
+    "yellow-1": {
+      "$type": "color",
+      "$value": "{light.yellow.100}"
+    },
+    "yellow-2": {
+      "$type": "color",
+      "$value": "{light.yellow.200}"
+    },
+    "yellow-3": {
+      "$type": "color",
+      "$value": "{light.yellow.300}"
+    },
+    "yellow-4": {
+      "$type": "color",
+      "$value": "{light.yellow.400}"
+    },
+    "yellow-5": {
+      "$type": "color",
+      "$value": "{light.yellow.500}"
+    },
+    "yellow-6": {
+      "$type": "color",
+      "$value": "{light.yellow.600}"
+    },
+    "yellow-7": {
+      "$type": "color",
+      "$value": "{light.yellow.700}"
+    },
+    "yellow-8": {
+      "$type": "color",
+      "$value": "{light.yellow.800}"
+    },
+    "yellow-9": {
+      "$type": "color",
+      "$value": "{light.yellow.900}"
+    },
+    "yellow-10": {
+      "$type": "color",
+      "$value": "{light.yellow.950}"
+    },
+    "orange-1": {
+      "$type": "color",
+      "$value": "{light.orange.100}"
+    },
+    "orange-2": {
+      "$type": "color",
+      "$value": "{light.orange.200}"
+    },
+    "orange-3": {
+      "$type": "color",
+      "$value": "{light.orange.300}"
+    },
+    "orange-4": {
+      "$type": "color",
+      "$value": "{light.orange.400}"
+    },
+    "orange-5": {
+      "$type": "color",
+      "$value": "{light.orange.500}"
+    },
+    "orange-6": {
+      "$type": "color",
+      "$value": "{light.orange.600}"
+    },
+    "orange-7": {
+      "$type": "color",
+      "$value": "{light.orange.700}"
+    },
+    "orange-8": {
+      "$type": "color",
+      "$value": "{light.orange.800}"
+    },
+    "orange-9": {
+      "$type": "color",
+      "$value": "{light.orange.900}"
+    },
+    "orange-10": {
+      "$type": "color",
+      "$value": "{light.orange.950}"
+    },
+    "teal-1": {
+      "$type": "color",
+      "$value": "{light.teal.100}"
+    },
+    "teal-2": {
+      "$type": "color",
+      "$value": "{light.teal.200}"
+    },
+    "teal-3": {
+      "$type": "color",
+      "$value": "{light.teal.300}"
+    },
+    "teal-4": {
+      "$type": "color",
+      "$value": "{light.teal.400}"
+    },
+    "teal-5": {
+      "$type": "color",
+      "$value": "{light.teal.500}"
+    },
+    "teal-6": {
+      "$type": "color",
+      "$value": "{light.teal.600}"
+    },
+    "teal-7": {
+      "$type": "color",
+      "$value": "{light.teal.700}"
+    },
+    "teal-8": {
+      "$type": "color",
+      "$value": "{light.teal.800}"
+    },
+    "teal-9": {
+      "$type": "color",
+      "$value": "{light.teal.900}"
+    },
+    "teal-10": {
+      "$type": "color",
+      "$value": "{light.teal.950}"
+    },
+    "cyan-1": {
+      "$type": "color",
+      "$value": "{light.cyan.100}"
+    },
+    "cyan-2": {
+      "$type": "color",
+      "$value": "{light.cyan.200}"
+    },
+    "cyan-3": {
+      "$type": "color",
+      "$value": "{light.cyan.300}"
+    },
+    "cyan-4": {
+      "$type": "color",
+      "$value": "{light.cyan.400}"
+    },
+    "cyan-5": {
+      "$type": "color",
+      "$value": "{light.cyan.500}"
+    },
+    "cyan-6": {
+      "$type": "color",
+      "$value": "{light.cyan.600}"
+    },
+    "cyan-7": {
+      "$type": "color",
+      "$value": "{light.cyan.700}"
+    },
+    "cyan-8": {
+      "$type": "color",
+      "$value": "{light.cyan.800}"
+    },
+    "cyan-9": {
+      "$type": "color",
+      "$value": "{light.cyan.900}"
+    },
+    "cyan-10": {
+      "$type": "color",
+      "$value": "{light.cyan.950}"
+    },
+    "purple-1": {
+      "$type": "color",
+      "$value": "{light.purple.100}"
+    },
+    "purple-2": {
+      "$type": "color",
+      "$value": "{light.purple.200}"
+    },
+    "purple-3": {
+      "$type": "color",
+      "$value": "{light.purple.300}"
+    },
+    "purple-4": {
+      "$type": "color",
+      "$value": "{light.purple.400}"
+    },
+    "purple-5": {
+      "$type": "color",
+      "$value": "{light.purple.500}"
+    },
+    "purple-6": {
+      "$type": "color",
+      "$value": "{light.purple.600}"
+    },
+    "purple-7": {
+      "$type": "color",
+      "$value": "{light.purple.700}"
+    },
+    "purple-8": {
+      "$type": "color",
+      "$value": "{light.purple.800}"
+    },
+    "purple-9": {
+      "$type": "color",
+      "$value": "{light.purple.900}"
+    },
+    "purple-10": {
+      "$type": "color",
+      "$value": "{light.purple.950}"
+    },
+    "pink-1": {
+      "$type": "color",
+      "$value": "{light.pink.100}"
+    },
+    "pink-2": {
+      "$type": "color",
+      "$value": "{light.pink.200}"
+    },
+    "pink-3": {
+      "$type": "color",
+      "$value": "{light.pink.300}"
+    },
+    "pink-4": {
+      "$type": "color",
+      "$value": "{light.pink.400}"
+    },
+    "pink-5": {
+      "$type": "color",
+      "$value": "{light.pink.500}"
+    },
+    "pink-6": {
+      "$type": "color",
+      "$value": "{light.pink.600}"
+    },
+    "pink-7": {
+      "$type": "color",
+      "$value": "{light.pink.700}"
+    },
+    "pink-8": {
+      "$type": "color",
+      "$value": "{light.pink.800}"
+    },
+    "pink-9": {
+      "$type": "color",
+      "$value": "{light.pink.900}"
+    },
+    "pink-10": {
+      "$type": "color",
+      "$value": "{light.pink.950}"
+    },
+    "elevation-1": {
+      "$type": "color",
+      "$value": "{light.gray.200}"
+    },
+    "elevation-2": {
+      "$type": "color",
+      "$value": "{light.gray.200}"
+    }
+  },
+  "outline-alpha": {
+    "base": {
+      "$type": "color",
+      "$value": "{neutral.white}"
+    },
+    "gray-1": {
+      "$type": "color",
+      "$value": "{light.gray-alpha.200}"
+    },
+    "gray-2": {
+      "$type": "color",
+      "$value": "{light.gray-alpha.300}"
+    },
+    "gray-3": {
+      "$type": "color",
+      "$value": "{light.gray-alpha.400}"
+    },
+    "gray-4": {
+      "$type": "color",
+      "$value": "{light.gray-alpha.500}"
+    },
+    "gray-5": {
+      "$type": "color",
+      "$value": "{light.gray-alpha.600}"
+    },
+    "gray-6": {
+      "$type": "color",
+      "$value": "{light.gray-alpha.700}"
+    },
+    "gray-7": {
+      "$type": "color",
+      "$value": "{light.gray-alpha.800}"
+    },
+    "gray-8": {
+      "$type": "color",
+      "$value": "{light.gray-alpha.900}"
+    },
+    "gray-9": {
+      "$type": "color",
+      "$value": "{light.gray-alpha.950}"
+    },
+    "elevation-1": {
+      "$type": "color",
+      "$value": "{light.gray-alpha.200}"
+    },
+    "elevation-2": {
+      "$type": "color",
+      "$value": "{light.gray-alpha.200}"
+    }
+  }
+}
\ No newline at end of file
diff --git a/espresso-v2-design-tokens/Tokens.Mode 1.tokens.json b/espresso-v2-design-tokens/Tokens.Mode 1.tokens.json
new file mode 100644
index 000000000..0b74533a4
--- /dev/null
+++ b/espresso-v2-design-tokens/Tokens.Mode 1.tokens.json	
@@ -0,0 +1,114 @@
+{
+  "radius": {
+    "0": {
+      "$type": "dimension",
+      "$value": "0px"
+    },
+    "1": {
+      "$type": "dimension",
+      "$value": "4px"
+    },
+    "2": {
+      "$type": "dimension",
+      "$value": "5px"
+    },
+    "3": {
+      "$type": "dimension",
+      "$value": "6px"
+    },
+    "4": {
+      "$type": "dimension",
+      "$value": "8px"
+    },
+    "5": {
+      "$type": "dimension",
+      "$value": "10px"
+    },
+    "6": {
+      "$type": "dimension",
+      "$value": "12px"
+    },
+    "7": {
+      "$type": "dimension",
+      "$value": "16px"
+    },
+    "8": {
+      "$type": "dimension",
+      "$value": "20px"
+    },
+    "9": {
+      "$type": "dimension",
+      "$value": "999px"
+    }
+  },
+  "spacing": {
+    "0": {
+      "$type": "dimension",
+      "$value": "0px"
+    },
+    "1": {
+      "$type": "dimension",
+      "$value": "1px"
+    },
+    "2": {
+      "$type": "dimension",
+      "$value": "2px"
+    },
+    "3": {
+      "$type": "dimension",
+      "$value": "3px"
+    },
+    "4": {
+      "$type": "dimension",
+      "$value": "4px"
+    },
+    "5": {
+      "$type": "dimension",
+      "$value": "5px"
+    },
+    "6": {
+      "$type": "dimension",
+      "$value": "6px"
+    },
+    "7": {
+      "$type": "dimension",
+      "$value": "7px"
+    },
+    "8": {
+      "$type": "dimension",
+      "$value": "8px"
+    },
+    "9": {
+      "$type": "dimension",
+      "$value": "9px"
+    },
+    "10": {
+      "$type": "dimension",
+      "$value": "10px"
+    },
+    "11": {
+      "$type": "dimension",
+      "$value": "11px"
+    },
+    "12": {
+      "$type": "dimension",
+      "$value": "12px"
+    },
+    "13": {
+      "$type": "dimension",
+      "$value": "14px"
+    },
+    "14": {
+      "$type": "dimension",
+      "$value": "16px"
+    },
+    "15": {
+      "$type": "dimension",
+      "$value": "20px"
+    },
+    "16": {
+      "$type": "dimension",
+      "$value": "26px"
+    }
+  }
+}
\ No newline at end of file
diff --git a/espresso-v2-design-tokens/Typography.Desktop.tokens.json b/espresso-v2-design-tokens/Typography.Desktop.tokens.json
new file mode 100644
index 000000000..df76333a6
--- /dev/null
+++ b/espresso-v2-design-tokens/Typography.Desktop.tokens.json
@@ -0,0 +1,204 @@
+{
+  "font": {
+    "family": {
+      "text": {
+        "$type": "string",
+        "$value": "Inter Variable"
+      }
+    },
+    "weight": {
+      "regular": {
+        "$type": "string",
+        "$value": "regular"
+      },
+      "medium": {
+        "$type": "string",
+        "$value": "medium"
+      },
+      "semibold": {
+        "$type": "string",
+        "$value": "semibold"
+      },
+      "bold": {
+        "$type": "string",
+        "$value": "bold"
+      },
+      "black": {
+        "$type": "string",
+        "$value": "extrabold"
+      }
+    },
+    "size": {
+      "tiny": {
+        "$type": "dimension",
+        "$value": "11px"
+      },
+      "2xs": {
+        "$type": "dimension",
+        "$value": "11px"
+      },
+      "xs": {
+        "$type": "dimension",
+        "$value": "12px"
+      },
+      "sm": {
+        "$type": "dimension",
+        "$value": "13px"
+      },
+      "base": {
+        "$type": "dimension",
+        "$value": "14px"
+      },
+      "lg": {
+        "$type": "dimension",
+        "$value": "16px"
+      },
+      "xl": {
+        "$type": "dimension",
+        "$value": "18px"
+      },
+      "2xl": {
+        "$type": "dimension",
+        "$value": "20px"
+      },
+      "3xl": {
+        "$type": "dimension",
+        "$value": "24px"
+      },
+      "4xl": {
+        "$type": "dimension",
+        "$value": "26px"
+      },
+      "5xl": {
+        "$type": "dimension",
+        "$value": "28px"
+      },
+      "6xl": {
+        "$type": "dimension",
+        "$value": "32px"
+      },
+      "7xl": {
+        "$type": "dimension",
+        "$value": "40px"
+      },
+      "8xl": {
+        "$type": "dimension",
+        "$value": "44px"
+      },
+      "9xl": {
+        "$type": "dimension",
+        "$value": "48px"
+      },
+      "10xl": {
+        "$type": "dimension",
+        "$value": "52px"
+      },
+      "11xl": {
+        "$type": "dimension",
+        "$value": "56px"
+      },
+      "12xl": {
+        "$type": "dimension",
+        "$value": "64px"
+      },
+      "13xl": {
+        "$type": "dimension",
+        "$value": "72px"
+      },
+      "14xl": {
+        "$type": "dimension",
+        "$value": "80px"
+      },
+      "15xl": {
+        "$type": "dimension",
+        "$value": "88px"
+      }
+    },
+    "line-height": {
+      "tiny": {
+        "$type": "dimension",
+        "$value": "0px"
+      },
+      "2xs": {
+        "$type": "dimension",
+        "$value": "13px"
+      },
+      "xs": {
+        "$type": "dimension",
+        "$value": "14px"
+      },
+      "sm": {
+        "$type": "dimension",
+        "$value": "15px"
+      },
+      "base": {
+        "$type": "dimension",
+        "$value": "16px"
+      },
+      "lg": {
+        "$type": "dimension",
+        "$value": "18px"
+      },
+      "xl": {
+        "$type": "dimension",
+        "$value": "21px"
+      },
+      "2xl": {
+        "$type": "dimension",
+        "$value": "23px"
+      },
+      "3xl": {
+        "$type": "dimension",
+        "$value": "28px"
+      },
+      "4xl": {
+        "$type": "dimension",
+        "$value": "42px"
+      },
+      "5xl": {
+        "$type": "dimension",
+        "$value": "45px"
+      },
+      "6xl": {
+        "$type": "dimension",
+        "$value": "51px"
+      },
+      "7xl": {
+        "$type": "dimension",
+        "$value": "56px"
+      },
+      "8xl": {
+        "$type": "dimension",
+        "$value": "62px"
+      },
+      "9xl": {
+        "$type": "dimension",
+        "$value": "67px"
+      },
+      "10xl": {
+        "$type": "dimension",
+        "$value": "73px"
+      },
+      "11xl": {
+        "$type": "dimension",
+        "$value": "78px"
+      },
+      "12xl": {
+        "$type": "dimension",
+        "$value": "83px"
+      },
+      "13xl": {
+        "$type": "dimension",
+        "$value": "92px"
+      },
+      "14xl": {
+        "$type": "dimension",
+        "$value": "96px"
+      },
+      "15xl": {
+        "$type": "dimension",
+        "$value": "106px"
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/espresso-v2-design-tokens/color.styles.tokens.json b/espresso-v2-design-tokens/color.styles.tokens.json
new file mode 100644
index 000000000..8e894d4ed
--- /dev/null
+++ b/espresso-v2-design-tokens/color.styles.tokens.json
@@ -0,0 +1,111 @@
+{
+  "angular": {
+    "white": {
+      "$type": "gradient",
+      "$description": "White",
+      "$value": {
+        "type": "conic",
+        "angle": 351,
+        "stops": [
+          {
+            "color": "#ffffff",
+            "position": 0.72
+          },
+          {
+            "color": "#ffffff00",
+            "position": 1
+          }
+        ]
+      }
+    },
+    "black": {
+      "$type": "gradient",
+      "$description": "Black",
+      "$value": {
+        "type": "conic",
+        "angle": 351,
+        "stops": [
+          {
+            "color": "#383838",
+            "position": 0.72
+          },
+          {
+            "color": "#38383800",
+            "position": 1
+          }
+        ]
+      }
+    },
+    "green": {
+      "$type": "gradient",
+      "$description": "Green",
+      "$value": {
+        "type": "conic",
+        "angle": 351,
+        "stops": [
+          {
+            "color": "#17754b",
+            "position": 0.72
+          },
+          {
+            "color": "#17754b00",
+            "position": 1
+          }
+        ]
+      }
+    },
+    "amber": {
+      "$type": "gradient",
+      "$value": {
+        "type": "conic",
+        "angle": 180,
+        "stops": [
+          {
+            "color": "#e79913",
+            "position": 0.22
+          },
+          {
+            "color": "#e7991300",
+            "position": 0.47
+          }
+        ]
+      }
+    },
+    "red": {
+      "$type": "gradient",
+      "$description": "Red",
+      "$value": {
+        "type": "conic",
+        "angle": 351,
+        "stops": [
+          {
+            "color": "#cd2929",
+            "position": 0.72
+          },
+          {
+            "color": "#cd292900",
+            "position": 1
+          }
+        ]
+      }
+    },
+    "blue": {
+      "$type": "gradient",
+      "$description": "Blue",
+      "$value": {
+        "type": "conic",
+        "angle": 351,
+        "stops": [
+          {
+            "color": "#006edb",
+            "position": 0.72
+          },
+          {
+            "color": "#006edb00",
+            "position": 1
+          }
+        ]
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/espresso-v2-design-tokens/effect.styles.tokens.json b/espresso-v2-design-tokens/effect.styles.tokens.json
new file mode 100644
index 000000000..d70156197
--- /dev/null
+++ b/espresso-v2-design-tokens/effect.styles.tokens.json
@@ -0,0 +1,528 @@
+{
+  "shadow-test": {
+    "$type": "shadow",
+    "$value": [
+      {
+        "offsetX": "0px",
+        "offsetY": "0px",
+        "blur": "0px",
+        "spread": "2px",
+        "color": "{outline.base}"
+      }
+    ]
+  },
+  "elevation": {
+    "light": {
+      "sm": {
+        "$type": "shadow",
+        "$value": [
+          {
+            "offsetX": "0px",
+            "offsetY": "1px",
+            "blur": "3px",
+            "spread": "0px",
+            "color": "#00000024"
+          },
+          {
+            "offsetX": "0px",
+            "offsetY": "0px",
+            "blur": "1px",
+            "spread": "0px",
+            "color": "#00000024"
+          },
+          {
+            "offsetX": "0px",
+            "offsetY": "0.25px",
+            "blur": "1.5px",
+            "spread": "0px",
+            "color": "#ffffff14",
+            "inset": true
+          }
+        ]
+      },
+      "base": {
+        "$type": "shadow",
+        "$value": [
+          {
+            "offsetX": "0px",
+            "offsetY": "2px",
+            "blur": "5px",
+            "spread": "0px",
+            "color": "#00000024"
+          },
+          {
+            "offsetX": "0px",
+            "offsetY": "0px",
+            "blur": "1.5px",
+            "spread": "0px",
+            "color": "#00000029"
+          },
+          {
+            "offsetX": "0px",
+            "offsetY": "0.25px",
+            "blur": "1.5px",
+            "spread": "0px",
+            "color": "#ffffff14",
+            "inset": true
+          }
+        ]
+      },
+      "md": {
+        "$type": "shadow",
+        "$value": [
+          {
+            "offsetX": "0px",
+            "offsetY": "6px",
+            "blur": "12px",
+            "spread": "-2px",
+            "color": "#0000001f"
+          },
+          {
+            "offsetX": "0px",
+            "offsetY": "0px",
+            "blur": "6px",
+            "spread": "2px",
+            "color": "#00000008"
+          },
+          {
+            "offsetX": "0px",
+            "offsetY": "0px",
+            "blur": "1.5px",
+            "spread": "0px",
+            "color": "#00000026"
+          },
+          {
+            "offsetX": "0px",
+            "offsetY": "0.25px",
+            "blur": "1.5px",
+            "spread": "0px",
+            "color": "#ffffff14",
+            "inset": true
+          }
+        ]
+      },
+      "lg": {
+        "$type": "shadow",
+        "$value": [
+          {
+            "offsetX": "0px",
+            "offsetY": "18px",
+            "blur": "22px",
+            "spread": "-6px",
+            "color": "#0000001a"
+          },
+          {
+            "offsetX": "0px",
+            "offsetY": "0px",
+            "blur": "6px",
+            "spread": "3px",
+            "color": "#00000008"
+          },
+          {
+            "offsetX": "0px",
+            "offsetY": "0px",
+            "blur": "1.5px",
+            "spread": "0px",
+            "color": "#0000002e"
+          }
+        ]
+      },
+      "xl": {
+        "$type": "shadow",
+        "$value": [
+          {
+            "offsetX": "0px",
+            "offsetY": "24px",
+            "blur": "30px",
+            "spread": "-8px",
+            "color": "#0000001a"
+          },
+          {
+            "offsetX": "0px",
+            "offsetY": "0px",
+            "blur": "10px",
+            "spread": "2px",
+            "color": "#0000000a"
+          },
+          {
+            "offsetX": "0px",
+            "offsetY": "0px",
+            "blur": "1px",
+            "spread": "0px",
+            "color": "#00000033"
+          },
+          {
+            "offsetX": "0px",
+            "offsetY": "0.25px",
+            "blur": "2px",
+            "spread": "0px",
+            "color": "#ffffff26",
+            "inset": true
+          }
+        ]
+      },
+      "2xl": {
+        "$type": "shadow",
+        "$value": [
+          {
+            "offsetX": "0px",
+            "offsetY": "44px",
+            "blur": "52px",
+            "spread": "-10px",
+            "color": "#0000001a"
+          },
+          {
+            "offsetX": "0px",
+            "offsetY": "0px",
+            "blur": "10px",
+            "spread": "2px",
+            "color": "#00000008"
+          },
+          {
+            "offsetX": "0px",
+            "offsetY": "0px",
+            "blur": "1.5px",
+            "spread": "0px",
+            "color": "#00000040"
+          },
+          {
+            "offsetX": "0px",
+            "offsetY": "0.1px",
+            "blur": "2px",
+            "spread": "0px",
+            "color": "#ffffff14",
+            "inset": true
+          }
+        ]
+      }
+    },
+    "dark": {
+      "sm": {
+        "$type": "shadow",
+        "$value": [
+          {
+            "offsetX": "0px",
+            "offsetY": "1px",
+            "blur": "3px",
+            "spread": "0px",
+            "color": "#000000b2"
+          },
+          {
+            "offsetX": "0px",
+            "offsetY": "0px",
+            "blur": "14px",
+            "spread": "0px",
+            "color": "#0000002e"
+          },
+          {
+            "offsetX": "0px",
+            "offsetY": "0.5px",
+            "blur": "0.5px",
+            "spread": "0.5px",
+            "color": "#ffffff08",
+            "inset": true
+          }
+        ]
+      },
+      "base": {
+        "$type": "shadow",
+        "$value": [
+          {
+            "offsetX": "0px",
+            "offsetY": "2px",
+            "blur": "5px",
+            "spread": "0px",
+            "color": "#00000099"
+          },
+          {
+            "offsetX": "0px",
+            "offsetY": "0px",
+            "blur": "14px",
+            "spread": "0px",
+            "color": "#0000002e"
+          },
+          {
+            "offsetX": "0px",
+            "offsetY": "0.5px",
+            "blur": "0.5px",
+            "spread": "0.5px",
+            "color": "#ffffff08",
+            "inset": true
+          }
+        ]
+      },
+      "md": {
+        "$type": "shadow",
+        "$value": [
+          {
+            "offsetX": "0px",
+            "offsetY": "6px",
+            "blur": "12px",
+            "spread": "-2px",
+            "color": "#00000099"
+          },
+          {
+            "offsetX": "0px",
+            "offsetY": "0px",
+            "blur": "16px",
+            "spread": "2px",
+            "color": "#00000033"
+          },
+          {
+            "offsetX": "0px",
+            "offsetY": "0.5px",
+            "blur": "0.5px",
+            "spread": "0.5px",
+            "color": "#ffffff08",
+            "inset": true
+          }
+        ]
+      },
+      "lg": {
+        "$type": "shadow",
+        "$value": [
+          {
+            "offsetX": "0px",
+            "offsetY": "18px",
+            "blur": "20px",
+            "spread": "-8px",
+            "color": "#00000085"
+          },
+          {
+            "offsetX": "0px",
+            "offsetY": "0px",
+            "blur": "16px",
+            "spread": "0px",
+            "color": "#0000001a"
+          },
+          {
+            "offsetX": "0px",
+            "offsetY": "0.5px",
+            "blur": "1.5px",
+            "spread": "0.5px",
+            "color": "#ffffff0a",
+            "inset": true
+          }
+        ]
+      },
+      "xl": {
+        "$type": "shadow",
+        "$value": [
+          {
+            "offsetX": "0px",
+            "offsetY": "26px",
+            "blur": "34px",
+            "spread": "-6px",
+            "color": "#0000006b"
+          },
+          {
+            "offsetX": "0px",
+            "offsetY": "0px",
+            "blur": "14px",
+            "spread": "2px",
+            "color": "#0000001f"
+          },
+          {
+            "offsetX": "0px",
+            "offsetY": "0.5px",
+            "blur": "1.5px",
+            "spread": "0.5px",
+            "color": "#ffffff0a",
+            "inset": true
+          }
+        ]
+      },
+      "2xl": {
+        "$type": "shadow",
+        "$value": [
+          {
+            "offsetX": "0px",
+            "offsetY": "44px",
+            "blur": "52px",
+            "spread": "-4px",
+            "color": "#0000006b"
+          },
+          {
+            "offsetX": "0px",
+            "offsetY": "0px",
+            "blur": "14px",
+            "spread": "10px",
+            "color": "#0000001f"
+          },
+          {
+            "offsetX": "0px",
+            "offsetY": "0.5px",
+            "blur": "1.5px",
+            "spread": "0.5px",
+            "color": "#ffffff0f",
+            "inset": true
+          }
+        ]
+      }
+    },
+    "custom": {
+      "status": {
+        "$type": "shadow",
+        "$value": [
+          {
+            "offsetX": "0px",
+            "offsetY": "0px",
+            "blur": "0px",
+            "spread": "1.5px",
+            "color": "#ffffff"
+          }
+        ]
+      }
+    }
+  },
+  "focus": {
+    "light": {
+      "default": {
+        "$type": "shadow",
+        "$value": [
+          {
+            "offsetX": "0px",
+            "offsetY": "0px",
+            "blur": "0px",
+            "spread": "2px",
+            "color": "#c9c9c9e5"
+          }
+        ]
+      },
+      "red": {
+        "$type": "shadow",
+        "$value": [
+          {
+            "offsetX": "0px",
+            "offsetY": "0px",
+            "blur": "0px",
+            "spread": "2px",
+            "color": "#fa9c9de5"
+          }
+        ]
+      },
+      "green": {
+        "$type": "shadow",
+        "$value": [
+          {
+            "offsetX": "0px",
+            "offsetY": "0px",
+            "blur": "0px",
+            "spread": "2px",
+            "color": "#5ed29ce5"
+          }
+        ]
+      },
+      "amber": {
+        "$type": "shadow",
+        "$value": [
+          {
+            "offsetX": "0px",
+            "offsetY": "0px",
+            "blur": "0px",
+            "spread": "2px",
+            "color": "#ffda7ce5"
+          }
+        ]
+      },
+      "blue": {
+        "$type": "shadow",
+        "$value": [
+          {
+            "offsetX": "0px",
+            "offsetY": "0px",
+            "blur": "0px",
+            "spread": "2px",
+            "color": "#65b9fce5"
+          }
+        ]
+      },
+      "violet": {
+        "$type": "shadow",
+        "$value": [
+          {
+            "offsetX": "0px",
+            "offsetY": "0px",
+            "blur": "0px",
+            "spread": "2px",
+            "color": "#bea2fce5"
+          }
+        ]
+      }
+    },
+    "dark": {
+      "default": {
+        "$type": "shadow",
+        "$value": [
+          {
+            "offsetX": "0px",
+            "offsetY": "0px",
+            "blur": "0px",
+            "spread": "3px",
+            "color": "#464646cc"
+          }
+        ]
+      },
+      "red": {
+        "$type": "shadow",
+        "$value": [
+          {
+            "offsetX": "0px",
+            "offsetY": "0px",
+            "blur": "0px",
+            "spread": "3px",
+            "color": "#751819cc"
+          }
+        ]
+      },
+      "green": {
+        "$type": "shadow",
+        "$value": [
+          {
+            "offsetX": "0px",
+            "offsetY": "0px",
+            "blur": "0px",
+            "spread": "3px",
+            "color": "#1d563bcc"
+          }
+        ]
+      },
+      "amber": {
+        "$type": "shadow",
+        "$value": [
+          {
+            "offsetX": "0px",
+            "offsetY": "0px",
+            "blur": "0px",
+            "spread": "3px",
+            "color": "#744811cc"
+          }
+        ]
+      },
+      "blue": {
+        "$type": "shadow",
+        "$value": [
+          {
+            "offsetX": "0px",
+            "offsetY": "0px",
+            "blur": "0px",
+            "spread": "3px",
+            "color": "#0e3d62cc"
+          }
+        ]
+      },
+      "violet": {
+        "$type": "shadow",
+        "$value": [
+          {
+            "offsetX": "0px",
+            "offsetY": "0px",
+            "blur": "0px",
+            "spread": "3px",
+            "color": "#412d87cc"
+          }
+        ]
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/espresso-v2-design-tokens/grid.styles.tokens.json b/espresso-v2-design-tokens/grid.styles.tokens.json
new file mode 100644
index 000000000..f8057a7cc
--- /dev/null
+++ b/espresso-v2-design-tokens/grid.styles.tokens.json
@@ -0,0 +1,25 @@
+{
+  "icon grid": {
+    "$type": "grid",
+    "$value": [
+      {
+        "pattern": "columns",
+        "visible": true,
+        "alignment": "stretch",
+        "color": "#ff00001a",
+        "gutterSize": "0px",
+        "count": 1,
+        "offset": "1px"
+      },
+      {
+        "pattern": "rows",
+        "visible": true,
+        "alignment": "stretch",
+        "color": "#ff00001a",
+        "gutterSize": "0px",
+        "count": 1,
+        "offset": "1px"
+      }
+    ]
+  }
+}
\ No newline at end of file
diff --git a/espresso-v2-design-tokens/manifest.json b/espresso-v2-design-tokens/manifest.json
new file mode 100644
index 000000000..425015d31
--- /dev/null
+++ b/espresso-v2-design-tokens/manifest.json
@@ -0,0 +1,44 @@
+{
+  "name": "Design Tokens",
+  "collections": {
+    "Colour primitives": {
+      "modes": {
+        "Light": [
+          "Colour primitives.Light.tokens.json"
+        ]
+      }
+    },
+    "Tokens": {
+      "modes": {
+        "Mode 1": [
+          "Tokens.Mode 1.tokens.json"
+        ]
+      }
+    },
+    "Typography": {
+      "modes": {
+        "Desktop": [
+          "Typography.Desktop.tokens.json"
+        ]
+      }
+    }
+  },
+  "styles": {
+    "Styles": [
+      "Styles.Light.tokens.json",
+      "Styles.Dark.tokens.json"
+    ],
+    "text": [
+      "text.styles.tokens.json"
+    ],
+    "effect": [
+      "effect.styles.tokens.json"
+    ],
+    "color": [
+      "color.styles.tokens.json"
+    ],
+    "grid": [
+      "grid.styles.tokens.json"
+    ]
+  }
+}
\ No newline at end of file
diff --git a/espresso-v2-design-tokens/text.styles.tokens.json b/espresso-v2-design-tokens/text.styles.tokens.json
new file mode 100644
index 000000000..9665ebb6e
--- /dev/null
+++ b/espresso-v2-design-tokens/text.styles.tokens.json
@@ -0,0 +1,2040 @@
+{
+  "text": {
+    "tiny": {
+      "regular": {
+        "$type": "typography",
+        "$value": {
+          "fontFamily": "Inter Variable",
+          "fontSize": "11px",
+          "fontWeight": 420,
+          "letterSpacing": "9%",
+          "lineHeight": "115%",
+          "textTransform": "uppercase",
+          "textDecoration": "none"
+        }
+      },
+      "medium": {
+        "$type": "typography",
+        "$value": {
+          "fontFamily": "Inter Variable",
+          "fontSize": "11px",
+          "fontWeight": 500,
+          "letterSpacing": "9%",
+          "lineHeight": "115%",
+          "textTransform": "uppercase",
+          "textDecoration": "none"
+        }
+      },
+      "semibold": {
+        "$type": "typography",
+        "$value": {
+          "fontFamily": "Inter Variable",
+          "fontSize": "11px",
+          "fontWeight": 600,
+          "letterSpacing": "9%",
+          "lineHeight": "115%",
+          "textTransform": "uppercase",
+          "textDecoration": "none"
+        }
+      },
+      "bold": {
+        "$type": "typography",
+        "$value": {
+          "fontFamily": "Inter Variable",
+          "fontSize": "11px",
+          "fontWeight": 700,
+          "letterSpacing": "9%",
+          "lineHeight": "115%",
+          "textTransform": "uppercase",
+          "textDecoration": "none"
+        }
+      },
+      "black": {
+        "$type": "typography",
+        "$value": {
+          "fontFamily": "Inter Variable",
+          "fontSize": "11px",
+          "fontWeight": 800,
+          "letterSpacing": "9%",
+          "lineHeight": "115%",
+          "textTransform": "uppercase",
+          "textDecoration": "none"
+        }
+      }
+    },
+    "2xs": {
+      "regular": {
+        "$type": "typography",
+        "$value": {
+          "fontFamily": "Inter Variable",
+          "fontSize": "11px",
+          "fontWeight": 420,
+          "letterSpacing": "1%",
+          "lineHeight": "115%",
+          "textTransform": "none",
+          "textDecoration": "none"
+        }
+      },
+      "medium": {
+        "$type": "typography",
+        "$value": {
+          "fontFamily": "Inter Variable",
+          "fontSize": "11px",
+          "fontWeight": 500,
+          "letterSpacing": "1%",
+          "lineHeight": "115%",
+          "textTransform": "none",
+          "textDecoration": "none"
+        }
+      },
+      "semibold": {
+        "$type": "typography",
+        "$value": {
+          "fontFamily": "Inter Variable",
+          "fontSize": "11px",
+          "fontWeight": 600,
+          "letterSpacing": "1%",
+          "lineHeight": "115%",
+          "textTransform": "none",
+          "textDecoration": "none"
+        }
+      },
+      "bold": {
+        "$type": "typography",
+        "$value": {
+          "fontFamily": "Inter Variable",
+          "fontSize": "11px",
+          "fontWeight": 700,
+          "letterSpacing": "1%",
+          "lineHeight": "115%",
+          "textTransform": "none",
+          "textDecoration": "none"
+        }
+      },
+      "black": {
+        "$type": "typography",
+        "$value": {
+          "fontFamily": "Inter Variable",
+          "fontSize": "11px",
+          "fontWeight": 800,
+          "letterSpacing": "1%",
+          "lineHeight": "115%",
+          "textTransform": "none",
+          "textDecoration": "none"
+        }
+      }
+    },
+    "xs": {
+      "regular": {
+        "$type": "typography",
+        "$value": {
+          "fontFamily": "Inter Variable",
+          "fontSize": "12px",
+          "fontWeight": 420,
+          "letterSpacing": "2%",
+          "lineHeight": "115%",
+          "textTransform": "none",
+          "textDecoration": "none"
+        }
+      },
+      "medium": {
+        "$type": "typography",
+        "$value": {
+          "fontFamily": "Inter Variable",
+          "fontSize": "12px",
+          "fontWeight": 500,
+          "letterSpacing": "2%",
+          "lineHeight": "115%",
+          "textTransform": "none",
+          "textDecoration": "none"
+        }
+      },
+      "semibold": {
+        "$type": "typography",
+        "$value": {
+          "fontFamily": "Inter Variable",
+          "fontSize": "12px",
+          "fontWeight": 600,
+          "letterSpacing": "1.5%",
+          "lineHeight": "115%",
+          "textTransform": "none",
+          "textDecoration": "none"
+        }
+      },
+      "bold": {
+        "$type": "typography",
+        "$value": {
+          "fontFamily": "Inter Variable",
+          "fontSize": "12px",
+          "fontWeight": 700,
+          "letterSpacing": "1.5%",
+          "lineHeight": "115%",
+          "textTransform": "none",
+          "textDecoration": "none"
+        }
+      },
+      "black": {
+        "$type": "typography",
+        "$value": {
+          "fontFamily": "Inter Variable",
+          "fontSize": "12px",
+          "fontWeight": 800,
+          "letterSpacing": "1.5%",
+          "lineHeight": "115%",
+          "textTransform": "none",
+          "textDecoration": "none"
+        }
+      }
+    },
+    "sm": {
+      "regular": {
+        "$type": "typography",
+        "$value": {
+          "fontFamily": "Inter Variable",
+          "fontSize": "13px",
+          "fontWeight": 420,
+          "letterSpacing": "2%",
+          "lineHeight": "115%",
+          "textTransform": "none",
+          "textDecoration": "none"
+        }
+      },
+      "medium": {
+        "$type": "typography",
+        "$value": {
+          "fontFamily": "Inter Variable",
+          "fontSize": "13px",
+          "fontWeight": 500,
+          "letterSpacing": "2%",
+          "lineHeight": "115%",
+          "textTransform": "none",
+          "textDecoration": "none"
+        }
+      },
+      "semibold": {
+        "$type": "typography",
+        "$value": {
+          "fontFamily": "Inter Variable",
+          "fontSize": "13px",
+          "fontWeight": 600,
+          "letterSpacing": "1.5%",
+          "lineHeight": "115%",
+          "textTransform": "none",
+          "textDecoration": "none"
+        }
+      },
+      "bold": {
+        "$type": "typography",
+        "$value": {
+          "fontFamily": "Inter Variable",
+          "fontSize": "13px",
+          "fontWeight": 700,
+          "letterSpacing": "1.5%",
+          "lineHeight": "115%",
+          "textTransform": "none",
+          "textDecoration": "none"
+        }
+      },
+      "black": {
+        "$type": "typography",
+        "$value": {
+          "fontFamily": "Inter Variable",
+          "fontSize": "13px",
+          "fontWeight": 800,
+          "letterSpacing": "1.5%",
+          "lineHeight": "115%",
+          "textTransform": "none",
+          "textDecoration": "none"
+        }
+      }
+    },
+    "base": {
+      "regular": {
+        "$type": "typography",
+        "$value": {
+          "fontFamily": "Inter Variable",
+          "fontSize": "14px",
+          "fontWeight": 420,
+          "letterSpacing": "2%",
+          "lineHeight": "115%",
+          "textTransform": "none",
+          "textDecoration": "none"
+        }
+      },
+      "medium": {
+        "$type": "typography",
+        "$value": {
+          "fontFamily": "Inter Variable",
+          "fontSize": "14px",
+          "fontWeight": 500,
+          "letterSpacing": "1.5%",
+          "lineHeight": "115%",
+          "textTransform": "none",
+          "textDecoration": "none"
+        }
+      },
+      "semibold": {
+        "$type": "typography",
+        "$value": {
+          "fontFamily": "Inter Variable",
+          "fontSize": "14px",
+          "fontWeight": 600,
+          "letterSpacing": "1.5%",
+          "lineHeight": "115%",
+          "textTransform": "none",
+          "textDecoration": "none"
+        }
+      },
+      "bold": {
+        "$type": "typography",
+        "$value": {
+          "fontFamily": "Inter Variable",
+          "fontSize": "14px",
+          "fontWeight": 700,
+          "letterSpacing": "1.5%",
+          "lineHeight": "115%",
+          "textTransform": "none",
+          "textDecoration": "none"
+        }
+      }
+    },
+    "lg": {
+      "regular": {
+        "$type": "typography",
+        "$value": {
+          "fontFamily": "Inter Variable",
+          "fontSize": "15px",
+          "fontWeight": 420,
+          "letterSpacing": "2%",
+          "lineHeight": "115%",
+          "textTransform": "none",
+          "textDecoration": "none"
+        }
+      },
+      "medium": {
+        "$type": "typography",
+        "$value": {
+          "fontFamily": "Inter Variable",
+          "fontSize": "15px",
+          "fontWeight": 500,
+          "letterSpacing": "1.5%",
+          "lineHeight": "115%",
+          "textTransform": "none",
+          "textDecoration": "none"
+        }
+      },
+      "semibold": {
+        "$type": "typography",
+        "$value": {
+          "fontFamily": "Inter Variable",
+          "fontSize": "15px",
+          "fontWeight": 600,
+          "letterSpacing": "1.5%",
+          "lineHeight": "115%",
+          "textTransform": "none",
+          "textDecoration": "none"
+        }
+      },
+      "bold": {
+        "$type": "typography",
+        "$value": {
+          "fontFamily": "Inter Variable",
+          "fontSize": "15px",
+          "fontWeight": 700,
+          "letterSpacing": "1.5%",
+          "lineHeight": "115%",
+          "textTransform": "none",
+          "textDecoration": "none"
+        }
+      },
+      "black": {
+        "$type": "typography",
+        "$value": {
+          "fontFamily": "Inter Variable",
+          "fontSize": "15px",
+          "fontWeight": 800,
+          "letterSpacing": "1.5%",
+          "lineHeight": "115%",
+          "textTransform": "none",
+          "textDecoration": "none"
+        }
+      }
+    },
+    "xl": {
+      "regular": {
+        "$type": "typography",
+        "$value": {
+          "fontFamily": "Inter Variable",
+          "fontSize": "16px",
+          "fontWeight": 420,
+          "letterSpacing": "2%",
+          "lineHeight": "115%",
+          "textTransform": "none",
+          "textDecoration": "none"
+        }
+      },
+      "medium": {
+        "$type": "typography",
+        "$value": {
+          "fontFamily": "Inter Variable",
+          "fontSize": "16px",
+          "fontWeight": 500,
+          "letterSpacing": "1.5%",
+          "lineHeight": "115%",
+          "textTransform": "none",
+          "textDecoration": "none"
+        }
+      },
+      "semibold": {
+        "$type": "typography",
+        "$value": {
+          "fontFamily": "Inter Variable",
+          "fontSize": "16px",
+          "fontWeight": 600,
+          "letterSpacing": "1.5%",
+          "lineHeight": "115%",
+          "textTransform": "none",
+          "textDecoration": "none"
+        }
+      },
+      "bold": {
+        "$type": "typography",
+        "$value": {
+          "fontFamily": "Inter Variable",
+          "fontSize": "16px",
+          "fontWeight": 700,
+          "letterSpacing": "1.5%",
+          "lineHeight": "115%",
+          "textTransform": "none",
+          "textDecoration": "none"
+        }
+      },
+      "black": {
+        "$type": "typography",
+        "$value": {
+          "fontFamily": "Inter Variable",
+          "fontSize": "16px",
+          "fontWeight": 800,
+          "letterSpacing": "1.5%",
+          "lineHeight": "115%",
+          "textTransform": "none",
+          "textDecoration": "none"
+        }
+      }
+    },
+    "2xl": {
+      "regular": {
+        "$type": "typography",
+        "$value": {
+          "fontFamily": "Inter Variable",
+          "fontSize": "17px",
+          "fontWeight": 420,
+          "letterSpacing": "2%",
+          "lineHeight": "115%",
+          "textTransform": "none",
+          "textDecoration": "none"
+        }
+      },
+      "medium": {
+        "$type": "typography",
+        "$value": {
+          "fontFamily": "Inter Variable",
+          "fontSize": "17px",
+          "fontWeight": 500,
+          "letterSpacing": "1.5%",
+          "lineHeight": "115%",
+          "textTransform": "none",
+          "textDecoration": "none"
+        }
+      },
+      "semibold": {
+        "$type": "typography",
+        "$value": {
+          "fontFamily": "Inter Variable",
+          "fontSize": "17px",
+          "fontWeight": 600,
+          "letterSpacing": "1.5%",
+          "lineHeight": "115%",
+          "textTransform": "none",
+          "textDecoration": "none"
+        }
+      },
+      "bold": {
+        "$type": "typography",
+        "$value": {
+          "fontFamily": "Inter Variable",
+          "fontSize": "17px",
+          "fontWeight": 700,
+          "letterSpacing": "1.5%",
+          "lineHeight": "115%",
+          "textTransform": "none",
+          "textDecoration": "none"
+        }
+      },
+      "black": {
+        "$type": "typography",
+        "$value": {
+          "fontFamily": "Inter Variable",
+          "fontSize": "17px",
+          "fontWeight": 800,
+          "letterSpacing": "1.5%",
+          "lineHeight": "115%",
+          "textTransform": "none",
+          "textDecoration": "none"
+        }
+      }
+    },
+    "3xl": {
+      "regular": {
+        "$type": "typography",
+        "$value": {
+          "fontFamily": "Inter Variable",
+          "fontSize": "18px",
+          "fontWeight": 420,
+          "letterSpacing": "1%",
+          "lineHeight": "115%",
+          "textTransform": "none",
+          "textDecoration": "none"
+        }
+      },
+      "medium": {
+        "$type": "typography",
+        "$value": {
+          "fontFamily": "Inter Variable",
+          "fontSize": "18px",
+          "fontWeight": 500,
+          "letterSpacing": "1%",
+          "lineHeight": "115%",
+          "textTransform": "none",
+          "textDecoration": "none"
+        }
+      },
+      "semibold": {
+        "$type": "typography",
+        "$value": {
+          "fontFamily": "Inter Variable",
+          "fontSize": "18px",
+          "fontWeight": 600,
+          "letterSpacing": "1%",
+          "lineHeight": "115%",
+          "textTransform": "none",
+          "textDecoration": "none"
+        }
+      },
+      "bold": {
+        "$type": "typography",
+        "$value": {
+          "fontFamily": "Inter Variable",
+          "fontSize": "18px",
+          "fontWeight": 700,
+          "letterSpacing": "1%",
+          "lineHeight": "115%",
+          "textTransform": "none",
+          "textDecoration": "none"
+        }
+      },
+      "black": {
+        "$type": "typography",
+        "$value": {
+          "fontFamily": "Inter Variable",
+          "fontSize": "18px",
+          "fontWeight": 800,
+          "letterSpacing": "1%",
+          "lineHeight": "115%",
+          "textTransform": "none",
+          "textDecoration": "none"
+        }
+      }
+    },
+    "4xl": {
+      "regular": {
+        "$type": "typography",
+        "$value": {
+          "fontFamily": "Inter Variable",
+          "fontSize": "20px",
+          "fontWeight": 420,
+          "letterSpacing": "0.5%",
+          "lineHeight": "115%",
+          "textTransform": "none",
+          "textDecoration": "none"
+        }
+      },
+      "medium": {
+        "$type": "typography",
+        "$value": {
+          "fontFamily": "Inter Variable",
+          "fontSize": "20px",
+          "fontWeight": 500,
+          "letterSpacing": "1%",
+          "lineHeight": "115%",
+          "textTransform": "none",
+          "textDecoration": "none"
+        }
+      },
+      "semibold": {
+        "$type": "typography",
+        "$value": {
+          "fontFamily": "Inter Variable",
+          "fontSize": "20px",
+          "fontWeight": 600,
+          "letterSpacing": "1%",
+          "lineHeight": "115%",
+          "textTransform": "none",
+          "textDecoration": "none"
+        }
+      },
+      "bold": {
+        "$type": "typography",
+        "$value": {
+          "fontFamily": "Inter Variable",
+          "fontSize": "20px",
+          "fontWeight": 700,
+          "letterSpacing": "1%",
+          "lineHeight": "115%",
+          "textTransform": "none",
+          "textDecoration": "none"
+        }
+      },
+      "black": {
+        "$type": "typography",
+        "$value": {
+          "fontFamily": "Inter Variable",
+          "fontSize": "20px",
+          "fontWeight": 800,
+          "letterSpacing": "1%",
+          "lineHeight": "115%",
+          "textTransform": "none",
+          "textDecoration": "none"
+        }
+      }
+    },
+    "5xl": {
+      "regular": {
+        "$type": "typography",
+        "$value": {
+          "fontFamily": "Inter Variable",
+          "fontSize": "24px",
+          "fontWeight": 420,
+          "letterSpacing": "0.5%",
+          "lineHeight": "115%",
+          "textTransform": "none",
+          "textDecoration": "none"
+        }
+      },
+      "medium": {
+        "$type": "typography",
+        "$value": {
+          "fontFamily": "Inter Variable",
+          "fontSize": "24px",
+          "fontWeight": 500,
+          "letterSpacing": "0.5%",
+          "lineHeight": "115%",
+          "textTransform": "none",
+          "textDecoration": "none"
+        }
+      },
+      "semibold": {
+        "$type": "typography",
+        "$value": {
+          "fontFamily": "Inter Variable",
+          "fontSize": "24px",
+          "fontWeight": 600,
+          "letterSpacing": "0.5%",
+          "lineHeight": "115%",
+          "textTransform": "none",
+          "textDecoration": "none"
+        }
+      },
+      "bold": {
+        "$type": "typography",
+        "$value": {
+          "fontFamily": "Inter Variable",
+          "fontSize": "24px",
+          "fontWeight": 700,
+          "letterSpacing": "0.5%",
+          "lineHeight": "115%",
+          "textTransform": "none",
+          "textDecoration": "none"
+        }
+      },
+      "black": {
+        "$type": "typography",
+        "$value": {
+          "fontFamily": "Inter Variable",
+          "fontSize": "24px",
+          "fontWeight": 800,
+          "letterSpacing": "0.5%",
+          "lineHeight": "115%",
+          "textTransform": "none",
+          "textDecoration": "none"
+        }
+      }
+    },
+    "6xl": {
+      "regular": {
+        "$type": "typography",
+        "$value": {
+          "fontFamily": "Inter Variable",
+          "fontSize": "26px",
+          "fontWeight": 420,
+          "letterSpacing": "1%",
+          "lineHeight": "160%",
+          "textTransform": "none",
+          "textDecoration": "none"
+        }
+      },
+      "medium": {
+        "$type": "typography",
+        "$value": {
+          "fontFamily": "Inter Variable",
+          "fontSize": "26px",
+          "fontWeight": 500,
+          "letterSpacing": "0.5%",
+          "lineHeight": "160%",
+          "textTransform": "none",
+          "textDecoration": "none"
+        }
+      },
+      "semibold": {
+        "$type": "typography",
+        "$value": {
+          "fontFamily": "Inter Variable",
+          "fontSize": "26px",
+          "fontWeight": 600,
+          "letterSpacing": "0.5%",
+          "lineHeight": "160%",
+          "textTransform": "none",
+          "textDecoration": "none"
+        }
+      },
+      "bold": {
+        "$type": "typography",
+        "$value": {
+          "fontFamily": "Inter Variable",
+          "fontSize": "26px",
+          "fontWeight": 700,
+          "letterSpacing": "0.5%",
+          "lineHeight": "160%",
+          "textTransform": "none",
+          "textDecoration": "none"
+        }
+      },
+      "black": {
+        "$type": "typography",
+        "$value": {
+          "fontFamily": "Inter Variable",
+          "fontSize": "26px",
+          "fontWeight": 800,
+          "letterSpacing": "1%",
+          "lineHeight": "160%",
+          "textTransform": "none",
+          "textDecoration": "none"
+        }
+      }
+    },
+    "7xl": {
+      "regular": {
+        "$type": "typography",
+        "$value": {
+          "fontFamily": "Inter Variable",
+          "fontSize": "28px",
+          "fontWeight": 420,
+          "letterSpacing": "1%",
+          "lineHeight": "160%",
+          "textTransform": "none",
+          "textDecoration": "none"
+        }
+      },
+      "medium": {
+        "$type": "typography",
+        "$value": {
+          "fontFamily": "Inter Variable",
+          "fontSize": "28px",
+          "fontWeight": 500,
+          "letterSpacing": "0.5%",
+          "lineHeight": "160%",
+          "textTransform": "none",
+          "textDecoration": "none"
+        }
+      },
+      "semibold": {
+        "$type": "typography",
+        "$value": {
+          "fontFamily": "Inter Variable",
+          "fontSize": "28px",
+          "fontWeight": 600,
+          "letterSpacing": "1%",
+          "lineHeight": "160%",
+          "textTransform": "none",
+          "textDecoration": "none"
+        }
+      },
+      "bold": {
+        "$type": "typography",
+        "$value": {
+          "fontFamily": "Inter Variable",
+          "fontSize": "28px",
+          "fontWeight": 700,
+          "letterSpacing": "1.5%",
+          "lineHeight": "160%",
+          "textTransform": "none",
+          "textDecoration": "none"
+        }
+      },
+      "black": {
+        "$type": "typography",
+        "$value": {
+          "fontFamily": "Inter Variable",
+          "fontSize": "28px",
+          "fontWeight": 800,
+          "letterSpacing": "1%",
+          "lineHeight": "160%",
+          "textTransform": "none",
+          "textDecoration": "none"
+        }
+      }
+    },
+    "8xl": {
+      "regular": {
+        "$type": "typography",
+        "$value": {
+          "fontFamily": "Inter Variable",
+          "fontSize": "32px",
+          "fontWeight": 420,
+          "letterSpacing": "2%",
+          "lineHeight": "160%",
+          "textTransform": "none",
+          "textDecoration": "none"
+        }
+      },
+      "medium": {
+        "$type": "typography",
+        "$value": {
+          "fontFamily": "Inter Variable",
+          "fontSize": "32px",
+          "fontWeight": 500,
+          "letterSpacing": "1.5%",
+          "lineHeight": "160%",
+          "textTransform": "none",
+          "textDecoration": "none"
+        }
+      },
+      "semibold": {
+        "$type": "typography",
+        "$value": {
+          "fontFamily": "Inter Variable",
+          "fontSize": "32px",
+          "fontWeight": 600,
+          "letterSpacing": "1.5%",
+          "lineHeight": "160%",
+          "textTransform": "none",
+          "textDecoration": "none"
+        }
+      },
+      "bold": {
+        "$type": "typography",
+        "$value": {
+          "fontFamily": "Inter Variable",
+          "fontSize": "32px",
+          "fontWeight": 700,
+          "letterSpacing": "1.5%",
+          "lineHeight": "160%",
+          "textTransform": "none",
+          "textDecoration": "none"
+        }
+      },
+      "black": {
+        "$type": "typography",
+        "$value": {
+          "fontFamily": "Inter Variable",
+          "fontSize": "32px",
+          "fontWeight": 800,
+          "letterSpacing": "0.5%",
+          "lineHeight": "160%",
+          "textTransform": "none",
+          "textDecoration": "none"
+        }
+      }
+    },
+    "9xl": {
+      "regular": {
+        "$type": "typography",
+        "$value": {
+          "fontFamily": "Inter Variable",
+          "fontSize": "40px",
+          "fontWeight": 420,
+          "letterSpacing": "0%",
+          "lineHeight": "140%",
+          "textTransform": "none",
+          "textDecoration": "none"
+        }
+      },
+      "medium": {
+        "$type": "typography",
+        "$value": {
+          "fontFamily": "Inter Variable",
+          "fontSize": "40px",
+          "fontWeight": 500,
+          "letterSpacing": "0%",
+          "lineHeight": "140%",
+          "textTransform": "none",
+          "textDecoration": "none"
+        }
+      },
+      "semibold": {
+        "$type": "typography",
+        "$value": {
+          "fontFamily": "Inter Variable",
+          "fontSize": "40px",
+          "fontWeight": 600,
+          "letterSpacing": "0%",
+          "lineHeight": "140%",
+          "textTransform": "none",
+          "textDecoration": "none"
+        }
+      },
+      "bold": {
+        "$type": "typography",
+        "$value": {
+          "fontFamily": "Inter Variable",
+          "fontSize": "40px",
+          "fontWeight": 700,
+          "letterSpacing": "0%",
+          "lineHeight": "140%",
+          "textTransform": "none",
+          "textDecoration": "none"
+        }
+      },
+      "black": {
+        "$type": "typography",
+        "$value": {
+          "fontFamily": "Inter Variable",
+          "fontSize": "40px",
+          "fontWeight": 800,
+          "letterSpacing": "0%",
+          "lineHeight": "140%",
+          "textTransform": "none",
+          "textDecoration": "none"
+        }
+      }
+    },
+    "10xl": {
+      "regular": {
+        "$type": "typography",
+        "$value": {
+          "fontFamily": "Inter Variable",
+          "fontSize": "44px",
+          "fontWeight": 420,
+          "letterSpacing": "0%",
+          "lineHeight": "140%",
+          "textTransform": "none",
+          "textDecoration": "none"
+        }
+      },
+      "medium": {
+        "$type": "typography",
+        "$value": {
+          "fontFamily": "Inter Variable",
+          "fontSize": "44px",
+          "fontWeight": 500,
+          "letterSpacing": "0%",
+          "lineHeight": "140%",
+          "textTransform": "none",
+          "textDecoration": "none"
+        }
+      },
+      "semibold": {
+        "$type": "typography",
+        "$value": {
+          "fontFamily": "Inter Variable",
+          "fontSize": "44px",
+          "fontWeight": 600,
+          "letterSpacing": "0%",
+          "lineHeight": "140%",
+          "textTransform": "none",
+          "textDecoration": "none"
+        }
+      },
+      "bold": {
+        "$type": "typography",
+        "$value": {
+          "fontFamily": "Inter Variable",
+          "fontSize": "44px",
+          "fontWeight": 700,
+          "letterSpacing": "0%",
+          "lineHeight": "140%",
+          "textTransform": "none",
+          "textDecoration": "none"
+        }
+      },
+      "black": {
+        "$type": "typography",
+        "$value": {
+          "fontFamily": "Inter Variable",
+          "fontSize": "44px",
+          "fontWeight": 800,
+          "letterSpacing": "0%",
+          "lineHeight": "140%",
+          "textTransform": "none",
+          "textDecoration": "none"
+        }
+      }
+    },
+    "11xl": {
+      "regular": {
+        "$type": "typography",
+        "$value": {
+          "fontFamily": "Inter Variable",
+          "fontSize": "48px",
+          "fontWeight": 420,
+          "letterSpacing": "0%",
+          "lineHeight": "140%",
+          "textTransform": "none",
+          "textDecoration": "none"
+        }
+      },
+      "medium": {
+        "$type": "typography",
+        "$value": {
+          "fontFamily": "Inter Variable",
+          "fontSize": "48px",
+          "fontWeight": 500,
+          "letterSpacing": "0%",
+          "lineHeight": "140%",
+          "textTransform": "none",
+          "textDecoration": "none"
+        }
+      },
+      "semibold": {
+        "$type": "typography",
+        "$value": {
+          "fontFamily": "Inter Variable",
+          "fontSize": "48px",
+          "fontWeight": 600,
+          "letterSpacing": "0%",
+          "lineHeight": "140%",
+          "textTransform": "none",
+          "textDecoration": "none"
+        }
+      },
+      "bold": {
+        "$type": "typography",
+        "$value": {
+          "fontFamily": "Inter Variable",
+          "fontSize": "48px",
+          "fontWeight": 700,
+          "letterSpacing": "0.5%",
+          "lineHeight": "140%",
+          "textTransform": "none",
+          "textDecoration": "none"
+        }
+      },
+      "black": {
+        "$type": "typography",
+        "$value": {
+          "fontFamily": "Inter Variable",
+          "fontSize": "48px",
+          "fontWeight": 800,
+          "letterSpacing": "0.5%",
+          "lineHeight": "140%",
+          "textTransform": "none",
+          "textDecoration": "none"
+        }
+      }
+    },
+    "12xl": {
+      "regular": {
+        "$type": "typography",
+        "$value": {
+          "fontFamily": "Inter Variable",
+          "fontSize": "52px",
+          "fontWeight": 420,
+          "letterSpacing": "0%",
+          "lineHeight": "140%",
+          "textTransform": "none",
+          "textDecoration": "none"
+        }
+      },
+      "medium": {
+        "$type": "typography",
+        "$value": {
+          "fontFamily": "Inter Variable",
+          "fontSize": "52px",
+          "fontWeight": 500,
+          "letterSpacing": "0%",
+          "lineHeight": "140%",
+          "textTransform": "none",
+          "textDecoration": "none"
+        }
+      },
+      "semibold": {
+        "$type": "typography",
+        "$value": {
+          "fontFamily": "Inter Variable",
+          "fontSize": "52px",
+          "fontWeight": 600,
+          "letterSpacing": "0%",
+          "lineHeight": "140%",
+          "textTransform": "none",
+          "textDecoration": "none"
+        }
+      },
+      "bold": {
+        "$type": "typography",
+        "$value": {
+          "fontFamily": "Inter Variable",
+          "fontSize": "52px",
+          "fontWeight": 700,
+          "letterSpacing": "0%",
+          "lineHeight": "140%",
+          "textTransform": "none",
+          "textDecoration": "none"
+        }
+      },
+      "black": {
+        "$type": "typography",
+        "$value": {
+          "fontFamily": "Inter Variable",
+          "fontSize": "52px",
+          "fontWeight": 800,
+          "letterSpacing": "0.5%",
+          "lineHeight": "140%",
+          "textTransform": "none",
+          "textDecoration": "none"
+        }
+      }
+    },
+    "13xl": {
+      "regular": {
+        "$type": "typography",
+        "$value": {
+          "fontFamily": "Inter Variable",
+          "fontSize": "56px",
+          "fontWeight": 420,
+          "letterSpacing": "0.5%",
+          "lineHeight": "140%",
+          "textTransform": "none",
+          "textDecoration": "none"
+        }
+      },
+      "medium": {
+        "$type": "typography",
+        "$value": {
+          "fontFamily": "Inter Variable",
+          "fontSize": "56px",
+          "fontWeight": 500,
+          "letterSpacing": "0%",
+          "lineHeight": "140%",
+          "textTransform": "none",
+          "textDecoration": "none"
+        }
+      },
+      "semibold": {
+        "$type": "typography",
+        "$value": {
+          "fontFamily": "Inter Variable",
+          "fontSize": "56px",
+          "fontWeight": 600,
+          "letterSpacing": "0%",
+          "lineHeight": "140%",
+          "textTransform": "none",
+          "textDecoration": "none"
+        }
+      },
+      "bold": {
+        "$type": "typography",
+        "$value": {
+          "fontFamily": "Inter Variable",
+          "fontSize": "56px",
+          "fontWeight": 700,
+          "letterSpacing": "0%",
+          "lineHeight": "140%",
+          "textTransform": "none",
+          "textDecoration": "none"
+        }
+      },
+      "black": {
+        "$type": "typography",
+        "$value": {
+          "fontFamily": "Inter Variable",
+          "fontSize": "56px",
+          "fontWeight": 800,
+          "letterSpacing": "0%",
+          "lineHeight": "140%",
+          "textTransform": "none",
+          "textDecoration": "none"
+        }
+      }
+    },
+    "14xl": {
+      "regular": {
+        "$type": "typography",
+        "$value": {
+          "fontFamily": "Inter Variable",
+          "fontSize": "64px",
+          "fontWeight": 420,
+          "letterSpacing": "0%",
+          "lineHeight": "130%",
+          "textTransform": "none",
+          "textDecoration": "none"
+        }
+      },
+      "medium": {
+        "$type": "typography",
+        "$value": {
+          "fontFamily": "Inter Variable",
+          "fontSize": "64px",
+          "fontWeight": 500,
+          "letterSpacing": "0%",
+          "lineHeight": "130%",
+          "textTransform": "none",
+          "textDecoration": "none"
+        }
+      },
+      "semibold": {
+        "$type": "typography",
+        "$value": {
+          "fontFamily": "Inter Variable",
+          "fontSize": "64px",
+          "fontWeight": 600,
+          "letterSpacing": "0%",
+          "lineHeight": "130%",
+          "textTransform": "none",
+          "textDecoration": "none"
+        }
+      },
+      "bold": {
+        "$type": "typography",
+        "$value": {
+          "fontFamily": "Inter Variable",
+          "fontSize": "64px",
+          "fontWeight": 700,
+          "letterSpacing": "0%",
+          "lineHeight": "130%",
+          "textTransform": "none",
+          "textDecoration": "none"
+        }
+      },
+      "black": {
+        "$type": "typography",
+        "$value": {
+          "fontFamily": "Inter Variable",
+          "fontSize": "64px",
+          "fontWeight": 800,
+          "letterSpacing": "0%",
+          "lineHeight": "130%",
+          "textTransform": "none",
+          "textDecoration": "none"
+        }
+      }
+    },
+    "15xl": {
+      "regular": {
+        "$type": "typography",
+        "$value": {
+          "fontFamily": "Inter Variable",
+          "fontSize": "72px",
+          "fontWeight": 420,
+          "letterSpacing": "0%",
+          "lineHeight": "130%",
+          "textTransform": "none",
+          "textDecoration": "none"
+        }
+      },
+      "medium": {
+        "$type": "typography",
+        "$value": {
+          "fontFamily": "Inter Variable",
+          "fontSize": "72px",
+          "fontWeight": 500,
+          "letterSpacing": "0%",
+          "lineHeight": "130%",
+          "textTransform": "none",
+          "textDecoration": "none"
+        }
+      },
+      "semibold": {
+        "$type": "typography",
+        "$value": {
+          "fontFamily": "Inter Variable",
+          "fontSize": "72px",
+          "fontWeight": 600,
+          "letterSpacing": "0%",
+          "lineHeight": "130%",
+          "textTransform": "none",
+          "textDecoration": "none"
+        }
+      },
+      "bold": {
+        "$type": "typography",
+        "$value": {
+          "fontFamily": "Inter Variable",
+          "fontSize": "72px",
+          "fontWeight": 700,
+          "letterSpacing": "0%",
+          "lineHeight": "130%",
+          "textTransform": "none",
+          "textDecoration": "none"
+        }
+      },
+      "black": {
+        "$type": "typography",
+        "$value": {
+          "fontFamily": "Inter Variable",
+          "fontSize": "72px",
+          "fontWeight": 800,
+          "letterSpacing": "0%",
+          "lineHeight": "130%",
+          "textTransform": "none",
+          "textDecoration": "none"
+        }
+      }
+    },
+    "16xl": {
+      "regular": {
+        "$type": "typography",
+        "$value": {
+          "fontFamily": "Inter Variable",
+          "fontSize": "80px",
+          "fontWeight": 420,
+          "letterSpacing": "0%",
+          "lineHeight": "120%",
+          "textTransform": "none",
+          "textDecoration": "none"
+        }
+      },
+      "medium": {
+        "$type": "typography",
+        "$value": {
+          "fontFamily": "Inter Variable",
+          "fontSize": "80px",
+          "fontWeight": 500,
+          "letterSpacing": "0.5%",
+          "lineHeight": "120%",
+          "textTransform": "none",
+          "textDecoration": "none"
+        }
+      },
+      "semibold": {
+        "$type": "typography",
+        "$value": {
+          "fontFamily": "Inter Variable",
+          "fontSize": "80px",
+          "fontWeight": 600,
+          "letterSpacing": "0%",
+          "lineHeight": "120%",
+          "textTransform": "none",
+          "textDecoration": "none"
+        }
+      },
+      "bold": {
+        "$type": "typography",
+        "$value": {
+          "fontFamily": "Inter Variable",
+          "fontSize": "80px",
+          "fontWeight": 700,
+          "letterSpacing": "0%",
+          "lineHeight": "120%",
+          "textTransform": "none",
+          "textDecoration": "none"
+        }
+      },
+      "black": {
+        "$type": "typography",
+        "$value": {
+          "fontFamily": "Inter Variable",
+          "fontSize": "80px",
+          "fontWeight": 800,
+          "letterSpacing": "0%",
+          "lineHeight": "120%",
+          "textTransform": "none",
+          "textDecoration": "none"
+        }
+      }
+    },
+    "17xl": {
+      "regular": {
+        "$type": "typography",
+        "$value": {
+          "fontFamily": "Inter Variable",
+          "fontSize": "88px",
+          "fontWeight": 420,
+          "letterSpacing": "0%",
+          "lineHeight": "120%",
+          "textTransform": "none",
+          "textDecoration": "none"
+        }
+      },
+      "medium": {
+        "$type": "typography",
+        "$value": {
+          "fontFamily": "Inter Variable",
+          "fontSize": "88px",
+          "fontWeight": 500,
+          "letterSpacing": "0%",
+          "lineHeight": "120%",
+          "textTransform": "none",
+          "textDecoration": "none"
+        }
+      },
+      "semibold": {
+        "$type": "typography",
+        "$value": {
+          "fontFamily": "Inter Variable",
+          "fontSize": "88px",
+          "fontWeight": 600,
+          "letterSpacing": "0%",
+          "lineHeight": "120%",
+          "textTransform": "none",
+          "textDecoration": "none"
+        }
+      },
+      "bold": {
+        "$type": "typography",
+        "$value": {
+          "fontFamily": "Inter Variable",
+          "fontSize": "88px",
+          "fontWeight": 700,
+          "letterSpacing": "0%",
+          "lineHeight": "120%",
+          "textTransform": "none",
+          "textDecoration": "none"
+        }
+      },
+      "black": {
+        "$type": "typography",
+        "$value": {
+          "fontFamily": "Inter Variable",
+          "fontSize": "88px",
+          "fontWeight": 800,
+          "letterSpacing": "0%",
+          "lineHeight": "120%",
+          "textTransform": "none",
+          "textDecoration": "none"
+        }
+      }
+    }
+  },
+  "paragraph": {
+    "2xs": {
+      "regular": {
+        "$type": "typography",
+        "$value": {
+          "fontFamily": "Inter Variable",
+          "fontSize": "11px",
+          "fontWeight": 420,
+          "letterSpacing": "1%",
+          "lineHeight": "160%",
+          "textTransform": "none",
+          "textDecoration": "none"
+        }
+      },
+      "medium": {
+        "$type": "typography",
+        "$value": {
+          "fontFamily": "Inter Variable",
+          "fontSize": "11px",
+          "fontWeight": 500,
+          "letterSpacing": "1%",
+          "lineHeight": "160%",
+          "textTransform": "none",
+          "textDecoration": "none"
+        }
+      },
+      "semibold": {
+        "$type": "typography",
+        "$value": {
+          "fontFamily": "Inter Variable",
+          "fontSize": "11px",
+          "fontWeight": 600,
+          "letterSpacing": "1%",
+          "lineHeight": "160%",
+          "textTransform": "none",
+          "textDecoration": "none"
+        }
+      },
+      "bold": {
+        "$type": "typography",
+        "$value": {
+          "fontFamily": "Inter Variable",
+          "fontSize": "11px",
+          "fontWeight": 700,
+          "letterSpacing": "1%",
+          "lineHeight": "160%",
+          "textTransform": "none",
+          "textDecoration": "none"
+        }
+      },
+      "black": {
+        "$type": "typography",
+        "$value": {
+          "fontFamily": "Inter Variable",
+          "fontSize": "11px",
+          "fontWeight": 800,
+          "letterSpacing": "1%",
+          "lineHeight": "160%",
+          "textTransform": "none",
+          "textDecoration": "none"
+        }
+      }
+    },
+    "xs": {
+      "regular": {
+        "$type": "typography",
+        "$value": {
+          "fontFamily": "Inter Variable",
+          "fontSize": "12px",
+          "fontWeight": 420,
+          "letterSpacing": "2%",
+          "lineHeight": "160%",
+          "textTransform": "none",
+          "textDecoration": "none"
+        }
+      },
+      "medium": {
+        "$type": "typography",
+        "$value": {
+          "fontFamily": "Inter Variable",
+          "fontSize": "12px",
+          "fontWeight": 500,
+          "letterSpacing": "2%",
+          "lineHeight": "160%",
+          "textTransform": "none",
+          "textDecoration": "none"
+        }
+      },
+      "semibold": {
+        "$type": "typography",
+        "$value": {
+          "fontFamily": "Inter Variable",
+          "fontSize": "12px",
+          "fontWeight": 600,
+          "letterSpacing": "1.5%",
+          "lineHeight": "160%",
+          "textTransform": "none",
+          "textDecoration": "none"
+        }
+      },
+      "bold": {
+        "$type": "typography",
+        "$value": {
+          "fontFamily": "Inter Variable",
+          "fontSize": "12px",
+          "fontWeight": 700,
+          "letterSpacing": "1.5%",
+          "lineHeight": "160%",
+          "textTransform": "none",
+          "textDecoration": "none"
+        }
+      },
+      "black": {
+        "$type": "typography",
+        "$value": {
+          "fontFamily": "Inter Variable",
+          "fontSize": "12px",
+          "fontWeight": 800,
+          "letterSpacing": "1.5%",
+          "lineHeight": "160%",
+          "textTransform": "none",
+          "textDecoration": "none"
+        }
+      }
+    },
+    "sm": {
+      "regular": {
+        "$type": "typography",
+        "$value": {
+          "fontFamily": "Inter Variable",
+          "fontSize": "13px",
+          "fontWeight": 420,
+          "letterSpacing": "1.5%",
+          "lineHeight": "150%",
+          "textTransform": "none",
+          "textDecoration": "none"
+        }
+      },
+      "medium": {
+        "$type": "typography",
+        "$value": {
+          "fontFamily": "Inter Variable",
+          "fontSize": "13px",
+          "fontWeight": 500,
+          "letterSpacing": "2%",
+          "lineHeight": "150%",
+          "textTransform": "none",
+          "textDecoration": "none"
+        }
+      },
+      "semibold": {
+        "$type": "typography",
+        "$value": {
+          "fontFamily": "Inter Variable",
+          "fontSize": "13px",
+          "fontWeight": 600,
+          "letterSpacing": "1.5%",
+          "lineHeight": "150%",
+          "textTransform": "none",
+          "textDecoration": "none"
+        }
+      },
+      "bold": {
+        "$type": "typography",
+        "$value": {
+          "fontFamily": "Inter Variable",
+          "fontSize": "13px",
+          "fontWeight": 700,
+          "letterSpacing": "1.5%",
+          "lineHeight": "150%",
+          "textTransform": "none",
+          "textDecoration": "none"
+        }
+      },
+      "black": {
+        "$type": "typography",
+        "$value": {
+          "fontFamily": "Inter Variable",
+          "fontSize": "13px",
+          "fontWeight": 800,
+          "letterSpacing": "1.5%",
+          "lineHeight": "150%",
+          "textTransform": "none",
+          "textDecoration": "none"
+        }
+      }
+    },
+    "base": {
+      "regular": {
+        "$type": "typography",
+        "$value": {
+          "fontFamily": "Inter Variable",
+          "fontSize": "14px",
+          "fontWeight": 420,
+          "letterSpacing": "2%",
+          "lineHeight": "150%",
+          "textTransform": "none",
+          "textDecoration": "none"
+        }
+      },
+      "medium": {
+        "$type": "typography",
+        "$value": {
+          "fontFamily": "Inter Variable",
+          "fontSize": "14px",
+          "fontWeight": 500,
+          "letterSpacing": "1.5%",
+          "lineHeight": "150%",
+          "textTransform": "none",
+          "textDecoration": "none"
+        }
+      },
+      "semibold": {
+        "$type": "typography",
+        "$value": {
+          "fontFamily": "Inter Variable",
+          "fontSize": "14px",
+          "fontWeight": 600,
+          "letterSpacing": "1.5%",
+          "lineHeight": "150%",
+          "textTransform": "none",
+          "textDecoration": "none"
+        }
+      },
+      "bold": {
+        "$type": "typography",
+        "$value": {
+          "fontFamily": "Inter Variable",
+          "fontSize": "14px",
+          "fontWeight": 700,
+          "letterSpacing": "1.5%",
+          "lineHeight": "150%",
+          "textTransform": "none",
+          "textDecoration": "none"
+        }
+      },
+      "black": {
+        "$type": "typography",
+        "$value": {
+          "fontFamily": "Inter Variable",
+          "fontSize": "14px",
+          "fontWeight": 800,
+          "letterSpacing": "1.5%",
+          "lineHeight": "150%",
+          "textTransform": "none",
+          "textDecoration": "none"
+        }
+      }
+    },
+    "lg": {
+      "regular": {
+        "$type": "typography",
+        "$value": {
+          "fontFamily": "Inter Variable",
+          "fontSize": "15px",
+          "fontWeight": 420,
+          "letterSpacing": "2%",
+          "lineHeight": "150%",
+          "textTransform": "none",
+          "textDecoration": "none"
+        }
+      },
+      "medium": {
+        "$type": "typography",
+        "$value": {
+          "fontFamily": "Inter Variable",
+          "fontSize": "15px",
+          "fontWeight": 500,
+          "letterSpacing": "1.5%",
+          "lineHeight": "150%",
+          "textTransform": "none",
+          "textDecoration": "none"
+        }
+      },
+      "semibold": {
+        "$type": "typography",
+        "$value": {
+          "fontFamily": "Inter Variable",
+          "fontSize": "15px",
+          "fontWeight": 600,
+          "letterSpacing": "1.5%",
+          "lineHeight": "150%",
+          "textTransform": "none",
+          "textDecoration": "none"
+        }
+      },
+      "bold": {
+        "$type": "typography",
+        "$value": {
+          "fontFamily": "Inter Variable",
+          "fontSize": "15px",
+          "fontWeight": 700,
+          "letterSpacing": "1.5%",
+          "lineHeight": "150%",
+          "textTransform": "none",
+          "textDecoration": "none"
+        }
+      },
+      "black": {
+        "$type": "typography",
+        "$value": {
+          "fontFamily": "Inter Variable",
+          "fontSize": "15px",
+          "fontWeight": 800,
+          "letterSpacing": "1.5%",
+          "lineHeight": "150%",
+          "textTransform": "none",
+          "textDecoration": "none"
+        }
+      }
+    },
+    "xl": {
+      "regular": {
+        "$type": "typography",
+        "$value": {
+          "fontFamily": "Inter Variable",
+          "fontSize": "16px",
+          "fontWeight": 420,
+          "letterSpacing": "2%",
+          "lineHeight": "150%",
+          "textTransform": "none",
+          "textDecoration": "none"
+        }
+      },
+      "medium": {
+        "$type": "typography",
+        "$value": {
+          "fontFamily": "Inter Variable",
+          "fontSize": "16px",
+          "fontWeight": 500,
+          "letterSpacing": "1.5%",
+          "lineHeight": "150%",
+          "textTransform": "none",
+          "textDecoration": "none"
+        }
+      },
+      "semibold": {
+        "$type": "typography",
+        "$value": {
+          "fontFamily": "Inter Variable",
+          "fontSize": "16px",
+          "fontWeight": 600,
+          "letterSpacing": "1.5%",
+          "lineHeight": "150%",
+          "textTransform": "none",
+          "textDecoration": "none"
+        }
+      },
+      "bold": {
+        "$type": "typography",
+        "$value": {
+          "fontFamily": "Inter Variable",
+          "fontSize": "16px",
+          "fontWeight": 700,
+          "letterSpacing": "1.5%",
+          "lineHeight": "150%",
+          "textTransform": "none",
+          "textDecoration": "none"
+        }
+      },
+      "black": {
+        "$type": "typography",
+        "$value": {
+          "fontFamily": "Inter Variable",
+          "fontSize": "16px",
+          "fontWeight": 800,
+          "letterSpacing": "1.5%",
+          "lineHeight": "150%",
+          "textTransform": "none",
+          "textDecoration": "none"
+        }
+      }
+    },
+    "2xl": {
+      "regular": {
+        "$type": "typography",
+        "$value": {
+          "fontFamily": "Inter Variable",
+          "fontSize": "17px",
+          "fontWeight": 420,
+          "letterSpacing": "2%",
+          "lineHeight": "150%",
+          "textTransform": "none",
+          "textDecoration": "none"
+        }
+      },
+      "medium": {
+        "$type": "typography",
+        "$value": {
+          "fontFamily": "Inter Variable",
+          "fontSize": "17px",
+          "fontWeight": 500,
+          "letterSpacing": "1.5%",
+          "lineHeight": "150%",
+          "textTransform": "none",
+          "textDecoration": "none"
+        }
+      },
+      "semibold": {
+        "$type": "typography",
+        "$value": {
+          "fontFamily": "Inter Variable",
+          "fontSize": "17px",
+          "fontWeight": 600,
+          "letterSpacing": "1.5%",
+          "lineHeight": "150%",
+          "textTransform": "none",
+          "textDecoration": "none"
+        }
+      },
+      "bold": {
+        "$type": "typography",
+        "$value": {
+          "fontFamily": "Inter Variable",
+          "fontSize": "17px",
+          "fontWeight": 700,
+          "letterSpacing": "1.5%",
+          "lineHeight": "150%",
+          "textTransform": "none",
+          "textDecoration": "none"
+        }
+      },
+      "black": {
+        "$type": "typography",
+        "$value": {
+          "fontFamily": "Inter Variable",
+          "fontSize": "17px",
+          "fontWeight": 800,
+          "letterSpacing": "1.5%",
+          "lineHeight": "150%",
+          "textTransform": "none",
+          "textDecoration": "none"
+        }
+      }
+    },
+    "3xl": {
+      "regular": {
+        "$type": "typography",
+        "$value": {
+          "fontFamily": "Inter Variable",
+          "fontSize": "18px",
+          "fontWeight": 420,
+          "letterSpacing": "1%",
+          "lineHeight": "150%",
+          "textTransform": "none",
+          "textDecoration": "none"
+        }
+      },
+      "medium": {
+        "$type": "typography",
+        "$value": {
+          "fontFamily": "Inter Variable",
+          "fontSize": "18px",
+          "fontWeight": 500,
+          "letterSpacing": "1%",
+          "lineHeight": "150%",
+          "textTransform": "none",
+          "textDecoration": "none"
+        }
+      },
+      "semibold": {
+        "$type": "typography",
+        "$value": {
+          "fontFamily": "Inter Variable",
+          "fontSize": "18px",
+          "fontWeight": 600,
+          "letterSpacing": "1%",
+          "lineHeight": "150%",
+          "textTransform": "none",
+          "textDecoration": "none"
+        }
+      },
+      "bold": {
+        "$type": "typography",
+        "$value": {
+          "fontFamily": "Inter Variable",
+          "fontSize": "18px",
+          "fontWeight": 700,
+          "letterSpacing": "1%",
+          "lineHeight": "150%",
+          "textTransform": "none",
+          "textDecoration": "none"
+        }
+      },
+      "black": {
+        "$type": "typography",
+        "$value": {
+          "fontFamily": "Inter Variable",
+          "fontSize": "18px",
+          "fontWeight": 800,
+          "letterSpacing": "1%",
+          "lineHeight": "150%",
+          "textTransform": "none",
+          "textDecoration": "none"
+        }
+      }
+    },
+    "4xl": {
+      "regular": {
+        "$type": "typography",
+        "$value": {
+          "fontFamily": "Inter Variable",
+          "fontSize": "20px",
+          "fontWeight": 420,
+          "letterSpacing": "1%",
+          "lineHeight": "148%",
+          "textTransform": "none",
+          "textDecoration": "none"
+        }
+      },
+      "medium": {
+        "$type": "typography",
+        "$value": {
+          "fontFamily": "Inter Variable",
+          "fontSize": "20px",
+          "fontWeight": 500,
+          "letterSpacing": "1%",
+          "lineHeight": "148%",
+          "textTransform": "none",
+          "textDecoration": "none"
+        }
+      },
+      "semibold": {
+        "$type": "typography",
+        "$value": {
+          "fontFamily": "Inter Variable",
+          "fontSize": "20px",
+          "fontWeight": 600,
+          "letterSpacing": "1%",
+          "lineHeight": "148%",
+          "textTransform": "none",
+          "textDecoration": "none"
+        }
+      },
+      "bold": {
+        "$type": "typography",
+        "$value": {
+          "fontFamily": "Inter Variable",
+          "fontSize": "20px",
+          "fontWeight": 700,
+          "letterSpacing": "1%",
+          "lineHeight": "148%",
+          "textTransform": "none",
+          "textDecoration": "none"
+        }
+      },
+      "black": {
+        "$type": "typography",
+        "$value": {
+          "fontFamily": "Inter Variable",
+          "fontSize": "20px",
+          "fontWeight": 800,
+          "letterSpacing": "1%",
+          "lineHeight": "148%",
+          "textTransform": "none",
+          "textDecoration": "none"
+        }
+      }
+    },
+    "5xl": {
+      "regular": {
+        "$type": "typography",
+        "$value": {
+          "fontFamily": "Inter Variable",
+          "fontSize": "24px",
+          "fontWeight": 420,
+          "letterSpacing": "0.5%",
+          "lineHeight": "140%",
+          "textTransform": "none",
+          "textDecoration": "none"
+        }
+      },
+      "medium": {
+        "$type": "typography",
+        "$value": {
+          "fontFamily": "Inter Variable",
+          "fontSize": "24px",
+          "fontWeight": 500,
+          "letterSpacing": "0.5%",
+          "lineHeight": "140%",
+          "textTransform": "none",
+          "textDecoration": "none"
+        }
+      },
+      "semibold": {
+        "$type": "typography",
+        "$value": {
+          "fontFamily": "Inter Variable",
+          "fontSize": "24px",
+          "fontWeight": 600,
+          "letterSpacing": "0.5%",
+          "lineHeight": "140%",
+          "textTransform": "none",
+          "textDecoration": "none"
+        }
+      },
+      "bold": {
+        "$type": "typography",
+        "$value": {
+          "fontFamily": "Inter Variable",
+          "fontSize": "24px",
+          "fontWeight": 700,
+          "letterSpacing": "0.5%",
+          "lineHeight": "140%",
+          "textTransform": "none",
+          "textDecoration": "none"
+        }
+      },
+      "black": {
+        "$type": "typography",
+        "$value": {
+          "fontFamily": "Inter Variable",
+          "fontSize": "24px",
+          "fontWeight": 800,
+          "letterSpacing": "0.5%",
+          "lineHeight": "140%",
+          "textTransform": "none",
+          "textDecoration": "none"
+        }
+      }
+    }
+  }
+}
diff --git a/frappe/Billing/SignupBanner.vue b/frappe/Billing/SignupBanner.vue
index dff9dade1..4ead6ddc2 100644
--- a/frappe/Billing/SignupBanner.vue
+++ b/frappe/Billing/SignupBanner.vue
@@ -1,7 +1,7 @@
 <template>
   <div
     v-if="!isSidebarCollapsed"
-    class="flex flex-col gap-3 shadow-sm rounded-lg py-2.5 px-3 bg-surface-white text-base"
+    class="flex flex-col gap-3 shadow-sm rounded-lg py-2.5 px-3 bg-surface-base text-base"
   >
     <div class="flex flex-col gap-1">
       <slot>
diff --git a/frappe/Billing/TrialBanner.vue b/frappe/Billing/TrialBanner.vue
index e0dd21281..ecb248010 100644
--- a/frappe/Billing/TrialBanner.vue
+++ b/frappe/Billing/TrialBanner.vue
@@ -1,7 +1,7 @@
 <template>
   <div
     v-if="!isSidebarCollapsed && showBanner"
-    class="flex flex-col gap-3 shadow-sm rounded-lg py-2.5 px-3 bg-surface-modal text-base"
+    class="flex flex-col gap-3 shadow-sm rounded-lg py-2.5 px-3 bg-surface-elevation-2 text-base"
   >
     <div class="flex flex-col gap-1">
       <div class="inline-flex text-ink-gray-9 gap-2 items-center font-medium">
diff --git a/frappe/DataImport/DataImport.vue b/frappe/DataImport/DataImport.vue
index 1d165fbf7..28dcc7154 100644
--- a/frappe/DataImport/DataImport.vue
+++ b/frappe/DataImport/DataImport.vue
@@ -1,6 +1,6 @@
 <template>
   <header
-		class="sticky flex items-center justify-between space-x-28 top-0 z-10 border-b bg-surface-white px-3 py-2.5 sm:px-5"
+		class="sticky flex items-center justify-between space-x-28 top-0 z-10 border-b bg-surface-base px-3 py-2.5 sm:px-5"
     >
       <Breadcrumbs :items="breadcrumbs" />
       <ImportSteps class="flex-1 hidden lg:flex" v-if="step != 'list'" :data="data" :step="step" @updateStep="updateStep" />
diff --git a/frappe/DataImport/ImportSteps.vue b/frappe/DataImport/ImportSteps.vue
index d246d431c..95bfd4227 100644
--- a/frappe/DataImport/ImportSteps.vue
+++ b/frappe/DataImport/ImportSteps.vue
@@ -7,10 +7,10 @@
         @click="emit('updateStep', 'upload', { ...data })"
         >
             <FeatherIcon v-if="uploadStepCompleted" name="check" class="size-5 text-sm border rounded-[5px] p-0.5" :class="{
-                'text-ink-white bg-surface-gray-7': onUploadStep,
+                'text-ink-base bg-surface-gray-10': onUploadStep,
             }"/>
             <div v-else class="text-sm border rounded-[5px] px-1.5 py-0.5" :class="{
-                'text-ink-white bg-surface-gray-7': onUploadStep,
+                'text-ink-base bg-surface-gray-10': onUploadStep,
             }">
                 <span>
                     1
@@ -28,10 +28,10 @@
         @click="moveToMapStep()"
         >
             <FeatherIcon v-if="mapStepCompleted" name="check" class="size-5 text-sm border rounded-[5px] p-0.5" :class="{
-                'text-ink-white bg-surface-gray-7': onMapStep,
+                'text-ink-base bg-surface-gray-10': onMapStep,
             }"/>
             <div v-else class="text-sm border rounded-[5px] px-1.5 py-0.5" :class="{
-                'text-ink-white bg-surface-gray-7': onMapStep,
+                'text-ink-base bg-surface-gray-10': onMapStep,
             }">
                 <span>
                     2
@@ -49,10 +49,10 @@
         @click="moveToPreviewStep()"
         >
             <FeatherIcon v-if="previewStepCompleted" name="check" class="size-5 text-sm border rounded-[5px] p-0.5" :class="{
-                'text-ink-white bg-surface-gray-7': onPreviewStep,
+                'text-ink-base bg-surface-gray-10': onPreviewStep,
             }"/>
             <div v-else class="text-sm border rounded-[5px] px-1.5 py-0.5" :class="{
-                'text-ink-white bg-surface-gray-7': onPreviewStep,
+                'text-ink-base bg-surface-gray-10': onPreviewStep,
             }">
                 <span>
                     3
diff --git a/frappe/DataImport/PreviewStep.vue b/frappe/DataImport/PreviewStep.vue
index 1ed47084d..eb673169e 100644
--- a/frappe/DataImport/PreviewStep.vue
+++ b/frappe/DataImport/PreviewStep.vue
@@ -47,8 +47,8 @@
             </div>
             <div class="rounded-md bg-surface-amber-2 p-2 space-y-2 text-xs">
                 <div v-for="warning in warnings" class="flex items-center space-x-2">
-                    <FeatherIcon name="alert-circle" class="size-3 text-ink-amber-3" />
-                    <div v-html="warning.message" class="text-ink-amber-3"></div>
+                    <FeatherIcon name="alert-circle" class="size-3 text-ink-amber-6" />
+                    <div v-html="warning.message" class="text-ink-amber-6"></div>
                 </div>
             </div>
         </div>
@@ -71,7 +71,7 @@
                         </th>
                     </tr>
                 </thead>
-                <tbody class="bg-surface-white divide-y divide-surface-gray-2">
+                <tbody class="bg-surface-base divide-y divide-surface-gray-2">
                     <tr v-for="(row, rowIndex) in previewData" :key="rowIndex">
                         <td
                             v-for="column in previewColumns"
@@ -117,12 +117,12 @@
                             </th>
                         </tr>
                     </thead>
-                    <tbody class="bg-surface-white divide-y divide-surface-gray-2">
+                    <tbody class="bg-surface-base divide-y divide-surface-gray-2">
                         <tr v-for="(row, rowIndex) in filteredLogs" :key="rowIndex" class="group">
                             <td class="px-3 py-2 text-sm text-ink-gray-7 border-r">
                                 <div class="flex items-center justify-center space-x-2">
                                     <div v-if="row.success" class="size-1.5 bg-surface-green-3 rounded"></div>
-                                    <div v-else class="size-1.5 bg-surface-red-5 rounded"></div>
+                                    <div v-else class="size-1.5 bg-surface-red-7 rounded"></div>
                                     <div>
                                         {{ JSON.parse(row["row_indexes"])[0] - 1 }}
                                     </div>
@@ -312,11 +312,11 @@ const importErrorCount = computed(() => {
 
 const importBannerClass = computed(() => {
     if (importErrorCount.value == 0) {
-        return 'bg-surface-green-2 text-ink-green-3'
+        return 'bg-surface-green-2 text-ink-green-6'
     } else if (importSuccessCount.value == 0) {
-        return 'bg-surface-red-2 text-ink-red-3'
+        return 'bg-surface-red-2 text-ink-red-6'
     } else {
-        return 'bg-surface-amber-2 text-ink-amber-3'
+        return 'bg-surface-amber-2 text-ink-amber-6'
     }
 })
 
diff --git a/frappe/DataImport/TemplateModal.vue b/frappe/DataImport/TemplateModal.vue
index 88184bc55..96fe2135d 100644
--- a/frappe/DataImport/TemplateModal.vue
+++ b/frappe/DataImport/TemplateModal.vue
@@ -37,7 +37,7 @@
                                     <label
                                         :for="`checkbox-${doctype}-${field.fieldname}`"
                                         :class="{
-                                            'text-ink-red-3': field.reqd
+                                            'text-ink-red-6': field.reqd
                                         }">
                                         {{ field.label || field.fieldname }}
                                     </label>
diff --git a/frappe/DataImport/UploadStep.vue b/frappe/DataImport/UploadStep.vue
index c43c0305d..80e9fb3f5 100644
--- a/frappe/DataImport/UploadStep.vue
+++ b/frappe/DataImport/UploadStep.vue
@@ -47,7 +47,7 @@
                         </span>
                     </div>
                 </div>
-                <div v-else-if="showFileSelector && uploading" class="w-4/5 lg:w-2/5 bg-surface-white border rounded-md p-2">
+                <div v-else-if="showFileSelector && uploading" class="w-4/5 lg:w-2/5 bg-surface-base border rounded-md p-2">
                     <div class="space-y-2">
                         <div class="font-medium">
                             {{ uploadingdFile.name }}
@@ -58,14 +58,14 @@
                     </div>
                     <div class="w-full bg-surface-gray-1 h-1 rounded-full mt-3">
                         <div
-                            class="bg-surface-gray-7 h-1 rounded-full transition-all duration-500 ease-in-out"
+                            class="bg-surface-gray-10 h-1 rounded-full transition-all duration-500 ease-in-out"
                             :style="`width: ${uploadProgress}%`"
                         ></div>
                     </div>
                 </div>
             </div>
             <div v-else-if="importFile" class="h-[300px] flex items-center justify-center bg-surface-gray-1 border border-dashed border-outline-gray-3 rounded-md">
-                <div class="w-4/5 lg:w-2/5 bg-surface-white border rounded-md p-2 flex items-center justify-between items-center">
+                <div class="w-4/5 lg:w-2/5 bg-surface-base border rounded-md p-2 flex items-center justify-between items-center">
                     <div class="space-y-2">
                         <div class="font-medium leading-5 text-ink-gray-9">
                             {{ importFile.file_name || importFile.split("/").pop() }}
@@ -76,7 +76,7 @@
                     </div>
                     <FeatherIcon
                         name="trash-2"
-                        class="size-4 stroke-1.5 text-ink-red-3 cursor-pointer"
+                        class="size-4 stroke-1.5 text-ink-red-6 cursor-pointer"
                         @click="deleteFile"
                     />
                 </div>
diff --git a/frappe/Filter/Filter.vue b/frappe/Filter/Filter.vue
index e577bd849..ce721a96e 100644
--- a/frappe/Filter/Filter.vue
+++ b/frappe/Filter/Filter.vue
@@ -133,7 +133,7 @@ const filterCount = computed(() =>
 
 <template>
   <Popover
-    popover-class="mt-2 p-2 rounded-lg border bg-surface-modal shadow-xl max-w-xl"
+    popover-class="mt-2 p-2 rounded-lg border bg-surface-elevation-2 shadow-xl max-w-xl"
     placement="bottom-end"
     :matchTargetWidth="true"
   >
diff --git a/frappe/Help/HelpModal.vue b/frappe/Help/HelpModal.vue
index 366fc1b92..3e17c767f 100644
--- a/frappe/Help/HelpModal.vue
+++ b/frappe/Help/HelpModal.vue
@@ -1,7 +1,7 @@
 <template>
   <div
     v-show="show"
-    class="fixed z-50 right-0 w-80 h-[calc(100%_-_80px)] text-ink-gray-9 m-5 mt-[62px] p-3 flex gap-2 flex-col justify-between rounded-lg bg-surface-modal shadow-2xl"
+    class="fixed z-50 right-0 w-80 h-[calc(100%_-_80px)] text-ink-gray-9 m-5 mt-[62px] p-3 flex gap-2 flex-col justify-between rounded-lg bg-surface-elevation-2 shadow-2xl"
     :class="{ 'top-[calc(100%_-_120px)] border': minimize }"
     @click.stop
   >
diff --git a/frappe/Link/stories/Suffix.vue b/frappe/Link/stories/Suffix.vue
index 8d67e6213..d520927bb 100644
--- a/frappe/Link/stories/Suffix.vue
+++ b/frappe/Link/stories/Suffix.vue
@@ -76,7 +76,7 @@ const selectedUser = computed(() =>
                   class="inline-flex shrink-0 items-center gap-1 rounded-full px-1.5 py-0.5 text-p-xs"
                   :class="
                     selectedUser.enabled
-                      ? 'bg-surface-green-1 text-ink-green-3'
+                      ? 'bg-surface-green-1 text-ink-green-6'
                       : 'bg-surface-gray-2 text-ink-gray-5'
                   "
                 >
@@ -85,7 +85,7 @@ const selectedUser = computed(() =>
                     :class="
                       selectedUser.enabled
                         ? 'bg-surface-green-3'
-                        : 'bg-surface-gray-5'
+                        : 'bg-surface-gray-8'
                     "
                   />
                   {{ selectedUser.enabled ? 'Active' : 'Disabled' }}
diff --git a/frappe/Onboarding/GettingStartedBanner.vue b/frappe/Onboarding/GettingStartedBanner.vue
index ef630d484..425d1ee6b 100644
--- a/frappe/Onboarding/GettingStartedBanner.vue
+++ b/frappe/Onboarding/GettingStartedBanner.vue
@@ -1,7 +1,7 @@
 <template>
   <div
     v-if="!isSidebarCollapsed"
-    class="flex flex-col gap-3 shadow-sm rounded-lg py-2.5 px-3 bg-surface-modal text-base"
+    class="flex flex-col gap-3 shadow-sm rounded-lg py-2.5 px-3 bg-surface-elevation-2 text-base"
   >
     <div
       v-if="stepsCompleted != totalSteps"
diff --git a/frappe/drive/components/AppSwitcher.vue b/frappe/drive/components/AppSwitcher.vue
index ac14a3e93..7b86fe3af 100644
--- a/frappe/drive/components/AppSwitcher.vue
+++ b/frappe/drive/components/AppSwitcher.vue
@@ -22,7 +22,7 @@ const open = ref(false)
 <template>
   <div class="fixed left-0 top-0 h-screen w-3 z-40" @mouseenter="open = true" />
   <aside
-    class="fixed left-0 top-0 h-screen z-50 transition-transform duration-300 ease-out bg-surface-white border-r border-gray-200 px-2"
+    class="fixed left-0 top-0 h-screen z-50 transition-transform duration-300 ease-out bg-surface-base border-r border-gray-200 px-2"
     :class="!open && '-translate-x-full'"
     @mouseleave="open = false"
   >
diff --git a/frappe/drive/components/InfoDialog.vue b/frappe/drive/components/InfoDialog.vue
index b28937d35..241c2cdec 100644
--- a/frappe/drive/components/InfoDialog.vue
+++ b/frappe/drive/components/InfoDialog.vue
@@ -190,12 +190,12 @@ onKeyDown('D', () => {
 const accessConfig = {
   team: {
     icon: LucideBuilding2,
-    color: 'bg-surface-blue-2 text-ink-blue-2',
+    color: 'bg-surface-blue-2 text-ink-blue-5',
     label: 'Team',
   },
   public: {
     icon: LucideGlobe2,
-    color: 'bg-surface-red-2 text-ink-red-3',
+    color: 'bg-surface-red-2 text-ink-red-6',
     label: 'Public',
   },
   restricted: {
diff --git a/frappe/drive/components/MoveDialog.vue b/frappe/drive/components/MoveDialog.vue
index f29c5cf1e..72c8f1faf 100644
--- a/frappe/drive/components/MoveDialog.vue
+++ b/frappe/drive/components/MoveDialog.vue
@@ -75,7 +75,7 @@
                           ? 'bg-surface-gray-3'
                           : 'hover:bg-surface-gray-2',
                         entities[0].parent_entity === node.value
-                          ? 'cursor-not-allowed hover:bg-surface-white'
+                          ? 'cursor-not-allowed hover:bg-surface-base'
                           : 'group',
                       ]"
                     >
diff --git a/frappe/drive/components/Select/Select.vue b/frappe/drive/components/Select/Select.vue
index 309218b45..cea1000a0 100644
--- a/frappe/drive/components/Select/Select.vue
+++ b/frappe/drive/components/Select/Select.vue
@@ -84,7 +84,7 @@ const labelFunction = (val: SelectValue_, selected = false) => {
         <SelectContent
           :hide-when-detached="true"
           :align="'start'"
-          class="z-10 min-w-[--reka-select-trigger-width] mt-1 bg-surface-modal overflow-hidden rounded-lg shadow-2xl"
+          class="z-10 min-w-[--reka-select-trigger-width] mt-1 bg-surface-elevation-2 overflow-hidden rounded-lg shadow-2xl"
         >
           <SelectViewport
             class="max-h-60 overflow-auto p-1.5"
@@ -99,7 +99,7 @@ const labelFunction = (val: SelectValue_, selected = false) => {
                   <hr v-if="optionOrGroup.group === true" class="my-1.5" />
                   <SelectLabel
                     v-else
-                    class="px-2.5 pt-3 pb-1.5 text-sm font-medium text-ink-gray-5 sticky top-0 bg-surface-modal z-10"
+                    class="px-2.5 pt-3 pb-1.5 text-sm font-medium text-ink-gray-5 sticky top-0 bg-surface-elevation-2 z-10"
                   >
                     {{ optionOrGroup.group }}
                   </SelectLabel>
diff --git a/icons/IconPicker.vue b/icons/IconPicker.vue
index 690db1b13..6fcb36f58 100644
--- a/icons/IconPicker.vue
+++ b/icons/IconPicker.vue
@@ -182,7 +182,7 @@ defineExpose({
       </ComboboxAnchor>
       <ComboboxPortal>
         <ComboboxContent
-          class="z-10 w-60 mt-1 bg-surface-modal overflow-hidden rounded-lg shadow-2xl"
+          class="z-10 w-60 mt-1 bg-surface-elevation-2 overflow-hidden rounded-lg shadow-2xl"
           position="popper"
           @openAutoFocus.prevent
           @closeAutoFocus.prevent
diff --git a/package.json b/package.json
index f9e6013e1..47815d37d 100644
--- a/package.json
+++ b/package.json
@@ -31,7 +31,8 @@
     "docs:build": "vitepress build docs",
     "docs:preview": "vitepress preview docs",
     "docs:gen": "tsx docs/scripts/propsgen.ts",
-    "docs:gen:all": "yarn docs:gen --all"
+    "docs:gen:all": "yarn docs:gen --all",
+    "sync-tokens": "node tailwind/figma-tokens-to-theme.js"
   },
   "exports": {
     ".": {
@@ -98,41 +99,41 @@
     "@tailwindcss/forms": "^0.5.3",
     "@tailwindcss/line-clamp": "^0.4.4",
     "@tailwindcss/typography": "^0.5.16",
-    "@tiptap/core": "^3.11.0",
-    "@tiptap/extension-blockquote": "3.11.0",
-    "@tiptap/extension-bold": "3.11.0",
-    "@tiptap/extension-bubble-menu": "^3.11.0",
-    "@tiptap/extension-code": "^3.11.0",
-    "@tiptap/extension-code-block": "^3.11.0",
-    "@tiptap/extension-code-block-lowlight": "^3.11.0",
-    "@tiptap/extension-color": "^3.11.0",
-    "@tiptap/extension-document": "3.11.0",
-    "@tiptap/extension-hard-break": "3.11.0",
-    "@tiptap/extension-heading": "^3.11.0",
-    "@tiptap/extension-highlight": "^3.11.0",
-    "@tiptap/extension-horizontal-rule": "3.11.0",
-    "@tiptap/extension-image": "^3.11.0",
-    "@tiptap/extension-italic": "3.11.0",
-    "@tiptap/extension-link": "^3.11.0",
-    "@tiptap/extension-list": "^3.11.0",
-    "@tiptap/extension-mention": "^3.11.0",
-    "@tiptap/extension-node-range": "^3.11.0",
-    "@tiptap/extension-placeholder": "^3.11.0",
-    "@tiptap/extension-paragraph": "3.11.0",
-    "@tiptap/extension-strike": "3.11.0",
-    "@tiptap/extension-table": "^3.11.0",
-    "@tiptap/extension-task-item": "^3.11.0",
-    "@tiptap/extension-task-list": "^3.11.0",
-    "@tiptap/extension-text": "3.11.0",
-    "@tiptap/extension-text-align": "^3.11.0",
-    "@tiptap/extension-text-style": "^3.11.0",
-    "@tiptap/extension-typography": "^3.11.0",
-    "@tiptap/extension-underline": "3.11.0",
-    "@tiptap/extensions": "^3.11.0",
-    "@tiptap/pm": "^3.11.0",
-    "@tiptap/starter-kit": "3.11.0",
-    "@tiptap/suggestion": "^3.11.0",
-    "@tiptap/vue-3": "^3.11.0",
+    "@tiptap/core": "^3.26.0",
+    "@tiptap/extension-blockquote": "^3.26.0",
+    "@tiptap/extension-bold": "^3.26.0",
+    "@tiptap/extension-bubble-menu": "^3.26.0",
+    "@tiptap/extension-code": "^3.26.0",
+    "@tiptap/extension-code-block": "^3.26.0",
+    "@tiptap/extension-code-block-lowlight": "^3.26.0",
+    "@tiptap/extension-color": "^3.26.0",
+    "@tiptap/extension-document": "^3.26.0",
+    "@tiptap/extension-hard-break": "^3.26.0",
+    "@tiptap/extension-heading": "^3.26.0",
+    "@tiptap/extension-highlight": "^3.26.0",
+    "@tiptap/extension-horizontal-rule": "^3.26.0",
+    "@tiptap/extension-image": "^3.26.0",
+    "@tiptap/extension-italic": "^3.26.0",
+    "@tiptap/extension-link": "^3.26.0",
+    "@tiptap/extension-list": "^3.26.0",
+    "@tiptap/extension-mention": "^3.26.0",
+    "@tiptap/extension-node-range": "^3.26.0",
+    "@tiptap/extension-paragraph": "^3.26.0",
+    "@tiptap/extension-placeholder": "^3.26.0",
+    "@tiptap/extension-strike": "^3.26.0",
+    "@tiptap/extension-table": "^3.26.0",
+    "@tiptap/extension-task-item": "^3.26.0",
+    "@tiptap/extension-task-list": "^3.26.0",
+    "@tiptap/extension-text": "^3.26.0",
+    "@tiptap/extension-text-align": "^3.26.0",
+    "@tiptap/extension-text-style": "^3.26.0",
+    "@tiptap/extension-typography": "^3.26.0",
+    "@tiptap/extension-underline": "^3.26.0",
+    "@tiptap/extensions": "^3.26.0",
+    "@tiptap/pm": "^3.26.0",
+    "@tiptap/starter-kit": "^3.26.0",
+    "@tiptap/suggestion": "^3.26.0",
+    "@tiptap/vue-3": "^3.26.0",
     "@vueuse/core": "^10.4.1",
     "dayjs": "^1.11.13",
     "dompurify": "^3.4.0",
@@ -188,26 +189,26 @@
     "vue-tsc": "^3.2.7"
   },
   "resolutions": {
-    "prosemirror-model": "1.25.2",
-    "prosemirror-state": "1.4.3",
-    "prosemirror-view": "1.40.0",
-    "prosemirror-transform": "1.10.4",
-    "@tiptap/extension-blockquote": "3.11.0",
-    "@tiptap/extension-bold": "3.11.0",
-    "@tiptap/extension-bullet-list": "3.11.0",
-    "@tiptap/extension-document": "3.11.0",
-    "@tiptap/extension-dropcursor": "3.11.0",
-    "@tiptap/extension-gapcursor": "3.11.0",
-    "@tiptap/extension-hard-break": "3.11.0",
-    "@tiptap/extension-horizontal-rule": "3.11.0",
-    "@tiptap/extension-italic": "3.11.0",
-    "@tiptap/extension-list-item": "3.11.0",
-    "@tiptap/extension-list-keymap": "3.11.0",
-    "@tiptap/extension-ordered-list": "3.11.0",
-    "@tiptap/extension-paragraph": "3.11.0",
-    "@tiptap/extension-strike": "3.11.0",
-    "@tiptap/extension-text": "3.11.0",
-    "@tiptap/extension-underline": "3.11.0",
+    "prosemirror-model": "1.25.7",
+    "prosemirror-state": "1.4.4",
+    "prosemirror-view": "1.41.8",
+    "prosemirror-transform": "1.12.0",
+    "@tiptap/extension-blockquote": "3.26.0",
+    "@tiptap/extension-bold": "3.26.0",
+    "@tiptap/extension-bullet-list": "3.26.0",
+    "@tiptap/extension-document": "3.26.0",
+    "@tiptap/extension-dropcursor": "3.26.0",
+    "@tiptap/extension-gapcursor": "3.26.0",
+    "@tiptap/extension-hard-break": "3.26.0",
+    "@tiptap/extension-horizontal-rule": "3.26.0",
+    "@tiptap/extension-italic": "3.26.0",
+    "@tiptap/extension-list-item": "3.26.0",
+    "@tiptap/extension-list-keymap": "3.26.0",
+    "@tiptap/extension-ordered-list": "3.26.0",
+    "@tiptap/extension-paragraph": "3.26.0",
+    "@tiptap/extension-strike": "3.26.0",
+    "@tiptap/extension-text": "3.26.0",
+    "@tiptap/extension-underline": "3.26.0",
     "defu": "^6.1.5",
     "esbuild": "^0.25.0",
     "lodash": "^4.18.0",
diff --git a/skills/frappe-ui/COMPONENTS.md b/skills/frappe-ui/COMPONENTS.md
index 4a331e2d7..dd1731328 100644
--- a/skills/frappe-ui/COMPONENTS.md
+++ b/skills/frappe-ui/COMPONENTS.md
@@ -155,7 +155,7 @@ App-shell sidebar primitive. Pair with router views.
 
 ### `Divider` — see Display.
 
-> Don't use `Card` — compose surfaces directly with `bg-surface-white rounded border border-outline-gray-1 p-4`.
+> Don't use `Card` — compose surfaces directly with `bg-surface-base rounded border border-outline-gray-1 p-4`.
 
 ## Provider
 
diff --git a/skills/frappe-ui/PATTERNS.md b/skills/frappe-ui/PATTERNS.md
index d7f43c263..ada5099e0 100644
--- a/skills/frappe-ui/PATTERNS.md
+++ b/skills/frappe-ui/PATTERNS.md
@@ -8,7 +8,7 @@ Apply these before reaching for any specific pattern below — they're what make
 
 1. **Strive for alignment.** Repeating elements down a list should align in columns, not float inside flex rows. If every list item has a `<Badge>`, a timestamp, or a button on the right, give each one a fixed-width slot (`w-24 shrink-0`, `w-32 shrink-0`) so they form a column. Inline `flex items-center gap-2` is fine for one row but produces ragged edges down a list.
 2. **One primary action per page.** Only one `<Button variant="solid" theme="gray">` per screen — usually the page header's "New X". Everything else is default (`subtle`) or `ghost`. If the app shell already has a global "Create" button, the page should not also have a solid primary.
-3. **Mostly neutral, color for state only.** Frappe screens are dominated by ink-gray and surface-white/gray. Reserve color for things that **encode information** — status badges, destructive buttons, error inline messages. Don't theme cards, icons, or section headers for visual interest.
+3. **Mostly neutral, color for state only.** Frappe screens are dominated by ink-gray and surface-base/gray. Reserve color for things that **encode information** — status badges, destructive buttons, error inline messages. Don't theme cards, icons, or section headers for visual interest.
 4. **Icons support labels, not replace them.** Pair an icon with a text label (`<Button icon-left="lucide-plus" label="New Site" />`). Avoid icon-only buttons except in long-running toolbars where space is genuinely tight and the meaning is universal (close ×, more …). Decorative icons in stat cards / activity feeds / quick actions are usually noise — drop them.
 5. **Pick the right text scale.** Use `text-*` for single-line labels (headings, button text, badges, "2h ago"). Use `text-p-*` for anything that wraps — descriptions, helper text, feed entries, paragraphs. Multi-line copy in `text-*` looks cramped; one-line labels in `text-p-*` look floppy. See [TOKENS.md](TOKENS.md) → Typography.
 6. **Borders earn their place — don't box everything.** A border or `rounded-md` surface should signal something: an interactive affordance (clickable card / button), grouping that crosses a visual boundary (a popover, a dialog), or a distinct surface (an inset code block, a callout). Static sections — stats, lists, feeds, "section + items" groups — don't need an outer box; a section heading plus `divide-y divide-outline-gray-1` between rows reads cleaner than wrapping the whole thing in a card. Reach for boxes only when removing them would lose meaning.
@@ -64,7 +64,7 @@ import { FrappeUIProvider, Sidebar } from 'frappe-ui'
 
 <template>
   <FrappeUIProvider>
-    <div class="flex h-screen bg-surface-white text-ink-gray-9">
+    <div class="flex h-screen bg-surface-base text-ink-gray-9">
       <Sidebar />
       <main class="flex-1 overflow-y-auto">
         <router-view />
@@ -82,7 +82,7 @@ Single row, **48px tall (`min-h-12`)**, sticky to the top, with a bottom border
 
 ```vue
 <header
-  class="sticky top-0 z-10 flex min-h-12 items-center justify-between border-b border-outline-gray-1 bg-surface-white px-3 sm:px-5"
+  class="sticky top-0 z-10 flex min-h-12 items-center justify-between border-b border-outline-gray-1 bg-surface-base px-3 sm:px-5"
 >
   <Breadcrumbs :items="crumbs" />
   <div class="flex gap-2">
diff --git a/skills/frappe-ui/SKILL.md b/skills/frappe-ui/SKILL.md
index be029bcaf..7a75fc348 100644
--- a/skills/frappe-ui/SKILL.md
+++ b/skills/frappe-ui/SKILL.md
@@ -19,7 +19,7 @@ const name = ref('')
 </script>
 
 <template>
-  <div class="p-4 bg-surface-white text-ink-gray-9">
+  <div class="p-4 bg-surface-base text-ink-gray-9">
     <Button variant="solid" theme="gray" @click="open = true">New Task</Button>
     <Dialog v-model:open="open" title="Create Task">
       <FormControl v-model="name" label="Title" required />
diff --git a/skills/frappe-ui/TOKENS.md b/skills/frappe-ui/TOKENS.md
index cbcaacd05..c5d779f67 100644
--- a/skills/frappe-ui/TOKENS.md
+++ b/skills/frappe-ui/TOKENS.md
@@ -8,47 +8,47 @@ Three semantic categories — each takes a color + numeric step. Higher = strong
 
 ### `text-ink-*` (foreground / text & icons)
 
-`white | gray-1..9 | red-1..4 | green-1..3 | amber-1..3 | blue-1..3 | cyan-1 | pink-1 | violet-1 | blue-link`
+`base | gray-1..9 | {red,green,amber,blue,cyan,pink,violet,orange,purple,teal,yellow}-1..10 | blue-link`
 
 - `text-ink-gray-9` — primary text (headings, body).
 - `text-ink-gray-7` — secondary text.
 - `text-ink-gray-5` / `gray-4` — tertiary / placeholder.
 - `text-ink-blue-link` — links.
-- `text-ink-red-3` — destructive / error text.
-- `text-ink-green-3` — success text.
+- `text-ink-red-6` — destructive / error text.
+- `text-ink-green-6` — success text.
 
 ### `bg-surface-*` (backgrounds)
 
-`white | gray-1..7 | red-1..7 | green-1..3 | amber-1..3 | blue-1..3 | orange-1 | violet-1 | cyan-1 | pink-1 | menu-bar | cards | modal | selected`
+`base | gray-1..10 | {red,green,amber,blue,cyan,pink,violet,orange,purple,teal,yellow}-1..10 | sidebar | elevation-1..3`
 
-- `bg-surface-white` — primary page background.
+- `bg-surface-base` — primary page background.
 - `bg-surface-gray-1` / `gray-2` — subtle / hover surface (cards, hovered rows).
 - `bg-surface-gray-3` — pressed state.
-- `bg-surface-menu-bar` — sidebar/toolbar background.
-- `bg-surface-modal` — dialog body background.
-- `bg-surface-selected` — selected row.
+- `bg-surface-sidebar` — sidebar/toolbar background.
+- `bg-surface-elevation-2` — dialog body background.
+- `bg-surface-elevation-3` — selected row.
 - `bg-surface-red-2` / `green-2` / `amber-2` / `blue-2` — tinted banners.
 
 ### `border-outline-*` (borders & rings)
 
-`white | gray-1..5 | red-1..3 | green-1..2 | amber-1..2 | blue-1 | orange-1 | gray-modals`
+`base | gray-1..9 | {red,green,amber,blue,cyan,pink,violet,orange,purple,teal,yellow}-1..10 | elevation-1..2`
 
 - `border-outline-gray-1` / `gray-2` — default borders.
-- `border-outline-gray-3` — focus ring on inputs.
-- `border-outline-red-2` / `green-2` — error / success borders.
+- Focus rings are automatic: a global `:focus-visible` outline (`--focus-outline-default`) covers every focusable element — never add your own. Retheme with `focus-visible:focus-ring-red` (or `-green`/`-blue`), suppress with `focus-visible:outline-none`.
+- `border-outline-red-3` / `green-2` — error / success borders.
 
 ### Rule of thumb
 
 | Need              | Use                              |
 |-------------------|----------------------------------|
-| Page bg           | `bg-surface-white`               |
-| Card bg           | `bg-surface-white` + border, or `bg-surface-gray-1` |
+| Page bg           | `bg-surface-base`               |
+| Card bg           | `bg-surface-base` + border, or `bg-surface-gray-1` |
 | Hovered row       | `bg-surface-gray-2`              |
 | Primary text      | `text-ink-gray-9`                |
 | Muted text        | `text-ink-gray-5`                |
 | Border            | `border-outline-gray-1` (or `gray-2` for stronger) |
-| Destructive text  | `text-ink-red-3`                 |
-| Success text      | `text-ink-green-3`               |
+| Destructive text  | `text-ink-red-6`                 |
+| Success text      | `text-ink-green-6`               |
 
 Never reach for `text-gray-900`, `bg-white`, `border-gray-200` — they don't track the theme.
 
diff --git a/spec/README.md b/spec/README.md
index 8278f712a..07baef97c 100644
--- a/spec/README.md
+++ b/spec/README.md
@@ -11,6 +11,10 @@ Current API contracts and durable design decisions for `frappe-ui`.
 
 If these disagree, update the lower-authority document or mark it historical.
 
+## Foundations
+
+- [`foundations.md`](./foundations.md) — typography, focus, radius, color themes; Figma source-of-truth rules.
+
 ## Component specs
 
 - [`dialog.md`](./dialog.md)
diff --git a/spec/adr/0005-focus-ring-2px.md b/spec/adr/0005-focus-ring-2px.md
new file mode 100644
index 000000000..7bf541983
--- /dev/null
+++ b/spec/adr/0005-focus-ring-2px.md
@@ -0,0 +1,59 @@
+# Focus ring is a global 2px outline
+
+**Status**: accepted (amended — see [Amendment](#amendment-global-outline-based-ring))
+
+## Context
+
+Figma espresso v2 specifies the keyboard focus indicator as a 2px outset drop-shadow with no offset and no blur — effectively a 2px solid ring tight against the component edge:
+
+- gray: `0 0 0 2px #C9C9C9E5` (~90% opacity gray)
+- red: `0 0 0 2px #FA9C9DE5` (~90% opacity red)
+
+The Figma variables expose these as `focus/light/*` (2px) and `focus/dark/*` (3px), synced into `tailwind/generated/effects.json`.
+
+The historical implementation in `frappe-ui` components used Tailwind's `focus-visible:ring` utility, which defaults to a **3px** ring width. The result was a focus indicator 50% wider than the design intended, with subtly different color (`outline-gray-3` = `#c7c7c7` vs Figma's `#C9C9C9`).
+
+## Decision (original)
+
+All interactive components use `focus-visible:ring-2` (2px width) with theme-appropriate `ring-<color>` for the color stop. The ring is **not** offset and has no blur — matching Figma's `0 0 0 2px <color>` drop-shadow exactly.
+
+This was later superseded by `focus-visible:focus-ring{-<color>}` utilities backed by the `--focus-*` shadow variables, and then by the amendment below.
+
+## Amendment: global outline-based ring
+
+Two problems surfaced with the per-component box-shadow approach:
+
+1. **Opt-in is leaky.** Every interactive element needed `focus-visible:focus-ring` (plus `outline-none` to kill the UA ring); anything missed had no indicator at all.
+2. **box-shadow collides.** `.focus-ring` set `box-shadow`, so it fought any `shadow-*` / `focus:shadow-sm` / `ring-*` utility on the same element — whichever lost the cascade silently disappeared (TextInput had exactly this conflict).
+
+### Decision
+
+The default focus ring is applied **globally** in the plugin's base layer, implemented as a CSS **outline**:
+
+```css
+:focus-visible {
+  outline: var(--focus-outline-default); /* 2px solid #c9c9c9e5 light / 3px solid #464646cc dark */
+  outline-offset: 0px;
+}
+```
+
+- `colorPalette.js#generateEffectVariables` emits `--focus-outline-<name>` (`<spread> solid <color>`, theme-flipped) alongside the legacy `--focus-<name>` shadow strings.
+- The `.focus-ring{-<name>}` utilities are outline-based too. They exist for **themed overrides** (`focus-visible:focus-ring-red`) and **non-focus states** (`data-[state=open]:focus-ring`, `focus-within:focus-ring` on wrapper patterns).
+- Components do NOT declare a default focus ring; the base rule covers them. Utility classes (specificity ≥ (0,2,0), later layer) always beat the base rule, so:
+  - suppress with `focus-visible:outline-none` (e.g. Dialog panel, ghost inputs),
+  - retheme with `focus-visible:focus-ring-<color>` (e.g. Button solid/red).
+
+### Rationale
+
+- **outline can't collide** with box-shadow utilities — the conflict class disappears entirely.
+- outline follows `border-radius` in all modern browsers, renders outside the box like the Figma outset shadow, and **survives forced-colors mode** (box-shadows are stripped there) — an accessibility win.
+- Global default means new interactive elements are keyboard-accessible by construction; the failure mode flips from "missing ring" to "extra ring", which is visible and easy to fix.
+- Light/dark width difference (2px/3px) rides the variable flip — no `dark:` variants needed.
+
+### Consequences
+
+- `outline-none` on a focusable element now suppresses the design-system ring, not just the UA one. Use it deliberately.
+- Wrapper patterns (`focus-within:focus-ring`) keep `outline-none` on the inner input so only the wrapper shows the ring.
+- Programmatically-focused containers (dialog/menu panels) keep `focus:outline-none` / `focus-visible:outline-none` to avoid rings on script focus.
+- The `--focus-<name>` box-shadow variables remain emitted for backward compatibility but are no longer used by frappe-ui itself.
+- Pre-existing `focus:ring-2` usages (Autocomplete, DatePicker CalendarPanel) are drift; migrate opportunistically by deleting them (the global rule takes over).
diff --git a/spec/adr/0006-numbered-radius-tokens.md b/spec/adr/0006-numbered-radius-tokens.md
new file mode 100644
index 000000000..c8fd72bdd
--- /dev/null
+++ b/spec/adr/0006-numbered-radius-tokens.md
@@ -0,0 +1,54 @@
+# Numbered radius tokens are canonical
+
+**Status**: accepted
+
+## Context
+
+Figma espresso v2 exposes border-radius as a numbered scale: `radius/0`, `radius/1`, … `radius/9`. The numbers are positions on the scale, not abstract sizes — `radius/4` is the 5th step (`8px`), `radius/5` is the 6th step (`10px`), and so on. The scale is dense and ordered: there are five distinct values in the 0–12px range alone.
+
+The pre-Figma Tailwind preset used named radii — `sm`, `DEFAULT`, `md`, `lg`, `xl`, `2xl` — inherited from Tailwind's house scale but with rebound pixel values (`rounded-md` = 10px, not Tailwind's 6px; `rounded-lg` = 12px, not Tailwind's 8px). The current `tailwind/generated/radius.json` ships both: numbered tokens (`0`–`9`, `full`) **and** named aliases (`sm`, `DEFAULT`, `md`, `lg`, `xl`, `2xl`).
+
+This creates two problems:
+
+1. **Ambiguous mapping.** `rounded-md` exists in two design systems with two different values (Tailwind 6px vs frappe-ui 10px). Component authors reading `rounded-md` can't tell which scale they're in.
+2. **Sparse coverage.** The named aliases skip steps. `radius/2` (5px), `radius/3` (6px), `radius/8` (20px) have no named equivalent. New components that need those values either reach for arbitrary classes (`rounded-[5px]`) or pick the wrong neighbor.
+
+## Decision
+
+Numbered radius tokens (`rounded-0` … `rounded-9`, plus `rounded-full`) are the **canonical** way to set border-radius in `frappe-ui`. All new code must use them.
+
+Named aliases (`rounded-sm`, `rounded` / `rounded-DEFAULT`, `rounded-md`, `rounded-lg`, `rounded-xl`, `rounded-2xl`) remain in [`tailwind/generated/radius.json`](../../tailwind/generated/radius.json) as **deprecated migration aliases**. Existing usages must be migrated. New usages are not permitted.
+
+The canonical mapping:
+
+| Numbered token | px | Deprecated alias |
+|---|---|---|
+| `rounded-0` | 0 | `rounded-none` (kept; non-numbered but unambiguous) |
+| `rounded-1` | 4 | `rounded-sm` |
+| `rounded-2` | 5 | — |
+| `rounded-3` | 6 | — |
+| `rounded-4` | 8 | `rounded` / `rounded-DEFAULT` |
+| `rounded-5` | 10 | `rounded-md` |
+| `rounded-6` | 12 | `rounded-lg` |
+| `rounded-7` | 16 | `rounded-xl` |
+| `rounded-8` | 20 | `rounded-2xl` |
+| `rounded-9` | 100 | — |
+| `rounded-full` | 9999 | — (kept; semantically meaningful, not part of the scale) |
+
+`rounded-none` and `rounded-full` are retained — they're semantic, not size-named, and have no numbered ambiguity.
+
+## Rationale
+
+- Numbered tokens preserve Figma's mental model exactly. A designer specifying `radius/5` and an engineer writing `rounded-5` are speaking the same vocabulary. The lookup table collapses.
+- The named scale was a Tailwind-house decision adopted before the design system had its own scale. With espresso v2, the design system owns the scale; aliases keep the lookup table.
+- Removing aliases entirely would break every consumer app immediately. Marking them deprecated lets us migrate the library and downstream apps incrementally, then drop the aliases in a later major version.
+- Sparse named aliases skip the 5px and 6px steps. New components needing those values force either arbitrary classes or "round up to the nearest alias" drift. Numbered tokens cover every step.
+
+## Consequences
+
+- All component code in `src/` migrates to numbered tokens. `Button.vue` is the first migration; pattern is mechanical (`rounded` → `rounded-4`, `rounded-md` → `rounded-5`, …).
+- Component specs and foundation docs use numbered tokens in examples.
+- Named aliases (`sm`, `DEFAULT`, `md`, `lg`, `xl`, `2xl`) are kept in [`tailwind/generated/radius.json`](../../tailwind/generated/radius.json) so consumer apps don't break, but they're flagged for migration in [`foundations.md`](../foundations.md#radius) and should be removed in the next breaking release.
+- `rounded` (bare, = `rounded-DEFAULT` = 8px) is the most common drift surface in the codebase — components that use it must migrate to `rounded-4`. The two render identically; the migration is purely vocabulary.
+- ESLint rule or codemod to flag named aliases in `src/` is not built today; greppable. A future task can automate.
+- The Figma export pipeline ([`tailwind/figma-tokens-to-theme.js`](../../tailwind/figma-tokens-to-theme.js)) is unchanged — numbered tokens already come straight from `radius.*` Figma tokens. The deprecated aliases live in `RADIUS_EXTRA` (or equivalent) in the build script; they should be moved to a clearly-marked deprecated section.
diff --git a/spec/adr/0007-typography-style-utilities.md b/spec/adr/0007-typography-style-utilities.md
new file mode 100644
index 000000000..6ecea70f9
--- /dev/null
+++ b/spec/adr/0007-typography-style-utilities.md
@@ -0,0 +1,60 @@
+# Named typography style utilities (`text-{size}-{weight}`)
+
+**Status**: accepted
+
+## Context
+
+Figma models typography in espresso v2 as **named styles**, not as independent size/weight/tracking axes. Each style is an atomic token:
+
+| Figma style | font-size | weight | letter-spacing |
+|---|---|---|---|
+| `text/base/regular` | 14px | 420 | 2% (0.28px) |
+| `text/base/medium`  | 14px | 500 | **1.5%** (0.21px) |
+| `text/lg/medium`    | 16px | 500 | **1.5%** (0.24px) |
+
+Medium-weight text is **tracked tighter** than regular-weight text of the same size. This is a deliberate optical correction baked into the design system.
+
+Tailwind's `fontSize` utility carries `letterSpacing` keyed only by size. So `text-base` always emits the same letter-spacing regardless of whether `font-medium` is also applied. Any component that did `text-base font-medium` (Button md/lg, Tabs, FormControl labels, Tooltip titles…) drifted ~0.07–0.08px from the Figma design — visually subtle but systemic.
+
+The Figma token export (`espresso-v2-design-tokens/Typography.Desktop.tokens.json`) only contains atomic `font.size.*`, `font.weight.*`, `font.line-height.*`, `font.family.*` tokens. The composite named styles are not exported — they exist only in the Figma UI.
+
+## Decision
+
+Expose Figma's named typography styles as Tailwind **component utilities** generated by the design-system plugin:
+
+```css
+.text-base-medium { font-size: 14px; line-height: 16px; font-weight: 500; letter-spacing: 0.015em; }
+.text-lg-medium  { font-size: 16px; line-height: 18px; font-weight: 500; letter-spacing: 0.015em; }
+```
+
+Generation lives in `tailwind/plugin.js`:
+
+- `FONT_SIZE_MEDIUM_TRACKING` — a per-size map of the medium-variant letter-spacing. Only sizes whose medium tracking is confirmed in Figma are listed.
+- `buildTextStyleUtilities()` — reads that map plus `typographyTokens.fontSize` and emits one `.text-{size}-medium` rule per entry. Registered via `addComponents()`.
+
+Components opt in by replacing `text-{size} font-medium` with `text-{size}-medium`.
+
+The base `text-{size}` utility continues to carry the **regular**-weight tracking (the historical `FONT_SIZE_AUGMENT` values). The new utilities only override what's specific to the medium variant.
+
+## Rationale
+
+Three alternatives were considered:
+
+1. **Per-component override** (`tracking-[0.015em]` inline in Button).
+   Surgical but doesn't scale — every component re-discovers the rule. Drift returns the moment a new component is added.
+
+2. **Auto-tighten on `font-medium` globally** (e.g. via a `@layer utilities` rule that combines weight + tracking).
+   Zero migration cost, but applies to body paragraphs too. We have no evidence Figma wants medium-weight body copy tighter — only UI labels. Risk of unwanted side-effects on Markdown content, paragraph text, etc.
+
+3. **Named-style utilities** (chosen).
+   1:1 with Figma's mental model. Components that need exact Figma parity opt in by name. Components that use the bare `text-base font-medium` continue to work — they just don't get the optical correction until migrated. Auditable: grep for `font-medium` next to `text-*` to find migration candidates.
+
+Naming follows Figma's slash convention flattened to hyphens: `text/base/medium` → `text-base-medium`. Regular-weight variants don't get their own utility because the base `text-{size}` utility already encodes regular-weight tracking — `text-base-regular` would be a redundant alias.
+
+## Consequences
+
+- `tailwind/plugin.js` is the single source of truth for which medium variants exist. Adding a new one is a one-line addition to `FONT_SIZE_MEDIUM_TRACKING`.
+- The Figma token pipeline (`espresso-v2-design-tokens/`) does **not** model these — the values are hand-encoded in `plugin.js` from Figma observation. If the token export gains composite styles later, `buildTextStyleUtilities()` should be rewritten to read from the export instead.
+- Migration is incremental. Components that haven't moved off `text-base font-medium` still render; they just have 0.07–0.08px of tracking drift from Figma.
+- Currently emitted: `text-base-medium`, `text-lg-medium` (confirmed against Figma). Other sizes pending Figma verification.
+- Button md (`text-base-medium`) and Button lg (`text-lg-medium`) are the first consumers; verified pixel-exact against Figma node `25393-27651`.
diff --git a/spec/adr/README.md b/spec/adr/README.md
index eb7ca3096..0f9aa4083 100644
--- a/spec/adr/README.md
+++ b/spec/adr/README.md
@@ -10,3 +10,6 @@ Specs describe the current contract. ADRs explain why decisions were made. Super
 | [0002 — Imperative dialog resolves on click](./0002-imperative-dialog-caller-closes.md) | Superseded | Replaced by ADR-0003. Historical only. |
 | [0003 — Imperative dialog uses `onConfirm`](./0003-imperative-dialog-onconfirm.md) | Accepted | Current imperative dialog lifecycle. |
 | [0004 — Editor composition model](./0004-editor-family-composition-model.md) | Accepted | One `<TextEditor>` + kits at `frappe-ui/editor`; no ready-mades. |
+| [0005 — 2px focus ring](./0005-focus-ring-2px.md) | Accepted | `focus-visible:ring-2` matches Figma's 2px focus shadow. |
+| [0006 — Numbered radius tokens](./0006-numbered-radius-tokens.md) | Accepted | `rounded-1`…`rounded-9` are canonical; named aliases deprecated. |
+| [0007 — Named typography style utilities](./0007-typography-style-utilities.md) | Accepted | `text-{size}-medium` utilities for Figma's medium-weight tracking. |
diff --git a/spec/foundations.md b/spec/foundations.md
new file mode 100644
index 000000000..f6943cbdd
--- /dev/null
+++ b/spec/foundations.md
@@ -0,0 +1,165 @@
+# Foundations Spec
+
+Status: accepted direction for `frappe-ui` v1 (espresso v2 tokens).
+
+This document defines the foundation layer of the design system — typography, focus, radius, color ramps — and the rules by which it stays aligned with Figma. Component specs ([`dialog.md`](./dialog.md), [`inputs.md`](./inputs.md), etc.) build on this.
+
+Architectural calls in this spec are recorded as ADRs:
+
+- [`adr/0007-typography-style-utilities.md`](./adr/0007-typography-style-utilities.md) — why named typography utilities (`text-{size}-medium`) exist instead of per-component overrides.
+- [`adr/0005-focus-ring-2px.md`](./adr/0005-focus-ring-2px.md) — why focus rings are 2px.
+- [`adr/0006-numbered-radius-tokens.md`](./adr/0006-numbered-radius-tokens.md) — why numbered radius tokens (`rounded-1`…`rounded-9`) are canonical and named aliases are deprecated.
+
+## Source of truth
+
+Figma is the source of truth. The current design file is **espresso 2.0**: <https://www.figma.com/design/kMYnZ9ougpSSQBdjZCgtdX/espresso-2.0>
+
+Token export lives in [`espresso-v2-design-tokens/`](../espresso-v2-design-tokens/) and is consumed by [`tailwind/figma-tokens-to-theme.js`](../tailwind/figma-tokens-to-theme.js), which writes the generated theme JSON to [`tailwind/generated/`](../tailwind/generated/).
+
+Anything in this repo that diverges from Figma is either (a) drift to be fixed, or (b) an intentional code-only extension explicitly listed in [§ Code-only extensions](#code-only-extensions). There is no third category.
+
+## Decisions at a glance
+
+| Decision | Direction |
+|---|---|
+| Source of truth | Figma file `espresso-2.0` |
+| Typography model | Atomic size/weight/line-height tokens from Figma export, plus named-style utilities for composite styles |
+| Named typography utilities | `text-{size}-medium` for sizes whose medium-variant tracking is confirmed in Figma. See [ADR-0007](./adr/0007-typography-style-utilities.md) |
+| Focus indicator | `focus-visible:ring-2` + themed `ring-<color>`. No offset, no blur. See [ADR-0005](./adr/0005-focus-ring-2px.md) |
+| Radius scale | Numbered tokens `rounded-0`…`rounded-9` are canonical. Named aliases (`rounded`, `rounded-md`, …) are deprecated. See [ADR-0006](./adr/0006-numbered-radius-tokens.md) |
+| Color themes | Figma defines `default` (gray) and `red`. `blue` and `green` are code-only extensions (see below) |
+| Component size scale | Figma defines `sm` / `md` / `lg`. `xs`, `xl`, and `2xl` are code-only extensions |
+
+## Typography
+
+### Token model
+
+Atomic tokens are exported from Figma to [`tailwind/generated/typography.json`](../tailwind/generated/typography.json):
+
+- `fontFamily` — `text: 'Inter Variable'`
+- `fontSize` — keyed by size name (`tiny`, `2xs`, `xs`, `sm`, `base`, `lg`, `xl`, `2xl`, `3xl`, …), each paired with a `lineHeight`
+- `fontWeight` — named weights: `regular: 400`, `medium: 500`, `semibold: 600`, `bold: 700`, `black: 800`
+
+Letter-spacing is **not** exported from Figma — it is encoded by hand in [`tailwind/plugin.js`](../tailwind/plugin.js) via `FONT_SIZE_AUGMENT` (for the regular-weight variant of each size) and `FONT_SIZE_MEDIUM_TRACKING` (for the medium-weight variant).
+
+### Named style utilities
+
+Figma models typography as named styles (`text/base/regular`, `text/base/medium`, `text/lg/medium`, …) where medium-weight text is tracked tighter than regular at the same size. To preserve this in CSS, `tailwind/plugin.js` emits component utilities:
+
+| Utility | font-size | line-height | weight | letter-spacing | Figma |
+|---|---|---|---|---|---|
+| `text-base-medium` | 14px | 16px | 500 | 0.015em (1.5%) | `text/base/medium` |
+| `text-lg-medium`   | 16px | 18px | 500 | 0.015em (1.5%) | `text/lg/medium` |
+
+Regular-weight tracking is carried by the base `text-{size}` utility — there is no `text-{size}-regular` because it would be a redundant alias.
+
+**Migration guidance**: components using `text-{size} font-medium` should migrate to `text-{size}-medium` where the named utility exists. Bare `text-{size} font-medium` continues to render correctly but drifts ~0.07–0.08px tighter than Figma intends.
+
+See [ADR-0007](./adr/0007-typography-style-utilities.md) for the reasoning and the alternatives considered.
+
+### Verified font-size tokens
+
+Confirmed against Figma typography variables on `2026-05-24`:
+
+| Tailwind size | font-size | line-height | Figma variable |
+|---|---|---|---|
+| `text-base`         | 14px | 16px | `text/base/regular` (with weight 420, ls 2%) |
+| `text-base-medium`  | 14px | 16px | `text/base/medium` (weight 500, ls 1.5%) |
+| `text-lg`           | 16px | 18px | (no Figma usage in component scope yet) |
+| `text-lg-medium`    | 16px | 18px | `text/lg/medium` (weight 500, ls 1.5%) |
+
+## Focus ring
+
+All interactive components use `focus-visible:ring-2` paired with a themed `ring-<color>`:
+
+| Theme | Ring color | Figma |
+|---|---|---|
+| gray (default) | `ring-outline-gray-3` | `focus/light/default` |
+| red    | `ring-outline-red-3`   | `focus/light/red` |
+| blue   | `ring-blue-400`         | code-only |
+| green  | `ring-outline-green-3`  | code-only |
+
+The ring is outset, no offset, no blur — matches Figma's 2px drop-shadow spec exactly.
+
+See [ADR-0005](./adr/0005-focus-ring-2px.md).
+
+## Radius
+
+Numbered radius tokens are the canonical way to set border-radius. See [ADR-0006](./adr/0006-numbered-radius-tokens.md).
+
+### Canonical (use these)
+
+Generated from Figma `radius.*` tokens into [`tailwind/generated/radius.json`](../tailwind/generated/radius.json):
+
+| Tailwind | px | Figma token |
+|---|---|---|
+| `rounded-0` | 0 | `radius/0` |
+| `rounded-1` | 4 | `radius/1` |
+| `rounded-2` | 5 | `radius/2` |
+| `rounded-3` | 6 | `radius/3` |
+| `rounded-4` | 8 | `radius/4` |
+| `rounded-5` | 10 | `radius/5` |
+| `rounded-6` | 12 | `radius/6` |
+| `rounded-7` | 16 | `radius/7` |
+| `rounded-8` | 20 | `radius/8` |
+| `rounded-9` | 100 | `radius/9` |
+| `rounded-none` | 0 | — (semantic alias for `rounded-0`) |
+| `rounded-full` | 9999 | — (semantic, not on the scale) |
+
+### Deprecated — flagged for migration
+
+These aliases remain in `tailwind/generated/radius.json` so consumer apps keep working, but they are **not** to be used in new code. Migrate existing usages in `src/` to the numbered equivalent:
+
+| Deprecated alias | Migrate to | px |
+|---|---|---|
+| `rounded` / `rounded-DEFAULT` | `rounded-4` | 8 |
+| `rounded-sm` | `rounded-1` | 4 |
+| `rounded-md` | `rounded-5` | 10 |
+| `rounded-lg` | `rounded-6` | 12 |
+| `rounded-xl` | `rounded-7` | 16 |
+| `rounded-2xl` | `rounded-8` | 20 |
+
+Migration is purely vocabulary — pixel values are identical. The aliases will be removed in the next breaking release.
+
+To find usages: `grep -rE "rounded(-md|-lg|-xl|-2xl|-sm|-DEFAULT)?\\b" src/`. A bare `rounded` (not `rounded-N`) is the most common occurrence.
+
+## Themes & colors
+
+Figma espresso v2 defines two component color themes:
+
+- **`default`** — the gray ramp (`surface-gray-*`, `ink-gray-*`, `outline-gray-*`)
+- **`red`** — the red ramp (`surface-red-*`, `ink-red-*`, `outline-red-*`)
+
+Both are exported via [`tailwind/colors.json`](../tailwind/colors.json) → [`tailwind/generated/colors.json`](../tailwind/generated/colors.json) and resolved to CSS variables by [`tailwind/colorPalette.js`](../tailwind/colorPalette.js).
+
+Solid/subtle/outline/ghost ramps for these two themes are pixel-accurate to Figma.
+
+## Code-only extensions
+
+Extensions to the Figma spec that the library ships **intentionally**, not as drift:
+
+| Extension | Where | Reason |
+|---|---|---|
+| `xs`, `xl`, `2xl` button sizes | `Button.vue` `sizeClasses` | Sizes outside Figma's `sm`/`md`/`lg` scale. `xs` (24px, `text-xs`, `rounded-3`) covers compact toolbars/badges-as-buttons; `xl`/`2xl` are pre-espresso-v2 sizes preserved for back-compat. No Figma reference — use at own risk; visual treatment may shift if Figma adds these later. |
+| `blue`, `green`, (and other) themes | `Button.vue` `buttonClasses`, plus `Badge`, `Alert`, `Toast`, etc. | Semantic theming surface that pre-dates espresso v2. Figma currently only models `default` + `red` for components, but the underlying color ramps (blue, green, yellow, …) are first-class in the token export. |
+| Letter-spacing per size | `tailwind/plugin.js` `FONT_SIZE_AUGMENT` | Figma exports `font.size`, `font.weight`, `font.line-height`, `font.family` — letter-spacing is composed in Figma styles but not in the token JSON. Encoded by hand. |
+| Medium-variant tracking | `tailwind/plugin.js` `FONT_SIZE_MEDIUM_TRACKING` | Same — Figma composes it in named styles; we re-derive per size. Only sizes whose medium tracking is confirmed in Figma are listed. |
+
+If Figma adds any of these later, the extensions become drift and should be reconciled.
+
+## Verification process
+
+When verifying a component against Figma:
+
+1. Open the component frame in Figma Dev Mode. The Figma MCP server (`mcp__figma__*`) is the canonical way to read design specs — `get_design_context` for code+screenshot, `get_variable_defs` for token mappings.
+2. Compare against the rendered component in the dev docs (Vite dev server on `:5173`). Use `getComputedStyle()` to read actual `letter-spacing`, `border-radius`, etc. — pixel comparison beats screenshot comparison for spacing/typography.
+3. Drift falls into three buckets:
+   - **Token drift** — a token value disagrees with Figma. Fix in the export pipeline or in `tailwind/plugin.js`.
+   - **Component drift** — the component uses the wrong token. Fix in the component.
+   - **Intentional extension** — must be listed in [§ Code-only extensions](#code-only-extensions). Add it there.
+
+Latest full-component verifications:
+
+| Component | Figma node | Date | Notes |
+|---|---|---|---|
+| `Button` (sm/md/lg) | [`25393-27651`](https://www.figma.com/design/kMYnZ9ougpSSQBdjZCgtdX/espresso-2.0?node-id=25393-27651) | 2026-05-24 | Pixel-accurate after ADR-0004 and ADR-0005. xs/xl/2xl + blue/green/etc. themes are code-only extensions. |
diff --git a/spec/inputs.md b/spec/inputs.md
index abc4702b1..2db344dcd 100644
--- a/spec/inputs.md
+++ b/spec/inputs.md
@@ -139,7 +139,7 @@ Reuse `FormLabel`'s existing pattern as the canonical implementation:
 ```html
 <label for="...">
   Label text
-  <span aria-hidden="true" class="text-ink-red-3 select-none">*</span>
+  <span aria-hidden="true" class="text-ink-red-6 select-none">*</span>
   <span class="sr-only">(required)</span>
 </label>
 ```
@@ -153,7 +153,7 @@ indicator inside their custom label content.
 - `error: Error` renders `Error.messages` (joined with line breaks via
   `whitespace-pre-line`) when present, otherwise `Error.message`.
 - The error region is rendered as plain text. **`v-html` is not used.**
-- `error` text uses `text-ink-red-3` (matches the required asterisk for
+- `error` text uses `text-ink-red-6` (matches the required asterisk for
   visual consistency of "needs attention" affordances).
 - Setting `error` automatically suppresses the `description` region.
 
diff --git a/spec/selection.md b/spec/selection.md
index e9f649e43..35c0d4fa6 100644
--- a/spec/selection.md
+++ b/spec/selection.md
@@ -520,7 +520,7 @@ convention powered by the shared Tailwind plugin
 - auto-rendered as `<span :class="item.icon">` inside the prefix region
   when no consumer slot (`#item-prefix` or `item.slots.prefix`) claims
   that region
-- sizing (`size-4`), color (`text-ink-gray-6` by default, `text-ink-red-3`
+- sizing (`size-4`), color (`text-ink-gray-6` by default, `text-ink-red-6`
   for `theme: 'red'` in `Dropdown`) are applied by the component
 
 Benefits:
diff --git a/spec/toast.md b/spec/toast.md
index b9983a1c7..3df1f3b3c 100644
--- a/spec/toast.md
+++ b/spec/toast.md
@@ -12,7 +12,7 @@ Toasts are short-lived, non-blocking notifications that surface in a fixed viewp
 
 `frappe-ui` v1 **vendors [`vue-sonner`](https://github.com/xiaoluoboding/vue-sonner)** and re-exports its `toast` namespace and `<Toaster>` component **with sonner's API surface unchanged**. Our only contribution is:
 
-1. **Visual defaults** — CSS overrides that match the current dark high-contrast toast (`bg-surface-gray-6` + `ink-white`).
+1. **Visual defaults** — CSS overrides that match the current dark high-contrast toast (`bg-surface-gray-9` + `ink-base`).
 2. **Configuration defaults** — `position='bottom-right'`, `duration=5000`, `closeButton=true`.
 3. **Mount integration** — `<FrappeUIProvider>` renders `<Toaster>` with those defaults.
 
@@ -95,8 +95,8 @@ We apply a thin CSS override layer targeting sonner's CSS custom properties, sco
 
 ```css
 [data-sonner-toaster] {
-  --normal-bg: theme(colors.surface-gray-6);
-  --normal-text: theme(colors.ink-white);
+  --normal-bg: theme(colors.surface-gray-9);
+  --normal-text: theme(colors.ink-base);
   --normal-border: transparent;
   --success-bg: var(--normal-bg);
   --success-text: var(--normal-text);
diff --git a/src/components/Alert/Alert.md b/src/components/Alert/Alert.md
index 82462f9b4..7f2adaa20 100644
--- a/src/components/Alert/Alert.md
+++ b/src/components/Alert/Alert.md
@@ -2,6 +2,10 @@
 
 A prominent message used to communicate important information, warnings, or status updates to the user.
 
+## Playground
+
+<ClientOnly><AlertBuilder /></ClientOnly>
+
 ## Themes
 <ComponentPreview name="Alert-Themes" />
 
diff --git a/src/components/Alert/Alert.vue b/src/components/Alert/Alert.vue
index 70913e2fb..a32e0e902 100644
--- a/src/components/Alert/Alert.vue
+++ b/src/components/Alert/Alert.vue
@@ -28,10 +28,10 @@ const classes = computed(() => {
 
 const icon = computed(() => {
   const data = {
-    yellow: { class: 'lucide-triangle-alert', css: 'text-ink-amber-3' },
-    blue: { class: 'lucide-info', css: 'text-ink-blue-3' },
-    red: { class: 'lucide-circle-x', css: 'text-ink-red-3' },
-    green: { class: 'lucide-circle-check', css: 'text-ink-green-3' },
+    yellow: { class: 'lucide-triangle-alert', css: 'text-ink-amber-6' },
+    blue: { class: 'lucide-info', css: 'text-ink-blue-6' },
+    red: { class: 'lucide-circle-x', css: 'text-ink-red-6' },
+    green: { class: 'lucide-circle-check', css: 'text-ink-green-6' },
   }
   return props.theme ? data[props.theme] : null
 })
diff --git a/src/components/Autocomplete/Autocomplete.vue b/src/components/Autocomplete/Autocomplete.vue
index ac94771da..0df5bab0f 100644
--- a/src/components/Autocomplete/Autocomplete.vue
+++ b/src/components/Autocomplete/Autocomplete.vue
@@ -59,7 +59,7 @@
       <template #body="{ isOpen, togglePopover }">
         <div v-show="isOpen">
           <div
-            class="relative mt-1 rounded-lg bg-surface-modal text-base shadow-2xl"
+            class="relative mt-1 rounded-lg bg-surface-elevation-2 text-base shadow-2xl"
             :class="bodyClasses"
           >
             <ComboboxOptions
@@ -69,7 +69,7 @@
             >
               <div
                 v-if="!hideSearch"
-                class="sticky top-0 z-10 flex items-stretch space-x-1.5 bg-surface-modal py-1.5"
+                class="sticky top-0 z-10 flex items-stretch space-x-1.5 bg-surface-elevation-2 py-1.5"
               >
                 <div class="relative w-full">
                   <ComboboxInput
@@ -101,7 +101,7 @@
               >
                 <div
                   v-if="group.group && !group.hideLabel"
-                  class="sticky top-10 truncate bg-surface-modal px-2.5 py-1.5 text-sm font-medium text-ink-gray-5"
+                  class="sticky top-10 truncate bg-surface-elevation-2 px-2.5 py-1.5 text-sm-medium text-ink-gray-5"
                 >
                   {{ group.group }}
                 </div>
diff --git a/src/components/Avatar/Avatar.md b/src/components/Avatar/Avatar.md
index 8acb20733..335ed0676 100644
--- a/src/components/Avatar/Avatar.md
+++ b/src/components/Avatar/Avatar.md
@@ -2,6 +2,10 @@
 
 A visual representation of a user, typically shown as an image, initials, or an icon.
 
+## Playground
+
+<ClientOnly><AvatarBuilder /></ClientOnly>
+
 ## Themes
 <ComponentPreview name="Avatar-Shapes" />
 
diff --git a/src/components/Avatar/Avatar.vue b/src/components/Avatar/Avatar.vue
index ec6dd71f1..c3b8f5d51 100644
--- a/src/components/Avatar/Avatar.vue
+++ b/src/components/Avatar/Avatar.vue
@@ -25,7 +25,7 @@
     <div
       v-if="$slots.indicator"
       :class="[
-        'absolute bottom-0 right-0 grid place-items-center rounded-full bg-surface-white',
+        'absolute bottom-0 right-0 grid place-items-center rounded-full bg-surface-base',
         indicatorContainerClasses,
       ]"
     >
@@ -80,9 +80,9 @@ const labelClasses = computed(() => {
     sm: 'text-sm',
     md: 'text-base',
     lg: 'text-base',
-    xl: 'text-lg',
-    '2xl': 'text-xl',
-    '3xl': 'text-2xl',
+    xl: 'text-xl',
+    '2xl': 'text-3xl',
+    '3xl': 'text-4xl',
   }[props.size]
   return ['font-medium', sizeClass]
 })
diff --git a/src/components/Badge/Badge.api.md b/src/components/Badge/Badge.api.md
index 146a665a4..3c69d6827 100644
--- a/src/components/Badge/Badge.api.md
+++ b/src/components/Badge/Badge.api.md
@@ -9,7 +9,7 @@
     name: 'theme',
     description: 'Visual color theme of the badge',
     required: false,
-    type: '"blue" | "red" | "green" | "gray" | "orange"',
+    type: '"blue" | "red" | "green" | "gray" | "amber" | "violet" | "orange"',
     default: '"gray"'
   },
   {
diff --git a/src/components/Badge/Badge.cy.ts b/src/components/Badge/Badge.cy.ts
index 8d1febe1e..37c9f7853 100644
--- a/src/components/Badge/Badge.cy.ts
+++ b/src/components/Badge/Badge.cy.ts
@@ -41,7 +41,7 @@ describe('<Badge />', () => {
         label: 'Blue',
       },
     })
-    cy.get('.inline-flex.rounded-full').should('have.class', 'text-ink-blue-2')
+    cy.get('.inline-flex.rounded-full').should('have.class', 'text-ink-blue-8')
     cy.get('.inline-flex.rounded-full').should('have.class', 'bg-surface-blue-2')
 
     // Green
@@ -51,18 +51,28 @@ describe('<Badge />', () => {
         label: 'Green',
       },
     })
-    cy.get('.inline-flex.rounded-full').should('have.class', 'text-ink-green-3')
+    cy.get('.inline-flex.rounded-full').should('have.class', 'text-ink-green-8')
     cy.get('.inline-flex.rounded-full').should('have.class', 'bg-surface-green-2')
 
-    // Orange
+    // Amber
+    cy.mount(Badge, {
+      props: {
+        theme: 'amber',
+        label: 'Amber',
+      },
+    })
+    cy.get('.inline-flex.rounded-full').should('have.class', 'text-ink-amber-8')
+    cy.get('.inline-flex.rounded-full').should('have.class', 'bg-surface-amber-2')
+
+    // Orange (deprecated alias for amber)
     cy.mount(Badge, {
       props: {
         theme: 'orange',
         label: 'Orange',
       },
     })
-    cy.get('.inline-flex.rounded-full').should('have.class', 'text-ink-amber-3')
-    cy.get('.inline-flex.rounded-full').should('have.class', 'bg-surface-amber-1')
+    cy.get('.inline-flex.rounded-full').should('have.class', 'text-ink-amber-8')
+    cy.get('.inline-flex.rounded-full').should('have.class', 'bg-surface-amber-2')
 
     // Red
     cy.mount(Badge, {
@@ -71,20 +81,30 @@ describe('<Badge />', () => {
         label: 'Red',
       },
     })
-    cy.get('.inline-flex.rounded-full').should('have.class', 'text-ink-red-4')
+    cy.get('.inline-flex.rounded-full').should('have.class', 'text-ink-red-8')
     cy.get('.inline-flex.rounded-full').should('have.class', 'bg-surface-red-2')
+
+    // Violet
+    cy.mount(Badge, {
+      props: {
+        theme: 'violet',
+        label: 'Violet',
+      },
+    })
+    cy.get('.inline-flex.rounded-full').should('have.class', 'text-ink-violet-8')
+    cy.get('.inline-flex.rounded-full').should('have.class', 'bg-surface-violet-2')
   })
 
   it('renders different variants with gray theme', () => {
-    // Solid
+    // Solid (gray uses semantic token; non-gray solids use raw palette)
     cy.mount(Badge, {
       props: {
         variant: 'solid',
         label: 'Solid',
       },
     })
-    cy.get('.inline-flex.rounded-full').should('have.class', 'text-ink-white')
-    cy.get('.inline-flex.rounded-full').should('have.class', 'bg-surface-gray-7')
+    cy.get('.inline-flex.rounded-full').should('have.class', 'text-ink-base')
+    cy.get('.inline-flex.rounded-full').should('have.class', 'bg-surface-gray-10')
 
     // Subtle (default)
     cy.mount(Badge, {
@@ -104,8 +124,7 @@ describe('<Badge />', () => {
       },
     })
     cy.get('.inline-flex.rounded-full').should('have.class', 'text-ink-gray-6')
-    cy.get('.inline-flex.rounded-full').should('have.class', 'bg-transparent')
-    cy.get('.inline-flex.rounded-full').should('have.class', 'border-outline-gray-1')
+    cy.get('.inline-flex.rounded-full').should('have.class', 'border-outline-gray-2')
 
     // Ghost
     cy.mount(Badge, {
@@ -115,7 +134,6 @@ describe('<Badge />', () => {
       },
     })
     cy.get('.inline-flex.rounded-full').should('have.class', 'text-ink-gray-6')
-    cy.get('.inline-flex.rounded-full').should('have.class', 'bg-transparent')
   })
 
   it('renders different sizes', () => {
@@ -149,7 +167,7 @@ describe('<Badge />', () => {
       },
     })
     cy.get('.inline-flex.rounded-full').should('have.class', 'h-6')
-    cy.get('.inline-flex.rounded-full').should('have.class', 'text-sm')
+    cy.get('.inline-flex.rounded-full').should('have.class', 'text-[13px]')
     cy.get('.inline-flex.rounded-full').should('have.class', 'px-2')
   })
 
@@ -250,7 +268,7 @@ describe('<Badge />', () => {
         prefix: () => h(TestIcon),
       },
     })
-    cy.get('[data-cy="prefix-icon"]').parent().should('have.class', 'max-h-4')
+    cy.get('[data-cy="prefix-icon"]').parent().should('have.class', 'size-2.5')
 
     // Test with md size (default)
     cy.mount(Badge, {
@@ -259,7 +277,7 @@ describe('<Badge />', () => {
         prefix: () => h(TestIcon),
       },
     })
-    cy.get('[data-cy="prefix-icon"]').parent().should('have.class', 'max-h-4')
+    cy.get('[data-cy="prefix-icon"]').parent().should('have.class', 'size-2.5')
 
     // Test with lg size
     cy.mount(Badge, {
@@ -268,6 +286,6 @@ describe('<Badge />', () => {
         prefix: () => h(TestIcon),
       },
     })
-    cy.get('[data-cy="prefix-icon"]').parent().should('have.class', 'max-h-6')
+    cy.get('[data-cy="prefix-icon"]').parent().should('have.class', 'size-3')
   })
 })
diff --git a/src/components/Badge/Badge.md b/src/components/Badge/Badge.md
index 346016f66..e2b972f77 100644
--- a/src/components/Badge/Badge.md
+++ b/src/components/Badge/Badge.md
@@ -2,12 +2,28 @@
 
 A small label used to highlight status, counts, or metadata associated with an element.
 
-## Variants
+## Playground
 
-<ComponentPreview name="Badge-Variants" />
+<ClientOnly><BadgeBuilder /></ClientOnly>
 
-## Themes
+## Event status
 
-<ComponentPreview name="Badge-Themes" />
+<ComponentPreview name="Badge-EventStatus" />
+
+## Call metadata
+
+<ComponentPreview name="Badge-CallMeta" />
+
+## List status
+
+<ComponentPreview name="Badge-ListStatus" />
+
+## Row tags
+
+<ComponentPreview name="Badge-RowTags" />
+
+## Reactions
+
+<ComponentPreview name="Badge-Reactions" />
 
 <!-- @include: ./Badge.api.md -->
diff --git a/src/components/Badge/Badge.vue b/src/components/Badge/Badge.vue
index 8099ae703..7278646b3 100644
--- a/src/components/Badge/Badge.vue
+++ b/src/components/Badge/Badge.vue
@@ -1,18 +1,20 @@
 <template>
   <div
-    class="inline-flex select-none items-center gap-1 rounded-full whitespace-nowrap"
+    class="inline-flex select-none items-center gap-1 overflow-clip rounded-full whitespace-nowrap"
     :class="classes"
   >
     <div
-      :class="[props.size == 'lg' ? 'max-h-6' : 'max-h-4']"
       v-if="$slots.prefix"
+      class="inline-flex shrink-0 items-center justify-center"
+      :class="iconSize"
     >
       <slot name="prefix"></slot>
     </div>
     <slot>{{ props.label?.toString() }}</slot>
     <div
-      :class="[props.size == 'lg' ? 'max-h-6' : 'max-h-4']"
       v-if="$slots.suffix"
+      class="inline-flex shrink-0 items-center justify-center"
+      :class="iconSize"
     >
       <slot name="suffix"></slot>
     </div>
@@ -29,56 +31,69 @@ const props = withDefaults(defineProps<BadgeProps>(), {
   variant: 'subtle',
 })
 
-const classes = computed(() => {
-  let solidClasses = {
-    gray: 'text-ink-white bg-surface-gray-7',
-    blue: 'text-ink-blue-1 bg-surface-blue-2',
-    green: 'text-ink-green-1 bg-surface-green-3',
-    orange: 'text-ink-amber-1 bg-surface-amber-2',
-    red: 'text-ink-red-1 bg-surface-red-4',
-  }[props.theme]
-
-  let subtleClasses = {
-    gray: 'text-ink-gray-6 bg-surface-gray-2',
-    blue: 'text-ink-blue-2 bg-surface-blue-2',
-    green: 'text-ink-green-3 bg-surface-green-2',
-    orange: 'text-ink-amber-3 bg-surface-amber-1',
-    red: 'text-ink-red-4 bg-surface-red-2',
-  }[props.theme]
-
-  let outlineClasses = {
-    gray: 'text-ink-gray-6 bg-transparent border border-outline-gray-1',
-    blue: 'text-ink-blue-2 bg-transparent border border-outline-blue-1',
-    green: 'text-ink-green-3 bg-transparent border border-outline-green-2',
-    orange: 'text-ink-amber-3 bg-transparent border border-outline-amber-2',
-    red: 'text-ink-red-4 bg-transparent border border-outline-red-2',
-  }[props.theme]
+// `orange` is kept as a deprecated alias for `amber`
+const theme = computed(() => (props.theme === 'orange' ? 'amber' : props.theme))
 
-  let ghostClasses = {
-    gray: 'text-ink-gray-6 bg-transparent',
-    blue: 'text-ink-blue-2 bg-transparent',
-    green: 'text-ink-green-3 bg-transparent',
-    orange: 'text-ink-amber-3 bg-transparent',
-    red: 'text-ink-red-4 bg-transparent',
-  }[props.theme]
+const classes = computed(() => {
+  // The semantic scale (Figma export → tailwind/generated/colors.json) is
+  // consistent across all themes — gray is the only exception (`-7` is its
+  // saturated step, since gray needs more headroom). Tailwind's JIT needs
+  // literal class names so the per-theme strings are inlined below.
+  //   surface/{color}-2  pale bg          surface/{color}-5  saturated bg
+  //   outline/{color}-2  pale border
+  //   ink/{color}-1      pale text        ink/{color}-4      saturated text
+  const themeClasses = {
+    gray: {
+      solid: 'text-ink-base bg-surface-gray-10',
+      subtle: 'text-ink-gray-6 bg-surface-gray-2',
+      outline: 'text-ink-gray-6 border border-outline-gray-2',
+      ghost: 'text-ink-gray-6',
+    },
+    blue: {
+      solid: 'text-ink-blue-1 bg-surface-blue-7',
+      subtle: 'text-ink-blue-8 bg-surface-blue-2',
+      outline: 'text-ink-blue-8 border border-outline-blue-3',
+      ghost: 'text-ink-blue-8',
+    },
+    green: {
+      solid: 'text-ink-green-1 bg-surface-green-7',
+      subtle: 'text-ink-green-8 bg-surface-green-2',
+      outline: 'text-ink-green-8 border border-outline-green-3',
+      ghost: 'text-ink-green-8',
+    },
+    amber: {
+      solid: 'text-ink-amber-1 bg-surface-amber-7',
+      subtle: 'text-ink-amber-8 bg-surface-amber-2',
+      outline: 'text-ink-amber-8 border border-outline-amber-3',
+      ghost: 'text-ink-amber-8',
+    },
+    red: {
+      solid: 'text-ink-red-1 bg-surface-red-7',
+      subtle: 'text-ink-red-8 bg-surface-red-2',
+      outline: 'text-ink-red-8 border border-outline-red-3',
+      ghost: 'text-ink-red-8',
+    },
+    violet: {
+      solid: 'text-ink-violet-1 bg-surface-violet-7',
+      subtle: 'text-ink-violet-8 bg-surface-violet-2',
+      outline: 'text-ink-violet-8 border border-outline-violet-3',
+      ghost: 'text-ink-violet-8',
+    },
+  }[theme.value]
 
-  let variantClasses = {
-    subtle: subtleClasses,
-    solid: solidClasses,
-    outline: outlineClasses,
-    ghost: ghostClasses,
-  }[props.variant]
+  const variantClasses = themeClasses[props.variant]
 
-  let sizeClasses = {
-    sm: 'h-4 text-xs px-1.5',
-    md: 'h-5 text-xs px-1.5',
-    lg: 'h-6 text-sm px-2',
-		xl: 'h-7 text-base px-2',
+  const sizeClasses = {
+    sm: 'h-4 px-1.5 text-xs',
+    md: 'h-5 px-1.5 text-xs',
+    lg: 'h-6 px-2 text-[13px] tracking-[0.02em]',
   }[props.size]
 
   return [variantClasses, sizeClasses]
 })
 
+const iconSize = computed(() => (props.size === 'lg' ? 'size-3' : 'size-2.5'))
+
 defineSlots<{
   /** Content shown before the badge label */
   prefix?: () => any
diff --git a/src/components/Badge/stories/CallMeta.vue b/src/components/Badge/stories/CallMeta.vue
new file mode 100644
index 000000000..54e00f14d
--- /dev/null
+++ b/src/components/Badge/stories/CallMeta.vue
@@ -0,0 +1,35 @@
+<script setup>
+import { Badge } from 'frappe-ui'
+</script>
+
+<template>
+  <div class="w-[28rem]">
+    <p class="mb-2 text-base-medium text-ink-gray-8">Outbound Call</p>
+    <div class="flex flex-wrap items-center gap-1.5">
+      <Badge>
+        <template #prefix>
+          <span class="lucide-calendar" aria-hidden="true" />
+        </template>
+        May 16, Friday
+      </Badge>
+      <Badge>
+        <template #prefix>
+          <span class="lucide-timer" aria-hidden="true" />
+        </template>
+        32:48
+      </Badge>
+      <Badge>
+        <template #prefix>
+          <span class="lucide-play" aria-hidden="true" />
+        </template>
+        Listen
+      </Badge>
+      <Badge>
+        <template #prefix>
+          <span class="lucide-sticky-note" aria-hidden="true" />
+        </template>
+        Note
+      </Badge>
+    </div>
+  </div>
+</template>
diff --git a/src/components/Badge/stories/EventStatus.vue b/src/components/Badge/stories/EventStatus.vue
new file mode 100644
index 000000000..53f64464c
--- /dev/null
+++ b/src/components/Badge/stories/EventStatus.vue
@@ -0,0 +1,16 @@
+<script setup>
+import { Badge } from 'frappe-ui'
+</script>
+
+<template>
+  <div class="w-96 rounded-r-md border-l-2 border-outline-gray-3 px-3 py-2 transition-colors hover:bg-surface-gray-1">
+    <Badge theme="red" size="md">
+      <template #prefix>
+        <span class="lucide-mail" aria-hidden="true" />
+      </template>
+      Awaiting response
+    </Badge>
+    <p class="mt-2 text-base-medium leading-relaxed text-ink-gray-8">Supply Chain Sync</p>
+    <p class="text-sm leading-relaxed text-ink-gray-6">2:30 PM - 3:00 PM</p>
+  </div>
+</template>
diff --git a/src/components/Badge/stories/ListStatus.vue b/src/components/Badge/stories/ListStatus.vue
new file mode 100644
index 000000000..2633cc527
--- /dev/null
+++ b/src/components/Badge/stories/ListStatus.vue
@@ -0,0 +1,91 @@
+<script setup>
+import { Badge } from 'frappe-ui'
+
+const leads = [
+  {
+    name: 'Acme Corp',
+    owner: 'Jane Cooper',
+    status: 'Qualified',
+    theme: 'green',
+    dotClass: 'bg-surface-green-7',
+    value: '$24.5k',
+  },
+  {
+    name: 'Globex',
+    owner: 'Sammy Well',
+    status: 'In Progress',
+    theme: 'blue',
+    dotClass: 'bg-surface-blue-7',
+    value: '$18.2k',
+  },
+  {
+    name: 'Initech',
+    owner: 'Brian Robinson',
+    status: 'On Hold',
+    theme: 'amber',
+    dotClass: 'bg-surface-amber-7',
+    value: '$9.8k',
+  },
+  {
+    name: 'Soylent',
+    owner: 'Matt Clinton',
+    status: 'Lost',
+    theme: 'red',
+    dotClass: 'bg-surface-red-7',
+    value: '$4.1k',
+  },
+  {
+    name: 'Umbrella',
+    owner: 'Jane Cooper',
+    status: 'New',
+    theme: 'gray',
+    dotClass: 'bg-surface-gray-8',
+    value: '$12.0k',
+  },
+]
+</script>
+
+<template>
+  <div
+    class="w-full max-w-[640px] overflow-hidden rounded-lg border border-outline-gray-1 bg-surface-base shadow-sm"
+  >
+    <div class="flex items-center justify-between border-b border-outline-gray-1 px-3 py-2.5">
+      <h3 class="m-0 text-base-medium text-ink-gray-8">Lead pipeline</h3>
+      <Badge theme="gray" variant="outline">5 leads</Badge>
+    </div>
+
+    <div
+      class="grid grid-cols-[minmax(0,1fr)_7.5rem_6.5rem_5rem] gap-3 border-b border-outline-gray-1 bg-surface-gray-1 px-3 py-1.5 text-sm-medium text-ink-gray-5"
+    >
+      <span>Company</span>
+      <span>Owner</span>
+      <span>Status</span>
+      <span>Value</span>
+    </div>
+
+    <div class="divide-y divide-outline-gray-1">
+      <div
+        v-for="lead in leads"
+        :key="lead.name"
+        class="grid grid-cols-[minmax(0,1fr)_7.5rem_6.5rem_5rem] items-center gap-3 px-3 py-2 transition-colors hover:bg-surface-gray-1"
+      >
+        <div class="flex min-w-0 items-center gap-2">
+          <div
+            class="flex size-6 shrink-0 items-center justify-center rounded bg-surface-gray-2 text-xs-medium text-ink-gray-6"
+          >
+            {{ lead.name.slice(0, 1) }}
+          </div>
+          <span class="truncate text-sm text-ink-gray-8">{{ lead.name }}</span>
+        </div>
+        <span class="truncate text-sm text-ink-gray-6">{{ lead.owner }}</span>
+        <Badge :theme="lead.theme" class="justify-self-start">
+          <template #prefix>
+            <span class="size-1 rounded-full" :class="lead.dotClass" />
+          </template>
+          {{ lead.status }}
+        </Badge>
+        <span class="text-sm-medium text-ink-gray-7">{{ lead.value }}</span>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/src/components/Badge/stories/Reactions.vue b/src/components/Badge/stories/Reactions.vue
new file mode 100644
index 000000000..bebc152e0
--- /dev/null
+++ b/src/components/Badge/stories/Reactions.vue
@@ -0,0 +1,33 @@
+<script setup>
+import { Badge } from 'frappe-ui'
+
+const reactions = [
+  { emoji: '😄', count: 12 },
+  { emoji: '🍩', count: 8 },
+  { emoji: '🔥', count: 7 },
+]
+</script>
+
+<template>
+  <div class="w-[28rem]">
+    <p class="text-base text-ink-gray-8">
+      The words breathing and ventilation are hyponyms, not synonyms, of
+      respiration.
+    </p>
+    <div class="mt-2 flex items-center gap-1.5">
+      <Badge v-for="r in reactions" :key="r.emoji" size="md">
+        <template #prefix>
+          <span class="text-sm leading-none">{{ r.emoji }}</span>
+        </template>
+        {{ r.count }}
+      </Badge>
+      <button
+        type="button"
+        class="inline-flex h-5 items-center justify-center rounded-full px-1.5 text-ink-gray-5 hover:bg-surface-gray-2"
+        aria-label="Add reaction"
+      >
+        <span class="lucide-smile-plus size-3.5" aria-hidden="true" />
+      </button>
+    </div>
+  </div>
+</template>
diff --git a/src/components/Badge/stories/RowTags.vue b/src/components/Badge/stories/RowTags.vue
new file mode 100644
index 000000000..96e588cc3
--- /dev/null
+++ b/src/components/Badge/stories/RowTags.vue
@@ -0,0 +1,39 @@
+<script setup>
+import { Badge } from 'frappe-ui'
+</script>
+
+<template>
+  <div class="flex w-full max-w-[640px] flex-col divide-y divide-outline-gray-1">
+    <div class="flex items-center gap-3 py-2.5">
+      <span class="lucide-circle size-4 text-ink-gray-4" aria-hidden="true" />
+      <span class="flex-1 text-base text-ink-gray-8">
+        Hyper-verge landing page
+      </span>
+      <div class="flex items-center gap-1.5">
+        <Badge theme="green">App</Badge>
+        <Badge theme="amber">Frappe</Badge>
+        <Badge>+2</Badge>
+      </div>
+      <Badge theme="red">
+        <template #prefix>
+          <span class="lucide-calendar" aria-hidden="true" />
+        </template>
+        23 Feb
+      </Badge>
+    </div>
+    <div class="flex items-center gap-3 py-2.5">
+      <span class="lucide-circle size-4 text-ink-gray-4" aria-hidden="true" />
+      <span class="flex-1 text-base text-ink-gray-8">Client feedback</span>
+      <div class="flex items-center gap-1.5">
+        <Badge theme="red">Opensource</Badge>
+        <Badge>+3</Badge>
+      </div>
+      <Badge theme="red">
+        <template #prefix>
+          <span class="lucide-calendar" aria-hidden="true" />
+        </template>
+        28 Feb
+      </Badge>
+    </div>
+  </div>
+</template>
diff --git a/src/components/Badge/stories/Themes.vue b/src/components/Badge/stories/Themes.vue
deleted file mode 100644
index 0ee989120..000000000
--- a/src/components/Badge/stories/Themes.vue
+++ /dev/null
@@ -1,10 +0,0 @@
-<script setup lang="ts">
-import { Badge } from 'frappe-ui'
-</script>
-
-<template>
-  <Badge theme="gray" size='lg'>Solid</Badge>
-  <Badge theme="blue" size='lg'>Subtle</Badge>
-  <Badge theme="green" size='lg'>Outline</Badge>
-  <Badge theme="orange" size='lg'>Ghost</Badge>
-</template>
diff --git a/src/components/Badge/stories/Variants.vue b/src/components/Badge/stories/Variants.vue
deleted file mode 100644
index 3b232c04d..000000000
--- a/src/components/Badge/stories/Variants.vue
+++ /dev/null
@@ -1,10 +0,0 @@
-<script setup lang="ts">
-import { Badge } from 'frappe-ui'
-</script>
-
-<template>
-  <Badge variant="solid" size="lg">Solid</Badge>
-  <Badge variant="subtle" size="lg">Subtle</Badge>
-  <Badge variant="outline" size="lg">Outline</Badge>
-  <Badge variant="ghost" size="lg">Ghost</Badge>
-</template>
diff --git a/src/components/Badge/types.ts b/src/components/Badge/types.ts
index 0d9417564..3adc627b9 100644
--- a/src/components/Badge/types.ts
+++ b/src/components/Badge/types.ts
@@ -4,7 +4,7 @@ interface Label {
 
 export interface BadgeProps {
   /** Visual color theme of the badge */
-  theme?: 'gray' | 'blue' | 'green' | 'orange' | 'red'
+  theme?: 'gray' | 'blue' | 'green' | 'amber' | 'red' | 'violet' | 'orange'
 
   /** Controls the size of the badge */
   size?: 'sm' | 'md' | 'lg'
@@ -15,4 +15,3 @@ export interface BadgeProps {
   /** Content displayed inside the badge */
   label?: Label | string | number
 }
-
diff --git a/src/components/Breadcrumbs/Breadcrumbs.md b/src/components/Breadcrumbs/Breadcrumbs.md
index ac8af211f..9550d043f 100644
--- a/src/components/Breadcrumbs/Breadcrumbs.md
+++ b/src/components/Breadcrumbs/Breadcrumbs.md
@@ -2,6 +2,10 @@
 
 A navigation aid that shows the user’s current location within a hierarchy and allows quick navigation to parent pages.
 
+## Playground
+
+<ClientOnly><BreadcrumbsBuilder /></ClientOnly>
+
 ## Example
 
 <ComponentPreview name="Breadcrumbs-Example" />
diff --git a/src/components/Breadcrumbs/Breadcrumbs.vue b/src/components/Breadcrumbs/Breadcrumbs.vue
index 1ca275fd4..8b22ad0ce 100644
--- a/src/components/Breadcrumbs/Breadcrumbs.vue
+++ b/src/components/Breadcrumbs/Breadcrumbs.vue
@@ -19,7 +19,7 @@
           v-if="item.route"
           :to="item.route"
           @click="item.onClick ? item.onClick() : null"
-          class="flex items-center rounded px-0.5 py-1 text-lg font-medium focus:outline-none focus-visible:ring-2 focus-visible:ring-outline-gray-3"
+          class="flex items-center rounded px-0.5 py-1 text-xl-medium"
           :class="[
             i == crumbs.length - 1
               ? 'min-w-0 text-ink-gray-9'
@@ -39,7 +39,7 @@
           v-else-if="item.href"
           :href="item.href"
           @click="item.onClick ? item.onClick() : null"
-          class="flex items-center rounded px-0.5 py-1 text-lg font-medium focus:outline-none focus-visible:ring-2 focus-visible:ring-outline-gray-3"
+          class="flex items-center rounded px-0.5 py-1 text-xl-medium"
           :class="[
             i == crumbs.length - 1
               ? 'min-w-0 text-ink-gray-9'
@@ -58,7 +58,7 @@
         <button
           v-else
           @click="item.onClick ? item.onClick() : null"
-          class="flex items-center rounded px-0.5 py-1 text-lg font-medium focus:outline-none focus-visible:ring-2 focus-visible:ring-outline-gray-3"
+          class="flex items-center rounded px-0.5 py-1 text-xl-medium"
           :class="[
             i == crumbs.length - 1
               ? 'min-w-0 text-ink-gray-9'
diff --git a/src/components/Button/Button.cy.ts b/src/components/Button/Button.cy.ts
index 858457a07..e8a123dbb 100644
--- a/src/components/Button/Button.cy.ts
+++ b/src/components/Button/Button.cy.ts
@@ -44,7 +44,23 @@ describe('<Button />', () => {
       },
     })
 
-    cy.get('button').should('have.class', 'h-10 text-lg')
+    cy.get('button').should('have.class', 'h-10')
+    cy.get('button').should('have.class', 'text-xl-medium')
+  })
+
+  it('renders xs size', () => {
+    cy.mount(Button, {
+      props: {
+        size: 'xs',
+        label: 'Extra Small Button',
+      },
+    })
+
+    cy.get('button')
+      .should('have.class', 'h-6')
+      .and('have.class', 'text-xs')
+      .and('have.class', 'px-1.5')
+      .and('have.class', 'rounded-3')
   })
 
   it('handles loading state', () => {
diff --git a/src/components/Button/Button.md b/src/components/Button/Button.md
index aa7fae1fc..5982d258b 100644
--- a/src/components/Button/Button.md
+++ b/src/components/Button/Button.md
@@ -2,20 +2,32 @@
 
 An interactive element used to trigger actions, submit forms, or navigate between views.
 
-## Variants
+## Playground
 
-<ComponentPreview name='Button-Variants' />
+<ClientOnly><ButtonBuilder /></ClientOnly>
 
-## Themes
+## Section controls
 
-<ComponentPreview name='Button-Themes' />
+<ComponentPreview name='Button-SectionControls' />
 
-## Sizes
+## Section action
 
-<ComponentPreview name='Button-Sizes' />
+<ComponentPreview name='Button-SectionAction' />
 
-## Icons
+## Selection toolbar
 
-<ComponentPreview name='Button-Icons' />
+<ComponentPreview name='Button-SelectionToolbar' />
+
+## Inline actions
+
+<ComponentPreview name='Button-InlineActions' />
+
+## Stacked actions
+
+<ComponentPreview name='Button-StackedActions' />
+
+## Card actions
+
+<ComponentPreview name='Button-LiveClassCard' />
 
 <!-- @include: ./Button.api.md -->
diff --git a/src/components/Button/Button.vue b/src/components/Button/Button.vue
index abb9ac3ec..79c01e20f 100644
--- a/src/components/Button/Button.vue
+++ b/src/components/Button/Button.vue
@@ -66,13 +66,13 @@ export default defineComponent({
     )
 
     const slotClasses = computed(
-      () => ({ xs: 'h-4', sm: 'h-4', md: 'h-4.5', lg: 'h-5' })[props.size],
+      () => ({ xs: 'h-3.5', sm: 'h-4', md: 'h-4.5', lg: 'h-5' })[props.size],
     )
 
     const lucideSlotClasses = computed(
       () =>
         ({
-          xs: 'size-4',
+          xs: 'size-3.5',
           sm: 'size-4',
           md: 'size-4.5',
           lg: 'size-5',
@@ -81,42 +81,42 @@ export default defineComponent({
 
     const buttonClasses = computed(() => {
       const solidClasses = {
-        gray: 'text-ink-white bg-surface-gray-7 hover:bg-surface-gray-6 active:bg-surface-gray-5',
-        blue: 'text-ink-white bg-blue-500 hover:bg-surface-blue-3 active:bg-blue-700',
+        gray: 'text-ink-base bg-surface-gray-10 hover:bg-surface-gray-9 active:bg-surface-gray-8',
+        blue: 'text-ink-base bg-blue-500 hover:bg-surface-blue-3 active:bg-blue-700',
         green:
-          'text-ink-white bg-surface-green-3 hover:bg-green-700 active:bg-green-800',
-        red: 'text-ink-white bg-surface-red-5 hover:bg-surface-red-6 active:bg-surface-red-7',
+          'text-ink-base bg-surface-green-3 hover:bg-green-700 active:bg-green-800',
+        red: 'text-ink-base bg-surface-red-7 hover:bg-surface-red-8 active:bg-surface-red-9',
       }[props.theme]
 
       const subtleClasses = {
         gray: 'text-ink-gray-8 bg-surface-gray-2 hover:bg-surface-gray-3 active:bg-surface-gray-4',
-        blue: 'text-ink-blue-3 bg-surface-blue-2 hover:bg-blue-200 active:bg-blue-300',
+        blue: 'text-ink-blue-6 bg-surface-blue-2 hover:bg-blue-200 active:bg-blue-300',
         green:
           'text-green-800 bg-surface-green-2 hover:bg-green-200 active:bg-green-300',
         red: 'text-red-700 bg-surface-red-2 hover:bg-surface-red-3 active:bg-surface-red-4',
       }[props.theme]
 
       const outlineClasses = {
-        gray: 'text-ink-gray-8 bg-surface-white bg-surface-white border border-outline-gray-2 hover:border-outline-gray-3 active:border-outline-gray-3 active:bg-surface-gray-4',
-        blue: 'text-ink-blue-3 bg-surface-white border border-outline-blue-1 hover:border-blue-400 active:border-blue-400 active:bg-blue-300',
+        gray: 'text-ink-gray-8 bg-surface-base bg-surface-base border border-outline-gray-2 hover:border-outline-gray-3 active:border-outline-gray-3 active:bg-surface-gray-4',
+        blue: 'text-ink-blue-6 bg-surface-base border border-outline-blue-1 hover:border-blue-400 active:border-blue-400 active:bg-blue-300',
         green:
-          'text-green-800 bg-surface-white border border-outline-green-2 hover:border-green-500 active:border-green-500 active:bg-green-300',
-        red: 'text-red-700 bg-surface-white border border-outline-red-1 hover:border-outline-red-2 active:border-outline-red-2 active:bg-surface-red-3',
+          'text-green-800 bg-surface-base border border-outline-green-3 hover:border-green-500 active:border-green-500 active:bg-green-300',
+        red: 'text-red-700 bg-surface-base border border-outline-red-1 hover:border-outline-red-3 active:border-outline-red-3 active:bg-surface-red-3',
       }[props.theme]
 
       const ghostClasses = {
         gray: 'text-ink-gray-8 bg-transparent hover:bg-surface-gray-3 active:bg-surface-gray-4',
-        blue: 'text-ink-blue-3 bg-transparent hover:bg-blue-200 active:bg-blue-300',
+        blue: 'text-ink-blue-6 bg-transparent hover:bg-blue-200 active:bg-blue-300',
         green:
           'text-green-800 bg-transparent hover:bg-green-200 active:bg-green-300',
         red: 'text-red-700 bg-transparent hover:bg-surface-red-3 active:bg-surface-red-4',
       }[props.theme]
 
       const focusClasses = {
-        gray: 'focus-visible:ring focus-visible:ring-outline-gray-3',
-        blue: 'focus-visible:ring focus-visible:ring-blue-400',
-        green: 'focus-visible:ring focus-visible:ring-outline-green-2',
-        red: 'focus-visible:ring focus-visible:ring-outline-red-2',
+        gray: '', // global :focus-visible ring
+        blue: 'focus-visible:focus-ring-blue',
+        green: 'focus-visible:focus-ring-green',
+        red: 'focus-visible:focus-ring-red',
       }[props.theme]
 
       const variantClasses = {
@@ -135,42 +135,42 @@ export default defineComponent({
           'bg-surface-gray-2 text-ink-gray-4 border border-outline-gray-2',
         'gray-ghost': 'text-ink-gray-4',
 
-        'blue-solid': 'bg-blue-300 text-ink-white',
+        'blue-solid': 'bg-blue-300 text-ink-base',
         'blue-subtle': 'bg-surface-blue-2 text-ink-blue-link',
         'blue-outline':
           'bg-surface-blue-2 text-ink-blue-link border border-outline-blue-1',
         'blue-ghost': 'text-ink-blue-link',
 
-        'green-solid': 'bg-surface-green-2 text-ink-green-2',
-        'green-subtle': 'bg-surface-green-2 text-ink-green-2',
+        'green-solid': 'bg-surface-green-2 text-ink-green-5',
+        'green-subtle': 'bg-surface-green-2 text-ink-green-5',
         'green-outline':
-          'bg-surface-green-2 text-ink-green-2 border border-outline-green-2',
-        'green-ghost': 'text-ink-green-2',
+          'bg-surface-green-2 text-ink-green-5 border border-outline-green-3',
+        'green-ghost': 'text-ink-green-5',
 
-        'red-solid': 'bg-surface-red-2 text-ink-red-2',
-        'red-subtle': 'bg-surface-red-2 text-ink-red-2',
+        'red-solid': 'bg-surface-red-2 text-ink-red-5',
+        'red-subtle': 'bg-surface-red-2 text-ink-red-5',
         'red-outline':
-          'bg-surface-red-2 text-ink-red-2 border border-outline-red-1',
-        'red-ghost': 'text-ink-red-2',
+          'bg-surface-red-2 text-ink-red-5 border border-outline-red-1',
+        'red-ghost': 'text-ink-red-5',
       }
       const disabledClasses = disabledClassesMap[themeVariant]
 
       const sizeClasses = isIconButton.value
         ? {
-            xs: 'h-6 w-6 rounded',
-            sm: 'h-7 w-7 rounded',
-            md: 'h-8 w-8 rounded',
-            lg: 'h-10 w-10 rounded-md',
+            xs: 'h-6 w-6 rounded-3',
+            sm: 'h-7 w-7 rounded-4',
+            md: 'h-8 w-8 rounded-4',
+            lg: 'h-10 w-10 rounded-5',
           }[props.size]
         : {
-            xs: 'h-6 text-sm px-1.5 rounded',
-            sm: 'h-7 text-base px-2 rounded',
-            md: 'h-8 text-base font-medium px-2.5 rounded',
-            lg: 'h-10 text-lg font-medium px-3 rounded-md',
+            xs: 'h-6 text-xs px-1.5 rounded-3',
+            sm: 'h-7 text-base px-2 rounded-4',
+            md: 'h-8 text-base-medium px-2.5 rounded-4',
+            lg: 'h-10 text-xl-medium px-3 rounded-5',
           }[props.size]
 
       return [
-        'inline-flex items-center justify-center gap-2 transition-colors focus:outline-none shrink-0',
+        'inline-flex items-center justify-center gap-2 transition-colors shrink-0',
         // Only an explicit `disabled` dims the button. A `loading` button keeps
         // its normal look (it's still non-interactive via the native `disabled`
         // attr below); `pointer-events-none` suppresses hover/active visuals so
@@ -240,7 +240,8 @@ export default defineComponent({
         // spinner inherits the button's text color.
         return h(Spinner, {
           class: {
-            'size-4': props.size === 'xs' || props.size === 'sm',
+            'size-3.5': props.size === 'xs',
+            'size-4': props.size === 'sm',
             'size-4.5': props.size === 'md',
             'size-5': props.size === 'lg',
           },
diff --git a/src/components/Button/stories/Icons.vue b/src/components/Button/stories/Icons.vue
deleted file mode 100644
index e7fc2d01b..000000000
--- a/src/components/Button/stories/Icons.vue
+++ /dev/null
@@ -1,34 +0,0 @@
-<script setup>
-import { Button, KeyboardShortcut } from 'frappe-ui'
-</script>
-
-<template>
-  <Button>
-    <template #icon>
-      <LucideBolt class="size-4" />
-    </template>
-  </Button>
-
-  <Button>
-    <template #prefix>
-      <LucideDownload class="size-4" />
-    </template>
-    Download
-  </Button>
-
-  <Button>
-    <template #suffix>
-      <LucideArrowRight class="size-4" />
-    </template>
-    Get Started
-  </Button>
-
-  <Button>
-    Discover
-    <template #suffix>
-      <KeyboardShortcut combo="Mod+K" :show-plus="false" />
-    </template>
-  </Button>
-
-  <Button :loading="true"> Fetching </Button>
-</template>
diff --git a/src/components/Button/stories/InlineActions.vue b/src/components/Button/stories/InlineActions.vue
new file mode 100644
index 000000000..b589437d9
--- /dev/null
+++ b/src/components/Button/stories/InlineActions.vue
@@ -0,0 +1,10 @@
+<script setup>
+import { Button } from 'frappe-ui'
+</script>
+
+<template>
+  <div class="flex items-center gap-2">
+    <Button>Join</Button>
+    <Button variant="solid">Reschedule</Button>
+  </div>
+</template>
diff --git a/src/components/Button/stories/LiveClassCard.vue b/src/components/Button/stories/LiveClassCard.vue
new file mode 100644
index 000000000..91488c948
--- /dev/null
+++ b/src/components/Button/stories/LiveClassCard.vue
@@ -0,0 +1,34 @@
+<script setup>
+import { Button } from 'frappe-ui'
+</script>
+
+<template>
+  <div
+    class="flex w-96 flex-col gap-6 rounded-6 bg-surface-base p-4 shadow-[0px_0px_0.75px_rgba(0,0,0,0.16),0px_2px_2.5px_rgba(0,0,0,0.14)]"
+  >
+    <div class="flex flex-col gap-5">
+      <div class="flex flex-col gap-3">
+        <p class="text-lg-semibold text-ink-gray-7">Frappe january - 2023</p>
+        <div class="flex flex-col gap-3">
+          <div class="flex items-center gap-2 text-base text-ink-gray-7">
+            <span class="lucide-calendar size-4" aria-hidden="true" />
+            <span>Wed, Dec 27, 2023</span>
+          </div>
+          <div class="flex items-center gap-2 text-base text-ink-gray-7">
+            <span class="lucide-clock size-4" aria-hidden="true" />
+            <span>03:45 PM - 04:15 PM (30 min)</span>
+          </div>
+        </div>
+      </div>
+      <p class="text-base leading-normal text-ink-gray-7">
+        Digital products are more abstract and complex than any product we’v…
+      </p>
+    </div>
+    <div class="flex items-center gap-2">
+      <Button class="flex-1">Start</Button>
+      <Button variant="solid" class="flex-1" icon-left="lucide-video">
+        Join
+      </Button>
+    </div>
+  </div>
+</template>
diff --git a/src/components/Button/stories/SectionAction.vue b/src/components/Button/stories/SectionAction.vue
new file mode 100644
index 000000000..73114e429
--- /dev/null
+++ b/src/components/Button/stories/SectionAction.vue
@@ -0,0 +1,17 @@
+<script setup>
+import { Button } from 'frappe-ui'
+</script>
+
+<template>
+  <div class="flex w-full max-w-[352px] items-center gap-2 p-3">
+    <Button
+      variant="ghost"
+      icon-left="lucide-chevron-down"
+      class="-ml-2 font-medium"
+    >
+      Contacts
+    </Button>
+    <div class="flex-1" />
+    <Button icon-left="lucide-plus">Add contact</Button>
+  </div>
+</template>
diff --git a/src/components/Button/stories/SectionControls.vue b/src/components/Button/stories/SectionControls.vue
new file mode 100644
index 000000000..caf7641e5
--- /dev/null
+++ b/src/components/Button/stories/SectionControls.vue
@@ -0,0 +1,28 @@
+<script setup>
+import { Button } from 'frappe-ui'
+</script>
+
+<template>
+  <div class="flex w-full max-w-[1100px] items-center gap-8">
+    <div class="flex flex-1 items-center gap-1.5">
+      <Button>Lead owner</Button>
+      <Button icon-right="lucide-chevron-down">Status</Button>
+      <Button icon-right="lucide-chevron-down">Organisation</Button>
+    </div>
+    <div class="flex items-center gap-2">
+      <Button icon-left="lucide-eye-off">Columns</Button>
+      <Button icon-left="lucide-list-filter">
+        Filter
+        <template #suffix>
+          <span
+            class="inline-flex h-4.5 items-center justify-center rounded-1 bg-surface-base px-1.5 text-xs text-ink-gray-7 shadow-sm ring-1 ring-black/5"
+          >
+            1
+          </span>
+        </template>
+      </Button>
+      <Button icon-left="lucide-arrow-up-down">Sort</Button>
+      <Button icon="lucide-ellipsis" />
+    </div>
+  </div>
+</template>
diff --git a/src/components/Button/stories/SelectionToolbar.vue b/src/components/Button/stories/SelectionToolbar.vue
new file mode 100644
index 000000000..1005f50e7
--- /dev/null
+++ b/src/components/Button/stories/SelectionToolbar.vue
@@ -0,0 +1,20 @@
+<script setup>
+import { Button } from 'frappe-ui'
+</script>
+
+<template>
+  <div
+    class="inline-flex items-center gap-3.5 rounded-6 bg-surface-base p-1.5 shadow-[0px_0px_1.5px_rgba(0,0,0,0.16),0px_2px_5px_rgba(0,0,0,0.14)]"
+  >
+    <Button variant="ghost" icon-left="lucide-x">2 selected</Button>
+    <div class="h-5 w-px bg-outline-gray-1" />
+    <div class="flex items-center gap-1">
+      <Button variant="ghost" icon-left="lucide-download">Download</Button>
+      <Button variant="ghost" icon-left="lucide-corner-up-right">Move</Button>
+      <Button variant="ghost" icon-left="lucide-share-2">Share</Button>
+      <Button variant="ghost" theme="red" icon-left="lucide-trash-2">
+        Delete
+      </Button>
+    </div>
+  </div>
+</template>
diff --git a/src/components/Button/stories/Sizes.vue b/src/components/Button/stories/Sizes.vue
deleted file mode 100644
index 90decfc49..000000000
--- a/src/components/Button/stories/Sizes.vue
+++ /dev/null
@@ -1,10 +0,0 @@
-<script setup>
-import { Button } from 'frappe-ui'
-</script>
-
-<template>
-  <Button size="xs">Button</Button>
-  <Button size="sm">Button</Button>
-  <Button size="md">Button</Button>
-  <Button size="lg">Button</Button>
-</template>
diff --git a/src/components/Button/stories/StackedActions.vue b/src/components/Button/stories/StackedActions.vue
new file mode 100644
index 000000000..8fb214f34
--- /dev/null
+++ b/src/components/Button/stories/StackedActions.vue
@@ -0,0 +1,10 @@
+<script setup>
+import { Button } from 'frappe-ui'
+</script>
+
+<template>
+  <div class="flex w-58 flex-col items-stretch gap-2">
+    <Button class="w-full">Join</Button>
+    <Button variant="solid" class="w-full">Reschedule</Button>
+  </div>
+</template>
diff --git a/src/components/Button/stories/Themes.vue b/src/components/Button/stories/Themes.vue
deleted file mode 100644
index 2b4971666..000000000
--- a/src/components/Button/stories/Themes.vue
+++ /dev/null
@@ -1,8 +0,0 @@
-<script setup>
-import { Button } from 'frappe-ui'
-</script>
-
-<template>
-  <Button theme="gray">Gray</Button>
-  <Button theme="red">Red</Button>
-</template>
diff --git a/src/components/Button/stories/Variants.vue b/src/components/Button/stories/Variants.vue
deleted file mode 100644
index 6099b87bc..000000000
--- a/src/components/Button/stories/Variants.vue
+++ /dev/null
@@ -1,10 +0,0 @@
-<script setup>
-import { Button } from 'frappe-ui'
-</script>
-
-<template>
-  <Button variant="solid">Solid</Button>
-  <Button variant="subtle">Subtle</Button>
-  <Button variant="outline">Outline</Button>
-  <Button variant="ghost">Ghost</Button>
-</template>
diff --git a/src/components/Calendar/Calendar.vue b/src/components/Calendar/Calendar.vue
index db5cda1c0..e24cf7a83 100644
--- a/src/components/Calendar/Calendar.vue
+++ b/src/components/Calendar/Calendar.vue
@@ -28,7 +28,7 @@
             <template #target="{ togglePopover }">
               <Button
                 variant="ghost"
-                class="text-lg font-medium text-ink-gray-7"
+                class="text-xl-medium text-ink-gray-7"
                 :label="currentMonthYear"
                 iconRight="lucide-chevron-down"
                 @click="togglePopover"
diff --git a/src/components/Calendar/CalendarDaily.vue b/src/components/Calendar/CalendarDaily.vue
index c15e6ddd3..721c1a659 100644
--- a/src/components/Calendar/CalendarDaily.vue
+++ b/src/components/Calendar/CalendarDaily.vue
@@ -63,7 +63,7 @@
         <div class="grid h-full w-20 grid-cols-1">
           <span
             v-for="time in 24"
-            class="flex h-[72px] items-end justify-center text-center text-sm font-normal text-ink-gray-5"
+            class="flex h-[72px] items-end justify-center text-center text-sm text-ink-gray-5"
             :style="{ height: `${hourHeight}px` }"
           />
         </div>
diff --git a/src/components/Calendar/CalendarMonthEvent.vue b/src/components/Calendar/CalendarMonthEvent.vue
index a5b612b82..ab05ee16f 100644
--- a/src/components/Calendar/CalendarMonthEvent.vue
+++ b/src/components/Calendar/CalendarMonthEvent.vue
@@ -18,7 +18,7 @@
           <div v-if="config.showIcon && eventIcons[props.event.type]">
             <component :is="eventIcons[props.event.type]" class="h-4 w-4 text-black" />
           </div>
-          <p class="text-sm font-medium truncate" :class="{ italic: !props.event.title }">
+          <p class="text-sm-medium truncate" :class="{ italic: !props.event.title }">
             {{ props.event.title || '[No title]' }}
           </p>
         </div>
diff --git a/src/components/Calendar/CalendarMonthly.vue b/src/components/Calendar/CalendarMonthly.vue
index 9f6ffd17b..b7da3a6e7 100644
--- a/src/components/Calendar/CalendarMonthly.vue
+++ b/src/components/Calendar/CalendarMonthly.vue
@@ -44,8 +44,8 @@
                 class="cursor-pointer"
                 :class="[
                   date.toDateString() === new Date().toDateString()
-                    ? 'flex items-center justify-center bg-surface-gray-7 text-ink-white rounded size-[25px]'
-                    : 'bg-surface-white ',
+                    ? 'flex items-center justify-center bg-surface-gray-10 text-ink-base rounded size-[25px]'
+                    : 'bg-surface-base ',
                   isCurrentMonth(date) ? 'text-ink-gray-6' : 'text-ink-gray-4',
                 ]"
                 @click.stop="
diff --git a/src/components/Calendar/CalendarWeekDayEvent.vue b/src/components/Calendar/CalendarWeekDayEvent.vue
index df3f756b7..1219fb3f5 100644
--- a/src/components/Calendar/CalendarWeekDayEvent.vue
+++ b/src/components/Calendar/CalendarWeekDayEvent.vue
@@ -29,7 +29,7 @@
             <div class="flex w-fit flex-col gap-0.5 overflow-hidden">
               <p
                 ref="eventTitleRef"
-                class="text-sm font-medium event-title"
+                class="text-sm-medium event-title"
                 :class="lineClampClass"
               >
                 {{ props.event.title || '[No title]' }}
@@ -37,7 +37,7 @@
               <p
                 ref="eventTimeRef"
                 v-if="!props.event.isFullDay"
-                class="text-xs font-normal event-subtitle"
+                class="text-xs event-subtitle"
               >
                 {{
                   formattedDuration(updatedEvent.fromTime, updatedEvent.toTime, config.timeFormat)
diff --git a/src/components/Calendar/CalendarWeekly.vue b/src/components/Calendar/CalendarWeekly.vue
index 45bca9eea..7a5b0a15c 100644
--- a/src/components/Calendar/CalendarWeekly.vue
+++ b/src/components/Calendar/CalendarWeekly.vue
@@ -12,7 +12,7 @@
           {{ isToday(date) ? daysList[date.getDay()] : parseDateWithDay(date) }}
           <span
             v-if="isToday(date)"
-            class="inline-flex items-center justify-center bg-surface-gray-7 text-ink-white rounded size-[25px]"
+            class="inline-flex items-center justify-center bg-surface-gray-10 text-ink-base rounded size-[25px]"
           >
             {{ date.getDate() }}
           </span>
@@ -87,7 +87,7 @@
         <div class="grid w-20 grid-cols-1">
           <span
             v-for="time in 24"
-            class="flex items-end justify-center text-center text-sm font-normal text-ink-gray-5"
+            class="flex items-end justify-center text-center text-sm text-ink-gray-5"
             :style="{ height: `${hourHeight}px` }"
           />
         </div>
diff --git a/src/components/Calendar/EventModalContent.vue b/src/components/Calendar/EventModalContent.vue
index b38ebb0e3..cdc656082 100644
--- a/src/components/Calendar/EventModalContent.vue
+++ b/src/components/Calendar/EventModalContent.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="w-80 rounded-lg bg-surface-modal text-ink-gray-8 p-4">
+  <div class="w-80 rounded-lg bg-surface-elevation-2 text-ink-gray-8 p-4">
     <div class="flex flex-row-reverse gap-2">
       <span class="cursor-pointer" @click.stop="$emit('close')">
         <span class="lucide-x size-4" aria-hidden="true" />
@@ -12,31 +12,31 @@
       </span>
     </div>
     <div class="flex flex-col gap-5">
-      <div class="flex justify-between text-xl font-semibold">
+      <div class="flex justify-between text-3xl-semibold">
         <span>{{ calendarEvent.title || 'New Event' }}</span>
       </div>
       <div class="flex flex-col gap-4">
         <div class="flex items-center gap-2">
           <span class="lucide-calendar size-4" aria-hidden="true" />
-          <span class="text-sm font-normal">
+          <span class="text-sm">
             {{ parseDateEventPopupFormat(date) }}
           </span>
         </div>
         <div class="flex items-center gap-2" v-if="calendarEvent.participant">
           <span class="lucide-user size-4" aria-hidden="true" />
-          <span class="text-sm font-normal">
+          <span class="text-sm">
             {{ calendarEvent.participant }}
           </span>
         </div>
         <div class="flex items-center gap-2" v-if="calendarEvent.fromTime && calendarEvent.toTime">
           <span class="lucide-clock size-4" aria-hidden="true" />
-          <span class="text-sm font-normal">
+          <span class="text-sm">
             {{ calendarEvent.fromTime }} - {{ calendarEvent.toTime }}
           </span>
         </div>
         <div class="flex items-center gap-2" v-if="calendarEvent.venue">
           <span class="lucide-map-pin size-4" aria-hidden="true" />
-          <span class="text-sm font-normal">
+          <span class="text-sm">
             {{ calendarEvent.venue }}
           </span>
         </div>
diff --git a/src/components/Calendar/ShowMoreCalendarEvent.vue b/src/components/Calendar/ShowMoreCalendarEvent.vue
index 85243f310..54518718b 100644
--- a/src/components/Calendar/ShowMoreCalendarEvent.vue
+++ b/src/components/Calendar/ShowMoreCalendarEvent.vue
@@ -13,7 +13,7 @@
   </CalendarMonthEvent>
   <button
     v-if="totalEventsCount > 2"
-    class="w-fit rounded-sm p-px px-2 mx-px text-base font-medium text-ink-gray-6 hover:bg-surface-gray-1"
+    class="w-fit rounded-sm p-px px-2 mx-px text-base-medium text-ink-gray-6 hover:bg-surface-gray-1"
     @click.stop="emit('showMoreEvents')"
   >
     {{ totalEventsCount - 2 }} more
diff --git a/src/components/Calendar/stories/CustomHeader.vue b/src/components/Calendar/stories/CustomHeader.vue
index 09332d552..2604d62db 100644
--- a/src/components/Calendar/stories/CustomHeader.vue
+++ b/src/components/Calendar/stories/CustomHeader.vue
@@ -111,7 +111,7 @@ const events = ref([
               <template #target="{ togglePopover }">
                 <Button
                   variant="ghost"
-                  class="text-lg font-medium text-ink-gray-7"
+                  class="text-xl-medium text-ink-gray-7"
                   :label="headerProps.currentMonthYear"
                   iconRight="lucide-chevron-down"
                   @click="togglePopover"
diff --git a/src/components/Card.vue b/src/components/Card.vue
index a02edd1d4..4ceb6060c 100644
--- a/src/components/Card.vue
+++ b/src/components/Card.vue
@@ -5,7 +5,7 @@
         <div class="flex items-center space-x-2" v-if="$slots['actions-left']">
           <slot name="actions-left"></slot>
         </div>
-        <h2 class="text-xl font-semibold">{{ title }}</h2>
+        <h2 class="text-3xl-semibold">{{ title }}</h2>
       </div>
       <div class="flex items-center space-x-2" v-if="$slots['actions']">
         <slot name="actions"></slot>
diff --git a/src/components/Charts/ECharts.vue b/src/components/Charts/ECharts.vue
index c919c6eea..3a88f1c52 100644
--- a/src/components/Charts/ECharts.vue
+++ b/src/components/Charts/ECharts.vue
@@ -59,7 +59,7 @@ watch(
   <div ref="chartDiv" v-show="!error" dir="ltr" :class="chartClass"></div>
   <div
     v-show="error"
-    class="flex h-full w-full items-center justify-center text-center text-ink-red-3"
+    class="flex h-full w-full items-center justify-center text-center text-ink-red-6"
   >
     Error: {{ error }}
   </div>
diff --git a/src/components/Charts/NumberChart.vue b/src/components/Charts/NumberChart.vue
index c45d8baa7..f8cdd35c0 100644
--- a/src/components/Charts/NumberChart.vue
+++ b/src/components/Charts/NumberChart.vue
@@ -1,12 +1,12 @@
 <template>
   <div
-    class="flex max-h-[140px] items-center gap-2 overflow-hidden bg-surface-white text-ink-gray-8 px-6 pt-5"
+    class="flex max-h-[140px] items-center gap-2 overflow-hidden bg-surface-base text-ink-gray-8 px-6 pt-5"
     :class="config.delta ? 'pb-6' : 'pb-3'"
   >
     <slot name="body">
       <div class="flex w-full flex-col">
         <slot name="title">
-          <span class="truncate text-sm font-medium text-ink-gray-5">
+          <span class="truncate text-sm-medium text-ink-gray-5">
             {{ config.title }}
           </span>
         </slot>
@@ -25,15 +25,15 @@
         <slot name="delta" v-bind="{ formatValue }">
           <div
             v-if="config.delta"
-            class="flex items-center gap-0.5 text-xs font-medium"
+            class="flex items-center gap-0.5 text-xs-medium"
             :class="[
               config.negativeIsBetter
                 ? config.delta >= 0
-                  ? 'text-ink-red-4'
-                  : 'text-ink-green-3'
+                  ? 'text-ink-red-8'
+                  : 'text-ink-green-6'
                 : config.delta >= 0
-                  ? 'text-ink-green-3'
-                  : 'text-ink-red-4',
+                  ? 'text-ink-green-6'
+                  : 'text-ink-red-8',
             ]"
           >
             <span class="">
diff --git a/src/components/Charts/eChartOptions.ts b/src/components/Charts/eChartOptions.ts
index 6c34ff765..77d885332 100644
--- a/src/components/Charts/eChartOptions.ts
+++ b/src/components/Charts/eChartOptions.ts
@@ -175,8 +175,8 @@ function getXAxisOptions(config: AxisChartConfig) {
           align: isRTL ? 'left' : 'right',
           verticalAlign: 'bottom',
           padding: [0, 0, 26, 0],
-          backgroundColor: 'var(--surface-white)',
-          borderColor: 'var(--surface-white)',
+          backgroundColor: 'var(--surface-base)',
+          borderColor: 'var(--surface-base)',
           color: 'var(--ink-gray-8)',
           borderWidth: 4,
         },
@@ -275,8 +275,8 @@ function getYAxisOptions(config: AxisChartConfig) {
           align: isRTL ? 'right' : 'left',
           verticalAlign: 'top',
           padding: isRTL ? [0, -2, 0, 0] : [0, 0, 0, -2],
-          backgroundColor: 'var(--surface-white)',
-          borderColor: 'var(--surface-white)',
+          backgroundColor: 'var(--surface-base)',
+          borderColor: 'var(--surface-base)',
           color: 'var(--ink-gray-8)',
           borderWidth: 4,
         },
@@ -326,8 +326,8 @@ function getYAxisOptions(config: AxisChartConfig) {
       align: isRTL ? 'left' : 'right',
       verticalAlign: 'top',
       padding: isRTL ? [0, 0, 0, 5] : [0, 5, 0, 0],
-      backgroundColor: 'var(--surface-white)',
-      borderColor: 'var(--surface-white)',
+      backgroundColor: 'var(--surface-base)',
+      borderColor: 'var(--surface-base)',
       color: 'var(--ink-gray-8)',
     },
     nameGap: 6,
diff --git a/src/components/Checkbox/Checkbox.md b/src/components/Checkbox/Checkbox.md
index 15b26caf4..7d3671de7 100644
--- a/src/components/Checkbox/Checkbox.md
+++ b/src/components/Checkbox/Checkbox.md
@@ -2,6 +2,10 @@
 
 Allows users to select or deselect an option, commonly used in forms and settings where multiple choices are available.
 
+## Playground
+
+<ClientOnly><CheckboxBuilder /></ClientOnly>
+
 <ComponentPreview name="Checkbox-Default" layout="stacked" />
 
 ## Sizes
@@ -20,4 +24,28 @@ error stack below the row, indented under the label region.
 
 <ComponentPreview name="Checkbox-States" />
 
+## Group
+
+Stack related options into a vertical settings group.
+
+<ComponentPreview name="Checkbox-Group" />
+
+## With description
+
+Pair each option with helper text to clarify its effect.
+
+<ComponentPreview name="Checkbox-WithDescription" />
+
+## Horizontal group
+
+Wrap multiple options inline under a section title.
+
+<ComponentPreview name="Checkbox-HorizontalGroup" />
+
+## Setting row
+
+Compose a checkbox group as the value side of a label/value row.
+
+<ComponentPreview name="Checkbox-SettingRow" />
+
 <!-- @include: ./Checkbox.api.md -->
diff --git a/src/components/Checkbox/Checkbox.vue b/src/components/Checkbox/Checkbox.vue
index d8e44533c..5414a111d 100644
--- a/src/components/Checkbox/Checkbox.vue
+++ b/src/components/Checkbox/Checkbox.vue
@@ -5,7 +5,7 @@
       :class="rowClasses"
     >
       <input
-        class="rounded-sm mt-[1px] bg-surface-white"
+        class="rounded-sm mt-[1px] bg-surface-base"
         :class="inputClasses"
         type="checkbox"
         :disabled="disabled"
@@ -109,7 +109,7 @@ const labelClasses = computed(() => {
   return [
     {
       sm: 'text-base',
-      md: 'text-lg',
+      md: 'text-xl',
     }[props.size],
     'font-medium',
     props.disabled ? 'text-ink-gray-4' : 'text-ink-gray-8',
@@ -128,14 +128,14 @@ const rowClasses = computed(() => {
 
 const inputClasses = computed(() => {
   let baseClasses = props.disabled
-    ? 'border-outline-gray-2 bg-surface-menu-bar text-ink-gray-3'
-    : 'border-outline-gray-4 text-ink-gray-9 hover:border-outline-gray-5 focus:ring-offset-0 focus:border-outline-gray-8 active:border-outline-gray-6 transition'
+    ? 'border-outline-gray-2 bg-surface-sidebar text-ink-gray-3'
+    : 'border-outline-gray-4 text-ink-gray-9 hover:border-outline-gray-7 focus:ring-offset-0 focus:border-outline-gray-8 active:border-outline-gray-6 transition'
 
   let interactionClasses = props.disabled
     ? ''
     : props.padding
       ? 'focus:ring-0'
-      : 'hover:shadow-sm focus:ring-0 focus-visible:ring-2 focus-visible:ring-outline-gray-3 active:bg-surface-gray-2'
+      : 'hover:shadow-sm focus:ring-0 active:bg-surface-gray-2'
 
   let sizeClasses = {
     sm: 'w-3.5 h-3.5',
diff --git a/src/components/Checkbox/stories/Group.vue b/src/components/Checkbox/stories/Group.vue
new file mode 100644
index 000000000..04b5d97ae
--- /dev/null
+++ b/src/components/Checkbox/stories/Group.vue
@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import { reactive } from 'vue'
+import { Checkbox } from 'frappe-ui'
+
+const settings = reactive({
+  paymentDays: true,
+  taxApplicable: true,
+  deductFullTax: false,
+  roundToInteger: false,
+  doNotInclude: true,
+  removeIfZero: false,
+})
+</script>
+
+<template>
+  <div class="flex flex-col gap-1 items-start w-80">
+    <Checkbox v-model="settings.paymentDays" label="Depends on payment days" />
+    <Checkbox v-model="settings.taxApplicable" label="Is Tax Applicable" />
+    <Checkbox
+      v-model="settings.deductFullTax"
+      label="Deduct full tax on selected payroll date"
+    />
+    <Checkbox v-model="settings.roundToInteger" label="Round to the nearest integer" />
+    <Checkbox v-model="settings.doNotInclude" label="Do not include in total" disabled />
+    <Checkbox v-model="settings.removeIfZero" label="Remove if zero valued" />
+  </div>
+</template>
diff --git a/src/components/Checkbox/stories/HorizontalGroup.vue b/src/components/Checkbox/stories/HorizontalGroup.vue
new file mode 100644
index 000000000..6ea7d2357
--- /dev/null
+++ b/src/components/Checkbox/stories/HorizontalGroup.vue
@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import { reactive } from 'vue'
+import { Checkbox } from 'frappe-ui'
+
+const settings = reactive({
+  inclusiveText: false,
+  paymentSchedule: false,
+  taxesAsTable: true,
+})
+</script>
+
+<template>
+  <div class="flex flex-col gap-4 items-start w-[32rem]">
+    <p class="text-xl-medium text-ink-gray-9">Print settings</p>
+    <div class="flex flex-wrap gap-x-8 gap-y-2">
+      <Checkbox v-model="settings.inclusiveText" label="Show inclusive text in print" />
+      <Checkbox
+        v-model="settings.paymentSchedule"
+        label="Show payment schedule in print"
+      />
+      <Checkbox v-model="settings.taxesAsTable" label="Show taxes as table in print" />
+    </div>
+  </div>
+</template>
diff --git a/src/components/Checkbox/stories/SettingRow.vue b/src/components/Checkbox/stories/SettingRow.vue
new file mode 100644
index 000000000..cd1524f32
--- /dev/null
+++ b/src/components/Checkbox/stories/SettingRow.vue
@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import { reactive } from 'vue'
+import { Checkbox } from 'frappe-ui'
+
+const ticketTypes = reactive({
+  primary: true,
+  promotions: true,
+  social: true,
+  updates: true,
+})
+</script>
+
+<template>
+  <div class="flex gap-3 items-start border-b border-outline-gray-1 py-3 w-[28rem]">
+    <p class="text-base text-ink-gray-7 pt-1.5 w-40 shrink-0">Default ticket type</p>
+    <div class="flex flex-col gap-1 items-start">
+      <Checkbox v-model="ticketTypes.primary" label="Primary" disabled />
+      <Checkbox v-model="ticketTypes.promotions" label="Promotions" />
+      <Checkbox v-model="ticketTypes.social" label="Social" />
+      <Checkbox v-model="ticketTypes.updates" label="Updates" />
+    </div>
+  </div>
+</template>
diff --git a/src/components/Checkbox/stories/WithDescription.vue b/src/components/Checkbox/stories/WithDescription.vue
new file mode 100644
index 000000000..be06941a4
--- /dev/null
+++ b/src/components/Checkbox/stories/WithDescription.vue
@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import { reactive } from 'vue'
+import { Checkbox } from 'frappe-ui'
+
+const settings = reactive({
+  roundToInteger: false,
+  removeIfZero: false,
+})
+
+const helperText =
+  'If enabled, the value specified or calculated in this component will not contribute to the earnings or deductions. However, its value can be referenced by other components that can be added or deducted.'
+</script>
+
+<template>
+  <div class="flex flex-col gap-3 items-start w-[28rem]">
+    <Checkbox
+      v-model="settings.roundToInteger"
+      label="Round to the nearest integer"
+      :description="helperText"
+    />
+    <Checkbox
+      v-model="settings.removeIfZero"
+      label="Remove if zero valued"
+      :description="helperText"
+    />
+  </div>
+</template>
diff --git a/src/components/Combobox/Combobox.md b/src/components/Combobox/Combobox.md
index 06e0dcabf..892594b43 100644
--- a/src/components/Combobox/Combobox.md
+++ b/src/components/Combobox/Combobox.md
@@ -2,6 +2,10 @@
 
 Lets users choose from available options or type their own. Provides clear, responsive feedback for every interaction.
 
+## Playground
+
+<ClientOnly><ComboboxBuilder /></ClientOnly>
+
 ## Simple
 A plain repo picker — just pass `options` as an array of strings.
 
diff --git a/src/components/Combobox/Combobox.vue b/src/components/Combobox/Combobox.vue
index 43c284d5d..ddb2e535b 100644
--- a/src/components/Combobox/Combobox.vue
+++ b/src/components/Combobox/Combobox.vue
@@ -428,7 +428,7 @@ defineSlots<ComboboxSlots>()
       :for-id="inputId"
       :label="label"
       :required="required"
-      class="text-p-sm font-medium text-ink-gray-7"
+      class="text-p-sm-medium text-ink-gray-7"
     >
       <template v-if="$slots.label" #default="slotProps">
         <slot name="label" v-bind="slotProps" />
@@ -682,7 +682,7 @@ defineSlots<ComboboxSlots>()
           <div
             data-slot="content-body"
             :data-motion="contentMotion"
-            class="overflow-hidden rounded-lg bg-surface-modal shadow-2xl ring-1 ring-black ring-opacity-5"
+            class="overflow-hidden rounded-lg bg-surface-elevation-2 shadow-2xl ring-1 ring-black ring-opacity-5"
           >
             <div
               v-if="isButtonMode"
diff --git a/src/components/Combobox/ComboboxResults.vue b/src/components/Combobox/ComboboxResults.vue
index 6e78ae398..507f2037f 100644
--- a/src/components/Combobox/ComboboxResults.vue
+++ b/src/components/Combobox/ComboboxResults.vue
@@ -176,7 +176,7 @@ function handleSelect(item: NormalizedItem, event: Event) {
             <ComboboxLabel
               v-if="group.group && !group.hideLabel"
               data-slot="group-label"
-              class="flex h-7 items-center px-2 text-sm font-medium text-ink-gray-4"
+              class="flex h-7 items-center px-2 text-sm-medium text-ink-gray-4"
             >
               <component
                 :is="ItemSlotRender"
diff --git a/src/components/Combobox/stories/Clearable.vue b/src/components/Combobox/stories/Clearable.vue
index bc7d6f1fe..0eeac0876 100644
--- a/src/components/Combobox/stories/Clearable.vue
+++ b/src/components/Combobox/stories/Clearable.vue
@@ -34,10 +34,10 @@ const values = reactive<Record<string, string>>({
 })
 
 const colourSwatch: Record<string, string> = {
-  gray: 'bg-surface-gray-5',
+  gray: 'bg-surface-gray-8',
   blue: 'bg-surface-blue-3',
   green: 'bg-surface-green-3',
-  red: 'bg-surface-red-5',
+  red: 'bg-surface-red-7',
 }
 
 const sizeDot: Record<string, string> = {
diff --git a/src/components/Combobox/stories/CreateNew.vue b/src/components/Combobox/stories/CreateNew.vue
index a1f240648..e6a0a00db 100644
--- a/src/components/Combobox/stories/CreateNew.vue
+++ b/src/components/Combobox/stories/CreateNew.vue
@@ -67,7 +67,7 @@ function getBgClass(item: { label: string }) {
         />
         <span
           v-if="item.key === 'create'"
-          class="rounded-sm bg-surface-gray-5 lucide-tag"
+          class="rounded-sm bg-surface-gray-8 lucide-tag"
         />
       </template>
       <template #item-create="{ query }">
diff --git a/src/components/Combobox/stories/InDialog.vue b/src/components/Combobox/stories/InDialog.vue
index eede47f83..dffbb417f 100644
--- a/src/components/Combobox/stories/InDialog.vue
+++ b/src/components/Combobox/stories/InDialog.vue
@@ -43,7 +43,7 @@ const emojis = [
 
   <Dialog v-model="open">
     <template #body-title>
-      <h3 class="text-2xl font-semibold text-ink-gray-9">
+      <h3 class="text-4xl-semibold text-ink-gray-9">
         Combobox inside Dialog
       </h3>
     </template>
diff --git a/src/components/CommandPalette/CommandPaletteItem.vue b/src/components/CommandPalette/CommandPaletteItem.vue
index ca4e8daa6..5aff9e764 100644
--- a/src/components/CommandPalette/CommandPaletteItem.vue
+++ b/src/components/CommandPalette/CommandPaletteItem.vue
@@ -7,7 +7,7 @@ defineProps({
 
 <template>
   <div
-    class="flex w-full min-w-0 items-center rounded px-2 py-2 text-base font-medium text-ink-gray-8"
+    class="flex w-full min-w-0 items-center rounded px-2 py-2 text-base-medium text-ink-gray-8"
     :class="{ 'bg-surface-gray-2': active }"
   >
     <component
diff --git a/src/components/DatePicker/CalendarPanel.vue b/src/components/DatePicker/CalendarPanel.vue
index 14aa63a14..a08a39a32 100644
--- a/src/components/DatePicker/CalendarPanel.vue
+++ b/src/components/DatePicker/CalendarPanel.vue
@@ -11,7 +11,7 @@
         icon="lucide-chevron-left"
         @click="emit('prev')"
       />
-      <span class="text-sm font-medium text-ink-gray-7">
+      <span class="text-sm-medium text-ink-gray-7">
         <span v-if="view === 'date'">
           {{ months[currentMonth] }} {{ currentYear }}
         </span>
@@ -30,7 +30,7 @@
       <Button
         variant="ghost"
         size="sm"
-        class="text-sm font-medium text-ink-gray-7"
+        class="text-sm-medium text-ink-gray-7"
         label="cycle-calendar-view"
         @click="emit('cycleView')"
       >
@@ -73,7 +73,7 @@
         @mouseleave="emit('hoverCell', null)"
       >
         <div
-          class="flex items-center text-xs font-medium uppercase text-ink-gray-4 mb-1 gap-0.5"
+          class="flex items-center text-xs-medium uppercase text-ink-gray-4 mb-1 gap-0.5"
         >
           <div
             v-for="(d, di) in WEEKDAYS"
@@ -163,7 +163,7 @@
           :key="m"
           class="py-2 text-sm rounded cursor-pointer text-center hover:bg-surface-gray-2 focus:outline-none focus:ring-2 focus:ring-brand-6"
           :class="{
-            'bg-surface-gray-6 text-ink-white hover:bg-surface-gray-6':
+            'bg-surface-gray-9 text-ink-base hover:bg-surface-gray-9':
               i === currentMonth,
           }"
           :aria-selected="i === currentMonth ? 'true' : 'false'"
@@ -184,7 +184,7 @@
           :key="y"
           class="py-2 text-sm rounded cursor-pointer text-center hover:bg-surface-gray-2 focus:outline-none focus:ring-2 focus:ring-brand-6"
           :class="{
-            'bg-surface-gray-6 text-ink-white hover:bg-surface-gray-6':
+            'bg-surface-gray-9 text-ink-base hover:bg-surface-gray-9':
               y === currentYear,
           }"
           :aria-selected="y === currentYear ? 'true' : 'false'"
@@ -428,7 +428,7 @@ function cellClass(cell: CalendarPanelCell): Array<string | false> {
     return [
       inMonthCls,
       todayCls,
-      'rounded bg-surface-gray-6 text-ink-white hover:bg-surface-gray-6 cursor-pointer',
+      'rounded bg-surface-gray-9 text-ink-base hover:bg-surface-gray-9 cursor-pointer',
     ]
   }
 
@@ -444,7 +444,7 @@ function cellClass(cell: CalendarPanelCell): Array<string | false> {
     return [
       inMonthCls,
       todayCls,
-      'rounded bg-surface-gray-6 text-ink-white hover:bg-surface-gray-6 cursor-pointer',
+      'rounded bg-surface-gray-9 text-ink-base hover:bg-surface-gray-9 cursor-pointer',
     ]
   }
 
diff --git a/src/components/DatePicker/DatePicker.vue b/src/components/DatePicker/DatePicker.vue
index 811386292..9641bfadb 100644
--- a/src/components/DatePicker/DatePicker.vue
+++ b/src/components/DatePicker/DatePicker.vue
@@ -123,7 +123,7 @@ const emit = defineEmits<DatePickerEmits>()
 const slots = defineSlots<DatePickerSlots>()
 
 const POPOVER_CLASSES =
-  'rounded-lg bg-surface-modal shadow-2xl ring-1 ring-black ring-opacity-5'
+  'rounded-lg bg-surface-elevation-2 shadow-2xl ring-1 ring-black ring-opacity-5'
 const contentClass = computed(() =>
   slots.actions ? `w-fit ${POPOVER_CLASSES}` : `w-56 ${POPOVER_CLASSES}`,
 )
diff --git a/src/components/DatePicker/DateRangePicker.vue b/src/components/DatePicker/DateRangePicker.vue
index 1a012d14a..9b2dfc147 100644
--- a/src/components/DatePicker/DateRangePicker.vue
+++ b/src/components/DatePicker/DateRangePicker.vue
@@ -21,7 +21,7 @@
     :readonly="inputReadonly"
     :input-class="dp.inputClass"
     :display-label="displayLabel"
-    content-class="w-fit rounded-lg bg-surface-modal shadow-2xl ring-1 ring-black ring-opacity-5"
+    content-class="w-fit rounded-lg bg-surface-elevation-2 shadow-2xl ring-1 ring-black ring-opacity-5"
     @blur="commitInput()"
     @enter="commitInput(true)"
     @open="onShellOpen"
diff --git a/src/components/DatePicker/DateTimePicker.vue b/src/components/DatePicker/DateTimePicker.vue
index c6e99efd9..820c2bcc1 100644
--- a/src/components/DatePicker/DateTimePicker.vue
+++ b/src/components/DatePicker/DateTimePicker.vue
@@ -140,7 +140,7 @@ const emit = defineEmits<DateTimePickerEmits>()
 const slots = defineSlots<DateTimePickerSlots>()
 
 const POPOVER_CLASSES =
-  'rounded-lg bg-surface-modal shadow-2xl ring-1 ring-black ring-opacity-5'
+  'rounded-lg bg-surface-elevation-2 shadow-2xl ring-1 ring-black ring-opacity-5'
 const contentClass = computed(() =>
   slots.actions ? `w-fit ${POPOVER_CLASSES}` : `w-56 ${POPOVER_CLASSES}`,
 )
diff --git a/src/components/DatePicker/stories/Range.vue b/src/components/DatePicker/stories/Range.vue
index 0990883e6..90cb1d299 100644
--- a/src/components/DatePicker/stories/Range.vue
+++ b/src/components/DatePicker/stories/Range.vue
@@ -232,7 +232,7 @@ const ret = computed(() =>
     <DateRangePicker v-model="flight" dual-pane :min="today">
       <template #trigger="{ togglePopover, isOpen }">
         <div
-          class="grid grid-cols-2 divide-x divide-outline-gray-2 rounded border bg-surface-white text-sm transition-colors"
+          class="grid grid-cols-2 divide-x divide-outline-gray-2 rounded border bg-surface-base text-sm transition-colors"
           :class="
             isOpen
               ? 'border-outline-gray-4 ring-2 ring-outline-gray-2'
diff --git a/src/components/Dialog/Dialog.md b/src/components/Dialog/Dialog.md
index c5f9d04bf..66a63be1e 100644
--- a/src/components/Dialog/Dialog.md
+++ b/src/components/Dialog/Dialog.md
@@ -2,6 +2,10 @@
 
 A flexible overlay for showing messages, forms, or actions. Keeps focus on content while allowing clear, user-friendly interactions.
 
+## Playground
+
+<ClientOnly><DialogBuilder /></ClientOnly>
+
 ## Share
 
 A typical real-world dialog — rich `#default` body, an action-row `#actions`
diff --git a/src/components/Dialog/Dialog.vue b/src/components/Dialog/Dialog.vue
index 4315a6d0c..886367478 100644
--- a/src/components/Dialog/Dialog.vue
+++ b/src/components/Dialog/Dialog.vue
@@ -14,8 +14,9 @@
         >
           <DialogContent
             ref="contentRef"
-            class="my-8 inline-block w-full transform overflow-hidden rounded-xl bg-surface-modal text-start align-middle shadow-xl dialog-content focus-visible:outline-none"
+            class="my-8 inline-block w-full transform overflow-hidden rounded-xl bg-surface-elevation-1 text-start align-middle shadow-xl dialog-content focus-visible:outline-none"
             :class="sizeClass"
+            @pointerdown.stop
             @open-auto-focus="handleOpenAutoFocus"
             @escape-key-down="
               (e: Event) => {
@@ -37,7 +38,7 @@
             <template v-else>
               <!-- legacy `#body-main`: full middle override (deprecated) -->
               <slot v-if="$slots['body-main']" name="body-main" />
-              <div v-else class="bg-surface-modal px-4 pb-6 pt-5 sm:px-6">
+              <div v-else class="bg-surface-elevation-1 px-4 pb-6 pt-5 sm:px-6">
                 <div class="flex">
                   <div class="w-full flex-1">
                     <!-- legacy `#body-header` (deprecated, warns + renders nothing if used; preserved for back-compat by rendering header) -->
@@ -74,7 +75,7 @@
                             <slot name="body-title">
                               <h3
                                 v-if="resolved.title"
-                                class="text-2xl font-semibold leading-6 text-ink-gray-9"
+                                class="text-4xl-semibold leading-6 text-ink-gray-9"
                               >
                                 {{ resolved.title }}
                               </h3>
@@ -369,10 +370,10 @@ const dialogIconClasses = computed(() => {
   const theme = iconTheme.value
   if (!theme) return 'text-ink-gray-5'
   const map: Record<DialogTheme, string> = {
-    yellow: 'text-ink-amber-3',
-    blue: 'text-ink-blue-3',
-    red: 'text-ink-red-4',
-    green: 'text-ink-green-3',
+    yellow: 'text-ink-amber-6',
+    blue: 'text-ink-blue-6',
+    red: 'text-ink-red-8',
+    green: 'text-ink-green-6',
   }
   return map[theme]
 })
diff --git a/src/components/Dialog/stories/CommandPalette.vue b/src/components/Dialog/stories/CommandPalette.vue
index afbbdbbe8..e8d020a98 100644
--- a/src/components/Dialog/stories/CommandPalette.vue
+++ b/src/components/Dialog/stories/CommandPalette.vue
@@ -131,7 +131,7 @@ function onEnter() {
       </ul>
 
       <div
-        class="flex items-center gap-4 border-t border-outline-gray-modals px-4 py-2 text-p-xs text-ink-gray-5"
+        class="flex items-center gap-4 border-t border-outline-elevation-2 px-4 py-2 text-p-xs text-ink-gray-5"
       >
         <span class="flex items-center gap-1.5">
           <KeyboardShortcut combo="ArrowUp" bg />
diff --git a/src/components/Dialog/stories/Wizard.vue b/src/components/Dialog/stories/Wizard.vue
index 6b4f38563..4bfc9fb02 100644
--- a/src/components/Dialog/stories/Wizard.vue
+++ b/src/components/Dialog/stories/Wizard.vue
@@ -53,7 +53,7 @@ function reset() {
         v-for="(_, i) in steps"
         :key="i"
         class="h-1 flex-1 rounded-full transition-colors"
-        :class="i <= step ? 'bg-surface-gray-7' : 'bg-surface-gray-3'"
+        :class="i <= step ? 'bg-surface-gray-10' : 'bg-surface-gray-3'"
       />
     </div>
 
diff --git a/src/components/Divider/Divider.api.md b/src/components/Divider/Divider.api.md
index b908b0ce6..730a6535f 100644
--- a/src/components/Divider/Divider.api.md
+++ b/src/components/Divider/Divider.api.md
@@ -9,7 +9,7 @@
     name: 'orientation',
     description: '',
     required: false,
-    type: '"horizontal" | "vertical"',
+    type: '"vertical" | "horizontal"',
     default: '"horizontal"'
   },
   {
diff --git a/src/components/Divider/Divider.md b/src/components/Divider/Divider.md
index 585cafb6a..2c96ea923 100644
--- a/src/components/Divider/Divider.md
+++ b/src/components/Divider/Divider.md
@@ -2,6 +2,10 @@
 
 Separates content visually, either horizontally or vertically. It can also host a small inline action.
 
+## Playground
+
+<ClientOnly><DividerBuilder /></ClientOnly>
+
 ## Examples
 
 <ComponentPreview name="Divider-Examples" />
diff --git a/src/components/Dropdown/Dropdown.md b/src/components/Dropdown/Dropdown.md
index c986f8811..0f91f6056 100644
--- a/src/components/Dropdown/Dropdown.md
+++ b/src/components/Dropdown/Dropdown.md
@@ -3,6 +3,10 @@
 A flexible menu component for actions. Handles groups, nested submenus,
 toggle rows, disabled items, custom triggers, and a built-in kebab pattern.
 
+## Playground
+
+<ClientOnly><DropdownBuilder /></ClientOnly>
+
 ## Simple
 A plain actions menu with icons. The default trigger is an auto-generated `<Button>` — pass `button: { label }` to override its text.
 
diff --git a/src/components/Dropdown/stories/05_KebabMenu.vue b/src/components/Dropdown/stories/05_KebabMenu.vue
index 5bfde3c44..8ad028803 100644
--- a/src/components/Dropdown/stories/05_KebabMenu.vue
+++ b/src/components/Dropdown/stories/05_KebabMenu.vue
@@ -52,7 +52,7 @@ function rowActions(task: Task): DropdownOptions {
 </script>
 
 <template>
-  <div class="w-80 divide-y divide-outline-gray-1 rounded-lg border border-outline-gray-1 bg-surface-white">
+  <div class="w-80 divide-y divide-outline-gray-1 rounded-lg border border-outline-gray-1 bg-surface-base">
     <div
       v-for="task in tasks"
       :key="task.title"
diff --git a/src/components/Dropdown/stories/06_UserMenu.vue b/src/components/Dropdown/stories/06_UserMenu.vue
index b6c9c7386..03faf22ae 100644
--- a/src/components/Dropdown/stories/06_UserMenu.vue
+++ b/src/components/Dropdown/stories/06_UserMenu.vue
@@ -114,7 +114,7 @@ const userMenuItems = computed(() => [
           </svg>
           <div class="ml-2 min-w-0">
             <div
-              class="truncate text-base font-medium text-ink-gray-8 leading-none"
+              class="truncate text-base-medium text-ink-gray-8 leading-none"
             >
               Gameplan
             </div>
diff --git a/src/components/Dropdown/utils.ts b/src/components/Dropdown/utils.ts
index 3a0b1914e..4708d2f9b 100644
--- a/src/components/Dropdown/utils.ts
+++ b/src/components/Dropdown/utils.ts
@@ -16,7 +16,7 @@ export type NormalizedDropdownGroup = DropdownGroupOption & {
 
 export const dropdownClasses = {
   content:
-    'dropdown-content min-w-40 divide-y divide-outline-gray-modals rounded-lg bg-surface-modal shadow-2xl ring-1 ring-black ring-opacity-5 focus:outline-none',
+    'dropdown-content min-w-40 divide-y divide-outline-elevation-2 rounded-lg bg-surface-elevation-2 shadow-2xl ring-1 ring-black ring-opacity-5 focus:outline-none',
   group: 'p-1.5',
   groupLabel: 'flex h-7 items-center px-2 text-sm font-medium text-ink-gray-4',
   itemIcon: 'size-4 shrink-0',
@@ -146,7 +146,7 @@ export function getDropdownIconColor(item: {
   theme?: DropdownTheme
 }) {
   if (item.disabled) return 'text-ink-gray-4'
-  return item.theme === 'red' ? 'text-ink-red-3' : 'text-ink-gray-6'
+  return item.theme === 'red' ? 'text-ink-red-6' : 'text-ink-gray-6'
 }
 
 export function getDropdownTextColor(item: {
@@ -154,7 +154,7 @@ export function getDropdownTextColor(item: {
   theme?: DropdownTheme
 }) {
   if (item.disabled) return 'text-ink-gray-4'
-  return item.theme === 'red' ? 'text-ink-red-3' : 'text-ink-gray-7'
+  return item.theme === 'red' ? 'text-ink-red-6' : 'text-ink-gray-7'
 }
 
 export function getDropdownBackgroundColor(item: { theme?: DropdownTheme }) {
diff --git a/src/components/ErrorMessage/ErrorMessage.cy.ts b/src/components/ErrorMessage/ErrorMessage.cy.ts
index f0aac371d..ac5d8fd86 100644
--- a/src/components/ErrorMessage/ErrorMessage.cy.ts
+++ b/src/components/ErrorMessage/ErrorMessage.cy.ts
@@ -10,6 +10,6 @@ describe('ErrorMessage', () => {
 
     cy.get('[role=alert]')
       .should('have.text', 'Invalid value')
-      .should('have.class', 'text-ink-red-4')
+      .should('have.class', 'text-ink-red-8')
   })
 })
diff --git a/src/components/ErrorMessage/ErrorMessage.md b/src/components/ErrorMessage/ErrorMessage.md
index a3483e07c..8deec0538 100644
--- a/src/components/ErrorMessage/ErrorMessage.md
+++ b/src/components/ErrorMessage/ErrorMessage.md
@@ -2,6 +2,10 @@
 
 Displays a clear message to indicate errors or issues. Helps users understand problems and take corrective action quickly.
 
+## Playground
+
+<ClientOnly><ErrorMessageBuilder /></ClientOnly>
+
 ## String Message
 <ComponentPreview name="ErrorMessage-Examples" />
 
diff --git a/src/components/ErrorMessage/ErrorMessage.vue b/src/components/ErrorMessage/ErrorMessage.vue
index a3cc15376..cd32ed240 100644
--- a/src/components/ErrorMessage/ErrorMessage.vue
+++ b/src/components/ErrorMessage/ErrorMessage.vue
@@ -1,7 +1,7 @@
 <template>
   <div
     v-if="message"
-    class="whitespace-pre-line text-sm text-ink-red-4"
+    class="whitespace-pre-line text-sm text-ink-red-8"
     role="alert"
     v-html="errorMessage"
   ></div>
diff --git a/src/components/FormControl/FormControl.md b/src/components/FormControl/FormControl.md
index 73e93fbe6..6e7661b8c 100644
--- a/src/components/FormControl/FormControl.md
+++ b/src/components/FormControl/FormControl.md
@@ -2,6 +2,10 @@
 
 A uniform wrapper for form inputs. `FormControl` picks an underlying control from its `type` prop and threads `label`, `description`, `error`, `required`, `size`, and `variant` down to it. Use it when you want one consistent shape for every field in a form.
 
+## Playground
+
+<ClientOnly><FormControlBuilder /></ClientOnly>
+
 ## Example
 
 A create-account form using every control type.
diff --git a/src/components/FormControl/stories/RealForm.vue b/src/components/FormControl/stories/RealForm.vue
index 1973a560f..ad01ab94f 100644
--- a/src/components/FormControl/stories/RealForm.vue
+++ b/src/components/FormControl/stories/RealForm.vue
@@ -88,7 +88,7 @@ function reset() {
     @submit.prevent="submit"
   >
     <div class="space-y-1">
-      <h2 class="text-lg font-semibold text-ink-gray-9">Create account</h2>
+      <h2 class="text-xl-semibold text-ink-gray-9">Create account</h2>
       <p class="text-p-sm text-ink-gray-6">
         Every <code>FormControl</code> type rendered together. Submit to see
         validation light up.
@@ -184,7 +184,7 @@ function reset() {
       type="checkbox"
       label="I accept the terms and privacy policy"
     />
-    <p v-if="errors.acceptTerms" class="text-p-sm text-ink-red-3">
+    <p v-if="errors.acceptTerms" class="text-p-sm text-ink-red-6">
       {{ errors.acceptTerms }}
     </p>
 
@@ -193,7 +193,7 @@ function reset() {
       <Button variant="ghost" type="button" @click="reset">Reset</Button>
       <span
         v-if="submitted && isValid"
-        class="ml-auto text-p-sm text-ink-green-3"
+        class="ml-auto text-p-sm text-ink-green-6"
       >
         Looks good!
       </span>
diff --git a/src/components/Icon/Icon.cy.ts b/src/components/Icon/Icon.cy.ts
new file mode 100644
index 000000000..d334a76de
--- /dev/null
+++ b/src/components/Icon/Icon.cy.ts
@@ -0,0 +1,78 @@
+import { h } from 'vue'
+import Icon from './Icon.vue'
+
+describe('<Icon />', () => {
+  it('renders a lucide string as a span with the class', () => {
+    cy.mount(Icon, { props: { name: 'lucide-star' } })
+    cy.get('span').should('have.class', 'lucide-star')
+    cy.get('span').should('have.attr', 'aria-hidden', 'true')
+    cy.get('span').should('be.empty')
+  })
+
+  it('passes through fallthrough class on lucide spans', () => {
+    cy.mount(Icon, {
+      props: { name: 'lucide-check' },
+      attrs: { class: 'size-4 text-ink-gray-6' },
+    })
+    cy.get('span')
+      .should('have.class', 'lucide-check')
+      .and('have.class', 'size-4')
+      .and('have.class', 'text-ink-gray-6')
+  })
+
+  it('renders an emoji string as text content', () => {
+    cy.mount(Icon, { props: { name: '🚀' } })
+    cy.get('span').should('have.text', '🚀')
+    cy.get('span').should('have.attr', 'aria-hidden', 'true')
+  })
+
+  it('treats other glyphs (no ASCII letters/digits) as emoji', () => {
+    cy.mount(Icon, { props: { name: '✨' } })
+    cy.get('span').should('have.text', '✨')
+  })
+
+  it('renders a legacy feather name via FeatherIcon (svg)', () => {
+    cy.mount(Icon, { props: { name: 'check' } })
+    cy.get('svg').should('exist')
+    cy.get('svg').should('have.attr', 'aria-hidden', 'true')
+  })
+
+  it('renders a Component value via <component :is>', () => {
+    const CustomIcon = {
+      name: 'custom-icon',
+      render() {
+        return h('svg', { 'data-cy': 'custom-icon' })
+      },
+    }
+    cy.mount(Icon, { props: { name: CustomIcon } })
+    cy.get('[data-cy="custom-icon"]').should('exist')
+  })
+
+  it('passes fallthrough attrs to the rendered Component', () => {
+    const CustomIcon = {
+      name: 'custom-icon',
+      render() {
+        return h('svg', { 'data-cy': 'custom-icon' })
+      },
+    }
+    cy.mount(Icon, {
+      props: { name: CustomIcon },
+      attrs: { class: 'size-5' },
+    })
+    cy.get('[data-cy="custom-icon"]').should('have.class', 'size-5')
+  })
+
+  it('renders nothing when name is falsy', () => {
+    cy.mount(Icon, { props: { name: null } })
+    cy.get('span').should('not.exist')
+    cy.get('svg').should('not.exist')
+
+    cy.mount(Icon, { props: { name: '' } })
+    cy.get('span').should('not.exist')
+    cy.get('svg').should('not.exist')
+
+    cy.mount(Icon, { props: {} })
+    cy.get('span').should('not.exist')
+    cy.get('svg').should('not.exist')
+  })
+})
diff --git a/src/components/Icon/Icon.vue b/src/components/Icon/Icon.vue
new file mode 100644
index 000000000..ce009d9fd
--- /dev/null
+++ b/src/components/Icon/Icon.vue
@@ -0,0 +1,50 @@
+<script setup lang="ts">
+import type { Component } from 'vue'
+import FeatherIcon from '../FeatherIcon.vue'
+import {
+  isEmojiIconString,
+  isLucideIconString,
+} from '../../utils/iconString'
+
+defineOptions({ inheritAttrs: false })
+
+defineProps<{
+  /**
+   * Icon source. Supported forms:
+   * - `lucide-*` string  → rendered via the Tailwind mask plugin.
+   * - emoji / symbol string → rendered as plain text.
+   * - Legacy feather name → rendered via `<FeatherIcon>`.
+   * - Vue component → rendered via `<component :is>`.
+   * Falsy values render nothing.
+   */
+  name?: string | Component | null
+}>()
+</script>
+
+<template>
+  <span
+    v-if="typeof name === 'string' && isLucideIconString(name)"
+    :class="[name]"
+    v-bind="$attrs"
+    aria-hidden="true"
+  />
+  <span
+    v-else-if="typeof name === 'string' && isEmojiIconString(name)"
+    class="inline-flex items-center justify-center leading-none"
+    v-bind="$attrs"
+    aria-hidden="true"
+    >{{ name }}</span
+  >
+  <FeatherIcon
+    v-else-if="typeof name === 'string' && name"
+    :name="name"
+    v-bind="$attrs"
+    aria-hidden="true"
+  />
+  <component
+    v-else-if="name && typeof name !== 'string'"
+    :is="name"
+    v-bind="$attrs"
+    aria-hidden="true"
+  />
+</template>
diff --git a/src/components/Icon/index.ts b/src/components/Icon/index.ts
new file mode 100644
index 000000000..ea5ccfd44
--- /dev/null
+++ b/src/components/Icon/index.ts
@@ -0,0 +1 @@
+export { default as Icon } from './Icon.vue'
diff --git a/src/components/InputLabeling/InputError.vue b/src/components/InputLabeling/InputError.vue
index df62a6b5a..1980da530 100644
--- a/src/components/InputLabeling/InputError.vue
+++ b/src/components/InputLabeling/InputError.vue
@@ -4,7 +4,7 @@
     :id="id"
     data-slot="error"
     role="alert"
-    class="text-p-sm whitespace-pre-line text-ink-red-3"
+    class="text-p-sm whitespace-pre-line text-ink-red-6"
   >{{ lines.join('\n') }}</div>
 </template>
 <script setup lang="ts">
diff --git a/src/components/InputLabeling/RequiredIndicator.vue b/src/components/InputLabeling/RequiredIndicator.vue
index 0b9ba4638..4ea3e6089 100644
--- a/src/components/InputLabeling/RequiredIndicator.vue
+++ b/src/components/InputLabeling/RequiredIndicator.vue
@@ -1,6 +1,6 @@
 <template>
   <template v-if="required">
-    <span class="text-ink-red-3 select-none" aria-hidden="true">*</span>
+    <span class="text-ink-red-6 select-none" aria-hidden="true">*</span>
     <span class="sr-only">(required)</span>
   </template>
 </template>
diff --git a/src/components/ItemListRow/ItemListRow.vue b/src/components/ItemListRow/ItemListRow.vue
index 0898f1de7..aad3fa657 100644
--- a/src/components/ItemListRow/ItemListRow.vue
+++ b/src/components/ItemListRow/ItemListRow.vue
@@ -19,8 +19,8 @@ const sizeClasses = computed(() => {
   return {
     sm: 'min-h-7 px-2 py-1.5 text-base',
     md: 'min-h-8 px-2.5 py-1.5 text-base',
-    lg: 'min-h-10 px-3 py-2 text-lg',
-    xl: 'min-h-10 px-3 py-2 text-xl',
+    lg: 'min-h-10 px-3 py-2 text-xl',
+    xl: 'min-h-10 px-3 py-2 text-3xl',
   }[props.size]
 })
 
diff --git a/src/components/ItemListRow/stories/RowStates.vue b/src/components/ItemListRow/stories/RowStates.vue
index 355e9824b..9637608e1 100644
--- a/src/components/ItemListRow/stories/RowStates.vue
+++ b/src/components/ItemListRow/stories/RowStates.vue
@@ -3,7 +3,7 @@ import { ItemListRow } from 'frappe-ui'
 </script>
 
 <template>
-  <div class="flex w-[320px] flex-col gap-2 rounded-lg border border-outline-gray-2 bg-surface-modal p-2">
+  <div class="flex w-[320px] flex-col gap-2 rounded-lg border border-outline-gray-2 bg-surface-elevation-2 p-2">
     <ItemListRow>
       Simple row with no prefix or suffix
     </ItemListRow>
diff --git a/src/components/KeyboardShortcut.vue b/src/components/KeyboardShortcut.vue
index b513a90c0..f4c8a0fcb 100644
--- a/src/components/KeyboardShortcut.vue
+++ b/src/components/KeyboardShortcut.vue
@@ -10,7 +10,7 @@
       <kbd
         v-for="(part, idx) in parsedParts"
         :key="idx + '-' + part.raw"
-        class="inline-flex h-6 min-w-[1.5rem] items-center justify-center rounded bg-surface-gray-2 px-1.5 text-xs font-medium text-ink-gray-7"
+        class="inline-flex h-6 min-w-[1.5rem] items-center justify-center rounded bg-surface-gray-2 px-1.5 text-xs-medium text-ink-gray-7"
       >
         <span
           v-if="bgIconFor(part)"
diff --git a/src/components/KeyboardShortcutsModal/KeyboardShortcutsModal.vue b/src/components/KeyboardShortcutsModal/KeyboardShortcutsModal.vue
index 5260be582..de61b8bfe 100644
--- a/src/components/KeyboardShortcutsModal/KeyboardShortcutsModal.vue
+++ b/src/components/KeyboardShortcutsModal/KeyboardShortcutsModal.vue
@@ -8,7 +8,7 @@
     <template #title>
       <div class="flex items-center pr-2">
         <h3
-          class="shrink-0 text-2xl font-semibold leading-6 text-ink-gray-9 flex-1"
+          class="shrink-0 text-4xl-semibold leading-6 text-ink-gray-9 flex-1"
         >
           {{ title }}
         </h3>
@@ -43,7 +43,7 @@
           :key="group"
           class="space-y-1"
         >
-          <h3 class="mb-3 text-base font-medium tracking-wide text-ink-gray-8">
+          <h3 class="mb-3 text-base-medium tracking-wide text-ink-gray-8">
             {{ group }}
           </h3>
           <div
diff --git a/src/components/ListFilter/ListFilter.vue b/src/components/ListFilter/ListFilter.vue
index 7f7e66664..870c0bfdf 100644
--- a/src/components/ListFilter/ListFilter.vue
+++ b/src/components/ListFilter/ListFilter.vue
@@ -5,7 +5,7 @@
         <template #prefix><FilterIcon class="h-4" /></template>
         <template v-if="filters.size" #suffix>
           <div
-            class="flex h-5 w-5 items-center justify-center rounded bg-surface-gray-7 pt-[1px] text-2xs font-medium text-ink-white"
+            class="flex h-5 w-5 items-center justify-center rounded bg-surface-gray-10 pt-[1px] text-2xs-medium text-ink-base"
           >
             {{ filters.size }}
           </div>
@@ -14,7 +14,7 @@
     </template>
     <template #body="{ close }">
       <div
-        class="my-2 rounded-lg border border-gray-100 bg-surface-white shadow-xl"
+        class="my-2 rounded-lg border border-gray-100 bg-surface-base shadow-xl"
       >
         <div class="min-w-[400px] p-2">
           <div
diff --git a/src/components/ListItem.vue b/src/components/ListItem.vue
index fc02eb2c0..226e6a636 100644
--- a/src/components/ListItem.vue
+++ b/src/components/ListItem.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="flex items-center justify-between py-3">
     <div>
-      <h3 class="text-base font-medium text-gray-900">
+      <h3 class="text-base-medium text-gray-900">
         {{ title }}
       </h3>
       <div class="mt-1" v-if="secondaryText || $slots.subtitle">
diff --git a/src/components/ListView/ListEmptyState.vue b/src/components/ListView/ListEmptyState.vue
index 093f3c3ea..4ab6c48bb 100644
--- a/src/components/ListView/ListEmptyState.vue
+++ b/src/components/ListView/ListEmptyState.vue
@@ -3,7 +3,7 @@
     class="flex h-full w-full flex-col items-center justify-center text-base"
   >
     <slot>
-      <div class="text-xl font-medium text-ink-gray-8 mt-6">{{ list.options.emptyState.title }}</div>
+      <div class="text-3xl-medium text-ink-gray-8 mt-6">{{ list.options.emptyState.title }}</div>
       <div class="mt-1 text-base text-ink-gray-5">
         {{ list.options.emptyState.description }}
       </div>
diff --git a/src/components/ListView/ListGroupHeader.vue b/src/components/ListView/ListGroupHeader.vue
index a07657c31..eedaa00aa 100644
--- a/src/components/ListView/ListGroupHeader.vue
+++ b/src/components/ListView/ListGroupHeader.vue
@@ -16,13 +16,13 @@
           :is="list.slots['group-header']"
           v-bind="{ group }"
         />
-        <span v-else class="text-ink-gray-8 text-base font-medium leading-6">
+        <span v-else class="text-ink-gray-8 text-base-medium leading-6">
           {{ group.group }}
         </span>
       </div>
     </slot>
   </div>
-  <div class="mx-2 h-px border-t border-outline-gray-modals"></div>
+  <div class="mx-2 h-px border-t border-outline-elevation-2"></div>
 </template>
 <script setup>
 import { inject } from 'vue'
diff --git a/src/components/ListView/ListRow.vue b/src/components/ListView/ListRow.vue
index 0890e9738..e14b24ac0 100644
--- a/src/components/ListView/ListRow.vue
+++ b/src/components/ListView/ListRow.vue
@@ -8,7 +8,7 @@
       isHoverable && !row.disabled
         ? isSelected || isActive
           ? 'hover:bg-surface-gray-3'
-          : 'hover:bg-surface-menu-bar'
+          : 'hover:bg-surface-sidebar'
         : '',
       row.disabled ? 'pointer-events-none' : '',
     ]"
diff --git a/src/components/ListView/ListSelectBanner.vue b/src/components/ListView/ListSelectBanner.vue
index 42aa7fb5c..846acc078 100644
--- a/src/components/ListView/ListSelectBanner.vue
+++ b/src/components/ListView/ListSelectBanner.vue
@@ -12,7 +12,7 @@
       class="absolute inset-x-0 bottom-6 mx-auto w-max text-base"
     >
       <div
-        class="flex min-w-[596px] items-center gap-3 rounded-lg bg-surface-white px-4 py-2 shadow-2xl"
+        class="flex min-w-[596px] items-center gap-3 rounded-lg bg-surface-base px-4 py-2 shadow-2xl"
         :class="$attrs.class"
       >
         <slot
diff --git a/src/components/ListView/stories/CustomList.vue b/src/components/ListView/stories/CustomList.vue
index b1f7ae8a0..76b5770fd 100644
--- a/src/components/ListView/stories/CustomList.vue
+++ b/src/components/ListView/stories/CustomList.vue
@@ -39,7 +39,7 @@ const custom_rows = [
       image: 'https://avatars.githubusercontent.com/u/499120',
     },
     email: 'jane@doe.com',
-    status: { label: 'Inactive', bg_color: 'bg-surface-red-5' },
+    status: { label: 'Inactive', bg_color: 'bg-surface-red-7' },
     role: { label: 'HR', color: 'red' },
   },
 ]
diff --git a/src/components/ListView/stories/GroupedRows.vue b/src/components/ListView/stories/GroupedRows.vue
index 4318629d7..a91b7a60d 100644
--- a/src/components/ListView/stories/GroupedRows.vue
+++ b/src/components/ListView/stories/GroupedRows.vue
@@ -144,7 +144,7 @@ const grouped_rows = ref([
     row-key="id"
   >
     <template #group-header="{ group }">
-      <span class="text-base font-medium leading-6 text-ink-gray-9">
+      <span class="text-base-medium leading-6 text-ink-gray-9">
         {{ group.group }} ({{ group.rows.length }})
       </span>
     </template>
diff --git a/src/components/MonthPicker/MonthPicker.vue b/src/components/MonthPicker/MonthPicker.vue
index 97789ad1c..7d854ac39 100644
--- a/src/components/MonthPicker/MonthPicker.vue
+++ b/src/components/MonthPicker/MonthPicker.vue
@@ -69,7 +69,7 @@ const txtClass = computed(() => {
 
 <template>
   <Popover
-    popover-class="mt-2 shadow-xl rounded-lg border bg-surface-modal p-2"
+    popover-class="mt-2 shadow-xl rounded-lg border bg-surface-elevation-2 p-2"
   >
     <template #target="{ togglePopover, isOpen }">
       <Button @click="togglePopover" class="w-full justify-between border" :class="txtClass"
diff --git a/src/components/MultiSelect/MultiSelect.md b/src/components/MultiSelect/MultiSelect.md
index c46d58a20..32024fc0d 100644
--- a/src/components/MultiSelect/MultiSelect.md
+++ b/src/components/MultiSelect/MultiSelect.md
@@ -2,6 +2,10 @@
 
 Searchable multi-choice picker. Matches the `Combobox` / `Select` item-slot model and provides built-in Clear All / Select All footer controls.
 
+## Playground
+
+<ClientOnly><MultiSelectBuilder /></ClientOnly>
+
 ## Default
 A plain picker — button trigger opens a popover with a search input, option list, and default footer.
 
diff --git a/src/components/MultiSelect/MultiSelect.vue b/src/components/MultiSelect/MultiSelect.vue
index 3fed1330f..77aaf2308 100644
--- a/src/components/MultiSelect/MultiSelect.vue
+++ b/src/components/MultiSelect/MultiSelect.vue
@@ -249,7 +249,7 @@ defineSlots<MultiSelectSlots>()
       :for-id="inputId"
       :label="label"
       :required="required"
-      class="text-p-sm font-medium text-ink-gray-7"
+      class="text-p-sm-medium text-ink-gray-7"
     >
       <template v-if="$slots.label" #default="slotProps">
         <slot name="label" v-bind="slotProps" />
@@ -436,7 +436,7 @@ defineSlots<MultiSelectSlots>()
           <div
             data-slot="content-body"
             :data-motion="contentMotion"
-            class="overflow-hidden rounded-lg bg-surface-modal shadow-2xl ring-1 ring-black ring-opacity-5"
+            class="overflow-hidden rounded-lg bg-surface-elevation-2 shadow-2xl ring-1 ring-black ring-opacity-5"
           >
             <div
               v-if="!hideSearch"
diff --git a/src/components/MultiSelect/MultiSelectResults.vue b/src/components/MultiSelect/MultiSelectResults.vue
index f8b37a8b4..a300acd47 100644
--- a/src/components/MultiSelect/MultiSelectResults.vue
+++ b/src/components/MultiSelect/MultiSelectResults.vue
@@ -110,7 +110,7 @@ function getItemTextValue(item: NormalizedOption) {
             <ComboboxLabel
               v-if="group.group && !group.hideLabel"
               data-slot="group-label"
-              class="flex h-7 items-center px-2 text-sm font-medium text-ink-gray-4"
+              class="flex h-7 items-center px-2 text-sm-medium text-ink-gray-4"
             >
               <component
                 :is="ItemSlotRender"
diff --git a/src/components/MultiSelect/stories/Members.vue b/src/components/MultiSelect/stories/Members.vue
index 90de93691..728bc2576 100644
--- a/src/components/MultiSelect/stories/Members.vue
+++ b/src/components/MultiSelect/stories/Members.vue
@@ -83,7 +83,7 @@ const overflowCount = computed(() =>
         />
         <span
           v-if="overflowCount > 0"
-          class="z-10 grid size-5 place-items-center rounded-full bg-surface-gray-3 text-p-xs font-medium text-ink-gray-7"
+          class="z-10 grid size-5 place-items-center rounded-full bg-surface-gray-3 text-p-xs-medium text-ink-gray-7"
         >
           +{{ overflowCount }}
         </span>
diff --git a/src/components/MultiSelect/stories/TagsTrigger.vue b/src/components/MultiSelect/stories/TagsTrigger.vue
index faa483e99..e54ae1a5f 100644
--- a/src/components/MultiSelect/stories/TagsTrigger.vue
+++ b/src/components/MultiSelect/stories/TagsTrigger.vue
@@ -33,7 +33,7 @@ function removeTag(value: string) {
       <button
         type="button"
         :data-state="open ? 'open' : 'closed'"
-        class="flex w-96 min-h-8 cursor-pointer items-center gap-1.5 rounded border border-[--surface-gray-2] px-1.5 py-1 text-left outline-none transition-colors hover:border-outline-gray-modals focus-visible:ring-2 data-[state=open]:ring-2 ring-outline-gray-3"
+        class="flex w-96 min-h-8 cursor-pointer items-center gap-1.5 rounded border border-[--surface-gray-2] px-1.5 py-1 text-left transition-colors hover:border-outline-elevation-2 data-[state=open]:focus-ring"
         @click="toggleOpen"
       >
         <div class="flex min-w-0 flex-1 flex-wrap items-center gap-1">
diff --git a/src/components/Password/Password.md b/src/components/Password/Password.md
index b810188f1..6efd575d0 100644
--- a/src/components/Password/Password.md
+++ b/src/components/Password/Password.md
@@ -2,6 +2,10 @@
 
 Provides a secure input for entering passwords. Supports visibility toggling and ensures a clear, user-friendly experience.
 
+## Playground
+
+<ClientOnly><PasswordBuilder /></ClientOnly>
+
 <ComponentPreview name="Password-Default" layout="stacked" />
 
 ## Variants
diff --git a/src/components/Password/Password.vue b/src/components/Password/Password.vue
index 91beb2885..4a1c583d1 100644
--- a/src/components/Password/Password.vue
+++ b/src/components/Password/Password.vue
@@ -27,14 +27,14 @@
       <Tooltip>
         <template #body>
           <div
-            class="rounded bg-surface-gray-7 py-1.5 px-2 text-xs text-ink-white shadow-xl"
+            class="rounded bg-surface-gray-10 py-1.5 px-2 text-xs text-ink-base shadow-xl"
           >
             <span class="flex items-center gap-1">
               {{ show ? 'Hide Password' : 'Show Password' }}
               <KeyboardShortcut
                 bg
                 combo="Mod+I"
-                class="!bg-surface-gray-5 !text-ink-gray-2 px-1"
+                class="!bg-surface-gray-8 !text-ink-gray-2 px-1"
               />
             </span>
           </div>
diff --git a/src/components/Pill/Pill.api.md b/src/components/Pill/Pill.api.md
new file mode 100644
index 000000000..f6aae97e5
--- /dev/null
+++ b/src/components/Pill/Pill.api.md
@@ -0,0 +1,99 @@
+<!-- Auto Generated by scripts/propsgen.ts -->
+<script setup>
+  import PropsTable from '@/components/Docs/PropsTable.vue'
+  import SlotsTable from '@/components/Docs/SlotsTable.vue'
+  import EmitsTable from '@/components/Docs/EmitsTable.vue'
+
+  const propsData = [
+  {
+    name: 'label',
+    description: 'Text shown inside the pill.',
+    required: false,
+    type: 'string | number'
+  },
+  {
+    name: 'variant',
+    description: 'Visual variant.',
+    required: false,
+    type: 'PillVariant',
+    default: '"default"'
+  },
+  {
+    name: 'size',
+    description: 'Size of the pill.',
+    required: false,
+    type: 'PillSize',
+    default: '"md"'
+  },
+  {
+    name: 'active',
+    description: 'Active/selected state.',
+    required: false,
+    type: 'boolean',
+    default: 'false'
+  },
+  {
+    name: 'icon',
+    description: 'Icon-only content. When set, the pill renders as a square icon button and any `label` is exposed only to assistive tech (sr-only).',
+    required: false,
+    type: 'PillIcon'
+  },
+  {
+    name: 'iconLeft',
+    description: 'Leading accent icon, rendered next to a visible label.',
+    required: false,
+    type: 'PillIcon'
+  },
+  {
+    name: 'iconRight',
+    description: 'Trailing accent icon, rendered next to a visible label.',
+    required: false,
+    type: 'PillIcon'
+  },
+  {
+    name: 'browserTabBase',
+    description: 'Browser-tab active edge shape.',
+    required: false,
+    type: 'BrowserTabBase',
+    default: '"none"'
+  },
+  {
+    name: 'orientation',
+    description: 'Axis used by underline tabs.',
+    required: false,
+    type: 'PillOrientation',
+    default: '"horizontal"'
+  },
+  {
+    name: 'activeStyle',
+    description: 'Active treatment for default pills.',
+    required: false,
+    type: 'PillActiveStyle',
+    default: '"raised"'
+  }
+]
+
+  const slotsData = [
+  {
+    name: 'prefix',
+    description: '',
+    type: 'any'
+  },
+  {
+    name: 'default',
+    description: '',
+    type: 'any'
+  },
+  {
+    name: 'suffix',
+    description: '',
+    type: 'any'
+  }
+]
+</script>
+## API Reference
+
+<PropsTable name="Pill" :data="propsData"/> 
+
+<SlotsTable :data="slotsData"/> 
+
diff --git a/src/components/Pill/Pill.md b/src/components/Pill/Pill.md
new file mode 100644
index 000000000..6334ef7d4
--- /dev/null
+++ b/src/components/Pill/Pill.md
@@ -0,0 +1,20 @@
+# Pill
+
+A compact tab item primitive used by segmented tabs, underline tabs, and
+browser-style tabs.
+
+## Playground
+
+<ClientOnly><PillBuilder /></ClientOnly>
+
+## Variants
+
+<ComponentPreview name="Pill-Variants" />
+
+## Sizes
+
+<ComponentPreview name="Pill-Sizes" />
+
+## Browser edges
+
+<ComponentPreview name="Pill-BrowserEdges" />
diff --git a/src/components/Pill/Pill.vue b/src/components/Pill/Pill.vue
new file mode 100644
index 000000000..6310eff10
--- /dev/null
+++ b/src/components/Pill/Pill.vue
@@ -0,0 +1,161 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { Icon } from '../Icon'
+import type { PillProps } from './types'
+
+const props = withDefaults(defineProps<PillProps>(), {
+  variant: 'default',
+  size: 'md',
+  active: false,
+  browserTabBase: 'none',
+  orientation: 'horizontal',
+  activeStyle: 'raised',
+})
+
+// `icon` means icon-only intent (label, if provided, is rendered as
+// sr-only). `iconLeft`/`iconRight` are accent icons next to a visible
+// label. This matches Button's semantics.
+const isIconOnly = computed(() => Boolean(props.icon))
+
+const rootClasses = computed(() => {
+  const isSm = props.size === 'sm'
+  const iconOnly = isIconOnly.value
+  const active = props.active
+  return [
+    'inline-flex box-border shrink-0 select-none items-center justify-center whitespace-nowrap text-sm leading-[16.1px] outline-none transition-[background-color,color,box-shadow,border-color] duration-150 ease-out motion-reduce:transition-none',
+    active
+      ? props.variant === 'underline'
+        ? 'text-ink-gray-8 font-medium'
+        : 'text-ink-gray-8'
+      : 'text-ink-gray-5',
+    iconOnly
+      ? isSm
+        ? 'size-6.5 gap-1.5 p-[5px]'
+        : 'size-7 gap-1.5 p-[5px]'
+      : props.variant === 'underline'
+        ? props.orientation === 'vertical'
+          ? isSm
+            ? 'h-7 gap-2 pr-2'
+            : 'h-7.5 gap-2 pr-2'
+          : isSm
+            ? 'h-7 gap-2'
+            : 'h-7.5 gap-2'
+        : isSm
+          ? 'h-6.5 gap-2 px-2 py-[5px]'
+          : 'h-7 gap-2 px-2.5 py-1.5',
+    radiusClass.value,
+    variantClass.value,
+  ]
+})
+
+const radiusClass = computed(() => {
+  if (props.variant === 'underline') return ''
+
+  if (props.variant === 'browser-tab') {
+    if (props.browserTabBase === 'left')
+      return props.size === 'sm' ? 'rounded-r-[7px]' : 'rounded-r-[9px]'
+    if (props.browserTabBase === 'right')
+      return props.size === 'sm' ? 'rounded-l-[7px]' : 'rounded-l-[9px]'
+    if (props.browserTabBase === 'default')
+      return props.size === 'sm' ? 'rounded-t-[7px]' : 'rounded-t-[9px]'
+    return props.size === 'sm' ? 'rounded-[7px]' : 'rounded-[9px]'
+  }
+
+  return props.size === 'sm' ? 'rounded-[7px]' : 'rounded-[9px]'
+})
+
+const variantClass = computed(() => {
+  if (props.variant === 'underline') {
+    const isVertical = props.orientation === 'vertical'
+    const railSlot = isVertical
+      ? 'border-r border-transparent'
+      : 'border-b border-transparent'
+    if (props.active) {
+      // Indicator overlays the container's rail segment so it reads as a
+      // thicker, darker section of the same line — not a separate bar
+      // floating beside the label.
+      const indicator = isVertical
+        ? 'after:absolute after:inset-y-1.5 after:-right-0.5 after:w-px after:bg-[var(--ink-gray-8)]'
+        : 'after:absolute after:inset-x-0 after:-bottom-px after:h-px after:bg-[var(--ink-gray-8)]'
+      return ['relative', railSlot, indicator]
+    }
+    return [railSlot, 'hover:text-ink-gray-7']
+  }
+
+  if (props.variant === 'browser-tab') {
+    if (!props.active) {
+      return 'border border-transparent hover:bg-surface-gray-2 hover:text-ink-gray-7'
+    }
+
+    // Active tab "punches through" the rail: the white pseudo extends a
+    // few pixels past the rail line so the tab visibly continues into the
+    // area below, instead of terminating exactly at the rail (which the
+    // eye reads as a closed bottom corner). Border is one step darker
+    // than the rail so the tab reads as a distinct, raised shape.
+    // No drop shadow: a downward shadow would paint below the rail and
+    // visually re-close the bottom edge we're trying to open.
+    if (props.browserTabBase === 'left') {
+      return 'relative border border-l-0 border-outline-gray-2 bg-surface-base after:absolute after:-left-[3px] after:-top-px after:-bottom-px after:w-[3px] after:bg-surface-base'
+    }
+
+    if (props.browserTabBase === 'right') {
+      return 'relative border border-r-0 border-outline-gray-2 bg-surface-base after:absolute after:-right-[3px] after:-top-px after:-bottom-px after:w-[3px] after:bg-surface-base'
+    }
+
+    return 'relative border border-b-0 border-outline-gray-2 bg-surface-base after:absolute after:-inset-x-px after:-bottom-[3px] after:h-[3px] after:bg-surface-base'
+  }
+
+  if (props.variant === 'outline') {
+    return props.active
+      ? 'border border-transparent bg-surface-base shadow-sm'
+      : 'border border-outline-gray-1 hover:bg-surface-gray-2 hover:text-ink-gray-7'
+  }
+
+  if (!props.active) {
+    return 'hover:bg-surface-gray-3/80 hover:text-ink-gray-7'
+  }
+
+  return props.activeStyle === 'subtle'
+    ? 'bg-surface-gray-2'
+    : 'bg-surface-elevation-3 shadow-base'
+})
+
+const iconClass = computed(() =>
+  props.size === 'sm' ? 'size-4 shrink-0' : 'size-[18px] shrink-0',
+)
+
+function hasLabel(label: PillProps['label']) {
+  return label !== undefined && label !== null && label !== ''
+}
+
+defineSlots<{
+  prefix?: () => any
+  default?: () => any
+  suffix?: () => any
+}>()
+</script>
+
+<template>
+  <span :class="rootClasses" :data-state="active ? 'active' : 'inactive'">
+    <slot name="prefix">
+      <Icon v-if="icon" :name="icon" :class="iconClass" />
+      <Icon v-else-if="iconLeft" :name="iconLeft" :class="iconClass" />
+    </slot>
+
+    <span
+      v-if="hasLabel(label) || $slots.default"
+      class="min-w-0 truncate"
+      :class="isIconOnly ? 'sr-only' : undefined"
+    >
+      <slot>{{ label }}</slot>
+    </span>
+
+    <slot name="suffix">
+      <Icon
+        v-if="iconRight && !isIconOnly"
+        :name="iconRight"
+        :class="iconClass"
+      />
+    </slot>
+  </span>
+</template>
diff --git a/src/components/Pill/index.ts b/src/components/Pill/index.ts
new file mode 100644
index 000000000..778203c99
--- /dev/null
+++ b/src/components/Pill/index.ts
@@ -0,0 +1,10 @@
+export { default as Pill } from './Pill.vue'
+export type {
+  BrowserTabBase,
+  PillActiveStyle,
+  PillIcon,
+  PillOrientation,
+  PillProps,
+  PillSize,
+  PillVariant,
+} from './types'
diff --git a/src/components/Pill/stories/BrowserEdges.vue b/src/components/Pill/stories/BrowserEdges.vue
new file mode 100644
index 000000000..1540bbaf5
--- /dev/null
+++ b/src/components/Pill/stories/BrowserEdges.vue
@@ -0,0 +1,42 @@
+<script setup>
+import { Pill } from 'frappe-ui'
+</script>
+
+<template>
+  <div class="flex flex-col gap-6 p-2">
+    <div class="flex items-end gap-1 border-b border-outline-gray-2">
+      <Pill variant="browser-tab" browser-tab-base="default" label="Overview" />
+      <Pill
+        variant="browser-tab"
+        browser-tab-base="default"
+        label="Activity"
+        active
+      />
+      <Pill variant="browser-tab" browser-tab-base="default" label="Settings" />
+    </div>
+
+    <div class="flex gap-8">
+      <div class="flex flex-col gap-1 border-r border-outline-gray-2 pr-0">
+        <Pill variant="browser-tab" label="Overview" />
+        <Pill
+          variant="browser-tab"
+          browser-tab-base="left"
+          label="Activity"
+          active
+        />
+        <Pill variant="browser-tab" label="Settings" />
+      </div>
+
+      <div class="flex flex-col gap-1 border-l border-outline-gray-2 pl-0">
+        <Pill variant="browser-tab" label="Overview" />
+        <Pill
+          variant="browser-tab"
+          browser-tab-base="right"
+          label="Activity"
+          active
+        />
+        <Pill variant="browser-tab" label="Settings" />
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/src/components/Pill/stories/Sizes.vue b/src/components/Pill/stories/Sizes.vue
new file mode 100644
index 000000000..d5bb02d53
--- /dev/null
+++ b/src/components/Pill/stories/Sizes.vue
@@ -0,0 +1,49 @@
+<script setup>
+import { Pill } from 'frappe-ui'
+</script>
+
+<template>
+  <div class="flex flex-col gap-5 p-2">
+    <div class="flex items-center gap-4">
+      <div class="w-12 text-sm text-ink-gray-6">Small</div>
+      <Pill size="sm" label="Tab">
+        <template #prefix>
+          <span class="lucide-star size-4 shrink-0" aria-hidden="true" />
+        </template>
+      </Pill>
+      <Pill size="sm" label="Tab" active>
+        <template #prefix>
+          <span class="lucide-star size-4 shrink-0" aria-hidden="true" />
+        </template>
+        <template #suffix>
+          <span
+            class="rounded-full bg-surface-gray-2 px-1.5 text-xs text-ink-gray-7"
+            >14</span
+          >
+        </template>
+      </Pill>
+      <Pill size="sm" label="Icon" icon="lucide-star" active />
+    </div>
+
+    <div class="flex items-center gap-4">
+      <div class="w-12 text-sm text-ink-gray-6">Medium</div>
+      <Pill size="md" label="Tab">
+        <template #prefix>
+          <span class="lucide-star size-[18px] shrink-0" aria-hidden="true" />
+        </template>
+      </Pill>
+      <Pill size="md" label="Tab" active>
+        <template #prefix>
+          <span class="lucide-star size-[18px] shrink-0" aria-hidden="true" />
+        </template>
+        <template #suffix>
+          <span
+            class="rounded-full bg-surface-gray-2 px-1.5 text-xs text-ink-gray-7"
+            >14</span
+          >
+        </template>
+      </Pill>
+      <Pill size="md" label="Icon" icon="lucide-star" active />
+    </div>
+  </div>
+</template>
diff --git a/src/components/Pill/stories/Variants.vue b/src/components/Pill/stories/Variants.vue
new file mode 100644
index 000000000..2736afd3f
--- /dev/null
+++ b/src/components/Pill/stories/Variants.vue
@@ -0,0 +1,53 @@
+<script setup>
+import { Pill } from 'frappe-ui'
+
+const variants = [
+  { label: 'Default', variant: 'default' },
+  { label: 'Outline', variant: 'outline' },
+  { label: 'Underline', variant: 'underline' },
+  { label: 'Browser tab', variant: 'browser-tab', browserTabBase: 'default' },
+]
+</script>
+
+<template>
+  <div class="flex flex-col gap-5 p-2">
+    <div
+      v-for="item in variants"
+      :key="item.variant"
+      class="flex items-center gap-6"
+    >
+      <div class="w-24 text-sm text-ink-gray-6">{{ item.label }}</div>
+      <Pill
+        label="Tab"
+        :variant="item.variant"
+        :browser-tab-base="item.browserTabBase"
+      >
+        <template #prefix>
+          <span class="lucide-star size-4 shrink-0" aria-hidden="true" />
+        </template>
+        <template #suffix>
+          <span
+            class="rounded-full bg-surface-gray-2 px-1.5 text-xs text-ink-gray-7"
+            >14</span
+          >
+        </template>
+      </Pill>
+      <Pill
+        label="Tab"
+        active
+        :variant="item.variant"
+        :browser-tab-base="item.browserTabBase"
+      >
+        <template #prefix>
+          <span class="lucide-star size-4 shrink-0" aria-hidden="true" />
+        </template>
+        <template #suffix>
+          <span
+            class="rounded-full bg-surface-gray-2 px-1.5 text-xs text-ink-gray-7"
+            >14</span
+          >
+        </template>
+      </Pill>
+    </div>
+  </div>
+</template>
diff --git a/src/components/Pill/types.ts b/src/components/Pill/types.ts
new file mode 100644
index 000000000..7648b40ea
--- /dev/null
+++ b/src/components/Pill/types.ts
@@ -0,0 +1,43 @@
+import type { Component } from 'vue'
+
+export type PillSize = 'sm' | 'md'
+export type PillVariant = 'default' | 'outline' | 'underline' | 'browser-tab'
+export type BrowserTabBase = 'none' | 'default' | 'left' | 'right'
+export type PillIcon = string | Component
+export type PillOrientation = 'horizontal' | 'vertical'
+export type PillActiveStyle = 'raised' | 'subtle'
+
+export interface PillProps {
+  /** Text shown inside the pill. */
+  label?: string | number
+
+  /** Visual variant. */
+  variant?: PillVariant
+
+  /** Size of the pill. */
+  size?: PillSize
+
+  /** Active/selected state. */
+  active?: boolean
+
+  /**
+   * Icon-only content. When set, the pill renders as a square icon button
+   * and any `label` is exposed only to assistive tech (sr-only).
+   */
+  icon?: PillIcon
+
+  /** Leading accent icon, rendered next to a visible label. */
+  iconLeft?: PillIcon
+
+  /** Trailing accent icon, rendered next to a visible label. */
+  iconRight?: PillIcon
+
+  /** Browser-tab active edge shape. */
+  browserTabBase?: BrowserTabBase
+
+  /** Axis used by underline tabs. */
+  orientation?: PillOrientation
+
+  /** Active treatment for default pills. */
+  activeStyle?: PillActiveStyle
+}
diff --git a/src/components/Popover/Popover.api.md b/src/components/Popover/Popover.api.md
index 74568f7dd..70f284787 100644
--- a/src/components/Popover/Popover.api.md
+++ b/src/components/Popover/Popover.api.md
@@ -37,7 +37,7 @@
     name: 'placement',
     description: 'Placement of the popover relative to the target',
     required: false,
-    type: '"bottom" | "top" | "right" | "left" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end"',
+    type: '"left" | "right" | "bottom" | "top" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end"',
     default: '"bottom-start"'
   },
   {
diff --git a/src/components/Popover/Popover.vue b/src/components/Popover/Popover.vue
index 8bcc7182a..e0e504380 100644
--- a/src/components/Popover/Popover.vue
+++ b/src/components/Popover/Popover.vue
@@ -45,7 +45,7 @@
             name="body"
             v-bind="{ togglePopover, updatePosition, open, close, isOpen }"
           >
-            <div class="rounded-lg border bg-surface-modal shadow-xl">
+            <div class="rounded-lg border bg-surface-elevation-2 shadow-xl">
               <slot
                 name="body-main"
                 v-bind="{
diff --git a/src/components/Progress/Progress.cy.ts b/src/components/Progress/Progress.cy.ts
index cb42ac8ee..08cf9bfe7 100644
--- a/src/components/Progress/Progress.cy.ts
+++ b/src/components/Progress/Progress.cy.ts
@@ -49,11 +49,11 @@ describe('Progress', () => {
     const filledCount = Math.round((value / 100) * intervalCount)
 
     // verify number of intervals divs
-    // only filled intervals needs gray-7
+    // only filled intervals needs gray-10
     cy.get('[role=progressbar] div')
       .should('have.length', intervalCount)
       .each((x, i: number) => {
-        const bgclass = `bg-surface-gray-${i < filledCount ? 7 : 2}`
+        const bgclass = `bg-surface-gray-${i < filledCount ? 10 : 2}`
         cy.wrap(x).should('have.class', bgclass)
       })
   })
diff --git a/src/components/Progress/Progress.md b/src/components/Progress/Progress.md
index ccdb1f1ec..403ec5b74 100644
--- a/src/components/Progress/Progress.md
+++ b/src/components/Progress/Progress.md
@@ -2,6 +2,10 @@
 
 Visually represents progress or completion of a task. Updates dynamically to give users clear feedback on status.
 
+## Playground
+
+<ClientOnly><ProgressBuilder /></ClientOnly>
+
 ## Examples
 <ComponentPreview name="Progress-Examples" />
 
diff --git a/src/components/Progress/Progress.vue b/src/components/Progress/Progress.vue
index ed6e2fe55..dbe5054a6 100644
--- a/src/components/Progress/Progress.vue
+++ b/src/components/Progress/Progress.vue
@@ -4,7 +4,7 @@
       v-if="props.label || props.hint"
       class="flex items-baseline justify-between"
     >
-      <span v-if="props.label" class="text-base font-medium text-ink-gray-8">
+      <span v-if="props.label" class="text-base-medium text-ink-gray-8">
         {{ props.label }}
       </span>
       <!-- Empty for alignment -->
@@ -12,7 +12,7 @@
 
       <span class="self-end" v-if="props.hint || $slots.hint">
         <slot name="hint">
-          <span class="text-base font-medium text-ink-gray-4">
+          <span class="text-base-medium text-ink-gray-4">
             {{ props.value }}%
           </span>
         </slot>
@@ -30,7 +30,7 @@
       <!-- Continuous Progress Bar -->
       <div
         v-if="!props.intervals"
-        class="h-full bg-surface-gray-7"
+        class="h-full bg-surface-gray-10"
         :style="`width: ${props.value}%`"
       ></div>
 
@@ -41,7 +41,7 @@
         class="h-full w-full"
         :class="
           index <= filledIntervalCount
-            ? 'bg-surface-gray-7'
+            ? 'bg-surface-gray-10'
             : 'bg-surface-gray-2'
         "
       ></div>
diff --git a/src/components/Rating/Rating.md b/src/components/Rating/Rating.md
index c93fd6ffe..3f3257854 100644
--- a/src/components/Rating/Rating.md
+++ b/src/components/Rating/Rating.md
@@ -2,6 +2,10 @@
 
 Lets users rate items using stars in a simple, interactive way. Provides immediate visual feedback and supports partial or full selections.
 
+## Playground
+
+<ClientOnly><RatingBuilder /></ClientOnly>
+
 <ComponentPreview name="Rating-Default" layout="stacked" />
 
 ## Sizes
diff --git a/src/components/Rating/Rating.vue b/src/components/Rating/Rating.vue
index 368971db1..14381e10d 100644
--- a/src/components/Rating/Rating.vue
+++ b/src/components/Rating/Rating.vue
@@ -9,7 +9,7 @@
       :id="labelId"
       :label="props.label"
       :required="props.required"
-      class="text-p-sm font-medium text-ink-gray-7"
+      class="text-p-sm-medium text-ink-gray-7"
     >
       <template v-if="$slots.label" #default="slotProps">
         <slot name="label" v-bind="slotProps" />
@@ -18,7 +18,7 @@
     <div
       :id="inputId"
       ref="rootRef"
-      class="rating-stars inline-flex shrink-0 gap-0.5 leading-none rounded-sm focus:outline-none focus-visible:ring focus-visible:ring-outline-gray-3"
+      class="rating-stars inline-flex shrink-0 gap-0.5 leading-none rounded-sm"
       :class="hasLabeling ? null : (attrs.class as any)"
       :style="hasLabeling ? null : (attrs.style as any)"
       :role="isSliderMode ? 'slider' : 'radiogroup'"
@@ -43,7 +43,7 @@
         v-for="index in starCount"
         :key="index"
         type="button"
-        class="rating-star relative inline-flex shrink-0 focus:outline-none focus-visible:ring focus-visible:ring-outline-gray-3 rounded-sm"
+        class="rating-star relative inline-flex shrink-0 rounded-sm"
         :class="[
           sizeClass,
           isDisabled ? 'cursor-default' : 'cursor-pointer',
diff --git a/src/components/Rating/stories/CustomSlot.vue b/src/components/Rating/stories/CustomSlot.vue
index 0093b952e..566db1c4a 100644
--- a/src/components/Rating/stories/CustomSlot.vue
+++ b/src/components/Rating/stories/CustomSlot.vue
@@ -14,7 +14,7 @@ const scores = ['💩', '👎', '👌', '👍', '🔥']
     <Rating v-model="mood" label="How was your day?" size="lg">
       <template #icon="{ index, value, previewValue }">
         <span
-          class="text-2xl leading-none transition-transform"
+          class="text-4xl leading-none transition-transform"
           :class="
             index === (previewValue ?? value) ? 'scale-110' : 'opacity-40'
           "
@@ -26,7 +26,7 @@ const scores = ['💩', '👎', '👌', '👍', '🔥']
     <Rating v-model="score" label="Rate this meal" size="lg">
       <template #icon="{ index, value, previewValue }">
         <span
-          class="text-2xl leading-none"
+          class="text-4xl leading-none"
           :class="
             index === (previewValue ?? value) ? '' : 'grayscale opacity-50'
           "
diff --git a/src/components/Select/Select.cy.ts b/src/components/Select/Select.cy.ts
index c70b7cd1e..80d2a3bdb 100644
--- a/src/components/Select/Select.cy.ts
+++ b/src/components/Select/Select.cy.ts
@@ -12,7 +12,6 @@ describe('Select', () => {
     cy.get('[role=combobox]')
       .should('have.attr', 'aria-expanded', 'false')
       .and('have.class', 'text-left')
-      .and('have.class', 'focus-visible:ring-2')
     cy.get('[role=presentation]').should('not.exist')
 
     cy.get('button').click()
diff --git a/src/components/Select/Select.md b/src/components/Select/Select.md
index 7c60ddf92..f4bf77d17 100644
--- a/src/components/Select/Select.md
+++ b/src/components/Select/Select.md
@@ -3,6 +3,10 @@
 Lets users select one option from a list. Ideal for forms, settings, or any
 interface where a single choice is required.
 
+## Playground
+
+<ClientOnly><SelectBuilder /></ClientOnly>
+
 ## Example
 <ComponentPreview name="Select-Example" />
 
diff --git a/src/components/Select/Select.vue b/src/components/Select/Select.vue
index 21b57a265..ee9c7f9ef 100644
--- a/src/components/Select/Select.vue
+++ b/src/components/Select/Select.vue
@@ -240,7 +240,7 @@ defineSlots<SelectSlots>()
       :for-id="inputId"
       :label="label"
       :required="required"
-      class="text-p-sm font-medium text-ink-gray-7"
+      class="text-p-sm-medium text-ink-gray-7"
     >
       <template v-if="$slots.label" #default="slotProps">
         <slot name="label" v-bind="slotProps" />
@@ -355,7 +355,7 @@ defineSlots<SelectSlots>()
         <div
           data-slot="content-body"
           :data-motion="contentMotion"
-          class="flex flex-col overflow-hidden rounded-lg bg-surface-modal shadow-2xl ring-1 ring-black ring-opacity-5 will-change-[opacity,transform] origin-[var(--reka-select-content-transform-origin)]"
+          class="flex flex-col overflow-hidden rounded-lg bg-surface-elevation-2 shadow-2xl ring-1 ring-black ring-opacity-5 will-change-[opacity,transform] origin-[var(--reka-select-content-transform-origin)]"
         >
           <SelectViewport class="flex min-h-0 flex-col p-1">
             <div
diff --git a/src/components/Select/stories/Example.vue b/src/components/Select/stories/Example.vue
index 7eb0e4796..c5431e698 100644
--- a/src/components/Select/stories/Example.vue
+++ b/src/components/Select/stories/Example.vue
@@ -44,7 +44,7 @@ const options = [
       class="grid divide-y divide-outline-gray-2 md:grid-cols-2 md:divide-x md:divide-y-0"
     >
       <div class="pb-8 md:pr-8">
-        <div class="text-sm font-medium text-ink-gray-7">Auto width</div>
+        <div class="text-sm-medium text-ink-gray-7">Auto width</div>
         <div class="mt-1 text-p-sm text-ink-gray-5">
           Matches the widest option by default, closer to a native select.
         </div>
@@ -66,7 +66,7 @@ const options = [
       </div>
 
       <div class="pb-8 md:pl-8">
-        <div class="text-sm font-medium text-ink-gray-7">Full width</div>
+        <div class="text-sm-medium text-ink-gray-7">Full width</div>
         <div class="mt-1 text-p-sm text-ink-gray-5">
           Opt in with
           <code class="text-sm text-ink-gray-7">class="w-full"</code>
diff --git a/src/components/Select/stories/States.vue b/src/components/Select/stories/States.vue
index 857cfec4b..f296cbd9a 100644
--- a/src/components/Select/stories/States.vue
+++ b/src/components/Select/stories/States.vue
@@ -27,7 +27,7 @@ const sortOptions = [
 
 <template>
   <div class="w-full max-w-md py-4">
-    <div class="text-sm font-medium text-ink-gray-7">Disabled label option</div>
+    <div class="text-sm-medium text-ink-gray-7">Disabled label option</div>
     <div class="mt-1 text-p-sm text-ink-gray-5">
       Common sorting pattern where a disabled first option keeps an empty string
       value without breaking the select.
diff --git a/src/components/Select/stories/TriggerSlots.vue b/src/components/Select/stories/TriggerSlots.vue
index 7c81da390..9814f837f 100644
--- a/src/components/Select/stories/TriggerSlots.vue
+++ b/src/components/Select/stories/TriggerSlots.vue
@@ -34,7 +34,7 @@ const options = [
     class="grid w-full max-w-4xl divide-y divide-outline-gray-2 md:grid-cols-2 md:divide-x md:divide-y-0"
   >
     <div class="py-4 md:pr-8">
-      <div class="text-sm font-medium text-ink-gray-7">Prefix and suffix</div>
+      <div class="text-sm-medium text-ink-gray-7">Prefix and suffix</div>
       <div class="mt-1 text-p-sm text-ink-gray-5">
         Use the default trigger shell when you only need light customization.
       </div>
@@ -60,7 +60,7 @@ const options = [
     </div>
 
     <div class="py-4 md:pl-8">
-      <div class="text-sm font-medium text-ink-gray-7">Custom trigger</div>
+      <div class="text-sm-medium text-ink-gray-7">Custom trigger</div>
       <div class="mt-1 text-p-sm text-ink-gray-5">
         Replace the trigger content entirely when you need richer layout.
       </div>
diff --git a/src/components/Select/utils.ts b/src/components/Select/utils.ts
index 4ed0c163b..1086eba91 100644
--- a/src/components/Select/utils.ts
+++ b/src/components/Select/utils.ts
@@ -48,9 +48,9 @@ export function triggerVariantClasses(
 
   return {
     subtle:
-      'border border-[--surface-gray-2] bg-surface-gray-2 hover:border-outline-gray-modals hover:bg-surface-gray-3',
+      'border border-[--surface-gray-2] bg-surface-gray-2 hover:border-outline-elevation-2 hover:bg-surface-gray-3',
     outline:
-      'border border-outline-gray-2 bg-surface-white hover:border-outline-gray-3',
+      'border border-outline-gray-2 bg-surface-base hover:border-outline-gray-3',
     ghost:
       'border border-transparent bg-transparent hover:bg-surface-gray-3 focus:bg-surface-gray-3',
   }[variant]
@@ -62,4 +62,4 @@ export function triggerVariantClasses(
  * which is why Select doesn't reuse the shared base string.
  */
 export const triggerBaseClasses =
-  'relative inline-flex items-center gap-2 text-left outline-none transition-[background-color,border-color,box-shadow] duration-150 ease-[cubic-bezier(0.23,1,0.32,1)] focus-visible:ring-2 data-[state=open]:ring-2 ring-outline-gray-3 text-ink-gray-7 data-[placeholder]:text-ink-gray-4 data-[disabled]:text-ink-gray-4'
+  'relative inline-flex items-center gap-2 text-left transition-[background-color,border-color,box-shadow] duration-150 ease-[cubic-bezier(0.23,1,0.32,1)] data-[state=open]:focus-ring text-ink-gray-7 data-[placeholder]:text-ink-gray-4 data-[disabled]:text-ink-gray-4'
diff --git a/src/components/Sidebar/Sidebar.api.md b/src/components/Sidebar/Sidebar.api.md
index 40ca3ff0c..9cb03e14b 100644
--- a/src/components/Sidebar/Sidebar.api.md
+++ b/src/components/Sidebar/Sidebar.api.md
@@ -36,7 +36,7 @@
   {
     name: 'header',
     description: '',
-    type: '{}'
+    type: '{ isCollapsed: boolean; isMobile: boolean; }'
   },
   {
     name: 'header-logo',
@@ -46,7 +46,7 @@
   {
     name: 'sidebar-item',
     description: '',
-    type: '{ item: SidebarItemProps; isCollapsed: false; }'
+    type: '{ item: SidebarItemProps; isCollapsed: boolean; }'
   },
   {
     name: 'footer-items',
@@ -140,6 +140,12 @@
     description: '',
     required: false,
     type: '(() => void)'
+  },
+  {
+    name: 'condition',
+    description: '',
+    required: false,
+    type: 'MaybeRefOrGetter<boolean>'
   }
 ]
 
@@ -181,7 +187,7 @@
   {
     name: 'sidebar-item',
     description: '',
-    type: '{ item: SidebarItemProps; isCollapsed: false; }'
+    type: '{ item: SidebarItemProps; isCollapsed: boolean; }'
   }
 ]
 </script>
diff --git a/src/components/Sidebar/Sidebar.vue b/src/components/Sidebar/Sidebar.vue
index 1964f2e95..9d0fd8133 100644
--- a/src/components/Sidebar/Sidebar.vue
+++ b/src/components/Sidebar/Sidebar.vue
@@ -1,6 +1,6 @@
 <template>
   <div
-    class="flex h-full flex-col flex-shrink-0 overflow-y-auto overflow-x-hidden border-r border-outline-gray-1 bg-surface-menu-bar transition-all duration-300 ease-in-out p-2"
+    class="flex h-full flex-col flex-shrink-0 overflow-y-auto overflow-x-hidden border-r border-outline-gray-1 bg-surface-sidebar transition-all duration-300 ease-in-out p-2"
     :class="shouldCollapse ? 'w-12' : 'w-60'"
   >
     <slot name="header" v-bind="{ isCollapsed: shouldCollapse, isMobile }">
diff --git a/src/components/Sidebar/SidebarHeader.vue b/src/components/Sidebar/SidebarHeader.vue
index 572658d40..0556a8129 100644
--- a/src/components/Sidebar/SidebarHeader.vue
+++ b/src/components/Sidebar/SidebarHeader.vue
@@ -7,7 +7,7 @@
           isCollapsed
             ? 'w-auto px-0'
             : open
-              ? 'bg-surface-white px-2 shadow-sm'
+              ? 'bg-surface-base px-2 shadow-sm'
               : 'px-2 hover:bg-surface-gray-3'
         "
       >
@@ -36,7 +36,7 @@
               : 'ml-2 w-auto opacity-100'
           "
         >
-          <div class="text-base font-medium text-ink-gray-8 leading-none">
+          <div class="text-base-medium text-ink-gray-8 leading-none">
             {{ props.title }}
           </div>
           <div class="mt-1 text-sm text-ink-gray-6 leading-none">
diff --git a/src/components/Sidebar/SidebarItem.vue b/src/components/Sidebar/SidebarItem.vue
index c503e1544..cb3d3b77e 100644
--- a/src/components/Sidebar/SidebarItem.vue
+++ b/src/components/Sidebar/SidebarItem.vue
@@ -6,7 +6,7 @@
     class="!w-full focus-visible:ring-0 focus:outline-none"
     :class="
       isActive
-        ? '!bg-surface-selected shadow-sm'
+        ? '!bg-surface-elevation-3 shadow-sm'
         : 'hover:bg-surface-gray-2'
     "
     variant="ghost"
diff --git a/src/components/Slider/Slider.md b/src/components/Slider/Slider.md
index 1befeb282..a1b8ec1d6 100644
--- a/src/components/Slider/Slider.md
+++ b/src/components/Slider/Slider.md
@@ -2,6 +2,10 @@
 
 A slider input for selecting a single value or a range of values within a minimum and maximum.
 
+## Playground
+
+<ClientOnly><SliderBuilder /></ClientOnly>
+
 <ComponentPreview name="Slider-Default" layout="stacked" />
 
 ## Sizes
diff --git a/src/components/Slider/Slider.vue b/src/components/Slider/Slider.vue
index bfdcb2d2a..de78176a7 100644
--- a/src/components/Slider/Slider.vue
+++ b/src/components/Slider/Slider.vue
@@ -64,13 +64,13 @@ const trackClasses = computed(() => {
 const rangeClasses = computed(() => {
   return [
     'absolute h-full rounded',
-    props.disabled ? 'bg-surface-gray-4' : 'bg-surface-gray-7',
+    props.disabled ? 'bg-surface-gray-4' : 'bg-surface-gray-10',
   ]
 })
 
 const thumbClasses = computed(() => {
   return [
-    'rounded-full bg-surface-white shadow-md ring-gray-600/20 transition-shadow duration-200 ease-out hover:ring-[6px] focus:outline-none dark:bg-surface-gray-7 dark:ring-gray-100/20',
+    'rounded-full bg-surface-base shadow-md ring-gray-600/20 transition-shadow duration-200 ease-out hover:ring-[6px] focus:outline-none dark:bg-surface-gray-10 dark:ring-gray-100/20',
     props.size === 'md' ? 'size-5' : 'size-4',
     props.disabled
       ? 'cursor-not-allowed opacity-60 hover:ring-0'
@@ -85,10 +85,10 @@ const onValueCommit = (value: SliderValue) => {
 const hasLabeling = computed(() => {
   return Boolean(
     props.label ||
-      slots.label ||
-      showDescription.value ||
-      slots.description ||
-      hasError.value,
+    slots.label ||
+    showDescription.value ||
+    slots.description ||
+    hasError.value,
   )
 })
 </script>
@@ -101,7 +101,7 @@ const hasLabeling = computed(() => {
       :for-id="inputId"
       :label="props.label"
       :required="props.required"
-      class="text-p-sm font-medium text-ink-gray-7"
+      class="text-p-sm-medium text-ink-gray-7"
     >
       <template v-if="$slots.label" #default="slotProps">
         <slot name="label" v-bind="slotProps" />
diff --git a/src/components/Spinner/Spinner.cy.ts b/src/components/Spinner/Spinner.cy.ts
index 3b1ff3c4c..5da670190 100644
--- a/src/components/Spinner/Spinner.cy.ts
+++ b/src/components/Spinner/Spinner.cy.ts
@@ -56,10 +56,10 @@ describe('Spinner', () => {
       cy.get('[role="status"]').should('have.class', 'text-ink-gray-8')
     })
 
-    it('theme="red" applies text-ink-red-4 class', () => {
+    it('theme="red" applies text-ink-red-8 class', () => {
       cy.mount(Spinner, { props: { theme: 'red' } })
 
-      cy.get('[role="status"]').should('have.class', 'text-ink-red-4')
+      cy.get('[role="status"]').should('have.class', 'text-ink-red-8')
     })
 
     it('no theme prop applies no color class (inherits currentColor)', () => {
@@ -67,7 +67,7 @@ describe('Spinner', () => {
 
       cy.get('[role="status"]')
         .should('not.have.class', 'text-ink-gray-8')
-        .and('not.have.class', 'text-ink-red-4')
+        .and('not.have.class', 'text-ink-red-8')
     })
   })
 
diff --git a/src/components/Spinner/Spinner.vue b/src/components/Spinner/Spinner.vue
index 65ed5376e..b4dc8418d 100644
--- a/src/components/Spinner/Spinner.vue
+++ b/src/components/Spinner/Spinner.vue
@@ -35,7 +35,7 @@ const colorClass = computed(() => {
   // No `theme` → inherit the current text color (customizable with a
   // text-* class on the spinner or a parent).
   if (props.theme == null) return null
-  return { gray: 'text-ink-gray-8', red: 'text-ink-red-4' }[props.theme]
+  return { gray: 'text-ink-gray-8', red: 'text-ink-red-8' }[props.theme]
 })
 
 const rootStyle = computed(() => {
diff --git a/src/components/Switch/Switch.md b/src/components/Switch/Switch.md
index 59ca4efdc..77f7fad56 100644
--- a/src/components/Switch/Switch.md
+++ b/src/components/Switch/Switch.md
@@ -2,6 +2,10 @@
 
 A toggle input for turning options on or off. Clearly indicates state changes and allows quick, intuitive control.
 
+## Playground
+
+<ClientOnly><SwitchBuilder /></ClientOnly>
+
 <ComponentPreview name="Switch-Default" layout="stacked" />
 
 ## Sizes
diff --git a/src/components/Switch/Switch.vue b/src/components/Switch/Switch.vue
index cdf88cf8f..83445af06 100644
--- a/src/components/Switch/Switch.vue
+++ b/src/components/Switch/Switch.vue
@@ -128,10 +128,9 @@ const {
 const switchClasses = computed(() => {
   return [
     'relative inline-flex flex-shrink-0 cursor-pointer rounded-full border-transparent transition-colors duration-100 ease-in-out items-center',
-    'focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-outline-gray-3',
     'disabled:cursor-not-allowed disabled:bg-surface-gray-3',
     model.value
-      ? 'bg-surface-gray-7 enabled:hover:bg-surface-gray-6 active:bg-surface-gray-5 group-hover:enabled:bg-surface-gray-6'
+      ? 'bg-surface-gray-10 enabled:hover:bg-surface-gray-9 active:bg-surface-gray-8 group-hover:enabled:bg-surface-gray-9'
       : 'bg-surface-gray-4 enabled:hover:bg-gray-400 active:bg-gray-500 group-hover:enabled:bg-gray-400',
     props.size === 'md' ? 'h-5 w-8 border-[3px]' : 'h-4 w-[26px] border-2',
   ]
@@ -139,7 +138,7 @@ const switchClasses = computed(() => {
 
 const switchCircleClasses = computed(() => {
   return [
-    'pointer-events-none inline-block transform rounded-full bg-surface-white shadow ring-0 transition duration-100 ease-in-out',
+    'pointer-events-none inline-block transform rounded-full bg-surface-base shadow ring-0 transition duration-100 ease-in-out',
     props.size === 'md' ? 'h-3.5 w-3.5' : 'h-3 w-3',
     props.size === 'md'
       ? model.value
@@ -159,7 +158,7 @@ const switchLabelClasses = computed(() => {
     props.disabled && !props.description
       ? 'text-ink-gray-4'
       : 'text-ink-gray-8',
-    props.size === 'md' ? 'text-lg' : 'text-base',
+    props.size === 'md' ? 'text-xl' : 'text-base',
     props.labelClasses,
   ]
 })
@@ -171,7 +170,7 @@ const switchGroupClasses = computed(() => {
   const classes = ['flex justify-between']
   if (!hasDescription) {
     classes.push(
-      'group items-center gap-x-3 py-1.5 cursor-pointer rounded focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-outline-gray-3',
+      'group items-center gap-x-3 py-1.5 cursor-pointer rounded',
     )
 
     if (props.disabled) classes.push('cursor-not-allowed')
diff --git a/src/components/TabButtons/TabButtons.api.md b/src/components/TabButtons/TabButtons.api.md
index eeefdb2a0..dccfafc49 100644
--- a/src/components/TabButtons/TabButtons.api.md
+++ b/src/components/TabButtons/TabButtons.api.md
@@ -5,17 +5,65 @@
   import EmitsTable from '@/components/Docs/EmitsTable.vue'
 
   const propsData = [
+  {
+    name: 'options',
+    description: 'List of options to render.',
+    required: false,
+    type: 'TabButton[]'
+  },
   {
     name: 'buttons',
     description: '',
-    required: true,
-    type: 'TabButton[]'
+    required: false,
+    type: 'TabButton[]',
+    deprecated: 'Use `options` instead.'
   },
   {
     name: 'modelValue',
     description: '',
     required: false,
     type: 'TabButtonValue'
+  },
+  {
+    name: 'type',
+    description: '',
+    required: false,
+    type: 'TabButtonsType',
+    default: '"subtle"'
+  },
+  {
+    name: 'size',
+    description: '',
+    required: false,
+    type: 'PillSize',
+    default: '"sm"'
+  },
+  {
+    name: 'vertical',
+    description: '',
+    required: false,
+    type: 'boolean',
+    default: 'false'
+  },
+  {
+    name: 'direction',
+    description: 'Edge the active browser tab attaches to. Only used when `type=\'browser-tab\'` and `vertical`.',
+    required: false,
+    type: 'TabButtonsDirection',
+    default: '"left"'
+  }
+]
+
+  const slotsData = [
+  {
+    name: 'prefix',
+    description: '',
+    type: '{ button: { key: string; label: string | number | undefined; icon: TabButtonIcon | undefined; iconLe'
+  },
+  {
+    name: 'suffix',
+    description: '',
+    type: '{ button: { key: string; label: string | number | undefined; icon: TabButtonIcon | undefined; iconLe'
   }
 ]
 
@@ -31,5 +79,7 @@
 
 <PropsTable name="TabButtons" :data="propsData"/> 
 
+<SlotsTable :data="slotsData"/> 
+
 <EmitsTable :data="emitsData"/> 
 
diff --git a/src/components/TabButtons/TabButtons.cy.ts b/src/components/TabButtons/TabButtons.cy.ts
index a465a671f..5d5e65bb8 100644
--- a/src/components/TabButtons/TabButtons.cy.ts
+++ b/src/components/TabButtons/TabButtons.cy.ts
@@ -5,7 +5,7 @@ describe('<TabButtons />', () => {
   it('updates the selected value', () => {
     cy.mount(TabButtons, {
       props: {
-        buttons: [
+        options: [
           { label: 'Day', value: 'day' },
           { label: 'Week', value: 'week' },
         ],
@@ -24,7 +24,7 @@ describe('<TabButtons />', () => {
 
     cy.mount(TabButtons, {
       props: {
-        buttons: [{ label: 'Month', value: 'month', onClick }],
+        options: [{ label: 'Month', value: 'month', onClick }],
         modelValue: 'month',
       },
     })
@@ -37,7 +37,7 @@ describe('<TabButtons />', () => {
   it('syncs the model with the active fallback', () => {
     cy.mount(TabButtons, {
       props: {
-        buttons: [
+        options: [
           { label: 'Day', value: 'day' },
           { label: 'Week', value: 'week', active: true },
         ],
@@ -60,12 +60,11 @@ describe('<TabButtons />', () => {
 
     cy.mount(TabButtons, {
       props: {
-        buttons: [
+        options: [
           {
             label: 'Calendar',
             value: 'calendar',
             icon: CalendarIcon,
-            hideLabel: true,
           },
         ],
         modelValue: 'calendar',
@@ -77,4 +76,18 @@ describe('<TabButtons />', () => {
       .and('have.attr', 'title', 'Calendar')
     cy.get('[data-cy="calendar-icon"]').should('exist')
   })
+
+  it('rounds the focusable tab element to match the pill', () => {
+    cy.mount(TabButtons, {
+      props: {
+        options: [
+          { label: 'Day', value: 'day' },
+          { label: 'Week', value: 'week' },
+        ],
+        modelValue: 'day',
+      },
+    })
+
+    cy.contains('button', 'Day').should('have.class', 'rounded-[7px]')
+  })
 })
diff --git a/src/components/TabButtons/TabButtons.md b/src/components/TabButtons/TabButtons.md
new file mode 100644
index 000000000..8827126c3
--- /dev/null
+++ b/src/components/TabButtons/TabButtons.md
@@ -0,0 +1,49 @@
+# TabButtons
+
+A radio-group based tab control for switching between compact views.
+
+> Status: work in progress. The v1 API and implementation are still being
+> polished, especially route/link behavior, option compatibility, and
+> browser-tab details. Treat this component as preview-quality until this note
+> is removed.
+
+## Playground
+
+<ClientOnly><TabButtonsBuilder /></ClientOnly>
+
+## Variants
+
+<ComponentPreview name="TabButtons-Variants" />
+
+## Sizes
+
+<ComponentPreview name="TabButtons-Sizes" />
+
+## Vertical
+
+<ComponentPreview name="TabButtons-Vertical" />
+
+## Prefix and suffix
+
+<ComponentPreview name="TabButtons-PrefixSuffix" />
+
+<!-- @include: ./TabButtons.api.md -->
+
+## Migration from v0
+
+TabButtons no longer wraps `<Button>` internally — each tab is now a native
+`<button>`, `<a href>`, or `<RouterLink>` rendering a `<Pill>` for its visual
+treatment. This is a breaking change for consumers that were passing Button
+props through option entries.
+
+- `theme`, `variant`, `size`, `loading`, `prefix` on individual options are no
+  longer honored. Use `Button` or `Pill` directly if you need per-tab theming or
+  a loading spinner.
+- `hideLabel` on options is gone. Use `icon` for an icon-only tab — its `label`,
+  if provided, is automatically exposed as accessibility text. Use `iconLeft` /
+  `iconRight` when you want an accent icon next to a visible label.
+- `route` and `href` on options are honored: a tab renders as a `<RouterLink>`
+  when `route` is set, or an `<a href target=_blank>` when `href` is set.
+- The per-tab `tooltip` value now surfaces as the native `title` attribute
+  rather than the floating `<Tooltip>` popover. Wrap the `TabButtons` instance
+  in a custom tooltip if you need styled behavior.
diff --git a/src/components/TabButtons/TabButtons.story.vue b/src/components/TabButtons/TabButtons.story.vue
deleted file mode 100644
index 0e3819de9..000000000
--- a/src/components/TabButtons/TabButtons.story.vue
+++ /dev/null
@@ -1,22 +0,0 @@
-<script setup lang="ts">
-import { ref } from "vue";
-import Story from "@/components/Story.vue";
-import { TabButtons } from "frappe-ui";
-const currentTab = ref("mytasks");
-</script>
-
-<template>
-  <div class="w-4/5">
-    <Story>
-      <TabButtons
-        :buttons='
-          [
-            { label: "Tasks assigned to me", value: "mytasks" },
-            { label: "Tasks created by me", value: "created" },
-          ]
-        '
-        v-model="currentTab"
-      />
-    </Story>
-  </div>
-</template>
diff --git a/src/components/TabButtons/TabButtons.vue b/src/components/TabButtons/TabButtons.vue
index 58481cb0d..1880aeb7e 100644
--- a/src/components/TabButtons/TabButtons.vue
+++ b/src/components/TabButtons/TabButtons.vue
@@ -1,97 +1,79 @@
 <script setup lang="ts">
-import { computed, watch, watchEffect, type Component } from 'vue'
+import { computed, watch, watchEffect, h, type FunctionalComponent } from 'vue'
 import { RadioGroupItem, RadioGroupRoot } from 'reka-ui'
-import { Button, type ButtonProps } from '../Button'
-import FeatherIcon from '../FeatherIcon.vue'
+import { RouterLink } from 'vue-router'
+import { Pill, type BrowserTabBase } from '../Pill'
+import { warnDeprecated } from '../../utils/warnDeprecated'
 import { warnFeatherIconUsage } from '../../utils/iconString'
+import type { TabButton, TabButtonsEmits, TabButtonsProps } from './types'
 
 defineOptions({
   name: 'TabButtons',
   inheritAttrs: false,
 })
 
-type TabButtonValue = string | number | boolean
-
-type TabButtonIcon = string | Component
-
-type NativeButtonClass = string | string[] | Record<string, boolean>
-
-interface TabButton extends Omit<
-  ButtonProps,
-  'label' | 'icon' | 'iconLeft' | 'iconRight'
-> {
-  label?: string | number
-  value?: TabButtonValue
-  icon?: TabButtonIcon
-  iconLeft?: TabButtonIcon
-  iconRight?: TabButtonIcon
-  hideLabel?: boolean
-  active?: boolean
-  class?: NativeButtonClass
-  onClick?: (event: MouseEvent) => void
-}
+const props = withDefaults(defineProps<TabButtonsProps>(), {
+  type: 'subtle',
+  size: 'sm',
+  vertical: false,
+  direction: 'left',
+})
+
+const emit = defineEmits<TabButtonsEmits>()
 
-const props = defineProps<{
-  buttons: TabButton[]
-  modelValue?: TabButtonValue
-}>()
+watchEffect(() => {
+  if (props.buttons) {
+    warnDeprecated('TabButtons `buttons` prop', '`options`')
+  }
+})
 
-const emit = defineEmits<{
-  'update:modelValue': [value: TabButtonValue | undefined]
-}>()
+const options = computed(() => props.options ?? props.buttons ?? [])
 
 watchEffect(() => {
-  for (const button of props.buttons) {
-    warnFeatherIconUsage('TabButtons', 'button.icon', button.icon)
-    warnFeatherIconUsage('TabButtons', 'button.iconLeft', button.iconLeft)
-    warnFeatherIconUsage('TabButtons', 'button.iconRight', button.iconRight)
+  for (const option of options.value) {
+    warnFeatherIconUsage('TabButtons', 'options.icon', option.icon)
+    warnFeatherIconUsage('TabButtons', 'options.iconLeft', option.iconLeft)
+    warnFeatherIconUsage('TabButtons', 'options.iconRight', option.iconRight)
   }
 })
 
 const resolvedButtons = computed(() => {
-  return props.buttons.map((button, index) => {
+  return options.value.map((button, index) => {
     const {
       value,
       label,
       icon,
       iconLeft,
       iconRight,
-      hideLabel = false,
       active = false,
       class: customClass,
       onClick,
       tooltip,
-      ...buttonProps
+      disabled,
+      route,
+      href,
     } = button
 
-    const leadingIcon = iconLeft ?? icon
-    const trailingIcon = iconRight
-    const visibleLabel = hasLabel(label) && !hideLabel
-    const useIconProp = Boolean(leadingIcon) && !trailingIcon && !visibleLabel
+    const isIconOnly = Boolean(icon)
+    const visibleLabel = hasLabel(label) && !isIconOnly
     const accessibleLabel = hasLabel(label) ? String(label) : tooltip
 
     return {
       key: `tab-button-${index}`,
       label,
-      hideLabel,
+      icon,
+      iconLeft,
+      iconRight,
       active,
       customClass,
       onClick,
-      leadingIcon,
-      trailingIcon,
+      tooltip,
+      disabled,
       visibleLabel,
-      useIconProp,
       accessibleLabel,
+      route,
+      href,
       modelValue: value ?? label ?? index,
-      buttonProps: {
-        theme: 'gray' as const,
-        variant: 'subtle' as const,
-        size: 'sm' as const,
-        tooltip,
-        ...buttonProps,
-        label: accessibleLabel,
-        icon: useIconProp ? leadingIcon : undefined,
-      },
     }
   })
 })
@@ -122,9 +104,7 @@ const selectedButtonKey = computed({
       Object.is(button.modelValue, props.modelValue),
     )
 
-    if (selectedButton) {
-      return selectedButton.key
-    }
+    if (selectedButton) return selectedButton.key
 
     return resolvedButtons.value.find((button) => button.active)?.key
   },
@@ -136,26 +116,154 @@ const selectedButtonKey = computed({
   },
 })
 
+const rootClasses = computed(() =>
+  props.vertical ? verticalClasses() : horizontalClasses(),
+)
+
+function horizontalClasses() {
+  const base = ['inline-flex shrink-0 items-center overflow-hidden']
+  const isSm = props.size === 'sm'
+
+  switch (props.type) {
+    case 'subtle':
+    case 'ghost': {
+      const surface =
+        props.type === 'subtle' ? 'bg-surface-gray-2' : 'bg-surface-base'
+      const shape = isSm ? 'gap-1 rounded' : 'gap-1.5 rounded-[10px]'
+      return [...base, 'p-px', surface, shape]
+    }
+    case 'underline':
+      return [...base, 'border-b border-outline-gray-1 gap-6']
+    case 'browser-tab':
+      return [...base, 'border-b border-outline-gray-1 gap-1']
+  }
+  return base
+}
+
+// Vertical mode is a separate layout. Buttons/pills below get `w-full` so
+// every tab stretches to the container's intrinsic max width — the active
+// indicator then lands on the container's rail rather than at the pill's
+// own text width.
+function verticalClasses() {
+  const base = ['inline-flex shrink-0 flex-col']
+  const isSm = props.size === 'sm'
+
+  switch (props.type) {
+    case 'subtle':
+    case 'ghost': {
+      const surface =
+        props.type === 'subtle' ? 'bg-surface-gray-2' : 'bg-surface-base'
+      const shape = isSm ? 'gap-1 rounded' : 'gap-1.5 rounded-[10px]'
+      return [...base, 'p-px', surface, shape, 'items-center']
+    }
+    case 'underline':
+      return [...base, 'border-r border-outline-gray-1 gap-1.5']
+    case 'browser-tab': {
+      const rule =
+        props.direction === 'right'
+          ? 'border-r border-outline-gray-1'
+          : 'border-l border-outline-gray-1'
+      return [...base, rule, 'gap-1']
+    }
+  }
+  return base
+}
+
+const pillVariant = computed(() => {
+  if (props.type === 'underline') return 'underline'
+  if (props.type === 'browser-tab') return 'browser-tab'
+  return 'default'
+})
+
+const pillActiveStyle = computed(() =>
+  props.type === 'ghost' ? 'subtle' : 'raised',
+)
+
+function browserTabBase(checked: boolean): BrowserTabBase {
+  if (props.type !== 'browser-tab') return 'none'
+  if (!props.vertical) return 'default'
+  if (!checked) return 'none'
+  return props.direction
+}
+
+function tabButtonRadiusClass(checked: boolean) {
+  if (props.type === 'underline') return ''
+
+  if (props.type === 'browser-tab') {
+    const base = browserTabBase(checked)
+    if (base === 'left')
+      return props.size === 'sm' ? 'rounded-r-[7px]' : 'rounded-r-[9px]'
+    if (base === 'right')
+      return props.size === 'sm' ? 'rounded-l-[7px]' : 'rounded-l-[9px]'
+    if (base === 'default')
+      return props.size === 'sm' ? 'rounded-t-[7px]' : 'rounded-t-[9px]'
+  }
+
+  return props.size === 'sm' ? 'rounded-[7px]' : 'rounded-[9px]'
+}
+
 function hasLabel(label: TabButton['label']) {
   return label !== undefined && label !== null && label !== ''
 }
+
+// Native tab elements are rendered through these functional wrappers rather
+// than bare 'button'/'a' tag strings. A string `:is` binding runs through
+// Vue's component resolver, which capitalizes the name and matches a globally
+// registered component — so in apps that do `app.component('Button', ...)`
+// (e.g. Gameplan), `<component :is="'button'">` resolves to that Button
+// component instead of a native <button>. Binding a component value skips the
+// resolver. `inheritAttrs: false` keeps the merged Reka/data/class/@click
+// attrs from being applied twice.
+const NativeButton: FunctionalComponent = (_props, { attrs, slots }) =>
+  h('button', attrs, slots.default?.())
+NativeButton.inheritAttrs = false
+const NativeAnchor: FunctionalComponent = (_props, { attrs, slots }) =>
+  h('a', attrs, slots.default?.())
+NativeAnchor.inheritAttrs = false
+
+// Pick the wrapper element for a tab. `route` → RouterLink, `href` →
+// anchor, otherwise a native button. Disabled forces the button form so
+// `:disabled` actually blocks interaction.
+function tabElement(button: (typeof resolvedButtons.value)[number]) {
+  if (button.disabled) return NativeButton
+  if (button.route) return RouterLink
+  if (button.href) return NativeAnchor
+  return NativeButton
+}
+
+function tabElementProps(button: (typeof resolvedButtons.value)[number]) {
+  if (!button.disabled && button.route) {
+    return { to: button.route }
+  }
+  if (!button.disabled && button.href) {
+    return {
+      href: button.href,
+      target: '_blank',
+      rel: 'noreferrer noopener',
+    }
+  }
+  return { type: 'button' as const, disabled: button.disabled }
+}
 </script>
 
 <template>
-  <RadioGroupRoot v-model="selectedButtonKey" v-bind="$attrs">
-    <div
-      class="inline-flex min-h-7 items-center gap-0.5 rounded-md bg-surface-gray-2 p-px ring-1 ring-inset ring-outline-gray-1"
-    >
+  <RadioGroupRoot
+    v-model="selectedButtonKey"
+    :orientation="vertical ? 'vertical' : 'horizontal'"
+    v-bind="$attrs"
+  >
+    <div :class="rootClasses">
       <RadioGroupItem
         v-for="button in resolvedButtons"
         :key="button.key"
         v-slot="{ checked, disabled }"
         as="template"
-        :disabled="button.buttonProps.disabled || button.buttonProps.loading"
+        :disabled="button.disabled"
         :value="button.key"
       >
-        <Button
-          v-bind="button.buttonProps"
+        <component
+          :is="tabElement(button)"
+          v-bind="tabElementProps(button)"
           data-slot="tab-button"
           :data-state="checked ? 'checked' : 'unchecked'"
           :data-disabled="disabled ? '' : undefined"
@@ -167,58 +275,47 @@ function hasLabel(label: TabButton['label']) {
           :title="
             button.accessibleLabel && !button.visibleLabel
               ? button.accessibleLabel
-              : undefined
+              : button.tooltip
           "
           :class="[
-            '!h-6.5 shrink-0 !rounded-[9px] transition-[transform,background-color,color,box-shadow,border-color] duration-150 ease-out motion-safe:active:scale-[0.98] motion-reduce:transform-none motion-reduce:transition-none',
-            button.hideLabel ? '!w-7 !px-0' : '',
-            checked
-              ? '!border-outline-gray-1 !bg-surface-white !text-ink-gray-8 shadow-sm'
-              : disabled
-                ? '!bg-transparent !text-ink-gray-4'
-                : '!bg-transparent !text-ink-gray-5 hover:!bg-surface-gray-3/80 hover:!text-ink-gray-7',
+            'inline-flex appearance-none border-0 bg-transparent p-0 text-inherit no-underline disabled:pointer-events-none disabled:opacity-60',
+            tabButtonRadiusClass(checked),
+            vertical && 'w-full',
             button.customClass,
           ]"
           @click="button.onClick?.($event)"
         >
-          <template v-if="button.leadingIcon && !button.useIconProp" #prefix>
-            <FeatherIcon
-              v-if="typeof button.leadingIcon === 'string'"
-              :name="button.leadingIcon"
-              class="h-4 w-4 shrink-0"
-              aria-hidden="true"
-            />
-            <component
-              :is="button.leadingIcon"
-              v-else
-              class="h-4 w-4 shrink-0"
-              aria-hidden="true"
-            />
-          </template>
-
-          <span
-            v-if="hasLabel(button.label)"
-            class="flex min-w-0 items-center truncate"
-            :class="button.hideLabel ? 'sr-only' : undefined"
+          <Pill
+            :class="vertical ? 'w-full !justify-start' : ''"
+            :label="button.label"
+            :icon="button.icon"
+            :icon-left="button.iconLeft"
+            :icon-right="button.iconRight"
+            :active="checked"
+            :size="size"
+            :variant="pillVariant"
+            :browser-tab-base="browserTabBase(checked)"
+            :orientation="vertical ? 'vertical' : 'horizontal'"
+            :active-style="pillActiveStyle"
           >
-            {{ button.label }}
-          </span>
-
-          <template v-if="button.trailingIcon" #suffix>
-            <FeatherIcon
-              v-if="typeof button.trailingIcon === 'string'"
-              :name="button.trailingIcon"
-              class="h-4 w-4 shrink-0"
-              aria-hidden="true"
-            />
-            <component
-              :is="button.trailingIcon"
-              v-else
-              class="h-4 w-4 shrink-0"
-              aria-hidden="true"
-            />
-          </template>
-        </Button>
+            <template v-if="$slots.prefix" #prefix>
+              <slot
+                name="prefix"
+                :button="button"
+                :checked="checked"
+                :disabled="disabled"
+              />
+            </template>
+            <template v-if="$slots.suffix" #suffix>
+              <slot
+                name="suffix"
+                :button="button"
+                :checked="checked"
+                :disabled="disabled"
+              />
+            </template>
+          </Pill>
+        </component>
       </RadioGroupItem>
     </div>
   </RadioGroupRoot>
diff --git a/src/components/TabButtons/index.ts b/src/components/TabButtons/index.ts
index a5e78227b..96c840c2d 100644
--- a/src/components/TabButtons/index.ts
+++ b/src/components/TabButtons/index.ts
@@ -1 +1,11 @@
-export { default as TabButtons } from './TabButtons.vue'
\ No newline at end of file
+export { default as TabButtons } from './TabButtons.vue'
+export type {
+  NativeButtonClass,
+  TabButton,
+  TabButtonIcon,
+  TabButtonsDirection,
+  TabButtonsEmits,
+  TabButtonsProps,
+  TabButtonsType,
+  TabButtonValue,
+} from './types'
diff --git a/src/components/TabButtons/stories/PrefixSuffix.vue b/src/components/TabButtons/stories/PrefixSuffix.vue
new file mode 100644
index 000000000..bcb755feb
--- /dev/null
+++ b/src/components/TabButtons/stories/PrefixSuffix.vue
@@ -0,0 +1,65 @@
+<script setup>
+import { ref } from 'vue'
+import { TabButtons } from 'frappe-ui'
+
+const inboxTab = ref('comments')
+const viewTab = ref('list')
+
+const inboxButtons = [
+  { label: 'Inbox', value: 'inbox' },
+  { label: 'Comments', value: 'comments' },
+]
+
+const inboxIcons = {
+  inbox: 'lucide-inbox',
+  comments: 'lucide-message-square',
+}
+
+const inboxCounts = {
+  inbox: 8,
+  comments: 14,
+}
+
+const viewButtons = [
+  { label: 'List', value: 'list', icon: 'lucide-list' },
+  { label: 'Board', value: 'board', icon: 'lucide-columns-3' },
+  { label: 'Calendar', value: 'calendar', icon: 'lucide-calendar' },
+]
+</script>
+
+<template>
+  <div class="flex flex-col gap-6 p-2">
+    <TabButtons v-model="inboxTab" :options="inboxButtons" size="md">
+      <template #prefix="{ button }">
+        <span :class="inboxIcons[button.modelValue]" class="size-4 shrink-0" />
+      </template>
+      <template #suffix="{ button }">
+        <span
+          class="rounded-full bg-surface-gray-2 px-1.5 text-xs text-ink-gray-7"
+        >
+          {{ inboxCounts[button.modelValue] }}
+        </span>
+      </template>
+    </TabButtons>
+
+    <TabButtons
+      v-model="inboxTab"
+      :options="inboxButtons"
+      type="underline"
+      size="md"
+    >
+      <template #prefix="{ button }">
+        <span :class="inboxIcons[button.modelValue]" class="size-4 shrink-0" />
+      </template>
+      <template #suffix="{ button }">
+        <span
+          class="rounded-full bg-surface-gray-2 px-1.5 text-xs text-ink-gray-7"
+        >
+          {{ inboxCounts[button.modelValue] }}
+        </span>
+      </template>
+    </TabButtons>
+
+    <TabButtons v-model="viewTab" :options="viewButtons" />
+  </div>
+</template>
diff --git a/src/components/TabButtons/stories/Sizes.vue b/src/components/TabButtons/stories/Sizes.vue
new file mode 100644
index 000000000..1af51258c
--- /dev/null
+++ b/src/components/TabButtons/stories/Sizes.vue
@@ -0,0 +1,26 @@
+<script setup>
+import { ref } from 'vue'
+import { TabButtons } from 'frappe-ui'
+
+const current = ref('list')
+const currentMd = ref('list')
+
+const buttons = [
+  { label: 'List', value: 'list', iconLeft: 'lucide-list' },
+  { label: 'Board', value: 'board', iconLeft: 'lucide-columns-3' },
+  { label: 'Calendar', value: 'calendar', iconLeft: 'lucide-calendar' },
+]
+</script>
+
+<template>
+  <div class="flex flex-col gap-5 p-2">
+    <div class="flex items-center gap-6">
+      <div class="w-16 text-sm text-ink-gray-6">Small</div>
+      <TabButtons v-model="current" :options="buttons" size="sm" />
+    </div>
+    <div class="flex items-center gap-6">
+      <div class="w-16 text-sm text-ink-gray-6">Medium</div>
+      <TabButtons v-model="currentMd" :options="buttons" size="md" />
+    </div>
+  </div>
+</template>
diff --git a/src/components/TabButtons/stories/Variants.vue b/src/components/TabButtons/stories/Variants.vue
new file mode 100644
index 000000000..f4dcdb2cc
--- /dev/null
+++ b/src/components/TabButtons/stories/Variants.vue
@@ -0,0 +1,40 @@
+<script setup>
+import { ref } from 'vue'
+import { TabButtons } from 'frappe-ui'
+
+const buttons = [
+  { label: 'Home', value: 'home', iconLeft: 'lucide-home' },
+  { label: 'Task', value: 'task', iconLeft: 'lucide-list-checks' },
+  { label: 'Contact', value: 'contact', iconLeft: 'lucide-contact' },
+  { label: 'Others', value: 'others', iconLeft: 'lucide-globe' },
+]
+
+const subtle = ref('task')
+const ghost = ref('task')
+const underline = ref('task')
+const browserTab = ref('task')
+</script>
+
+<template>
+  <div class="flex flex-col gap-6 p-2">
+    <div class="flex items-center gap-6">
+      <div class="w-24 text-sm text-ink-gray-6">Subtle</div>
+      <TabButtons v-model="subtle" :options="buttons" type="subtle" />
+    </div>
+
+    <div class="flex items-center gap-6">
+      <div class="w-24 text-sm text-ink-gray-6">Ghost</div>
+      <TabButtons v-model="ghost" :options="buttons" type="ghost" />
+    </div>
+
+    <div class="flex items-center gap-6">
+      <div class="w-24 text-sm text-ink-gray-6">Underline</div>
+      <TabButtons v-model="underline" :options="buttons" type="underline" />
+    </div>
+
+    <div class="flex items-center gap-6">
+      <div class="w-24 text-sm text-ink-gray-6">Browser tab</div>
+      <TabButtons v-model="browserTab" :options="buttons" type="browser-tab" />
+    </div>
+  </div>
+</template>
diff --git a/src/components/TabButtons/stories/Vertical.vue b/src/components/TabButtons/stories/Vertical.vue
new file mode 100644
index 000000000..3179ea6d1
--- /dev/null
+++ b/src/components/TabButtons/stories/Vertical.vue
@@ -0,0 +1,64 @@
+<script setup>
+import { ref } from 'vue'
+import { TabButtons } from 'frappe-ui'
+
+const subtle = ref('home')
+const underline = ref('home')
+const browserLeft = ref('home')
+const sidebar = ref('home')
+
+const navButtons = [
+  { label: 'Home', value: 'home', iconLeft: 'lucide-home' },
+  { label: 'Task', value: 'task', iconLeft: 'lucide-list-checks' },
+  { label: 'Contact', value: 'contact', iconLeft: 'lucide-contact' },
+  { label: 'Others', value: 'others', iconLeft: 'lucide-globe' },
+]
+
+const iconButtons = [
+  { label: 'Search', value: 'search', icon: 'lucide-search' },
+  { label: 'Inbox', value: 'inbox', icon: 'lucide-inbox' },
+  { label: 'Home', value: 'home', icon: 'lucide-home' },
+  { label: 'Team', value: 'team', icon: 'lucide-users' },
+  { label: 'Settings', value: 'settings', icon: 'lucide-settings' },
+]
+</script>
+
+<template>
+  <div class="flex items-start gap-10 p-2">
+    <div class="flex flex-col gap-3">
+      <div class="text-sm text-ink-gray-6">Subtle</div>
+      <TabButtons v-model="subtle" :options="navButtons" vertical />
+    </div>
+
+    <div class="flex flex-col gap-3">
+      <div class="text-sm text-ink-gray-6">Underline</div>
+      <TabButtons
+        v-model="underline"
+        :options="navButtons"
+        type="underline"
+        vertical
+      />
+    </div>
+
+    <div class="flex flex-col gap-3">
+      <div class="text-sm text-ink-gray-6">Browser tab</div>
+      <TabButtons
+        v-model="browserLeft"
+        :options="navButtons"
+        type="browser-tab"
+        vertical
+        direction="left"
+      />
+    </div>
+
+    <div class="flex flex-col gap-3">
+      <div class="text-sm text-ink-gray-6">Icon sidebar</div>
+      <TabButtons
+        v-model="sidebar"
+        :options="iconButtons"
+        type="ghost"
+        vertical
+      />
+    </div>
+  </div>
+</template>
diff --git a/src/components/TabButtons/types.ts b/src/components/TabButtons/types.ts
new file mode 100644
index 000000000..9163d6619
--- /dev/null
+++ b/src/components/TabButtons/types.ts
@@ -0,0 +1,49 @@
+import type { Component } from 'vue'
+import type { RouteLocationRaw } from 'vue-router'
+import type { PillSize } from '../Pill'
+
+export type TabButtonValue = string | number | boolean
+export type TabButtonIcon = string | Component
+export type NativeButtonClass = string | string[] | Record<string, boolean>
+export type TabButtonsType = 'subtle' | 'ghost' | 'underline' | 'browser-tab'
+export type TabButtonsDirection = 'left' | 'right'
+
+export interface TabButton {
+  label?: string | number
+  value?: TabButtonValue
+  /** Icon-only tab; `label` becomes accessibility text. */
+  icon?: TabButtonIcon
+  /** Leading accent icon, rendered next to the visible label. */
+  iconLeft?: TabButtonIcon
+  /** Trailing accent icon, rendered next to the visible label. */
+  iconRight?: TabButtonIcon
+  active?: boolean
+  disabled?: boolean
+  tooltip?: string
+  class?: NativeButtonClass
+  /** Renders the tab as a `<RouterLink>` to the given target. */
+  route?: RouteLocationRaw
+  /** Renders the tab as an `<a href>`, opens in a new tab. */
+  href?: string
+  onClick?: (event: MouseEvent) => void
+}
+
+export interface TabButtonsProps {
+  /** List of options to render. */
+  options?: TabButton[]
+
+  /** @deprecated Use `options` instead. */
+  buttons?: TabButton[]
+
+  modelValue?: TabButtonValue
+  type?: TabButtonsType
+  size?: PillSize
+  vertical?: boolean
+
+  /** Edge the active browser tab attaches to. Only used when `type='browser-tab'` and `vertical`. */
+  direction?: TabButtonsDirection
+}
+
+export interface TabButtonsEmits {
+  'update:modelValue': [value: TabButtonValue | undefined]
+}
diff --git a/src/components/Tabs/Tabs.md b/src/components/Tabs/Tabs.md
index aa64070c2..1158d7b9b 100644
--- a/src/components/Tabs/Tabs.md
+++ b/src/components/Tabs/Tabs.md
@@ -2,6 +2,10 @@
 
 Organizes content into separate panels that users can switch between. Makes navigating related sections quick and intuitive.
 
+## Playground
+
+<ClientOnly><TabsBuilder /></ClientOnly>
+
 ## Orientation
 <ComponentPreview name="Tabs-Orientation" />
 
diff --git a/src/components/Tabs/Tabs.vue b/src/components/Tabs/Tabs.vue
index 99944d731..dd6d0b344 100644
--- a/src/components/Tabs/Tabs.vue
+++ b/src/components/Tabs/Tabs.vue
@@ -84,7 +84,7 @@ defineSlots<{
         class="absolute rounded-full duration-300"
         :class="props.vertical ? indicatorYCss : indicatorXCss"
       >
-        <div class="w-full h-full bg-surface-gray-7" />
+        <div class="w-full h-full bg-surface-gray-10" />
       </TabsIndicator>
 
       <TabsTrigger as="template" v-for="(tab, i) in props.tabs" :value="i">
diff --git a/src/components/TextEditor/TextEditor.cy.ts b/src/components/TextEditor/TextEditor.cy.ts
index 098ff8fa6..06fbdfd3e 100644
--- a/src/components/TextEditor/TextEditor.cy.ts
+++ b/src/components/TextEditor/TextEditor.cy.ts
@@ -81,7 +81,7 @@ describe('<TextEditor />', () => {
     })
 
     // The fixed menu component in TextEditor.vue has these specific classes
-    cy.get('.rounded-t-lg.border.border-outline-gray-modals').should('exist')
+    cy.get('.rounded-t-lg.border.border-outline-elevation-2').should('exist')
     // Should contain some default buttons like Bold
     cy.get('button[title="Bold"]').should('exist')
   })
diff --git a/src/components/TextEditor/TextEditor.vue b/src/components/TextEditor/TextEditor.vue
index 027126ed4..5f05ac731 100644
--- a/src/components/TextEditor/TextEditor.vue
+++ b/src/components/TextEditor/TextEditor.vue
@@ -9,7 +9,7 @@
   >
     <TextEditorBubbleMenu :buttons="bubbleMenu" :options="bubbleMenuOptions" />
     <TextEditorFixedMenu
-      class="w-full overflow-x-auto rounded-t-lg border border-outline-gray-modals"
+      class="w-full overflow-x-auto rounded-t-lg border border-outline-elevation-2"
       :buttons="fixedMenu"
     />
     <TextEditorFloatingMenu :buttons="floatingMenu" />
@@ -84,7 +84,10 @@ import { getTagExtensions } from './extensions/tag'
 function defaultUploadFunction(file: File) {
   // useFileUpload is frappe specific
   let fileUpload = useFileUpload()
-  return fileUpload.upload(file, props.uploadArgs || {})
+  // Default uploads to private so editor images/attachments are not served from
+  // the unauthenticated /files/ path (frappe/security#206). Callers can still
+  // override via uploadArgs (e.g. `private: false` for intentionally public files).
+  return fileUpload.upload(file, { private: true, ...(props.uploadArgs || {}) })
 }
 
 const props = withDefaults(defineProps<TextEditorProps>(), {
diff --git a/src/components/TextEditor/components/FontColor.vue b/src/components/TextEditor/components/FontColor.vue
index a8da8b603..4cecf19a7 100644
--- a/src/components/TextEditor/components/FontColor.vue
+++ b/src/components/TextEditor/components/FontColor.vue
@@ -97,7 +97,7 @@ export default {
     },
     backgroundColors() {
       return [
-        { name: 'Default', class: 'border-outline-gray-modals' },
+        { name: 'Default', class: 'border-outline-elevation-2' },
         {
           name: 'Red',
           class: 'bg-red-100 dark:bg-dark-red-800 border-transparent',
diff --git a/src/components/TextEditor/components/LinkPopup.vue b/src/components/TextEditor/components/LinkPopup.vue
index 25596c36c..62c91d164 100644
--- a/src/components/TextEditor/components/LinkPopup.vue
+++ b/src/components/TextEditor/components/LinkPopup.vue
@@ -1,6 +1,6 @@
 <template>
   <div
-    class="p-2 w-72 flex items-center gap-2 bg-surface-white shadow-xl rounded"
+    class="p-2 w-72 flex items-center gap-2 bg-surface-base shadow-xl rounded"
   >
     <TextInput
       v-if="edit"
diff --git a/src/components/TextEditor/components/MediaNodeView.vue b/src/components/TextEditor/components/MediaNodeView.vue
index 92e607a27..a9344c351 100644
--- a/src/components/TextEditor/components/MediaNodeView.vue
+++ b/src/components/TextEditor/components/MediaNodeView.vue
@@ -290,39 +290,39 @@ const wrapperClasses = (float: string) => [
           :class="selected && isEditable ? 'flex' : 'hidden'">
           <button>
             <LucideCaptions @click="toggleCaptions" class="size-4"
-              :class="[showCaption ? 'text-ink-white' : 'text-ink-gray-4']" />
+              :class="[showCaption ? 'text-ink-base' : 'text-ink-gray-4']" />
           </button>
           <button v-if="!isVideo" @click.stop="toggleAlignPopper"
-            class="hover:text-ink-white text-ink-gray-4"
-            :class="[node.attrs.align ? 'text-ink-white' : 'text-ink-gray-4']">
+            class="hover:text-ink-base text-ink-gray-4"
+            :class="[node.attrs.align ? 'text-ink-base' : 'text-ink-gray-4']">
             <component :is="currentAlignIcon" class="size-4" />
           </button>
-          <!-- <button @click.stop="toggleFloatPopper" class="hover:text-ink-white text-ink-gray-4"
-            :class="[node.attrs.float ? 'text-ink-white' : 'text-ink-gray-4']">
+          <!-- <button @click.stop="toggleFloatPopper" class="hover:text-ink-base text-ink-gray-4"
+            :class="[node.attrs.float ? 'text-ink-base' : 'text-ink-gray-4']">
             <component :is="currentFloatIcon" class="size-4" />
           </button> -->
 
           <div ref="alignButtonRef" v-if="showAlignPopper && !isVideo"
             class="absolute top-full mt-1 right-6 bg-black/65 rounded shadow-lg px-1.5 py-1 z-50 gap-2.5 flex items-center">
             <Tooltip text="Align left" class="h-5">
-              <button @click="setAlignment('left')" class="text-ink-gray-4 hover:text-ink-white" :class="node.attrs.align === 'left'
-                ? 'text-ink-white'
+              <button @click="setAlignment('left')" class="text-ink-gray-4 hover:text-ink-base" :class="node.attrs.align === 'left'
+                ? 'text-ink-base'
                 : 'text-ink-gray-4'
                 ">
                 <LucideAlignLeft class="size-4" />
               </button>
             </Tooltip>
             <Tooltip text="Align center" class="h-5">
-              <button @click="setAlignment('center')" class="text-ink-gray-4 hover:text-ink-white" :class="node.attrs.align === 'center'
-                ? 'text-ink-white'
+              <button @click="setAlignment('center')" class="text-ink-gray-4 hover:text-ink-base" :class="node.attrs.align === 'center'
+                ? 'text-ink-base'
                 : 'text-ink-gray-4'
                 ">
                 <LucideAlignCenter class="size-4" />
               </button>
             </Tooltip>
             <Tooltip text="Align right" class="h-5">
-              <button @click="setAlignment('right')" class="text-ink-gray-4 hover:text-ink-white" :class="node.attrs.align === 'right'
-                ? 'text-ink-white'
+              <button @click="setAlignment('right')" class="text-ink-gray-4 hover:text-ink-base" :class="node.attrs.align === 'right'
+                ? 'text-ink-base'
                 : 'text-ink-gray-4'
                 ">
                 <LucideAlignRight class="size-4" />
@@ -333,23 +333,23 @@ const wrapperClasses = (float: string) => [
           <div v-if="showFloatPopper" ref="floatButtonRef"
             class="absolute top-full mt-1 right-0 bg-black/65 rounded shadow-lg px-1.5 py-1 z-50 gap-2.5 flex items-center">
             <Tooltip text="Float left" class="h-5">
-              <button @click="setFloat('left')" class="text-ink-gray-4 hover:text-ink-white" :class="node.attrs.float === 'left'
-                ? 'text-ink-white'
+              <button @click="setFloat('left')" class="text-ink-gray-4 hover:text-ink-base" :class="node.attrs.float === 'left'
+                ? 'text-ink-base'
                 : 'text-ink-gray-4'
                 ">
                 <LucideFloatLeft class="size-4" />
               </button>
             </Tooltip>
             <Tooltip text="Float right" class="h-5">
-              <button @click="setFloat('right')" class="text-ink-gray-4 hover:text-ink-white" :class="node.attrs.float === 'right'
-                ? 'text-ink-white'
+              <button @click="setFloat('right')" class="text-ink-gray-4 hover:text-ink-base" :class="node.attrs.float === 'right'
+                ? 'text-ink-base'
                 : 'text-ink-gray-4'
                 ">
                 <LucideFloatRight class="size-4" />
               </button>
             </Tooltip>
             <Tooltip v-if="node.attrs.float" text="Remove float" class="h-5">
-              <button @click="setFloat(null)" class="text-ink-gray-4 hover:text-ink-white hover:bg-transparent">
+              <button @click="setFloat(null)" class="text-ink-gray-4 hover:text-ink-base hover:bg-transparent">
                 <LucideNoFloat class="size-4" />
               </button>
             </Tooltip>
@@ -381,7 +381,7 @@ const wrapperClasses = (float: string) => [
       </div>
       <div v-else class="flex flex-col items-center justify-center gap-2 border rounded text-ink-gray-6 text-sm py-5 max-w-full" :class="{ 'border-none': selected }" :style="{ width: node.attrs.width + 'px', aspectRatio: node.attrs.width && node.attrs.height ? `${node.attrs.width} / ${node.attrs.height}` : undefined,}">
         <div class="text-ink-gray-8 text-base">This {{ isVideo ? 'video' : 'image' }} hasn't yet been uploaded.</div>
-        <div v-if="node.attrs.error" class="text-sm text-ink-red-4">Upload failed: {{ node.attrs.error }}</div>
+        <div v-if="node.attrs.error" class="text-sm text-ink-red-8">Upload failed: {{ node.attrs.error }}</div>
       </div>
 
       <input v-if="(node.attrs.alt || showCaption) && !node.attrs.error" v-model="caption"
diff --git a/src/components/TextEditor/components/MentionList.vue b/src/components/TextEditor/components/MentionList.vue
index eac67f88d..62d22f80e 100644
--- a/src/components/TextEditor/components/MentionList.vue
+++ b/src/components/TextEditor/components/MentionList.vue
@@ -2,7 +2,7 @@
   <div>
     <div
       v-if="items.length"
-      class="min-w-40 rounded-lg border bg-surface-white p-1 text-base shadow-lg"
+      class="min-w-40 rounded-lg border bg-surface-base p-1 text-base shadow-lg"
     >
       <button
         :class="[
diff --git a/src/components/TextEditor/components/Menu.vue b/src/components/TextEditor/components/Menu.vue
index de589d177..e4dec3286 100644
--- a/src/components/TextEditor/components/Menu.vue
+++ b/src/components/TextEditor/components/Menu.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="inline-flex bg-surface-white p-1">
+  <div class="inline-flex bg-surface-base p-1">
     <div class="inline-flex items-center gap-1.5">
       <template
         v-for="(button, index) in buttons"
@@ -16,7 +16,7 @@
             <Popover>
               <template #target="{ togglePopover }">
                 <button
-                  class="rounded p-1 text-base font-medium text-ink-gray-8 transition-colors"
+                  class="rounded p-1 text-base-medium text-ink-gray-8 transition-colors"
                   @click="togglePopover"
                   :class="
                     getActiveButton(button)
@@ -36,7 +36,7 @@
               </template>
               <template #body="{ close }">
                 <ul
-                  class="p-1.5 mt-2 rounded-lg bg-surface-modal shadow-2xl ring-1 ring-black ring-opacity-5 focus:outline-none"
+                  class="p-1.5 mt-2 rounded-lg bg-surface-elevation-2 shadow-2xl ring-1 ring-black ring-opacity-5 focus:outline-none"
                 >
                   <li
                     v-for="option in button"
diff --git a/src/components/TextEditor/extensions/iframe/IframeNodeView.vue b/src/components/TextEditor/extensions/iframe/IframeNodeView.vue
index 44f3331eb..5d20cc150 100644
--- a/src/components/TextEditor/extensions/iframe/IframeNodeView.vue
+++ b/src/components/TextEditor/extensions/iframe/IframeNodeView.vue
@@ -282,7 +282,7 @@ function setCursorBeforeIframe() {
           class="flex items-center justify-center bg-surface-gray-1 rounded-lg w-[640px] h-[360px]"
         >
           <div class="text-ink-gray-5 text-center">
-            <div class="text-lg mb-1">🔗</div>
+            <div class="text-xl mb-1">🔗</div>
             <div class="text-sm">Loading embed...</div>
           </div>
         </div>
diff --git a/src/components/TextEditor/extensions/iframe/InsertIframe.vue b/src/components/TextEditor/extensions/iframe/InsertIframe.vue
index 7d5a513be..3627262cb 100644
--- a/src/components/TextEditor/extensions/iframe/InsertIframe.vue
+++ b/src/components/TextEditor/extensions/iframe/InsertIframe.vue
@@ -10,7 +10,7 @@
       <template #body-content>
         <div class="space-y-4">
           <div>
-            <label class="block text-sm font-medium text-ink-gray-7 mb-2">
+            <label class="block text-sm-medium text-ink-gray-7 mb-2">
               URL or Embed Code
             </label>
             <Textarea
@@ -25,7 +25,7 @@
             </p>
             <p
               v-else-if="embedUrl && isValidUrl"
-              class="text-ink-green-3 text-sm mt-1"
+              class="text-ink-green-6 text-sm mt-1"
             >
               ✓ Valid {{ platformInfo.platform }} URL
             </p>
diff --git a/src/components/TextEditor/extensions/image-group/ImageGroupNodeView.vue b/src/components/TextEditor/extensions/image-group/ImageGroupNodeView.vue
index 863e8ee82..464b7ffa7 100644
--- a/src/components/TextEditor/extensions/image-group/ImageGroupNodeView.vue
+++ b/src/components/TextEditor/extensions/image-group/ImageGroupNodeView.vue
@@ -12,7 +12,7 @@
       </div>
       <div class="grid gap-px" :style="gridStyle">
         <div v-for="(img, idx) in images" :key="img.attrs.src + idx"
-          class="relative aspect-square w-full h-full overflow-hidden bg-surface-white group">
+          class="relative aspect-square w-full h-full overflow-hidden bg-surface-base group">
           <button v-if="isEditable" type="button"
             class="absolute top-1 right-1 z-10 bg-white/80 hover:bg-white rounded-full p-1 shadow transition-opacity opacity-0 group-hover:opacity-100 focus:opacity-100"
             aria-label="Remove image" @click.stop="removeImage(idx)">
diff --git a/src/components/TextEditor/extensions/image-group/ImageGroupUploadDialog.vue b/src/components/TextEditor/extensions/image-group/ImageGroupUploadDialog.vue
index 19c7beb25..9c37c017d 100644
--- a/src/components/TextEditor/extensions/image-group/ImageGroupUploadDialog.vue
+++ b/src/components/TextEditor/extensions/image-group/ImageGroupUploadDialog.vue
@@ -35,7 +35,7 @@
           <div
             v-for="(item, idx) in images"
             :key="item.id"
-            class="relative aspect-square w-full h-full overflow-hidden group bg-surface-white"
+            class="relative aspect-square w-full h-full overflow-hidden group bg-surface-base"
             :draggable="true"
             @dragstart="onDragStart(idx)"
             @dragover="onDragOver($event, idx)"
@@ -182,7 +182,7 @@
             <div class="text-ink-gray-4 mb-2">
               <LucideImagePlus class="size-6" />
             </div>
-            <div class="text-ink-gray-5 text-sm font-medium">
+            <div class="text-ink-gray-5 text-sm-medium">
               Drag & drop images here or click to select
             </div>
           </div>
@@ -193,7 +193,7 @@
           </div>
           <div class="w-full bg-gray-200 rounded h-2 overflow-hidden">
             <div
-              class="bg-surface-gray-5 h-2 transition-all"
+              class="bg-surface-gray-8 h-2 transition-all"
               :style="{ width: uploadProgress + '%' }"
             ></div>
           </div>
@@ -244,7 +244,7 @@
         v-if="isFileDragging"
         class="fixed inset-0 z-50 bg-gray-900/60 pointer-events-none flex items-center justify-center"
       >
-        <div class="text-ink-gray-1 text-base font-medium">
+        <div class="text-ink-gray-1 text-base-medium">
           Drop images anywhere
         </div>
       </div>
diff --git a/src/components/TextEditor/extensions/suggestion/SuggestionList.vue b/src/components/TextEditor/extensions/suggestion/SuggestionList.vue
index 2157dd0f0..9dcdb6e4f 100644
--- a/src/components/TextEditor/extensions/suggestion/SuggestionList.vue
+++ b/src/components/TextEditor/extensions/suggestion/SuggestionList.vue
@@ -2,7 +2,7 @@
   <div
     v-if="items.length"
     ref="container"
-    class="relative max-h-[300px] min-w-40 overflow-y-auto rounded-lg bg-surface-white p-1 text-base shadow-lg"
+    class="relative max-h-[300px] min-w-40 overflow-y-auto rounded-lg bg-surface-base p-1 text-base shadow-lg"
     :class="containerClass"
   >
     <button
diff --git a/src/components/TextEditor/extensions/toc-node/TocNodeView.vue b/src/components/TextEditor/extensions/toc-node/TocNodeView.vue
index d90ca91b4..29b8cb9ca 100644
--- a/src/components/TextEditor/extensions/toc-node/TocNodeView.vue
+++ b/src/components/TextEditor/extensions/toc-node/TocNodeView.vue
@@ -21,7 +21,7 @@
     <button
       v-if="isEditable"
       @click="removeNode"
-      class="absolute top-2 right-2 bg-black/65 hover:bg-black/80 text-ink-gray-4 hover:text-ink-white p-1 rounded opacity-0 group-hover:opacity-100 transition-opacity"
+      class="absolute top-2 right-2 bg-black/65 hover:bg-black/80 text-ink-gray-4 hover:text-ink-base p-1 rounded opacity-0 group-hover:opacity-100 transition-opacity"
       title="Remove table of contents"
     >
       <span class="lucide-x size-4" />
diff --git a/src/components/TextInput/TextInput.cy.ts b/src/components/TextInput/TextInput.cy.ts
index ab767eada..6b2ce3d3a 100644
--- a/src/components/TextInput/TextInput.cy.ts
+++ b/src/components/TextInput/TextInput.cy.ts
@@ -17,13 +17,13 @@ const inputTypes = [
 const sizeCLass = {
   sm: 'text-base rounded h-7',
   md: 'text-base rounded h-8',
-  lg: 'text-lg rounded-md h-10',
-  xl: 'text-xl rounded-md h-10',
+  lg: 'text-xl rounded-md h-10',
+  xl: 'text-3xl rounded-md h-10',
 }
 
 const variantClasses = {
   subtle: 'bg-surface-gray-2',
-  outline: 'bg-surface-white',
+  outline: 'bg-surface-base',
   ghost: 'border-0',
 }
 
diff --git a/src/components/TextInput/TextInput.md b/src/components/TextInput/TextInput.md
index 308c2c8b6..4f594a6ca 100644
--- a/src/components/TextInput/TextInput.md
+++ b/src/components/TextInput/TextInput.md
@@ -2,6 +2,10 @@
 
 A flexible input for entering text, numbers etc. Supports many sizes, styles, and custom slots.
 
+## Playground
+
+<ClientOnly><TextInputBuilder /></ClientOnly>
+
 <ComponentPreview name="TextInput-Default" layout="stacked" />
 
 ## Variants
diff --git a/src/components/TextInput/TextInput.vue b/src/components/TextInput/TextInput.vue
index 6214dac85..b35e0c54d 100644
--- a/src/components/TextInput/TextInput.vue
+++ b/src/components/TextInput/TextInput.vue
@@ -10,7 +10,7 @@
       :for-id="inputId"
       :label="props.label"
       :required="props.required"
-      class="text-p-sm font-medium text-ink-gray-7"
+      class="text-p-sm-medium text-ink-gray-7"
     >
       <template v-if="$slots.label" #default="slotProps">
         <slot name="label" v-bind="slotProps" />
@@ -159,8 +159,8 @@ const inputClasses = computed(() => {
   let sizeClasses = {
     sm: 'text-base rounded h-7',
     md: 'text-base rounded h-8',
-    lg: 'text-lg rounded-md h-10',
-    xl: 'text-xl rounded-md h-10',
+    lg: 'text-xl rounded-md h-10',
+    xl: 'text-3xl rounded-md h-10',
   }[props.size]
 
   let paddingClasses = {
@@ -189,16 +189,16 @@ const inputClasses = computed(() => {
   let variant = props.disabled ? 'disabled' : props.variant
   let variantClasses = {
     subtle:
-      'border border-[--surface-gray-2] bg-surface-gray-2 placeholder-ink-gray-4 hover:border-outline-gray-modals hover:bg-surface-gray-3 focus:bg-surface-white focus:border-outline-gray-4 focus:shadow-sm focus:ring-0 focus-visible:ring-2 focus-visible:ring-outline-gray-3',
+      'border border-[--surface-gray-2] bg-surface-gray-2 placeholder-ink-gray-4 hover:border-outline-elevation-2 hover:bg-surface-gray-3 focus:bg-surface-base focus:border-outline-gray-4 focus:shadow-sm focus:ring-0',
     outline:
-      'border border-outline-gray-2 bg-surface-white placeholder-ink-gray-4 hover:border-outline-gray-3 hover:shadow-sm focus:bg-surface-white focus:border-outline-gray-4 focus:shadow-sm focus:ring-0 focus-visible:ring-2 focus-visible:ring-outline-gray-3',
+      'border border-outline-gray-2 bg-surface-base placeholder-ink-gray-4 hover:border-outline-gray-3 hover:shadow-sm focus:bg-surface-base focus:border-outline-gray-4 focus:shadow-sm focus:ring-0',
     disabled: [
       'border bg-surface-gray-1 placeholder-ink-gray-3',
       props.variant === 'outline'
         ? 'border-outline-gray-2'
         : 'border-transparent',
     ],
-    ghost: 'border-0 focus:ring-0 focus-visible:ring-0',
+    ghost: 'border-0 focus:ring-0 focus-visible:outline-none',
   }[variant]
 
   return [
diff --git a/src/components/TextInput/stories/Slots.vue b/src/components/TextInput/stories/Slots.vue
index 5276763ef..33d2e3700 100644
--- a/src/components/TextInput/stories/Slots.vue
+++ b/src/components/TextInput/stories/Slots.vue
@@ -6,7 +6,7 @@ import { TextInput } from 'frappe-ui'
   <TextInput placeholder="acme" required>
     <template #label="{ required }">
       <span class="font-semibold">Workspace name</span>
-      <span v-if="required" class="text-ink-red-3">*</span>
+      <span v-if="required" class="text-ink-red-6">*</span>
     </template>
     <template #description>
       <span class="italic">Lowercase letters and dashes only.</span>
diff --git a/src/components/Textarea/Textarea.cy.ts b/src/components/Textarea/Textarea.cy.ts
index ff8919bc7..d25ac74b7 100644
--- a/src/components/Textarea/Textarea.cy.ts
+++ b/src/components/Textarea/Textarea.cy.ts
@@ -37,7 +37,7 @@ describe('Textarea', () => {
 
     cy.get('textarea')
       .should('have.class', 'border-outline-gray-2')
-      .and('have.class', 'bg-surface-white')
+      .and('have.class', 'bg-surface-base')
   })
 
   it('renders disabled state', () => {
diff --git a/src/components/Textarea/Textarea.md b/src/components/Textarea/Textarea.md
index 6916def2c..2f6d69be1 100644
--- a/src/components/Textarea/Textarea.md
+++ b/src/components/Textarea/Textarea.md
@@ -2,6 +2,10 @@
 
 A multi-line input for entering longer text. Supports clear editing and flexible sizing for different content needs.
 
+## Playground
+
+<ClientOnly><TextareaBuilder /></ClientOnly>
+
 <ComponentPreview name="Textarea-Default" layout="stacked" />
 
 ## Variants
diff --git a/src/components/Textarea/Textarea.vue b/src/components/Textarea/Textarea.vue
index 43d365dd8..68af0af17 100644
--- a/src/components/Textarea/Textarea.vue
+++ b/src/components/Textarea/Textarea.vue
@@ -10,7 +10,7 @@
       :for-id="inputId"
       :label="props.label"
       :required="props.required"
-      class="text-p-sm font-medium text-ink-gray-7"
+      class="text-p-sm-medium text-ink-gray-7"
     >
       <template v-if="$slots.label" #default="slotProps">
         <slot name="label" v-bind="slotProps" />
@@ -119,8 +119,8 @@ const inputClasses = computed(() => {
   let sizeClasses = {
     sm: 'text-base rounded',
     md: 'text-base rounded',
-    lg: 'text-lg rounded-md',
-    xl: 'text-xl rounded-md',
+    lg: 'text-xl rounded-md',
+    xl: 'text-3xl rounded-md',
   }[props.size]
 
   let paddingClasses = {
@@ -133,16 +133,16 @@ const inputClasses = computed(() => {
   let variant = props.disabled ? 'disabled' : props.variant
   let variantClasses = {
     subtle:
-      'border border-[--surface-gray-2] bg-surface-gray-2 placeholder-ink-gray-4 hover:border-outline-gray-modals hover:bg-surface-gray-3 focus:bg-surface-white focus:border-outline-gray-4 focus:shadow-sm focus:ring-0 focus-visible:ring-2 focus-visible:ring-outline-gray-3',
+      'border border-[--surface-gray-2] bg-surface-gray-2 placeholder-ink-gray-4 hover:border-outline-elevation-2 hover:bg-surface-gray-3 focus:bg-surface-base focus:border-outline-gray-4 focus:shadow-sm focus:ring-0',
     outline:
-      'border border-outline-gray-2 bg-surface-white placeholder-ink-gray-4 hover:border-outline-gray-3 hover:shadow-sm focus:bg-surface-white focus:border-outline-gray-4 focus:shadow-sm focus:ring-0 focus-visible:ring-2 focus-visible:ring-outline-gray-3',
+      'border border-outline-gray-2 bg-surface-base placeholder-ink-gray-4 hover:border-outline-gray-3 hover:shadow-sm focus:bg-surface-base focus:border-outline-gray-4 focus:shadow-sm focus:ring-0',
     disabled: [
       'border bg-surface-gray-1 placeholder-ink-gray-3',
       props.variant === 'outline'
         ? 'border-outline-gray-2'
         : 'border-transparent',
     ],
-    ghost: 'border-0 focus:ring-0 focus-visible:ring-0',
+    ghost: 'border-0 focus:ring-0 focus-visible:outline-none',
   }[variant]
 
   return [
diff --git a/src/components/TimePicker/TimePicker.vue b/src/components/TimePicker/TimePicker.vue
index 001792f8c..64687aece 100644
--- a/src/components/TimePicker/TimePicker.vue
+++ b/src/components/TimePicker/TimePicker.vue
@@ -54,7 +54,7 @@
           ref="panelRef"
           data-slot="content-body"
           :data-motion="motion"
-          class="time-picker-panel max-h-48 w-44 overflow-y-auto rounded-lg bg-surface-modal p-1 text-base shadow-2xl ring-1 ring-black ring-opacity-5 focus:outline-none"
+          class="time-picker-panel max-h-48 w-44 overflow-y-auto rounded-lg bg-surface-elevation-2 p-1 text-base shadow-2xl ring-1 ring-black ring-opacity-5 focus:outline-none"
           style="transform-origin: var(--reka-popover-content-transform-origin)"
           role="listbox"
           :aria-activedescendant="activeDescendantId"
diff --git a/src/components/TimePicker/stories/Range.vue b/src/components/TimePicker/stories/Range.vue
index 5a264a8a8..fecb8009e 100644
--- a/src/components/TimePicker/stories/Range.vue
+++ b/src/components/TimePicker/stories/Range.vue
@@ -9,7 +9,7 @@ const shiftEnd = ref('17:00')
 
 <template>
   <div class="flex w-full max-w-md flex-col gap-3">
-    <span class="text-sm font-medium text-ink-gray-7">Shift hours</span>
+    <span class="text-sm-medium text-ink-gray-7">Shift hours</span>
     <div class="grid grid-cols-2 gap-3">
       <div class="flex flex-col gap-1.5">
         <span class="text-xs text-ink-gray-6">From</span>
diff --git a/src/components/Toast/Toast.md b/src/components/Toast/Toast.md
index cf683a22e..16b5f34cf 100644
--- a/src/components/Toast/Toast.md
+++ b/src/components/Toast/Toast.md
@@ -20,7 +20,7 @@ Add an `action` to give the user a way to respond. Combine with `duration: Infin
 
 ## Custom icon
 
-Pass a render function to `icon` to replace the default type icon — handy for branding moments, custom imagery, or domain-specific glyphs. Use the `lucide-*` class form for any Lucide icon; size and color are controlled with regular utilities (`size-4`, `text-ink-red-2`, …).
+Pass a render function to `icon` to replace the default type icon — handy for branding moments, custom imagery, or domain-specific glyphs. Use the `lucide-*` class form for any Lucide icon; size and color are controlled with regular utilities (`size-4`, `text-ink-red-5`, …).
 
 <ComponentPreview name="Toast-CustomIcon" />
 
diff --git a/src/components/Toast/Toast.vue b/src/components/Toast/Toast.vue
index 4eaf650c5..f55d262f0 100644
--- a/src/components/Toast/Toast.vue
+++ b/src/components/Toast/Toast.vue
@@ -4,7 +4,7 @@
     :duration="closable ? duration : 0"
     :class="[
       'toast-root-animatable',
-      'bg-surface-gray-6 border-none rounded-md px-4 py-1.5 shadow-lg flex items-center justify-between gap-3 min-w-[280px] max-w-[400px] pointer-events-auto list-none',
+      'bg-surface-gray-9 border-none rounded-md px-4 py-1.5 shadow-lg flex items-center justify-between gap-3 min-w-[280px] max-w-[400px] pointer-events-auto list-none',
     ]"
   >
     <div class="flex items-center gap-2 flex-grow overflow-hidden">
@@ -12,21 +12,21 @@
         <component v-if="icon" :is="icon" class="flex-shrink-0 size-4" />
         <CircleCheck
           v-else-if="type == 'success'"
-          class="flex-shrink-0 size-4 text-ink-green-2"
+          class="flex-shrink-0 size-4 text-ink-green-5"
         />
         <span
           v-else-if="type == 'warning'"
-          class="lucide-alert-triangle flex-shrink-0 size-4 text-ink-amber-2"
+          class="lucide-alert-triangle flex-shrink-0 size-4 text-ink-amber-5"
         />
         <span
           v-else-if="type == 'error'"
-          class="lucide-info flex-shrink-0 size-4 text-ink-red-2"
+          class="lucide-info flex-shrink-0 size-4 text-ink-red-5"
         />
       </div>
       <div class="flex flex-col flex-grow overflow-hidden">
         <ToastDescription
           v-if="message"
-          class="text-p-sm break-words text-ink-white"
+          class="text-p-sm break-words text-ink-base"
           v-html="message"
         />
       </div>
@@ -34,7 +34,7 @@
     <div class="flex items-center gap-2 h-7">
       <ToastAction
         v-if="action"
-        class="flex-shrink-0 rounded px-2 py-1 text-sm text-ink-blue-link hover:text-ink-gray-3 focus:outline-none focus-visible:ring focus-visible:ring-outline-gray-4"
+        class="flex-shrink-0 rounded px-2 py-1 text-sm text-ink-blue-link hover:text-ink-gray-3"
         :alt-text="action.altText || action.label"
         @click="handleAction"
       >
@@ -43,7 +43,7 @@
       <ToastClose
         v-if="closable"
         aria-label="Close"
-        class="flex-shrink-0 rounded p-1 text-ink-white hover:text-ink-gray-3 focus:outline-none focus-visible:ring focus-visible:ring-outline-gray-4"
+        class="flex-shrink-0 rounded p-1 text-ink-base hover:text-ink-gray-3"
       >
         <span class="lucide-x size-4" />
       </ToastClose>
diff --git a/src/components/Toast/ToastProvider.vue b/src/components/Toast/ToastProvider.vue
index 44dd36774..2afa0de2b 100644
--- a/src/components/Toast/ToastProvider.vue
+++ b/src/components/Toast/ToastProvider.vue
@@ -9,18 +9,18 @@
       unstyled: true,
       classes: {
         toast:
-          'group py-2.5 flex items-center px-4 bg-surface-gray-6 rounded-md shadow-xl w-[360px] after:bg-transparent',
-        title: 'text-p-base font-medium text-ink-white',
-        description: 'text-p-base text-ink-white',
-        icon: 'mr-2 text-ink-white [&_svg]:size-4',
+          'group py-2.5 flex items-center px-4 bg-surface-gray-9 rounded-md shadow-xl w-[360px] after:bg-transparent',
+        title: 'text-p-base font-medium text-ink-base',
+        description: 'text-p-base text-ink-base',
+        icon: 'mr-2 text-ink-base [&_svg]:size-4',
         closeButton:
-          'order-1 ml-auto group-has-[[data-action]]:ml-0 grid place-items-center rounded-sm text-ink-white hover:bg-surface-gray-5 size-5 !transition-colors [&_svg]:size-4',
+          'order-1 ml-auto group-has-[[data-action]]:ml-0 grid place-items-center rounded-sm text-ink-base hover:bg-surface-gray-8 size-5 !transition-colors [&_svg]:size-4',
         actionButton:
-          'flex shrink-0 text-ink-blue-link font-medium py-1.5 px-2 h-7 text-base mr-2 ml-auto bg-transparent hover:bg-surface-gray-5 rounded !transition-colors',
+          'flex shrink-0 text-ink-blue-link font-medium py-1.5 px-2 h-7 text-base mr-2 ml-auto bg-transparent hover:bg-surface-gray-8 rounded !transition-colors',
         cancelButton:
-          'flex text-ink-blue-link font-medium py-1.5 px-2 text-base hover:bg-surface-gray-5 transition-colors',
-        error: '[&_[data-icon]]:text-ink-red-2',
-        warning: '[&_[data-icon]]:text-ink-amber-2',
+          'flex text-ink-blue-link font-medium py-1.5 px-2 text-base hover:bg-surface-gray-8 transition-colors',
+        error: '[&_[data-icon]]:text-ink-red-5',
+        warning: '[&_[data-icon]]:text-ink-amber-5',
       },
     }"
   />
diff --git a/src/components/Toast/stories/CustomIcon.vue b/src/components/Toast/stories/CustomIcon.vue
index c1b95f32d..cc41846a1 100644
--- a/src/components/Toast/stories/CustomIcon.vue
+++ b/src/components/Toast/stories/CustomIcon.vue
@@ -11,7 +11,7 @@ function celebrate() {
 function favorited() {
   toast('Added to favorites', {
     description: 'Find it later in your saved items.',
-    icon: () => h('span', { class: 'lucide-heart size-4 text-ink-red-2' }),
+    icon: () => h('span', { class: 'lucide-heart size-4 text-ink-red-5' }),
   })
 }
 
diff --git a/src/components/Tooltip/Tooltip.api.md b/src/components/Tooltip/Tooltip.api.md
index 7bf3b0d04..961752760 100644
--- a/src/components/Tooltip/Tooltip.api.md
+++ b/src/components/Tooltip/Tooltip.api.md
@@ -23,7 +23,7 @@
     name: 'placement',
     description: 'Position of the tooltip relative to the trigger.',
     required: false,
-    type: '"bottom" | "top" | "right" | "left"',
+    type: '"left" | "right" | "bottom" | "top"',
     default: '"top"'
   },
   {
@@ -31,7 +31,7 @@
     description: 'Custom classes applied to the tooltip arrow.',
     required: false,
     type: 'any',
-    default: '"fill-surface-gray-7"'
+    default: '"fill-surface-gray-10"'
   },
   {
     name: 'disabled',
@@ -65,7 +65,7 @@
     name: 'side',
     description: 'Preferred popover side relative to the trigger.',
     required: false,
-    type: '"bottom" | "top" | "right" | "left"',
+    type: '"left" | "right" | "bottom" | "top"',
     default: '"top"'
   },
   {
@@ -79,7 +79,7 @@
     description: 'Fill class for the arrow — defaults to match the bubble shell.',
     required: false,
     type: 'string',
-    default: '"fill-surface-gray-7"'
+    default: '"fill-surface-gray-10"'
   }
 ]
 
diff --git a/src/components/Tooltip/Tooltip.md b/src/components/Tooltip/Tooltip.md
index db268aa7d..fb7443e20 100644
--- a/src/components/Tooltip/Tooltip.md
+++ b/src/components/Tooltip/Tooltip.md
@@ -2,6 +2,10 @@
 
 A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.
 
+## Playground
+
+<ClientOnly><TooltipBuilder /></ClientOnly>
+
 ## Default
 <ComponentPreview name="Tooltip-Examples" />
 
diff --git a/src/components/Tooltip/Tooltip.vue b/src/components/Tooltip/Tooltip.vue
index e9dd45760..d66560b08 100644
--- a/src/components/Tooltip/Tooltip.vue
+++ b/src/components/Tooltip/Tooltip.vue
@@ -17,7 +17,7 @@ const props = withDefaults(defineProps<TooltipProps>(), {
   text: '',
   placement: 'top',
   hoverDelay: 0.5,
-  arrowClass: 'fill-surface-gray-7',
+  arrowClass: 'fill-surface-gray-10',
   disabled: false,
 })
 
diff --git a/src/components/Tooltip/TooltipBubble.vue b/src/components/Tooltip/TooltipBubble.vue
index 4df13d26a..91d657825 100644
--- a/src/components/Tooltip/TooltipBubble.vue
+++ b/src/components/Tooltip/TooltipBubble.vue
@@ -21,7 +21,7 @@ withDefaults(
     /** Fill class for the arrow — defaults to match the bubble shell. */
     arrowClass?: string
   }>(),
-  { side: 'top', arrowClass: 'fill-surface-gray-7' },
+  { side: 'top', arrowClass: 'fill-surface-gray-10' },
 )
 
 defineSlots<{
@@ -39,7 +39,7 @@ defineSlots<{
     <TooltipContent :side="side" :side-offset="4" class="z-[100]">
       <slot name="body">
         <div
-          class="rounded bg-surface-gray-7 px-2 py-1 text-xs text-ink-white shadow-xl"
+          class="rounded bg-surface-gray-10 px-2 py-1 text-xs text-ink-base shadow-xl"
         >
           <slot name="content">
             <slot>{{ text }}</slot>
diff --git a/src/components/Tooltip/stories/Slots.vue b/src/components/Tooltip/stories/Slots.vue
index 90de6cd6a..5bc1137ad 100644
--- a/src/components/Tooltip/stories/Slots.vue
+++ b/src/components/Tooltip/stories/Slots.vue
@@ -3,10 +3,10 @@ import { Button, Tooltip } from 'frappe-ui'
 </script>
 
 <template>
-  <Tooltip arrow-class="fill-surface-white" placement="top">
+  <Tooltip arrow-class="fill-surface-base" placement="top">
     <template #body>
       <div
-        class="min-w-[6rem] rounded bg-surface-white px-2 py-1 text-xs text-ink-gray-9 shadow-xl"
+        class="min-w-[6rem] rounded bg-surface-base px-2 py-1 text-xs text-ink-gray-9 shadow-xl"
       >
         Test
       </div>
diff --git a/src/components/VueGridLayout/Layout.vue b/src/components/VueGridLayout/Layout.vue
index 262946607..cb1d7d6d5 100644
--- a/src/components/VueGridLayout/Layout.vue
+++ b/src/components/VueGridLayout/Layout.vue
@@ -31,7 +31,7 @@
         :max-w="l.maxW"
         :max-h="l.maxH"
       >
-        <pre class="h-full w-full rounded bg-surface-white p-4 shadow">{{
+        <pre class="h-full w-full rounded bg-surface-base p-4 shadow">{{
           {
             i: l.i,
             x: l.x,
diff --git a/src/components/shared/selection/utils.ts b/src/components/shared/selection/utils.ts
index 95ac18985..3be660d41 100644
--- a/src/components/shared/selection/utils.ts
+++ b/src/components/shared/selection/utils.ts
@@ -24,8 +24,8 @@ export function inputFontSizeClasses(size: SelectionSize) {
   return {
     sm: 'text-base',
     md: 'text-base',
-    lg: 'text-lg',
-    xl: 'text-xl',
+    lg: 'text-xl',
+    xl: 'text-3xl',
   }[size]
 }
 
@@ -56,9 +56,9 @@ export function triggerVariantClasses(
 
   return {
     subtle:
-      'border border-[--surface-gray-2] bg-surface-gray-2 hover:border-outline-gray-modals hover:bg-surface-gray-3',
+      'border border-[--surface-gray-2] bg-surface-gray-2 hover:border-outline-elevation-2 hover:bg-surface-gray-3',
     outline:
-      'border border-outline-gray-2 bg-surface-white hover:border-outline-gray-3',
+      'border border-outline-gray-2 bg-surface-base hover:border-outline-gray-3',
     ghost:
       'border border-transparent bg-transparent hover:bg-surface-gray-3 focus-within:bg-surface-gray-3',
   }[variant]
@@ -70,10 +70,10 @@ export function triggerVariantClasses(
  * on the trigger itself.
  */
 export const triggerBaseClassesFocusVisible =
-  'relative inline-flex items-center gap-2 text-left text-ink-gray-7 outline-none transition-[background-color,border-color,box-shadow] duration-150 ease-[cubic-bezier(0.23,1,0.32,1)] focus-visible:ring-2 data-[state=open]:ring-2 ring-outline-gray-3'
+  'relative inline-flex items-center gap-2 text-left text-ink-gray-7 transition-[background-color,border-color,box-shadow] duration-150 ease-[cubic-bezier(0.23,1,0.32,1)] data-[state=open]:focus-ring'
 
 export const triggerBaseClassesFocusWithin =
-  'relative inline-flex items-center gap-2 text-left text-ink-gray-7 outline-none transition-[background-color,border-color,box-shadow] duration-150 ease-[cubic-bezier(0.23,1,0.32,1)] focus-within:ring-2 data-[state=open]:ring-2 ring-outline-gray-3'
+  'relative inline-flex items-center gap-2 text-left text-ink-gray-7 outline-none transition-[background-color,border-color,box-shadow] duration-150 ease-[cubic-bezier(0.23,1,0.32,1)] focus-within:focus-ring data-[state=open]:focus-ring'
 
 export const itemClasses =
   'select-none rounded border-0 text-base text-ink-gray-9 transition-colors duration-100 ease-out data-[disabled]:text-ink-gray-4 data-[highlighted]:bg-surface-gray-2 data-[state=checked]:bg-surface-gray-3 data-[highlighted]:data-[state=checked]:bg-surface-gray-4'
diff --git a/src/index.ts b/src/index.ts
index a0792329f..b4cea156c 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -18,6 +18,7 @@ export * from './components/Divider'
 export * from './components/Dropdown'
 export * from './components/ErrorMessage'
 export { default as FeatherIcon } from './components/FeatherIcon.vue'
+export * from './components/Icon'
 export * from './components/FileUploader'
 export * from './components/FormControl'
 export { default as FormLabel } from './components/FormLabel.vue'
@@ -45,6 +46,7 @@ export * from './components/MonthPicker'
 export * from './components/MultiSelect'
 export * from './components/Password'
 export * from './components/Popover'
+export * from './components/Pill'
 export * from './components/Progress'
 export * from './components/Rating'
 export { default as Resource } from './components/Resource.vue'
diff --git a/src/molecules/editor/EditorBubbleMenu.vue b/src/molecules/editor/EditorBubbleMenu.vue
index 00f64d3d9..992c6adcb 100644
--- a/src/molecules/editor/EditorBubbleMenu.vue
+++ b/src/molecules/editor/EditorBubbleMenu.vue
@@ -37,7 +37,7 @@ const floatingOptions = computed(() => {
   >
     <div
       data-slot="bubble-menu"
-      class="flex items-center gap-1 rounded border border-outline-gray-2 bg-surface-white p-1 shadow-sm"
+      class="flex items-center gap-1 rounded border border-outline-gray-2 bg-surface-elevation-2 p-1 shadow-sm"
     >
       <MenuItems :editor="editor" :items="items" />
     </div>
diff --git a/src/molecules/editor/EditorContent.vue b/src/molecules/editor/EditorContent.vue
index 8b335f981..5edb81d1e 100644
--- a/src/molecules/editor/EditorContent.vue
+++ b/src/molecules/editor/EditorContent.vue
@@ -54,6 +54,39 @@ const rootAttrs = computed(() => {
   return rest
 })
 
+/**
+ * The content-styling tokens this component owns: our default prose typography
+ * plus whatever the consumer passed via `class`.
+ */
+const editorClassTokens = computed(() =>
+  normalizeClass([proseClass.value, attrs.class]).split(' ').filter(Boolean),
+)
+
+/**
+ * Apply `editorClassTokens` to the element with `classList`, adding/removing
+ * only the tokens we own.
+ *
+ * ProseMirror mounts directly onto `rootEl` and shares its `class` attribute:
+ * it adds `ProseMirror`/`tiptap` and toggles `ProseMirror-focused`. A Vue
+ * `:class` bound to the same element would be a second, non-surgical writer —
+ * each re-render replaces the whole token list, dropping ProseMirror's classes
+ * and silently breaking every `.ProseMirror`-scoped editor style (table borders,
+ * etc.). ProseMirror itself only ever adds/removes its own decoration tokens
+ * (see prosemirror-view `patchAttributes`), so mirroring that here — touching
+ * only our tokens — lets both owners coexist on one attribute.
+ */
+let appliedTokens: string[] = []
+function syncClasses() {
+  const el = rootEl.value
+  if (!el) return
+  const next = editorClassTokens.value
+  for (const token of appliedTokens) {
+    if (!next.includes(token)) el.classList.remove(token)
+  }
+  el.classList.add(...next)
+  appliedTokens = next
+}
+
 function mountEditor(editor: Editor | null) {
   const el = rootEl.value
   if (!el) return
@@ -85,21 +118,29 @@ function unmountEditor() {
   mountedEditor = null
 }
 
-onMounted(() => mountEditor(resolvedEditor.value))
+onMounted(() => {
+  syncClasses()
+  mountEditor(resolvedEditor.value)
+})
 
 watch(resolvedEditor, async (editor) => {
   await nextTick()
   mountEditor(editor)
 })
 
+// Reactive consumer/prose classes update via our own surgical classList sync,
+// not a Vue `:class` binding (which would clobber ProseMirror's classes).
+watch(editorClassTokens, syncClasses)
+
 onBeforeUnmount(() => unmountEditor())
 </script>
 
 <template>
-  <div
-    ref="rootEl"
-    data-slot="editor-content"
-    v-bind="rootAttrs"
-    :class="[proseClass, attrs.class]"
-  />
+  <!--
+    No `:class` here on purpose — `rootEl` is also ProseMirror's editor element,
+    so its `class` attribute has two owners. Vue's `:class` is a wholesale
+    replace and would drop ProseMirror's classes; instead `syncClasses` manages
+    only our tokens via classList. See `editorClassTokens` above.
+  -->
+  <div ref="rootEl" data-slot="editor-content" v-bind="rootAttrs" />
 </template>
diff --git a/src/molecules/editor/EditorFloatingMenu.vue b/src/molecules/editor/EditorFloatingMenu.vue
index 0dfe921a4..639ebe80e 100644
--- a/src/molecules/editor/EditorFloatingMenu.vue
+++ b/src/molecules/editor/EditorFloatingMenu.vue
@@ -37,7 +37,7 @@ const floatingOptions = computed(() => {
   >
     <div
       data-slot="floating-menu"
-      class="flex items-center gap-1 rounded border border-outline-gray-2 bg-surface-white p-1 shadow-sm"
+      class="flex items-center gap-1 rounded border border-outline-gray-2 bg-surface-elevation-2 p-1 shadow-sm"
     >
       <MenuItems :editor="editor" :items="items" />
     </div>
diff --git a/src/molecules/editor/EditorTableMenu.vue b/src/molecules/editor/EditorTableMenu.vue
index 8dbdce949..740639b8b 100644
--- a/src/molecules/editor/EditorTableMenu.vue
+++ b/src/molecules/editor/EditorTableMenu.vue
@@ -8,7 +8,8 @@ import {
   watch,
 } from 'vue'
 import { computePosition, flip, offset, shift } from '@floating-ui/dom'
-import { CellSelection, cellAround } from '@tiptap/pm/tables'
+import { CellSelection, cellAround, isInTable, selectionCell } from '@tiptap/pm/tables'
+import { verticalScrollParent } from './extensions/table/drag-scroll'
 import MenuItems from './MenuItems.vue'
 import TableContextMenu from './components/TableContextMenu.vue'
 import { tableToolbar } from './menu'
@@ -67,17 +68,70 @@ function activeTableEl(ed: Editor): HTMLElement | null {
   return null
 }
 
+/**
+ * The vertical band the toolbar may occupy: the visible part of the editor's
+ * scroll container (so a pinned toolbar never floats over the app chrome
+ * above/below it), clamped to the viewport.
+ */
+function verticalBounds(table: HTMLElement): { top: number; bottom: number } {
+  const parent = verticalScrollParent(table)
+  if (parent === document.scrollingElement || parent === document.documentElement) {
+    return { top: 0, bottom: window.innerHeight }
+  }
+  const rect = parent.getBoundingClientRect()
+  return {
+    top: Math.max(rect.top, 0),
+    bottom: Math.min(rect.bottom, window.innerHeight),
+  }
+}
+
+/** Whether any part of the table is visible inside its scroll container. */
+function tableInView(table: HTMLElement): boolean {
+  const rect = table.getBoundingClientRect()
+  const bounds = verticalBounds(table)
+  return (
+    rect.bottom > bounds.top &&
+    rect.top < bounds.bottom &&
+    rect.right > 0 &&
+    rect.left < window.innerWidth
+  )
+}
+
 function reposition() {
-  const reference = anchor.value
+  const table = anchor.value
   const el = floating.value
-  if (!reference || !el) return
+  if (!table || !el) return
+  // A wide table scrolls inside its `.tableWrapper` (overflow-x: auto), so the
+  // table's own horizontal center can be scrolled out of view — centering the
+  // toolbar on it would float it over the clipped region. Anchor instead to the
+  // part of the table actually visible inside the wrapper's viewport: the
+  // horizontal intersection of table and wrapper. That collapses to the table
+  // for a narrow (fully visible) table and to the visible window for a wide,
+  // scrolled one. Vertical anchor stays at the table's top edge.
+  const wrapper = table.closest<HTMLElement>('.tableWrapper')
+  const reference = wrapper
+    ? {
+        getBoundingClientRect: () => {
+          const t = table.getBoundingClientRect()
+          const w = wrapper.getBoundingClientRect()
+          const left = Math.max(t.left, w.left)
+          const right = Math.min(t.right, w.right)
+          return new DOMRect(left, t.top, Math.max(0, right - left), 0)
+        },
+      }
+    : table
   void computePosition(reference, el, {
     strategy: 'fixed',
     placement: 'top',
     middleware: [offset(4), flip(), shift({ padding: 8 })],
   }).then(({ x, y }) => {
+    // Pin the toolbar inside the visible band while scrolling through a tall
+    // table, instead of letting it follow the table's top edge off-screen.
+    const bounds = verticalBounds(table)
+    const minY = bounds.top + 4
+    const maxY = bounds.bottom - el.offsetHeight - 4
     el.style.left = `${x}px`
-    el.style.top = `${y}px`
+    el.style.top = `${Math.min(Math.max(y, minY), Math.max(maxY, minY))}px`
   })
 }
 
@@ -85,9 +139,9 @@ function sync() {
   const ed = editor.value
   const table = ed ? activeTableEl(ed) : null
   anchor.value = table
-  visible.value = !!table
+  visible.value = !!table && tableInView(table)
   // Wait for v-show to reveal the element before measuring it.
-  if (table) void nextTick(reposition)
+  if (visible.value) void nextTick(reposition)
 }
 
 // --- Right-click context menu ---------------------------------------------
@@ -131,20 +185,44 @@ function onContextMenu(event: MouseEvent) {
     left: event.clientX,
     top: event.clientY,
   })
-  if (!coords) return
-  const $cell = cellAround(ed.state.doc.resolve(coords.pos))
-  if (!$cell) return // not in a table — let the native menu through
+  let $cell = coords ? cellAround(ed.state.doc.resolve(coords.pos)) : null
+  let point = { x: event.clientX, y: event.clientY }
+  if (!$cell) {
+    // A real right-click outside any table — let the native menu through.
+    if (event.button === 2) return
+    // Keyboard-initiated (ContextMenu key / Shift+F10) events carry no usable
+    // coordinates; fall back to the active cell and anchor the menu to it.
+    if (!isInTable(ed.state)) return
+    $cell = selectionCell(ed.state)
+    const cellDom = ed.view.nodeDOM($cell.pos)
+    if (!(cellDom instanceof HTMLElement)) return
+    const rect = cellDom.getBoundingClientRect()
+    point = { x: rect.left + Math.min(rect.width / 2, 24), y: rect.bottom - 4 }
+  }
   event.preventDefault()
-  // Select the right-clicked cell so the actions target it.
-  ed.view.dispatch(
-    ed.state.tr.setSelection(CellSelection.create(ed.state.doc, $cell.pos)),
-  )
-  openContextMenu(ed, event.clientX, event.clientY)
+  // Keep an existing multi-cell selection when the click lands inside it — the
+  // menu is the natural place to act on the selected block (merge, color).
+  // Otherwise select the right-clicked cell so the actions target it.
+  const selection = ed.state.selection
+  let inSelection = false
+  if (selection instanceof CellSelection) {
+    selection.forEachCell((_node, pos) => {
+      if (pos === $cell!.pos) inSelection = true
+    })
+  }
+  if (!inSelection) {
+    ed.view.dispatch(
+      ed.state.tr.setSelection(CellSelection.create(ed.state.doc, $cell.pos)),
+    )
+  }
+  openContextMenu(ed, point.x, point.y)
 }
 
-// (Re)subscribe whenever the editor instance changes. Repositioning is driven by
-// transactions (selection / content) and by scroll/resize — anchored to the
-// table, so cell-to-cell caret moves don't move the toolbar.
+// (Re)subscribe whenever the editor instance changes. The toolbar shows on
+// transactions (selection / content) and follows the table on scroll/resize —
+// re-clamped into the scroll container's visible band by `reposition`, and
+// hidden only once the table itself scrolls out of view.
+let scrollRaf = 0
 watch(
   editor,
   (ed, _old, onCleanup) => {
@@ -153,12 +231,19 @@ watch(
       return
     }
     const onChange = () => sync()
-    const onScroll = () => reposition()
+    const onScroll = () => {
+      if (scrollRaf) return
+      scrollRaf = requestAnimationFrame(() => {
+        scrollRaf = 0
+        sync()
+      })
+    }
+    const onResize = () => sync()
     ed.on('transaction', onChange)
     ed.on('focus', onChange)
     // Capture phase so inner scroll containers are caught too.
     document.addEventListener('scroll', onScroll, true)
-    window.addEventListener('resize', onScroll)
+    window.addEventListener('resize', onResize)
     // Bound on document (not the view DOM) so it never touches `ed.view` before
     // the view is mounted; the handler scopes itself to this editor.
     document.addEventListener('contextmenu', onContextMenu, true)
@@ -166,8 +251,10 @@ watch(
     onCleanup(() => {
       ed.off('transaction', onChange)
       ed.off('focus', onChange)
+      if (scrollRaf) cancelAnimationFrame(scrollRaf)
+      scrollRaf = 0
       document.removeEventListener('scroll', onScroll, true)
-      window.removeEventListener('resize', onScroll)
+      window.removeEventListener('resize', onResize)
       document.removeEventListener('contextmenu', onContextMenu, true)
       closeContextMenu()
     })
@@ -185,7 +272,7 @@ onBeforeUnmount(closeContextMenu)
         v-show="visible && editor"
         ref="floating"
         data-slot="table-menu"
-        class="fixed left-0 top-0 z-[100] flex items-center gap-1 rounded-lg border border-outline-gray-2 bg-surface-white p-1 shadow-sm"
+        class="fixed left-0 top-0 z-[100] flex items-center gap-1 rounded-lg border border-outline-gray-2 bg-surface-elevation-2 p-1 shadow-sm"
       >
         <MenuItems v-if="editor" :editor="editor" :items="tableToolbar" />
       </div>
diff --git a/src/molecules/editor/MenuItems.vue b/src/molecules/editor/MenuItems.vue
index e37a0ae05..5ea270c43 100644
--- a/src/molecules/editor/MenuItems.vue
+++ b/src/molecules/editor/MenuItems.vue
@@ -41,6 +41,13 @@ function isItemDisabled(item: CommandMenuItem): boolean {
   return !props.editor || item.isDisabled?.(props.editor) === true
 }
 
+/** Display label, honoring state-dependent `getLabel` (e.g. merge vs split). */
+function labelOf(item: CommandMenuItem): string {
+  void version.value
+  if (props.editor && item.getLabel) return item.getLabel(props.editor)
+  return item.label
+}
+
 // Renders an item's glyph: a `lucide-*` (or any) string becomes a masked icon
 // span (sized here so item definitions stay terse); a component renders as-is;
 // with no icon we fall back to the label text.
@@ -142,7 +149,7 @@ function run(item: CommandMenuItem, event?: MouseEvent) {
         data-slot="menu-group"
         class="flex items-center gap-1"
       >
-        <span class="px-2 text-sm font-medium text-ink-gray-7">{{
+        <span class="px-2 text-sm-medium text-ink-gray-7">{{
           item.label
         }}</span>
         <Tooltip
@@ -162,11 +169,11 @@ function run(item: CommandMenuItem, event?: MouseEvent) {
           </button>
         </Tooltip>
       </div>
-      <Tooltip v-else :text="item.label">
+      <Tooltip v-else :text="labelOf(item)">
         <button
           type="button"
           class="inline-flex size-6 items-center justify-center rounded text-sm text-ink-gray-7 hover:bg-surface-gray-3 disabled:cursor-not-allowed disabled:opacity-50 aria-pressed:bg-surface-gray-3"
-          :aria-label="item.label"
+          :aria-label="labelOf(item)"
           :aria-pressed="isPressed(item)"
           :disabled="isItemDisabled(item)"
           @click="run(item, $event)"
diff --git a/src/molecules/editor/components/EditorDropZone.vue b/src/molecules/editor/components/EditorDropZone.vue
index 0cab89606..def1b1ddd 100644
--- a/src/molecules/editor/components/EditorDropZone.vue
+++ b/src/molecules/editor/components/EditorDropZone.vue
@@ -88,11 +88,11 @@ const overlayLabel = computed(() => {
             :class="
               isOverZone
                 ? 'border-outline-gray-4 bg-surface-gray-2/80'
-                : 'border-outline-gray-3 bg-surface-white/70'
+                : 'border-outline-gray-3 bg-surface-base/70'
             "
           >
             <span
-              class="text-base font-medium transition-colors duration-150"
+              class="text-base-medium transition-colors duration-150"
               :class="isOverZone ? 'text-ink-gray-8' : 'text-ink-gray-5'"
             >
               {{ overlayLabel }}
diff --git a/src/molecules/editor/components/EditorPopover.vue b/src/molecules/editor/components/EditorPopover.vue
index 92280e3d8..7c60481e9 100644
--- a/src/molecules/editor/components/EditorPopover.vue
+++ b/src/molecules/editor/components/EditorPopover.vue
@@ -5,7 +5,7 @@
     tabindex="-1"
     :loop="loop"
     :trapped="trapped"
-    class="editor-popover border border-outline-gray-1 bg-surface-white shadow-xl outline-none"
+    class="editor-popover border border-outline-gray-1 bg-surface-elevation-2 shadow-xl outline-none"
     :class="contentClass"
     @mount-auto-focus="onMountAutoFocus"
     @unmount-auto-focus="onUnmountAutoFocus"
diff --git a/src/molecules/editor/components/MediaNodeView.vue b/src/molecules/editor/components/MediaNodeView.vue
index 91a46d1ec..66882ab37 100644
--- a/src/molecules/editor/components/MediaNodeView.vue
+++ b/src/molecules/editor/components/MediaNodeView.vue
@@ -296,7 +296,7 @@ function setVideoOptions(options: {
           aria-live="assertive"
           class="absolute inset-0 z-10 flex flex-col items-center justify-center gap-2 bg-black/65 p-3 text-center"
         >
-          <div class="text-p-sm text-ink-white">{{ node.attrs.error }}</div>
+          <div class="text-p-sm text-ink-base">{{ node.attrs.error }}</div>
           <div v-if="isEditable" class="flex flex-wrap justify-center gap-2">
             <Button size="xs" variant="subtle" @click.stop="retryUpload">
               Try again
diff --git a/src/molecules/editor/components/MediaToolbar.vue b/src/molecules/editor/components/MediaToolbar.vue
index dbf012c63..084194a81 100644
--- a/src/molecules/editor/components/MediaToolbar.vue
+++ b/src/molecules/editor/components/MediaToolbar.vue
@@ -87,7 +87,7 @@ onUnmounted(() => {
       >
         <span
           class="lucide-captions size-4"
-          :class="[showCaption ? 'text-ink-white' : 'text-ink-gray-4']"
+          :class="[showCaption ? 'text-ink-base' : 'text-ink-gray-4']"
         />
       </button>
     </Tooltip>
@@ -99,7 +99,7 @@ onUnmounted(() => {
         @click.stop="emit('replace')"
       >
         <span
-          class="size-4 text-ink-gray-4 hover:text-ink-white"
+          class="size-4 text-ink-gray-4 hover:text-ink-base"
           :class="mediaType === 'embed' ? 'lucide-link' : 'lucide-refresh-cw'"
         />
       </button>
@@ -113,9 +113,9 @@ onUnmounted(() => {
     >
       <button
         type="button"
-        class="hover:text-ink-white"
+        class="hover:text-ink-base"
         :class="
-          node.attrs.align === align.value ? 'text-ink-white' : 'text-ink-gray-4'
+          node.attrs.align === align.value ? 'text-ink-base' : 'text-ink-gray-4'
         "
         :aria-label="align.label"
         :aria-pressed="node.attrs.align === align.value"
@@ -128,8 +128,8 @@ onUnmounted(() => {
     <button
       v-if="isVideo"
       type="button"
-      class="hover:text-ink-white"
-      :class="showVideoOptions ? 'text-ink-white' : 'text-ink-gray-4'"
+      class="hover:text-ink-base"
+      :class="showVideoOptions ? 'text-ink-base' : 'text-ink-gray-4'"
       aria-label="Video options"
       @click.stop="toggleVideoOptions"
     >
@@ -145,7 +145,7 @@ onUnmounted(() => {
         v-for="option in videoOptionKeys"
         :key="option"
         type="button"
-        class="flex w-full items-center justify-between rounded px-2 py-1 text-left text-xs text-ink-gray-2 hover:bg-white/10 hover:text-ink-white"
+        class="flex w-full items-center justify-between rounded px-2 py-1 text-left text-xs text-ink-gray-2 hover:bg-white/10 hover:text-ink-base"
         :aria-pressed="Boolean(node.attrs[option])"
         @click.stop="toggleVideoOption(option)"
       >
diff --git a/src/molecules/editor/components/TableContextMenu.vue b/src/molecules/editor/components/TableContextMenu.vue
index 1fb2d4aa4..ee3b6d2a8 100644
--- a/src/molecules/editor/components/TableContextMenu.vue
+++ b/src/molecules/editor/components/TableContextMenu.vue
@@ -1,13 +1,15 @@
 <script setup lang="ts">
-import { computed } from 'vue'
+import { computed, onBeforeUnmount, onMounted, useTemplateRef } from 'vue'
 import type { Editor } from '../useEditor'
 import type { CommandMenuItem, MenuItem } from '../menu'
 
 /**
  * Vertical, labelled table actions for the right-click context menu. Renders the
- * same `tableToolbar` items the floating toolbar uses (icon + label here), and
- * runs them against the editor. Mounted imperatively by `EditorTableMenu` via
- * `useFloatingPopup`, which owns positioning and outside-click / Escape close.
+ * same `tableToolbar` items the floating toolbar uses (icon + label here, plus a
+ * check for toggle items), and runs them against the editor. Mounted
+ * imperatively by `EditorTableMenu` via `useFloatingPopup`, which owns
+ * positioning and outside-click / Escape close; arrow-key focus is handled
+ * here, menu-style.
  */
 const props = defineProps<{
   editor: Editor
@@ -42,10 +44,18 @@ const visible = computed<MenuItem[]>(() => {
   return out
 })
 
+function labelOf(item: CommandMenuItem): string {
+  return item.getLabel?.(props.editor) ?? item.label
+}
+
 function disabled(item: CommandMenuItem): boolean {
   return item.isDisabled?.(props.editor) === true
 }
 
+function isChecked(item: CommandMenuItem): boolean {
+  return item.isActive?.(props.editor) === true
+}
+
 function run(item: CommandMenuItem, event: MouseEvent): void {
   if (disabled(item)) return
   item.action(props.editor, {
@@ -54,12 +64,53 @@ function run(item: CommandMenuItem, event: MouseEvent): void {
   })
   props.onRun?.()
 }
+
+// --- Menu-style keyboard support -------------------------------------------
+const menuEl = useTemplateRef<HTMLElement>('menu')
+
+function focusables(): HTMLButtonElement[] {
+  return Array.from(
+    menuEl.value?.querySelectorAll<HTMLButtonElement>('button:not(:disabled)') ??
+      [],
+  )
+}
+
+onMounted(() => focusables()[0]?.focus())
+
+// The popup host removes the menu without restoring focus; hand it back to the
+// editor so keyboard users don't land on <body>.
+onBeforeUnmount(() => {
+  if (menuEl.value?.contains(document.activeElement)) {
+    try {
+      props.editor.view.focus()
+    } catch {
+      // view already destroyed
+    }
+  }
+})
+
+function onKeydown(event: KeyboardEvent) {
+  const list = focusables()
+  if (!list.length) return
+  const index = list.indexOf(document.activeElement as HTMLButtonElement)
+  let next = -1
+  if (event.key === 'ArrowDown') next = (index + 1) % list.length
+  else if (event.key === 'ArrowUp')
+    next = index <= 0 ? list.length - 1 : index - 1
+  else if (event.key === 'Home') next = 0
+  else if (event.key === 'End') next = list.length - 1
+  else return
+  event.preventDefault()
+  list[next]?.focus()
+}
 </script>
 
 <template>
   <div
+    ref="menu"
     role="menu"
-    class="min-w-[208px] rounded-lg border border-outline-gray-1 bg-surface-white p-1 text-base shadow-xl outline-none"
+    class="min-w-[208px] rounded-lg border border-outline-gray-1 bg-surface-elevation-2 p-1 text-base shadow-xl outline-none"
+    @keydown="onKeydown"
   >
     <template v-for="(item, index) in visible" :key="index">
       <div
@@ -70,8 +121,9 @@ function run(item: CommandMenuItem, event: MouseEvent): void {
       <button
         v-else-if="isCommand(item)"
         type="button"
-        role="menuitem"
-        class="flex w-full items-center gap-2 rounded px-2 py-1.5 text-left text-ink-gray-8 hover:bg-surface-gray-3 disabled:cursor-not-allowed disabled:opacity-50"
+        :role="item.isActive ? 'menuitemcheckbox' : 'menuitem'"
+        :aria-checked="item.isActive ? isChecked(item) : undefined"
+        class="flex w-full items-center gap-2 rounded px-2 py-1.5 text-left text-ink-gray-8 hover:bg-surface-gray-3 focus-visible:bg-surface-gray-3 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50"
         :disabled="disabled(item)"
         @click="run(item, $event)"
       >
@@ -80,7 +132,12 @@ function run(item: CommandMenuItem, event: MouseEvent): void {
           :class="['size-4 shrink-0', item.icon]"
           aria-hidden="true"
         />
-        <span>{{ item.label }}</span>
+        <span>{{ labelOf(item) }}</span>
+        <span
+          v-if="isChecked(item)"
+          class="lucide-check ml-auto size-4 shrink-0"
+          aria-hidden="true"
+        />
       </button>
     </template>
   </div>
diff --git a/src/molecules/editor/components/VideoControls.vue b/src/molecules/editor/components/VideoControls.vue
index 2a6b9d002..64b557ef4 100644
--- a/src/molecules/editor/components/VideoControls.vue
+++ b/src/molecules/editor/components/VideoControls.vue
@@ -148,7 +148,7 @@ function onTrackPointerUp() {
     <Tooltip :text="playing ? 'Pause' : 'Play'" class="h-5">
       <button
         type="button"
-        class="text-ink-gray-2 hover:text-ink-white"
+        class="text-ink-gray-2 hover:text-ink-base"
         :aria-label="playing ? 'Pause' : 'Play'"
         @click="togglePlay"
       >
@@ -184,7 +184,7 @@ function onTrackPointerUp() {
     <Tooltip :text="muted ? 'Unmute' : 'Mute'" class="h-5">
       <button
         type="button"
-        class="text-ink-gray-2 hover:text-ink-white"
+        class="text-ink-gray-2 hover:text-ink-base"
         :aria-label="muted ? 'Unmute' : 'Mute'"
         @click="toggleMute"
       >
@@ -197,7 +197,7 @@ function onTrackPointerUp() {
     <Tooltip text="Fullscreen" class="h-5">
       <button
         type="button"
-        class="text-ink-gray-2 hover:text-ink-white"
+        class="text-ink-gray-2 hover:text-ink-base"
         aria-label="Fullscreen"
         @click="toggleFullscreen"
       >
diff --git a/src/molecules/editor/components/font-color/swatches.ts b/src/molecules/editor/components/font-color/swatches.ts
index 1c20cb444..b1de6043e 100644
--- a/src/molecules/editor/components/font-color/swatches.ts
+++ b/src/molecules/editor/components/font-color/swatches.ts
@@ -76,7 +76,7 @@ const DEFAULT_TEXT_SWATCH: ColorSwatch = {
 const DEFAULT_HIGHLIGHT_SWATCH: ColorSwatch = {
   value: null,
   label: 'Default',
-  class: 'border-outline-gray-modals',
+  class: 'border-outline-elevation-2',
 }
 
 /** Text-color swatches, "Default" first, then the palette in canonical order. */
diff --git a/src/molecules/editor/components/table-size-picker/TableSizePicker.vue b/src/molecules/editor/components/table-size-picker/TableSizePicker.vue
new file mode 100644
index 000000000..29ad534ec
--- /dev/null
+++ b/src/molecules/editor/components/table-size-picker/TableSizePicker.vue
@@ -0,0 +1,92 @@
+<script setup lang="ts">
+import { nextTick, onMounted, ref, useTemplateRef } from 'vue'
+import EditorPopover from '../EditorPopover.vue'
+
+/**
+ * "Pick N×M" hover grid for inserting a table. Pointer users sweep the grid;
+ * keyboard users grow/shrink the size with arrows and confirm with Enter.
+ */
+const MAX_COLS = 8
+const MAX_ROWS = 6
+
+const props = defineProps<{
+  onPick: (size: { rows: number; cols: number }) => void
+}>()
+
+const rows = ref(3)
+const cols = ref(3)
+const grid = useTemplateRef<HTMLElement>('grid')
+
+// Self-managed focus (EditorPopover gets autofocus=false): the grid div is the
+// keyboard surface; FocusScope's first-tabbable scan would land elsewhere.
+onMounted(() => void nextTick(() => grid.value?.focus()))
+
+function setSize(r: number, c: number) {
+  rows.value = r
+  cols.value = c
+}
+
+function pick(r: number, c: number) {
+  props.onPick({ rows: r, cols: c })
+}
+
+function onKeydown(event: KeyboardEvent) {
+  const step: Record<string, [number, number]> = {
+    ArrowDown: [1, 0],
+    ArrowUp: [-1, 0],
+    ArrowRight: [0, 1],
+    ArrowLeft: [0, -1],
+  }
+  const delta = step[event.key]
+  if (delta) {
+    event.preventDefault()
+    rows.value = Math.min(Math.max(rows.value + delta[0], 1), MAX_ROWS)
+    cols.value = Math.min(Math.max(cols.value + delta[1], 1), MAX_COLS)
+  } else if (event.key === 'Enter') {
+    event.preventDefault()
+    pick(rows.value, cols.value)
+  }
+}
+</script>
+
+<template>
+  <EditorPopover
+    dialog-label="Insert table"
+    content-class="rounded-md p-2.5"
+    :autofocus="false"
+  >
+    <div data-slot="table-size-picker">
+      <div
+        ref="grid"
+        tabindex="0"
+        role="grid"
+        :aria-label="`Table size, ${rows} rows by ${cols} columns`"
+        class="grid w-max gap-1 outline-none"
+        :style="{ gridTemplateColumns: `repeat(${MAX_COLS}, minmax(0, 1fr))` }"
+        @keydown="onKeydown"
+      >
+        <template v-for="r in MAX_ROWS" :key="r">
+          <button
+            v-for="c in MAX_COLS"
+            :key="c"
+            type="button"
+            tabindex="-1"
+            class="size-4 rounded-sm border"
+            :class="
+              r <= rows && c <= cols
+                ? 'border-outline-gray-3 bg-surface-gray-4'
+                : 'border-outline-gray-2 bg-surface-gray-1'
+            "
+            :aria-label="`${r} × ${c}`"
+            @pointerenter="setSize(r, c)"
+            @focus="setSize(r, c)"
+            @click="pick(r, c)"
+          />
+        </template>
+      </div>
+      <div class="mt-2 text-center text-sm text-ink-gray-7">
+        {{ rows }} × {{ cols }}
+      </div>
+    </div>
+  </EditorPopover>
+</template>
diff --git a/src/molecules/editor/components/table-size-picker/tableSizePickerController.ts b/src/molecules/editor/components/table-size-picker/tableSizePickerController.ts
new file mode 100644
index 000000000..2b482f438
--- /dev/null
+++ b/src/molecules/editor/components/table-size-picker/tableSizePickerController.ts
@@ -0,0 +1,40 @@
+import type { Editor } from '@tiptap/core'
+import { useFloatingPopup } from '#molecules/editor/composables/useFloatingPopup'
+import TableSizePicker from './TableSizePicker.vue'
+
+let activePopup: ReturnType<typeof useFloatingPopup> | null = null
+
+/**
+ * Open the insert-table size picker, anchored to a trigger button (toolbar) or
+ * an arbitrary rect (the caret, for the slash command). The anchor rect is
+ * snapshotted into a virtual reference — the trigger may leave the DOM while
+ * the picker is open (e.g. a closing menu), and the slash command's caret
+ * coordinates aren't an element at all.
+ */
+export function openTableSizePicker(args: {
+  editor: Editor
+  anchor?: HTMLElement
+  reference?: DOMRect
+}): void {
+  activePopup?.destroy()
+  const anchor = args.anchor ?? (args.editor.view.dom as HTMLElement)
+  const rect = args.reference ?? anchor.getBoundingClientRect()
+  activePopup = useFloatingPopup({
+    anchor,
+    component: TableSizePicker,
+    props: {
+      onPick: ({ rows, cols }: { rows: number; cols: number }) => {
+        const editor = args.editor
+        activePopup?.destroy()
+        activePopup = null
+        editor
+          .chain()
+          .focus()
+          .insertTable({ rows, cols, withHeaderRow: true })
+          .run()
+      },
+    },
+    virtualReference: { getBoundingClientRect: () => rect },
+    floatingOptions: { placement: 'bottom-start' },
+  })
+}
diff --git a/src/molecules/editor/extensions.ts b/src/molecules/editor/extensions.ts
index b7a71abe0..8b3b78205 100644
--- a/src/molecules/editor/extensions.ts
+++ b/src/molecules/editor/extensions.ts
@@ -49,6 +49,7 @@ import {
   TableCell as TiptapTableCell,
   TableHeader as TiptapTableHeader,
 } from '@tiptap/extension-table'
+import { columnResizing, tableEditing, TableView } from '@tiptap/pm/tables'
 import {
   cellBackgroundAttributes,
   TableCellColor as TableCellColorExtension,
@@ -128,7 +129,7 @@ function pushConfigured<O>(
  */
 export const EditorDropcursor = Dropcursor.configure({
   width: 3,
-  color: 'var(--surface-gray-7, #383838)',
+  color: 'var(--surface-gray-10, #383838)',
   class: 'editor-drop-cursor',
 })
 
@@ -220,7 +221,32 @@ export const HeadingIds = HeadingIdsExtension
 export const Link = LinkExtension
 export const Code = ExtendedCode
 export const CodeBlock = ExtendedCodeBlock
-export const Table = TiptapTable.configure({ resizable: true })
+// Stock @tiptap gates `columnResizing` behind `resizable && editor.isEditable`,
+// evaluated once at editor creation. That has three consequences we don't want:
+// the plugin also owns the `.tableWrapper` scroll container (so read-only and
+// born-read-only editors get a bare table that overflows its bounds), and
+// `setEditable()` never reconfigures plugins (so toggling an existing comment
+// into edit mode never installs resizing). `columnResizing` already no-ops its
+// own pointer handlers when `!view.editable`, so installing it whenever
+// `resizable` is set is safe in read-only and keeps the wrapper in every mode.
+export const Table = TiptapTable.configure({ resizable: true }).extend({
+  addProseMirrorPlugins() {
+    return [
+      ...(this.options.resizable
+        ? [
+            columnResizing({
+              handleWidth: this.options.handleWidth,
+              cellMinWidth: this.options.cellMinWidth,
+              defaultCellMinWidth: this.options.cellMinWidth,
+              View: this.options.View ?? TableView,
+              lastColumnResizable: this.options.lastColumnResizable,
+            }),
+          ]
+        : []),
+      tableEditing({ allowTableNodeSelection: this.options.allowTableNodeSelection }),
+    ]
+  },
+})
 // Cell nodes carry a named `backgroundColor` attribute (rendered via
 // `--prose-highlight-*`); see `extensions/table/table-cell-color`.
 export const TableCell = TiptapTableCell.extend({
diff --git a/src/molecules/editor/extensions/iframe/IframeInsertDialog.vue b/src/molecules/editor/extensions/iframe/IframeInsertDialog.vue
index 07fce30a2..cd61870ae 100644
--- a/src/molecules/editor/extensions/iframe/IframeInsertDialog.vue
+++ b/src/molecules/editor/extensions/iframe/IframeInsertDialog.vue
@@ -6,7 +6,7 @@
   >
     <template #body-content>
       <div>
-        <label class="mb-2 block text-sm font-medium text-ink-gray-7">
+        <label class="mb-2 block text-sm-medium text-ink-gray-7">
           URL or Embed Code
         </label>
         <Textarea
@@ -15,12 +15,12 @@
           :placeholder="placeholder"
           @keydown.enter.prevent="submit"
         />
-        <p v-if="dialog.urlError.value" class="mt-1 text-sm text-ink-red-3">
+        <p v-if="dialog.urlError.value" class="mt-1 text-sm text-ink-red-6">
           {{ dialog.urlError.value }}
         </p>
         <p
           v-else-if="dialog.embedInput.value && dialog.isValidUrl.value"
-          class="mt-1 text-sm text-ink-green-3"
+          class="mt-1 text-sm text-ink-green-6"
         >
           ✓ Valid {{ dialog.platformName.value }} URL
         </p>
diff --git a/src/molecules/editor/extensions/iframe/IframeNodeView.vue b/src/molecules/editor/extensions/iframe/IframeNodeView.vue
index c18b11d91..9145561c7 100644
--- a/src/molecules/editor/extensions/iframe/IframeNodeView.vue
+++ b/src/molecules/editor/extensions/iframe/IframeNodeView.vue
@@ -203,7 +203,7 @@ function commitCaption(event: Event): void {
           class="flex h-[360px] w-[640px] items-center justify-center rounded bg-surface-gray-1"
         >
           <div class="text-center text-ink-gray-5">
-            <div class="mb-1 text-lg">🔗</div>
+            <div class="mb-1 text-xl">🔗</div>
             <div class="text-sm">Loading embed…</div>
           </div>
         </div>
diff --git a/src/molecules/editor/extensions/image-group/ImageGroupGridCell.vue b/src/molecules/editor/extensions/image-group/ImageGroupGridCell.vue
index 75633cbe8..36f085329 100644
--- a/src/molecules/editor/extensions/image-group/ImageGroupGridCell.vue
+++ b/src/molecules/editor/extensions/image-group/ImageGroupGridCell.vue
@@ -9,7 +9,7 @@
       aria-label="Remove image"
       @click.stop="$emit('remove')"
     >
-      <span class="lucide-x size-4 text-ink-gray-4 hover:text-ink-white" />
+      <span class="lucide-x size-4 text-ink-gray-4 hover:text-ink-base" />
     </button>
 
     <!-- Unsupported preview (HEIC/HEIF): filename placeholder -->
@@ -86,7 +86,7 @@
       class="absolute inset-0 z-10 flex flex-col items-center justify-center gap-2 bg-black/65 p-2 text-center"
       aria-live="assertive"
     >
-      <div class="text-p-xs text-ink-white">
+      <div class="text-p-xs text-ink-base">
         {{ item.error || 'Upload failed' }}
       </div>
       <div class="flex gap-2">
diff --git a/src/molecules/editor/extensions/image-group/ImageGroupNodeView.vue b/src/molecules/editor/extensions/image-group/ImageGroupNodeView.vue
index e441756f4..d924e8f02 100644
--- a/src/molecules/editor/extensions/image-group/ImageGroupNodeView.vue
+++ b/src/molecules/editor/extensions/image-group/ImageGroupNodeView.vue
@@ -18,7 +18,7 @@
         <Tooltip text="Edit gallery" class="h-5">
           <button type="button" aria-label="Edit gallery" @click.stop="edit">
             <span
-              class="lucide-pencil size-4 text-ink-gray-4 hover:text-ink-white"
+              class="lucide-pencil size-4 text-ink-gray-4 hover:text-ink-base"
             />
           </button>
         </Tooltip>
@@ -31,8 +31,8 @@
         >
           <button
             type="button"
-            class="px-0.5 text-xs font-medium tabular-nums hover:text-ink-white"
-            :class="columns === n ? 'text-ink-white' : 'text-ink-gray-4'"
+            class="px-0.5 text-xs-medium tabular-nums hover:text-ink-base"
+            :class="columns === n ? 'text-ink-base' : 'text-ink-gray-4'"
             :aria-label="`${n} columns`"
             :aria-pressed="columns === n"
             @click.stop="setColumns(n)"
@@ -56,7 +56,7 @@
             @click.stop="removeImage(idx)"
           >
             <span
-              class="lucide-x size-4 text-ink-gray-4 hover:text-ink-white"
+              class="lucide-x size-4 text-ink-gray-4 hover:text-ink-base"
             />
           </button>
           <img
diff --git a/src/molecules/editor/extensions/image-group/ImageGroupUploadDialog.vue b/src/molecules/editor/extensions/image-group/ImageGroupUploadDialog.vue
index 9468041a0..cf33b5d7d 100644
--- a/src/molecules/editor/extensions/image-group/ImageGroupUploadDialog.vue
+++ b/src/molecules/editor/extensions/image-group/ImageGroupUploadDialog.vue
@@ -63,7 +63,7 @@
             <div class="text-ink-gray-4 mb-2">
               <span class="lucide-image-plus size-6" />
             </div>
-            <div class="text-ink-gray-5 text-sm font-medium">
+            <div class="text-ink-gray-5 text-sm-medium">
               Drag & drop images here or click to select
             </div>
           </div>
@@ -76,7 +76,7 @@
           </div>
           <div class="w-full bg-surface-gray-2 rounded h-2 overflow-hidden">
             <div
-              class="bg-surface-gray-5 h-2 transition-all"
+              class="bg-surface-gray-8 h-2 transition-all"
               :style="{ width: dialog.uploadProgress.value + '%' }"
             ></div>
           </div>
@@ -138,7 +138,7 @@
         v-if="isFileDragging"
         class="fixed inset-0 z-50 bg-gray-900/60 pointer-events-none flex items-center justify-center"
       >
-        <div class="text-ink-gray-1 text-base font-medium">
+        <div class="text-ink-gray-1 text-base-medium">
           Drop images here
         </div>
       </div>
diff --git a/src/molecules/editor/extensions/slash-commands/slash-commands-extension.ts b/src/molecules/editor/extensions/slash-commands/slash-commands-extension.ts
index 96e56b1a0..3d2e41275 100644
--- a/src/molecules/editor/extensions/slash-commands/slash-commands-extension.ts
+++ b/src/molecules/editor/extensions/slash-commands/slash-commands-extension.ts
@@ -12,6 +12,7 @@ import {
 import { filterByQuery } from '#molecules/editor/extensions/shared/suggestion-helpers'
 import { PLATFORM_CONFIGS } from '#molecules/editor/extensions/iframe/iframe-embed-utils'
 import { allowlistPermitsHosts } from '#molecules/editor/extensions/iframe/iframe-allowlist'
+import { openTableSizePicker } from '#molecules/editor/components/table-size-picker/tableSizePickerController'
 import SlashCommandsList from './SlashCommandsList.vue'
 
 export const SlashCommandSuggestionKey = new PluginKey('slashCommandSuggestion')
@@ -133,12 +134,18 @@ const getCommands = (): CommandItem[] => [
     slashCommand(
       { ...commandMeta.table, icon: 'lucide-table-2' },
       ({ editor, range }: CommandExecutionProps) => {
-        editor
-          .chain()
-          .focus()
-          .deleteRange(range)
-          .insertTable({ rows: 3, cols: 3, withHeaderRow: true })
-          .run()
+        editor.chain().focus().deleteRange(range).run()
+        // Anchor the size picker to the caret left behind by the deleted query.
+        const caret = editor.view.coordsAtPos(editor.state.selection.from)
+        openTableSizePicker({
+          editor,
+          reference: new DOMRect(
+            caret.left,
+            caret.top,
+            0,
+            caret.bottom - caret.top,
+          ),
+        })
       },
     ),
     slashCommand(commandMeta.horizontalRule, ({ editor, range }) => {
diff --git a/src/molecules/editor/extensions/suggestion/SuggestionList.vue b/src/molecules/editor/extensions/suggestion/SuggestionList.vue
index 70780bf91..c75b541ba 100644
--- a/src/molecules/editor/extensions/suggestion/SuggestionList.vue
+++ b/src/molecules/editor/extensions/suggestion/SuggestionList.vue
@@ -18,7 +18,7 @@
         <!-- Same idiom as the Dropdown group label (`dropdownClasses.groupLabel`). -->
         <div
           v-if="group.label"
-          class="flex h-7 items-center px-2 text-sm font-medium text-ink-gray-4"
+          class="flex h-7 items-center px-2 text-sm-medium text-ink-gray-4"
         >
           {{ group.label }}
         </div>
diff --git a/src/molecules/editor/extensions/table/drag-scroll.ts b/src/molecules/editor/extensions/table/drag-scroll.ts
new file mode 100644
index 000000000..46b2810df
--- /dev/null
+++ b/src/molecules/editor/extensions/table/drag-scroll.ts
@@ -0,0 +1,154 @@
+/**
+ * Shared scaffolding for pointer drags over tables (cell drag-select, grip
+ * drags): pointer capture so a release outside the window still ends the drag,
+ * and edge auto-scroll so dragging past the visible boundary keeps selecting —
+ * horizontally inside the `.tableWrapper` (overflow-x: auto) and vertically in
+ * the nearest scrollable ancestor (or the page).
+ */
+
+const EDGE = 28
+const MAX_STEP = 16
+
+/** Scroll velocity for one axis given the pointer and the visible range. */
+function axisStep(pos: number, start: number, end: number): number {
+  if (end - start < EDGE * 3) return 0
+  if (pos < start + EDGE) {
+    return -Math.ceil(((start + EDGE - pos) / EDGE) * MAX_STEP)
+  }
+  if (pos > end - EDGE) {
+    return Math.ceil(((pos - (end - EDGE)) / EDGE) * MAX_STEP)
+  }
+  return 0
+}
+
+/** Nearest ancestor that can scroll vertically, else the page scroller. */
+export function verticalScrollParent(el: Element): HTMLElement {
+  for (let cur = el.parentElement; cur; cur = cur.parentElement) {
+    const style = getComputedStyle(cur)
+    if (
+      /(auto|scroll)/.test(style.overflowY) &&
+      cur.scrollHeight > cur.clientHeight
+    ) {
+      return cur
+    }
+  }
+  return (
+    (document.scrollingElement as HTMLElement | null) ??
+    document.documentElement
+  )
+}
+
+interface DragScroller {
+  update(x: number, y: number): void
+  stop(): void
+}
+
+function createDragScroller(
+  area: HTMLElement,
+  onScrolled: () => void,
+): DragScroller {
+  const page =
+    (document.scrollingElement as HTMLElement | null) ??
+    document.documentElement
+  const vertical = verticalScrollParent(area)
+  let raf = 0
+  let px = 0
+  let py = 0
+
+  const tick = () => {
+    raf = 0
+    let moved = false
+
+    if (area.scrollWidth > area.clientWidth) {
+      const rect = area.getBoundingClientRect()
+      const dx = axisStep(
+        px,
+        Math.max(rect.left, 0),
+        Math.min(rect.right, window.innerWidth),
+      )
+      if (dx) {
+        const before = area.scrollLeft
+        area.scrollLeft += dx
+        moved = moved || area.scrollLeft !== before
+      }
+    }
+
+    const bounds =
+      vertical === page
+        ? { top: 0, bottom: window.innerHeight }
+        : (() => {
+            const rect = vertical.getBoundingClientRect()
+            return {
+              top: Math.max(rect.top, 0),
+              bottom: Math.min(rect.bottom, window.innerHeight),
+            }
+          })()
+    const dy = axisStep(py, bounds.top, bounds.bottom)
+    if (dy) {
+      const before = vertical.scrollTop
+      vertical.scrollTop += dy
+      moved = moved || vertical.scrollTop !== before
+    }
+
+    if (moved) {
+      onScrolled()
+      raf = requestAnimationFrame(tick)
+    }
+  }
+
+  return {
+    update(x, y) {
+      px = x
+      py = y
+      if (!raf) raf = requestAnimationFrame(tick)
+    },
+    stop() {
+      if (raf) cancelAnimationFrame(raf)
+      raf = 0
+    },
+  }
+}
+
+/**
+ * Run a pointer drag from `event` until pointerup/pointercancel, reporting the
+ * latest pointer position through `onPoint` — on every move and again on every
+ * auto-scroll step (so the selection keeps growing while the pointer idles in
+ * the edge zone).
+ */
+export function trackPointerDrag(options: {
+  event: PointerEvent
+  /** Horizontal auto-scroll container (the table's `.tableWrapper`), if any. */
+  area: HTMLElement | null
+  onPoint: (x: number, y: number) => void
+}): void {
+  const { event, area, onPoint } = options
+  const pointerId = event.pointerId
+  const target = event.target instanceof Element ? event.target : null
+  try {
+    target?.setPointerCapture(pointerId)
+  } catch {
+    // Detached or capture-incapable target; document listeners still cover us.
+  }
+
+  let x = event.clientX
+  let y = event.clientY
+  const scroller = area ? createDragScroller(area, () => onPoint(x, y)) : null
+
+  const onMove = (e: PointerEvent) => {
+    if (e.pointerId !== pointerId) return
+    x = e.clientX
+    y = e.clientY
+    onPoint(x, y)
+    scroller?.update(x, y)
+  }
+  const stop = (e: PointerEvent) => {
+    if (e.pointerId !== pointerId) return
+    scroller?.stop()
+    document.removeEventListener('pointermove', onMove)
+    document.removeEventListener('pointerup', stop, true)
+    document.removeEventListener('pointercancel', stop, true)
+  }
+  document.addEventListener('pointermove', onMove)
+  document.addEventListener('pointerup', stop, true)
+  document.addEventListener('pointercancel', stop, true)
+}
diff --git a/src/molecules/editor/extensions/table/table-navigation.ts b/src/molecules/editor/extensions/table/table-navigation.ts
index 4cbe9f1eb..abb564d4a 100644
--- a/src/molecules/editor/extensions/table/table-navigation.ts
+++ b/src/molecules/editor/extensions/table/table-navigation.ts
@@ -11,7 +11,8 @@
  * Flow: click a cell → navigate (highlight). Enter (or a second click, or
  * typing) → edit. Edit mode is sticky: clicks inside the cell only move the
  * caret; it exits only via Enter, Escape (→ navigate) or Tab (→ next cell).
- * Arrow keys in navigate mode → move the active cell.
+ * Arrow keys in navigate mode → move the active cell; at the top/bottom edge
+ * they leave the table (so keyboard users are never trapped inside it).
  *
  * Runs at a high priority so its `handleKeyDown` precedes the Table extension's
  * built-in arrow handling (which would otherwise collapse a CellSelection to a
@@ -24,6 +25,7 @@ import type { EditorView } from '@tiptap/pm/view'
 import type { ResolvedPos } from '@tiptap/pm/model'
 import {
   CellSelection,
+  TableMap,
   cellAround,
   columnResizingPluginKey,
   goToNextCell,
@@ -31,11 +33,15 @@ import {
   nextCell,
   selectionCell,
 } from '@tiptap/pm/tables'
+import { trackPointerDrag } from './drag-scroll'
 
 type Axis = 'horiz' | 'vert'
 
 const ARROWS = ['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown'] as const
 
+const LONG_PRESS_MS = 500
+const LONG_PRESS_SLOP = 8
+
 /**
  * In edit mode, true when a plain arrow press would move the caret out of the
  * current cell (so we can swallow it — the cell is a sandbox; leave via Escape or
@@ -102,11 +108,46 @@ function editCell(editor: Editor, $cell: ResolvedPos, at?: number): boolean {
   return true
 }
 
-/** Move the active cell one step along an axis; no-op (but consumed) at an edge. */
+/** The table node enclosing a cell position, with its map and start offset. */
+function tableAround($cell: ResolvedPos) {
+  const table = $cell.node(-1)
+  return { table, start: $cell.start(-1), map: TableMap.get(table) }
+}
+
+/**
+ * Leave the table vertically: put the caret in the nearest textblock before/
+ * after it, creating an adjacent paragraph when the table is the document's
+ * first/last node — so navigate mode is never a keyboard trap.
+ */
+function exitTable(editor: Editor, dir: 1 | -1): boolean {
+  const { state, view } = editor
+  const $cell = selectionCell(state)
+  let depth = $cell.depth
+  while (depth > 0 && $cell.node(depth).type.name !== 'table') depth--
+  if (!depth) return true
+  const pos = dir === 1 ? $cell.after(depth) : $cell.before(depth)
+  const target = Selection.findFrom(state.doc.resolve(pos), dir, true)
+  if (target) {
+    view.dispatch(state.tr.setSelection(target).scrollIntoView())
+    return true
+  }
+  const paragraph = state.schema.nodes.paragraph
+  if (!paragraph) return true
+  const tr = state.tr.insert(pos, paragraph.create())
+  tr.setSelection(TextSelection.create(tr.doc, pos + 1)).scrollIntoView()
+  view.dispatch(tr)
+  return true
+}
+
+/**
+ * Move the active cell one step along an axis. A horizontal edge is a consumed
+ * no-op; a vertical edge exits the table.
+ */
 function moveCell(editor: Editor, axis: Axis, dir: number): boolean {
   const { state } = editor
   const $next = nextCell(selectionCell(state), axis, dir)
-  if ($next) selectCell(editor, $next.pos)
+  if ($next) return selectCell(editor, $next.pos)
+  if (axis === 'vert') return exitTable(editor, dir as 1 | -1)
   return true
 }
 
@@ -134,17 +175,77 @@ function extendCell(editor: Editor, axis: Axis, dir: number): boolean {
 /**
  * Tab / Shift-Tab: move to the next/previous cell and land in navigate mode
  * (highlight, no caret), exiting edit mode. Wraps across rows via the table's
- * own `goToNextCell`, then converts its text selection to a cell selection.
+ * own `goToNextCell`; Tab on the very last cell appends a row first
+ * (spreadsheet convention, and what the stock TipTap Tab shortcut did before
+ * this plugin intercepted it).
  */
 function tabToCell(editor: Editor, dir: 1 | -1): boolean {
   const { state, view } = editor
   if (!isInTable(state)) return false
-  if (!goToNextCell(dir)(state, view.dispatch)) return false
+  if (!goToNextCell(dir)(state, view.dispatch)) {
+    if (dir !== 1) return true
+    if (!editor.can().addRowAfter()) return true
+    editor.chain().addRowAfter().run()
+    if (!goToNextCell(dir)(editor.state, view.dispatch)) return true
+  }
   const $cell = cellAround(editor.state.selection.$head)
   if ($cell) selectCell(editor, $cell.pos)
   return true
 }
 
+/** Select every cell of the table containing `$cell`. */
+function selectWholeTable(editor: Editor, $cell: ResolvedPos): boolean {
+  const { state, view } = editor
+  const { start, map } = tableAround($cell)
+  view.dispatch(
+    state.tr.setSelection(
+      new CellSelection(
+        state.doc.resolve(start + map.map[0]),
+        state.doc.resolve(start + map.map[map.map.length - 1]),
+      ),
+    ),
+  )
+  return true
+}
+
+/**
+ * Mod+A inside a table escalates instead of jumping straight to the document:
+ * cell content → whole table → (default select-all) whole doc. Keeps the
+ * cell-as-sandbox model consistent for selection too.
+ */
+function escalateSelectAll(editor: Editor): boolean {
+  const { state, view } = editor
+  const sel = state.selection
+  if (sel instanceof CellSelection) {
+    const { start, map } = tableAround(sel.$anchorCell)
+    const rect = map.rectBetween(
+      sel.$anchorCell.pos - start,
+      sel.$headCell.pos - start,
+    )
+    const wholeTable =
+      rect.left === 0 &&
+      rect.top === 0 &&
+      rect.right === map.width &&
+      rect.bottom === map.height
+    if (wholeTable) return false
+    return selectWholeTable(editor, sel.$anchorCell)
+  }
+  const $cell = cellAround(sel.$head)
+  if (!$cell) return false
+  const cell = $cell.nodeAfter
+  if (!cell) return false
+  const from = Selection.near(state.doc.resolve($cell.pos + 1), 1).from
+  const to = Selection.near(
+    state.doc.resolve($cell.pos + cell.nodeSize - 1),
+    -1,
+  ).from
+  if (sel.from === from && sel.to === to) {
+    return selectWholeTable(editor, $cell)
+  }
+  view.dispatch(state.tr.setSelection(TextSelection.create(state.doc, from, to)))
+  return true
+}
+
 /** A single-cell CellSelection sitting on exactly the given cell. */
 function isOnCell(selection: unknown, $cell: ResolvedPos): boolean {
   return (
@@ -154,6 +255,64 @@ function isOnCell(selection: unknown, $cell: ResolvedPos): boolean {
   )
 }
 
+/** The cell (if any) under a pointer event. */
+function cellAtCoords(
+  view: EditorView,
+  event: { clientX: number; clientY: number },
+): ResolvedPos | null {
+  const coords = view.posAtCoords({ left: event.clientX, top: event.clientY })
+  if (!coords) return null
+  return cellAround(view.state.doc.resolve(coords.pos))
+}
+
+/**
+ * Touch: leave taps to the default (caret + keyboard — navigate mode has
+ * little value without physical arrow keys), but surface the table context
+ * menu on long-press, since iOS never fires `contextmenu` on its own. Android
+ * does — the capture listener below cancels the timer so it can't double-open.
+ */
+function watchLongPress(event: PointerEvent): boolean {
+  const { clientX, clientY, pointerId } = event
+  const target = event.target
+  if (!(target instanceof Element)) return false
+
+  const cleanup = () => {
+    clearTimeout(timer)
+    document.removeEventListener('pointermove', onMove)
+    document.removeEventListener('pointerup', onEnd)
+    document.removeEventListener('pointercancel', onEnd)
+    document.removeEventListener('contextmenu', onNativeMenu, true)
+  }
+  const timer = window.setTimeout(() => {
+    cleanup()
+    target.dispatchEvent(
+      new MouseEvent('contextmenu', {
+        bubbles: true,
+        cancelable: true,
+        clientX,
+        clientY,
+      }),
+    )
+  }, LONG_PRESS_MS)
+  const onMove = (e: PointerEvent) => {
+    if (e.pointerId !== pointerId) return
+    if (
+      Math.hypot(e.clientX - clientX, e.clientY - clientY) > LONG_PRESS_SLOP
+    ) {
+      cleanup()
+    }
+  }
+  const onEnd = (e: PointerEvent) => {
+    if (e.pointerId === pointerId) cleanup()
+  }
+  const onNativeMenu = () => cleanup()
+  document.addEventListener('pointermove', onMove)
+  document.addEventListener('pointerup', onEnd)
+  document.addEventListener('pointercancel', onEnd)
+  document.addEventListener('contextmenu', onNativeMenu, true)
+  return false
+}
+
 export const TableNavigation = Extension.create({
   name: 'tableNavigation',
   // Beat the Table extension's own arrow/keymap handling.
@@ -172,10 +331,21 @@ export const TableNavigation = Extension.create({
             if (!isInTable(state)) return false
             const navigating = state.selection instanceof CellSelection
 
+            // Mod+A escalates: cell content → whole table → whole doc.
+            if (
+              (event.metaKey || event.ctrlKey) &&
+              !event.altKey &&
+              !event.shiftKey &&
+              event.key.toLowerCase() === 'a'
+            ) {
+              return escalateSelectAll(editor)
+            }
+
             // Tab moves to the next/previous cell in navigate mode, exiting edit
             // mode (works from either mode). Consume it in a table either way so
             // focus never leaves the cell grid.
             if (event.key === 'Tab') {
+              if (event.metaKey || event.ctrlKey || event.altKey) return false
               tabToCell(editor, event.shiftKey ? -1 : 1)
               return true
             }
@@ -225,7 +395,7 @@ export const TableNavigation = Extension.create({
                 if (navigating) {
                   return editCell(
                     editor,
-                    (state.selection as CellSelection).$headCell,
+                    (state.selection as CellSelection).$anchorCell,
                   )
                 }
                 // Plain Enter in edit mode returns to navigate mode
@@ -248,14 +418,22 @@ export const TableNavigation = Extension.create({
             }
           },
 
-          // Select the cell on mousedown — before the browser places a text
-          // caret — so a click lands straight in navigate mode with no caret
-          // flash. A second click on the already-active cell falls through to
-          // the default (caret) to start editing.
           handleDOMEvents: {
-            mousedown(view, event) {
+            // Select the cell on pointerdown — before the browser places a text
+            // caret — so a click lands straight in navigate mode with no caret
+            // flash. A second click on the already-active cell falls through to
+            // the default (caret) to start editing.
+            pointerdown(view, event: PointerEvent) {
               // Read-only: don't hijack clicks into cell selection.
               if (!editor.isEditable) return false
+
+              // Touch: taps keep the default caret behavior (and scrolling);
+              // a long-press opens the table context menu.
+              if (event.pointerType === 'touch') {
+                if (!cellAtCoords(view, event)) return false
+                return watchLongPress(event)
+              }
+
               // Pointer is over a column-resize border (the resize plugin set its
               // active handle on the preceding mousemove). Bail so its own,
               // lower-priority mousedown can start the drag instead of us
@@ -271,12 +449,7 @@ export const TableNavigation = Extension.create({
               ) {
                 return false
               }
-              const coords = view.posAtCoords({
-                left: event.clientX,
-                top: event.clientY,
-              })
-              if (!coords) return false
-              const $cell = cellAround(view.state.doc.resolve(coords.pos))
+              const $cell = cellAtCoords(view, event)
               if (!$cell) return false
               // Clicking the active cell again → let the default place the caret.
               if (isOnCell(view.state.selection, $cell)) return false
@@ -300,38 +473,56 @@ export const TableNavigation = Extension.create({
               )
               if (!view.hasFocus()) view.focus()
 
-              // Drag to extend into a multi-cell selection (e.g. for merge).
-              const onMove = (e: MouseEvent) => {
-                const c = view.posAtCoords({ left: e.clientX, top: e.clientY })
-                if (!c) return
-                const $c = cellAround(view.state.doc.resolve(c.pos))
-                if (!$c) return
-                const next = CellSelection.create(
-                  view.state.doc,
-                  anchorPos,
-                  $c.pos,
-                )
-                if (!view.state.selection.eq(next)) {
-                  view.dispatch(view.state.tr.setSelection(next))
-                }
-              }
-              const onUp = () => {
-                document.removeEventListener('mousemove', onMove)
-                document.removeEventListener('mouseup', onUp, true)
-              }
-              document.addEventListener('mousemove', onMove)
-              document.addEventListener('mouseup', onUp, true)
+              // Drag to extend into a multi-cell selection (e.g. for merge),
+              // with edge auto-scroll so wide tables can be selected past the
+              // wrapper's visible window.
+              const anchorDom = view.nodeDOM(anchorPos)
+              const wrapper =
+                anchorDom instanceof HTMLElement
+                  ? anchorDom.closest<HTMLElement>('.tableWrapper')
+                  : null
+              trackPointerDrag({
+                event,
+                area: wrapper,
+                onPoint(x, y) {
+                  const $head = cellAtCoords(view, { clientX: x, clientY: y })
+                  if (!$head) return
+                  // Never extend across table boundaries.
+                  const $anchor = view.state.doc.resolve(anchorPos)
+                  if ($head.start(-1) !== $anchor.start(-1)) return
+                  const next = CellSelection.create(
+                    view.state.doc,
+                    anchorPos,
+                    $head.pos,
+                  )
+                  if (!view.state.selection.eq(next)) {
+                    view.dispatch(view.state.tr.setSelection(next))
+                  }
+                },
+              })
               return true
             },
+
+            // IME input never reaches handleTextInput, so drop into edit mode
+            // before the composition starts — composing against a CellSelection
+            // (which has no DOM caret) drops or mangles the input.
+            compositionstart(view) {
+              if (!editor.isEditable) return false
+              const { selection } = view.state
+              if (!(selection instanceof CellSelection)) return false
+              editCell(editor, selection.$anchorCell)
+              return false
+            },
           },
 
           // Typing while a cell is selected starts editing (append) instead of
-          // letting a CellSelection swallow the input.
+          // letting a CellSelection swallow the input. Input lands in the
+          // anchor cell — the active cell of a multi-cell selection.
           handleTextInput(view, _from, _to, text) {
             if (!editor.isEditable) return false
             const { selection } = view.state
             if (!(selection instanceof CellSelection)) return false
-            const $cell = selection.$headCell
+            const $cell = selection.$anchorCell
             const cell = $cell.nodeAfter
             if (!cell) return false
             const end = $cell.pos + cell.nodeSize - 1
@@ -345,6 +536,23 @@ export const TableNavigation = Extension.create({
             )
             return true
           },
+
+          // Match type-to-append: pasting non-table content on a selected cell
+          // drops the caret at the end of the anchor cell and pastes there,
+          // instead of replacing the cell's content. Table-shaped slices keep
+          // prosemirror-tables' structured cell paste.
+          handlePaste(view, _event, slice) {
+            if (!editor.isEditable) return false
+            const { selection } = view.state
+            if (!(selection instanceof CellSelection)) return false
+            let tableContent = false
+            slice.content.forEach((node) => {
+              if (node.type.spec.tableRole) tableContent = true
+            })
+            if (tableContent) return false
+            editCell(editor, selection.$anchorCell)
+            return false
+          },
         },
       }),
     ]
diff --git a/src/molecules/editor/extensions/table/table-selection-overlay.ts b/src/molecules/editor/extensions/table/table-selection-overlay.ts
index 71387d3bf..b88cf882a 100644
--- a/src/molecules/editor/extensions/table/table-selection-overlay.ts
+++ b/src/molecules/editor/extensions/table/table-selection-overlay.ts
@@ -27,12 +27,23 @@ interface Rect {
 
 class SelectionOverlay {
   private el: HTMLElement | null = null
+  // The box is measured from live cell rects, but only transactions reach
+  // `update` — re-measure when the window reflows or the table itself resizes
+  // (column drag, image load) so the box doesn't drift between edits.
+  private resizeObserver: ResizeObserver | null = null
+  private observed: HTMLElement | null = null
+  private onResize = () => this.update(this.view)
 
   constructor(private view: EditorView) {
+    window.addEventListener('resize', this.onResize)
+    if (typeof ResizeObserver !== 'undefined') {
+      this.resizeObserver = new ResizeObserver(() => this.update(this.view))
+    }
     this.update(view)
   }
 
   update(view: EditorView): void {
+    this.view = view
     const { selection } = view.state
     const isRange =
       selection instanceof CellSelection &&
@@ -71,6 +82,7 @@ class SelectionOverlay {
         ? (anchorDom.closest('.tableWrapper') as HTMLElement | null)
         : null) ?? (view.dom as HTMLElement)
     const hostRect = host.getBoundingClientRect()
+    this.observe(host)
 
     // Convert viewport rect → host content coordinates (so the box scrolls with
     // the wrapper's horizontal overflow).
@@ -93,14 +105,25 @@ class SelectionOverlay {
     return el
   }
 
+  private observe(host: HTMLElement): void {
+    if (!this.resizeObserver || this.observed === host) return
+    this.resizeObserver.disconnect()
+    this.resizeObserver.observe(host)
+    this.observed = host
+  }
+
   private remove(): void {
     this.el?.remove()
     this.el = null
+    this.resizeObserver?.disconnect()
+    this.observed = null
   }
 
   destroy(): void {
     this.view.dom.classList.remove('table-cell-range')
     this.remove()
+    window.removeEventListener('resize', this.onResize)
+    this.resizeObserver = null
   }
 }
 
diff --git a/src/molecules/editor/extensions/toc-node/TocNodeView.vue b/src/molecules/editor/extensions/toc-node/TocNodeView.vue
index 5bd67f0cb..9739992af 100644
--- a/src/molecules/editor/extensions/toc-node/TocNodeView.vue
+++ b/src/molecules/editor/extensions/toc-node/TocNodeView.vue
@@ -20,7 +20,7 @@
     <button
       v-if="isEditable"
       @click="removeNode"
-      class="absolute top-2 right-2 bg-black/65 hover:bg-black/80 text-ink-gray-4 hover:text-ink-white p-1 rounded opacity-0 group-hover:opacity-100 transition-opacity"
+      class="absolute top-2 right-2 bg-black/65 hover:bg-black/80 text-ink-gray-4 hover:text-ink-base p-1 rounded opacity-0 group-hover:opacity-100 transition-opacity"
       title="Remove table of contents"
     >
       <span class="lucide-x size-4" />
diff --git a/src/molecules/editor/menu.ts b/src/molecules/editor/menu.ts
index 9a419a51d..14f09ff47 100644
--- a/src/molecules/editor/menu.ts
+++ b/src/molecules/editor/menu.ts
@@ -8,6 +8,7 @@ import {
 } from './commands'
 import { openFontColorPicker } from './components/font-color/fontColorController'
 import { openTableCellColorPicker } from './components/table-color/tableCellColorController'
+import { openTableSizePicker } from './components/table-size-picker/tableSizePickerController'
 
 export type MenuActionContext = EditorCommandContext
 
@@ -16,6 +17,11 @@ export type CommandMenuItem = {
   // house convention); a component renders as-is. Predefined items default it.
   icon?: Component | string
   label: string
+  /**
+   * State-dependent display label (e.g. "Merge cells" vs "Split cell").
+   * Renderers fall back to `label`, which stays the stable identity.
+   */
+  getLabel?: (editor: Editor) => string
   action: (
     editor: Editor,
     context?: MenuActionContext,
@@ -172,12 +178,24 @@ export const InsertIframe = command(
   undefined,
   false,
 )
-export const InsertTable = command(commandMeta.table, (editor) =>
-  editor
-    .chain()
-    .focus()
-    .insertTable({ rows: 3, cols: 3, withHeaderRow: true })
-    .run(),
+// Opens a size-picker grid anchored to the toolbar button; without a trigger
+// (programmatic call) it inserts the default 3×3 directly. Like the other
+// picker-opening items, the action can't be probed via `can()`.
+export const InsertTable = command(
+  commandMeta.table,
+  (editor, context) => {
+    if (context?.trigger) {
+      openTableSizePicker({ editor, anchor: context.trigger })
+      return
+    }
+    return editor
+      .chain()
+      .focus()
+      .insertTable({ rows: 3, cols: 3, withHeaderRow: true })
+      .run()
+  },
+  undefined,
+  false,
 )
 export const HorizontalRule = command(commandMeta.horizontalRule, (editor) =>
   editor.chain().focus().setHorizontalRule().run(),
@@ -270,12 +288,21 @@ export const TableToggleHeaderRow = tableCommand(
   (editor) => editor.isActive('tableHeader'),
 )
 // One button for both directions: merges a multi-cell selection, splits a
-// merged cell. `can()` disables it when neither applies.
-export const TableMergeOrSplit = tableCommand(
-  'Merge or split cells',
-  'lucide-table-cells-merge',
-  (editor) => editor.chain().focus().mergeOrSplit().run(),
-)
+// merged cell. `can()` disables it when neither applies; the label names
+// whichever direction currently applies.
+export const TableMergeOrSplit: CommandMenuItem = {
+  ...tableCommand(
+    'Merge or split cells',
+    'lucide-table-cells-merge',
+    (editor) => editor.chain().focus().mergeOrSplit().run(),
+  ),
+  getLabel: (editor) =>
+    editor.can().mergeCells()
+      ? 'Merge cells'
+      : editor.can().splitCell()
+        ? 'Split cell'
+        : 'Merge or split cells',
+}
 export const TableDelete = tableCommand(
   'Delete table',
   'lucide-trash-2',
diff --git a/src/molecules/editor/stories/Comment.vue b/src/molecules/editor/stories/Comment.vue
index 5dddddfd1..a9a8f812f 100644
--- a/src/molecules/editor/stories/Comment.vue
+++ b/src/molecules/editor/stories/Comment.vue
@@ -41,7 +41,7 @@ function submit() {
   <div class="w-full max-w-2xl">
     <div class="flex gap-3">
       <div
-        class="flex size-8 shrink-0 items-center justify-center rounded-full bg-surface-gray-3 text-sm font-medium text-ink-gray-7"
+        class="flex size-8 shrink-0 items-center justify-center rounded-full bg-surface-gray-3 text-sm-medium text-ink-gray-7"
       >
         FA
       </div>
@@ -52,7 +52,7 @@ function submit() {
       >
         <template #default="{ isEmpty }">
           <div
-            class="min-w-0 flex-1 rounded-lg border border-outline-gray-2 bg-surface-white focus-within:border-outline-gray-3"
+            class="min-w-0 flex-1 rounded-lg border border-outline-gray-2 bg-surface-base focus-within:border-outline-gray-3"
           >
             <EditorBubbleMenu :items="commentToolbar" />
             <EditorContent
@@ -88,12 +88,12 @@ function submit() {
 
     <div v-if="submitted" class="mt-4 flex gap-3">
       <div
-        class="flex size-8 shrink-0 items-center justify-center rounded-full bg-surface-gray-3 text-sm font-medium text-ink-gray-7"
+        class="flex size-8 shrink-0 items-center justify-center rounded-full bg-surface-gray-3 text-sm-medium text-ink-gray-7"
       >
         FA
       </div>
       <div class="min-w-0 flex-1 rounded-lg bg-surface-gray-1 px-3 py-2">
-        <div class="mb-0.5 text-sm font-medium text-ink-gray-8">Faris Ansari</div>
+        <div class="mb-0.5 text-sm-medium text-ink-gray-8">Faris Ansari</div>
         <Editor v-model="submitted" :extensions="extensions" :editable="false">
           <template #default>
             <EditorContent class="text-ink-gray-8" />
diff --git a/src/molecules/editor/stories/Inline.vue b/src/molecules/editor/stories/Inline.vue
index bd1f5e9d9..06e9dab25 100644
--- a/src/molecules/editor/stories/Inline.vue
+++ b/src/molecules/editor/stories/Inline.vue
@@ -18,7 +18,7 @@ const title = ref('<p>Q3 launch plan</p>')
     <Editor v-model="title" :extensions="extensions" placeholder="Untitled">
       <EditorBubbleMenu :items="minimalToolbar" />
       <EditorContent
-        class="rounded-md border border-outline-gray-2 bg-surface-white px-3 py-2 text-2xl font-semibold text-ink-gray-9 focus-within:border-outline-gray-3 focus-within:ring-2 focus-within:ring-outline-gray-2"
+        class="rounded-md border border-outline-gray-2 bg-surface-base px-3 py-2 text-4xl-semibold text-ink-gray-9 focus-within:border-outline-gray-3 focus-within:ring-2 focus-within:ring-outline-gray-2"
       />
     </Editor>
     <p class="mt-2 text-sm text-ink-gray-5">
diff --git a/src/molecules/editor/stories/Primitives.vue b/src/molecules/editor/stories/Primitives.vue
index 257a18de0..324e47265 100644
--- a/src/molecules/editor/stories/Primitives.vue
+++ b/src/molecules/editor/stories/Primitives.vue
@@ -53,7 +53,7 @@ const wordCount = computed(() => {
 
 <template>
   <div class="w-full max-w-2xl">
-    <div class="overflow-hidden rounded-lg border border-outline-gray-2 bg-surface-white">
+    <div class="overflow-hidden rounded-lg border border-outline-gray-2 bg-surface-base">
       <EditorBubbleMenu :editor="editor" :items="toolbar" />
       <EditorFloatingMenu :editor="editor" :items="toolbar" />
       <div class="border-b border-outline-gray-1 px-2 py-1.5">
diff --git a/src/molecules/editor/stories/RichText.vue b/src/molecules/editor/stories/RichText.vue
index 0ff273a77..9ce7715d2 100644
--- a/src/molecules/editor/stories/RichText.vue
+++ b/src/molecules/editor/stories/RichText.vue
@@ -114,7 +114,7 @@ const uploadFunction = async (file) => ({
         <!-- Inside <Editor>, the building blocks read the editor from
              context — no :editor prop needed. -->
         <div
-          class="overflow-hidden rounded-lg border border-outline-gray-2 bg-surface-white"
+          class="overflow-hidden rounded-lg border border-outline-gray-2 bg-surface-base"
         >
           <EditorBubbleMenu :items="bubbleToolbar" />
           <EditorFloatingMenu :items="toolbar" />
diff --git a/src/molecules/editor/style.css b/src/molecules/editor/style.css
index e74c47cf4..a7287f9f7 100644
--- a/src/molecules/editor/style.css
+++ b/src/molecules/editor/style.css
@@ -165,8 +165,7 @@ img.ProseMirror-selectednode {
   border-radius: 2px;
   pointer-events: none;
   z-index: 2;
-  background-color: color-mix(in srgb, var(--surface-gray-2) 10%, transparent);
-  box-shadow: inset 0 0 0 1px var(--surface-gray-7);
+  box-shadow: inset 0 0 0 1.2px var(--surface-gray-8);
 }
 
 /* Multi-cell selection: drop the per-cell ring (keep the fill, so adjacent
@@ -182,7 +181,7 @@ img.ProseMirror-selectednode {
   z-index: 3;
   border-radius: 2px;
   inset: -1px;
-  box-shadow: inset 0 0 0 1px var(--surface-gray-7);
+  box-shadow: inset 0 0 0 1.2px var(--surface-gray-8);
 }
 
 /* Links underline via `border-bottom` (see prose-v3 `a` in tailwind/plugin.js),
@@ -203,7 +202,10 @@ img.ProseMirror-selectednode {
 }
 
 .ProseMirror .tableWrapper {
-  overflow-x: scroll;
+  /* Scroll a too-wide table inside its own bounds instead of letting it push
+     past the content column (every editor ancestor is overflow: visible). */
+  max-width: 100%;
+  overflow-x: auto;
   /* Positioning context for the single-box multi-cell selection overlay. */
   position: relative;
 }
diff --git a/src/utils/dialog.cy.ts b/src/utils/dialog.cy.ts
index 5115b5c74..73aa8eaef 100644
--- a/src/utils/dialog.cy.ts
+++ b/src/utils/dialog.cy.ts
@@ -227,7 +227,7 @@ describe('dialog.ts — imperative API', () => {
     cy.get('[role=dialog] .lucide-alert-triangle').should('exist')
     cy.contains('button', 'Confirm').should(
       'have.class',
-      'bg-surface-red-5',
+      'bg-surface-red-7',
     )
   })
 
@@ -337,7 +337,7 @@ describe('dialog.ts — imperative API', () => {
     cy.get('[role=dialog] .lucide-alert-triangle').should('exist')
     cy.contains('button', 'Delete')
       .should('exist')
-      .and('have.class', 'bg-surface-red-5')
+      .and('have.class', 'bg-surface-red-7')
   })
 
   it('danger lets you override the confirm label', () => {
diff --git a/tailwind.config.js b/tailwind.config.js
index 54cf5665c..eeea87cd0 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,4 +1,25 @@
 import preset from './tailwind/preset'
+import typography from './tailwind/generated/typography.json'
+
+// The Typography docs page applies `text-<size>-<weight>` / `text-p-<size>-<weight>`
+// (and the bare regular `text-<size>`) via a computed class from its weight
+// switcher, so the JIT scanner never sees the literal names. Build the exact
+// set the plugin emits (WEIGHT_VARIANTS, only pairings present in the tracking
+// export) and safelist it. Mirrors buildTextStyleUtilities() in plugin.js.
+const WEIGHT_VARIANTS = ['medium', 'semibold', 'bold', 'black']
+const typeSafelist = []
+for (const [group, prefix] of [
+  ['text', 'text-'],
+  ['paragraph', 'text-p-'],
+]) {
+  const tracking = typography.tracking[group] || {}
+  for (const [size, byWeight] of Object.entries(tracking)) {
+    typeSafelist.push(`${prefix}${size}`)
+    for (const weight of WEIGHT_VARIANTS) {
+      if (weight in byWeight) typeSafelist.push(`${prefix}${size}-${weight}`)
+    }
+  }
+}
 
 export default {
   presets: [preset],
@@ -6,7 +27,7 @@ export default {
   // drop it (HMR rebuilds, content-scan gaps). Safelist lives here in the watched
   // config — Vite reprocesses Tailwind on this file's changes, but not on changes
   // to transitively-imported files like the preset.
-  safelist: ['prose', 'prose-v3'],
+  safelist: ['prose', 'prose-v3', ...typeSafelist],
   content: [
     './index.html',
     './App.vue',
diff --git a/tailwind/audit-token-drift.cjs b/tailwind/audit-token-drift.cjs
new file mode 100644
index 000000000..93ed81084
--- /dev/null
+++ b/tailwind/audit-token-drift.cjs
@@ -0,0 +1,176 @@
+#!/usr/bin/env node
+/**
+ * Token drift audit for the Espresso v2 migration.
+ *
+ * Source of truth = the Figma export under espresso-v2-design-tokens/.
+ * Compares the resolved values of every themed token (surface/ink/outline)
+ * against a baseline git ref, and against the Figma token set, then reports:
+ *
+ *   1. BUILD-BREAKING — a token whose color ref no longer resolves (missing shade).
+ *   2. SILENT DRIFT   — token kept, but its resolved hex changed baseline -> HEAD.
+ *                       Catches BOTH mapping drift (ref points elsewhere) and
+ *                       primitive drift (same ref, shade hex moved, e.g. the
+ *                       surface-white / gray-900 #0f0f0f -> #1f1f1f case).
+ *   3. LEGACY         — token present in code but absent from the Figma export.
+ *                       Deprecation candidate; we suggest a replacement by
+ *                       matching resolved hex against live Figma tokens.
+ *
+ * Usage:  node tailwind/audit-token-drift.js [baselineRef]
+ *         baselineRef defaults to v0.1.278
+ */
+const { execSync } = require('child_process')
+const fs = require('fs')
+const path = require('path')
+
+const ROOT = path.resolve(__dirname, '..')
+const BASELINE = process.argv[2] || 'v0.1.278'
+const GROUPS = ['surface', 'ink', 'outline']
+const MODES = ['light', 'dark']
+
+function loadJSON(p) {
+  return JSON.parse(fs.readFileSync(path.join(ROOT, p), 'utf8'))
+}
+function loadFromRef(ref, p) {
+  try {
+    return JSON.parse(execSync(`git show ${ref}:${p}`, { cwd: ROOT }).toString())
+  } catch (e) {
+    return null
+  }
+}
+
+// Resolve a color ref like "lightMode/gray/900" or "neutral/white" to a hex.
+// Returns { hex } on success or { missing: ref } when the shade is absent.
+function resolveRef(ref, palette) {
+  if (typeof ref !== 'string') return { hex: null }
+  const parts = ref.split('/')
+  let node = palette
+  for (const part of parts) {
+    if (node && typeof node === 'object' && part in node) node = node[part]
+    else return { missing: ref }
+  }
+  if (typeof node === 'string') return { hex: node.toLowerCase() }
+  return { missing: ref }
+}
+
+// All themed tokens resolved to hex for a given colors.json object.
+function resolveAll(colors) {
+  const out = {}
+  for (const mode of MODES) {
+    for (const group of GROUPS) {
+      const map = colors?.themedVariables?.[mode]?.[group] || {}
+      for (const key of Object.keys(map)) {
+        const id = `${mode}.${group}.${key}`
+        out[id] = { ref: map[key], ...resolveRef(map[key], colors) }
+      }
+    }
+  }
+  return out
+}
+
+// Figma semantic token keys per group (union of Light + Dark styles).
+function figmaKeySet() {
+  const fl = loadJSON('espresso-v2-design-tokens/Styles.Light.tokens.json')
+  const fd = loadJSON('espresso-v2-design-tokens/Styles.Dark.tokens.json')
+  const set = {}
+  for (const g of GROUPS) {
+    set[g] = new Set([...Object.keys(fl[g] || {}), ...Object.keys(fd[g] || {})])
+  }
+  return set
+}
+
+// Count usages of a `${prefix}-${key}` token across src/ Tailwind classes.
+function usageCount(group, key) {
+  const prefix = { surface: 'bg-surface', ink: 'text-ink', outline: '(border|ring|outline)-outline' }[group]
+  const pattern = `\\b(${prefix})-${key}\\b`
+  try {
+    const out = execSync(
+      `grep -rhoE '${pattern}' src 2>/dev/null | wc -l`,
+      { cwd: ROOT },
+    ).toString().trim()
+    return parseInt(out, 10) || 0
+  } catch {
+    return 0
+  }
+}
+
+function main() {
+  const headColors = loadJSON('tailwind/colors.json')
+  const baseColors = loadFromRef(BASELINE, 'tailwind/colors.json')
+  const head = resolveAll(headColors)
+  const base = baseColors ? resolveAll(baseColors) : null
+  const figma = figmaKeySet()
+
+  const broken = []
+  const drift = []
+  const legacy = []
+
+  // Build a hex -> figma token index for replacement suggestions.
+  const hexToFigma = {}
+  for (const id of Object.keys(head)) {
+    const [, group, key] = id.split('.')
+    if (figma[group].has(key) && head[id].hex) {
+      ;(hexToFigma[head[id].hex] ||= new Set()).add(`${group}.${key}`)
+    }
+  }
+
+  for (const id of Object.keys(head)) {
+    const [, group, key] = id.split('.')
+    const h = head[id]
+
+    if (h.missing) broken.push({ id, ref: h.missing })
+
+    if (base && base[id] && base[id].hex && h.hex && base[id].hex !== h.hex) {
+      const sameRef = base[id].ref === h.ref
+      drift.push({
+        id,
+        from: base[id].hex,
+        to: h.hex,
+        kind: sameRef ? 'primitive' : 'mapping',
+        refFrom: base[id].ref,
+        refTo: h.ref,
+      })
+    }
+
+    if (!figma[group].has(key)) {
+      const suggestions = [...(hexToFigma[h.hex] || [])].filter((s) => s !== `${group}.${key}`)
+      legacy.push({ id, group, key, hex: h.hex, uses: usageCount(group, key), suggestions })
+    }
+  }
+
+  const seenLegacy = new Set()
+  const dedupLegacy = legacy.filter((l) => {
+    const k = `${l.group}.${l.key}`
+    if (seenLegacy.has(k)) return false
+    seenLegacy.add(k)
+    return true
+  })
+
+  console.log(`# Token Drift Audit — baseline ${BASELINE} -> HEAD\n`)
+
+  console.log(`## 1. Build-breaking (ref no longer resolves) — ${broken.length}\n`)
+  if (!broken.length) console.log('_none_\n')
+  for (const b of broken) console.log(`- \`${b.id}\` → missing shade \`${b.ref}\``)
+
+  console.log(`\n## 2. Silent drift (resolved hex changed) — ${drift.length}\n`)
+  if (!base) console.log(`_baseline ${BASELINE} not available_\n`)
+  else if (!drift.length) console.log('_none_\n')
+  else {
+    console.log('| token | kind | from | to | ref change |')
+    console.log('| --- | --- | --- | --- | --- |')
+    for (const d of drift) {
+      const refCol = d.kind === 'mapping' ? `${d.refFrom} → ${d.refTo}` : d.refTo
+      console.log(`| \`${d.id}\` | ${d.kind} | ${d.from} | ${d.to} | ${refCol} |`)
+    }
+  }
+
+  console.log(`\n## 3. Legacy tokens (in code, absent from Figma) — ${dedupLegacy.length}\n`)
+  console.log('| token | hex | uses in src | suggested replacement (same hex) |')
+  console.log('| --- | --- | --- | --- |')
+  for (const l of dedupLegacy.sort((a, b) => b.uses - a.uses)) {
+    console.log(
+      `| \`${l.group}.${l.key}\` | ${l.hex || '?'} | ${l.uses} | ${l.suggestions.join(', ') || '—'} |`,
+    )
+  }
+}
+
+main()
diff --git a/tailwind/colorPalette.js b/tailwind/colorPalette.js
index cfda87923..211ebda62 100644
--- a/tailwind/colorPalette.js
+++ b/tailwind/colorPalette.js
@@ -1,5 +1,6 @@
 import tailwindColors from 'tailwindcss/colors'
 import colorsData from './colors.json'
+import effectsData from './generated/effects.json'
 
 function generateColorPalette() {
   const colorPalette = {
@@ -107,11 +108,9 @@ function generateCSSVariables() {
 }
 
 function generateSemanticColors() {
-  const output = {
-    outline: {},
-    surface: {},
-    ink: {},
-  }
+  const output = Object.fromEntries(
+    Object.keys(colorsData.themedVariables.light).map((category) => [category, {}]),
+  )
 
   // Generate semantic colors
   Object.keys(colorsData.themedVariables.light).forEach((category) => {
@@ -129,4 +128,52 @@ function generateSemanticColors() {
   return output
 }
 
-export { generateColorPalette, generateCSSVariables, generateSemanticColors }
+// Emit `--elevation-*` and `--focus-*` CSS variables. Elevation uses the
+// Figma `light/*` values in both modes (matches how Espresso 2.0 actually
+// applies shadows in dark mode — see the dark-mode page in Figma, which
+// references `elevation/light/*` exclusively). The Figma `dark/*` set is
+// exposed as `--dark-elevation-*` for opt-in use via `shadow-dark-*`.
+// Focus rings still mode-swap. Theme-independent entries (e.g.
+// `elevation.custom.status`) land in `:root` only.
+function generateEffectVariables() {
+  const output = {
+    ':root': {},
+    '[data-theme="dark"]': {},
+  }
+
+  for (const [step, value] of Object.entries(effectsData.elevation.light)) {
+    output[':root'][`--elevation-${step}`] = value
+  }
+  for (const [step, value] of Object.entries(effectsData.elevation.dark)) {
+    output[':root'][`--dark-elevation-${step}`] = value
+  }
+  for (const [name, value] of Object.entries(effectsData.elevation.custom)) {
+    output[':root'][`--elevation-${name}`] = value
+  }
+  for (const [name, value] of Object.entries(effectsData.focus.light)) {
+    output[':root'][`--focus-${name}`] = value
+    output[':root'][`--focus-outline-${name}`] = shadowToOutline(value)
+  }
+  for (const [name, value] of Object.entries(effectsData.focus.dark)) {
+    output['[data-theme="dark"]'][`--focus-${name}`] = value
+    output['[data-theme="dark"]'][`--focus-outline-${name}`] = shadowToOutline(value)
+  }
+
+  return output
+}
+
+// Focus tokens are single-layer `0 0 0 <spread> <color>` shadows — re-express
+// as an `outline` shorthand (`<spread> solid <color>`) so the global focus
+// ring can use outline instead of box-shadow (no collisions with shadow/ring
+// utilities, survives forced-colors mode).
+function shadowToOutline(shadow) {
+  const parts = shadow.trim().split(/\s+/)
+  return `${parts[3]} solid ${parts.slice(4).join(' ')}`
+}
+
+export {
+  generateColorPalette,
+  generateCSSVariables,
+  generateSemanticColors,
+  generateEffectVariables,
+}
diff --git a/tailwind/colors.json b/tailwind/colors.json
index 5ececaedb..6d91edfcd 100644
--- a/tailwind/colors.json
+++ b/tailwind/colors.json
@@ -1,498 +1,1216 @@
 {
   "lightMode": {
     "gray": {
-      "50": "#F8F8F8",
-      "100": "#F3F3F3",
-      "200": "#EDEDED",
-      "300": "#E2E2E2",
-      "400": "#C7C7C7",
+      "50": "#f8f8f8",
+      "100": "#f3f3f3",
+      "200": "#ededed",
+      "300": "#e2e2e2",
+      "400": "#c7c7c7",
       "500": "#999999",
-      "600": "#7C7C7C",
+      "600": "#7c7c7c",
       "700": "#525252",
       "800": "#383838",
-      "900": "#171717"
+      "900": "#171717",
+      "950": "#0f0f0f"
     },
     "blue": {
-      "50": "#F2F9FF",
-      "100": "#E6F4FF",
-      "200": "#C8E6FF",
-      "300": "#A7D7FD",
-      "400": "#73BBF6",
-      "500": "#0289F7",
-      "600": "#007BE0",
-      "700": "#0070CC",
-      "800": "#005CA3",
-      "900": "#004880"
+      "50": "#f1f8fe",
+      "100": "#e6f4ff",
+      "200": "#d1eaff",
+      "300": "#b5ddfd",
+      "400": "#61afef",
+      "500": "#0d8ef8",
+      "600": "#077ddf",
+      "700": "#0375d3",
+      "800": "#005cad",
+      "900": "#004880",
+      "950": "#032e63"
     },
     "green": {
-      "50": "#F2FDF4",
-      "100": "#E4FAEB",
-      "200": "#C3F9D3",
-      "300": "#A6EFC0",
-      "400": "#86E0A8",
-      "500": "#46B37E",
-      "600": "#278F5E",
-      "700": "#137949",
-      "800": "#075E35",
-      "900": "#173B2C"
+      "50": "#f0faf3",
+      "100": "#e4faeb",
+      "200": "#bdefcc",
+      "300": "#a8e6be",
+      "400": "#7edaa1",
+      "500": "#43ac79",
+      "600": "#268c5c",
+      "700": "#14804d",
+      "800": "#075e35",
+      "900": "#173b2c",
+      "950": "#0a3020"
     },
     "red": {
-      "50": "#FFF7F7",
-      "100": "#FFE7E7",
-      "200": "#FFD8D8",
-      "300": "#FDC2C2",
-      "400": "#F79596",
-      "500": "#E03636",
-      "600": "#CC2929",
-      "700": "#B52A2A",
-      "800": "#941F1F",
-      "900": "#6B1515"
-    },
-    "amber": {
-      "50": "#FDFAED",
-      "100": "#FFF7D3",
-      "200": "#FEEDA9",
-      "300": "#FBDB73",
-      "400": "#FBCC55",
-      "500": "#E79913",
-      "600": "#DB7706",
-      "700": "#B35309",
-      "800": "#91400D",
-      "900": "#763813"
+      "50": "#fff5f5",
+      "100": "#ffe7e7",
+      "200": "#ffd8d8",
+      "300": "#fdc2c2",
+      "400": "#f79596",
+      "500": "#e03434",
+      "600": "#ce2c2c",
+      "700": "#b41d1d",
+      "800": "#941f1f",
+      "900": "#6b1515",
+      "950": "#4c0d0d"
     },
     "orange": {
-      "50": "#FFF9F5",
-      "100": "#FFEFE4",
-      "200": "#FFDEC5",
-      "300": "#FFCBA3",
-      "400": "#F4B07F",
-      "500": "#E86C13",
-      "600": "#D45A08",
-      "700": "#BD3E0C",
-      "800": "#9E3513",
-      "900": "#6B2711"
+      "50": "#fff4ed",
+      "100": "#ffefe4",
+      "200": "#ffdec5",
+      "300": "#ffcba3",
+      "400": "#f4b07f",
+      "500": "#e86c13",
+      "600": "#d35a09",
+      "700": "#bd3e0c",
+      "800": "#9e3513",
+      "900": "#6b2711",
+      "950": "#491605"
+    },
+    "amber": {
+      "50": "#fdf8ed",
+      "100": "#fff4d3",
+      "200": "#f6eac0",
+      "300": "#f3e3b4",
+      "400": "#f4cd80",
+      "500": "#df9311",
+      "600": "#ca7e0c",
+      "700": "#bb6f0c",
+      "800": "#91400d",
+      "900": "#763813",
+      "950": "#4e2209"
     },
     "yellow": {
-      "50": "#FFFCEF",
-      "100": "#FFF7D3",
-      "200": "#F7E9A8",
-      "300": "#F5E171",
-      "400": "#F2D14B",
-      "500": "#EDBA13",
-      "600": "#D1930D",
-      "700": "#AB6E05",
-      "800": "#8C5600",
-      "900": "#733F12"
+      "50": "#fcfbe8",
+      "100": "#fff7d3",
+      "200": "#f7e9a8",
+      "300": "#f5e171",
+      "400": "#f2d14b",
+      "500": "#edba13",
+      "600": "#ab790d",
+      "700": "#9a6304",
+      "800": "#8c5600",
+      "900": "#733f12",
+      "950": "#542e0d"
     },
     "teal": {
-      "50": "#F0FDFA",
-      "100": "#E6F7F4",
-      "200": "#BAE8E1",
-      "300": "#97DED4",
-      "400": "#73D1C4",
-      "500": "#36BAAD",
-      "600": "#0B9E92",
-      "700": "#0F736B",
-      "800": "#115C57",
-      "900": "#114541"
+      "50": "#eefbf8",
+      "100": "#e6f7f4",
+      "200": "#bae8e1",
+      "300": "#97ded4",
+      "400": "#73d1c4",
+      "500": "#36baad",
+      "600": "#0a857b",
+      "700": "#0f736b",
+      "800": "#115c57",
+      "900": "#114541",
+      "950": "#053734"
     },
     "cyan": {
-      "50": "#F5FBFC",
-      "100": "#DDF7FF",
-      "200": "#B3E8F7",
-      "300": "#99E2F8",
-      "400": "#72D5F3",
-      "500": "#3BBDE5",
-      "600": "#32A4C7",
-      "700": "#267A94",
-      "800": "#125C73",
-      "900": "#164759"
+      "50": "#f2fbfd",
+      "100": "#ddf7ff",
+      "200": "#b3e8f7",
+      "300": "#99e2f8",
+      "400": "#72d5f3",
+      "500": "#3bbde5",
+      "600": "#1f8cad",
+      "700": "#1d7f9d",
+      "800": "#125c73",
+      "900": "#164759",
+      "950": "#05383f"
     },
     "purple": {
-      "50": "#FDFAFF",
-      "100": "#F6E9FF",
-      "200": "#ECD3FF",
-      "300": "#E2B9FC",
-      "400": "#CFA1F2",
-      "500": "#9C45E3",
-      "600": "#8642C2",
-      "700": "#6E399D",
-      "800": "#5C2F83",
-      "900": "#401863"
+      "50": "#f8f3fb",
+      "100": "#f6e9ff",
+      "200": "#ecd3ff",
+      "300": "#e2b9fc",
+      "400": "#bf78fa",
+      "500": "#9c45e3",
+      "600": "#8e49ca",
+      "700": "#6e399d",
+      "800": "#5c2f83",
+      "900": "#401863",
+      "950": "#2d084e"
     },
     "pink": {
-      "50": "#FFF7FC",
-      "100": "#FDE8F5",
-      "200": "#FFD5F0",
-      "300": "#F9B9E0",
-      "400": "#F6A7D6",
-      "500": "#E34AA6",
-      "600": "#CF3A96",
-      "700": "#9C2671",
+      "50": "#fff7fc",
+      "100": "#fde8f5",
+      "200": "#ffd5f0",
+      "300": "#f9b9e0",
+      "400": "#f77cc6",
+      "500": "#e34aa6",
+      "600": "#cf3a96",
+      "700": "#9c2671",
       "800": "#801458",
-      "900": "#570F3E"
+      "900": "#570f3e",
+      "950": "#40062c"
     },
     "violet": {
-      "50": "#FBFAFF",
-      "100": "#F0EBFF",
-      "200": "#DBD5FF",
-      "300": "#C9BAFB",
-      "400": "#B3A1F5",
-      "500": "#6846E3",
-      "600": "#5F46C7",
-      "700": "#4F3DA1",
+      "50": "#f7f6fe",
+      "100": "#eee8ff",
+      "200": "#dbd5ff",
+      "300": "#d2c5fc",
+      "400": "#b5a1fc",
+      "500": "#7757ee",
+      "600": "#6e57d1",
+      "700": "#4f3da1",
       "800": "#392980",
-      "900": "#251959"
+      "900": "#251959",
+      "950": "#150655"
+    },
+    "gray-alpha": {
+      "50": "#00000008",
+      "100": "#0000000b",
+      "200": "#00000012",
+      "300": "#0000001d",
+      "400": "#00000038",
+      "500": "#00000066",
+      "600": "#00000083",
+      "700": "#000000ad",
+      "800": "#000000c7",
+      "900": "#000000e8",
+      "950": "#000000f0"
     }
   },
   "darkMode": {
     "gray": {
-      "50": "#F8F8F8",
-      "100": "#D4D4D4",
-      "200": "#AFAFAF",
-      "250": "#999999",
-      "300": "#808080",
-      "400": "#717171",
+      "50": "#f8f8f8",
+      "100": "#d9d9d9",
+      "200": "#afafaf",
+      "300": "#999999",
+      "400": "#7a7a7a",
+      "450": "#575757",
       "500": "#424242",
-      "600": "#343434",
-      "650": "#2B2B2B",
-      "700": "#232323",
-      "800": "#1C1C1C",
-      "900": "#0F0F0F"
+      "600": "#383838",
+      "700": "#292929",
+      "800": "#242424",
+      "900": "#1f1f1f",
+      "950": "#171717"
     },
     "blue": {
-      "50": "#C9E0F5",
-      "100": "#ADD2F5",
-      "200": "#8CC1EC",
-      "300": "#5AAEF2",
-      "400": "#3294E3",
-      "500": "#1580D8",
-      "600": "#155999",
-      "700": "#063D71",
-      "800": "#052B53",
-      "900": "#0E2037",
-      "900-80": "#0E2037CC"
+      "50": "#c9e0f5",
+      "100": "#add2f5",
+      "200": "#76bef9",
+      "300": "#349bef",
+      "400": "#2480cc",
+      "500": "#1c6ec4",
+      "600": "#0c59a2",
+      "700": "#074783",
+      "800": "#063465",
+      "900": "#0a2e5c",
+      "950": "#0f233d"
     },
     "green": {
-      "50": "#C8F3DE",
-      "100": "#9BE6C1",
-      "200": "#78D7A9",
-      "300": "#58C08E",
-      "400": "#1BA964",
-      "500": "#0A9752",
-      "600": "#0F814A",
-      "700": "#035831",
-      "800": "#0A3F27",
-      "900": "#0B2E1C"
+      "50": "#c8f3de",
+      "100": "#9be6c1",
+      "200": "#7dc5a2",
+      "300": "#359768",
+      "400": "#128251",
+      "500": "#117846",
+      "600": "#077241",
+      "700": "#085934",
+      "800": "#0a4229",
+      "900": "#0e3521",
+      "950": "#072716"
     },
     "red": {
-      "50": "#FFC1C1",
-      "100": "#FF9595",
-      "200": "#FC7474",
-      "300": "#EB4D52",
-      "400": "#E43838",
-      "500": "#C12020",
-      "600": "#901818",
-      "700": "#681916",
-      "800": "#521515",
-      "900": "#361515",
-      "800-90": "#521515E6",
-      "900-90": "#361515E6"
-    },
-    "amber": {
-      "50": "#F9E8A5",
-      "100": "#F8D16E",
-      "200": "#F0BA31",
-      "300": "#E79913",
-      "400": "#E37D00",
-      "500": "#CB6D10",
-      "600": "#824108",
-      "700": "#603007",
-      "800": "#4B2606",
-      "900": "#371E06"
+      "50": "#ffdede",
+      "100": "#ffc1c1",
+      "200": "#ff7575",
+      "300": "#eb4c4c",
+      "400": "#c23838",
+      "500": "#b03030",
+      "600": "#8e2e2e",
+      "700": "#852929",
+      "800": "#742a2a",
+      "900": "#592222",
+      "950": "#391416"
     },
     "orange": {
-      "50": "#FFCDAD",
-      "100": "#FFA873",
-      "200": "#FA8A40",
-      "300": "#DE6D1B",
-      "400": "#C45A0E",
+      "50": "#ffcdad",
+      "100": "#ffa873",
+      "200": "#fa8a40",
+      "300": "#e3701c",
+      "400": "#e16914",
       "500": "#984509",
       "600": "#823906",
       "700": "#683108",
       "800": "#532707",
-      "900": "#401F07",
-      "900-80": "#401F07CC"
+      "900": "#361c09",
+      "950": "#2b1708"
+    },
+    "amber": {
+      "50": "#ffe59a",
+      "100": "#f4c25f",
+      "200": "#e9a144",
+      "300": "#c67515",
+      "400": "#bd660f",
+      "500": "#af5e0e",
+      "600": "#985315",
+      "700": "#753a07",
+      "800": "#5a2d07",
+      "900": "#452608",
+      "950": "#331c06"
     },
     "yellow": {
-      "50": "#FFE89D",
-      "100": "#F8D76A",
-      "200": "#ECC02E",
-      "300": "#DAAE15",
-      "400": "#C69C12",
-      "500": "#9C7A0A",
-      "600": "#705606",
-      "700": "#5B4605",
-      "800": "#3F3004",
-      "900": "#322604"
+      "50": "#ffeeb8",
+      "100": "#ffe386",
+      "200": "#f8d76a",
+      "300": "#ecc02e",
+      "400": "#bb972a",
+      "500": "#9c7e1c",
+      "600": "#99780a",
+      "700": "#705606",
+      "800": "#5b4605",
+      "900": "#3a2c04",
+      "950": "#261d03"
     },
     "teal": {
-      "50": "#93F2E8",
-      "100": "#6EE7DB",
-      "200": "#52DACC",
-      "300": "#3DC6B8",
-      "400": "#219C8F",
-      "500": "#1B7169",
-      "600": "#13564F",
-      "700": "#0C423C",
-      "800": "#0B3A35",
-      "900": "#0A2D29"
+      "50": "#a0f7ed",
+      "100": "#7ef3e7",
+      "200": "#51decf",
+      "300": "#28bcac",
+      "400": "#2ca094",
+      "500": "#1b7169",
+      "600": "#145b54",
+      "700": "#0b4942",
+      "800": "#0b3a35",
+      "900": "#0a2d29",
+      "950": "#0b2320"
     },
     "cyan": {
-      "50": "#D0F0FA",
-      "100": "#A0E6F7",
-      "200": "#68D3F3",
-      "300": "#3CB8DC",
-      "400": "#2B8DAB",
-      "500": "#23728B",
-      "600": "#155266",
-      "700": "#0E3B49",
-      "800": "#0D2B36",
-      "900": "#0B252D"
+      "50": "#d0f0fa",
+      "100": "#95e3f6",
+      "200": "#62cae9",
+      "300": "#3cb8dc",
+      "400": "#249cc2",
+      "500": "#107b9b",
+      "600": "#0c6783",
+      "700": "#104f62",
+      "800": "#0d3b49",
+      "900": "#0b2932",
+      "950": "#0b2028"
     },
     "purple": {
-      "50": "#E5C6FB",
-      "100": "#D9AFF5",
-      "200": "#C993EF",
-      "300": "#B168E8",
-      "400": "#984BD8",
-      "500": "#7A2DB9",
-      "600": "#591F89",
-      "700": "#47176E",
+      "50": "#e5c6fb",
+      "100": "#d9aff5",
+      "200": "#c993ef",
+      "300": "#b168e8",
+      "400": "#a26fce",
+      "500": "#7a2db9",
+      "600": "#622195",
+      "700": "#491870",
       "800": "#391457",
-      "900": "#2E1146"
+      "900": "#2c1042",
+      "950": "#23132f"
     },
     "pink": {
-      "50": "#F6C5DE",
-      "100": "#F69AD1",
-      "200": "#ED77BE",
-      "300": "#E359AB",
-      "400": "#CB4394",
-      "500": "#AC377D",
-      "600": "#822A5F",
-      "700": "#68204B",
-      "800": "#601D46",
-      "900": "#471432",
-      "900-80": "#471432CC"
+      "50": "#ffbbe4",
+      "100": "#f69ad1",
+      "200": "#ed77be",
+      "300": "#e359ab",
+      "400": "#cb5d9e",
+      "500": "#ac377d",
+      "600": "#892660",
+      "700": "#6f1d4d",
+      "800": "#5b183f",
+      "900": "#42132f",
+      "950": "#2e0f22"
     },
     "violet": {
-      "50": "#DACBF7",
-      "100": "#C4AFEE",
-      "200": "#B398EF",
-      "300": "#9D7CEA",
-      "400": "#8867E8",
-      "500": "#5C3FC2",
-      "600": "#4639A6",
-      "700": "#332978",
-      "800": "#281E5D",
-      "900": "#221C42"
+      "50": "#d0c2ff",
+      "100": "#c2b0fc",
+      "200": "#baa8f5",
+      "300": "#9175f0",
+      "400": "#6c4dd5",
+      "500": "#593bbf",
+      "600": "#403397",
+      "700": "#423691",
+      "800": "#3c2a92",
+      "900": "#2f236c",
+      "950": "#1e1646"
+    },
+    "gray-alpha": {
+      "50": "#fffffff7",
+      "100": "#ffffffd4",
+      "200": "#ffffffa8",
+      "300": "#ffffff8f",
+      "400": "#ffffff6c",
+      "450": "#ffffff46",
+      "500": "#ffffff2f",
+      "600": "#ffffff24",
+      "700": "#ffffff14",
+      "800": "#ffffff0e",
+      "900": "#ffffff09",
+      "950": "#0000000a"
     }
   },
   "overlay": {
     "white": {
-      "50": "#FFFFFF1A",
-      "100": "#FFFFFF2E",
-      "200": "#FFFFFF45",
-      "300": "#FFFFFF5C",
-      "400": "#FFFFFF73",
-      "500": "#FFFFFF8A",
-      "600": "#FFFFFFA1",
-      "700": "#FFFFFFB8",
-      "800": "#FFFFFFCF",
-      "900": "#FFFFFFE6"
+      "50": "#ffffff1a",
+      "100": "#ffffff2e",
+      "200": "#ffffff45",
+      "300": "#ffffff5c",
+      "400": "#ffffff73",
+      "500": "#ffffff8a",
+      "600": "#ffffffa1",
+      "700": "#ffffffb8",
+      "800": "#ffffffcf",
+      "900": "#ffffffe5",
+      "950": "#fffffff2"
     },
     "black": {
       "50": "#00000017",
-      "100": "#0000002E",
+      "100": "#0000002e",
       "200": "#00000045",
-      "300": "#0000005C",
+      "300": "#0000005c",
       "400": "#00000073",
-      "500": "#0000008A",
-      "600": "#000000A1",
-      "700": "#000000B8",
-      "800": "#000000CF",
-      "900": "#000000E6"
+      "500": "#0000008a",
+      "600": "#000000a1",
+      "700": "#000000b8",
+      "800": "#000000cf",
+      "900": "#000000e5",
+      "950": "#000000f2"
     }
   },
   "neutral": {
-    "white": "#FFFFFF",
-    "black": "#000000"
+    "white": "#ffffff",
+    "black": "#000000",
+    "transparent": "#ffffff00"
   },
   "themedVariables": {
     "light": {
-      "outline": {
-        "white": "neutral/white",
-        "gray-1": "lightMode/gray/200",
-        "gray-2": "lightMode/gray/300",
-        "gray-3": "lightMode/gray/400",
-        "gray-4": "lightMode/gray/500",
-        "gray-5": "lightMode/gray/800",
-        "red-1": "lightMode/red/300",
-        "red-2": "lightMode/red/400",
-        "red-3": "lightMode/red/500",
-        "green-1": "lightMode/green/300",
-        "green-2": "lightMode/green/400",
-        "amber-1": "lightMode/amber/300",
-        "amber-2": "lightMode/amber/400",
-        "blue-1": "lightMode/blue/300",
-        "orange-1": "lightMode/orange/400",
-        "gray-modals": "lightMode/gray/200"
-      },
       "surface": {
-        "white": "neutral/white",
+        "base": "neutral/white",
         "gray-1": "lightMode/gray/50",
         "gray-2": "lightMode/gray/100",
         "gray-3": "lightMode/gray/200",
         "gray-4": "lightMode/gray/300",
-        "gray-5": "lightMode/gray/700",
-        "gray-6": "lightMode/gray/800",
-        "gray-7": "lightMode/gray/900",
+        "gray-5": "lightMode/gray/400",
+        "gray-6": "lightMode/gray/500",
+        "gray-7": "lightMode/gray/600",
+        "gray-8": "lightMode/gray/700",
+        "gray-9": "lightMode/gray/800",
+        "gray-10": "lightMode/gray/900",
+        "sidebar": "lightMode/gray/50",
+        "elevation-1": "neutral/white",
+        "elevation-2": "neutral/white",
+        "elevation-3": "neutral/white",
         "red-1": "lightMode/red/50",
         "red-2": "lightMode/red/100",
         "red-3": "lightMode/red/200",
         "red-4": "lightMode/red/300",
-        "red-5": "lightMode/red/600",
-        "red-6": "lightMode/red/700",
-        "red-7": "lightMode/red/800",
+        "red-5": "lightMode/red/400",
+        "red-6": "lightMode/red/500",
+        "red-7": "lightMode/red/600",
+        "red-8": "lightMode/red/700",
+        "red-9": "lightMode/red/800",
+        "red-10": "lightMode/red/900",
+        "blue-1": "lightMode/blue/50",
+        "blue-2": "lightMode/blue/100",
+        "blue-3": "lightMode/blue/200",
+        "blue-4": "lightMode/blue/300",
+        "blue-5": "lightMode/blue/400",
+        "blue-6": "lightMode/blue/500",
+        "blue-7": "lightMode/blue/600",
+        "blue-8": "lightMode/blue/700",
+        "blue-9": "lightMode/blue/800",
+        "blue-10": "lightMode/blue/900",
         "green-1": "lightMode/green/50",
         "green-2": "lightMode/green/100",
-        "green-3": "lightMode/green/600",
+        "green-3": "lightMode/green/200",
+        "green-4": "lightMode/green/300",
+        "green-5": "lightMode/green/400",
+        "green-6": "lightMode/green/500",
+        "green-7": "lightMode/green/600",
+        "green-8": "lightMode/green/700",
+        "green-9": "lightMode/green/800",
+        "green-10": "lightMode/green/900",
         "amber-1": "lightMode/amber/50",
         "amber-2": "lightMode/amber/100",
-        "amber-3": "lightMode/amber/600",
-        "blue-1": "lightMode/blue/50",
-        "blue-2": "lightMode/blue/100",
-        "blue-3": "lightMode/blue/600",
-        "orange-1": "lightMode/orange/100",
-        "violet-1": "lightMode/violet/100",
-        "cyan-1": "lightMode/cyan/100",
-        "pink-1": "lightMode/pink/100",
-        "menu-bar": "lightMode/gray/50",
-        "cards": "neutral/white",
-        "modal": "neutral/white",
-        "selected": "neutral/white"
+        "amber-3": "lightMode/amber/200",
+        "amber-4": "lightMode/amber/300",
+        "amber-5": "lightMode/amber/400",
+        "amber-6": "lightMode/amber/500",
+        "amber-7": "lightMode/amber/600",
+        "amber-8": "lightMode/amber/700",
+        "amber-9": "lightMode/amber/800",
+        "amber-10": "lightMode/amber/900",
+        "violet-1": "lightMode/violet/50",
+        "violet-2": "lightMode/violet/100",
+        "violet-3": "lightMode/violet/200",
+        "violet-4": "lightMode/violet/300",
+        "violet-5": "lightMode/violet/400",
+        "violet-6": "lightMode/violet/500",
+        "violet-7": "lightMode/violet/600",
+        "violet-8": "lightMode/violet/700",
+        "violet-9": "lightMode/violet/800",
+        "violet-10": "lightMode/violet/900",
+        "yellow-1": "lightMode/yellow/50",
+        "yellow-2": "lightMode/yellow/100",
+        "yellow-3": "lightMode/yellow/200",
+        "yellow-4": "lightMode/yellow/300",
+        "yellow-5": "lightMode/yellow/400",
+        "yellow-6": "lightMode/yellow/500",
+        "yellow-7": "lightMode/yellow/600",
+        "yellow-8": "lightMode/yellow/700",
+        "yellow-9": "lightMode/yellow/800",
+        "yellow-10": "lightMode/yellow/900",
+        "orange-1": "lightMode/orange/50",
+        "orange-2": "lightMode/orange/100",
+        "orange-3": "lightMode/orange/200",
+        "orange-4": "lightMode/orange/300",
+        "orange-5": "lightMode/orange/400",
+        "orange-6": "lightMode/orange/500",
+        "orange-7": "lightMode/orange/600",
+        "orange-8": "lightMode/orange/700",
+        "orange-9": "lightMode/orange/800",
+        "orange-10": "lightMode/orange/900",
+        "teal-1": "lightMode/teal/50",
+        "teal-2": "lightMode/teal/100",
+        "teal-3": "lightMode/teal/200",
+        "teal-4": "lightMode/teal/300",
+        "teal-5": "lightMode/teal/400",
+        "teal-6": "lightMode/teal/500",
+        "teal-7": "lightMode/teal/600",
+        "teal-8": "lightMode/teal/700",
+        "teal-9": "lightMode/teal/800",
+        "teal-10": "lightMode/teal/900",
+        "cyan-1": "lightMode/cyan/50",
+        "cyan-2": "lightMode/cyan/100",
+        "cyan-3": "lightMode/cyan/200",
+        "cyan-4": "lightMode/cyan/300",
+        "cyan-5": "lightMode/cyan/400",
+        "cyan-6": "lightMode/cyan/500",
+        "cyan-7": "lightMode/cyan/600",
+        "cyan-8": "lightMode/cyan/700",
+        "cyan-9": "lightMode/cyan/800",
+        "cyan-10": "lightMode/cyan/900",
+        "purple-1": "lightMode/purple/50",
+        "purple-2": "lightMode/purple/100",
+        "purple-3": "lightMode/purple/200",
+        "purple-4": "lightMode/purple/300",
+        "purple-5": "lightMode/purple/400",
+        "purple-6": "lightMode/purple/500",
+        "purple-7": "lightMode/purple/600",
+        "purple-8": "lightMode/purple/700",
+        "purple-9": "lightMode/purple/800",
+        "purple-10": "lightMode/purple/900",
+        "pink-1": "lightMode/pink/50",
+        "pink-2": "lightMode/pink/100",
+        "pink-3": "lightMode/pink/200",
+        "pink-4": "lightMode/pink/300",
+        "pink-5": "lightMode/pink/400",
+        "pink-6": "lightMode/pink/500",
+        "pink-7": "lightMode/pink/600",
+        "pink-8": "lightMode/pink/700",
+        "pink-9": "lightMode/pink/800",
+        "pink-10": "lightMode/pink/900",
+        "alert-button-default": "neutral/white",
+        "alert-button-info": "neutral/white",
+        "alert-button-success": "neutral/white",
+        "alert-button-warning": "neutral/white",
+        "alert-button-error": "neutral/white"
+      },
+      "surface-alpha": {
+        "base": "neutral/white",
+        "gray-1": "lightMode/gray-alpha/50",
+        "gray-2": "lightMode/gray-alpha/100",
+        "gray-3": "lightMode/gray-alpha/200",
+        "gray-4": "lightMode/gray-alpha/300",
+        "gray-5": "lightMode/gray-alpha/400",
+        "gray-6": "lightMode/gray-alpha/500",
+        "gray-7": "lightMode/gray-alpha/600",
+        "gray-8": "lightMode/gray-alpha/700",
+        "gray-9": "lightMode/gray-alpha/800",
+        "gray-10": "lightMode/gray-alpha/900",
+        "sidebar": "lightMode/gray/50",
+        "elevation-1": "neutral/white",
+        "elevation-2": "neutral/white",
+        "elevation-3": "neutral/white",
+        "gray-2-overlay": "overlay/black/50"
       },
       "ink": {
-        "white": "neutral/white",
+        "base": "neutral/white",
         "gray-1": "lightMode/gray/200",
         "gray-2": "lightMode/gray/300",
         "gray-3": "lightMode/gray/400",
         "gray-4": "lightMode/gray/500",
         "gray-5": "lightMode/gray/600",
         "gray-6": "lightMode/gray/700",
-        "gray-7": "lightMode/gray/700",
-        "gray-8": "lightMode/gray/800",
-        "gray-9": "lightMode/gray/900",
-        "red-1": "lightMode/red/50",
-        "red-2": "lightMode/red/400",
-        "red-3": "lightMode/red/500",
-        "red-4": "lightMode/red/600",
-        "green-1": "lightMode/green/50",
-        "green-2": "lightMode/green/500",
-        "green-3": "lightMode/green/600",
-        "amber-1": "lightMode/amber/50",
-        "amber-2": "lightMode/amber/500",
-        "amber-3": "lightMode/amber/600",
-        "blue-1": "lightMode/blue/50",
-        "blue-2": "lightMode/blue/500",
-        "blue-3": "lightMode/blue/600",
-        "cyan-1": "lightMode/cyan/500",
-        "pink-1": "lightMode/pink/500",
-        "violet-1": "lightMode/violet/500",
-        "blue-link": "lightMode/blue/400"
+        "gray-7": "lightMode/gray/800",
+        "gray-8": "lightMode/gray/900",
+        "gray-9": "lightMode/gray/950",
+        "red-1": "neutral/white",
+        "red-2": "lightMode/red/100",
+        "red-3": "lightMode/red/200",
+        "red-4": "lightMode/red/300",
+        "red-5": "lightMode/red/400",
+        "red-6": "lightMode/red/500",
+        "red-7": "lightMode/red/600",
+        "red-8": "lightMode/red/700",
+        "red-9": "lightMode/red/800",
+        "red-10": "lightMode/red/900",
+        "blue-1": "neutral/white",
+        "blue-2": "lightMode/blue/100",
+        "blue-3": "lightMode/blue/200",
+        "blue-4": "lightMode/blue/300",
+        "blue-5": "lightMode/blue/400",
+        "blue-6": "lightMode/blue/500",
+        "blue-7": "lightMode/blue/600",
+        "blue-8": "lightMode/blue/700",
+        "blue-9": "lightMode/blue/800",
+        "blue-10": "lightMode/blue/900",
+        "green-1": "neutral/white",
+        "green-2": "lightMode/green/100",
+        "green-3": "lightMode/green/200",
+        "green-4": "lightMode/green/300",
+        "green-5": "lightMode/green/400",
+        "green-6": "lightMode/green/500",
+        "green-7": "lightMode/green/600",
+        "green-8": "lightMode/green/700",
+        "green-9": "lightMode/green/800",
+        "green-10": "lightMode/green/900",
+        "amber-1": "neutral/white",
+        "amber-2": "lightMode/amber/100",
+        "amber-3": "lightMode/amber/200",
+        "amber-4": "lightMode/amber/300",
+        "amber-5": "lightMode/amber/400",
+        "amber-6": "lightMode/amber/500",
+        "amber-7": "lightMode/amber/600",
+        "amber-8": "lightMode/amber/700",
+        "amber-9": "lightMode/amber/800",
+        "amber-10": "lightMode/amber/900",
+        "violet-1": "neutral/white",
+        "violet-2": "lightMode/violet/100",
+        "violet-3": "lightMode/violet/200",
+        "violet-4": "lightMode/violet/300",
+        "violet-5": "lightMode/violet/400",
+        "violet-6": "lightMode/violet/500",
+        "violet-7": "lightMode/violet/600",
+        "violet-8": "lightMode/violet/700",
+        "violet-9": "lightMode/violet/800",
+        "violet-10": "lightMode/violet/900",
+        "yellow-1": "neutral/white",
+        "yellow-2": "lightMode/yellow/100",
+        "yellow-3": "lightMode/yellow/200",
+        "yellow-4": "lightMode/yellow/300",
+        "yellow-5": "lightMode/yellow/400",
+        "yellow-6": "lightMode/yellow/500",
+        "yellow-7": "lightMode/yellow/600",
+        "yellow-8": "lightMode/yellow/700",
+        "yellow-9": "lightMode/yellow/800",
+        "yellow-10": "lightMode/yellow/900",
+        "orange-1": "neutral/white",
+        "orange-2": "lightMode/orange/100",
+        "orange-3": "lightMode/orange/200",
+        "orange-4": "lightMode/orange/300",
+        "orange-5": "lightMode/orange/400",
+        "orange-6": "lightMode/orange/500",
+        "orange-7": "lightMode/orange/600",
+        "orange-8": "lightMode/orange/700",
+        "orange-9": "lightMode/orange/800",
+        "orange-10": "lightMode/orange/900",
+        "teal-1": "neutral/white",
+        "teal-2": "lightMode/teal/100",
+        "teal-3": "lightMode/teal/200",
+        "teal-4": "lightMode/teal/300",
+        "teal-5": "lightMode/teal/400",
+        "teal-6": "lightMode/teal/500",
+        "teal-7": "lightMode/teal/600",
+        "teal-8": "lightMode/teal/700",
+        "teal-9": "lightMode/teal/800",
+        "teal-10": "lightMode/teal/900",
+        "cyan-1": "neutral/white",
+        "cyan-2": "lightMode/cyan/100",
+        "cyan-3": "lightMode/cyan/200",
+        "cyan-4": "lightMode/cyan/300",
+        "cyan-5": "lightMode/cyan/400",
+        "cyan-6": "lightMode/cyan/500",
+        "cyan-7": "lightMode/cyan/600",
+        "cyan-8": "lightMode/cyan/700",
+        "cyan-9": "lightMode/cyan/800",
+        "cyan-10": "lightMode/cyan/900",
+        "purple-1": "neutral/white",
+        "purple-2": "lightMode/purple/100",
+        "purple-3": "lightMode/purple/200",
+        "purple-4": "lightMode/purple/300",
+        "purple-5": "lightMode/purple/400",
+        "purple-6": "lightMode/purple/500",
+        "purple-7": "lightMode/purple/600",
+        "purple-8": "lightMode/purple/700",
+        "purple-9": "lightMode/purple/800",
+        "purple-10": "lightMode/purple/900",
+        "pink-1": "neutral/white",
+        "pink-2": "lightMode/pink/100",
+        "pink-3": "lightMode/pink/200",
+        "pink-4": "lightMode/pink/300",
+        "pink-5": "lightMode/pink/400",
+        "pink-6": "lightMode/pink/500",
+        "pink-7": "lightMode/pink/600",
+        "pink-8": "lightMode/pink/700",
+        "pink-9": "lightMode/pink/800",
+        "pink-10": "lightMode/pink/900",
+        "alert-button-default": "lightMode/gray/900",
+        "alert-button-info": "lightMode/gray/900",
+        "alert-button-success": "lightMode/gray/900",
+        "alert-button-warning": "lightMode/gray/900",
+        "alert-button-error": "lightMode/gray/900",
+        "blue-link": "lightMode/blue/500"
+      },
+      "outline": {
+        "base": "neutral/white",
+        "gray-1": "lightMode/gray/200",
+        "gray-2": "lightMode/gray/300",
+        "gray-3": "lightMode/gray/400",
+        "gray-4": "lightMode/gray/500",
+        "gray-5": "lightMode/gray/600",
+        "gray-6": "lightMode/gray/700",
+        "gray-7": "lightMode/gray/800",
+        "gray-8": "lightMode/gray/900",
+        "gray-9": "lightMode/gray/950",
+        "red-1": "lightMode/red/100",
+        "red-2": "lightMode/red/200",
+        "red-3": "lightMode/red/300",
+        "red-4": "lightMode/red/400",
+        "red-5": "lightMode/red/500",
+        "red-6": "lightMode/red/600",
+        "red-7": "lightMode/red/700",
+        "red-8": "lightMode/red/800",
+        "red-9": "lightMode/red/900",
+        "red-10": "lightMode/red/950",
+        "blue-1": "lightMode/blue/100",
+        "blue-2": "lightMode/blue/200",
+        "blue-3": "lightMode/blue/300",
+        "blue-4": "lightMode/blue/400",
+        "blue-5": "lightMode/blue/500",
+        "blue-6": "lightMode/blue/600",
+        "blue-7": "lightMode/blue/700",
+        "blue-8": "lightMode/blue/800",
+        "blue-9": "lightMode/blue/900",
+        "blue-10": "lightMode/blue/950",
+        "green-1": "lightMode/green/100",
+        "green-2": "lightMode/green/200",
+        "green-3": "lightMode/green/300",
+        "green-4": "lightMode/green/400",
+        "green-5": "lightMode/green/500",
+        "green-6": "lightMode/green/600",
+        "green-7": "lightMode/green/700",
+        "green-8": "lightMode/green/800",
+        "green-9": "lightMode/green/900",
+        "green-10": "lightMode/green/950",
+        "amber-1": "lightMode/amber/100",
+        "amber-2": "lightMode/amber/200",
+        "amber-3": "lightMode/amber/300",
+        "amber-4": "lightMode/amber/400",
+        "amber-5": "lightMode/amber/500",
+        "amber-6": "lightMode/amber/600",
+        "amber-7": "lightMode/amber/700",
+        "amber-8": "lightMode/amber/800",
+        "amber-9": "lightMode/amber/900",
+        "amber-10": "lightMode/amber/950",
+        "violet-1": "lightMode/violet/100",
+        "violet-2": "lightMode/violet/200",
+        "violet-3": "lightMode/violet/300",
+        "violet-4": "lightMode/violet/400",
+        "violet-5": "lightMode/violet/500",
+        "violet-6": "lightMode/violet/600",
+        "violet-7": "lightMode/violet/700",
+        "violet-8": "lightMode/violet/800",
+        "violet-9": "lightMode/violet/900",
+        "violet-10": "lightMode/violet/950",
+        "yellow-1": "lightMode/yellow/100",
+        "yellow-2": "lightMode/yellow/200",
+        "yellow-3": "lightMode/yellow/300",
+        "yellow-4": "lightMode/yellow/400",
+        "yellow-5": "lightMode/yellow/500",
+        "yellow-6": "lightMode/yellow/600",
+        "yellow-7": "lightMode/yellow/700",
+        "yellow-8": "lightMode/yellow/800",
+        "yellow-9": "lightMode/yellow/900",
+        "yellow-10": "lightMode/yellow/950",
+        "orange-1": "lightMode/orange/100",
+        "orange-2": "lightMode/orange/200",
+        "orange-3": "lightMode/orange/300",
+        "orange-4": "lightMode/orange/400",
+        "orange-5": "lightMode/orange/500",
+        "orange-6": "lightMode/orange/600",
+        "orange-7": "lightMode/orange/700",
+        "orange-8": "lightMode/orange/800",
+        "orange-9": "lightMode/orange/900",
+        "orange-10": "lightMode/orange/950",
+        "teal-1": "lightMode/teal/100",
+        "teal-2": "lightMode/teal/200",
+        "teal-3": "lightMode/teal/300",
+        "teal-4": "lightMode/teal/400",
+        "teal-5": "lightMode/teal/500",
+        "teal-6": "lightMode/teal/600",
+        "teal-7": "lightMode/teal/700",
+        "teal-8": "lightMode/teal/800",
+        "teal-9": "lightMode/teal/900",
+        "teal-10": "lightMode/teal/950",
+        "cyan-1": "lightMode/cyan/100",
+        "cyan-2": "lightMode/cyan/200",
+        "cyan-3": "lightMode/cyan/300",
+        "cyan-4": "lightMode/cyan/400",
+        "cyan-5": "lightMode/cyan/500",
+        "cyan-6": "lightMode/cyan/600",
+        "cyan-7": "lightMode/cyan/700",
+        "cyan-8": "lightMode/cyan/800",
+        "cyan-9": "lightMode/cyan/900",
+        "cyan-10": "lightMode/cyan/950",
+        "purple-1": "lightMode/purple/100",
+        "purple-2": "lightMode/purple/200",
+        "purple-3": "lightMode/purple/300",
+        "purple-4": "lightMode/purple/400",
+        "purple-5": "lightMode/purple/500",
+        "purple-6": "lightMode/purple/600",
+        "purple-7": "lightMode/purple/700",
+        "purple-8": "lightMode/purple/800",
+        "purple-9": "lightMode/purple/900",
+        "purple-10": "lightMode/purple/950",
+        "pink-1": "lightMode/pink/100",
+        "pink-2": "lightMode/pink/200",
+        "pink-3": "lightMode/pink/300",
+        "pink-4": "lightMode/pink/400",
+        "pink-5": "lightMode/pink/500",
+        "pink-6": "lightMode/pink/600",
+        "pink-7": "lightMode/pink/700",
+        "pink-8": "lightMode/pink/800",
+        "pink-9": "lightMode/pink/900",
+        "pink-10": "lightMode/pink/950",
+        "elevation-1": "lightMode/gray/200",
+        "elevation-2": "lightMode/gray/200"
+      },
+      "outline-alpha": {
+        "base": "neutral/white",
+        "gray-1": "lightMode/gray-alpha/200",
+        "gray-2": "lightMode/gray-alpha/300",
+        "gray-3": "lightMode/gray-alpha/400",
+        "gray-4": "lightMode/gray-alpha/500",
+        "gray-5": "lightMode/gray-alpha/600",
+        "gray-6": "lightMode/gray-alpha/700",
+        "gray-7": "lightMode/gray-alpha/800",
+        "gray-8": "lightMode/gray-alpha/900",
+        "gray-9": "lightMode/gray-alpha/950",
+        "elevation-1": "lightMode/gray-alpha/200",
+        "elevation-2": "lightMode/gray-alpha/200"
       }
     },
     "dark": {
-      "outline": {
-        "white": "darkMode/gray/800",
-        "gray-1": "darkMode/gray/700",
-        "gray-2": "darkMode/gray/600",
-        "gray-3": "darkMode/gray/500",
-        "gray-4": "darkMode/gray/300",
-        "gray-5": "lightMode/gray/200",
-        "red-1": "darkMode/red/800",
-        "red-2": "darkMode/red/700",
-        "red-3": "darkMode/red/600",
-        "green-1": "darkMode/green/800",
-        "green-2": "darkMode/green/700",
-        "amber-1": "darkMode/amber/800",
-        "amber-2": "darkMode/amber/700",
-        "blue-1": "darkMode/blue/800",
-        "orange-1": "darkMode/orange/700",
-        "gray-modals": "darkMode/gray/600"
-      },
       "surface": {
-        "white": "darkMode/gray/900",
-        "gray-1": "darkMode/gray/700",
-        "gray-2": "darkMode/gray/650",
+        "base": "darkMode/gray/950",
+        "gray-1": "darkMode/gray/900",
+        "gray-2": "darkMode/gray/700",
         "gray-3": "darkMode/gray/600",
         "gray-4": "darkMode/gray/500",
-        "gray-5": "darkMode/gray/200",
-        "gray-6": "darkMode/gray/100",
-        "gray-7": "darkMode/gray/50",
-        "red-1": "darkMode/red/900",
-        "red-2": "darkMode/red/900-90",
-        "red-3": "darkMode/red/800-90",
+        "gray-5": "darkMode/gray/450",
+        "gray-6": "darkMode/gray/400",
+        "gray-7": "darkMode/gray/300",
+        "gray-8": "darkMode/gray/200",
+        "gray-9": "darkMode/gray/100",
+        "gray-10": "darkMode/gray/50",
+        "sidebar": "neutral/transparent",
+        "elevation-1": "darkMode/gray/900",
+        "elevation-2": "darkMode/gray/800",
+        "elevation-3": "darkMode/gray/600",
+        "red-1": "darkMode/red/950",
+        "red-2": "darkMode/red/900",
+        "red-3": "darkMode/red/800",
         "red-4": "darkMode/red/700",
-        "red-5": "darkMode/red/400",
+        "red-5": "darkMode/red/600",
         "red-6": "darkMode/red/500",
-        "red-7": "darkMode/red/600",
-        "green-1": "darkMode/green/900",
-        "green-2": "darkMode/green/800",
-        "green-3": "darkMode/green/400",
-        "amber-1": "darkMode/amber/900",
-        "amber-2": "darkMode/amber/800",
-        "amber-3": "darkMode/amber/400",
-        "blue-1": "darkMode/blue/900",
-        "blue-2": "darkMode/blue/800",
-        "blue-3": "darkMode/blue/400",
-        "orange-1": "darkMode/orange/900-80",
-        "violet-1": "darkMode/violet/900",
-        "cyan-1": "darkMode/cyan/900",
-        "pink-1": "darkMode/pink/900-80",
-        "menu-bar": "darkMode/gray/900",
-        "cards": "darkMode/gray/800",
-        "modal": "darkMode/gray/700",
-        "selected": "darkMode/gray/500"
+        "red-7": "darkMode/red/400",
+        "red-8": "darkMode/red/300",
+        "red-9": "darkMode/red/200",
+        "red-10": "darkMode/red/100",
+        "blue-1": "darkMode/blue/950",
+        "blue-2": "darkMode/blue/900",
+        "blue-3": "darkMode/blue/800",
+        "blue-4": "darkMode/blue/700",
+        "blue-5": "darkMode/blue/600",
+        "blue-6": "darkMode/blue/500",
+        "blue-7": "darkMode/blue/400",
+        "blue-8": "darkMode/blue/300",
+        "blue-9": "darkMode/blue/200",
+        "blue-10": "darkMode/blue/100",
+        "green-1": "darkMode/green/950",
+        "green-2": "darkMode/green/900",
+        "green-3": "darkMode/green/800",
+        "green-4": "darkMode/green/700",
+        "green-5": "darkMode/green/600",
+        "green-6": "darkMode/green/500",
+        "green-7": "darkMode/green/400",
+        "green-8": "darkMode/green/300",
+        "green-9": "darkMode/green/200",
+        "green-10": "darkMode/green/100",
+        "amber-1": "darkMode/amber/950",
+        "amber-2": "darkMode/amber/900",
+        "amber-3": "darkMode/amber/800",
+        "amber-4": "darkMode/amber/700",
+        "amber-5": "darkMode/amber/600",
+        "amber-6": "darkMode/amber/500",
+        "amber-7": "darkMode/amber/400",
+        "amber-8": "darkMode/amber/300",
+        "amber-9": "darkMode/amber/200",
+        "amber-10": "darkMode/amber/100",
+        "violet-1": "darkMode/violet/950",
+        "violet-2": "darkMode/violet/900",
+        "violet-3": "darkMode/violet/800",
+        "violet-4": "darkMode/violet/700",
+        "violet-5": "darkMode/violet/600",
+        "violet-6": "darkMode/violet/500",
+        "violet-7": "darkMode/violet/400",
+        "violet-8": "darkMode/violet/300",
+        "violet-9": "darkMode/violet/200",
+        "violet-10": "darkMode/violet/100",
+        "yellow-1": "darkMode/yellow/950",
+        "yellow-2": "darkMode/yellow/900",
+        "yellow-3": "darkMode/yellow/800",
+        "yellow-4": "darkMode/yellow/700",
+        "yellow-5": "darkMode/yellow/600",
+        "yellow-6": "darkMode/yellow/500",
+        "yellow-7": "darkMode/yellow/400",
+        "yellow-8": "darkMode/yellow/300",
+        "yellow-9": "darkMode/yellow/200",
+        "yellow-10": "darkMode/yellow/100",
+        "orange-1": "darkMode/orange/950",
+        "orange-2": "darkMode/orange/900",
+        "orange-3": "darkMode/orange/800",
+        "orange-4": "darkMode/orange/700",
+        "orange-5": "darkMode/orange/600",
+        "orange-6": "darkMode/orange/500",
+        "orange-7": "darkMode/orange/400",
+        "orange-8": "darkMode/orange/300",
+        "orange-9": "darkMode/orange/200",
+        "orange-10": "darkMode/orange/100",
+        "teal-1": "darkMode/teal/950",
+        "teal-2": "darkMode/teal/900",
+        "teal-3": "darkMode/teal/800",
+        "teal-4": "darkMode/teal/700",
+        "teal-5": "darkMode/teal/600",
+        "teal-6": "darkMode/teal/500",
+        "teal-7": "darkMode/teal/400",
+        "teal-8": "darkMode/teal/300",
+        "teal-9": "darkMode/teal/200",
+        "teal-10": "darkMode/teal/100",
+        "cyan-1": "darkMode/cyan/950",
+        "cyan-2": "darkMode/cyan/900",
+        "cyan-3": "darkMode/cyan/800",
+        "cyan-4": "darkMode/cyan/700",
+        "cyan-5": "darkMode/cyan/600",
+        "cyan-6": "darkMode/cyan/500",
+        "cyan-7": "darkMode/cyan/400",
+        "cyan-8": "darkMode/cyan/300",
+        "cyan-9": "darkMode/cyan/200",
+        "cyan-10": "darkMode/cyan/100",
+        "purple-1": "darkMode/purple/950",
+        "purple-2": "darkMode/purple/900",
+        "purple-3": "darkMode/purple/800",
+        "purple-4": "darkMode/purple/700",
+        "purple-5": "darkMode/purple/600",
+        "purple-6": "darkMode/purple/500",
+        "purple-7": "darkMode/purple/400",
+        "purple-8": "darkMode/purple/300",
+        "purple-9": "darkMode/purple/200",
+        "purple-10": "darkMode/purple/100",
+        "pink-1": "darkMode/pink/950",
+        "pink-2": "darkMode/pink/900",
+        "pink-3": "darkMode/pink/800",
+        "pink-4": "darkMode/pink/700",
+        "pink-5": "darkMode/pink/600",
+        "pink-6": "darkMode/pink/500",
+        "pink-7": "darkMode/pink/400",
+        "pink-8": "darkMode/pink/300",
+        "pink-9": "darkMode/pink/200",
+        "pink-10": "darkMode/pink/100",
+        "alert-button-default": "darkMode/gray/500",
+        "alert-button-info": "darkMode/blue/700",
+        "alert-button-success": "darkMode/green/700",
+        "alert-button-warning": "darkMode/amber/700",
+        "alert-button-error": "darkMode/red/700"
+      },
+      "surface-alpha": {
+        "base": "darkMode/gray-alpha/950",
+        "gray-1": "darkMode/gray-alpha/800",
+        "gray-2": "darkMode/gray-alpha/700",
+        "gray-3": "darkMode/gray-alpha/600",
+        "gray-4": "darkMode/gray-alpha/500",
+        "gray-5": "darkMode/gray-alpha/450",
+        "gray-6": "darkMode/gray-alpha/400",
+        "gray-7": "darkMode/gray-alpha/300",
+        "gray-8": "darkMode/gray-alpha/200",
+        "gray-9": "darkMode/gray-alpha/100",
+        "gray-10": "darkMode/gray-alpha/50",
+        "sidebar": "darkMode/gray-alpha/950",
+        "elevation-1": "darkMode/gray-alpha/900",
+        "elevation-2": "darkMode/gray-alpha/800",
+        "elevation-3": "darkMode/gray-alpha/600",
+        "gray-2-overlay": "overlay/white/50"
       },
       "ink": {
-        "white": "darkMode/gray/900",
-        "gray-1": "darkMode/gray/700",
-        "gray-2": "darkMode/gray/500",
-        "gray-3": "darkMode/gray/400",
+        "base": "darkMode/gray/950",
+        "gray-1": "darkMode/gray/800",
+        "gray-2": "darkMode/gray/600",
+        "gray-3": "darkMode/gray/500",
         "gray-4": "darkMode/gray/400",
-        "gray-5": "darkMode/gray/300",
-        "gray-6": "darkMode/gray/250",
+        "gray-5": "darkMode/gray/400",
+        "gray-6": "darkMode/gray/300",
         "gray-7": "darkMode/gray/200",
         "gray-8": "darkMode/gray/100",
         "gray-9": "darkMode/gray/50",
         "red-1": "neutral/white",
-        "red-2": "darkMode/red/700",
-        "red-3": "darkMode/red/400",
-        "red-4": "darkMode/red/200",
+        "red-2": "darkMode/red/800",
+        "red-3": "darkMode/red/700",
+        "red-4": "darkMode/red/600",
+        "red-5": "darkMode/red/500",
+        "red-6": "darkMode/red/400",
+        "red-7": "darkMode/red/300",
+        "red-8": "darkMode/red/200",
+        "red-9": "darkMode/red/100",
+        "red-10": "darkMode/red/50",
+        "blue-1": "neutral/white",
+        "blue-2": "darkMode/blue/800",
+        "blue-3": "darkMode/blue/700",
+        "blue-4": "darkMode/blue/600",
+        "blue-5": "darkMode/blue/500",
+        "blue-6": "darkMode/blue/400",
+        "blue-7": "darkMode/blue/300",
+        "blue-8": "darkMode/blue/200",
+        "blue-9": "darkMode/blue/100",
+        "blue-10": "darkMode/blue/50",
         "green-1": "neutral/white",
-        "green-2": "darkMode/green/400",
-        "green-3": "darkMode/green/300",
+        "green-2": "darkMode/green/800",
+        "green-3": "darkMode/green/700",
+        "green-4": "darkMode/green/600",
+        "green-5": "darkMode/green/500",
+        "green-6": "darkMode/green/400",
+        "green-7": "darkMode/green/300",
+        "green-8": "darkMode/green/200",
+        "green-9": "darkMode/green/100",
+        "green-10": "darkMode/green/50",
         "amber-1": "neutral/white",
-        "amber-2": "darkMode/amber/400",
-        "amber-3": "darkMode/amber/300",
-        "blue-1": "neutral/white",
-        "blue-2": "darkMode/blue/400",
-        "blue-3": "darkMode/blue/300",
-        "cyan-1": "darkMode/cyan/300",
-        "pink-1": "darkMode/pink/300",
-        "violet-1": "darkMode/violet/300",
+        "amber-2": "darkMode/amber/800",
+        "amber-3": "darkMode/amber/700",
+        "amber-4": "darkMode/amber/600",
+        "amber-5": "darkMode/amber/500",
+        "amber-6": "darkMode/amber/400",
+        "amber-7": "darkMode/amber/300",
+        "amber-8": "darkMode/amber/200",
+        "amber-9": "darkMode/amber/100",
+        "amber-10": "darkMode/amber/50",
+        "violet-1": "neutral/white",
+        "violet-2": "darkMode/violet/800",
+        "violet-3": "darkMode/violet/700",
+        "violet-4": "darkMode/violet/600",
+        "violet-5": "darkMode/violet/500",
+        "violet-6": "darkMode/violet/400",
+        "violet-7": "darkMode/violet/300",
+        "violet-8": "darkMode/violet/200",
+        "violet-9": "darkMode/violet/100",
+        "violet-10": "darkMode/violet/50",
+        "yellow-1": "neutral/white",
+        "yellow-2": "darkMode/yellow/800",
+        "yellow-3": "darkMode/yellow/700",
+        "yellow-4": "darkMode/yellow/600",
+        "yellow-5": "darkMode/yellow/500",
+        "yellow-6": "darkMode/yellow/400",
+        "yellow-7": "darkMode/yellow/300",
+        "yellow-8": "darkMode/yellow/200",
+        "yellow-9": "darkMode/yellow/100",
+        "yellow-10": "darkMode/yellow/50",
+        "orange-1": "neutral/white",
+        "orange-2": "darkMode/orange/800",
+        "orange-3": "darkMode/orange/700",
+        "orange-4": "darkMode/orange/600",
+        "orange-5": "darkMode/orange/500",
+        "orange-6": "darkMode/orange/400",
+        "orange-7": "darkMode/orange/300",
+        "orange-8": "darkMode/orange/200",
+        "orange-9": "darkMode/orange/100",
+        "orange-10": "darkMode/orange/50",
+        "teal-1": "neutral/white",
+        "teal-2": "darkMode/teal/800",
+        "teal-3": "darkMode/teal/700",
+        "teal-4": "darkMode/teal/600",
+        "teal-5": "darkMode/teal/500",
+        "teal-6": "darkMode/teal/400",
+        "teal-7": "darkMode/teal/300",
+        "teal-8": "darkMode/teal/200",
+        "teal-9": "darkMode/teal/100",
+        "teal-10": "darkMode/teal/50",
+        "cyan-1": "neutral/white",
+        "cyan-2": "darkMode/cyan/800",
+        "cyan-3": "darkMode/cyan/700",
+        "cyan-4": "darkMode/cyan/600",
+        "cyan-5": "darkMode/cyan/500",
+        "cyan-6": "darkMode/cyan/400",
+        "cyan-7": "darkMode/cyan/300",
+        "cyan-8": "darkMode/cyan/200",
+        "cyan-9": "darkMode/cyan/100",
+        "cyan-10": "darkMode/cyan/50",
+        "purple-1": "neutral/white",
+        "purple-2": "darkMode/purple/800",
+        "purple-3": "darkMode/purple/700",
+        "purple-4": "darkMode/purple/600",
+        "purple-5": "darkMode/purple/500",
+        "purple-6": "darkMode/purple/400",
+        "purple-7": "darkMode/purple/300",
+        "purple-8": "darkMode/purple/200",
+        "purple-9": "darkMode/purple/100",
+        "purple-10": "darkMode/purple/50",
+        "pink-1": "neutral/white",
+        "pink-2": "darkMode/pink/800",
+        "pink-3": "darkMode/pink/700",
+        "pink-4": "darkMode/pink/600",
+        "pink-5": "darkMode/pink/500",
+        "pink-6": "darkMode/pink/400",
+        "pink-7": "darkMode/pink/300",
+        "pink-8": "darkMode/pink/200",
+        "pink-9": "darkMode/pink/100",
+        "pink-10": "darkMode/pink/50",
+        "alert-button-default": "darkMode/gray/50",
+        "alert-button-info": "darkMode/blue/200",
+        "alert-button-success": "darkMode/green/200",
+        "alert-button-warning": "darkMode/amber/200",
+        "alert-button-error": "darkMode/red/200",
         "blue-link": "darkMode/blue/500"
+      },
+      "outline": {
+        "base": "darkMode/gray/950",
+        "gray-1": "darkMode/gray/800",
+        "gray-2": "darkMode/gray/600",
+        "gray-3": "darkMode/gray/500",
+        "gray-4": "darkMode/gray/450",
+        "gray-5": "darkMode/gray/400",
+        "gray-6": "darkMode/gray/300",
+        "gray-7": "lightMode/gray/200",
+        "gray-8": "lightMode/gray/100",
+        "gray-9": "lightMode/gray/50",
+        "red-1": "darkMode/red/900",
+        "red-2": "darkMode/red/800",
+        "red-3": "darkMode/red/700",
+        "red-4": "darkMode/red/600",
+        "red-5": "darkMode/red/500",
+        "red-6": "darkMode/red/400",
+        "red-7": "darkMode/red/300",
+        "red-8": "darkMode/red/200",
+        "red-9": "darkMode/red/100",
+        "red-10": "darkMode/red/50",
+        "blue-1": "darkMode/blue/900",
+        "blue-2": "darkMode/blue/800",
+        "blue-3": "darkMode/blue/700",
+        "blue-4": "darkMode/blue/600",
+        "blue-5": "darkMode/blue/500",
+        "blue-6": "darkMode/blue/400",
+        "blue-7": "darkMode/blue/300",
+        "blue-8": "darkMode/blue/200",
+        "blue-9": "darkMode/blue/100",
+        "blue-10": "darkMode/blue/50",
+        "green-1": "darkMode/green/900",
+        "green-2": "darkMode/green/800",
+        "green-3": "darkMode/green/700",
+        "green-4": "darkMode/green/600",
+        "green-5": "darkMode/green/500",
+        "green-6": "darkMode/green/400",
+        "green-7": "darkMode/green/300",
+        "green-8": "darkMode/green/200",
+        "green-9": "darkMode/green/100",
+        "green-10": "darkMode/green/50",
+        "amber-1": "darkMode/amber/900",
+        "amber-2": "darkMode/amber/800",
+        "amber-3": "darkMode/amber/700",
+        "amber-4": "darkMode/amber/600",
+        "amber-5": "darkMode/amber/500",
+        "amber-6": "darkMode/amber/400",
+        "amber-7": "darkMode/amber/300",
+        "amber-8": "darkMode/amber/200",
+        "amber-9": "darkMode/amber/100",
+        "amber-10": "darkMode/amber/50",
+        "violet-1": "darkMode/violet/900",
+        "violet-2": "darkMode/violet/800",
+        "violet-3": "darkMode/violet/700",
+        "violet-4": "darkMode/violet/600",
+        "violet-5": "darkMode/violet/500",
+        "violet-6": "darkMode/violet/400",
+        "violet-7": "darkMode/violet/300",
+        "violet-8": "darkMode/violet/200",
+        "violet-9": "darkMode/violet/100",
+        "violet-10": "darkMode/violet/50",
+        "yellow-1": "darkMode/yellow/900",
+        "yellow-2": "darkMode/yellow/800",
+        "yellow-3": "darkMode/yellow/700",
+        "yellow-4": "darkMode/yellow/600",
+        "yellow-5": "darkMode/yellow/500",
+        "yellow-6": "darkMode/yellow/400",
+        "yellow-7": "darkMode/yellow/300",
+        "yellow-8": "darkMode/yellow/200",
+        "yellow-9": "darkMode/yellow/100",
+        "yellow-10": "darkMode/yellow/50",
+        "orange-1": "darkMode/orange/900",
+        "orange-2": "darkMode/orange/800",
+        "orange-3": "darkMode/orange/700",
+        "orange-4": "darkMode/orange/600",
+        "orange-5": "darkMode/orange/500",
+        "orange-6": "darkMode/orange/400",
+        "orange-7": "darkMode/orange/300",
+        "orange-8": "darkMode/orange/200",
+        "orange-9": "darkMode/orange/100",
+        "orange-10": "darkMode/orange/50",
+        "teal-1": "darkMode/teal/900",
+        "teal-2": "darkMode/teal/800",
+        "teal-3": "darkMode/teal/700",
+        "teal-4": "darkMode/teal/600",
+        "teal-5": "darkMode/teal/500",
+        "teal-6": "darkMode/teal/400",
+        "teal-7": "darkMode/teal/300",
+        "teal-8": "darkMode/teal/200",
+        "teal-9": "darkMode/teal/100",
+        "teal-10": "darkMode/teal/50",
+        "cyan-1": "darkMode/cyan/900",
+        "cyan-2": "darkMode/cyan/800",
+        "cyan-3": "darkMode/cyan/700",
+        "cyan-4": "darkMode/cyan/600",
+        "cyan-5": "darkMode/cyan/500",
+        "cyan-6": "darkMode/cyan/400",
+        "cyan-7": "darkMode/cyan/300",
+        "cyan-8": "darkMode/cyan/200",
+        "cyan-9": "darkMode/cyan/100",
+        "cyan-10": "darkMode/cyan/50",
+        "purple-1": "darkMode/purple/900",
+        "purple-2": "darkMode/purple/800",
+        "purple-3": "darkMode/purple/700",
+        "purple-4": "darkMode/purple/600",
+        "purple-5": "darkMode/purple/500",
+        "purple-6": "darkMode/purple/400",
+        "purple-7": "darkMode/purple/300",
+        "purple-8": "darkMode/purple/200",
+        "purple-9": "darkMode/purple/100",
+        "purple-10": "darkMode/purple/50",
+        "pink-1": "darkMode/pink/900",
+        "pink-2": "darkMode/pink/800",
+        "pink-3": "darkMode/pink/700",
+        "pink-4": "darkMode/pink/600",
+        "pink-5": "darkMode/pink/500",
+        "pink-6": "darkMode/pink/400",
+        "pink-7": "darkMode/pink/300",
+        "pink-8": "darkMode/pink/200",
+        "pink-9": "darkMode/pink/100",
+        "pink-10": "darkMode/pink/50",
+        "elevation-1": "darkMode/gray/700",
+        "elevation-2": "darkMode/gray/600"
+      },
+      "outline-alpha": {
+        "base": "darkMode/gray-alpha/950",
+        "gray-1": "darkMode/gray-alpha/800",
+        "gray-2": "darkMode/gray-alpha/600",
+        "gray-3": "darkMode/gray-alpha/500",
+        "gray-4": "darkMode/gray-alpha/450",
+        "gray-5": "darkMode/gray-alpha/400",
+        "gray-6": "darkMode/gray-alpha/300",
+        "gray-7": "darkMode/gray-alpha/200",
+        "gray-8": "darkMode/gray-alpha/100",
+        "gray-9": "darkMode/gray-alpha/50",
+        "elevation-1": "darkMode/gray-alpha/700",
+        "elevation-2": "darkMode/gray-alpha/600"
       }
     }
   }
diff --git a/tailwind/figma-tokens-to-theme.js b/tailwind/figma-tokens-to-theme.js
new file mode 100644
index 000000000..2ae0910aa
--- /dev/null
+++ b/tailwind/figma-tokens-to-theme.js
@@ -0,0 +1,359 @@
+/**
+ * Generator: reads the W3C Design Tokens Community Group JSON exported from
+ * Figma (espresso-v2-design-tokens/) and emits theme JSON files that the
+ * tailwind plugin can consume.
+ *
+ *   Inputs:  espresso-v2-design-tokens/*.tokens.json
+ *   Outputs: tailwind/generated/{colors,radius,typography}.json
+ *
+ * Run with: yarn sync-tokens
+ */
+
+import fs from 'fs'
+import path from 'path'
+import { fileURLToPath } from 'url'
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url))
+const REPO_ROOT = path.resolve(__dirname, '..')
+const TOKENS_DIR = path.join(REPO_ROOT, 'espresso-v2-design-tokens')
+const OUT_DIR = path.join(__dirname, 'generated')
+
+// Color families mirrored from Figma's "🔵 Colour primitives" collection.
+// Each appears under `light.<family>` and `dark.<family>` plus their alpha pair.
+const COLOR_FAMILIES = [
+  'gray',
+  'blue',
+  'green',
+  'red',
+  'orange',
+  'amber',
+  'yellow',
+  'teal',
+  'cyan',
+  'purple',
+  'pink',
+  'violet',
+]
+const ALPHA_FAMILIES = ['gray-alpha', 'red-alpha']
+const SEMANTIC_CATEGORIES = ['surface', 'surface-alpha', 'ink', 'outline', 'outline-alpha']
+
+// Named aliases layered on top of Figma's numeric radius keys.
+// Each name is matched by px value, so the alias stays correct if Figma shifts.
+const RADIUS_NAME_BY_PX = {
+  '0px': 'none',
+  '4px': 'sm',
+  '8px': 'DEFAULT',
+  '10px': 'md',
+  '12px': 'lg',
+  '16px': 'xl',
+  '20px': '2xl',
+}
+// Preserved from current plugin.js — Figma doesn't model `full`.
+const RADIUS_EXTRA = { full: '9999px' }
+
+// Real Figma variable-font weights. Only Regular is customized (420); the rest
+// are standard. NOTE: do NOT source these from the `text.styles` export — its
+// fontWeight column is corrupt (Regular exports as 100/400 because the body
+// styles use Inter's "Thin" named instance with a wght-axis override to 420
+// that the exporter discards; Black exports as 700 instead of 800).
+const FONT_WEIGHT_MAP = {
+  regular: 420,
+  medium: 500,
+  semibold: 600,
+  bold: 700,
+  extrabold: 800,
+}
+
+function readTokens(filename) {
+  return JSON.parse(fs.readFileSync(path.join(TOKENS_DIR, filename), 'utf8'))
+}
+
+function ensureOutDir() {
+  fs.mkdirSync(OUT_DIR, { recursive: true })
+}
+
+function writeJSON(filename, data) {
+  const filepath = path.join(OUT_DIR, filename)
+  fs.writeFileSync(filepath, JSON.stringify(data, null, 2) + '\n')
+  console.log(`  wrote ${path.relative(REPO_ROOT, filepath)}`)
+}
+
+// ---------- COLORS ----------
+
+// Build colors.json in the shape colorPalette.js already consumes:
+//   { lightMode, darkMode, overlay, neutral, themedVariables: { light, dark } }
+function buildColors() {
+  const primitives = readTokens('Colour primitives.Light.tokens.json')
+  const stylesLight = readTokens('Styles.Light.tokens.json')
+  const stylesDark = readTokens('Styles.Dark.tokens.json')
+
+  const colors = {
+    lightMode: {},
+    darkMode: {},
+    overlay: { white: {}, black: {} },
+    neutral: {
+      white: primitives.neutral.white.$value,
+      black: primitives.neutral.black.$value,
+      ...(primitives.neutral.transparent
+        ? { transparent: primitives.neutral.transparent.$value }
+        : {}),
+    },
+    themedVariables: {
+      light: Object.fromEntries(SEMANTIC_CATEGORIES.map((category) => [category, {}])),
+      dark: Object.fromEntries(SEMANTIC_CATEGORIES.map((category) => [category, {}])),
+    },
+  }
+
+  // Primitive ramps — light.<family>.<shade>
+  for (const family of [...COLOR_FAMILIES, ...ALPHA_FAMILIES]) {
+    if (primitives.light?.[family]) {
+      colors.lightMode[family] = mapShades(primitives.light[family])
+    }
+    if (primitives.dark?.[family]) {
+      colors.darkMode[family] = mapShades(primitives.dark[family])
+    }
+  }
+
+  // Overlay ramps — white-alpha / black-alpha at top level of primitives.
+  if (primitives['white-alpha']) {
+    colors.overlay.white = mapShades(primitives['white-alpha'])
+  }
+  if (primitives['black-alpha']) {
+    colors.overlay.black = mapShades(primitives['black-alpha'])
+  }
+
+  // Semantic aliases — Styles.Light/Dark → themedVariables.{light,dark}
+  for (const category of SEMANTIC_CATEGORIES) {
+    collectSemanticCategory(stylesLight, category, colors.themedVariables.light)
+    collectSemanticCategory(stylesDark, category, colors.themedVariables.dark)
+  }
+
+  return colors
+}
+
+// No legacy aliases: retired names (surface-white, surface-modal,
+// outline-gray-modals, …) are intentionally NOT emitted so straggler usage
+// fails visibly instead of silently keeping old styles alive. Migrate old
+// code with tailwind/migrate-tokens-v2.js.
+
+function mapShades(family) {
+  const out = {}
+  for (const [shade, token] of Object.entries(family)) {
+    if (token && token.$value) {
+      out[shade] = token.$value
+    }
+  }
+  return out
+}
+
+function collectSemanticCategory(styles, category, target) {
+  const section = styles[category]
+  if (!section) return
+  target[category] = target[category] || {}
+  for (const [name, token] of Object.entries(section)) {
+    if (!token?.$value) continue
+    // Resolve `{path.to.token}` aliases into the "lightMode/family/shade" format
+    // that colorPalette.js#resolveColorReference understands.
+    target[category][name] = aliasToReference(token.$value)
+  }
+}
+
+// Convert a DTCG alias string like "{light.gray.50}" into the reference shape
+// stored in colors.json today: "lightMode/gray/50". Non-aliases (literal hex)
+// pass through unchanged so the consumer can decide whether to treat them as
+// resolved values.
+function aliasToReference(value) {
+  if (typeof value !== 'string') return value
+  const match = value.match(/^\{(.+)\}$/)
+  if (!match) return value
+  const segments = match[1].split('.')
+
+  // {neutral.white} | {neutral.black}
+  if (segments[0] === 'neutral' && segments.length === 2) {
+    return `neutral/${segments[1]}`
+  }
+  // {white-alpha.50} | {black-alpha.50}  →  overlay/white/50 | overlay/black/50
+  if (segments[0] === 'white-alpha' || segments[0] === 'black-alpha') {
+    const color = segments[0].split('-')[0]
+    return `overlay/${color}/${segments[1]}`
+  }
+  // {light.gray.50}  →  lightMode/gray/50
+  // {light.gray-alpha.50}  →  lightMode/gray-alpha/50
+  if (segments[0] === 'light') {
+    return `lightMode/${segments.slice(1, -1).join('-')}/${segments[segments.length - 1]}`
+  }
+  if (segments[0] === 'dark') {
+    return `darkMode/${segments.slice(1, -1).join('-')}/${segments[segments.length - 1]}`
+  }
+  console.warn(`  ⚠ unresolved alias: ${value}`)
+  return value
+}
+
+// ---------- RADIUS ----------
+
+function buildRadius() {
+  const tokens = readTokens('Tokens.Mode 1.tokens.json')
+  const radius = { ...RADIUS_EXTRA }
+
+  for (const [key, token] of Object.entries(tokens.radius || {})) {
+    const px = token.$value
+    radius[key] = px
+    const name = RADIUS_NAME_BY_PX[px]
+    if (name) radius[name] = px
+  }
+  return radius
+}
+
+// ---------- TYPOGRAPHY ----------
+
+// We derive the type scale from the Figma *text styles* export
+// (`text.styles.tokens.json`), not the *variable* export
+// (`Typography.Desktop`). Text styles carry the exact per-size pairing of size +
+// line-height + letter-spacing (+ `uppercase` on `tiny`); the variable export
+// rounds line-heights to px and drops per-size letter-spacing. Weights still
+// come from FONT_WEIGHT_MAP because the text-styles weight column is corrupt
+// (see note there).
+
+// Figma models line-height & letter-spacing as percentages of the font size.
+// Tailwind wants a unitless ratio for line-height and `em` for letter-spacing.
+const pctToRatio = (v) => String(round(parseFloat(v) / 100, 4)) // "115%" -> "1.15"
+// letter-spacing % of font size === em. `paragraph/5xl` exports as "0.5px" by an
+// exporter bug (should be "0.5%"); parseFloat keeps the number and we treat it
+// as a percent regardless of unit, which yields the intended value either way.
+const lsToEm = (v) => `${round(parseFloat(v) / 100, 5)}em` // "2%" -> "0.02em"
+
+function round(n, places) {
+  const f = 10 ** places
+  return Math.round(n * f) / f
+}
+
+function buildTypography() {
+  const styles = readTokens('text.styles.tokens.json')
+  const text = styles.text || {}
+  const paragraphStyles = styles.paragraph || {}
+
+  const fontFamily = { text: text.base?.regular?.$value.fontFamily || 'Inter Variable' }
+
+  const fontWeight = {
+    regular: FONT_WEIGHT_MAP.regular,
+    medium: FONT_WEIGHT_MAP.medium,
+    semibold: FONT_WEIGHT_MAP.semibold,
+    bold: FONT_WEIGHT_MAP.bold,
+    black: FONT_WEIGHT_MAP.extrabold,
+  }
+
+  // Letter-spacing is the only property that varies by weight (line-height &
+  // text-transform are constant per size). Capture it per (size, weight) so the
+  // plugin can emit `text-<size>-<weight>` classes; values are honored as-is
+  // from text.styles (the source of truth), oddities included.
+  const WEIGHTS = ['regular', 'medium', 'semibold', 'bold', 'black']
+  const trackingOf = (variants) =>
+    Object.fromEntries(
+      WEIGHTS.filter((w) => variants[w]).map((w) => [w, lsToEm(variants[w].$value.letterSpacing)]),
+    )
+
+  // Base size utilities (`text-<size>`), from each size's `regular` variant.
+  const fontSize = {}
+  const textTransform = {}
+  const tracking = { text: {}, paragraph: {} }
+  for (const [key, variants] of Object.entries(text)) {
+    const v = variants.regular.$value
+    fontSize[key] = [
+      v.fontSize,
+      {
+        lineHeight: pctToRatio(v.lineHeight),
+        letterSpacing: lsToEm(v.letterSpacing),
+        fontWeight: String(FONT_WEIGHT_MAP.regular),
+      },
+    ]
+    if (v.textTransform && v.textTransform !== 'none') textTransform[key] = v.textTransform
+    tracking.text[key] = trackingOf(variants)
+  }
+
+  // Paragraph variants (`text-p-<size>`) — same sizes, reading line-height/track.
+  const paragraph = {}
+  for (const [key, variants] of Object.entries(paragraphStyles)) {
+    const v = variants.regular.$value
+    paragraph[key] = {
+      lineHeight: pctToRatio(v.lineHeight),
+      letterSpacing: lsToEm(v.letterSpacing),
+    }
+    tracking.paragraph[key] = trackingOf(variants)
+  }
+
+  return { fontFamily, fontWeight, fontSize, textTransform, paragraph, tracking }
+}
+
+// ---------- EFFECTS (shadows) ----------
+
+// Figma exports shadow effects as DTCG `$type: shadow` tokens — an array of
+// layers, each with offsetX/offsetY/blur/spread/color (+ optional inset).
+// Emit pre-composed CSS box-shadow strings so the plugin can drop them into
+// CSS variables verbatim.
+function buildEffects() {
+  const tokens = readTokens('effect.styles.tokens.json')
+  const out = {
+    elevation: { light: {}, dark: {}, custom: {} },
+    focus: { light: {}, dark: {} },
+  }
+
+  for (const step of Object.keys(tokens.elevation?.light || {})) {
+    out.elevation.light[step] = shadowToCss(tokens.elevation.light[step].$value)
+  }
+  for (const step of Object.keys(tokens.elevation?.dark || {})) {
+    out.elevation.dark[step] = shadowToCss(tokens.elevation.dark[step].$value)
+  }
+  for (const [name, token] of Object.entries(tokens.elevation?.custom || {})) {
+    out.elevation.custom[name] = shadowToCss(token.$value)
+  }
+  for (const [name, token] of Object.entries(tokens.focus?.light || {})) {
+    out.focus.light[name] = shadowToCss(token.$value)
+  }
+  for (const [name, token] of Object.entries(tokens.focus?.dark || {})) {
+    out.focus.dark[name] = shadowToCss(token.$value)
+  }
+
+  return out
+}
+
+function shadowToCss(layers) {
+  return layers
+    .map((layer) => {
+      const parts = [
+        layer.inset ? 'inset' : null,
+        layer.offsetX,
+        layer.offsetY,
+        layer.blur,
+        layer.spread || '0px',
+        layer.color,
+      ].filter(Boolean)
+      return parts.join(' ')
+    })
+    .join(', ')
+}
+
+// ---------- MAIN ----------
+
+function main() {
+  if (!fs.existsSync(TOKENS_DIR)) {
+    console.error(`✗ tokens directory not found: ${TOKENS_DIR}`)
+    process.exit(1)
+  }
+
+  console.log(`Reading tokens from ${path.relative(REPO_ROOT, TOKENS_DIR)}/`)
+  ensureOutDir()
+
+  writeJSON('colors.json', buildColors())
+  writeJSON('radius.json', buildRadius())
+  writeJSON('typography.json', buildTypography())
+  writeJSON('effects.json', buildEffects())
+
+  // colors.json is consumed from tailwind/ (top-level) by colorPalette.js, while
+  // the generator emits to tailwind/generated/. Copy it up so `yarn sync-tokens`
+  // is the single source of truth (no manual copy step).
+  fs.copyFileSync(path.join(OUT_DIR, 'colors.json'), path.join(__dirname, 'colors.json'))
+
+  console.log('✓ done')
+}
+
+main()
diff --git a/tailwind/generated/colors.json b/tailwind/generated/colors.json
new file mode 100644
index 000000000..6d91edfcd
--- /dev/null
+++ b/tailwind/generated/colors.json
@@ -0,0 +1,1217 @@
+{
+  "lightMode": {
+    "gray": {
+      "50": "#f8f8f8",
+      "100": "#f3f3f3",
+      "200": "#ededed",
+      "300": "#e2e2e2",
+      "400": "#c7c7c7",
+      "500": "#999999",
+      "600": "#7c7c7c",
+      "700": "#525252",
+      "800": "#383838",
+      "900": "#171717",
+      "950": "#0f0f0f"
+    },
+    "blue": {
+      "50": "#f1f8fe",
+      "100": "#e6f4ff",
+      "200": "#d1eaff",
+      "300": "#b5ddfd",
+      "400": "#61afef",
+      "500": "#0d8ef8",
+      "600": "#077ddf",
+      "700": "#0375d3",
+      "800": "#005cad",
+      "900": "#004880",
+      "950": "#032e63"
+    },
+    "green": {
+      "50": "#f0faf3",
+      "100": "#e4faeb",
+      "200": "#bdefcc",
+      "300": "#a8e6be",
+      "400": "#7edaa1",
+      "500": "#43ac79",
+      "600": "#268c5c",
+      "700": "#14804d",
+      "800": "#075e35",
+      "900": "#173b2c",
+      "950": "#0a3020"
+    },
+    "red": {
+      "50": "#fff5f5",
+      "100": "#ffe7e7",
+      "200": "#ffd8d8",
+      "300": "#fdc2c2",
+      "400": "#f79596",
+      "500": "#e03434",
+      "600": "#ce2c2c",
+      "700": "#b41d1d",
+      "800": "#941f1f",
+      "900": "#6b1515",
+      "950": "#4c0d0d"
+    },
+    "orange": {
+      "50": "#fff4ed",
+      "100": "#ffefe4",
+      "200": "#ffdec5",
+      "300": "#ffcba3",
+      "400": "#f4b07f",
+      "500": "#e86c13",
+      "600": "#d35a09",
+      "700": "#bd3e0c",
+      "800": "#9e3513",
+      "900": "#6b2711",
+      "950": "#491605"
+    },
+    "amber": {
+      "50": "#fdf8ed",
+      "100": "#fff4d3",
+      "200": "#f6eac0",
+      "300": "#f3e3b4",
+      "400": "#f4cd80",
+      "500": "#df9311",
+      "600": "#ca7e0c",
+      "700": "#bb6f0c",
+      "800": "#91400d",
+      "900": "#763813",
+      "950": "#4e2209"
+    },
+    "yellow": {
+      "50": "#fcfbe8",
+      "100": "#fff7d3",
+      "200": "#f7e9a8",
+      "300": "#f5e171",
+      "400": "#f2d14b",
+      "500": "#edba13",
+      "600": "#ab790d",
+      "700": "#9a6304",
+      "800": "#8c5600",
+      "900": "#733f12",
+      "950": "#542e0d"
+    },
+    "teal": {
+      "50": "#eefbf8",
+      "100": "#e6f7f4",
+      "200": "#bae8e1",
+      "300": "#97ded4",
+      "400": "#73d1c4",
+      "500": "#36baad",
+      "600": "#0a857b",
+      "700": "#0f736b",
+      "800": "#115c57",
+      "900": "#114541",
+      "950": "#053734"
+    },
+    "cyan": {
+      "50": "#f2fbfd",
+      "100": "#ddf7ff",
+      "200": "#b3e8f7",
+      "300": "#99e2f8",
+      "400": "#72d5f3",
+      "500": "#3bbde5",
+      "600": "#1f8cad",
+      "700": "#1d7f9d",
+      "800": "#125c73",
+      "900": "#164759",
+      "950": "#05383f"
+    },
+    "purple": {
+      "50": "#f8f3fb",
+      "100": "#f6e9ff",
+      "200": "#ecd3ff",
+      "300": "#e2b9fc",
+      "400": "#bf78fa",
+      "500": "#9c45e3",
+      "600": "#8e49ca",
+      "700": "#6e399d",
+      "800": "#5c2f83",
+      "900": "#401863",
+      "950": "#2d084e"
+    },
+    "pink": {
+      "50": "#fff7fc",
+      "100": "#fde8f5",
+      "200": "#ffd5f0",
+      "300": "#f9b9e0",
+      "400": "#f77cc6",
+      "500": "#e34aa6",
+      "600": "#cf3a96",
+      "700": "#9c2671",
+      "800": "#801458",
+      "900": "#570f3e",
+      "950": "#40062c"
+    },
+    "violet": {
+      "50": "#f7f6fe",
+      "100": "#eee8ff",
+      "200": "#dbd5ff",
+      "300": "#d2c5fc",
+      "400": "#b5a1fc",
+      "500": "#7757ee",
+      "600": "#6e57d1",
+      "700": "#4f3da1",
+      "800": "#392980",
+      "900": "#251959",
+      "950": "#150655"
+    },
+    "gray-alpha": {
+      "50": "#00000008",
+      "100": "#0000000b",
+      "200": "#00000012",
+      "300": "#0000001d",
+      "400": "#00000038",
+      "500": "#00000066",
+      "600": "#00000083",
+      "700": "#000000ad",
+      "800": "#000000c7",
+      "900": "#000000e8",
+      "950": "#000000f0"
+    }
+  },
+  "darkMode": {
+    "gray": {
+      "50": "#f8f8f8",
+      "100": "#d9d9d9",
+      "200": "#afafaf",
+      "300": "#999999",
+      "400": "#7a7a7a",
+      "450": "#575757",
+      "500": "#424242",
+      "600": "#383838",
+      "700": "#292929",
+      "800": "#242424",
+      "900": "#1f1f1f",
+      "950": "#171717"
+    },
+    "blue": {
+      "50": "#c9e0f5",
+      "100": "#add2f5",
+      "200": "#76bef9",
+      "300": "#349bef",
+      "400": "#2480cc",
+      "500": "#1c6ec4",
+      "600": "#0c59a2",
+      "700": "#074783",
+      "800": "#063465",
+      "900": "#0a2e5c",
+      "950": "#0f233d"
+    },
+    "green": {
+      "50": "#c8f3de",
+      "100": "#9be6c1",
+      "200": "#7dc5a2",
+      "300": "#359768",
+      "400": "#128251",
+      "500": "#117846",
+      "600": "#077241",
+      "700": "#085934",
+      "800": "#0a4229",
+      "900": "#0e3521",
+      "950": "#072716"
+    },
+    "red": {
+      "50": "#ffdede",
+      "100": "#ffc1c1",
+      "200": "#ff7575",
+      "300": "#eb4c4c",
+      "400": "#c23838",
+      "500": "#b03030",
+      "600": "#8e2e2e",
+      "700": "#852929",
+      "800": "#742a2a",
+      "900": "#592222",
+      "950": "#391416"
+    },
+    "orange": {
+      "50": "#ffcdad",
+      "100": "#ffa873",
+      "200": "#fa8a40",
+      "300": "#e3701c",
+      "400": "#e16914",
+      "500": "#984509",
+      "600": "#823906",
+      "700": "#683108",
+      "800": "#532707",
+      "900": "#361c09",
+      "950": "#2b1708"
+    },
+    "amber": {
+      "50": "#ffe59a",
+      "100": "#f4c25f",
+      "200": "#e9a144",
+      "300": "#c67515",
+      "400": "#bd660f",
+      "500": "#af5e0e",
+      "600": "#985315",
+      "700": "#753a07",
+      "800": "#5a2d07",
+      "900": "#452608",
+      "950": "#331c06"
+    },
+    "yellow": {
+      "50": "#ffeeb8",
+      "100": "#ffe386",
+      "200": "#f8d76a",
+      "300": "#ecc02e",
+      "400": "#bb972a",
+      "500": "#9c7e1c",
+      "600": "#99780a",
+      "700": "#705606",
+      "800": "#5b4605",
+      "900": "#3a2c04",
+      "950": "#261d03"
+    },
+    "teal": {
+      "50": "#a0f7ed",
+      "100": "#7ef3e7",
+      "200": "#51decf",
+      "300": "#28bcac",
+      "400": "#2ca094",
+      "500": "#1b7169",
+      "600": "#145b54",
+      "700": "#0b4942",
+      "800": "#0b3a35",
+      "900": "#0a2d29",
+      "950": "#0b2320"
+    },
+    "cyan": {
+      "50": "#d0f0fa",
+      "100": "#95e3f6",
+      "200": "#62cae9",
+      "300": "#3cb8dc",
+      "400": "#249cc2",
+      "500": "#107b9b",
+      "600": "#0c6783",
+      "700": "#104f62",
+      "800": "#0d3b49",
+      "900": "#0b2932",
+      "950": "#0b2028"
+    },
+    "purple": {
+      "50": "#e5c6fb",
+      "100": "#d9aff5",
+      "200": "#c993ef",
+      "300": "#b168e8",
+      "400": "#a26fce",
+      "500": "#7a2db9",
+      "600": "#622195",
+      "700": "#491870",
+      "800": "#391457",
+      "900": "#2c1042",
+      "950": "#23132f"
+    },
+    "pink": {
+      "50": "#ffbbe4",
+      "100": "#f69ad1",
+      "200": "#ed77be",
+      "300": "#e359ab",
+      "400": "#cb5d9e",
+      "500": "#ac377d",
+      "600": "#892660",
+      "700": "#6f1d4d",
+      "800": "#5b183f",
+      "900": "#42132f",
+      "950": "#2e0f22"
+    },
+    "violet": {
+      "50": "#d0c2ff",
+      "100": "#c2b0fc",
+      "200": "#baa8f5",
+      "300": "#9175f0",
+      "400": "#6c4dd5",
+      "500": "#593bbf",
+      "600": "#403397",
+      "700": "#423691",
+      "800": "#3c2a92",
+      "900": "#2f236c",
+      "950": "#1e1646"
+    },
+    "gray-alpha": {
+      "50": "#fffffff7",
+      "100": "#ffffffd4",
+      "200": "#ffffffa8",
+      "300": "#ffffff8f",
+      "400": "#ffffff6c",
+      "450": "#ffffff46",
+      "500": "#ffffff2f",
+      "600": "#ffffff24",
+      "700": "#ffffff14",
+      "800": "#ffffff0e",
+      "900": "#ffffff09",
+      "950": "#0000000a"
+    }
+  },
+  "overlay": {
+    "white": {
+      "50": "#ffffff1a",
+      "100": "#ffffff2e",
+      "200": "#ffffff45",
+      "300": "#ffffff5c",
+      "400": "#ffffff73",
+      "500": "#ffffff8a",
+      "600": "#ffffffa1",
+      "700": "#ffffffb8",
+      "800": "#ffffffcf",
+      "900": "#ffffffe5",
+      "950": "#fffffff2"
+    },
+    "black": {
+      "50": "#00000017",
+      "100": "#0000002e",
+      "200": "#00000045",
+      "300": "#0000005c",
+      "400": "#00000073",
+      "500": "#0000008a",
+      "600": "#000000a1",
+      "700": "#000000b8",
+      "800": "#000000cf",
+      "900": "#000000e5",
+      "950": "#000000f2"
+    }
+  },
+  "neutral": {
+    "white": "#ffffff",
+    "black": "#000000",
+    "transparent": "#ffffff00"
+  },
+  "themedVariables": {
+    "light": {
+      "surface": {
+        "base": "neutral/white",
+        "gray-1": "lightMode/gray/50",
+        "gray-2": "lightMode/gray/100",
+        "gray-3": "lightMode/gray/200",
+        "gray-4": "lightMode/gray/300",
+        "gray-5": "lightMode/gray/400",
+        "gray-6": "lightMode/gray/500",
+        "gray-7": "lightMode/gray/600",
+        "gray-8": "lightMode/gray/700",
+        "gray-9": "lightMode/gray/800",
+        "gray-10": "lightMode/gray/900",
+        "sidebar": "lightMode/gray/50",
+        "elevation-1": "neutral/white",
+        "elevation-2": "neutral/white",
+        "elevation-3": "neutral/white",
+        "red-1": "lightMode/red/50",
+        "red-2": "lightMode/red/100",
+        "red-3": "lightMode/red/200",
+        "red-4": "lightMode/red/300",
+        "red-5": "lightMode/red/400",
+        "red-6": "lightMode/red/500",
+        "red-7": "lightMode/red/600",
+        "red-8": "lightMode/red/700",
+        "red-9": "lightMode/red/800",
+        "red-10": "lightMode/red/900",
+        "blue-1": "lightMode/blue/50",
+        "blue-2": "lightMode/blue/100",
+        "blue-3": "lightMode/blue/200",
+        "blue-4": "lightMode/blue/300",
+        "blue-5": "lightMode/blue/400",
+        "blue-6": "lightMode/blue/500",
+        "blue-7": "lightMode/blue/600",
+        "blue-8": "lightMode/blue/700",
+        "blue-9": "lightMode/blue/800",
+        "blue-10": "lightMode/blue/900",
+        "green-1": "lightMode/green/50",
+        "green-2": "lightMode/green/100",
+        "green-3": "lightMode/green/200",
+        "green-4": "lightMode/green/300",
+        "green-5": "lightMode/green/400",
+        "green-6": "lightMode/green/500",
+        "green-7": "lightMode/green/600",
+        "green-8": "lightMode/green/700",
+        "green-9": "lightMode/green/800",
+        "green-10": "lightMode/green/900",
+        "amber-1": "lightMode/amber/50",
+        "amber-2": "lightMode/amber/100",
+        "amber-3": "lightMode/amber/200",
+        "amber-4": "lightMode/amber/300",
+        "amber-5": "lightMode/amber/400",
+        "amber-6": "lightMode/amber/500",
+        "amber-7": "lightMode/amber/600",
+        "amber-8": "lightMode/amber/700",
+        "amber-9": "lightMode/amber/800",
+        "amber-10": "lightMode/amber/900",
+        "violet-1": "lightMode/violet/50",
+        "violet-2": "lightMode/violet/100",
+        "violet-3": "lightMode/violet/200",
+        "violet-4": "lightMode/violet/300",
+        "violet-5": "lightMode/violet/400",
+        "violet-6": "lightMode/violet/500",
+        "violet-7": "lightMode/violet/600",
+        "violet-8": "lightMode/violet/700",
+        "violet-9": "lightMode/violet/800",
+        "violet-10": "lightMode/violet/900",
+        "yellow-1": "lightMode/yellow/50",
+        "yellow-2": "lightMode/yellow/100",
+        "yellow-3": "lightMode/yellow/200",
+        "yellow-4": "lightMode/yellow/300",
+        "yellow-5": "lightMode/yellow/400",
+        "yellow-6": "lightMode/yellow/500",
+        "yellow-7": "lightMode/yellow/600",
+        "yellow-8": "lightMode/yellow/700",
+        "yellow-9": "lightMode/yellow/800",
+        "yellow-10": "lightMode/yellow/900",
+        "orange-1": "lightMode/orange/50",
+        "orange-2": "lightMode/orange/100",
+        "orange-3": "lightMode/orange/200",
+        "orange-4": "lightMode/orange/300",
+        "orange-5": "lightMode/orange/400",
+        "orange-6": "lightMode/orange/500",
+        "orange-7": "lightMode/orange/600",
+        "orange-8": "lightMode/orange/700",
+        "orange-9": "lightMode/orange/800",
+        "orange-10": "lightMode/orange/900",
+        "teal-1": "lightMode/teal/50",
+        "teal-2": "lightMode/teal/100",
+        "teal-3": "lightMode/teal/200",
+        "teal-4": "lightMode/teal/300",
+        "teal-5": "lightMode/teal/400",
+        "teal-6": "lightMode/teal/500",
+        "teal-7": "lightMode/teal/600",
+        "teal-8": "lightMode/teal/700",
+        "teal-9": "lightMode/teal/800",
+        "teal-10": "lightMode/teal/900",
+        "cyan-1": "lightMode/cyan/50",
+        "cyan-2": "lightMode/cyan/100",
+        "cyan-3": "lightMode/cyan/200",
+        "cyan-4": "lightMode/cyan/300",
+        "cyan-5": "lightMode/cyan/400",
+        "cyan-6": "lightMode/cyan/500",
+        "cyan-7": "lightMode/cyan/600",
+        "cyan-8": "lightMode/cyan/700",
+        "cyan-9": "lightMode/cyan/800",
+        "cyan-10": "lightMode/cyan/900",
+        "purple-1": "lightMode/purple/50",
+        "purple-2": "lightMode/purple/100",
+        "purple-3": "lightMode/purple/200",
+        "purple-4": "lightMode/purple/300",
+        "purple-5": "lightMode/purple/400",
+        "purple-6": "lightMode/purple/500",
+        "purple-7": "lightMode/purple/600",
+        "purple-8": "lightMode/purple/700",
+        "purple-9": "lightMode/purple/800",
+        "purple-10": "lightMode/purple/900",
+        "pink-1": "lightMode/pink/50",
+        "pink-2": "lightMode/pink/100",
+        "pink-3": "lightMode/pink/200",
+        "pink-4": "lightMode/pink/300",
+        "pink-5": "lightMode/pink/400",
+        "pink-6": "lightMode/pink/500",
+        "pink-7": "lightMode/pink/600",
+        "pink-8": "lightMode/pink/700",
+        "pink-9": "lightMode/pink/800",
+        "pink-10": "lightMode/pink/900",
+        "alert-button-default": "neutral/white",
+        "alert-button-info": "neutral/white",
+        "alert-button-success": "neutral/white",
+        "alert-button-warning": "neutral/white",
+        "alert-button-error": "neutral/white"
+      },
+      "surface-alpha": {
+        "base": "neutral/white",
+        "gray-1": "lightMode/gray-alpha/50",
+        "gray-2": "lightMode/gray-alpha/100",
+        "gray-3": "lightMode/gray-alpha/200",
+        "gray-4": "lightMode/gray-alpha/300",
+        "gray-5": "lightMode/gray-alpha/400",
+        "gray-6": "lightMode/gray-alpha/500",
+        "gray-7": "lightMode/gray-alpha/600",
+        "gray-8": "lightMode/gray-alpha/700",
+        "gray-9": "lightMode/gray-alpha/800",
+        "gray-10": "lightMode/gray-alpha/900",
+        "sidebar": "lightMode/gray/50",
+        "elevation-1": "neutral/white",
+        "elevation-2": "neutral/white",
+        "elevation-3": "neutral/white",
+        "gray-2-overlay": "overlay/black/50"
+      },
+      "ink": {
+        "base": "neutral/white",
+        "gray-1": "lightMode/gray/200",
+        "gray-2": "lightMode/gray/300",
+        "gray-3": "lightMode/gray/400",
+        "gray-4": "lightMode/gray/500",
+        "gray-5": "lightMode/gray/600",
+        "gray-6": "lightMode/gray/700",
+        "gray-7": "lightMode/gray/800",
+        "gray-8": "lightMode/gray/900",
+        "gray-9": "lightMode/gray/950",
+        "red-1": "neutral/white",
+        "red-2": "lightMode/red/100",
+        "red-3": "lightMode/red/200",
+        "red-4": "lightMode/red/300",
+        "red-5": "lightMode/red/400",
+        "red-6": "lightMode/red/500",
+        "red-7": "lightMode/red/600",
+        "red-8": "lightMode/red/700",
+        "red-9": "lightMode/red/800",
+        "red-10": "lightMode/red/900",
+        "blue-1": "neutral/white",
+        "blue-2": "lightMode/blue/100",
+        "blue-3": "lightMode/blue/200",
+        "blue-4": "lightMode/blue/300",
+        "blue-5": "lightMode/blue/400",
+        "blue-6": "lightMode/blue/500",
+        "blue-7": "lightMode/blue/600",
+        "blue-8": "lightMode/blue/700",
+        "blue-9": "lightMode/blue/800",
+        "blue-10": "lightMode/blue/900",
+        "green-1": "neutral/white",
+        "green-2": "lightMode/green/100",
+        "green-3": "lightMode/green/200",
+        "green-4": "lightMode/green/300",
+        "green-5": "lightMode/green/400",
+        "green-6": "lightMode/green/500",
+        "green-7": "lightMode/green/600",
+        "green-8": "lightMode/green/700",
+        "green-9": "lightMode/green/800",
+        "green-10": "lightMode/green/900",
+        "amber-1": "neutral/white",
+        "amber-2": "lightMode/amber/100",
+        "amber-3": "lightMode/amber/200",
+        "amber-4": "lightMode/amber/300",
+        "amber-5": "lightMode/amber/400",
+        "amber-6": "lightMode/amber/500",
+        "amber-7": "lightMode/amber/600",
+        "amber-8": "lightMode/amber/700",
+        "amber-9": "lightMode/amber/800",
+        "amber-10": "lightMode/amber/900",
+        "violet-1": "neutral/white",
+        "violet-2": "lightMode/violet/100",
+        "violet-3": "lightMode/violet/200",
+        "violet-4": "lightMode/violet/300",
+        "violet-5": "lightMode/violet/400",
+        "violet-6": "lightMode/violet/500",
+        "violet-7": "lightMode/violet/600",
+        "violet-8": "lightMode/violet/700",
+        "violet-9": "lightMode/violet/800",
+        "violet-10": "lightMode/violet/900",
+        "yellow-1": "neutral/white",
+        "yellow-2": "lightMode/yellow/100",
+        "yellow-3": "lightMode/yellow/200",
+        "yellow-4": "lightMode/yellow/300",
+        "yellow-5": "lightMode/yellow/400",
+        "yellow-6": "lightMode/yellow/500",
+        "yellow-7": "lightMode/yellow/600",
+        "yellow-8": "lightMode/yellow/700",
+        "yellow-9": "lightMode/yellow/800",
+        "yellow-10": "lightMode/yellow/900",
+        "orange-1": "neutral/white",
+        "orange-2": "lightMode/orange/100",
+        "orange-3": "lightMode/orange/200",
+        "orange-4": "lightMode/orange/300",
+        "orange-5": "lightMode/orange/400",
+        "orange-6": "lightMode/orange/500",
+        "orange-7": "lightMode/orange/600",
+        "orange-8": "lightMode/orange/700",
+        "orange-9": "lightMode/orange/800",
+        "orange-10": "lightMode/orange/900",
+        "teal-1": "neutral/white",
+        "teal-2": "lightMode/teal/100",
+        "teal-3": "lightMode/teal/200",
+        "teal-4": "lightMode/teal/300",
+        "teal-5": "lightMode/teal/400",
+        "teal-6": "lightMode/teal/500",
+        "teal-7": "lightMode/teal/600",
+        "teal-8": "lightMode/teal/700",
+        "teal-9": "lightMode/teal/800",
+        "teal-10": "lightMode/teal/900",
+        "cyan-1": "neutral/white",
+        "cyan-2": "lightMode/cyan/100",
+        "cyan-3": "lightMode/cyan/200",
+        "cyan-4": "lightMode/cyan/300",
+        "cyan-5": "lightMode/cyan/400",
+        "cyan-6": "lightMode/cyan/500",
+        "cyan-7": "lightMode/cyan/600",
+        "cyan-8": "lightMode/cyan/700",
+        "cyan-9": "lightMode/cyan/800",
+        "cyan-10": "lightMode/cyan/900",
+        "purple-1": "neutral/white",
+        "purple-2": "lightMode/purple/100",
+        "purple-3": "lightMode/purple/200",
+        "purple-4": "lightMode/purple/300",
+        "purple-5": "lightMode/purple/400",
+        "purple-6": "lightMode/purple/500",
+        "purple-7": "lightMode/purple/600",
+        "purple-8": "lightMode/purple/700",
+        "purple-9": "lightMode/purple/800",
+        "purple-10": "lightMode/purple/900",
+        "pink-1": "neutral/white",
+        "pink-2": "lightMode/pink/100",
+        "pink-3": "lightMode/pink/200",
+        "pink-4": "lightMode/pink/300",
+        "pink-5": "lightMode/pink/400",
+        "pink-6": "lightMode/pink/500",
+        "pink-7": "lightMode/pink/600",
+        "pink-8": "lightMode/pink/700",
+        "pink-9": "lightMode/pink/800",
+        "pink-10": "lightMode/pink/900",
+        "alert-button-default": "lightMode/gray/900",
+        "alert-button-info": "lightMode/gray/900",
+        "alert-button-success": "lightMode/gray/900",
+        "alert-button-warning": "lightMode/gray/900",
+        "alert-button-error": "lightMode/gray/900",
+        "blue-link": "lightMode/blue/500"
+      },
+      "outline": {
+        "base": "neutral/white",
+        "gray-1": "lightMode/gray/200",
+        "gray-2": "lightMode/gray/300",
+        "gray-3": "lightMode/gray/400",
+        "gray-4": "lightMode/gray/500",
+        "gray-5": "lightMode/gray/600",
+        "gray-6": "lightMode/gray/700",
+        "gray-7": "lightMode/gray/800",
+        "gray-8": "lightMode/gray/900",
+        "gray-9": "lightMode/gray/950",
+        "red-1": "lightMode/red/100",
+        "red-2": "lightMode/red/200",
+        "red-3": "lightMode/red/300",
+        "red-4": "lightMode/red/400",
+        "red-5": "lightMode/red/500",
+        "red-6": "lightMode/red/600",
+        "red-7": "lightMode/red/700",
+        "red-8": "lightMode/red/800",
+        "red-9": "lightMode/red/900",
+        "red-10": "lightMode/red/950",
+        "blue-1": "lightMode/blue/100",
+        "blue-2": "lightMode/blue/200",
+        "blue-3": "lightMode/blue/300",
+        "blue-4": "lightMode/blue/400",
+        "blue-5": "lightMode/blue/500",
+        "blue-6": "lightMode/blue/600",
+        "blue-7": "lightMode/blue/700",
+        "blue-8": "lightMode/blue/800",
+        "blue-9": "lightMode/blue/900",
+        "blue-10": "lightMode/blue/950",
+        "green-1": "lightMode/green/100",
+        "green-2": "lightMode/green/200",
+        "green-3": "lightMode/green/300",
+        "green-4": "lightMode/green/400",
+        "green-5": "lightMode/green/500",
+        "green-6": "lightMode/green/600",
+        "green-7": "lightMode/green/700",
+        "green-8": "lightMode/green/800",
+        "green-9": "lightMode/green/900",
+        "green-10": "lightMode/green/950",
+        "amber-1": "lightMode/amber/100",
+        "amber-2": "lightMode/amber/200",
+        "amber-3": "lightMode/amber/300",
+        "amber-4": "lightMode/amber/400",
+        "amber-5": "lightMode/amber/500",
+        "amber-6": "lightMode/amber/600",
+        "amber-7": "lightMode/amber/700",
+        "amber-8": "lightMode/amber/800",
+        "amber-9": "lightMode/amber/900",
+        "amber-10": "lightMode/amber/950",
+        "violet-1": "lightMode/violet/100",
+        "violet-2": "lightMode/violet/200",
+        "violet-3": "lightMode/violet/300",
+        "violet-4": "lightMode/violet/400",
+        "violet-5": "lightMode/violet/500",
+        "violet-6": "lightMode/violet/600",
+        "violet-7": "lightMode/violet/700",
+        "violet-8": "lightMode/violet/800",
+        "violet-9": "lightMode/violet/900",
+        "violet-10": "lightMode/violet/950",
+        "yellow-1": "lightMode/yellow/100",
+        "yellow-2": "lightMode/yellow/200",
+        "yellow-3": "lightMode/yellow/300",
+        "yellow-4": "lightMode/yellow/400",
+        "yellow-5": "lightMode/yellow/500",
+        "yellow-6": "lightMode/yellow/600",
+        "yellow-7": "lightMode/yellow/700",
+        "yellow-8": "lightMode/yellow/800",
+        "yellow-9": "lightMode/yellow/900",
+        "yellow-10": "lightMode/yellow/950",
+        "orange-1": "lightMode/orange/100",
+        "orange-2": "lightMode/orange/200",
+        "orange-3": "lightMode/orange/300",
+        "orange-4": "lightMode/orange/400",
+        "orange-5": "lightMode/orange/500",
+        "orange-6": "lightMode/orange/600",
+        "orange-7": "lightMode/orange/700",
+        "orange-8": "lightMode/orange/800",
+        "orange-9": "lightMode/orange/900",
+        "orange-10": "lightMode/orange/950",
+        "teal-1": "lightMode/teal/100",
+        "teal-2": "lightMode/teal/200",
+        "teal-3": "lightMode/teal/300",
+        "teal-4": "lightMode/teal/400",
+        "teal-5": "lightMode/teal/500",
+        "teal-6": "lightMode/teal/600",
+        "teal-7": "lightMode/teal/700",
+        "teal-8": "lightMode/teal/800",
+        "teal-9": "lightMode/teal/900",
+        "teal-10": "lightMode/teal/950",
+        "cyan-1": "lightMode/cyan/100",
+        "cyan-2": "lightMode/cyan/200",
+        "cyan-3": "lightMode/cyan/300",
+        "cyan-4": "lightMode/cyan/400",
+        "cyan-5": "lightMode/cyan/500",
+        "cyan-6": "lightMode/cyan/600",
+        "cyan-7": "lightMode/cyan/700",
+        "cyan-8": "lightMode/cyan/800",
+        "cyan-9": "lightMode/cyan/900",
+        "cyan-10": "lightMode/cyan/950",
+        "purple-1": "lightMode/purple/100",
+        "purple-2": "lightMode/purple/200",
+        "purple-3": "lightMode/purple/300",
+        "purple-4": "lightMode/purple/400",
+        "purple-5": "lightMode/purple/500",
+        "purple-6": "lightMode/purple/600",
+        "purple-7": "lightMode/purple/700",
+        "purple-8": "lightMode/purple/800",
+        "purple-9": "lightMode/purple/900",
+        "purple-10": "lightMode/purple/950",
+        "pink-1": "lightMode/pink/100",
+        "pink-2": "lightMode/pink/200",
+        "pink-3": "lightMode/pink/300",
+        "pink-4": "lightMode/pink/400",
+        "pink-5": "lightMode/pink/500",
+        "pink-6": "lightMode/pink/600",
+        "pink-7": "lightMode/pink/700",
+        "pink-8": "lightMode/pink/800",
+        "pink-9": "lightMode/pink/900",
+        "pink-10": "lightMode/pink/950",
+        "elevation-1": "lightMode/gray/200",
+        "elevation-2": "lightMode/gray/200"
+      },
+      "outline-alpha": {
+        "base": "neutral/white",
+        "gray-1": "lightMode/gray-alpha/200",
+        "gray-2": "lightMode/gray-alpha/300",
+        "gray-3": "lightMode/gray-alpha/400",
+        "gray-4": "lightMode/gray-alpha/500",
+        "gray-5": "lightMode/gray-alpha/600",
+        "gray-6": "lightMode/gray-alpha/700",
+        "gray-7": "lightMode/gray-alpha/800",
+        "gray-8": "lightMode/gray-alpha/900",
+        "gray-9": "lightMode/gray-alpha/950",
+        "elevation-1": "lightMode/gray-alpha/200",
+        "elevation-2": "lightMode/gray-alpha/200"
+      }
+    },
+    "dark": {
+      "surface": {
+        "base": "darkMode/gray/950",
+        "gray-1": "darkMode/gray/900",
+        "gray-2": "darkMode/gray/700",
+        "gray-3": "darkMode/gray/600",
+        "gray-4": "darkMode/gray/500",
+        "gray-5": "darkMode/gray/450",
+        "gray-6": "darkMode/gray/400",
+        "gray-7": "darkMode/gray/300",
+        "gray-8": "darkMode/gray/200",
+        "gray-9": "darkMode/gray/100",
+        "gray-10": "darkMode/gray/50",
+        "sidebar": "neutral/transparent",
+        "elevation-1": "darkMode/gray/900",
+        "elevation-2": "darkMode/gray/800",
+        "elevation-3": "darkMode/gray/600",
+        "red-1": "darkMode/red/950",
+        "red-2": "darkMode/red/900",
+        "red-3": "darkMode/red/800",
+        "red-4": "darkMode/red/700",
+        "red-5": "darkMode/red/600",
+        "red-6": "darkMode/red/500",
+        "red-7": "darkMode/red/400",
+        "red-8": "darkMode/red/300",
+        "red-9": "darkMode/red/200",
+        "red-10": "darkMode/red/100",
+        "blue-1": "darkMode/blue/950",
+        "blue-2": "darkMode/blue/900",
+        "blue-3": "darkMode/blue/800",
+        "blue-4": "darkMode/blue/700",
+        "blue-5": "darkMode/blue/600",
+        "blue-6": "darkMode/blue/500",
+        "blue-7": "darkMode/blue/400",
+        "blue-8": "darkMode/blue/300",
+        "blue-9": "darkMode/blue/200",
+        "blue-10": "darkMode/blue/100",
+        "green-1": "darkMode/green/950",
+        "green-2": "darkMode/green/900",
+        "green-3": "darkMode/green/800",
+        "green-4": "darkMode/green/700",
+        "green-5": "darkMode/green/600",
+        "green-6": "darkMode/green/500",
+        "green-7": "darkMode/green/400",
+        "green-8": "darkMode/green/300",
+        "green-9": "darkMode/green/200",
+        "green-10": "darkMode/green/100",
+        "amber-1": "darkMode/amber/950",
+        "amber-2": "darkMode/amber/900",
+        "amber-3": "darkMode/amber/800",
+        "amber-4": "darkMode/amber/700",
+        "amber-5": "darkMode/amber/600",
+        "amber-6": "darkMode/amber/500",
+        "amber-7": "darkMode/amber/400",
+        "amber-8": "darkMode/amber/300",
+        "amber-9": "darkMode/amber/200",
+        "amber-10": "darkMode/amber/100",
+        "violet-1": "darkMode/violet/950",
+        "violet-2": "darkMode/violet/900",
+        "violet-3": "darkMode/violet/800",
+        "violet-4": "darkMode/violet/700",
+        "violet-5": "darkMode/violet/600",
+        "violet-6": "darkMode/violet/500",
+        "violet-7": "darkMode/violet/400",
+        "violet-8": "darkMode/violet/300",
+        "violet-9": "darkMode/violet/200",
+        "violet-10": "darkMode/violet/100",
+        "yellow-1": "darkMode/yellow/950",
+        "yellow-2": "darkMode/yellow/900",
+        "yellow-3": "darkMode/yellow/800",
+        "yellow-4": "darkMode/yellow/700",
+        "yellow-5": "darkMode/yellow/600",
+        "yellow-6": "darkMode/yellow/500",
+        "yellow-7": "darkMode/yellow/400",
+        "yellow-8": "darkMode/yellow/300",
+        "yellow-9": "darkMode/yellow/200",
+        "yellow-10": "darkMode/yellow/100",
+        "orange-1": "darkMode/orange/950",
+        "orange-2": "darkMode/orange/900",
+        "orange-3": "darkMode/orange/800",
+        "orange-4": "darkMode/orange/700",
+        "orange-5": "darkMode/orange/600",
+        "orange-6": "darkMode/orange/500",
+        "orange-7": "darkMode/orange/400",
+        "orange-8": "darkMode/orange/300",
+        "orange-9": "darkMode/orange/200",
+        "orange-10": "darkMode/orange/100",
+        "teal-1": "darkMode/teal/950",
+        "teal-2": "darkMode/teal/900",
+        "teal-3": "darkMode/teal/800",
+        "teal-4": "darkMode/teal/700",
+        "teal-5": "darkMode/teal/600",
+        "teal-6": "darkMode/teal/500",
+        "teal-7": "darkMode/teal/400",
+        "teal-8": "darkMode/teal/300",
+        "teal-9": "darkMode/teal/200",
+        "teal-10": "darkMode/teal/100",
+        "cyan-1": "darkMode/cyan/950",
+        "cyan-2": "darkMode/cyan/900",
+        "cyan-3": "darkMode/cyan/800",
+        "cyan-4": "darkMode/cyan/700",
+        "cyan-5": "darkMode/cyan/600",
+        "cyan-6": "darkMode/cyan/500",
+        "cyan-7": "darkMode/cyan/400",
+        "cyan-8": "darkMode/cyan/300",
+        "cyan-9": "darkMode/cyan/200",
+        "cyan-10": "darkMode/cyan/100",
+        "purple-1": "darkMode/purple/950",
+        "purple-2": "darkMode/purple/900",
+        "purple-3": "darkMode/purple/800",
+        "purple-4": "darkMode/purple/700",
+        "purple-5": "darkMode/purple/600",
+        "purple-6": "darkMode/purple/500",
+        "purple-7": "darkMode/purple/400",
+        "purple-8": "darkMode/purple/300",
+        "purple-9": "darkMode/purple/200",
+        "purple-10": "darkMode/purple/100",
+        "pink-1": "darkMode/pink/950",
+        "pink-2": "darkMode/pink/900",
+        "pink-3": "darkMode/pink/800",
+        "pink-4": "darkMode/pink/700",
+        "pink-5": "darkMode/pink/600",
+        "pink-6": "darkMode/pink/500",
+        "pink-7": "darkMode/pink/400",
+        "pink-8": "darkMode/pink/300",
+        "pink-9": "darkMode/pink/200",
+        "pink-10": "darkMode/pink/100",
+        "alert-button-default": "darkMode/gray/500",
+        "alert-button-info": "darkMode/blue/700",
+        "alert-button-success": "darkMode/green/700",
+        "alert-button-warning": "darkMode/amber/700",
+        "alert-button-error": "darkMode/red/700"
+      },
+      "surface-alpha": {
+        "base": "darkMode/gray-alpha/950",
+        "gray-1": "darkMode/gray-alpha/800",
+        "gray-2": "darkMode/gray-alpha/700",
+        "gray-3": "darkMode/gray-alpha/600",
+        "gray-4": "darkMode/gray-alpha/500",
+        "gray-5": "darkMode/gray-alpha/450",
+        "gray-6": "darkMode/gray-alpha/400",
+        "gray-7": "darkMode/gray-alpha/300",
+        "gray-8": "darkMode/gray-alpha/200",
+        "gray-9": "darkMode/gray-alpha/100",
+        "gray-10": "darkMode/gray-alpha/50",
+        "sidebar": "darkMode/gray-alpha/950",
+        "elevation-1": "darkMode/gray-alpha/900",
+        "elevation-2": "darkMode/gray-alpha/800",
+        "elevation-3": "darkMode/gray-alpha/600",
+        "gray-2-overlay": "overlay/white/50"
+      },
+      "ink": {
+        "base": "darkMode/gray/950",
+        "gray-1": "darkMode/gray/800",
+        "gray-2": "darkMode/gray/600",
+        "gray-3": "darkMode/gray/500",
+        "gray-4": "darkMode/gray/400",
+        "gray-5": "darkMode/gray/400",
+        "gray-6": "darkMode/gray/300",
+        "gray-7": "darkMode/gray/200",
+        "gray-8": "darkMode/gray/100",
+        "gray-9": "darkMode/gray/50",
+        "red-1": "neutral/white",
+        "red-2": "darkMode/red/800",
+        "red-3": "darkMode/red/700",
+        "red-4": "darkMode/red/600",
+        "red-5": "darkMode/red/500",
+        "red-6": "darkMode/red/400",
+        "red-7": "darkMode/red/300",
+        "red-8": "darkMode/red/200",
+        "red-9": "darkMode/red/100",
+        "red-10": "darkMode/red/50",
+        "blue-1": "neutral/white",
+        "blue-2": "darkMode/blue/800",
+        "blue-3": "darkMode/blue/700",
+        "blue-4": "darkMode/blue/600",
+        "blue-5": "darkMode/blue/500",
+        "blue-6": "darkMode/blue/400",
+        "blue-7": "darkMode/blue/300",
+        "blue-8": "darkMode/blue/200",
+        "blue-9": "darkMode/blue/100",
+        "blue-10": "darkMode/blue/50",
+        "green-1": "neutral/white",
+        "green-2": "darkMode/green/800",
+        "green-3": "darkMode/green/700",
+        "green-4": "darkMode/green/600",
+        "green-5": "darkMode/green/500",
+        "green-6": "darkMode/green/400",
+        "green-7": "darkMode/green/300",
+        "green-8": "darkMode/green/200",
+        "green-9": "darkMode/green/100",
+        "green-10": "darkMode/green/50",
+        "amber-1": "neutral/white",
+        "amber-2": "darkMode/amber/800",
+        "amber-3": "darkMode/amber/700",
+        "amber-4": "darkMode/amber/600",
+        "amber-5": "darkMode/amber/500",
+        "amber-6": "darkMode/amber/400",
+        "amber-7": "darkMode/amber/300",
+        "amber-8": "darkMode/amber/200",
+        "amber-9": "darkMode/amber/100",
+        "amber-10": "darkMode/amber/50",
+        "violet-1": "neutral/white",
+        "violet-2": "darkMode/violet/800",
+        "violet-3": "darkMode/violet/700",
+        "violet-4": "darkMode/violet/600",
+        "violet-5": "darkMode/violet/500",
+        "violet-6": "darkMode/violet/400",
+        "violet-7": "darkMode/violet/300",
+        "violet-8": "darkMode/violet/200",
+        "violet-9": "darkMode/violet/100",
+        "violet-10": "darkMode/violet/50",
+        "yellow-1": "neutral/white",
+        "yellow-2": "darkMode/yellow/800",
+        "yellow-3": "darkMode/yellow/700",
+        "yellow-4": "darkMode/yellow/600",
+        "yellow-5": "darkMode/yellow/500",
+        "yellow-6": "darkMode/yellow/400",
+        "yellow-7": "darkMode/yellow/300",
+        "yellow-8": "darkMode/yellow/200",
+        "yellow-9": "darkMode/yellow/100",
+        "yellow-10": "darkMode/yellow/50",
+        "orange-1": "neutral/white",
+        "orange-2": "darkMode/orange/800",
+        "orange-3": "darkMode/orange/700",
+        "orange-4": "darkMode/orange/600",
+        "orange-5": "darkMode/orange/500",
+        "orange-6": "darkMode/orange/400",
+        "orange-7": "darkMode/orange/300",
+        "orange-8": "darkMode/orange/200",
+        "orange-9": "darkMode/orange/100",
+        "orange-10": "darkMode/orange/50",
+        "teal-1": "neutral/white",
+        "teal-2": "darkMode/teal/800",
+        "teal-3": "darkMode/teal/700",
+        "teal-4": "darkMode/teal/600",
+        "teal-5": "darkMode/teal/500",
+        "teal-6": "darkMode/teal/400",
+        "teal-7": "darkMode/teal/300",
+        "teal-8": "darkMode/teal/200",
+        "teal-9": "darkMode/teal/100",
+        "teal-10": "darkMode/teal/50",
+        "cyan-1": "neutral/white",
+        "cyan-2": "darkMode/cyan/800",
+        "cyan-3": "darkMode/cyan/700",
+        "cyan-4": "darkMode/cyan/600",
+        "cyan-5": "darkMode/cyan/500",
+        "cyan-6": "darkMode/cyan/400",
+        "cyan-7": "darkMode/cyan/300",
+        "cyan-8": "darkMode/cyan/200",
+        "cyan-9": "darkMode/cyan/100",
+        "cyan-10": "darkMode/cyan/50",
+        "purple-1": "neutral/white",
+        "purple-2": "darkMode/purple/800",
+        "purple-3": "darkMode/purple/700",
+        "purple-4": "darkMode/purple/600",
+        "purple-5": "darkMode/purple/500",
+        "purple-6": "darkMode/purple/400",
+        "purple-7": "darkMode/purple/300",
+        "purple-8": "darkMode/purple/200",
+        "purple-9": "darkMode/purple/100",
+        "purple-10": "darkMode/purple/50",
+        "pink-1": "neutral/white",
+        "pink-2": "darkMode/pink/800",
+        "pink-3": "darkMode/pink/700",
+        "pink-4": "darkMode/pink/600",
+        "pink-5": "darkMode/pink/500",
+        "pink-6": "darkMode/pink/400",
+        "pink-7": "darkMode/pink/300",
+        "pink-8": "darkMode/pink/200",
+        "pink-9": "darkMode/pink/100",
+        "pink-10": "darkMode/pink/50",
+        "alert-button-default": "darkMode/gray/50",
+        "alert-button-info": "darkMode/blue/200",
+        "alert-button-success": "darkMode/green/200",
+        "alert-button-warning": "darkMode/amber/200",
+        "alert-button-error": "darkMode/red/200",
+        "blue-link": "darkMode/blue/500"
+      },
+      "outline": {
+        "base": "darkMode/gray/950",
+        "gray-1": "darkMode/gray/800",
+        "gray-2": "darkMode/gray/600",
+        "gray-3": "darkMode/gray/500",
+        "gray-4": "darkMode/gray/450",
+        "gray-5": "darkMode/gray/400",
+        "gray-6": "darkMode/gray/300",
+        "gray-7": "lightMode/gray/200",
+        "gray-8": "lightMode/gray/100",
+        "gray-9": "lightMode/gray/50",
+        "red-1": "darkMode/red/900",
+        "red-2": "darkMode/red/800",
+        "red-3": "darkMode/red/700",
+        "red-4": "darkMode/red/600",
+        "red-5": "darkMode/red/500",
+        "red-6": "darkMode/red/400",
+        "red-7": "darkMode/red/300",
+        "red-8": "darkMode/red/200",
+        "red-9": "darkMode/red/100",
+        "red-10": "darkMode/red/50",
+        "blue-1": "darkMode/blue/900",
+        "blue-2": "darkMode/blue/800",
+        "blue-3": "darkMode/blue/700",
+        "blue-4": "darkMode/blue/600",
+        "blue-5": "darkMode/blue/500",
+        "blue-6": "darkMode/blue/400",
+        "blue-7": "darkMode/blue/300",
+        "blue-8": "darkMode/blue/200",
+        "blue-9": "darkMode/blue/100",
+        "blue-10": "darkMode/blue/50",
+        "green-1": "darkMode/green/900",
+        "green-2": "darkMode/green/800",
+        "green-3": "darkMode/green/700",
+        "green-4": "darkMode/green/600",
+        "green-5": "darkMode/green/500",
+        "green-6": "darkMode/green/400",
+        "green-7": "darkMode/green/300",
+        "green-8": "darkMode/green/200",
+        "green-9": "darkMode/green/100",
+        "green-10": "darkMode/green/50",
+        "amber-1": "darkMode/amber/900",
+        "amber-2": "darkMode/amber/800",
+        "amber-3": "darkMode/amber/700",
+        "amber-4": "darkMode/amber/600",
+        "amber-5": "darkMode/amber/500",
+        "amber-6": "darkMode/amber/400",
+        "amber-7": "darkMode/amber/300",
+        "amber-8": "darkMode/amber/200",
+        "amber-9": "darkMode/amber/100",
+        "amber-10": "darkMode/amber/50",
+        "violet-1": "darkMode/violet/900",
+        "violet-2": "darkMode/violet/800",
+        "violet-3": "darkMode/violet/700",
+        "violet-4": "darkMode/violet/600",
+        "violet-5": "darkMode/violet/500",
+        "violet-6": "darkMode/violet/400",
+        "violet-7": "darkMode/violet/300",
+        "violet-8": "darkMode/violet/200",
+        "violet-9": "darkMode/violet/100",
+        "violet-10": "darkMode/violet/50",
+        "yellow-1": "darkMode/yellow/900",
+        "yellow-2": "darkMode/yellow/800",
+        "yellow-3": "darkMode/yellow/700",
+        "yellow-4": "darkMode/yellow/600",
+        "yellow-5": "darkMode/yellow/500",
+        "yellow-6": "darkMode/yellow/400",
+        "yellow-7": "darkMode/yellow/300",
+        "yellow-8": "darkMode/yellow/200",
+        "yellow-9": "darkMode/yellow/100",
+        "yellow-10": "darkMode/yellow/50",
+        "orange-1": "darkMode/orange/900",
+        "orange-2": "darkMode/orange/800",
+        "orange-3": "darkMode/orange/700",
+        "orange-4": "darkMode/orange/600",
+        "orange-5": "darkMode/orange/500",
+        "orange-6": "darkMode/orange/400",
+        "orange-7": "darkMode/orange/300",
+        "orange-8": "darkMode/orange/200",
+        "orange-9": "darkMode/orange/100",
+        "orange-10": "darkMode/orange/50",
+        "teal-1": "darkMode/teal/900",
+        "teal-2": "darkMode/teal/800",
+        "teal-3": "darkMode/teal/700",
+        "teal-4": "darkMode/teal/600",
+        "teal-5": "darkMode/teal/500",
+        "teal-6": "darkMode/teal/400",
+        "teal-7": "darkMode/teal/300",
+        "teal-8": "darkMode/teal/200",
+        "teal-9": "darkMode/teal/100",
+        "teal-10": "darkMode/teal/50",
+        "cyan-1": "darkMode/cyan/900",
+        "cyan-2": "darkMode/cyan/800",
+        "cyan-3": "darkMode/cyan/700",
+        "cyan-4": "darkMode/cyan/600",
+        "cyan-5": "darkMode/cyan/500",
+        "cyan-6": "darkMode/cyan/400",
+        "cyan-7": "darkMode/cyan/300",
+        "cyan-8": "darkMode/cyan/200",
+        "cyan-9": "darkMode/cyan/100",
+        "cyan-10": "darkMode/cyan/50",
+        "purple-1": "darkMode/purple/900",
+        "purple-2": "darkMode/purple/800",
+        "purple-3": "darkMode/purple/700",
+        "purple-4": "darkMode/purple/600",
+        "purple-5": "darkMode/purple/500",
+        "purple-6": "darkMode/purple/400",
+        "purple-7": "darkMode/purple/300",
+        "purple-8": "darkMode/purple/200",
+        "purple-9": "darkMode/purple/100",
+        "purple-10": "darkMode/purple/50",
+        "pink-1": "darkMode/pink/900",
+        "pink-2": "darkMode/pink/800",
+        "pink-3": "darkMode/pink/700",
+        "pink-4": "darkMode/pink/600",
+        "pink-5": "darkMode/pink/500",
+        "pink-6": "darkMode/pink/400",
+        "pink-7": "darkMode/pink/300",
+        "pink-8": "darkMode/pink/200",
+        "pink-9": "darkMode/pink/100",
+        "pink-10": "darkMode/pink/50",
+        "elevation-1": "darkMode/gray/700",
+        "elevation-2": "darkMode/gray/600"
+      },
+      "outline-alpha": {
+        "base": "darkMode/gray-alpha/950",
+        "gray-1": "darkMode/gray-alpha/800",
+        "gray-2": "darkMode/gray-alpha/600",
+        "gray-3": "darkMode/gray-alpha/500",
+        "gray-4": "darkMode/gray-alpha/450",
+        "gray-5": "darkMode/gray-alpha/400",
+        "gray-6": "darkMode/gray-alpha/300",
+        "gray-7": "darkMode/gray-alpha/200",
+        "gray-8": "darkMode/gray-alpha/100",
+        "gray-9": "darkMode/gray-alpha/50",
+        "elevation-1": "darkMode/gray-alpha/700",
+        "elevation-2": "darkMode/gray-alpha/600"
+      }
+    }
+  }
+}
diff --git a/tailwind/generated/effects.json b/tailwind/generated/effects.json
new file mode 100644
index 000000000..cfc3bcefa
--- /dev/null
+++ b/tailwind/generated/effects.json
@@ -0,0 +1,41 @@
+{
+  "elevation": {
+    "light": {
+      "sm": "0px 1px 3px 0px #00000024, 0px 0px 1px 0px #00000024, inset 0px 0.25px 1.5px 0px #ffffff14",
+      "base": "0px 2px 5px 0px #00000024, 0px 0px 1.5px 0px #00000029, inset 0px 0.25px 1.5px 0px #ffffff14",
+      "md": "0px 6px 12px -2px #0000001f, 0px 0px 6px 2px #00000008, 0px 0px 1.5px 0px #00000026, inset 0px 0.25px 1.5px 0px #ffffff14",
+      "lg": "0px 18px 22px -6px #0000001a, 0px 0px 6px 3px #00000008, 0px 0px 1.5px 0px #0000002e",
+      "xl": "0px 24px 30px -8px #0000001a, 0px 0px 10px 2px #0000000a, 0px 0px 1px 0px #00000033, inset 0px 0.25px 2px 0px #ffffff26",
+      "2xl": "0px 44px 52px -10px #0000001a, 0px 0px 10px 2px #00000008, 0px 0px 1.5px 0px #00000040, inset 0px 0.1px 2px 0px #ffffff14"
+    },
+    "dark": {
+      "sm": "0px 1px 3px 0px #000000b2, 0px 0px 14px 0px #0000002e, inset 0px 0.5px 0.5px 0.5px #ffffff08",
+      "base": "0px 2px 5px 0px #00000099, 0px 0px 14px 0px #0000002e, inset 0px 0.5px 0.5px 0.5px #ffffff08",
+      "md": "0px 6px 12px -2px #00000099, 0px 0px 16px 2px #00000033, inset 0px 0.5px 0.5px 0.5px #ffffff08",
+      "lg": "0px 18px 20px -8px #00000085, 0px 0px 16px 0px #0000001a, inset 0px 0.5px 1.5px 0.5px #ffffff0a",
+      "xl": "0px 26px 34px -6px #0000006b, 0px 0px 14px 2px #0000001f, inset 0px 0.5px 1.5px 0.5px #ffffff0a",
+      "2xl": "0px 44px 52px -4px #0000006b, 0px 0px 14px 10px #0000001f, inset 0px 0.5px 1.5px 0.5px #ffffff0f"
+    },
+    "custom": {
+      "status": "0px 0px 0px 1.5px #ffffff"
+    }
+  },
+  "focus": {
+    "light": {
+      "default": "0px 0px 0px 2px #c9c9c9e5",
+      "red": "0px 0px 0px 2px #fa9c9de5",
+      "green": "0px 0px 0px 2px #5ed29ce5",
+      "amber": "0px 0px 0px 2px #ffda7ce5",
+      "blue": "0px 0px 0px 2px #65b9fce5",
+      "violet": "0px 0px 0px 2px #bea2fce5"
+    },
+    "dark": {
+      "default": "0px 0px 0px 3px #464646cc",
+      "red": "0px 0px 0px 3px #751819cc",
+      "green": "0px 0px 0px 3px #1d563bcc",
+      "amber": "0px 0px 0px 3px #744811cc",
+      "blue": "0px 0px 0px 3px #0e3d62cc",
+      "violet": "0px 0px 0px 3px #412d87cc"
+    }
+  }
+}
diff --git a/tailwind/generated/radius.json b/tailwind/generated/radius.json
new file mode 100644
index 000000000..70df35eef
--- /dev/null
+++ b/tailwind/generated/radius.json
@@ -0,0 +1,20 @@
+{
+  "0": "0px",
+  "1": "4px",
+  "2": "5px",
+  "3": "6px",
+  "4": "8px",
+  "5": "10px",
+  "6": "12px",
+  "7": "16px",
+  "8": "20px",
+  "9": "999px",
+  "full": "9999px",
+  "none": "0px",
+  "sm": "4px",
+  "DEFAULT": "8px",
+  "md": "10px",
+  "lg": "12px",
+  "xl": "16px",
+  "2xl": "20px"
+}
diff --git a/tailwind/generated/typography.json b/tailwind/generated/typography.json
new file mode 100644
index 000000000..caccd6710
--- /dev/null
+++ b/tailwind/generated/typography.json
@@ -0,0 +1,479 @@
+{
+  "fontFamily": {
+    "text": "Inter Variable"
+  },
+  "fontWeight": {
+    "regular": 420,
+    "medium": 500,
+    "semibold": 600,
+    "bold": 700,
+    "black": 800
+  },
+  "fontSize": {
+    "tiny": [
+      "11px",
+      {
+        "lineHeight": "1.15",
+        "letterSpacing": "0.09em",
+        "fontWeight": "420"
+      }
+    ],
+    "2xs": [
+      "11px",
+      {
+        "lineHeight": "1.15",
+        "letterSpacing": "0.01em",
+        "fontWeight": "420"
+      }
+    ],
+    "xs": [
+      "12px",
+      {
+        "lineHeight": "1.15",
+        "letterSpacing": "0.02em",
+        "fontWeight": "420"
+      }
+    ],
+    "sm": [
+      "13px",
+      {
+        "lineHeight": "1.15",
+        "letterSpacing": "0.02em",
+        "fontWeight": "420"
+      }
+    ],
+    "base": [
+      "14px",
+      {
+        "lineHeight": "1.15",
+        "letterSpacing": "0.02em",
+        "fontWeight": "420"
+      }
+    ],
+    "lg": [
+      "15px",
+      {
+        "lineHeight": "1.15",
+        "letterSpacing": "0.02em",
+        "fontWeight": "420"
+      }
+    ],
+    "xl": [
+      "16px",
+      {
+        "lineHeight": "1.15",
+        "letterSpacing": "0.02em",
+        "fontWeight": "420"
+      }
+    ],
+    "2xl": [
+      "17px",
+      {
+        "lineHeight": "1.15",
+        "letterSpacing": "0.02em",
+        "fontWeight": "420"
+      }
+    ],
+    "3xl": [
+      "18px",
+      {
+        "lineHeight": "1.15",
+        "letterSpacing": "0.01em",
+        "fontWeight": "420"
+      }
+    ],
+    "4xl": [
+      "20px",
+      {
+        "lineHeight": "1.15",
+        "letterSpacing": "0.005em",
+        "fontWeight": "420"
+      }
+    ],
+    "5xl": [
+      "24px",
+      {
+        "lineHeight": "1.15",
+        "letterSpacing": "0.005em",
+        "fontWeight": "420"
+      }
+    ],
+    "6xl": [
+      "26px",
+      {
+        "lineHeight": "1.6",
+        "letterSpacing": "0.01em",
+        "fontWeight": "420"
+      }
+    ],
+    "7xl": [
+      "28px",
+      {
+        "lineHeight": "1.6",
+        "letterSpacing": "0.01em",
+        "fontWeight": "420"
+      }
+    ],
+    "8xl": [
+      "32px",
+      {
+        "lineHeight": "1.6",
+        "letterSpacing": "0.02em",
+        "fontWeight": "420"
+      }
+    ],
+    "9xl": [
+      "40px",
+      {
+        "lineHeight": "1.4",
+        "letterSpacing": "0em",
+        "fontWeight": "420"
+      }
+    ],
+    "10xl": [
+      "44px",
+      {
+        "lineHeight": "1.4",
+        "letterSpacing": "0em",
+        "fontWeight": "420"
+      }
+    ],
+    "11xl": [
+      "48px",
+      {
+        "lineHeight": "1.4",
+        "letterSpacing": "0em",
+        "fontWeight": "420"
+      }
+    ],
+    "12xl": [
+      "52px",
+      {
+        "lineHeight": "1.4",
+        "letterSpacing": "0em",
+        "fontWeight": "420"
+      }
+    ],
+    "13xl": [
+      "56px",
+      {
+        "lineHeight": "1.4",
+        "letterSpacing": "0.005em",
+        "fontWeight": "420"
+      }
+    ],
+    "14xl": [
+      "64px",
+      {
+        "lineHeight": "1.3",
+        "letterSpacing": "0em",
+        "fontWeight": "420"
+      }
+    ],
+    "15xl": [
+      "72px",
+      {
+        "lineHeight": "1.3",
+        "letterSpacing": "0em",
+        "fontWeight": "420"
+      }
+    ],
+    "16xl": [
+      "80px",
+      {
+        "lineHeight": "1.2",
+        "letterSpacing": "0em",
+        "fontWeight": "420"
+      }
+    ],
+    "17xl": [
+      "88px",
+      {
+        "lineHeight": "1.2",
+        "letterSpacing": "0em",
+        "fontWeight": "420"
+      }
+    ]
+  },
+  "textTransform": {
+    "tiny": "uppercase"
+  },
+  "paragraph": {
+    "2xs": {
+      "lineHeight": "1.6",
+      "letterSpacing": "0.01em"
+    },
+    "xs": {
+      "lineHeight": "1.6",
+      "letterSpacing": "0.02em"
+    },
+    "sm": {
+      "lineHeight": "1.5",
+      "letterSpacing": "0.015em"
+    },
+    "base": {
+      "lineHeight": "1.5",
+      "letterSpacing": "0.02em"
+    },
+    "lg": {
+      "lineHeight": "1.5",
+      "letterSpacing": "0.02em"
+    },
+    "xl": {
+      "lineHeight": "1.5",
+      "letterSpacing": "0.02em"
+    },
+    "2xl": {
+      "lineHeight": "1.5",
+      "letterSpacing": "0.02em"
+    },
+    "3xl": {
+      "lineHeight": "1.5",
+      "letterSpacing": "0.01em"
+    },
+    "4xl": {
+      "lineHeight": "1.48",
+      "letterSpacing": "0.01em"
+    },
+    "5xl": {
+      "lineHeight": "1.4",
+      "letterSpacing": "0.005em"
+    }
+  },
+  "tracking": {
+    "text": {
+      "tiny": {
+        "regular": "0.09em",
+        "medium": "0.09em",
+        "semibold": "0.09em",
+        "bold": "0.09em",
+        "black": "0.09em"
+      },
+      "2xs": {
+        "regular": "0.01em",
+        "medium": "0.01em",
+        "semibold": "0.01em",
+        "bold": "0.01em",
+        "black": "0.01em"
+      },
+      "xs": {
+        "regular": "0.02em",
+        "medium": "0.02em",
+        "semibold": "0.015em",
+        "bold": "0.015em",
+        "black": "0.015em"
+      },
+      "sm": {
+        "regular": "0.02em",
+        "medium": "0.02em",
+        "semibold": "0.015em",
+        "bold": "0.015em",
+        "black": "0.015em"
+      },
+      "base": {
+        "regular": "0.02em",
+        "medium": "0.015em",
+        "semibold": "0.015em",
+        "bold": "0.015em"
+      },
+      "lg": {
+        "regular": "0.02em",
+        "medium": "0.015em",
+        "semibold": "0.015em",
+        "bold": "0.015em",
+        "black": "0.015em"
+      },
+      "xl": {
+        "regular": "0.02em",
+        "medium": "0.015em",
+        "semibold": "0.015em",
+        "bold": "0.015em",
+        "black": "0.015em"
+      },
+      "2xl": {
+        "regular": "0.02em",
+        "medium": "0.015em",
+        "semibold": "0.015em",
+        "bold": "0.015em",
+        "black": "0.015em"
+      },
+      "3xl": {
+        "regular": "0.01em",
+        "medium": "0.01em",
+        "semibold": "0.01em",
+        "bold": "0.01em",
+        "black": "0.01em"
+      },
+      "4xl": {
+        "regular": "0.005em",
+        "medium": "0.01em",
+        "semibold": "0.01em",
+        "bold": "0.01em",
+        "black": "0.01em"
+      },
+      "5xl": {
+        "regular": "0.005em",
+        "medium": "0.005em",
+        "semibold": "0.005em",
+        "bold": "0.005em",
+        "black": "0.005em"
+      },
+      "6xl": {
+        "regular": "0.01em",
+        "medium": "0.005em",
+        "semibold": "0.005em",
+        "bold": "0.005em",
+        "black": "0.01em"
+      },
+      "7xl": {
+        "regular": "0.01em",
+        "medium": "0.005em",
+        "semibold": "0.01em",
+        "bold": "0.015em",
+        "black": "0.01em"
+      },
+      "8xl": {
+        "regular": "0.02em",
+        "medium": "0.015em",
+        "semibold": "0.015em",
+        "bold": "0.015em",
+        "black": "0.005em"
+      },
+      "9xl": {
+        "regular": "0em",
+        "medium": "0em",
+        "semibold": "0em",
+        "bold": "0em",
+        "black": "0em"
+      },
+      "10xl": {
+        "regular": "0em",
+        "medium": "0em",
+        "semibold": "0em",
+        "bold": "0em",
+        "black": "0em"
+      },
+      "11xl": {
+        "regular": "0em",
+        "medium": "0em",
+        "semibold": "0em",
+        "bold": "0.005em",
+        "black": "0.005em"
+      },
+      "12xl": {
+        "regular": "0em",
+        "medium": "0em",
+        "semibold": "0em",
+        "bold": "0em",
+        "black": "0.005em"
+      },
+      "13xl": {
+        "regular": "0.005em",
+        "medium": "0em",
+        "semibold": "0em",
+        "bold": "0em",
+        "black": "0em"
+      },
+      "14xl": {
+        "regular": "0em",
+        "medium": "0em",
+        "semibold": "0em",
+        "bold": "0em",
+        "black": "0em"
+      },
+      "15xl": {
+        "regular": "0em",
+        "medium": "0em",
+        "semibold": "0em",
+        "bold": "0em",
+        "black": "0em"
+      },
+      "16xl": {
+        "regular": "0em",
+        "medium": "0.005em",
+        "semibold": "0em",
+        "bold": "0em",
+        "black": "0em"
+      },
+      "17xl": {
+        "regular": "0em",
+        "medium": "0em",
+        "semibold": "0em",
+        "bold": "0em",
+        "black": "0em"
+      }
+    },
+    "paragraph": {
+      "2xs": {
+        "regular": "0.01em",
+        "medium": "0.01em",
+        "semibold": "0.01em",
+        "bold": "0.01em",
+        "black": "0.01em"
+      },
+      "xs": {
+        "regular": "0.02em",
+        "medium": "0.02em",
+        "semibold": "0.015em",
+        "bold": "0.015em",
+        "black": "0.015em"
+      },
+      "sm": {
+        "regular": "0.015em",
+        "medium": "0.02em",
+        "semibold": "0.015em",
+        "bold": "0.015em",
+        "black": "0.015em"
+      },
+      "base": {
+        "regular": "0.02em",
+        "medium": "0.015em",
+        "semibold": "0.015em",
+        "bold": "0.015em",
+        "black": "0.015em"
+      },
+      "lg": {
+        "regular": "0.02em",
+        "medium": "0.015em",
+        "semibold": "0.015em",
+        "bold": "0.015em",
+        "black": "0.015em"
+      },
+      "xl": {
+        "regular": "0.02em",
+        "medium": "0.015em",
+        "semibold": "0.015em",
+        "bold": "0.015em",
+        "black": "0.015em"
+      },
+      "2xl": {
+        "regular": "0.02em",
+        "medium": "0.015em",
+        "semibold": "0.015em",
+        "bold": "0.015em",
+        "black": "0.015em"
+      },
+      "3xl": {
+        "regular": "0.01em",
+        "medium": "0.01em",
+        "semibold": "0.01em",
+        "bold": "0.01em",
+        "black": "0.01em"
+      },
+      "4xl": {
+        "regular": "0.01em",
+        "medium": "0.01em",
+        "semibold": "0.01em",
+        "bold": "0.01em",
+        "black": "0.01em"
+      },
+      "5xl": {
+        "regular": "0.005em",
+        "medium": "0.005em",
+        "semibold": "0.005em",
+        "bold": "0.005em",
+        "black": "0.005em"
+      }
+    }
+  }
+}
diff --git a/tailwind/migrate-tokens-v2.js b/tailwind/migrate-tokens-v2.js
new file mode 100644
index 000000000..1b5661ebb
--- /dev/null
+++ b/tailwind/migrate-tokens-v2.js
@@ -0,0 +1,391 @@
+/**
+ * Espresso v2 token migration codemod.
+ *
+ * Renames old semantic token names (frappe-ui v0.1.278 era) to their espresso
+ * v2 equivalents, per the "Frappe tokens v2 migration" mapping from design.
+ * Works on any text occurrence of a token name — tailwind utilities
+ * (`bg-surface-white`, `text-ink-red-2`, `border-outline-gray-modals`) and CSS
+ * variables (`var(--surface-white)`) alike — so it can be pointed at app
+ * codebases too.
+ *
+ * It also merges weight classes: a `text-<size>` + `font-<weight>` in the same
+ * static class list collapses to the combined `text-<size>-<weight>` style
+ * class, which carries the correct per-weight letter-spacing (see
+ * `mergeWeightClasses`).
+ *
+ *   Usage:  node tailwind/migrate-tokens-v2.js [--dry-run] [--force] <dir-or-file...>
+ *
+ * IMPORTANT: the token replacement is single-pass/simultaneous. Several renames
+ * chain (outline red-2→3, red-3→4, red-4→5); applying them sequentially would
+ * cascade (red-2 ending up as red-5). Run this script exactly once per
+ * codebase — the v2 scheme reuses names (e.g. surface-gray-5 exists in both
+ * scales with different values), so a second run would double-shift tokens. As
+ * a guard, the script refuses to run on a codebase that looks already migrated
+ * (v2-only tokens present, no pre-v2 tokens); pass --force to override.
+ */
+
+import fs from 'fs'
+import path from 'path'
+import { fileURLToPath } from 'url'
+
+// ---------- MAPPING ----------
+
+// Per-category renames: old suffix → new suffix.
+// `cards` / `gray-modals` are code-side legacy aliases of Figma's
+// `card` / `gray-modal` — both spellings map to the same v2 token.
+const shift = (families, pairs) =>
+  Object.fromEntries(
+    families.flatMap((f) => pairs.map(([from, to]) => [`${f}-${from}`, `${f}-${to}`])),
+  )
+
+const ACCENTS = ['red', 'blue', 'green', 'amber', 'violet']
+
+const SURFACE_RENAMES = {
+  white: 'base',
+  'menu-bar': 'sidebar',
+  card: 'elevation-1',
+  cards: 'elevation-1',
+  modal: 'elevation-2',
+  selected: 'elevation-3',
+  // legacy code-side token; resolved to the same values as elevation-3 in both modes
+  'gray-2-contrast': 'elevation-3',
+  ...shift(['gray'], [[5, 8], [6, 9], [7, 10]]),
+  ...shift(ACCENTS, [[5, 7], [6, 8], [7, 9]]),
+}
+
+const INK_RENAMES = {
+  white: 'base',
+  ...shift(ACCENTS, [[2, 5], [3, 6], [4, 8]]),
+}
+
+const OUTLINE_RENAMES = {
+  white: 'base',
+  'gray-modal': 'elevation-2',
+  'gray-modals': 'elevation-2',
+  ...shift(['gray'], [[5, 7]]),
+  ...shift(ACCENTS, [[2, 3], [3, 4], [4, 5]]),
+}
+
+// The alpha categories only kept their neutral ramps in v2.
+const SURFACE_ALPHA_RENAMES = {
+  white: 'base',
+  'menu-bar': 'sidebar',
+  card: 'elevation-1',
+  cards: 'elevation-1',
+  modal: 'elevation-2',
+  selected: 'elevation-3',
+  ...shift(['gray'], [[5, 8], [6, 9], [7, 10]]),
+}
+
+const OUTLINE_ALPHA_RENAMES = {
+  white: 'base',
+  'gray-modal': 'elevation-2',
+  'gray-modals': 'elevation-2',
+  ...shift(['gray'], [[5, 7]]),
+}
+
+// ---------- TYPOGRAPHY SIZE RENAMES ----------
+
+// The espresso text scale gained 15px (`lg`) and 17px (`2xl`) stops, pushing
+// every size from the old `lg` (16px) upward by two names. Each physical size
+// keeps its meaning under a new name, so existing utility classes must be
+// renamed to render identically (old `text-lg`/16px → `text-xl`, etc.). These
+// chain (lg→xl, xl→3xl, …) and so MUST run in the same single simultaneous pass
+// as the color renames below — a sequential pass would cascade.
+//
+// Caveat: these names (`text-lg` … `text-9xl`) coincide with stock Tailwind
+// font-size utilities, so only point this at code using the espresso scale, and
+// run exactly once (see header).
+const TEXT_SIZE_SHIFT = [
+  ['lg', 'xl'],
+  ['xl', '3xl'],
+  ['2xl', '4xl'],
+  ['3xl', '5xl'],
+  ['4xl', '6xl'],
+  ['5xl', '7xl'],
+  ['6xl', '8xl'],
+  ['7xl', '9xl'],
+  ['8xl', '10xl'],
+  ['9xl', '11xl'],
+  ['10xl', '12xl'],
+  ['11xl', '13xl'],
+  ['12xl', '14xl'],
+  ['13xl', '15xl'],
+  ['14xl', '16xl'],
+  ['15xl', '17xl'],
+]
+
+// Each size surfaces as three utility forms: the size utility (`text-lg`), the
+// paragraph variant (`text-p-lg`), and the medium-weight component class
+// (`text-lg-medium`). All three shift together.
+const TEXT_SIZE_RENAMES = Object.fromEntries(
+  TEXT_SIZE_SHIFT.flatMap(([from, to]) => [
+    [`text-${from}`, `text-${to}`],
+    [`text-p-${from}`, `text-p-${to}`],
+    [`text-${from}-medium`, `text-${to}-medium`],
+  ]),
+)
+
+// Full old token name → full new token name. NOTE: alpha categories must come
+// before their base category when building the alternation so that e.g.
+// `surface-alpha-gray-5` is never half-matched by a `surface-…` rule (the
+// longest-first sort below also guarantees this).
+export const TOKEN_RENAMES = {
+  ...prefix('surface-alpha', SURFACE_ALPHA_RENAMES),
+  ...prefix('outline-alpha', OUTLINE_ALPHA_RENAMES),
+  ...prefix('surface', SURFACE_RENAMES),
+  ...prefix('ink', INK_RENAMES),
+  ...prefix('outline', OUTLINE_RENAMES),
+  ...TEXT_SIZE_RENAMES,
+}
+
+// Tokens dropped in v2 with no replacement — usage is reported, never rewritten.
+export const REMOVED_TOKENS = [
+  ...[1, 2, 3, 4, 5, 6, 7].map((n) => `surface-alpha-red-${n}`),
+  ...[2, 3, 4].map((n) => `outline-alpha-red-${n}`),
+]
+
+// Legacy names with no v2 mapping decided yet — reported for manual review.
+export const WATCH_TOKENS = []
+
+function prefix(category, renames) {
+  return Object.fromEntries(
+    Object.entries(renames).map(([from, to]) => [
+      `${category}-${from}`,
+      `${category}-${to}`,
+    ]),
+  )
+}
+
+// ---------- REPLACEMENT ----------
+
+// Token names are matched whole: not preceded by a letter/digit (a leading `-`
+// is expected — `bg-surface-white`, `var(--surface-white)`) and not followed by
+// anything that could extend the name (`gray-1` must not match in `gray-10`,
+// `card` not in `cards`, `gray-modal` not in `gray-modals`,
+// `surface-gray-2` not in `surface-gray-2-contrast`).
+const byLengthDesc = (a, b) => b.length - a.length
+
+const RENAME_REGEX = new RegExp(
+  `(?<![a-zA-Z0-9])(${Object.keys(TOKEN_RENAMES).sort(byLengthDesc).join('|')})(?![a-zA-Z0-9-])`,
+  'g',
+)
+const FLAG_REGEX = new RegExp(
+  `(?<![a-zA-Z0-9])(${[...REMOVED_TOKENS, ...WATCH_TOKENS].sort(byLengthDesc).join('|')})(?![a-zA-Z0-9-])`,
+  'g',
+)
+
+// ---------- WEIGHT-CLASS MERGE ----------
+
+// Collapse a `text-<size>` and a `font-<weight>` that co-occur in the same
+// static class list into the combined `text-<size>-<weight>` style class — the
+// canonical way to express a weighted text style now that letter-spacing is
+// tracked per weight (so `text-base font-medium` is NOT equivalent to
+// `text-base-medium`). The two need not be adjacent; classes in between
+// (`px-2 text-sm font-medium text-ink-gray-7`) are preserved, and color
+// utilities like `text-ink-gray-7` are never mistaken for a size.
+//
+// Only *static* `class="…"` / `className="…"` attributes are touched. Dynamic
+// `:class` / `v-bind:class` and conditional weights are skipped on purpose:
+// merging a conditionally-applied weight into an unconditional size would be
+// wrong. A class list with more than one size or more than one weight is
+// ambiguous and left untouched.
+const WEIGHT_SUFFIX = {
+  'font-medium': 'medium',
+  'font-semibold': 'semibold',
+  'font-bold': 'bold',
+  'font-extrabold': 'black',
+  'font-normal': '', // regular — drop the weight; the bare `text-<size>` is regular
+}
+
+const TEXT_SIZES = [
+  'tiny', '2xs', 'xs', 'sm', 'base', 'lg', 'xl', '2xl', '3xl', '4xl', '5xl',
+  '6xl', '7xl', '8xl', '9xl', '10xl', '11xl', '12xl', '13xl', '14xl', '15xl',
+  '16xl', '17xl',
+]
+const SIZE_CLASS = new RegExp(`^text-(?:p-)?(?:${TEXT_SIZES.join('|')})$`)
+
+// Static class/className attribute value — not `:class` / `v-bind:class` (the
+// negative lookbehind rejects a preceding `:` or `-`).
+const CLASS_ATTR = /(?<![:\w-])(class(?:Name)?)(\s*=\s*)(["'])([^"']*)\3/g
+
+const escapeRe = (s) => s.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')
+// Whole-token matcher within a space-separated class list (consumes one leading
+// space so removing a mid-list token doesn't leave a double space).
+const tokenRe = (tok) => new RegExp(`(?:^|\\s)${escapeRe(tok)}(?=\\s|$)`)
+
+export function mergeWeightClasses(content) {
+  const merges = []
+  const migrated = content.replace(CLASS_ATTR, (full, name, eq, quote, value, offset) => {
+    const words = value.split(/\s+/).filter(Boolean)
+    const sizes = words.filter((w) => SIZE_CLASS.test(w))
+    const weights = words.filter((w) => w in WEIGHT_SUFFIX)
+    if (sizes.length !== 1 || weights.length !== 1) return full
+
+    const size = sizes[0]
+    const weight = weights[0]
+    const suffix = WEIGHT_SUFFIX[weight]
+    const merged = suffix ? `${size}-${suffix}` : size
+
+    const newValue = value
+      .replace(new RegExp(`(^|\\s)${escapeRe(size)}(?=\\s|$)`), (m, pre) => `${pre}${merged}`)
+      .replace(tokenRe(weight), '')
+    merges.push({ from: `${size} + ${weight}`, to: merged, line: lineAt(content, offset) })
+    return `${name}${eq}${quote}${newValue}${quote}`
+  })
+  return { migrated, merges }
+}
+
+// ---------- ALREADY-MIGRATED DETECTION ----------
+
+// Tokens that exist ONLY pre-migration (renamed away) vs ONLY post-migration. A
+// codebase with the post-migration names and none of the pre-migration ones has
+// almost certainly been migrated already — and re-running is destructive (the
+// color renames reuse names, so a second pass double-shifts them).
+const PRE_MIGRATION_TOKENS = [
+  'surface-white', 'ink-white', 'outline-white', 'surface-menu-bar',
+  'surface-card', 'surface-cards', 'surface-modal', 'surface-selected',
+  'outline-gray-modal', 'outline-gray-modals',
+]
+const POST_MIGRATION_TOKENS = [
+  'surface-base', 'ink-base', 'outline-base', 'surface-sidebar',
+  'surface-elevation-1', 'surface-elevation-2', 'surface-elevation-3',
+  'outline-elevation-2',
+]
+const sentinelRegex = (tokens) =>
+  new RegExp(`(?<![a-zA-Z0-9])(?:${tokens.slice().sort(byLengthDesc).join('|')})(?![a-zA-Z0-9-])`, 'g')
+const PRE_REGEX = sentinelRegex(PRE_MIGRATION_TOKENS)
+const POST_REGEX = sentinelRegex(POST_MIGRATION_TOKENS)
+
+function detectAlreadyMigrated(files) {
+  let pre = 0
+  let post = 0
+  for (const file of files) {
+    const content = fs.readFileSync(file, 'utf8')
+    pre += (content.match(PRE_REGEX) || []).length
+    post += (content.match(POST_REGEX) || []).length
+  }
+  return { pre, post, likelyMigrated: post > 0 && pre === 0 }
+}
+
+export function migrateTokens(content) {
+  const replacements = []
+  let migrated = content.replace(RENAME_REGEX, (match, _token, offset) => {
+    const to = TOKEN_RENAMES[match]
+    replacements.push({ from: match, to, line: lineAt(content, offset) })
+    return to
+  })
+
+  // Merge weight classes on the post-rename text so `text-lg font-medium`
+  // becomes `text-xl-medium` (size shift first, then merge).
+  const { migrated: weightMerged, merges } = mergeWeightClasses(migrated)
+  migrated = weightMerged
+
+  const flagged = []
+  for (const m of content.matchAll(FLAG_REGEX)) {
+    flagged.push({ token: m[0], line: lineAt(content, m.index) })
+  }
+
+  return { migrated, replacements, merges, flagged }
+}
+
+function lineAt(content, offset) {
+  let line = 1
+  for (let i = 0; i < offset; i++) if (content[i] === '\n') line++
+  return line
+}
+
+// ---------- CLI ----------
+
+const EXTENSIONS = new Set([
+  '.vue', '.ts', '.tsx', '.js', '.jsx', '.md', '.css', '.scss', '.html',
+])
+const SKIP_DIRS = new Set([
+  'node_modules', '.git', 'dist', 'cache', 'generated', 'espresso-v2-design-tokens',
+])
+
+function* walk(target) {
+  const stat = fs.statSync(target)
+  if (stat.isFile()) {
+    yield target
+    return
+  }
+  for (const entry of fs.readdirSync(target, { withFileTypes: true })) {
+    const full = path.join(target, entry.name)
+    if (entry.isDirectory()) {
+      if (!SKIP_DIRS.has(entry.name)) yield* walk(full)
+    } else if (EXTENSIONS.has(path.extname(entry.name))) {
+      yield full
+    }
+  }
+}
+
+function main() {
+  const args = process.argv.slice(2)
+  const dryRun = args.includes('--dry-run')
+  const force = args.includes('--force')
+  const targets = args.filter((a) => !a.startsWith('--'))
+
+  if (targets.length === 0) {
+    console.error('Usage: node tailwind/migrate-tokens-v2.js [--dry-run] [--force] <dir-or-file...>')
+    process.exit(1)
+  }
+
+  const files = []
+  for (const target of targets) for (const file of walk(target)) files.push(file)
+
+  // Guard against a destructive second pass (the color renames reuse names).
+  const { pre, post, likelyMigrated } = detectAlreadyMigrated(files)
+  if (likelyMigrated) {
+    console.warn('\n⚠  This codebase looks ALREADY MIGRATED to espresso v2.')
+    console.warn(`   Found ${post} v2-only token(s) and 0 pre-v2 token(s).`)
+    console.warn('   This migration is NOT idempotent — the color renames reuse names,')
+    console.warn('   so a second pass would double-shift tokens (e.g. surface-gray-5 → -8 → -11).')
+    if (!force && !dryRun) {
+      console.warn('   Refusing to run. Pass --force to override, or --dry-run to preview.\n')
+      process.exit(2)
+    }
+    console.warn(dryRun ? '   (--dry-run: previewing only.)\n' : '   (--force: proceeding anyway.)\n')
+  }
+
+  let filesChanged = 0
+  let totalReplacements = 0
+  let totalMerges = 0
+  const allFlagged = []
+
+  for (const file of files) {
+    const content = fs.readFileSync(file, 'utf8')
+    const { migrated, replacements, merges, flagged } = migrateTokens(content)
+
+    for (const f of flagged) allFlagged.push({ file, ...f })
+    const changeCount = replacements.length + merges.length
+    if (changeCount === 0) continue
+
+    filesChanged++
+    totalReplacements += replacements.length
+    totalMerges += merges.length
+    if (dryRun) {
+      console.log(`${file} (${changeCount})`)
+      for (const r of replacements) console.log(`  L${r.line}: ${r.from} -> ${r.to}`)
+      for (const m of merges) console.log(`  L${m.line}: ${m.from} => ${m.to}`)
+    } else {
+      fs.writeFileSync(file, migrated)
+      console.log(`${file} (${changeCount})`)
+    }
+  }
+
+  console.log(
+    `\n${dryRun ? '[dry-run] would update' : 'Updated'} ${filesChanged} files, ` +
+      `${totalReplacements} token renames, ${totalMerges} weight-class merges`,
+  )
+
+  if (allFlagged.length > 0) {
+    console.log('\n⚠ Tokens needing manual attention (removed in v2 or unmapped):')
+    for (const f of allFlagged) {
+      console.log(`  ${f.file}:L${f.line}  ${f.token}`)
+    }
+  }
+}
+
+const isCLI = process.argv[1] && path.resolve(process.argv[1]) === fileURLToPath(import.meta.url)
+if (isCLI) main()
diff --git a/tailwind/plugin.js b/tailwind/plugin.js
index 9f7d26d0a..6d124c862 100644
--- a/tailwind/plugin.js
+++ b/tailwind/plugin.js
@@ -3,12 +3,155 @@ import {
   generateColorPalette,
   generateSemanticColors,
   generateCSSVariables,
+  generateEffectVariables,
 } from './colorPalette.js'
-import { borderRadius, boxShadow, fontSize } from './tokens.js'
+import radiusTokens from './generated/radius.json'
+import typographyTokens from './generated/typography.json'
+import effectsData from './generated/effects.json'
 
 let colorPalette = generateColorPalette()
 let semanticColors = generateSemanticColors()
-let cssVariables = generateCSSVariables()
+let cssVariables = mergeVariableLayers(
+  generateCSSVariables(),
+  generateEffectVariables(),
+  generateRadiusVariables(),
+)
+
+// Emit `--radius-{key}` for every radius token (numeric scale + aliases) so
+// the values are inspectable as real CSS variables. `borderRadius` is rewired
+// below to consume these vars, so `rounded-4` and `--radius-4` stay in sync.
+function generateRadiusVariables() {
+  const vars = {}
+  for (const [key, value] of Object.entries(radiusTokens)) {
+    if (key === 'DEFAULT') continue
+    vars[`--radius-${key}`] = value
+  }
+  return { ':root': vars }
+}
+
+// Map `DEFAULT` (Tailwind's `rounded` class) onto the numeric var that
+// shares its value, so we don't emit a `--radius-DEFAULT` (awkward name).
+function buildRadiusConfig() {
+  const numericByValue = {}
+  for (const [key, value] of Object.entries(radiusTokens)) {
+    if (/^\d+$/.test(key)) numericByValue[value] = key
+  }
+  const out = {}
+  for (const [key, value] of Object.entries(radiusTokens)) {
+    if (key === 'DEFAULT') {
+      const numeric = numericByValue[value]
+      out[key] = numeric ? `var(--radius-${numeric})` : value
+    } else {
+      out[key] = `var(--radius-${key})`
+    }
+  }
+  return out
+}
+
+// Merge two `{ selector: { var: value } }` objects into one, preserving any
+// vars already declared under the same selector.
+function mergeVariableLayers(...layers) {
+  const out = {}
+  for (const layer of layers) {
+    for (const [selector, vars] of Object.entries(layer)) {
+      out[selector] = { ...(out[selector] || {}), ...vars }
+    }
+  }
+  return out
+}
+
+// Weight variants are exposed as component classes — `text-<size>-<weight>` and
+// the paragraph counterpart `text-p-<size>-<weight>` — one per Figma named
+// style. Figma tracks each weight differently per size and CSS letter-spacing
+// can't follow font-weight, so each (size, weight) must ship as a self-contained
+// class. `regular` stays the bare `text-<size>` / `text-p-<size>` utility.
+// (Component classes are JIT-purged, so only the ones used in content emit.)
+const WEIGHT_VARIANTS = ['medium', 'semibold', 'bold', 'black']
+
+function buildFontSize() {
+  const out = {}
+  // Each size's regular variant already carries lineHeight, letterSpacing and
+  // fontWeight from the text-styles export (see figma-tokens-to-theme.js).
+  for (const [key, [size, meta]] of Object.entries(typographyTokens.fontSize)) {
+    out[key] = [size, { ...meta }]
+  }
+  // Paragraph variants (`text-p-<size>`): same size, the paragraph style's
+  // looser line-height and its own letter-spacing.
+  for (const [key, p] of Object.entries(typographyTokens.paragraph || {})) {
+    if (!out[key]) continue
+    const [size, meta] = out[key]
+    out[`p-${key}`] = [
+      size,
+      { ...meta, lineHeight: p.lineHeight, letterSpacing: p.letterSpacing },
+    ]
+  }
+  return out
+}
+
+// Focus ring utilities backed by `--focus-outline-*` CSS vars (theme-flipped
+// in colorPalette.js#generateEffectVariables). Implemented as `outline`, not
+// box-shadow, so rings never collide with shadow/ring utilities on the same
+// element and survive forced-colors mode. The default ring is applied
+// globally via `:focus-visible` (see globalStyles); these utilities are for
+// themed overrides (`focus-visible:focus-ring-red`) and non-focus states
+// (`data-[state=open]:focus-ring`). Registered via `addComponents` so
+// Tailwind IntelliSense picks them up.
+function buildFocusRingUtilities() {
+  const out = {}
+  for (const name of Object.keys(effectsData.focus.light)) {
+    const className = name === 'default' ? '.focus-ring' : `.focus-ring-${name}`
+    out[className] = {
+      outline: `var(--focus-outline-${name})`,
+      outlineOffset: '0px',
+    }
+  }
+  return out
+}
+
+function buildTextStyleUtilities() {
+  const out = {}
+  const t = typographyTokens
+  const groups = [
+    {
+      className: (s, w) => `.text-${s}-${w}`,
+      tracking: t.tracking?.text || {},
+      lineHeight: (s) => t.fontSize[s]?.[1].lineHeight,
+    },
+    {
+      className: (s, w) => `.text-p-${s}-${w}`,
+      tracking: t.tracking?.paragraph || {},
+      lineHeight: (s) => t.paragraph?.[s]?.lineHeight,
+    },
+  ]
+  for (const group of groups) {
+    for (const [size, byWeight] of Object.entries(group.tracking)) {
+      const entry = t.fontSize[size]
+      if (!entry) continue
+      const [fontSize] = entry
+      const lineHeight = group.lineHeight(size)
+      const transform = t.textTransform?.[size]
+      for (const weight of WEIGHT_VARIANTS) {
+        if (!(weight in byWeight)) continue
+        out[group.className(size, weight)] = {
+          fontSize,
+          lineHeight,
+          fontWeight: String(t.fontWeight[weight]),
+          letterSpacing: byWeight[weight],
+          ...(transform ? { textTransform: transform } : {}),
+        }
+      }
+    }
+  }
+  // `tiny` is an uppercase eyebrow style; the bare regular utility needs the
+  // text-transform too (Tailwind's fontSize tuple can't express it).
+  for (const [size, transform] of Object.entries(t.textTransform || {})) {
+    out[`.text-${size}`] = {
+      ...(out[`.text-${size}`] || {}),
+      textTransform: transform,
+    }
+  }
+  return out
+}
 
 let globalStyles = (theme) => ({
   html: {
@@ -26,16 +169,23 @@ let globalStyles = (theme) => ({
     backgroundSize: '1.13em',
     backgroundPosition: 'right 0.44rem center',
   },
+  // Global keyboard focus indicator (espresso v2 focus/default token).
+  // Lives in the base layer so any utility on the element can override it:
+  // suppress with `focus-visible:outline-none`, retheme with
+  // `focus-visible:focus-ring-<color>`.
+  ':focus-visible': {
+    outline: 'var(--focus-outline-default)',
+    outlineOffset: '0px',
+  },
 })
 
 let componentStyles = {
   '.form-input, .form-textarea, .form-select': {
-    '@apply h-7 rounded border border-[--surface-gray-2] bg-surface-gray-2 py-1.5 pl-2 pr-2 text-base text-ink-gray-8 placeholder-ink-gray-4 transition-colors hover:border-outline-gray-modals hover:bg-surface-gray-3 focus:border-outline-gray-4 focus:bg-surface-white focus:shadow-sm focus:ring-0 focus-visible:ring-2 focus-visible:ring-outline-gray-3':
+    '@apply h-7 rounded border border-[--surface-gray-2] bg-surface-gray-2 py-1.5 pl-2 pr-2 text-base text-ink-gray-8 placeholder-ink-gray-4 transition-colors hover:border-outline-elevation-2 hover:bg-surface-gray-3 focus:border-outline-gray-4 focus:bg-surface-base focus:shadow-sm focus:ring-0':
       {},
   },
   '.form-checkbox': {
-    '@apply rounded-md bg-surface-gray-2 text-ink-blue-2 focus:ring-0 focus-visible:ring-1':
-      {},
+    '@apply rounded-md bg-surface-gray-2 text-ink-blue-5 focus:ring-0': {},
   },
   "[data-theme='dark'] [type='checkbox']:checked": {
     'background-image': `url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='%230F0F0F' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e")`,
@@ -49,18 +199,36 @@ export default plugin(
   function ({ addBase, addComponents, theme }) {
     addBase({ ...globalStyles(theme), ...cssVariables })
     addComponents(componentStyles)
+    addComponents(buildTextStyleUtilities())
+    addComponents(buildFocusRingUtilities())
   },
   {
     theme: {
       colors: colorPalette,
-      borderRadius: borderRadius,
-      boxShadow: boxShadow,
+      borderRadius: buildRadiusConfig(),
+      boxShadow: {
+        none: 'none',
+        sm: 'var(--elevation-sm)',
+        base: 'var(--elevation-base)',
+        DEFAULT: 'var(--elevation-base)',
+        md: 'var(--elevation-md)',
+        lg: 'var(--elevation-lg)',
+        xl: 'var(--elevation-xl)',
+        '2xl': 'var(--elevation-2xl)',
+        status: 'var(--elevation-status)',
+        'dark-sm': 'var(--dark-elevation-sm)',
+        'dark-base': 'var(--dark-elevation-base)',
+        'dark-md': 'var(--dark-elevation-md)',
+        'dark-lg': 'var(--dark-elevation-lg)',
+        'dark-xl': 'var(--dark-elevation-xl)',
+        'dark-2xl': 'var(--dark-elevation-2xl)',
+      },
       container: {
         padding: {
           xl: '5rem',
         },
       },
-      fontSize: fontSize,
+      fontSize: buildFontSize(),
       screens: {
         sm: '640px',
         md: '768px',
@@ -73,11 +241,14 @@ export default plugin(
         },
         backgroundColor: {
           surface: semanticColors.surface,
+          'surface-alpha': semanticColors['surface-alpha'],
         },
         gradientColorStops: {
           surface: semanticColors.surface,
+          'surface-alpha': semanticColors['surface-alpha'],
           ink: semanticColors.ink,
           outline: semanticColors.outline,
+          'outline-alpha': semanticColors['outline-alpha'],
         },
         fill: {
           ink: semanticColors.ink,
@@ -92,12 +263,15 @@ export default plugin(
         borderColor: () => ({
           DEFAULT: 'var(--outline-gray-1)',
           outline: semanticColors.outline,
+          'outline-alpha': semanticColors['outline-alpha'],
         }),
         ringColor: {
           outline: semanticColors.outline,
+          'outline-alpha': semanticColors['outline-alpha'],
         },
         divideColor: {
           outline: semanticColors.outline,
+          'outline-alpha': semanticColors['outline-alpha'],
         },
         spacing: {
           4.5: '1.125rem',
@@ -260,7 +434,7 @@ export default plugin(
           v3: {
             css: [
               {
-                fontSize: 'var(--prose-font-size, 14px)',
+                fontSize: 'var(--prose-font-size, 15px)',
                 fontWeight: 420,
                 lineHeight: '1.7',
                 letterSpacing: '0.02em',
diff --git a/tailwind/tokens.js b/tailwind/tokens.js
index 97b0c7420..f760d82e9 100644
--- a/tailwind/tokens.js
+++ b/tailwind/tokens.js
@@ -1,45 +1,49 @@
-const borderRadius = {
-  none: '0px', // 0
-  sm: '0.25rem', // 4px
-  DEFAULT: '0.5rem', // 8px
-  md: '0.625rem', // 10px
-  lg: '0.75rem', // 12px
-  xl: '1rem', // 16px
-  '2xl': '1.25rem', // 20px
-  full: '9999px', // 9999px
-}
+// Public token exports for external consumers (Tailwind v3 presets, CSS-in-JS,
+// design-system tooling). Sourced from the Figma-synced `./generated/*` JSON;
+// the plugin reads the same generated files directly so both stay in sync via
+// `yarn sync-tokens`.
+import radiusTokens from './generated/radius.json'
+import typographyTokens from './generated/typography.json'
+import effectsData from './generated/effects.json'
+
+const borderRadius = radiusTokens
 
+// Elevation tokens are flipped per theme by the plugin via CSS vars; the
+// exported shape keeps static values so non-runtime consumers (snapshot tests,
+// docs tooling) still get sensible defaults.
 const boxShadow = {
-  sm: '0px 1px 2px rgba(0, 0, 0, 0.1)',
-  DEFAULT:
-    '0px 0px 1px rgba(0, 0, 0, 0.45), 0px 1px 2px rgba(0, 0, 0, 0.1)',
-  md: '0px 0px 1px rgba(0, 0, 0, 0.12), 0px 0.5px 2px rgba(0, 0, 0, 0.15), 0px 2px 3px rgba(0, 0, 0, 0.16)',
-  lg: '0px 0px 1px rgba(0, 0, 0, 0.35), 0px 6px 8px -4px rgba(0, 0, 0, 0.1)',
-  xl: '0px 0px 1px rgba(0, 0, 0, 0.19), 0px 1px 2px rgba(0, 0, 0, 0.07), 0px 6px 15px -5px rgba(0, 0, 0, 0.11)',
-  '2xl':
-    '0px 0px 1px rgba(0, 0, 0, 0.2), 0px 1px 3px rgba(0, 0, 0, 0.05), 0px 10px 24px -3px rgba(0, 0, 0, 0.1)',
   none: 'none',
+  ...effectsData.elevation.light,
+  DEFAULT: effectsData.elevation.light.base,
+  ...effectsData.elevation.custom,
+  ...Object.fromEntries(
+    Object.entries(effectsData.elevation.dark).map(([key, value]) => [
+      `dark-${key}`,
+      value,
+    ]),
+  ),
 }
 
-const fontSize = {
-  '2xs': ['11px', { lineHeight: '1.15', letterSpacing: '0.01em', fontWeight: '420' }],
-  xs: ['12px', { lineHeight: '1.15', letterSpacing: '0.02em', fontWeight: '420' }],
-  sm: ['13px', { lineHeight: '1.15', letterSpacing: '0.02em', fontWeight: '420' }],
-  base: ['14px', { lineHeight: '1.15', letterSpacing: '0.02em', fontWeight: '420' }],
-  lg: ['16px', { lineHeight: '1.15', letterSpacing: '0.02em', fontWeight: '400' }],
-  xl: ['18px', { lineHeight: '1.15', letterSpacing: '0.01em', fontWeight: '400' }],
-  '2xl': ['20px', { lineHeight: '1.15', letterSpacing: '0.01em', fontWeight: '400' }],
-  '3xl': ['24px', { lineHeight: '1.15', fontWeight: 400, letterSpacing: '0.005em' }],
-  // font size for paragraphs
-  'p-2xs': ['11px', { lineHeight: '1.6', letterSpacing: '0.01em', fontWeight: '420' }],
-  'p-xs': ['12px', { lineHeight: '1.6', letterSpacing: '0.02em', fontWeight: '420' }],
-  'p-sm': ['13px', { lineHeight: '1.5', letterSpacing: '0.02em', fontWeight: '420' }],
-  'p-base': ['14px', { lineHeight: '1.5', letterSpacing: '0.02em', fontWeight: '420' }],
-  'p-lg': ['16px', { lineHeight: '1.5', letterSpacing: '0.02em', fontWeight: '400' }],
-  'p-xl': ['18px', { lineHeight: '1.42', letterSpacing: '0.01em', fontWeight: '400' }],
-  'p-2xl': ['20px', { lineHeight: '1.38', letterSpacing: '0.01em', fontWeight: '400' }],
-  'p-3xl': ['24px', { lineHeight: '1.2', fontWeight: 400, letterSpacing: '0.005em' }],
+// lineHeight, letterSpacing and fontWeight are baked into each size tuple by
+// the token sync (see figma-tokens-to-theme.js#buildTypography); mirror the
+// plugin's `buildFontSize` so this public export stays in sync.
+function buildFontSize() {
+  const out = {}
+  for (const [key, [size, meta]] of Object.entries(typographyTokens.fontSize)) {
+    out[key] = [size, { ...meta }]
+  }
+  for (const [key, p] of Object.entries(typographyTokens.paragraph || {})) {
+    if (!out[key]) continue
+    const [size, meta] = out[key]
+    out[`p-${key}`] = [
+      size,
+      { ...meta, lineHeight: p.lineHeight, letterSpacing: p.letterSpacing },
+    ]
+  }
+  return out
 }
 
+const fontSize = buildFontSize()
+
 export { borderRadius, boxShadow, fontSize }
-export * from "./colorPalette.js"
+export * from './colorPalette.js'
diff --git a/v1-release/08-selection-and-menu-api-spec.md b/v1-release/08-selection-and-menu-api-spec.md
index ce5106b7b..969e469ce 100644
--- a/v1-release/08-selection-and-menu-api-spec.md
+++ b/v1-release/08-selection-and-menu-api-spec.md
@@ -520,7 +520,7 @@ convention powered by the shared Tailwind plugin
 - auto-rendered as `<span :class="item.icon">` inside the prefix region
   when no consumer slot (`#item-prefix` or `item.slots.prefix`) claims
   that region
-- sizing (`size-4`), color (`text-ink-gray-6` by default, `text-ink-red-3`
+- sizing (`size-4`), color (`text-ink-gray-6` by default, `text-ink-red-6`
   for `theme: 'red'` in `Dropdown`) are applied by the component
 
 Benefits:
diff --git a/v1-release/09-input-components-spec.md b/v1-release/09-input-components-spec.md
index 88808085b..e3f460dda 100644
--- a/v1-release/09-input-components-spec.md
+++ b/v1-release/09-input-components-spec.md
@@ -139,7 +139,7 @@ Reuse `FormLabel`'s existing pattern as the canonical implementation:
 ```html
 <label for="...">
   Label text
-  <span aria-hidden="true" class="text-ink-red-3 select-none">*</span>
+  <span aria-hidden="true" class="text-ink-red-6 select-none">*</span>
   <span class="sr-only">(required)</span>
 </label>
 ```
@@ -153,7 +153,7 @@ indicator inside their custom label content.
 - `error: Error` renders `Error.messages` (joined with line breaks via
   `whitespace-pre-line`) when present, otherwise `Error.message`.
 - The error region is rendered as plain text. **`v-html` is not used.**
-- `error` text uses `text-ink-red-3` (matches the required asterisk for
+- `error` text uses `text-ink-red-6` (matches the required asterisk for
   visual consistency of "needs attention" affordances).
 - Setting `error` automatically suppresses the `description` region.
 
diff --git a/v1-release/11-toast-spec.md b/v1-release/11-toast-spec.md
index 7746079c1..ad675aa21 100644
--- a/v1-release/11-toast-spec.md
+++ b/v1-release/11-toast-spec.md
@@ -12,7 +12,7 @@ Toasts are short-lived, non-blocking notifications that surface in a fixed viewp
 
 `frappe-ui` v1 **vendors [`vue-sonner`](https://github.com/xiaoluoboding/vue-sonner)** and re-exports its `toast` namespace and `<Toaster>` component **with sonner's API surface unchanged**. Our only contribution is:
 
-1. **Visual defaults** — CSS overrides that match the current dark high-contrast toast (`bg-surface-gray-6` + `ink-white`).
+1. **Visual defaults** — CSS overrides that match the current dark high-contrast toast (`bg-surface-gray-9` + `ink-base`).
 2. **Configuration defaults** — `position='bottom-right'`, `duration=5000`, `closeButton=true`.
 3. **Mount integration** — `<FrappeUIProvider>` renders `<Toaster>` with those defaults.
 
@@ -95,8 +95,8 @@ We apply a thin CSS override layer targeting sonner's CSS custom properties, sco
 
 ```css
 [data-sonner-toaster] {
-  --normal-bg: theme(colors.surface-gray-6);
-  --normal-text: theme(colors.ink-white);
+  --normal-bg: theme(colors.surface-gray-9);
+  --normal-text: theme(colors.ink-base);
   --normal-border: transparent;
   --success-bg: var(--normal-bg);
   --success-text: var(--normal-text);
diff --git a/vitest.setup.ts b/vitest.setup.ts
index 57b0a1e1c..08d086006 100644
--- a/vitest.setup.ts
+++ b/vitest.setup.ts
@@ -1,6 +1,12 @@
 import { server } from './src/mocks/node'
 import { beforeAll, afterEach, afterAll } from 'vitest'
 
+// jsdom doesn't implement elementFromPoint; prosemirror-view ≥1.41 calls it
+// (posAtCoords) during cursor handling, crashing editor mounts in tests
+if (typeof document !== 'undefined' && !document.elementFromPoint) {
+  document.elementFromPoint = () => null
+}
+
 beforeAll(() => {
   server.listen()
 })
diff --git a/yarn.lock b/yarn.lock
index 47798bfc7..8d345a225 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -738,11 +738,6 @@
   resolved "https://registry.yarnpkg.com/@popperjs/core/-/core-2.11.8.tgz#6b79032e760a0899cd4204710beede972a3a185f"
   integrity sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==
 
-"@remirror/core-constants@3.0.0":
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/@remirror/core-constants/-/core-constants-3.0.0.tgz#96fdb89d25c62e7b6a5d08caf0ce5114370e3b8f"
-  integrity sha512-42aWfPrimMfDKDi4YegyS7x+/0tlzaqwPQCULLanv3DMIlu96KTJR0fM5isWX2UViOqlGnX6YFgqWepcX+XMNg==
-
 "@rolldown/pluginutils@1.0.0-beta.53":
   version "1.0.0-beta.53"
   resolved "https://registry.yarnpkg.com/@rolldown/pluginutils/-/pluginutils-1.0.0-beta.53.tgz#c57a5234ae122671aff6fe72e673a7ed90f03f87"
@@ -983,266 +978,261 @@
   dependencies:
     "@tanstack/virtual-core" "3.13.18"
 
-"@tiptap/core@^3.11.0":
-  version "3.17.1"
-  resolved "https://registry.yarnpkg.com/@tiptap/core/-/core-3.17.1.tgz#43f0bbaa21eb80b3149ccc28d276f6560bd62a03"
-  integrity sha512-f8hB9MzXqsuXoF9qXEDEH5Fb3VgwhEFMBMfk9EKN88l5adri6oM8mt2XOWVxVVssjpEW0177zXSLPKWzoS/vrw==
+"@tiptap/core@^3.26.0":
+  version "3.26.0"
+  resolved "https://registry.yarnpkg.com/@tiptap/core/-/core-3.26.0.tgz#7e1989377c851bcc89d8c7c8f893d65cdc378434"
+  integrity sha512-7jTed/RirIVsp+lLdLvGzGqF3EBGpnGHGYKOwz6t28V2BIJLAFdUhfEVdWie7xPxQNWK0TP+fPlsqZS0vxfHBg==
 
-"@tiptap/extension-blockquote@3.11.0", "@tiptap/extension-blockquote@^3.11.0":
-  version "3.11.0"
-  resolved "https://registry.yarnpkg.com/@tiptap/extension-blockquote/-/extension-blockquote-3.11.0.tgz#15adf170582ce3a1b81364d50aa6c5b830201a10"
-  integrity sha512-0H8WVW6Vn4GJ7sQ6wfyDgUU+DqM8fp62g8N0fFPiEhoYtpIYUmCqGhpKnqYR0tet6ofFa648XmA6n2VX7sugzw==
+"@tiptap/extension-blockquote@3.26.0", "@tiptap/extension-blockquote@^3.26.0":
+  version "3.26.0"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-blockquote/-/extension-blockquote-3.26.0.tgz#576b0cbe612fce9cc7020bb5ad52c8acd1db3bc5"
+  integrity sha512-57accpka9affjiJRjP2LMNCDJDTMjTvO23RJCxtP43sp9cTIZ7YZnyDfRxCINTRBNK0X4o4w2+emOLyRwsk3CA==
 
-"@tiptap/extension-bold@3.11.0", "@tiptap/extension-bold@^3.11.0":
-  version "3.11.0"
-  resolved "https://registry.yarnpkg.com/@tiptap/extension-bold/-/extension-bold-3.11.0.tgz#4d23a29717d469b59e82157adc61b0f86a53d988"
-  integrity sha512-V/c3XYO09Le9GlBGq1MK4c97Fffi0GADQTbZ+LFoi65nUrAwutn5wYnXBcEyWQI6RmFWVDJTieamqtc4j9teyw==
+"@tiptap/extension-bold@3.26.0", "@tiptap/extension-bold@^3.26.0":
+  version "3.26.0"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-bold/-/extension-bold-3.26.0.tgz#16bfc331b001aa9c1f1817ada77699bf1b16493c"
+  integrity sha512-j6CzTMofcGJ5iMoUgDRQpM0FkG00jBID3aKqs+UBbgtzLgtG/CI/91tMFv0XPC30LeFA895qYgvGZtHdejZhiQ==
 
-"@tiptap/extension-bubble-menu@^3.11.0", "@tiptap/extension-bubble-menu@^3.17.1":
-  version "3.17.1"
-  resolved "https://registry.yarnpkg.com/@tiptap/extension-bubble-menu/-/extension-bubble-menu-3.17.1.tgz#1d0b41955cc67454c3fa3b75f16e99f9473e9dc6"
-  integrity sha512-z3E8biLiWlzZJwNHnB6j/ZyBdFrJmpl1lqKHc72JqahUHZvidZHdCOYssvR3fc6IaI7MXV13XY1DXUdFbatnaw==
+"@tiptap/extension-bubble-menu@^3.26.0":
+  version "3.26.0"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-bubble-menu/-/extension-bubble-menu-3.26.0.tgz#ea115a34afd89db9e08544d9ed02c7fa81a281e3"
+  integrity sha512-H2E3Hp0lV79jQV8YGtdDJkXkUalXZeYzKCx+vCZlDpb2ChS7/rNT9YY7poRA1NlJLUO0DH1wbAnFhx9KZMUx5g==
   dependencies:
     "@floating-ui/dom" "^1.0.0"
 
-"@tiptap/extension-bullet-list@3.11.0", "@tiptap/extension-bullet-list@^3.11.0":
-  version "3.11.0"
-  resolved "https://registry.yarnpkg.com/@tiptap/extension-bullet-list/-/extension-bullet-list-3.11.0.tgz#6bcd2ed0a4d7cba5ae6deee0329ae8b18df06e09"
-  integrity sha512-IKdb1C3bHA1sGPiUcntkL+wHebRg71K5+tgaaRnMw0qmtcpcOQb5zhQOSm5bXUsgCk/WgT04dkZPnpn6Gg1PvQ==
-
-"@tiptap/extension-code-block-lowlight@^3.11.0":
-  version "3.17.1"
-  resolved "https://registry.yarnpkg.com/@tiptap/extension-code-block-lowlight/-/extension-code-block-lowlight-3.17.1.tgz#c5f3efdf2b256075cf96e3c52d04bf3f741c282a"
-  integrity sha512-qdFDob6efjYp5aWD19Ac1fTN14l3WQbrHbopGbNhruSkXVj5LccwIHS2dgStSLHVHQcoot3YMEWEnauzprN51w==
-
-"@tiptap/extension-code-block@^3.11.0":
-  version "3.17.1"
-  resolved "https://registry.yarnpkg.com/@tiptap/extension-code-block/-/extension-code-block-3.17.1.tgz#6e2d7d78dd6e73dd52e7dd997e91dee1bd7783a3"
-  integrity sha512-h4i+Y/cN7nMi0Tmlp6V1w4dI7NTqrUFSr1W/vMqnq4vn+c6jvm35KubKU5ry/1qQp8KfndDA02BtVQiMx6DmpA==
-
-"@tiptap/extension-code@^3.11.0":
-  version "3.17.1"
-  resolved "https://registry.yarnpkg.com/@tiptap/extension-code/-/extension-code-3.17.1.tgz#88098d0b7b40dfaf0b5803cc230eed06ae7c880a"
-  integrity sha512-4W0x1ZZqSnIVzQV0/b5VR0bktef2HykH5I/Czzir9yqoZ5zV2cLrMVuLvdFNgRIckU60tQLmHrfKWLF50OY0ew==
-
-"@tiptap/extension-color@^3.11.0":
-  version "3.17.1"
-  resolved "https://registry.yarnpkg.com/@tiptap/extension-color/-/extension-color-3.17.1.tgz#476337efc9aeb2141b3c7a56aa6702bc5d60e311"
-  integrity sha512-QVlzpzGB+QcZgHgvFMRPckZutpkOLzNmZzhupNA7G2CMeeoCwZOJeZkyd3zvtAnRZkf7FrQBO123On30pJt7TA==
-
-"@tiptap/extension-document@3.11.0", "@tiptap/extension-document@^3.11.0":
-  version "3.11.0"
-  resolved "https://registry.yarnpkg.com/@tiptap/extension-document/-/extension-document-3.11.0.tgz#fa4ed625730dcfbb5ea35a630f9163d6843adfed"
-  integrity sha512-N2G3cwL2Dtur/CgD/byJmFx9T5no6fTO/U462VP3rthQYrRA1AB3TCYqtlwJkmyoxRTNd4qIg4imaPl8ej6Heg==
-
-"@tiptap/extension-dropcursor@3.11.0", "@tiptap/extension-dropcursor@^3.11.0":
-  version "3.11.0"
-  resolved "https://registry.yarnpkg.com/@tiptap/extension-dropcursor/-/extension-dropcursor-3.11.0.tgz#869236f9644f80f316bd643281e1cb2623f80747"
-  integrity sha512-gW/QMGAyiXGSpO+X/lTeiBQn1Or8T8UVB3y9Cv2Lh6zx0SWU+FA28EH+y6s3fm872reN4dH/9rEvMuJjhU/BEw==
-
-"@tiptap/extension-floating-menu@^3.17.1":
-  version "3.17.1"
-  resolved "https://registry.yarnpkg.com/@tiptap/extension-floating-menu/-/extension-floating-menu-3.17.1.tgz#b8f2efd7c80cb9fa44a68cdcd5dc72490ca9a718"
-  integrity sha512-zYkoYsxp+cZ8tBDODm4E8hnSaMTdDWKJuCQWY2Ep14oMPkAkSJr8sCLL1tOnNSAnhGwLJQtRLkZ41nvUEP6xKA==
-
-"@tiptap/extension-gapcursor@3.11.0", "@tiptap/extension-gapcursor@^3.11.0":
-  version "3.11.0"
-  resolved "https://registry.yarnpkg.com/@tiptap/extension-gapcursor/-/extension-gapcursor-3.11.0.tgz#b4c9026bde893d19ecc02bc23273dc2a64272589"
-  integrity sha512-lXGEZiYX7k/pEFr8BgDE91vqjLTwuf+qhHLTgIpfhbt562nShLPIDj9Vzu3xrR4fwUAMiUNiLyaeInb8j3I4kg==
-
-"@tiptap/extension-hard-break@3.11.0", "@tiptap/extension-hard-break@^3.11.0":
-  version "3.11.0"
-  resolved "https://registry.yarnpkg.com/@tiptap/extension-hard-break/-/extension-hard-break-3.11.0.tgz#a0d7c5564c4fed1c4446c53f924ff2e468e157cb"
-  integrity sha512-NJEHTj++kFOayQXKSQSi9j9eAG33eSiJqai2pf4U+snW94fmb8cYLUurDmfYRe20O6EzBSX0X3GjVlkOz+5b7A==
-
-"@tiptap/extension-heading@^3.11.0":
-  version "3.17.1"
-  resolved "https://registry.yarnpkg.com/@tiptap/extension-heading/-/extension-heading-3.17.1.tgz#30a92807867dd59c5dd439a2d6c332fda48b7532"
-  integrity sha512-rT+Su/YnHdlikg8f78t6RXlc1sVSfp7B0fdJdtFgS2e6BBYJQoDMp5L9nt54RR9Yy953aDW2sko7NArUCb8log==
-
-"@tiptap/extension-highlight@^3.11.0":
-  version "3.17.1"
-  resolved "https://registry.yarnpkg.com/@tiptap/extension-highlight/-/extension-highlight-3.17.1.tgz#41c81280197332e4bcffa68d40a0d79d1b9528de"
-  integrity sha512-I4EdBhPVzJd4ECMI9kP0NE4aG4Numd46jy/AqeZyf3dqVgCxRyAbSyU7oy4aXUnsojYODrKKG6+djm07KgOGoQ==
-
-"@tiptap/extension-horizontal-rule@3.11.0", "@tiptap/extension-horizontal-rule@^3.11.0":
-  version "3.11.0"
-  resolved "https://registry.yarnpkg.com/@tiptap/extension-horizontal-rule/-/extension-horizontal-rule-3.11.0.tgz#66011ca8084a28815f2781768e677b94d4611031"
-  integrity sha512-FugFHZG+oiMBV6k42hn9NOA4wRNc2b9UeEIMR+XwEMpWJInV4VwSwDvu8JClgkDo8z7FEnker9e51DZ00CLWqg==
-
-"@tiptap/extension-image@^3.11.0":
-  version "3.17.1"
-  resolved "https://registry.yarnpkg.com/@tiptap/extension-image/-/extension-image-3.17.1.tgz#df137f8f4dcc2dc7d8f93023a16be7e70270f703"
-  integrity sha512-VbSSZ//5qijm8F0lQQ6K+DGnZgjLKYQY2c+O56QNEoN8BaCFrJlsVgF1ttrSRUmoG4XBNIMlAS07kZXvMZQr0g==
-
-"@tiptap/extension-italic@3.11.0", "@tiptap/extension-italic@^3.11.0":
-  version "3.11.0"
-  resolved "https://registry.yarnpkg.com/@tiptap/extension-italic/-/extension-italic-3.11.0.tgz#7c2e59c2d3a0b73dcc788eb099e727d131947ee0"
-  integrity sha512-WP6wL2b//8bLVdeUCWOpYA7nUStvrAMMD0nRn0F9CEW+l7vH6El2PZFhHmJ9uqXo5MnyugBpARiwgxfoAlef5w==
-
-"@tiptap/extension-link@^3.11.0":
-  version "3.17.1"
-  resolved "https://registry.yarnpkg.com/@tiptap/extension-link/-/extension-link-3.17.1.tgz#95faa0339d6b8484cff923477f5a8930b16d7a67"
-  integrity sha512-5kdN7vms5hMXtjiophUkgvzy8dNGvGSmol1Sawh30TEPrgXc93Ayj7YyGZlbimInKZcD8q+Od/FFc+wkrof3nA==
-  dependencies:
-    linkifyjs "^4.3.2"
-
-"@tiptap/extension-list-item@3.11.0", "@tiptap/extension-list-item@^3.11.0":
-  version "3.11.0"
-  resolved "https://registry.yarnpkg.com/@tiptap/extension-list-item/-/extension-list-item-3.11.0.tgz#407231043618d6447a7113674ce9493b412890f9"
-  integrity sha512-KXTTSBH/T/WW8O1YhK/lVmwlSGh2w2VVucUkMLhgk1VPchahAkn2LfgbgKrCRG/F8M8Jlfvz67iJDo6+bbNqew==
-
-"@tiptap/extension-list-keymap@3.11.0", "@tiptap/extension-list-keymap@^3.11.0":
-  version "3.11.0"
-  resolved "https://registry.yarnpkg.com/@tiptap/extension-list-keymap/-/extension-list-keymap-3.11.0.tgz#fab78623c4c05c368b903dfdfd4859079c19783a"
-  integrity sha512-vm1zGdEqcbQnrGlVXchk1ibmTsyxyfGcGPVWsc4MG+UAFcNfcpAnvCar71BF4RGGPtpzOWdqGkvJENyh0L5/Hw==
-
-"@tiptap/extension-list@^3.11.0":
-  version "3.17.1"
-  resolved "https://registry.yarnpkg.com/@tiptap/extension-list/-/extension-list-3.17.1.tgz#c7a013e9c4fa515a60048595147fe0c79308d5a2"
-  integrity sha512-LHKIxmXe5Me+vJZKhiwMBGHlApaBIAduNMRUpm5mkY7ER/m96zKR0VqrJd4LjVVH2iDvck5h1Ka4396MHWlKNg==
-
-"@tiptap/extension-mention@^3.11.0":
-  version "3.17.1"
-  resolved "https://registry.yarnpkg.com/@tiptap/extension-mention/-/extension-mention-3.17.1.tgz#e68c3d2a810b8f90fb1fd0fadf94da9ba49b2344"
-  integrity sha512-rggEOD7cnuglVtc7zvVYx/2u7w7XpkdR6BTSXNWohsCJDwpKx5MBfuQMXULlRKY9/N49FgwHzP8ipkSvgOtiEw==
-
-"@tiptap/extension-node-range@^3.11.0":
-  version "3.17.1"
-  resolved "https://registry.yarnpkg.com/@tiptap/extension-node-range/-/extension-node-range-3.17.1.tgz#0d79b531f3baf8dd75aa8459fd3bee6abdc705f7"
-  integrity sha512-tGt/Yr7aALKsrerAldQG5iBUFmml2i25nrjLIU+SR1Bzm+OWxTSXxOWunkowdquh2f/Lft5GnnSIs3e3Jr20Bg==
-
-"@tiptap/extension-ordered-list@3.11.0", "@tiptap/extension-ordered-list@^3.11.0":
-  version "3.11.0"
-  resolved "https://registry.yarnpkg.com/@tiptap/extension-ordered-list/-/extension-ordered-list-3.11.0.tgz#41270944de1becd370d48b13854effaa69a0eeea"
-  integrity sha512-kO8GH4w4Xil+qPiHJLAyILdGHF9hCjkhoVtPD8YEfqK6Qx3bZql5FPySCQNs+MU6rLSCCdam8SUPGY/+SCufqA==
-
-"@tiptap/extension-paragraph@3.11.0", "@tiptap/extension-paragraph@^3.11.0":
-  version "3.11.0"
-  resolved "https://registry.yarnpkg.com/@tiptap/extension-paragraph/-/extension-paragraph-3.11.0.tgz#60ecdcb24330b39f72b58760bcaf299b20de43da"
-  integrity sha512-hxgjZOXOqstRTWv+QjWJjK23rD5qzIV9ePlhX3imLeq/MgX0aU9VBDaG5SGKbSjaBNQnpLw6+sABJi3CDP6Z5A==
-
-"@tiptap/extension-placeholder@^3.11.0":
-  version "3.17.1"
-  resolved "https://registry.yarnpkg.com/@tiptap/extension-placeholder/-/extension-placeholder-3.17.1.tgz#2d24f1f1b2f6f282d3342895d24fc4c93c3f2484"
-  integrity sha512-cE8Rij5/1t4KnWE7GaDewhBek9DKNB+97yrxyggMegILg6v195hOmOkRZkyfnFMYZoBDlrfSAtX9wBvbZBqIsg==
-
-"@tiptap/extension-strike@3.11.0", "@tiptap/extension-strike@^3.11.0":
-  version "3.11.0"
-  resolved "https://registry.yarnpkg.com/@tiptap/extension-strike/-/extension-strike-3.11.0.tgz#68f746cbdcdd57a01a31f612d8d04a919d91b6cd"
-  integrity sha512-XVP/WMYLrqLBfUsGPu2H9MrOUZLhGUaxtZ3hSRffDi/lsw53x/coZ9eO0FxOB9R7z2ksHWmticIs+0YnKt9LNQ==
-
-"@tiptap/extension-table@^3.11.0":
-  version "3.17.1"
-  resolved "https://registry.yarnpkg.com/@tiptap/extension-table/-/extension-table-3.17.1.tgz#181176c61bd97f6970da462ce687931d97b6890b"
-  integrity sha512-FuAMdmM330tHJUYT5IV2ooFRqtXf+0D8llcE9nIQQCXKL4J0pfGSOIm40LVpunYgx2pV8SSCL51qTBuEmR84tQ==
-
-"@tiptap/extension-task-item@^3.11.0":
-  version "3.17.1"
-  resolved "https://registry.yarnpkg.com/@tiptap/extension-task-item/-/extension-task-item-3.17.1.tgz#bf7d072184866dda5d794dce83432c729c7085f4"
-  integrity sha512-aKCOGNatRLo2m5Qlb2mRxhN7BUE9yNY+yXtLIi+mDH7IUnygffyuz9iCy+rNGihvZdQQKm9vU51dAjVMu5ww+g==
-
-"@tiptap/extension-task-list@^3.11.0":
-  version "3.17.1"
-  resolved "https://registry.yarnpkg.com/@tiptap/extension-task-list/-/extension-task-list-3.17.1.tgz#0ca4a3eda8c705c5ad2a72b0122049dfe1c1168a"
-  integrity sha512-EiJjlfNioQub9G6SZ83b/1+5VhVtlHStQN7+BTIsA9EhRAeKwge0KtO1oMIzFkDryd9mki9GQx/D+eek2CNsYw==
-
-"@tiptap/extension-text-align@^3.11.0":
-  version "3.17.1"
-  resolved "https://registry.yarnpkg.com/@tiptap/extension-text-align/-/extension-text-align-3.17.1.tgz#a3caa6dac46ff8fe2051950b033b1bdd05df4033"
-  integrity sha512-CyJbZf823dqPZ/1zwRsza5pk/NQwFZwILdFYLVkV88I4+Ua9YVztI9kmwTB6dJyuKT4kTc7nhQHdaa957alGZQ==
-
-"@tiptap/extension-text-style@^3.11.0":
-  version "3.17.1"
-  resolved "https://registry.yarnpkg.com/@tiptap/extension-text-style/-/extension-text-style-3.17.1.tgz#8ab6cee4d9942d2a67cc9699bc277abf782422b3"
-  integrity sha512-TCMsEU92r/TfZkN8AKo/WIcJ1uNq/5NiZxloq5drF1HXxDDjwliurgwBw3OTGUlKQmer0N9hV0AAePY/G+5Akw==
-
-"@tiptap/extension-text@3.11.0", "@tiptap/extension-text@^3.11.0":
-  version "3.11.0"
-  resolved "https://registry.yarnpkg.com/@tiptap/extension-text/-/extension-text-3.11.0.tgz#cf55c8c0fa3a18fbc93ec53be7c31fe60ed4e9bd"
-  integrity sha512-ELAYm2BuChzZOqDG9B0k3W6zqM4pwNvXkam28KgHGiT2y7Ni68Rb+NXp16uVR+5zR6hkqnQ/BmJSKzAW59MXpA==
-
-"@tiptap/extension-typography@^3.11.0":
-  version "3.17.1"
-  resolved "https://registry.yarnpkg.com/@tiptap/extension-typography/-/extension-typography-3.17.1.tgz#472a28ae1b3f3cce32277cdd1dd2a80706017a88"
-  integrity sha512-bEocTrK/gryk3VtthC9Ca03p2kutVIIFnDkVW6iOG8PgQWEspuQRgqE8yPnHxY8pBBDWxiaBzcGTSrp+3U9d5A==
-
-"@tiptap/extension-underline@3.11.0", "@tiptap/extension-underline@^3.11.0":
-  version "3.11.0"
-  resolved "https://registry.yarnpkg.com/@tiptap/extension-underline/-/extension-underline-3.11.0.tgz#b5c113351fd9a35fb73fc4555ff687e3e31b0b8d"
-  integrity sha512-D3PsS/84RlQKFjd5eerMIUioC0mNh4yy1RRV/WbXx6ugu+6T+0hT42gNk9Ap8pDsVQZCk0SHfDyBEUFC2KOwKw==
-
-"@tiptap/extensions@^3.11.0":
-  version "3.17.1"
-  resolved "https://registry.yarnpkg.com/@tiptap/extensions/-/extensions-3.17.1.tgz#5329a8b6aba9fc96598b765801e6e28a006d3f35"
-  integrity sha512-aQ4WA5bdRpv9yPQ6rRdiqwlMZ1eJw1HyEaNPQhOr2HVhQ0EqSDIOEXF4ymCveGAHxXbxNvtQ+4t1ymQEikGfXA==
-
-"@tiptap/pm@^3.11.0":
-  version "3.17.1"
-  resolved "https://registry.yarnpkg.com/@tiptap/pm/-/pm-3.17.1.tgz#ed85e67d97d7d955b138b076a8fe8f805c367a9b"
-  integrity sha512-UyVLkN8axV/zop6Se2DCBJRu5DM21X0XEQvwEC5P/vk8eC9OcQZ3FLtxeYy2ZjpAZUzBGLw0/BGsmEip/n7olw==
+"@tiptap/extension-bullet-list@3.26.0", "@tiptap/extension-bullet-list@^3.26.0":
+  version "3.26.0"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-bullet-list/-/extension-bullet-list-3.26.0.tgz#a242dc9add3cc8190334a48cad4e714fc9e07276"
+  integrity sha512-Jv7BX+kBB2wUIvO/NhuUjv+T3kAed2Tjr664fgQ2zKT6X69jKIkYuCCedrIHuOyaOQ+SBDuH9h51wYv/E97QgQ==
+
+"@tiptap/extension-code-block-lowlight@^3.26.0":
+  version "3.26.0"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-code-block-lowlight/-/extension-code-block-lowlight-3.26.0.tgz#920fa201f6d2d9877981216f1c43b3bf9d7d2cc0"
+  integrity sha512-OW1uCDPz9gqto/cfb/2KHpLLlHeQcmf/j4I6CBoi1gOc9RlTQ1remt19ag2vupCnNt0t2NSviI4UKoyX6qo0nQ==
+
+"@tiptap/extension-code-block@^3.26.0":
+  version "3.26.0"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-code-block/-/extension-code-block-3.26.0.tgz#ff8948005c60730fb2c19097e93934752857d506"
+  integrity sha512-WPN9iZ3UjeDD2ckDzSs9tleibXv0cLj7j575NxuvjhwZTehYGNeYDSUTi+6DQUG6bKbhGg9Wcei5H0131vvJHg==
+
+"@tiptap/extension-code@^3.26.0":
+  version "3.26.0"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-code/-/extension-code-3.26.0.tgz#92755a7b24e7a7b5f7bd4efaf64f682eadaf3221"
+  integrity sha512-VJYcV6rvjnENRTroOi9tDcHWW6G0pmCoRETwatlbgfDzuCmkTOwVwQjeJCXOVMMLNPzNiXZzibsRCUt+Azq/jw==
+
+"@tiptap/extension-color@^3.26.0":
+  version "3.26.0"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-color/-/extension-color-3.26.0.tgz#9aa42dc7846770b130a790ee0e1d584e5ca77ba6"
+  integrity sha512-rMVQh2LxOML21tf7fe2EI7NbzDf6hBvu2YJ6SSFrMhO0ofodSNlzDDJ9Ry+ybq37DC1ryGNLvQgqbSXI1EYOVA==
+
+"@tiptap/extension-document@3.26.0", "@tiptap/extension-document@^3.26.0":
+  version "3.26.0"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-document/-/extension-document-3.26.0.tgz#16d078e354b9edf6bbbf8a65ebfacfe01cc0ceb9"
+  integrity sha512-Xhd6DCjaxCN4otQNvV6qra+XuoIjk6Vyjm87E5xn5Y/BMw7UGAG7LTkk3C2IEvxKrVZwJjalfxEqdHOgXQzVfw==
+
+"@tiptap/extension-dropcursor@3.26.0", "@tiptap/extension-dropcursor@^3.26.0":
+  version "3.26.0"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-dropcursor/-/extension-dropcursor-3.26.0.tgz#22f5626c7b25c539560f16878cfa189f79453edd"
+  integrity sha512-rhAtp5J/YVDUCUIc5T7b0XY9dLeuI72JgOr53w0QQc0VA0uwbfTn7sx0LI9PDCE9uwmDH8H3snVRZRnAvlM8oA==
+
+"@tiptap/extension-floating-menu@^3.26.0":
+  version "3.26.0"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-floating-menu/-/extension-floating-menu-3.26.0.tgz#0adccd23d8c7acdca44a496f07bbafd52558d3c3"
+  integrity sha512-reQ77NRYAOP7iPudsNbzLBuBTdL2aGxZzjccUFmE2lNdmwP23n9A/JhkuUhshVBs/6IozvahI+smG3Bnea0TCQ==
+
+"@tiptap/extension-gapcursor@3.26.0", "@tiptap/extension-gapcursor@^3.26.0":
+  version "3.26.0"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-gapcursor/-/extension-gapcursor-3.26.0.tgz#2e93913894c7d47e1b422f4daf05ea435dc2c90c"
+  integrity sha512-SIe68SDwx2fozt/XKG0FhCwzz/yRN6Bvo4D5TqvfDg6NK3PQb1DS4GN9PilmJqbY+kXryuiWEEJOWi7HpO8SuQ==
+
+"@tiptap/extension-hard-break@3.26.0", "@tiptap/extension-hard-break@^3.26.0":
+  version "3.26.0"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-hard-break/-/extension-hard-break-3.26.0.tgz#5c6a9df49616e19b7b3546e2e093266bca8bb90b"
+  integrity sha512-baXvv/rtOTVd2Axjb7Zbb41Y9Qmy3U2fP7EHqLuhViqGxVX8LwQtP0PHUXEZkPokbBpRez10+dmOlvvsYFKAZQ==
+
+"@tiptap/extension-heading@^3.26.0":
+  version "3.26.0"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-heading/-/extension-heading-3.26.0.tgz#0709801423fd6b4cc20910a0fa5d30b4b90d4ecd"
+  integrity sha512-qenEQEgzE5FjQay/H6iKOnwIt6DPO27cS+v0mGhXmrL1MjrNER4X0ZkATJbVd0WA6ffsAGaP44NKYDworGeidw==
+
+"@tiptap/extension-highlight@^3.26.0":
+  version "3.26.0"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-highlight/-/extension-highlight-3.26.0.tgz#7b62458a8c0b356ddfc2459093afb2ea5bbeebf7"
+  integrity sha512-/b6pImBTdgOc8UVMJiJNQ/QAtZ0Z4+2XyxmzoNIiOPGjQDy/IxLtci8+M2BYWRIRbgjCS9XllsfnKWVyO8pe+w==
+
+"@tiptap/extension-horizontal-rule@3.26.0", "@tiptap/extension-horizontal-rule@^3.26.0":
+  version "3.26.0"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-horizontal-rule/-/extension-horizontal-rule-3.26.0.tgz#a9ad53a449a7f2eafd143e67bf47901256c88e02"
+  integrity sha512-a+N/C4wkQV+/8x4ShdoiC2JdTW3Tw84C5cAloYLFMeaWmRa2me9ACSI+zo0SO9bbH9RJwsoRp7eaxBbk27eF1Q==
+
+"@tiptap/extension-image@^3.26.0":
+  version "3.26.0"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-image/-/extension-image-3.26.0.tgz#19effec1b42a05811c6f7519ba010c3f69039c7b"
+  integrity sha512-vinrbKa9Awmlb/UPpnes1pezL+ZeUC2v7XczZyNbggvcHKhlVkuXZIKytFQDXEYOTaKYzYE8B/Gz098PiJ9NYQ==
+
+"@tiptap/extension-italic@3.26.0", "@tiptap/extension-italic@^3.26.0":
+  version "3.26.0"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-italic/-/extension-italic-3.26.0.tgz#c93104d9758cb0e3dee8d0ca8d95b4fb18840eec"
+  integrity sha512-s8oFpH+0xmhvY19f452/2dExO3p1tjxh761g6cg4irwEUNUEAJKF2VLcjiaeOhNJ+pmnQYxb+VSkwkXvO+7vHQ==
+
+"@tiptap/extension-link@^3.26.0":
+  version "3.26.0"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-link/-/extension-link-3.26.0.tgz#84d351d6d407ace08a96b6dcaed00557a547c0db"
+  integrity sha512-FA/d157aBxyvZFvsdc5eSu46tmHWXebAsqOQSvivOMyw+deBb00VlMsf+iD2J8+sekjbMYwx/hvbsu+xUoX43Q==
+  dependencies:
+    linkifyjs "^4.3.3"
+
+"@tiptap/extension-list-item@3.26.0", "@tiptap/extension-list-item@^3.26.0":
+  version "3.26.0"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-list-item/-/extension-list-item-3.26.0.tgz#8649338cfb8fe99f0327e4a73e8d8043e8779614"
+  integrity sha512-MccGyj9HY4fkl04eIiFoTCkr8067Jku/VVdJNtRWW104Spx43C/7V2zpbxPvpcDhq3dW384fDxYXfpnb186xLg==
+
+"@tiptap/extension-list-keymap@3.26.0", "@tiptap/extension-list-keymap@^3.26.0":
+  version "3.26.0"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-list-keymap/-/extension-list-keymap-3.26.0.tgz#7dbf8ada102121d501d68093217e5568985fcfe9"
+  integrity sha512-oBcj6qaNrRHQ+N0+pDuOVAQa4Nx9r8Cm5ANvyM2lTpoy60sOLOizuVvcvw1andVxbSrsZ1N/Sk+RZWyv1uoWyQ==
+
+"@tiptap/extension-list@^3.26.0":
+  version "3.26.0"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-list/-/extension-list-3.26.0.tgz#ca3865985ae39091acfb1a8d3a1ee03e5c3c42f6"
+  integrity sha512-EM8woyHDNKLEQ+lWUEoDtA4KrwP6fei/mYX1NxseMzKHHo7LFecx7wk6sovAXZrUvdML/yFBihgiMiO5VIsfkg==
+
+"@tiptap/extension-mention@^3.26.0":
+  version "3.26.0"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-mention/-/extension-mention-3.26.0.tgz#79d5a350ce467702e2529fa4a28a8072156344ec"
+  integrity sha512-YBUt978hsvHOsDtDVPpCjaBItjHxdH/m4x9kmFxdG8JrK0j6yURegM6Hwn/JHikGTXL0ad58QS5IC2a7Tngk8g==
+
+"@tiptap/extension-node-range@^3.26.0":
+  version "3.26.0"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-node-range/-/extension-node-range-3.26.0.tgz#cca4f8a12d0a3e927dd8033014a5d9c9e63ac5db"
+  integrity sha512-LYPStSzfVicp3AGqIl5nsUbd86bqZCz0F1+N03cJIZ2hAj3kXU8ouLLGhE+EIq66Y8vh/SdN/imyIEoqtuA1QQ==
+
+"@tiptap/extension-ordered-list@3.26.0", "@tiptap/extension-ordered-list@^3.26.0":
+  version "3.26.0"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-ordered-list/-/extension-ordered-list-3.26.0.tgz#de14e76a1fe50c3a8b6b7746da0251f8e78dda34"
+  integrity sha512-ItLdFlcMsJz2vhbs1PcUfcN7nzVqGBOwPeCrrWxjrgscp+K3JoOGD+HhVVpBACOMwivUrlh8Ry5Ohvues2nOeA==
+
+"@tiptap/extension-paragraph@3.26.0", "@tiptap/extension-paragraph@^3.26.0":
+  version "3.26.0"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-paragraph/-/extension-paragraph-3.26.0.tgz#5bb773fcc1d044a73a808dbc1675ae1d12c90b80"
+  integrity sha512-h8fYLikg4qN39IghQ1y9g+zzUsgxBpDi5YS3IZbWoxWYYx1YqLL8nAvOiPr7Us14aQ0TjA2/xY7zqmyf29rX1A==
+
+"@tiptap/extension-placeholder@^3.26.0":
+  version "3.26.0"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-placeholder/-/extension-placeholder-3.26.0.tgz#ef7b95d3d498300c2007cf15976a1f6e2a5ce0ec"
+  integrity sha512-q9RsGWmL0xEwrMK5Wx53eMdZlkA3J1cqloIc69rEugjOCjoExEkfF4e2nC9YK49qGxJZBKKksw1Ij7oCWEyu+g==
+
+"@tiptap/extension-strike@3.26.0", "@tiptap/extension-strike@^3.26.0":
+  version "3.26.0"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-strike/-/extension-strike-3.26.0.tgz#b2b72f05b261a6197c9acb4e8e3aa1666f9190e5"
+  integrity sha512-jUll3Pqhq7u1JKvO0B6USW/bmVmUsO6sRcxo/d5tXqLhS0tWAobOGoGU2IgwXnQDSjf+vF73RYD5tRGDLkRC9Q==
+
+"@tiptap/extension-table@^3.26.0":
+  version "3.26.0"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-table/-/extension-table-3.26.0.tgz#55a4276c400823bcab1c92cc971e7e6d5b1e02df"
+  integrity sha512-pLL1+tKeUWSF/w4se84tjWUnuraKVELQtIHwi1XKoq6vkevotwwMb99xY6cJ752FaUFVDbViFe/JUYWBoU+bIw==
+
+"@tiptap/extension-task-item@^3.26.0":
+  version "3.26.0"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-task-item/-/extension-task-item-3.26.0.tgz#3ca5dbe67df93906a4e8437795b0674a25425ad0"
+  integrity sha512-/S5+u/1hNd/fAkrsojqRV7D7hsL3uK9hY/icWGKYDlKN5uBsCehU8/a/YOR1xl3xCeLcLFs16nSlpgJF9UHP0A==
+
+"@tiptap/extension-task-list@^3.26.0":
+  version "3.26.0"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-task-list/-/extension-task-list-3.26.0.tgz#4e0a4f130fade23586509d95fd5e33542c5d2af1"
+  integrity sha512-Zi94LADPSmYk0SGqLpR9zc9u/hyn0+EXY5IvYS/3q+p5usBXHG3noz/t6TbiIm5fkZZ+G0L15HsRR+YuoCbArw==
+
+"@tiptap/extension-text-align@^3.26.0":
+  version "3.26.0"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-text-align/-/extension-text-align-3.26.0.tgz#f82db858ee500ee5cd5cf319a498c18fc0c889b8"
+  integrity sha512-yEtgrEJyE7sfcIAzk9cmJUQUMQZ/J0RU3k7mE+hy5o7t8j78Zs+KcsH+hrczn0MNzblg4gfX2erN+1/SGfSlpA==
+
+"@tiptap/extension-text-style@^3.26.0":
+  version "3.26.0"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-text-style/-/extension-text-style-3.26.0.tgz#e314f900564f93c1edfc670801587c41afdfc328"
+  integrity sha512-4IeIdiubF5/Em9AodaLkCKUNwkQaK3KuwnneXS61x4Yoyr0zK21i3kZAFK7ils7jUwSrRdGdM1FglBnB4tK8nA==
+
+"@tiptap/extension-text@3.26.0", "@tiptap/extension-text@^3.26.0":
+  version "3.26.0"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-text/-/extension-text-3.26.0.tgz#709b306a9975e57e50fd6044cb78e89f456cf1b3"
+  integrity sha512-yZXdevp3/8omGbb40Z52VfvID+tsRNhPQ1GNUToD56XSr2BjdJyAzAb9rWGgDKgVMUPLgJ26yT0O278RFqOKhA==
+
+"@tiptap/extension-typography@^3.26.0":
+  version "3.26.0"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-typography/-/extension-typography-3.26.0.tgz#8d6b671419754ed9bc2c09286cae20eba4560fce"
+  integrity sha512-dNOPmVPCcC57SpTDIxSlrSSNZt4zVG0eNCQHCLyTGh3/1y9TCjdJFSEy9uffQdgfv05tjIwRakGmctENlX3SxQ==
+
+"@tiptap/extension-underline@3.26.0", "@tiptap/extension-underline@^3.26.0":
+  version "3.26.0"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-underline/-/extension-underline-3.26.0.tgz#75c821413ae8f16ea3eaf8d47d56341b06b9a2df"
+  integrity sha512-LlVkivH5cBwov/EMD8BL7ZRcU6YcadiSVIffLW1hyalw9YfhaFzoLxjtWhL7jiU/n2Kg+9dXSZxmV2hTeTwyrQ==
+
+"@tiptap/extensions@^3.26.0":
+  version "3.26.0"
+  resolved "https://registry.yarnpkg.com/@tiptap/extensions/-/extensions-3.26.0.tgz#0b3445bfdc37e8c307b3c0d23c117e9bf89ace27"
+  integrity sha512-4wajuqnO2X0+LVvsBjW/xk3/tmdb16bNL939QhicAay4YYqXITeV2v3XJsryzmG4L5GkK1yLxvRGk4aLoxWrnA==
+
+"@tiptap/pm@^3.26.0":
+  version "3.26.0"
+  resolved "https://registry.yarnpkg.com/@tiptap/pm/-/pm-3.26.0.tgz#87e31e43df9aaca5db81ba8106e0fec744938c31"
+  integrity sha512-q4RDeWwVrhOL0jJCGRgGxLSdjOYwzQ4h2InURZVhC66433ipcHd6f3bqSOhcXZ4r0sFmMNsuF7aZmUntjWLc7w==
   dependencies:
     prosemirror-changeset "^2.3.0"
-    prosemirror-collab "^1.3.1"
     prosemirror-commands "^1.6.2"
     prosemirror-dropcursor "^1.8.1"
     prosemirror-gapcursor "^1.3.2"
     prosemirror-history "^1.4.1"
     prosemirror-inputrules "^1.4.0"
-    prosemirror-keymap "^1.2.2"
-    prosemirror-markdown "^1.13.1"
-    prosemirror-menu "^1.2.4"
-    prosemirror-model "^1.24.1"
-    prosemirror-schema-basic "^1.2.3"
+    prosemirror-keymap "^1.2.3"
+    prosemirror-model "^1.25.7"
     prosemirror-schema-list "^1.5.0"
-    prosemirror-state "^1.4.3"
-    prosemirror-tables "^1.6.4"
-    prosemirror-trailing-node "^3.0.0"
-    prosemirror-transform "^1.10.2"
-    prosemirror-view "^1.38.1"
-
-"@tiptap/starter-kit@3.11.0":
-  version "3.11.0"
-  resolved "https://registry.yarnpkg.com/@tiptap/starter-kit/-/starter-kit-3.11.0.tgz#dc21fe81747825d847bfe1e7da4e89039d0517b8"
-  integrity sha512-8kMMYqVSZ2Oqji+mY1o9meTjCRWp4DplFegu7APqDEQRhlb6mBI0wNuazYb7FKJIHJTtf0F6cYglJrxpu9c/fA==
-  dependencies:
-    "@tiptap/core" "^3.11.0"
-    "@tiptap/extension-blockquote" "^3.11.0"
-    "@tiptap/extension-bold" "^3.11.0"
-    "@tiptap/extension-bullet-list" "^3.11.0"
-    "@tiptap/extension-code" "^3.11.0"
-    "@tiptap/extension-code-block" "^3.11.0"
-    "@tiptap/extension-document" "^3.11.0"
-    "@tiptap/extension-dropcursor" "^3.11.0"
-    "@tiptap/extension-gapcursor" "^3.11.0"
-    "@tiptap/extension-hard-break" "^3.11.0"
-    "@tiptap/extension-heading" "^3.11.0"
-    "@tiptap/extension-horizontal-rule" "^3.11.0"
-    "@tiptap/extension-italic" "^3.11.0"
-    "@tiptap/extension-link" "^3.11.0"
-    "@tiptap/extension-list" "^3.11.0"
-    "@tiptap/extension-list-item" "^3.11.0"
-    "@tiptap/extension-list-keymap" "^3.11.0"
-    "@tiptap/extension-ordered-list" "^3.11.0"
-    "@tiptap/extension-paragraph" "^3.11.0"
-    "@tiptap/extension-strike" "^3.11.0"
-    "@tiptap/extension-text" "^3.11.0"
-    "@tiptap/extension-underline" "^3.11.0"
-    "@tiptap/extensions" "^3.11.0"
-    "@tiptap/pm" "^3.11.0"
-
-"@tiptap/suggestion@^3.11.0":
-  version "3.17.1"
-  resolved "https://registry.yarnpkg.com/@tiptap/suggestion/-/suggestion-3.17.1.tgz#6e1c5c82d0de26df42ff60cfc18be99ffcbf6978"
-  integrity sha512-a188uVYjlLsUiwK3Ki7KsaWVWC0u28KsqGEAqCk9ECYmtVY99Hrb+rcAwGpMjA7tn8WAwThOxiLISoMdpuqXwg==
-
-"@tiptap/vue-3@^3.11.0":
-  version "3.17.1"
-  resolved "https://registry.yarnpkg.com/@tiptap/vue-3/-/vue-3-3.17.1.tgz#a84940fc29a28ac061882a9c4acc4265784caa19"
-  integrity sha512-0NaAY3+S1KZuSY9Sl6e0zvgcX8JvKKwDamY+YOl/ZO4GRaA1VnVkS/OJtofuTAODJmoXWL8wS9NwOgAzKeAvkw==
+    prosemirror-state "^1.4.4"
+    prosemirror-tables "^1.8.0"
+    prosemirror-transform "^1.12.0"
+    prosemirror-view "^1.41.8"
+
+"@tiptap/starter-kit@^3.26.0":
+  version "3.26.0"
+  resolved "https://registry.yarnpkg.com/@tiptap/starter-kit/-/starter-kit-3.26.0.tgz#d82da4a48f42b75b3d47393337b28b079a98cffb"
+  integrity sha512-o34EtMfqtBaljdmeElZsRG/067oGx9Zcq+j2GWo71KlZe22ga/ALexeTf1c+ETsjCxSTKR6eyQ4RZvz/2JpYfg==
+  dependencies:
+    "@tiptap/core" "^3.26.0"
+    "@tiptap/extension-blockquote" "^3.26.0"
+    "@tiptap/extension-bold" "^3.26.0"
+    "@tiptap/extension-bullet-list" "^3.26.0"
+    "@tiptap/extension-code" "^3.26.0"
+    "@tiptap/extension-code-block" "^3.26.0"
+    "@tiptap/extension-document" "^3.26.0"
+    "@tiptap/extension-dropcursor" "^3.26.0"
+    "@tiptap/extension-gapcursor" "^3.26.0"
+    "@tiptap/extension-hard-break" "^3.26.0"
+    "@tiptap/extension-heading" "^3.26.0"
+    "@tiptap/extension-horizontal-rule" "^3.26.0"
+    "@tiptap/extension-italic" "^3.26.0"
+    "@tiptap/extension-link" "^3.26.0"
+    "@tiptap/extension-list" "^3.26.0"
+    "@tiptap/extension-list-item" "^3.26.0"
+    "@tiptap/extension-list-keymap" "^3.26.0"
+    "@tiptap/extension-ordered-list" "^3.26.0"
+    "@tiptap/extension-paragraph" "^3.26.0"
+    "@tiptap/extension-strike" "^3.26.0"
+    "@tiptap/extension-text" "^3.26.0"
+    "@tiptap/extension-underline" "^3.26.0"
+    "@tiptap/extensions" "^3.26.0"
+    "@tiptap/pm" "^3.26.0"
+
+"@tiptap/suggestion@^3.26.0":
+  version "3.26.0"
+  resolved "https://registry.yarnpkg.com/@tiptap/suggestion/-/suggestion-3.26.0.tgz#912355e1f1adbc2df8982b92393798a2d404a33f"
+  integrity sha512-3jxBvjmfooQroR0eCw61kSgr+g90KFVD3dM5bANhpQbCpCYRydp/iXDQmpoPHjv8FpeU5JZgcnJ3R9vhjeIM2A==
+
+"@tiptap/vue-3@^3.26.0":
+  version "3.26.0"
+  resolved "https://registry.yarnpkg.com/@tiptap/vue-3/-/vue-3-3.26.0.tgz#1804b40de4eb8850402663020167f00d13b28557"
+  integrity sha512-ephdd355RvM69T2bjEHK1VPkAnZLuskwYZ8ta9L22iRLSIGpk1ERT9W+jOe6hYVyP4AiidOwK0yOvv1a5QiyJg==
   optionalDependencies:
-    "@tiptap/extension-bubble-menu" "^3.17.1"
-    "@tiptap/extension-floating-menu" "^3.17.1"
+    "@tiptap/extension-bubble-menu" "^3.26.0"
+    "@tiptap/extension-floating-menu" "^3.26.0"
 
 "@types/babel__generator@7.27.0":
   version "7.27.0"
@@ -1281,7 +1271,7 @@
   resolved "https://registry.yarnpkg.com/@types/linkify-it/-/linkify-it-5.0.0.tgz#21413001973106cda1c3a9b91eedd4ccd5469d76"
   integrity sha512-sVDA58zAw4eWAffKOaQH5/5j3XeayukzDk+ewSsnv3p4yJEZHCCzMDiZM8e0OUrRvmpGZ85jf4yDHkHsgBNr9Q==
 
-"@types/markdown-it@^14.0.0", "@types/markdown-it@^14.1.2":
+"@types/markdown-it@^14.1.2":
   version "14.1.2"
   resolved "https://registry.yarnpkg.com/@types/markdown-it/-/markdown-it-14.1.2.tgz#57f2532a0800067d9b934f3521429a2e8bfb4c61"
   integrity sha512-promo4eFwuiW+TfGxhi+0x3czqTYJkG8qB17ZUJiVF10Xm7NLVRSLUsfRTU/6h1e24VvRnXCx+hG7li58lkzog==
@@ -2509,11 +2499,6 @@ core-util-is@1.0.2:
   resolved "https://registry.yarnpkg.com/core-util-is/-/core-util-is-1.0.2.tgz#b5fd54220aa2bc5ab57aab7140c940754503c1a7"
   integrity sha512-3lqz5YjWTYnW6dlDa5TLaTCcShfar1e40rmcJVwCBJC6mWlFuj0eCHIElmG1g5kyuJ/GD+8Wn4FFCcz4gJPfaQ==
 
-crelt@^1.0.0:
-  version "1.0.6"
-  resolved "https://registry.yarnpkg.com/crelt/-/crelt-1.0.6.tgz#7cc898ea74e190fb6ef9dae57f8f81cf7302df72"
-  integrity sha512-VQ2MBenTq1fWZUH9DJNGti7kKv6EeAuYr3cLwxUWhIu1baTaXh4Ib5W2CqHVqib4/MqbYGJqiL3Zb8GJZr3l4g==
-
 cross-env@^7.0.3:
   version "7.0.3"
   resolved "https://registry.yarnpkg.com/cross-env/-/cross-env-7.0.3.tgz#865264b29677dc015ba8418918965dd232fc54cf"
@@ -3091,11 +3076,6 @@ escape-string-regexp@^1.0.5:
   resolved "https://registry.yarnpkg.com/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz#1b61c0562190a8dff6ae3bb2cf0200ca130b86d4"
   integrity sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==
 
-escape-string-regexp@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz#14ba83a5d373e3d311e5afca29cf5bfad965bf34"
-  integrity sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==
-
 escape-string-regexp@^5.0.0:
   version "5.0.0"
   resolved "https://registry.yarnpkg.com/escape-string-regexp/-/escape-string-regexp-5.0.0.tgz#4683126b500b61762f2dbebace1806e8be31b1c8"
@@ -4278,10 +4258,10 @@ linkify-it@^5.0.0:
   dependencies:
     uc.micro "^2.0.0"
 
-linkifyjs@^4.3.2:
-  version "4.3.2"
-  resolved "https://registry.yarnpkg.com/linkifyjs/-/linkifyjs-4.3.2.tgz#d97eb45419aabf97ceb4b05a7adeb7b8c8ade2b1"
-  integrity sha512-NT1CJtq3hHIreOianA8aSXn6Cw0JzYOuDQbOrSPe7gqFnCpKP++MQe3ODgO3oh2GJFORkAAdqredOa60z63GbA==
+linkifyjs@^4.3.3:
+  version "4.3.3"
+  resolved "https://registry.yarnpkg.com/linkifyjs/-/linkifyjs-4.3.3.tgz#da08f0eeb4d89a24541d09591fbdcc211eb8fef0"
+  integrity sha512-P8aEP5U/D1/IlTY2OeYsErdwh9bGuLE30NcXtKEjgdHcahveQoQwM2yZNsioQHsWFz0P7KKudisbrzCgR0sDHg==
 
 lint-staged@>=10:
   version "16.2.7"
@@ -4463,7 +4443,7 @@ mark.js@8.11.1:
   resolved "https://registry.yarnpkg.com/mark.js/-/mark.js-8.11.1.tgz#180f1f9ebef8b0e638e4166ad52db879beb2ffc5"
   integrity sha512-1I+1qpDt4idfgLQG+BNWmrqku+7/2bi5nLf4YwF8y8zXvmfiTBY3PV3ZibfrjBueCByROpuBjLLFCajqkgYoLQ==
 
-markdown-it@^14.0.0, markdown-it@^14.1.1:
+markdown-it@^14.1.1:
   version "14.1.1"
   resolved "https://registry.yarnpkg.com/markdown-it/-/markdown-it-14.1.1.tgz#856f90b66fc39ae70affd25c1b18b581d7deee1f"
   integrity sha512-BuU2qnTti9YKgK5N+IeMubp14ZUKUUw7yeJbkjtosvHiP0AZ5c8IAgEMk79D0eC8F23r4Ac/q8cAIFdm2FtyoA==
@@ -5279,20 +5259,13 @@ property-information@^7.0.0:
   integrity sha512-TwEZ+X+yCJmYfL7TPUOcvBZ4QfoT5YenQiJuX//0th53DE6w0xxLEtfK3iyryQFddXuvkIk51EEgrJQ0WJkOmQ==
 
 prosemirror-changeset@^2.3.0:
-  version "2.3.1"
-  resolved "https://registry.yarnpkg.com/prosemirror-changeset/-/prosemirror-changeset-2.3.1.tgz#eee3299cfabc7a027694e9abdc4e85505e9dd5e7"
-  integrity sha512-j0kORIBm8ayJNl3zQvD1TTPHJX3g042et6y/KQhZhnPrruO8exkTgG8X+NRpj7kIyMMEx74Xb3DyMIBtO0IKkQ==
+  version "2.4.1"
+  resolved "https://registry.yarnpkg.com/prosemirror-changeset/-/prosemirror-changeset-2.4.1.tgz#685091245bf3299cd1cae2b8983cf9b0342e6b39"
+  integrity sha512-96WBLhOaYhJ+kPhLg3uW359Tz6I/MfcrQfL4EGv4SrcqKEMC1gmoGrXHecPE8eOwTVCJ4IwgfzM8fFad25wNfw==
   dependencies:
     prosemirror-transform "^1.0.0"
 
-prosemirror-collab@^1.3.1:
-  version "1.3.1"
-  resolved "https://registry.yarnpkg.com/prosemirror-collab/-/prosemirror-collab-1.3.1.tgz#0e8c91e76e009b53457eb3b3051fb68dad029a33"
-  integrity sha512-4SnynYR9TTYaQVXd/ieUvsVV4PDMBzrq2xPUWutHivDuOshZXqQ5rGbZM84HEaXKbLdItse7weMGOUdDVcLKEQ==
-  dependencies:
-    prosemirror-state "^1.0.0"
-
-prosemirror-commands@^1.0.0, prosemirror-commands@^1.6.2:
+prosemirror-commands@^1.6.2:
   version "1.7.1"
   resolved "https://registry.yarnpkg.com/prosemirror-commands/-/prosemirror-commands-1.7.1.tgz#d101fef85618b1be53d5b99ea17bee5600781b38"
   integrity sha512-rT7qZnQtx5c0/y/KlYaGvtG411S97UaL6gdp6RIZ23DLHanMYLyfGBV5DtSnZdthQql7W+lEVbpSfwtO8T+L2w==
@@ -5311,16 +5284,16 @@ prosemirror-dropcursor@^1.8.1:
     prosemirror-view "^1.1.0"
 
 prosemirror-gapcursor@^1.3.2:
-  version "1.4.0"
-  resolved "https://registry.yarnpkg.com/prosemirror-gapcursor/-/prosemirror-gapcursor-1.4.0.tgz#e1144a83b79db7ed0ec32cd0e915a0364220af43"
-  integrity sha512-z00qvurSdCEWUIulij/isHaqu4uLS8r/Fi61IbjdIPJEonQgggbJsLnstW7Lgdk4zQ68/yr6B6bf7sJXowIgdQ==
+  version "1.4.1"
+  resolved "https://registry.yarnpkg.com/prosemirror-gapcursor/-/prosemirror-gapcursor-1.4.1.tgz#da33c905fece147df577342c06f4929b25d365ee"
+  integrity sha512-pMdYaEnjNMSwl11yjEGtgTmLkR08m/Vl+Jj443167p9eB3HVQKhYCc4gmHVDsLPODfZfjr/MmirsdyZziXbQKw==
   dependencies:
     prosemirror-keymap "^1.0.0"
     prosemirror-model "^1.0.0"
     prosemirror-state "^1.0.0"
     prosemirror-view "^1.0.0"
 
-prosemirror-history@^1.0.0, prosemirror-history@^1.4.1:
+prosemirror-history@^1.4.1:
   version "1.5.0"
   resolved "https://registry.yarnpkg.com/prosemirror-history/-/prosemirror-history-1.5.0.tgz#ee21fc5de85a1473e3e3752015ffd6d649a06859"
   integrity sha512-zlzTiH01eKA55UAf1MEjtssJeHnGxO0j4K4Dpx+gnmX9n+SHNlDqI2oO1Kv1iPN5B1dm5fsljCfqKF9nFL6HRg==
@@ -5338,7 +5311,7 @@ prosemirror-inputrules@^1.4.0:
     prosemirror-state "^1.0.0"
     prosemirror-transform "^1.0.0"
 
-prosemirror-keymap@^1.0.0, prosemirror-keymap@^1.2.2, prosemirror-keymap@^1.2.3:
+prosemirror-keymap@^1.0.0, prosemirror-keymap@^1.2.3:
   version "1.2.3"
   resolved "https://registry.yarnpkg.com/prosemirror-keymap/-/prosemirror-keymap-1.2.3.tgz#c0f6ab95f75c0b82c97e44eb6aaf29cbfc150472"
   integrity sha512-4HucRlpiLd1IPQQXNqeo81BGtkY8Ai5smHhKW9jjPKRc2wQIxksg7Hl1tTI2IfT2B/LgX6bfYvXxEpJl7aKYKw==
@@ -5346,39 +5319,13 @@ prosemirror-keymap@^1.0.0, prosemirror-keymap@^1.2.2, prosemirror-keymap@^1.2.3:
     prosemirror-state "^1.0.0"
     w3c-keyname "^2.2.0"
 
-prosemirror-markdown@^1.13.1:
-  version "1.13.3"
-  resolved "https://registry.yarnpkg.com/prosemirror-markdown/-/prosemirror-markdown-1.13.3.tgz#cf38e98f10c432b906bfcc7179c2e3ab58f49362"
-  integrity sha512-3E+Et6cdXIH0EgN2tGYQ+EBT7N4kMiZFsW+hzx+aPtOmADDHWCdd2uUQb7yklJrfUYUOjEEu22BiN6UFgPe4cQ==
-  dependencies:
-    "@types/markdown-it" "^14.0.0"
-    markdown-it "^14.0.0"
-    prosemirror-model "^1.25.0"
-
-prosemirror-menu@^1.2.4:
-  version "1.2.5"
-  resolved "https://registry.yarnpkg.com/prosemirror-menu/-/prosemirror-menu-1.2.5.tgz#dea00e7b623cea89f4d76963bee22d2ac2343250"
-  integrity sha512-qwXzynnpBIeg1D7BAtjOusR+81xCp53j7iWu/IargiRZqRjGIlQuu1f3jFi+ehrHhWMLoyOQTSRx/IWZJqOYtQ==
-  dependencies:
-    crelt "^1.0.0"
-    prosemirror-commands "^1.0.0"
-    prosemirror-history "^1.0.0"
-    prosemirror-state "^1.0.0"
-
-prosemirror-model@1.25.2, prosemirror-model@^1.0.0, prosemirror-model@^1.20.0, prosemirror-model@^1.21.0, prosemirror-model@^1.24.1, prosemirror-model@^1.25.0, prosemirror-model@^1.25.4:
-  version "1.25.2"
-  resolved "https://registry.yarnpkg.com/prosemirror-model/-/prosemirror-model-1.25.2.tgz#39ca862f76f354237efb94441dbc9f79e81cb247"
-  integrity sha512-BVypCAJ4SL6jOiTsDffP3Wp6wD69lRhI4zg/iT8JXjp3ccZFiq5WyguxvMKmdKFC3prhaig7wSr8dneDToHE1Q==
+prosemirror-model@1.25.7, prosemirror-model@^1.0.0, prosemirror-model@^1.20.0, prosemirror-model@^1.21.0, prosemirror-model@^1.25.4, prosemirror-model@^1.25.7:
+  version "1.25.7"
+  resolved "https://registry.yarnpkg.com/prosemirror-model/-/prosemirror-model-1.25.7.tgz#0ef150e8098a9037703b48b623d668218f355b9c"
+  integrity sha512-A79aN8QEFUwI6cax8Yq4Rpcx1TJZ3Kagn+ii7qLo4/V8H3mMiHrhFyhTyHHvpSnOgMPpWiDGSwM3etwrxE50ug==
   dependencies:
     orderedmap "^2.0.0"
 
-prosemirror-schema-basic@^1.2.3:
-  version "1.2.4"
-  resolved "https://registry.yarnpkg.com/prosemirror-schema-basic/-/prosemirror-schema-basic-1.2.4.tgz#389ce1ec09b8a30ea9bbb92c58569cb690c2d695"
-  integrity sha512-ELxP4TlX3yr2v5rM7Sb70SqStq5NvI15c0j9j/gjsrO5vaw+fnnpovCLEGIcpeGfifkuqJwl4fon6b+KdrODYQ==
-  dependencies:
-    prosemirror-model "^1.25.0"
-
 prosemirror-schema-list@^1.5.0:
   version "1.5.1"
   resolved "https://registry.yarnpkg.com/prosemirror-schema-list/-/prosemirror-schema-list-1.5.1.tgz#5869c8f749e8745c394548bb11820b0feb1e32f5"
@@ -5388,16 +5335,16 @@ prosemirror-schema-list@^1.5.0:
     prosemirror-state "^1.0.0"
     prosemirror-transform "^1.7.3"
 
-prosemirror-state@1.4.3, prosemirror-state@^1.0.0, prosemirror-state@^1.2.2, prosemirror-state@^1.4.3, prosemirror-state@^1.4.4:
-  version "1.4.3"
-  resolved "https://registry.yarnpkg.com/prosemirror-state/-/prosemirror-state-1.4.3.tgz#94aecf3ffd54ec37e87aa7179d13508da181a080"
-  integrity sha512-goFKORVbvPuAQaXhpbemJFRKJ2aixr+AZMGiquiqKxaucC6hlpHNZHWgz5R7dS4roHiwq9vDctE//CZ++o0W1Q==
+prosemirror-state@1.4.4, prosemirror-state@^1.0.0, prosemirror-state@^1.2.2, prosemirror-state@^1.4.4:
+  version "1.4.4"
+  resolved "https://registry.yarnpkg.com/prosemirror-state/-/prosemirror-state-1.4.4.tgz#72b5e926f9e92dcee12b62a05fcc8a2de3bf5b39"
+  integrity sha512-6jiYHH2CIGbCfnxdHbXZ12gySFY/fz/ulZE333G6bPqIZ4F+TXo9ifiR86nAHpWnfoNjOb3o5ESi7J8Uz1jXHw==
   dependencies:
     prosemirror-model "^1.0.0"
     prosemirror-transform "^1.0.0"
     prosemirror-view "^1.27.0"
 
-prosemirror-tables@^1.6.4, prosemirror-tables@^1.8.1:
+prosemirror-tables@^1.8.0, prosemirror-tables@^1.8.1:
   version "1.8.5"
   resolved "https://registry.yarnpkg.com/prosemirror-tables/-/prosemirror-tables-1.8.5.tgz#104427012e5a5da1d2a38c122efee8d66bdd5104"
   integrity sha512-V/0cDCsHKHe/tfWkeCmthNUcEp1IVO3p6vwN8XtwE9PZQLAZJigbw3QoraAdfJPir4NKJtNvOB8oYGKRl+t0Dw==
@@ -5408,25 +5355,17 @@ prosemirror-tables@^1.6.4, prosemirror-tables@^1.8.1:
     prosemirror-transform "^1.10.5"
     prosemirror-view "^1.41.4"
 
-prosemirror-trailing-node@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/prosemirror-trailing-node/-/prosemirror-trailing-node-3.0.0.tgz#5bc223d4fc1e8d9145e4079ec77a932b54e19e04"
-  integrity sha512-xiun5/3q0w5eRnGYfNlW1uU9W6x5MoFKWwq/0TIRgt09lv7Hcser2QYV8t4muXbEr+Fwo0geYn79Xs4GKywrRQ==
-  dependencies:
-    "@remirror/core-constants" "3.0.0"
-    escape-string-regexp "^4.0.0"
-
-prosemirror-transform@1.10.4, prosemirror-transform@^1.0.0, prosemirror-transform@^1.1.0, prosemirror-transform@^1.10.2, prosemirror-transform@^1.10.5, prosemirror-transform@^1.7.3:
-  version "1.10.4"
-  resolved "https://registry.yarnpkg.com/prosemirror-transform/-/prosemirror-transform-1.10.4.tgz#56419eac14f9f56612c806ae46f9238648f3f02e"
-  integrity sha512-pwDy22nAnGqNR1feOQKHxoFkkUtepoFAd3r2hbEDsnf4wp57kKA36hXsB3njA9FtONBEwSDnDeCiJe+ItD+ykw==
+prosemirror-transform@1.12.0, prosemirror-transform@^1.0.0, prosemirror-transform@^1.1.0, prosemirror-transform@^1.10.2, prosemirror-transform@^1.10.5, prosemirror-transform@^1.12.0, prosemirror-transform@^1.7.3:
+  version "1.12.0"
+  resolved "https://registry.yarnpkg.com/prosemirror-transform/-/prosemirror-transform-1.12.0.tgz#0239288d0e98d91e6af3dd269a8968466be406d7"
+  integrity sha512-GxboyN4AMIsoHNtz5uf2r2Ru551i5hWeCMD6E2Ib4Eogqoub0NflniaBPVQ4MrGE5yZ8JV9tUHg9qcZTTrcN4w==
   dependencies:
     prosemirror-model "^1.21.0"
 
-prosemirror-view@1.40.0, prosemirror-view@^1.0.0, prosemirror-view@^1.1.0, prosemirror-view@^1.27.0, prosemirror-view@^1.31.0, prosemirror-view@^1.38.1, prosemirror-view@^1.41.4:
-  version "1.40.0"
-  resolved "https://registry.yarnpkg.com/prosemirror-view/-/prosemirror-view-1.40.0.tgz#212e627a0c4f0198ac9823a1232e0099c9a92865"
-  integrity sha512-2G3svX0Cr1sJjkD/DYWSe3cfV5VPVTBOxI9XQEGWJDFEpsZb/gh4MV29ctv+OJx2RFX4BLt09i+6zaGM/ldkCw==
+prosemirror-view@1.41.8, prosemirror-view@^1.0.0, prosemirror-view@^1.1.0, prosemirror-view@^1.27.0, prosemirror-view@^1.31.0, prosemirror-view@^1.41.4, prosemirror-view@^1.41.8:
+  version "1.41.8"
+  resolved "https://registry.yarnpkg.com/prosemirror-view/-/prosemirror-view-1.41.8.tgz#bfb48d9dc328f1aa2a0eea1600b0828818be03f1"
+  integrity sha512-TnKDdohEatgyZNGCDWIdccOHXhYloJwbwU+phw/a23KBvJIR9lWQWW7WHHK3vBdOLDNuF7TaX98GObUZOWkOnA==
   dependencies:
     prosemirror-model "^1.20.0"
     prosemirror-state "^1.0.0"