diff --git a/apps/pink/public/prismjs.css b/apps/pink/public/prismjs.css
index 0657fce051..8b586eead8 100644
--- a/apps/pink/public/prismjs.css
+++ b/apps/pink/public/prismjs.css
@@ -194,7 +194,7 @@ OVERRIDE
 
 
 .box {
-    --p-box-background-color: var(--color-neutral-400) !important;
+    --p-box-background-color: var(--color-neutral-100) !important;
 }
 
 body.theme-light .box {
diff --git a/apps/pink/src/components/CodeEditor.svelte b/apps/pink/src/components/CodeEditor.svelte
index d266725341..a77cde9359 100644
--- a/apps/pink/src/components/CodeEditor.svelte
+++ b/apps/pink/src/components/CodeEditor.svelte
@@ -75,10 +75,10 @@
   }
 
   .cm-selectionBackground {
-    background: hsl(var(--color-neutral-100)) !important;
+    background: hsl(var(--color-neutral-60)) !important;
 
     body.theme-light & {
-      background: hsl(var(--color-neutral-50)) !important;
+      background: hsl(var(--color-neutral-20)) !important;
     }
   }
 </style>
diff --git a/apps/pink/src/components/IconsGrid.astro b/apps/pink/src/components/IconsGrid.astro
index b99198a984..5f3fe2455f 100644
--- a/apps/pink/src/components/IconsGrid.astro
+++ b/apps/pink/src/components/IconsGrid.astro
@@ -74,11 +74,11 @@ const removePublic = (path: string) => path.replace("/public", "");
 
   .copy-overlay {
     --bg-clr: hsl(var(--color-neutral-10) / 90%);
-    --clr: hsl(var(--color-neutral-150));
+    --clr: hsl(var(--color-neutral-80));
   }
 
   :global(.theme-dark) .copy-overlay {
-    --bg-clr: hsl(var(--color-neutral-500) / 90%);
+    --bg-clr: hsl(var(--color-neutral-105) / 90%);
     --clr: white;
   }
 
