diff --git a/.storybook/main.js b/.storybook/main.js
index 2d2a37f0d..9c42275d1 100644
--- a/.storybook/main.js
+++ b/.storybook/main.js
@@ -63,8 +63,6 @@ module.exports = {
     if (configType === 'PRODUCTION') {
       return config
     }
-    // 事前ビルドが不要になるようにマッピング
-    config.resolve.alias = { ...config.resolve.alias, ...(await alias()) }
     return config
   },
 
@@ -72,8 +70,6 @@ module.exports = {
     if (configType === 'PRODUCTION') {
       return config
     }
-    // 事前ビルドが不要になるようにマッピング
-    config.resolve.alias = { ...config.resolve.alias, ...(await alias()) }
     // proxyが噛んでいる場合にクライアント側のwssポート番号を変更する
     if (typeof process.env.CLIENT_PORT !== 'undefined') {
       config.server.hmr.port = process.env.CLIENT_PORT
@@ -135,17 +131,6 @@ module.exports = {
   `,
 }
 
-const packagesDir = path.resolve(__dirname, '../packages')
-const alias = async () =>
-  Object.fromEntries(
-    (await glob(path.resolve(packagesDir, '*'))).map((absolute) => {
-      const relative = path.relative(packagesDir, absolute)
-      const from = path.join('@charcoal-ui', relative)
-      const to = path.resolve(absolute, 'src')
-      return [from, to]
-    })
-  )
-
 function getAbsolutePath(value) {
   return dirname(require.resolve(join(value, 'package.json')))
 }
diff --git a/.storybook/tailwind.config.js b/.storybook/tailwind.config.js
index 964250451..63c3b404e 100644
--- a/.storybook/tailwind.config.js
+++ b/.storybook/tailwind.config.js
@@ -1,5 +1,8 @@
 const { light, dark } = require('@charcoal-ui/theme')
-const { createTailwindConfig } = require('@charcoal-ui/tailwind-config')
+const {
+  createTailwindConfig,
+  unstable_createTailwindConfigTokenV2,
+} = require('@charcoal-ui/tailwind-config')
 
 /**
  * @type {import('tailwindcss/tailwind-config').TailwindConfig}
@@ -15,6 +18,7 @@ module.exports = {
         '[data-dark="true"]': dark,
       },
     }),
+    unstable_createTailwindConfigTokenV2(),
   ],
   corePlugins: {
     preflight: false,
diff --git a/.storybook/theme-decorator.tsx b/.storybook/theme-decorator.tsx
index 6ed148995..d9424a641 100644
--- a/.storybook/theme-decorator.tsx
+++ b/.storybook/theme-decorator.tsx
@@ -6,6 +6,7 @@ import { TokenInjector, themeSelector, themeSetter } from '@charcoal-ui/styled'
 
 import '../packages/theme/src/css/_variables_dark.css'
 import '../packages/theme/src/css/_variables_light.css'
+import '../packages/react/dist/index.css'
 
 const setter = themeSetter()
 
diff --git a/packages/react/docs/TokenV2Demo.story.tsx b/packages/react/docs/TokenV2Demo.story.tsx
new file mode 100644
index 000000000..19fe7a015
--- /dev/null
+++ b/packages/react/docs/TokenV2Demo.story.tsx
@@ -0,0 +1,19 @@
+/* eslint-disable @typescript-eslint/no-unsafe-argument */
+/* eslint-disable @typescript-eslint/no-unsafe-member-access */
+/* lint runs before build so json does not exist */
+
+import { Meta, StoryObj } from '@storybook/react'
+import TokenV2DemoStyledComponents from './TokenV2DemoStyledComponents'
+import TokenV2Tailwind from './TokenV2DemoTailwind'
+
+export default {
+  title: 'theme/Toke v2 Demo',
+  component: TokenV2DemoStyledComponents,
+} as Meta<typeof TokenV2DemoStyledComponents>
+
+export const Styled: StoryObj<typeof TokenV2DemoStyledComponents> = {
+  render: TokenV2DemoStyledComponents,
+}
+export const Tailwind: StoryObj<typeof TokenV2Tailwind> = {
+  render: TokenV2Tailwind,
+}
\ No newline at end of file
diff --git a/packages/react/docs/token-v2-demo-styled.story.tsx b/packages/react/docs/TokenV2DemoStyledComponents.tsx
similarity index 95%
rename from packages/react/docs/token-v2-demo-styled.story.tsx
rename to packages/react/docs/TokenV2DemoStyledComponents.tsx
index dc6601226..3253a2d5e 100644
--- a/packages/react/docs/token-v2-demo-styled.story.tsx
+++ b/packages/react/docs/TokenV2DemoStyledComponents.tsx
@@ -2,7 +2,6 @@
 /* eslint-disable @typescript-eslint/no-unsafe-member-access */
 /* lint runs before build so json does not exist */
 
-import { Meta, StoryObj } from '@storybook/react'
 import { useState } from 'react'
 import styled from 'styled-components'
 // This does not work :(
@@ -10,15 +9,6 @@ import styled from 'styled-components'
 import tokens from '../../theme/dist/tokens/camel/css-variables.json'
 import { Button, Icon } from '@charcoal-ui/react'
 
-export default {
-  title: 'theme/Token v2 demo',
-  component: Demo,
-} as Meta<typeof Demo>
-
-export const StyledComponents: StoryObj<typeof Demo> = {
-  render: Demo,
-}
-
 const categories = ['Illustration', 'Comic', 'Novel', '3D', 'Shopping']
 const artworks = Array.from({ length: 3 }, (_, id) => ({
   id,
@@ -27,7 +17,7 @@ const artworks = Array.from({ length: 3 }, (_, id) => ({
   description: 'Description',
 }))
 
-function Demo() {
+export default function TokenV2Styled() {
   const [selected, setSelected] = useState(categories[0])
   return (
     <Container>
@@ -89,6 +79,7 @@ const Container = styled.section`
 `
 
 const H2 = styled.h2`
+  margin: 0;
   color: ${tokens.color.text.secondary.default};
   font-size: ${tokens.text.fontSize.heading.xs};
   line-height: ${tokens.text.lineHeight.heading.xs};
diff --git a/packages/react/docs/TokenV2DemoTailwind.tsx b/packages/react/docs/TokenV2DemoTailwind.tsx
new file mode 100644
index 000000000..c6a04ffb1
--- /dev/null
+++ b/packages/react/docs/TokenV2DemoTailwind.tsx
@@ -0,0 +1,90 @@
+/* eslint-disable @typescript-eslint/no-unsafe-argument */
+/* eslint-disable @typescript-eslint/no-unsafe-member-access */
+/* lint runs before build so json does not exist */
+
+import { useState } from 'react'
+import { Button, Icon } from '@charcoal-ui/react'
+
+const categories = ['Illustration', 'Comic', 'Novel', '3D', 'Shopping']
+const artworks = Array.from({ length: 3 }, (_, id) => ({
+  id,
+  title: 'Title',
+  thumbnail: `https://loremflickr.com/150/100/animals?random=${id}`,
+  description: 'Description',
+}))
+
+export default function TokenV2Tailwind() {
+  const [selected, setSelected] = useState(categories[0])
+  return (
+    <section className="grid max-w-fit gap-[24px]">
+      <nav>
+        <div aria-label="Categories" role="tablist">
+          {categories.map((category) => (
+            <a
+              className={`text-text-tertiary hover:text-text-tertiary-hover active:text-text-tertiary-press text-body px-30 border-t-l cursor-pointer border-[0px] border-solid py-[13px] font-bold ${
+                category === selected
+                  ? 'border-border-selected text-text'
+                  : 'border-[transparent]'
+              }`}
+              id={`category-${category}`}
+              role="tab"
+              aria-selected={category === selected}
+              aria-controls={`panel-${category}`}
+              key={category}
+              onClick={() => {
+                setSelected(category)
+              }}
+            >
+              {category}
+            </a>
+          ))}
+        </div>
+      </nav>
+      <h2 className="text-text-secondary text-heading-xs m-0">
+        Works from users you follow
+      </h2>
+      <div
+        className="grid [grid-template-areas:'UserInfo_._ShowAll''ArtworkList_ArtworkList_ArtworkList']"
+        id={`panel-${selected}`}
+        role="tabpanel"
+        aria-labelledby={`category-${selected}`}
+      >
+        <div className="grid grid-flow-col items-center justify-start gap-20 [grid-area:UserInfo]">
+          <a
+            className="rounded-oval text-icon hover:text-icon-hover active:text-icon-press bg-container-secondary hover:bg-container-hover active:bg-container-press grid h-[40px] w-[40px] cursor-pointer place-items-center"
+            aria-label="UserIcon"
+          >
+            <Icon name="24/FaceEdit" />
+          </a>
+          <span className="text-text text-caption-m font-bold">UserName</span>
+          <Button variant="Primary" size="S">
+            Follow
+          </Button>
+        </div>
+        <a className="text-text-tertiary hover:text-text-hover active:text-text-press text-caption-m cursor-pointer content-center text-right [grid-area:ShowAll]">
+          Show all
+        </a>
+        <ul
+          key={selected}
+          className="grid max-w-[424px] list-none grid-cols-3 gap-20 p-0 [grid-area:ArtworkList]"
+        >
+          {artworks.map((a) => (
+            <li key={a.id}>
+              <article className="grid gap-10">
+                <img
+                  className="rounded-m aspect-[3/2] w-[100%]"
+                  src={a.thumbnail}
+                  alt={a.title}
+                />
+                <h3 className="text-text text-caption-m m-0">{a.title}</h3>
+                <p className="text-text-tertiary text-caption-s m-0">
+                  {a.description}
+                </p>
+              </article>
+            </li>
+          ))}
+        </ul>
+      </div>
+    </section>
+  )
+}
diff --git a/packages/react/docs/__snapshots__/token-v2-demo-styled.story.storyshot b/packages/react/docs/__snapshots__/TokenV2Demo.story.storyshot
similarity index 55%
rename from packages/react/docs/__snapshots__/token-v2-demo-styled.story.storyshot
rename to packages/react/docs/__snapshots__/TokenV2Demo.story.storyshot
index e166037f7..9b23a2dc7 100644
--- a/packages/react/docs/__snapshots__/token-v2-demo-styled.story.storyshot
+++ b/packages/react/docs/__snapshots__/TokenV2Demo.story.storyshot
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Storybook Tests > theme/Token v2 demo > StyledComponents 1`] = `
+exports[`Storybook Tests > theme/Toke v2 Demo > Styled 1`] = `
 .c0 {
   -webkit-transition: 0.3s color ease-in-out;
   transition: 0.3s color ease-in-out;
@@ -12,6 +12,7 @@ exports[`Storybook Tests > theme/Token v2 demo > StyledComponents 1`] = `
 }
 
 .c2 {
+  margin: 0;
   color: var(--charcoal-color-text-secondary-default);
   font-size: var(--charcoal-text-font-size-heading-xs);
   line-height: var(--charcoal-text-line-height-heading-xs);
@@ -325,3 +326,179 @@ exports[`Storybook Tests > theme/Token v2 demo > StyledComponents 1`] = `
   </section>
 </div>
 `;
+
+exports[`Storybook Tests > theme/Toke v2 Demo > Tailwind 1`] = `
+<div
+  data-dark={false}
+>
+  <section
+    className="grid max-w-fit gap-[24px]"
+  >
+    <nav>
+      <div
+        aria-label="Categories"
+        role="tablist"
+      >
+        <a
+          aria-controls="panel-Illustration"
+          aria-selected={true}
+          className="text-text-tertiary hover:text-text-tertiary-hover active:text-text-tertiary-press text-body px-30 border-t-l cursor-pointer border-[0px] border-solid py-[13px] font-bold border-border-selected text-text"
+          id="category-Illustration"
+          onClick={[Function]}
+          role="tab"
+        >
+          Illustration
+        </a>
+        <a
+          aria-controls="panel-Comic"
+          aria-selected={false}
+          className="text-text-tertiary hover:text-text-tertiary-hover active:text-text-tertiary-press text-body px-30 border-t-l cursor-pointer border-[0px] border-solid py-[13px] font-bold border-[transparent]"
+          id="category-Comic"
+          onClick={[Function]}
+          role="tab"
+        >
+          Comic
+        </a>
+        <a
+          aria-controls="panel-Novel"
+          aria-selected={false}
+          className="text-text-tertiary hover:text-text-tertiary-hover active:text-text-tertiary-press text-body px-30 border-t-l cursor-pointer border-[0px] border-solid py-[13px] font-bold border-[transparent]"
+          id="category-Novel"
+          onClick={[Function]}
+          role="tab"
+        >
+          Novel
+        </a>
+        <a
+          aria-controls="panel-3D"
+          aria-selected={false}
+          className="text-text-tertiary hover:text-text-tertiary-hover active:text-text-tertiary-press text-body px-30 border-t-l cursor-pointer border-[0px] border-solid py-[13px] font-bold border-[transparent]"
+          id="category-3D"
+          onClick={[Function]}
+          role="tab"
+        >
+          3D
+        </a>
+        <a
+          aria-controls="panel-Shopping"
+          aria-selected={false}
+          className="text-text-tertiary hover:text-text-tertiary-hover active:text-text-tertiary-press text-body px-30 border-t-l cursor-pointer border-[0px] border-solid py-[13px] font-bold border-[transparent]"
+          id="category-Shopping"
+          onClick={[Function]}
+          role="tab"
+        >
+          Shopping
+        </a>
+      </div>
+    </nav>
+    <h2
+      className="text-text-secondary text-heading-xs m-0"
+    >
+      Works from users you follow
+    </h2>
+    <div
+      aria-labelledby="category-Illustration"
+      className="grid [grid-template-areas:'UserInfo_._ShowAll''ArtworkList_ArtworkList_ArtworkList']"
+      id="panel-Illustration"
+      role="tabpanel"
+    >
+      <div
+        className="grid grid-flow-col items-center justify-start gap-20 [grid-area:UserInfo]"
+      >
+        <a
+          aria-label="UserIcon"
+          className="rounded-oval text-icon hover:text-icon-hover active:text-icon-press bg-container-secondary hover:bg-container-hover active:bg-container-press grid h-[40px] w-[40px] cursor-pointer place-items-center"
+        >
+          <pixiv-icon
+            name="24/FaceEdit"
+          />
+        </a>
+        <span
+          className="text-text text-caption-m font-bold"
+        >
+          UserName
+        </span>
+        <button
+          className="charcoal-button"
+          data-size="S"
+          data-variant="Primary"
+        >
+          Follow
+        </button>
+      </div>
+      <a
+        className="text-text-tertiary hover:text-text-hover active:text-text-press text-caption-m cursor-pointer content-center text-right [grid-area:ShowAll]"
+      >
+        Show all
+      </a>
+      <ul
+        className="grid max-w-[424px] list-none grid-cols-3 gap-20 p-0 [grid-area:ArtworkList]"
+      >
+        <li>
+          <article
+            className="grid gap-10"
+          >
+            <img
+              alt="Title"
+              className="rounded-m aspect-[3/2] w-[100%]"
+              src="https://loremflickr.com/150/100/animals?random=0"
+            />
+            <h3
+              className="text-text text-caption-m m-0"
+            >
+              Title
+            </h3>
+            <p
+              className="text-text-tertiary text-caption-s m-0"
+            >
+              Description
+            </p>
+          </article>
+        </li>
+        <li>
+          <article
+            className="grid gap-10"
+          >
+            <img
+              alt="Title"
+              className="rounded-m aspect-[3/2] w-[100%]"
+              src="https://loremflickr.com/150/100/animals?random=1"
+            />
+            <h3
+              className="text-text text-caption-m m-0"
+            >
+              Title
+            </h3>
+            <p
+              className="text-text-tertiary text-caption-s m-0"
+            >
+              Description
+            </p>
+          </article>
+        </li>
+        <li>
+          <article
+            className="grid gap-10"
+          >
+            <img
+              alt="Title"
+              className="rounded-m aspect-[3/2] w-[100%]"
+              src="https://loremflickr.com/150/100/animals?random=2"
+            />
+            <h3
+              className="text-text text-caption-m m-0"
+            >
+              Title
+            </h3>
+            <p
+              className="text-text-tertiary text-caption-s m-0"
+            >
+              Description
+            </p>
+          </article>
+        </li>
+      </ul>
+    </div>
+  </section>
+</div>
+`;
diff --git a/packages/tailwind-config/src/__snapshots__/v2.test.ts.snap b/packages/tailwind-config/src/__snapshots__/tokenV2.test.ts.snap
similarity index 96%
rename from packages/tailwind-config/src/__snapshots__/v2.test.ts.snap
rename to packages/tailwind-config/src/__snapshots__/tokenV2.test.ts.snap
index 66015d6e7..44e90c379 100644
--- a/packages/tailwind-config/src/__snapshots__/v2.test.ts.snap
+++ b/packages/tailwind-config/src/__snapshots__/tokenV2.test.ts.snap
@@ -1,6 +1,6 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`v2 > config object 1`] = `
+exports[`tokenV2 > config object 1`] = `
 {
   "theme": {
     "borderRadius": {
@@ -22,6 +22,7 @@ exports[`v2 > config object 1`] = `
     "colors": {
       "background": {
         "DEFAULT": "var(--charcoal-color-background-default)",
+        "overlay": "var(--charcoal-color-background-overlay)",
         "secondary": "var(--charcoal-color-background-secondary)",
         "tertiary": "var(--charcoal-color-background-tertiary)",
       },
@@ -170,11 +171,6 @@ exports[`v2 > config object 1`] = `
       },
       "text": {
         "DEFAULT": "var(--charcoal-color-text-default)",
-        "brand-premium": {
-          "DEFAULT": "var(--charcoal-color-text-brand-premium-default)",
-          "hover": "var(--charcoal-color-text-brand-premium-hover)",
-          "press": "var(--charcoal-color-text-brand-premium-press)",
-        },
         "disable": "var(--charcoal-color-text-disable)",
         "hover": "var(--charcoal-color-text-hover)",
         "info": {
@@ -355,8 +351,11 @@ exports[`v2 > config object 1`] = `
       "90": "var(--charcoal-space-layout-90)",
       "between-checkboxes-horizontal": "var(--charcoal-space-between-checkboxes-horizontal)",
       "between-checkboxes-vertical": "var(--charcoal-space-between-checkboxes-vertical)",
+      "gap-buttons": "var(--charcoal-space-gap-gap-buttons)",
+      "gap-form-items": "var(--charcoal-space-gap-gap-form-items)",
       "l": "var(--charcoal-space-target-l)",
       "m": "var(--charcoal-space-target-m)",
+      "padding-card": "var(--charcoal-space-padding-padding-card)",
       "s": "var(--charcoal-space-target-s)",
       "xs": "var(--charcoal-space-target-xs)",
     },
@@ -375,7 +374,7 @@ exports[`v2 > config object 1`] = `
 }
 `;
 
-exports[`v2 > list of classes 1`] = `
+exports[`tokenV2 > list of classes 1`] = `
 [
   "sr-only",
   "not-sr-only",
@@ -401,6 +400,9 @@ exports[`v2 > list of classes 1`] = `
   "inset-90",
   "inset-100",
   "inset-auto",
+  "inset-gap-buttons",
+  "inset-gap-form-items",
+  "inset-padding-card",
   "inset-xs",
   "inset-s",
   "inset-m",
@@ -426,6 +428,9 @@ exports[`v2 > list of classes 1`] = `
   "-inset-80",
   "-inset-90",
   "-inset-100",
+  "-inset-gap-buttons",
+  "-inset-gap-form-items",
+  "-inset-padding-card",
   "-inset-xs",
   "-inset-s",
   "-inset-m",
@@ -452,6 +457,9 @@ exports[`v2 > list of classes 1`] = `
   "inset-x-90",
   "inset-x-100",
   "inset-x-auto",
+  "inset-x-gap-buttons",
+  "inset-x-gap-form-items",
+  "inset-x-padding-card",
   "inset-x-xs",
   "inset-x-s",
   "inset-x-m",
@@ -477,6 +485,9 @@ exports[`v2 > list of classes 1`] = `
   "-inset-x-80",
   "-inset-x-90",
   "-inset-x-100",
+  "-inset-x-gap-buttons",
+  "-inset-x-gap-form-items",
+  "-inset-x-padding-card",
   "-inset-x-xs",
   "-inset-x-s",
   "-inset-x-m",
@@ -503,6 +514,9 @@ exports[`v2 > list of classes 1`] = `
   "inset-y-90",
   "inset-y-100",
   "inset-y-auto",
+  "inset-y-gap-buttons",
+  "inset-y-gap-form-items",
+  "inset-y-padding-card",
   "inset-y-xs",
   "inset-y-s",
   "inset-y-m",
@@ -528,6 +542,9 @@ exports[`v2 > list of classes 1`] = `
   "-inset-y-80",
   "-inset-y-90",
   "-inset-y-100",
+  "-inset-y-gap-buttons",
+  "-inset-y-gap-form-items",
+  "-inset-y-padding-card",
   "-inset-y-xs",
   "-inset-y-s",
   "-inset-y-m",
@@ -554,6 +571,9 @@ exports[`v2 > list of classes 1`] = `
   "top-90",
   "top-100",
   "top-auto",
+  "top-gap-buttons",
+  "top-gap-form-items",
+  "top-padding-card",
   "top-xs",
   "top-s",
   "top-m",
@@ -579,6 +599,9 @@ exports[`v2 > list of classes 1`] = `
   "-top-80",
   "-top-90",
   "-top-100",
+  "-top-gap-buttons",
+  "-top-gap-form-items",
+  "-top-padding-card",
   "-top-xs",
   "-top-s",
   "-top-m",
@@ -605,6 +628,9 @@ exports[`v2 > list of classes 1`] = `
   "right-90",
   "right-100",
   "right-auto",
+  "right-gap-buttons",
+  "right-gap-form-items",
+  "right-padding-card",
   "right-xs",
   "right-s",
   "right-m",
@@ -630,6 +656,9 @@ exports[`v2 > list of classes 1`] = `
   "-right-80",
   "-right-90",
   "-right-100",
+  "-right-gap-buttons",
+  "-right-gap-form-items",
+  "-right-padding-card",
   "-right-xs",
   "-right-s",
   "-right-m",
@@ -656,6 +685,9 @@ exports[`v2 > list of classes 1`] = `
   "bottom-90",
   "bottom-100",
   "bottom-auto",
+  "bottom-gap-buttons",
+  "bottom-gap-form-items",
+  "bottom-padding-card",
   "bottom-xs",
   "bottom-s",
   "bottom-m",
@@ -681,6 +713,9 @@ exports[`v2 > list of classes 1`] = `
   "-bottom-80",
   "-bottom-90",
   "-bottom-100",
+  "-bottom-gap-buttons",
+  "-bottom-gap-form-items",
+  "-bottom-padding-card",
   "-bottom-xs",
   "-bottom-s",
   "-bottom-m",
@@ -707,6 +742,9 @@ exports[`v2 > list of classes 1`] = `
   "left-90",
   "left-100",
   "left-auto",
+  "left-gap-buttons",
+  "left-gap-form-items",
+  "left-padding-card",
   "left-xs",
   "left-s",
   "left-m",
@@ -732,6 +770,9 @@ exports[`v2 > list of classes 1`] = `
   "-left-80",
   "-left-90",
   "-left-100",
+  "-left-gap-buttons",
+  "-left-gap-form-items",
+  "-left-padding-card",
   "-left-xs",
   "-left-s",
   "-left-m",
@@ -876,6 +917,9 @@ exports[`v2 > list of classes 1`] = `
   "m-90",
   "m-100",
   "m-auto",
+  "m-gap-buttons",
+  "m-gap-form-items",
+  "m-padding-card",
   "m-xs",
   "m-s",
   "m-m",
@@ -894,6 +938,9 @@ exports[`v2 > list of classes 1`] = `
   "-m-80",
   "-m-90",
   "-m-100",
+  "-m-gap-buttons",
+  "-m-gap-form-items",
+  "-m-padding-card",
   "-m-xs",
   "-m-s",
   "-m-m",
@@ -913,6 +960,9 @@ exports[`v2 > list of classes 1`] = `
   "mx-90",
   "mx-100",
   "mx-auto",
+  "mx-gap-buttons",
+  "mx-gap-form-items",
+  "mx-padding-card",
   "mx-xs",
   "mx-s",
   "mx-m",
@@ -931,6 +981,9 @@ exports[`v2 > list of classes 1`] = `
   "-mx-80",
   "-mx-90",
   "-mx-100",
+  "-mx-gap-buttons",
+  "-mx-gap-form-items",
+  "-mx-padding-card",
   "-mx-xs",
   "-mx-s",
   "-mx-m",
@@ -950,6 +1003,9 @@ exports[`v2 > list of classes 1`] = `
   "my-90",
   "my-100",
   "my-auto",
+  "my-gap-buttons",
+  "my-gap-form-items",
+  "my-padding-card",
   "my-xs",
   "my-s",
   "my-m",
@@ -968,6 +1024,9 @@ exports[`v2 > list of classes 1`] = `
   "-my-80",
   "-my-90",
   "-my-100",
+  "-my-gap-buttons",
+  "-my-gap-form-items",
+  "-my-padding-card",
   "-my-xs",
   "-my-s",
   "-my-m",
@@ -987,6 +1046,9 @@ exports[`v2 > list of classes 1`] = `
   "mt-90",
   "mt-100",
   "mt-auto",
+  "mt-gap-buttons",
+  "mt-gap-form-items",
+  "mt-padding-card",
   "mt-xs",
   "mt-s",
   "mt-m",
@@ -1005,6 +1067,9 @@ exports[`v2 > list of classes 1`] = `
   "-mt-80",
   "-mt-90",
   "-mt-100",
+  "-mt-gap-buttons",
+  "-mt-gap-form-items",
+  "-mt-padding-card",
   "-mt-xs",
   "-mt-s",
   "-mt-m",
@@ -1024,6 +1089,9 @@ exports[`v2 > list of classes 1`] = `
   "mr-90",
   "mr-100",
   "mr-auto",
+  "mr-gap-buttons",
+  "mr-gap-form-items",
+  "mr-padding-card",
   "mr-xs",
   "mr-s",
   "mr-m",
@@ -1042,6 +1110,9 @@ exports[`v2 > list of classes 1`] = `
   "-mr-80",
   "-mr-90",
   "-mr-100",
+  "-mr-gap-buttons",
+  "-mr-gap-form-items",
+  "-mr-padding-card",
   "-mr-xs",
   "-mr-s",
   "-mr-m",
@@ -1061,6 +1132,9 @@ exports[`v2 > list of classes 1`] = `
   "mb-90",
   "mb-100",
   "mb-auto",
+  "mb-gap-buttons",
+  "mb-gap-form-items",
+  "mb-padding-card",
   "mb-xs",
   "mb-s",
   "mb-m",
@@ -1079,6 +1153,9 @@ exports[`v2 > list of classes 1`] = `
   "-mb-80",
   "-mb-90",
   "-mb-100",
+  "-mb-gap-buttons",
+  "-mb-gap-form-items",
+  "-mb-padding-card",
   "-mb-xs",
   "-mb-s",
   "-mb-m",
@@ -1098,6 +1175,9 @@ exports[`v2 > list of classes 1`] = `
   "ml-90",
   "ml-100",
   "ml-auto",
+  "ml-gap-buttons",
+  "ml-gap-form-items",
+  "ml-padding-card",
   "ml-xs",
   "ml-s",
   "ml-m",
@@ -1116,6 +1196,9 @@ exports[`v2 > list of classes 1`] = `
   "-ml-80",
   "-ml-90",
   "-ml-100",
+  "-ml-gap-buttons",
+  "-ml-gap-form-items",
+  "-ml-padding-card",
   "-ml-xs",
   "-ml-s",
   "-ml-m",
@@ -1161,6 +1244,9 @@ exports[`v2 > list of classes 1`] = `
   "h-90",
   "h-100",
   "h-auto",
+  "h-gap-buttons",
+  "h-gap-form-items",
+  "h-padding-card",
   "h-xs",
   "h-s",
   "h-m",
@@ -1199,6 +1285,9 @@ exports[`v2 > list of classes 1`] = `
   "max-h-80",
   "max-h-90",
   "max-h-100",
+  "max-h-gap-buttons",
+  "max-h-gap-form-items",
+  "max-h-padding-card",
   "max-h-xs",
   "max-h-s",
   "max-h-m",
@@ -1278,6 +1367,9 @@ exports[`v2 > list of classes 1`] = `
   "basis-90",
   "basis-100",
   "basis-auto",
+  "basis-gap-buttons",
+  "basis-gap-form-items",
+  "basis-padding-card",
   "basis-xs",
   "basis-s",
   "basis-m",
@@ -1336,6 +1428,9 @@ exports[`v2 > list of classes 1`] = `
   "translate-x-80",
   "translate-x-90",
   "translate-x-100",
+  "translate-x-gap-buttons",
+  "translate-x-gap-form-items",
+  "translate-x-padding-card",
   "translate-x-xs",
   "translate-x-s",
   "translate-x-m",
@@ -1361,6 +1456,9 @@ exports[`v2 > list of classes 1`] = `
   "-translate-x-80",
   "-translate-x-90",
   "-translate-x-100",
+  "-translate-x-gap-buttons",
+  "-translate-x-gap-form-items",
+  "-translate-x-padding-card",
   "-translate-x-xs",
   "-translate-x-s",
   "-translate-x-m",
@@ -1386,6 +1484,9 @@ exports[`v2 > list of classes 1`] = `
   "translate-y-80",
   "translate-y-90",
   "translate-y-100",
+  "translate-y-gap-buttons",
+  "translate-y-gap-form-items",
+  "translate-y-padding-card",
   "translate-y-xs",
   "translate-y-s",
   "translate-y-m",
@@ -1411,6 +1512,9 @@ exports[`v2 > list of classes 1`] = `
   "-translate-y-80",
   "-translate-y-90",
   "-translate-y-100",
+  "-translate-y-gap-buttons",
+  "-translate-y-gap-form-items",
+  "-translate-y-padding-card",
   "-translate-y-xs",
   "-translate-y-s",
   "-translate-y-m",
@@ -1613,6 +1717,9 @@ exports[`v2 > list of classes 1`] = `
   "scroll-m-80",
   "scroll-m-90",
   "scroll-m-100",
+  "scroll-m-gap-buttons",
+  "scroll-m-gap-form-items",
+  "scroll-m-padding-card",
   "scroll-m-xs",
   "scroll-m-s",
   "scroll-m-m",
@@ -1631,6 +1738,9 @@ exports[`v2 > list of classes 1`] = `
   "-scroll-m-80",
   "-scroll-m-90",
   "-scroll-m-100",
+  "-scroll-m-gap-buttons",
+  "-scroll-m-gap-form-items",
+  "-scroll-m-padding-card",
   "-scroll-m-xs",
   "-scroll-m-s",
   "-scroll-m-m",
@@ -1649,6 +1759,9 @@ exports[`v2 > list of classes 1`] = `
   "scroll-mx-80",
   "scroll-mx-90",
   "scroll-mx-100",
+  "scroll-mx-gap-buttons",
+  "scroll-mx-gap-form-items",
+  "scroll-mx-padding-card",
   "scroll-mx-xs",
   "scroll-mx-s",
   "scroll-mx-m",
@@ -1667,6 +1780,9 @@ exports[`v2 > list of classes 1`] = `
   "-scroll-mx-80",
   "-scroll-mx-90",
   "-scroll-mx-100",
+  "-scroll-mx-gap-buttons",
+  "-scroll-mx-gap-form-items",
+  "-scroll-mx-padding-card",
   "-scroll-mx-xs",
   "-scroll-mx-s",
   "-scroll-mx-m",
@@ -1685,6 +1801,9 @@ exports[`v2 > list of classes 1`] = `
   "scroll-my-80",
   "scroll-my-90",
   "scroll-my-100",
+  "scroll-my-gap-buttons",
+  "scroll-my-gap-form-items",
+  "scroll-my-padding-card",
   "scroll-my-xs",
   "scroll-my-s",
   "scroll-my-m",
@@ -1703,6 +1822,9 @@ exports[`v2 > list of classes 1`] = `
   "-scroll-my-80",
   "-scroll-my-90",
   "-scroll-my-100",
+  "-scroll-my-gap-buttons",
+  "-scroll-my-gap-form-items",
+  "-scroll-my-padding-card",
   "-scroll-my-xs",
   "-scroll-my-s",
   "-scroll-my-m",
@@ -1721,6 +1843,9 @@ exports[`v2 > list of classes 1`] = `
   "scroll-mt-80",
   "scroll-mt-90",
   "scroll-mt-100",
+  "scroll-mt-gap-buttons",
+  "scroll-mt-gap-form-items",
+  "scroll-mt-padding-card",
   "scroll-mt-xs",
   "scroll-mt-s",
   "scroll-mt-m",
@@ -1739,6 +1864,9 @@ exports[`v2 > list of classes 1`] = `
   "-scroll-mt-80",
   "-scroll-mt-90",
   "-scroll-mt-100",
+  "-scroll-mt-gap-buttons",
+  "-scroll-mt-gap-form-items",
+  "-scroll-mt-padding-card",
   "-scroll-mt-xs",
   "-scroll-mt-s",
   "-scroll-mt-m",
@@ -1757,6 +1885,9 @@ exports[`v2 > list of classes 1`] = `
   "scroll-mr-80",
   "scroll-mr-90",
   "scroll-mr-100",
+  "scroll-mr-gap-buttons",
+  "scroll-mr-gap-form-items",
+  "scroll-mr-padding-card",
   "scroll-mr-xs",
   "scroll-mr-s",
   "scroll-mr-m",
@@ -1775,6 +1906,9 @@ exports[`v2 > list of classes 1`] = `
   "-scroll-mr-80",
   "-scroll-mr-90",
   "-scroll-mr-100",
+  "-scroll-mr-gap-buttons",
+  "-scroll-mr-gap-form-items",
+  "-scroll-mr-padding-card",
   "-scroll-mr-xs",
   "-scroll-mr-s",
   "-scroll-mr-m",
@@ -1793,6 +1927,9 @@ exports[`v2 > list of classes 1`] = `
   "scroll-mb-80",
   "scroll-mb-90",
   "scroll-mb-100",
+  "scroll-mb-gap-buttons",
+  "scroll-mb-gap-form-items",
+  "scroll-mb-padding-card",
   "scroll-mb-xs",
   "scroll-mb-s",
   "scroll-mb-m",
@@ -1811,6 +1948,9 @@ exports[`v2 > list of classes 1`] = `
   "-scroll-mb-80",
   "-scroll-mb-90",
   "-scroll-mb-100",
+  "-scroll-mb-gap-buttons",
+  "-scroll-mb-gap-form-items",
+  "-scroll-mb-padding-card",
   "-scroll-mb-xs",
   "-scroll-mb-s",
   "-scroll-mb-m",
@@ -1829,6 +1969,9 @@ exports[`v2 > list of classes 1`] = `
   "scroll-ml-80",
   "scroll-ml-90",
   "scroll-ml-100",
+  "scroll-ml-gap-buttons",
+  "scroll-ml-gap-form-items",
+  "scroll-ml-padding-card",
   "scroll-ml-xs",
   "scroll-ml-s",
   "scroll-ml-m",
@@ -1847,6 +1990,9 @@ exports[`v2 > list of classes 1`] = `
   "-scroll-ml-80",
   "-scroll-ml-90",
   "-scroll-ml-100",
+  "-scroll-ml-gap-buttons",
+  "-scroll-ml-gap-form-items",
+  "-scroll-ml-padding-card",
   "-scroll-ml-xs",
   "-scroll-ml-s",
   "-scroll-ml-m",
@@ -1865,6 +2011,9 @@ exports[`v2 > list of classes 1`] = `
   "scroll-p-80",
   "scroll-p-90",
   "scroll-p-100",
+  "scroll-p-gap-buttons",
+  "scroll-p-gap-form-items",
+  "scroll-p-padding-card",
   "scroll-p-xs",
   "scroll-p-s",
   "scroll-p-m",
@@ -1883,6 +2032,9 @@ exports[`v2 > list of classes 1`] = `
   "scroll-px-80",
   "scroll-px-90",
   "scroll-px-100",
+  "scroll-px-gap-buttons",
+  "scroll-px-gap-form-items",
+  "scroll-px-padding-card",
   "scroll-px-xs",
   "scroll-px-s",
   "scroll-px-m",
@@ -1901,6 +2053,9 @@ exports[`v2 > list of classes 1`] = `
   "scroll-py-80",
   "scroll-py-90",
   "scroll-py-100",
+  "scroll-py-gap-buttons",
+  "scroll-py-gap-form-items",
+  "scroll-py-padding-card",
   "scroll-py-xs",
   "scroll-py-s",
   "scroll-py-m",
@@ -1919,6 +2074,9 @@ exports[`v2 > list of classes 1`] = `
   "scroll-pt-80",
   "scroll-pt-90",
   "scroll-pt-100",
+  "scroll-pt-gap-buttons",
+  "scroll-pt-gap-form-items",
+  "scroll-pt-padding-card",
   "scroll-pt-xs",
   "scroll-pt-s",
   "scroll-pt-m",
@@ -1937,6 +2095,9 @@ exports[`v2 > list of classes 1`] = `
   "scroll-pr-80",
   "scroll-pr-90",
   "scroll-pr-100",
+  "scroll-pr-gap-buttons",
+  "scroll-pr-gap-form-items",
+  "scroll-pr-padding-card",
   "scroll-pr-xs",
   "scroll-pr-s",
   "scroll-pr-m",
@@ -1955,6 +2116,9 @@ exports[`v2 > list of classes 1`] = `
   "scroll-pb-80",
   "scroll-pb-90",
   "scroll-pb-100",
+  "scroll-pb-gap-buttons",
+  "scroll-pb-gap-form-items",
+  "scroll-pb-padding-card",
   "scroll-pb-xs",
   "scroll-pb-s",
   "scroll-pb-m",
@@ -1973,6 +2137,9 @@ exports[`v2 > list of classes 1`] = `
   "scroll-pl-80",
   "scroll-pl-90",
   "scroll-pl-100",
+  "scroll-pl-gap-buttons",
+  "scroll-pl-gap-form-items",
+  "scroll-pl-padding-card",
   "scroll-pl-xs",
   "scroll-pl-s",
   "scroll-pl-m",
@@ -2114,6 +2281,9 @@ exports[`v2 > list of classes 1`] = `
   "gap-80",
   "gap-90",
   "gap-100",
+  "gap-gap-buttons",
+  "gap-gap-form-items",
+  "gap-padding-card",
   "gap-xs",
   "gap-s",
   "gap-m",
@@ -2132,6 +2302,9 @@ exports[`v2 > list of classes 1`] = `
   "gap-x-80",
   "gap-x-90",
   "gap-x-100",
+  "gap-x-gap-buttons",
+  "gap-x-gap-form-items",
+  "gap-x-padding-card",
   "gap-x-xs",
   "gap-x-s",
   "gap-x-m",
@@ -2150,6 +2323,9 @@ exports[`v2 > list of classes 1`] = `
   "gap-y-80",
   "gap-y-90",
   "gap-y-100",
+  "gap-y-gap-buttons",
+  "gap-y-gap-form-items",
+  "gap-y-padding-card",
   "gap-y-xs",
   "gap-y-s",
   "gap-y-m",
@@ -2168,6 +2344,9 @@ exports[`v2 > list of classes 1`] = `
   "space-x-80",
   "space-x-90",
   "space-x-100",
+  "space-x-gap-buttons",
+  "space-x-gap-form-items",
+  "space-x-padding-card",
   "space-x-xs",
   "space-x-s",
   "space-x-m",
@@ -2186,6 +2365,9 @@ exports[`v2 > list of classes 1`] = `
   "-space-x-80",
   "-space-x-90",
   "-space-x-100",
+  "-space-x-gap-buttons",
+  "-space-x-gap-form-items",
+  "-space-x-padding-card",
   "-space-x-xs",
   "-space-x-s",
   "-space-x-m",
@@ -2204,6 +2386,9 @@ exports[`v2 > list of classes 1`] = `
   "space-y-80",
   "space-y-90",
   "space-y-100",
+  "space-y-gap-buttons",
+  "space-y-gap-form-items",
+  "space-y-padding-card",
   "space-y-xs",
   "space-y-s",
   "space-y-m",
@@ -2222,6 +2407,9 @@ exports[`v2 > list of classes 1`] = `
   "-space-y-80",
   "-space-y-90",
   "-space-y-100",
+  "-space-y-gap-buttons",
+  "-space-y-gap-form-items",
+  "-space-y-padding-card",
   "-space-y-xs",
   "-space-y-s",
   "-space-y-m",
@@ -2247,6 +2435,7 @@ exports[`v2 > list of classes 1`] = `
   "divide-none",
   "divide-background-secondary",
   "divide-background-tertiary",
+  "divide-background-overlay",
   "divide-background",
   "divide-container-hover",
   "divide-container-press",
@@ -2378,16 +2567,13 @@ exports[`v2 > list of classes 1`] = `
   "divide-text-on-hud-hover",
   "divide-text-on-hud-press",
   "divide-text-on-hud",
-  "divide-text-brand-premium-hover",
-  "divide-text-brand-premium-press",
-  "divide-text-brand-premium",
   "divide-text",
   "divide-border-hover",
   "divide-border-press",
-  "divide-border-secondary",
   "divide-border-focus-1",
   "divide-border-focus-2",
   "divide-border-focus-legacy",
+  "divide-border-secondary",
   "divide-border-disable",
   "divide-border-selected",
   "divide-border-negative",
@@ -2570,6 +2756,7 @@ exports[`v2 > list of classes 1`] = `
   "border-none",
   "border-background-secondary",
   "border-background-tertiary",
+  "border-background-overlay",
   "border-background",
   "border-container-hover",
   "border-container-press",
@@ -2701,16 +2888,13 @@ exports[`v2 > list of classes 1`] = `
   "border-text-on-hud-hover",
   "border-text-on-hud-press",
   "border-text-on-hud",
-  "border-text-brand-premium-hover",
-  "border-text-brand-premium-press",
-  "border-text-brand-premium",
   "border-text",
   "border-border-hover",
   "border-border-press",
-  "border-border-secondary",
   "border-border-focus-1",
   "border-border-focus-2",
   "border-border-focus-legacy",
+  "border-border-secondary",
   "border-border-disable",
   "border-border-selected",
   "border-border-negative",
@@ -2718,6 +2902,7 @@ exports[`v2 > list of classes 1`] = `
   "border-border",
   "border-x-background-secondary",
   "border-x-background-tertiary",
+  "border-x-background-overlay",
   "border-x-background",
   "border-x-container-hover",
   "border-x-container-press",
@@ -2849,16 +3034,13 @@ exports[`v2 > list of classes 1`] = `
   "border-x-text-on-hud-hover",
   "border-x-text-on-hud-press",
   "border-x-text-on-hud",
-  "border-x-text-brand-premium-hover",
-  "border-x-text-brand-premium-press",
-  "border-x-text-brand-premium",
   "border-x-text",
   "border-x-border-hover",
   "border-x-border-press",
-  "border-x-border-secondary",
   "border-x-border-focus-1",
   "border-x-border-focus-2",
   "border-x-border-focus-legacy",
+  "border-x-border-secondary",
   "border-x-border-disable",
   "border-x-border-selected",
   "border-x-border-negative",
@@ -2866,6 +3048,7 @@ exports[`v2 > list of classes 1`] = `
   "border-x-border",
   "border-y-background-secondary",
   "border-y-background-tertiary",
+  "border-y-background-overlay",
   "border-y-background",
   "border-y-container-hover",
   "border-y-container-press",
@@ -2997,16 +3180,13 @@ exports[`v2 > list of classes 1`] = `
   "border-y-text-on-hud-hover",
   "border-y-text-on-hud-press",
   "border-y-text-on-hud",
-  "border-y-text-brand-premium-hover",
-  "border-y-text-brand-premium-press",
-  "border-y-text-brand-premium",
   "border-y-text",
   "border-y-border-hover",
   "border-y-border-press",
-  "border-y-border-secondary",
   "border-y-border-focus-1",
   "border-y-border-focus-2",
   "border-y-border-focus-legacy",
+  "border-y-border-secondary",
   "border-y-border-disable",
   "border-y-border-selected",
   "border-y-border-negative",
@@ -3014,6 +3194,7 @@ exports[`v2 > list of classes 1`] = `
   "border-y-border",
   "border-t-background-secondary",
   "border-t-background-tertiary",
+  "border-t-background-overlay",
   "border-t-background",
   "border-t-container-hover",
   "border-t-container-press",
@@ -3145,16 +3326,13 @@ exports[`v2 > list of classes 1`] = `
   "border-t-text-on-hud-hover",
   "border-t-text-on-hud-press",
   "border-t-text-on-hud",
-  "border-t-text-brand-premium-hover",
-  "border-t-text-brand-premium-press",
-  "border-t-text-brand-premium",
   "border-t-text",
   "border-t-border-hover",
   "border-t-border-press",
-  "border-t-border-secondary",
   "border-t-border-focus-1",
   "border-t-border-focus-2",
   "border-t-border-focus-legacy",
+  "border-t-border-secondary",
   "border-t-border-disable",
   "border-t-border-selected",
   "border-t-border-negative",
@@ -3162,6 +3340,7 @@ exports[`v2 > list of classes 1`] = `
   "border-t-border",
   "border-r-background-secondary",
   "border-r-background-tertiary",
+  "border-r-background-overlay",
   "border-r-background",
   "border-r-container-hover",
   "border-r-container-press",
@@ -3293,16 +3472,13 @@ exports[`v2 > list of classes 1`] = `
   "border-r-text-on-hud-hover",
   "border-r-text-on-hud-press",
   "border-r-text-on-hud",
-  "border-r-text-brand-premium-hover",
-  "border-r-text-brand-premium-press",
-  "border-r-text-brand-premium",
   "border-r-text",
   "border-r-border-hover",
   "border-r-border-press",
-  "border-r-border-secondary",
   "border-r-border-focus-1",
   "border-r-border-focus-2",
   "border-r-border-focus-legacy",
+  "border-r-border-secondary",
   "border-r-border-disable",
   "border-r-border-selected",
   "border-r-border-negative",
@@ -3310,6 +3486,7 @@ exports[`v2 > list of classes 1`] = `
   "border-r-border",
   "border-b-background-secondary",
   "border-b-background-tertiary",
+  "border-b-background-overlay",
   "border-b-background",
   "border-b-container-hover",
   "border-b-container-press",
@@ -3441,16 +3618,13 @@ exports[`v2 > list of classes 1`] = `
   "border-b-text-on-hud-hover",
   "border-b-text-on-hud-press",
   "border-b-text-on-hud",
-  "border-b-text-brand-premium-hover",
-  "border-b-text-brand-premium-press",
-  "border-b-text-brand-premium",
   "border-b-text",
   "border-b-border-hover",
   "border-b-border-press",
-  "border-b-border-secondary",
   "border-b-border-focus-1",
   "border-b-border-focus-2",
   "border-b-border-focus-legacy",
+  "border-b-border-secondary",
   "border-b-border-disable",
   "border-b-border-selected",
   "border-b-border-negative",
@@ -3458,6 +3632,7 @@ exports[`v2 > list of classes 1`] = `
   "border-b-border",
   "border-l-background-secondary",
   "border-l-background-tertiary",
+  "border-l-background-overlay",
   "border-l-background",
   "border-l-container-hover",
   "border-l-container-press",
@@ -3589,16 +3764,13 @@ exports[`v2 > list of classes 1`] = `
   "border-l-text-on-hud-hover",
   "border-l-text-on-hud-press",
   "border-l-text-on-hud",
-  "border-l-text-brand-premium-hover",
-  "border-l-text-brand-premium-press",
-  "border-l-text-brand-premium",
   "border-l-text",
   "border-l-border-hover",
   "border-l-border-press",
-  "border-l-border-secondary",
   "border-l-border-focus-1",
   "border-l-border-focus-2",
   "border-l-border-focus-legacy",
+  "border-l-border-secondary",
   "border-l-border-disable",
   "border-l-border-selected",
   "border-l-border-negative",
@@ -3621,6 +3793,7 @@ exports[`v2 > list of classes 1`] = `
   "border-opacity-100",
   "bg-background-secondary",
   "bg-background-tertiary",
+  "bg-background-overlay",
   "bg-background",
   "bg-container-hover",
   "bg-container-press",
@@ -3752,16 +3925,13 @@ exports[`v2 > list of classes 1`] = `
   "bg-text-on-hud-hover",
   "bg-text-on-hud-press",
   "bg-text-on-hud",
-  "bg-text-brand-premium-hover",
-  "bg-text-brand-premium-press",
-  "bg-text-brand-premium",
   "bg-text",
   "bg-border-hover",
   "bg-border-press",
-  "bg-border-secondary",
   "bg-border-focus-1",
   "bg-border-focus-2",
   "bg-border-focus-legacy",
+  "bg-border-secondary",
   "bg-border-disable",
   "bg-border-selected",
   "bg-border-negative",
@@ -3793,6 +3963,7 @@ exports[`v2 > list of classes 1`] = `
   "bg-gradient-to-tl",
   "from-background-secondary",
   "from-background-tertiary",
+  "from-background-overlay",
   "from-background",
   "from-container-hover",
   "from-container-press",
@@ -3924,16 +4095,13 @@ exports[`v2 > list of classes 1`] = `
   "from-text-on-hud-hover",
   "from-text-on-hud-press",
   "from-text-on-hud",
-  "from-text-brand-premium-hover",
-  "from-text-brand-premium-press",
-  "from-text-brand-premium",
   "from-text",
   "from-border-hover",
   "from-border-press",
-  "from-border-secondary",
   "from-border-focus-1",
   "from-border-focus-2",
   "from-border-focus-legacy",
+  "from-border-secondary",
   "from-border-disable",
   "from-border-selected",
   "from-border-negative",
@@ -3941,6 +4109,7 @@ exports[`v2 > list of classes 1`] = `
   "from-border",
   "via-background-secondary",
   "via-background-tertiary",
+  "via-background-overlay",
   "via-background",
   "via-container-hover",
   "via-container-press",
@@ -4072,16 +4241,13 @@ exports[`v2 > list of classes 1`] = `
   "via-text-on-hud-hover",
   "via-text-on-hud-press",
   "via-text-on-hud",
-  "via-text-brand-premium-hover",
-  "via-text-brand-premium-press",
-  "via-text-brand-premium",
   "via-text",
   "via-border-hover",
   "via-border-press",
-  "via-border-secondary",
   "via-border-focus-1",
   "via-border-focus-2",
   "via-border-focus-legacy",
+  "via-border-secondary",
   "via-border-disable",
   "via-border-selected",
   "via-border-negative",
@@ -4089,6 +4255,7 @@ exports[`v2 > list of classes 1`] = `
   "via-border",
   "to-background-secondary",
   "to-background-tertiary",
+  "to-background-overlay",
   "to-background",
   "to-container-hover",
   "to-container-press",
@@ -4220,16 +4387,13 @@ exports[`v2 > list of classes 1`] = `
   "to-text-on-hud-hover",
   "to-text-on-hud-press",
   "to-text-on-hud",
-  "to-text-brand-premium-hover",
-  "to-text-brand-premium-press",
-  "to-text-brand-premium",
   "to-text",
   "to-border-hover",
   "to-border-press",
-  "to-border-secondary",
   "to-border-focus-1",
   "to-border-focus-2",
   "to-border-focus-legacy",
+  "to-border-secondary",
   "to-border-disable",
   "to-border-selected",
   "to-border-negative",
@@ -4269,6 +4433,7 @@ exports[`v2 > list of classes 1`] = `
   "bg-origin-content",
   "fill-background-secondary",
   "fill-background-tertiary",
+  "fill-background-overlay",
   "fill-background",
   "fill-container-hover",
   "fill-container-press",
@@ -4400,16 +4565,13 @@ exports[`v2 > list of classes 1`] = `
   "fill-text-on-hud-hover",
   "fill-text-on-hud-press",
   "fill-text-on-hud",
-  "fill-text-brand-premium-hover",
-  "fill-text-brand-premium-press",
-  "fill-text-brand-premium",
   "fill-text",
   "fill-border-hover",
   "fill-border-press",
-  "fill-border-secondary",
   "fill-border-focus-1",
   "fill-border-focus-2",
   "fill-border-focus-legacy",
+  "fill-border-secondary",
   "fill-border-disable",
   "fill-border-selected",
   "fill-border-negative",
@@ -4417,6 +4579,7 @@ exports[`v2 > list of classes 1`] = `
   "fill-border",
   "stroke-background-secondary",
   "stroke-background-tertiary",
+  "stroke-background-overlay",
   "stroke-background",
   "stroke-container-hover",
   "stroke-container-press",
@@ -4548,16 +4711,13 @@ exports[`v2 > list of classes 1`] = `
   "stroke-text-on-hud-hover",
   "stroke-text-on-hud-press",
   "stroke-text-on-hud",
-  "stroke-text-brand-premium-hover",
-  "stroke-text-brand-premium-press",
-  "stroke-text-brand-premium",
   "stroke-text",
   "stroke-border-hover",
   "stroke-border-press",
-  "stroke-border-secondary",
   "stroke-border-focus-1",
   "stroke-border-focus-2",
   "stroke-border-focus-legacy",
+  "stroke-border-secondary",
   "stroke-border-disable",
   "stroke-border-selected",
   "stroke-border-negative",
@@ -4592,6 +4752,9 @@ exports[`v2 > list of classes 1`] = `
   "p-80",
   "p-90",
   "p-100",
+  "p-gap-buttons",
+  "p-gap-form-items",
+  "p-padding-card",
   "p-xs",
   "p-s",
   "p-m",
@@ -4610,6 +4773,9 @@ exports[`v2 > list of classes 1`] = `
   "px-80",
   "px-90",
   "px-100",
+  "px-gap-buttons",
+  "px-gap-form-items",
+  "px-padding-card",
   "px-xs",
   "px-s",
   "px-m",
@@ -4628,6 +4794,9 @@ exports[`v2 > list of classes 1`] = `
   "py-80",
   "py-90",
   "py-100",
+  "py-gap-buttons",
+  "py-gap-form-items",
+  "py-padding-card",
   "py-xs",
   "py-s",
   "py-m",
@@ -4646,6 +4815,9 @@ exports[`v2 > list of classes 1`] = `
   "pt-80",
   "pt-90",
   "pt-100",
+  "pt-gap-buttons",
+  "pt-gap-form-items",
+  "pt-padding-card",
   "pt-xs",
   "pt-s",
   "pt-m",
@@ -4664,6 +4836,9 @@ exports[`v2 > list of classes 1`] = `
   "pr-80",
   "pr-90",
   "pr-100",
+  "pr-gap-buttons",
+  "pr-gap-form-items",
+  "pr-padding-card",
   "pr-xs",
   "pr-s",
   "pr-m",
@@ -4682,6 +4857,9 @@ exports[`v2 > list of classes 1`] = `
   "pb-80",
   "pb-90",
   "pb-100",
+  "pb-gap-buttons",
+  "pb-gap-form-items",
+  "pb-padding-card",
   "pb-xs",
   "pb-s",
   "pb-m",
@@ -4700,6 +4878,9 @@ exports[`v2 > list of classes 1`] = `
   "pl-80",
   "pl-90",
   "pl-100",
+  "pl-gap-buttons",
+  "pl-gap-form-items",
+  "pl-padding-card",
   "pl-xs",
   "pl-s",
   "pl-m",
@@ -4722,6 +4903,9 @@ exports[`v2 > list of classes 1`] = `
   "indent-80",
   "indent-90",
   "indent-100",
+  "indent-gap-buttons",
+  "indent-gap-form-items",
+  "indent-padding-card",
   "indent-xs",
   "indent-s",
   "indent-m",
@@ -4740,6 +4924,9 @@ exports[`v2 > list of classes 1`] = `
   "-indent-80",
   "-indent-90",
   "-indent-100",
+  "-indent-gap-buttons",
+  "-indent-gap-form-items",
+  "-indent-padding-card",
   "-indent-xs",
   "-indent-s",
   "-indent-m",
@@ -4815,6 +5002,7 @@ exports[`v2 > list of classes 1`] = `
   "-tracking-widest",
   "text-background-secondary",
   "text-background-tertiary",
+  "text-background-overlay",
   "text-background",
   "text-container-hover",
   "text-container-press",
@@ -4946,16 +5134,13 @@ exports[`v2 > list of classes 1`] = `
   "text-text-on-hud-hover",
   "text-text-on-hud-press",
   "text-text-on-hud",
-  "text-text-brand-premium-hover",
-  "text-text-brand-premium-press",
-  "text-text-brand-premium",
   "text-text",
   "text-border-hover",
   "text-border-press",
-  "text-border-secondary",
   "text-border-focus-1",
   "text-border-focus-2",
   "text-border-focus-legacy",
+  "text-border-secondary",
   "text-border-disable",
   "text-border-selected",
   "text-border-negative",
@@ -4982,6 +5167,7 @@ exports[`v2 > list of classes 1`] = `
   "no-underline",
   "decoration-background-secondary",
   "decoration-background-tertiary",
+  "decoration-background-overlay",
   "decoration-background",
   "decoration-container-hover",
   "decoration-container-press",
@@ -5113,16 +5299,13 @@ exports[`v2 > list of classes 1`] = `
   "decoration-text-on-hud-hover",
   "decoration-text-on-hud-press",
   "decoration-text-on-hud",
-  "decoration-text-brand-premium-hover",
-  "decoration-text-brand-premium-press",
-  "decoration-text-brand-premium",
   "decoration-text",
   "decoration-border-hover",
   "decoration-border-press",
-  "decoration-border-secondary",
   "decoration-border-focus-1",
   "decoration-border-focus-2",
   "decoration-border-focus-legacy",
+  "decoration-border-secondary",
   "decoration-border-disable",
   "decoration-border-selected",
   "decoration-border-negative",
@@ -5150,6 +5333,7 @@ exports[`v2 > list of classes 1`] = `
   "subpixel-antialiased",
   "placeholder-background-secondary",
   "placeholder-background-tertiary",
+  "placeholder-background-overlay",
   "placeholder-background",
   "placeholder-container-hover",
   "placeholder-container-press",
@@ -5281,16 +5465,13 @@ exports[`v2 > list of classes 1`] = `
   "placeholder-text-on-hud-hover",
   "placeholder-text-on-hud-press",
   "placeholder-text-on-hud",
-  "placeholder-text-brand-premium-hover",
-  "placeholder-text-brand-premium-press",
-  "placeholder-text-brand-premium",
   "placeholder-text",
   "placeholder-border-hover",
   "placeholder-border-press",
-  "placeholder-border-secondary",
   "placeholder-border-focus-1",
   "placeholder-border-focus-2",
   "placeholder-border-focus-legacy",
+  "placeholder-border-secondary",
   "placeholder-border-disable",
   "placeholder-border-selected",
   "placeholder-border-negative",
@@ -5313,6 +5494,7 @@ exports[`v2 > list of classes 1`] = `
   "placeholder-opacity-100",
   "caret-background-secondary",
   "caret-background-tertiary",
+  "caret-background-overlay",
   "caret-background",
   "caret-container-hover",
   "caret-container-press",
@@ -5444,16 +5626,13 @@ exports[`v2 > list of classes 1`] = `
   "caret-text-on-hud-hover",
   "caret-text-on-hud-press",
   "caret-text-on-hud",
-  "caret-text-brand-premium-hover",
-  "caret-text-brand-premium-press",
-  "caret-text-brand-premium",
   "caret-text",
   "caret-border-hover",
   "caret-border-press",
-  "caret-border-secondary",
   "caret-border-focus-1",
   "caret-border-focus-2",
   "caret-border-focus-legacy",
+  "caret-border-secondary",
   "caret-border-disable",
   "caret-border-selected",
   "caret-border-negative",
@@ -5461,6 +5640,7 @@ exports[`v2 > list of classes 1`] = `
   "caret-border",
   "accent-background-secondary",
   "accent-background-tertiary",
+  "accent-background-overlay",
   "accent-background",
   "accent-container-hover",
   "accent-container-press",
@@ -5592,16 +5772,13 @@ exports[`v2 > list of classes 1`] = `
   "accent-text-on-hud-hover",
   "accent-text-on-hud-press",
   "accent-text-on-hud",
-  "accent-text-brand-premium-hover",
-  "accent-text-brand-premium-press",
-  "accent-text-brand-premium",
   "accent-text",
   "accent-border-hover",
   "accent-border-press",
-  "accent-border-secondary",
   "accent-border-focus-1",
   "accent-border-focus-2",
   "accent-border-focus-legacy",
+  "accent-border-secondary",
   "accent-border-disable",
   "accent-border-selected",
   "accent-border-negative",
@@ -5665,6 +5842,7 @@ exports[`v2 > list of classes 1`] = `
   "shadow-none",
   "shadow-background-secondary",
   "shadow-background-tertiary",
+  "shadow-background-overlay",
   "shadow-background",
   "shadow-container-hover",
   "shadow-container-press",
@@ -5796,16 +5974,13 @@ exports[`v2 > list of classes 1`] = `
   "shadow-text-on-hud-hover",
   "shadow-text-on-hud-press",
   "shadow-text-on-hud",
-  "shadow-text-brand-premium-hover",
-  "shadow-text-brand-premium-press",
-  "shadow-text-brand-premium",
   "shadow-text",
   "shadow-border-hover",
   "shadow-border-press",
-  "shadow-border-secondary",
   "shadow-border-focus-1",
   "shadow-border-focus-2",
   "shadow-border-focus-legacy",
+  "shadow-border-secondary",
   "shadow-border-disable",
   "shadow-border-selected",
   "shadow-border-negative",
@@ -5829,6 +6004,7 @@ exports[`v2 > list of classes 1`] = `
   "outline-offset-8",
   "outline-background-secondary",
   "outline-background-tertiary",
+  "outline-background-overlay",
   "outline-background",
   "outline-container-hover",
   "outline-container-press",
@@ -5960,16 +6136,13 @@ exports[`v2 > list of classes 1`] = `
   "outline-text-on-hud-hover",
   "outline-text-on-hud-press",
   "outline-text-on-hud",
-  "outline-text-brand-premium-hover",
-  "outline-text-brand-premium-press",
-  "outline-text-brand-premium",
   "outline-text",
   "outline-border-hover",
   "outline-border-press",
-  "outline-border-secondary",
   "outline-border-focus-1",
   "outline-border-focus-2",
   "outline-border-focus-legacy",
+  "outline-border-secondary",
   "outline-border-disable",
   "outline-border-selected",
   "outline-border-negative",
@@ -5984,6 +6157,7 @@ exports[`v2 > list of classes 1`] = `
   "ring-inset",
   "ring-background-secondary",
   "ring-background-tertiary",
+  "ring-background-overlay",
   "ring-background",
   "ring-container-hover",
   "ring-container-press",
@@ -6115,16 +6289,13 @@ exports[`v2 > list of classes 1`] = `
   "ring-text-on-hud-hover",
   "ring-text-on-hud-press",
   "ring-text-on-hud",
-  "ring-text-brand-premium-hover",
-  "ring-text-brand-premium-press",
-  "ring-text-brand-premium",
   "ring-text",
   "ring-border-hover",
   "ring-border-press",
-  "ring-border-secondary",
   "ring-border-focus-1",
   "ring-border-focus-2",
   "ring-border-focus-legacy",
+  "ring-border-secondary",
   "ring-border-disable",
   "ring-border-selected",
   "ring-border-negative",
@@ -6152,6 +6323,7 @@ exports[`v2 > list of classes 1`] = `
   "ring-offset-8",
   "ring-offset-background-secondary",
   "ring-offset-background-tertiary",
+  "ring-offset-background-overlay",
   "ring-offset-background",
   "ring-offset-container-hover",
   "ring-offset-container-press",
@@ -6283,16 +6455,13 @@ exports[`v2 > list of classes 1`] = `
   "ring-offset-text-on-hud-hover",
   "ring-offset-text-on-hud-press",
   "ring-offset-text-on-hud",
-  "ring-offset-text-brand-premium-hover",
-  "ring-offset-text-brand-premium-press",
-  "ring-offset-text-brand-premium",
   "ring-offset-text",
   "ring-offset-border-hover",
   "ring-offset-border-press",
-  "ring-offset-border-secondary",
   "ring-offset-border-focus-1",
   "ring-offset-border-focus-2",
   "ring-offset-border-focus-legacy",
+  "ring-offset-border-secondary",
   "ring-offset-border-disable",
   "ring-offset-border-selected",
   "ring-offset-border-negative",
diff --git a/packages/tailwind-config/src/index.ts b/packages/tailwind-config/src/index.ts
index c3a75d40f..833815283 100644
--- a/packages/tailwind-config/src/index.ts
+++ b/packages/tailwind-config/src/index.ts
@@ -21,6 +21,7 @@ import { colorsToTailwindConfig } from './colors/toTailwindConfig'
 import cssVariableColorPlugin from './colors/plugin'
 import cssVariableGradientPlugin from './gradient/plugin'
 import typographyPlugin from './typography/plugin'
+export { unstable_createTailwindConfigTokenV2 } from './tokenV2'
 
 interface Options {
   version?: TailwindVersion
diff --git a/packages/tailwind-config/src/v2.test.ts b/packages/tailwind-config/src/tokenV2.test.ts
similarity index 98%
rename from packages/tailwind-config/src/v2.test.ts
rename to packages/tailwind-config/src/tokenV2.test.ts
index 6002384eb..fc4e7aab6 100644
--- a/packages/tailwind-config/src/v2.test.ts
+++ b/packages/tailwind-config/src/tokenV2.test.ts
@@ -5,7 +5,7 @@ import light from '@charcoal-ui/theme/tokens/css-variables.json'
 import { TailwindConfig } from 'tailwindcss/tailwind-config'
 import { flattenKey, mapDefault } from './util'
 
-describe('v2', async () => {
+describe('tokenV2', async () => {
   const fontSize = Object.fromEntries(
     Object.entries(light.text['font-size']).flatMap(([k, v]) => {
       if (typeof v === 'string') {
diff --git a/packages/tailwind-config/src/tokenV2.ts b/packages/tailwind-config/src/tokenV2.ts
new file mode 100644
index 000000000..aeb2f0b39
--- /dev/null
+++ b/packages/tailwind-config/src/tokenV2.ts
@@ -0,0 +1,54 @@
+/* eslint-disable @typescript-eslint/no-unsafe-argument */
+/* eslint-disable @typescript-eslint/no-unsafe-assignment */
+/* eslint-disable @typescript-eslint/no-unsafe-member-access */
+import light from '@charcoal-ui/theme/tokens/css-variables.json'
+import { TailwindConfig } from 'tailwindcss/tailwind-config'
+import { flattenKey, mapDefault } from './util'
+
+export function unstable_createTailwindConfigTokenV2() {
+  const fontSize = Object.fromEntries(
+    Object.entries(light.text['font-size']).flatMap(([k, v]) => {
+      if (typeof v === 'string') {
+        return [
+          [
+            k,
+            [
+              (v),
+              // @ts-expect-error k should be keyof line-height
+              { lineHeight: (light.text['line-height'][k]) },
+            ],
+          ],
+        ]
+      }
+
+      return Object.entries(v as Record<string, string>).map(([kk, vv]) => {
+        return [
+          [k, kk].join('-'),
+          [
+            (vv),
+            // @ts-expect-error k should be keyof line-height
+            { lineHeight: (light.text['line-height'][k][kk]) },
+          ],
+        ]
+      })
+    })
+  )
+
+  const config: TailwindConfig = {
+    theme: {
+      colors: mapDefault(light.color),
+      spacing: flattenKey(light.space, (key) => key.includes('between')),
+      width: light['paragraph-width'],
+      borderWidth: flattenKey(light['border-width']),
+      borderRadius: Object.fromEntries(
+        Object.entries(light.radius).map(([k, v]) => [k, (v)])
+      ),
+      // @ts-expect-error FIXME
+      fontSize,
+      fontWeight: light.text['font-weight'],
+      darkMode: false,
+    },
+  }
+
+  return config
+}
diff --git a/packages/tailwind-config/src/util.ts b/packages/tailwind-config/src/util.ts
index bcb5faef5..adcca3379 100644
--- a/packages/tailwind-config/src/util.ts
+++ b/packages/tailwind-config/src/util.ts
@@ -90,11 +90,15 @@ export const flattenKey = <O extends object>(
   join?: (key: string) => boolean
 ) => {
   return Object.fromEntries(
-    // @ts-expect-error FIXME
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
     Object.entries(o).flatMap(([key, v]) => {
       if (typeof v === 'string') return [[key, v]]
       return Object.entries(v as object).map(([kk, vv]) => {
-        return [join?.(key) ?? true ? [key, kk].join('-') : kk, vv]
+        return [
+          join?.(key) ?? true ? [key, kk].join('-') : kk,
+          vv,
+        ]
       })
     })
   )
diff --git a/packages/tailwind-config/vitest.config.ts b/packages/tailwind-config/vitest.config.ts
index 874075f84..7447b8071 100644
--- a/packages/tailwind-config/vitest.config.ts
+++ b/packages/tailwind-config/vitest.config.ts
@@ -7,11 +7,5 @@ export default defineConfig({
     globals: true,
     environment: 'jsdom',
     setupFiles: ['../../vitest.setup.ts'],
-    // alias: [
-    //   {
-    //     find: /@charcoal-ui\/(.*)/,
-    //     replacement: path.join(path.resolve(__dirname, '..'), '$1', 'src'),
-    //   },
-    // ],
   },
 })
diff --git a/packages/theme/src/token-object/__snapshots__/token-object.test.ts.snap b/packages/theme/src/token-object/__snapshots__/token-object.test.ts.snap
index bc588756a..527f18309 100644
--- a/packages/theme/src/token-object/__snapshots__/token-object.test.ts.snap
+++ b/packages/theme/src/token-object/__snapshots__/token-object.test.ts.snap
@@ -1030,8 +1030,8 @@ exports[`createTokenObject test: dark theme > should match snapshot 1`] = `
       "paragraph": "16px",
     },
     "font-weight": {
-      "bold": "700px",
-      "regular": "400px",
+      "bold": "700",
+      "regular": "400",
     },
     "line-height": {
       "body": "24px",
@@ -1382,8 +1382,8 @@ exports[`createTokenObject test: light theme > should match snapshot 1`] = `
       "paragraph": "16px",
     },
     "font-weight": {
-      "bold": "700px",
-      "regular": "400px",
+      "bold": "700",
+      "regular": "400",
     },
     "line-height": {
       "body": "24px",
diff --git a/packages/theme/src/token-object/helpers/__snapshots__/changecase-keys.test.ts.snap b/packages/theme/src/token-object/helpers/__snapshots__/changecase-keys.test.ts.snap
index fc62ae08f..31198edb1 100644
--- a/packages/theme/src/token-object/helpers/__snapshots__/changecase-keys.test.ts.snap
+++ b/packages/theme/src/token-object/helpers/__snapshots__/changecase-keys.test.ts.snap
@@ -326,8 +326,8 @@ exports[`changeCaseKeys snapshot test: dark theme > camelcaseKeys snapshot test
       "paragraph": "16px",
     },
     "fontWeight": {
-      "bold": "700px",
-      "regular": "400px",
+      "bold": "700",
+      "regular": "400",
     },
     "lineHeight": {
       "body": "24px",
@@ -678,8 +678,8 @@ exports[`changeCaseKeys snapshot test: light theme > camelcaseKeys snapshot test
       "paragraph": "16px",
     },
     "fontWeight": {
-      "bold": "700px",
-      "regular": "400px",
+      "bold": "700",
+      "regular": "400",
     },
     "lineHeight": {
       "body": "24px",
diff --git a/vite.config.ts b/vite.config.ts
index f6bf762ac..cb8c26f08 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -2,24 +2,12 @@
 import { defineConfig } from 'vite'
 import react from '@vitejs/plugin-react'
 
-import * as path from 'node:path'
-
 export default defineConfig({
   plugins: [react()],
   test: {
     globals: true,
     environment: 'jsdom',
     setupFiles: ['./vitest.setup.ts'],
-    alias: [
-      {
-        find: /@charcoal-ui\/(.*)/,
-        replacement: path.join(
-          path.resolve(__dirname, 'packages'),
-          '$1',
-          'src'
-        ),
-      },
-    ],
     server: {
       deps: {
         inline: [