diff --git a/.gitignore b/.gitignore
index b2fd9a0660..79491bd533 100644
--- a/.gitignore
+++ b/.gitignore
@@ -8,3 +8,5 @@ npm-debug.log*
 .pre-commit-config.yaml
 # Local Netlify folder
 .netlify
+
+colors.json
diff --git a/core/public/divider/landing_search_bottom.svg b/core/public/divider/landing_search_bottom.svg
index 8157348908..2956283aa0 100644
--- a/core/public/divider/landing_search_bottom.svg
+++ b/core/public/divider/landing_search_bottom.svg
@@ -1,12 +1,12 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1058.333 136.525">
+<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" viewBox="0 0 1058.333 136.525" height="516" width="4000">
     <g style="display:inline">
         <path style="opacity:1;fill:#fff;fill-opacity:1;stroke-width:.25144434"
             d="M-361.247 758.979h340.934v226.03h-340.934z" transform="translate(337.812 -780.448)" />
-        <path style="fill:#7ebae4;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:.2219117"
+        <path style="fill:#698dd8;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:.2219117"
             d="m289.72 842.964-19.483 26.289 132.784 16.5v-18.944z" transform="translate(337.812 -780.448)" />
-        <path style="fill:#f2f8fd;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:.2219108"
+        <path style="fill:#e8effc;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:.2219108"
             d="M-20.312 819.37v11.137L403.02 880.02v-60.65z" transform="translate(337.812 -780.448)" />
-        <path style="fill:#f2f8fd;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1.21852815"
+        <path style="fill:#e8effc;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1.21852815"
             d="M-339.685 793.155 726.954 917.908l.02-137.685h-1066.29Z" transform="translate(337.812 -780.448)" />
     </g>
-</svg>
\ No newline at end of file
+</svg>
diff --git a/core/src/assets/image/divider/header_nixdarkblue.svg b/core/src/assets/image/divider/header_nixdarkblue.svg
index 79516ea441..b939ab6c42 100644
--- a/core/src/assets/image/divider/header_nixdarkblue.svg
+++ b/core/src/assets/image/divider/header_nixdarkblue.svg
@@ -1,3 +1,3 @@
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="-1156 0 2604 100.5">
-	<path d="m -195 0 l -942 0 h 2604 l -555 0 l -961 100 l -4.5 -6.5 l -61 7 l -50 -70 l -7 1 z" fill="#5277c3"/>
+	<path d="m -195 0 l -942 0 h 2604 l -555 0 l -961 100 l -4.5 -6.5 l -61 7 l -50 -70 l -7 1 z" fill="#3b5487"/>
 </svg>
diff --git a/core/src/assets/image/divider/landing_search_bottom.svg b/core/src/assets/image/divider/landing_search_bottom.svg
index cdae14cb7d..2956283aa0 100644
--- a/core/src/assets/image/divider/landing_search_bottom.svg
+++ b/core/src/assets/image/divider/landing_search_bottom.svg
@@ -2,11 +2,11 @@
     <g style="display:inline">
         <path style="opacity:1;fill:#fff;fill-opacity:1;stroke-width:.25144434"
             d="M-361.247 758.979h340.934v226.03h-340.934z" transform="translate(337.812 -780.448)" />
-        <path style="fill:#7ebae4;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:.2219117"
+        <path style="fill:#698dd8;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:.2219117"
             d="m289.72 842.964-19.483 26.289 132.784 16.5v-18.944z" transform="translate(337.812 -780.448)" />
-        <path style="fill:#f2f8fd;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:.2219108"
+        <path style="fill:#e8effc;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:.2219108"
             d="M-20.312 819.37v11.137L403.02 880.02v-60.65z" transform="translate(337.812 -780.448)" />
-        <path style="fill:#f2f8fd;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1.21852815"
+        <path style="fill:#e8effc;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1.21852815"
             d="M-339.685 793.155 726.954 917.908l.02-137.685h-1066.29Z" transform="translate(337.812 -780.448)" />
     </g>
-</svg>
\ No newline at end of file
+</svg>
diff --git a/core/src/assets/image/divider/landing_search_top.svg b/core/src/assets/image/divider/landing_search_top.svg
index ad1be11a58..2aaf4b9e75 100644
--- a/core/src/assets/image/divider/landing_search_top.svg
+++ b/core/src/assets/image/divider/landing_search_top.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1058.333 546.629" height="2066" width="4000"><g style="display:inline"><path transform="matrix(.16643 0 0 .16643 330.277 162.765)" d="m124.842 1965.666-99.31 10.404 263.68 306.249 319.208 7.937-60.945-83.647-232.24 23.618z" style="fill:#7ebae4;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1.33333862"/><path transform="matrix(.16643 0 0 .16643 330.277 162.765)" d="M-76.771 1729.807v576.611h2543.564v-269.904L298.801 2264.16Z" style="fill:#f2f8fd;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1.33333325"/><path transform="rotate(54.838 230.216 293.786)" style="opacity:1;fill:#f2f8fd;fill-opacity:1;stroke-width:.32801086" d="M-142.425 312.884h659.864v329.672h-659.864z"/><path transform="rotate(84.02 204.217 155.718)" style="opacity:1;fill:#f2f8fd;fill-opacity:1;stroke-width:.32801086" d="M604.32-681.016h112.931v701.9H604.32z"/></g></svg>
\ No newline at end of file
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1058.333 546.629" height="2066" width="4000"><g style="display:inline"><path transform="matrix(.16643 0 0 .16643 330.277 162.765)" d="m124.842 1965.666-99.31 10.404 263.68 306.249 319.208 7.937-60.945-83.647-232.24 23.618z" style="fill:#698dd8;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1.33333862"/><path transform="matrix(.16643 0 0 .16643 330.277 162.765)" d="M-76.771 1729.807v576.611h2543.564v-269.904L298.801 2264.16Z" style="fill:#e8effc;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1.33333325"/><path transform="rotate(54.838 230.216 293.786)" style="opacity:1;fill:#e8effc;fill-opacity:1;stroke-width:.32801086" d="M-142.425 312.884h659.864v329.672h-659.864z"/><path transform="rotate(84.02 204.217 155.718)" style="opacity:1;fill:#e8effc;fill-opacity:1;stroke-width:.32801086" d="M604.32-681.016h112.931v701.9H604.32z"/></g></svg>
diff --git a/core/src/assets/image/divider/slope_down.svg b/core/src/assets/image/divider/slope_down.svg
index 167d7cefec..01261a6693 100644
--- a/core/src/assets/image/divider/slope_down.svg
+++ b/core/src/assets/image/divider/slope_down.svg
@@ -35,6 +35,6 @@
      inkscape:clip-to-page="true" />
   <path
      id="path1"
-     style="fill:#5277c3;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+     style="fill:#3b5487;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
      d="M 0 0 L 0 2 L 0 130 L 128 2 L 128 0 L 0 0 z " />
 </svg>
diff --git a/core/src/assets/image/hero-bg.svg b/core/src/assets/image/hero-bg.svg
index 71af9ebf62..c52e607a84 100644
--- a/core/src/assets/image/hero-bg.svg
+++ b/core/src/assets/image/hero-bg.svg
@@ -1,4 +1,4 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 677.333 276.126" height="1043.626" width="2560" style="background-color: #405D99; opacity: 0.3">
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 677.333 276.126" height="1043.626" width="2560" style="background-color: #3b5487; opacity: 0.3">
     <path style="fill:none;stroke:#ffffff;stroke-width:.35277781;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1"
           d="M-168.492 276.313-11.65.19" transform="translate(226.786 -.187)"/>
     <path style="fill:none;stroke:#ffffff;stroke-width:.35277775;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1"
diff --git a/core/src/assets/image/landing/features/declarative.svg b/core/src/assets/image/landing/features/declarative.svg
index 3d44730dd9..533b608a0a 100644
--- a/core/src/assets/image/landing/features/declarative.svg
+++ b/core/src/assets/image/landing/features/declarative.svg
@@ -69,4 +69,4 @@
         <path d="m 0,0 h -22.687 c -0.641,0 -1.16,0.519 -1.16,1.159 v 0.473 c 0,0.64 0.519,1.16 1.16,1.16 H 0 c 0.641,0 1.16,-0.52 1.16,-1.16 V 1.159 C 1.16,0.519 0.641,0 0,0" style="fill:#66abde;fill-opacity:1;fill-rule:evenodd;stroke:none" id="path227"></path>
       </g>
     </g>
-  </svg>
\ No newline at end of file
+  </svg>
diff --git a/core/src/components/Footer.astro b/core/src/components/Footer.astro
index 2e6531f01a..9907b0b240 100644
--- a/core/src/components/Footer.astro
+++ b/core/src/components/Footer.astro
@@ -11,7 +11,7 @@ const footerMenu = await getEntry('menus', 'footer');
 ---
 
 <footer>
-  <div class="bg-nix-blue-darker clear-both font-light text-white">
+  <div class="bg-afghani-blue-25 text-white-95 clear-both font-light">
     <Container>
       <div
         class="flex flex-col flex-wrap gap-x-4 gap-y-8 pt-12 pb-10 sm:flex-row"
