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 f5619dbc8..f17cdeea3 100644
--- a/components.d.ts
+++ b/components.d.ts
@@ -1,8 +1,11 @@
 /* eslint-disable */
 // @ts-nocheck
+// biome-ignore lint: disable
+// oxlint-disable
+// ------
 // Generated by unplugin-vue-components
 // Read more: https://github.com/vuejs/core/pull/3399
-// biome-ignore lint: disable
+
 export {}
 
 /* prettier-ignore */
@@ -27,16 +30,12 @@ declare module 'vue' {
     Checkbox: typeof import('./src/components/Checkbox/Checkbox.vue')['default']
     CircularProgressBar: typeof import('./src/components/CircularProgressBar/CircularProgressBar.vue')['default']
     'CircularProgressBar.story': typeof import('./src/components/CircularProgressBar/CircularProgressBar.story.vue')['default']
-    Clearable: typeof import('./src/components/Rating/stories/Clearable.vue')['default']
     CodeBlockComponent: typeof import('./src/components/TextEditor/components/CodeBlockComponent.vue')['default']
     Combobox: typeof import('./src/components/Combobox/Combobox.vue')['default']
     ComboboxResults: typeof import('./src/components/Combobox/ComboboxResults.vue')['default']
     CommandPalette: typeof import('./src/components/CommandPalette/CommandPalette.vue')['default']
     CommandPaletteItem: typeof import('./src/components/CommandPalette/CommandPaletteItem.vue')['default']
     ConfirmDialog: typeof import('./src/components/ConfirmDialog.vue')['default']
-    CustomColor: typeof import('./src/components/Rating/stories/CustomColor.vue')['default']
-    CustomIcon: typeof import('./src/components/Rating/stories/CustomIcon.vue')['default']
-    CustomSlot: typeof import('./src/components/Rating/stories/CustomSlot.vue')['default']
     DatePicker: typeof import('./src/components/DatePicker/DatePicker.vue')['default']
     DateRangePicker: typeof import('./src/components/DatePicker/DateRangePicker.vue')['default']
     DateTimePicker: typeof import('./src/components/DatePicker/DateTimePicker.vue')['default']
@@ -63,8 +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']
-    HalfStep: typeof import('./src/components/Rating/stories/HalfStep.vue')['default']
-    HalfStepCustomColor: typeof import('./src/components/Rating/stories/HalfStepCustomColor.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']
@@ -111,6 +109,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']
diff --git a/docs/.vitepress/config.ts b/docs/.vitepress/config.ts
index 47cd0fd20..c0ca207eb 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..e15ae1f28 100644
--- a/docs/.vitepress/theme/index.ts
+++ b/docs/.vitepress/theme/index.ts
@@ -1,8 +1,12 @@
 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 Layout from '../../components/Layout.vue'
 
 if (process.env.NODE_ENV === 'production') {
@@ -10,8 +14,12 @@ 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)
   },
 } satisfies Theme
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/ButtonBuilder.vue b/docs/components/Docs/ButtonBuilder.vue
new file mode 100644
index 000000000..26b130395
--- /dev/null
+++ b/docs/components/Docs/ButtonBuilder.vue
@@ -0,0 +1,97 @@
+<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' },
+      { label: 'xl', value: 'xl' },
+      { label: '2xl', value: '2xl' },
+    ],
+  },
+  {
+    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/ComponentPlayground.vue b/docs/components/Docs/ComponentPlayground.vue
new file mode 100644
index 000000000..23bf301a0
--- /dev/null
+++ b/docs/components/Docs/ComponentPlayground.vue
@@ -0,0 +1,174 @@
+<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-white 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-white 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;
+  min-width: 64px;
+  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/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/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/sidebarList.ts b/docs/components/Docs/sidebarList.ts
index f312019f0..c79cec547 100644
--- a/docs/components/Docs/sidebarList.ts
+++ b/docs/components/Docs/sidebarList.ts
@@ -42,13 +42,13 @@ export function getSidebarList(componentList: string[]): SidebarSection[] {
       ],
     },
     {
-      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/colours/base' },
+        { text: 'Semantic Colors', link: '/docs/foundations/colours/semantic' },
+        { text: 'Typography', link: '/docs/foundations/typography' },
+        { text: 'Radius', link: '/docs/foundations/radius' },
+        { text: 'Elevation', link: '/docs/foundations/elevation' },
       ],
     },
     {
diff --git a/docs/components/Layout.vue b/docs/components/Layout.vue
index 9d9928633..0cb03bab6 100644
--- a/docs/components/Layout.vue
+++ b/docs/components/Layout.vue
@@ -41,7 +41,7 @@ const { frontmatter } = useData()
               />
               <PrevNextBtns />
             </main>
-            <OnThisPage />
+            <OnThisPage v-if="frontmatter.outline !== false" />
           </div>
         </div>
       </div>
diff --git a/docs/components/foundations/ElevationPreview.vue b/docs/components/foundations/ElevationPreview.vue
new file mode 100644
index 000000000..0cbe9d0b1
--- /dev/null
+++ b/docs/components/foundations/ElevationPreview.vue
@@ -0,0 +1,64 @@
+<script setup lang="ts">
+import { ref, watch } from 'vue'
+import { TabButtons } from 'frappe-ui'
+import { useTheme } from '../../composables/useTheme'
+
+const ELEVATION_STEPS = ['sm', 'base', 'md', 'lg', 'xl', '2xl'] as const
+
+// Same shadow set runs in both themes; in dark mode, lift comes from
+// stepping the underlying surface up. sm/base/md sit on the deepest layer,
+// lg/xl step up one, 2xl sits on top.
+const DARK_SURFACE_BY_STEP: Record<string, string> = {
+  sm: 'bg-surface-gray-1',
+  base: 'bg-surface-gray-1',
+  md: 'bg-surface-gray-1',
+  lg: 'bg-surface-gray-2',
+  xl: 'bg-surface-gray-2',
+  '2xl': 'bg-surface-gray-3',
+}
+
+const globalTheme = useTheme()
+const previewTheme = ref<'light' | 'dark'>(globalTheme.value)
+watch(globalTheme, (next) => {
+  previewTheme.value = 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-6 p-8 rounded-xl border border-outline-gray-2"
+      :class="previewTheme === 'dark' ? 'bg-[#1a1a1a]' : 'bg-[#f5f5f5]'"
+      :data-theme="previewTheme"
+    >
+      <div v-for="step in ELEVATION_STEPS" :key="step" class="grid gap-3">
+        <div
+          class="h-24 rounded-lg"
+          :class="[
+            `shadow-${step}`,
+            previewTheme === 'dark' ? DARK_SURFACE_BY_STEP[step] : 'bg-white',
+          ]"
+        ></div>
+        <div class="grid gap-0.5">
+          <span class="text-2xs font-mono text-ink-gray-5"
+            >shadow-{{ step }}</span
+          >
+          <span class="text-xs text-ink-gray-6">--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..c0cb74eb2
--- /dev/null
+++ b/docs/components/foundations/FocusRingPreview.vue
@@ -0,0 +1,22 @@
+<script setup lang="ts">
+const FOCUS_RINGS = ['default', 'red', 'green', 'amber', 'blue', 'violet'] as const
+
+function focusRingClass(name: string) {
+  return name === 'default' ? 'focus-ring' : `focus-ring-${name}`
+}
+</script>
+
+<template>
+  <div class="grid grid-cols-2 sm:grid-cols-3 gap-6">
+    <div v-for="ring in FOCUS_RINGS" :key="ring" class="grid gap-3">
+      <div
+        class="h-16 rounded-md bg-surface-white border border-outline-gray-2"
+        :class="focusRingClass(ring)"
+      ></div>
+      <div class="grid gap-0.5">
+        <span class="text-2xs font-mono text-ink-gray-5">{{ focusRingClass(ring) }}</span>
+        <span class="text-xs text-ink-gray-6">--focus-{{ ring }}</span>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/docs/components/foundations/PalettePage.vue b/docs/components/foundations/PalettePage.vue
new file mode 100644
index 000000000..6ff105ad6
--- /dev/null
+++ b/docs/components/foundations/PalettePage.vue
@@ -0,0 +1,237 @@
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue'
+import { TabButtons } from 'frappe-ui'
+import { useTheme } from '../../composables/useTheme'
+import colors from '../../../tailwind/colors.json'
+
+type Mode = 'lightMode' | 'darkMode'
+
+const globalTheme = useTheme()
+const mode = ref<Mode>(globalTheme.value === 'dark' ? 'darkMode' : 'lightMode')
+watch(globalTheme, (next) => {
+  mode.value = next === 'dark' ? 'darkMode' : 'lightMode'
+})
+
+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][],
+)
+
+function copy(text: string) {
+  navigator.clipboard?.writeText(text)
+}
+</script>
+
+<template>
+  <p>
+    The raw palette. Twelve hues, eleven shades each, plus alpha ramps and
+    neutrals. Authored in Figma, synced to Tailwind via
+    <code class="text-ink-gray-8">yarn sync-tokens</code>.
+  </p>
+  <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))`,
+        }"
+      >
+        <button
+          v-for="[shade, value] in family.shades"
+          :key="shade"
+          class="grid gap-1 text-left group"
+          @click="
+            copy(`${mode === 'darkMode' ? 'dark-' : ''}${family.key}-${shade}`)
+          "
+        >
+          <div
+            class="aspect-square rounded transition-transform group-hover:scale-[1.02]"
+            :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>
+        </button>
+      </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',
+        }"
+      >
+        <button
+          v-for="[shade, value] in family.shades"
+          :key="shade"
+          class="grid gap-1 text-left"
+          @click="copy(`${family.key}-${shade}`)"
+        >
+          <div
+            class="aspect-square rounded"
+            :style="{ background: value as string }"
+          ></div>
+          <div
+            class="grid gap-1 bg-surface-white/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>
+        </button>
+      </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))`,
+            }"
+          >
+            <button
+              v-for="[shade, value] in overlayWhite"
+              :key="shade"
+              class="grid gap-1 text-left"
+              @click="copy(`white-overlay-${shade}`)"
+            >
+              <div
+                class="h-12 rounded bg-ink-gray-9"
+                :style="{
+                  backgroundImage: `linear-gradient(${value}, ${value})`,
+                }"
+              ></div>
+              <span class="text-2xs text-ink-gray-7 font-mono">{{ shade }}</span>
+            </button>
+          </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))`,
+            }"
+          >
+            <button
+              v-for="[shade, value] in overlayBlack"
+              :key="shade"
+              class="grid gap-1 text-left"
+              @click="copy(`black-overlay-${shade}`)"
+            >
+              <div
+                class="h-12 rounded bg-surface-white"
+                :style="{
+                  backgroundImage: `linear-gradient(${value}, ${value})`,
+                }"
+              ></div>
+              <span class="text-2xs text-ink-gray-7 font-mono">{{
+                shade
+              }}</span>
+            </button>
+          </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="flex gap-4">
+        <button
+          v-for="n in NEUTRALS"
+          :key="n.key"
+          class="grid gap-2 text-left"
+          @click="copy(n.label)"
+        >
+          <div class="size-24 rounded" :style="{ background: n.value }"></div>
+          <span class="text-sm text-ink-gray-7">{{ n.label }}</span>
+          <span class="text-2xs text-ink-gray-5 font-mono uppercase">{{
+            n.value
+          }}</span>
+        </button>
+      </div>
+    </section>
+  </div>
+</template>
diff --git a/docs/components/foundations/RadiusPage.vue b/docs/components/foundations/RadiusPage.vue
new file mode 100644
index 000000000..c6d607183
--- /dev/null
+++ b/docs/components/foundations/RadiusPage.vue
@@ -0,0 +1,97 @@
+<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] || [],
+  })),
+)
+
+function copy(text: string) {
+  navigator.clipboard?.writeText(text)
+}
+</script>
+
+<template>
+  <div class="grid gap-8">
+    <header class="grid gap-3">
+      <p class="text-p-base text-ink-gray-6 max-w-2xl">
+        Ten radii from sharp to pill. The numeric scale (<code
+          class="text-ink-gray-8"
+          >rounded-0</code
+        >
+        …<code class="text-ink-gray-8">rounded-9</code>) mirrors Figma. Named
+        aliases (<code class="text-ink-gray-8">rounded-sm</code>,
+        <code class="text-ink-gray-8">rounded-md</code>, …) resolve to the same
+        values for ergonomics.
+      </p>
+    </header>
+
+    <section class="grid gap-4">
+      <div class="grid divide-y divide-outline-gray-1">
+        <button
+          v-for="r in rows"
+          :key="r.name"
+          class="flex w-full items-center gap-4 py-3 text-left"
+          @click="copy(`rounded-${r.name}`)"
+        >
+          <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>
+        </button>
+      </div>
+    </section>
+  </div>
+</template>
diff --git a/docs/components/foundations/SemanticPage.vue b/docs/components/foundations/SemanticPage.vue
new file mode 100644
index 000000000..3a2a0381f
--- /dev/null
+++ b/docs/components/foundations/SemanticPage.vue
@@ -0,0 +1,141 @@
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue'
+import { TabButtons } from 'frappe-ui'
+import { useTheme } from '../../composables/useTheme'
+import colors from '../../../tailwind/colors.json'
+
+type Mode = 'light' | 'dark'
+
+const globalTheme = useTheme()
+const mode = ref<Mode>(globalTheme.value)
+watch(globalTheme, (next) => {
+  mode.value = 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' | 'ink' | 'outline'
+  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: '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.',
+  },
+]
+
+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) })),
+)
+
+function copy(text: string) {
+  navigator.clipboard?.writeText(text)
+}
+</script>
+
+<template>
+  <div class="grid gap-14">
+    <header class="grid gap-3">
+      <p class="text-p-base text-ink-gray-6 max-w-2xl">
+        Semantic tokens map a use-case (surface, ink, outline) to a primitive.
+        Always prefer these over raw palette colors in app code — they swap with
+        theme.
+      </p>
+      <TabButtons :buttons="modeButtons" v-model="mode" class="w-fit" />
+    </header>
+
+    <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">
+        <button
+          v-for="entry in section.entries"
+          :key="entry.name"
+          class="flex w-full items-center gap-4 py-3 text-left"
+          @click="copy(`${section.prefix}${entry.name}`)"
+        >
+          <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>
+        </button>
+      </div>
+    </section>
+  </div>
+</template>
diff --git a/docs/components/foundations/TypographyPage.vue b/docs/components/foundations/TypographyPage.vue
new file mode 100644
index 000000000..0290ec266
--- /dev/null
+++ b/docs/components/foundations/TypographyPage.vue
@@ -0,0 +1,144 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import typography from '../../../tailwind/generated/typography.json'
+
+type SizeMeta = { lineHeight?: string; letterSpacing?: string; fontWeight?: string }
+type SizeEntry = [string, SizeMeta]
+
+// Group sizes for the page. Order matters — 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', '13xl', '14xl', '15xl']
+
+// Figma stores line-height as a px value; designers think in ratios
+// (lh / size). Convert here for the meta row.
+function lineHeightRatio(size: string, lineHeight?: string): string | undefined {
+  if (!lineHeight) return undefined
+  const sizePx = parseFloat(size)
+  const lhPx = parseFloat(lineHeight)
+  if (!sizePx || !lhPx) return undefined
+  const ratio = lhPx / sizePx
+  // 2 decimals, but trim trailing zeros (1.50 → 1.5, 1.00 → 1)
+  return ratio.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,
+    meta: meta || {},
+    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>>[])
+const weights = Object.entries(typography.fontWeight) as [string, number][]
+const family = (typography.fontFamily as Record<string, string>).text || 'Inter'
+
+const sample = 'The quick brown fox jumps over the lazy dog'
+
+function copy(text: string) {
+  navigator.clipboard?.writeText(text)
+}
+</script>
+
+<template>
+  <div class="grid gap-10">
+    <header class="grid gap-3">
+      <p class="text-p-base text-ink-gray-6 max-w-2xl">
+        {{ family }}, all the way down. A single ramp from
+        <code class="text-ink-gray-8">2xs</code> to
+        <code class="text-ink-gray-8">15xl</code>, with paragraph variants for
+        body copy.
+      </p>
+    </header>
+
+    <section class="grid gap-4">
+      <h2 class="text-xl font-semibold text-ink-gray-8 m-0">Text sizes</h2>
+      <div class="grid gap-4">
+        <button
+          v-for="item in text"
+          :key="item.name"
+          class="grid gap-3 text-left"
+          @click="copy(`text-${item.name}`)"
+        >
+          <div
+            :style="{
+              fontSize: item.size,
+              lineHeight: item.meta.lineHeight,
+              letterSpacing: item.meta.letterSpacing,
+              fontWeight: item.meta.fontWeight,
+            }"
+            class="text-ink-gray-8"
+          >
+            {{ sample }}
+          </div>
+          <div class="flex gap-6 text-2xs font-mono text-ink-gray-5 uppercase flex-wrap">
+            <span>text-{{ item.name }}</span>
+            <span>size {{ item.size }}</span>
+            <span v-if="item.lhRatio">lh {{ item.lhRatio }}</span>
+            <span v-if="item.meta.letterSpacing">ls {{ item.meta.letterSpacing }}</span>
+            <span v-if="item.meta.fontWeight">fw {{ item.meta.fontWeight }}</span>
+          </div>
+        </button>
+      </div>
+    </section>
+
+    <section class="grid gap-4">
+      <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">Marketing, landing, hero copy.</p>
+      </div>
+      <div class="grid gap-4">
+        <button
+          v-for="item in display"
+          :key="item.name"
+          class="grid gap-2 text-left overflow-hidden"
+          @click="copy(`text-${item.name}`)"
+        >
+          <div
+            :style="{
+              fontSize: item.size,
+              lineHeight: item.meta.lineHeight,
+              letterSpacing: item.meta.letterSpacing,
+              fontWeight: 600,
+            }"
+            class="text-ink-gray-8 whitespace-nowrap"
+          >
+            Aa Bb Cc
+          </div>
+          <div class="flex gap-6 text-2xs font-mono text-ink-gray-5 uppercase flex-wrap">
+            <span>text-{{ item.name }}</span>
+            <span>size {{ item.size }}</span>
+            <span v-if="item.lhRatio">lh {{ item.lhRatio }}</span>
+          </div>
+        </button>
+      </div>
+    </section>
+
+    <section class="grid gap-4">
+      <h2 class="text-xl font-semibold text-ink-gray-8 m-0">Weights</h2>
+      <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3">
+        <button
+          v-for="[name, value] in weights"
+          :key="name"
+          class="grid gap-1 text-left"
+          @click="copy(`font-${name}`)"
+        >
+          <div
+            :style="{ fontWeight: value }"
+            class="text-lg text-ink-gray-8"
+          >
+            {{ sample }}
+          </div>
+          <span class="text-2xs font-mono text-ink-gray-5 uppercase">
+            font-{{ name }} · {{ value }}
+          </span>
+        </button>
+      </div>
+    </section>
+  </div>
+</template>
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..9d0a880b7
--- /dev/null
+++ b/docs/composables/useTheme.ts
@@ -0,0 +1,31 @@
+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
+}
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/colours/base.md b/docs/content/docs/foundations/colours/base.md
new file mode 100644
index 000000000..878664691
--- /dev/null
+++ b/docs/content/docs/foundations/colours/base.md
@@ -0,0 +1,11 @@
+---
+outline: false
+---
+
+<script setup>
+import PalettePage from '@/components/foundations/PalettePage.vue'
+</script>
+
+# Base Colors
+
+<PalettePage />
diff --git a/docs/content/docs/foundations/colours/semantic.md b/docs/content/docs/foundations/colours/semantic.md
new file mode 100644
index 000000000..643b1894a
--- /dev/null
+++ b/docs/content/docs/foundations/colours/semantic.md
@@ -0,0 +1,11 @@
+---
+outline: false
+---
+
+<script setup>
+import SemanticPage from '@/components/foundations/SemanticPage.vue'
+</script>
+
+# Semantic Colors
+
+<SemanticPage />
diff --git a/docs/content/docs/foundations/elevation.md b/docs/content/docs/foundations/elevation.md
new file mode 100644
index 000000000..20e701d09
--- /dev/null
+++ b/docs/content/docs/foundations/elevation.md
@@ -0,0 +1,68 @@
+---
+outline: false
+---
+
+<script setup>
+import ElevationPreview from '@/components/foundations/ElevationPreview.vue'
+import FocusRingPreview from '@/components/foundations/FocusRingPreview.vue'
+</script>
+
+# Elevation
+
+Elevation conveys depth and hierarchy. Each step is a CSS variable
+(`--elevation-*`) that resolves to the same value in both themes — Espresso 2.0
+uses one shadow set for light and dark, so the same `shadow-*` utility works in
+either mode without overrides.
+
+## Elevation scale
+
+Six steps from inset hairline to floating overlay, plus `shadow-status` for
+status-dot rings.
+
+<ElevationPreview />
+
+## Focus rings
+
+Component utilities backed by `--focus-*`. Width flips from 2px (light) to 3px
+(dark) automatically. Pair with `focus-visible:` for keyboard-only highlight.
+
+<FocusRingPreview />
+
+## Surface pairing
+
+In dark mode, shadows fade against dark backgrounds — depth is carried by a
+lighter surface underneath. Recommended pairings for floating components:
+
+| Use case          | Shadow         | Dark surface      |
+| ----------------- | -------------- | ----------------- |
+| Inset / pressed   | `shadow-sm`    | `surface-gray-1`  |
+| Card              | `shadow-base`  | `surface-gray-1`  |
+| Dropdown / menu   | `shadow-md`    | `surface-gray-1`  |
+| Popover           | `shadow-lg`    | `surface-gray-2`  |
+| Modal             | `shadow-xl`    | `surface-gray-2`  |
+| Toast / overlay   | `shadow-2xl`   | `surface-gray-3`  |
+
+## Migration
+
+**Shadow values updated.** `shadow-sm` through `shadow-2xl` are now backed by
+the Figma elevation scale. Y-offset, blur, and spread are all larger than
+before, and most steps now include a subtle inner white highlight. Visual diff
+is expected wherever shadows are used.
+
+**New: `shadow-base`.** Sits between `shadow-sm` and `shadow-md` for resting
+cards. `shadow` (the bare utility) remains as an alias.
+
+**New: `shadow-status`.** A 1.5px white halo for status dots over coloured
+backgrounds.
+
+**One shadow set for both themes.** `shadow-*` utilities resolve to a single
+value (`var(--elevation-*)`) regardless of theme — matching how Espresso 2.0
+applies shadows in the Figma dark-mode page. Remove any conditional
+`dark:shadow-*` overrides. If a component genuinely needs a heavier
+dark-mode-specific shadow, opt in with `shadow-dark-{sm,base,md,lg,xl,2xl}`.
+
+**Focus rings.** Replace `focus-visible:ring-2 ring-outline-gray-3` with
+`focus-visible:focus-ring`; semantic variants exist for red (error), green
+(success), amber, blue, violet. Existing `ring-*` utilities are unchanged —
+migrate only focus state, not selection rings (e.g. media nodes using
+`ring-offset-2`).
diff --git a/docs/content/docs/foundations/radius.md b/docs/content/docs/foundations/radius.md
new file mode 100644
index 000000000..94acbafb3
--- /dev/null
+++ b/docs/content/docs/foundations/radius.md
@@ -0,0 +1,11 @@
+---
+outline: false
+---
+
+<script setup>
+import RadiusPage from '@/components/foundations/RadiusPage.vue'
+</script>
+
+# Radius
+
+<RadiusPage />
diff --git a/docs/content/docs/foundations/typography.md b/docs/content/docs/foundations/typography.md
new file mode 100644
index 000000000..6a74a1020
--- /dev/null
+++ b/docs/content/docs/foundations/typography.md
@@ -0,0 +1,11 @@
+---
+outline: false
+---
+
+<script setup>
+import TypographyPage from '@/components/foundations/TypographyPage.vue'
+</script>
+
+# Typography
+
+<TypographyPage />
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..9e461d92c
--- /dev/null
+++ b/espresso-v2-design-tokens/Styles.Dark.tokens.json
@@ -0,0 +1,588 @@
+{
+  "surface": {
+    "base": {
+      "$type": "color",
+      "$value": "{dark.gray.950}"
+    },
+    "gray-1": {
+      "$type": "color",
+      "$value": "{dark.gray.800}"
+    },
+    "gray-2": {
+      "$type": "color",
+      "$value": "{dark.gray.700}"
+    },
+    "gray-3": {
+      "$type": "color",
+      "$value": "{dark.gray.600}"
+    },
+    "gray-4": {
+      "$type": "color",
+      "$value": "{dark.gray.500}"
+    },
+    "gray-5": {
+      "$type": "color",
+      "$value": "{dark.gray.200}"
+    },
+    "gray-6": {
+      "$type": "color",
+      "$value": "{dark.gray.100}"
+    },
+    "gray-7": {
+      "$type": "color",
+      "$value": "{dark.gray.50}"
+    },
+    "menu-bar": {
+      "$type": "color",
+      "$value": "{dark.gray.950}"
+    },
+    "base-contrast": {
+      "$type": "color",
+      "$value": "{dark.gray.900}"
+    },
+    "gray-1-contrast": {
+      "$type": "color",
+      "$value": "{dark.gray.900}"
+    },
+    "gray-2-contrast": {
+      "$type": "color",
+      "$value": "{dark.gray.600}"
+    },
+    "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.500}"
+    },
+    "red-6": {
+      "$type": "color",
+      "$value": "{dark.red.400}"
+    },
+    "red-7": {
+      "$type": "color",
+      "$value": "{dark.red.600}"
+    },
+    "green-1": {
+      "$type": "color",
+      "$value": "{dark.green.900}"
+    },
+    "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.500}"
+    },
+    "green-6": {
+      "$type": "color",
+      "$value": "{dark.green.400}"
+    },
+    "green-7": {
+      "$type": "color",
+      "$value": "{dark.green.600}"
+    },
+    "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.500}"
+    },
+    "amber-6": {
+      "$type": "color",
+      "$value": "{dark.amber.400}"
+    },
+    "amber-7": {
+      "$type": "color",
+      "$value": "{dark.amber.600}"
+    },
+    "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.500}"
+    },
+    "blue-6": {
+      "$type": "color",
+      "$value": "{dark.blue.400}"
+    },
+    "blue-7": {
+      "$type": "color",
+      "$value": "{dark.blue.600}"
+    },
+    "orange-2": {
+      "$type": "color",
+      "$value": "{dark.orange.900}"
+    },
+    "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.500}"
+    },
+    "violet-6": {
+      "$type": "color",
+      "$value": "{dark.violet.400}"
+    },
+    "violet-7": {
+      "$type": "color",
+      "$value": "{dark.violet.600}"
+    },
+    "cyan-2": {
+      "$type": "color",
+      "$value": "{dark.cyan.900}"
+    },
+    "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.200}"
+    },
+    "gray-6": {
+      "$type": "color",
+      "$value": "{dark.gray-alpha.100}"
+    },
+    "gray-7": {
+      "$type": "color",
+      "$value": "{dark.gray-alpha.50}"
+    },
+    "menu-bar": {
+      "$type": "color",
+      "$value": "{dark.gray-alpha.950}"
+    },
+    "base-contrast": {
+      "$type": "color",
+      "$value": "{dark.gray-alpha.900}"
+    },
+    "gray-1-contrast": {
+      "$type": "color",
+      "$value": "{dark.gray-alpha.800}"
+    },
+    "gray-2-contrast": {
+      "$type": "color",
+      "$value": "{dark.gray-alpha.600}"
+    },
+    "red-1": {
+      "$type": "color",
+      "$value": "{dark.red-alpha.950}"
+    },
+    "red-2": {
+      "$type": "color",
+      "$value": "{dark.red-alpha.900}"
+    },
+    "red-3": {
+      "$type": "color",
+      "$value": "{dark.red-alpha.800}"
+    },
+    "red-4": {
+      "$type": "color",
+      "$value": "{dark.red-alpha.700}"
+    },
+    "red-5": {
+      "$type": "color",
+      "$value": "{dark.red-alpha.500}"
+    },
+    "red-6": {
+      "$type": "color",
+      "$value": "{dark.red-alpha.400}"
+    },
+    "red-7": {
+      "$type": "color",
+      "$value": "{dark.red-alpha.600}"
+    },
+    "gray-2-overlay": {
+      "$type": "color",
+      "$value": "{white-alpha.50}"
+    }
+  },
+  "ink": {
+    "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}"
+    },
+    "gray-5": {
+      "$type": "color",
+      "$value": "{dark.gray.400}"
+    },
+    "gray-6": {
+      "$type": "color",
+      "$value": "{dark.gray.300}"
+    },
+    "gray-7": {
+      "$type": "color",
+      "$value": "{dark.gray.200}"
+    },
+    "gray-8": {
+      "$type": "color",
+      "$value": "{dark.gray.100}"
+    },
+    "red-1": {
+      "$type": "color",
+      "$value": "{neutral.white}"
+    },
+    "red-2": {
+      "$type": "color",
+      "$value": "{dark.red.700}"
+    },
+    "red-3": {
+      "$type": "color",
+      "$value": "{dark.red.400}"
+    },
+    "red-4": {
+      "$type": "color",
+      "$value": "{dark.red.300}"
+    },
+    "green-1": {
+      "$type": "color",
+      "$value": "{neutral.white}"
+    },
+    "green-2": {
+      "$type": "color",
+      "$value": "{dark.green.700}"
+    },
+    "green-3": {
+      "$type": "color",
+      "$value": "{dark.green.400}"
+    },
+    "green-4": {
+      "$type": "color",
+      "$value": "{dark.green.300}"
+    },
+    "green-6": {
+      "$type": "color",
+      "$value": "{dark.green.400}"
+    },
+    "amber-1": {
+      "$type": "color",
+      "$value": "{neutral.white}"
+    },
+    "amber-2": {
+      "$type": "color",
+      "$value": "{dark.amber.700}"
+    },
+    "amber-3": {
+      "$type": "color",
+      "$value": "{dark.amber.500}"
+    },
+    "amber-4": {
+      "$type": "color",
+      "$value": "{dark.amber.400}"
+    },
+    "blue-1": {
+      "$type": "color",
+      "$value": "{neutral.white}"
+    },
+    "blue-2": {
+      "$type": "color",
+      "$value": "{dark.blue.700}"
+    },
+    "blue-3": {
+      "$type": "color",
+      "$value": "{dark.blue.400}"
+    },
+    "blue-4": {
+      "$type": "color",
+      "$value": "{dark.blue.300}"
+    },
+    "cyan-3": {
+      "$type": "color",
+      "$value": "{dark.cyan.400}"
+    },
+    "violet-1": {
+      "$type": "color",
+      "$value": "{neutral.white}"
+    },
+    "violet-2": {
+      "$type": "color",
+      "$value": "{dark.violet.700}"
+    },
+    "violet-3": {
+      "$type": "color",
+      "$value": "{dark.violet.400}"
+    },
+    "violet-4": {
+      "$type": "color",
+      "$value": "{dark.violet.300}"
+    },
+    "blue-link": {
+      "$type": "color",
+      "$value": "{dark.blue.500}"
+    },
+    "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}"
+    }
+  },
+  "outline": {
+    "base": {
+      "$type": "color",
+      "$value": "{dark.gray.950}"
+    },
+    "gray-1": {
+      "$type": "color",
+      "$value": "{dark.gray.800}"
+    },
+    "gray-1-contrast": {
+      "$type": "color",
+      "$value": "{dark.gray.700}"
+    },
+    "gray-2": {
+      "$type": "color",
+      "$value": "{dark.gray.600}"
+    },
+    "gray-3": {
+      "$type": "color",
+      "$value": "{dark.gray.500}"
+    },
+    "gray-4": {
+      "$type": "color",
+      "$value": "{dark.gray.450}"
+    },
+    "gray-5": {
+      "$type": "color",
+      "$value": "{light.gray.200}"
+    },
+    "red-2": {
+      "$type": "color",
+      "$value": "{dark.red.800}"
+    },
+    "red-3": {
+      "$type": "color",
+      "$value": "{dark.red.700}"
+    },
+    "red-4": {
+      "$type": "color",
+      "$value": "{dark.red.600}"
+    },
+    "green-2": {
+      "$type": "color",
+      "$value": "{dark.green.800}"
+    },
+    "green-3": {
+      "$type": "color",
+      "$value": "{dark.green.700}"
+    },
+    "green-4": {
+      "$type": "color",
+      "$value": "{dark.green.600}"
+    },
+    "amber-2": {
+      "$type": "color",
+      "$value": "{dark.amber.800}"
+    },
+    "amber-3": {
+      "$type": "color",
+      "$value": "{dark.amber.700}"
+    },
+    "amber-4": {
+      "$type": "color",
+      "$value": "{dark.amber.600}"
+    },
+    "blue-2": {
+      "$type": "color",
+      "$value": "{dark.blue.800}"
+    },
+    "blue-3": {
+      "$type": "color",
+      "$value": "{dark.blue.700}"
+    },
+    "blue-4": {
+      "$type": "color",
+      "$value": "{dark.blue.600}"
+    },
+    "orange-3": {
+      "$type": "color",
+      "$value": "{dark.orange.700}"
+    },
+    "violet-2": {
+      "$type": "color",
+      "$value": "{dark.violet.800}"
+    },
+    "violet-3": {
+      "$type": "color",
+      "$value": "{dark.violet.700}"
+    },
+    "violet-4": {
+      "$type": "color",
+      "$value": "{dark.violet.600}"
+    },
+    "gray-modal": {
+      "$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.200}"
+    },
+    "red-2": {
+      "$type": "color",
+      "$value": "{dark.red-alpha.800}"
+    },
+    "red-3": {
+      "$type": "color",
+      "$value": "{dark.red-alpha.700}"
+    },
+    "red-4": {
+      "$type": "color",
+      "$value": "{dark.red-alpha.600}"
+    },
+    "gray-modal": {
+      "$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..50b58bfa8
--- /dev/null
+++ b/espresso-v2-design-tokens/Styles.Light.tokens.json
@@ -0,0 +1,588 @@
+{
+  "surface": {
+    "base": {
+      "$type": "color",
+      "$value": "{neutral.white}"
+    },
+    "gray-1": {
+      "$type": "color",
+      "$value": "{light.gray.50}"
+    },
+    "gray-2": {
+      "$type": "color",
+      "$value": "{light.gray.100}"
+    },
+    "gray-3": {
+      "$type": "color",
+      "$value": "{light.gray.200}"
+    },
+    "gray-4": {
+      "$type": "color",
+      "$value": "{light.gray.300}"
+    },
+    "gray-5": {
+      "$type": "color",
+      "$value": "{light.gray.700}"
+    },
+    "gray-6": {
+      "$type": "color",
+      "$value": "{light.gray.800}"
+    },
+    "gray-7": {
+      "$type": "color",
+      "$value": "{light.gray.900}"
+    },
+    "menu-bar": {
+      "$type": "color",
+      "$value": "{light.gray.50}"
+    },
+    "base-contrast": {
+      "$type": "color",
+      "$value": "{neutral.white}"
+    },
+    "gray-1-contrast": {
+      "$type": "color",
+      "$value": "{neutral.white}"
+    },
+    "gray-2-contrast": {
+      "$type": "color",
+      "$value": "{neutral.white}"
+    },
+    "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.600}"
+    },
+    "red-6": {
+      "$type": "color",
+      "$value": "{light.red.700}"
+    },
+    "red-7": {
+      "$type": "color",
+      "$value": "{light.red.800}"
+    },
+    "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.600}"
+    },
+    "green-6": {
+      "$type": "color",
+      "$value": "{light.green.700}"
+    },
+    "green-7": {
+      "$type": "color",
+      "$value": "{light.green.800}"
+    },
+    "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.600}"
+    },
+    "amber-6": {
+      "$type": "color",
+      "$value": "{light.amber.700}"
+    },
+    "amber-7": {
+      "$type": "color",
+      "$value": "{light.amber.800}"
+    },
+    "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.600}"
+    },
+    "blue-6": {
+      "$type": "color",
+      "$value": "{light.blue.700}"
+    },
+    "blue-7": {
+      "$type": "color",
+      "$value": "{light.blue.800}"
+    },
+    "orange-2": {
+      "$type": "color",
+      "$value": "{light.orange.100}"
+    },
+    "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.600}"
+    },
+    "violet-6": {
+      "$type": "color",
+      "$value": "{light.violet.700}"
+    },
+    "violet-7": {
+      "$type": "color",
+      "$value": "{light.violet.800}"
+    },
+    "cyan-2": {
+      "$type": "color",
+      "$value": "{light.cyan.100}"
+    },
+    "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.700}"
+    },
+    "gray-6": {
+      "$type": "color",
+      "$value": "{light.gray-alpha.800}"
+    },
+    "gray-7": {
+      "$type": "color",
+      "$value": "{light.gray-alpha.900}"
+    },
+    "menu-bar": {
+      "$type": "color",
+      "$value": "{light.gray.50}"
+    },
+    "base-contrast": {
+      "$type": "color",
+      "$value": "{neutral.white}"
+    },
+    "gray-1-contrast": {
+      "$type": "color",
+      "$value": "{neutral.white}"
+    },
+    "gray-2-contrast": {
+      "$type": "color",
+      "$value": "{neutral.white}"
+    },
+    "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.600}"
+    },
+    "red-6": {
+      "$type": "color",
+      "$value": "{light.red.700}"
+    },
+    "red-7": {
+      "$type": "color",
+      "$value": "{light.red.800}"
+    },
+    "gray-2-overlay": {
+      "$type": "color",
+      "$value": "{black-alpha.50}"
+    }
+  },
+  "ink": {
+    "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}"
+    },
+    "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}"
+    },
+    "red-1": {
+      "$type": "color",
+      "$value": "{light.red.50}"
+    },
+    "red-2": {
+      "$type": "color",
+      "$value": "{light.red.400}"
+    },
+    "red-3": {
+      "$type": "color",
+      "$value": "{light.red.500}"
+    },
+    "red-4": {
+      "$type": "color",
+      "$value": "{light.red.700}"
+    },
+    "green-1": {
+      "$type": "color",
+      "$value": "{light.green.50}"
+    },
+    "green-2": {
+      "$type": "color",
+      "$value": "{light.green.400}"
+    },
+    "green-3": {
+      "$type": "color",
+      "$value": "{light.green.500}"
+    },
+    "green-4": {
+      "$type": "color",
+      "$value": "{light.green.700}"
+    },
+    "green-6": {
+      "$type": "color",
+      "$value": "{light.green.600}"
+    },
+    "amber-1": {
+      "$type": "color",
+      "$value": "{light.amber.50}"
+    },
+    "amber-2": {
+      "$type": "color",
+      "$value": "{light.amber.400}"
+    },
+    "amber-3": {
+      "$type": "color",
+      "$value": "{light.amber.500}"
+    },
+    "amber-4": {
+      "$type": "color",
+      "$value": "{light.amber.700}"
+    },
+    "blue-1": {
+      "$type": "color",
+      "$value": "{light.blue.50}"
+    },
+    "blue-2": {
+      "$type": "color",
+      "$value": "{light.blue.400}"
+    },
+    "blue-3": {
+      "$type": "color",
+      "$value": "{light.blue.500}"
+    },
+    "blue-4": {
+      "$type": "color",
+      "$value": "{light.blue.700}"
+    },
+    "cyan-3": {
+      "$type": "color",
+      "$value": "{light.cyan.500}"
+    },
+    "violet-1": {
+      "$type": "color",
+      "$value": "{light.violet.50}"
+    },
+    "violet-2": {
+      "$type": "color",
+      "$value": "{light.violet.400}"
+    },
+    "violet-3": {
+      "$type": "color",
+      "$value": "{light.violet.500}"
+    },
+    "violet-4": {
+      "$type": "color",
+      "$value": "{light.violet.700}"
+    },
+    "blue-link": {
+      "$type": "color",
+      "$value": "{light.blue.400}"
+    },
+    "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}"
+    }
+  },
+  "outline": {
+    "base": {
+      "$type": "color",
+      "$value": "{neutral.white}"
+    },
+    "gray-1": {
+      "$type": "color",
+      "$value": "{light.gray.200}"
+    },
+    "gray-1-contrast": {
+      "$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}"
+    },
+    "gray-5": {
+      "$type": "color",
+      "$value": "{light.gray.800}"
+    },
+    "red-2": {
+      "$type": "color",
+      "$value": "{light.red.300}"
+    },
+    "red-3": {
+      "$type": "color",
+      "$value": "{light.red.400}"
+    },
+    "red-4": {
+      "$type": "color",
+      "$value": "{light.red.500}"
+    },
+    "green-2": {
+      "$type": "color",
+      "$value": "{light.green.300}"
+    },
+    "green-3": {
+      "$type": "color",
+      "$value": "{light.green.400}"
+    },
+    "green-4": {
+      "$type": "color",
+      "$value": "{light.green.500}"
+    },
+    "amber-2": {
+      "$type": "color",
+      "$value": "{light.amber.300}"
+    },
+    "amber-3": {
+      "$type": "color",
+      "$value": "{light.amber.400}"
+    },
+    "amber-4": {
+      "$type": "color",
+      "$value": "{light.amber.500}"
+    },
+    "blue-2": {
+      "$type": "color",
+      "$value": "{light.blue.300}"
+    },
+    "blue-3": {
+      "$type": "color",
+      "$value": "{light.blue.400}"
+    },
+    "blue-4": {
+      "$type": "color",
+      "$value": "{light.blue.500}"
+    },
+    "orange-3": {
+      "$type": "color",
+      "$value": "{light.orange.400}"
+    },
+    "violet-2": {
+      "$type": "color",
+      "$value": "{light.violet.300}"
+    },
+    "violet-3": {
+      "$type": "color",
+      "$value": "{light.violet.400}"
+    },
+    "violet-4": {
+      "$type": "color",
+      "$value": "{light.violet.500}"
+    },
+    "gray-modal": {
+      "$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.800}"
+    },
+    "red-2": {
+      "$type": "color",
+      "$value": "{light.red.300}"
+    },
+    "red-3": {
+      "$type": "color",
+      "$value": "{light.red.400}"
+    },
+    "red-4": {
+      "$type": "color",
+      "$value": "{light.red.500}"
+    },
+    "gray-modal": {
+      "$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..13686899b
--- /dev/null
+++ b/espresso-v2-design-tokens/Tokens.Mode 1.tokens.json	
@@ -0,0 +1,120 @@
+{
+  "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": "100px"
+    }
+  },
+  "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"
+    }
+  },
+  "max-width": {
+    "1": {
+      "$type": "dimension",
+      "$value": "75px"
+    }
+  }
+}
\ 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..19b28dadf
--- /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..341604051
--- /dev/null
+++ b/espresso-v2-design-tokens/text.styles.tokens.json
@@ -0,0 +1,1804 @@
+{
+  "text": {
+    "tiny": {
+      "regular": {
+        "$type": "typography",
+        "$value": {
+          "fontFamily": "Inter Variable",
+          "fontSize": "11px",
+          "fontWeight": 400,
+          "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": 700,
+          "letterSpacing": "9%",
+          "lineHeight": "115%",
+          "textTransform": "uppercase",
+          "textDecoration": "none"
+        }
+      }
+    },
+    "2xs": {
+      "regular": {
+        "$type": "typography",
+        "$value": {
+          "fontFamily": "Inter Variable",
+          "fontSize": "11px",
+          "fontWeight": 400,
+          "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": 700,
+          "letterSpacing": "1%",
+          "lineHeight": "115%",
+          "textTransform": "none",
+          "textDecoration": "none"
+        }
+      }
+    },
+    "xs": {
+      "regular": {
+        "$type": "typography",
+        "$value": {
+          "fontFamily": "Inter Variable",
+          "fontSize": "12px",
+          "fontWeight": 400,
+          "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": 700,
+          "letterSpacing": "1.5%",
+          "lineHeight": "115%",
+          "textTransform": "none",
+          "textDecoration": "none"
+        }
+      }
+    },
+    "sm": {
+      "regular": {
+        "$type": "typography",
+        "$value": {
+          "fontFamily": "Inter Variable",
+          "fontSize": "13px",
+          "fontWeight": 100,
+          "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": 700,
+          "letterSpacing": "1.5%",
+          "lineHeight": "115%",
+          "textTransform": "none",
+          "textDecoration": "none"
+        }
+      }
+    },
+    "base": {
+      "regular": {
+        "$type": "typography",
+        "$value": {
+          "fontFamily": "Inter Variable",
+          "fontSize": "14px",
+          "fontWeight": 100,
+          "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"
+        }
+      },
+      "black": {
+        "$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": "16px",
+          "fontWeight": 400,
+          "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": 700,
+          "letterSpacing": "1.5%",
+          "lineHeight": "115%",
+          "textTransform": "none",
+          "textDecoration": "none"
+        }
+      }
+    },
+    "xl": {
+      "regular": {
+        "$type": "typography",
+        "$value": {
+          "fontFamily": "Inter Variable",
+          "fontSize": "18px",
+          "fontWeight": 400,
+          "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": 700,
+          "letterSpacing": "1%",
+          "lineHeight": "115%",
+          "textTransform": "none",
+          "textDecoration": "none"
+        }
+      }
+    },
+    "2xl": {
+      "regular": {
+        "$type": "typography",
+        "$value": {
+          "fontFamily": "Inter Variable",
+          "fontSize": "20px",
+          "fontWeight": 400,
+          "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": 700,
+          "letterSpacing": "1%",
+          "lineHeight": "115%",
+          "textTransform": "none",
+          "textDecoration": "none"
+        }
+      }
+    },
+    "3xl": {
+      "regular": {
+        "$type": "typography",
+        "$value": {
+          "fontFamily": "Inter Variable",
+          "fontSize": "24px",
+          "fontWeight": 400,
+          "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": 700,
+          "letterSpacing": "0.5%",
+          "lineHeight": "115%",
+          "textTransform": "none",
+          "textDecoration": "none"
+        }
+      }
+    },
+    "4xl": {
+      "regular": {
+        "$type": "typography",
+        "$value": {
+          "fontFamily": "Inter Variable",
+          "fontSize": "26px",
+          "fontWeight": 400,
+          "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": 700,
+          "letterSpacing": "1%",
+          "lineHeight": "160%",
+          "textTransform": "none",
+          "textDecoration": "none"
+        }
+      }
+    },
+    "5xl": {
+      "regular": {
+        "$type": "typography",
+        "$value": {
+          "fontFamily": "Inter Variable",
+          "fontSize": "28px",
+          "fontWeight": 400,
+          "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": 700,
+          "letterSpacing": "1%",
+          "lineHeight": "160%",
+          "textTransform": "none",
+          "textDecoration": "none"
+        }
+      }
+    },
+    "6xl": {
+      "regular": {
+        "$type": "typography",
+        "$value": {
+          "fontFamily": "Inter Variable",
+          "fontSize": "32px",
+          "fontWeight": 400,
+          "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": 700,
+          "letterSpacing": "0.5%",
+          "lineHeight": "160%",
+          "textTransform": "none",
+          "textDecoration": "none"
+        }
+      }
+    },
+    "7xl": {
+      "regular": {
+        "$type": "typography",
+        "$value": {
+          "fontFamily": "Inter Variable",
+          "fontSize": "40px",
+          "fontWeight": 400,
+          "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": 700,
+          "letterSpacing": "0%",
+          "lineHeight": "140%",
+          "textTransform": "none",
+          "textDecoration": "none"
+        }
+      }
+    },
+    "8xl": {
+      "regular": {
+        "$type": "typography",
+        "$value": {
+          "fontFamily": "Inter Variable",
+          "fontSize": "44px",
+          "fontWeight": 400,
+          "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": 700,
+          "letterSpacing": "0%",
+          "lineHeight": "140%",
+          "textTransform": "none",
+          "textDecoration": "none"
+        }
+      }
+    },
+    "9xl": {
+      "regular": {
+        "$type": "typography",
+        "$value": {
+          "fontFamily": "Inter Variable",
+          "fontSize": "48px",
+          "fontWeight": 400,
+          "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": 700,
+          "letterSpacing": "0.5%",
+          "lineHeight": "140%",
+          "textTransform": "none",
+          "textDecoration": "none"
+        }
+      }
+    },
+    "10xl": {
+      "regular": {
+        "$type": "typography",
+        "$value": {
+          "fontFamily": "Inter Variable",
+          "fontSize": "52px",
+          "fontWeight": 400,
+          "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": 700,
+          "letterSpacing": "0.5%",
+          "lineHeight": "140%",
+          "textTransform": "none",
+          "textDecoration": "none"
+        }
+      }
+    },
+    "11xl": {
+      "regular": {
+        "$type": "typography",
+        "$value": {
+          "fontFamily": "Inter Variable",
+          "fontSize": "56px",
+          "fontWeight": 400,
+          "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": 700,
+          "letterSpacing": "0%",
+          "lineHeight": "140%",
+          "textTransform": "none",
+          "textDecoration": "none"
+        }
+      }
+    },
+    "12xl": {
+      "regular": {
+        "$type": "typography",
+        "$value": {
+          "fontFamily": "Inter Variable",
+          "fontSize": "64px",
+          "fontWeight": 400,
+          "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": 700,
+          "letterSpacing": "0%",
+          "lineHeight": "130%",
+          "textTransform": "none",
+          "textDecoration": "none"
+        }
+      }
+    },
+    "13xl": {
+      "regular": {
+        "$type": "typography",
+        "$value": {
+          "fontFamily": "Inter Variable",
+          "fontSize": "72px",
+          "fontWeight": 400,
+          "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": 700,
+          "letterSpacing": "0%",
+          "lineHeight": "130%",
+          "textTransform": "none",
+          "textDecoration": "none"
+        }
+      }
+    },
+    "14xl": {
+      "regular": {
+        "$type": "typography",
+        "$value": {
+          "fontFamily": "Inter Variable",
+          "fontSize": "80px",
+          "fontWeight": 400,
+          "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": 700,
+          "letterSpacing": "0%",
+          "lineHeight": "120%",
+          "textTransform": "none",
+          "textDecoration": "none"
+        }
+      }
+    },
+    "15xl": {
+      "regular": {
+        "$type": "typography",
+        "$value": {
+          "fontFamily": "Inter Variable",
+          "fontSize": "88px",
+          "fontWeight": 400,
+          "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": 700,
+          "letterSpacing": "0%",
+          "lineHeight": "120%",
+          "textTransform": "none",
+          "textDecoration": "none"
+        }
+      }
+    }
+  },
+  "paragraph": {
+    "2xs": {
+      "regular": {
+        "$type": "typography",
+        "$value": {
+          "fontFamily": "Inter Variable",
+          "fontSize": "11px",
+          "fontWeight": 400,
+          "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": 700,
+          "letterSpacing": "1%",
+          "lineHeight": "160%",
+          "textTransform": "none",
+          "textDecoration": "none"
+        }
+      }
+    },
+    "xs": {
+      "regular": {
+        "$type": "typography",
+        "$value": {
+          "fontFamily": "Inter Variable",
+          "fontSize": "12px",
+          "fontWeight": 400,
+          "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": 700,
+          "letterSpacing": "1.5%",
+          "lineHeight": "160%",
+          "textTransform": "none",
+          "textDecoration": "none"
+        }
+      }
+    },
+    "sm": {
+      "regular": {
+        "$type": "typography",
+        "$value": {
+          "fontFamily": "Inter Variable",
+          "fontSize": "13px",
+          "fontWeight": 100,
+          "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": 700,
+          "letterSpacing": "1.5%",
+          "lineHeight": "150%",
+          "textTransform": "none",
+          "textDecoration": "none"
+        }
+      }
+    },
+    "base": {
+      "regular": {
+        "$type": "typography",
+        "$value": {
+          "fontFamily": "Inter Variable",
+          "fontSize": "14px",
+          "fontWeight": 400,
+          "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": 700,
+          "letterSpacing": "1.5%",
+          "lineHeight": "150%",
+          "textTransform": "none",
+          "textDecoration": "none"
+        }
+      }
+    },
+    "lg": {
+      "regular": {
+        "$type": "typography",
+        "$value": {
+          "fontFamily": "Inter Variable",
+          "fontSize": "16px",
+          "fontWeight": 400,
+          "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": 700,
+          "letterSpacing": "1.5%",
+          "lineHeight": "150%",
+          "textTransform": "none",
+          "textDecoration": "none"
+        }
+      }
+    },
+    "xl": {
+      "regular": {
+        "$type": "typography",
+        "$value": {
+          "fontFamily": "Inter Variable",
+          "fontSize": "18px",
+          "fontWeight": 400,
+          "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": 700,
+          "letterSpacing": "1%",
+          "lineHeight": "150%",
+          "textTransform": "none",
+          "textDecoration": "none"
+        }
+      }
+    },
+    "2xl": {
+      "regular": {
+        "$type": "typography",
+        "$value": {
+          "fontFamily": "Inter Variable",
+          "fontSize": "20px",
+          "fontWeight": 400,
+          "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": 700,
+          "letterSpacing": "1%",
+          "lineHeight": "148%",
+          "textTransform": "none",
+          "textDecoration": "none"
+        }
+      }
+    },
+    "3xl": {
+      "regular": {
+        "$type": "typography",
+        "$value": {
+          "fontFamily": "Inter Variable",
+          "fontSize": "24px",
+          "fontWeight": 400,
+          "letterSpacing": "0.5px",
+          "lineHeight": "140%",
+          "textTransform": "none",
+          "textDecoration": "none"
+        }
+      },
+      "medium": {
+        "$type": "typography",
+        "$value": {
+          "fontFamily": "Inter Variable",
+          "fontSize": "24px",
+          "fontWeight": 500,
+          "letterSpacing": "0.5px",
+          "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": 700,
+          "letterSpacing": "0.5%",
+          "lineHeight": "140%",
+          "textTransform": "none",
+          "textDecoration": "none"
+        }
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git "a/espresso-v2-design-tokens/\360\237\224\265 Colour primitives.Light.tokens.json" "b/espresso-v2-design-tokens/\360\237\224\265 Colour primitives.Light.tokens.json"
new file mode 100644
index 000000000..49d278569
--- /dev/null
+++ "b/espresso-v2-design-tokens/\360\237\224\265 Colour primitives.Light.tokens.json"	
@@ -0,0 +1,1358 @@
+{
+  "neutral": {
+    "white": {
+      "$type": "color",
+      "$value": "#ffffff"
+    },
+    "black": {
+      "$type": "color",
+      "$value": "#000000"
+    }
+  },
+  "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": "#f0f7fc"
+      },
+      "100": {
+        "$type": "color",
+        "$value": "#e6f4ff"
+      },
+      "200": {
+        "$type": "color",
+        "$value": "#c8e6ff"
+      },
+      "300": {
+        "$type": "color",
+        "$value": "#a7d7fd"
+      },
+      "400": {
+        "$type": "color",
+        "$value": "#73bbf6"
+      },
+      "500": {
+        "$type": "color",
+        "$value": "#0289f7"
+      },
+      "600": {
+        "$type": "color",
+        "$value": "#007be0"
+      },
+      "700": {
+        "$type": "color",
+        "$value": "#0070cc"
+      },
+      "800": {
+        "$type": "color",
+        "$value": "#005ca3"
+      },
+      "900": {
+        "$type": "color",
+        "$value": "#004880"
+      },
+      "950": {
+        "$type": "color",
+        "$value": "#032e63"
+      }
+    },
+    "green": {
+      "50": {
+        "$type": "color",
+        "$value": "#f1fbf5"
+      },
+      "100": {
+        "$type": "color",
+        "$value": "#e4faeb"
+      },
+      "200": {
+        "$type": "color",
+        "$value": "#c3f9d3"
+      },
+      "300": {
+        "$type": "color",
+        "$value": "#a6efc0"
+      },
+      "400": {
+        "$type": "color",
+        "$value": "#78e09f"
+      },
+      "500": {
+        "$type": "color",
+        "$value": "#46b37e"
+      },
+      "600": {
+        "$type": "color",
+        "$value": "#268c5c"
+      },
+      "700": {
+        "$type": "color",
+        "$value": "#137949"
+      },
+      "800": {
+        "$type": "color",
+        "$value": "#075e35"
+      },
+      "900": {
+        "$type": "color",
+        "$value": "#173b2c"
+      },
+      "950": {
+        "$type": "color",
+        "$value": "#0a3020"
+      }
+    },
+    "red": {
+      "50": {
+        "$type": "color",
+        "$value": "#fff7f7"
+      },
+      "100": {
+        "$type": "color",
+        "$value": "#ffe7e7"
+      },
+      "200": {
+        "$type": "color",
+        "$value": "#ffd8d8"
+      },
+      "300": {
+        "$type": "color",
+        "$value": "#fdc2c2"
+      },
+      "400": {
+        "$type": "color",
+        "$value": "#f79596"
+      },
+      "500": {
+        "$type": "color",
+        "$value": "#e03636"
+      },
+      "600": {
+        "$type": "color",
+        "$value": "#cc2929"
+      },
+      "700": {
+        "$type": "color",
+        "$value": "#b52a2a"
+      },
+      "800": {
+        "$type": "color",
+        "$value": "#941f1f"
+      },
+      "900": {
+        "$type": "color",
+        "$value": "#6b1515"
+      },
+      "950": {
+        "$type": "color",
+        "$value": "#4c0d0d"
+      }
+    },
+    "amber": {
+      "50": {
+        "$type": "color",
+        "$value": "#fdfaed"
+      },
+      "100": {
+        "$type": "color",
+        "$value": "#fff7d3"
+      },
+      "200": {
+        "$type": "color",
+        "$value": "#feeda9"
+      },
+      "300": {
+        "$type": "color",
+        "$value": "#fbdb73"
+      },
+      "400": {
+        "$type": "color",
+        "$value": "#fbc53f"
+      },
+      "500": {
+        "$type": "color",
+        "$value": "#e79913"
+      },
+      "600": {
+        "$type": "color",
+        "$value": "#d47408"
+      },
+      "700": {
+        "$type": "color",
+        "$value": "#b35309"
+      },
+      "800": {
+        "$type": "color",
+        "$value": "#91400d"
+      },
+      "900": {
+        "$type": "color",
+        "$value": "#763813"
+      },
+      "950": {
+        "$type": "color",
+        "$value": "#4e2209"
+      }
+    },
+    "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"
+      }
+    },
+    "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": "#512a09"
+      }
+    },
+    "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"
+      }
+    },
+    "violet": {
+      "50": {
+        "$type": "color",
+        "$value": "#f5f3fc"
+      },
+      "100": {
+        "$type": "color",
+        "$value": "#eee8ff"
+      },
+      "200": {
+        "$type": "color",
+        "$value": "#dbd5ff"
+      },
+      "300": {
+        "$type": "color",
+        "$value": "#c9bafb"
+      },
+      "400": {
+        "$type": "color",
+        "$value": "#a68efe"
+      },
+      "500": {
+        "$type": "color",
+        "$value": "#7757ee"
+      },
+      "600": {
+        "$type": "color",
+        "$value": "#6b53d0"
+      },
+      "700": {
+        "$type": "color",
+        "$value": "#4f3da1"
+      },
+      "800": {
+        "$type": "color",
+        "$value": "#392980"
+      },
+      "900": {
+        "$type": "color",
+        "$value": "#251959"
+      },
+      "950": {
+        "$type": "color",
+        "$value": "#150655"
+      }
+    }
+  },
+  "dark": {
+    "gray": {
+      "50": {
+        "$type": "color",
+        "$value": "#f8f8f8"
+      },
+      "100": {
+        "$type": "color",
+        "$value": "#d9d9d9"
+      },
+      "200": {
+        "$type": "color",
+        "$value": "#afafaf"
+      },
+      "300": {
+        "$type": "color",
+        "$value": "#808080"
+      },
+      "400": {
+        "$type": "color",
+        "$value": "#717171"
+      },
+      "450": {
+        "$type": "color",
+        "$value": "#575757"
+      },
+      "500": {
+        "$type": "color",
+        "$value": "#424242"
+      },
+      "600": {
+        "$type": "color",
+        "$value": "#343434"
+      },
+      "700": {
+        "$type": "color",
+        "$value": "#2b2b2b"
+      },
+      "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": "#ffffffd1"
+      },
+      "200": {
+        "$type": "color",
+        "$value": "#ffffffab"
+      },
+      "300": {
+        "$type": "color",
+        "$value": "#ffffff78"
+      },
+      "400": {
+        "$type": "color",
+        "$value": "#ffffff69"
+      },
+      "450": {
+        "$type": "color",
+        "$value": "#ffffff4d"
+      },
+      "500": {
+        "$type": "color",
+        "$value": "#ffffff36"
+      },
+      "600": {
+        "$type": "color",
+        "$value": "#ffffff26"
+      },
+      "700": {
+        "$type": "color",
+        "$value": "#ffffff1f"
+      },
+      "800": {
+        "$type": "color",
+        "$value": "#ffffff14"
+      },
+      "900": {
+        "$type": "color",
+        "$value": "#ffffff0f"
+      },
+      "950": {
+        "$type": "color",
+        "$value": "#0000000a"
+      }
+    },
+    "blue": {
+      "50": {
+        "$type": "color",
+        "$value": "#c9e0f5"
+      },
+      "100": {
+        "$type": "color",
+        "$value": "#add2f5"
+      },
+      "200": {
+        "$type": "color",
+        "$value": "#8cc1ec"
+      },
+      "300": {
+        "$type": "color",
+        "$value": "#5aaef2"
+      },
+      "400": {
+        "$type": "color",
+        "$value": "#2a8edf"
+      },
+      "500": {
+        "$type": "color",
+        "$value": "#1580d8"
+      },
+      "600": {
+        "$type": "color",
+        "$value": "#155999"
+      },
+      "700": {
+        "$type": "color",
+        "$value": "#063d71"
+      },
+      "800": {
+        "$type": "color",
+        "$value": "#052b53"
+      },
+      "900": {
+        "$type": "color",
+        "$value": "#10233d"
+      },
+      "950": {
+        "$type": "color",
+        "$value": "#0e1c2f"
+      }
+    },
+    "green": {
+      "50": {
+        "$type": "color",
+        "$value": "#c8f3de"
+      },
+      "100": {
+        "$type": "color",
+        "$value": "#9be6c1"
+      },
+      "200": {
+        "$type": "color",
+        "$value": "#78d7a9"
+      },
+      "300": {
+        "$type": "color",
+        "$value": "#58c08e"
+      },
+      "400": {
+        "$type": "color",
+        "$value": "#469170"
+      },
+      "500": {
+        "$type": "color",
+        "$value": "#148950"
+      },
+      "600": {
+        "$type": "color",
+        "$value": "#077241"
+      },
+      "700": {
+        "$type": "color",
+        "$value": "#035831"
+      },
+      "800": {
+        "$type": "color",
+        "$value": "#0a3f27"
+      },
+      "900": {
+        "$type": "color",
+        "$value": "#0c2d1c"
+      },
+      "950": {
+        "$type": "color",
+        "$value": "#0b1e14"
+      }
+    },
+    "red": {
+      "50": {
+        "$type": "color",
+        "$value": "#ffdede"
+      },
+      "100": {
+        "$type": "color",
+        "$value": "#ffc1c1"
+      },
+      "200": {
+        "$type": "color",
+        "$value": "#fe7c7c"
+      },
+      "300": {
+        "$type": "color",
+        "$value": "#eb4d52"
+      },
+      "400": {
+        "$type": "color",
+        "$value": "#ce5a5a"
+      },
+      "500": {
+        "$type": "color",
+        "$value": "#b01f1f"
+      },
+      "600": {
+        "$type": "color",
+        "$value": "#862020"
+      },
+      "700": {
+        "$type": "color",
+        "$value": "#661717"
+      },
+      "800": {
+        "$type": "color",
+        "$value": "#521515"
+      },
+      "900": {
+        "$type": "color",
+        "$value": "#441316"
+      },
+      "950": {
+        "$type": "color",
+        "$value": "#271111"
+      }
+    },
+    "red-alpha": {
+      "50": {
+        "$type": "color",
+        "$value": "#ffdede"
+      },
+      "100": {
+        "$type": "color",
+        "$value": "#ffc1c1"
+      },
+      "200": {
+        "$type": "color",
+        "$value": "#fe7c7c"
+      },
+      "300": {
+        "$type": "color",
+        "$value": "#ff5858f0"
+      },
+      "400": {
+        "$type": "color",
+        "$value": "#fa3c3cd9"
+      },
+      "500": {
+        "$type": "color",
+        "$value": "#ed2222ba"
+      },
+      "600": {
+        "$type": "color",
+        "$value": "#ed2d2d8a"
+      },
+      "700": {
+        "$type": "color",
+        "$value": "#c120207d"
+      },
+      "800": {
+        "$type": "color",
+        "$value": "#c01b1b61"
+      },
+      "900": {
+        "$type": "color",
+        "$value": "#5f16168f"
+      },
+      "950": {
+        "$type": "color",
+        "$value": "#53060666"
+      }
+    },
+    "amber": {
+      "50": {
+        "$type": "color",
+        "$value": "#ffe59a"
+      },
+      "100": {
+        "$type": "color",
+        "$value": "#f4c25f"
+      },
+      "200": {
+        "$type": "color",
+        "$value": "#ffaa3e"
+      },
+      "300": {
+        "$type": "color",
+        "$value": "#fa961f"
+      },
+      "400": {
+        "$type": "color",
+        "$value": "#c87a2d"
+      },
+      "500": {
+        "$type": "color",
+        "$value": "#bd660f"
+      },
+      "600": {
+        "$type": "color",
+        "$value": "#975215"
+      },
+      "700": {
+        "$type": "color",
+        "$value": "#753a07"
+      },
+      "800": {
+        "$type": "color",
+        "$value": "#4b2606"
+      },
+      "900": {
+        "$type": "color",
+        "$value": "#371e06"
+      },
+      "950": {
+        "$type": "color",
+        "$value": "#281808"
+      }
+    },
+    "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"
+      }
+    },
+    "violet": {
+      "50": {
+        "$type": "color",
+        "$value": "#cdbeff"
+      },
+      "100": {
+        "$type": "color",
+        "$value": "#bca9fc"
+      },
+      "200": {
+        "$type": "color",
+        "$value": "#9f87ed"
+      },
+      "300": {
+        "$type": "color",
+        "$value": "#9478f8"
+      },
+      "400": {
+        "$type": "color",
+        "$value": "#9683d8"
+      },
+      "500": {
+        "$type": "color",
+        "$value": "#785fce"
+      },
+      "600": {
+        "$type": "color",
+        "$value": "#403397"
+      },
+      "700": {
+        "$type": "color",
+        "$value": "#3d3286"
+      },
+      "800": {
+        "$type": "color",
+        "$value": "#291d64"
+      },
+      "900": {
+        "$type": "color",
+        "$value": "#1f1841"
+      },
+      "950": {
+        "$type": "color",
+        "$value": "#18142e"
+      }
+    }
+  },
+  "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/package.json b/package.json
index 1605273dd..caefcadde 100644
--- a/package.json
+++ b/package.json
@@ -25,7 +25,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": {
     ".": {
diff --git a/spec/README.md b/spec/README.md
index ca4050c8d..86c81d1fa 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/0004-typography-style-utilities.md b/spec/adr/0004-typography-style-utilities.md
new file mode 100644
index 000000000..6ecea70f9
--- /dev/null
+++ b/spec/adr/0004-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/0005-focus-ring-2px.md b/spec/adr/0005-focus-ring-2px.md
new file mode 100644
index 000000000..563a4cf45
--- /dev/null
+++ b/spec/adr/0005-focus-ring-2px.md
@@ -0,0 +1,42 @@
+# Focus ring is 2px
+
+**Status**: accepted
+
+## 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 typography variables expose these as `focus/light/default` and `focus/light/red`.
+
+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
+
+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.
+
+Theme color mapping for the ring stop:
+
+| Theme | Ring color utility |
+|---|---|
+| gray (default) | `ring-outline-gray-3` |
+| red    | `ring-outline-red-2` |
+| blue   | `ring-blue-400` |
+| green  | `ring-outline-green-2` |
+
+Blue and green theme ring colors are project conventions — Figma does not define focus colors for those themes (see [`foundations.md`](../foundations.md#themes--colors)).
+
+## Rationale
+
+- Tailwind's `ring` defaults to 3px because that's Tailwind's house style, not a design-system decision. Adopting `ring-2` brings the implementation to the Figma spec without re-implementing the box-shadow machinery.
+- Using `ring-2` instead of a custom `shadow-[0_0_0_2px_…]` keeps consumer-app dark-mode overrides via `--tw-ring-color` working, and preserves the existing CSS-variable plumbing.
+- The 90%-opacity color stop (`E5` alpha in Figma) is approximated by the solid `outline-gray-3` / `outline-red-2` tokens. The visual difference is sub-perceptual against most backgrounds; if exact alpha is needed later, the `ring-<color>` token can be redefined globally.
+
+## Consequences
+
+- Every interactive component (Button, FormControl, Tabs, Checkbox, MenuItem, etc.) should converge on `focus-visible:ring-2 focus-visible:ring-<themed-color>`. Existing usages of bare `focus-visible:ring` are drift and should migrate.
+- Button is the first migration; verified against Figma node `25393-27651`.
+- `form-input` / `form-textarea` / `form-select` already use `focus-visible:ring-2` in `tailwind/plugin.js` — no change needed there.
+- If a future Figma update changes the ring width, this is a single-token change (`ring-2` → `ring-<n>`) per component.
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/README.md b/spec/adr/README.md
index 8b6a80ac5..33dd94360 100644
--- a/spec/adr/README.md
+++ b/spec/adr/README.md
@@ -9,3 +9,6 @@ Specs describe the current contract. ADRs explain why decisions were made. Super
 | [0001 — Single `Dialog` component](./0001-single-dialog-component.md) | Accepted | One modal component; no separate `AlertDialog`. |
 | [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 — Named typography style utilities](./0004-typography-style-utilities.md) | Accepted | `text-{size}-medium` utilities for Figma's medium-weight tracking. |
+| [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. |
diff --git a/spec/foundations.md b/spec/foundations.md
new file mode 100644
index 000000000..241a2bc5c
--- /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/0004-typography-style-utilities.md`](./adr/0004-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-0004](./adr/0004-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-0004](./adr/0004-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-2`   | `focus/light/red` |
+| blue   | `ring-blue-400`         | code-only |
+| green  | `ring-outline-green-2`  | 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/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..682c47049 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-4')
     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-4')
     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-4')
+    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-4')
+    cy.get('.inline-flex.rounded-full').should('have.class', 'bg-surface-amber-2')
 
     // Red
     cy.mount(Badge, {
@@ -73,10 +83,20 @@ describe('<Badge />', () => {
     })
     cy.get('.inline-flex.rounded-full').should('have.class', 'text-ink-red-4')
     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-4')
+    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',
@@ -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..ee0aed729 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-white bg-surface-gray-7',
+      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-5',
+      subtle: 'text-ink-blue-4 bg-surface-blue-2',
+      outline: 'text-ink-blue-4 border border-outline-blue-2',
+      ghost: 'text-ink-blue-4',
+    },
+    green: {
+      solid: 'text-ink-green-1 bg-surface-green-5',
+      subtle: 'text-ink-green-4 bg-surface-green-2',
+      outline: 'text-ink-green-4 border border-outline-green-2',
+      ghost: 'text-ink-green-4',
+    },
+    amber: {
+      solid: 'text-ink-amber-1 bg-surface-amber-5',
+      subtle: 'text-ink-amber-4 bg-surface-amber-2',
+      outline: 'text-ink-amber-4 border border-outline-amber-2',
+      ghost: 'text-ink-amber-4',
+    },
+    red: {
+      solid: 'text-ink-red-1 bg-surface-red-5',
+      subtle: 'text-ink-red-4 bg-surface-red-2',
+      outline: 'text-ink-red-4 border border-outline-red-2',
+      ghost: 'text-ink-red-4',
+    },
+    violet: {
+      solid: 'text-ink-violet-1 bg-surface-violet-5',
+      subtle: 'text-ink-violet-4 bg-surface-violet-2',
+      outline: 'text-ink-violet-4 border border-outline-violet-2',
+      ghost: 'text-ink-violet-4',
+    },
+  }[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..9baf94e11
--- /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-5',
+    value: '$24.5k',
+  },
+  {
+    name: 'Globex',
+    owner: 'Sammy Well',
+    status: 'In Progress',
+    theme: 'blue',
+    dotClass: 'bg-surface-blue-5',
+    value: '$18.2k',
+  },
+  {
+    name: 'Initech',
+    owner: 'Brian Robinson',
+    status: 'On Hold',
+    theme: 'amber',
+    dotClass: 'bg-surface-amber-5',
+    value: '$9.8k',
+  },
+  {
+    name: 'Soylent',
+    owner: 'Matt Clinton',
+    status: 'Lost',
+    theme: 'red',
+    dotClass: 'bg-surface-red-5',
+    value: '$4.1k',
+  },
+  {
+    name: 'Umbrella',
+    owner: 'Jane Cooper',
+    status: 'New',
+    theme: 'gray',
+    dotClass: 'bg-surface-gray-5',
+    value: '$12.0k',
+  },
+]
+</script>
+
+<template>
+  <div
+    class="w-full max-w-[640px] overflow-hidden rounded-lg border border-outline-gray-1 bg-surface-white 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 font-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 font-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 font-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.vue b/src/components/Breadcrumbs/Breadcrumbs.vue
index 1ca275fd4..5ed9f2587 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-lg font-medium focus:outline-none focus-visible:focus-ring"
           :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-lg font-medium focus:outline-none focus-visible:focus-ring"
           :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-lg font-medium focus:outline-none focus-visible:focus-ring"
           :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 ff4a858fe..3b9de3750 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-lg-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 b8aa98273..9872936c1 100644
--- a/src/components/Button/Button.vue
+++ b/src/components/Button/Button.vue
@@ -12,6 +12,7 @@
       <LoadingIndicator
         v-if="loading"
         :class="{
+          'h-2.5 w-2.5': size == 'xs',
           'h-3 w-3': size == 'sm',
           'h-[13.5px] w-[13.5px]': size == 'md',
           'h-[15px] w-[15px]': size == 'lg',
@@ -142,10 +143,10 @@ const buttonClasses = computed(() => {
   }[props.theme]
 
   let 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: 'focus-visible:focus-ring',
+    blue: 'focus-visible:focus-ring-blue',
+    green: 'focus-visible:focus-ring-green',
+    red: 'focus-visible:focus-ring-red',
   }[props.theme]
 
   let variantClasses = {
@@ -185,20 +186,22 @@ const buttonClasses = computed(() => {
   let disabledClasses = disabledClassesMap[themeVariant]
 
   let sizeClasses = {
-    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',
-    xl: 'h-11.5 text-xl font-medium px-3.5 rounded-lg',
-    '2xl': 'h-13 text-2xl font-medium px-3.5 rounded-xl',
+    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-lg-medium px-3 rounded-5',
+    xl: 'h-11.5 text-xl font-medium px-3.5 rounded-6',
+    '2xl': 'h-13 text-2xl font-medium px-3.5 rounded-7',
   }[props.size]
 
   if (isIconButton.value) {
     sizeClasses = {
-      sm: 'h-7 w-7 rounded',
-      md: 'h-8 w-8 rounded',
-      lg: 'h-10 w-10 rounded-md',
-      xl: 'h-11.5 w-11.5 rounded-lg',
-      '2xl': 'h-13 w-13 rounded-xl',
+      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',
+      xl: 'h-11.5 w-11.5 rounded-6',
+      '2xl': 'h-13 w-13 rounded-7',
     }[props.size]
   }
 
@@ -212,6 +215,7 @@ const buttonClasses = computed(() => {
 
 const slotClasses = computed(() => {
   let classes = {
+    xs: 'h-3.5',
     sm: 'h-4',
     md: 'h-4.5',
     lg: 'h-5',
@@ -224,6 +228,7 @@ const slotClasses = computed(() => {
 
 const lucideSlotClasses = computed(() => {
   return {
+    xs: 'size-3.5',
     sm: 'size-4',
     md: 'size-4.5',
     lg: 'size-5',
diff --git a/src/components/Button/stories/Icons.vue b/src/components/Button/stories/Icons.vue
deleted file mode 100644
index 47cb8f43f..000000000
--- a/src/components/Button/stories/Icons.vue
+++ /dev/null
@@ -1,27 +0,0 @@
-<script setup>
-import { Button } 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 :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..5703887dd
--- /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-white 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..c7b2b16dd
--- /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-white 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..0545532e6
--- /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-white 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 af481c64a..000000000
--- a/src/components/Button/stories/Sizes.vue
+++ /dev/null
@@ -1,11 +0,0 @@
-<script setup>
-import { Button } from 'frappe-ui'
-</script>
-
-<template>
-  <Button size="sm">Button</Button>
-  <Button size="md">Button</Button>
-  <Button size="lg">Button</Button>
-  <Button size="xl">Button</Button>
-  <Button size="2xl">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 1d2e1898d..000000000
--- a/src/components/Button/stories/Themes.vue
+++ /dev/null
@@ -1,10 +0,0 @@
-<script setup>
-import { Button } from 'frappe-ui'
-</script>
-
-<template>
-  <Button theme="gray">Gray</Button>
-  <Button theme="blue">Blue</Button>
-  <Button theme="green">Green</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/Button/types.ts b/src/components/Button/types.ts
index 7848f3531..21b0667f6 100644
--- a/src/components/Button/types.ts
+++ b/src/components/Button/types.ts
@@ -2,7 +2,7 @@ import { type RouterLinkProps } from 'vue-router'
 import { type Component } from 'vue'
 
 type Theme = 'gray' | 'blue' | 'green' | 'red'
-type Size = 'sm' | 'md' | 'md' | 'lg' | 'xl' | '2xl'
+type Size = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl'
 type Variant = 'solid' | 'subtle' | 'outline' | 'ghost'
 
 export interface ButtonProps {
diff --git a/src/components/Checkbox/Checkbox.vue b/src/components/Checkbox/Checkbox.vue
index d8e44533c..e3b4e42e6 100644
--- a/src/components/Checkbox/Checkbox.vue
+++ b/src/components/Checkbox/Checkbox.vue
@@ -135,7 +135,7 @@ const inputClasses = computed(() => {
     ? ''
     : 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 focus-visible:focus-ring active:bg-surface-gray-2'
 
   let sizeClasses = {
     sm: 'w-3.5 h-3.5',
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/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/MultiSelect/stories/TagsTrigger.vue b/src/components/MultiSelect/stories/TagsTrigger.vue
index faa483e99..644bfbd5b 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 outline-none transition-colors hover:border-outline-gray-modals focus-visible:focus-ring 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/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..c21eb472f
--- /dev/null
+++ b/src/components/Pill/Pill.vue
@@ -0,0 +1,158 @@
+<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 has no bottom (or inner) border so it merges into the
+    // panel below. The white pseudo must extend past the pill's borders
+    // in the cross-axis (top:-px bottom:-px or left:-px right:-px) so the
+    // gray rail doesn't peek out where the pill's own border sits.
+    if (props.browserTabBase === 'left') {
+      return 'relative border border-l-0 border-outline-gray-1 bg-surface-white after:absolute after:-left-px after:-top-px after:-bottom-px after:w-px after:bg-surface-white'
+    }
+
+    if (props.browserTabBase === 'right') {
+      return 'relative border border-r-0 border-outline-gray-1 bg-surface-white after:absolute after:-right-px after:-top-px after:-bottom-px after:w-px after:bg-surface-white'
+    }
+
+    return 'relative border border-b-0 border-outline-gray-1 bg-surface-white after:absolute after:-inset-x-px after:-bottom-px after:h-px after:bg-surface-white'
+  }
+
+  if (props.variant === 'outline') {
+    return props.active
+      ? 'border border-transparent bg-surface-white 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-gray-2-contrast 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/Rating/Rating.vue b/src/components/Rating/Rating.vue
index 05d862f25..ab8fe1d38 100644
--- a/src/components/Rating/Rating.vue
+++ b/src/components/Rating/Rating.vue
@@ -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 focus:outline-none focus-visible:focus-ring"
       :class="hasLabeling ? null : (attrs.class as any)"
       :style="hasLabeling ? null : (attrs.style as any)"
       :role="isSliderMode ? 'slider' : 'radiogroup'"
@@ -44,7 +44,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 focus:outline-none focus-visible:focus-ring rounded-sm"
         :class="[
           sizeClass,
           props.readonly ? 'cursor-default' : 'cursor-pointer',
diff --git a/src/components/Select/utils.ts b/src/components/Select/utils.ts
index 4ed0c163b..74e4505be 100644
--- a/src/components/Select/utils.ts
+++ b/src/components/Select/utils.ts
@@ -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 outline-none transition-[background-color,border-color,box-shadow] duration-150 ease-[cubic-bezier(0.23,1,0.32,1)] focus-visible:focus-ring 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/Switch/Switch.vue b/src/components/Switch/Switch.vue
index cdf88cf8f..753f9f0b2 100644
--- a/src/components/Switch/Switch.vue
+++ b/src/components/Switch/Switch.vue
@@ -128,7 +128,7 @@ 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',
+    'focus-visible:outline-none focus-visible:focus-ring',
     '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'
@@ -171,7 +171,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 focus-visible:outline-none focus-visible:focus-ring',
     )
 
     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..6737f1cbd 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',
diff --git a/src/components/TabButtons/TabButtons.md b/src/components/TabButtons/TabButtons.md
new file mode 100644
index 000000000..d4bc8c647
--- /dev/null
+++ b/src/components/TabButtons/TabButtons.md
@@ -0,0 +1,47 @@
+# TabButtons
+
+A radio-group based tab control for switching between compact views.
+
+## 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..2a03e2049 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 } 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,123 @@ 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-white'
+      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-white'
+      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 hasLabel(label: TabButton['label']) {
   return label !== undefined && label !== null && label !== ''
 }
+
+// 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 'button'
+  if (button.route) return RouterLink
+  if (button.href) return 'a'
+  return 'button'
+}
+
+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 +244,46 @@ 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',
+            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/TextInput/TextInput.vue b/src/components/TextInput/TextInput.vue
index 6214dac85..80589751d 100644
--- a/src/components/TextInput/TextInput.vue
+++ b/src/components/TextInput/TextInput.vue
@@ -189,9 +189,9 @@ 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-gray-modals hover:bg-surface-gray-3 focus:bg-surface-white focus:border-outline-gray-4 focus:shadow-sm focus:ring-0 focus-visible:focus-ring',
     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-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:focus-ring',
     disabled: [
       'border bg-surface-gray-1 placeholder-ink-gray-3',
       props.variant === 'outline'
diff --git a/src/components/Textarea/Textarea.vue b/src/components/Textarea/Textarea.vue
index 43d365dd8..a97ebbf3b 100644
--- a/src/components/Textarea/Textarea.vue
+++ b/src/components/Textarea/Textarea.vue
@@ -133,9 +133,9 @@ 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-gray-modals hover:bg-surface-gray-3 focus:bg-surface-white focus:border-outline-gray-4 focus:shadow-sm focus:ring-0 focus-visible:focus-ring',
     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-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:focus-ring',
     disabled: [
       'border bg-surface-gray-1 placeholder-ink-gray-3',
       props.variant === 'outline'
diff --git a/src/components/Toast/Toast.vue b/src/components/Toast/Toast.vue
index 4eaf650c5..c8c278711 100644
--- a/src/components/Toast/Toast.vue
+++ b/src/components/Toast/Toast.vue
@@ -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 focus:outline-none focus-visible:focus-ring"
         :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-white hover:text-ink-gray-3 focus:outline-none focus-visible:focus-ring"
       >
         <span class="lucide-x size-4" />
       </ToastClose>
diff --git a/src/components/Tooltip/Tooltip.api.md b/src/components/Tooltip/Tooltip.api.md
index 7bf3b0d04..86f2f352a 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"'
   },
   {
@@ -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"'
   },
   {
diff --git a/src/components/shared/selection/utils.ts b/src/components/shared/selection/utils.ts
index 95ac18985..ec91d8435 100644
--- a/src/components/shared/selection/utils.ts
+++ b/src/components/shared/selection/utils.ts
@@ -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 outline-none transition-[background-color,border-color,box-shadow] duration-150 ease-[cubic-bezier(0.23,1,0.32,1)] focus-visible:focus-ring 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 b687c166c..765e0bd92 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,7 +46,7 @@ export * from './components/MonthPicker'
 export * from './components/MultiSelect'
 export * from './components/Password'
 export * from './components/Popover'
-export * from './components/Progress'
+export * from './components/Pill'
 export * from './components/Rating'
 export { default as Resource } from './components/Resource.vue'
 export * from './components/Select'
diff --git a/tailwind/colorPalette.js b/tailwind/colorPalette.js
index cfda87923..475ef6708 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 = {
@@ -129,4 +130,41 @@ 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
+  }
+  for (const [name, value] of Object.entries(effectsData.focus.dark)) {
+    output['[data-theme="dark"]'][`--focus-${name}`] = value
+  }
+
+  return output
+}
+
+export {
+  generateColorPalette,
+  generateCSSVariables,
+  generateSemanticColors,
+  generateEffectVariables,
+}
diff --git a/tailwind/colors.json b/tailwind/colors.json
index 5ececaedb..c8c9885f9 100644
--- a/tailwind/colors.json
+++ b/tailwind/colors.json
@@ -1,355 +1,397 @@
 {
   "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": "#f0f7fc",
+      "100": "#e6f4ff",
+      "200": "#c8e6ff",
+      "300": "#a7d7fd",
+      "400": "#73bbf6",
+      "500": "#0289f7",
+      "600": "#007be0",
+      "700": "#0070cc",
+      "800": "#005ca3",
+      "900": "#004880",
+      "950": "#032e63"
     },
     "green": {
-      "50": "#F2FDF4",
-      "100": "#E4FAEB",
-      "200": "#C3F9D3",
-      "300": "#A6EFC0",
-      "400": "#86E0A8",
-      "500": "#46B37E",
-      "600": "#278F5E",
+      "50": "#f1fbf5",
+      "100": "#e4faeb",
+      "200": "#c3f9d3",
+      "300": "#a6efc0",
+      "400": "#78e09f",
+      "500": "#46b37e",
+      "600": "#268c5c",
       "700": "#137949",
-      "800": "#075E35",
-      "900": "#173B2C"
+      "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": "#fff7f7",
+      "100": "#ffe7e7",
+      "200": "#ffd8d8",
+      "300": "#fdc2c2",
+      "400": "#f79596",
+      "500": "#e03636",
+      "600": "#cc2929",
+      "700": "#b52a2a",
+      "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": "#fdfaed",
+      "100": "#fff7d3",
+      "200": "#feeda9",
+      "300": "#fbdb73",
+      "400": "#fbc53f",
+      "500": "#e79913",
+      "600": "#d47408",
+      "700": "#b35309",
+      "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": "#512a09"
     },
     "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": "#f5f3fc",
+      "100": "#eee8ff",
+      "200": "#dbd5ff",
+      "300": "#c9bafb",
+      "400": "#a68efe",
+      "500": "#7757ee",
+      "600": "#6b53d0",
+      "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",
+      "50": "#f8f8f8",
+      "100": "#d9d9d9",
+      "200": "#afafaf",
       "300": "#808080",
       "400": "#717171",
+      "450": "#575757",
       "500": "#424242",
       "600": "#343434",
-      "650": "#2B2B2B",
-      "700": "#232323",
-      "800": "#1C1C1C",
-      "900": "#0F0F0F"
+      "700": "#2b2b2b",
+      "800": "#242424",
+      "900": "#1f1f1f",
+      "950": "#171717"
     },
     "blue": {
-      "50": "#C9E0F5",
-      "100": "#ADD2F5",
-      "200": "#8CC1EC",
-      "300": "#5AAEF2",
-      "400": "#3294E3",
-      "500": "#1580D8",
+      "50": "#c9e0f5",
+      "100": "#add2f5",
+      "200": "#8cc1ec",
+      "300": "#5aaef2",
+      "400": "#2a8edf",
+      "500": "#1580d8",
       "600": "#155999",
-      "700": "#063D71",
-      "800": "#052B53",
-      "900": "#0E2037",
-      "900-80": "#0E2037CC"
+      "700": "#063d71",
+      "800": "#052b53",
+      "900": "#10233d",
+      "950": "#0e1c2f"
     },
     "green": {
-      "50": "#C8F3DE",
-      "100": "#9BE6C1",
-      "200": "#78D7A9",
-      "300": "#58C08E",
-      "400": "#1BA964",
-      "500": "#0A9752",
-      "600": "#0F814A",
+      "50": "#c8f3de",
+      "100": "#9be6c1",
+      "200": "#78d7a9",
+      "300": "#58c08e",
+      "400": "#469170",
+      "500": "#148950",
+      "600": "#077241",
       "700": "#035831",
-      "800": "#0A3F27",
-      "900": "#0B2E1C"
+      "800": "#0a3f27",
+      "900": "#0c2d1c",
+      "950": "#0b1e14"
     },
     "red": {
-      "50": "#FFC1C1",
-      "100": "#FF9595",
-      "200": "#FC7474",
-      "300": "#EB4D52",
-      "400": "#E43838",
-      "500": "#C12020",
-      "600": "#901818",
-      "700": "#681916",
+      "50": "#ffdede",
+      "100": "#ffc1c1",
+      "200": "#fe7c7c",
+      "300": "#eb4d52",
+      "400": "#ce5a5a",
+      "500": "#b01f1f",
+      "600": "#862020",
+      "700": "#661717",
       "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"
+      "900": "#441316",
+      "950": "#271111"
     },
     "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": "#ffaa3e",
+      "300": "#fa961f",
+      "400": "#c87a2d",
+      "500": "#bd660f",
+      "600": "#975215",
+      "700": "#753a07",
+      "800": "#4b2606",
+      "900": "#371e06",
+      "950": "#281808"
     },
     "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": "#cdbeff",
+      "100": "#bca9fc",
+      "200": "#9f87ed",
+      "300": "#9478f8",
+      "400": "#9683d8",
+      "500": "#785fce",
+      "600": "#403397",
+      "700": "#3d3286",
+      "800": "#291d64",
+      "900": "#1f1841",
+      "950": "#18142e"
+    },
+    "gray-alpha": {
+      "50": "#fffffff7",
+      "100": "#ffffffd1",
+      "200": "#ffffffab",
+      "300": "#ffffff78",
+      "400": "#ffffff69",
+      "450": "#ffffff4d",
+      "500": "#ffffff36",
+      "600": "#ffffff26",
+      "700": "#ffffff1f",
+      "800": "#ffffff14",
+      "900": "#ffffff0f",
+      "950": "#0000000a"
+    },
+    "red-alpha": {
+      "50": "#ffdede",
+      "100": "#ffc1c1",
+      "200": "#fe7c7c",
+      "300": "#ff5858f0",
+      "400": "#fa3c3cd9",
+      "500": "#ed2222ba",
+      "600": "#ed2d2d8a",
+      "700": "#c120207d",
+      "800": "#c01b1b61",
+      "900": "#5f16168f",
+      "950": "#53060666"
     }
   },
   "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",
+    "white": "#ffffff",
     "black": "#000000"
   },
   "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",
@@ -357,6 +399,10 @@
         "gray-5": "lightMode/gray/700",
         "gray-6": "lightMode/gray/800",
         "gray-7": "lightMode/gray/900",
+        "menu-bar": "lightMode/gray/50",
+        "base-contrast": "neutral/white",
+        "gray-1-contrast": "neutral/white",
+        "gray-2-contrast": "neutral/white",
         "red-1": "lightMode/red/50",
         "red-2": "lightMode/red/100",
         "red-3": "lightMode/red/200",
@@ -366,133 +412,263 @@
         "red-7": "lightMode/red/800",
         "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/600",
+        "green-6": "lightMode/green/700",
+        "green-7": "lightMode/green/800",
         "amber-1": "lightMode/amber/50",
         "amber-2": "lightMode/amber/100",
-        "amber-3": "lightMode/amber/600",
+        "amber-3": "lightMode/amber/200",
+        "amber-4": "lightMode/amber/300",
+        "amber-5": "lightMode/amber/600",
+        "amber-6": "lightMode/amber/700",
+        "amber-7": "lightMode/amber/800",
         "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",
+        "blue-3": "lightMode/blue/200",
+        "blue-4": "lightMode/blue/300",
+        "blue-5": "lightMode/blue/600",
+        "blue-6": "lightMode/blue/700",
+        "blue-7": "lightMode/blue/800",
+        "orange-2": "lightMode/orange/100",
+        "violet-2": "lightMode/violet/100",
+        "violet-3": "lightMode/violet/200",
+        "violet-4": "lightMode/violet/300",
+        "violet-5": "lightMode/violet/600",
+        "violet-6": "lightMode/violet/700",
+        "violet-7": "lightMode/violet/800",
+        "cyan-2": "lightMode/cyan/100",
+        "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",
+        "white": "neutral/white",
+        "modal": "neutral/white",
+        "selected": "neutral/white",
+        "cards": "neutral/white",
         "cyan-1": "lightMode/cyan/100",
         "pink-1": "lightMode/pink/100",
-        "menu-bar": "lightMode/gray/50",
-        "cards": "neutral/white",
-        "modal": "neutral/white",
-        "selected": "neutral/white"
+        "orange-1": "lightMode/orange/100",
+        "violet-1": "lightMode/violet/100"
       },
       "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",
+        "gray-7": "lightMode/gray/800",
+        "gray-8": "lightMode/gray/900",
         "red-1": "lightMode/red/50",
         "red-2": "lightMode/red/400",
         "red-3": "lightMode/red/500",
-        "red-4": "lightMode/red/600",
+        "red-4": "lightMode/red/700",
         "green-1": "lightMode/green/50",
-        "green-2": "lightMode/green/500",
-        "green-3": "lightMode/green/600",
+        "green-2": "lightMode/green/400",
+        "green-3": "lightMode/green/500",
+        "green-4": "lightMode/green/700",
+        "green-6": "lightMode/green/600",
         "amber-1": "lightMode/amber/50",
-        "amber-2": "lightMode/amber/500",
-        "amber-3": "lightMode/amber/600",
+        "amber-2": "lightMode/amber/400",
+        "amber-3": "lightMode/amber/500",
+        "amber-4": "lightMode/amber/700",
         "blue-1": "lightMode/blue/50",
-        "blue-2": "lightMode/blue/500",
-        "blue-3": "lightMode/blue/600",
+        "blue-2": "lightMode/blue/400",
+        "blue-3": "lightMode/blue/500",
+        "blue-4": "lightMode/blue/700",
+        "cyan-3": "lightMode/cyan/500",
+        "violet-1": "lightMode/violet/50",
+        "violet-2": "lightMode/violet/400",
+        "violet-3": "lightMode/violet/500",
+        "violet-4": "lightMode/violet/700",
+        "blue-link": "lightMode/blue/400",
+        "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",
+        "white": "neutral/white",
+        "gray-9": "lightMode/gray/900",
         "cyan-1": "lightMode/cyan/500",
-        "pink-1": "lightMode/pink/500",
-        "violet-1": "lightMode/violet/500",
-        "blue-link": "lightMode/blue/400"
+        "pink-1": "lightMode/pink/500"
+      },
+      "outline": {
+        "base": "neutral/white",
+        "gray-1": "lightMode/gray/200",
+        "gray-1-contrast": "lightMode/gray/200",
+        "gray-2": "lightMode/gray/300",
+        "gray-3": "lightMode/gray/400",
+        "gray-4": "lightMode/gray/500",
+        "gray-5": "lightMode/gray/800",
+        "red-2": "lightMode/red/300",
+        "red-3": "lightMode/red/400",
+        "red-4": "lightMode/red/500",
+        "green-2": "lightMode/green/300",
+        "green-3": "lightMode/green/400",
+        "green-4": "lightMode/green/500",
+        "amber-2": "lightMode/amber/300",
+        "amber-3": "lightMode/amber/400",
+        "amber-4": "lightMode/amber/500",
+        "blue-2": "lightMode/blue/300",
+        "blue-3": "lightMode/blue/400",
+        "blue-4": "lightMode/blue/500",
+        "orange-3": "lightMode/orange/400",
+        "violet-2": "lightMode/violet/300",
+        "violet-3": "lightMode/violet/400",
+        "violet-4": "lightMode/violet/500",
+        "gray-modal": "lightMode/gray/200",
+        "gray-modals": "lightMode/gray/200",
+        "white": "neutral/white",
+        "blue-1": "lightMode/blue/300",
+        "red-1": "lightMode/red/300",
+        "green-1": "lightMode/green/200",
+        "amber-1": "lightMode/amber/200",
+        "orange-1": "lightMode/orange/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/800",
+        "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",
+        "menu-bar": "darkMode/gray/950",
+        "base-contrast": "darkMode/gray/900",
+        "gray-1-contrast": "darkMode/gray/900",
+        "gray-2-contrast": "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-6": "darkMode/red/500",
+        "red-5": "darkMode/red/500",
+        "red-6": "darkMode/red/400",
         "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",
+        "green-2": "darkMode/green/900",
+        "green-3": "darkMode/green/800",
+        "green-4": "darkMode/green/700",
+        "green-5": "darkMode/green/500",
+        "green-6": "darkMode/green/400",
+        "green-7": "darkMode/green/600",
+        "amber-1": "darkMode/amber/950",
+        "amber-2": "darkMode/amber/900",
+        "amber-3": "darkMode/amber/800",
+        "amber-4": "darkMode/amber/700",
+        "amber-5": "darkMode/amber/500",
+        "amber-6": "darkMode/amber/400",
+        "amber-7": "darkMode/amber/600",
+        "blue-1": "darkMode/blue/950",
+        "blue-2": "darkMode/blue/900",
+        "blue-3": "darkMode/blue/800",
+        "blue-4": "darkMode/blue/700",
+        "blue-5": "darkMode/blue/500",
+        "blue-6": "darkMode/blue/400",
+        "blue-7": "darkMode/blue/600",
+        "orange-2": "darkMode/orange/900",
+        "violet-2": "darkMode/violet/900",
+        "violet-3": "darkMode/violet/800",
+        "violet-4": "darkMode/violet/700",
+        "violet-5": "darkMode/violet/500",
+        "violet-6": "darkMode/violet/400",
+        "violet-7": "darkMode/violet/600",
+        "cyan-2": "darkMode/cyan/900",
+        "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",
+        "white": "darkMode/gray/900",
         "modal": "darkMode/gray/700",
-        "selected": "darkMode/gray/500"
+        "selected": "darkMode/gray/500",
+        "cards": "darkMode/gray/800",
+        "cyan-1": "darkMode/cyan/900",
+        "pink-1": "darkMode/pink/900",
+        "orange-1": "darkMode/orange/900",
+        "violet-1": "darkMode/violet/900"
       },
       "ink": {
-        "white": "darkMode/gray/900",
-        "gray-1": "darkMode/gray/700",
-        "gray-2": "darkMode/gray/500",
-        "gray-3": "darkMode/gray/400",
-        "gray-4": "darkMode/gray/400",
-        "gray-5": "darkMode/gray/300",
-        "gray-6": "darkMode/gray/250",
+        "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": "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-4": "darkMode/red/300",
         "green-1": "neutral/white",
-        "green-2": "darkMode/green/400",
-        "green-3": "darkMode/green/300",
+        "green-2": "darkMode/green/700",
+        "green-3": "darkMode/green/400",
+        "green-4": "darkMode/green/300",
+        "green-6": "darkMode/green/400",
         "amber-1": "neutral/white",
-        "amber-2": "darkMode/amber/400",
-        "amber-3": "darkMode/amber/300",
+        "amber-2": "darkMode/amber/700",
+        "amber-3": "darkMode/amber/500",
+        "amber-4": "darkMode/amber/400",
         "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",
-        "blue-link": "darkMode/blue/500"
+        "blue-2": "darkMode/blue/700",
+        "blue-3": "darkMode/blue/400",
+        "blue-4": "darkMode/blue/300",
+        "cyan-3": "darkMode/cyan/400",
+        "violet-1": "neutral/white",
+        "violet-2": "darkMode/violet/700",
+        "violet-3": "darkMode/violet/400",
+        "violet-4": "darkMode/violet/300",
+        "blue-link": "darkMode/blue/500",
+        "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",
+        "white": "darkMode/gray/900",
+        "gray-9": "darkMode/gray/50",
+        "cyan-1": "darkMode/cyan/500",
+        "pink-1": "darkMode/pink/500"
+      },
+      "outline": {
+        "base": "darkMode/gray/950",
+        "gray-1": "darkMode/gray/800",
+        "gray-1-contrast": "darkMode/gray/700",
+        "gray-2": "darkMode/gray/600",
+        "gray-3": "darkMode/gray/500",
+        "gray-4": "darkMode/gray/450",
+        "gray-5": "lightMode/gray/200",
+        "red-2": "darkMode/red/800",
+        "red-3": "darkMode/red/700",
+        "red-4": "darkMode/red/600",
+        "green-2": "darkMode/green/800",
+        "green-3": "darkMode/green/700",
+        "green-4": "darkMode/green/600",
+        "amber-2": "darkMode/amber/800",
+        "amber-3": "darkMode/amber/700",
+        "amber-4": "darkMode/amber/600",
+        "blue-2": "darkMode/blue/800",
+        "blue-3": "darkMode/blue/700",
+        "blue-4": "darkMode/blue/600",
+        "orange-3": "darkMode/orange/700",
+        "violet-2": "darkMode/violet/800",
+        "violet-3": "darkMode/violet/700",
+        "violet-4": "darkMode/violet/600",
+        "gray-modal": "darkMode/gray/600",
+        "gray-modals": "darkMode/gray/600",
+        "white": "darkMode/gray/900",
+        "blue-1": "darkMode/blue/800",
+        "red-1": "darkMode/red/800",
+        "green-1": "darkMode/green/800",
+        "amber-1": "darkMode/amber/800",
+        "orange-1": "darkMode/orange/800"
       }
     }
   }
diff --git a/tailwind/figma-tokens-to-theme.js b/tailwind/figma-tokens-to-theme.js
new file mode 100644
index 000000000..57dd17124
--- /dev/null
+++ b/tailwind/figma-tokens-to-theme.js
@@ -0,0 +1,400 @@
+/**
+ * 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']
+
+// 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' }
+
+// Figma's font weight strings → tailwind numeric weights.
+const FONT_WEIGHT_MAP = {
+  regular: 400,
+  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,
+    },
+    themedVariables: {
+      light: { surface: {}, ink: {}, outline: {} },
+      dark: { surface: {}, ink: {}, outline: {} },
+    },
+  }
+
+  // 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}
+  collectSemanticCategory(stylesLight, 'surface', colors.themedVariables.light)
+  collectSemanticCategory(stylesLight, 'ink', colors.themedVariables.light)
+  collectSemanticCategory(stylesLight, 'outline', colors.themedVariables.light)
+  collectSemanticCategory(stylesDark, 'surface', colors.themedVariables.dark)
+  collectSemanticCategory(stylesDark, 'ink', colors.themedVariables.dark)
+  collectSemanticCategory(stylesDark, 'outline', colors.themedVariables.dark)
+
+  applyAliases(colors.themedVariables.light)
+  applyAliases(colors.themedVariables.dark)
+  applyLegacyEntries(colors.themedVariables.light, LEGACY_ENTRIES.light)
+  applyLegacyEntries(colors.themedVariables.dark, LEGACY_ENTRIES.dark)
+
+  return colors
+}
+
+// Renames — legacy name points at the current Figma name in the same category.
+// Resolves dynamically so the legacy entry tracks any future value change.
+const ALIASES = {
+  outline: {
+    'gray-modals': 'gray-modal',
+  },
+}
+
+// Legacy semantic tokens with no surviving Figma equivalent — keep them pinned
+// to a primitive reference so src/ consumers keep working. Values use the
+// colorsData reference shape ("lightMode/gray/900", "neutral/white") that
+// colorPalette.js#resolveColorReference already understands. Only added when
+// the Figma export doesn't already define the name.
+const LEGACY_ENTRIES = {
+  light: {
+    surface: {
+      white: 'neutral/white',
+      modal: 'neutral/white',
+      selected: 'neutral/white',
+      cards: 'neutral/white',
+      'cyan-1': 'lightMode/cyan/100',
+      'pink-1': 'lightMode/pink/100',
+      'orange-1': 'lightMode/orange/100',
+      'violet-1': 'lightMode/violet/100',
+      'green-3': 'lightMode/green/600',
+      'amber-3': 'lightMode/amber/600',
+      'blue-3': 'lightMode/blue/600',
+    },
+    ink: {
+      white: 'neutral/white',
+      'gray-9': 'lightMode/gray/900',
+      'cyan-1': 'lightMode/cyan/500',
+      'pink-1': 'lightMode/pink/500',
+      'violet-1': 'lightMode/violet/500',
+    },
+    outline: {
+      white: 'neutral/white',
+      'blue-1': 'lightMode/blue/300',
+      'red-1': 'lightMode/red/300',
+      'green-1': 'lightMode/green/200',
+      'amber-1': 'lightMode/amber/200',
+      'orange-1': 'lightMode/orange/200',
+    },
+  },
+  dark: {
+    surface: {
+      white: 'darkMode/gray/900',
+      modal: 'darkMode/gray/700',
+      selected: 'darkMode/gray/500',
+      cards: 'darkMode/gray/800',
+      'cyan-1': 'darkMode/cyan/900',
+      'pink-1': 'darkMode/pink/900',
+      'orange-1': 'darkMode/orange/900',
+      'violet-1': 'darkMode/violet/900',
+      'green-3': 'darkMode/green/400',
+      'amber-3': 'darkMode/amber/400',
+      'blue-3': 'darkMode/blue/400',
+    },
+    ink: {
+      white: 'darkMode/gray/900',
+      'gray-9': 'darkMode/gray/50',
+      'cyan-1': 'darkMode/cyan/500',
+      'pink-1': 'darkMode/pink/500',
+      'violet-1': 'darkMode/violet/500',
+    },
+    outline: {
+      white: 'darkMode/gray/900',
+      'blue-1': 'darkMode/blue/800',
+      'red-1': 'darkMode/red/800',
+      'green-1': 'darkMode/green/800',
+      'amber-1': 'darkMode/amber/800',
+      'orange-1': 'darkMode/orange/800',
+    },
+  },
+}
+
+function applyAliases(themed) {
+  for (const [category, map] of Object.entries(ALIASES)) {
+    if (!themed[category]) continue
+    for (const [legacy, current] of Object.entries(map)) {
+      if (themed[category][current] && !themed[category][legacy]) {
+        themed[category][legacy] = themed[category][current]
+      }
+    }
+  }
+}
+
+function applyLegacyEntries(themed, legacy) {
+  for (const [category, entries] of Object.entries(legacy)) {
+    themed[category] = themed[category] || {}
+    for (const [name, ref] of Object.entries(entries)) {
+      if (!themed[category][name]) {
+        themed[category][name] = ref
+      }
+    }
+  }
+}
+
+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 ----------
+
+function buildTypography() {
+  const tokens = readTokens('Typography.Desktop.tokens.json')
+  const sizes = tokens.font?.size || {}
+  const lineHeights = tokens.font?.['line-height'] || {}
+  const weights = tokens.font?.weight || {}
+  const families = tokens.font?.family || {}
+
+  const fontSize = {}
+  for (const [key, token] of Object.entries(sizes)) {
+    const lh = lineHeights[key]?.$value
+    fontSize[key] = [
+      token.$value,
+      {
+        lineHeight: lh || '1.15',
+      },
+    ]
+  }
+
+  const fontWeight = {}
+  for (const [key, token] of Object.entries(weights)) {
+    const numeric = FONT_WEIGHT_MAP[token.$value]
+    fontWeight[key] = numeric ?? token.$value
+  }
+
+  const fontFamily = {}
+  for (const [key, token] of Object.entries(families)) {
+    fontFamily[key] = token.$value
+  }
+
+  return { fontFamily, fontSize, fontWeight }
+}
+
+// ---------- 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())
+
+  console.log('✓ done')
+}
+
+main()
diff --git a/tailwind/generated/colors.json b/tailwind/generated/colors.json
new file mode 100644
index 000000000..c8c9885f9
--- /dev/null
+++ b/tailwind/generated/colors.json
@@ -0,0 +1,675 @@
+{
+  "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": "#f0f7fc",
+      "100": "#e6f4ff",
+      "200": "#c8e6ff",
+      "300": "#a7d7fd",
+      "400": "#73bbf6",
+      "500": "#0289f7",
+      "600": "#007be0",
+      "700": "#0070cc",
+      "800": "#005ca3",
+      "900": "#004880",
+      "950": "#032e63"
+    },
+    "green": {
+      "50": "#f1fbf5",
+      "100": "#e4faeb",
+      "200": "#c3f9d3",
+      "300": "#a6efc0",
+      "400": "#78e09f",
+      "500": "#46b37e",
+      "600": "#268c5c",
+      "700": "#137949",
+      "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",
+      "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": "#fdfaed",
+      "100": "#fff7d3",
+      "200": "#feeda9",
+      "300": "#fbdb73",
+      "400": "#fbc53f",
+      "500": "#e79913",
+      "600": "#d47408",
+      "700": "#b35309",
+      "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": "#512a09"
+    },
+    "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": "#f5f3fc",
+      "100": "#eee8ff",
+      "200": "#dbd5ff",
+      "300": "#c9bafb",
+      "400": "#a68efe",
+      "500": "#7757ee",
+      "600": "#6b53d0",
+      "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": "#808080",
+      "400": "#717171",
+      "450": "#575757",
+      "500": "#424242",
+      "600": "#343434",
+      "700": "#2b2b2b",
+      "800": "#242424",
+      "900": "#1f1f1f",
+      "950": "#171717"
+    },
+    "blue": {
+      "50": "#c9e0f5",
+      "100": "#add2f5",
+      "200": "#8cc1ec",
+      "300": "#5aaef2",
+      "400": "#2a8edf",
+      "500": "#1580d8",
+      "600": "#155999",
+      "700": "#063d71",
+      "800": "#052b53",
+      "900": "#10233d",
+      "950": "#0e1c2f"
+    },
+    "green": {
+      "50": "#c8f3de",
+      "100": "#9be6c1",
+      "200": "#78d7a9",
+      "300": "#58c08e",
+      "400": "#469170",
+      "500": "#148950",
+      "600": "#077241",
+      "700": "#035831",
+      "800": "#0a3f27",
+      "900": "#0c2d1c",
+      "950": "#0b1e14"
+    },
+    "red": {
+      "50": "#ffdede",
+      "100": "#ffc1c1",
+      "200": "#fe7c7c",
+      "300": "#eb4d52",
+      "400": "#ce5a5a",
+      "500": "#b01f1f",
+      "600": "#862020",
+      "700": "#661717",
+      "800": "#521515",
+      "900": "#441316",
+      "950": "#271111"
+    },
+    "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": "#ffaa3e",
+      "300": "#fa961f",
+      "400": "#c87a2d",
+      "500": "#bd660f",
+      "600": "#975215",
+      "700": "#753a07",
+      "800": "#4b2606",
+      "900": "#371e06",
+      "950": "#281808"
+    },
+    "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": "#cdbeff",
+      "100": "#bca9fc",
+      "200": "#9f87ed",
+      "300": "#9478f8",
+      "400": "#9683d8",
+      "500": "#785fce",
+      "600": "#403397",
+      "700": "#3d3286",
+      "800": "#291d64",
+      "900": "#1f1841",
+      "950": "#18142e"
+    },
+    "gray-alpha": {
+      "50": "#fffffff7",
+      "100": "#ffffffd1",
+      "200": "#ffffffab",
+      "300": "#ffffff78",
+      "400": "#ffffff69",
+      "450": "#ffffff4d",
+      "500": "#ffffff36",
+      "600": "#ffffff26",
+      "700": "#ffffff1f",
+      "800": "#ffffff14",
+      "900": "#ffffff0f",
+      "950": "#0000000a"
+    },
+    "red-alpha": {
+      "50": "#ffdede",
+      "100": "#ffc1c1",
+      "200": "#fe7c7c",
+      "300": "#ff5858f0",
+      "400": "#fa3c3cd9",
+      "500": "#ed2222ba",
+      "600": "#ed2d2d8a",
+      "700": "#c120207d",
+      "800": "#c01b1b61",
+      "900": "#5f16168f",
+      "950": "#53060666"
+    }
+  },
+  "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"
+  },
+  "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/700",
+        "gray-6": "lightMode/gray/800",
+        "gray-7": "lightMode/gray/900",
+        "menu-bar": "lightMode/gray/50",
+        "base-contrast": "neutral/white",
+        "gray-1-contrast": "neutral/white",
+        "gray-2-contrast": "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",
+        "green-1": "lightMode/green/50",
+        "green-2": "lightMode/green/100",
+        "green-3": "lightMode/green/200",
+        "green-4": "lightMode/green/300",
+        "green-5": "lightMode/green/600",
+        "green-6": "lightMode/green/700",
+        "green-7": "lightMode/green/800",
+        "amber-1": "lightMode/amber/50",
+        "amber-2": "lightMode/amber/100",
+        "amber-3": "lightMode/amber/200",
+        "amber-4": "lightMode/amber/300",
+        "amber-5": "lightMode/amber/600",
+        "amber-6": "lightMode/amber/700",
+        "amber-7": "lightMode/amber/800",
+        "blue-1": "lightMode/blue/50",
+        "blue-2": "lightMode/blue/100",
+        "blue-3": "lightMode/blue/200",
+        "blue-4": "lightMode/blue/300",
+        "blue-5": "lightMode/blue/600",
+        "blue-6": "lightMode/blue/700",
+        "blue-7": "lightMode/blue/800",
+        "orange-2": "lightMode/orange/100",
+        "violet-2": "lightMode/violet/100",
+        "violet-3": "lightMode/violet/200",
+        "violet-4": "lightMode/violet/300",
+        "violet-5": "lightMode/violet/600",
+        "violet-6": "lightMode/violet/700",
+        "violet-7": "lightMode/violet/800",
+        "cyan-2": "lightMode/cyan/100",
+        "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",
+        "white": "neutral/white",
+        "modal": "neutral/white",
+        "selected": "neutral/white",
+        "cards": "neutral/white",
+        "cyan-1": "lightMode/cyan/100",
+        "pink-1": "lightMode/pink/100",
+        "orange-1": "lightMode/orange/100",
+        "violet-1": "lightMode/violet/100"
+      },
+      "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",
+        "red-1": "lightMode/red/50",
+        "red-2": "lightMode/red/400",
+        "red-3": "lightMode/red/500",
+        "red-4": "lightMode/red/700",
+        "green-1": "lightMode/green/50",
+        "green-2": "lightMode/green/400",
+        "green-3": "lightMode/green/500",
+        "green-4": "lightMode/green/700",
+        "green-6": "lightMode/green/600",
+        "amber-1": "lightMode/amber/50",
+        "amber-2": "lightMode/amber/400",
+        "amber-3": "lightMode/amber/500",
+        "amber-4": "lightMode/amber/700",
+        "blue-1": "lightMode/blue/50",
+        "blue-2": "lightMode/blue/400",
+        "blue-3": "lightMode/blue/500",
+        "blue-4": "lightMode/blue/700",
+        "cyan-3": "lightMode/cyan/500",
+        "violet-1": "lightMode/violet/50",
+        "violet-2": "lightMode/violet/400",
+        "violet-3": "lightMode/violet/500",
+        "violet-4": "lightMode/violet/700",
+        "blue-link": "lightMode/blue/400",
+        "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",
+        "white": "neutral/white",
+        "gray-9": "lightMode/gray/900",
+        "cyan-1": "lightMode/cyan/500",
+        "pink-1": "lightMode/pink/500"
+      },
+      "outline": {
+        "base": "neutral/white",
+        "gray-1": "lightMode/gray/200",
+        "gray-1-contrast": "lightMode/gray/200",
+        "gray-2": "lightMode/gray/300",
+        "gray-3": "lightMode/gray/400",
+        "gray-4": "lightMode/gray/500",
+        "gray-5": "lightMode/gray/800",
+        "red-2": "lightMode/red/300",
+        "red-3": "lightMode/red/400",
+        "red-4": "lightMode/red/500",
+        "green-2": "lightMode/green/300",
+        "green-3": "lightMode/green/400",
+        "green-4": "lightMode/green/500",
+        "amber-2": "lightMode/amber/300",
+        "amber-3": "lightMode/amber/400",
+        "amber-4": "lightMode/amber/500",
+        "blue-2": "lightMode/blue/300",
+        "blue-3": "lightMode/blue/400",
+        "blue-4": "lightMode/blue/500",
+        "orange-3": "lightMode/orange/400",
+        "violet-2": "lightMode/violet/300",
+        "violet-3": "lightMode/violet/400",
+        "violet-4": "lightMode/violet/500",
+        "gray-modal": "lightMode/gray/200",
+        "gray-modals": "lightMode/gray/200",
+        "white": "neutral/white",
+        "blue-1": "lightMode/blue/300",
+        "red-1": "lightMode/red/300",
+        "green-1": "lightMode/green/200",
+        "amber-1": "lightMode/amber/200",
+        "orange-1": "lightMode/orange/200"
+      }
+    },
+    "dark": {
+      "surface": {
+        "base": "darkMode/gray/950",
+        "gray-1": "darkMode/gray/800",
+        "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",
+        "menu-bar": "darkMode/gray/950",
+        "base-contrast": "darkMode/gray/900",
+        "gray-1-contrast": "darkMode/gray/900",
+        "gray-2-contrast": "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/500",
+        "red-6": "darkMode/red/400",
+        "red-7": "darkMode/red/600",
+        "green-1": "darkMode/green/900",
+        "green-2": "darkMode/green/900",
+        "green-3": "darkMode/green/800",
+        "green-4": "darkMode/green/700",
+        "green-5": "darkMode/green/500",
+        "green-6": "darkMode/green/400",
+        "green-7": "darkMode/green/600",
+        "amber-1": "darkMode/amber/950",
+        "amber-2": "darkMode/amber/900",
+        "amber-3": "darkMode/amber/800",
+        "amber-4": "darkMode/amber/700",
+        "amber-5": "darkMode/amber/500",
+        "amber-6": "darkMode/amber/400",
+        "amber-7": "darkMode/amber/600",
+        "blue-1": "darkMode/blue/950",
+        "blue-2": "darkMode/blue/900",
+        "blue-3": "darkMode/blue/800",
+        "blue-4": "darkMode/blue/700",
+        "blue-5": "darkMode/blue/500",
+        "blue-6": "darkMode/blue/400",
+        "blue-7": "darkMode/blue/600",
+        "orange-2": "darkMode/orange/900",
+        "violet-2": "darkMode/violet/900",
+        "violet-3": "darkMode/violet/800",
+        "violet-4": "darkMode/violet/700",
+        "violet-5": "darkMode/violet/500",
+        "violet-6": "darkMode/violet/400",
+        "violet-7": "darkMode/violet/600",
+        "cyan-2": "darkMode/cyan/900",
+        "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",
+        "white": "darkMode/gray/900",
+        "modal": "darkMode/gray/700",
+        "selected": "darkMode/gray/500",
+        "cards": "darkMode/gray/800",
+        "cyan-1": "darkMode/cyan/900",
+        "pink-1": "darkMode/pink/900",
+        "orange-1": "darkMode/orange/900",
+        "violet-1": "darkMode/violet/900"
+      },
+      "ink": {
+        "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": "darkMode/gray/200",
+        "gray-8": "darkMode/gray/100",
+        "red-1": "neutral/white",
+        "red-2": "darkMode/red/700",
+        "red-3": "darkMode/red/400",
+        "red-4": "darkMode/red/300",
+        "green-1": "neutral/white",
+        "green-2": "darkMode/green/700",
+        "green-3": "darkMode/green/400",
+        "green-4": "darkMode/green/300",
+        "green-6": "darkMode/green/400",
+        "amber-1": "neutral/white",
+        "amber-2": "darkMode/amber/700",
+        "amber-3": "darkMode/amber/500",
+        "amber-4": "darkMode/amber/400",
+        "blue-1": "neutral/white",
+        "blue-2": "darkMode/blue/700",
+        "blue-3": "darkMode/blue/400",
+        "blue-4": "darkMode/blue/300",
+        "cyan-3": "darkMode/cyan/400",
+        "violet-1": "neutral/white",
+        "violet-2": "darkMode/violet/700",
+        "violet-3": "darkMode/violet/400",
+        "violet-4": "darkMode/violet/300",
+        "blue-link": "darkMode/blue/500",
+        "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",
+        "white": "darkMode/gray/900",
+        "gray-9": "darkMode/gray/50",
+        "cyan-1": "darkMode/cyan/500",
+        "pink-1": "darkMode/pink/500"
+      },
+      "outline": {
+        "base": "darkMode/gray/950",
+        "gray-1": "darkMode/gray/800",
+        "gray-1-contrast": "darkMode/gray/700",
+        "gray-2": "darkMode/gray/600",
+        "gray-3": "darkMode/gray/500",
+        "gray-4": "darkMode/gray/450",
+        "gray-5": "lightMode/gray/200",
+        "red-2": "darkMode/red/800",
+        "red-3": "darkMode/red/700",
+        "red-4": "darkMode/red/600",
+        "green-2": "darkMode/green/800",
+        "green-3": "darkMode/green/700",
+        "green-4": "darkMode/green/600",
+        "amber-2": "darkMode/amber/800",
+        "amber-3": "darkMode/amber/700",
+        "amber-4": "darkMode/amber/600",
+        "blue-2": "darkMode/blue/800",
+        "blue-3": "darkMode/blue/700",
+        "blue-4": "darkMode/blue/600",
+        "orange-3": "darkMode/orange/700",
+        "violet-2": "darkMode/violet/800",
+        "violet-3": "darkMode/violet/700",
+        "violet-4": "darkMode/violet/600",
+        "gray-modal": "darkMode/gray/600",
+        "gray-modals": "darkMode/gray/600",
+        "white": "darkMode/gray/900",
+        "blue-1": "darkMode/blue/800",
+        "red-1": "darkMode/red/800",
+        "green-1": "darkMode/green/800",
+        "amber-1": "darkMode/amber/800",
+        "orange-1": "darkMode/orange/800"
+      }
+    }
+  }
+}
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..2e9a6ba5e
--- /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": "100px",
+  "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..9d18f8cf6
--- /dev/null
+++ b/tailwind/generated/typography.json
@@ -0,0 +1,140 @@
+{
+  "fontFamily": {
+    "text": "Inter Variable"
+  },
+  "fontSize": {
+    "tiny": [
+      "11px",
+      {
+        "lineHeight": "0px"
+      }
+    ],
+    "2xs": [
+      "11px",
+      {
+        "lineHeight": "13px"
+      }
+    ],
+    "xs": [
+      "12px",
+      {
+        "lineHeight": "14px"
+      }
+    ],
+    "sm": [
+      "13px",
+      {
+        "lineHeight": "15px"
+      }
+    ],
+    "base": [
+      "14px",
+      {
+        "lineHeight": "16px"
+      }
+    ],
+    "lg": [
+      "16px",
+      {
+        "lineHeight": "18px"
+      }
+    ],
+    "xl": [
+      "18px",
+      {
+        "lineHeight": "21px"
+      }
+    ],
+    "2xl": [
+      "20px",
+      {
+        "lineHeight": "23px"
+      }
+    ],
+    "3xl": [
+      "24px",
+      {
+        "lineHeight": "28px"
+      }
+    ],
+    "4xl": [
+      "26px",
+      {
+        "lineHeight": "42px"
+      }
+    ],
+    "5xl": [
+      "28px",
+      {
+        "lineHeight": "45px"
+      }
+    ],
+    "6xl": [
+      "32px",
+      {
+        "lineHeight": "51px"
+      }
+    ],
+    "7xl": [
+      "40px",
+      {
+        "lineHeight": "56px"
+      }
+    ],
+    "8xl": [
+      "44px",
+      {
+        "lineHeight": "62px"
+      }
+    ],
+    "9xl": [
+      "48px",
+      {
+        "lineHeight": "67px"
+      }
+    ],
+    "10xl": [
+      "52px",
+      {
+        "lineHeight": "73px"
+      }
+    ],
+    "11xl": [
+      "56px",
+      {
+        "lineHeight": "78px"
+      }
+    ],
+    "12xl": [
+      "64px",
+      {
+        "lineHeight": "83px"
+      }
+    ],
+    "13xl": [
+      "72px",
+      {
+        "lineHeight": "92px"
+      }
+    ],
+    "14xl": [
+      "80px",
+      {
+        "lineHeight": "96px"
+      }
+    ],
+    "15xl": [
+      "88px",
+      {
+        "lineHeight": "106px"
+      }
+    ]
+  },
+  "fontWeight": {
+    "regular": 400,
+    "medium": 500,
+    "semibold": 600,
+    "bold": 700,
+    "black": 800
+  }
+}
diff --git a/tailwind/plugin.js b/tailwind/plugin.js
index e63f855ca..89ddd9beb 100644
--- a/tailwind/plugin.js
+++ b/tailwind/plugin.js
@@ -3,12 +3,144 @@ 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
+}
+
+// Per-size augmentation preserved from pre-Figma config — letterSpacing and
+// fontWeight aren't modelled on `font.size.*` in the Figma export, so we keep
+// the historical values keyed by size name.
+const FONT_SIZE_AUGMENT = {
+  '2xs': { letterSpacing: '0.01em', fontWeight: '420' },
+  xs: { letterSpacing: '0.02em', fontWeight: '420' },
+  sm: { letterSpacing: '0.02em', fontWeight: '420' },
+  base: { letterSpacing: '0.02em', fontWeight: '420' },
+  lg: { letterSpacing: '0.02em', fontWeight: '400' },
+  xl: { letterSpacing: '0.01em', fontWeight: '400' },
+  '2xl': { letterSpacing: '0.01em', fontWeight: '400' },
+  '3xl': { letterSpacing: '0.005em', fontWeight: '400' },
+}
+
+// Tracking for the `medium` weight variant of each size. Figma models typography
+// as named styles (`text/base/medium`, `text/lg/medium`, …) where medium-weight
+// text is tracked tighter than its regular-weight sibling. Tailwind's fontSize
+// utility is keyed by size only, so we expose these as component classes
+// (`.text-base-medium`, `.text-lg-medium`) via `buildTextStyleUtilities()`.
+// Only add entries here for sizes whose medium tracking is confirmed in Figma.
+const FONT_SIZE_MEDIUM_TRACKING = {
+  base: '0.015em',
+  lg: '0.015em',
+}
+
+// Paragraph variants — same sizes but looser line-heights for reading.
+const PARAGRAPH_LINE_HEIGHT = {
+  '2xs': '1.6',
+  xs: '1.6',
+  sm: '1.5',
+  base: '1.5',
+  lg: '1.5',
+  xl: '1.42',
+  '2xl': '1.38',
+  '3xl': '1.2',
+}
+
+function buildFontSize() {
+  const out = {}
+  for (const [key, [size, meta]] of Object.entries(typographyTokens.fontSize)) {
+    // `tiny` arrives with lineHeight 0px from Figma — fall back to a sane ratio.
+    const lineHeight = meta.lineHeight === '0px' ? '1.15' : meta.lineHeight
+    out[key] = [size, { lineHeight, ...(FONT_SIZE_AUGMENT[key] || {}) }]
+  }
+  // Paragraph variants for the size set that defined them previously.
+  for (const [key, lineHeight] of Object.entries(PARAGRAPH_LINE_HEIGHT)) {
+    if (!out[key]) continue
+    const [size, meta] = out[key]
+    out[`p-${key}`] = [size, { ...meta, lineHeight }]
+  }
+  return out
+}
+
+// Focus ring utilities backed by `--focus-*` CSS vars (theme-flipped in
+// colorPalette.js#generateEffectVariables). Registered via `addComponents` so
+// Tailwind IntelliSense picks them up. Usage: `focus-visible:focus-ring-blue`.
+function buildFocusRingUtilities() {
+  const out = {}
+  for (const name of Object.keys(effectsData.focus.light)) {
+    const className = name === 'default' ? '.focus-ring' : `.focus-ring-${name}`
+    out[className] = { boxShadow: `var(--focus-${name})` }
+  }
+  return out
+}
+
+function buildTextStyleUtilities() {
+  const out = {}
+  for (const [key, tracking] of Object.entries(FONT_SIZE_MEDIUM_TRACKING)) {
+    const entry = typographyTokens.fontSize[key]
+    if (!entry) continue
+    const [size, meta] = entry
+    const lineHeight = meta.lineHeight === '0px' ? '1.15' : meta.lineHeight
+    out[`.text-${key}-medium`] = {
+      fontSize: size,
+      lineHeight,
+      fontWeight: '500',
+      letterSpacing: tracking,
+    }
+  }
+  return out
+}
 
 let globalStyles = (theme) => ({
   html: {
@@ -49,18 +181,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',
@@ -253,7 +403,7 @@ export default plugin(
           v3: {
             css: [
               {
-                fontSize: '14px',
+                fontSize: '15px',
                 fontWeight: 420,
                 lineHeight: '1.7',
                 letterSpacing: '0.02em',
diff --git a/tailwind/tokens.js b/tailwind/tokens.js
index 97b0c7420..a1390aa80 100644
--- a/tailwind/tokens.js
+++ b/tailwind/tokens.js
@@ -1,14 +1,15 @@
-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'
+
+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:
@@ -21,25 +22,46 @@ const boxShadow = {
   none: 'none',
 }
 
-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' }],
+// letterSpacing / fontWeight aren't modelled on `font.size.*` in the Figma
+// export — keep the historical values keyed by size name. Kept in sync with
+// the matching map in plugin.js.
+const FONT_SIZE_AUGMENT = {
+  '2xs': { letterSpacing: '0.01em', fontWeight: '420' },
+  xs: { letterSpacing: '0.02em', fontWeight: '420' },
+  sm: { letterSpacing: '0.02em', fontWeight: '420' },
+  base: { letterSpacing: '0.02em', fontWeight: '420' },
+  lg: { letterSpacing: '0.02em', fontWeight: '400' },
+  xl: { letterSpacing: '0.01em', fontWeight: '400' },
+  '2xl': { letterSpacing: '0.01em', fontWeight: '400' },
+  '3xl': { letterSpacing: '0.005em', fontWeight: '400' },
+}
+
+const PARAGRAPH_LINE_HEIGHT = {
+  '2xs': '1.6',
+  xs: '1.6',
+  sm: '1.5',
+  base: '1.5',
+  lg: '1.5',
+  xl: '1.42',
+  '2xl': '1.38',
+  '3xl': '1.2',
 }
 
+function buildFontSize() {
+  const out = {}
+  for (const [key, [size, meta]] of Object.entries(typographyTokens.fontSize)) {
+    const lineHeight = meta.lineHeight === '0px' ? '1.15' : meta.lineHeight
+    out[key] = [size, { lineHeight, ...(FONT_SIZE_AUGMENT[key] || {}) }]
+  }
+  for (const [key, lineHeight] of Object.entries(PARAGRAPH_LINE_HEIGHT)) {
+    if (!out[key]) continue
+    const [size, meta] = out[key]
+    out[`p-${key}`] = [size, { ...meta, lineHeight }]
+  }
+  return out
+}
+
+const fontSize = buildFontSize()
+
 export { borderRadius, boxShadow, fontSize }
-export * from "./colorPalette.js"
+export * from './colorPalette.js'