diff --git a/apps/lp/app/components/BlogPost.vue b/apps/lp/app/components/BlogPost.vue
index 2580914c..16853584 100644
--- a/apps/lp/app/components/BlogPost.vue
+++ b/apps/lp/app/components/BlogPost.vue
@@ -37,13 +37,13 @@ const formatDate = (dateString: string) => {
         </NuxtImg>
         <div class="flex flex-col justify-around gap-1">
           <div class="flex flex-col gap-1">
-            <span class="text-xs font-medium text-neutral-500">
+            <span class="text-xs font-medium text-(--ui-text-muted)">
               {{ formatDate(post.date) }}
             </span>
             <h2 class="text-xl font-bold text-(--ui-primary)">
               {{ post.title }}
             </h2>
-            <p class="text-neutral-500">
+            <p class="text-(--ui-text-muted)">
               {{ post.description }}
             </p>
           </div>
diff --git a/apps/lp/app/components/Header.vue b/apps/lp/app/components/Header.vue
index 7e6a8381..d3d55644 100644
--- a/apps/lp/app/components/Header.vue
+++ b/apps/lp/app/components/Header.vue
@@ -21,7 +21,7 @@ defineShortcuts({
 <template>
   <UHeader class="bg-white dark:bg-neutral-950" :ui="{ left: 'min-w-0' }" mode="drawer" :menu="{ shouldScaleBackground: true }">
     <template #left>
-      <Logo lp /> <span class="text-xs font-mono text-neutral-500">| v{{ version }}</span>
+      <Logo lp /> <span class="text-xs font-mono text-(--ui-text-muted)">| v{{ version }}</span>
     </template>
 
     <UContentSearchButton label="Search or ⌘K..." icon="lucide:search" variant="subtle" size="sm" class="w-[300px]" />
diff --git a/apps/lp/app/components/landing/Faq.vue b/apps/lp/app/components/landing/Faq.vue
index c5e61b05..a3bac1dd 100644
--- a/apps/lp/app/components/landing/Faq.vue
+++ b/apps/lp/app/components/landing/Faq.vue
@@ -12,7 +12,7 @@ defineProps<{
       <h3 class="main-gradient text-3xl">
         <ScrambleText :label="faq.title" />
       </h3>
-      <p class="max-w-lg text-center text-sm text-neutral-500 sm:text-base">
+      <p class="max-w-lg text-center text-sm text-(--ui-text-muted) sm:text-base">
         {{ faq.description }}
       </p>
       <UButton :to="faq.cta.to" :label="faq.cta.label" size="sm" class="mt-2" />
diff --git a/apps/lp/app/components/landing/Features.vue b/apps/lp/app/components/landing/Features.vue
index a1ba0866..39057fc9 100644
--- a/apps/lp/app/components/landing/Features.vue
+++ b/apps/lp/app/components/landing/Features.vue
@@ -12,7 +12,7 @@ defineProps<{
       <h3 class="main-gradient  text-3xl">
         <ScrambleText :label="features.title" />
       </h3>
-      <p class="max-w-lg text-pretty text-center text-sm text-neutral-500 sm:text-base">
+      <p class="max-w-lg text-pretty text-center text-sm text-(--ui-text-muted) sm:text-base">
         {{ features.description }}
       </p>
     </div>
diff --git a/apps/lp/app/components/landing/Stats.vue b/apps/lp/app/components/landing/Stats.vue
index b1d4ef44..082c2423 100644
--- a/apps/lp/app/components/landing/Stats.vue
+++ b/apps/lp/app/components/landing/Stats.vue
@@ -64,7 +64,7 @@ const finalStats = computed(() => [
           <NuxtLink
             to="https://github.com/HugoRCD/nuxt-visitors"
             target="_blank"
-            class="text-neutral-500 text-xs w-fit flex justify-center items-center gap-2 cursor-pointer hover:text-neutral-200 transition-colors duration-300"
+            class="text-(--ui-text-muted) text-xs w-fit flex justify-center items-center gap-2 cursor-pointer hover:text-neutral-200 transition-colors duration-300"
           >
             <span class="relative flex size-2">
               <span
@@ -92,7 +92,7 @@ const finalStats = computed(() => [
       <h3 class="main-gradient italic text-3xl leading-8">
         <ScrambleText label="Built for speed" />
       </h3>
-      <p class="flex gap-2 italic items-center text-pretty text-center text-neutral-500">
+      <p class="flex gap-2 italic items-center text-pretty text-center text-(--ui-text-muted)">
         {{ !isLoading ? ' Stats are updated in real-time.' : `Loading stats${loadingDots}` }}
       </p>
     </div>
@@ -122,12 +122,12 @@ const finalStats = computed(() => [
             will-change
           />
         </div>
-        <dd class="text-sm font-mono text-neutral-500">
+        <dd class="text-sm font-mono text-(--ui-text-muted)">
           {{ stat.label }}
         </dd>
       </UPageCard>
     </dl>
-    <span class="text-xs text-neutral-500 text-center mt-4 block">
+    <span class="text-xs text-(--ui-text-muted) text-center mt-4 block">
       Saved time is calculated by comparing manual env file sharing (5min) vs Shelve operations (5s).
     </span>
   </div>
diff --git a/apps/lp/app/components/layout/Footer.vue b/apps/lp/app/components/layout/Footer.vue
index 78d1968a..03601997 100644
--- a/apps/lp/app/components/layout/Footer.vue
+++ b/apps/lp/app/components/layout/Footer.vue
@@ -99,7 +99,7 @@ const columns = ref([
 
 
     <template #left>
-      <div class="text-xs font-mono italic tracking-tight text-neutral-500">
+      <div class="text-xs font-mono italic tracking-tight text-(--ui-text-muted)">
         © {{ new Date().getFullYear() }} - Made by <NuxtLink to="https://hrcd.fr/" class="text-neutral-400 hover:text-neutral-200">
           HugoRCD
         </NuxtLink>
diff --git a/apps/lp/app/error.vue b/apps/lp/app/error.vue
index ebcc5ceb..b18bbe88 100644
--- a/apps/lp/app/error.vue
+++ b/apps/lp/app/error.vue
@@ -27,7 +27,7 @@ const goBack = () => {
         <h1 class="font-newsreader text-4xl font-light italic">
           Looks like you're lost
         </h1>
-        <p class="font-geist text-sm text-neutral-500">
+        <p class="font-geist text-sm text-(--ui-text-muted)">
           The page you're looking for doesn't exist
         </p>
       </div>
@@ -35,7 +35,7 @@ const goBack = () => {
         <h1 class="font-newsreader text-4xl font-light italic">
           An error occurred
         </h1>
-        <p class="font-geist text-sm text-neutral-500">
+        <p class="font-geist text-sm text-(--ui-text-muted)">
           Refresh the page or try again later
         </p>
       </div>
diff --git a/apps/lp/app/pages/about.vue b/apps/lp/app/pages/about.vue
index 03415916..905dfc8b 100644
--- a/apps/lp/app/pages/about.vue
+++ b/apps/lp/app/pages/about.vue
@@ -19,7 +19,7 @@ const { data } = await useAsyncData('about', () => {
             <div class="p-8 pointer-events-auto flex flex-col items-center justify-center">
               <ParticlesImg src="/shelve.svg" alt="Shelve Logo" :max-width="200" />
               <ScrambleText class="mt-8 mb-2 main-gradient text-4xl sm:text-5xl" label="About Shelve" />
-              <p class="max-w-lg text-center text-xs text-neutral-500 sm:text-base">
+              <p class="max-w-lg text-center text-xs text-(--ui-text-muted) sm:text-base">
                 Discover the story behind the project, its origins, and the journey to where we are today.
               </p>
             </div>
@@ -44,7 +44,7 @@ const { data } = await useAsyncData('about', () => {
             </div>
             <div class="col-span-7">
               <div class="space-y-3 mb-16">
-                <div class="text-neutral-500 text-center sm:text-left font-mono italic">
+                <div class="text-(--ui-text-muted) text-center sm:text-left font-mono italic">
                   Part {{ index + 1 < 10 ? '0' + (index + 1) : index + 1 }}
                 </div>
                 <h2 class="text-4xl sm:text-5xl text-center sm:text-left font-serif italic">
diff --git a/apps/lp/app/pages/blog/[...slug].vue b/apps/lp/app/pages/blog/[...slug].vue
index 8b0ffc21..c5b7cee0 100644
--- a/apps/lp/app/pages/blog/[...slug].vue
+++ b/apps/lp/app/pages/blog/[...slug].vue
@@ -39,7 +39,7 @@ const editThisPage = computed(() => ({
     <ShelveMeta :default-og-image="false" :title="page?.title" :description="page?.description" />
     <UContainer class="relative min-h-screen bg-neutral-50 dark:bg-neutral-900 px-4 sm:px-6 pt-6 border-x border-t border-neutral-200 dark:border-neutral-800 rounded-t-sm shadow-sm">
       <UPage v-if="page">
-        <NuxtLink to="/blog" class="font-mono text-sm flex items-center gap-1 text-neutral-500 hover:text-neutral-50 transition-colors duration-200">
+        <NuxtLink to="/blog" class="font-mono text-sm flex items-center gap-1 text-(--ui-text-muted) hover:text-neutral-50 transition-colors duration-200">
           <UIcon name="lucide:chevron-left" />
           Blog
         </NuxtLink>
@@ -47,7 +47,7 @@ const editThisPage = computed(() => ({
           <h1 class="text-4xl font-bold">
             {{ page.title }}
           </h1>
-          <p class="text-neutral-500">
+          <p class="text-(--ui-text-muted)">
             {{ page.description }}
           </p>
           <div class="flex items-center gap-2 mt-2">
diff --git a/apps/lp/app/pages/docs/[...slug].vue b/apps/lp/app/pages/docs/[...slug].vue
index 54c743b7..f6ab05f3 100644
--- a/apps/lp/app/pages/docs/[...slug].vue
+++ b/apps/lp/app/pages/docs/[...slug].vue
@@ -63,7 +63,7 @@ const communityLinks = computed(() => [
         </template>
 
         <template #description>
-          <p class="text-neutral-500">
+          <p class="text-(--ui-text-muted)">
             {{ page.description }}
           </p>
         </template>
diff --git a/apps/lp/package.json b/apps/lp/package.json
index a1eca360..00c6cf8e 100644
--- a/apps/lp/package.json
+++ b/apps/lp/package.json
@@ -12,7 +12,8 @@
     "postinstall": "nuxt prepare",
     "lint": "eslint .",
     "lint:fix": "eslint --fix .",
-    "typecheck": "tsc --noEmit"
+    "typecheck": "tsc --noEmit",
+    "deploy": "nuxthub deploy"
   },
   "dependencies": {
     "@iconify-json/heroicons": "1.2.2",
diff --git a/apps/shelve/app/components/CliInstall.vue b/apps/shelve/app/components/CliInstall.vue
index d0881b44..7f573825 100644
--- a/apps/shelve/app/components/CliInstall.vue
+++ b/apps/shelve/app/components/CliInstall.vue
@@ -62,7 +62,7 @@ function copy(value: string) {
       <h2 class="text-sm font-semibold">
         Install the Shelve CLI
       </h2>
-      <p class="text-sm leading-6 dark:text-neutral-400 text-neutral-500">
+      <p class="text-sm leading-6 text-(--ui-text-muted)">
         In order to fully utilize Shelve, you need to install the Shelve CLI.
       </p>
       <UTabs color="neutral" variant="link" :items class="w-full">
diff --git a/apps/shelve/app/components/layout/Sidebar/Content.vue b/apps/shelve/app/components/layout/Sidebar/Content.vue
index 5429aa03..b99cc1cb 100644
--- a/apps/shelve/app/components/layout/Sidebar/Content.vue
+++ b/apps/shelve/app/components/layout/Sidebar/Content.vue
@@ -52,7 +52,7 @@ watch(() => route.path, handleProjectNavigation, { immediate: true })
 
     <!-- Team -->
     <div class="flex flex-col gap-2">
-      <div class="text-xs font-medium text-neutral-500 dark:text-neutral-400">
+      <div class="text-xs font-medium text-(--ui-text-muted)">
         Team
       </div>
       <div class="flex flex-col gap-2">
@@ -64,7 +64,7 @@ watch(() => route.path, handleProjectNavigation, { immediate: true })
 
     <div v-if="user" class="flex flex-col gap-2">
       <USeparator class="my-3" />
-      <div class="text-xs font-medium text-neutral-500 dark:text-neutral-400">
+      <div class="text-xs font-medium text-(--ui-text-muted)">
         User
       </div>
       <LayoutNavItem v-for="nav in userNavigations" :key="nav.name" :active="nav.path === route.path || nav.name === route.name" :nav-item="nav" />
@@ -73,7 +73,7 @@ watch(() => route.path, handleProjectNavigation, { immediate: true })
     <!-- Admin -->
     <div v-if="user && user.role === Role.ADMIN" class="flex flex-col gap-2">
       <USeparator class="my-3" />
-      <div class="text-xs font-medium text-neutral-500 dark:text-neutral-400">
+      <div class="text-xs font-medium text-(--ui-text-muted)">
         Admin
       </div>
       <LayoutNavItem v-for="nav in adminNavigations" :key="nav.name" :active="nav.path === route.path" :nav-item="nav" />
diff --git a/apps/shelve/app/components/project/Create.vue b/apps/shelve/app/components/project/Create.vue
index ad49040f..2c2c9700 100644
--- a/apps/shelve/app/components/project/Create.vue
+++ b/apps/shelve/app/components/project/Create.vue
@@ -73,7 +73,7 @@ function importProject() {
             <h3 class="font-semibold">
               Quick Links
             </h3>
-            <p class="text-pretty text-xs text-neutral-500 dark:text-neutral-400">
+            <p class="text-pretty text-xs text-(--ui-text-muted)">
               Add quick links to your project repository, homepage, etc...
             </p>
           </div>
@@ -101,7 +101,7 @@ function importProject() {
             <h3 class="font-semibold">
               Logo
             </h3>
-            <p class="text-pretty text-xs text-neutral-500 dark:text-neutral-400">
+            <p class="text-pretty text-xs text-(--ui-text-muted)">
               Add a logo to your project
             </p>
           </div>
diff --git a/apps/shelve/app/components/project/Item.vue b/apps/shelve/app/components/project/Item.vue
index a60cc091..605ef7c9 100644
--- a/apps/shelve/app/components/project/Item.vue
+++ b/apps/shelve/app/components/project/Item.vue
@@ -27,7 +27,7 @@ const active = useState('active-project')
           <h3 class="flex flex-col text-lg font-semibold" :class="{ active: active === project.id }">
             {{ project.name }}
           </h3>
-          <div class="text-xs font-normal text-neutral-500" :class="{ active: active === project.id }">
+          <div class="text-xs font-normal text-(--ui-text-muted)" :class="{ active: active === project.id }">
             {{ project.description }}
           </div>
         </div>
diff --git a/apps/shelve/app/components/project/MainSection.vue b/apps/shelve/app/components/project/MainSection.vue
index c58c4503..c7f741df 100644
--- a/apps/shelve/app/components/project/MainSection.vue
+++ b/apps/shelve/app/components/project/MainSection.vue
@@ -135,7 +135,7 @@ function getProjectManager(manager: string) {
             <h3 class="text-base font-semibold leading-7">
               {{ project.name }}
             </h3>
-            <p class="text-sm leading-6 text-neutral-500">
+            <p class="text-sm leading-6 text-(--ui-text-muted)">
               {{ project.description }}
             </p>
           </div>
diff --git a/apps/shelve/app/components/project/RepoSelector.vue b/apps/shelve/app/components/project/RepoSelector.vue
index 17d4d559..7d0508ef 100644
--- a/apps/shelve/app/components/project/RepoSelector.vue
+++ b/apps/shelve/app/components/project/RepoSelector.vue
@@ -57,7 +57,7 @@ const groups = computed(() => [
         <template #empty>
           <div v-if="!loading" class="flex flex-col items-center justify-center gap-2">
             <UIcon name="simple-icons:github" class="size-8" />
-            <p class="text-pretty text-neutral-500 dark:text-neutral-400">
+            <p class="text-pretty text-(--ui-text-muted)">
               No repositories found.
             </p>
           </div>
diff --git a/apps/shelve/app/components/team/Manager.vue b/apps/shelve/app/components/team/Manager.vue
index b6cb7ef2..dd821070 100644
--- a/apps/shelve/app/components/team/Manager.vue
+++ b/apps/shelve/app/components/team/Manager.vue
@@ -74,7 +74,7 @@ const groups = computed(() => [
         @update:open="open = $event"
       >
         <template #teams-trailing="{ item }">
-          <span v-if="!item.disabled" class="text-xs text-neutral-500">
+          <span v-if="!item.disabled" class="text-xs text-(--ui-text-muted)">
             Select team
           </span>
         </template>
@@ -93,7 +93,7 @@ const groups = computed(() => [
                   Looks like there is no team with the name '{{ newTeamName }}'
                 </span>
               </h3>
-              <p v-if="!newTeamName" class="text-sm text-neutral-500">
+              <p v-if="!newTeamName" class="text-sm text-(--ui-text-muted)">
                 Create a team to start collaborating with your team members.
               </p>
             </div>
diff --git a/apps/shelve/app/components/token/Toggle.vue b/apps/shelve/app/components/token/Toggle.vue
index 41a41c08..0daa0391 100644
--- a/apps/shelve/app/components/token/Toggle.vue
+++ b/apps/shelve/app/components/token/Toggle.vue
@@ -13,7 +13,7 @@ const copy = () => {
 
 <template>
   <div class="flex select-none items-center gap-2">
-    <UTooltip text="Copy token" class="cursor-pointer text-sm font-semibold leading-6 text-neutral-500 dark:text-neutral-400">
+    <UTooltip text="Copy token" class="cursor-pointer text-sm font-semibold leading-6 text-(--ui-text-muted)">
       <span v-if="visible" @click="copy">
         {{ token.slice(0, 4) }}...{{ token.slice(-4) }}
       </span>
@@ -23,7 +23,7 @@ const copy = () => {
     </UTooltip>
     <UIcon
       :name="visible ? 'lucide:eye-off' : 'lucide:eye'"
-      class="cursor-pointer text-neutral-500 dark:text-neutral-400"
+      class="cursor-pointer text-(--ui-text-muted)"
       @click="visible = !visible"
     />
   </div>
diff --git a/apps/shelve/app/components/variable/Create.vue b/apps/shelve/app/components/variable/Create.vue
index a57fba33..83636e4b 100644
--- a/apps/shelve/app/components/variable/Create.vue
+++ b/apps/shelve/app/components/variable/Create.vue
@@ -77,7 +77,7 @@ const handlePasswordGenerated = (password: string, index: number) => variablesIn
             <h2 class="text-lg font-semibold">
               Environment Variables
             </h2>
-            <p class="text-sm font-normal text-neutral-500">
+            <p class="text-sm font-normal text-(--ui-text-muted)">
               Manage your environment variables
             </p>
           </div>
@@ -109,13 +109,13 @@ const handlePasswordGenerated = (password: string, index: number) => variablesIn
           </h3>
         </div>
         <USeparator class="my-1" />
-        <p class="text-xs font-normal text-neutral-500">
+        <p class="text-xs font-normal text-(--ui-text-muted)">
           🤫 You can also paste all your environment variables (.env) as key value pairs to prefilled the form
         </p>
         <div class="mb-4 flex flex-col gap-2">
           <div class="hidden items-center sm:flex">
-            <span class="w-full text-sm font-normal text-neutral-500">Key</span>
-            <span class="w-full text-sm font-normal text-neutral-500">Value</span>
+            <span class="w-full text-sm font-normal text-(--ui-text-muted)">Key</span>
+            <span class="w-full text-sm font-normal text-(--ui-text-muted)">Value</span>
             <div class="w-[100px]" />
           </div>
           <div v-for="variable in variablesToCreate" :key="variable" class="flex flex-col gap-4">
diff --git a/apps/shelve/app/components/variable/GithubSync.vue b/apps/shelve/app/components/variable/GithubSync.vue
index 3f519268..a9586888 100644
--- a/apps/shelve/app/components/variable/GithubSync.vue
+++ b/apps/shelve/app/components/variable/GithubSync.vue
@@ -112,7 +112,7 @@ async function onSubmit(event: FormSubmitEvent<SyncVariablesSchema>) {
                 <div class="flex items-center gap-2">
                   <UIcon
                     name="lucide:git-fork"
-                    class="size-4 text-neutral-500"
+                    class="size-4 text-(--ui-text-muted)"
                   />
                   <UInput
                     v-model="state.repository"
@@ -161,7 +161,7 @@ async function onSubmit(event: FormSubmitEvent<SyncVariablesSchema>) {
                 block
               />
             </div>
-            <p class="text-xs text-neutral-500 dark:text-neutral-400 mt-2 bg-neutral-100 dark:bg-neutral-800/50 p-2 rounded-lg">
+            <p class="text-xs text-(--ui-text-muted) mt-2 bg-neutral-100 dark:bg-neutral-800/50 p-2 rounded-lg">
               <UIcon name="lucide:info" class="text-sm align-sub" /> This might cause overwriting of existing secrets in your repository
             </p>
           </div>
diff --git a/apps/shelve/app/components/variable/Item.vue b/apps/shelve/app/components/variable/Item.vue
index d2db4267..b7795973 100644
--- a/apps/shelve/app/components/variable/Item.vue
+++ b/apps/shelve/app/components/variable/Item.vue
@@ -59,7 +59,7 @@ const showEdit = ref(false)
           </UTooltip>
         </h3>
         <div class="flex flex-col gap-1">
-          <span v-for="env in environments" :key="env.id" class="flex items-center gap-1 text-xs font-normal text-neutral-500">
+          <span v-for="env in environments" :key="env.id" class="flex items-center gap-1 text-xs font-normal text-(--ui-text-muted)">
             <UIcon v-if="environmentsValues[env.id]" name="lucide:check" class="size-4 text-green-400" />
             <UIcon v-else name="lucide:x" class="size-4 text-red-400" />
             {{ capitalize(env.name) }}
@@ -67,7 +67,7 @@ const showEdit = ref(false)
         </div>
       </div>
       <div class="flex items-center gap-2">
-        <p class="hidden text-right text-xs font-normal text-neutral-500 md:block">
+        <p class="hidden text-right text-xs font-normal text-(--ui-text-muted) md:block">
           Last updated: {{ new Date(variable.updatedAt).toLocaleDateString() }}
         </p>
       </div>
@@ -78,10 +78,10 @@ const showEdit = ref(false)
           <table class="w-full">
             <thead>
               <tr class="border-b dark:border-neutral-800 border-neutral-300">
-                <th class="py-2 w-24 px-4 text-left text-sm font-medium text-neutral-500">
+                <th class="py-2 w-24 px-4 text-left text-sm font-medium text-(--ui-text-muted)">
                   Environment
                 </th>
-                <th class="py-2 px-4 text-left text-sm font-medium text-neutral-500">
+                <th class="py-2 px-4 text-left text-sm font-medium text-(--ui-text-muted)">
                   Value
                 </th>
               </tr>
@@ -103,7 +103,7 @@ const showEdit = ref(false)
                 <td class="py-2 px-4 text-sm font-medium">
                   <UTooltip :text="`Copy env variables for ${env.name} environment`" :content="{ side: 'top' }">
                     <span
-                      class="cursor-pointer transition-colors ease-in-out duration-300 text-neutral-500 hover:text-neutral-300"
+                      class="cursor-pointer transition-colors ease-in-out duration-300 text-(--ui-text-muted) hover:text-neutral-300"
                       @click="copyToClipboard(`${localVariable.key}=${environmentsValues[env.id]}`, 'Variable copied to clipboard')"
                     >
                       {{ capitalize(env.name) }}
diff --git a/apps/shelve/app/components/variable/Prefix.vue b/apps/shelve/app/components/variable/Prefix.vue
index 4adbd3c2..fd84853b 100644
--- a/apps/shelve/app/components/variable/Prefix.vue
+++ b/apps/shelve/app/components/variable/Prefix.vue
@@ -42,7 +42,7 @@ function addPrefixToInputId(prefix: string) {
             @click="addPrefixToInputId(prefix)"
           />
         </div>
-        <NuxtLink :to="`/${teamSlug}/projects/${project.id}/settings#variable-prefix`" class="text-xs text-neutral-500 dark:text-neutral-400 flex gap-1 hover:underline">
+        <NuxtLink :to="`/${teamSlug}/projects/${project.id}/settings#variable-prefix`" class="text-xs text-(--ui-text-muted) flex gap-1 hover:underline">
           Create variable prefix
           <UIcon name="lucide:external-link" class="mt-0.5" />
         </NuxtLink>
diff --git a/apps/shelve/app/error.vue b/apps/shelve/app/error.vue
index badd5df5..c8d3e9c7 100644
--- a/apps/shelve/app/error.vue
+++ b/apps/shelve/app/error.vue
@@ -54,7 +54,7 @@ const clearLocalStorage = () => {
         <h1 class="font-newsreader text-4xl font-light italic">
           Looks like you're lost
         </h1>
-        <p class="font-geist text-sm text-neutral-500">
+        <p class="font-geist text-sm text-(--ui-text-muted)">
           The page you're looking for doesn't exist
         </p>
       </div>
@@ -62,7 +62,7 @@ const clearLocalStorage = () => {
         <h1 class="font-newsreader text-4xl font-light italic">
           An error occurred
         </h1>
-        <p class="font-geist text-sm text-neutral-500">
+        <p class="font-geist text-sm text-(--ui-text-muted)">
           Refresh the page or try again later
         </p>
       </div>
diff --git a/apps/shelve/app/layouts/auth.vue b/apps/shelve/app/layouts/auth.vue
index 26a8c262..82c5a787 100644
--- a/apps/shelve/app/layouts/auth.vue
+++ b/apps/shelve/app/layouts/auth.vue
@@ -6,7 +6,7 @@
     <div class="mt-6">
       <LayoutDivider />
       <footer class="mx-auto flex max-w-7xl flex-col items-center justify-around gap-4 px-4 py-6 sm:flex-row">
-        <div class="flex items-center text-neutral-500 gap-4">
+        <div class="flex items-center text-(--ui-text-muted) gap-4">
           <span class="text-sm flex items-center">
             Want to go back to homepage ?
             <UButton
diff --git a/apps/shelve/app/pages/[teamSlug]/environments.vue b/apps/shelve/app/pages/[teamSlug]/environments.vue
index 630bba58..9051ff53 100644
--- a/apps/shelve/app/pages/[teamSlug]/environments.vue
+++ b/apps/shelve/app/pages/[teamSlug]/environments.vue
@@ -91,7 +91,7 @@ function updateEnvironment(env: Environment) {
           <h2 class="text-base font-semibold leading-7">
             Environment Settings
           </h2>
-          <p class="text-sm leading-6 text-neutral-500">
+          <p class="text-sm leading-6 text-(--ui-text-muted)">
             Create, update, and delete environments
           </p>
         </div>
diff --git a/apps/shelve/app/pages/[teamSlug]/index.vue b/apps/shelve/app/pages/[teamSlug]/index.vue
index 10cb098a..feaea5b5 100644
--- a/apps/shelve/app/pages/[teamSlug]/index.vue
+++ b/apps/shelve/app/pages/[teamSlug]/index.vue
@@ -22,7 +22,7 @@ if (!projects.value)
         <h2 class="text-lg font-semibold">
           No projects found
         </h2>
-        <p class="text-sm text-neutral-500">
+        <p class="text-sm text-(--ui-text-muted)">
           You don't have any projects yet. Create one now!
         </p>
         <ProjectCreate />
diff --git a/apps/shelve/app/pages/[teamSlug]/members.vue b/apps/shelve/app/pages/[teamSlug]/members.vue
index f6a4e545..df1921ce 100644
--- a/apps/shelve/app/pages/[teamSlug]/members.vue
+++ b/apps/shelve/app/pages/[teamSlug]/members.vue
@@ -103,7 +103,7 @@ const items = (row: Member) => [
         <h2 class="text-lg font-bold">
           Members
         </h2>
-        <p class="text-sm text-neutral-500">
+        <p class="text-sm text-(--ui-text-muted)">
           Manage team members
         </p>
       </div>
@@ -117,15 +117,15 @@ const items = (row: Member) => [
                   <span class="text-sm font-semibold">{{ member.user.username }}</span>
                   <UBadge size="sm" :label="member.role.toUpperCase()" variant="subtle" :color="member.role === TeamRole.OWNER ? 'primary' : member.role === TeamRole.ADMIN ? 'success' : 'neutral'" />
                 </div>
-                <span class="text-xs text-neutral-500 hover:text-neutral-700 dark:hover:text-neutral-300 cursor-pointer" @click="copyToClipboard(member.user.email)">
+                <span class="text-xs text-(--ui-text-muted) hover:text-neutral-700 dark:hover:text-neutral-300 cursor-pointer" @click="copyToClipboard(member.user.email)">
                   {{ member.user.email }}
                 </span>
               </div>
             </div>
             <div class="flex gap-2">
               <div class="flex flex-col gap-1">
-                <span class="text-xs text-neutral-500 hidden sm:flex">CreatedAt: {{ new Date(member.createdAt).toLocaleString() }}</span>
-                <span class="text-xs text-neutral-500 hidden sm:flex">UpdatedAt: {{ new Date(member.updatedAt).toLocaleString() }}</span>
+                <span class="text-xs text-(--ui-text-muted) hidden sm:flex">CreatedAt: {{ new Date(member.createdAt).toLocaleString() }}</span>
+                <span class="text-xs text-(--ui-text-muted) hidden sm:flex">UpdatedAt: {{ new Date(member.updatedAt).toLocaleString() }}</span>
               </div>
               <UDropdownMenu v-if="canUpdate" :items="items(member)">
                 <UButton variant="ghost" icon="heroicons:ellipsis-horizontal-20-solid" />
diff --git a/apps/shelve/app/pages/[teamSlug]/projects/[projectId]/index/settings.vue b/apps/shelve/app/pages/[teamSlug]/projects/[projectId]/index/settings.vue
index 7ffd56ca..527865b0 100644
--- a/apps/shelve/app/pages/[teamSlug]/projects/[projectId]/index/settings.vue
+++ b/apps/shelve/app/pages/[teamSlug]/projects/[projectId]/index/settings.vue
@@ -27,7 +27,7 @@ async function onSubmit(event: FormSubmitEvent<UpdateProjectSchema>) {
             <h2 class="text-lg font-semibold">
               Project Settings
             </h2>
-            <p class="text-pretty text-sm text-neutral-500 dark:text-neutral-400">
+            <p class="text-pretty text-sm text-(--ui-text-muted)">
               Configure your project settings, quick links, environment variables prefix, etc...
             </p>
           </div>
@@ -39,7 +39,7 @@ async function onSubmit(event: FormSubmitEvent<UpdateProjectSchema>) {
             <h3 class="font-semibold">
               Quick Links
             </h3>
-            <p class="text-pretty text-xs text-neutral-500 dark:text-neutral-400">
+            <p class="text-pretty text-xs text-(--ui-text-muted)">
               Add quick links to your project repository, homepage, etc...
             </p>
           </div>
@@ -79,7 +79,7 @@ async function onSubmit(event: FormSubmitEvent<UpdateProjectSchema>) {
             <h3 class="font-semibold">
               Environment Variables Prefix
             </h3>
-            <p class="text-pretty text-xs text-neutral-500 dark:text-neutral-400">
+            <p class="text-pretty text-xs text-(--ui-text-muted)">
               Add a prefix to your environment variables
             </p>
           </div>
@@ -90,7 +90,7 @@ async function onSubmit(event: FormSubmitEvent<UpdateProjectSchema>) {
                 <UTextarea v-model="project.variablePrefix" class="w-full" :disabled="!canUpdate" :rows="4" />
               </UFormField>
               <UTooltip text="Yes this will be improved in the future 😅">
-                <p class="mt-1 text-xs text-neutral-500 dark:text-neutral-400">
+                <p class="mt-1 text-xs text-(--ui-text-muted)">
                   Write your prefix separated by a comma, for example: <code>NUXT_PUBLIC_, REACT_APP_</code>
                 </p>
               </UTooltip>
diff --git a/apps/shelve/app/pages/[teamSlug]/settings.vue b/apps/shelve/app/pages/[teamSlug]/settings.vue
index d1b9311d..8df035ea 100644
--- a/apps/shelve/app/pages/[teamSlug]/settings.vue
+++ b/apps/shelve/app/pages/[teamSlug]/settings.vue
@@ -52,7 +52,7 @@ const open = ref(false)
             <h2 class="text-base font-semibold leading-7">
               Team Settings
             </h2>
-            <p class="text-sm leading-6 text-neutral-500">
+            <p class="text-sm leading-6 text-(--ui-text-muted)">
               Manage team settings
             </p>
           </div>
@@ -76,7 +76,7 @@ const open = ref(false)
               </UTooltip>
             </UButtonGroup>
           </UFormField>
-          <p class="text-xs mt-1 text-neutral-500">
+          <p class="text-xs mt-1 text-(--ui-text-muted)">
             This is the unique identifier for your team (used by the CLI)
           </p>
         </div>
diff --git a/apps/shelve/app/pages/admin/tests.vue b/apps/shelve/app/pages/admin/tests.vue
index cea9bd53..46ae3865 100644
--- a/apps/shelve/app/pages/admin/tests.vue
+++ b/apps/shelve/app/pages/admin/tests.vue
@@ -33,7 +33,7 @@ async function testNewUserMail() {
       <h2 class="text-lg font-semibold">
         Test new user email
       </h2>
-      <p class="text-sm text-neutral-500 dark:text-neutral-400">
+      <p class="text-sm text-(--ui-text-muted)">
         Send a test email to a new user
       </p>
       <div>
diff --git a/apps/shelve/app/pages/index.vue b/apps/shelve/app/pages/index.vue
index 65ad26c7..48f79b46 100644
--- a/apps/shelve/app/pages/index.vue
+++ b/apps/shelve/app/pages/index.vue
@@ -54,7 +54,7 @@ async function navigateToTeam(team: Team) {
               <h1 class="text-lg font-semibold">
                 Welcome back, {{ user?.username }}
               </h1>
-              <p class="text-neutral-500 italic">
+              <p class="text-(--ui-text-muted) italic">
                 Select a team to get started
               </p>
             </div>
@@ -70,7 +70,7 @@ async function navigateToTeam(team: Team) {
                 <UAvatar :src="team.logo" class="size-10 logo" :class="{ active: active === team.id }" />
                 <div class="flex flex-col">
                   <span class="text-sm font-semibold team-name" :class="{ active: active === team.id }">{{ team.name }}</span>
-                  <span class="text-xs text-neutral-500">{{ team.slug }}</span>
+                  <span class="text-xs text-(--ui-text-muted)">{{ team.slug }}</span>
                 </div>
               </div>
               <UButton size="sm" variant="soft" trailing :loading="navLoading && active === team.id">
@@ -97,7 +97,7 @@ async function navigateToTeam(team: Team) {
       </div>
     </div>
     <footer class="absolute bottom-0 mx-auto flex max-w-7xl flex-col items-center justify-around gap-4 px-4 py-6 sm:flex-row">
-      <div class="flex items-center text-neutral-500 gap-4">
+      <div class="flex items-center text-(--ui-text-muted) gap-4">
         <span class="text-sm flex items-center">
           Want to go back to homepage ?
           <UButton
diff --git a/apps/shelve/app/pages/login.vue b/apps/shelve/app/pages/login.vue
index ac096171..92547137 100644
--- a/apps/shelve/app/pages/login.vue
+++ b/apps/shelve/app/pages/login.vue
@@ -32,7 +32,7 @@ if (route.query.error === 'github' || route.query.error === 'google') {
         <h1 class="text-center text-3xl leading-9">
           Sign in to {{ title }}
         </h1>
-        <p class="text-neutral-500 italic dark:text-neutral-400">
+        <p class="text-(--ui-text-muted) italic">
           Welcome to the future of environment management.
         </p>
       </div>
diff --git a/apps/shelve/app/pages/onboarding.vue b/apps/shelve/app/pages/onboarding.vue
index 096299a9..83478107 100644
--- a/apps/shelve/app/pages/onboarding.vue
+++ b/apps/shelve/app/pages/onboarding.vue
@@ -51,7 +51,7 @@ async function createTeamAndCompleteOnboarding() {
         <h1 class="text-center text-3xl leading-9">
           Welcome to Shelve!
         </h1>
-        <p class="text-neutral-500 italic dark:text-neutral-400">
+        <p class="text-(--ui-text-muted) italic">
           Let's create your first team together
         </p>
       </div>
diff --git a/apps/shelve/app/pages/user/integrations/github.vue b/apps/shelve/app/pages/user/integrations/github.vue
index 6c49a18b..ebc34b03 100644
--- a/apps/shelve/app/pages/user/integrations/github.vue
+++ b/apps/shelve/app/pages/user/integrations/github.vue
@@ -164,7 +164,7 @@ function openDeleteModal(slug: string) {
           <h2 class="text-lg font-semibold mb-2">
             No Github Apps Yet
           </h2>
-          <p class="text-sm text-neutral-500 mb-6">
+          <p class="text-sm text-(--ui-text-muted) mb-6">
             Create a GitHub App to start managing your repositories and synchronizing secrets across your environments.
           </p>
 
diff --git a/apps/shelve/app/pages/user/integrations/index.vue b/apps/shelve/app/pages/user/integrations/index.vue
index 818a5a13..28abd767 100644
--- a/apps/shelve/app/pages/user/integrations/index.vue
+++ b/apps/shelve/app/pages/user/integrations/index.vue
@@ -15,7 +15,7 @@ const integrations = [
         <h2 class="text-lg font-bold">
           Integrations
         </h2>
-        <p class="text-sm text-neutral-500">
+        <p class="text-sm text-(--ui-text-muted)">
           Connect Shelve with other services to enhance your experience.
         </p>
       </div>
@@ -27,7 +27,7 @@ const integrations = [
                 <UIcon :name="integration.icon" class="size-7" />
                 <div class="flex flex-col gap-1">
                   <span class="text-sm font-semibold">{{ integration.name }}</span>
-                  <span class="text-xs text-neutral-500">{{ integration.description }}</span>
+                  <span class="text-xs text-(--ui-text-muted)">{{ integration.description }}</span>
                 </div>
               </div>
               <div class="flex items-center gap-1">
diff --git a/apps/shelve/app/pages/user/profile.vue b/apps/shelve/app/pages/user/profile.vue
index 82ee3003..81f354c9 100644
--- a/apps/shelve/app/pages/user/profile.vue
+++ b/apps/shelve/app/pages/user/profile.vue
@@ -56,7 +56,7 @@ function deleteAccount() {
           <h2 class="text-base font-semibold leading-7">
             Personal Information
           </h2>
-          <p class="text-sm leading-6 text-neutral-500">
+          <p class="text-sm leading-6 text-(--ui-text-muted)">
             Update your personal information
           </p>
         </div>
diff --git a/apps/shelve/app/pages/user/settings.vue b/apps/shelve/app/pages/user/settings.vue
index c3865d5c..8a4cc5d3 100644
--- a/apps/shelve/app/pages/user/settings.vue
+++ b/apps/shelve/app/pages/user/settings.vue
@@ -28,7 +28,7 @@ watch(reduceMotion, () => {
         <h2 class="text-lg font-bold">
           Auto uppercase
         </h2>
-        <p class="text-sm text-neutral-500">
+        <p class="text-sm text-(--ui-text-muted)">
           Automatically uppercase the keys of the variables
         </p>
       </div>
@@ -40,7 +40,7 @@ watch(reduceMotion, () => {
         <h2 class="text-lg font-bold">
           Reduce Motion
         </h2>
-        <p class="text-sm text-neutral-500">
+        <p class="text-sm text-(--ui-text-muted)">
           Remove all transitions and animations from the site.
         </p>
       </div>
@@ -59,7 +59,7 @@ watch(reduceMotion, () => {
           <h3 class="text-lg font-semibold text-neutral-700">
             Shining Star
           </h3>
-          <p class="text-sm text-neutral-500">
+          <p class="text-sm text-(--ui-text-muted)">
             Shining Star theme is the theme for all people who like keeping it bright.
           </p>
           <div class="mt-2 flex flex-col gap-1">
diff --git a/apps/shelve/app/pages/user/tokens.vue b/apps/shelve/app/pages/user/tokens.vue
index 51ffe9bc..069f2082 100644
--- a/apps/shelve/app/pages/user/tokens.vue
+++ b/apps/shelve/app/pages/user/tokens.vue
@@ -101,7 +101,7 @@ fetchTokens()
         <h2 class="text-base font-semibold leading-7">
           Tokens
         </h2>
-        <p class="text-sm leading-6 text-neutral-500">
+        <p class="text-sm leading-6 text-(--ui-text-muted)">
           Manage your tokens for the CLI
         </p>
       </div>
@@ -133,7 +133,7 @@ fetchTokens()
             </UTooltip>
             <UTooltip v-else text="Token is active">
               <div>
-                <UIcon name="heroicons-outline:clock" class="size-4 text-neutral-500" />
+                <UIcon name="heroicons-outline:clock" class="size-4 text-(--ui-text-muted)" />
               </div>
             </UTooltip>
           </span>
diff --git a/apps/vault/app/app.vue b/apps/vault/app/app.vue
index 6fd9434f..158c777e 100644
--- a/apps/vault/app/app.vue
+++ b/apps/vault/app/app.vue
@@ -66,7 +66,7 @@ const items = [
                   <h1 class="main-gradient font-medium text-3xl">
                     <ScrambleText label="Vault" />
                   </h1>
-                  <p class="text-neutral-500 max-w-lg text-xs sm:text-sm">
+                  <p class="text-(--ui-text-muted) max-w-lg text-xs sm:text-sm">
                     Share secrets securely without an account. Set expiration time, control number of reads, and ensure encrypted transmission.
                   </p>
                 </div>
@@ -81,7 +81,7 @@ const items = [
                 <h3 class="main-gradient text-2xl">
                   <ScrambleText label="FAQ" />
                 </h3>
-                <p class="max-w-lg text-center text-sm text-neutral-500 sm:text-base">
+                <p class="max-w-lg text-center text-sm text-(--ui-text-muted) sm:text-base">
                   Frequently asked questions about Vault.
                 </p>
               </div>
@@ -94,12 +94,12 @@ const items = [
             <footer class="mt-20 flex flex-col gap-4 px-5">
               <USeparator />
               <div class="flex items-center justify-between">
-                <span class="text-xs font-mono italic tracking-tight text-neutral-500">
+                <span class="text-xs font-mono italic tracking-tight text-(--ui-text-muted)">
                   © {{ new Date().getFullYear() }} - Made by <NuxtLink to="https://hrcd.fr/" class="text-neutral-400 hover:text-neutral-200">
                     HugoRCD
                   </NuxtLink>
                 </span>
-                <span class="text-xs font-mono italic tracking-tight text-neutral-500">
+                <span class="text-xs font-mono italic tracking-tight text-(--ui-text-muted)">
                   <NuxtLink to="https://dub.sh/shelve" target="_blank" class="text-neutral-400 hover:text-neutral-200">
                     Powered by Shelve <UIcon name="custom:shelve" />
                   </NuxtLink>
diff --git a/apps/vault/app/components/Decrypt.vue b/apps/vault/app/components/Decrypt.vue
index 81f98f38..fa63f9a8 100644
--- a/apps/vault/app/components/Decrypt.vue
+++ b/apps/vault/app/components/Decrypt.vue
@@ -62,10 +62,10 @@ async function decryptEnvFile() {
       </div>
     </template>
     <div class="mt-4 flex w-full items-center justify-between gap-2">
-      <span v-if="timeLeft" class="text-sm font-semibold text-neutral-500/80">
+      <span v-if="timeLeft" class="text-sm font-semibold text-(--ui-text-muted)/80">
         Time left: {{ timeLeft }}
       </span>
-      <span v-if="readsLeft" class="text-sm font-semibold text-neutral-500/80">
+      <span v-if="readsLeft" class="text-sm font-semibold text-(--ui-text-muted)/80">
         Reads left: {{ readsLeft }}
       </span>
     </div>