@@ -19,12 +19,12 @@ const footerMenu = await getEntry('menus', 'footer');
         {
           footerMenu.data.sections.map((menu) => (
             <div class="flex-1 basis-1/2 md:basis-0">
-              <h4 class="font-heading text-nix-blue-light mb-2 text-xl font-bold">
+              <h4 class="font-heading text-afghani-blue-85 mb-2 text-xl font-bold">
                 {menu.name}
               </h4>
               <ul class="font-extralight">
                 {menu.items.map((item) => (
-                  <li class="border-nix-blue-dark border-b-1 last:border-b-0">
+                  <li class="border-afghani-blue-55 border-b-1 last:border-b-0">
                     <Link
                       class:list={['block py-3 hover:underline md:py-2']}
                       href={item.link}
@@ -39,7 +39,7 @@ const footerMenu = await getEntry('menus', 'footer');
         }
       </div>
 
-      <hr class="border-nix-blue-light" />
+      <hr class="border-afghani-blue-55" />
 
       <div
         class="flex flex-col flex-wrap gap-4 py-4 font-extralight lg:flex-row lg:gap-0"
@@ -81,7 +81,7 @@ const footerMenu = await getEntry('menus', 'footer');
           </div>
         </div>
 
-        <hr class="border-nix-blue-light lg:hidden" />
+        <hr class="border-afghani-blue-75 lg:hidden" />
 
         <div
           class="flex basis-1/2 justify-between gap-4 font-extralight lg:justify-end"
@@ -91,7 +91,7 @@ const footerMenu = await getEntry('menus', 'footer');
             {
               footerMenu.data.social.map((item) => (
                 <Link
-                  class="hover:text-nix-blue-light text-white"
+                  class="hover:text-afghani-blue-75 text-white"
                   href={item.link}
                   aria-label={`Connect with us on ${item.name}`}
                 >
@@ -113,7 +113,7 @@ const footerMenu = await getEntry('menus', 'footer');
     <a
       href="#"
       id="scroll-to-top"
-      class="bg-nix-blue-darker hover:bg-nix-blue-dark absolute right-4 bottom-4 z-50 rounded-xl text-white drop-shadow-md transition-all duration-100 md:-right-14 md:bottom-8"
+      class="bg-afghani-blue-25 hover:bg-afghani-blue-45 absolute right-4 bottom-4 z-50 rounded-xl text-white drop-shadow-md transition-all duration-100 md:-right-14 md:bottom-8"
     >
       <Icon class="h-14 w-14 p-1" name="mdi:keyboard-arrow-up" />
     </a>
diff --git a/core/src/components/Header.astro b/core/src/components/Header.astro
index a9736a40d7..069e1c28c0 100644
--- a/core/src/components/Header.astro
+++ b/core/src/components/Header.astro
@@ -13,9 +13,9 @@ const currentBanner = await getEntry('banners', BANNER);
 
 const currentTopRoute = `/${Astro.url.pathname.split('/')[1]}`;
 
-const navbarItemStyle = `text-center text-nix-blue-dark md:text-black md:hover:border-b-nix-blue-light border-b-4`;
-const navbarItemInactiveStyle = `border-b-nix-blue-extralight md:border-b-transparent bg-nix-blue-extralight md:bg-transparent`;
-const navbarItemActiveStyle = `border-b-nix-blue-light bg-nix-blue-light text-white md:text-black md:bg-transparent font-bold`;
+const navbarItemStyle = `text-center text-afghani-blue-45 md:text-black md:hover:border-b-afghani-blue-65 border-b-4`;
+const navbarItemInactiveStyle = `border-b-afghani-blue-95 md:border-b-transparent bg-afghani-blue-95 md:bg-transparent`;
+const navbarItemActiveStyle = `border-b-afghani-blue-45 bg-afghani-blue-65 text-white md:text-black md:bg-transparent font-bold`;
 ---
 
 <header
@@ -61,7 +61,7 @@ const navbarItemActiveStyle = `border-b-nix-blue-light bg-nix-blue-light text-wh
 
       <button
         aria-label="Main Navigation Toggle"
-        class="bg-nix-blue-light block rounded-lg p-4 md:hidden"
+        class="bg-afghani-blue block rounded-lg p-4 md:hidden"
         id="navigation-toggle"
       >
         <span class="mb-1.5 block h-1 w-8 bg-white"></span>
@@ -98,7 +98,10 @@ const navbarItemActiveStyle = `border-b-nix-blue-light bg-nix-blue-light text-wh
         arial-label="Nixos package and options search"
         target="_self"
       >
-        <Icon class="text-nix-blue hidden h-8 w-8 md:block" name="mdi:search" />
+        <Icon
+          class="text-afghani-blue hidden h-8 w-8 md:block"
+          name="mdi:search"
+        />
         <span class="inline-block md:hidden">Search</span>
       </Link>
     </nav>
diff --git a/core/src/components/layout/CodeBlock.astro b/core/src/components/layout/CodeBlock.astro
index 632933258c..f1e339085a 100644
--- a/core/src/components/layout/CodeBlock.astro
+++ b/core/src/components/layout/CodeBlock.astro
@@ -12,7 +12,7 @@ const { lines, type = 'code' } = Astro.props;
     'my-2 mb-4 overflow-x-auto rounded-3xl border-1 bg-[#3a3a3a] px-4 py-4',
     { 'bg-[#3a3a3a] text-white': type === 'code' },
     {
-      'border-nix-blue-extralight bg-nix-blue-extralight font-mono font-[500] text-black shadow-inner':
+      'border-afghani-blue-95 bg-afghani-blue-95 font-mono font-[500] text-black shadow-inner':
         type === 'storepath',
     },
   ]}>
diff --git a/core/src/components/layout/CodeInline.astro b/core/src/components/layout/CodeInline.astro
index 7659acc532..b3e3137a07 100644
--- a/core/src/components/layout/CodeInline.astro
+++ b/core/src/components/layout/CodeInline.astro
@@ -2,6 +2,7 @@
 
 ---
 
-<code class="text-nix-orange-dark rounded-lg border-1 bg-neutral-100 px-2 py-1"
+<code
+  class="text-nix-persian-orange-45 rounded-lg border-1 bg-neutral-100 px-2 py-1"
   ><slot /></code
 >
diff --git a/core/src/components/layout/PageHeader.astro b/core/src/components/layout/PageHeader.astro
index 0266e6fb8c..6551b48838 100644
--- a/core/src/components/layout/PageHeader.astro
+++ b/core/src/components/layout/PageHeader.astro
@@ -33,7 +33,7 @@ import Container from './Container.astro';
   </Container>
 </div>
 
-<div class="bg-nix-blue text-white md:hidden">
+<div class="bg-afghani-blue text-white md:hidden">
   <Container class="px-12 py-16">
     <h1 class="text-center text-3xl font-bold">
       {text}
diff --git a/core/src/components/layout/Tabs.astro b/core/src/components/layout/Tabs.astro
index 0fd506b360..d4f35a9945 100644
--- a/core/src/components/layout/Tabs.astro
+++ b/core/src/components/layout/Tabs.astro
@@ -96,7 +96,7 @@ const uid = crypto.randomUUID();
   <Container class="grid w-full gap-8 px-12 pt-8 lg:grid-cols-[30%_auto]">
     <nav class:list={['tab-bar']}>
       <Container
-        class="bg-nix-blue-extralight grid gap-0 rounded-3xl px-0! py-8 md:grid-cols-1"
+        class="bg-afghani-blue-95 grid gap-0 rounded-3xl px-0! py-8 md:grid-cols-1"
       >
         {
           tabs.map(async (name, idx) => {
@@ -125,10 +125,10 @@ const uid = crypto.randomUUID();
                   <label
                     class:list={[
                       'tab',
-                      'text-nix-blue-light',
+                      'text-afghani-blue-75',
                       'text-lg',
                       'font-bold',
-                      'peer-checked:text-nix-blue',
+                      'peer-checked:text-afghani-blue',
                       'py-12',
                       'px-8',
                       'w-full',
diff --git a/core/src/components/pages/blog/BlogListEntry.astro b/core/src/components/pages/blog/BlogListEntry.astro
index c3ced7cdd6..894e40ab9d 100644
--- a/core/src/components/pages/blog/BlogListEntry.astro
+++ b/core/src/components/pages/blog/BlogListEntry.astro
@@ -15,12 +15,12 @@ const { post } = Astro.props;
 >
   <a href={generatePathFromPost(post)}>
     <h2
-      class="font-ned, composition in a document, page, applicaextrabold font-heading text-nix-blue text-4xl leading-tight"
+      class="font-ned, composition in a document, page, applicaextrabold font-heading text-afghani-blue text-4xl leading-tight"
     >
       {post.data.title}
     </h2>
   </a>
-  <p class="mb-2 text-xs text-gray-700">
+  <p class="text-black-35 mb-2 text-xs">
     {createBlogSubheader(post)}
   </p>
   <p class="font-extralight">{createExcerpt(post.body)}...</p>
diff --git a/core/src/components/pages/community/CommunityPageListItem.astro b/core/src/components/pages/community/CommunityPageListItem.astro
index a2cd837281..05ef5f18ae 100644
--- a/core/src/components/pages/community/CommunityPageListItem.astro
+++ b/core/src/components/pages/community/CommunityPageListItem.astro
@@ -23,11 +23,11 @@ const effectiveType =
 
 <li
   class:list={[
-    'border-nix-blue hover:bg-nix-blue-extralight flex-1 cursor-pointer rounded-xl border-2 bg-white p-4 transition-all',
+    'border-afghani-blue hover:bg-afghani-blue-95 flex-1 cursor-pointer rounded-xl border-2 bg-white p-4 transition-all',
     effectiveType === 'icon' && 'flex flex-col items-center justify-center',
   ]}
 >
-  <a href={href} class="text-nix-blue! flex h-full flex-col no-underline!">
+  <a href={href} class="text-afghani-blue! flex h-full flex-col no-underline!">
     <div
       class:list={[
         'flex gap-2 text-xl font-bold',
diff --git a/core/src/components/pages/community/OfficialCommunityLink.astro b/core/src/components/pages/community/OfficialCommunityLink.astro
index b6639e31fc..c60e0d132b 100644
--- a/core/src/components/pages/community/OfficialCommunityLink.astro
+++ b/core/src/components/pages/community/OfficialCommunityLink.astro
@@ -22,7 +22,7 @@ const {
 
 <li
   class:list={[
-    'bg-nix-blue hover:bg-nix-blue-dark flex-1 cursor-pointer rounded-xl p-4 transition-all',
+    'bg-afghani-blue hover:bg-afghani-blue-45 flex-1 cursor-pointer rounded-xl p-4 transition-all',
     type === 'icon' && 'flex flex-col items-center justify-center',
     extraClasses,
   ]}
diff --git a/core/src/components/pages/community/teams/MembersDisplay.astro b/core/src/components/pages/community/teams/MembersDisplay.astro
index fcef9499b7..a6d3c767b5 100644
--- a/core/src/components/pages/community/teams/MembersDisplay.astro
+++ b/core/src/components/pages/community/teams/MembersDisplay.astro
@@ -6,12 +6,12 @@ const {
   contact,
   class: extraClasses,
 } = Astro.props;
-const titleClasses = `text-3xl font-heading font-bold text-nix-blue`;
+const titleClasses = `text-3xl font-heading font-bold text-afghani-blue`;
 ---
 
 <aside
   class:list={[
-    !isSubteam && 'bg-nix-blue-extralight w-full rounded-xl px-4 py-3',
+    !isSubteam && 'bg-afghani-blue-95 w-full rounded-xl px-4 py-3',
     extraClasses,
   ]}
 >
@@ -19,7 +19,7 @@ const titleClasses = `text-3xl font-heading font-bold text-nix-blue`;
   <ul class="mt-2 font-light">
     {
       members.map((member) => (
-        <li class="border-b-nix-blue-light-hover flex flex-col border-b-1 pt-2 pb-2 first:pt-0 last:border-b-0 last:pb-0">
+        <li class="border-b-afghani-blue-75-hover flex flex-col border-b-1 pt-2 pb-2 first:pt-0 last:border-b-0 last:pb-0">
           <span class="font-medium">
             {member.name}
             {member.discourse && (
@@ -43,7 +43,7 @@ const titleClasses = `text-3xl font-heading font-bold text-nix-blue`;
           </span>
           {member.title && <span>{member.title}</span>}
           {member.affiliation && (
-            <span class="text-sm text-gray-700">{member.affiliation}</span>
+            <span class="text-black-35 text-sm">{member.affiliation}</span>
           )}
         </li>
       ))
@@ -52,7 +52,7 @@ const titleClasses = `text-3xl font-heading font-bold text-nix-blue`;
   {
     contact && (
       <>
-        <h2 class="font-heading text-nix-blue mt-4 text-3xl font-bold">
+        <h2 class="font-heading text-afghani-blue mt-4 text-3xl font-bold">
           Contact
         </h2>
         <ul class="mt-2 ml-4 list-disc">
diff --git a/core/src/components/pages/download/DownloadAccordion.astro b/core/src/components/pages/download/DownloadAccordion.astro
index 9cc75d32a0..7405dd0945 100644
--- a/core/src/components/pages/download/DownloadAccordion.astro
+++ b/core/src/components/pages/download/DownloadAccordion.astro
@@ -26,11 +26,11 @@ let downloadOptions = (await getCollection('download'))
                 aria-expanded="true"
                 aria-controls={optionId}
                 class:list={[
-                  'bg-nix-blue-extralight',
+                  'bg-afghani-blue-95',
                   'flex',
-                  'text-nix-blue-dark',
-                  'hover:bg-nix-blue-lighter',
-                  'hover:text-nix-blue-darker',
+                  'text-afghani-blue-25',
+                  'hover:bg-afghani-blue-85',
+                  'hover:text-afghani-blue-15',
                   'cursor-pointer',
                   'text-lg',
                   'font-bold',
@@ -86,7 +86,7 @@ let downloadOptions = (await getCollection('download'))
   const accContentArea = acc.appendChild(document.createElement('div'));
   accContentArea.classList.add('col-span-2', 'mt-4', 'px-8');
   menuContainer.classList.add(
-    'md:bg-nix-blue-extralight',
+    'md:bg-afghani-blue-95',
     'md:py-8',
     'md:rounded-2xl',
     'self-start',
@@ -177,10 +177,10 @@ let downloadOptions = (await getCollection('download'))
     triggers[i].addEventListener('click', togglePanel);
     triggers[i].classList.add(
       'md:my-0',
-      'md:text-nix-blue',
+      'md:text-afghani-blue',
       'md:rounded-none',
       'md:aria-expanded:bg-white',
-      'md:aria-expanded:text-nix-blue-dark',
+      'md:aria-expanded:text-afghani-blue-45',
       'before:icon-[mdi--arrow-up-drop-circle]',
       'before:block',
       'before:absolute',
diff --git a/core/src/components/pages/download/DownloadHeader.astro b/core/src/components/pages/download/DownloadHeader.astro
index 2c8b01e4cb..4170e5288f 100644
--- a/core/src/components/pages/download/DownloadHeader.astro
+++ b/core/src/components/pages/download/DownloadHeader.astro
@@ -10,7 +10,9 @@ interface Props {
 const { title, subTitle, currentVersion } = Astro.props;
 ---
 
-<Container class="bg-nix-blue mt-16 grid grid-cols-2 py-8 text-white md:py-6">
+<Container
+  class="bg-afghani-blue-45 mt-16 grid grid-cols-2 py-8 text-white md:py-6"
+>
   <h1 class="font-heading self-center text-3xl leading-none font-bold">
     {title}
     <span class="hidden lg:inline">
@@ -24,7 +26,7 @@ const { title, subTitle, currentVersion } = Astro.props;
       </h2>
       <a
         href="#"
-        class="bg-nix-blue-darker rounded-2xl px-4 py-2 text-center text-2xl font-bold! text-white no-underline!"
+        class="bg-afghani-blue-15 rounded-2xl px-4 py-2 text-center text-2xl font-bold! text-white no-underline!"
         >{currentVersion}</a
       >
     </div>
diff --git a/core/src/components/pages/explore/TimelineCenter.astro b/core/src/components/pages/explore/TimelineCenter.astro
index 1c9c26d7ef..b8b331a4e2 100644
--- a/core/src/components/pages/explore/TimelineCenter.astro
+++ b/core/src/components/pages/explore/TimelineCenter.astro
@@ -6,10 +6,12 @@ interface Props {
 const { number = 0 } = Astro.props;
 ---
 
-<div class="bg-nix-blue absolute top-0 left-[-3rem] hidden h-full w-1 md:block">
+<div
+  class="bg-afghani-blue absolute top-0 left-[-3rem] hidden h-full w-1 md:block"
+>
 </div>
 <div
-  class="bg-nix-blue-dark absolute top-0 left-[-5rem] hidden h-[4rem] w-[4rem] rounded-[2rem] text-center text-[3rem] leading-[4rem] font-bold text-white md:block"
+  class="bg-afghani-blue-45 absolute top-0 left-[-5rem] hidden h-[4rem] w-[4rem] rounded-[2rem] text-center text-[3rem] leading-[4rem] font-bold text-white md:block"
 >
   {number}
 </div>
diff --git a/core/src/components/pages/explore/TimelineText.astro b/core/src/components/pages/explore/TimelineText.astro
index a9222e325a..55dea0b204 100644
--- a/core/src/components/pages/explore/TimelineText.astro
+++ b/core/src/components/pages/explore/TimelineText.astro
@@ -20,10 +20,12 @@ const {
 import Tag from '../../ui/Tag.astro';
 ---
 
-<h2 class="font-heading text-nix-blue text-[2rem] leading-[2.2rem] font-bold">
+<h2
+  class="font-heading text-afghani-blueafghani-blue text-[2rem] leading-[2.2rem] font-bold"
+>
   {heading}
 </h2>
-<p class="text-xl leading-[2.2rem] font-bold text-neutral-500">{subHeading}</p>
+<p class="text-black-55 text-xl leading-[2.2rem] font-bold">{subHeading}</p>
 <div
   class="flex flex-wrap gap-1"
   class:list={[
diff --git a/core/src/components/ui/Asciinema.astro b/core/src/components/ui/Asciinema.astro
index 4c10831c06..1becfa0de5 100644
--- a/core/src/components/ui/Asciinema.astro
+++ b/core/src/components/ui/Asciinema.astro
@@ -33,7 +33,9 @@ const demoId = 'asciinema-demo-' + src.split('/').pop().split('.')[0];
   {
     title && (
       <a href={`#${demoId}`} class="no-underline!" id={`${demoId}-link`}>
-        <h3 class="font-heading text-nix-blue text-xl font-bold">{title}</h3>
+        <h3 class="font-heading text-afghani-blue text-xl font-bold">
+          {title}
+        </h3>
       </a>
     )
   }
diff --git a/core/src/components/ui/Button.astro b/core/src/components/ui/Button.astro
index e5b59ba922..54097c433c 100644
--- a/core/src/components/ui/Button.astro
+++ b/core/src/components/ui/Button.astro
@@ -9,16 +9,15 @@ export const buttonVariants = cva('font-bold transition-colors text-center', {
   variants: {
     color: {
       orange:
-        'border-nix-orange border-3 text-black hover:bg-nix-orange-transparent',
+        'border-persian-orange border-3 text-black hover:bg-persian-orange',
       lightblue:
-        'border-nix-blue-light border-3 hover:bg-nix-blue-light-transparent text-black',
-      semidarkblue: 'bg-nix-blue-dark hover:bg-nix-blue-dark-hover text-white',
+        'border-afghani-blue border-3 hover:bg-afghani-blue text-black',
+      semidarkblue: 'bg-afghani-blue-45 hover:bg-afghani-blue-25 text-white',
       green:
-        'border-nix-green border-3 text-black hover:bg-nix-green-transparent',
-      'white-borders':
-        'border-3 border-green text-white hover:bg-nix-blue-transparent',
-      white: 'bg-white hover:bg-nix-blue-lighter !text-nix-blue-dark',
-      nixblue: 'bg-nix-blue hover:bg-nix-blue-hover text-white',
+        'border-zambian-green border-3 text-black hover:bg-zambian-green hover:bg-opacity-25',
+      'white-borders': 'border-3 border-white text-white hover:bg-afghani-blue',
+      white: 'bg-white hover:bg-afghani-blue-85 !text-afghani-blue-45',
+      nixblue: 'bg-afghani-blue hover:bg-afghani-blue-45 text-white',
     },
     size: {
       sm: 'px-10 py-2.5 rounded-3xl',
diff --git a/core/src/components/ui/Citation.astro b/core/src/components/ui/Citation.astro
index 708bea9e81..76fe209e38 100644
--- a/core/src/components/ui/Citation.astro
+++ b/core/src/components/ui/Citation.astro
@@ -12,16 +12,16 @@ const { id, onBlueBackground } = Astro.props;
     <summary class="inline-block cursor-pointer">
       <sup
         class:list={[
-          onBlueBackground && 'text-white hover:text-gray-100',
-          !onBlueBackground && 'text-nix-blue hover:text-nix-blue',
+          onBlueBackground && 'hover:bg-black-95 text-white',
+          !onBlueBackground && 'text-afghani-blue hover:text-afghani-blue',
         ]}>[{id}]</sup
       >
     </summary>
     <div
       class:list={[
-        'absolute mt-1 max-w-sm rounded-sm border border-gray-300 p-2 text-sm shadow-lg',
+        'bg-black-75 absolute mt-1 max-w-sm rounded-sm border p-2 text-sm shadow-lg',
         !onBlueBackground && 'bg-white!',
-        onBlueBackground && 'bg-nix-blue-darker!',
+        onBlueBackground && 'bg-afghani-blue-15!',
       ]}
     >
       <slot />
@@ -33,10 +33,10 @@ const { id, onBlueBackground } = Astro.props;
   @reference "./../../styles/base.css";
 
   details[open] > summary > sup.text-white {
-    @apply text-gray-100;
+    @apply text-black-95;
   }
-  details[open] > summary > sup.text-nix-blue {
-    @apply text-nix-blue-dark;
+  details[open] > summary > sup.text-afghani-blue {
+    @apply text-afghani-blue-45;
   }
 </style>
 
diff --git a/core/src/components/ui/Input.astro b/core/src/components/ui/Input.astro
index ee4962b9f2..649e78f462 100644
--- a/core/src/components/ui/Input.astro
+++ b/core/src/components/ui/Input.astro
@@ -2,7 +2,7 @@
 import { Icon } from 'astro-icon/components';
 
 interface Props {
-  color?: 'nix-blue' | 'white';
+  color?: 'afghani-blue' | 'white';
   size?: 'sm' | 'lg' | 'sm-full';
   icon?: 'search' | null;
   placeholder?: string;
@@ -10,7 +10,7 @@ interface Props {
 }
 
 const {
-  color = 'nix-blue',
+  color = 'afghani-blue',
   size = 'lg',
   icon = null,
   placeholder = '',
@@ -24,7 +24,7 @@ const {
     class:list={[
       'absolute h-8 w-8',
       {
-        'text-nix-blue': color === 'nix-blue',
+        'text-afghani-blue': color === 'afghani-blue',
         'text-white': color === 'white',
         'top-3.5 left-3 md:block': size === 'lg',
         'top-1.5 left-2.5': size === 'sm-full',
@@ -34,13 +34,13 @@ const {
   />
   <input
     type="text"
-    class="focus:border-nix-blue-light focus:outline-nix-blue-light border-gray-200 outline-2 outline-transparent"
+    class="focus:border-afghani-blue-75 focus:outline-afghani-blue-75 border-black-85 outline-2 outline-transparent"
     class:list={[
-      'text-normal rounded-full placeholder-gray-400',
+      'text-normal placeholder-black-95 rounded-full',
       {
-        'placeholder-grey-200 text-nix-blue border-gray-200 bg-white':
-          color === 'nix-blue',
-        'placeholder-nix-blue-extralight border-white bg-transparent text-white':
+        'placeholder-black-85 text-afghani-blue border-black-85 bg-white':
+          color === 'afghani-blue',
+        'placeholder-afghani-blue-95 border-white bg-transparent text-white':
           color === 'white',
         'w-full border-2 py-3 pr-4 pl-11 text-xl md:w-[30rem]': size === 'lg',
         'w-full border-1 px-10 py-2 md:pl-11': size === 'sm-full',
diff --git a/core/src/components/ui/NixosSearchInput.astro b/core/src/components/ui/NixosSearchInput.astro
index 36f562699c..32bd54c116 100644
--- a/core/src/components/ui/NixosSearchInput.astro
+++ b/core/src/components/ui/NixosSearchInput.astro
@@ -3,7 +3,7 @@ import Button from './Button.astro';
 import Input from './Input.astro';
 
 interface Props {
-  color?: 'nix-blue' | 'white';
+  color?: 'afghani-blue' | 'white';
   size?: 'sm' | 'lg' | 'sm-full';
   collection?: 'packages' | 'options';
   withSubmit?: boolean;
@@ -16,7 +16,7 @@ const collectionMap = {
 };
 
 const {
-  color = 'nix-blue',
+  color = 'afghani-blue',
   size = 'lg',
   collection = 'packages',
   withSubmit = false,
diff --git a/core/src/components/ui/Quotation.astro b/core/src/components/ui/Quotation.astro
index 932a335561..d0e564a3b7 100644
--- a/core/src/components/ui/Quotation.astro
+++ b/core/src/components/ui/Quotation.astro
@@ -2,8 +2,6 @@
 
 ---
 
-<div
-  class="bg-nix-blue-extralight text-nix-blue-darker rounded-3xl p-8 font-bold"
->
+<div class="bg-afghani-blue-95 text-afghani-blue-15 rounded-3xl p-8 font-bold">
   <slot />
 </div>
diff --git a/core/src/components/ui/Tag.astro b/core/src/components/ui/Tag.astro
index 4d0d05639e..7ed1109876 100644
--- a/core/src/components/ui/Tag.astro
+++ b/core/src/components/ui/Tag.astro
@@ -16,12 +16,12 @@ const {
 const colorMap = {
   orange: outline ? 'bg-transparent border-nix-orange' : 'bg-nix-orange',
   lightblue: outline
-    ? 'bg-transparent border-nix-blue-light'
-    : 'bg-nix-blue-light',
-  darkblue: outline ? 'bg-transparent border-nix-blue' : 'bg-nix-blue',
+    ? 'bg-transparent border-afghani-blue-75'
+    : 'bg-afghani-blue-75',
+  darkblue: outline ? 'bg-transparent border-afghani-blue' : 'bg-afghani-blue',
   darkgreen: outline
-    ? 'bg-transparent border-nix-green-dark'
-    : 'bg-nix-green-dark',
+    ? 'bg-transparent border-zambian-green-45'
+    : 'bg-zambian-green-45',
 };
 
 const localClassList = `${colorMap[color]} ${outline ? 'border-1 text-black! py-[0.125rem]' : 'border-0 text-white! py-[0.25rem]'} inline-block w-fit rounded-lg font-bold no-underline! text-sm px-[0.5rem]`;
diff --git a/core/src/content/banners/nixcon-2025-announcement.mdx b/core/src/content/banners/nixcon-2025-announcement.mdx
index 5e80269721..419f7e46e2 100644
--- a/core/src/content/banners/nixcon-2025-announcement.mdx
+++ b/core/src/content/banners/nixcon-2025-announcement.mdx
@@ -10,7 +10,7 @@ sitewide:
 import Banner from '@/components/ui/Banner.astro';
 
 <Banner
-  wrapperClasses="bg-gradient-to-r from-[#260D40] to-nix-blue text-white"
+  wrapperClasses="bg-gradient-to-r from-[#260D40] to-afghani-blue text-white"
   class="font-heading flex flex-col items-center justify-between gap-1 text-lg font-bold md:flex-row"
 >
   <span>
diff --git a/core/src/content/banners/nixcon-2025-tickets.mdx b/core/src/content/banners/nixcon-2025-tickets.mdx
index 91d31d96fb..35c06c7d8d 100644
--- a/core/src/content/banners/nixcon-2025-tickets.mdx
+++ b/core/src/content/banners/nixcon-2025-tickets.mdx
@@ -10,7 +10,7 @@ sitewide:
 import Banner from '@/components/ui/Banner.astro';
 
 <Banner
-  wrapperClasses="bg-gradient-to-r from-[#260D40] to-nix-blue text-white"
+  wrapperClasses="bg-gradient-to-r from-[#260D40] to-afghani-blue text-white"
   class="font-heading flex flex-col items-center justify-between gap-1 text-lg font-bold md:flex-row"
 >
   <span>
diff --git a/core/src/content/banners/son-2025-announcement.mdx b/core/src/content/banners/son-2025-announcement.mdx
index ceea1b8a74..8f9b342b53 100644
--- a/core/src/content/banners/son-2025-announcement.mdx
+++ b/core/src/content/banners/son-2025-announcement.mdx
@@ -4,13 +4,13 @@ sitewide:
   link:
     url: https://github.com/ngi-nix/summer-of-nix
     text: 'Apply now'
-  wrapperClasses: 'bg-nix-blue-lighter text-nix-blue-darker'
+  wrapperClasses: 'bg-afghani-blue-85 text-afghani-blue-15'
 ---
 
 import Banner from '@/components/ui/Banner.astro';
 
 <Banner
-  wrapperClasses="bg-nix-blue-lighter text-nix-blue-darker"
+  wrapperClasses="bg-afghani-blue-85 text-afghani-blue-95"
   class="font-heading flex flex-col items-center justify-between gap-1 text-lg font-bold md:flex-row"
 >
   <span>Apply to Summer of Nix by May 12 to help build the future of FOSS</span>
@@ -18,7 +18,7 @@ import Banner from '@/components/ui/Banner.astro';
     href="https://github.com/ngi-nix/summer-of-nix"
     target="_blank"
     rel="noopener noreferrer"
-    class="bg-nix-blue-dark hover:bg-nix-blue-darker mt-1.5 w-full rounded-md px-4 py-3 text-center leading-none font-bold text-white no-underline md:mt-0 md:w-auto"
+    class="bg-afghani-blue-45 hover:bg-afghani-blue-15 mt-1.5 w-full rounded-md px-4 py-3 text-center leading-none font-bold text-white no-underline md:mt-0 md:w-auto"
   >
     Learn more
   </a>
diff --git a/core/src/layouts/Layout.astro b/core/src/layouts/Layout.astro
index 53e6f91966..bae59d4f5a 100644
--- a/core/src/layouts/Layout.astro
+++ b/core/src/layouts/Layout.astro
@@ -68,7 +68,7 @@ const headFeedLinks = blogMenu.data.map((e) => {
       }}
     />
   </head>
-  <body class="flex min-h-screen flex-col bg-white text-gray-950">
+  <body class="text-black-15 flex min-h-screen flex-col bg-white">
     <Header />
 
     <main class="flex-1">
diff --git a/core/src/lib/client/scrollToTopHandler.js b/core/src/lib/client/scrollToTopHandler.js
index 29f9ae71cd..8c024a96e1 100644
--- a/core/src/lib/client/scrollToTopHandler.js
+++ b/core/src/lib/client/scrollToTopHandler.js
@@ -10,7 +10,7 @@ document.addEventListener('scroll', () => {
       'md:bottom-8',
       'md:-right-14',
       'right-4',
-      'bg-nix-blue-darker',
+      'bg-afghani-blue-15',
     );
     scrollTop.classList.add(
       'md:bottom-4',
@@ -30,7 +30,7 @@ document.addEventListener('scroll', () => {
       'md:bottom-8',
       'md:-right-14',
       'right-4',
-      'bg-nix-blue-darker',
+      'bg-afghani-blue-15',
     );
   }
 
diff --git a/core/src/pages/404.astro b/core/src/pages/404.astro
index 47317d71a1..f028731f54 100644
--- a/core/src/pages/404.astro
+++ b/core/src/pages/404.astro
@@ -6,7 +6,7 @@ import Layout from '../layouts/Layout.astro';
 <Layout title="Not Found">
   <Container>
     <h1
-      class="font-heading text-nix-blue mt-10 mb-4 text-4xl leading-none font-extrabold"
+      class="font-heading text-afghani-blue mt-10 mb-4 text-4xl leading-none font-extrabold"
     >
       Not found
     </h1>
diff --git a/core/src/pages/blog.astro b/core/src/pages/blog.astro
index 0fdf198489..b590ceac6b 100644
--- a/core/src/pages/blog.astro
+++ b/core/src/pages/blog.astro
@@ -54,7 +54,7 @@ const blogMenu = await getEntry('menus', 'blog');
 <Layout title="Blog">
   <PageHeader text="Blog" />
   <Container class="py-8">
-    <p class="text-nix-blue mb-2 text-center text-2xl font-light">
+    <p class="text-afghani-blue mb-2 text-center text-2xl font-light">
       Click boxes to filter content
     </p>
     <div
@@ -76,14 +76,14 @@ const blogMenu = await getEntry('menus', 'blog');
               />
               <label
                 for={`check-${e.id}`}
-                class="border-nix-blue fill-nix-blue text-nix-blue before:icon-[mdi--checkbox-blank-outline] peer-checked:before:icon-[mdi--checkbox-marked-outline] hover:bg-nix-blue-darker peer-checked:bg-nix-blue peer-checked:hover:border-nix-blue-darker peer-checked:hover:bg-nix-blue-darker relative flex w-full cursor-pointer items-center gap-2 rounded-2xl border-1 p-4 peer-checked:fill-white peer-checked:text-white peer-focus:ring-2 peer-focus:ring-black peer-focus:ring-offset-2 before:absolute before:right-4 before:block before:h-8 before:w-8 peer-checked:before:absolute peer-checked:before:block peer-checked:before:h-8 peer-checked:before:w-8 hover:fill-white hover:text-white md:w-auto md:flex-col md:p-8 md:before:top-2 md:before:right-2"
+                class="border-afghani-blue-35 fill-afghani-blue-35 text-afghani-blue-45 before:icon-[mdi--checkbox-blank-outline] peer-checked:before:icon-[mdi--checkbox-marked-outline] hover:bg-afghani-blue-35 peer-checked:bg-afghani-blue-45 peer-checked:hover:border-afghani-blue-15 peer-checked:hover:bg-afghani-blue-15 relative flex w-full cursor-pointer items-center gap-2 rounded-2xl border-1 p-4 peer-checked:fill-white peer-checked:text-white peer-focus:ring-2 peer-focus:ring-black peer-focus:ring-offset-2 before:absolute before:right-4 before:block before:h-8 before:w-8 peer-checked:before:absolute peer-checked:before:block peer-checked:before:h-8 peer-checked:before:w-8 hover:fill-white hover:text-white md:w-auto md:flex-col md:p-8 md:before:top-2 md:before:right-2"
               >
                 <InlineSVG src={e.icon} class="w-12 md:w-24" />
                 <span class="font-light">{e.title}</span>
               </label>
             </div>
             <div class="pt-6 md:hidden">
-              <label class="border-nix-blue fill-nix-blue text-nix-blue hover:bg-nix-blue-darker peer-checked:bg-nix-blue peer-checked:hover:border-nix-blue-darker peer-checked:hover:bg-nix-blue-darker relative flex w-full cursor-pointer items-center gap-2 rounded-2xl border-1 p-4 peer-checked:fill-white peer-checked:text-white peer-focus:ring-2 peer-focus:ring-black peer-focus:ring-offset-2 hover:fill-white hover:text-white md:w-auto md:flex-col md:p-8">
+              <label class="border-afghani-blue fill-afghani-blue text-afghani-blue hover:bg-afghani-blue-15 peer-checked:bg-afghani-blue peer-checked:hover:border-afghani-blue-15 peer-checked:hover:bg-afghani-blue-15 relative flex w-full cursor-pointer items-center gap-2 rounded-2xl border-1 p-4 peer-checked:fill-white peer-checked:text-white peer-focus:ring-2 peer-focus:ring-black peer-focus:ring-offset-2 hover:fill-white hover:text-white md:w-auto md:flex-col md:p-8">
                 <a href={'/blog/' + e.id + '-rss.xml'}>
                   <InlineSVG
                     src="/src/assets/image/blog-menu/rss.svg"
diff --git a/core/src/pages/community.astro b/core/src/pages/community.astro
index 94f3c69a73..39100771af 100644
--- a/core/src/pages/community.astro
+++ b/core/src/pages/community.astro
@@ -198,7 +198,7 @@ import nixosFoundationLogo from '../assets/image/nixos-foundation-logo.svg';
 <Layout title="Community">
   <PageHeader text="Community" />
   <Container class="mt-16 space-y-4 leading-relaxed font-extralight">
-    <p class="text-lg font-bold text-gray-700">
+    <p class="text-black-35 text-lg font-bold">
       Nix and NixOS are developed and used by a diverse and welcoming community
       from all around the world.
     </p>
@@ -223,7 +223,9 @@ import nixosFoundationLogo from '../assets/image/nixos-foundation-logo.svg';
     </p>
   </Container>
   <Container>
-    <h2 class="font-heading text-nix-blue mt-8 text-4xl leading-none font-bold">
+    <h2
+      class="font-heading text-afghani-blue mt-8 text-4xl leading-none font-bold"
+    >
       Where to talk?
     </h2>
     <p class="mt-2 leading-relaxed font-extralight">
@@ -232,10 +234,10 @@ import nixosFoundationLogo from '../assets/image/nixos-foundation-logo.svg';
       development, and chat with other users.
       <div class="grid grid-cols-1 gap-4 md:grid-cols-3">
         <div class="md:col-span-2">
-          <h3 class="font-heading text-nix-blue mt-4 text-3xl font-bold">
+          <h3 class="font-heading text-afghani-blue mt-4 text-3xl font-bold">
             Official spaces
           </h3>
-          <p class="text-gray-700">
+          <p class="text-black-35">
             These spaces are monitored and moderated by the NixOS Moderation
             Team. This means they are moderated in such a way that they follow
             the standards and moral values of our community. You can find out
@@ -259,10 +261,10 @@ import nixosFoundationLogo from '../assets/image/nixos-foundation-logo.svg';
           </p>
         </div>
         <div class="col-span-1">
-          <h3 class="font-heading text-nix-blue mt-4 text-3xl font-bold">
+          <h3 class="font-heading text-afghani-blue mt-4 text-3xl font-bold">
             Official social-media
           </h3>
-          <p class="text-gray-700">
+          <p class="text-black-35">
             These spaces are maintained by our NixOS Marketing Team though not
             monitored and not moderated by the NixOS Moderation Team.
 
@@ -280,10 +282,10 @@ import nixosFoundationLogo from '../assets/image/nixos-foundation-logo.svg';
           </p>
         </div>
         <div class="md:col-span-3">
-          <h3 class="font-heading text-nix-blue mt-4 text-3xl font-bold">
+          <h3 class="font-heading text-afghani-blue mt-4 text-3xl font-bold">
             Our calendars
           </h3>
-          <p class="text-gray-700">
+          <p class="text-black-35">
             We use these calendars to schedule events, meetings, and other.
             <ul class="mt-4 grid flex-wrap gap-4 md:grid-cols-3">
               {
@@ -299,10 +301,10 @@ import nixosFoundationLogo from '../assets/image/nixos-foundation-logo.svg';
           </p>
         </div>
       </div>
-      <h3 class="font-heading text-nix-blue mt-6 text-3xl font-bold">
+      <h3 class="font-heading text-afghani-blue mt-6 text-3xl font-bold">
         Unofficial spaces
       </h3>
-      <p class="text-gray-700">
+      <p class="text-black-35">
         These spaces are not monitored and not moderated by the NixOS Moderation
         Team. Please be aware that different moral values and rules may apply in
         these spaces. The NixOS moderation team may advise moderators in these
@@ -322,10 +324,13 @@ import nixosFoundationLogo from '../assets/image/nixos-foundation-logo.svg';
           }
         </ul>
       </p>
-      <h3 id="forks" class="font-heading text-nix-blue mt-6 text-3xl font-bold">
+      <h3
+        id="forks"
+        class="font-heading text-afghani-blue mt-6 text-3xl font-bold"
+      >
         The wider ecosystem
       </h3>
-      <p class="text-gray-700">
+      <p class="text-black-35">
         There are a few alternative implementations of the idea of purely
         functional package managers (sorted chronologically by appearance):
 
@@ -351,7 +356,7 @@ import nixosFoundationLogo from '../assets/image/nixos-foundation-logo.svg';
     > that offer Nix related services.
   </Banner>
   <Divider mirrorY />
-  <div class="bg-nix-blue py-8 text-white">
+  <div class="bg-afghani-blue-45 py-8 text-white">
     <Container>
       <h2 class="font-heading text-4xl font-bold">NixCon</h2>
       <p class="mt-2 mb-4 text-xl font-bold">
@@ -360,7 +365,7 @@ import nixosFoundationLogo from '../assets/image/nixos-foundation-logo.svg';
         organizes a conference once a year.
       </p>
       <div class="grid gap-4 md:grid-cols-3">
-        <div class="bg-nix-blue-dark col-span-2 rounded-xl p-4 md:col-span-1">
+        <div class="bg-afghani-blue-35 col-span-2 rounded-xl p-4 md:col-span-1">
           <h3 class="font-heading mb-4 text-3xl font-bold">Next Conference</h3>
           <NixConEntry
             imagePath={nixcons[0].imagePath}
@@ -392,12 +397,16 @@ import nixosFoundationLogo from '../assets/image/nixos-foundation-logo.svg';
   </div>
   <Divider />
   <Container>
-    <h2 class="font-heading text-nix-blue mt-8 text-4xl font-bold">Meetups</h2>
+    <h2 class="font-heading text-afghani-blue mt-8 text-4xl font-bold">
+      Meetups
+    </h2>
     <div
       class="mt-4 grid auto-cols-fr bg-[url(/images/world-map.svg)] bg-contain bg-no-repeat text-center text-lg font-extralight md:grid-flow-col"
     >
       <div>
-        <h3 class="font-heading text-nix-blue mt-4 text-2xl font-bold md:mt-2">
+        <h3
+          class="font-heading text-afghani-blue mt-4 text-2xl font-bold md:mt-2"
+        >
           America
         </h3>
         <ul class="mt-2 space-y-4">
@@ -411,7 +420,9 @@ import nixosFoundationLogo from '../assets/image/nixos-foundation-logo.svg';
         </ul>
       </div>
       <div>
-        <h3 class="font-heading text-nix-blue mt-4 text-2xl font-bold md:mt-2">
+        <h3
+          class="font-heading text-afghani-blue mt-4 text-2xl font-bold md:mt-2"
+        >
           Europe
         </h3>
         <ul class="mt-2 space-y-4">
@@ -425,7 +436,9 @@ import nixosFoundationLogo from '../assets/image/nixos-foundation-logo.svg';
         </ul>
       </div>
       <div>
-        <h3 class="font-heading text-nix-blue mt-4 text-2xl font-bold md:mt-2">
+        <h3
+          class="font-heading text-afghani-blue mt-4 text-2xl font-bold md:mt-2"
+        >
           Asia
         </h3>
         <ul class="mt-2 space-y-4">
@@ -443,7 +456,7 @@ import nixosFoundationLogo from '../assets/image/nixos-foundation-logo.svg';
       class="mt-16 flex flex-wrap-reverse gap-8 leading-loose font-extralight"
     >
       <div class="flex flex-1 flex-col items-start justify-center gap-8">
-        <h2 class="text-nix-blue text-4xl leading-none font-bold">
+        <h2 class="text-afghani-blue text-4xl leading-none font-bold">
           RFC Process
         </h2>
         <p>
@@ -466,7 +479,7 @@ import nixosFoundationLogo from '../assets/image/nixos-foundation-logo.svg';
   <div class="mt-8">
     <Divider mirrorY />
   </div>
-  <div class="bg-nix-blue py-8">
+  <div class="bg-afghani-blue-45 py-8">
     <Container>
       <h2 class="mt-8 text-4xl font-bold text-white" id="governance-teams">
         Teams
@@ -508,7 +521,7 @@ import nixosFoundationLogo from '../assets/image/nixos-foundation-logo.svg';
       </div>
       <div class="mt-4 mb-4 inline-block text-left">
         <h2
-          class="font-heading text-nix-blue text-3xl font-bold md:text-center"
+          class="font-heading text-afghani-blue text-3xl font-bold md:text-center"
         >
           Board members:
         </h2>
@@ -532,7 +545,7 @@ import nixosFoundationLogo from '../assets/image/nixos-foundation-logo.svg';
       </div>
     </div>
     <div class="space-y-4 leading-relaxed font-extralight">
-      <h2 class="font-heading text-nix-blue text-3xl font-bold">
+      <h2 class="font-heading text-afghani-blue text-3xl font-bold">
         The mission!
       </h2>
       <p>
@@ -577,7 +590,7 @@ import nixosFoundationLogo from '../assets/image/nixos-foundation-logo.svg';
     .getElementsByTagName('rect');
   const diagram = document.getElementById('rfc-diagram');
   const durationMiliseconds = 1500;
-  const baseActivationClasses = ['stroke-nix-blue'];
+  const baseActivationClasses = ['stroke-afghani-blue'];
   const successActivationClasses = ['stroke-nix-green'];
   const failureActivationClasses = ['stroke-nix-orange', 'opacity-50'];
   const fadedActivationClasses = ['opacity-50'];
diff --git a/core/src/pages/community/commercial-support.astro b/core/src/pages/community/commercial-support.astro
index edd8e99c79..72367482f7 100644
--- a/core/src/pages/community/commercial-support.astro
+++ b/core/src/pages/community/commercial-support.astro
@@ -29,7 +29,7 @@ function shuffleArray(array) {
 <Layout title="Community">
   <PageHeader text="Commercial support" />
   <Container>
-    <p class="text-center text-xl font-bold text-gray-600">
+    <p class="text-black-45 text-center text-xl font-bold">
       Consulting companies are available for professional support.
     </p>
     <p class="mt-2 text-center">
@@ -41,7 +41,7 @@ function shuffleArray(array) {
     <ul id="company-list" class="invisible m-4 flex flex-row flex-wrap gap-4">
       {
         shuffleArray(companies.data).map((company) => (
-          <li class="border-nix-blue text-nix-blue grow basis-72 rounded-xl border p-4 font-light xl:basis-80">
+          <li class="border-afghani-blue text-afghani-blue grow basis-72 rounded-xl border p-4 font-light xl:basis-80">
             <a href={company.href} class="space-y-4 no-underline!">
               <img
                 src={company.logo}
diff --git a/core/src/pages/donate.astro b/core/src/pages/donate.astro
index c79ea353d6..a2337dfd64 100644
--- a/core/src/pages/donate.astro
+++ b/core/src/pages/donate.astro
@@ -17,7 +17,7 @@ const sponsors = await getEntry('sponsors', 'info');
   <PageHeader text="Donate" />
 
   <Container class="grid px-12 pt-16">
-    <p class="text-xl font-bold text-gray-500">
+    <p class="text-black-55 text-xl font-bold">
       The NixOS infrastructure, development and events are funded by its users
       and sponsors.
     </p>
@@ -46,7 +46,7 @@ const sponsors = await getEntry('sponsors', 'info');
     </div>
   </Container>
   <Divider style="slope" mirrorX mirrorY />
-  <div class="bg-nix-blue py-16 text-white md:px-12 md:py-16">
+  <div class="bg-afghani-blue-45 py-16 text-white md:px-12 md:py-16">
     <Container class="grid gap-8 md:grid-cols-2 md:px-12">
       <div class="flex flex-col gap-4">
         <img src="/images/donate/merch.svg" class="h-64 md:h-full" />
@@ -73,7 +73,7 @@ const sponsors = await getEntry('sponsors', 'info');
   <Divider style="slope" mirrorX />
   <Container class="grid gap-8 px-12 py-16 md:grid-cols-2">
     <div class="flex flex-col gap-4">
-      <h2 class="font-heading text-nix-blue pb-2 text-3xl font-bold">
+      <h2 class="font-heading text-afghani-blue pb-2 text-3xl font-bold">
         Donate using Open Collective
       </h2>
       <p class="leading-relaxed font-extralight">
@@ -99,7 +99,7 @@ const sponsors = await getEntry('sponsors', 'info');
       </div>
     </div>
     <div class="flex flex-col justify-center gap-4">
-      <h2 class="text-nix-blue pb-2 text-3xl font-bold">
+      <h2 class="text-afghani-blue pb-2 text-3xl font-bold">
         Donate with SEPA bank transfer
       </h2>
       <p class="font-extralight">
@@ -107,7 +107,7 @@ const sponsors = await getEntry('sponsors', 'info');
         Please send payments to:
       </p>
       <pre
-        class="bg-nix-blue-extralight text-nix-blue-darker rounded-3xl p-8 font-mono font-bold whitespace-pre-line">
+        class="bg-afghani-blue-95 text-afghani-blue-15 rounded-3xl p-8 font-mono font-bold whitespace-pre-line">
 Stichting NixOS Foundation, Utrecht, The Netherlands
 
 IBAN: NL13 BUNQ 2061 2530 32
@@ -125,7 +125,7 @@ BIC:  BUNQNL2AXXX</pre>
     </div>
   </Container>
   <Divider style="slope" mirrorY />
-  <div class="bg-nix-blue py-16 text-white">
+  <div class="bg-afghani-blue-45 py-16 text-white">
     <Container class="grid gap-8 px-12 md:grid-cols-2">
       <div class="flex flex-col justify-center">
         <div
diff --git a/core/src/pages/explore.astro b/core/src/pages/explore.astro
index ac52c7e0a0..6bf82b1778 100644
--- a/core/src/pages/explore.astro
+++ b/core/src/pages/explore.astro
@@ -14,7 +14,7 @@ const exploreInfo = await getEntry('explore', 'info');
   <PageHeader text="Explore" />
 
   <Container class="py-16">
-    <h1 class="text-center text-2xl font-extralight text-neutral-500">
+    <h1 class="text-black-55 text-center text-2xl font-extralight">
       Find out why so many developers, system administrators and other
       enthusiasts use Nix and cannot imagine a world without it.
     </h1>
diff --git a/core/src/pages/index.astro b/core/src/pages/index.astro
index fe1a04dcd3..06019f77ce 100644
--- a/core/src/pages/index.astro
+++ b/core/src/pages/index.astro
@@ -41,13 +41,13 @@ posts
       <CurrentBannerContent />
     ) : (
       <Banner
-        wrapperClasses="bg-nix-blue-extralight"
-        class="font-heading text-nix-blue-dark flex flex-col items-center justify-between gap-1 text-lg font-bold md:flex-row md:pt-8 md:pb-7"
+        wrapperClasses="bg-afghani-blue-95"
+        class="font-heading text-afghani-blue-45 flex flex-col items-center justify-between gap-1 text-lg font-bold md:flex-row md:pt-8 md:pb-7"
       >
         <b>{posts[0].data.title}</b>
         <a
           href={generatePathFromPost(posts[0])}
-          class="text-nix-blue-dark hover:text-nix-blue-light inline-flex items-center gap-2"
+          class="text-afghani-blue-45 hover:text-afghani-blue-75 inline-flex items-center gap-2"
         >
           Read Announcement
           <Icon name="mdi:arrow-right" />
@@ -55,7 +55,7 @@ posts
       </Banner>
     )
   }
-  <div class="bg-nix-blue-dark inline-svg-hero bg-cover bg-left bg-no-repeat">
+  <div class="bg-afghani-blue-45 inline-svg-hero bg-cover bg-left bg-no-repeat">
     <Container
       class="grid grid-cols-1 gap-8 py-8 text-white md:py-16 lg:grid-cols-2 lg:py-24"
     >
@@ -123,7 +123,7 @@ posts
                 src={feature.data.img}
                 class="mx-auto mb-6 h-32 w-auto"
               />
-              <h2 class="font-heading text-nix-blue mb-2 text-3xl leading-none font-bold">
+              <h2 class="font-heading text-afghani-blue mb-2 text-3xl leading-none font-bold">
                 {feature.data.title}
               </h2>
               <div class="text-light-bold leading-loose">
@@ -138,12 +138,12 @@ posts
   <div
     class="after:bg-divider relative after:bottom-0 after:left-0 after:-mt-48 after:-mb-16 after:block after:h-[30rem] after:w-full after:overflow-hidden after:bg-[url(/divider/landing_search_bottom.svg)] after:bg-cover after:bg-[60%_100%] after:bg-no-repeat"
   >
-    <div class="bg-nix-blue-extralight pt-4">
+    <div class="bg-afghani-blue-95 pt-4">
       <Container
         class="flex w-full flex-col items-center justify-center gap-4 pt-8 pb-8"
       >
         <h2
-          class="font-heading text-nix-blue pb-0 text-center text-4xl leading-tight font-bold md:w-2/3"
+          class="font-heading text-afghani-blue pb-0 text-center text-4xl leading-tight font-bold md:w-2/3"
         >
           Choose from over 120 000 Packages
         </h2>
@@ -151,7 +151,7 @@ posts
           class="pb-2 text-center text-2xl leading-relaxed font-extralight md:w-5/6"
         >
           The Nix Packages collection (<a
-            class="text-nix-blue! font-bold"
+            class="text-afghani-blue! font-bold"
             href="#">Nixpkgs</a
           >) offers a large selection of packages for the Nix package manager.
         </p>
@@ -162,7 +162,7 @@ posts
   <div>
     <Container>
       <h2
-        class="font-heading text-nix-blue w-full pb-2 text-center text-4xl font-bold"
+        class="font-heading text-afghani-blue w-full pb-2 text-center text-4xl font-bold"
       >
         Examples
       </h2>
diff --git a/core/src/pages/learn.astro b/core/src/pages/learn.astro
index afb22469f2..0f8081d542 100644
--- a/core/src/pages/learn.astro
+++ b/core/src/pages/learn.astro
@@ -62,7 +62,7 @@ const learningResources = [
   <Container class="grid gap-4 py-16 md:grid-cols-3">
     {
       learningFeatures.map((feature) => (
-        <div class="border-0.5 border-nix-blue-darker flex flex-col justify-center gap-8 rounded-2xl p-8">
+        <div class="border-0.5 border-afghani-blue-15 flex flex-col justify-center gap-8 rounded-2xl p-8">
           <InlineSVG src={feature.imgUrl} class="h-28" />
           <Button size="lg-full" color={feature.color} href={feature.url}>
             {feature.title}
@@ -72,7 +72,7 @@ const learningResources = [
     }
   </Container>
   <Divider style="slope" mirrorY mirrorX />
-  <div class="bg-nix-blue py-8 text-white md:px-8">
+  <div class="bg-afghani-blue-45 py-8 text-white md:px-8">
     <Container>
       <h2 class="font-heading pb-8 text-4xl font-extrabold">Search</h2>
       <div class="grid gap-4 md:grid-cols-2">
@@ -101,13 +101,13 @@ const learningResources = [
       learningManuals.map(async (manual) => {
         const { Content } = await render(manual);
         return (
-          <div class="border-0.5 border-nix-blue-darker flex flex-col items-center justify-start gap-4 rounded-2xl p-4">
+          <div class="border-0.5 border-afghani-blue-15 flex flex-col items-center justify-start gap-4 rounded-2xl p-4">
             <article>
               <InlineSVG
                 src="/src/assets/image/doc-icon.svg"
                 class="img-noadjust float-left inline h-20 w-20 pr-6"
               />
-              <h2 class="font-heading text-nix-blue mb-4 text-3xl leading-none font-bold">
+              <h2 class="font-heading text-afghani-blue mb-4 text-3xl leading-none font-bold">
                 {manual.data.title}
               </h2>
               <div class="leading-relaxed font-extralight">
@@ -123,7 +123,7 @@ const learningResources = [
     }
   </Container>
   <Divider style="slope" mirrorY />
-  <div class="bg-nix-blue py-8 text-white md:px-8">
+  <div class="bg-afghani-blue-45 py-8 text-white md:px-8">
     <Container>
       <h2 class="font-heading pb-8 text-4xl font-extrabold">
         Other learning resources
diff --git a/core/src/pages/research.astro b/core/src/pages/research.astro
index 508bb181a0..e8e2821bff 100644
--- a/core/src/pages/research.astro
+++ b/core/src/pages/research.astro
@@ -875,9 +875,9 @@ function getVenueString(pubInfo: PublicationType) {
     </div>
   </Container>
   <Divider style="slope" mirrorX mirrorY />
-  <div class="bg-nix-blue py-16 text-white md:px-12 md:py-16">
+  <div class="bg-afghani-blue py-16 text-white md:px-12 md:py-16">
     <Container
-      class="bg-nix-blue mt-16 space-y-8 leading-relaxed font-extralight"
+      class="bg-afghani-blue mt-16 space-y-8 leading-relaxed font-extralight"
     >
       <h1 class="font-heading text-4xl leading-tight font-bold">
         Scientific publications about Nix and associated projects
@@ -898,16 +898,16 @@ function getVenueString(pubInfo: PublicationType) {
                     />
                     <div class="content-container">
                       <div class="paper-info flex-1 space-y-2">
-                        <h3 class="max-w-[650px] text-lg font-medium text-gray-900">
+                        <h3 class="text-black-15 max-w-[650px] text-lg font-medium">
                           {paper.title}
                         </h3>
-                        <p class="text-sm text-gray-700">
+                        <p class="text-black-35 text-sm">
                           {paper.authors.map((a, i) => (
                             <>
                               {a.orcidUrl ? (
                                 <a
                                   href={a.orcidUrl}
-                                  class="transition-colors hover:text-blue-600"
+                                  class="hover:text-afghani-blue-45 transition-colors"
                                   target="_blank"
                                 >
                                   <span class="whitespace-nowrap">
@@ -925,7 +925,7 @@ function getVenueString(pubInfo: PublicationType) {
                             </>
                           ))}
                         </p>
-                        <p class="text-sm text-gray-700">
+                        <p class="text-black-35 text-sm">
                           {getVenueString(paper.publicationInfo)}
                         </p>
                       </div>
@@ -1039,7 +1039,7 @@ function getVenueString(pubInfo: PublicationType) {
                         )}
                       </div>
                     </div>
-                    <div class="abstract-content mt-4 text-sm text-gray-700">
+                    <div class="abstract-content text-black-35 mt-4 text-sm">
                       {paper.abstract &&
                         paper.abstract
                           .split('\n\n')
@@ -1062,7 +1062,7 @@ function getVenueString(pubInfo: PublicationType) {
   @reference "./../styles/base.css";
 
   .btn-action {
-    @apply rounded-full p-2 text-gray-500 transition hover:bg-gray-100 hover:text-gray-600;
+    @apply hover:bg-black-95 hover:text-black-45 text-black-55 rounded-full p-2 transition;
     padding: 0.5rem;
     border-radius: 9999px;
     transition: all 0.3s ease;
diff --git a/core/src/pages/sponsorship.astro b/core/src/pages/sponsorship.astro
index 5ec854677d..db90f177f0 100644
--- a/core/src/pages/sponsorship.astro
+++ b/core/src/pages/sponsorship.astro
@@ -21,20 +21,20 @@ const tiers = await getEntry('sponsors', 'tiers');
   <Container class="my-4 grid gap-4 md:grid-cols-3">
     {
       tiers.data.map((tier) => (
-        <div class="bg-nix-blue-lighter flex flex-col justify-between rounded-b-xl">
+        <div class="bg-afghani-blue-95 flex flex-col justify-between rounded-b-xl">
           <div class="flex-1">
-            <h2 class="bg-nix-blue-dark flex items-center justify-between rounded-t-xl p-2 text-lg font-bold text-white">
+            <h2 class="bg-afghani-blue-45 flex items-center justify-between rounded-t-xl p-2 text-lg font-bold text-white">
               {tier.name}{' '}
-              <span class="bg-nix-blue-darker rounded-xl px-2 py-1 text-base">
+              <span class="bg-afghani-blue-15 rounded-xl px-2 py-1 text-base">
                 {tier.contribution}
               </span>
             </h2>
             <ul class="py-1">
               {tier.benefits.map((benefit) => (
-                <li class="border-b-nix-blue-light-hover inline-flex w-full items-center gap-2 border-b-1 p-2 last:border-b-0">
+                <li class="border-b-afghani-blue-45 inline-flex w-full items-center gap-2 border-b-1 p-2 last:border-b-0">
                   <Icon
                     name={benefit.icon}
-                    class="text-nix-blue-dark min-h-5 min-w-5"
+                    class="text-afghani-blue-45 min-h-5 min-w-5"
                   />{' '}
                   {benefit.description}
                 </li>
@@ -42,7 +42,7 @@ const tiers = await getEntry('sponsors', 'tiers');
             </ul>
           </div>
           {tier.requirements && (
-            <p class="bg-nix-blue-darker px-2 py-1 text-sm text-white">
+            <p class="bg-afghani-blue-35 px-2 py-1 text-sm text-white">
               {tier.requirements}
             </p>
           )}
diff --git a/core/src/pages/values.astro b/core/src/pages/values.astro
index 8d0a0b00bc..59e33e4605 100644
--- a/core/src/pages/values.astro
+++ b/core/src/pages/values.astro
@@ -14,7 +14,7 @@ import Quotation from '../components/ui/Quotation.astro';
   <PageHeader text="Values" />
   <Container class="mt-16 space-y-4 leading-relaxed font-extralight">
     <h2
-      class="font-heading text-nix-blue mt-4 text-4xl font-bold"
+      class="font-heading text-afghani-blue mt-4 text-4xl font-bold"
       id="community-values-intro"
     >
       Introduction
@@ -46,7 +46,7 @@ import Quotation from '../components/ui/Quotation.astro';
     </p>
 
     <h3
-      class="font-heading text-nix-blue mt-4 text-3xl font-bold"
+      class="font-heading text-afghani-blue mt-4 text-3xl font-bold"
       id="community-values-whatis"
     >
       What is a value?
@@ -79,7 +79,7 @@ import Quotation from '../components/ui/Quotation.astro';
   </Container>
   <Divider mirrorY />
 
-  <div class="bg-nix-blue py-8 text-white">
+  <div class="bg-afghani-blue-45 py-8 text-white">
     <Container>
       <h2
         class="text-nix-white font-heading mt-4 text-3xl font-bold"
@@ -134,7 +134,8 @@ import Quotation from '../components/ui/Quotation.astro';
 
       <p>
         Nix projects are and will always remain <a
-          href="https://www.gnu.org/philosophy/free-sw.en.html">free software</a
+          href="https://www.gnu.org/philosophy/free-sw.en.html"
+          class="text-white">free software</a
         >. We value working together with the broader free software community.
         Free software is our priority, but we also support our users' needs to
         use non-free software, when practical.
@@ -208,7 +209,7 @@ import Quotation from '../components/ui/Quotation.astro';
 <style>
   @reference "./../styles/base.css";
 
-  .bg-nix-blue a {
-    @apply text-white hover:text-gray-300;
+  .bg-afghani-blue a {
+    @apply hover:text-black-75 text-white;
   }
 </style>
diff --git a/core/src/styles/base.css b/core/src/styles/base.css
index 130e46b9c7..2ceae247b9 100644
--- a/core/src/styles/base.css
+++ b/core/src/styles/base.css
@@ -39,11 +39,15 @@
 
 @layer base {
   main a:-webkit-any-link {
-    @apply text-nix-blue-dark underline decoration-1 underline-offset-4;
+    @apply text-afghani-blue-45 underline decoration-1 underline-offset-4;
   }
 
   main a:any-link {
-    @apply text-nix-blue-dark underline decoration-1 underline-offset-4;
+    @apply text-afghani-blue-45 underline decoration-1 underline-offset-4;
+  }
+
+  ::selection {
+    @apply bg-afghani-blue-45 text-afghani-blue-95;
   }
 }
 
@@ -112,7 +116,7 @@
   }
 
   article h3 {
-    @apply text-nix-blue mb-4 text-2xl font-bold;
+    @apply text-afghani-blue mb-4 text-2xl font-bold;
   }
 
   article p {
@@ -124,7 +128,7 @@
   }
 
   article code {
-    @apply rounded-sm border-1 border-gray-300 bg-gray-100 px-1 pt-1 pb-1 font-mono font-[500] text-black;
+    @apply border-black-85 bg-black-95 rounded-sm border-1 px-1 pt-1 pb-1 font-mono font-[500] text-black;
   }
 
   article pre {
@@ -144,7 +148,7 @@
   }
 
   article blockquote {
-    @apply border-nix-blue-darker bg-nix-blue-extralight mb-4 border-l-4 px-4 pt-2;
+    @apply border-afghani-blue-15 bg-afghani-blue-95 mb-4 border-l-4 px-4 pt-2;
   }
 
   article h1,
@@ -153,7 +157,7 @@
   article h4,
   article h5,
   article h6 {
-    @apply font-heading text-nix-blue leading-tight font-bold;
+    @apply font-heading text-afghani-blue leading-tight font-bold;
   }
 
   article h1:not(:first-child),
diff --git a/core/tailwind.config.cjs b/core/tailwind.config.cjs
index 8a06fc7bd1..c5f4448be3 100644
--- a/core/tailwind.config.cjs
+++ b/core/tailwind.config.cjs
@@ -4,9 +4,33 @@ import fs from 'node:fs';
 import path from 'node:path';
 import parser from 'node-html-parser';
 import svgo from 'svgo';
-import colors from 'tailwindcss/colors';
 import defaultTheme from 'tailwindcss/defaultTheme';
 
+import nixColors from '../colors.json';
+
+const nixColorsNew = [
+  nixColors.palette.accent,
+  nixColors.palette.primary,
+  nixColors.palette.secondary,
+]
+  .flat()
+  // convert to "name":  { DEFAULT: "#hex" } format
+  .reduce((acc, color) => {
+    const name = color.name.replace(/ /g, '-').toLowerCase();
+    acc[name] = {
+      DEFAULT: `oklch(${color.value[0]} ${color.value[1]} ${color.value[2]})`,
+      ...Object.fromEntries(
+        Object.entries(color.tints).map(([k, v]) => [
+          k.slice(1), // remove the leading `-`
+          `oklch(${v[0]} ${v[1]} ${v[2]})`,
+        ]),
+      ),
+    };
+    return acc;
+  }, {});
+
+console.log(nixColorsNew);
+
 const inlineSvgs = {
   hero: './src/assets/image/hero-bg.svg',
   'landing-search-top': './src/assets/image/divider/landing_search_top.svg',
@@ -58,39 +82,7 @@ module.exports = {
       heading: ['Overpass Variable', ...defaultTheme.fontFamily.sans],
       mono: ['Fira Code Variable', ...defaultTheme.fontFamily.mono],
     },
-    colors: {
-      'nix-blue': {
-        extralight: '#f2f8fd', // nixlighterblue
-        lighter: '#e6ecf5', // nixlighterblue-dimmed
-        light: '#7ebae4', // nixlightblue
-        'light-transparent': '#7ebae433',
-        'light-hover': '#69a6d1',
-        DEFAULT: '#5277c3', // nixdarkblue
-        transparent: '#e6ecf533',
-        hover: '#466cb9',
-        dark: '#405D99', // nixsemidarkblue
-        'dark-hover': '#4e73bc',
-        darker: '#27385d', // nixdarkerblue
-      },
-      'nix-orange': {
-        lighter: '#fff5e1', // nixlightorange
-        DEFAULT: '#ffab0d', // nixorange
-        transparent: '#ffab0d33',
-        hover: '#ec9d0c',
-        dark: '#ff8657', // nixdarkorange
-        darker: '#cc3900', // nixdarkerorange
-      },
-      'nix-green': {
-        DEFAULT: '#6ad541', // nixgreen
-        transparent: '#6ad54133',
-        hover: '#64c53d',
-        dark: '#51ba29', // nixdarkgreen
-      },
-      gray: colors.gray,
-      white: colors.white,
-      black: colors.black,
-      transparent: colors.transparent,
-    },
+    colors: nixColorsNew,
     boxShadow: shadow,
     dropShadow: shadow,
     extend: {
diff --git a/flake.lock b/flake.lock
index 69fe20aeef..a51a296148 100644
--- a/flake.lock
+++ b/flake.lock
@@ -1,6 +1,45 @@
 {
   "nodes": {
+    "branding": {
+      "inputs": {
+        "flake-compat": "flake-compat",
+        "gitignore": "gitignore",
+        "nixpkgs": "nixpkgs",
+        "pre-commit-hooks": "pre-commit-hooks",
+        "treefmt-nix": "treefmt-nix",
+        "typix": "typix"
+      },
+      "locked": {
+        "lastModified": 1752363501,
+        "narHash": "sha256-apzFsv1kd+tXb7Qt92qEZ5UeqFNvInmv2ztGdXjH5I8=",
+        "owner": "NixOS",
+        "repo": "branding",
+        "rev": "69c41ba342aa3c623d3b7d4489a236560043d216",
+        "type": "github"
+      },
+      "original": {
+        "owner": "NixOS",
+        "repo": "branding",
+        "type": "github"
+      }
+    },
     "flake-compat": {
+      "flake": false,
+      "locked": {
+        "lastModified": 1733328505,
+        "narHash": "sha256-NeCCThCEP3eCl2l/+27kNNK7QrwZB1IJCrXfrbv5oqU=",
+        "owner": "edolstra",
+        "repo": "flake-compat",
+        "rev": "ff81ac966bb2cae68946d5ed5fc4994f96d0ffec",
+        "type": "github"
+      },
+      "original": {
+        "owner": "edolstra",
+        "repo": "flake-compat",
+        "type": "github"
+      }
+    },
+    "flake-compat_2": {
       "flake": false,
       "locked": {
         "lastModified": 1696426674,
@@ -16,7 +55,7 @@
         "type": "github"
       }
     },
-    "flake-compat_2": {
+    "flake-compat_3": {
       "flake": false,
       "locked": {
         "lastModified": 1733328505,
@@ -32,7 +71,7 @@
         "type": "github"
       }
     },
-    "flake-compat_3": {
+    "flake-compat_4": {
       "flake": false,
       "locked": {
         "lastModified": 1733328505,
@@ -110,9 +149,9 @@
     },
     "git-hooks-nix": {
       "inputs": {
-        "flake-compat": "flake-compat",
-        "gitignore": "gitignore",
-        "nixpkgs": "nixpkgs"
+        "flake-compat": "flake-compat_2",
+        "gitignore": "gitignore_2",
+        "nixpkgs": "nixpkgs_2"
       },
       "locked": {
         "lastModified": 1750779888,
@@ -191,6 +230,27 @@
       }
     },
     "gitignore": {
+      "inputs": {
+        "nixpkgs": [
+          "branding",
+          "nixpkgs"
+        ]
+      },
+      "locked": {
+        "lastModified": 1709087332,
+        "narHash": "sha256-HG2cCnktfHsKV0s4XW83gU3F57gaTljL9KNSuG6bnQs=",
+        "owner": "hercules-ci",
+        "repo": "gitignore.nix",
+        "rev": "637db329424fd7e46cf4185293b9cc8c88c95394",
+        "type": "github"
+      },
+      "original": {
+        "owner": "hercules-ci",
+        "repo": "gitignore.nix",
+        "type": "github"
+      }
+    },
+    "gitignore_2": {
       "inputs": {
         "nixpkgs": [
           "git-hooks-nix",
@@ -229,16 +289,16 @@
     },
     "nixpkgs": {
       "locked": {
-        "lastModified": 1730768919,
-        "narHash": "sha256-8AKquNnnSaJRXZxc5YmF/WfmxiHX6MMZZasRP6RRQkE=",
-        "owner": "NixOS",
+        "lastModified": 1746663147,
+        "narHash": "sha256-Ua0drDHawlzNqJnclTJGf87dBmaO/tn7iZ+TCkTRpRc=",
+        "owner": "nixos",
         "repo": "nixpkgs",
-        "rev": "a04d33c0c3f1a59a2c1cb0c6e34cd24500e5a1dc",
+        "rev": "dda3dcd3fe03e991015e9a74b22d35950f264a54",
         "type": "github"
       },
       "original": {
-        "owner": "NixOS",
-        "ref": "nixpkgs-unstable",
+        "owner": "nixos",
+        "ref": "nixos-unstable",
         "repo": "nixpkgs",
         "type": "github"
       }
@@ -323,6 +383,22 @@
       }
     },
     "nixpkgs_2": {
+      "locked": {
+        "lastModified": 1730768919,
+        "narHash": "sha256-8AKquNnnSaJRXZxc5YmF/WfmxiHX6MMZZasRP6RRQkE=",
+        "owner": "NixOS",
+        "repo": "nixpkgs",
+        "rev": "a04d33c0c3f1a59a2c1cb0c6e34cd24500e5a1dc",
+        "type": "github"
+      },
+      "original": {
+        "owner": "NixOS",
+        "ref": "nixpkgs-unstable",
+        "repo": "nixpkgs",
+        "type": "github"
+      }
+    },
+    "nixpkgs_3": {
       "locked": {
         "lastModified": 1753549186,
         "narHash": "sha256-Znl7rzuxKg/Mdm6AhimcKynM7V3YeNDIcLjBuoBcmNs=",
@@ -337,7 +413,7 @@
         "type": "indirect"
       }
     },
-    "nixpkgs_3": {
+    "nixpkgs_4": {
       "locked": {
         "lastModified": 1747179050,
         "narHash": "sha256-qhFMmDkeJX9KJwr5H32f1r7Prs7XbQWtO0h3V0a0rFY=",
@@ -353,7 +429,7 @@
         "type": "github"
       }
     },
-    "nixpkgs_4": {
+    "nixpkgs_5": {
       "locked": {
         "lastModified": 1747179050,
         "narHash": "sha256-qhFMmDkeJX9KJwr5H32f1r7Prs7XbQWtO0h3V0a0rFY=",
@@ -369,12 +445,41 @@
         "type": "github"
       }
     },
+    "pre-commit-hooks": {
+      "inputs": {
+        "flake-compat": [
+          "branding",
+          "flake-compat"
+        ],
+        "gitignore": [
+          "branding",
+          "gitignore"
+        ],
+        "nixpkgs": [
+          "branding",
+          "nixpkgs"
+        ]
+      },
+      "locked": {
+        "lastModified": 1742649964,
+        "narHash": "sha256-DwOTp7nvfi8mRfuL1escHDXabVXFGT1VlPD1JHrtrco=",
+        "owner": "cachix",
+        "repo": "git-hooks.nix",
+        "rev": "dcf5072734cb576d2b0c59b2ac44f5050b5eac82",
+        "type": "github"
+      },
+      "original": {
+        "owner": "cachix",
+        "repo": "git-hooks.nix",
+        "type": "github"
+      }
+    },
     "released-nix-stable": {
       "inputs": {
-        "flake-compat": "flake-compat_2",
+        "flake-compat": "flake-compat_3",
         "flake-parts": "flake-parts_2",
         "git-hooks-nix": "git-hooks-nix_2",
-        "nixpkgs": "nixpkgs_3",
+        "nixpkgs": "nixpkgs_4",
         "nixpkgs-23-11": "nixpkgs-23-11",
         "nixpkgs-regression": "nixpkgs-regression"
       },
@@ -395,10 +500,10 @@
     },
     "released-nix-unstable": {
       "inputs": {
-        "flake-compat": "flake-compat_3",
+        "flake-compat": "flake-compat_4",
         "flake-parts": "flake-parts_3",
         "git-hooks-nix": "git-hooks-nix_3",
-        "nixpkgs": "nixpkgs_4",
+        "nixpkgs": "nixpkgs_5",
         "nixpkgs-23-11": "nixpkgs-23-11_2",
         "nixpkgs-regression": "nixpkgs-regression_2"
       },
@@ -449,10 +554,11 @@
     },
     "root": {
       "inputs": {
+        "branding": "branding",
         "flake-parts": "flake-parts",
         "git-hooks-nix": "git-hooks-nix",
         "nix-pills": "nix-pills",
-        "nixpkgs": "nixpkgs_2",
+        "nixpkgs": "nixpkgs_3",
         "released-nix-stable": "released-nix-stable",
         "released-nix-unstable": "released-nix-unstable",
         "released-nixpkgs-stable": "released-nixpkgs-stable",
@@ -473,6 +579,48 @@
         "id": "systems",
         "type": "indirect"
       }
+    },
+    "treefmt-nix": {
+      "inputs": {
+        "nixpkgs": [
+          "branding",
+          "nixpkgs"
+        ]
+      },
+      "locked": {
+        "lastModified": 1742982148,
+        "narHash": "sha256-aRA6LSxjlbMI6MmMzi/M5WH/ynd8pK+vACD9za3MKLQ=",
+        "owner": "numtide",
+        "repo": "treefmt-nix",
+        "rev": "61c88349bf6dff49fa52d7dfc39b21026c2a8881",
+        "type": "github"
+      },
+      "original": {
+        "owner": "numtide",
+        "repo": "treefmt-nix",
+        "type": "github"
+      }
+    },
+    "typix": {
+      "inputs": {
+        "nixpkgs": [
+          "branding",
+          "nixpkgs"
+        ]
+      },
+      "locked": {
+        "lastModified": 1745311617,
+        "narHash": "sha256-rSwSFTy7E+/i+V2IB6GT4eP07r0XPoKlq/GbNYhakkw=",
+        "owner": "loqusion",
+        "repo": "typix",
+        "rev": "bc85fe6c66247893e8ff3e5d15166276caaf26eb",
+        "type": "github"
+      },
+      "original": {
+        "owner": "loqusion",
+        "repo": "typix",
+        "type": "github"
+      }
     }
   },
   "root": "root",
diff --git a/flake.nix b/flake.nix
index 0f6db7ae13..978d791fe2 100644
--- a/flake.nix
+++ b/flake.nix
@@ -14,6 +14,9 @@ rec {
     released-nix-stable.url = "github:nixos/nix/latest-release";
     nix-pills.url = "github:NixOS/nix-pills";
     nix-pills.flake = false;
+
+    # NixOS branding
+    branding.url = "github:NixOS/branding";
   };
 
   nixConfig = {
@@ -32,6 +35,7 @@ rec {
       self,
       flake-parts,
       git-hooks-nix,
+      branding,
       nixpkgs,
       released-nixpkgs-unstable,
       released-nixpkgs-stable,
@@ -217,6 +221,10 @@ rec {
               export THEME="${builtins.getEnv "THEME"}"
               export BANNER="${builtins.getEnv "BANNER"}"
 
+              ${pkgs.toml2json}/bin/toml2json --pretty \
+                ${branding.hydraJobs.nixos-branding-all.${system}.nixos-color-palette}/colors.toml \
+                > colors.json
+
               npm run build --workspace core
             '';
 
@@ -308,6 +316,10 @@ rec {
                 ${nodejs_current}/bin/npm install --workspaces --include-workspace-root
               fi
 
+              ${pkgs.toml2json}/bin/toml2json --pretty \
+                ${branding.hydraJobs.nixos-branding-all.${system}.nixos-color-palette}/colors.toml \
+                > colors.json
+
               cat >&2 << EOF
               To fetch all dependencies:
                   npm install --workspaces --include-workspace-root