From 96d5694fdb305028d7e6c26f2ca949213d64d6ff Mon Sep 17 00:00:00 2001
From: Faris Ansari <netchamp.faris@gmail.com>
Date: Fri, 22 May 2026 03:07:28 +0530
Subject: [PATCH 01/22] feat(tokens): sync espresso v2 design tokens from Figma
 + rebuild foundations docs
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Generator
- tailwind/figma-tokens-to-theme.js reads the W3C DTCG token JSON
  exported from Figma (espresso-v2-design-tokens/) and emits
  tailwind/generated/{colors,radius,typography}.json
- Run with `yarn sync-tokens`
- Preserves legacy semantic names (surface-cards, surface-white,
  ink-gray-9, outline-gray-modals, …) via alias + legacy-entry maps
  so existing src/ and docs/ usage keeps working through the rename

Tailwind
- tailwind/colors.json refreshed from Figma; adds *.950 shades,
  gray-alpha and red-alpha ramps, surface/ink/outline updates
- tailwind/plugin.js now consumes radius.json + typography.json
  instead of hardcoded scales; exposes new sizes (tiny, 4xl..15xl)
  and the full numeric radius scale (rounded-0..9) alongside the
  named aliases

Docs
- New /docs/foundations/* pages replacing /docs/design-system/*:
  Colours — Base, Colours — Semantic, Typography, Corner Radius,
  Drop Shadow
- Components in docs/components/foundations/ read directly from
  the generated JSON; light/dark TabButtons toggle; click-to-copy
- Layout.vue respects `outline: false` frontmatter (custom
  OnThisPage was previously unconditional)
---
 .gitignore                                    |    4 +-
 components.d.ts                               |    5 +-
 docs/components/Docs/sidebarList.ts           |   12 +-
 docs/components/Layout.vue                    |    2 +-
 docs/components/foundations/PalettePage.vue   |  222 ++
 docs/components/foundations/RadiusPage.vue    |   93 +
 docs/components/foundations/SemanticPage.vue  |  141 ++
 .../components/foundations/TypographyPage.vue |  127 ++
 docs/content/docs/design-system/[token].md    |   23 -
 .../docs/design-system/[token].paths.ts       |  125 --
 docs/content/docs/foundations/colours/base.md |   11 +
 .../docs/foundations/colours/semantic.md      |   11 +
 .../content/docs/foundations/corner-radius.md |   11 +
 docs/content/docs/foundations/drop-shadow.md  |   11 +
 docs/content/docs/foundations/typography.md   |   11 +
 .../Styles.Dark.tokens.json                   |  588 ++++++
 .../Styles.Light.tokens.json                  |  588 ++++++
 .../Tokens.Mode 1.tokens.json                 |  120 ++
 .../Typography.Desktop.tokens.json            |  204 ++
 .../color.styles.tokens.json                  |  111 +
 .../effect.styles.tokens.json                 |  528 +++++
 .../grid.styles.tokens.json                   |   25 +
 espresso-v2-design-tokens/manifest.json       |   44 +
 .../text.styles.tokens.json                   | 1804 +++++++++++++++++
 ...4\265 Colour primitives.Light.tokens.json" | 1358 +++++++++++++
 package.json                                  |    3 +-
 tailwind/colors.json                          |  882 ++++----
 tailwind/figma-tokens-to-theme.js             |  351 ++++
 tailwind/generated/colors.json                |  675 ++++++
 tailwind/generated/radius.json                |   20 +
 tailwind/generated/typography.json            |  140 ++
 tailwind/plugin.js                            |   61 +-
 32 files changed, 7796 insertions(+), 515 deletions(-)
 create mode 100644 docs/components/foundations/PalettePage.vue
 create mode 100644 docs/components/foundations/RadiusPage.vue
 create mode 100644 docs/components/foundations/SemanticPage.vue
 create mode 100644 docs/components/foundations/TypographyPage.vue
 delete mode 100644 docs/content/docs/design-system/[token].md
 delete mode 100644 docs/content/docs/design-system/[token].paths.ts
 create mode 100644 docs/content/docs/foundations/colours/base.md
 create mode 100644 docs/content/docs/foundations/colours/semantic.md
 create mode 100644 docs/content/docs/foundations/corner-radius.md
 create mode 100644 docs/content/docs/foundations/drop-shadow.md
 create mode 100644 docs/content/docs/foundations/typography.md
 create mode 100644 espresso-v2-design-tokens/Styles.Dark.tokens.json
 create mode 100644 espresso-v2-design-tokens/Styles.Light.tokens.json
 create mode 100644 espresso-v2-design-tokens/Tokens.Mode 1.tokens.json
 create mode 100644 espresso-v2-design-tokens/Typography.Desktop.tokens.json
 create mode 100644 espresso-v2-design-tokens/color.styles.tokens.json
 create mode 100644 espresso-v2-design-tokens/effect.styles.tokens.json
 create mode 100644 espresso-v2-design-tokens/grid.styles.tokens.json
 create mode 100644 espresso-v2-design-tokens/manifest.json
 create mode 100644 espresso-v2-design-tokens/text.styles.tokens.json
 create mode 100644 "espresso-v2-design-tokens/\360\237\224\265 Colour primitives.Light.tokens.json"
 create mode 100644 tailwind/figma-tokens-to-theme.js
 create mode 100644 tailwind/generated/colors.json
 create mode 100644 tailwind/generated/radius.json
 create mode 100644 tailwind/generated/typography.json

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..6554d2161 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 */
diff --git a/docs/components/Docs/sidebarList.ts b/docs/components/Docs/sidebarList.ts
index f312019f0..074375581 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: 'Colours — Base', link: '/docs/foundations/colours/base' },
+        { text: 'Colours — Semantic', link: '/docs/foundations/colours/semantic' },
+        { text: 'Typography', link: '/docs/foundations/typography' },
+        { text: 'Corner Radius', link: '/docs/foundations/corner-radius' },
+        { text: 'Drop Shadow', link: '/docs/foundations/drop-shadow' },
       ],
     },
     {
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/PalettePage.vue b/docs/components/foundations/PalettePage.vue
new file mode 100644
index 000000000..9a5dc5161
--- /dev/null
+++ b/docs/components/foundations/PalettePage.vue
@@ -0,0 +1,222 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+import { TabButtons } from 'frappe-ui'
+import colors from '../../../tailwind/colors.json'
+
+type Mode = 'lightMode' | 'darkMode'
+
+const mode = ref<Mode>('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>
+  <div class="grid gap-6">
+    <header class="grid gap-3">
+      <p class="text-p-base text-ink-gray-6 max-w-2xl">
+        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" />
+    </header>
+
+    <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="h-14 rounded shadow-[inset_0_0_0_1px_rgba(0,0,0,0.08)] dark:shadow-[inset_0_0_0_1px_rgba(255,255,255,0.1)] 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 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="h-14 rounded shadow-[inset_0_0_0_1px_rgba(0,0,0,0.08)] dark:shadow-[inset_0_0_0_1px_rgba(255,255,255,0.1)]"
+            :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 p-2 rounded bg-ink-gray-9"
+            :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 shadow-[inset_0_0_0_1px_rgba(255,255,255,0.15)]"
+                :style="{ background: value }"
+              ></div>
+              <span class="text-2xs text-ink-white 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 p-2 rounded bg-surface-white shadow-[inset_0_0_0_1px_rgba(0,0,0,0.08)] dark:shadow-[inset_0_0_0_1px_rgba(255,255,255,0.1)]"
+            :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 shadow-[inset_0_0_0_1px_rgba(0,0,0,0.08)] dark:shadow-[inset_0_0_0_1px_rgba(255,255,255,0.1)]"
+                :style="{ background: 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 shadow-[inset_0_0_0_1px_rgba(0,0,0,0.08)] dark:shadow-[inset_0_0_0_1px_rgba(255,255,255,0.1)]"
+            :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..01da75f5d
--- /dev/null
+++ b/docs/components/foundations/RadiusPage.vue
@@ -0,0 +1,93 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import radius from '../../../tailwind/generated/radius.json'
+
+// Split into two groups for clarity: Figma's numeric scale and the named aliases.
+const NUMERIC_KEYS = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9']
+const NAMED_KEYS = ['none', 'sm', 'DEFAULT', 'md', 'lg', 'xl', '2xl', 'full']
+
+const numeric = computed(() =>
+  NUMERIC_KEYS.filter((k) => k in radius).map((k) => ({
+    name: k,
+    value: (radius as Record<string, string>)[k],
+  })),
+)
+const named = computed(() =>
+  NAMED_KEYS.filter((k) => k in radius).map((k) => ({
+    name: k,
+    value: (radius as Record<string, string>)[k],
+    cls: k === 'DEFAULT' ? 'rounded' : `rounded-${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>, …) are layered on top
+        for ergonomics.
+      </p>
+    </header>
+
+    <section class="grid gap-4">
+      <div class="grid gap-1">
+        <h2 class="text-xl font-semibold text-ink-gray-8 m-0">Numeric scale</h2>
+        <p class="text-p-sm text-ink-gray-5 m-0">From Figma. Use these in new code.</p>
+      </div>
+      <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-5 gap-3">
+        <button
+          v-for="r in numeric"
+          :key="r.name"
+          class="grid gap-2 text-left"
+          @click="copy(`rounded-${r.name}`)"
+        >
+          <div
+            class="aspect-square bg-surface-blue-2 border border-outline-blue-3"
+            :style="{ borderRadius: r.value }"
+          ></div>
+          <div class="grid">
+            <span class="text-2xs font-mono text-ink-gray-5">
+              rounded-{{ r.name }}
+            </span>
+            <span class="text-sm font-medium text-ink-gray-8">{{ r.value }}</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">Named aliases</h2>
+        <p class="text-p-sm text-ink-gray-5 m-0">
+          Tailwind-style ergonomic names; resolve to the same values as the
+          numeric scale.
+        </p>
+      </div>
+      <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-3">
+        <button
+          v-for="r in named"
+          :key="r.name"
+          class="grid gap-2 text-left"
+          @click="copy(r.cls)"
+        >
+          <div
+            class="aspect-square bg-surface-gray-3 border border-outline-gray-3"
+            :style="{ borderRadius: r.value }"
+          ></div>
+          <div class="grid">
+            <span class="text-2xs font-mono text-ink-gray-5">{{ r.cls }}</span>
+            <span class="text-sm font-medium text-ink-gray-8">{{ r.value }}</span>
+          </div>
+        </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..99f8336aa
--- /dev/null
+++ b/docs/components/foundations/SemanticPage.vue
@@ -0,0 +1,141 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+import { TabButtons } from 'frappe-ui'
+import colors from '../../../tailwind/colors.json'
+
+type Mode = 'light' | 'dark'
+const mode = ref<Mode>('light')
+
+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
+}
+
+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,
+    value: resolveRef(ref),
+  }))
+}
+
+const sections = computed(() =>
+  GROUPS.map((g) => ({ ...g, entries: pickEntries(g.category) })),
+)
+
+function copy(text: string) {
+  navigator.clipboard?.writeText(text)
+}
+
+// Group entries by color subfamily (gray, red, green, …) for visual clustering.
+function groupEntries(entries: { name: string; ref: string; value: string }[]) {
+  const groups = new Map<string, typeof entries>()
+  for (const e of entries) {
+    // Token names look like "gray-1", "red-3", "blue-link", "menu-bar", "alert-button-default".
+    // Group by the head segment before the first hyphen for ramps, or treat as singleton.
+    const head = e.name.includes('-') ? e.name.split('-')[0] : e.name
+    if (!groups.has(head)) groups.set(head, [])
+    groups.get(head)!.push(e)
+  }
+  return Array.from(groups.entries()).map(([head, items]) => ({ head, items }))
+}
+</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-6"
+    >
+      <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
+        v-for="group in groupEntries(section.entries)"
+        :key="group.head"
+        class="grid gap-3"
+      >
+        <span class="text-xs text-ink-gray-5 capitalize">{{ group.head }}</span>
+        <div class="grid gap-x-6 gap-y-6 grid-cols-2 md:grid-cols-3 lg:grid-cols-4">
+          <button
+            v-for="entry in group.items"
+            :key="entry.name"
+            class="flex items-center gap-3 text-left"
+            @click="copy(`${section.prefix}${entry.name}`)"
+          >
+            <div
+              class="size-10 rounded shrink-0 shadow-[inset_0_0_0_1px_rgba(0,0,0,0.08)] dark:shadow-[inset_0_0_0_1px_rgba(255,255,255,0.1)]"
+              :style="{ background: entry.value }"
+            ></div>
+            <div class="grid gap-1 min-w-0">
+              <span class="text-sm font-medium text-ink-gray-8 truncate">
+                {{ section.prefix }}{{ entry.name }}
+              </span>
+              <span class="text-2xs font-mono text-ink-gray-5 uppercase">
+                {{ entry.value }}
+              </span>
+            </div>
+          </button>
+        </div>
+      </div>
+    </section>
+  </div>
+</template>
diff --git a/docs/components/foundations/TypographyPage.vue b/docs/components/foundations/TypographyPage.vue
new file mode 100644
index 000000000..946ac76ee
--- /dev/null
+++ b/docs/components/foundations/TypographyPage.vue
@@ -0,0 +1,127 @@
+<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']
+
+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 || {} }
+}
+
+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.meta.lineHeight">lh {{ item.meta.lineHeight }}</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.meta.lineHeight">lh {{ item.meta.lineHeight }}</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/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..09e5abd9e
--- /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 Palette
+
+<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..b4d0afd94
--- /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 Colours
+
+<SemanticPage />
diff --git a/docs/content/docs/foundations/corner-radius.md b/docs/content/docs/foundations/corner-radius.md
new file mode 100644
index 000000000..0b8eacb57
--- /dev/null
+++ b/docs/content/docs/foundations/corner-radius.md
@@ -0,0 +1,11 @@
+---
+outline: false
+---
+
+<script setup>
+import RadiusPage from '@/components/foundations/RadiusPage.vue'
+</script>
+
+# Corner Radius
+
+<RadiusPage />
diff --git a/docs/content/docs/foundations/drop-shadow.md b/docs/content/docs/foundations/drop-shadow.md
new file mode 100644
index 000000000..b50726df3
--- /dev/null
+++ b/docs/content/docs/foundations/drop-shadow.md
@@ -0,0 +1,11 @@
+---
+outline: false
+---
+
+<script setup>
+import DropShadow from '@/components/tokens/DropShadow.vue'
+</script>
+
+# Drop Shadow
+
+<DropShadow />
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/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..805aa33d9
--- /dev/null
+++ b/tailwind/figma-tokens-to-theme.js
@@ -0,0 +1,351 @@
+/**
+ * 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 }
+}
+
+// ---------- 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())
+
+  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/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..bd33124ac 100644
--- a/tailwind/plugin.js
+++ b/tailwind/plugin.js
@@ -4,12 +4,55 @@ import {
   generateSemanticColors,
   generateCSSVariables,
 } from './colorPalette.js'
-import { borderRadius, boxShadow, fontSize } from './tokens.js'
+import radiusTokens from './generated/radius.json'
+import typographyTokens from './generated/typography.json'
 
 let colorPalette = generateColorPalette()
 let semanticColors = generateSemanticColors()
 let cssVariables = generateCSSVariables()
 
+// 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' },
+}
+
+// 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
+}
+
 let globalStyles = (theme) => ({
   html: {
     'font-family': `InterVar, ${theme('fontFamily.sans')}`,
@@ -53,14 +96,24 @@ export default plugin(
   {
     theme: {
       colors: colorPalette,
-      borderRadius: borderRadius,
-      boxShadow: boxShadow,
+      borderRadius: radiusTokens,
+      boxShadow: {
+        sm: '0px 1px 2px rgba(0, 0, 0, 0.1)',
+        DEFAULT:
+          '0px 0px 1px rgba(0, 0, 0, 0.45), 0px 1px 2px rgba(0, 0, 0, 0.1)',
+        md: '0px 0px 1px rgba(0, 0, 0, 0.12), 0px 0.5px 2px rgba(0, 0, 0, 0.15), 0px 2px 3px rgba(0, 0, 0, 0.16)',
+        lg: '0px 0px 1px rgba(0, 0, 0, 0.35), 0px 6px 8px -4px rgba(0, 0, 0, 0.1)',
+        xl: '0px 0px 1px rgba(0, 0, 0, 0.19), 0px 1px 2px rgba(0, 0, 0, 0.07), 0px 6px 15px -5px rgba(0, 0, 0, 0.11)',
+        '2xl':
+          '0px 0px 1px rgba(0, 0, 0, 0.2), 0px 1px 3px rgba(0, 0, 0, 0.05), 0px 10px 24px -3px rgba(0, 0, 0, 0.1)',
+        none: 'none',
+      },
       container: {
         padding: {
           xl: '5rem',
         },
       },
-      fontSize: fontSize,
+      fontSize: buildFontSize(),
       screens: {
         sm: '640px',
         md: '768px',

From c950fd28c5efd53f89128c82dc24180cbce2f68c Mon Sep 17 00:00:00 2001
From: Faris Ansari <netchamp.faris@gmail.com>
Date: Fri, 22 May 2026 03:09:26 +0530
Subject: [PATCH 02/22] docs(foundations): use gray for corner radius example
 tiles

---
 docs/components/foundations/RadiusPage.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/components/foundations/RadiusPage.vue b/docs/components/foundations/RadiusPage.vue
index 01da75f5d..90b7da080 100644
--- a/docs/components/foundations/RadiusPage.vue
+++ b/docs/components/foundations/RadiusPage.vue
@@ -50,7 +50,7 @@ function copy(text: string) {
           @click="copy(`rounded-${r.name}`)"
         >
           <div
-            class="aspect-square bg-surface-blue-2 border border-outline-blue-3"
+            class="aspect-square bg-surface-gray-3 border border-outline-gray-3"
             :style="{ borderRadius: r.value }"
           ></div>
           <div class="grid">

From 67c2eb218b7d46a74da02591428e950e0cd1a8be Mon Sep 17 00:00:00 2001
From: Faris Ansari <netchamp.faris@gmail.com>
Date: Fri, 22 May 2026 10:21:14 +0530
Subject: [PATCH 03/22] docs(foundations): square palette swatches

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
---
 docs/components/foundations/PalettePage.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/docs/components/foundations/PalettePage.vue b/docs/components/foundations/PalettePage.vue
index 9a5dc5161..3755e99d8 100644
--- a/docs/components/foundations/PalettePage.vue
+++ b/docs/components/foundations/PalettePage.vue
@@ -97,7 +97,7 @@ function copy(text: string) {
           @click="copy(`${mode === 'darkMode' ? 'dark-' : ''}${family.key}-${shade}`)"
         >
           <div
-            class="h-14 rounded shadow-[inset_0_0_0_1px_rgba(0,0,0,0.08)] dark:shadow-[inset_0_0_0_1px_rgba(255,255,255,0.1)] transition-transform group-hover:scale-[1.02]"
+            class="aspect-square rounded shadow-[inset_0_0_0_1px_rgba(0,0,0,0.08)] dark:shadow-[inset_0_0_0_1px_rgba(255,255,255,0.1)] transition-transform group-hover:scale-[1.02]"
             :style="{ background: value as string }"
           ></div>
           <div class="grid gap-1">
@@ -138,7 +138,7 @@ function copy(text: string) {
           @click="copy(`${family.key}-${shade}`)"
         >
           <div
-            class="h-14 rounded shadow-[inset_0_0_0_1px_rgba(0,0,0,0.08)] dark:shadow-[inset_0_0_0_1px_rgba(255,255,255,0.1)]"
+            class="aspect-square rounded shadow-[inset_0_0_0_1px_rgba(0,0,0,0.08)] dark:shadow-[inset_0_0_0_1px_rgba(255,255,255,0.1)]"
             :style="{ background: value as string }"
           ></div>
           <div class="grid gap-1 bg-surface-white/80 dark:bg-surface-gray-1/80 rounded px-1">

From 3aea83b0bfc77607a2bd5138fb3bb994ccbf2b59 Mon Sep 17 00:00:00 2001
From: Faris Ansari <netchamp.faris@gmail.com>
Date: Fri, 22 May 2026 10:21:21 +0530
Subject: [PATCH 04/22] fix(docs): restore shiki colors in dev

transformerStyleToClass only flushes its CSS at buildEnd, so in dev the
generated shiki.css stays empty and code blocks lose their syntax
highlighting. Skip the transformer in dev and let shiki emit inline
--shiki-light/dark styles directly.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
---
 docs/.vitepress/config.ts | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

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)
     },

From 30ce4f4979ae63c0749b5d5bd07d0832a692a76e Mon Sep 17 00:00:00 2001
From: Faris Ansari <netchamp.faris@gmail.com>
Date: Sun, 24 May 2026 01:57:28 +0530
Subject: [PATCH 05/22] feat(foundations): align Button with Figma + add
 foundations spec

- Add text-{size}-medium utilities (ADR-0004) for Figma's named
  typography styles; Button md/lg adopt them for exact tracking parity
- Switch Button focus ring to ring-2 to match Figma's 2px shadow (ADR-0005)
- Adopt numbered radius tokens as canonical (ADR-0006); Button migrates
  from named aliases; named aliases flagged for migration
- Add spec/foundations.md covering typography, focus, radius, themes,
  code-only extensions, and the Figma verification process

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
---
 spec/README.md                              |   4 +
 spec/adr/0004-typography-style-utilities.md |  60 +++++++
 spec/adr/0005-focus-ring-2px.md             |  42 +++++
 spec/adr/0006-numbered-radius-tokens.md     |  54 +++++++
 spec/adr/README.md                          |   3 +
 spec/foundations.md                         | 165 ++++++++++++++++++++
 src/components/Button/Button.vue            |  28 ++--
 tailwind/plugin.js                          |  29 ++++
 8 files changed, 371 insertions(+), 14 deletions(-)
 create mode 100644 spec/adr/0004-typography-style-utilities.md
 create mode 100644 spec/adr/0005-focus-ring-2px.md
 create mode 100644 spec/adr/0006-numbered-radius-tokens.md
 create mode 100644 spec/foundations.md

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..a709f8cab
--- /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`. `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 |
+|---|---|---|
+| `xl`, `2xl` button sizes | `Button.vue` `sizeClasses` | 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. xl/2xl + blue/green/etc. themes are code-only extensions. |
diff --git a/src/components/Button/Button.vue b/src/components/Button/Button.vue
index b8aa98273..6ccf84f85 100644
--- a/src/components/Button/Button.vue
+++ b/src/components/Button/Button.vue
@@ -142,10 +142,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:ring-2 focus-visible:ring-outline-gray-3',
+    blue: 'focus-visible:ring-2 focus-visible:ring-blue-400',
+    green: 'focus-visible:ring-2 focus-visible:ring-outline-green-2',
+    red: 'focus-visible:ring-2 focus-visible:ring-outline-red-2',
   }[props.theme]
 
   let variantClasses = {
@@ -185,20 +185,20 @@ 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',
+    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',
+      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]
   }
 
diff --git a/tailwind/plugin.js b/tailwind/plugin.js
index bd33124ac..3cf3c8e04 100644
--- a/tailwind/plugin.js
+++ b/tailwind/plugin.js
@@ -25,6 +25,17 @@ const FONT_SIZE_AUGMENT = {
   '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',
@@ -53,6 +64,23 @@ function buildFontSize() {
   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: {
     'font-family': `InterVar, ${theme('fontFamily.sans')}`,
@@ -92,6 +120,7 @@ export default plugin(
   function ({ addBase, addComponents, theme }) {
     addBase({ ...globalStyles(theme), ...cssVariables })
     addComponents(componentStyles)
+    addComponents(buildTextStyleUtilities())
   },
   {
     theme: {

From 30110092aaca092c28fa2b72883cc3d86b22b01d Mon Sep 17 00:00:00 2001
From: Faris Ansari <netchamp.faris@gmail.com>
Date: Sun, 24 May 2026 02:29:38 +0530
Subject: [PATCH 06/22] docs(button): replace prop stories with Figma examples
 + playground

- Delete Variants/Themes/Sizes/Icons stories; the API table already
  covers prop variations
- Add 6 contextual stories matching the Button Figma file: section
  controls, section action, selection toolbar, inline actions, stacked
  actions, and a live-class card
- Add a Playground builder (TabButtons + Switch knobs) with live
  preview and dynamically generated Vue snippet; registered globally
  as <ButtonBuilder> in the VitePress theme

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
---
 docs/.vitepress/theme/index.ts                |   2 +
 docs/components/Docs/ButtonBuilder.vue        | 163 ++++++++++++++++++
 src/components/Button/Button.md               |  28 ++-
 src/components/Button/stories/Icons.vue       |  27 ---
 .../Button/stories/InlineActions.vue          |  10 ++
 .../Button/stories/LiveClassCard.vue          |  34 ++++
 .../Button/stories/SectionAction.vue          |  17 ++
 .../Button/stories/SectionControls.vue        |  28 +++
 .../Button/stories/SelectionToolbar.vue       |  20 +++
 src/components/Button/stories/Sizes.vue       |  11 --
 .../Button/stories/StackedActions.vue         |  10 ++
 src/components/Button/stories/Themes.vue      |  10 --
 src/components/Button/stories/Variants.vue    |  10 --
 13 files changed, 304 insertions(+), 66 deletions(-)
 create mode 100644 docs/components/Docs/ButtonBuilder.vue
 delete mode 100644 src/components/Button/stories/Icons.vue
 create mode 100644 src/components/Button/stories/InlineActions.vue
 create mode 100644 src/components/Button/stories/LiveClassCard.vue
 create mode 100644 src/components/Button/stories/SectionAction.vue
 create mode 100644 src/components/Button/stories/SectionControls.vue
 create mode 100644 src/components/Button/stories/SelectionToolbar.vue
 delete mode 100644 src/components/Button/stories/Sizes.vue
 create mode 100644 src/components/Button/stories/StackedActions.vue
 delete mode 100644 src/components/Button/stories/Themes.vue
 delete mode 100644 src/components/Button/stories/Variants.vue

diff --git a/docs/.vitepress/theme/index.ts b/docs/.vitepress/theme/index.ts
index 5d47ce4bf..9b169b7b9 100644
--- a/docs/.vitepress/theme/index.ts
+++ b/docs/.vitepress/theme/index.ts
@@ -3,6 +3,7 @@ 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 Layout from '../../components/Layout.vue'
 
 if (process.env.NODE_ENV === 'production') {
@@ -13,5 +14,6 @@ export default {
 	Layout,
   enhanceApp({ app, router, siteData }) {
     app.component('ComponentPreview', Demo)
+    app.component('ButtonBuilder', ButtonBuilder)
   },
 } satisfies Theme
diff --git a/docs/components/Docs/ButtonBuilder.vue b/docs/components/Docs/ButtonBuilder.vue
new file mode 100644
index 000000000..13b84fa2e
--- /dev/null
+++ b/docs/components/Docs/ButtonBuilder.vue
@@ -0,0 +1,163 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+import { Button, Switch, TabButtons } from 'frappe-ui'
+
+const label = ref('Save')
+const theme = ref<'gray' | 'blue' | 'green' | 'red'>('gray')
+const variant = ref<'solid' | 'subtle' | 'outline' | 'ghost'>('subtle')
+const size = ref<'sm' | 'md' | 'lg' | 'xl' | '2xl'>('sm')
+const icon = ref(false)
+const loading = ref(false)
+const disabled = ref(false)
+
+const variantButtons = [
+  { label: 'solid', value: 'solid' },
+  { label: 'subtle', value: 'subtle' },
+  { label: 'outline', value: 'outline' },
+  { label: 'ghost', value: 'ghost' },
+]
+const themeButtons = [
+  { label: 'gray', value: 'gray' },
+  { label: 'blue', value: 'blue' },
+  { label: 'green', value: 'green' },
+  { label: 'red', value: 'red' },
+]
+const sizeButtons = [
+  { label: 'sm', value: 'sm' },
+  { label: 'md', value: 'md' },
+  { label: 'lg', value: 'lg' },
+  { label: 'xl', value: 'xl' },
+  { label: '2xl', value: '2xl' },
+]
+
+const code = computed(() => {
+  const attrs: string[] = [
+    `variant="${variant.value}"`,
+    `theme="${theme.value}"`,
+    `size="${size.value}"`,
+    `label="${label.value}"`,
+  ]
+  if (icon.value) attrs.push(`icon-left="lucide-plus"`)
+  if (disabled.value) attrs.push('disabled')
+  if (loading.value) attrs.push('loading')
+
+  return ['<Button', ...attrs.map((a) => '  ' + a), '/>'].join('\n')
+})
+
+const copied = ref(false)
+function onCopy() {
+  navigator.clipboard?.writeText(code.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 min-h-[200px] items-center justify-center bg-surface-white p-8 dot-grid"
+      >
+        <Button
+          :theme="theme"
+          :variant="variant"
+          :size="size"
+          :icon-left="icon ? 'lucide-plus' : undefined"
+          :loading="loading"
+          :disabled="disabled"
+        >
+          {{ label }}
+        </Button>
+      </div>
+
+      <div class="flex flex-col gap-3 bg-surface-gray-1 p-4">
+        <div class="knob-row">
+          <span class="knob-label">label</span>
+          <input
+            v-model="label"
+            type="text"
+            class="h-7 w-40 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"
+          />
+        </div>
+        <div class="knob-row">
+          <span class="knob-label">variant</span>
+          <TabButtons v-model="variant" :buttons="variantButtons" />
+        </div>
+        <div class="knob-row">
+          <span class="knob-label">theme</span>
+          <TabButtons v-model="theme" :buttons="themeButtons" />
+        </div>
+        <div class="knob-row">
+          <span class="knob-label">size</span>
+          <TabButtons v-model="size" :buttons="sizeButtons" />
+        </div>
+        <div class="flex flex-wrap items-center gap-6">
+          <div class="flex items-center gap-2">
+            <span class="knob-label">icon</span>
+            <Switch v-model="icon" />
+          </div>
+          <div class="flex items-center gap-2">
+            <span class="knob-label">disabled</span>
+            <Switch v-model="disabled" />
+          </div>
+          <div class="flex items-center gap-2">
+            <span class="knob-label">loading</span>
+            <Switch v-model="loading" />
+          </div>
+        </div>
+      </div>
+
+      <div class="bg-surface-gray-1">
+        <div
+          class="flex items-center justify-between border-b border-outline-gray-1 px-4"
+        >
+          <div
+            class="-mb-px border-b border-ink-gray-8 py-2 text-sm font-medium text-ink-gray-8"
+          >
+            vue
+          </div>
+          <button
+            type="button"
+            class="inline-flex h-7 items-center gap-1.5 rounded-1 px-2 text-xs text-ink-gray-6 transition-colors hover:bg-surface-gray-2 hover:text-ink-gray-8"
+            :aria-label="copied ? 'Copied' : 'Copy code'"
+            @click="onCopy"
+          >
+            <span
+              :class="copied ? 'lucide-check' : 'lucide-copy'"
+              class="size-3.5"
+              aria-hidden="true"
+            />
+          </button>
+        </div>
+        <pre
+          class="overflow-x-auto p-4 text-sm leading-relaxed"
+        ><code class="font-mono text-ink-gray-8">{{ code }}</code></pre>
+      </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/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/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>

From 8b257c6f9c54e5a8d99e2498906622523a80235b Mon Sep 17 00:00:00 2001
From: Faris Ansari <netchamp.faris@gmail.com>
Date: Sun, 24 May 2026 03:06:50 +0530
Subject: [PATCH 07/22] feat(components): refine badge and button examples

---
 docs/.vitepress/theme/index.ts               |   2 +
 docs/components/Docs/BadgeBuilder.vue        | 171 +++++++++++++++++++
 docs/components/Docs/ButtonBuilder.vue       |  29 +++-
 spec/foundations.md                          |   6 +-
 src/components/Badge/Badge.api.md            |   2 +-
 src/components/Badge/Badge.cy.ts             |  44 +++--
 src/components/Badge/Badge.md                |  24 ++-
 src/components/Badge/Badge.vue               | 105 +++++++-----
 src/components/Badge/stories/CallMeta.vue    |  35 ++++
 src/components/Badge/stories/EventStatus.vue |  16 ++
 src/components/Badge/stories/ListStatus.vue  |  91 ++++++++++
 src/components/Badge/stories/Reactions.vue   |  33 ++++
 src/components/Badge/stories/RowTags.vue     |  39 +++++
 src/components/Badge/stories/Themes.vue      |  10 --
 src/components/Badge/stories/Variants.vue    |  10 --
 src/components/Badge/types.ts                |   3 +-
 src/components/Button/Button.cy.ts           |  18 +-
 src/components/Button/Button.vue             |   5 +
 src/components/Button/types.ts               |   2 +-
 src/components/Sidebar/Sidebar.api.md        |  12 +-
 20 files changed, 558 insertions(+), 99 deletions(-)
 create mode 100644 docs/components/Docs/BadgeBuilder.vue
 create mode 100644 src/components/Badge/stories/CallMeta.vue
 create mode 100644 src/components/Badge/stories/EventStatus.vue
 create mode 100644 src/components/Badge/stories/ListStatus.vue
 create mode 100644 src/components/Badge/stories/Reactions.vue
 create mode 100644 src/components/Badge/stories/RowTags.vue
 delete mode 100644 src/components/Badge/stories/Themes.vue
 delete mode 100644 src/components/Badge/stories/Variants.vue

diff --git a/docs/.vitepress/theme/index.ts b/docs/.vitepress/theme/index.ts
index 9b169b7b9..5f44030f7 100644
--- a/docs/.vitepress/theme/index.ts
+++ b/docs/.vitepress/theme/index.ts
@@ -4,6 +4,7 @@ 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 Layout from '../../components/Layout.vue'
 
 if (process.env.NODE_ENV === 'production') {
@@ -15,5 +16,6 @@ export default {
   enhanceApp({ app, router, siteData }) {
     app.component('ComponentPreview', Demo)
     app.component('ButtonBuilder', ButtonBuilder)
+    app.component('BadgeBuilder', BadgeBuilder)
   },
 } satisfies Theme
diff --git a/docs/components/Docs/BadgeBuilder.vue b/docs/components/Docs/BadgeBuilder.vue
new file mode 100644
index 000000000..2d2296536
--- /dev/null
+++ b/docs/components/Docs/BadgeBuilder.vue
@@ -0,0 +1,171 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+import { Badge, Switch, TabButtons } from 'frappe-ui'
+
+const label = ref('Gamma')
+const theme = ref<'gray' | 'blue' | 'green' | 'amber' | 'red' | 'violet'>(
+  'green',
+)
+const variant = ref<'solid' | 'subtle' | 'outline' | 'ghost'>('solid')
+const size = ref<'sm' | 'md' | 'lg'>('lg')
+const prefix = ref(true)
+const suffix = ref(false)
+
+const variantButtons = [
+  { label: 'solid', value: 'solid' },
+  { label: 'subtle', value: 'subtle' },
+  { label: 'outline', value: 'outline' },
+  { label: 'ghost', value: 'ghost' },
+]
+const themeButtons = [
+  { label: 'gray', value: 'gray' },
+  { label: 'blue', value: 'blue' },
+  { label: 'green', value: 'green' },
+  { label: 'amber', value: 'amber' },
+  { label: 'red', value: 'red' },
+  { label: 'violet', value: 'violet' },
+]
+const sizeButtons = [
+  { label: 'sm', value: 'sm' },
+  { label: 'md', value: 'md' },
+  { label: 'lg', value: 'lg' },
+]
+
+const code = computed(() => {
+  const attrs: string[] = [
+    `variant="${variant.value}"`,
+    `theme="${theme.value}"`,
+    `size="${size.value}"`,
+  ]
+  const slots: string[] = []
+  if (prefix.value) {
+    slots.push('  <template #prefix><span class="lucide-check" /></template>')
+  }
+  slots.push(`  ${label.value}`)
+  if (suffix.value) {
+    slots.push(
+      '  <template #suffix><span class="lucide-chevron-down" /></template>',
+    )
+  }
+
+  return [
+    '<Badge',
+    ...attrs.map((a) => '  ' + a),
+    '>',
+    ...slots,
+    '</Badge>',
+  ].join('\n')
+})
+
+const copied = ref(false)
+function onCopy() {
+  navigator.clipboard?.writeText(code.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 min-h-[200px] items-center justify-center bg-surface-white p-8 dot-grid"
+      >
+        <Badge :theme="theme" :variant="variant" :size="size">
+          <template v-if="prefix" #prefix>
+            <span class="lucide-check" />
+          </template>
+          {{ label }}
+          <template v-if="suffix" #suffix>
+            <span class="lucide-chevron-down" />
+          </template>
+        </Badge>
+      </div>
+
+      <div class="flex flex-col gap-3 bg-surface-gray-1 p-4">
+        <div class="knob-row">
+          <span class="knob-label">label</span>
+          <input
+            v-model="label"
+            type="text"
+            class="h-7 w-40 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"
+          />
+        </div>
+        <div class="knob-row">
+          <span class="knob-label">variant</span>
+          <TabButtons v-model="variant" :buttons="variantButtons" />
+        </div>
+        <div class="knob-row">
+          <span class="knob-label">theme</span>
+          <TabButtons v-model="theme" :buttons="themeButtons" />
+        </div>
+        <div class="knob-row">
+          <span class="knob-label">size</span>
+          <TabButtons v-model="size" :buttons="sizeButtons" />
+        </div>
+        <div class="flex flex-wrap items-center gap-6">
+          <div class="flex items-center gap-2">
+            <span class="knob-label">prefix</span>
+            <Switch v-model="prefix" />
+          </div>
+          <div class="flex items-center gap-2">
+            <span class="knob-label">suffix</span>
+            <Switch v-model="suffix" />
+          </div>
+        </div>
+      </div>
+
+      <div class="bg-surface-gray-1">
+        <div
+          class="flex items-center justify-between border-b border-outline-gray-1 px-4"
+        >
+          <div
+            class="-mb-px border-b border-ink-gray-8 py-2 text-sm font-medium text-ink-gray-8"
+          >
+            vue
+          </div>
+          <button
+            type="button"
+            class="inline-flex h-7 items-center gap-1.5 rounded-1 px-2 text-xs text-ink-gray-6 transition-colors hover:bg-surface-gray-2 hover:text-ink-gray-8"
+            :aria-label="copied ? 'Copied' : 'Copy code'"
+            @click="onCopy"
+          >
+            <span
+              :class="copied ? 'lucide-check' : 'lucide-copy'"
+              class="size-3.5"
+              aria-hidden="true"
+            />
+          </button>
+        </div>
+        <pre
+          class="overflow-x-auto p-4 text-sm leading-relaxed"
+        ><code class="font-mono text-ink-gray-8">{{ code }}</code></pre>
+      </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/ButtonBuilder.vue b/docs/components/Docs/ButtonBuilder.vue
index 13b84fa2e..eadd39602 100644
--- a/docs/components/Docs/ButtonBuilder.vue
+++ b/docs/components/Docs/ButtonBuilder.vue
@@ -3,10 +3,12 @@ import { computed, ref } from 'vue'
 import { Button, Switch, TabButtons } from 'frappe-ui'
 
 const label = ref('Save')
-const theme = ref<'gray' | 'blue' | 'green' | 'red'>('gray')
+const theme = ref<'gray' | 'red'>('gray')
 const variant = ref<'solid' | 'subtle' | 'outline' | 'ghost'>('subtle')
-const size = ref<'sm' | 'md' | 'lg' | 'xl' | '2xl'>('sm')
+const size = ref<'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl'>('sm')
+const iconLeft = ref(false)
 const icon = ref(false)
+const iconRight = ref(false)
 const loading = ref(false)
 const disabled = ref(false)
 
@@ -18,11 +20,10 @@ const variantButtons = [
 ]
 const themeButtons = [
   { label: 'gray', value: 'gray' },
-  { label: 'blue', value: 'blue' },
-  { label: 'green', value: 'green' },
   { label: 'red', value: 'red' },
 ]
 const sizeButtons = [
+  { label: 'xs', value: 'xs' },
   { label: 'sm', value: 'sm' },
   { label: 'md', value: 'md' },
   { label: 'lg', value: 'lg' },
@@ -37,7 +38,12 @@ const code = computed(() => {
     `size="${size.value}"`,
     `label="${label.value}"`,
   ]
-  if (icon.value) attrs.push(`icon-left="lucide-plus"`)
+  if (icon.value) {
+    attrs.push(`icon="lucide-plus"`)
+  } else {
+    if (iconLeft.value) attrs.push(`icon-left="lucide-plus"`)
+    if (iconRight.value) attrs.push(`icon-right="lucide-chevron-right"`)
+  }
   if (disabled.value) attrs.push('disabled')
   if (loading.value) attrs.push('loading')
 
@@ -64,7 +70,10 @@ function onCopy() {
           :theme="theme"
           :variant="variant"
           :size="size"
-          :icon-left="icon ? 'lucide-plus' : undefined"
+          :label="label"
+          :icon-left="!icon && iconLeft ? 'lucide-plus' : undefined"
+          :icon="icon ? 'lucide-plus' : undefined"
+          :icon-right="!icon && iconRight ? 'lucide-chevron-right' : undefined"
           :loading="loading"
           :disabled="disabled"
         >
@@ -94,10 +103,18 @@ function onCopy() {
           <TabButtons v-model="size" :buttons="sizeButtons" />
         </div>
         <div class="flex flex-wrap items-center gap-6">
+          <div class="flex items-center gap-2">
+            <span class="knob-label">iconLeft</span>
+            <Switch v-model="iconLeft" :disabled="icon" />
+          </div>
           <div class="flex items-center gap-2">
             <span class="knob-label">icon</span>
             <Switch v-model="icon" />
           </div>
+          <div class="flex items-center gap-2">
+            <span class="knob-label">iconRight</span>
+            <Switch v-model="iconRight" :disabled="icon" />
+          </div>
           <div class="flex items-center gap-2">
             <span class="knob-label">disabled</span>
             <Switch v-model="disabled" />
diff --git a/spec/foundations.md b/spec/foundations.md
index a709f8cab..241a2bc5c 100644
--- a/spec/foundations.md
+++ b/spec/foundations.md
@@ -28,7 +28,7 @@ Anything in this repo that diverges from Figma is either (a) drift to be fixed,
 | 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`. `xl` and `2xl` are code-only extensions |
+| Component size scale | Figma defines `sm` / `md` / `lg`. `xs`, `xl`, and `2xl` are code-only extensions |
 
 ## Typography
 
@@ -140,7 +140,7 @@ Extensions to the Figma spec that the library ships **intentionally**, not as dr
 
 | Extension | Where | Reason |
 |---|---|---|
-| `xl`, `2xl` button sizes | `Button.vue` `sizeClasses` | Pre-espresso-v2 sizes preserved for back-compat. No Figma reference — use at own risk; visual treatment may shift if Figma adds these later. |
+| `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. |
@@ -162,4 +162,4 @@ 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. xl/2xl + blue/green/etc. themes are code-only extensions. |
+| `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/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.vue b/src/components/Button/Button.vue
index 6ccf84f85..8cdd0f75d 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',
@@ -185,6 +186,7 @@ const buttonClasses = computed(() => {
   let disabledClasses = disabledClassesMap[themeVariant]
 
   let sizeClasses = {
+    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',
@@ -194,6 +196,7 @@ const buttonClasses = computed(() => {
 
   if (isIconButton.value) {
     sizeClasses = {
+      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',
@@ -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/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/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>

From d1240498bcc2908c5117f4dd1d43479addb49f3c Mon Sep 17 00:00:00 2001
From: Faris Ansari <netchamp.faris@gmail.com>
Date: Sun, 24 May 2026 20:45:55 +0530
Subject: [PATCH 08/22] feat(tokens): add elevation and focus-ring effect
 tokens

Wire the Figma token pipeline to emit elevation/focus effects, expose
them as CSS variables, and register `shadow-*` / `ring-*` utilities
that resolve to the new variables. Replace the standalone drop-shadow
docs page with a broader elevation page that previews both stacks.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
---
 docs/components/Docs/sidebarList.ts           |  2 +-
 .../foundations/ElevationPreview.vue          | 57 ++++++++++++++++
 .../foundations/FocusRingPreview.vue          | 22 +++++++
 docs/components/tokens/DropShadow.vue         | 24 -------
 docs/content/docs/foundations/drop-shadow.md  | 11 ----
 docs/content/docs/foundations/elevation.md    | 65 +++++++++++++++++++
 tailwind/colorPalette.js                      | 36 +++++++++-
 tailwind/figma-tokens-to-theme.js             | 49 ++++++++++++++
 tailwind/generated/effects.json               | 41 ++++++++++++
 tailwind/plugin.js                            | 50 +++++++++++---
 10 files changed, 310 insertions(+), 47 deletions(-)
 create mode 100644 docs/components/foundations/ElevationPreview.vue
 create mode 100644 docs/components/foundations/FocusRingPreview.vue
 delete mode 100644 docs/components/tokens/DropShadow.vue
 delete mode 100644 docs/content/docs/foundations/drop-shadow.md
 create mode 100644 docs/content/docs/foundations/elevation.md
 create mode 100644 tailwind/generated/effects.json

diff --git a/docs/components/Docs/sidebarList.ts b/docs/components/Docs/sidebarList.ts
index 074375581..21fafbd68 100644
--- a/docs/components/Docs/sidebarList.ts
+++ b/docs/components/Docs/sidebarList.ts
@@ -48,7 +48,7 @@ export function getSidebarList(componentList: string[]): SidebarSection[] {
         { text: 'Colours — Semantic', link: '/docs/foundations/colours/semantic' },
         { text: 'Typography', link: '/docs/foundations/typography' },
         { text: 'Corner Radius', link: '/docs/foundations/corner-radius' },
-        { text: 'Drop Shadow', link: '/docs/foundations/drop-shadow' },
+        { text: 'Elevation', link: '/docs/foundations/elevation' },
       ],
     },
     {
diff --git a/docs/components/foundations/ElevationPreview.vue b/docs/components/foundations/ElevationPreview.vue
new file mode 100644
index 000000000..cbc81acc0
--- /dev/null
+++ b/docs/components/foundations/ElevationPreview.vue
@@ -0,0 +1,57 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const ELEVATION_STEPS = ['sm', 'base', 'md', 'lg', 'xl', '2xl'] as const
+
+// Dark-mode surface pairing — 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 previewTheme = ref<'light' | 'dark'>('light')
+</script>
+
+<template>
+  <div>
+    <div class="flex justify-end mb-3">
+      <div class="inline-flex rounded-md border border-outline-gray-2 p-0.5 text-xs">
+        <button
+          class="px-2 py-1 rounded-sm transition-colors"
+          :class="previewTheme === 'light' ? 'bg-surface-gray-3 text-ink-gray-8' : 'text-ink-gray-5'"
+          @click="previewTheme = 'light'"
+        >Light</button>
+        <button
+          class="px-2 py-1 rounded-sm transition-colors"
+          :class="previewTheme === 'dark' ? 'bg-surface-gray-3 text-ink-gray-8' : 'text-ink-gray-5'"
+          @click="previewTheme = 'dark'"
+        >Dark</button>
+      </div>
+    </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-surface-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/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/content/docs/foundations/drop-shadow.md b/docs/content/docs/foundations/drop-shadow.md
deleted file mode 100644
index b50726df3..000000000
--- a/docs/content/docs/foundations/drop-shadow.md
+++ /dev/null
@@ -1,11 +0,0 @@
----
-outline: false
----
-
-<script setup>
-import DropShadow from '@/components/tokens/DropShadow.vue'
-</script>
-
-# Drop Shadow
-
-<DropShadow />
diff --git a/docs/content/docs/foundations/elevation.md b/docs/content/docs/foundations/elevation.md
new file mode 100644
index 000000000..332d9d271
--- /dev/null
+++ b/docs/content/docs/foundations/elevation.md
@@ -0,0 +1,65 @@
+---
+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 flips between light and dark themes automatically — use
+the same `shadow-*` utility in both modes.
+
+## 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.
+
+**Dark mode is automatic.** Shadow utilities now resolve to
+`var(--elevation-*)` and flip values under `[data-theme="dark"]`. Remove any
+conditional `dark:shadow-*` overrides — they are no longer needed.
+
+**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/tailwind/colorPalette.js b/tailwind/colorPalette.js
index cfda87923..57b1fea03 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,37 @@ function generateSemanticColors() {
   return output
 }
 
-export { generateColorPalette, generateCSSVariables, generateSemanticColors }
+// Emit `--elevation-*` and `--focus-*` CSS variables that flip between light
+// and dark themes. Theme-independent entries (e.g. `elevation.custom.status`)
+// land in `:root` only. Consumed by the tailwind plugin alongside color vars.
+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['[data-theme="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/figma-tokens-to-theme.js b/tailwind/figma-tokens-to-theme.js
index 805aa33d9..57dd17124 100644
--- a/tailwind/figma-tokens-to-theme.js
+++ b/tailwind/figma-tokens-to-theme.js
@@ -330,6 +330,54 @@ function buildTypography() {
   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() {
@@ -344,6 +392,7 @@ function main() {
   writeJSON('colors.json', buildColors())
   writeJSON('radius.json', buildRadius())
   writeJSON('typography.json', buildTypography())
+  writeJSON('effects.json', buildEffects())
 
   console.log('✓ done')
 }
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/plugin.js b/tailwind/plugin.js
index 3cf3c8e04..e5b234cb4 100644
--- a/tailwind/plugin.js
+++ b/tailwind/plugin.js
@@ -3,13 +3,30 @@ import {
   generateColorPalette,
   generateSemanticColors,
   generateCSSVariables,
+  generateEffectVariables,
 } from './colorPalette.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(),
+)
+
+// 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
@@ -64,6 +81,18 @@ function buildFontSize() {
   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)) {
@@ -121,21 +150,22 @@ export default plugin(
     addBase({ ...globalStyles(theme), ...cssVariables })
     addComponents(componentStyles)
     addComponents(buildTextStyleUtilities())
+    addComponents(buildFocusRingUtilities())
   },
   {
     theme: {
       colors: colorPalette,
       borderRadius: radiusTokens,
       boxShadow: {
-        sm: '0px 1px 2px rgba(0, 0, 0, 0.1)',
-        DEFAULT:
-          '0px 0px 1px rgba(0, 0, 0, 0.45), 0px 1px 2px rgba(0, 0, 0, 0.1)',
-        md: '0px 0px 1px rgba(0, 0, 0, 0.12), 0px 0.5px 2px rgba(0, 0, 0, 0.15), 0px 2px 3px rgba(0, 0, 0, 0.16)',
-        lg: '0px 0px 1px rgba(0, 0, 0, 0.35), 0px 6px 8px -4px rgba(0, 0, 0, 0.1)',
-        xl: '0px 0px 1px rgba(0, 0, 0, 0.19), 0px 1px 2px rgba(0, 0, 0, 0.07), 0px 6px 15px -5px rgba(0, 0, 0, 0.11)',
-        '2xl':
-          '0px 0px 1px rgba(0, 0, 0, 0.2), 0px 1px 3px rgba(0, 0, 0, 0.05), 0px 10px 24px -3px rgba(0, 0, 0, 0.1)',
         none: 'none',
+        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)',
       },
       container: {
         padding: {
@@ -335,7 +365,7 @@ export default plugin(
           v3: {
             css: [
               {
-                fontSize: '14px',
+                fontSize: '15px',
                 fontWeight: 420,
                 lineHeight: '1.7',
                 letterSpacing: '0.02em',

From 984cf763c67280bc37a443395401fa1068fa6d9c Mon Sep 17 00:00:00 2001
From: Faris Ansari <netchamp.faris@gmail.com>
Date: Sun, 24 May 2026 20:46:27 +0530
Subject: [PATCH 09/22] feat(icon): add shared Icon renderer

Consolidates the lucide / feather / emoji / Vue-component icon-rendering
pattern that's currently duplicated across Button, Dropdown, Dialog, and
OptionIcon into one small component, so new call sites have one obvious
choice. Falsy values render nothing; fallthrough attrs go to the
rendered root.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
---
 src/components/Icon/Icon.cy.ts | 78 ++++++++++++++++++++++++++++++++++
 src/components/Icon/Icon.vue   | 50 ++++++++++++++++++++++
 src/components/Icon/index.ts   |  1 +
 src/index.ts                   |  1 +
 4 files changed, 130 insertions(+)
 create mode 100644 src/components/Icon/Icon.cy.ts
 create mode 100644 src/components/Icon/Icon.vue
 create mode 100644 src/components/Icon/index.ts

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/index.ts b/src/index.ts
index b687c166c..5b2377bc0 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'

From 011202fadd9f86df576b5c423a972503301b2bb4 Mon Sep 17 00:00:00 2001
From: Faris Ansari <netchamp.faris@gmail.com>
Date: Sun, 24 May 2026 20:46:56 +0530
Subject: [PATCH 10/22] feat(pill): add Pill primitive
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

A compact tab item used by TabButtons (and reusable on its own). The
`icon` prop renders an icon-only pill — any `label` is exposed only to
assistive tech. `iconLeft` / `iconRight` are accent icons rendered next
to a visible label, matching Button's semantics. Variants cover the
segmented, outline, underline, and browser-tab looks. Icon rendering
goes through the shared `<Icon>` component.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
---
 docs/.vitepress/theme/index.ts               |  10 +-
 docs/components/Docs/PillBuilder.vue         | 184 +++++++++++++++++++
 src/components/Pill/Pill.api.md              |  99 ++++++++++
 src/components/Pill/Pill.md                  |  20 ++
 src/components/Pill/Pill.vue                 | 146 +++++++++++++++
 src/components/Pill/index.ts                 |  10 +
 src/components/Pill/stories/BrowserEdges.vue |  42 +++++
 src/components/Pill/stories/Sizes.vue        |  49 +++++
 src/components/Pill/stories/Variants.vue     |  53 ++++++
 src/components/Pill/types.ts                 |  43 +++++
 src/index.ts                                 |   2 +-
 11 files changed, 653 insertions(+), 5 deletions(-)
 create mode 100644 docs/components/Docs/PillBuilder.vue
 create mode 100644 src/components/Pill/Pill.api.md
 create mode 100644 src/components/Pill/Pill.md
 create mode 100644 src/components/Pill/Pill.vue
 create mode 100644 src/components/Pill/index.ts
 create mode 100644 src/components/Pill/stories/BrowserEdges.vue
 create mode 100644 src/components/Pill/stories/Sizes.vue
 create mode 100644 src/components/Pill/stories/Variants.vue
 create mode 100644 src/components/Pill/types.ts

diff --git a/docs/.vitepress/theme/index.ts b/docs/.vitepress/theme/index.ts
index 5f44030f7..23fe738b2 100644
--- a/docs/.vitepress/theme/index.ts
+++ b/docs/.vitepress/theme/index.ts
@@ -1,10 +1,11 @@
 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 Layout from '../../components/Layout.vue'
 
 if (process.env.NODE_ENV === 'production') {
@@ -12,10 +13,11 @@ 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)
   },
 } satisfies Theme
diff --git a/docs/components/Docs/PillBuilder.vue b/docs/components/Docs/PillBuilder.vue
new file mode 100644
index 000000000..027a092a0
--- /dev/null
+++ b/docs/components/Docs/PillBuilder.vue
@@ -0,0 +1,184 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+import { Pill, Switch, TabButtons } from 'frappe-ui'
+
+const label = ref('Tab')
+const variant = ref<'default' | 'outline' | 'underline' | 'browser-tab'>(
+  'default',
+)
+const size = ref<'sm' | 'md'>('sm')
+const active = ref(true)
+const prefix = ref(false)
+const suffix = ref(false)
+
+const variantButtons = [
+  { label: 'default', value: 'default' },
+  { label: 'outline', value: 'outline' },
+  { label: 'underline', value: 'underline' },
+  { label: 'browser-tab', value: 'browser-tab' },
+]
+const sizeButtons = [
+  { label: 'sm', value: 'sm' },
+  { label: 'md', value: 'md' },
+]
+
+const browserTabBase = computed(() =>
+  variant.value === 'browser-tab' ? 'default' : 'none',
+)
+
+const code = computed(() => {
+  const attrs = [`label="${label.value}"`, `variant="${variant.value}"`]
+  if (size.value !== 'md') attrs.push(`size="${size.value}"`)
+  if (active.value) attrs.push('active')
+  if (variant.value === 'browser-tab') attrs.push('browser-tab-base="default"')
+
+  const slots: string[] = []
+  if (prefix.value) {
+    slots.push('  <template #prefix><span class="lucide-star" /></template>')
+  }
+  if (suffix.value) {
+    slots.push('  <template #suffix><span>14</span></template>')
+  }
+
+  if (!slots.length) {
+    return ['<Pill', ...attrs.map((attr) => `  ${attr}`), '/>'].join('\n')
+  }
+
+  return [
+    '<Pill',
+    ...attrs.map((attr) => `  ${attr}`),
+    '>',
+    ...slots,
+    '</Pill>',
+  ].join('\n')
+})
+
+const copied = ref(false)
+function onCopy() {
+  navigator.clipboard?.writeText(code.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 min-h-[200px] items-center justify-center bg-surface-white p-8 dot-grid"
+      >
+        <div
+          class="p-0"
+          :class="
+            variant === 'underline' || variant === 'browser-tab'
+              ? 'border-b border-outline-gray-2'
+              : ''
+          "
+        >
+          <Pill
+            :label="label"
+            :variant="variant"
+            :size="size"
+            :active="active"
+            :browser-tab-base="browserTabBase"
+          >
+            <template v-if="prefix" #prefix>
+              <span class="lucide-star size-4 shrink-0" aria-hidden="true" />
+            </template>
+            <template v-if="suffix" #suffix>
+              <span
+                class="rounded-full bg-surface-gray-2 px-1.5 text-xs text-ink-gray-7"
+                >14</span
+              >
+            </template>
+          </Pill>
+        </div>
+      </div>
+
+      <div class="flex flex-col gap-3 bg-surface-gray-1 p-4">
+        <div class="knob-row">
+          <span class="knob-label">label</span>
+          <input
+            v-model="label"
+            type="text"
+            class="h-7 w-40 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"
+          />
+        </div>
+        <div class="knob-row">
+          <span class="knob-label">variant</span>
+          <TabButtons v-model="variant" :options="variantButtons" />
+        </div>
+        <div class="knob-row">
+          <span class="knob-label">size</span>
+          <TabButtons v-model="size" :options="sizeButtons" />
+        </div>
+        <div class="flex flex-wrap items-center gap-6">
+          <div class="flex items-center gap-2">
+            <span class="knob-label">active</span>
+            <Switch v-model="active" />
+          </div>
+          <div class="flex items-center gap-2">
+            <span class="knob-label">prefix</span>
+            <Switch v-model="prefix" />
+          </div>
+          <div class="flex items-center gap-2">
+            <span class="knob-label">suffix</span>
+            <Switch v-model="suffix" />
+          </div>
+        </div>
+      </div>
+
+      <div class="bg-surface-gray-1">
+        <div
+          class="flex items-center justify-between border-b border-outline-gray-1 px-4"
+        >
+          <div
+            class="-mb-px border-b border-ink-gray-8 py-2 text-sm font-medium text-ink-gray-8"
+          >
+            vue
+          </div>
+          <button
+            type="button"
+            class="inline-flex h-7 items-center gap-1.5 rounded-1 px-2 text-xs text-ink-gray-6 transition-colors hover:bg-surface-gray-2 hover:text-ink-gray-8"
+            :aria-label="copied ? 'Copied' : 'Copy code'"
+            @click="onCopy"
+          >
+            <span
+              :class="copied ? 'lucide-check' : 'lucide-copy'"
+              class="size-3.5"
+              aria-hidden="true"
+            />
+          </button>
+        </div>
+        <pre
+          class="overflow-x-auto p-4 text-sm leading-relaxed"
+        ><code class="font-mono text-ink-gray-8">{{ code }}</code></pre>
+      </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/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..bc2ae09f6
--- /dev/null
+++ b/src/components/Pill/Pill.vue
@@ -0,0 +1,146 @@
+<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 ? 'text-ink-gray-9' : 'text-ink-gray-5',
+    iconOnly
+      ? isSm
+        ? 'size-6.5 gap-1.5 p-[5px]'
+        : 'size-7 gap-1.5 p-[5px]'
+      : props.variant === 'underline'
+        ? 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 sits on the container's gray rail. Vertical uses a 2px
+      // bar so it reads as a tab selector, not a text caret.
+      const indicator = isVertical
+        ? 'after:absolute after:top-0 after:bottom-0 after:-right-[3px] after:w-[3px] after:rounded-full 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-white shadow-sm'
+})
+
+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>
+</content>
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/index.ts b/src/index.ts
index 5b2377bc0..765e0bd92 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -46,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'

From 0d122eabf679b45e16a1cb9a36b53888879afc3a Mon Sep 17 00:00:00 2001
From: Faris Ansari <netchamp.faris@gmail.com>
Date: Sun, 24 May 2026 20:47:31 +0530
Subject: [PATCH 11/22] refactor(tab-buttons)!: render Pill, support
 route/href, drop Button wrap
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

TabButtons no longer wraps `<Button>` internally — each tab is now a
native `<button>`, `<a href>`, or `<RouterLink>` rendering a `<Pill>`
for its visual treatment.

BREAKING CHANGE: per-option `theme`, `variant`, `size`, `loading`,
`hideLabel` and `tooltip`-as-popover are no longer honored. Use the
shared `<Button>` directly if any of these matter, or supply richer
content via the `prefix` / `suffix` slots. Migration notes added to
`TabButtons.md`.

New: `route` and `href` per option render the tab as a RouterLink or
anchor respectively. The internal v-model fallback chain
(`value ?? label ?? index`) is preserved for back-compat with consumers
that bound to a label string.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
---
 docs/.vitepress/theme/index.ts                |   2 +
 docs/components/Docs/BadgeBuilder.vue         |   6 +-
 docs/components/Docs/ButtonBuilder.vue        |   6 +-
 docs/components/Docs/TabButtonsBuilder.vue    | 192 ++++++++++++
 src/components/TabButtons/TabButtons.api.md   |  54 +++-
 src/components/TabButtons/TabButtons.cy.ts    |   9 +-
 src/components/TabButtons/TabButtons.md       |  47 +++
 .../TabButtons/TabButtons.story.vue           |  18 +-
 src/components/TabButtons/TabButtons.vue      | 284 +++++++++++-------
 src/components/TabButtons/index.ts            |  12 +-
 .../TabButtons/stories/PrefixSuffix.vue       |  61 ++++
 src/components/TabButtons/stories/Sizes.vue   |  25 ++
 .../TabButtons/stories/Variants.vue           |  40 +++
 .../TabButtons/stories/Vertical.vue           |  57 ++++
 src/components/TabButtons/types.ts            |  49 +++
 15 files changed, 729 insertions(+), 133 deletions(-)
 create mode 100644 docs/components/Docs/TabButtonsBuilder.vue
 create mode 100644 src/components/TabButtons/TabButtons.md
 create mode 100644 src/components/TabButtons/stories/PrefixSuffix.vue
 create mode 100644 src/components/TabButtons/stories/Sizes.vue
 create mode 100644 src/components/TabButtons/stories/Variants.vue
 create mode 100644 src/components/TabButtons/stories/Vertical.vue
 create mode 100644 src/components/TabButtons/types.ts

diff --git a/docs/.vitepress/theme/index.ts b/docs/.vitepress/theme/index.ts
index 23fe738b2..e15ae1f28 100644
--- a/docs/.vitepress/theme/index.ts
+++ b/docs/.vitepress/theme/index.ts
@@ -6,6 +6,7 @@ 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') {
@@ -19,5 +20,6 @@ export default {
     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
index 2d2296536..b31c9e05a 100644
--- a/docs/components/Docs/BadgeBuilder.vue
+++ b/docs/components/Docs/BadgeBuilder.vue
@@ -95,15 +95,15 @@ function onCopy() {
         </div>
         <div class="knob-row">
           <span class="knob-label">variant</span>
-          <TabButtons v-model="variant" :buttons="variantButtons" />
+          <TabButtons v-model="variant" :options="variantButtons" />
         </div>
         <div class="knob-row">
           <span class="knob-label">theme</span>
-          <TabButtons v-model="theme" :buttons="themeButtons" />
+          <TabButtons v-model="theme" :options="themeButtons" />
         </div>
         <div class="knob-row">
           <span class="knob-label">size</span>
-          <TabButtons v-model="size" :buttons="sizeButtons" />
+          <TabButtons v-model="size" :options="sizeButtons" />
         </div>
         <div class="flex flex-wrap items-center gap-6">
           <div class="flex items-center gap-2">
diff --git a/docs/components/Docs/ButtonBuilder.vue b/docs/components/Docs/ButtonBuilder.vue
index eadd39602..06fe5487d 100644
--- a/docs/components/Docs/ButtonBuilder.vue
+++ b/docs/components/Docs/ButtonBuilder.vue
@@ -92,15 +92,15 @@ function onCopy() {
         </div>
         <div class="knob-row">
           <span class="knob-label">variant</span>
-          <TabButtons v-model="variant" :buttons="variantButtons" />
+          <TabButtons v-model="variant" :options="variantButtons" />
         </div>
         <div class="knob-row">
           <span class="knob-label">theme</span>
-          <TabButtons v-model="theme" :buttons="themeButtons" />
+          <TabButtons v-model="theme" :options="themeButtons" />
         </div>
         <div class="knob-row">
           <span class="knob-label">size</span>
-          <TabButtons v-model="size" :buttons="sizeButtons" />
+          <TabButtons v-model="size" :options="sizeButtons" />
         </div>
         <div class="flex flex-wrap items-center gap-6">
           <div class="flex items-center gap-2">
diff --git a/docs/components/Docs/TabButtonsBuilder.vue b/docs/components/Docs/TabButtonsBuilder.vue
new file mode 100644
index 000000000..fe0938eca
--- /dev/null
+++ b/docs/components/Docs/TabButtonsBuilder.vue
@@ -0,0 +1,192 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+import { Switch, TabButtons } from 'frappe-ui'
+
+const type = ref<'subtle' | 'ghost' | 'underline' | 'browser-tab'>('subtle')
+const size = ref<'sm' | 'md'>('sm')
+const modelValue = ref('activity')
+const vertical = ref(false)
+const prefix = ref(false)
+const suffix = ref(false)
+
+const typeButtons = [
+  { label: 'subtle', value: 'subtle' },
+  { label: 'ghost', value: 'ghost' },
+  { label: 'underline', value: 'underline' },
+  { label: 'browser-tab', value: 'browser-tab' },
+]
+const sizeButtons = [
+  { label: 'sm', value: 'sm' },
+  { label: 'md', value: 'md' },
+]
+
+const options = [
+  { label: 'Overview', value: 'overview' },
+  { label: 'Activity', value: 'activity' },
+  { label: 'Settings', value: 'settings' },
+]
+
+const iconByValue = {
+  overview: 'lucide-home',
+  activity: 'lucide-activity',
+  settings: 'lucide-settings',
+}
+
+const countByValue = {
+  overview: 8,
+  activity: 14,
+  settings: 2,
+}
+
+const code = computed(() => {
+  const attrs = [`v-model="tab"`, `:options="options"`]
+  if (type.value !== 'subtle') attrs.push(`type="${type.value}"`)
+  if (size.value !== 'sm') attrs.push(`size="${size.value}"`)
+  if (vertical.value) attrs.push('vertical')
+
+  const hasSlots = prefix.value || suffix.value
+
+  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 ? '  >' : '  />',
+    ...(prefix.value
+      ? ['    <template #prefix><span class="lucide-star" /></template>']
+      : []),
+    ...(suffix.value
+      ? ['    <template #suffix><span>14</span></template>']
+      : []),
+    ...(hasSlots ? ['  </TabButtons>'] : []),
+    '</' + 'template>',
+  ].join('\n')
+})
+
+const copied = ref(false)
+function onCopy() {
+  navigator.clipboard?.writeText(code.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 min-h-[220px] items-center justify-center bg-surface-white p-8 dot-grid"
+      >
+        <TabButtons
+          v-model="modelValue"
+          :options="options"
+          :type="type"
+          :size="size"
+          :vertical="vertical"
+        >
+          <template v-if="prefix" #prefix="{ button }">
+            <span
+              :class="iconByValue[button.modelValue]"
+              class="size-4 shrink-0"
+            />
+          </template>
+          <template v-if="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>
+      </div>
+
+      <div class="flex flex-col gap-3 bg-surface-gray-1 p-4">
+        <div class="knob-row">
+          <span class="knob-label">type</span>
+          <TabButtons v-model="type" :options="typeButtons" />
+        </div>
+        <div class="knob-row">
+          <span class="knob-label">size</span>
+          <TabButtons v-model="size" :options="sizeButtons" />
+        </div>
+        <div class="flex flex-wrap items-center gap-6">
+          <div class="flex items-center gap-2">
+            <span class="knob-label">vertical</span>
+            <Switch v-model="vertical" />
+          </div>
+          <div class="flex items-center gap-2">
+            <span class="knob-label">prefix</span>
+            <Switch v-model="prefix" />
+          </div>
+          <div class="flex items-center gap-2">
+            <span class="knob-label">suffix</span>
+            <Switch v-model="suffix" />
+          </div>
+        </div>
+      </div>
+
+      <div class="bg-surface-gray-1">
+        <div
+          class="flex items-center justify-between border-b border-outline-gray-1 px-4"
+        >
+          <div
+            class="-mb-px border-b border-ink-gray-8 py-2 text-sm font-medium text-ink-gray-8"
+          >
+            vue
+          </div>
+          <button
+            type="button"
+            class="inline-flex h-7 items-center gap-1.5 rounded-1 px-2 text-xs text-ink-gray-6 transition-colors hover:bg-surface-gray-2 hover:text-ink-gray-8"
+            :aria-label="copied ? 'Copied' : 'Copy code'"
+            @click="onCopy"
+          >
+            <span
+              :class="copied ? 'lucide-check' : 'lucide-copy'"
+              class="size-3.5"
+              aria-hidden="true"
+            />
+          </button>
+        </div>
+        <pre
+          class="overflow-x-auto p-4 text-sm leading-relaxed"
+        ><code class="font-mono text-ink-gray-8">{{ code }}</code></pre>
+      </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/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
index 0e3819de9..2d3013007 100644
--- a/src/components/TabButtons/TabButtons.story.vue
+++ b/src/components/TabButtons/TabButtons.story.vue
@@ -1,20 +1,18 @@
 <script setup lang="ts">
-import { ref } from "vue";
-import Story from "@/components/Story.vue";
-import { TabButtons } from "frappe-ui";
-const currentTab = ref("mytasks");
+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" },
-          ]
-        '
+        :options="[
+          { label: 'Tasks assigned to me', value: 'mytasks' },
+          { label: 'Tasks created by me', value: 'created' },
+        ]"
         v-model="currentTab"
       />
     </Story>
diff --git a/src/components/TabButtons/TabButtons.vue b/src/components/TabButtons/TabButtons.vue
index 58481cb0d..6d99d7eb2 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']
+  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,59 +244,48 @@ 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>
 </template>
+</content>
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..bd4f178e1
--- /dev/null
+++ b/src/components/TabButtons/stories/PrefixSuffix.vue
@@ -0,0 +1,61 @@
+<script setup>
+import { ref } from 'vue'
+import { TabButtons } from 'frappe-ui'
+
+const current = ref('mentions')
+const compact = ref('calendar')
+
+const buttons = [
+  { label: 'Inbox', value: 'inbox' },
+  { label: 'Mentions', value: 'mentions' },
+  { label: 'Done', value: 'done' },
+]
+
+const counts = {
+  inbox: 8,
+  mentions: 14,
+  done: 2,
+}
+
+const icons = {
+  inbox: 'lucide-inbox',
+  mentions: 'lucide-at-sign',
+  done: 'lucide-check-circle',
+}
+
+const iconButtons = [
+  { label: 'Calendar', value: 'calendar', icon: 'lucide-calendar' },
+  { label: 'List', value: 'list', icon: 'lucide-list' },
+  { label: 'Grid', value: 'grid', icon: 'lucide-grid' },
+]
+</script>
+
+<template>
+  <div class="flex flex-col gap-6 p-2">
+    <TabButtons v-model="current" :options="buttons" size="md">
+      <template #prefix="{ button }">
+        <span :class="icons[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"
+        >
+          {{ counts[button.modelValue] }}
+        </span>
+      </template>
+    </TabButtons>
+    <TabButtons v-model="current" :options="buttons" type="underline" size="md">
+      <template #prefix="{ button }">
+        <span :class="icons[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"
+        >
+          {{ counts[button.modelValue] }}
+        </span>
+      </template>
+    </TabButtons>
+    <TabButtons v-model="compact" :options="iconButtons" />
+  </div>
+</template>
diff --git a/src/components/TabButtons/stories/Sizes.vue b/src/components/TabButtons/stories/Sizes.vue
new file mode 100644
index 000000000..f683efd4a
--- /dev/null
+++ b/src/components/TabButtons/stories/Sizes.vue
@@ -0,0 +1,25 @@
+<script setup>
+import { ref } from 'vue'
+import { TabButtons } from 'frappe-ui'
+
+const current = ref('week')
+const currentMd = ref('week')
+const buttons = [
+  { label: 'Day', value: 'day', icon: 'lucide-calendar' },
+  { label: 'Week', value: 'week', icon: 'lucide-calendar' },
+  { label: 'Month', value: 'month', icon: '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..56974e6fb
--- /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: 'Tab', value: 'one' },
+  { label: 'Tab', value: 'two' },
+  { label: 'Tab', value: 'three' },
+  { label: 'Tab', value: 'four' },
+]
+
+const subtle = ref('two')
+const ghost = ref('two')
+const underline = ref('two')
+const browserTab = ref('two')
+</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..adf6c1a16
--- /dev/null
+++ b/src/components/TabButtons/stories/Vertical.vue
@@ -0,0 +1,57 @@
+<script setup>
+import { ref } from 'vue'
+import { TabButtons } from 'frappe-ui'
+
+const subtle = ref('two')
+const underline = ref('two')
+const browserLeft = ref('two')
+const browserRight = ref('two')
+
+const buttons = [
+  { label: 'Tab', value: 'one' },
+  { label: 'Tab', value: 'two' },
+  { label: 'Tab', value: 'three' },
+  { label: 'Tab', value: 'four' },
+]
+</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="buttons" vertical />
+    </div>
+
+    <div class="flex flex-col gap-3">
+      <div class="text-sm text-ink-gray-6">Underline</div>
+      <TabButtons
+        v-model="underline"
+        :options="buttons"
+        type="underline"
+        vertical
+      />
+    </div>
+
+    <div class="flex flex-col gap-3">
+      <div class="text-sm text-ink-gray-6">Browser left</div>
+      <TabButtons
+        v-model="browserLeft"
+        :options="buttons"
+        type="browser-tab"
+        vertical
+        direction="left"
+      />
+    </div>
+
+    <div class="flex flex-col gap-3">
+      <div class="text-sm text-ink-gray-6">Browser right</div>
+      <TabButtons
+        v-model="browserRight"
+        :options="buttons"
+        type="browser-tab"
+        vertical
+        direction="right"
+      />
+    </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]
+}

From bdfc562ea39d66571cf43702422a3b6029fe51f6 Mon Sep 17 00:00:00 2001
From: Faris Ansari <netchamp.faris@gmail.com>
Date: Sun, 24 May 2026 20:47:44 +0530
Subject: [PATCH 12/22] chore: regenerate components.d.ts and propsgen output

Picks up the new Pill and Icon components in the auto-resolved
declaration file, drops stale Rating story entries, and absorbs
incidental type-union reordering in Divider/Popover/Tooltip api docs.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
---
 components.d.ts                       | 8 ++------
 src/components/Divider/Divider.api.md | 2 +-
 src/components/Popover/Popover.api.md | 2 +-
 src/components/Tooltip/Tooltip.api.md | 4 ++--
 4 files changed, 6 insertions(+), 10 deletions(-)

diff --git a/components.d.ts b/components.d.ts
index 6554d2161..f17cdeea3 100644
--- a/components.d.ts
+++ b/components.d.ts
@@ -30,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']
@@ -66,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']
@@ -114,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/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/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/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"'
   },
   {

From 92354320c124a0baf4fc6572fe76ee65ba0c69c8 Mon Sep 17 00:00:00 2001
From: Faris Ansari <netchamp.faris@gmail.com>
Date: Mon, 25 May 2026 02:27:25 +0530
Subject: [PATCH 13/22] refactor(docs): generic ComponentPlayground for
 component builders

Replace the four duplicated *Builder.vue files (~180 lines each, 90%
identical chrome) with a shared ComponentPlayground that takes a knob
schema + #preview slot + code(values) fn. Each per-component builder
shrinks to ~30-80 lines of pure config.

Code preview matches story preview visuals exactly: runtime shiki
highlighting with the same tokyo-night/github-light themes, .shiki
sizing and bg, and the global .copy button style.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
---
 docs/components/Docs/BadgeBuilder.vue        | 216 +++++-----------
 docs/components/Docs/ButtonBuilder.vue       | 247 ++++++-------------
 docs/components/Docs/ComponentPlayground.vue | 168 +++++++++++++
 docs/components/Docs/PillBuilder.vue         | 224 +++++------------
 docs/components/Docs/TabButtonsBuilder.vue   | 203 +++++----------
 5 files changed, 441 insertions(+), 617 deletions(-)
 create mode 100644 docs/components/Docs/ComponentPlayground.vue

diff --git a/docs/components/Docs/BadgeBuilder.vue b/docs/components/Docs/BadgeBuilder.vue
index b31c9e05a..68b1699e5 100644
--- a/docs/components/Docs/BadgeBuilder.vue
+++ b/docs/components/Docs/BadgeBuilder.vue
@@ -1,171 +1,79 @@
 <script setup lang="ts">
-import { computed, ref } from 'vue'
-import { Badge, Switch, TabButtons } from 'frappe-ui'
+import { Badge } from 'frappe-ui'
+import ComponentPlayground, { type Knob } from './ComponentPlayground.vue'
 
-const label = ref('Gamma')
-const theme = ref<'gray' | 'blue' | 'green' | 'amber' | 'red' | 'violet'>(
-  'green',
-)
-const variant = ref<'solid' | 'subtle' | 'outline' | 'ghost'>('solid')
-const size = ref<'sm' | 'md' | 'lg'>('lg')
-const prefix = ref(true)
-const suffix = ref(false)
-
-const variantButtons = [
-  { label: 'solid', value: 'solid' },
-  { label: 'subtle', value: 'subtle' },
-  { label: 'outline', value: 'outline' },
-  { label: 'ghost', value: 'ghost' },
-]
-const themeButtons = [
-  { label: 'gray', value: 'gray' },
-  { label: 'blue', value: 'blue' },
-  { label: 'green', value: 'green' },
-  { label: 'amber', value: 'amber' },
-  { label: 'red', value: 'red' },
-  { label: 'violet', value: 'violet' },
-]
-const sizeButtons = [
-  { label: 'sm', value: 'sm' },
-  { label: 'md', value: 'md' },
-  { label: 'lg', value: 'lg' },
+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 },
 ]
 
-const code = computed(() => {
-  const attrs: string[] = [
-    `variant="${variant.value}"`,
-    `theme="${theme.value}"`,
-    `size="${size.value}"`,
+function buildCode(v: Record<string, any>) {
+  const attrs = [
+    `variant="${v.variant}"`,
+    `theme="${v.theme}"`,
+    `size="${v.size}"`,
   ]
   const slots: string[] = []
-  if (prefix.value) {
+  if (v.prefix) {
     slots.push('  <template #prefix><span class="lucide-check" /></template>')
   }
-  slots.push(`  ${label.value}`)
-  if (suffix.value) {
+  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')
-})
-
-const copied = ref(false)
-function onCopy() {
-  navigator.clipboard?.writeText(code.value)
-  copied.value = true
-  setTimeout(() => (copied.value = false), 1200)
+  return ['<Badge', ...attrs.map((a) => '  ' + a), '>', ...slots, '</Badge>'].join('\n')
 }
 </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 min-h-[200px] items-center justify-center bg-surface-white p-8 dot-grid"
-      >
-        <Badge :theme="theme" :variant="variant" :size="size">
-          <template v-if="prefix" #prefix>
-            <span class="lucide-check" />
-          </template>
-          {{ label }}
-          <template v-if="suffix" #suffix>
-            <span class="lucide-chevron-down" />
-          </template>
-        </Badge>
-      </div>
-
-      <div class="flex flex-col gap-3 bg-surface-gray-1 p-4">
-        <div class="knob-row">
-          <span class="knob-label">label</span>
-          <input
-            v-model="label"
-            type="text"
-            class="h-7 w-40 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"
-          />
-        </div>
-        <div class="knob-row">
-          <span class="knob-label">variant</span>
-          <TabButtons v-model="variant" :options="variantButtons" />
-        </div>
-        <div class="knob-row">
-          <span class="knob-label">theme</span>
-          <TabButtons v-model="theme" :options="themeButtons" />
-        </div>
-        <div class="knob-row">
-          <span class="knob-label">size</span>
-          <TabButtons v-model="size" :options="sizeButtons" />
-        </div>
-        <div class="flex flex-wrap items-center gap-6">
-          <div class="flex items-center gap-2">
-            <span class="knob-label">prefix</span>
-            <Switch v-model="prefix" />
-          </div>
-          <div class="flex items-center gap-2">
-            <span class="knob-label">suffix</span>
-            <Switch v-model="suffix" />
-          </div>
-        </div>
-      </div>
-
-      <div class="bg-surface-gray-1">
-        <div
-          class="flex items-center justify-between border-b border-outline-gray-1 px-4"
-        >
-          <div
-            class="-mb-px border-b border-ink-gray-8 py-2 text-sm font-medium text-ink-gray-8"
-          >
-            vue
-          </div>
-          <button
-            type="button"
-            class="inline-flex h-7 items-center gap-1.5 rounded-1 px-2 text-xs text-ink-gray-6 transition-colors hover:bg-surface-gray-2 hover:text-ink-gray-8"
-            :aria-label="copied ? 'Copied' : 'Copy code'"
-            @click="onCopy"
-          >
-            <span
-              :class="copied ? 'lucide-check' : 'lucide-copy'"
-              class="size-3.5"
-              aria-hidden="true"
-            />
-          </button>
-        </div>
-        <pre
-          class="overflow-x-auto p-4 text-sm leading-relaxed"
-        ><code class="font-mono text-ink-gray-8">{{ code }}</code></pre>
-      </div>
-    </div>
-  </div>
+  <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>
-
-<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/ButtonBuilder.vue b/docs/components/Docs/ButtonBuilder.vue
index 06fe5487d..26b130395 100644
--- a/docs/components/Docs/ButtonBuilder.vue
+++ b/docs/components/Docs/ButtonBuilder.vue
@@ -1,180 +1,97 @@
 <script setup lang="ts">
-import { computed, ref } from 'vue'
-import { Button, Switch, TabButtons } from 'frappe-ui'
+import { Button } from 'frappe-ui'
+import ComponentPlayground, { type Knob } from './ComponentPlayground.vue'
 
-const label = ref('Save')
-const theme = ref<'gray' | 'red'>('gray')
-const variant = ref<'solid' | 'subtle' | 'outline' | 'ghost'>('subtle')
-const size = ref<'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl'>('sm')
-const iconLeft = ref(false)
-const icon = ref(false)
-const iconRight = ref(false)
-const loading = ref(false)
-const disabled = ref(false)
-
-const variantButtons = [
-  { label: 'solid', value: 'solid' },
-  { label: 'subtle', value: 'subtle' },
-  { label: 'outline', value: 'outline' },
-  { label: 'ghost', value: 'ghost' },
-]
-const themeButtons = [
-  { label: 'gray', value: 'gray' },
-  { label: 'red', value: 'red' },
-]
-const sizeButtons = [
-  { label: 'xs', value: 'xs' },
-  { label: 'sm', value: 'sm' },
-  { label: 'md', value: 'md' },
-  { label: 'lg', value: 'lg' },
-  { label: 'xl', value: 'xl' },
-  { label: '2xl', value: '2xl' },
+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 },
 ]
 
-const code = computed(() => {
-  const attrs: string[] = [
-    `variant="${variant.value}"`,
-    `theme="${theme.value}"`,
-    `size="${size.value}"`,
-    `label="${label.value}"`,
+function buildCode(v: Record<string, any>) {
+  const attrs = [
+    `variant="${v.variant}"`,
+    `theme="${v.theme}"`,
+    `size="${v.size}"`,
+    `label="${v.label}"`,
   ]
-  if (icon.value) {
+  if (v.icon) {
     attrs.push(`icon="lucide-plus"`)
   } else {
-    if (iconLeft.value) attrs.push(`icon-left="lucide-plus"`)
-    if (iconRight.value) attrs.push(`icon-right="lucide-chevron-right"`)
+    if (v.iconLeft) attrs.push(`icon-left="lucide-plus"`)
+    if (v.iconRight) attrs.push(`icon-right="lucide-chevron-right"`)
   }
-  if (disabled.value) attrs.push('disabled')
-  if (loading.value) attrs.push('loading')
+  if (v.disabled) attrs.push('disabled')
+  if (v.loading) attrs.push('loading')
 
   return ['<Button', ...attrs.map((a) => '  ' + a), '/>'].join('\n')
-})
-
-const copied = ref(false)
-function onCopy() {
-  navigator.clipboard?.writeText(code.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 min-h-[200px] items-center justify-center bg-surface-white p-8 dot-grid"
-      >
-        <Button
-          :theme="theme"
-          :variant="variant"
-          :size="size"
-          :label="label"
-          :icon-left="!icon && iconLeft ? 'lucide-plus' : undefined"
-          :icon="icon ? 'lucide-plus' : undefined"
-          :icon-right="!icon && iconRight ? 'lucide-chevron-right' : undefined"
-          :loading="loading"
-          :disabled="disabled"
-        >
-          {{ label }}
-        </Button>
-      </div>
-
-      <div class="flex flex-col gap-3 bg-surface-gray-1 p-4">
-        <div class="knob-row">
-          <span class="knob-label">label</span>
-          <input
-            v-model="label"
-            type="text"
-            class="h-7 w-40 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"
-          />
-        </div>
-        <div class="knob-row">
-          <span class="knob-label">variant</span>
-          <TabButtons v-model="variant" :options="variantButtons" />
-        </div>
-        <div class="knob-row">
-          <span class="knob-label">theme</span>
-          <TabButtons v-model="theme" :options="themeButtons" />
-        </div>
-        <div class="knob-row">
-          <span class="knob-label">size</span>
-          <TabButtons v-model="size" :options="sizeButtons" />
-        </div>
-        <div class="flex flex-wrap items-center gap-6">
-          <div class="flex items-center gap-2">
-            <span class="knob-label">iconLeft</span>
-            <Switch v-model="iconLeft" :disabled="icon" />
-          </div>
-          <div class="flex items-center gap-2">
-            <span class="knob-label">icon</span>
-            <Switch v-model="icon" />
-          </div>
-          <div class="flex items-center gap-2">
-            <span class="knob-label">iconRight</span>
-            <Switch v-model="iconRight" :disabled="icon" />
-          </div>
-          <div class="flex items-center gap-2">
-            <span class="knob-label">disabled</span>
-            <Switch v-model="disabled" />
-          </div>
-          <div class="flex items-center gap-2">
-            <span class="knob-label">loading</span>
-            <Switch v-model="loading" />
-          </div>
-        </div>
-      </div>
-
-      <div class="bg-surface-gray-1">
-        <div
-          class="flex items-center justify-between border-b border-outline-gray-1 px-4"
-        >
-          <div
-            class="-mb-px border-b border-ink-gray-8 py-2 text-sm font-medium text-ink-gray-8"
-          >
-            vue
-          </div>
-          <button
-            type="button"
-            class="inline-flex h-7 items-center gap-1.5 rounded-1 px-2 text-xs text-ink-gray-6 transition-colors hover:bg-surface-gray-2 hover:text-ink-gray-8"
-            :aria-label="copied ? 'Copied' : 'Copy code'"
-            @click="onCopy"
-          >
-            <span
-              :class="copied ? 'lucide-check' : 'lucide-copy'"
-              class="size-3.5"
-              aria-hidden="true"
-            />
-          </button>
-        </div>
-        <pre
-          class="overflow-x-auto p-4 text-sm leading-relaxed"
-        ><code class="font-mono text-ink-gray-8">{{ code }}</code></pre>
-      </div>
-    </div>
-  </div>
+  <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>
-
-<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/ComponentPlayground.vue b/docs/components/Docs/ComponentPlayground.vue
new file mode 100644
index 000000000..f47a37299
--- /dev/null
+++ b/docs/components/Docs/ComponentPlayground.vue
@@ -0,0 +1,168 @@
+<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
+  }
+  highlightedCode.value = h.codeToHtml(generatedCode.value, {
+    lang: 'vue',
+    themes: { light: 'github-light', dark: 'tokyo-night' },
+  })
+})
+
+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
index 027a092a0..03431197f 100644
--- a/docs/components/Docs/PillBuilder.vue
+++ b/docs/components/Docs/PillBuilder.vue
@@ -1,184 +1,88 @@
 <script setup lang="ts">
-import { computed, ref } from 'vue'
-import { Pill, Switch, TabButtons } from 'frappe-ui'
+import { computed } from 'vue'
+import { Pill } from 'frappe-ui'
+import ComponentPlayground, { type Knob } from './ComponentPlayground.vue'
 
-const label = ref('Tab')
-const variant = ref<'default' | 'outline' | 'underline' | 'browser-tab'>(
-  'default',
-)
-const size = ref<'sm' | 'md'>('sm')
-const active = ref(true)
-const prefix = ref(false)
-const suffix = ref(false)
-
-const variantButtons = [
-  { label: 'default', value: 'default' },
-  { label: 'outline', value: 'outline' },
-  { label: 'underline', value: 'underline' },
-  { label: 'browser-tab', value: 'browser-tab' },
-]
-const sizeButtons = [
-  { label: 'sm', value: 'sm' },
-  { label: 'md', value: 'md' },
+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 },
 ]
 
-const browserTabBase = computed(() =>
-  variant.value === 'browser-tab' ? 'default' : 'none',
-)
+function browserTabBase(variant: string) {
+  return variant === 'browser-tab' ? 'default' : 'none'
+}
 
-const code = computed(() => {
-  const attrs = [`label="${label.value}"`, `variant="${variant.value}"`]
-  if (size.value !== 'md') attrs.push(`size="${size.value}"`)
-  if (active.value) attrs.push('active')
-  if (variant.value === 'browser-tab') attrs.push('browser-tab-base="default"')
+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 (prefix.value) {
+  if (v.prefix) {
     slots.push('  <template #prefix><span class="lucide-star" /></template>')
   }
-  if (suffix.value) {
+  if (v.suffix) {
     slots.push('  <template #suffix><span>14</span></template>')
   }
 
   if (!slots.length) {
-    return ['<Pill', ...attrs.map((attr) => `  ${attr}`), '/>'].join('\n')
+    return ['<Pill', ...attrs.map((a) => `  ${a}`), '/>'].join('\n')
   }
-
-  return [
-    '<Pill',
-    ...attrs.map((attr) => `  ${attr}`),
-    '>',
-    ...slots,
-    '</Pill>',
-  ].join('\n')
-})
-
-const copied = ref(false)
-function onCopy() {
-  navigator.clipboard?.writeText(code.value)
-  copied.value = true
-  setTimeout(() => (copied.value = false), 1200)
+  return ['<Pill', ...attrs.map((a) => `  ${a}`), '>', ...slots, '</Pill>'].join('\n')
 }
 </script>
 
 <template>
-  <div class="not-prose">
-    <div
-      class="overflow-hidden rounded-xl border border-outline-gray-1 divide-y divide-outline-gray-1"
-    >
+  <ComponentPlayground :knobs="knobs" :code="buildCode">
+    <template #preview="{ values }">
       <div
-        class="flex min-h-[200px] items-center justify-center bg-surface-white p-8 dot-grid"
+        :class="
+          values.variant === 'underline' || values.variant === 'browser-tab'
+            ? 'border-b border-outline-gray-2'
+            : ''
+        "
       >
-        <div
-          class="p-0"
-          :class="
-            variant === 'underline' || variant === 'browser-tab'
-              ? 'border-b border-outline-gray-2'
-              : ''
-          "
-        >
-          <Pill
-            :label="label"
-            :variant="variant"
-            :size="size"
-            :active="active"
-            :browser-tab-base="browserTabBase"
-          >
-            <template v-if="prefix" #prefix>
-              <span class="lucide-star size-4 shrink-0" aria-hidden="true" />
-            </template>
-            <template v-if="suffix" #suffix>
-              <span
-                class="rounded-full bg-surface-gray-2 px-1.5 text-xs text-ink-gray-7"
-                >14</span
-              >
-            </template>
-          </Pill>
-        </div>
-      </div>
-
-      <div class="flex flex-col gap-3 bg-surface-gray-1 p-4">
-        <div class="knob-row">
-          <span class="knob-label">label</span>
-          <input
-            v-model="label"
-            type="text"
-            class="h-7 w-40 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"
-          />
-        </div>
-        <div class="knob-row">
-          <span class="knob-label">variant</span>
-          <TabButtons v-model="variant" :options="variantButtons" />
-        </div>
-        <div class="knob-row">
-          <span class="knob-label">size</span>
-          <TabButtons v-model="size" :options="sizeButtons" />
-        </div>
-        <div class="flex flex-wrap items-center gap-6">
-          <div class="flex items-center gap-2">
-            <span class="knob-label">active</span>
-            <Switch v-model="active" />
-          </div>
-          <div class="flex items-center gap-2">
-            <span class="knob-label">prefix</span>
-            <Switch v-model="prefix" />
-          </div>
-          <div class="flex items-center gap-2">
-            <span class="knob-label">suffix</span>
-            <Switch v-model="suffix" />
-          </div>
-        </div>
-      </div>
-
-      <div class="bg-surface-gray-1">
-        <div
-          class="flex items-center justify-between border-b border-outline-gray-1 px-4"
+        <Pill
+          :label="values.label"
+          :variant="values.variant"
+          :size="values.size"
+          :active="values.active"
+          :browser-tab-base="browserTabBase(values.variant)"
         >
-          <div
-            class="-mb-px border-b border-ink-gray-8 py-2 text-sm font-medium text-ink-gray-8"
-          >
-            vue
-          </div>
-          <button
-            type="button"
-            class="inline-flex h-7 items-center gap-1.5 rounded-1 px-2 text-xs text-ink-gray-6 transition-colors hover:bg-surface-gray-2 hover:text-ink-gray-8"
-            :aria-label="copied ? 'Copied' : 'Copy code'"
-            @click="onCopy"
-          >
+          <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="copied ? 'lucide-check' : 'lucide-copy'"
-              class="size-3.5"
-              aria-hidden="true"
-            />
-          </button>
-        </div>
-        <pre
-          class="overflow-x-auto p-4 text-sm leading-relaxed"
-        ><code class="font-mono text-ink-gray-8">{{ code }}</code></pre>
+              class="rounded-full bg-surface-gray-2 px-1.5 text-xs text-ink-gray-7"
+              >14</span
+            >
+          </template>
+        </Pill>
       </div>
-    </div>
-  </div>
+    </template>
+  </ComponentPlayground>
 </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/TabButtonsBuilder.vue b/docs/components/Docs/TabButtonsBuilder.vue
index fe0938eca..a56c90106 100644
--- a/docs/components/Docs/TabButtonsBuilder.vue
+++ b/docs/components/Docs/TabButtonsBuilder.vue
@@ -1,50 +1,61 @@
 <script setup lang="ts">
-import { computed, ref } from 'vue'
-import { Switch, TabButtons } from 'frappe-ui'
+import { ref } from 'vue'
+import { TabButtons } from 'frappe-ui'
+import ComponentPlayground, { type Knob } from './ComponentPlayground.vue'
 
-const type = ref<'subtle' | 'ghost' | 'underline' | 'browser-tab'>('subtle')
-const size = ref<'sm' | 'md'>('sm')
-const modelValue = ref('activity')
-const vertical = ref(false)
-const prefix = ref(false)
-const suffix = ref(false)
-
-const typeButtons = [
-  { label: 'subtle', value: 'subtle' },
-  { label: 'ghost', value: 'ghost' },
-  { label: 'underline', value: 'underline' },
-  { label: 'browser-tab', value: 'browser-tab' },
-]
-const sizeButtons = [
-  { label: 'sm', value: 'sm' },
-  { label: 'md', value: 'md' },
+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 = {
+const iconByValue: Record<string, string> = {
   overview: 'lucide-home',
   activity: 'lucide-activity',
   settings: 'lucide-settings',
 }
 
-const countByValue = {
+const countByValue: Record<string, number> = {
   overview: 8,
   activity: 14,
   settings: 2,
 }
 
-const code = computed(() => {
+function buildCode(v: Record<string, any>) {
   const attrs = [`v-model="tab"`, `:options="options"`]
-  if (type.value !== 'subtle') attrs.push(`type="${type.value}"`)
-  if (size.value !== 'sm') attrs.push(`size="${size.value}"`)
-  if (vertical.value) attrs.push('vertical')
+  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 = prefix.value || suffix.value
+  const hasSlots = v.prefix || v.suffix
 
   return [
     '<' + 'script setup>',
@@ -63,130 +74,46 @@ const code = computed(() => {
     '  <' + 'TabButtons',
     ...attrs.map((attr) => `    ${attr}`),
     hasSlots ? '  >' : '  />',
-    ...(prefix.value
+    ...(v.prefix
       ? ['    <template #prefix><span class="lucide-star" /></template>']
       : []),
-    ...(suffix.value
+    ...(v.suffix
       ? ['    <template #suffix><span>14</span></template>']
       : []),
     ...(hasSlots ? ['  </TabButtons>'] : []),
     '</' + 'template>',
   ].join('\n')
-})
-
-const copied = ref(false)
-function onCopy() {
-  navigator.clipboard?.writeText(code.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 min-h-[220px] items-center justify-center bg-surface-white p-8 dot-grid"
+  <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"
       >
-        <TabButtons
-          v-model="modelValue"
-          :options="options"
-          :type="type"
-          :size="size"
-          :vertical="vertical"
-        >
-          <template v-if="prefix" #prefix="{ button }">
-            <span
-              :class="iconByValue[button.modelValue]"
-              class="size-4 shrink-0"
-            />
-          </template>
-          <template v-if="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>
-      </div>
-
-      <div class="flex flex-col gap-3 bg-surface-gray-1 p-4">
-        <div class="knob-row">
-          <span class="knob-label">type</span>
-          <TabButtons v-model="type" :options="typeButtons" />
-        </div>
-        <div class="knob-row">
-          <span class="knob-label">size</span>
-          <TabButtons v-model="size" :options="sizeButtons" />
-        </div>
-        <div class="flex flex-wrap items-center gap-6">
-          <div class="flex items-center gap-2">
-            <span class="knob-label">vertical</span>
-            <Switch v-model="vertical" />
-          </div>
-          <div class="flex items-center gap-2">
-            <span class="knob-label">prefix</span>
-            <Switch v-model="prefix" />
-          </div>
-          <div class="flex items-center gap-2">
-            <span class="knob-label">suffix</span>
-            <Switch v-model="suffix" />
-          </div>
-        </div>
-      </div>
-
-      <div class="bg-surface-gray-1">
-        <div
-          class="flex items-center justify-between border-b border-outline-gray-1 px-4"
-        >
-          <div
-            class="-mb-px border-b border-ink-gray-8 py-2 text-sm font-medium text-ink-gray-8"
-          >
-            vue
-          </div>
-          <button
-            type="button"
-            class="inline-flex h-7 items-center gap-1.5 rounded-1 px-2 text-xs text-ink-gray-6 transition-colors hover:bg-surface-gray-2 hover:text-ink-gray-8"
-            :aria-label="copied ? 'Copied' : 'Copy code'"
-            @click="onCopy"
+        <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"
           >
-            <span
-              :class="copied ? 'lucide-check' : 'lucide-copy'"
-              class="size-3.5"
-              aria-hidden="true"
-            />
-          </button>
-        </div>
-        <pre
-          class="overflow-x-auto p-4 text-sm leading-relaxed"
-        ><code class="font-mono text-ink-gray-8">{{ code }}</code></pre>
-      </div>
-    </div>
-  </div>
+            {{ countByValue[button.modelValue] }}
+          </span>
+        </template>
+      </TabButtons>
+    </template>
+  </ComponentPlayground>
 </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>

From eb9c0d172aa9073d61868a89f4530a41bc89e7bd Mon Sep 17 00:00:00 2001
From: Faris Ansari <netchamp.faris@gmail.com>
Date: Mon, 25 May 2026 02:27:38 +0530
Subject: [PATCH 14/22] fix(pill): redesign vertical underline tab indicator

Previously the active indicator was a 3px rounded bar floating 3px
outboard of the rail, with full pill height. Read as a text caret next
to the label rather than a tab marker.

Now: 1px-wide square segment positioned at right:-2px (overlapping the
column rail), label-height via inset-y-1.5. Active label gets
font-medium on underline variant so the label itself signals selection.
Adds pr-2 to vertical underline pills so short labels don't sit flush
against the indicator.

Also cleans up a stray </content> tag at the end of Pill.vue and
TabButtons.vue (left over from prior commits, broke SFC parsing).

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
---
 src/components/Pill/Pill.vue             | 24 ++++++++++++++++--------
 src/components/TabButtons/TabButtons.vue |  1 -
 2 files changed, 16 insertions(+), 9 deletions(-)

diff --git a/src/components/Pill/Pill.vue b/src/components/Pill/Pill.vue
index bc2ae09f6..259fca705 100644
--- a/src/components/Pill/Pill.vue
+++ b/src/components/Pill/Pill.vue
@@ -23,15 +23,23 @@ const rootClasses = computed(() => {
   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 ? 'text-ink-gray-9' : 'text-ink-gray-5',
+    active
+      ? props.variant === 'underline'
+        ? 'text-ink-gray-9 font-medium'
+        : 'text-ink-gray-9'
+      : 'text-ink-gray-5',
     iconOnly
       ? isSm
         ? 'size-6.5 gap-1.5 p-[5px]'
         : 'size-7 gap-1.5 p-[5px]'
       : props.variant === 'underline'
-        ? isSm
-          ? 'h-7 gap-2'
-          : 'h-7.5 gap-2'
+        ? 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',
@@ -63,10 +71,11 @@ const variantClass = computed(() => {
       ? 'border-r border-transparent'
       : 'border-b border-transparent'
     if (props.active) {
-      // Indicator sits on the container's gray rail. Vertical uses a 2px
-      // bar so it reads as a tab selector, not a text caret.
+      // 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:top-0 after:bottom-0 after:-right-[3px] after:w-[3px] after:rounded-full after:bg-[var(--ink-gray-8)]'
+        ? '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]
     }
@@ -143,4 +152,3 @@ defineSlots<{
     </slot>
   </span>
 </template>
-</content>
diff --git a/src/components/TabButtons/TabButtons.vue b/src/components/TabButtons/TabButtons.vue
index 6d99d7eb2..975c11e22 100644
--- a/src/components/TabButtons/TabButtons.vue
+++ b/src/components/TabButtons/TabButtons.vue
@@ -288,4 +288,3 @@ function tabElementProps(button: (typeof resolvedButtons.value)[number]) {
     </div>
   </RadioGroupRoot>
 </template>
-</content>

From 1ffc0db19e21b596f46f7e2a768456bd9dd707df Mon Sep 17 00:00:00 2001
From: Faris Ansari <netchamp.faris@gmail.com>
Date: Mon, 25 May 2026 02:27:52 +0530
Subject: [PATCH 15/22] refactor(focus-ring): adopt focus-ring utilities across
 components
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Swap the per-site focus-visible:ring-* + ring-outline-gray-* patterns
for the new focus-ring / focus-ring-{theme} utilities backed by the
--focus-* design tokens. Button maps theme → themed focus-ring
(blue/green/red); other components use the default gray focus-ring.

Triggers in Select / shared selection / MultiSelect TagsTrigger also
adopt focus-ring on data-[state=open] so the open ring matches the
focus ring exactly. Intentional suppression sites (Sidebar item, ghost
input variants) left unchanged.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
---
 src/components/Breadcrumbs/Breadcrumbs.vue         | 6 +++---
 src/components/Button/Button.vue                   | 8 ++++----
 src/components/Checkbox/Checkbox.vue               | 2 +-
 src/components/MultiSelect/stories/TagsTrigger.vue | 2 +-
 src/components/Rating/Rating.vue                   | 4 ++--
 src/components/Select/utils.ts                     | 2 +-
 src/components/Switch/Switch.vue                   | 4 ++--
 src/components/TextInput/TextInput.vue             | 4 ++--
 src/components/Textarea/Textarea.vue               | 4 ++--
 src/components/Toast/Toast.vue                     | 4 ++--
 src/components/shared/selection/utils.ts           | 4 ++--
 11 files changed, 22 insertions(+), 22 deletions(-)

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.vue b/src/components/Button/Button.vue
index 8cdd0f75d..9872936c1 100644
--- a/src/components/Button/Button.vue
+++ b/src/components/Button/Button.vue
@@ -143,10 +143,10 @@ const buttonClasses = computed(() => {
   }[props.theme]
 
   let focusClasses = {
-    gray: 'focus-visible:ring-2 focus-visible:ring-outline-gray-3',
-    blue: 'focus-visible:ring-2 focus-visible:ring-blue-400',
-    green: 'focus-visible:ring-2 focus-visible:ring-outline-green-2',
-    red: 'focus-visible:ring-2 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 = {
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/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/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/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/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/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'

From 77a86aa89f0eec57b2df40bfae7e77f2a25e69f0 Mon Sep 17 00:00:00 2001
From: Faris Ansari <netchamp.faris@gmail.com>
Date: Mon, 25 May 2026 02:40:24 +0530
Subject: [PATCH 16/22] docs(tab-buttons): refresh story examples with
 realistic nav content

Replace generic Tab/Tab placeholder options with Home/Task/Contact/Others
nav and an icon-only ghost sidebar, inspired by the Figma showcase. Use
distinct iconLeft icons per option and switch the Sizes / PrefixSuffix
demos to view-switcher and Inbox/Comments patterns.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
---
 .../TabButtons/stories/PrefixSuffix.vue       | 50 ++++++++++---------
 src/components/TabButtons/stories/Sizes.vue   | 11 ++--
 .../TabButtons/stories/Variants.vue           | 16 +++---
 .../TabButtons/stories/Vertical.vue           | 43 +++++++++-------
 4 files changed, 66 insertions(+), 54 deletions(-)

diff --git a/src/components/TabButtons/stories/PrefixSuffix.vue b/src/components/TabButtons/stories/PrefixSuffix.vue
index bd4f178e1..bcb755feb 100644
--- a/src/components/TabButtons/stories/PrefixSuffix.vue
+++ b/src/components/TabButtons/stories/PrefixSuffix.vue
@@ -2,60 +2,64 @@
 import { ref } from 'vue'
 import { TabButtons } from 'frappe-ui'
 
-const current = ref('mentions')
-const compact = ref('calendar')
+const inboxTab = ref('comments')
+const viewTab = ref('list')
 
-const buttons = [
+const inboxButtons = [
   { label: 'Inbox', value: 'inbox' },
-  { label: 'Mentions', value: 'mentions' },
-  { label: 'Done', value: 'done' },
+  { label: 'Comments', value: 'comments' },
 ]
 
-const counts = {
-  inbox: 8,
-  mentions: 14,
-  done: 2,
+const inboxIcons = {
+  inbox: 'lucide-inbox',
+  comments: 'lucide-message-square',
 }
 
-const icons = {
-  inbox: 'lucide-inbox',
-  mentions: 'lucide-at-sign',
-  done: 'lucide-check-circle',
+const inboxCounts = {
+  inbox: 8,
+  comments: 14,
 }
 
-const iconButtons = [
-  { label: 'Calendar', value: 'calendar', icon: 'lucide-calendar' },
+const viewButtons = [
   { label: 'List', value: 'list', icon: 'lucide-list' },
-  { label: 'Grid', value: 'grid', icon: 'lucide-grid' },
+  { 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="current" :options="buttons" size="md">
+    <TabButtons v-model="inboxTab" :options="inboxButtons" size="md">
       <template #prefix="{ button }">
-        <span :class="icons[button.modelValue]" class="size-4 shrink-0" />
+        <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"
         >
-          {{ counts[button.modelValue] }}
+          {{ inboxCounts[button.modelValue] }}
         </span>
       </template>
     </TabButtons>
-    <TabButtons v-model="current" :options="buttons" type="underline" size="md">
+
+    <TabButtons
+      v-model="inboxTab"
+      :options="inboxButtons"
+      type="underline"
+      size="md"
+    >
       <template #prefix="{ button }">
-        <span :class="icons[button.modelValue]" class="size-4 shrink-0" />
+        <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"
         >
-          {{ counts[button.modelValue] }}
+          {{ inboxCounts[button.modelValue] }}
         </span>
       </template>
     </TabButtons>
-    <TabButtons v-model="compact" :options="iconButtons" />
+
+    <TabButtons v-model="viewTab" :options="viewButtons" />
   </div>
 </template>
diff --git a/src/components/TabButtons/stories/Sizes.vue b/src/components/TabButtons/stories/Sizes.vue
index f683efd4a..1af51258c 100644
--- a/src/components/TabButtons/stories/Sizes.vue
+++ b/src/components/TabButtons/stories/Sizes.vue
@@ -2,12 +2,13 @@
 import { ref } from 'vue'
 import { TabButtons } from 'frappe-ui'
 
-const current = ref('week')
-const currentMd = ref('week')
+const current = ref('list')
+const currentMd = ref('list')
+
 const buttons = [
-  { label: 'Day', value: 'day', icon: 'lucide-calendar' },
-  { label: 'Week', value: 'week', icon: 'lucide-calendar' },
-  { label: 'Month', value: 'month', icon: 'lucide-calendar' },
+  { label: 'List', value: 'list', iconLeft: 'lucide-list' },
+  { label: 'Board', value: 'board', iconLeft: 'lucide-columns-3' },
+  { label: 'Calendar', value: 'calendar', iconLeft: 'lucide-calendar' },
 ]
 </script>
 
diff --git a/src/components/TabButtons/stories/Variants.vue b/src/components/TabButtons/stories/Variants.vue
index 56974e6fb..f4dcdb2cc 100644
--- a/src/components/TabButtons/stories/Variants.vue
+++ b/src/components/TabButtons/stories/Variants.vue
@@ -3,16 +3,16 @@ import { ref } from 'vue'
 import { TabButtons } from 'frappe-ui'
 
 const buttons = [
-  { label: 'Tab', value: 'one' },
-  { label: 'Tab', value: 'two' },
-  { label: 'Tab', value: 'three' },
-  { label: 'Tab', value: 'four' },
+  { 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('two')
-const ghost = ref('two')
-const underline = ref('two')
-const browserTab = ref('two')
+const subtle = ref('task')
+const ghost = ref('task')
+const underline = ref('task')
+const browserTab = ref('task')
 </script>
 
 <template>
diff --git a/src/components/TabButtons/stories/Vertical.vue b/src/components/TabButtons/stories/Vertical.vue
index adf6c1a16..3179ea6d1 100644
--- a/src/components/TabButtons/stories/Vertical.vue
+++ b/src/components/TabButtons/stories/Vertical.vue
@@ -2,16 +2,24 @@
 import { ref } from 'vue'
 import { TabButtons } from 'frappe-ui'
 
-const subtle = ref('two')
-const underline = ref('two')
-const browserLeft = ref('two')
-const browserRight = ref('two')
+const subtle = ref('home')
+const underline = ref('home')
+const browserLeft = ref('home')
+const sidebar = ref('home')
 
-const buttons = [
-  { label: 'Tab', value: 'one' },
-  { label: 'Tab', value: 'two' },
-  { label: 'Tab', value: 'three' },
-  { label: 'Tab', value: 'four' },
+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>
 
@@ -19,24 +27,24 @@ const buttons = [
   <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="buttons" vertical />
+      <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="buttons"
+        :options="navButtons"
         type="underline"
         vertical
       />
     </div>
 
     <div class="flex flex-col gap-3">
-      <div class="text-sm text-ink-gray-6">Browser left</div>
+      <div class="text-sm text-ink-gray-6">Browser tab</div>
       <TabButtons
         v-model="browserLeft"
-        :options="buttons"
+        :options="navButtons"
         type="browser-tab"
         vertical
         direction="left"
@@ -44,13 +52,12 @@ const buttons = [
     </div>
 
     <div class="flex flex-col gap-3">
-      <div class="text-sm text-ink-gray-6">Browser right</div>
+      <div class="text-sm text-ink-gray-6">Icon sidebar</div>
       <TabButtons
-        v-model="browserRight"
-        :options="buttons"
-        type="browser-tab"
+        v-model="sidebar"
+        :options="iconButtons"
+        type="ghost"
         vertical
-        direction="right"
       />
     </div>
   </div>

From f23f8eb6bc58c16d46811ccbd5393d0ab3fd9c00 Mon Sep 17 00:00:00 2001
From: Faris Ansari <netchamp.faris@gmail.com>
Date: Mon, 25 May 2026 02:41:05 +0530
Subject: [PATCH 17/22] chore(tab-buttons): drop unused TabButtons.story.vue

The docs render the stories/ snippets directly; this orphan Histoire-style
file isn't referenced anywhere.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
---
 .../TabButtons/TabButtons.story.vue           | 20 -------------------
 1 file changed, 20 deletions(-)
 delete mode 100644 src/components/TabButtons/TabButtons.story.vue

diff --git a/src/components/TabButtons/TabButtons.story.vue b/src/components/TabButtons/TabButtons.story.vue
deleted file mode 100644
index 2d3013007..000000000
--- a/src/components/TabButtons/TabButtons.story.vue
+++ /dev/null
@@ -1,20 +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
-        :options="[
-          { label: 'Tasks assigned to me', value: 'mytasks' },
-          { label: 'Tasks created by me', value: 'created' },
-        ]"
-        v-model="currentTab"
-      />
-    </Story>
-  </div>
-</template>

From ab50518790a81813471bb34863e7a5bf5ed66950 Mon Sep 17 00:00:00 2001
From: Faris Ansari <netchamp.faris@gmail.com>
Date: Mon, 25 May 2026 03:00:38 +0530
Subject: [PATCH 18/22] docs(foundations): rename pages, refresh
 palette/semantic rendering
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Sidebar/page renames: "Colours — Base" → "Base Colors", "Colours —
  Semantic" → "Semantic Colors", "Corner Radius" → "Radius" (file
  renamed to foundations/radius.md, URL paths for colours unchanged).
- SemanticPage rewritten as a flat row list per token: swatch, name,
  → reference, and resolved value — no surrounding box, no hover.
- PalettePage: drop the per-swatch inset 1px ring and the p-2 wrappers
  around the overlay sections; each overlay swatch now layers its
  translucent color over its own bg-ink-gray-9 / bg-surface-white
  backdrop via a linear-gradient.
- New docs/composables/useTheme.ts watches the <html data-theme>
  attribute (set by Navbar.vue) so the local Light/Dark switchers on
  both foundations pages follow global theme toggles in real time.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
---
 docs/components/Docs/sidebarList.ts           |  6 +-
 docs/components/foundations/PalettePage.vue   | 87 ++++++++++--------
 docs/components/foundations/SemanticPage.vue  | 88 +++++++++----------
 docs/composables/useTheme.ts                  | 31 +++++++
 docs/content/docs/foundations/colours/base.md |  2 +-
 .../docs/foundations/colours/semantic.md      |  2 +-
 .../{corner-radius.md => radius.md}           |  2 +-
 7 files changed, 132 insertions(+), 86 deletions(-)
 create mode 100644 docs/composables/useTheme.ts
 rename docs/content/docs/foundations/{corner-radius.md => radius.md} (89%)

diff --git a/docs/components/Docs/sidebarList.ts b/docs/components/Docs/sidebarList.ts
index 21fafbd68..c79cec547 100644
--- a/docs/components/Docs/sidebarList.ts
+++ b/docs/components/Docs/sidebarList.ts
@@ -44,10 +44,10 @@ export function getSidebarList(componentList: string[]): SidebarSection[] {
     {
       text: 'Foundations',
       items: [
-        { text: 'Colours — Base', link: '/docs/foundations/colours/base' },
-        { text: 'Colours — Semantic', link: '/docs/foundations/colours/semantic' },
+        { text: 'Base Colors', link: '/docs/foundations/colours/base' },
+        { text: 'Semantic Colors', link: '/docs/foundations/colours/semantic' },
         { text: 'Typography', link: '/docs/foundations/typography' },
-        { text: 'Corner Radius', link: '/docs/foundations/corner-radius' },
+        { text: 'Radius', link: '/docs/foundations/radius' },
         { text: 'Elevation', link: '/docs/foundations/elevation' },
       ],
     },
diff --git a/docs/components/foundations/PalettePage.vue b/docs/components/foundations/PalettePage.vue
index 3755e99d8..6ff105ad6 100644
--- a/docs/components/foundations/PalettePage.vue
+++ b/docs/components/foundations/PalettePage.vue
@@ -1,11 +1,16 @@
 <script setup lang="ts">
-import { computed, ref } from 'vue'
+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 mode = ref<Mode>('lightMode')
+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' },
@@ -52,11 +57,11 @@ const alphaFamilies = computed(() => {
   })).filter((f) => f.shades.length > 0)
 })
 
-const overlayWhite = computed(() =>
-  Object.entries(colors.overlay.white) as [string, string][],
+const overlayWhite = computed(
+  () => Object.entries(colors.overlay.white) as [string, string][],
 )
-const overlayBlack = computed(() =>
-  Object.entries(colors.overlay.black) as [string, string][],
+const overlayBlack = computed(
+  () => Object.entries(colors.overlay.black) as [string, string][],
 )
 
 function copy(text: string) {
@@ -65,16 +70,13 @@ function copy(text: string) {
 </script>
 
 <template>
-  <div class="grid gap-6">
-    <header class="grid gap-3">
-      <p class="text-p-base text-ink-gray-6 max-w-2xl">
-        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" />
-    </header>
-
+  <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"
@@ -94,10 +96,12 @@ function copy(text: string) {
           v-for="[shade, value] in family.shades"
           :key="shade"
           class="grid gap-1 text-left group"
-          @click="copy(`${mode === 'darkMode' ? 'dark-' : ''}${family.key}-${shade}`)"
+          @click="
+            copy(`${mode === 'darkMode' ? 'dark-' : ''}${family.key}-${shade}`)
+          "
         >
           <div
-            class="aspect-square rounded shadow-[inset_0_0_0_1px_rgba(0,0,0,0.08)] dark:shadow-[inset_0_0_0_1px_rgba(255,255,255,0.1)] transition-transform group-hover:scale-[1.02]"
+            class="aspect-square rounded transition-transform group-hover:scale-[1.02]"
             :style="{ background: value as string }"
           ></div>
           <div class="grid gap-1">
@@ -122,7 +126,7 @@ function copy(text: string) {
         {{ family.label }}
       </h2>
       <div
-        class="grid gap-1.5 p-2 rounded"
+        class="grid gap-1.5 p-2 -mx-2 rounded"
         :style="{
           gridTemplateColumns: `repeat(${family.shades.length}, minmax(0, 1fr))`,
           background:
@@ -138,10 +142,12 @@ function copy(text: string) {
           @click="copy(`${family.key}-${shade}`)"
         >
           <div
-            class="aspect-square rounded shadow-[inset_0_0_0_1px_rgba(0,0,0,0.08)] dark:shadow-[inset_0_0_0_1px_rgba(255,255,255,0.1)]"
+            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">
+          <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>
@@ -160,8 +166,10 @@ function copy(text: string) {
         <div class="grid gap-1.5">
           <span class="text-sm text-ink-gray-6">white-overlay</span>
           <div
-            class="grid gap-1.5 p-2 rounded bg-ink-gray-9"
-            :style="{ gridTemplateColumns: `repeat(${overlayWhite.length}, minmax(0, 1fr))` }"
+            class="grid gap-1.5"
+            :style="{
+              gridTemplateColumns: `repeat(${overlayWhite.length}, minmax(0, 1fr))`,
+            }"
           >
             <button
               v-for="[shade, value] in overlayWhite"
@@ -170,18 +178,22 @@ function copy(text: string) {
               @click="copy(`white-overlay-${shade}`)"
             >
               <div
-                class="h-12 rounded shadow-[inset_0_0_0_1px_rgba(255,255,255,0.15)]"
-                :style="{ background: value }"
+                class="h-12 rounded bg-ink-gray-9"
+                :style="{
+                  backgroundImage: `linear-gradient(${value}, ${value})`,
+                }"
               ></div>
-              <span class="text-2xs text-ink-white font-mono">{{ shade }}</span>
+              <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 p-2 rounded bg-surface-white shadow-[inset_0_0_0_1px_rgba(0,0,0,0.08)] dark:shadow-[inset_0_0_0_1px_rgba(255,255,255,0.1)]"
-            :style="{ gridTemplateColumns: `repeat(${overlayBlack.length}, minmax(0, 1fr))` }"
+            class="grid gap-1.5"
+            :style="{
+              gridTemplateColumns: `repeat(${overlayBlack.length}, minmax(0, 1fr))`,
+            }"
           >
             <button
               v-for="[shade, value] in overlayBlack"
@@ -190,10 +202,14 @@ function copy(text: string) {
               @click="copy(`black-overlay-${shade}`)"
             >
               <div
-                class="h-12 rounded shadow-[inset_0_0_0_1px_rgba(0,0,0,0.08)] dark:shadow-[inset_0_0_0_1px_rgba(255,255,255,0.1)]"
-                :style="{ background: value }"
+                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>
+              <span class="text-2xs text-ink-gray-7 font-mono">{{
+                shade
+              }}</span>
             </button>
           </div>
         </div>
@@ -209,12 +225,11 @@ function copy(text: string) {
           class="grid gap-2 text-left"
           @click="copy(n.label)"
         >
-          <div
-            class="size-24 rounded shadow-[inset_0_0_0_1px_rgba(0,0,0,0.08)] dark:shadow-[inset_0_0_0_1px_rgba(255,255,255,0.1)]"
-            :style="{ background: n.value }"
-          ></div>
+          <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>
+          <span class="text-2xs text-ink-gray-5 font-mono uppercase">{{
+            n.value
+          }}</span>
         </button>
       </div>
     </section>
diff --git a/docs/components/foundations/SemanticPage.vue b/docs/components/foundations/SemanticPage.vue
index 99f8336aa..3a2a0381f 100644
--- a/docs/components/foundations/SemanticPage.vue
+++ b/docs/components/foundations/SemanticPage.vue
@@ -1,10 +1,16 @@
 <script setup lang="ts">
-import { computed, ref } from 'vue'
+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 mode = ref<Mode>('light')
+
+const globalTheme = useTheme()
+const mode = ref<Mode>(globalTheme.value)
+watch(globalTheme, (next) => {
+  mode.value = next
+})
 
 const modeButtons = [
   { label: 'Light', value: 'light' },
@@ -14,7 +20,8 @@ const modeButtons = [
 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]
+  if (bucket === 'overlay')
+    return colors.overlay[family as 'white' | 'black'][shade]
   const modeData = colors[bucket as 'lightMode' | 'darkMode'] as Record<
     string,
     Record<string, string>
@@ -22,6 +29,15 @@ function resolveRef(ref: 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
@@ -56,6 +72,7 @@ function pickEntries(category: Group['category']) {
   return Object.entries(data).map(([name, ref]) => ({
     name,
     ref,
+    refLabel: formatRef(ref),
     value: resolveRef(ref),
   }))
 }
@@ -67,19 +84,6 @@ const sections = computed(() =>
 function copy(text: string) {
   navigator.clipboard?.writeText(text)
 }
-
-// Group entries by color subfamily (gray, red, green, …) for visual clustering.
-function groupEntries(entries: { name: string; ref: string; value: string }[]) {
-  const groups = new Map<string, typeof entries>()
-  for (const e of entries) {
-    // Token names look like "gray-1", "red-3", "blue-link", "menu-bar", "alert-button-default".
-    // Group by the head segment before the first hyphen for ramps, or treat as singleton.
-    const head = e.name.includes('-') ? e.name.split('-')[0] : e.name
-    if (!groups.has(head)) groups.set(head, [])
-    groups.get(head)!.push(e)
-  }
-  return Array.from(groups.entries()).map(([head, items]) => ({ head, items }))
-}
 </script>
 
 <template>
@@ -97,7 +101,7 @@ function groupEntries(entries: { name: string; ref: string; value: string }[]) {
       v-for="section in sections"
       :key="section.category"
       :id="section.category"
-      class="grid gap-6"
+      class="grid gap-4"
     >
       <div class="grid gap-1">
         <h2 class="text-xl font-semibold text-ink-gray-8 m-0 capitalize">
@@ -108,33 +112,29 @@ function groupEntries(entries: { name: string; ref: string; value: string }[]) {
         </p>
       </div>
 
-      <div
-        v-for="group in groupEntries(section.entries)"
-        :key="group.head"
-        class="grid gap-3"
-      >
-        <span class="text-xs text-ink-gray-5 capitalize">{{ group.head }}</span>
-        <div class="grid gap-x-6 gap-y-6 grid-cols-2 md:grid-cols-3 lg:grid-cols-4">
-          <button
-            v-for="entry in group.items"
-            :key="entry.name"
-            class="flex items-center gap-3 text-left"
-            @click="copy(`${section.prefix}${entry.name}`)"
-          >
-            <div
-              class="size-10 rounded shrink-0 shadow-[inset_0_0_0_1px_rgba(0,0,0,0.08)] dark:shadow-[inset_0_0_0_1px_rgba(255,255,255,0.1)]"
-              :style="{ background: entry.value }"
-            ></div>
-            <div class="grid gap-1 min-w-0">
-              <span class="text-sm font-medium text-ink-gray-8 truncate">
-                {{ section.prefix }}{{ entry.name }}
-              </span>
-              <span class="text-2xs font-mono text-ink-gray-5 uppercase">
-                {{ entry.value }}
-              </span>
-            </div>
-          </button>
-        </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>
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/foundations/colours/base.md b/docs/content/docs/foundations/colours/base.md
index 09e5abd9e..878664691 100644
--- a/docs/content/docs/foundations/colours/base.md
+++ b/docs/content/docs/foundations/colours/base.md
@@ -6,6 +6,6 @@ outline: false
 import PalettePage from '@/components/foundations/PalettePage.vue'
 </script>
 
-# Base Palette
+# Base Colors
 
 <PalettePage />
diff --git a/docs/content/docs/foundations/colours/semantic.md b/docs/content/docs/foundations/colours/semantic.md
index b4d0afd94..643b1894a 100644
--- a/docs/content/docs/foundations/colours/semantic.md
+++ b/docs/content/docs/foundations/colours/semantic.md
@@ -6,6 +6,6 @@ outline: false
 import SemanticPage from '@/components/foundations/SemanticPage.vue'
 </script>
 
-# Semantic Colours
+# Semantic Colors
 
 <SemanticPage />
diff --git a/docs/content/docs/foundations/corner-radius.md b/docs/content/docs/foundations/radius.md
similarity index 89%
rename from docs/content/docs/foundations/corner-radius.md
rename to docs/content/docs/foundations/radius.md
index 0b8eacb57..94acbafb3 100644
--- a/docs/content/docs/foundations/corner-radius.md
+++ b/docs/content/docs/foundations/radius.md
@@ -6,6 +6,6 @@ outline: false
 import RadiusPage from '@/components/foundations/RadiusPage.vue'
 </script>
 
-# Corner Radius
+# Radius
 
 <RadiusPage />

From 7b9c26cf3c94599bdafbb83fbe3fd02d16fea7a0 Mon Sep 17 00:00:00 2001
From: Faris Ansari <netchamp.faris@gmail.com>
Date: Mon, 25 May 2026 03:43:52 +0530
Subject: [PATCH 19/22] refactor(elevation): use one shadow set for both themes
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Espresso 2.0's Figma dark-mode page applies elevation/light/* shadows
universally — never the elevation/dark/* set. Match that: emit
--elevation-{sm..2xl} from :root only, so shadow-* resolves to the same
value in both themes. The Figma dark set is still exposed as
--dark-elevation-* / shadow-dark-* for opt-in heavier shadows.

Pill: raised active state now uses bg-surface-gray-2-contrast shadow-base
+ text-ink-gray-8, matching the Figma dark-mode active pill (lighter
surface over container, subtle light shadow with inner highlight, less
glaring label).

TabButtons: clip the container so the active pill's shadow doesn't
overflow the rounded corners.

Docs: elevation page copy reflects the single-shadow-set model;
ElevationPreview switcher uses TabButtons and syncs with the global
theme toggle (same pattern as Palette/Semantic pages).

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
---
 .../foundations/ElevationPreview.vue          | 43 +++++++++++--------
 docs/content/docs/foundations/elevation.md    | 13 +++---
 src/components/Pill/Pill.vue                  | 12 ++++--
 src/components/TabButtons/TabButtons.vue      |  2 +-
 tailwind/colorPalette.js                      | 12 ++++--
 tailwind/plugin.js                            |  6 +++
 6 files changed, 56 insertions(+), 32 deletions(-)

diff --git a/docs/components/foundations/ElevationPreview.vue b/docs/components/foundations/ElevationPreview.vue
index cbc81acc0..0cbe9d0b1 100644
--- a/docs/components/foundations/ElevationPreview.vue
+++ b/docs/components/foundations/ElevationPreview.vue
@@ -1,10 +1,13 @@
 <script setup lang="ts">
-import { ref } from 'vue'
+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
 
-// Dark-mode surface pairing — sm/base/md sit on the deepest layer, lg/xl
-// step up one, 2xl sits on top.
+// 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',
@@ -14,24 +17,26 @@ const DARK_SURFACE_BY_STEP: Record<string, string> = {
   '2xl': 'bg-surface-gray-3',
 }
 
-const previewTheme = ref<'light' | 'dark'>('light')
+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">
-      <div class="inline-flex rounded-md border border-outline-gray-2 p-0.5 text-xs">
-        <button
-          class="px-2 py-1 rounded-sm transition-colors"
-          :class="previewTheme === 'light' ? 'bg-surface-gray-3 text-ink-gray-8' : 'text-ink-gray-5'"
-          @click="previewTheme = 'light'"
-        >Light</button>
-        <button
-          class="px-2 py-1 rounded-sm transition-colors"
-          :class="previewTheme === 'dark' ? 'bg-surface-gray-3 text-ink-gray-8' : 'text-ink-gray-5'"
-          @click="previewTheme = 'dark'"
-        >Dark</button>
-      </div>
+      <TabButtons
+        :buttons="modeButtons"
+        v-model="previewTheme"
+        class="w-fit"
+      />
     </div>
 
     <div
@@ -44,11 +49,13 @@ const previewTheme = ref<'light' | 'dark'>('light')
           class="h-24 rounded-lg"
           :class="[
             `shadow-${step}`,
-            previewTheme === 'dark' ? DARK_SURFACE_BY_STEP[step] : 'bg-surface-white',
+            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-2xs font-mono text-ink-gray-5"
+            >shadow-{{ step }}</span
+          >
           <span class="text-xs text-ink-gray-6">--elevation-{{ step }}</span>
         </div>
       </div>
diff --git a/docs/content/docs/foundations/elevation.md b/docs/content/docs/foundations/elevation.md
index 332d9d271..20e701d09 100644
--- a/docs/content/docs/foundations/elevation.md
+++ b/docs/content/docs/foundations/elevation.md
@@ -10,8 +10,9 @@ import FocusRingPreview from '@/components/foundations/FocusRingPreview.vue'
 # Elevation
 
 Elevation conveys depth and hierarchy. Each step is a CSS variable
-(`--elevation-*`) that flips between light and dark themes automatically — use
-the same `shadow-*` utility in both modes.
+(`--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
 
@@ -54,9 +55,11 @@ cards. `shadow` (the bare utility) remains as an alias.
 **New: `shadow-status`.** A 1.5px white halo for status dots over coloured
 backgrounds.
 
-**Dark mode is automatic.** Shadow utilities now resolve to
-`var(--elevation-*)` and flip values under `[data-theme="dark"]`. Remove any
-conditional `dark:shadow-*` overrides — they are no longer needed.
+**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
diff --git a/src/components/Pill/Pill.vue b/src/components/Pill/Pill.vue
index 259fca705..c21eb472f 100644
--- a/src/components/Pill/Pill.vue
+++ b/src/components/Pill/Pill.vue
@@ -25,8 +25,8 @@ const rootClasses = computed(() => {
     '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-9 font-medium'
-        : 'text-ink-gray-9'
+        ? 'text-ink-gray-8 font-medium'
+        : 'text-ink-gray-8'
       : 'text-ink-gray-5',
     iconOnly
       ? isSm
@@ -114,7 +114,7 @@ const variantClass = computed(() => {
 
   return props.activeStyle === 'subtle'
     ? 'bg-surface-gray-2'
-    : 'bg-surface-white shadow-sm'
+    : 'bg-surface-gray-2-contrast shadow-base'
 })
 
 const iconClass = computed(() =>
@@ -148,7 +148,11 @@ defineSlots<{
     </span>
 
     <slot name="suffix">
-      <Icon v-if="iconRight && !isIconOnly" :name="iconRight" :class="iconClass" />
+      <Icon
+        v-if="iconRight && !isIconOnly"
+        :name="iconRight"
+        :class="iconClass"
+      />
     </slot>
   </span>
 </template>
diff --git a/src/components/TabButtons/TabButtons.vue b/src/components/TabButtons/TabButtons.vue
index 975c11e22..2a03e2049 100644
--- a/src/components/TabButtons/TabButtons.vue
+++ b/src/components/TabButtons/TabButtons.vue
@@ -121,7 +121,7 @@ const rootClasses = computed(() =>
 )
 
 function horizontalClasses() {
-  const base = ['inline-flex shrink-0 items-center']
+  const base = ['inline-flex shrink-0 items-center overflow-hidden']
   const isSm = props.size === 'sm'
 
   switch (props.type) {
diff --git a/tailwind/colorPalette.js b/tailwind/colorPalette.js
index 57b1fea03..475ef6708 100644
--- a/tailwind/colorPalette.js
+++ b/tailwind/colorPalette.js
@@ -130,9 +130,13 @@ function generateSemanticColors() {
   return output
 }
 
-// Emit `--elevation-*` and `--focus-*` CSS variables that flip between light
-// and dark themes. Theme-independent entries (e.g. `elevation.custom.status`)
-// land in `:root` only. Consumed by the tailwind plugin alongside color vars.
+// 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': {},
@@ -143,7 +147,7 @@ function generateEffectVariables() {
     output[':root'][`--elevation-${step}`] = value
   }
   for (const [step, value] of Object.entries(effectsData.elevation.dark)) {
-    output['[data-theme="dark"]'][`--elevation-${step}`] = value
+    output[':root'][`--dark-elevation-${step}`] = value
   }
   for (const [name, value] of Object.entries(effectsData.elevation.custom)) {
     output[':root'][`--elevation-${name}`] = value
diff --git a/tailwind/plugin.js b/tailwind/plugin.js
index e5b234cb4..e0bd7ac0f 100644
--- a/tailwind/plugin.js
+++ b/tailwind/plugin.js
@@ -166,6 +166,12 @@ export default plugin(
         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: {

From 0fd252c2d9a7c83a2df7aeff3a68c333bc7f94de Mon Sep 17 00:00:00 2001
From: Faris Ansari <netchamp.faris@gmail.com>
Date: Mon, 25 May 2026 03:44:01 +0530
Subject: [PATCH 20/22] fix(docs/playground): sync code snippet theme with dark
 mode
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Pass defaultColor: false to Shiki's codeToHtml so both themes are emitted
as CSS variables (--shiki-light / --shiki-dark) instead of inline color
on the light theme. The [data-theme="dark"] .shiki span rule in
docs/css/style.css can then flip tokens at runtime — previously the
light theme's inline color won by specificity and snippets stayed light
even in dark mode.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
---
 docs/components/Docs/ComponentPlayground.vue | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/docs/components/Docs/ComponentPlayground.vue b/docs/components/Docs/ComponentPlayground.vue
index f47a37299..23bf301a0 100644
--- a/docs/components/Docs/ComponentPlayground.vue
+++ b/docs/components/Docs/ComponentPlayground.vue
@@ -69,9 +69,15 @@ watchEffect(() => {
     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,
   })
 })
 

From 3bc115c61d843593036a555fcc44695dddf515bd Mon Sep 17 00:00:00 2001
From: Faris Ansari <netchamp.faris@gmail.com>
Date: Mon, 25 May 2026 13:00:31 +0530
Subject: [PATCH 21/22] docs(foundations): refresh radius + typography token
 displays
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Radius: collapse the numeric and named-alias sections into one divided
list (one row per scale step). Each row shows the rounded-N class +
--radius-N CSS variable, with aliases like `rounded`, `rounded-sm`
rendered as inline chips on the numeric row they map to. Swatches
enlarged so adjacent steps (e.g. 2 → 3 = 5px → 6px) are distinguishable.

Plumb --radius-* CSS variables through tailwind/plugin.js so the docs
aren't lying: borderRadius now resolves via var(--radius-N), with
`DEFAULT` reusing the numeric var that shares its value. Values
unchanged.

Typography: display line-height as a unitless ratio (lh / size) instead
of the raw px value from Figma — closer to how designers reason about
leading.
---
 docs/components/foundations/RadiusPage.vue    | 106 +++++++++---------
 .../components/foundations/TypographyPage.vue |  23 +++-
 tailwind/plugin.js                            |  34 +++++-
 3 files changed, 108 insertions(+), 55 deletions(-)

diff --git a/docs/components/foundations/RadiusPage.vue b/docs/components/foundations/RadiusPage.vue
index 90b7da080..c6d607183 100644
--- a/docs/components/foundations/RadiusPage.vue
+++ b/docs/components/foundations/RadiusPage.vue
@@ -2,21 +2,34 @@
 import { computed } from 'vue'
 import radius from '../../../tailwind/generated/radius.json'
 
-// Split into two groups for clarity: Figma's numeric scale and the named aliases.
 const NUMERIC_KEYS = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9']
-const NAMED_KEYS = ['none', 'sm', 'DEFAULT', 'md', 'lg', 'xl', '2xl', 'full']
+// Display order for the unified scale — numerics in order, then `full`.
+const SCALE_KEYS = [...NUMERIC_KEYS, 'full']
 
-const numeric = computed(() =>
-  NUMERIC_KEYS.filter((k) => k in radius).map((k) => ({
-    name: k,
-    value: (radius as Record<string, string>)[k],
-  })),
-)
-const named = computed(() =>
-  NAMED_KEYS.filter((k) => k in radius).map((k) => ({
+// 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],
-    cls: k === 'DEFAULT' ? 'rounded' : `rounded-${k}`,
+    aliases: ALIASES_BY_NUMERIC.value[k] || [],
   })),
 )
 
@@ -29,63 +42,54 @@ function copy(text: string) {
   <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
+        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>, …) are layered on top
-        for ergonomics.
+        <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 gap-1">
-        <h2 class="text-xl font-semibold text-ink-gray-8 m-0">Numeric scale</h2>
-        <p class="text-p-sm text-ink-gray-5 m-0">From Figma. Use these in new code.</p>
-      </div>
-      <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-5 gap-3">
+      <div class="grid divide-y divide-outline-gray-1">
         <button
-          v-for="r in numeric"
+          v-for="r in rows"
           :key="r.name"
-          class="grid gap-2 text-left"
+          class="flex w-full items-center gap-4 py-3 text-left"
           @click="copy(`rounded-${r.name}`)"
         >
           <div
-            class="aspect-square bg-surface-gray-3 border border-outline-gray-3"
+            class="size-16 shrink-0 bg-surface-gray-3 border border-outline-gray-3"
             :style="{ borderRadius: r.value }"
           ></div>
-          <div class="grid">
-            <span class="text-2xs font-mono text-ink-gray-5">
+          <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-sm font-medium text-ink-gray-8">{{ r.value }}</span>
+            <span class="text-xs font-mono text-ink-gray-5 truncate">
+              --radius-{{ r.name }}
+            </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">Named aliases</h2>
-        <p class="text-p-sm text-ink-gray-5 m-0">
-          Tailwind-style ergonomic names; resolve to the same values as the
-          numeric scale.
-        </p>
-      </div>
-      <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-3">
-        <button
-          v-for="r in named"
-          :key="r.name"
-          class="grid gap-2 text-left"
-          @click="copy(r.cls)"
-        >
           <div
-            class="aspect-square bg-surface-gray-3 border border-outline-gray-3"
-            :style="{ borderRadius: r.value }"
-          ></div>
-          <div class="grid">
-            <span class="text-2xs font-mono text-ink-gray-5">{{ r.cls }}</span>
-            <span class="text-sm font-medium text-ink-gray-8">{{ r.value }}</span>
+            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>
diff --git a/docs/components/foundations/TypographyPage.vue b/docs/components/foundations/TypographyPage.vue
index 946ac76ee..0290ec266 100644
--- a/docs/components/foundations/TypographyPage.vue
+++ b/docs/components/foundations/TypographyPage.vue
@@ -9,11 +9,28 @@ type SizeEntry = [string, SizeMeta]
 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 || {} }
+  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>>[])
@@ -62,7 +79,7 @@ function copy(text: string) {
           <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.meta.lineHeight">lh {{ item.meta.lineHeight }}</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>
@@ -96,7 +113,7 @@ function copy(text: string) {
           <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.meta.lineHeight">lh {{ item.meta.lineHeight }}</span>
+            <span v-if="item.lhRatio">lh {{ item.lhRatio }}</span>
           </div>
         </button>
       </div>
diff --git a/tailwind/plugin.js b/tailwind/plugin.js
index e0bd7ac0f..89ddd9beb 100644
--- a/tailwind/plugin.js
+++ b/tailwind/plugin.js
@@ -14,8 +14,40 @@ let semanticColors = generateSemanticColors()
 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) {
@@ -155,7 +187,7 @@ export default plugin(
   {
     theme: {
       colors: colorPalette,
-      borderRadius: radiusTokens,
+      borderRadius: buildRadiusConfig(),
       boxShadow: {
         none: 'none',
         sm: 'var(--elevation-sm)',

From 002efa1f415a9839e21e28cd0ae1013257708af8 Mon Sep 17 00:00:00 2001
From: Faris Ansari <netchamp.faris@gmail.com>
Date: Wed, 27 May 2026 16:52:47 +0530
Subject: [PATCH 22/22] chore(tokens): align tailwind/tokens.js exports with
 Figma-generated values

PR #720 on main extracted borderRadius/boxShadow/fontSize into tokens.js
as a public sub-path export. Our branch already replaced those values
with Figma-generated tokens in plugin.js. After the rebase, tokens.js
still exported the legacy hardcoded values, drifting from what the
plugin actually emits. Source from ./generated/* so external consumers
match the plugin output.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
---
 tailwind/tokens.js | 80 +++++++++++++++++++++++++++++-----------------
 1 file changed, 51 insertions(+), 29 deletions(-)

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'