diff --git a/components/content/Alert.vue b/components/content/Alert.vue
index a4d4b62c1..173327a8a 100644
--- a/components/content/Alert.vue
+++ b/components/content/Alert.vue
@@ -14,11 +14,22 @@ defineProps({
 </script>
 
 <template>
-  <div class="alert mt-4 mb-4 rounded-xl px-4 py-3 text-sm leading-relaxed" :class="[type]">
-    <div class="flex items-start">
-      <div class="alert-content flex-grow">
-        <ContentSlot :use="$slots.default" unwrap="p" />
-      </div>
+  <div class="alert" :class="[type]">
+    <div class="alert-content">
+      <ContentSlot :use="$slots.default" unwrap="p" />
     </div>
   </div>
 </template>
+
+<style scoped lang="ts">
+css({
+  '.alert': {
+    my: '{space.4}',
+    borderRadius: '{radii.xl}',
+    px: '{space.4}',
+    py: '{space.3}',
+    fontSize: '{text.sm.fontSize}',
+    lineHeight: '{text.sm.lineHeight}',
+  }
+})
+</style>
\ No newline at end of file
diff --git a/components/content/Badge.vue b/components/content/Badge.vue
index 5d9ce6b2b..302dce0be 100644
--- a/components/content/Badge.vue
+++ b/components/content/Badge.vue
@@ -14,7 +14,22 @@ defineProps({
 </script>
 
 <template>
-  <span :class="[type]" class="inline-flex items-center px-3 py-1 text-base leading-5 tracking-tight rounded-full badge">
+  <span :class="[type]" class="badge">
     <ContentSlot :use="$slots.default" unwrap="p" />
   </span>
 </template>
+
+<style scoped lang="ts">
+css({
+  '.badge': {
+    display: 'inline-flex',
+    alignItems: 'center',
+    px: '{space.3}',
+    py: '{space.1}',
+    fontSize: '{text.base.fontSize}',
+    lineHeight: '{text.base.lineHeight}',
+    letterSpacing: '{letterSpacings.tight}',
+    borderRadius: '{radii.full}'
+  }
+})
+</style>
\ No newline at end of file
diff --git a/components/content/Callout.vue b/components/content/Callout.vue
index eeea79d3e..a44e2532e 100644
--- a/components/content/Callout.vue
+++ b/components/content/Callout.vue
@@ -27,8 +27,8 @@ const toggle = () => {
 </script>
 
 <template>
-  <div class="relative px-4 mt-4 mb-4 text-sm leading-relaxed callout rounded-xl" :class="[type]">
-    <span class="flex items-center justify-between" @click="toggle">
+  <div class="callout" :class="[type]">
+    <span class="preview" @click="toggle">
       <ContentSlot :use="$slots.summary" />
       <Icon
         name="heroicons-outline:chevron-right"
@@ -39,8 +39,29 @@ const toggle = () => {
       />
     </span>
 
-    <div v-show="isOpen" class="-mt-4">
+    <div v-show="isOpen" class="content">
       <ContentSlot :use="$slots.content" />
     </div>
   </div>
 </template>
+
+<style scoped lang="ts">
+css({
+  '.callout': {
+    position: 'relative',
+    px: '{space.4}',
+    my: '{space.4}',
+    fontSize: '{text.sm.fontSize}',
+    lineHeight: '{text.sm.lineHeight}',
+    borderRadius: '{radii.xl}',
+    '.preview': {
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'space-between'
+    },
+    '.content': {
+      marginTop: 'calc(0px - {space.4})'
+    }
+  }
+})
+</style>
diff --git a/components/content/Sandbox.vue b/components/content/Sandbox.vue
index a4beae052..5636166f6 100644
--- a/components/content/Sandbox.vue
+++ b/components/content/Sandbox.vue
@@ -60,7 +60,7 @@ onMounted(() => {
 </script>
 
 <template>
-  <div class="sandbox my-4 min-h-[500px] w-full">
+  <div class="sandbox">
     <TabsHeader v-if="!src" ref="tabs" :active-tab-index="activeTabIndex" :tabs="providersTabs" @update:active-tab-index="updateTab">
       <template #footer>
         <div class="absolute top-1/2 right-0 -translate-y-1/2 transform px-4">
@@ -76,16 +76,14 @@ onMounted(() => {
       :src="url"
       title="Sandbox editor"
       sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"
-      class="h-full min-h-[700px] w-full overflow-hidden"
     />
 
-    <span v-else class="flex-1 text-white">Loading Sandbox...</span>
+    <span v-else>Loading Sandbox...</span>
   </div>
 </template>
 
 <style lang="postcss" scoped>
 .sandbox {
-  @apply overflow-hidden rounded-lg bg-white text-3xl dark:bg-gray-900;
 
   iframe {
     @apply h-64 w-full overflow-hidden rounded-lg rounded-tl-none rounded-tr-none;
@@ -93,3 +91,27 @@ onMounted(() => {
   }
 }
 </style>
+
+<style scoped lang="ts">
+css({
+  '.sandbox': {
+    '--sandbox-height': '700px',
+    my: '{space.4}',
+    background: '{docus.surface.background.base}',
+    width: '100%',
+    height: 'var(--sandbox-height)',
+    overflow: 'hidden',
+    borderRadius: '{radii.xl}',
+    fontSize: '{text.3xl.fontSize}',
+    lineHeight: '{text.3xl.lineHeight}',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    iframe: {
+      width: '100%',
+      height: '100%',
+      overflow: 'hidden'
+    }
+  }
+})
+</style>
\ No newline at end of file
diff --git a/components/content/TabsHeader.vue b/components/content/TabsHeader.vue
index 8df730bc2..b6dc1a0ee 100644
--- a/components/content/TabsHeader.vue
+++ b/components/content/TabsHeader.vue
@@ -25,11 +25,7 @@ const updateHighlightUnderlinePosition = (activeTab) => {
   }
 
   highlightUnderline.value.style.left = `${activeTab.offsetLeft}px`
-  highlightUnderline.value.style.top = `${activeTab.offsetTop}px`
   highlightUnderline.value.style.width = `${activeTab.clientWidth}px`
-  highlightUnderline.value.style.height = `${activeTab.clientHeight}px`
-  highlightUnderline.value.style.transform = 'scale(1)'
-  highlightUnderline.value.style.opacity = 1
 }
 
 const updateTabs = ($event, i) => {
@@ -55,26 +51,21 @@ watch(
 </script>
 
 <template>
-  <div class="tabs-header relative bg-gray-800 text-white">
-    <div v-if="tabs" ref="tabsRef" class="relative z-0 px-2">
+  <div class="tabs-header">
+    <div v-if="tabs" ref="tabsRef" class="tabs">
       <button
         v-for="({ label }, i) in tabs"
         :key="`${i}${label}`"
-        class="xs:py-3 xs:my-0 relative my-2 rounded-lg px-2 py-1.5 font-mono text-sm tracking-tight focus:outline-none"
-        :class="[activeTabIndex === i ? 'text-white' : 'text-gray-200 hover:text-white']"
+        :class="[activeTabIndex === i ? 'active' : 'not-active']"
         @click="updateTabs($event, i)"
       >
         {{ label }}
       </button>
       <span
         ref="highlightUnderline"
-        class="highlight-underline xs:py-1.5 absolute -z-[1]"
-        :style="{
-          transform: `scale(0)`,
-          opacity: 0,
-        }"
+        class="highlight-underline"
       >
-        <span class="flex h-full w-full rounded-lg bg-gray-700 dark:bg-gray-900" />
+        <span class="flex h-full w-full bg-gray-700 dark:bg-gray-900" />
       </span>
     </div>
 
@@ -82,10 +73,47 @@ watch(
   </div>
 </template>
 
-<style lang="postcss" scoped>
-.highlight-underline {
-  /* bottom: -2px; */
-  /* height: 2px; */
-  transition: left 150ms, top 150ms, width 150ms, height 150ms, transform 100ms, opacity 100ms;
-}
-</style>
+<style scoped lang="ts">
+css({
+  ".tabs-header": {
+    // relative bg-gray-800 text-white
+    position: 'relative',
+    background: '{colors.gray.800}',
+    color: '{colors.white}',
+    '.tabs': {
+      //relative z-0 px-2
+      position: 'relative',
+      zIndex: 0,
+      px: '{space.2}',
+      button: {
+        py: '{space.3}',
+        px: '{space.4}',
+        position: 'relative',
+        fontFamily: '{font.mono}',
+        fontSize: '{text.sm.fontSize}',
+        lineHeight: '{text.sm.lineHeight}',
+        letterSpacing: '{letterSpacings.tight}',
+        userSelect: 'none',
+        transition: 'color 100ms, background 100ms',
+        '&.not-active': {
+          color: '{colors.gray.400}',
+          '&:hover': {
+            color: '{colors.gray.200}',
+            background: '{colors.gray.700}'
+          },
+        },
+        '&.active': {
+          color: '{colors.gray.100}'
+        }
+      },
+      '.highlight-underline': {
+        position: 'absolute',
+        zIndex: -1,
+        top: 0,
+        height: '100%',
+        transition: 'left 150ms, width 150ms'
+      }
+    }
+  }
+})
+</style>
\ No newline at end of file
diff --git a/components/content/VideoPlayer.vue b/components/content/VideoPlayer.vue
index 5ac5396e3..396abfc0c 100644
--- a/components/content/VideoPlayer.vue
+++ b/components/content/VideoPlayer.vue
@@ -36,10 +36,10 @@ const src = computed(() => props.src || props.sources?.[0]?.src || false)
 </script>
 
 <template>
-  <div class="relative inline-block my-4 overflow-hidden bg-black bg-opacity-25 rounded-lg video-player" :class="{ loaded }">
-    <NuxtImg v-if="provider ? provider.poster : poster" image-classes="video absolute top-0 left-0 h-full w-full object-fit" :src="(provider ? provider.poster : poster as any)" />
+  <div class="video-player" :class="{ loaded }">
+    <NuxtImg v-if="provider ? provider.poster : poster" :src="(provider ? provider.poster : poster as any)" />
 
-    <div v-if="loaded" class="absolute top-0 left-0 w-full h-full video">
+    <div v-if="loaded" class="loaded">
       <!-- Remote -->
       <video v-if="!provider" :poster="poster" controls autoplay>
         <source v-if="src" :src="src">
@@ -52,47 +52,65 @@ const src = computed(() => props.src || props.sources?.[0]?.src || false)
         allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
         allowfullscreen="true"
         :autoplay="autoplay"
-        class="w-full h-full"
         :src="provider.src"
       />
     </div>
 
-    <div v-if="!loaded" class="absolute top-0 left-0 w-full h-full cursor-pointer overlay" @click="loaded = true">
-      <button class="play" />
+    <div v-if="!loaded" class="play-button" @click="loaded = true">
+      <button />
     </div>
   </div>
 </template>
 
-<style scoped lang="postcss">
-.video-player {
-  &:after {
-    position: absolute;
-    content: ' ';
-    display: block;
-  }
-
-  .play {
-    width: 68px;
-    height: 48px;
-    position: absolute;
-    cursor: pointer;
-    transform: translate3d(-50%, -50%, 0);
-    top: 50%;
-    left: 50%;
-    z-index: 1;
-    background-color: transparent;
-    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 68 48"><path fill="%23f00" fill-opacity="0.8" d="M66.52,7.74c-0.78-2.93-2.49-5.41-5.42-6.19C55.79,.13,34,0,34,0S12.21,.13,6.9,1.55 C3.97,2.33,2.27,4.81,1.48,7.74C0.06,13.05,0,24,0,24s0.06,10.95,1.48,16.26c0.78,2.93,2.49,5.41,5.42,6.19 C12.21,47.87,34,48,34,48s21.79-0.13,27.1-1.55c2.93-0.78,4.64-3.26,5.42-6.19C67.94,34.95,68,24,68,24S67.94,13.05,66.52,7.74z"></path><path d="M 45,24 27,14 27,34" fill="%23fff"></path></svg>');
-    filter: grayscale(100%);
-    transition: filter 0.1s cubic-bezier(0, 0, 0.2, 1);
-    border: none;
-  }
-
-  &:hover .play {
-    filter: none;
+<style scoped lang="ts">
+css({
+  '.video-player': {
+    position: 'relative',
+    display: 'inline-block',
+    my: '{space.4}',
+    overflow: 'hidden',
+    background: '{colors.gray.900}',
+    borderRadius: '{radii.lg}',
+    '.loaded': {
+      position: 'absolute',
+      top: 0,
+      left: 0,
+      width: '100%',
+      height: '100%',
+    },
+    video: {
+      width: '100%'
+    },
+    iframe: {
+      width: '100%',
+      height: '100%',
+    },
+    '.play-button': {
+      position: 'absolute',
+      top: 0,
+      left: 0,
+      width: '100%',
+      height: '100%',
+      cursor: 'pointer',
+      button: {
+        position: 'absolute',
+        transform: 'translate3d(-50%, -50%, 0)',
+        top: '50%',
+        left: '50%',
+        zIndex: 1,
+        width: '{space.24}',
+        height: '{space.24}',
+        filter: 'grayscale(100%)',
+        transition: 'filter 0.1s cubic-bezier(0, 0, 0.2, 1)',
+        backgroundPosition: 'center',
+        backgroundRepeat: 'no-repeat',
+        backgroundColor: 'transparent',
+        backgroundImage: `url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 68 48"><path fill="%23f00" fill-opacity="0.8" d="M66.52,7.74c-0.78-2.93-2.49-5.41-5.42-6.19C55.79,.13,34,0,34,0S12.21,.13,6.9,1.55 C3.97,2.33,2.27,4.81,1.48,7.74C0.06,13.05,0,24,0,24s0.06,10.95,1.48,16.26c0.78,2.93,2.49,5.41,5.42,6.19 C12.21,47.87,34,48,34,48s21.79-0.13,27.1-1.55c2.93-0.78,4.64-3.26,5.42-6.19C67.94,34.95,68,24,68,24S67.94,13.05,66.52,7.74z"></path><path d="M 45,24 27,14 27,34" fill="%23fff"></path></svg>')`
+      },
+      '&:hover button': {
+        filter: 'none'
+      }
+    }
   }
-}
-
-video {
-  @apply w-full;
-}
-</style>
+})
+</style>
\ No newline at end of file
diff --git a/package.json b/package.json
index 183047a4f..348ae21ee 100644
--- a/package.json
+++ b/package.json
@@ -20,13 +20,13 @@
     "@nuxt/content": "^2.2.1",
     "@nuxtjs/algolia": "^1.1.4",
     "@nuxtjs/color-mode": "^3.1.8",
-    "@nuxtjs/tailwindcss": "^6.1.2",
+    "@nuxtjs/tailwindcss": "^6.1.3",
     "@tailwindcss/aspect-ratio": "^0.4.2",
     "@tailwindcss/forms": "^0.5.3",
     "@tailwindcss/line-clamp": "^0.4.2",
-    "@tailwindcss/typography": "^0.5.7",
-    "@vueuse/core": "^9.4.0",
-    "@vueuse/nuxt": "^9.4.0",
+    "@tailwindcss/typography": "^0.5.8",
+    "@vueuse/core": "^9.5.0",
+    "@vueuse/nuxt": "^9.5.0",
     "pinceau": "latest",
     "socket.io-client": "^4.5.3",
     "vue-plausible": "^1.3.2"
@@ -35,15 +35,15 @@
     "@algolia/client-search": "^4.14.2",
     "@docsearch/css": "^3.3.0",
     "@docsearch/js": "^3.3.0",
-    "@nuxthq/studio": "^0.1.3",
+    "@nuxthq/studio": "^0.2.2",
     "@nuxtjs/algolia": "^1.1.4",
     "@nuxtjs/eslint-config-typescript": "^11.0.0",
     "@nuxtlabs/github-module": "npm:@nuxtlabs/github-module-edge@latest",
-    "eslint": "^8.26.0",
+    "eslint": "^8.27.0",
     "nuxt": "3.0.0-rc.12",
-    "tailwindcss": "^3.2.1",
+    "tailwindcss": "^3.2.3",
     "typescript": "^4.8.4",
-    "vue": "^3.2.41"
+    "vue": "^3.2.44"
   },
   "pnpm": {
     "peerDependencyRules": {
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 47de6db1d..0722da890 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -7,25 +7,25 @@ specifiers:
   '@fontsource/inter': ^4.5.14
   '@iconify/vue': ^4.0.0
   '@nuxt/content': ^2.2.1
-  '@nuxthq/studio': ^0.1.3
+  '@nuxthq/studio': ^0.2.2
   '@nuxtjs/algolia': ^1.1.4
   '@nuxtjs/color-mode': ^3.1.8
   '@nuxtjs/eslint-config-typescript': ^11.0.0
-  '@nuxtjs/tailwindcss': ^6.1.2
+  '@nuxtjs/tailwindcss': ^6.1.3
   '@nuxtlabs/github-module': npm:@nuxtlabs/github-module-edge@latest
   '@tailwindcss/aspect-ratio': ^0.4.2
   '@tailwindcss/forms': ^0.5.3
   '@tailwindcss/line-clamp': ^0.4.2
-  '@tailwindcss/typography': ^0.5.7
-  '@vueuse/core': ^9.4.0
-  '@vueuse/nuxt': ^9.4.0
-  eslint: ^8.26.0
+  '@tailwindcss/typography': ^0.5.8
+  '@vueuse/core': ^9.5.0
+  '@vueuse/nuxt': ^9.5.0
+  eslint: ^8.27.0
   nuxt: 3.0.0-rc.12
   pinceau: latest
   socket.io-client: ^4.5.3
-  tailwindcss: ^3.2.1
+  tailwindcss: ^3.2.3
   typescript: ^4.8.4
-  vue: ^3.2.41
+  vue: ^3.2.44
   vue-plausible: ^1.3.2
 
 dependencies:
@@ -43,13 +43,13 @@ dependencies:
   '@tailwindcss/typography': 0.5.8_tailwindcss@3.2.3
   '@vueuse/core': 9.5.0_vue@3.2.44
   '@vueuse/nuxt': 9.5.0_7xmarobtbefjyqzbu4cikwbooq
-  pinceau: 0.6.15
+  pinceau: 0.6.16
   socket.io-client: 4.5.3
   vue-plausible: 1.3.2
 
 devDependencies:
   '@algolia/client-search': 4.14.2
-  '@nuxthq/studio': 0.1.5_typescript@4.8.4
+  '@nuxthq/studio': 0.2.2_typescript@4.8.4
   '@nuxtjs/eslint-config-typescript': 11.0.0_rmayb2veg2btbq6mbmnyivgasy
   '@nuxtlabs/github-module': /@nuxtlabs/github-module-edge/1.3.1-27629534.edb1935
   eslint: 8.27.0
@@ -932,13 +932,13 @@ packages:
       - vls
       - vti
 
-  /@nuxthq/studio/0.1.5_typescript@4.8.4:
-    resolution: {integrity: sha512-j+9MmgHhYUy4+74xLX6nvgP7yDPjPnUqOOxRvZrpk2Lud4i39sAZdW7/k+nfOSf2sGtbnBBMEi2oeGRpEeGf0w==}
+  /@nuxthq/studio/0.2.2_typescript@4.8.4:
+    resolution: {integrity: sha512-1pQ7A8f3sP2YN1/b5e9GsBJdvLVU4qhRSl3D4KFKfi/L+QmY0+Je+L7fRIZIhlc0gSn3IyZGvOw8l28/svG66w==}
     dependencies:
       '@nuxt/kit': 3.0.0-rc.13
       '@nuxt/schema': 3.0.0-rc.13
       defu: 6.1.0
-      nuxt-component-meta: 0.2.3_typescript@4.8.4
+      nuxt-component-meta: 0.3.3_typescript@4.8.4
       socket.io-client: 4.5.3
       ufo: 0.8.6
     transitivePeerDependencies:
@@ -1732,43 +1732,17 @@ packages:
       vite: 3.1.8
       vue: 3.2.44
 
-  /@volar/code-gen/0.40.13:
-    resolution: {integrity: sha512-4gShBWuMce868OVvgyA1cU5WxHbjfEme18Tw6uVMfweZCF5fB2KECG0iPrA9D54vHk3FeHarODNwgIaaFfUBlA==}
-    dependencies:
-      '@volar/source-map': 0.40.13
-    dev: true
-
   /@volar/language-core/1.0.9:
     resolution: {integrity: sha512-5Fty3slLet6svXiJw2YxhYeo6c7wFdtILrql5bZymYLM+HbiZtJbryW1YnUEKAP7MO9Mbeh+TNH4Z0HFxHgIqw==}
     dependencies:
       '@volar/source-map': 1.0.9
       '@vue/reactivity': 3.2.44
       muggle-string: 0.1.0
-    dev: false
-
-  /@volar/source-map/0.40.13:
-    resolution: {integrity: sha512-dbdkAB2Nxb0wLjAY5O64o3ywVWlAGONnBIoKAkXSf6qkGZM+nJxcizsoiI66K+RHQG0XqlyvjDizfnTxr+6PWg==}
-    dependencies:
-      '@vue/reactivity': 3.2.38
-    dev: true
 
   /@volar/source-map/1.0.9:
     resolution: {integrity: sha512-fazB/vy5ZEJ3yKx4fabJyGNI3CBkdLkfEIRVu6+1P3VixK0Mn+eqyUIkLBrzGYaeFM3GybhCLCvsVdNz0Fu/CQ==}
     dependencies:
       muggle-string: 0.1.0
-    dev: false
-
-  /@volar/vue-language-core/0.40.13:
-    resolution: {integrity: sha512-QkCb8msi2KUitTdM6Y4kAb7/ZlEvuLcbBFOC2PLBlFuoZwyxvSP7c/dBGmKGtJlEvMX0LdCyrg5V2aBYxD38/Q==}
-    dependencies:
-      '@volar/code-gen': 0.40.13
-      '@volar/source-map': 0.40.13
-      '@vue/compiler-core': 3.2.44
-      '@vue/compiler-dom': 3.2.44
-      '@vue/compiler-sfc': 3.2.44
-      '@vue/reactivity': 3.2.44
-      '@vue/shared': 3.2.44
-    dev: true
 
   /@volar/vue-language-core/1.0.9:
     resolution: {integrity: sha512-tofNoR8ShPFenHT1YVMuvoXtXWwoQE+fiXVqSmW0dSKZqEDjWQ3YeXSd0a6aqyKaIbvR7kWWGp34WbpQlwf9Ww==}
@@ -1781,7 +1755,6 @@ packages:
       '@vue/shared': 3.2.44
       minimatch: 5.1.0
       vue-template-compiler: 2.7.14
-    dev: false
 
   /@vue/babel-helper-vue-transform-on/1.0.2:
     resolution: {integrity: sha512-hz4R8tS5jMn8lDq6iD+yWL6XNB699pGIVLk7WSJnn1dbpjaazsjZQkieJoRX6gW5zpYSCFqQ7jUquPNY65tQYA==}
@@ -1848,12 +1821,6 @@ packages:
       estree-walker: 2.0.2
       magic-string: 0.25.9
 
-  /@vue/reactivity/3.2.38:
-    resolution: {integrity: sha512-6L4myYcH9HG2M25co7/BSo0skKFHpAN8PhkNPM4xRVkyGl1K5M3Jx4rp5bsYhvYze2K4+l+pioN4e6ZwFLUVtw==}
-    dependencies:
-      '@vue/shared': 3.2.38
-    dev: true
-
   /@vue/reactivity/3.2.44:
     resolution: {integrity: sha512-Fe0s52fTsPl+RSdvoqUZ3HRKlaVsKhIh1mea5EWOedFvZCjnymzlj3YC1wZMxi89qXRFSdEASVA/BWUGypk0Ig==}
     dependencies:
@@ -1881,10 +1848,6 @@ packages:
       '@vue/shared': 3.2.44
       vue: 3.2.44
 
-  /@vue/shared/3.2.38:
-    resolution: {integrity: sha512-dTyhTIRmGXBjxJE+skC8tTWCGLCVc4wQgRRLt8+O9p5ewBAjoBwtCAkLPrtToSr1xltoe3st21Pv953aOZ7alg==}
-    dev: true
-
   /@vue/shared/3.2.44:
     resolution: {integrity: sha512-mGZ44bnn0zpZ36nXtxbrBPno43yr96wjQE1dBEKS1Sieugt27HS4OGZVBRIgsdGzosB7vqZAvu0ttu1FDVdolA==}
 
@@ -2837,7 +2800,6 @@ packages:
 
   /de-indent/1.0.2:
     resolution: {integrity: sha512-e/1zu3xH5MQryN2zdVaF0OrdNLUbvWxzMbi+iNA6Bky7l1RoP8a2fIbRocyHclXt/arDrrR6lL3TqFD9pMQTsg==}
-    dev: false
 
   /debug/2.6.9:
     resolution: {integrity: sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==}
@@ -4472,7 +4434,6 @@ packages:
   /he/1.2.0:
     resolution: {integrity: sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==}
     hasBin: true
-    dev: false
 
   /header-case/2.0.4:
     resolution: {integrity: sha512-H/vuk5TEEVZwrR0lp2zed9OCo1uAILMlx0JEMgC26rzyJJ3N1v6XkwHHXJQdR2doSjcGPM6OKPYoJgf0plJ11Q==}
@@ -5826,7 +5787,6 @@ packages:
 
   /muggle-string/0.1.0:
     resolution: {integrity: sha512-Tr1knR3d2mKvvWthlk7202rywKbiOm4rVFLsfAaSIhJ6dt9o47W4S+JMtWhd/PW9Wrdew2/S2fSvhz3E2gkfEg==}
-    dev: false
 
   /mute-stream/0.0.8:
     resolution: {integrity: sha512-nnbWWOkoWyUsTjKrhgD0dcz22mdkSnpYqbEjIm2nhwhuxlSkpywJmBo8h0ZqJdkp73mb90SssHkN4rsRaBAfAA==}
@@ -6034,12 +5994,12 @@ packages:
     optionalDependencies:
       fsevents: 2.3.2
 
-  /nuxt-component-meta/0.2.3_typescript@4.8.4:
-    resolution: {integrity: sha512-XbdpVQheHx1acwI6ddqli8EXc8EK5W2Eo/urYX3tRHVuEsdvzy4BQzjtToQEZICXD8mLiD5uupLmZI78zHjdqQ==}
+  /nuxt-component-meta/0.3.3_typescript@4.8.4:
+    resolution: {integrity: sha512-TPeNnK6Uofr6ygbfqwVjbh3M0huqpLBsJP+HsHPjp31jqzuOW/mQboKcPfRLiMFPURPXoQZJRQYIdKcqtRZcRA==}
     dependencies:
       '@nuxt/kit': 3.0.0-rc.13
       scule: 0.3.2
-      vue-component-meta: 0.40.13_typescript@4.8.4
+      vue-component-meta: 1.0.9_typescript@4.8.4
     transitivePeerDependencies:
       - rollup
       - supports-color
@@ -6381,8 +6341,8 @@ packages:
     resolution: {integrity: sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==}
     engines: {node: '>=0.10.0'}
 
-  /pinceau/0.6.15:
-    resolution: {integrity: sha512-9Jhk6C7ZS9Grs/0AwGLN2SUFOvHH1AdOZZu3wQWHc0A46gBpHrU9gr32LVU0Jtl+/jI58Lt02m5DMVj3sySbVw==}
+  /pinceau/0.6.16:
+    resolution: {integrity: sha512-ADRX2VHFv5RqCzV/WDLrlhxx9TCaRfUhmBeHGFRXs47vdkaq1SfqGPhh/+J1KDrLbO+EH32KqpPRpv5iJ6O+dw==}
     dependencies:
       '@unocss/reset': 0.46.4
       '@volar/vue-language-core': 1.0.9
@@ -8132,6 +8092,10 @@ packages:
       mime-types: 2.1.35
     dev: false
 
+  /typesafe-path/0.2.2:
+    resolution: {integrity: sha512-OJabfkAg1WLZSqJAJ0Z6Sdt3utnbzr/jh+NAHoyWHJe8CMSy79Gm085094M9nvTPy22KzTVn5Zq5mbapCI/hPA==}
+    dev: true
+
   /typescript/4.8.4:
     resolution: {integrity: sha512-QCh+85mCy+h0IGff8r5XWzOVSbBO+KfeYrMQh7NJ58QujwcE22u+NUSmUxqF+un70P9GXKxa2HCNiTTMJknyjQ==}
     engines: {node: '>=4.2.0'}
@@ -8558,12 +8522,14 @@ packages:
     dependencies:
       ufo: 0.8.6
 
-  /vue-component-meta/0.40.13_typescript@4.8.4:
-    resolution: {integrity: sha512-/VZK/GvqvdWrBeZVa7bZhBEf5FrOKwAe5Y8B66vR81pkUGYOVXHn3kTZMl8yX52F2HzvO6hy55EcElgqAjSi4A==}
+  /vue-component-meta/1.0.9_typescript@4.8.4:
+    resolution: {integrity: sha512-uJmfospCBGdDKtSIpmtBrw1L960IxQBJADu4SigVA/lbYGhgZXYQjBBTdxzGx2tFlR6bDrj/a3H53lEv5ZxNzQ==}
     peerDependencies:
       typescript: '*'
     dependencies:
-      '@volar/vue-language-core': 0.40.13
+      '@volar/language-core': 1.0.9
+      '@volar/vue-language-core': 1.0.9
+      typesafe-path: 0.2.2
       typescript: 4.8.4
     dev: true
 
@@ -8640,7 +8606,6 @@ packages:
     dependencies:
       de-indent: 1.0.2
       he: 1.2.0
-    dev: false
 
   /vue/3.2.44:
     resolution: {integrity: sha512-nyNtFDh+0TpRgYCUVfPD1mJ9PpIsCPXaOF4DeGNIT5vQ4X23ykflGq3Sy2P+tEt1/pQZxZnAysuRKwyhNj+Cjw==}
diff --git a/tokens.config.ts b/tokens.config.ts
index b162ebf73..a1bc9b0e5 100644
--- a/tokens.config.ts
+++ b/tokens.config.ts
@@ -1,6 +1,32 @@
 import { defineTheme } from 'pinceau'
 
 export default defineTheme({
+  utils: {
+    my: (value) => {
+      return {
+        marginTop: value,
+        marginBottom: value,
+      }
+    },
+    mx: (value) => {
+      return {
+        marginLeft: value,
+        marginRight: value,
+      }
+    },
+    py: (value) => {
+      return {
+        paddingTop: value,
+        paddingBottom: value,
+      }
+    },
+    px: (value) => {
+      return {
+        paddingLeft: value,
+        paddingRight: value,
+      }
+    }
+  },
   docus: {
     page: {
       height:
@@ -9,6 +35,14 @@ export default defineTheme({
     },
     header: { height: '64px' },
     footer: { height: '50px' },
+    surface: {
+      background: {
+        base: {
+          initial: '{colors.gray.100}',
+          dark: '{colors.gray.900}',
+        }
+      }
+    },
     text: {
       color: {
         primary: {
@@ -504,40 +538,9 @@ export default defineTheme({
     }
   },
   font: {
-    sans: [
-      'ui-sans-serif',
-      'system-ui',
-      '-apple-system',
-      'BlinkMacSystemFont',
-      'Segoe UI',
-      'Roboto',
-      'Helvetica Neue',
-      'Arial',
-      'Noto Sans',
-      'sans-serif',
-      'Apple Color Emoji',
-      'Segoe UI Emoji',
-      'Segoe UI Symbol',
-      'Noto Color Emoji'
-    ],
-    serif: [
-      'ui-serif',
-      'Georgia',
-      'Cambria',
-      'Times New Roman',
-      'Times',
-      'serif'
-    ],
-    mono: [
-      'ui-monospace',
-      'SFMono-Regular',
-      'Menlo',
-      'Monaco',
-      'Consolas',
-      'Liberation Mono',
-      'Courier New',
-      'monospace'
-    ]
+    sans: 'ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji',
+    serif: 'ui-serif, Georgia, Cambria, Times New Roman, Times, serif',
+    mono: 'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace'
   },
   fontSizes: {
     xs: '0.75rem',
@@ -605,6 +608,10 @@ export default defineTheme({
       fontSize: '{fontSizes.sm}',
       lineHeight: '{leads.5}'
     },
+    base: {
+      fontSize: '{fontSizes.base}',
+      lineHeight: '{leads.6}'
+    },
     lg: {
       fontSize: '{fontSizes.lg}',
       lineHeight: '{leads.7}'