diff --git a/app.config.ts b/app.config.ts
index 4810ef21..93b1e2a7 100644
--- a/app.config.ts
+++ b/app.config.ts
@@ -6,14 +6,14 @@ export default defineAppConfig({
       base: 'transition ease-in',
       color: {
         gray: {
-          solid: 'dark:bg-gray-700/40 dark:hover:bg-gray-700/50',
+          solid: 'shadow-none bg-gray-300/20 hover:bg-gray-300/40 dark:bg-gray-700/40 dark:hover:bg-gray-700/50',
         },
       },
     },
     select: {
       base: 'transition ease-in',
       color: {
-        gray: { outline: 'dark:bg-gray-700/40 dark:hover:bg-gray-700/50' },
+        gray: { outline: 'shadow-none bg-gray-300/20 hover:bg-gray-300/40 dark:bg-gray-700/40 dark:hover:bg-gray-700/50' },
       },
     },
     buttonGroup: {
@@ -27,7 +27,7 @@ export default defineAppConfig({
       base: 'transition ease-in',
       color: {
         gray: {
-          outline: 'dark:bg-gray-700/40 dark:hover:bg-gray-700/50',
+          outline: 'shadow-none bg-gray-300/20 hover:bg-gray-300/40 dark:bg-gray-700/40 dark:hover:bg-gray-700/50',
         },
       },
     },
diff --git a/components/app/AppFooter.vue b/components/app/AppFooter.vue
index 20b9061b..067451fc 100644
--- a/components/app/AppFooter.vue
+++ b/components/app/AppFooter.vue
@@ -6,17 +6,17 @@ const toggleTheme = function () {
   colorMode.preference = colorMode.value === 'dark' ? 'light' : 'dark'
 }
 
-const uiButton = { color: { gray: { ghost: 'dark:text-gray-400 dark:hover:text-gray-200 dark:hover:bg-primary/40' } } }
+const uiButton = { color: { gray: { ghost: 'text-gray-500 hover:text-gray-800 dark:text-gray-400 dark:hover:text-gray-200 hover:bg-primary/60 dark:hover:bg-primary/40' } } }
 </script>
 
 <template>
-  <footer class="px-6 pt-20 pb-20 md:pb-30 flex flex-col gap-12 md:gap-20 rounded-lg ring-1 dark:ring-gray-700 dark:bg-gray-700/20">
+  <footer class="px-6 pt-20 pb-20 md:pb-30 flex flex-col gap-12 md:gap-20 rounded-lg ring-1 ring-gray-300 bg-gray-300/20 dark:ring-gray-700 dark:bg-gray-700/20">
     <div class="grid md:grid-cols-2 gap-y-6 gap-x-12 md:gap-x-25">
       <div class="grow flex flex-col gap-6 max-w-sm">
         <NuxtLink to="/" class="block">
           <AppLogo />
         </NuxtLink>
-        <p class="max-w-lg text-sm md:text-base dark:text-zinc-400 italic">
+        <p class="max-w-lg text-sm md:text-base text-gray-500 dark:text-gray-400 italic">
           {{ website.footer.quote }}
         </p>
       </div>
@@ -27,10 +27,10 @@ const uiButton = { color: { gray: { ghost: 'dark:text-gray-400 dark:hover:text-g
       </ul>
       <nav class="mt-6 md:mt-0 md:justify-self-end md:col-start-2 md:row-start-1 grid grid-cols-2 md:grid-cols-3 gap-x-2 gap-y-6 md:gap-10 text-[1.125rem]">
         <div v-for="list in website.footer.menu" :key="list.title" class="flex flex-col gap-4">
-          <p class="font-bold dark:text-gray-50">
+          <p class="font-bold text-gray-950 dark:text-gray-50">
             {{ list.title }}
           </p>
-          <ul class="flex flex-col gap-3 dark:text-gray-400">
+          <ul class="flex flex-col gap-3 text-gray-500 dark:text-gray-400">
             <li v-for="item in list.items" :key="item.url">
               <NuxtLink :to="item.url" :rel="item.rel" :target="item.target" class="hover:underline underline-offset-8">
                 {{ item.title }}
@@ -50,6 +50,6 @@ const uiButton = { color: { gray: { ghost: 'dark:text-gray-400 dark:hover:text-g
         </ClientOnly>
       </div>
     </div>
-    <AppFooterLicense class="text-sm dark:text-zinc-400 text-center" />
+    <AppFooterLicense class="text-sm dark:text-gray-400 text-center" />
   </footer>
 </template>
diff --git a/components/app/AppHeader.vue b/components/app/AppHeader.vue
index 3309f7f7..d910659d 100644
--- a/components/app/AppHeader.vue
+++ b/components/app/AppHeader.vue
@@ -34,7 +34,8 @@ defineShortcuts({
 
 const { metaSymbol } = useShortcuts()
 
-const uiButton = { font: 'font-semibold', color: { gray: { ghost: 'dark:text-gray-50 dark:hover:bg-primary/40' } } }
+const uiButton = { font: 'font-semibold', color: { gray: { ghost: 'text-gray-950 hover:bg-primary/60 dark:text-gray-50 dark:hover:bg-primary/40' } } }
+const activeClassButton = 'bg-primary bg-opacity-40 dark:bg-opacity-30'
 
 function toDesignKit() {
   navigateTo('/design-kit?utm_source=unjs.io&utm_medium=header-icon')
@@ -42,7 +43,7 @@ function toDesignKit() {
 </script>
 
 <template>
-  <header class="h-[3.75rem] px-3 md:px-6 py-3 grid grid-cols-2 lg:grid-cols-3 rounded-lg ring-1 dark:ring-gray-700 dark:bg-gray-700/20">
+  <header class="h-[3.75rem] px-3 md:px-6 py-3 grid grid-cols-2 lg:grid-cols-3 rounded-lg ring-1 ring-gray-300 bg-gray-300/20  dark:ring-gray-700 dark:bg-gray-700/20">
     <div class="flex items-center">
       <NuxtLink to="/?utm_source=unjs.io&utm_medium=header-icon" @click.right.prevent="toDesignKit()">
         <AppLogo />
@@ -53,7 +54,7 @@ function toDesignKit() {
       <ol class="text-[1.125rem] flex gap-4 leading-5">
         <li v-for="item in navigation" :key="item._path">
           <UPopover v-if="item.children" mode="hover" :ui="{ width: 'max-w-[18rem]' }">
-            <UButton size="md" variant="ghost" color="gray" :to="item._path" :icon="item.icon" :ui="{ size: { md: 'text-base' }, ...uiButton }" active-class="bg-primary bg-opacity-30">
+            <UButton size="md" variant="ghost" color="gray" :to="item._path" :icon="item.icon" :ui="{ size: { md: 'text-base' }, ...uiButton }" :active-class="activeClassButton">
               {{ item.title }}
             </UButton>
 
@@ -72,7 +73,7 @@ function toDesignKit() {
               </ol>
             </template>
           </UPopover>
-          <UButton v-else size="md" variant="ghost" color="gray" :to="item._path" :icon="item.icon" :ui="{ size: { md: 'text-base' }, ...uiButton }" active-class="bg-primary bg-opacity-30">
+          <UButton v-else size="md" variant="ghost" color="gray" :to="item._path" :icon="item.icon" :ui="{ size: { md: 'text-base' }, ...uiButton }" :active-class="activeClassButton">
             {{ item.title }}
           </UButton>
         </li>
diff --git a/components/app/AppNavigationDialog.vue b/components/app/AppNavigationDialog.vue
index 5da9b4db..12ec1410 100644
--- a/components/app/AppNavigationDialog.vue
+++ b/components/app/AppNavigationDialog.vue
@@ -13,7 +13,9 @@ defineEmits<{
 
 const website = useWebsite()
 
-const uiButton = { color: { gray: { ghost: 'dark:text-gray-400 dark:hover:text-gray-200 dark:hover:bg-primary/40' } } }
+const uiButton = { font: 'font-semibold', color: { gray: { ghost: 'text-gray-950 hover:bg-primary/60 dark:text-gray-50 dark:hover:bg-primary/40' } } }
+const activeClassButton = 'bg-primary bg-opacity-40 dark:bg-opacity-30'
+const uiSocialButton = { color: { gray: { ghost: 'dark:text-gray-400 dark:hover:text-gray-200 dark:hover:bg-primary/40' } } }
 </script>
 
 <template>
@@ -32,7 +34,7 @@ const uiButton = { color: { gray: { ghost: 'dark:text-gray-400 dark:hover:text-g
         leave-from="opacity-100"
         leave-to="opacity-0"
       >
-        <DialogPanel class="z-20 fixed inset-0 dark:bg-gray-900 flex flex-col justify-between dark:text-50">
+        <DialogPanel class="z-20 fixed inset-0 bg-white dark:bg-gray-900 flex flex-col justify-between text-gray-950 dark:text-gray-50">
           <div class="container mx-auto px-7 pt-4 flex flex-1 flex-col justify-between">
             <div class="h-[3.75rem] flex justify-between items-center">
               <DialogTitle>
@@ -43,27 +45,30 @@ const uiButton = { color: { gray: { ghost: 'dark:text-gray-400 dark:hover:text-g
             <nav class="mb-40">
               <ul
                 aria-labelledby="Navigation mobile"
-                class="flex flex-col gap-12 text-2xl font-semibold"
+                class="flex flex-col gap-2 text-2xl font-semibold"
               >
                 <li v-for="item in navigation" :key="item._path">
-                  <NuxtLink :to="item._path" class="flex items-center gap-5" active-class="text-primary" @click="$emit('update:open', false)">
-                    <span :class="item.icon" class="w-8 h-8 block" />
-                    <span>
-                      {{ item.title }}
-                    </span>
-                  </NuxtLink>
+                  <UButton
+                    size="xl"
+                    color="gray"
+                    variant="ghost"
+                    :to="item._path" :icon="item.icon" :ui="{ ...uiButton }" :active-class="activeClassButton"
+                    @click="$emit('update:open', false)"
+                  >
+                    {{ item.title }}
+                  </UButton>
                 </li>
               </ul>
             </nav>
             <div class="flex justify-center">
               <ul class="flex gap-2">
                 <li v-for="social in website.socials" :key="social.name">
-                  <UButton :rel="social.rel" :target="social.target" :to="social.url" :icon="social.icon" :aria-label="`Follow us on ${social.name}`" size="xl" variant="ghost" color="gray" :ui="{ icon: { xl: 'md:w-7 md:h-7' }, ...uiButton }" />
+                  <UButton :rel="social.rel" :target="social.target" :to="social.url" :icon="social.icon" :aria-label="`Follow us on ${social.name}`" size="xl" variant="ghost" color="gray" :ui="{ icon: { xl: 'md:w-7 md:h-7' }, ...uiSocialButton }" />
                 </li>
               </ul>
             </div>
           </div>
-          <div class="mt-12 w-full h-2 dark:bg-primary-500" />
+          <div class="mt-12 w-full h-2 bg-primary-500 dark:bg-primary-500" />
         </DialogPanel>
       </TransitionChild>
     </Dialog>
diff --git a/components/app/AppSearchDialog.vue b/components/app/AppSearchDialog.vue
index f6a32262..3d94ffbf 100644
--- a/components/app/AppSearchDialog.vue
+++ b/components/app/AppSearchDialog.vue
@@ -54,7 +54,7 @@ function navigate() {
         leave-from="opacity-100"
         leave-to="opacity-0"
       >
-        <div class="fixed inset-0 bg-gray-900/70 backdrop-blur-sm" aria-hidden="true" />
+        <div class="fixed inset-0 bg-gray-100/70 dark:bg-gray-900/70 backdrop-blur-sm" aria-hidden="true" />
       </TransitionChild>
 
       <div class="fixed inset-0">
@@ -73,7 +73,7 @@ function navigate() {
                 <div class="relative">
                   <AppSearchInput v-model:query="query" class="w-full" :search-results="results" @validate="navigate" />
 
-                  <button class="absolute right-4 top-0 bottom-0 flex items-center dark:text-gray-400" type="button" @click="$emit('update:open', false)">
+                  <button class="absolute right-4 top-0 bottom-0 flex items-center text-gray-500 dark:text-gray-400" type="button" @click="$emit('update:open', false)">
                     <span class="i-heroicons-x-mark-20-solid w-5 h-5 block" aria-hidden="true" />
                     <span class="sr-only">
                       Close
diff --git a/components/app/search/AppSearchEmpty.vue b/components/app/search/AppSearchEmpty.vue
index ea0f1adb..26861221 100644
--- a/components/app/search/AppSearchEmpty.vue
+++ b/components/app/search/AppSearchEmpty.vue
@@ -1,6 +1,6 @@
 <template>
-  <div p="y-4" flex="~ col items-center" gap-2>
-    <span i="heroicons-magnifying-glass-20-solid" text="gray-400" w-5 h-5 block />
-    <span text="gray-600"> We couldn't find any items with that term. Please try again. </span>
+  <div class="py-4 flex flex-col items-center gap-2">
+    <span class="i-heroicons-magnifying-glass-20-solid w-5 h-5 block text-gray-500 dark:text-gray-400" />
+    <span class="text-gray-400 dark:text-gray-600"> We couldn't find any items with that term. Please try again. </span>
   </div>
 </template>
diff --git a/components/app/search/AppSearchGroup.vue b/components/app/search/AppSearchGroup.vue
index 5751577c..1a952c57 100644
--- a/components/app/search/AppSearchGroup.vue
+++ b/components/app/search/AppSearchGroup.vue
@@ -24,7 +24,7 @@ function isLastChildren(children: SearchDisplayItem[] | null, index: number) {
 </script>
 
 <template>
-  <section class="p-4 dark:bg-gray-700/20 ring-1 dark:ring-gray-700 rounded-lg">
+  <section class="p-4 bg-gray-300/20 ring-gray-300 dark:bg-gray-700/20 ring-1 dark:ring-gray-700 rounded-lg">
     <h2 class="dark:text-gray-400 capitalize font-bold mb-2">
       {{ name }}
     </h2>
diff --git a/components/app/search/AppSearchGroupItem.vue b/components/app/search/AppSearchGroupItem.vue
index 1c85504d..5af26e9f 100644
--- a/components/app/search/AppSearchGroupItem.vue
+++ b/components/app/search/AppSearchGroupItem.vue
@@ -12,22 +12,22 @@ defineProps<{
 <template>
   <NuxtLink :to="item.id" :class="{ 'pl-5': child, 'dark:bg-primary/30': active }" class="px-2 h-14 rounded-lg flex items-center gap-2 transition ease-in">
     <svg v-if="child && !last" width="11" height="34" viewBox="0 0 11 34" fill="none" xmlns="http://www.w3.org/2000/svg">
-      <path d="M1 1V17M1 17H10.1429M1 17V33" class="dark:stroke-zinc-500" stroke-linecap="round" />
+      <path d="M1 1V17M1 17H10.1429M1 17V33" class="stroke-gray-400 dark:stroke-gray-500" stroke-linecap="round" />
     </svg>
 
     <svg v-if="child && last" width="11" height="33" viewBox="0 0 11 33" fill="none" xmlns="http://www.w3.org/2000/svg">
-      <path d="M1 1V15C1 16.1046 1.89543 17 3 17H10.1429" class="dark:stroke-zinc-500" stroke-linecap="round" />
+      <path d="M1 1V15C1 16.1046 1.89543 17 3 17H10.1429" class="stroke-gray-400 dark:stroke-gray-500" stroke-linecap="round" />
     </svg>
 
     <!-- TODO: update in order to have the correct icon for blog, packages and more -->
-    <span v-if="item.level === 0" class="i-heroicons-document-text-20-solid w-6 h-6 block dark:text-gray-50" />
-    <span v-else class="i-heroicons-hashtag-20-solid h-5 w-5 block dark:text-zinc-400" />
+    <span v-if="item.level === 0" class="i-heroicons-document-text-20-solid w-6 h-6 block text-gray-950 dark:text-gray-50" />
+    <span v-else class="i-heroicons-hashtag-20-solid h-5 w-5 block text-gray-500 dark:text-gray-400" />
 
     <span class="flex flex-col">
-      <span class="dark:text-gray-50 font-semibold">
+      <span class="text-gray-950 dark:text-gray-50 font-semibold">
         {{ item.title }}
       </span>
-      <span v-if="item.level > 0" class="dark:text-zinc-400 text-sm">
+      <span v-if="item.level > 0" class="text-gray-500 dark:text-gray-400 text-sm">
         {{ item.titles[0] }}
       </span>
     </span>
diff --git a/components/app/search/AppSearchInput.vue b/components/app/search/AppSearchInput.vue
index 6b7a7b7d..b90a1261 100644
--- a/components/app/search/AppSearchInput.vue
+++ b/components/app/search/AppSearchInput.vue
@@ -31,15 +31,15 @@ function selectFirstOption() {
 </script>
 
 <template>
-  <ComboboxLabel for="search" class="h-12 px-4 md:py-2 flex items-center gap-4 ring-1 dark:ring-gray-700 dark:bg-gray-700/40 dark:hover:bg-gray-700/50 rounded-lg transition ease-in">
-    <span class="i-heroicons-magnifying-glass-20-solid w-5 h-5 block text-zinc-400" />
+  <ComboboxLabel for="search" class="h-12 px-4 md:py-2 flex items-center gap-4 ring-1 ring-gray-300 bg-gray-300/20 hover:bg-gray-300/40 dark:ring-gray-700 dark:bg-gray-700/40 dark:hover:bg-gray-700/50 rounded-lg transition ease-in">
+    <span class="i-heroicons-magnifying-glass-20-solid w-5 h-5 block text-gray-500 dark:text-gray-400" />
     <ComboboxInput
       id="search"
       ref="comboboxInput"
       type="text"
       name="search"
       placeholder="Search..."
-      class="bg-transparent placeholder:dark:text-zinc-400 dark:text-gray-50 grow focus:outline-none"
+      class="bg-transparent placeholder:text-gray-500 placeholder:dark:text-gray-400 text-gray-950 dark:text-gray-50 grow focus:outline-none"
       autocomplete="off"
       :value="query"
       @change="onChange($event.target.value)"
diff --git a/components/blog/BlogCard.vue b/components/blog/BlogCard.vue
index a080091d..2a857680 100644
--- a/components/blog/BlogCard.vue
+++ b/components/blog/BlogCard.vue
@@ -11,7 +11,7 @@ defineProps<{
 </script>
 
 <template>
-  <UCard as="article" :ui="{ base: 'h-full relative', background: 'dark:bg-gray-700/40 hover:dark:bg-gray-700/60', divide: '', shadow: 'shadow-none hover:shadow-lg ', ring: 'dark:highlight-white/10', rounded: 'rounded-lg', header: { base: 'flex gap-3 items-center', padding: 'py-0 pt-4 sm:px-4 sm:pt-4' }, body: { padding: 'p-4 sm:p-4' }, footer: { padding: 'py-0 pb-4 sm:px-4 sm:pb-4' } }">
+  <UCard as="article" :ui="{ base: 'h-full relative', background: 'bg-gray-300/20 hover:bg-gray-300/40 dark:bg-gray-700/40 hover:dark:bg-gray-700/60', divide: '', shadow: 'shadow-none hover:dark:shadow-lg ', ring: 'dark:highlight-white/10', rounded: 'rounded-lg', header: { base: 'flex gap-3 items-center', padding: 'py-0 pt-4 sm:px-4 sm:pt-4' }, body: { padding: 'p-4 sm:p-4' }, footer: { padding: 'py-0 pb-4 sm:px-4 sm:pb-4' } }">
     <template #header>
       <h3 class="text-xl font-semibold dark:text-gray-50">
         <NuxtLink :to="path" class="absolute inset-0" />
diff --git a/components/content/AnotherArticle.vue b/components/content/AnotherArticle.vue
index a101b512..bcb6c7f1 100644
--- a/components/content/AnotherArticle.vue
+++ b/components/content/AnotherArticle.vue
@@ -9,19 +9,19 @@ const { data: article } = await useAsyncData(`article:${props.link}`, () => quer
 
 <template>
   <div class="not-prose my-8 flex flex-col gap-2">
-    <p class="dark:text-gray-400">
+    <p class="text-gray-500 dark:text-gray-400">
       {{ text ?? 'Read more:' }}
     </p>
-    <article v-if="article" class="group relative rounded-lg ring-1 dark:ring-gray-700 hover:dark:ring-gray-400 dark:bg-gray-700/20 hover:dark:bg-gray-700/50 transition ease-in">
+    <article v-if="article" class="group relative rounded-lg ring-1 ring-gray-300 bg-gray-300/20 hover:bg-gray-300/40 dark:ring-gray-700 hover:dark:ring-gray-400  dark:bg-gray-700/20 hover:dark:bg-gray-700/50 transition ease-in">
       <!-- TODO: handle image -->
       <div class="p-4">
-        <h1 class="dark:text-gray-200 font-bold">
+        <h1 class="text-gray-800 dark:text-gray-200 font-bold">
           <NuxtLink :to="article._path">
             {{ article.title }}
             <span class="absolute inset-0" />
           </NuxtLink>
         </h1>
-        <p class="mt-2 dark:text-zinc-400 text-nowrap text-ellipsis overflow-hidden">
+        <p class="mt-2 text-gray-500 dark:text-gray-400 text-nowrap text-ellipsis overflow-hidden">
           {{ article.description }}
         </p>
       </div>
diff --git a/components/content/ProseCode.vue b/components/content/ProseCode.vue
index a407f13d..f19851f9 100644
--- a/components/content/ProseCode.vue
+++ b/components/content/ProseCode.vue
@@ -10,8 +10,8 @@ const { copy, copied, isSupported } = useClipboard()
 </script>
 
 <template>
-  <div class="my-8 ring-1 dark:ring-gray-700 rounded-lg overflow-hidden">
-    <div class="group relative p-4 dark:bg-gray-700/20">
+  <div class="my-8 ring-1 ring-gray-300 dark:ring-gray-700 rounded-lg overflow-hidden">
+    <div class="group relative p-4 bg-gray-300/20 dark:bg-gray-700/20">
       <span v-if="filename" class="absolute top-2 right-3 text-xs font-mono">
         {{ filename }}
       </span>
diff --git a/components/content/design-kit/DesignKitLogo.vue b/components/content/design-kit/DesignKitLogo.vue
index 03487b0f..a94dcb91 100644
--- a/components/content/design-kit/DesignKitLogo.vue
+++ b/components/content/design-kit/DesignKitLogo.vue
@@ -23,7 +23,7 @@ function showNotification() {
   <DesignKitGrid>
     <DesignKitGridItem v-for="item in logo" :key="item.name">
       <template #content>
-        <div class=" dark:bg-gray-700/20 h-full flex items-center justify-center p-4">
+        <div class="bg-gray-300/20 dark:bg-gray-700/20 h-full flex items-center justify-center p-4">
           <img :src="item.src.svg" :alt="`${item.name} logo`" class="h-full">
         </div>
       </template>
diff --git a/components/content/design-kit/DesignKitPackageLogos.vue b/components/content/design-kit/DesignKitPackageLogos.vue
index dcfe7c23..ef772090 100644
--- a/components/content/design-kit/DesignKitPackageLogos.vue
+++ b/components/content/design-kit/DesignKitPackageLogos.vue
@@ -17,7 +17,7 @@ function showNotification(title: string) {
   <DesignKitGrid v-if="data">
     <DesignKitGridItem v-for="pkg in data" :key="pkg.title">
       <template #content>
-        <div class=" dark:bg-gray-700/20 h-full flex items-center justify-center p-4">
+        <div class="bg-gray-300/20 dark:bg-gray-700/20 h-full flex items-center justify-center p-4">
           <img :alt="`Logo of ${pkg.title}`" :src="toPackageLogo(pkg.title)" class="h-full">
         </div>
       </template>
diff --git a/components/content/home/HomeHero.vue b/components/content/home/HomeHero.vue
index af8c7696..97946e0f 100644
--- a/components/content/home/HomeHero.vue
+++ b/components/content/home/HomeHero.vue
@@ -20,10 +20,10 @@ const { data } = await useAsyncData(' blog:latest', () => queryContent('/blog').
       <HomeHeroEyeBrow v-if="news" :prefix="news.prefix" :title="news.title" :path="news.path" />
       <HomeHeroEyeBrow v-else-if="data" prefix="What's new" :title="data.title" :path="data._path" />
       <div class="flex flex-col gap-2">
-        <h1 class="dark:text-gray-50 text-[2rem] md:text-4xl lg:text-5xl font-extrabold tracking-wide leading-normal lg:leading-normal">
+        <h1 class="text-gray-950 dark:text-gray-50 text-[2rem] md:text-4xl lg:text-5xl font-extrabold tracking-wide leading-normal lg:leading-normal">
           <ContentSlot :use="$slots.title" unwrap="p" />
         </h1>
-        <p class="dark:text-gray-400 text-2xl md:text-[1.75rem] leading-normal md:leading-normal">
+        <p class="text-gray-500 dark:text-gray-400 text-2xl md:text-[1.75rem] leading-normal md:leading-normal">
           <ContentSlot :use="$slots.subtitle" unwrap="p" />
         </p>
       </div>
diff --git a/components/design-kit/DesignKitGridItem.vue b/components/design-kit/DesignKitGridItem.vue
index f54487cb..06ee80d1 100644
--- a/components/design-kit/DesignKitGridItem.vue
+++ b/components/design-kit/DesignKitGridItem.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <div class="ring-1 dark:ring-gray-700 rounded-md overflow-hidden h-24">
+    <div class="ring-1 ring-gray-300 dark:ring-gray-700 rounded-md overflow-hidden h-24">
       <slot name="content" />
     </div>
     <div class="mt-1 font-semibold">
diff --git a/components/home/HomeHeroEyeBrow.vue b/components/home/HomeHeroEyeBrow.vue
index f872616c..4bd57581 100644
--- a/components/home/HomeHeroEyeBrow.vue
+++ b/components/home/HomeHeroEyeBrow.vue
@@ -8,10 +8,10 @@ defineProps<{
 
 <template>
   <NuxtLink :to="`${path}?utm_source=unjs.io&utm_medium=home-hero`" class="flex items-center gap-4">
-    <span class="px-3 py-1 dark:bg-gray-700/40 ring-1 dark:ring-gray-700 rounded-full text-sm dark:text-gray-50 nowrap font-medium">
+    <span class="px-3 py-1 dark:bg-gray-700/40 ring-1 ring-gray-700 dark:ring-gray-700 rounded-full text-sm text-gray-950 dark:text-gray-50 nowrap font-medium">
       {{ prefix }}
     </span>
-    <span class="flex items-center gap-2 dark:text-gray-400">
+    <span class="flex items-center gap-2 text-gray-500 dark:text-gray-400">
       <span class="text-left">{{ title }}</span>
       <span class="shrink-0 w-5 h-5 i-heroicons-chevron-right-20-solid" />
     </span>
diff --git a/components/home/HomeNoArticles.vue b/components/home/HomeNoArticles.vue
index d343fc7e..95e56cc3 100644
--- a/components/home/HomeNoArticles.vue
+++ b/components/home/HomeNoArticles.vue
@@ -4,7 +4,7 @@ const { data } = await useAsyncData('no-articles', () => queryContent('/_no-arti
 
 <template>
   <ProseContent v-if="data" class="mx-auto">
-    <ContentRenderer :value="data" class="px-8 py-12 md:py-20 flex flex-col gap-4 dark:text-gray-400 text-center" />
+    <ContentRenderer :value="data" class="px-8 py-12 md:py-20 flex flex-col gap-4 text-gray-500 dark:text-gray-400 text-center" />
   </ProseContent>
 </template>
 
diff --git a/components/home/HomeSection.vue b/components/home/HomeSection.vue
index 047b947c..31419b9a 100644
--- a/components/home/HomeSection.vue
+++ b/components/home/HomeSection.vue
@@ -1,14 +1,14 @@
 <template>
   <section class="flex flex-col gap-6">
-    <div class="px-6 py-8 dark:bg-gray-700/20 rounded-lg ring-1 dark:ring-gray-700">
+    <div class="px-6 py-8 bg-gray-300/20 ring-gray-300 dark:bg-gray-700/20 rounded-lg ring-1 dark:ring-gray-700">
       <div class="max-w-3xl flex flex-col gap-4">
         <p class="dark:text-gray-300 md:text-xl font-semibold tracking-wide">
           <slot name="eyebrow" />
         </p>
-        <h2 class="text-2xl md:text-3xl lg:text-4xl dark:text-gray-50 font-extrabold tracking-wide">
+        <h2 class="text-2xl md:text-3xl lg:text-4xl text-gray-950 dark:text-gray-50 font-extrabold tracking-wide">
           <slot name="title" />
         </h2>
-        <p class="text-lg md:text-[1.75rem] dark:text-gray-400 md:leading-tight">
+        <p class="text-lg md:text-[1.75rem] text-gray-500 dark:text-gray-400 md:leading-tight">
           <slot name="subtitle" />
         </p>
       </div>
diff --git a/components/home/HomeUnjsPhilosophyCard.vue b/components/home/HomeUnjsPhilosophyCard.vue
index 0b0b965b..4dbb391a 100644
--- a/components/home/HomeUnjsPhilosophyCard.vue
+++ b/components/home/HomeUnjsPhilosophyCard.vue
@@ -7,7 +7,7 @@ defineProps<{
 </script>
 
 <template>
-  <div class="overflow-hidden dark:bg-gray-700/20 rounded-xl ring-1 dark:ring-gray-700 flex flex-col gap-4">
+  <div class="overflow-hidden bg-gray-300/20 ring-gray-300 dark:bg-gray-700/20 rounded-xl ring-1 dark:ring-gray-700 flex flex-col gap-4">
     <AppColorModeImage
       :light="card.image"
       :dark="card.imageDark"
@@ -16,10 +16,10 @@ defineProps<{
       class="aspect-video"
     />
     <div class="px-6 pb-5 flex flex-col gap-2">
-      <h3 class="md:text-xl dark:text-gray-50 font-bold">
+      <h3 class="md:text-xl text-gray-950 dark:text-gray-50 font-bold">
         {{ card.title }}
       </h3>
-      <p class="dark:text-gray-400">
+      <p class="text-gray-500 dark:text-gray-400">
         {{ card.description }}
       </p>
     </div>
diff --git a/components/package/PackageCard.vue b/components/package/PackageCard.vue
index 73315d4a..e62d1201 100644
--- a/components/package/PackageCard.vue
+++ b/components/package/PackageCard.vue
@@ -10,10 +10,10 @@ defineProps<{
 </script>
 
 <template>
-  <UCard as="article" :ui="{ base: 'h-full relative flex flex-col', background: 'dark:bg-gray-700/40 hover:dark:bg-gray-700/60', divide: '', shadow: 'shadow-none hover:shadow-lg ', ring: 'dark:highlight-white/10', rounded: 'rounded-lg', header: { base: 'flex gap-3 items-center', padding: 'py-0 pt-4 sm:px-4 sm:pt-4' }, body: { base: 'grow', padding: 'p-4 sm:p-4' }, footer: { padding: 'py-0 pb-4 sm:px-4 sm:pb-4' } }">
+  <UCard as="article" :ui="{ base: 'h-full relative flex flex-col', background: 'bg-gray-300/20 hover:bg-gray-300/40 dark:bg-gray-700/40 hover:dark:bg-gray-700/60', divide: '', shadow: 'shadow-none hover:dark:shadow-lg ', ring: 'dark:highlight-white/10', rounded: 'rounded-lg', header: { base: 'flex gap-3 items-center', padding: 'py-0 pt-4 sm:px-4 sm:pt-4' }, body: { base: 'grow', padding: 'p-4 sm:p-4' }, footer: { padding: 'py-0 pb-4 sm:px-4 sm:pb-4' } }">
     <template #header>
       <img :src="toPackageLogo(title!)" :alt="`Logo of ${title}`" w-12 h-12>
-      <h3 class="dark:text-gray-50 text-xl font-semibold">
+      <h3 class="text-gray-950 dark:text-gray-50 text-xl font-semibold">
         <NuxtLink :to="path" class="absolute inset-0" />
         {{ title }}
       </h3>
diff --git a/components/package/PackageHeader.vue b/components/package/PackageHeader.vue
index 17692e1d..54850c6c 100644
--- a/components/package/PackageHeader.vue
+++ b/components/package/PackageHeader.vue
@@ -8,10 +8,10 @@ defineProps<{
 <template>
   <header class="grid grid-cols-[1.75rem_auto] md:grid-cols-[3rem_auto] items-center gap-x-3 gap-y-1 md:gap-x-5 md:gap-y-0">
     <img :src="toPackageLogo(name)" :alt="`Logo of ${name}`" width="48" height="48" class="w-7 h-7 md:w-12 md:h-12 row-span-2">
-    <h1 class="dark:text-gray-50 text-2xl md:text-3xl font-bold tracking-wide">
+    <h1 class="text-gray-950 dark:text-gray-50 text-2xl md:text-3xl font-bold tracking-wide">
       {{ name }}
     </h1>
-    <p class="col-span-2 md:col-span-1 md:col-start-2 dark:text-gray-400 font-italic font-medium">
+    <p class="col-span-2 md:col-span-1 md:col-start-2 text-gray-500 dark:text-gray-400 font-italic font-medium">
       {{ description }}
     </p>
   </header>
diff --git a/components/page/PageHeader.vue b/components/page/PageHeader.vue
index 3340fb7e..80355fe4 100644
--- a/components/page/PageHeader.vue
+++ b/components/page/PageHeader.vue
@@ -6,14 +6,14 @@ defineProps<{
 </script>
 
 <template>
-  <section class="relative overflow-hidden px-4 py-8 lg:px-8 lg:py-12 rounded-xl ring-1 dark:ring-zinc-700 grid lg:grid-cols-2 lg:min-h-[280px]">
+  <section class="relative overflow-hidden px-4 py-8 lg:px-8 lg:py-12 rounded-xl ring-1 ring-gray-300 dark:ring-gray-700 grid lg:grid-cols-2 lg:min-h-[280px]">
     <div class="flex flex-col gap-2 lg:gap-4">
-      <h1 class="dark:text-gray-50 text-2xl md:text-3xl lg:text-[2.5rem] font-extrabold tracking-wide leading-normal md:leading-normal">
+      <h1 class="text-gray-950 dark:text-gray-50 text-2xl md:text-3xl lg:text-[2.5rem] font-extrabold tracking-wide leading-normal md:leading-normal">
         <slot name="title">
           {{ title }}
         </slot>
       </h1>
-      <p class="max-w-2xl dark:text-zinc-400 text-lg md:text-[1.75rem] leading-normal md:leading-normal">
+      <p class="max-w-2xl text-gray-500 dark:text-gray-400 text-lg md:text-[1.75rem] leading-normal md:leading-normal">
         <slot name="description">
           {{ description }}
         </slot>
diff --git a/components/prose/Prose.vue b/components/prose/Prose.vue
index d8d413a2..f0a0c419 100644
--- a/components/prose/Prose.vue
+++ b/components/prose/Prose.vue
@@ -14,7 +14,7 @@ provide('toc', props.toc)
     <div class="row-start-1">
       <slot name="header">
         <header v-if="title">
-          <h1 class="text-zinc-900 text-2xl md:text-3xl font-bold tracking-wide">
+          <h1 class="text-gray-950 dark:text-gray-50 text-2xl md:text-3xl font-bold tracking-wide">
             {{ title }}
           </h1>
         </header>
diff --git a/components/prose/header/ProseHeaderArticle.vue b/components/prose/header/ProseHeaderArticle.vue
index 47a5044b..18594c0a 100644
--- a/components/prose/header/ProseHeaderArticle.vue
+++ b/components/prose/header/ProseHeaderArticle.vue
@@ -14,13 +14,13 @@ defineProps<{
 <template>
   <header class="relative" :class="{ 'pt-10': date }">
     <div class="flex flex-col gap-1">
-      <h1 class="text-2xl md:text-3xl dark:text-gray-50 font-bold tracking-wide">
+      <h1 class="text-2xl md:text-3xl text-gray-950 dark:text-gray-50 font-bold tracking-wide">
         {{ title }}
       </h1>
     </div>
 
     <template v-if="date || categories">
-      <div class="absolute top-0 left-0 text-sm dark:text-gray-400 font-light">
+      <div class="absolute top-0 left-0 text-sm text-gray-500 dark:text-gray-400 font-light">
         <dl class="flex gap-1">
           <template v-if="date">
             <dt class="sr-only">
@@ -64,11 +64,11 @@ defineProps<{
               <address class="flex items-center gap-2 not-italic">
                 <img :src="author.picture" :alt="`Profil picture of ${author.name}`" width="36" height="36" class="w-9 h-9 rounded-full">
                 <div class="text-sm">
-                  <div class="dark:text-gray-50 leading-none font-light">
+                  <div class="text-gray-950 dark:text-gray-50 leading-none font-light">
                     {{ author.name }}
                   </div>
                   <div class="mt-1">
-                    <NuxtLink rel="author noopener" :to="`https://x.com/${author.twitter}`" target="_blank" class="dark:text-gray-400 hover:dark:text-gray-50 leading-none transition ease-in">
+                    <NuxtLink rel="author noopener" :to="`https://x.com/${author.twitter}`" target="_blank" class="text-gray-500 hover:text-gray-950 dark:text-gray-400 hover:dark:text-gray-50 leading-none transition ease-in">
                       @{{ author.twitter }}
                     </NuxtLink>
                   </div>
diff --git a/components/prose/nav/ProseNavGroup.vue b/components/prose/nav/ProseNavGroup.vue
index 1fbac32d..349241c1 100644
--- a/components/prose/nav/ProseNavGroup.vue
+++ b/components/prose/nav/ProseNavGroup.vue
@@ -11,7 +11,7 @@ const id = useProseNavGroupId()
 
 <template>
   <div class="text-sm">
-    <div class="dark:text-gray-50 font-semibold">
+    <div class="text-gray-950 dark:text-gray-50 font-semibold">
       <div class="hidden md:block">
         <slot name="title" />
       </div>
@@ -22,7 +22,7 @@ const id = useProseNavGroupId()
         <span class="i-heroicons-chevron-right-20-solid w-4 h-4 transition ease-in" :class="{ 'transform rotate-90': open }" />
       </UButton>
     </div>
-    <div :id="id" class="mt-2 dark:text-zinc-400 md:block" :class="{ hidden: !open && !noDisclosure }">
+    <div :id="id" class="mt-2 text-gray-500 dark:text-gray-400 md:block" :class="{ hidden: !open && !noDisclosure }">
       <slot name="links" />
     </div>
   </div>
diff --git a/components/prose/nav/ProseNavGroupLink.vue b/components/prose/nav/ProseNavGroupLink.vue
index a23e1147..bb38769e 100644
--- a/components/prose/nav/ProseNavGroupLink.vue
+++ b/components/prose/nav/ProseNavGroupLink.vue
@@ -17,8 +17,8 @@ const external = computed(() => {
 </script>
 
 <template>
-  <NuxtLink :to="to" class="block group py-1 hover:dark:text-gray-50 transition ease-in" rel="noopener">
-    <div class="text-xs font-medium dark:text-zinc-400" :class="{ 'ml-7': icon }">
+  <NuxtLink :to="to" class="block group py-1 hover:text-gray-950 hover:dark:text-gray-50 transition ease-in" rel="noopener">
+    <div class="text-xs font-medium text-gray-500 dark:text-gray-400" :class="{ 'ml-7': icon }">
       <slot name="label">
         {{ label }}
       </slot>
diff --git a/components/prose/nav/ProseNavToc.vue b/components/prose/nav/ProseNavToc.vue
index 5482e87d..4778818c 100644
--- a/components/prose/nav/ProseNavToc.vue
+++ b/components/prose/nav/ProseNavToc.vue
@@ -6,7 +6,7 @@ const toc = inject<Toc>('toc')
 const { activeHeadings } = useScrollSpyHeadings()
 
 function activeClass(id: string): string {
-  return activeHeadings.value.includes(id) ? '!text-primary' : '' // Important to override text-zinc-900
+  return activeHeadings.value.includes(id) ? '!dark:text-primary !text-primary-600' : '' // Important to override text-zinc-900
 }
 </script>
 
@@ -16,7 +16,7 @@ function activeClass(id: string): string {
       On this page
     </template>
     <template #links>
-      <ol v-if="toc" class=" dark:text-gray-400">
+      <ol v-if="toc" class="text-gray-500 dark:text-gray-400">
         <li v-for="link in toc.links" :key="link.id">
           <ProseNavGroupLink :to="`#${link.id}`" :class="activeClass(link.id)">
             {{ link.text }}
diff --git a/pages/blog/index.vue b/pages/blog/index.vue
index 7301e1b4..5dd63dfc 100644
--- a/pages/blog/index.vue
+++ b/pages/blog/index.vue
@@ -96,7 +96,7 @@ function resetFilter() {
       <PageHeader :title="page.title" :description="page.description">
         <template #right>
           <div>
-            <img src="/assets/header/blog.png" alt="Illustration" aria-hidden="true" class="absolute left-24 top-0 opacity-70 w-80">
+            <AppColorModeImage light="/assets/header/light/blog.png" dark="/assets/header/blog.png" alt="Illustration" aria-hidden="true" class="absolute left-24 top-0 opacity-70 w-80" />
           </div>
         </template>
       </PageHeader>
diff --git a/pages/design-kit.vue b/pages/design-kit.vue
index ef0fdcb9..ce286deb 100644
--- a/pages/design-kit.vue
+++ b/pages/design-kit.vue
@@ -30,7 +30,7 @@ useSeoMeta({
       <PageHeader :title="page.title" :description="page.description">
         <template #right>
           <div>
-            <img src="/assets/header/design-kit.png" alt="Illustration" aria-hidden="true" class="absolute left-24 -top-12 w-80">
+            <AppColorModeImage light="/assets/header/light/design-kit.png" dark="/assets/header/design-kit.png" alt="Illustration" aria-hidden="true" class="absolute left-24 -top-12 w-80" />
           </div>
         </template>
       </PageHeader>
diff --git a/pages/packages/index.vue b/pages/packages/index.vue
index c5f925e9..0721767c 100644
--- a/pages/packages/index.vue
+++ b/pages/packages/index.vue
@@ -76,9 +76,9 @@ function resetFilter() {
     <template #header>
       <PageHeader :title="page.title" :description="page.description">
         <template #right>
-          <div class="flex justify-end gap-12 text-gray-400 font-medium text-xl">
+          <div class="flex justify-end gap-12 text-gray-500 dark:text-gray-400 font-medium text-xl">
             <div class="flex flex-col gap-2">
-              <span class="text-gray-50 text-8xl font-extrabold">
+              <span class="text-gray-950 dark:text-gray-50 text-8xl font-extrabold">
                 {{ packages!.length }}
               </span>
               <span>
@@ -86,7 +86,7 @@ function resetFilter() {
               </span>
             </div>
             <div class="flex flex-col gap-2">
-              <span class="text-gray-50 text-8xl font-extrabold">
+              <span class="text-gray-950 dark:text-gray-50 text-8xl font-extrabold">
                 {{ formatNumber(monthlyDownloads, 0) }}
               </span>
               <span>