diff --git a/apps/pink/src/components/JoinCommunity.svelte b/apps/pink/src/components/JoinCommunity.svelte
index 48af5a0921..4796dcaac6 100644
--- a/apps/pink/src/components/JoinCommunity.svelte
+++ b/apps/pink/src/components/JoinCommunity.svelte
@@ -143,7 +143,7 @@
   }
 
   .user-profile-info {
-    color: hsl(var(--color-neutral-100));
+    color: hsl(var(--color-neutral-60));
 
     :global(.theme-dark) & {
       color: hsl(var(--color-neutral-0));
diff --git a/apps/pink/src/components/Search.svelte b/apps/pink/src/components/Search.svelte
index 0b53ddb2e8..ff4b37e8ae 100644
--- a/apps/pink/src/components/Search.svelte
+++ b/apps/pink/src/components/Search.svelte
@@ -211,7 +211,7 @@
 
       &:hover,
       &.selected {
-        background-color: hsl(var(--color-neutral-200));
+        background-color: hsl(var(--color-neutral-85));
 
         :global(.theme-light) & {
           background-color: hsl(var(--color-neutral-10));
diff --git a/apps/pink/src/components/homepage/TryItOut.svelte b/apps/pink/src/components/homepage/TryItOut.svelte
index 91f6f390e7..6315ff9b8a 100644
--- a/apps/pink/src/components/homepage/TryItOut.svelte
+++ b/apps/pink/src/components/homepage/TryItOut.svelte
@@ -232,7 +232,7 @@
     }
 
     :global(#{$theme-dark}) & {
-      --p-card-bg-color-default: var(--color-neutral-400);
+      --p-card-bg-color-default: var(--color-neutral-100);
     }
   }
 
diff --git a/apps/pink/src/layouts/Layout.astro b/apps/pink/src/layouts/Layout.astro
index 0320fadf7c..9ee8de82c2 100644
--- a/apps/pink/src/layouts/Layout.astro
+++ b/apps/pink/src/layouts/Layout.astro
@@ -212,11 +212,11 @@ const titleFallback = "Pink Design - Appwrite's Design System";
 
   body {
     --search-bg-color: var(--color-neutral-0);
-    --search-color: var(--color-neutral-100);
+    --search-color: var(--color-neutral-60);
   }
   body.theme-dark {
-    --search-bg-color: var(--color-neutral-400);
-    --search-color: var(--color-neutral-50);
+    --search-bg-color: var(--color-neutral-100);
+    --search-color: var(--color-neutral-20);
   }
 
   .color-box li {
diff --git a/apps/pink/src/pages/elements/loader.mdx b/apps/pink/src/pages/elements/loader.mdx
index 61bbeab556..324c4d7c27 100644
--- a/apps/pink/src/pages/elements/loader.mdx
+++ b/apps/pink/src/pages/elements/loader.mdx
@@ -28,8 +28,8 @@ Work different from the other rotate loaders.
 | ----------------------------- | -------------------------------------------------------------------------------- | -------------------------------------------------- |
 | `--loading`                   | Loading precent                                                                  | `--loading: 65%;`                                  |
 | `-loader-bg-color-light`      | inner circle color (light-mode) that will fit background-color of the container  | `--loader-bg-color-light: var(--color-neutral-5);` |
-| `-loader-bg-color-dark`       | inner circle color (dark-mode) that will fit background-color of the container   | `--loader-bg-color-dark: var(--color-neutral-400);`|
+| `-loader-bg-color-dark`       | inner circle color (dark-mode) that will fit background-color of the container   | `--loader-bg-color-dark: var(--color-neutral-100);`|
 
 <Preview center>
-    <div class="loader is-loading" style="--loading:65%; --loader-bg-color-light:var(--color-neutral-5); --loader-bg-color-dark:var(--color-neutral-400);"></div>
+    <div class="loader is-loading" style="--loading:65%; --loader-bg-color-light:var(--color-neutral-5); --loader-bg-color-dark:var(--color-neutral-100);"></div>
 </Preview>
\ No newline at end of file
diff --git a/apps/pink/src/pages/foundations/colors.mdx b/apps/pink/src/pages/foundations/colors.mdx
index 614933ae6b..f6fadc3647 100644
--- a/apps/pink/src/pages/foundations/colors.mdx
+++ b/apps/pink/src/pages/foundations/colors.mdx
@@ -81,44 +81,44 @@ Pink Design's neutral palette is used for both light and dark mode. Neutrals are
             <p class="u-text-center">~-~-color-neutral-10</p>
         </li>
         <li>
-            <div class="box" style="background-color:hsl(var(--color-neutral-30));"></div>
-            <p class="u-text-center">~-~-color-neutral-30</p>
+            <div class="box" style="background-color:hsl(var(--color-neutral-15));"></div>
+            <p class="u-text-center">~-~-color-neutral-15</p>
         </li>
         <li>
-            <div class="box" style="background-color:hsl(var(--color-neutral-50));"></div>
-            <p class="u-text-center">~-~-color-neutral-50</p>
+            <div class="box" style="background-color:hsl(var(--color-neutral-20));"></div>
+            <p class="u-text-center">~-~-color-neutral-20</p>
         </li>
         <li>
-            <div class="box" style="background-color:hsl(var(--color-neutral-70));"></div>
-            <p class="u-text-center">~-~-color-neutral-70</p>
+            <div class="box" style="background-color:hsl(var(--color-neutral-50));"></div>
+            <p class="u-text-center">~-~-color-neutral-50</p>
         </li>
         <li>
-            <div class="box" style="background-color:hsl(var(--color-neutral-100));"></div>
-            <p class="u-text-center">~-~-color-neutral-100</p>
+            <div class="box" style="background-color:hsl(var(--color-neutral-60));"></div>
+            <p class="u-text-center">~-~-color-neutral-60</p>
         </li>
         <li>
-            <div class="box" style="background-color:hsl(var(--color-neutral-120));"></div>
-            <p class="u-text-center">~-~-color-neutral-120</p>
+            <div class="box" style="background-color:hsl(var(--color-neutral-70));"></div>
+            <p class="u-text-center">~-~-color-neutral-70</p>
         </li>
         <li>
-            <div class="box" style="background-color:hsl(var(--color-neutral-150));"></div>
-            <p class="u-text-center">~-~-color-neutral-150</p>
+            <div class="box" style="background-color:hsl(var(--color-neutral-80));"></div>
+            <p class="u-text-center">~-~-color-neutral-80</p>
         </li>
         <li>
-            <div class="box" style="background-color:hsl(var(--color-neutral-200));"></div>
-            <p class="u-text-center">~-~-color-neutral-200</p>
+            <div class="box" style="background-color:hsl(var(--color-neutral-85));"></div>
+            <p class="u-text-center">~-~-color-neutral-85</p>
         </li>
         <li>
-            <div class="box" style="background-color:hsl(var(--color-neutral-300));"></div>
-            <p class="u-text-center">~-~-color-neutral-300</p>
+            <div class="box" style="background-color:hsl(var(--color-neutral-90));"></div>
+            <p class="u-text-center">~-~-color-neutral-90</p>
         </li>
         <li>
-            <div class="box" style="background-color:hsl(var(--color-neutral-400));"></div>
-            <p class="u-text-center">~-~-color-neutral-400</p>
+            <div class="box" style="background-color:hsl(var(--color-neutral-100));"></div>
+            <p class="u-text-center">~-~-color-neutral-100</p>
         </li>
         <li>
-            <div class="box" style="background-color:hsl(var(--color-neutral-500));"></div>
-            <p class="u-text-center">~-~-color-neutral-500</p>
+            <div class="box" style="background-color:hsl(var(--color-neutral-105);"></div>
+            <p class="u-text-center">~-~-color-neutral-105</p>
         </li>
     </ul>
     </div>
diff --git a/apps/pink/src/pages/foundations/dark-theme.mdx b/apps/pink/src/pages/foundations/dark-theme.mdx
index 6df610423d..5da7dc0b82 100644
--- a/apps/pink/src/pages/foundations/dark-theme.mdx
+++ b/apps/pink/src/pages/foundations/dark-theme.mdx
@@ -38,13 +38,13 @@ This global CSS class is declared as a Sass variable in order to be used inside
     $theme-dark: ".theme-dark";
     .partial {
        --p-partial-bg-color: var(--color-neutral-0);
-       --p-partial-color: var(--color-neutral-100);
+       --p-partial-color: var(--color-neutral-60);
        background-color: hsl(var(--partial-bg-color));
        color: hsl(var(--partial-color));
        /* Dark Theme */
        #{$theme-dark} & {
-         --p-partial-bg-color: var(--color-neutral-400);
-         --p-partial-color: var(--color-neutral-50);
+         --p-partial-bg-color: var(--color-neutral-100);
+         --p-partial-color: var(--color-neutral-20);
        }
     }
     </style>
@@ -65,14 +65,14 @@ This global CSS class is declared as a Sass variable in order to be used inside
     <style>
         .partial {
           --p-partial-bg-color: var(--color-neutral-0);
-          --p-partial-color: var(--color-neutral-100);
+          --p-partial-color: var(--color-neutral-60);
           background-color: hsl(var(--partial-bg-color));
           color: hsl(var(--partial-color));
         }
         /* Dark Theme */
         .theme-dark .partial {
-          --p-partial-bg-color: var(--color-neutral-400);
-          --p-partial-color: var(--color-neutral-50);
+          --p-partial-bg-color: var(--color-neutral-100);
+          --p-partial-color: var(--color-neutral-20);
         }
     </style>
 `}
diff --git a/apps/pink/src/pages/index.astro b/apps/pink/src/pages/index.astro
index 4a42631c05..0a105d3076 100644
--- a/apps/pink/src/pages/index.astro
+++ b/apps/pink/src/pages/index.astro
@@ -538,7 +538,7 @@ const articles: Article[] = [
 
   body {
     &#{$theme-dark} {
-      --p-body-bg-color: var(--color-neutral-500);
+      --p-body-bg-color: var(--color-neutral-105);
     }
   }
 
@@ -663,7 +663,7 @@ const articles: Article[] = [
           --anim-duration: 400ms;
 
           .theme-dark & {
-            background-color: hsl(var(--color-neutral-200));
+            background-color: hsl(var(--color-neutral-85));
           }
 
           img {
@@ -904,15 +904,15 @@ const articles: Article[] = [
     }
 
     #{$theme-dark} & {
-      --p-apple-window-bg-color: var(--color-neutral-300);
+      --p-apple-window-bg-color: var(--color-neutral-90);
     }
   }
 
   .read-time {
-    --p-text-color: var(--color-neutral-200);
+    --p-text-color: var(--color-neutral-85);
     color: hsl(var(--p-text-color));
     #{$theme-dark} & {
-      --p-text-color: var(--color-neutral-30);
+      --p-text-color: var(--color-neutral-15);
     }
   }
 
@@ -975,7 +975,7 @@ const articles: Article[] = [
       }
 
       #{$theme-dark} & {
-        --p-article-item-bg-color: var(--color-neutral-200);
+        --p-article-item-bg-color: var(--color-neutral-85);
       }
     }
   }
diff --git a/packages/ui/src/1-css-variables/_colors.scss b/packages/ui/src/1-css-variables/_colors.scss
index d7940dd93a..5c0e71b980 100644
--- a/packages/ui/src/1-css-variables/_colors.scss
+++ b/packages/ui/src/1-css-variables/_colors.scss
@@ -9,20 +9,20 @@
   /** Neutral **/
 
   --color-neutral-0:   0 0% 100%;    /* #ffffff */
-  --color-neutral-5:   240 100% 99%; /* #FCFCFF */
-  --color-neutral-10:  240 30% 96%;  /* #F2F2F8 */
-  --color-neutral-30:  232 21% 93%;  /* #E8E9F0 */
-  --color-neutral-50:  234 19% 81%;  /* #C4C6D7 */
+  --color-neutral-5:   240 11% 98%;  /* #FAFAFB */
+  --color-neutral-10:  240 9% 94%;   /* #EDEDF0 */
+  --color-neutral-15:  240 4% 85%;   /* #D8D8DB */
+  --color-neutral-20:  240 3% 77%;   /* #C3C3C6 */
 
-  --color-neutral-70:  223 14% 58%;  /* #868EA3 */
-  --color-neutral-100: 218 12% 43%;  /* #616B7C */
-  --color-neutral-120: 222 14% 36%;  /* #4F5769 */
+  --color-neutral-50:  240 2% 52%;   /* #818186 */
+  --color-neutral-60:  240 2% 43%;   /* #6C6C71 */
+  --color-neutral-70:  240 3% 35%;   /* #56565C */
 
-  --color-neutral-150: 229 17% 26%;  /* #373B4D */
-  --color-neutral-200: 234 19% 19%;  /* #282A3B */
-  --color-neutral-300: 240 19% 13%;  /* #1B1B28 */
-  --color-neutral-400: 240 21% 11%;  /* #171723 */
-  --color-neutral-500: 240 22% 10%;  /* #14141F */
+  --color-neutral-80:  240 4% 27%;   /* #414146 */
+  --color-neutral-85:  240 4% 18%;   /* #2D2D31 */
+  --color-neutral-90:  240 7% 12%;   /* #1D1D21 */
+  --color-neutral-100: 240 6% 10%;   /* #19191C */
+  --color-neutral-105: 240 5% 8%;    /* #141416 */
 
   /** Information **/
   --color-information-hue: 189;
@@ -88,31 +88,31 @@
 :root {
   --color-pink-text: var(--color-primary-100);
 
-  --color-text-disabled: var(--color-neutral-50);
-  --color-text-offline: var(--color-neutral-70);
+  --color-text-disabled: var(--color-neutral-20);
+  --color-text-offline: var(--color-neutral-50);
   --color-text-info: var(--color-information-100);
   --color-text-danger: var(--color-danger-100);
   --color-text-warning: var(--color-warning-100);
   --color-text-success: var(--color-success-100);
 
-  --color-text-gray: var(--color-neutral-70);
+  --color-text-gray: var(--color-neutral-50);
 
   --color-border: var(--color-neutral-10);
-  --scroll-color: var(--color-neutral-50);
+  --scroll-color: var(--color-neutral-20);
 
   #{$theme-dark} {
     --color-pink-text: var(--color-primary-200);
 
-    --color-text-disabled: var(--color-neutral-100);
-    --color-text-offline: var(--color-neutral-70);
+    --color-text-disabled: var(--color-neutral-60);
+    --color-text-offline: var(--color-neutral-50);
     --color-text-info: var(--color-information-100);
     --color-text-danger: var(--color-danger-100);
     --color-text-warning: var(--color-warning-100);
     --color-text-success: var(--color-success-100);
 
-    --color-text-gray: var(--color-neutral-50);
+    --color-text-gray: var(--color-neutral-20);
 
-    --color-border: var(--color-neutral-200);
-    --scroll-color: var(--color-neutral-150);
+    --color-border: var(--color-neutral-85);
+    --scroll-color: var(--color-neutral-80);
   }
 }
\ No newline at end of file
diff --git a/packages/ui/src/1-css-variables/_shadows.scss b/packages/ui/src/1-css-variables/_shadows.scss
index 64f3f89d1b..859355254d 100644
--- a/packages/ui/src/1-css-variables/_shadows.scss
+++ b/packages/ui/src/1-css-variables/_shadows.scss
@@ -1,7 +1,7 @@
 @use '../abstract' as *;
 
 :root {
-  --shadow-color: var(--color-neutral-150);
+  --shadow-color: var(--color-neutral-80);
 
   --shadow-small:   #{pxToRem(0) pxToRem(16) pxToRem(32) hsl(var(--shadow-color) / 0.02)};
   --shadow-large:   #{pxToRem(0) pxToRem(16) pxToRem(32) hsl(var(--shadow-color) / 0.04)};
@@ -11,7 +11,7 @@
   --focus-box-shadow: #{$focus};
 
   #{$theme-dark} {
-    --shadow-color: var(--color-neutral-500);
+    --shadow-color: var(--color-neutral-105);
 
     --shadow-small:   #{pxToRem(0) pxToRem(16) pxToRem(32) hsl(var(--shadow-color) / 0.5)};
     --shadow-large:   #{pxToRem(0) pxToRem(16) pxToRem(32) hsl(var(--shadow-color) / 1)};
diff --git a/packages/ui/src/2-resets/_typography.scss b/packages/ui/src/2-resets/_typography.scss
index 1451bd2d2f..f83921cefe 100644
--- a/packages/ui/src/2-resets/_typography.scss
+++ b/packages/ui/src/2-resets/_typography.scss
@@ -13,7 +13,7 @@ html {
 }
 
 body {
-  --p-body-text-color: var(--color-neutral-100);
+  --p-body-text-color: var(--color-neutral-60);
   --p-body-bg-color: var(--color-neutral-5);
   font-family: var(--content-font);
   -webkit-font-smoothing: antialiased;
@@ -24,8 +24,8 @@ body {
   background-color: hsl(var(--p-body-bg-color));
 
   &#{$theme-dark} {
-    --p-body-text-color: var(--color-neutral-50);
-    --p-body-bg-color: var(--color-neutral-500);
+    --p-body-text-color: var(--color-neutral-20);
+    --p-body-bg-color: var(--color-neutral-105);
   }
 }
 
@@ -50,7 +50,7 @@ code  {
 
 /* color for both heading */
 [class*="heading-"] {
-  --p-heading-text-color: var(--heading-text-color, var(--color-neutral-150));
+  --p-heading-text-color: var(--heading-text-color, var(--color-neutral-80));
   color: hsl(var(--p-heading-text-color));
   #{$theme-dark} & {
     --p-heading-text-color: var(--heading-text-color, var(--color-neutral-10));
diff --git a/packages/ui/src/6-elements/_avatar.scss b/packages/ui/src/6-elements/_avatar.scss
index c4dc7e44a5..53112d7587 100644
--- a/packages/ui/src/6-elements/_avatar.scss
+++ b/packages/ui/src/6-elements/_avatar.scss
@@ -9,14 +9,14 @@
   --p-avatar-border-color: var(--p-avatar-border-color-default);
 
   /* default */
-  --p-avatar-text-color-default:   var(--color-neutral-100);
+  --p-avatar-text-color-default:   var(--color-neutral-60);
   --p-avatar-bg-color-default:     var(--color-neutral-5);
   --p-avatar-border-color-default: var(--color-neutral-10);
 
   /* empty */
-  --p-avatar-text-color-empty:   var(--color-neutral-50);
+  --p-avatar-text-color-empty:   var(--color-neutral-20);
   --p-avatar-bg-color-empty:     var(--transparent);
-  --p-avatar-border-color-empty: var(--color-neutral-50);
+  --p-avatar-border-color-empty: var(--color-neutral-20);
 
   /* orange */
   --p-avatar-text-color-orange:   var(--color-neutral-0);
@@ -185,16 +185,16 @@
 
   #{$theme-dark} & {
     /* default */
-    --p-avatar-text-color-default:    var(--color-neutral-50);
-    --p-avatar-bg-color-default:      var(--color-neutral-200);
-    --p-avatar-border-color-default:  var(--color-neutral-150);
+    --p-avatar-text-color-default:    var(--color-neutral-20);
+    --p-avatar-bg-color-default:      var(--color-neutral-85);
+    --p-avatar-border-color-default:  var(--color-neutral-80);
 
     /* colors avatars*/
-    --p-avatar-text-color-orange: var(--color-neutral-150);
-    --p-avatar-text-color-green:  var(--color-neutral-150);
-    --p-avatar-text-color-blue:   var(--color-neutral-150);
-    --p-avatar-text-color-pink:   var(--color-neutral-150);
-    --p-avatar-text-color-red:    var(--color-neutral-150);
+    --p-avatar-text-color-orange: var(--color-neutral-80);
+    --p-avatar-text-color-green:  var(--color-neutral-80);
+    --p-avatar-text-color-blue:   var(--color-neutral-80);
+    --p-avatar-text-color-pink:   var(--color-neutral-80);
+    --p-avatar-text-color-red:    var(--color-neutral-80);
 
 
   }
@@ -227,6 +227,6 @@
     border-width:pxToRem(1);
   }
   #{$theme-dark} & {
-    --p-avatar-group-border-color: var(--color-neutral-500);
+    --p-avatar-group-border-color: var(--color-neutral-105);
   }
 }
\ No newline at end of file
diff --git a/packages/ui/src/6-elements/_box.scss b/packages/ui/src/6-elements/_box.scss
index ffb7926992..23ec2c1e46 100644
--- a/packages/ui/src/6-elements/_box.scss
+++ b/packages/ui/src/6-elements/_box.scss
@@ -1,13 +1,13 @@
 @use '../abstract' as *;
 
 .box {
-  --p-box-text-color: var(--color-neutral-100);
+  --p-box-text-color: var(--color-neutral-60);
 
   --p-box-background-color: var(--p-box-background-color-default);
   --p-box-background-color-default: var(--color-neutral-5);
   --p-box-background-color-hover: var(--color-neutral-10);
 
-  --p-box-border-color: var(--color-neutral-30);
+  --p-box-border-color: var(--color-neutral-15);
 
   --p-box-padding: var(--box-padding, #{pxToRem(24)} );
   --p-box-border-radius: var(--box-border-radius, var(--border-radius-xsmall));
@@ -36,9 +36,9 @@
 
   #{$theme-dark} & {
     --p-box-text-color: var(--color-neutral-5);
-    --p-box-background-color-default: var(--color-neutral-200);
-    --p-box-background-color-hover: var(--color-neutral-150);
-    --p-box-border-color: var(--color-neutral-150);
+    --p-box-background-color-default: var(--color-neutral-85);
+    --p-box-background-color-hover: var(--color-neutral-80);
+    --p-box-border-color: var(--color-neutral-80);
   }
 }
 
diff --git a/packages/ui/src/6-elements/_button.scss b/packages/ui/src/6-elements/_button.scss
index 7a75f19235..929e10f2ab 100644
--- a/packages/ui/src/6-elements/_button.scss
+++ b/packages/ui/src/6-elements/_button.scss
@@ -31,7 +31,7 @@
     --p-button-color-active: var(--color-primary-300);
     --p-border-color-active: var(--color-primary-300);
 
-    --p-text-color-disabled: var(--color-neutral-50);
+    --p-text-color-disabled: var(--color-neutral-20);
     --p-button-color-disabled: var(--color-neutral-10);
     --p-border-color-disabled: var(--color-neutral-10);
 
@@ -104,17 +104,17 @@
 
         --p-border-color-active: var(--color-primary-300);
 
-        --p-text-color-disabled: var(--color-neutral-100);
-        --p-button-color-disabled: var(--color-neutral-150);
-        --p-border-color-disabled: var(--color-neutral-150);
+        --p-text-color-disabled: var(--color-neutral-60);
+        --p-button-color-disabled: var(--color-neutral-80);
+        --p-border-color-disabled: var(--color-neutral-80);
     }
     /** end main button */
 
     /* special color */
     &.is-github {
         --p-text-color-default: var(--color-neutral-0);
-        --p-button-color-default: var(--color-neutral-150);
-        --p-border-color-default: var(--color-neutral-150);
+        --p-button-color-default: var(--color-neutral-80);
+        --p-border-color-default: var(--color-neutral-80);
 
         --p-text-color-hover: var(--p-text-color-default);
         --p-button-color-hover: var(--p-button-color-default);
@@ -130,9 +130,9 @@
     }
 
     &.is-secondary {
-        --p-text-color-default: var(--color-neutral-100);
+        --p-text-color-default: var(--color-neutral-60);
         --p-button-color-default: var(--color-neutral-5);
-        --p-border-color-default: var(--color-neutral-30);
+        --p-border-color-default: var(--color-neutral-15);
 
         --p-text-color-hover: var(--p-text-color-default);
         --p-button-color-hover: var(--color-neutral-10);
@@ -142,24 +142,24 @@
         --p-button-color-focus: var(--p-button-color-default);
         --p-border-color-focus: var(--transparent);
 
-        --p-text-color-active: var(--color-neutral-300);
-        --p-button-color-active: var(--color-neutral-30);
-        --p-border-color-active: var(--color-neutral-30);
+        --p-text-color-active: var(--color-neutral-90);
+        --p-button-color-active: var(--color-neutral-15);
+        --p-border-color-active: var(--color-neutral-15);
 
-        --p-text-color-disabled: var(--color-neutral-50);
+        --p-text-color-disabled: var(--color-neutral-20);
         --p-button-color-disabled: var(--p-button-color-default);
-        --p-border-color-disabled: var(--color-neutral-30);
+        --p-border-color-disabled: var(--color-neutral-15);
 
 
         /** DARK MODE **/
         #{$theme-dark} & {
             --p-text-color-default: var(--color-neutral-5);
-            --p-button-color-default: var(--color-neutral-300);
-            --p-border-color-default: var(--color-neutral-150);
+            --p-button-color-default: var(--color-neutral-90);
+            --p-border-color-default: var(--color-neutral-80);
 
             --p-text-color-hover: var(--p-text-color-default);
             --p-button-color-hover: var(--transparent);
-            --p-border-color-hover: var(--color-neutral-120);
+            --p-border-color-hover: var(--color-neutral-70);
 
             --p-text-color-focus: var(--p-text-color-default);
             --p-button-color-focus: var(--p-button-color-default);
@@ -167,20 +167,20 @@
 
             --p-text-color-active: var(--p-text-color-default);
             --p-button-color-active: var(--p-button-color-default);
-            --p-border-color-active: var(--color-neutral-100);
+            --p-border-color-active: var(--color-neutral-60);
 
-            --p-text-color-disabled: var(--color-neutral-100);
+            --p-text-color-disabled: var(--color-neutral-60);
             --p-button-color-disabled: var(--p-button-color-default);
-            --p-border-color-disabled: var(--color-neutral-150);
+            --p-border-color-disabled: var(--color-neutral-80);
         }
     }
 
     &.is-text {
-        --p-text-color-default: var(--color-neutral-100);
+        --p-text-color-default: var(--color-neutral-60);
         --p-button-color-default: var(--transparent);
         --p-border-color-default: var(--transparent);
 
-        --p-text-color-hover: var(--color-neutral-120);
+        --p-text-color-hover: var(--color-neutral-70);
         --p-button-color-hover: var(--p-button-color-default);
         --p-border-color-hover: var(--p-border-color-default);
 
@@ -188,12 +188,12 @@
         --p-button-color-focus: var(--color-neutral-5);
         --p-border-color-focus: var(--p-border-color-default);
 
-        --p-text-color-active: var(--color-neutral-300);
+        --p-text-color-active: var(--color-neutral-90);
         --p-button-color-active: var(--p-button-color-default);
         --p-border-color-active: var(--p-border-color-default);
 
 
-        --p-text-color-disabled: var(--color-neutral-50);
+        --p-text-color-disabled: var(--color-neutral-20);
         --p-button-color-disabled: var(--p-button-color-default);
         --p-border-color-disabled: var(--p-border-color-default);
 
@@ -204,7 +204,7 @@
             --p-button-color-default: var(--transparent);
             --p-border-color-default: var(--transparent);
 
-            --p-text-color-hover: var(--color-neutral-50);
+            --p-text-color-hover: var(--color-neutral-20);
             --p-button-color-hover: var(--p-button-color-default);
             --p-border-color-hover: var(--p-border-color-default);
 
@@ -216,7 +216,7 @@
             --p-button-color-active: var(--p-button-color-default);
             --p-border-color-active: var(--p-border-color-default);
 
-            --p-text-color-disabled: var(--color-neutral-100);
+            --p-text-color-disabled: var(--color-neutral-60);
             --p-button-color-disabled: var(--p-button-color-default);
             --p-border-color-disabled: var(--p-border-color-default);
         }
diff --git a/packages/ui/src/6-elements/_card.scss b/packages/ui/src/6-elements/_card.scss
index 47e7fe5f0e..c28dc2fdc6 100644
--- a/packages/ui/src/6-elements/_card.scss
+++ b/packages/ui/src/6-elements/_card.scss
@@ -6,7 +6,7 @@
 
   --p-card-border-color:          var(--p-card-border-color-default);
   --p-card-border-color-default:  var(--color-border);
-  --p-card-border-color-hover:    var(--color-neutral-30);
+  --p-card-border-color-hover:    var(--color-neutral-15);
 
   --p-card-border-radius:     var(--card-border-radius, var(--border-radius-medium));
 
@@ -73,9 +73,9 @@
   }
 
   #{$theme-dark} & {
-    --p-card-bg-color-default:    var(--color-neutral-300);
-    --p-card-bg-color-hover:      var(--color-neutral-200);
-    --p-card-border-color-hover:  var(--color-neutral-150);
+    --p-card-bg-color-default:    var(--color-neutral-90);
+    --p-card-bg-color-hover:      var(--color-neutral-85);
+    --p-card-border-color-hover:  var(--color-neutral-80);
   }
 
   @media #{$break1} {
@@ -85,7 +85,7 @@
 }
 
 .separator-with-text {
-  --p-text-color: var(--color-neutral-50);
+  --p-text-color: var(--color-neutral-20);
   display:flex; gap:pxToRem(16); align-items:center; margin-block:pxToRem(48);
   color:hsl(var(--p-text-color)); font-size:var(--font-size-00); line-height:1;
 
@@ -93,6 +93,6 @@
   &::after { content:""; display:block; flex:1; block-size:0; border-block-start:solid pxToRem(1) hsl(var(--color-border)); }
 
   #{$theme-dark} & {
-    --p-text-color: var(--color-neutral-70);
+    --p-text-color: var(--color-neutral-50);
   }
 }
\ No newline at end of file
diff --git a/packages/ui/src/6-elements/_image-item.scss b/packages/ui/src/6-elements/_image-item.scss
index af0fda06b1..fc8d4acdfc 100644
--- a/packages/ui/src/6-elements/_image-item.scss
+++ b/packages/ui/src/6-elements/_image-item.scss
@@ -25,7 +25,7 @@
     --p-image-item-size: #{$size-item-image};
   }
   #{$theme-dark} & {
-    --p-image-item-bg-color: var(--color-neutral-200);
-    --p-image-item-border-color: var(--color-neutral-150);
+    --p-image-item-bg-color: var(--color-neutral-85);
+    --p-image-item-border-color: var(--color-neutral-80);
   }
 }
\ No newline at end of file
diff --git a/packages/ui/src/6-elements/_inline-code.scss b/packages/ui/src/6-elements/_inline-code.scss
index 278e2de796..3f1b9156fe 100644
--- a/packages/ui/src/6-elements/_inline-code.scss
+++ b/packages/ui/src/6-elements/_inline-code.scss
@@ -1,7 +1,7 @@
 @use '../abstract' as *;
 .inline-code {
   --p-bg-color-inline-code:   var(--color-neutral-10);
-  --p-text-color-inline-code: var(--color-neutral-100);
+  --p-text-color-inline-code: var(--color-neutral-60);
 
   background-color: hsl(var(--p-bg-color-inline-code));
   color:            hsl(var(--p-text-color-inline-code));
@@ -10,7 +10,7 @@
   padding: pxToRem(4);
 
   #{$theme-dark} & {
-    --p-bg-color-inline-code:   var(--color-neutral-400);
-    --p-text-color-inline-code: var(--color-neutral-30);
+    --p-bg-color-inline-code:   var(--color-neutral-100);
+    --p-text-color-inline-code: var(--color-neutral-15);
   }
 }
\ No newline at end of file
diff --git a/packages/ui/src/6-elements/_inline-tag.scss b/packages/ui/src/6-elements/_inline-tag.scss
index 2ca8a40838..c9ea2591f1 100644
--- a/packages/ui/src/6-elements/_inline-tag.scss
+++ b/packages/ui/src/6-elements/_inline-tag.scss
@@ -9,7 +9,7 @@
   --p-inline-tag-text-color:          var(--inline-tag-text-color, var(--p-inline-tag-text-color-default));
   --p-inline-tag-bg-color:            var(--inline-tag-bg-color, var(--p-inline-tag-bg-color-default));
 
-  --p-inline-tag-text-color-default:  var(--p-text-color, var(--color-neutral-100));
+  --p-inline-tag-text-color-default:  var(--p-text-color, var(--color-neutral-60));
   --p-inline-tag-bg-color-default:    var(--color-neutral-10);
 
   --p-inline-tag-text-color-info:     var(--color-neutral-0);
@@ -30,7 +30,7 @@
 
   /* Theme Dark */
   #{$theme-dark} & {
-    --p-inline-tag-text-color-default:  var(--p-text-color, var(--color-neutral-50));
-    --p-inline-tag-bg-color-default:    var(--color-neutral-150);
+    --p-inline-tag-text-color-default:  var(--p-text-color, var(--color-neutral-20));
+    --p-inline-tag-bg-color-default:    var(--color-neutral-80);
   }
 }
\ No newline at end of file
diff --git a/packages/ui/src/6-elements/_kbd.scss b/packages/ui/src/6-elements/_kbd.scss
index 612257ff49..5a2adb2ac7 100644
--- a/packages/ui/src/6-elements/_kbd.scss
+++ b/packages/ui/src/6-elements/_kbd.scss
@@ -1,9 +1,9 @@
 @use '../abstract' as *;
 
 .kbd {
-  --p-kbd-text-color: var(--color-neutral-100);
+  --p-kbd-text-color: var(--color-neutral-60);
   --p-kbd-bg-color: var(--color-neutral-5);
-  --p-kbd-border-color: var(--color-neutral-30);
+  --p-kbd-border-color: var(--color-neutral-15);
 
   color: hsl(var(--p-kbd-text-color));
   background-color: hsl(var(--p-kbd-bg-color));
@@ -16,7 +16,7 @@
 
   #{$theme-dark} & {
     --p-kbd-text-color: var(--color-neutral-5);
-    --p-kbd-bg-color: var(--color-neutral-300);
-    --p-kbd-border-color: var(--color-neutral-150);
+    --p-kbd-bg-color: var(--color-neutral-90);
+    --p-kbd-border-color: var(--color-neutral-80);
   }
 }
\ No newline at end of file
diff --git a/packages/ui/src/6-elements/_loader.scss b/packages/ui/src/6-elements/_loader.scss
index 7dada083b1..4764d11e21 100644
--- a/packages/ui/src/6-elements/_loader.scss
+++ b/packages/ui/src/6-elements/_loader.scss
@@ -3,7 +3,7 @@
   --loading: 0%;
 
   --p-loader-border-base-color:  var(--color-neutral-10);
-  --p-loader-base-full-color:    var(--color-neutral-50);
+  --p-loader-base-full-color:    var(--color-neutral-20);
 
   --p-loader-size:        var(--loader-size, #{pxToRem(24)});
   --p-loader-border-size: var(--loader-border-size, #{pxToRem(2.5)});
@@ -50,9 +50,8 @@
 
   /* Theme Dark */
   #{$theme-dark} & {
-    --p-loader-border-base-color: var(--color-neutral-120);
-    --p-loader-base-full-color: var(--color-neutral-50);
-
-    --p-loader-bg-color: var(--loader-bg-color-dark, var(--p-loader-bg-color-dark));
+    --p-loader-border-base-color:  var(--color-neutral-20);
+    --p-loader-base-full-color:    var(--color-neutral-100);
+    --p-loader-bg-color-default:   var(--p-loader-bg-color-dark);
   }
 }
\ No newline at end of file
diff --git a/packages/ui/src/6-elements/_table.scss b/packages/ui/src/6-elements/_table.scss
index 57cecae099..8b0954dcb2 100644
--- a/packages/ui/src/6-elements/_table.scss
+++ b/packages/ui/src/6-elements/_table.scss
@@ -1,14 +1,14 @@
 @use '../abstract' as *;
 .table {
   /* global variable */
-  --heading-text-color: var(--color-neutral-100);
+  --heading-text-color: var(--color-neutral-60);
 
   /* local variable */
   --p-table-bg-color: var(--color-neutral-0);
   --p-table-bg-color-focus: var(--color-neutral-5);
   //--p-table-bg-even-row-color: var(--color-neutral-0);
   --p-table-border-color: var(--color-neutral-10);
-  --p-tbody-color-text: var(--color-neutral-100);
+  --p-tbody-color-text: var(--color-neutral-60);
 
   --p-border-radius: var(--border-radius-medium);
 
@@ -91,7 +91,7 @@
     }
   }
   .button.is-text {
-    --p-text-color-default: var(--color-neutral-50);
+    --p-text-color-default: var(--color-neutral-20);
   }
 
   &.is-table-layout-auto { table-layout:auto; }
@@ -136,13 +136,13 @@
 
   #{$theme-dark} & {
     /* global variable */
-    --heading-text-color: var(--color-neutral-50);
+    --heading-text-color: var(--color-neutral-20);
 
     /* local variable */
-    --p-table-bg-color: var(--color-neutral-300);
-    --p-table-bg-color-focus: var(--color-neutral-400);
-    --p-table-border-color: var(--color-neutral-200);
-    --p-tbody-color-text: var(--color-neutral-30);
+    --p-table-bg-color: var(--color-neutral-90);
+    --p-table-bg-color-focus: var(--color-neutral-100);
+    --p-table-border-color: var(--color-neutral-85);
+    --p-tbody-color-text: var(--color-neutral-15);
 
   }
   @media #{$break1}, #{$break2} {
diff --git a/packages/ui/src/6-elements/_tag.scss b/packages/ui/src/6-elements/_tag.scss
index b24623dc33..6c4fd7efc8 100644
--- a/packages/ui/src/6-elements/_tag.scss
+++ b/packages/ui/src/6-elements/_tag.scss
@@ -14,7 +14,7 @@
   --p-tag-bg-color: var(--tag-bg-color, var(--p-tag-bg-color-default));
   --p-tag-border-color: var(--tag-border-color , var(--p-tag-border-color-default));
 
-  --p-tag-text-color-default:  var(--color-neutral-120);
+  --p-tag-text-color-default:  var(--color-neutral-70);
   --p-tag-bg-color-default:    var(--color-neutral-10);
   --p-tag-border-color-default:var(--p-tag-bg-color-default);
 
@@ -35,23 +35,23 @@
   --p-tag-border-color-info:   var(--p-tag-bg-color-info);
 
   /* clickable states */
-  --p-tag-text-color-clickable:var(--color-neutral-100);
+  --p-tag-text-color-clickable:var(--color-neutral-60);
   --p-tag-bg-color-clickable:  var(--color-neutral-5);
   --p-tag-border-color-clickable:var(--color-neutral-10);
 
-  --p-tag-text-color-hover:    var(--color-neutral-120);
+  --p-tag-text-color-hover:    var(--color-neutral-70);
   --p-tag-bg-color-hover:      var(--color-neutral-10);
   --p-tag-border-color-hover:  var(--p-tag-bg-color-hover);
 
-  --p-tag-text-color-active:   var(--color-neutral-120);
-  --p-tag-bg-color-active:     var(--color-neutral-30);
+  --p-tag-text-color-active:   var(--color-neutral-70);
+  --p-tag-bg-color-active:     var(--color-neutral-15);
   --p-tag-border-color-active: var(--p-tag-bg-color-active);
 
   --p-tag-text-color-selected:   var(--p-tag-text-color-clickable);
   --p-tag-bg-color-selected:     var(--p-tag-bg-color-clickable);
-  --p-tag-border-color-selected: var(--color-neutral-70);
+  --p-tag-border-color-selected: var(--color-neutral-50);
 
-  --p-tag-text-color-disabled:   var(--color-neutral-50);
+  --p-tag-text-color-disabled:   var(--color-neutral-20);
   --p-tag-bg-color-disabled:     var(--color-neutral-5);
   --p-tag-border-color-disabled: var(--color-neutral-10);
   /* End Light theme variables */
@@ -93,8 +93,8 @@
 
   /* Theme Dark */
   #{$theme-dark} & {
-    --p-tag-text-color-default:  var(--color-neutral-50);
-    --p-tag-bg-color-default:    var(--color-neutral-150);
+    --p-tag-text-color-default:  var(--color-neutral-20);
+    --p-tag-bg-color-default:    var(--color-neutral-80);
 
     --p-tag-text-color-success:  var(--color-success-100);
     --p-tag-bg-color-success:    var(--color-success-200);
@@ -109,20 +109,20 @@
     --p-tag-bg-color-info:       var(--color-information-200);
 
     /* clickable state */
-    --p-tag-text-color-clickable:    var(--color-neutral-50);
-    --p-tag-bg-color-clickable:      var(--color-neutral-200);
-    --p-tag-border-color-clickable:  var(--color-neutral-150);
+    --p-tag-text-color-clickable:    var(--color-neutral-20);
+    --p-tag-bg-color-clickable:      var(--color-neutral-85);
+    --p-tag-border-color-clickable:  var(--color-neutral-80);
 
-    --p-tag-text-color-hover:    var(--color-neutral-50);
-    --p-tag-bg-color-hover:      var(--color-neutral-150);
-    --p-tag-border-color-hover:  var(--color-neutral-150);
+    --p-tag-text-color-hover:    var(--color-neutral-20);
+    --p-tag-bg-color-hover:      var(--color-neutral-80);
+    --p-tag-border-color-hover:  var(--color-neutral-80);
 
-    --p-tag-text-color-active:   var(--color-neutral-50);
-    --p-tag-bg-color-active:     var(--color-neutral-400);
-    --p-tag-border-color-active: var(--color-neutral-400);
+    --p-tag-text-color-active:   var(--color-neutral-20);
+    --p-tag-bg-color-active:     var(--color-neutral-100);
+    --p-tag-border-color-active: var(--color-neutral-100);
 
-    --p-tag-text-color-disabled:   var(--color-neutral-120);
-    --p-tag-bg-color-disabled:     var(--color-neutral-200);
-    --p-tag-border-color-disabled: var(--color-neutral-200);
+    --p-tag-text-color-disabled:   var(--color-neutral-70);
+    --p-tag-bg-color-disabled:     var(--color-neutral-85);
+    --p-tag-border-color-disabled: var(--color-neutral-85);
   }
 }
\ No newline at end of file
diff --git a/packages/ui/src/6-elements/_tooltip.scss b/packages/ui/src/6-elements/_tooltip.scss
index 51ac869c9a..a783c3c802 100644
--- a/packages/ui/src/6-elements/_tooltip.scss
+++ b/packages/ui/src/6-elements/_tooltip.scss
@@ -2,7 +2,7 @@
 .tooltip {
   /* Light Theme */
   --p-tooltip-text-color: var(--color-neutral-10);
-  --p-tooltip--bg-color: var(--color-neutral-100);
+  --p-tooltip--bg-color: var(--color-neutral-60);
   /* End Light theme variables */
 
   position:relative; line-height:1;
diff --git a/packages/ui/src/6-elements/form/_helper.scss b/packages/ui/src/6-elements/form/_helper.scss
index 6d0da0f28b..3e77436069 100644
--- a/packages/ui/src/6-elements/form/_helper.scss
+++ b/packages/ui/src/6-elements/form/_helper.scss
@@ -1,6 +1,6 @@
 @use '../../abstract' as *;
 .helper {
-  --p-text-color: var(--color-neutral-70);
+  --p-text-color: var(--color-neutral-50);
   display:flex;
   font-size:var(--font-size-0); line-height:2; color:hsl(var(--p-text-color)); font-weight:400;
 
@@ -11,6 +11,6 @@
   }
 
   #{$theme-dark} &{
-    --p-text-color: var(--color-neutral-50);
+    --p-text-color: var(--color-neutral-20);
   }
 }
\ No newline at end of file
diff --git a/packages/ui/src/6-elements/form/_interactive-text-output.scss b/packages/ui/src/6-elements/form/_interactive-text-output.scss
index e4659ab0af..4cb173e1f0 100644
--- a/packages/ui/src/6-elements/form/_interactive-text-output.scss
+++ b/packages/ui/src/6-elements/form/_interactive-text-output.scss
@@ -1,7 +1,7 @@
 @use '../../abstract' as *;
 .interactive-text-output {
 
-  --p-text-color: var(--color-neutral-100);
+  --p-text-color: var(--color-neutral-60);
   --p-background-color: var(--color-neutral-10);
 
   position:relative;
@@ -36,7 +36,7 @@
   }
 
   #{$theme-dark} & {
-    --p-text-color: var(--color-neutral-50);
-    --p-background-color: var(--color-neutral-150);
+    --p-text-color: var(--color-neutral-20);
+    --p-background-color: var(--color-neutral-80);
   }
 }
\ No newline at end of file
diff --git a/packages/ui/src/6-elements/form/_label.scss b/packages/ui/src/6-elements/form/_label.scss
index de58d26c85..e4dfa0f4a0 100644
--- a/packages/ui/src/6-elements/form/_label.scss
+++ b/packages/ui/src/6-elements/form/_label.scss
@@ -1,6 +1,6 @@
 @use '../../abstract' as *;
 .label {
-  --p-label-text-color: var(--color-neutral-150);
+  --p-label-text-color: var(--color-neutral-80);
 
   color: hsl(var(--p-label-text-color));
   display: inline-block;
diff --git a/packages/ui/src/6-elements/form/_optional.scss b/packages/ui/src/6-elements/form/_optional.scss
index de2acea450..6327f81570 100644
--- a/packages/ui/src/6-elements/form/_optional.scss
+++ b/packages/ui/src/6-elements/form/_optional.scss
@@ -1,5 +1,5 @@
 @use "../../abstract" as *;
 .optional {
-  color: hsl(var(--color-neutral-70));
+  color: hsl(var(--color-neutral-50));
   font-size: pxToRem(14);
 }
diff --git a/packages/ui/src/6-elements/form/_placeholder.scss b/packages/ui/src/6-elements/form/_placeholder.scss
index 91c8bcb020..3da539c4ba 100644
--- a/packages/ui/src/6-elements/form/_placeholder.scss
+++ b/packages/ui/src/6-elements/form/_placeholder.scss
@@ -2,11 +2,11 @@
 
 ::placeholder,
 [contentEditable="true"] {
-  --p-placeholder-color: var(--color-neutral-50);
-  --p-placeholder-color-disabled: var(--color-neutral-50);
+  --p-placeholder-color: var(--color-neutral-20);
+  --p-placeholder-color-disabled: var(--color-neutral-20);
 
   #{$theme-dark} & {
-    --p-placeholder-color: var(--color-neutral-100);
+    --p-placeholder-color: var(--color-neutral-60);
   }
 }
 
@@ -17,8 +17,8 @@
 :disabled::placeholder {
   color: hsl(var(--p-placeholder-color-disabled));
   #{$theme-dark} & {
-    --p-placeholder-color: var(--color-neutral-120);
-    --p-placeholder-color-disabled: var(--color-neutral-120);
+    --p-placeholder-color: var(--color-neutral-70);
+    --p-placeholder-color-disabled: var(--color-neutral-70);
   }
 }
 
diff --git a/packages/ui/src/6-elements/form/_radio-and-checkbox.scss b/packages/ui/src/6-elements/form/_radio-and-checkbox.scss
index cb009bd46b..3825d9f42d 100644
--- a/packages/ui/src/6-elements/form/_radio-and-checkbox.scss
+++ b/packages/ui/src/6-elements/form/_radio-and-checkbox.scss
@@ -13,13 +13,13 @@
 
   --p-icon-color-default:     var(--color-neutral-0);
   --p-bg-color-default:       var(--color-neutral-0);
-  --p-border-color-default:   var(--color-neutral-50);
+  --p-border-color-default:   var(--color-neutral-20);
 
   --p-bg-color-checked: var(--color-information-100);
   --p-border-color-checked: var(--color-information-100);
 
   --p-bg-color-hover: var(--color-neutral-5);
-  --p-border-color-hover:var(--color-neutral-50);
+  --p-border-color-hover:var(--color-neutral-20);
 
   --p-bg-color-hover-checked: var(--color-information-100);
   --p-border-color-hover-checked: var(--color-information-100);
@@ -34,11 +34,11 @@
   --p-border-color-active-checked: var(--color-information-120);
 
   --p-bg-color-disabled: var(--color-neutral-10);
-  --p-border-color-ddisabled: var(--color-neutral-30);
+  --p-border-color-ddisabled: var(--color-neutral-15);
 
   --p-icon-color-disabled-checked: var(--color-neutral-0);
-  --p-bg-color-disabled-checked: var(--color-neutral-30);
-  --p-border-color-disabled-checked: var(--color-neutral-30);
+  --p-bg-color-disabled-checked: var(--color-neutral-15);
+  --p-border-color-disabled-checked: var(--color-neutral-15);
 /* End theme variables */
 
   display:inline-grid; place-content:center; flex-shrink:0;
@@ -93,12 +93,12 @@
 
   /* Theme Dark */
   #{$theme-dark} & {
-    --p-bg-color-disabled: var(--color-neutral-150);
-    --p-border-color-ddisabled: var(--color-neutral-120);
+    --p-bg-color-disabled: var(--color-neutral-80);
+    --p-border-color-ddisabled: var(--color-neutral-70);
 
-    --p-icon-color-disabled-checked: var(--color-neutral-100);
-    --p-bg-color-disabled-checked: var(--color-neutral-150);
-    --p-border-color-disabled-checked: var(--color-neutral-150);
+    --p-icon-color-disabled-checked: var(--color-neutral-60);
+    --p-bg-color-disabled-checked: var(--color-neutral-80);
+    --p-border-color-disabled-checked: var(--color-neutral-80);
   }
 }
 
@@ -153,12 +153,12 @@
   --p-radio-bitton-bg-color:              var(--p-radio-bitton-bg-color-default);
   --p-radio-bitton-border-color:          var(--p-radio-bitton-border-color-default);
 
-  --p-radio-bitton-text-color-default:    var(--color-neutral-100);
+  --p-radio-bitton-text-color-default:    var(--color-neutral-60);
   --p-radio-bitton-bg-color-default:      var(--color-neutral-5);
-  --p-radio-bitton-border-color-default:  var(--color-neutral-30);
+  --p-radio-bitton-border-color-default:  var(--color-neutral-15);
 
   --p-radio-bitton-text-color-checked:    var(--p-radio-bitton-text-color-default);
-  --p-radio-bitton-bg-color-checked:      var(--color-neutral-30);
+  --p-radio-bitton-bg-color-checked:      var(--color-neutral-15);
   --p-radio-bitton-border-color-checked:  var(--p-radio-bitton-border-color-default);
 
   color: hsl(var(--p-radio-bitton-text-color));
@@ -185,13 +185,13 @@
   }
 
   #{$theme-dark} & {
-    --p-radio-bitton-text-color-default:    var(--color-neutral-50);
-    --p-radio-bitton-bg-color-default:      var(--color-neutral-200);
-    --p-radio-bitton-border-color-default:  var(--color-neutral-150);
+    --p-radio-bitton-text-color-default:    var(--color-neutral-20);
+    --p-radio-bitton-bg-color-default:      var(--color-neutral-85);
+    --p-radio-bitton-border-color-default:  var(--color-neutral-80);
 
     --p-radio-bitton-text-color-checked:    var(--p-radio-bitton-text-color-default);
-    --p-radio-bitton-bg-color-checked:      var(--color-neutral-150);
-    --p-radio-bitton-border-color-checked:  var(--color-neutral-100);
+    --p-radio-bitton-bg-color-checked:      var(--color-neutral-80);
+    --p-radio-bitton-border-color-checked:  var(--color-neutral-60);
   }
 }
 
@@ -201,8 +201,8 @@
 }
 
 .choice-item {
-  --p-choice-item-title-color: var(--color-neutral-120);
-  --p-choice-item-text-color: var(--color-neutral-100);
+  --p-choice-item-title-color: var(--color-neutral-70);
+  --p-choice-item-text-color: var(--color-neutral-60);
   display:flex; gap:pxToRem(8);
   &-content { display:flex; flex-direction:column; gap:pxToRem(4); line-height:1.5; }
   &-title { color:hsl(var(--p-choice-item-title-color)); font-weight:600;}
@@ -210,6 +210,6 @@
 
   #{$theme-dark} & {
     --p-choice-item-title-color: var(--color-neutral-10);
-    --p-choice-item-text-color: var(--color-neutral-50);
+    --p-choice-item-text-color: var(--color-neutral-20);
   }
 }
\ No newline at end of file
diff --git a/packages/ui/src/6-elements/form/_switch.scss b/packages/ui/src/6-elements/form/_switch.scss
index fb702f8b3a..ab5ab149a6 100644
--- a/packages/ui/src/6-elements/form/_switch.scss
+++ b/packages/ui/src/6-elements/form/_switch.scss
@@ -6,17 +6,17 @@
   --p-switch-bg-color-disabled: var(--p-switch-bg-color-default);
 
   --p-bg-color: var(--p-bg-color-default);
-  --p-bg-color-default: var(--color-neutral-50);
+  --p-bg-color-default: var(--color-neutral-20);
 
   --p-bg-color-checked: var(--color-information-100);
 
-  --p-bg-color-hover: var(--color-neutral-50);
+  --p-bg-color-hover: var(--color-neutral-20);
   --p-bg-color-checked-hover: var(--color-information-100);
 
-  --p-bg-color-active: var(--color-neutral-100);
+  --p-bg-color-active: var(--color-neutral-60);
   --p-bg-color-checked-active: var(--color-information-120);
 
-  --p-bg-color-disabled: var(--color-neutral-30);
+  --p-bg-color-disabled: var(--color-neutral-15);
   --p-bg-color-checked-disabled: var(--color-information-50);
 
 
@@ -73,8 +73,8 @@
 
 
   #{$theme-dark} & {
-    --p-switch-bg-color-disabled: var(--color-neutral-120);
-    --p-bg-color-disabled: var(--color-neutral-200);
+    --p-switch-bg-color-disabled: var(--color-neutral-70);
+    --p-bg-color-disabled: var(--color-neutral-85);
     --p-bg-color-checked-disabled: var(--color-information-200);
   }
 }
\ No newline at end of file
diff --git a/packages/ui/src/6-elements/form/_tags-input.scss b/packages/ui/src/6-elements/form/_tags-input.scss
index 33de0adad0..083dd462db 100644
--- a/packages/ui/src/6-elements/form/_tags-input.scss
+++ b/packages/ui/src/6-elements/form/_tags-input.scss
@@ -14,11 +14,11 @@
   /* default not read-only!!! this pseudo-class affect on div element and I need to overwrite this behavior */
   &.is-read-only {
     #{$theme-dark} &{
-      --p-bg-color: var(--color-neutral-150);
-      --p-border-color: var(--color-neutral-100);
+      --p-bg-color: var(--color-neutral-80);
+      --p-border-color: var(--color-neutral-60);
       .tag {
-        --tag-bg-color: var(--color-neutral-100);
-        --tag-text-color: var(--color-neutral-30);
+        --tag-bg-color: var(--color-neutral-60);
+        --tag-text-color: var(--color-neutral-15);
       }
     }
   }
@@ -31,8 +31,8 @@
 }
 
 .input-tag {
-  --p-bg-color: var(--tag-bg-color, var(--color-neutral-30));
-  --p-text-color: var(--tag-text-color, var(--color-neutral-100));
+  --p-bg-color: var(--tag-bg-color, var(--color-neutral-15));
+  --p-text-color: var(--tag-text-color, var(--color-neutral-60));
   display:flex; height:pxToRem(28); gap:6px; align-items:center;
   background-color:hsl(var(--p-bg-color)); padding-inline:pxToRem(8); padding-block:pxToRem(6); border-radius:var(--border-radius-xsmall);
   color:hsl(var(--p-text-color));
@@ -40,9 +40,9 @@
     aspect-ratio:1 / 1; line-height:1; border-radius:var(--border-radius-xsmall); text-align:center;
     [class*="icon"]::before { vertical-align:middle; }
   }
-  &.is-disabled {  --p-text-color:var(--color-neutral-50); }
+  &.is-disabled {  --p-text-color:var(--color-neutral-20); }
   #{$theme-dark} &{
-    --tag-bg-color: var(--color-neutral-150);
-    --tag-text-color: var(--color-neutral-50);
+    --tag-bg-color: var(--color-neutral-80);
+    --tag-text-color: var(--color-neutral-20);
   }
 }
diff --git a/packages/ui/src/6-elements/form/_text-inputs.scss b/packages/ui/src/6-elements/form/_text-inputs.scss
index 8698b1691e..fa80e723ab 100644
--- a/packages/ui/src/6-elements/form/_text-inputs.scss
+++ b/packages/ui/src/6-elements/form/_text-inputs.scss
@@ -31,16 +31,16 @@ $input-text-wrapper: ".input-text-wrapper";
     --p-bg-input-color: var(--color-neutral-0);
     background-color: hsl(var(--p-bg-input-color));
     #{$theme-dark} & {
-      --p-bg-input-color: var(--color-neutral-400);
+      --p-bg-input-color: var(--color-neutral-100);
     }
   }
 }
 
 .options-list {
-  --p-sep-color: var(--color-neutral-30);
+  --p-sep-color: var(--color-neutral-15);
   --p-button-text-color: var(--p-button-text-color-default);
-  --p-button-text-color-default: var(--color-neutral-70);
-  --p-button-text-color-disabled: var(--color-neutral-30);
+  --p-button-text-color-default: var(--color-neutral-50);
+  --p-button-text-color-disabled: var(--color-neutral-15);
 
   --p-button-bg-color: var(--p-button-bg-color-default);
   --p-button-bg-color-default: var(--transparent);
@@ -64,14 +64,14 @@ $input-text-wrapper: ".input-text-wrapper";
     &::before { display:none; }
   }
   #{$theme-dark} & {
-    --p-sep-color: var(--color-neutral-150);
+    --p-sep-color: var(--color-neutral-80);
     --p-button-text-color: var(--p-button-text-color-default);
-    --p-button-text-color-default: var(--color-neutral-70);
-    --p-button-text-color-disabled: var(--color-neutral-150);
+    --p-button-text-color-default: var(--color-neutral-50);
+    --p-button-text-color-disabled: var(--color-neutral-80);
 
     --p-button-bg-color: var(--p-button-bg-color-default);
     --p-button-bg-color-default: var(--transparent);
-    --p-button-bg-color-focus: var(--color-neutral-200);
+    --p-button-bg-color-focus: var(--color-neutral-85);
   }
 
 }
@@ -91,23 +91,23 @@ textarea {
   --p-bg-color: var(--p-bg-color-default);
   --p-border-color: var(--p-border-color-default);
 
-  --p-text-color-default: var(--color-neutral-100);
+  --p-text-color-default: var(--color-neutral-60);
   --p-bg-color-default: var(--color-neutral-0);
-  --p-border-color-default: var(--color-neutral-30);
+  --p-border-color-default: var(--color-neutral-15);
 
   --p-text-color-hover: var(--p-text-color-default);
   --p-bg-color-hover: var(--p-bg-color-default);
-  --p-border-color-hover: var(--color-neutral-50);
+  --p-border-color-hover: var(--color-neutral-20);
 
   --p-text-color-focus: var(--p-text-color-default);
   --p-bg-color-focus: var(--p-bg-color-default);
-  --p-border-color-focus: var(--color-neutral-50);
+  --p-border-color-focus: var(--color-neutral-20);
 
-  --p-text-color-readonly: var(--color-neutral-50);
+  --p-text-color-readonly: var(--color-neutral-20);
   --p-bg-color-readonly: var(--color-neutral-5);
   --p-border-color-readonly: var(--p-border-color-default);
 
-  --p-text-color-disabled: var(--color-neutral-50);
+  --p-text-color-disabled: var(--color-neutral-20);
   --p-bg-color-disabled: var(--color-neutral-0);
   --p-border-color-disabled: var(--p-border-color-default);
 
@@ -147,37 +147,36 @@ textarea {
     --p-bg-color: var(--p-bg-color-disabled);
     --p-border-color: var(--p-border-color-disabled);
 
-    --p-border-color-hover: var(--color-neutral-100);
-    cursor:initial;
+    --p-border-color-hover: var(--color-neutral-60);
   }
 
   #{$theme-dark} & {
-    --p-text-color-default: var(--color-neutral-50);
-    --p-bg-color-default: var(--color-neutral-400);
-    --p-border-color-default: var(--color-neutral-150);
+    --p-text-color-default: var(--color-neutral-20);
+    --p-bg-color-default: var(--color-neutral-100);
+    --p-border-color-default: var(--color-neutral-80);
 
     --p-text-color-hover: var(--p-text-color-default);
     --p-bg-color-hover: var(--p-bg-color-default);
-    --p-border-color-hover: var(--color-neutral-120);
+    --p-border-color-hover: var(--color-neutral-70);
 
     --p-text-color-focus: var(--p-text-color-default);
     --p-bg-color-focus: var(--p-bg-color-default);
-    --p-border-color-focus: var(--color-neutral-120);
+    --p-border-color-focus: var(--color-neutral-70);
 
-    --p-text-color-readonly: var(--color-neutral-100);
-    --p-bg-color-readonly: var(--color-neutral-200);
-    --p-border-color-readonly: var(--color-neutral-150);
+    --p-text-color-readonly: var(--color-neutral-60);
+    --p-bg-color-readonly: var(--color-neutral-85);
+    --p-border-color-readonly: var(--color-neutral-80);
 
-    --p-text-color-disabled: var(--color-neutral-120);
+    --p-text-color-disabled: var(--color-neutral-70);
     --p-bg-color-disabled: var(--p-bg-color-default);
-    --p-border-color-disabled: var(--color-neutral-200);
+    --p-border-color-disabled: var(--color-neutral-85);
 
 
     &:where([readonly], .is-read-only) {
-      + .input-button { --p-border-color: var(--color-neutral-100); }
+      + .input-button { --p-border-color: var(--color-neutral-60); }
     }
     &:where(#{$disabled}) {
-      + .input-button { --p-border-color: var(--color-neutral-150); }
+      + .input-button { --p-border-color: var(--color-neutral-80); }
     }
   }
 }
@@ -188,8 +187,8 @@ textarea { block-size:pxToRem(200); }
   padding-inline-start: pxToRem(48);
   &:disabled {
     + .icon-search {
-      color:hsl(var(--color-neutral-50));
-      #{$theme-dark} & { color:hsl(var(--color-neutral-120));}
+      color:hsl(var(--color-neutral-20));
+      #{$theme-dark} & { color:hsl(var(--color-neutral-70));}
     }
   }
   &::-webkit-search-cancel-button { display:none; }
@@ -242,11 +241,11 @@ input[type="datetime-local" i]::-webkit-calendar-picker-indicator {
 .custom-select {
   position:relative;
   .drop {
-    --drop-border-color: var(--color-neutral-30);
+    --drop-border-color: var(--color-neutral-15);
     --drop-border-radius: var(--border-radius-xsmall);
     inset-inline:0; max-inline-size:none;
     #{$theme-dark} & {
-      --drop-border-color: var(--color-neutral-150);
+      --drop-border-color: var(--color-neutral-80);
     }
   }
   .input-text-wrapper {
@@ -265,15 +264,15 @@ input[type="datetime-local" i]::-webkit-calendar-picker-indicator {
 }
 
 .text-counter {
-  --p-text-counter-color: var(--color-neutral-70);
+  --p-text-counter-color: var(--color-neutral-50);
   display: flex;
   user-select: none;
   font-size: var(--font-size-00);
   color: hsl(var(--p-text-counter-color));
   &-separator::before { content:"/"; }
   input:placeholder-shown + & {
-    --p-text-counter-color: var(--color-neutral-50);
-    #{$theme-dark} & { --p-text-counter-color: var(--color-neutral-70); }
+    --p-text-counter-color: var(--color-neutral-20);
+    #{$theme-dark} & { --p-text-counter-color: var(--color-neutral-50); }
   }
   #{$input-text-wrapper} > & { position:absolute; inset-block-start:pxToRem(12); inset-inline-end:pxToRem(16); }
 }
diff --git a/packages/ui/src/7-components/_action-bar.scss b/packages/ui/src/7-components/_action-bar.scss
index 74911b26a4..85ad12e082 100644
--- a/packages/ui/src/7-components/_action-bar.scss
+++ b/packages/ui/src/7-components/_action-bar.scss
@@ -2,7 +2,7 @@
 .action-bar {
     --p-action-bar-bg-color: var(--color-neutral-0);
     --p-action-bar-border-color: var(--color-neutral-0);
-    --p-action-bar-box-shadow: 0 #{pxToRem(6)} #{pxToRem(16)} hsl(var(--color-neutral-150) / 0.14);
+    --p-action-bar-box-shadow: 0 #{pxToRem(6)} #{pxToRem(16)} hsl(var(--color-neutral-80) / 0.14);
 
     display:flex; gap:pxToRem(8); justify-content:space-between; align-items:baseline;
     inline-size:pxToRem(312); padding-inline:pxToRem(12); padding-block:pxToRem(8);
@@ -17,8 +17,8 @@
     @media #{$break2open} { inline-size:pxToRem(500); padding-inline:pxToRem(16); padding-block:pxToRem(12); }
 
     #{$theme-dark} & {
-      --p-action-bar-bg-color: var(--color-neutral-300);
-      --p-action-bar-border-color: var(--color-neutral-200);
-      --p-action-bar-box-shadow: 0 #{pxToRem(6)} #{pxToRem(16)} #{pxToRem(8)} hsl(var(--color-neutral-500));
+      --p-action-bar-bg-color: var(--color-neutral-90);
+      --p-action-bar-border-color: var(--color-neutral-85);
+      --p-action-bar-box-shadow: 0 #{pxToRem(6)} #{pxToRem(16)} #{pxToRem(8)} hsl(var(--color-neutral-105));
     }
 }
\ No newline at end of file
diff --git a/packages/ui/src/7-components/_alert-sticky.scss b/packages/ui/src/7-components/_alert-sticky.scss
index 2bf47281ee..aa3b1354ad 100644
--- a/packages/ui/src/7-components/_alert-sticky.scss
+++ b/packages/ui/src/7-components/_alert-sticky.scss
@@ -4,14 +4,14 @@
   $width-alert: pxToRem(440);
   --p-alert-sticky-width-size:    #{$width-alert};
 
-  --p-alert-content-text-color:   var(--color-neutral-120);
+  --p-alert-content-text-color:   var(--color-neutral-70);
   --p-alert-content-bg-color:     var(--color-neutral-0);
   --p-alert-content-border-color: var(--color-neutral-10);
 
   /** type of messages colors **/
   --p-alert-bg-color:         var(--p-alert-bg-color-default);
   /* default */
-  --p-alert-bg-color-default: var(--color-neutral-50);
+  --p-alert-bg-color-default: var(--color-neutral-20);
   /* info */
   --p-alert-bg-color-info:    var(--color-information-100);
   /* success */
@@ -61,8 +61,8 @@
 
   #{$theme-dark} & {
     --p-alert-content-text-color: var(--color-neutral-10);
-    --p-alert-content-bg-color: var(--color-neutral-200);
-    --p-alert-content-border-color: var(--color-neutral-150);
+    --p-alert-content-bg-color: var(--color-neutral-85);
+    --p-alert-content-border-color: var(--color-neutral-80);
   }
 
   @media #{$break1} {
diff --git a/packages/ui/src/7-components/_alert.scss b/packages/ui/src/7-components/_alert.scss
index 944161e798..763372fe8a 100644
--- a/packages/ui/src/7-components/_alert.scss
+++ b/packages/ui/src/7-components/_alert.scss
@@ -1,14 +1,14 @@
 @use '../abstract' as *;
 
 .alert {
-  --p-alert-text-color:   var(--color-neutral-120);
+  --p-alert-text-color:   var(--color-neutral-70);
   --p-alert-bg-color:     var(--color-neutral-5);
-  --p-alert-border-color: var(--color-neutral-30);
+  --p-alert-border-color: var(--color-neutral-15);
 
   /* states colors */
   --p-alert-color: var(--p-alert-color-default);
 
-  --p-alert-color-default:  var(--color-neutral-50);
+  --p-alert-color-default:  var(--color-neutral-20);
   --p-alert-color-info:     var(--color-information-100);
   --p-alert-color-success:  var(--color-success-100);
   --p-alert-border-warning: var(--color-warning-100);
@@ -71,8 +71,8 @@
     --p-alert-border-color: var(--color-neutral-10);
     box-shadow:             var(--shadow-small);
     #{$theme-dark} & {
-      --p-alert-bg-color:     var(--color-neutral-300);
-      --p-alert-border-color: var(--color-neutral-200);
+      --p-alert-bg-color:     var(--color-neutral-90);
+      --p-alert-border-color: var(--color-neutral-85);
     }
   }
 
@@ -86,7 +86,7 @@
 
   #{$theme-dark} & {
     --p-alert-text-color:   var(--color-neutral-5);
-    --p-alert-bg-color:     var(--color-neutral-200);
-    --p-alert-border-color: var(--color-neutral-150);
+    --p-alert-bg-color:     var(--color-neutral-85);
+    --p-alert-border-color: var(--color-neutral-80);
   }
 }
\ No newline at end of file
diff --git a/packages/ui/src/7-components/_breadcrumbs.scss b/packages/ui/src/7-components/_breadcrumbs.scss
index ab24c1f53b..cc931d68ca 100644
--- a/packages/ui/src/7-components/_breadcrumbs.scss
+++ b/packages/ui/src/7-components/_breadcrumbs.scss
@@ -1,8 +1,8 @@
 @use '../abstract' as *;
 
 .breadcrumbs {
-  --p-text-color:         var(--color-neutral-70);
-  --p-text-color-current: var(--color-neutral-150);
+  --p-text-color:         var(--color-neutral-50);
+  --p-text-color-current: var(--color-neutral-80);
 
   color: hsl(var(--p-text-color));
   -webkit-user-select:none; user-select:none;
@@ -18,7 +18,7 @@
   }
 
   #{$theme-dark} & {
-    --p-text-color: var(--color-neutral-50);
+    --p-text-color: var(--color-neutral-20);
     --p-text-color-current: var(--color-neutral-5);
   }
 }
\ No newline at end of file
diff --git a/packages/ui/src/7-components/_buttons-list.scss b/packages/ui/src/7-components/_buttons-list.scss
index 0e1bf99747..ce12eacce3 100644
--- a/packages/ui/src/7-components/_buttons-list.scss
+++ b/packages/ui/src/7-components/_buttons-list.scss
@@ -2,7 +2,7 @@
 
 .buttons-list {
   display: flex;
-  --p-button-list-border-color: var(--color-neutral-30);
+  --p-button-list-border-color: var(--color-neutral-15);
   &-item {
     position: relative;
     &:nth-child(n + 2) {
@@ -23,7 +23,7 @@
   }
 
   #{$theme-dark} & {
-    --p-button-list-border-color: var(--color-neutral-150);
+    --p-button-list-border-color: var(--color-neutral-80);
   }
 }
 
diff --git a/packages/ui/src/7-components/_clickable-list.scss b/packages/ui/src/7-components/_clickable-list.scss
index 7cb9e94a9c..de15b7d025 100644
--- a/packages/ui/src/7-components/_clickable-list.scss
+++ b/packages/ui/src/7-components/_clickable-list.scss
@@ -1,10 +1,10 @@
 @use '../abstract' as *;
 .clickable-list {
   --p-clickable-button-bg-color-hover:  var(--color-neutral-10);
-  --p-clickable-title-text-color:       var(--color-neutral-100);
-  --p-clickable-desc-text-color:        var(--color-neutral-70);
-  --p-clickable-sep-color:           var(--color-neutral-50);
-  --color-border: var(--color-neutral-30); /* override global */
+  --p-clickable-title-text-color:       var(--color-neutral-60);
+  --p-clickable-desc-text-color:        var(--color-neutral-50);
+  --p-clickable-sep-color:           var(--color-neutral-20);
+  --color-border: var(--color-neutral-15); /* override global */
 
   &-item {
     padding-block:pxToRem(4); -webkit-user-select:none; user-select:none;
@@ -24,11 +24,11 @@
   &-desc  { color:hsl(var(--p-clickable-desc-text-color)); font-size:var(--font-size-00); }
 
   #{$theme-dark} & {
-    --p-clickable-button-bg-color-hover: var(--color-neutral-200);
+    --p-clickable-button-bg-color-hover: var(--color-neutral-85);
     --p-clickable-title-text-color:      var(--color-neutral-10);
-    --p-clickable-desc-text-color:       var(--color-neutral-50);
-    --p-clickable-sep-color:          var(--color-neutral-150);
+    --p-clickable-desc-text-color:       var(--color-neutral-20);
+    --p-clickable-sep-color:          var(--color-neutral-80);
 
-    --color-border: var(--color-neutral-150); /* override global */
+    --color-border: var(--color-neutral-80); /* override global */
   }
 }
\ No newline at end of file
diff --git a/packages/ui/src/7-components/_code-panel.scss b/packages/ui/src/7-components/_code-panel.scss
index 0363ecb0b5..8af9e860eb 100644
--- a/packages/ui/src/7-components/_code-panel.scss
+++ b/packages/ui/src/7-components/_code-panel.scss
@@ -1,10 +1,9 @@
 @use "../abstract" as *;
 
 .code-panel {
-  --p-code-panel-header: var(--color-neutral-5);
-  --p-code-panel-border-color: var(--color-neutral-30);
-  --p-code-panel-content: var(--color-neutral-0);
-  --p-code-panel-text-color: var(--color-neutral-150);
+  --p-code-panel-header: var(--color-neutral-85);
+  --p-code-panel-content: var(--color-neutral-90);
+  --p-code-panel-text-color: var(--color-neutral-5);
 
   display: flex;
   flex-direction: column;
diff --git a/packages/ui/src/7-components/_collapsible.scss b/packages/ui/src/7-components/_collapsible.scss
index cf44d84dee..c56fd84335 100644
--- a/packages/ui/src/7-components/_collapsible.scss
+++ b/packages/ui/src/7-components/_collapsible.scss
@@ -1,7 +1,7 @@
 @use '../abstract' as *;
 .collapsible {
-  --p-toggle-border-color:    var(--color-neutral-30);
-  --p-toggle-optional-color:  var(--color-neutral-70);
+  --p-toggle-border-color:    var(--color-neutral-15);
+  --p-toggle-optional-color:  var(--color-neutral-50);
 
   ::-webkit-details-marker  { display:none; }
 
@@ -32,6 +32,6 @@
     padding-block-start:0; padding-block-end:pxToRem(24);
   }
   #{$theme-dark} & {
-    --p-toggle-border-color: var(--color-neutral-120);
+    --p-toggle-border-color: var(--color-neutral-70);
   }
 }
\ No newline at end of file
diff --git a/packages/ui/src/7-components/_drop.scss b/packages/ui/src/7-components/_drop.scss
index eb4213a66a..39fb869f0e 100644
--- a/packages/ui/src/7-components/_drop.scss
+++ b/packages/ui/src/7-components/_drop.scss
@@ -69,7 +69,7 @@
       border-block-start:solid pxToRem(1) hsl(var(--p-section-border-color));
     }
     #{$theme-dark} & {
-      --p-section-border-color: var(--color-neutral-200);
+      --p-section-border-color: var(--color-neutral-85);
     }
   }
   /**   states   **/
@@ -119,8 +119,8 @@
     &-item { flex-shrink:0}
   }
   &-button {
-    --p-drop-icon-color: var(--color-neutral-50);
-    --p-drop-text-color: var(--color-neutral-100);
+    --p-drop-icon-color: var(--color-neutral-20);
+    --p-drop-text-color: var(--color-neutral-60);
     --p-drop-item-bg-color-hover: var(--color-neutral-10);
     --p-drop-item-bg-color-selected: var(--color-neutral-10);
 
@@ -148,12 +148,12 @@
   }
 
   #{$theme-dark} &{
-    --p-drop-bg-color:      var(--color-neutral-500);
-    --p-drop-border-color:  var(--drop-border-color, var(--color-neutral-200));
+    --p-drop-bg-color:      var(--color-neutral-105);
+    --p-drop-border-color:  var(--drop-border-color, var(--color-neutral-85));
     &-button {
-      --p-drop-text-color:              var(--color-neutral-30);
-      --p-drop-item-bg-color-hover:     var(--color-neutral-200);
-      --p-drop-item-bg-color-selected:  var(--color-neutral-200);
+      --p-drop-text-color:              var(--color-neutral-15);
+      --p-drop-item-bg-color-hover:     var(--color-neutral-85);
+      --p-drop-item-bg-color-selected:  var(--color-neutral-85);
     }
   }
 }
diff --git a/packages/ui/src/7-components/_file-preview.scss b/packages/ui/src/7-components/_file-preview.scss
index 2bf8d0bb3e..e333533a48 100644
--- a/packages/ui/src/7-components/_file-preview.scss
+++ b/packages/ui/src/7-components/_file-preview.scss
@@ -1,6 +1,6 @@
 @use '../abstract' as *;
 .file-preview {
-  --p-file-preview-text-color:    var(--color-neutral-50);
+  --p-file-preview-text-color:    var(--color-neutral-20);
   --p-file-preview-bg-color:      var(--color-neutral-0);
   --p-file-preview-border-color:  var(--color-neutral-5);
 
@@ -29,8 +29,8 @@
   &.is-with-image { border-width:0; }
 
   #{$theme-dark} & {
-    --p-file-preview-text-color:    var(--color-neutral-50);
-    --p-file-preview-bg-color:      var(--color-neutral-300);
-    --p-file-preview-border-color:  var(--color-neutral-200);
+    --p-file-preview-text-color:    var(--color-neutral-20);
+    --p-file-preview-bg-color:      var(--color-neutral-90);
+    --p-file-preview-border-color:  var(--color-neutral-85);
   }
 }
\ No newline at end of file
diff --git a/packages/ui/src/7-components/_grid-item-1.scss b/packages/ui/src/7-components/_grid-item-1.scss
index 0f28ebdc44..6603e5845d 100644
--- a/packages/ui/src/7-components/_grid-item-1.scss
+++ b/packages/ui/src/7-components/_grid-item-1.scss
@@ -1,6 +1,6 @@
 @use '../abstract' as *;
 .grid-item-1 {
-  --small-title-color: var(--color-neutral-50);
+  --small-title-color: var(--color-neutral-20);
 
   display: grid;
   grid-template-areas:  "start-start start-end"
diff --git a/packages/ui/src/7-components/_list.scss b/packages/ui/src/7-components/_list.scss
index 7d464ada42..309d6d4d23 100644
--- a/packages/ui/src/7-components/_list.scss
+++ b/packages/ui/src/7-components/_list.scss
@@ -1,6 +1,6 @@
 @use "../abstract" as *;
 .list {
-  --p-list-text-color: var(--color-neutral-100);
+  --p-list-text-color: var(--color-neutral-60);
   color: hsl(var(--p-list-text-color));
 
   display:flex; flex-direction:column; gap:pxToRem(24); font-size:pxToRem(16);
@@ -20,14 +20,14 @@
   }
 
   #{$theme-dark} & {
-    --p-list-text-color: var(--color-neutral-50);
+    --p-list-text-color: var(--color-neutral-20);
   }
 }
 
 .numeric-list {
   --p-numeric-border-color: var(--color-neutral-10);
   --p-numeric-bg-color:     var(--color-neutral-5);
-  --p-numeric-text-color:   var(--color-neutral-100);
+  --p-numeric-text-color:   var(--color-neutral-60);
   counter-reset: number;
   display:grid; row-gap:pxToRem(24);
   &-item {
@@ -42,9 +42,9 @@
     }
   }
   #{$theme-dark} & {
-    --p-numeric-border-color: var(--color-neutral-150);
-    --p-numeric-bg-color:     var(--color-neutral-200);
-    --p-numeric-text-color:   var(--color-neutral-50);
+    --p-numeric-border-color: var(--color-neutral-80);
+    --p-numeric-bg-color:     var(--color-neutral-85);
+    --p-numeric-text-color:   var(--color-neutral-20);
   }
 }
 
diff --git a/packages/ui/src/7-components/_main-header.scss b/packages/ui/src/7-components/_main-header.scss
index 174d9bbcf4..ab44b15dcb 100644
--- a/packages/ui/src/7-components/_main-header.scss
+++ b/packages/ui/src/7-components/_main-header.scss
@@ -25,7 +25,7 @@
 
 
   #{$theme-dark} & {
-    --p-main-header-bg-color: var(--color-neutral-500);
+    --p-main-header-bg-color: var(--color-neutral-105);
   }
 
   @media #{$break1}, #{$break2} {
diff --git a/packages/ui/src/7-components/_modal.scss b/packages/ui/src/7-components/_modal.scss
index 5bb97f1006..0330c2c788 100644
--- a/packages/ui/src/7-components/_modal.scss
+++ b/packages/ui/src/7-components/_modal.scss
@@ -1,7 +1,7 @@
 @use '../abstract' as *;
 .modal {
-  --p-modal-title-color:    var(--color-neutral-150);
-  --p-modal-text-color:     var(--color-neutral-100);
+  --p-modal-title-color:    var(--color-neutral-80);
+  --p-modal-text-color:     var(--color-neutral-60);
   --p-modal-bg-color:       var(--color-neutral-0);
   --p-modal-border-color:   var(--color-neutral-10);
 
@@ -38,8 +38,8 @@
     --padding-header-bottom: #{$header-padding-bottom};
   }
   &.is-inner-modal {
-    --p-modal-title-color:  var(--color-neutral-500);
-    --p-modal-text-color:   var(--color-neutral-100);
+    --p-modal-title-color:  var(--color-neutral-105);
+    --p-modal-text-color:   var(--color-neutral-60);
     --p-modal-bg-color:     var(--color-neutral-5);
     --p-modal-border-color: var(--color-neutral-10);
 
@@ -60,8 +60,8 @@
       border-block-start:solid pxToRem(1) hsl(var(--p-modal-border-color));
     }
     #{$theme-dark} & {
-      --p-modal-bg-color: var(--color-neutral-200);
-      --p-modal-border-color: var(--color-neutral-150);
+      --p-modal-bg-color: var(--color-neutral-85);
+      --p-modal-border-color: var(--color-neutral-80);
     }
   }
   &.is-separate-header {
@@ -107,11 +107,11 @@
 
   #{$theme-dark} & {
     --p-modal-title-color:  var(--color-neutral-10);
-    --p-modal-text-color:   var(--color-neutral-50);
-    --p-modal-bg-color:     var(--color-neutral-300);
-    --p-modal-border-color: var(--color-neutral-200);
+    --p-modal-text-color:   var(--color-neutral-20);
+    --p-modal-bg-color:     var(--color-neutral-90);
+    --p-modal-border-color: var(--color-neutral-85);
 
-    --color-border:         var(--color-neutral-150);
+    --color-border:         var(--color-neutral-80);
 
     &::backdrop { background-color:hsl(240 22% 10% /  0.6); }
 
diff --git a/packages/ui/src/7-components/_pagination.scss b/packages/ui/src/7-components/_pagination.scss
index 9515209f78..25e72e5c1c 100644
--- a/packages/ui/src/7-components/_pagination.scss
+++ b/packages/ui/src/7-components/_pagination.scss
@@ -17,9 +17,9 @@
 
     /* adjust color from default button */
     &:where(:not(.is-text)) {
-      --p-text-color-disabled: var(--color-neutral-300);
+      --p-text-color-disabled: var(--color-neutral-90);
       #{$theme-dark} & {
-        --p-text-color-disabled: var(--color-neutral-50);
+        --p-text-color-disabled: var(--color-neutral-20);
       }
     }
   }
diff --git a/packages/ui/src/7-components/_progress-bar.scss b/packages/ui/src/7-components/_progress-bar.scss
index a6b8585849..dd54fb8cca 100644
--- a/packages/ui/src/7-components/_progress-bar.scss
+++ b/packages/ui/src/7-components/_progress-bar.scss
@@ -1,14 +1,14 @@
 @use '../abstract' as *;
 .progress-bar {
-  --p-graph-bg-color:       var(--color-neutral-30);
+  --p-graph-bg-color:       var(--color-neutral-15);
   --p-graph-color-fill:     var(--color-information-100);
   --p-graph-color-warning:  var(--color-warning-100);
   --p-graph-color-danger:   var(--color-danger-100);
 
-  --p-graph-icon-color:       var(--color-neutral-70);
-  --p-graph-text-color:       var(--color-neutral-100);
-  --p-graph-used-text-color:  var(--color-neutral-120);
-  --p-graph-max-text-color:   var(--color-neutral-70);
+  --p-graph-icon-color:       var(--color-neutral-50);
+  --p-graph-text-color:       var(--color-neutral-60);
+  --p-graph-used-text-color:  var(--color-neutral-70);
+  --p-graph-max-text-color:   var(--color-neutral-50);
 
   display:flex; flex-direction:column; gap:pxToRem(8);
   -webkit-user-select:none; user-select:none;
@@ -35,9 +35,9 @@
 
 
   #{$theme-dark} & {
-    --p-graph-bg-color:         var(--color-neutral-200);
-    --p-graph-icon-color:       var(--color-neutral-50);
-    --p-graph-text-color:       var(--color-neutral-50);
-    --p-graph-used-text-color:  var(--color-neutral-50);
+    --p-graph-bg-color:         var(--color-neutral-85);
+    --p-graph-icon-color:       var(--color-neutral-20);
+    --p-graph-text-color:       var(--color-neutral-20);
+    --p-graph-used-text-color:  var(--color-neutral-20);
   }
 }
\ No newline at end of file
diff --git a/packages/ui/src/7-components/_secondary-tabs.scss b/packages/ui/src/7-components/_secondary-tabs.scss
index 18cba5f677..35aa2df721 100644
--- a/packages/ui/src/7-components/_secondary-tabs.scss
+++ b/packages/ui/src/7-components/_secondary-tabs.scss
@@ -1,6 +1,6 @@
 @use '../abstract' as *;
 .secondary-tabs {
-  --p-drop-tab-text-color:  var(--color-neutral-100);
+  --p-drop-tab-text-color:  var(--color-neutral-60);
   --p-drop-tab-bg-color:    var(--transparent);
 
   $drop-tab-height:         pxToRem(32);
@@ -35,10 +35,10 @@
     }
   }
   #{$theme-dark} & {
-    --p-drop-tab-text-color: var(--color-neutral-30);
+    --p-drop-tab-text-color: var(--color-neutral-15);
     &-button {
       &:where(#{$disabled}) {
-        --p-drop-tab-bg-color: var(--color-neutral-200);
+        --p-drop-tab-bg-color: var(--color-neutral-85);
       }
     }
   }
diff --git a/packages/ui/src/7-components/_side-nav.scss b/packages/ui/src/7-components/_side-nav.scss
index 57803cfa24..7ea7a67838 100644
--- a/packages/ui/src/7-components/_side-nav.scss
+++ b/packages/ui/src/7-components/_side-nav.scss
@@ -4,7 +4,7 @@
   --p-side-nav-bg-color:      var(--color-neutral-0);
   --p-side-nav-border-color:  var(--color-border);
 
-  --p-side-nav-header-text-color: var(--color-neutral-70);
+  --p-side-nav-header-text-color: var(--color-neutral-50);
 
   background-color: hsl(var(--p-side-nav-bg-color));
   border-inline-end: solid pxToRem(1) hsl(var(--p-side-nav-border-color));
@@ -77,9 +77,9 @@
   .eyebrow-heading-3 { color: var(--p-side-nav-header-text-color); }
 
   #{$theme-dark} & {
-    --p-side-nav-bg-color: var(--color-neutral-500);
+    --p-side-nav-bg-color: var(--color-neutral-105);
 
-    --p-side-nav-header-text-color: var(--color-neutral-50);
+    --p-side-nav-header-text-color: var(--color-neutral-20);
   }
   @media #{$break1}, #{$break2} {
     &.is-mobile-center {
diff --git a/packages/ui/src/7-components/_status.scss b/packages/ui/src/7-components/_status.scss
index d68d81f568..5e840a0de6 100644
--- a/packages/ui/src/7-components/_status.scss
+++ b/packages/ui/src/7-components/_status.scss
@@ -1,7 +1,7 @@
 @use '../abstract' as *;
 
 .status {
-  --p-status-color: var(--color-neutral-70);
+  --p-status-color: var(--color-neutral-50);
 
   display: flex;
   align-items: baseline;
@@ -13,7 +13,7 @@
   }
 
   /* Status */
-  &.is-offline    { --p-status-color:var(--color-neutral-70);     }
+  &.is-offline    { --p-status-color:var(--color-neutral-50);     }
   &.is-waiting    { --p-status-color:var(--color-warning-50);     }
   &.is-pending    { --p-status-color:var(--color-warning-100);    }
   &.is-failed     { --p-status-color:var(--color-danger-100);     }
diff --git a/packages/ui/src/7-components/_steps.scss b/packages/ui/src/7-components/_steps.scss
index bc672750a2..732255e332 100644
--- a/packages/ui/src/7-components/_steps.scss
+++ b/packages/ui/src/7-components/_steps.scss
@@ -3,14 +3,14 @@
   --p-step-bullet-icon-color:     var(--color-neutral-0);
   --p-step-bullet-content-color:  var(--color-neutral-0);
   --p-step-bullet-padding-color:  var(--color-neutral-0);
-  --p-step-bullet-border-color:   var(--color-neutral-50);
+  --p-step-bullet-border-color:   var(--color-neutral-20);
 
-  --p-step-bullet-sep-color:      var(--color-neutral-50);
+  --p-step-bullet-sep-color:      var(--color-neutral-20);
 
   // Done step
   --p-step-bullet-icon-color-done:    var(--color-neutral-0);
-  --p-step-bullet-content-color-done: var(--color-neutral-50);
-  --p-step-bullet-padding-color-done: var(--color-neutral-50);
+  --p-step-bullet-content-color-done: var(--color-neutral-20);
+  --p-step-bullet-padding-color-done: var(--color-neutral-20);
   //--p-step-bullet-border-color-done: var(--color-neutral-50);
 
   // Current Step
@@ -20,13 +20,13 @@
   --p-step-bullet-border-color-current:   var(--color-primary-100);
 
   /* Color Text */
-  --p-step-text-color:          var(--color-neutral-100);
-  --p-step-text-color-done:     var(--color-neutral-70);
+  --p-step-text-color:          var(--color-neutral-60);
+  --p-step-text-color-done:     var(--color-neutral-50);
   --p-step-text-color-current:  var(--color-primary-100);
 
-  --p-substep-text-color:         var(--color-neutral-70);
-  --p-substep-text-color-done:    var(--color-neutral-70);
-  --p-substep-text-color-current: var(--color-neutral-150);
+  --p-substep-text-color:         var(--color-neutral-50);
+  --p-substep-text-color-done:    var(--color-neutral-50);
+  --p-substep-text-color-current: var(--color-neutral-80);
 
   display:grid;
   &-item {
@@ -91,22 +91,22 @@
   }
 
   #{$theme-dark} &{
-    --p-step-bullet-content-color:  var(--color-neutral-400);
-    --p-step-bullet-padding-color:  var(--color-neutral-400);
-    --p-step-bullet-border-color:   var(--color-neutral-100);
+    --p-step-bullet-content-color:  var(--color-neutral-100);
+    --p-step-bullet-padding-color:  var(--color-neutral-100);
+    --p-step-bullet-border-color:   var(--color-neutral-60);
 
-    --p-step-bullet-sep-color:      var(--color-neutral-100);
+    --p-step-bullet-sep-color:      var(--color-neutral-60);
 
-    --p-step-bullet-content-color-done: var(--color-neutral-70);
-    --p-step-bullet-padding-color-done: var(--color-neutral-70);
+    --p-step-bullet-content-color-done: var(--color-neutral-50);
+    --p-step-bullet-padding-color-done: var(--color-neutral-50);
 
     /* Color Text */
-    --p-step-text-color:          var(--color-neutral-30);
-    --p-step-text-color-done:     var(--color-neutral-70);
+    --p-step-text-color:          var(--color-neutral-15);
+    --p-step-text-color-done:     var(--color-neutral-50);
     --p-step-text-color-current:  var(--color-primary-100);
 
-    --p-substep-text-color:         var(--color-neutral-100);
-    --p-substep-text-color-done:    var(--color-neutral-100);
-    --p-substep-text-color-current: var(--color-neutral-50);
+    --p-substep-text-color:         var(--color-neutral-60);
+    --p-substep-text-color-done:    var(--color-neutral-60);
+    --p-substep-text-color-current: var(--color-neutral-20);
   }
 }
\ No newline at end of file
diff --git a/packages/ui/src/7-components/_tabs.scss b/packages/ui/src/7-components/_tabs.scss
index 16c12f40b1..2e3e4193c2 100644
--- a/packages/ui/src/7-components/_tabs.scss
+++ b/packages/ui/src/7-components/_tabs.scss
@@ -1,7 +1,7 @@
 @use '../abstract' as *;
 
 .tabs {
-  --p-tabs-text-color:      var(--color-neutral-100);
+  --p-tabs-text-color:      var(--color-neutral-60);
   --p-tabs-color-hover:     var(--color-neutral-10);
   --p-tabs-color-selected:  var(--color-primary-200);
 
@@ -56,10 +56,10 @@
     }
   }
   #{$theme-dark} & {
-    --p-tabs-text-color:      var(--color-neutral-50);
-    --p-tabs-color-hover:     var(--color-neutral-200);
+    --p-tabs-text-color:      var(--color-neutral-20);
+    --p-tabs-color-hover:     var(--color-neutral-85);
     --p-tabs-color-selected:  var(--color-primary-200);
 
-    --tabs-shadow-color:      var(--color-neutral-400);
+    --tabs-shadow-color:      var(--color-neutral-100);
   }
 }
diff --git a/packages/ui/src/7-components/_toggle-button.scss b/packages/ui/src/7-components/_toggle-button.scss
index 7f0bb271a5..e5d46d5c93 100644
--- a/packages/ui/src/7-components/_toggle-button.scss
+++ b/packages/ui/src/7-components/_toggle-button.scss
@@ -1,11 +1,11 @@
 @use '../abstract' as *;
 .toggle-button {
   --p-icon-toggle-bg-color: var(--color-neutral-0);
-  --p-icon-toggle-border-color: var(--color-neutral-30);
+  --p-icon-toggle-border-color: var(--color-neutral-15);
 
   --p-icon-text-color: var(--p-icon-text-color-default);
-  --p-icon-text-color-default: var(--color-neutral-100);
-  --p-icon-text-color-didabled: var(--color-neutral-50);
+  --p-icon-text-color-default: var(--color-neutral-60);
+  --p-icon-text-color-didabled: var(--color-neutral-20);
 
   --p-button-color: var(--p-button-color-default);
   --p-button-color-default: var(--transparent);
@@ -29,12 +29,12 @@
   }
 
   #{$theme-dark} & {
-    --p-icon-toggle-bg-color: var(--color-neutral-300);
-    --p-icon-toggle-border-color: var(--color-neutral-150);
+    --p-icon-toggle-bg-color: var(--color-neutral-90);
+    --p-icon-toggle-border-color: var(--color-neutral-80);
 
-    --p-icon-text-color-default: var(--color-neutral-50);
-    --p-icon-text-color-didabled: var(--color-neutral-120);
+    --p-icon-text-color-default: var(--color-neutral-20);
+    --p-icon-text-color-didabled: var(--color-neutral-70);
 
-    --p-button-color-selected: var(--color-neutral-150);
+    --p-button-color-selected: var(--color-neutral-80);
   }
 }
\ No newline at end of file
diff --git a/packages/ui/src/7-components/_top-cover.scss b/packages/ui/src/7-components/_top-cover.scss
index 6371c95366..930da89585 100644
--- a/packages/ui/src/7-components/_top-cover.scss
+++ b/packages/ui/src/7-components/_top-cover.scss
@@ -27,6 +27,6 @@
 
 
   #{$theme-dark} & {
-    --p-cover-bg-color: var(--color-neutral-400);
+    --p-cover-bg-color: var(--color-neutral-100);
   }
 }
\ No newline at end of file
diff --git a/packages/ui/src/7-components/_upload-box.scss b/packages/ui/src/7-components/_upload-box.scss
index df173e9d85..813db1a4c2 100644
--- a/packages/ui/src/7-components/_upload-box.scss
+++ b/packages/ui/src/7-components/_upload-box.scss
@@ -1,9 +1,9 @@
  @use '../abstract' as *;
 .upload-box {
-  --p-header-text-color:    var(--color-neutral-120);
+  --p-header-text-color:    var(--color-neutral-70);
   --p-header-bg-color:      var(--color-neutral-10);
 
-  --p-content-text-color:   var(--color-neutral-100);
+  --p-content-text-color:   var(--color-neutral-60);
   --p-content-bg-color:     var(--color-neutral-0);
 
   --p-border-color:         var(--color-neutral-10);
@@ -65,12 +65,12 @@
 
   /* dark theme */
   #{$theme-dark} &{
-    --p-header-text-color:  var(--color-neutral-50);
-    --p-header-bg-color:    var(--color-neutral-400);
+    --p-header-text-color:  var(--color-neutral-20);
+    --p-header-bg-color:    var(--color-neutral-100);
 
-    --p-content-text-color: var(--color-neutral-50);
-    --p-content-bg-color:   var(--color-neutral-300);
+    --p-content-text-color: var(--color-neutral-20);
+    --p-content-bg-color:   var(--color-neutral-90);
 
-    --p-border-color:       var(--color-neutral-200);
+    --p-border-color:       var(--color-neutral-85);
   }
 }
\ No newline at end of file
diff --git a/packages/ui/src/7-components/_upload-file-box.scss b/packages/ui/src/7-components/_upload-file-box.scss
index eb8b4c4377..925a7d55a9 100644
--- a/packages/ui/src/7-components/_upload-file-box.scss
+++ b/packages/ui/src/7-components/_upload-file-box.scss
@@ -1,10 +1,10 @@
 @use '../abstract' as *;
 .upload-file-box {
   //--color-border: var(--color-neutral-50);
-  --p-icon-file: var(--color-neutral-50);
-  --p-title-color: var(--color-neutral-120);
-  --p-info-text: var(--color-neutral-100);
-  --p-file-size: var(--color-neutral-70);
+  --p-icon-file: var(--color-neutral-20);
+  --p-title-color: var(--color-neutral-70);
+  --p-info-text: var(--color-neutral-60);
+  --p-file-size: var(--color-neutral-50);
 
   display: flex;
   flex-direction: column;
@@ -32,9 +32,9 @@
     $size: pxToRem(48);
     --p-size: #{$size};
 
-    --p-image-color: var(--color-neutral-100);
+    --p-image-color: var(--color-neutral-60);
     --p-bg-color: var(--color-neutral-5);
-    --p-border-color: var(--color-neutral-30);
+    --p-border-color: var(--color-neutral-15);
 
     color: hsl(var(--p-image-color));
     background-color: hsl(var(--p-bg-color));
@@ -50,9 +50,9 @@
     }
 
     #{$theme-dark} & {
-      --p-image-color: var(--color-neutral-100);
-      --p-bg-color: var(--color-neutral-300);
-      --p-border-color: var(--color-neutral-150);
+      --p-image-color: var(--color-neutral-60);
+      --p-bg-color: var(--color-neutral-90);
+      --p-border-color: var(--color-neutral-80);
     }
 
   }
@@ -69,6 +69,6 @@
   /* Theme Dark */
   #{$theme-dark} & {
     --p-title-color: var(--color-neutral-5);
-    --p-info-text: var(--color-neutral-50);
+    --p-info-text: var(--color-neutral-20);
   }
 }
\ No newline at end of file
diff --git a/packages/ui/src/7-components/_upload-image.scss b/packages/ui/src/7-components/_upload-image.scss
index bf3ca095d9..e3bce5c022 100644
--- a/packages/ui/src/7-components/_upload-image.scss
+++ b/packages/ui/src/7-components/_upload-image.scss
@@ -5,8 +5,8 @@
   --p-upload-image-size:      var(--upload-image-size, #{$upload-image-size-default});
   --p-upload-bg-color:        var(--color-neutral-10);
   --p-upload-border-color:    var(--color-neutral-10);
-  --p-upload-icon-color:      var(--color-neutral-50);
-  --p-upload-text-color:      var(--color-neutral-70);
+  --p-upload-icon-color:      var(--color-neutral-20);
+  --p-upload-text-color:      var(--color-neutral-50);
 
   position:relative; display:grid; place-content:center;
   inline-size: var(--p-upload-image-size);
@@ -36,13 +36,13 @@
   &.is-finished {
     --p-upload-border-color: var(--p-upload-border-color);
     .progress{ display:none; }
-    #{$theme-dark} & { --p-upload-border-color: var(--color-neutral-150); }
+    #{$theme-dark} & { --p-upload-border-color: var(--color-neutral-80); }
   }
   /* dark theme */
   #{$theme-dark} & {
-    --p-upload-bg-color:      var(--color-neutral-200);
-    --p-upload-border-color:  var(--color-neutral-200);
-    --p-upload-icon-color:    var(--color-neutral-50);
-    --p-upload-text-color:    var(--color-neutral-50);
+    --p-upload-bg-color:      var(--color-neutral-85);
+    --p-upload-border-color:  var(--color-neutral-85);
+    --p-upload-icon-color:    var(--color-neutral-20);
+    --p-upload-text-color:    var(--color-neutral-20);
   }
 }
\ No newline at end of file
diff --git a/packages/ui/src/7-components/_user-profile.scss b/packages/ui/src/7-components/_user-profile.scss
index f92c08fd8f..693908d6bb 100644
--- a/packages/ui/src/7-components/_user-profile.scss
+++ b/packages/ui/src/7-components/_user-profile.scss
@@ -9,9 +9,9 @@
   &-sep { grid-column:span 2; border-block-start:solid pxToRem(1) hsl(var(--color-border)); }
   &-button {
     /* variables */
-    --p-name-color-text: var(--color-neutral-100);
-    --p-title-color-text: var(--color-neutral-70);
-    --p-icon-color: var(--color-neutral-50);
+    --p-name-color-text: var(--color-neutral-60);
+    --p-title-color-text: var(--color-neutral-50);
+    --p-icon-color: var(--color-neutral-20);
 
     position:relative; z-index:2;
     display:flex; block-size:100%; align-items:center; padding-inline:pxToRem(24); gap:pxToRem(12);
@@ -23,8 +23,8 @@
     }
     #{$theme-dark} & {
       --p-name-color-text: var(--color-neutral-5);
-      --p-title-color-text: var(--color-neutral-50);
-      --p-icon-color: var(--color-neutral-50);
+      --p-title-color-text: var(--color-neutral-20);
+      --p-icon-color: var(--color-neutral-20);
     }
   }
   &-info {
diff --git a/packages/ui/src/8-grids/_grid-1-1.scss b/packages/ui/src/8-grids/_grid-1-1.scss
index dcf980238f..aa72f9db8f 100644
--- a/packages/ui/src/8-grids/_grid-1-1.scss
+++ b/packages/ui/src/8-grids/_grid-1-1.scss
@@ -7,8 +7,8 @@
     --p-side-2-color: var(--color-neutral-0);
 
     #{$theme-dark} &{
-      --p-side-1-color: var(--color-neutral-300);
-      --p-side-2-color: var(--color-neutral-500);
+      --p-side-1-color: var(--color-neutral-90);
+      --p-side-2-color: var(--color-neutral-105);
     }
     @media #{$break1} {
       grid-template-rows:auto 1fr;
diff --git a/packages/ui/src/8-grids/_grid-code.scss b/packages/ui/src/8-grids/_grid-code.scss
index 9d728b7764..5ff4267a74 100644
--- a/packages/ui/src/8-grids/_grid-code.scss
+++ b/packages/ui/src/8-grids/_grid-code.scss
@@ -12,7 +12,7 @@
   counter-reset: lineNumbers;
 
   &-line-number {
-    color: hsl(var(--color-neutral-70));
+    color: hsl(var(--color-neutral-50));
     &::before {
       counter-increment: lineNumbers;
       content: counter(lineNumbers);
diff --git a/packages/ui/src/8-grids/_wizard.scss b/packages/ui/src/8-grids/_wizard.scss
index 9140351bbd..2b61cfc52b 100644
--- a/packages/ui/src/8-grids/_wizard.scss
+++ b/packages/ui/src/8-grids/_wizard.scss
@@ -87,8 +87,8 @@
 
 
   #{$theme-dark} & {
-    --p-header-color: var(--color-neutral-500);
-    --p-start-color:  var(--color-neutral-400);
-    --p-end-color:    var(--color-neutral-300);
+    --p-header-color: var(--color-neutral-105);
+    --p-start-color:  var(--color-neutral-100);
+    --p-end-color:    var(--color-neutral-90);
   }
 }
diff --git a/packages/ui/src/_9-utilities.scss b/packages/ui/src/_9-utilities.scss
index 92daa9229b..8c9187e149 100644
--- a/packages/ui/src/_9-utilities.scss
+++ b/packages/ui/src/_9-utilities.scss
@@ -62,13 +62,13 @@
 
 /* color text light mode only */
 :where(body:not(#{$theme-dark})) {
-  .u-color-light-only-text-neutral-70 { color:hsl(var(--color-neutral-70))!important; }
+  .u-color-light-only-text-neutral-70 { color:hsl(var(--color-neutral-50))!important; }
 }
 
 
 /* color text dark mode only */
 #{$theme-dark} {
-  .u-color-dark-only-text-neutral-50 { color:hsl(var(--color-neutral-50))!important; }
+  .u-color-dark-only-text-neutral-50 { color:hsl(var(--color-neutral-20))!important; }
 }
 
 /* position */
diff --git a/packages/ui/src/abstract/mixins/_scroll.scss b/packages/ui/src/abstract/mixins/_scroll.scss
index 5abe086321..94df142cfb 100644
--- a/packages/ui/src/abstract/mixins/_scroll.scss
+++ b/packages/ui/src/abstract/mixins/_scroll.scss
@@ -26,7 +26,7 @@
 @mixin tableScroll {
   --p-track-bg-color: var(--track-bg-color, var(--color-neutral-5));
   --p-track-border-color: var(--track-border-color, var(--color-neutral-10));
-  --p-scroll-bg-color: var(--scroll-bg-color, var(--color-neutral-30));
+  --p-scroll-bg-color: var(--scroll-bg-color, var(--color-neutral-15));
   ::-webkit-scrollbar {
     width: 12px;
   }
@@ -45,9 +45,9 @@
   }
 
   #{$theme-dark} & {
-    --track-bg-color: var(--color-neutral-500);
-    --track-border-color: var(--color-neutral-200);
-    --scroll-bg-color: var(--color-neutral-150);
+    --track-bg-color: var(--color-neutral-105);
+    --track-border-color: var(--color-neutral-85);
+    --scroll-bg-color: var(--color-neutral-80);
   }
 }
 
