diff --git a/src/app/(docs)/brand/layout.tsx b/src/app/(docs)/brand/layout.tsx
index d84c1e4c7..6ca0f9cf0 100644
--- a/src/app/(docs)/brand/layout.tsx
+++ b/src/app/(docs)/brand/layout.tsx
@@ -33,10 +33,10 @@ export default async function DocPage({ children }: { children: React.ReactNode
 
       <div className="mx-auto grid w-full max-w-2xl grid-cols-1 gap-10 xl:max-w-5xl xl:grid-cols-[minmax(0,1fr)_var(--container-2xs)]">
         <div className="px-4 pt-10 pb-24 sm:px-6 xl:pr-0">
-          <h1 data-title="true" className="mt-2 text-3xl font-medium tracking-tight text-gray-950 dark:text-white">
+          <h1 data-title="true" className="mt-2 text-3xl font-medium tracking-tight text-neutral-950 dark:text-white">
             {post.title}
           </h1>
-          <p data-description="true" className="mt-6 text-base/7 text-gray-700 dark:text-gray-400">
+          <p data-description="true" className="mt-6 text-base/7 text-neutral-700 dark:text-neutral-400">
             {post.description}
           </p>
 
diff --git a/src/app/(docs)/docs/[slug]/page.tsx b/src/app/(docs)/docs/[slug]/page.tsx
index 51dd45df3..548937f11 100644
--- a/src/app/(docs)/docs/[slug]/page.tsx
+++ b/src/app/(docs)/docs/[slug]/page.tsx
@@ -72,16 +72,16 @@ export default async function DocPage(props: Props) {
         <div className="px-4 pt-10 pb-24 sm:px-6 xl:pr-0">
           {sectionAndTitle ? (
             <p
-              className="flex items-center gap-2 font-mono text-xs/6 font-medium tracking-widest text-gray-600 uppercase dark:text-gray-400"
+            className="flex items-center gap-2 font-mono text-xs/6 font-medium tracking-widest text-neutral-600 uppercase dark:text-neutral-400"
               data-section="true"
             >
               {sectionAndTitle.section}
             </p>
           ) : null}
-          <h1 data-title="true" className="mt-2 text-3xl font-medium tracking-tight text-gray-950 dark:text-white">
+          <h1 data-title="true" className="mt-2 text-3xl font-medium tracking-tight text-neutral-950 dark:text-white">
             {post.title}
           </h1>
-          <p data-description="true" className="mt-6 text-base/7 text-gray-700 dark:text-gray-400">
+          <p data-description="true" className="mt-6 text-base/7 text-neutral-700 dark:text-neutral-400">
             {post.description}
           </p>
 
diff --git a/src/app/(docs)/docs/installation/(tabs)/layout.tsx b/src/app/(docs)/docs/installation/(tabs)/layout.tsx
index 53fbc0444..e736fe931 100644
--- a/src/app/(docs)/docs/installation/(tabs)/layout.tsx
+++ b/src/app/(docs)/docs/installation/(tabs)/layout.tsx
@@ -99,18 +99,18 @@ export default function Page({ children }: { children: React.ReactNode }) {
         <div className="px-4 sm:px-6">
           <p
             data-section="true"
-            className="font-mono text-xs/6 font-medium tracking-widest text-gray-600 uppercase dark:text-gray-400"
+            className="font-mono text-xs/6 font-medium tracking-widest text-neutral-600 uppercase dark:text-neutral-400"
           >
             Installation
           </p>
-          <h1 className="mt-2 text-3xl font-medium tracking-tight text-gray-950 dark:text-white">
+          <h1 className="mt-2 text-3xl font-medium tracking-tight text-neutral-950 dark:text-white">
             Get started with Tailwind CSS
           </h1>
-          <p data-description="true" className="mt-6 text-base/7 text-gray-700 dark:text-gray-300">
+          <p data-description="true" className="mt-6 text-base/7 text-neutral-700 dark:text-neutral-300">
             Tailwind CSS works by scanning all of your HTML files, JavaScript components, and any other templates for
             class names, generating the corresponding styles and then writing them to a static CSS file.
           </p>
-          <p className="mt-4 text-base/7 text-gray-700 dark:text-gray-300">
+          <p className="mt-4 text-base/7 text-neutral-700 dark:text-neutral-300">
             It's fast, flexible, and reliable — with zero-runtime.
           </p>
 
@@ -119,7 +119,7 @@ export default function Page({ children }: { children: React.ReactNode }) {
               <div className="relative z-10">
                 <h2
                   data-docsearch-ignore
-                  className="mb-6 text-lg font-semibold tracking-tight text-gray-950 dark:text-white"
+                className="mb-6 text-lg font-semibold tracking-tight text-neutral-950 dark:text-white"
                 >
                   Installation
                 </h2>
diff --git a/src/app/(docs)/docs/installation/(tabs)/using-postcss/page.tsx b/src/app/(docs)/docs/installation/(tabs)/using-postcss/page.tsx
index 1b329c77b..5b7b729f6 100644
--- a/src/app/(docs)/docs/installation/(tabs)/using-postcss/page.tsx
+++ b/src/app/(docs)/docs/installation/(tabs)/using-postcss/page.tsx
@@ -132,7 +132,7 @@ export default function Page() {
       <Steps steps={steps} />
       <div className="my-4 md:my-16">
         <Cta label="Explore our framework guides" href="/docs/installation/framework-guides">
-          <strong className="font-semibold text-gray-950 dark:text-white">Are you stuck?</strong> Setting up Tailwind
+          <strong className="font-semibold text-neutral-950 dark:text-white">Are you stuck?</strong> Setting up Tailwind
           with PostCSS can be a bit different across different build tools. Check our framework guides to see if we have
           more specific instructions for your particular setup.
         </Cta>
diff --git a/src/app/(docs)/docs/installation/(tabs)/using-vite/page.tsx b/src/app/(docs)/docs/installation/(tabs)/using-vite/page.tsx
index 5b86fcf7f..7b2ce473c 100644
--- a/src/app/(docs)/docs/installation/(tabs)/using-vite/page.tsx
+++ b/src/app/(docs)/docs/installation/(tabs)/using-vite/page.tsx
@@ -152,7 +152,7 @@ export default function Page() {
       <Steps steps={steps} />
       <div className="my-4 md:my-16">
         <Cta label="Explore our framework guides" href="/docs/installation/framework-guides">
-          <strong className="font-semibold text-gray-950 dark:text-white">Are you stuck?</strong> Setting up Tailwind
+          <strong className="font-semibold text-neutral-950 dark:text-white">Are you stuck?</strong> Setting up Tailwind
           with Vite can be a bit different across different build tools. Check our framework guides to see if we have
           more specific instructions for your particular setup.
         </Cta>
diff --git a/src/app/(docs)/docs/installation/framework-guides/[...slug]/page.tsx b/src/app/(docs)/docs/installation/framework-guides/[...slug]/page.tsx
index 59ad5ca06..a9ead90f0 100644
--- a/src/app/(docs)/docs/installation/framework-guides/[...slug]/page.tsx
+++ b/src/app/(docs)/docs/installation/framework-guides/[...slug]/page.tsx
@@ -76,23 +76,23 @@ export default async function Page({ params }: Props) {
       <div className="mx-auto grid w-full max-w-2xl grid-cols-1 gap-10 pt-10 pb-24 xl:max-w-5xl">
         <div className="px-4 sm:px-6 xl:pr-0">
           <p
-            className="font-mono text-xs/6 tracking-widest text-gray-600 uppercase dark:text-gray-400"
+            className="font-mono text-xs/6 tracking-widest text-neutral-600 uppercase dark:text-neutral-400"
             data-section="true"
           >
             Installation
           </p>
-          <h1 className="mt-2 text-3xl font-medium tracking-tight text-gray-950 dark:text-white" data-title="true">
+          <h1 className="mt-2 text-3xl font-medium tracking-tight text-neutral-950 dark:text-white" data-title="true">
             {page.title}
           </h1>
-          <p className="mt-6 text-base/7 text-gray-700 dark:text-gray-400" data-description="true">
+          <p className="mt-6 text-base/7 text-neutral-700 dark:text-neutral-400" data-description="true">
             {page.description}
           </p>
 
           {page.notice ? (
-            <div className="relative my-4 overflow-hidden rounded-lg bg-gray-200 p-1">
+            <div className="relative my-4 overflow-hidden rounded-lg bg-neutral-200 p-1">
               <div className="absolute inset-0 bg-[image:repeating-linear-gradient(315deg,_var(--pattern-fg)_0,_var(--pattern-fg)_1px,_transparent_0,_transparent_50%)] bg-[size:10px_10px] bg-fixed [--pattern-fg:var(--color-black)]/5 dark:[--pattern-fg:var(--color-white)]/10"></div>
 
-              <div className="relative z-10 rounded-md bg-white/75 px-4 py-3 text-sm font-medium text-gray-600 inset-ring-2 inset-ring-gray-700/25">
+              <div className="relative z-10 rounded-md bg-white/75 px-4 py-3 text-sm font-medium text-neutral-600 inset-ring-2 inset-ring-neutral-700/25">
                 {page.notice}
               </div>
             </div>
diff --git a/src/app/(docs)/docs/installation/framework-guides/sveltekit.tsx b/src/app/(docs)/docs/installation/framework-guides/sveltekit.tsx
index e3e0db85d..bc14b7fe0 100644
--- a/src/app/(docs)/docs/installation/framework-guides/sveltekit.tsx
+++ b/src/app/(docs)/docs/installation/framework-guides/sveltekit.tsx
@@ -145,7 +145,7 @@ export let steps: Step[] = [
           @reference "tailwindcss";
 
           :global(html) {
-            background-color: theme(--color-gray-100);
+            background-color: theme(--color-neutral-100);
           }
         </style>
       `,
diff --git a/src/app/(docs)/layout.tsx b/src/app/(docs)/layout.tsx
index 63356a774..3d9836ef5 100644
--- a/src/app/(docs)/layout.tsx
+++ b/src/app/(docs)/layout.tsx
@@ -12,7 +12,7 @@ export default async function Layout({
 }: React.PropsWithChildren<{ breadcrumb: React.ReactNode }>) {
   return (
     <div>
-      <div className="fixed inset-x-0 top-0 z-10 border-b border-gray-950/5 dark:border-white/10">
+      <div className="fixed inset-x-0 top-0 z-10 border-b border-neutral-950/5 dark:border-white/10">
         <Header />
         <MobileNav header={<Header />} breadcrumb={breadcrumb}>
           <DocsSidebar />
@@ -31,19 +31,19 @@ export default async function Layout({
         </div>
 
         {/* Candy cane */}
-        <div className="col-start-2 row-span-5 row-start-1 border-x border-x-(--pattern-fg) bg-[image:repeating-linear-gradient(315deg,_var(--pattern-fg)_0,_var(--pattern-fg)_1px,_transparent_0,_transparent_50%)] bg-[size:10px_10px] bg-fixed [--pattern-fg:var(--color-gray-950)]/5 max-lg:hidden dark:[--pattern-fg:var(--color-white)]/10"></div>
+        <div className="col-start-2 row-span-5 row-start-1 border-x border-x-(--pattern-fg) bg-[image:repeating-linear-gradient(315deg,_var(--pattern-fg)_0,_var(--pattern-fg)_1px,_transparent_0,_transparent_50%)] bg-[size:10px_10px] bg-fixed [--pattern-fg:var(--color-neutral-950)]/5 max-lg:hidden dark:[--pattern-fg:var(--color-white)]/10"></div>
 
         {/* Main content area */}
         <div className="relative row-start-1 grid grid-cols-subgrid lg:col-start-3">{children}</div>
 
         {/* Candy cane */}
-        <div className="col-start-4 row-span-5 row-start-1 border-x border-x-(--pattern-fg) bg-[image:repeating-linear-gradient(315deg,_var(--pattern-fg)_0,_var(--pattern-fg)_1px,_transparent_0,_transparent_50%)] bg-[size:10px_10px] bg-fixed [--pattern-fg:var(--color-gray-950)]/5 max-lg:hidden dark:[--pattern-fg:var(--color-white)]/10"></div>
+        <div className="col-start-4 row-span-5 row-start-1 border-x border-x-(--pattern-fg) bg-[image:repeating-linear-gradient(315deg,_var(--pattern-fg)_0,_var(--pattern-fg)_1px,_transparent_0,_transparent_50%)] bg-[size:10px_10px] bg-fixed [--pattern-fg:var(--color-neutral-950)]/5 max-lg:hidden dark:[--pattern-fg:var(--color-white)]/10"></div>
 
-        <div className="col-span-full col-start-2 row-start-2 h-px bg-gray-950/5 dark:bg-white/10" />
+        <div className="col-span-full col-start-2 row-start-2 h-px bg-neutral-950/5 dark:bg-white/10" />
         <div className="row-start-3 lg:col-start-3">
           <FooterSitemap className="max-w-2xl lg:max-w-5xl" />
         </div>
-        <div className="col-span-full col-start-2 row-start-4 h-px bg-gray-950/5 dark:bg-white/10" />
+        <div className="col-span-full col-start-2 row-start-4 h-px bg-neutral-950/5 dark:bg-white/10" />
         <div className="row-start-5 grid lg:col-start-3">
           <FooterMeta className="max-w-2xl lg:max-w-5xl" />
         </div>
diff --git a/src/app/(docs)/not-found.tsx b/src/app/(docs)/not-found.tsx
index 69a690207..0fc6b0f6b 100644
--- a/src/app/(docs)/not-found.tsx
+++ b/src/app/(docs)/not-found.tsx
@@ -2,10 +2,10 @@ export default function NotFoundPage() {
   return (
     <div className="flex h-[calc(100vh-3.5rem)] items-center justify-center">
       <div className="flex flex-auto flex-col items-center justify-center px-4 text-center sm:flex-row">
-        <h1 className="text-2xl font-extrabold tracking-tight text-gray-900 sm:mr-6 sm:border-r sm:border-gray-900/10 sm:pr-6 sm:text-3xl dark:text-gray-200 sm:dark:border-gray-300/10">
+        <h1 className="text-2xl font-extrabold tracking-tight text-neutral-900 sm:mr-6 sm:border-r sm:border-neutral-900/10 sm:pr-6 sm:text-3xl dark:text-neutral-200 sm:dark:border-neutral-300/10">
           404
         </h1>
-        <h2 className="mt-2 text-gray-700 sm:mt-0 dark:text-gray-400">This page could not be found.</h2>
+        <h2 className="mt-2 text-neutral-700 sm:mt-0 dark:text-neutral-400">This page could not be found.</h2>
       </div>
     </div>
   );
diff --git a/src/app/api/og/route.tsx b/src/app/api/og/route.tsx
index 0e0e53909..5b3e3f9e8 100644
--- a/src/app/api/og/route.tsx
+++ b/src/app/api/og/route.tsx
@@ -72,10 +72,10 @@ export async function GET(req: NextRequest) {
         }}
       >
         <div tw="absolute flex h-full w-full flex-col justify-between p-[32px] pt-[394px] pr-[40px]">
-          <div tw="flex flex-col h-full border-1 border-t border-gray-800 p-8">
+          <div tw="flex flex-col h-full border-1 border-t border-neutral-800 p-8">
             {section && (
               <div
-                tw="flex text-[20px] leading-[20px] font-medium tracking-[2px] text-gray-400"
+                tw="flex text-[20px] leading-[20px] font-medium tracking-[2px] text-neutral-400"
                 style={{
                   fontFamily: "Geist Mono",
                 }}
@@ -94,7 +94,7 @@ export async function GET(req: NextRequest) {
             </div>
             {description && (
               <div
-                tw="mt-4 text-[24px] leading-[40px] font-medium text-gray-400"
+                tw="mt-4 text-[24px] leading-[40px] font-medium text-neutral-400"
                 style={{
                   display: "block",
                   lineClamp: 1,
diff --git a/src/app/blog/[slug]/page.tsx b/src/app/blog/[slug]/page.tsx
index 282a46f97..b37ebd109 100644
--- a/src/app/blog/[slug]/page.tsx
+++ b/src/app/blog/[slug]/page.tsx
@@ -70,15 +70,15 @@ export default async function DocPage(props: Props) {
       <div hidden />
 
       <div className="grid grid-cols-1 xl:grid-cols-[22rem_2.5rem_auto] xl:grid-rows-[1fr_auto]">
-        <div className="col-start-2 row-span-2 border-r border-l border-gray-950/5 max-xl:hidden dark:border-white/10"></div>
+        <div className="col-start-2 row-span-2 border-r border-l border-neutral-950/5 max-xl:hidden dark:border-white/10"></div>
 
         <div className="max-xl:mx-auto max-xl:w-full max-xl:max-w-(--breakpoint-md)">
-          <div className="mt-16 px-4 font-mono text-sm/7 font-medium tracking-widest text-gray-500 uppercase lg:px-2">
+          <div className="mt-16 px-4 font-mono text-sm/7 font-medium tracking-widest text-neutral-500 uppercase lg:px-2">
             <time dateTime={post.meta.date}>{formatDate(post.meta.date)}</time>
           </div>
 
           <GridContainer className="mb-6 px-4 lg:px-2 xl:mb-16">
-            <h1 className="inline-block max-w-(--breakpoint-md) text-[2.5rem]/10 tracking-tight text-pretty text-gray-950 max-lg:font-medium lg:text-6xl dark:text-gray-200">
+            <h1 className="inline-block max-w-(--breakpoint-md) text-[2.5rem]/10 tracking-tight text-pretty text-neutral-950 max-lg:font-medium lg:text-6xl dark:text-neutral-200">
               {post.meta.title}
             </h1>
           </GridContainer>
@@ -132,7 +132,7 @@ function Author({ author }: { author: { avatar: string; twitter: string; name: s
     <div className="flex gap-4">
       <Image src={author.avatar} alt="" className="size-12 rounded-full" width={36} height={36} />
       <div className="flex flex-col justify-center gap-1 text-sm font-semibold">
-        <div className="text-gray-950 dark:text-white">{author.name}</div>
+        <div className="text-neutral-950 dark:text-white">{author.name}</div>
         <div>
           <a
             href={`https://twitter.com/${author.twitter}`}
diff --git a/src/app/blog/layout.tsx b/src/app/blog/layout.tsx
index 62c90ce32..0db1960fe 100644
--- a/src/app/blog/layout.tsx
+++ b/src/app/blog/layout.tsx
@@ -12,7 +12,7 @@ export default async function Layout({ children }: React.PropsWithChildren) {
         <div className="col-start-1 row-span-full row-start-1 hidden border-x border-x-(--pattern-fg) bg-[image:repeating-linear-gradient(315deg,_var(--pattern-fg)_0,_var(--pattern-fg)_1px,_transparent_0,_transparent_50%)] bg-[size:10px_10px] bg-fixed [--pattern-fg:var(--color-black)]/5 lg:block dark:[--pattern-fg:var(--color-white)]/10"></div>
 
         {/* Main content area */}
-        <div className="text-gray-950 dark:text-white">{children}</div>
+        <div className="text-neutral-950 dark:text-white">{children}</div>
 
         {/* Candy cane */}
         <div className="row-span-full row-start-1 hidden border-x border-x-(--pattern-fg) bg-[image:repeating-linear-gradient(315deg,_var(--pattern-fg)_0,_var(--pattern-fg)_1px,_transparent_0,_transparent_50%)] bg-[size:10px_10px] bg-fixed [--pattern-fg:var(--color-black)]/5 lg:col-start-3 lg:block dark:[--pattern-fg:var(--color-white)]/10"></div>
diff --git a/src/app/blog/page.tsx b/src/app/blog/page.tsx
index 22a0f8ceb..a659c0437 100644
--- a/src/app/blog/page.tsx
+++ b/src/app/blog/page.tsx
@@ -47,14 +47,14 @@ export default async function Blog() {
       <div className="mt-12 mb-46 grid grid-cols-1 lg:grid-cols-[24rem_2.5rem_minmax(0,1fr)]">
         {posts.map(({ meta, slug }, index) => (
           <Fragment key={slug}>
-            <GridContainer className="p col-span-3 grid grid-cols-subgrid divide-x divide-gray-950/5 dark:divide-white/10">
-              <div className="px-2 font-mono text-sm/6 font-medium tracking-widest text-gray-500 uppercase max-lg:hidden">
+            <GridContainer className="p col-span-3 grid grid-cols-subgrid divide-x divide-neutral-950/5 dark:divide-white/10">
+              <div className="px-2 font-mono text-sm/6 font-medium tracking-widest text-neutral-500 uppercase max-lg:hidden">
                 {formatDate(meta.date)}
               </div>
               <div className="max-lg:hidden" />
               <div className="text-md px-2">
                 <div className="max-w-(--container-2xl)">
-                  <div className="mb-4 font-mono text-sm/6 font-medium tracking-widest text-gray-500 uppercase lg:hidden">
+                  <div className="mb-4 font-mono text-sm/6 font-medium tracking-widest text-neutral-500 uppercase lg:hidden">
                     {formatDate(meta.date)}
                   </div>
 
@@ -72,7 +72,7 @@ export default async function Blog() {
               </div>
             </GridContainer>
             {index !== posts.length - 1 && (
-              <div className="contents divide-x divide-gray-950/5 dark:divide-white/10">
+              <div className="contents divide-x divide-neutral-950/5 dark:divide-white/10">
                 <div className="h-16 max-lg:hidden" />
                 <div className="h-16 max-lg:hidden" />
                 <div className="h-16" />
diff --git a/src/app/build-uis-that-dont-suck/call-to-action.tsx b/src/app/build-uis-that-dont-suck/call-to-action.tsx
index 3c3656ba3..20f7a552d 100644
--- a/src/app/build-uis-that-dont-suck/call-to-action.tsx
+++ b/src/app/build-uis-that-dont-suck/call-to-action.tsx
@@ -14,11 +14,11 @@ export function SignUpForm() {
           type="email"
           id="email"
           name="email_address"
-          className="w-3xs min-w-0 shrink grow rounded-full bg-transparent px-4 py-2 text-sm/6 text-gray-950 focus:outline-none"
+          className="w-3xs min-w-0 shrink grow rounded-full bg-transparent px-4 py-2 text-sm/6 text-neutral-950 focus:outline-none"
           placeholder="Enter your email"
           aria-label="Email address"
         />
-        <button className="mr-0.5 shrink-0 overflow-hidden rounded-full bg-gray-950 px-3 py-1.5 text-sm/6 font-semibold text-nowrap text-white hover:bg-gray-950/85">
+        <button className="mr-0.5 shrink-0 overflow-hidden rounded-full bg-neutral-950 px-3 py-1.5 text-sm/6 font-semibold text-nowrap text-white hover:bg-neutral-950/85">
           Get the course
         </button>
       </div>
@@ -93,13 +93,13 @@ export function HeroActions({
                   onBlur={handleBlur}
                   type="email"
                   name="email_address"
-                  className="w-3xs rounded-full bg-transparent px-4 py-2 text-sm/6 text-gray-950 focus:outline-none"
+                  className="w-3xs rounded-full bg-transparent px-4 py-2 text-sm/6 text-neutral-950 focus:outline-none"
                   placeholder="Enter your email"
                   aria-label="Email address"
                 />
                 <button
                   type="submit"
-                  className="mr-0.5 shrink-0 overflow-hidden rounded-full bg-gray-950 px-3 py-1.5 text-sm/6 font-semibold text-nowrap text-white hover:bg-gray-950/85"
+                  className="mr-0.5 shrink-0 overflow-hidden rounded-full bg-neutral-950 px-3 py-1.5 text-sm/6 font-semibold text-nowrap text-white hover:bg-neutral-950/85"
                 >
                   Sign up
                 </button>
@@ -114,7 +114,7 @@ export function HeroActions({
                   setSignUpState("open");
                 }}
                 type="button"
-                className="inline-flex rounded-full bg-transparent px-4 py-2 text-sm/6 font-semibold text-gray-950 hover:bg-gray-100 focus:outline-none focus-visible:outline focus-visible:outline-offset-2 focus-visible:outline-white focus-visible:outline-solid"
+                className="inline-flex rounded-full bg-transparent px-4 py-2 text-sm/6 font-semibold text-neutral-950 hover:bg-neutral-100 focus:outline-none focus-visible:outline focus-visible:outline-offset-2 focus-visible:outline-white focus-visible:outline-solid"
                 exit={{
                   opacity: 0,
                   transition: {
diff --git a/src/app/build-uis-that-dont-suck/confirmed/page.tsx b/src/app/build-uis-that-dont-suck/confirmed/page.tsx
index 689cd8cf6..fb76f0e6b 100644
--- a/src/app/build-uis-that-dont-suck/confirmed/page.tsx
+++ b/src/app/build-uis-that-dont-suck/confirmed/page.tsx
@@ -15,7 +15,7 @@ export default async function Course() {
             <h1 className="text-center text-5xl tracking-tighter text-balance text-white lg:text-8xl">You’re in!</h1>
           </GridContainer>
           <GridContainer>
-            <p className="mx-auto max-w-xl text-center text-lg/7 font-medium text-pretty text-gray-400">
+            <p className="mx-auto max-w-xl text-center text-lg/7 font-medium text-pretty text-neutral-400">
               Look for the first video in your inbox any minute, and check again every morning for the next one in the
               series.
             </p>
diff --git a/src/app/build-uis-that-dont-suck/hero-section.tsx b/src/app/build-uis-that-dont-suck/hero-section.tsx
index 9d0b47b7d..828711dce 100644
--- a/src/app/build-uis-that-dont-suck/hero-section.tsx
+++ b/src/app/build-uis-that-dont-suck/hero-section.tsx
@@ -16,8 +16,8 @@ export function HeroSection() {
           <source src="https://assets.tailwindcss.com/build-uis-that-dont-suck/hero-loop.mp4" type="video/mp4" />
           Your browser does not support the video tag.
         </video>
-        <div className="absolute inset-0 size-full bg-linear-to-r from-gray-950 to-75%"></div>
-        <div className="absolute inset-0 size-full bg-linear-to-t from-gray-950 to-50%"></div>
+        <div className="absolute inset-0 size-full bg-linear-to-r from-neutral-950 to-75%"></div>
+        <div className="absolute inset-0 size-full bg-linear-to-t from-neutral-950 to-50%"></div>
       </div>
       <GridContainer>
         <div className="flex p-2">
@@ -28,13 +28,13 @@ export function HeroSection() {
       </GridContainer>
       <div className="mt-20 flex flex-col gap-4 sm:mt-24">
         <GridContainer>
-          <p className="font-mono text-sm/6 tracking-wider text-gray-400 uppercase">5-part mini-course</p>
+          <p className="font-mono text-sm/6 tracking-wider text-neutral-400 uppercase">5-part mini-course</p>
           <h1 className="mt-2 text-5xl tracking-tighter text-balance text-white sm:text-8xl">
             Build UIs that don’t suck.
           </h1>
         </GridContainer>
         <GridContainer>
-          <p className="max-w-2xl text-lg/7 font-medium text-gray-400">
+          <p className="max-w-2xl text-lg/7 font-medium text-neutral-400">
             <strong className="font-medium text-white">Short, tactical video lessons</strong> from the creator of
             Tailwind CSS, delivered directly to your inbox{" "}
             <strong className="font-medium text-white">every day for a week</strong>.
diff --git a/src/app/build-uis-that-dont-suck/layout.tsx b/src/app/build-uis-that-dont-suck/layout.tsx
index b6d4a70d4..1d024241f 100644
--- a/src/app/build-uis-that-dont-suck/layout.tsx
+++ b/src/app/build-uis-that-dont-suck/layout.tsx
@@ -2,7 +2,7 @@ import React from "react";
 
 export default async function Layout({ children }: React.PropsWithChildren) {
   return (
-    <div className="max-w-screen overflow-x-hidden [html:has(&)]:bg-gray-950">
+    <div className="max-w-screen overflow-x-hidden [html:has(&)]:bg-neutral-950">
       <div className="grid min-h-dvh grid-cols-1 grid-rows-[1fr_1px_auto_1px_auto] justify-center [--gutter-width:--spacing(6)] sm:grid-cols-[var(--gutter-width)_minmax(0,var(--breakpoint-xl))_var(--gutter-width)] lg:[--gutter-width:--spacing(10)]">
         {/* Candy cane */}
         <div className="col-start-1 row-span-full row-start-1 hidden border-x border-x-(--pattern-fg) bg-[image:repeating-linear-gradient(315deg,_var(--pattern-fg)_0,_var(--pattern-fg)_1px,_transparent_0,_transparent_50%)] bg-[size:10px_10px] bg-fixed [--pattern-fg:var(--color-white)]/10 sm:block"></div>
diff --git a/src/app/build-uis-that-dont-suck/page.tsx b/src/app/build-uis-that-dont-suck/page.tsx
index d72f98ee8..ccbbe6ea6 100644
--- a/src/app/build-uis-that-dont-suck/page.tsx
+++ b/src/app/build-uis-that-dont-suck/page.tsx
@@ -26,7 +26,7 @@ export default async function Course() {
       </header>
       <main className="pt-14 pb-28">
         <GridContainer>
-          <div className="max-w-xl space-y-8 text-base/7 text-gray-400 marker:text-white/60 **:[li]:pl-2 **:[strong]:font-medium **:[strong]:text-white **:[ul]:list-[square] **:[ul]:space-y-4 **:[ul]:pl-8">
+          <div className="max-w-xl space-y-8 text-base/7 text-neutral-400 marker:text-white/60 **:[li]:pl-2 **:[strong]:font-medium **:[strong]:text-white **:[ul]:list-[square] **:[ul]:space-y-4 **:[ul]:pl-8">
             <p>
               When you build UI components that are used by <strong>tens of thousands of developers</strong>, you learn
               to really care about the details, like:
diff --git a/src/app/build-uis-that-dont-suck/subscribed/page.tsx b/src/app/build-uis-that-dont-suck/subscribed/page.tsx
index 8caf8501a..3477f931f 100644
--- a/src/app/build-uis-that-dont-suck/subscribed/page.tsx
+++ b/src/app/build-uis-that-dont-suck/subscribed/page.tsx
@@ -17,7 +17,7 @@ export default async function Course() {
             </h1>
           </GridContainer>
           <GridContainer>
-            <p className="mx-auto max-w-xl text-center text-lg/7 font-medium text-pretty text-gray-400">
+            <p className="mx-auto max-w-xl text-center text-lg/7 font-medium text-pretty text-neutral-400">
               You should get a confirmation email any minute —{" "}
               <strong className="font-medium text-white">open it up</strong> and{" "}
               <strong className="font-medium text-white">confirm your email</strong> and I'll send you the first video.
diff --git a/src/app/course/confirmed/page.tsx b/src/app/course/confirmed/page.tsx
index 6228f01d0..40b963335 100644
--- a/src/app/course/confirmed/page.tsx
+++ b/src/app/course/confirmed/page.tsx
@@ -15,22 +15,22 @@ export default async function Subscribed() {
             className="aspect-[472/667] h-[320px] not-dark:hidden"
           />
           <DotGridImage darkMode={false} width={472} height={667} className="aspect-[472/667] h-[320px] dark:hidden" />
-          <Signature className="pointer-events-none absolute inset-x-0 -bottom-8 mx-auto fill-gray-900 lg:-translate-x-1/5 dark:fill-gray-200" />
+          <Signature className="pointer-events-none absolute inset-x-0 -bottom-8 mx-auto fill-neutral-900 lg:-translate-x-1/5 dark:fill-neutral-200" />
         </div>
         <div className="grid content-center border-l border-black/5 md:border-x dark:border-white/10">
           <div className="grid border-y border-black/5 p-2 max-md:border-t-0 max-sm:justify-center max-sm:px-4 dark:border-white/10">
             <Logo className="h-7" />
           </div>
           <div className="mt-2 border-y border-black/5 p-2 max-sm:px-4 dark:border-white/10">
-            <p className="font-mono text-sm font-medium text-gray-700 uppercase max-sm:text-center dark:text-gray-400">
+            <p className="font-mono text-sm font-medium text-neutral-700 uppercase max-sm:text-center dark:text-neutral-400">
               Tailwind CSS by Example
             </p>
-            <h1 className="text-5xl tracking-tighter text-balance text-gray-900 max-sm:text-center lg:text-8xl dark:text-white">
+            <h1 className="text-5xl tracking-tighter text-balance text-neutral-900 max-sm:text-center lg:text-8xl dark:text-white">
               You're in!
             </h1>
           </div>
           <div className="mt-4 border-y border-black/5 p-2 max-md:border-b-0 max-sm:px-4 dark:border-white/10">
-            <p className="max-w-xl text-lg/7 font-medium text-pretty text-gray-500 max-sm:text-center dark:text-gray-400">
+            <p className="max-w-xl text-lg/7 font-medium text-pretty text-neutral-500 max-sm:text-center dark:text-neutral-400">
               Stay tuned for sneak peaks, early video previews, and behind-the-scenes updates soon.
             </p>
           </div>
diff --git a/src/app/course/layout.tsx b/src/app/course/layout.tsx
index 67c7d7532..24ec4ad45 100644
--- a/src/app/course/layout.tsx
+++ b/src/app/course/layout.tsx
@@ -3,7 +3,7 @@ import React from "react";
 
 export default async function Layout({ children }: React.PropsWithChildren) {
   return (
-    <div className="max-w-screen overflow-x-hidden bg-white dark:bg-gray-950">
+    <div className="max-w-screen overflow-x-hidden bg-white dark:bg-neutral-950">
       <div className="fixed inset-x-0 top-0 z-10 border-b border-black/5 dark:border-white/10">
         <Header />
       </div>
@@ -12,7 +12,7 @@ export default async function Layout({ children }: React.PropsWithChildren) {
         <div className="col-start-1 row-span-full row-start-1 hidden border-x border-x-(--pattern-fg) bg-[image:repeating-linear-gradient(315deg,_var(--pattern-fg)_0,_var(--pattern-fg)_1px,_transparent_0,_transparent_50%)] bg-[size:10px_10px] bg-fixed [--pattern-fg:var(--color-black)]/5 sm:block dark:[--pattern-fg:var(--color-white)]/10"></div>
 
         {/* Main content area */}
-        <div className="text-gray-900 dark:text-white">{children}</div>
+        <div className="text-neutral-900 dark:text-white">{children}</div>
 
         {/* Candy cane */}
         <div className="row-span-full row-start-1 hidden border-x border-x-(--pattern-fg) bg-[image:repeating-linear-gradient(315deg,_var(--pattern-fg)_0,_var(--pattern-fg)_1px,_transparent_0,_transparent_50%)] bg-[size:10px_10px] bg-fixed [--pattern-fg:var(--color-black)]/5 sm:col-start-3 sm:block dark:[--pattern-fg:var(--color-white)]/10"></div>
diff --git a/src/app/course/page.tsx b/src/app/course/page.tsx
index 410eb194b..52db3d6a3 100644
--- a/src/app/course/page.tsx
+++ b/src/app/course/page.tsx
@@ -41,7 +41,7 @@ function SignUpForm() {
         id="email"
         name="email_address"
         aria-label="Email address"
-        className="w-full rounded-full bg-black/2.5 px-4 py-2 text-sm/6 text-gray-950 outline -outline-offset-1 outline-black/5 placeholder:text-gray-500 dark:bg-white"
+        className="w-full rounded-full bg-black/2.5 px-4 py-2 text-sm/6 text-neutral-950 outline -outline-offset-1 outline-black/5 placeholder:text-neutral-500 dark:bg-white"
         placeholder="Enter your email"
       />
       <button className="absolute inset-y-0.5 right-0.5 ml-2 rounded-full bg-black px-4 text-sm font-medium text-white hover:bg-black/80 focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-black">
@@ -69,25 +69,25 @@ export default async function Course() {
             height={667}
             className="aspect-[472/667] w-full max-w-[226px] dark:hidden"
           />
-          <div className="relative font-mono text-xs font-medium text-gray-700 uppercase sm:translate-y-1/2 sm:py-5 md:hidden dark:text-gray-400">
+          <div className="relative font-mono text-xs font-medium text-neutral-700 uppercase sm:translate-y-1/2 sm:py-5 md:hidden dark:text-neutral-400">
             <p className="max-sm:hidden">
               Adam Wathan, <br />
               Creator of Tailwind CSS
             </p>
-            <Signature className="pointer-events-none absolute -translate-y-3/4 fill-gray-900 max-sm:inset-x-0 max-sm:mx-auto sm:-translate-x-1/4 sm:-translate-y-[110%] dark:fill-gray-200" />
+            <Signature className="pointer-events-none absolute -translate-y-3/4 fill-neutral-900 max-sm:inset-x-0 max-sm:mx-auto sm:-translate-x-1/4 sm:-translate-y-[110%] dark:fill-neutral-200" />
           </div>
         </div>
         <div className="relative grid content-between border-black/5 max-md:mt-10 max-md:border-t md:col-span-2 dark:border-white/10">
           <div className="border-b border-black/5 p-2 max-md:px-4 dark:border-white/10">
-            <p className="font-mono text-sm font-medium text-gray-500 uppercase dark:text-gray-400">
+            <p className="font-mono text-sm font-medium text-neutral-500 uppercase dark:text-neutral-400">
               By the creator of Tailwind CSS
             </p>
-            <h1 className="mt-2 text-6xl tracking-tighter text-balance text-gray-900 md:text-7xl lg:text-8xl dark:text-white">
+            <h1 className="mt-2 text-6xl tracking-tighter text-balance text-neutral-900 md:text-7xl lg:text-8xl dark:text-white">
               Tailwind CSS by Example.
             </h1>
           </div>
           <div className="mt-8 border-t border-black/5 p-2 max-md:border-y max-md:px-4 dark:border-white/10">
-            <p className="text-sm/6 text-gray-600 dark:text-gray-400">
+            <p className="text-sm/6 text-neutral-600 dark:text-neutral-400">
               Join the waitlist for early previews and behind-the-scenes updates.
             </p>
             <div className="relative mt-2 max-w-md">
@@ -95,12 +95,12 @@ export default async function Course() {
             </div>
           </div>
         </div>
-        <div className="relative py-5 pl-16 font-mono text-xs font-medium text-gray-700 uppercase after:absolute after:bottom-0 after:-left-[100vw] after:h-px after:w-[200vw] after:bg-gray-950/5 max-md:hidden md:col-span-3 dark:text-gray-400 dark:after:bg-white/10">
+        <div className="relative py-5 pl-16 font-mono text-xs font-medium text-neutral-700 uppercase after:absolute after:bottom-0 after:-left-[100vw] after:h-px after:w-[200vw] after:bg-neutral-950/5 max-md:hidden md:col-span-3 dark:text-neutral-400 dark:after:bg-white/10">
           <p>
             Adam Wathan, <br />
             Creator of Tailwind CSS
           </p>
-          <Signature className="pointer-events-none absolute mx-auto -translate-x-1/4 -translate-y-[110%] fill-gray-900 dark:fill-gray-200" />
+          <Signature className="pointer-events-none absolute mx-auto -translate-x-1/4 -translate-y-[110%] fill-neutral-900 dark:fill-neutral-200" />
         </div>
         <div className="prose grid max-w-2xl border-black/5 p-2 max-md:mt-10 max-md:border-t max-md:px-4 md:col-span-2 md:col-start-2 dark:border-white/10">
           <p className="text-lg/7">
@@ -163,9 +163,9 @@ export default async function Course() {
           </p>
         </div>
         <div className="mt-10 grid max-w-2xl p-2 max-md:px-4 md:col-span-2 md:col-start-2">
-          <Signature className="w-36 fill-gray-900 dark:fill-gray-200" />
+          <Signature className="w-36 fill-neutral-900 dark:fill-neutral-200" />
           <p className="text-sm/6 font-semibold">Adam Wathan</p>
-          <p className="text-sm/6 text-gray-700 dark:text-gray-400">Creator of Tailwind CSS</p>
+          <p className="text-sm/6 text-neutral-700 dark:text-neutral-400">Creator of Tailwind CSS</p>
         </div>
       </GridContainer>
     </div>
diff --git a/src/app/course/subscribed/page.tsx b/src/app/course/subscribed/page.tsx
index e1ac1dfc0..d6f45570e 100644
--- a/src/app/course/subscribed/page.tsx
+++ b/src/app/course/subscribed/page.tsx
@@ -15,25 +15,25 @@ export default async function Subscribed() {
             className="aspect-[472/667] h-[320px] not-dark:hidden"
           />
           <DotGridImage darkMode={false} width={472} height={667} className="aspect-[472/667] h-[320px] dark:hidden" />
-          <Signature className="pointer-events-none absolute inset-x-0 -bottom-8 mx-auto fill-gray-900 lg:-translate-x-1/5 dark:fill-gray-200" />
+          <Signature className="pointer-events-none absolute inset-x-0 -bottom-8 mx-auto fill-neutral-900 lg:-translate-x-1/5 dark:fill-neutral-200" />
         </div>
         <div className="grid content-center border-l border-black/5 md:border-x dark:border-white/10">
           <div className="grid border-y border-black/5 p-2 max-md:border-t-0 max-sm:justify-center max-sm:px-4 dark:border-white/10">
             <Logo className="h-7" />
           </div>
           <div className="mt-2 border-y border-black/5 p-2 max-sm:px-4 dark:border-white/10">
-            <p className="font-mono text-sm font-medium text-gray-700 uppercase max-sm:text-center dark:text-gray-400">
+            <p className="font-mono text-sm font-medium text-neutral-700 uppercase max-sm:text-center dark:text-neutral-400">
               Tailwind CSS by Example
             </p>
-            <h1 className="text-5xl tracking-tighter text-balance text-gray-900 max-sm:text-center lg:text-8xl dark:text-white">
+            <h1 className="text-5xl tracking-tighter text-balance text-neutral-900 max-sm:text-center lg:text-8xl dark:text-white">
               Check your email.
             </h1>
           </div>
           <div className="mt-4 border-y border-black/5 p-2 max-md:border-b-0 max-sm:px-4 dark:border-white/10">
-            <p className="max-w-xl text-lg/7 font-medium text-pretty text-gray-500 max-sm:text-center dark:text-gray-400">
+            <p className="max-w-xl text-lg/7 font-medium text-pretty text-neutral-500 max-sm:text-center dark:text-neutral-400">
               You should get a confirmation email any minute —{" "}
-              <strong className="font-medium text-gray-900 dark:text-white">open it up</strong> and{" "}
-              <strong className="font-medium text-gray-900 dark:text-white">confirm your email</strong> to make sure
+              <strong className="font-medium text-neutral-900 dark:text-white">open it up</strong> and{" "}
+              <strong className="font-medium text-neutral-900 dark:text-white">confirm your email</strong> to make sure
               you're on the list.
             </p>
           </div>
diff --git a/src/app/globals.css b/src/app/globals.css
index 2c1122a00..cd94a27ca 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -105,29 +105,29 @@
 }
 
 @utility line-t {
-  @apply relative before:absolute before:top-0 before:-left-[100vw] before:h-px before:w-[200vw] before:bg-gray-950/5 dark:before:bg-white/10;
+  @apply relative before:absolute before:top-0 before:-left-[100vw] before:h-px before:w-[200vw] before:bg-neutral-950/5 dark:before:bg-white/10;
 }
 
 @utility line-b {
-  @apply relative after:absolute after:bottom-0 after:-left-[100vw] after:h-px after:w-[200vw] after:bg-gray-950/5 dark:after:bg-white/10;
+  @apply relative after:absolute after:bottom-0 after:-left-[100vw] after:h-px after:w-[200vw] after:bg-neutral-950/5 dark:after:bg-white/10;
 }
 
 @utility line-y {
   @apply relative;
-  @apply before:absolute before:top-0 before:-left-[100vw] before:h-px before:w-[200vw] before:bg-gray-950/5 dark:before:bg-white/10;
-  @apply after:absolute after:bottom-0 after:-left-[100vw] after:h-px after:w-[200vw] after:bg-gray-950/5 dark:after:bg-white/10;
+  @apply before:absolute before:top-0 before:-left-[100vw] before:h-px before:w-[200vw] before:bg-neutral-950/5 dark:before:bg-white/10;
+  @apply after:absolute after:bottom-0 after:-left-[100vw] after:h-px after:w-[200vw] after:bg-neutral-950/5 dark:after:bg-white/10;
 }
 
 @utility line-t/half {
-  @apply relative before:absolute before:top-0 before:right-0 before:h-px before:w-screen before:bg-gray-950/5 dark:before:bg-white/10;
+  @apply relative before:absolute before:top-0 before:right-0 before:h-px before:w-screen before:bg-neutral-950/5 dark:before:bg-white/10;
 }
 
 @utility line-b/half {
-  @apply relative after:absolute after:right-0 after:bottom-0 after:h-px after:w-screen after:bg-gray-950/5 dark:after:bg-white/10;
+  @apply relative after:absolute after:right-0 after:bottom-0 after:h-px after:w-screen after:bg-neutral-950/5 dark:after:bg-white/10;
 }
 
 @utility line-y/half {
   @apply relative;
-  @apply before:absolute before:top-0 before:right-0 before:h-px before:w-screen before:bg-gray-950/5 dark:before:bg-white/10;
-  @apply after:absolute after:right-0 after:bottom-0 after:h-px after:w-screen after:bg-gray-950/5 dark:after:bg-white/10;
+  @apply before:absolute before:top-0 before:right-0 before:h-px before:w-screen before:bg-neutral-950/5 dark:before:bg-white/10;
+  @apply after:absolute after:right-0 after:bottom-0 after:h-px after:w-screen after:bg-neutral-950/5 dark:after:bg-white/10;
 }
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 843d7a4c3..89fc8472c 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -144,7 +144,7 @@ export default async function RootLayout({
   return (
     <html
       lang="en"
-      className={`${inter.variable} ${plexMono.variable} ${source.variable} ${ubuntuMono.variable} antialiased dark:bg-gray-950`}
+      className={`${inter.variable} ${plexMono.variable} ${source.variable} ${ubuntuMono.variable} antialiased dark:bg-neutral-950`}
       suppressHydrationWarning
     >
       <head>
diff --git a/src/app/not-found.tsx b/src/app/not-found.tsx
index 1b7d9eded..68469e3dd 100644
--- a/src/app/not-found.tsx
+++ b/src/app/not-found.tsx
@@ -15,13 +15,13 @@ export default function NotFoundPage() {
         <div className="col-start-1 row-span-full row-start-1 hidden border-x border-x-(--pattern-fg) bg-[image:repeating-linear-gradient(315deg,_var(--pattern-fg)_0,_var(--pattern-fg)_1px,_transparent_0,_transparent_50%)] bg-[size:10px_10px] bg-fixed [--pattern-fg:var(--color-black)]/5 lg:block dark:[--pattern-fg:var(--color-white)]/10"></div>
 
         {/* Main content area */}
-        <div className="text-gray-950 dark:text-white">
+        <div className="text-neutral-950 dark:text-white">
           <div className="flex h-[calc(100vh-3.5rem)] items-center justify-center">
             <div className="flex flex-auto flex-col items-center justify-center px-4 text-center sm:flex-row">
-              <h1 className="text-2xl font-extrabold tracking-tight text-gray-900 sm:mr-6 sm:border-r sm:border-gray-900/10 sm:pr-6 sm:text-3xl dark:text-gray-200 sm:dark:border-gray-300/10">
+              <h1 className="text-2xl font-extrabold tracking-tight text-neutral-900 sm:mr-6 sm:border-r sm:border-neutral-900/10 sm:pr-6 sm:text-3xl dark:text-neutral-200 sm:dark:border-neutral-300/10">
                 404
               </h1>
-              <h2 className="mt-2 text-gray-700 sm:mt-0 dark:text-gray-400">This page could not be found.</h2>
+              <h2 className="mt-2 text-neutral-700 sm:mt-0 dark:text-neutral-400">This page could not be found.</h2>
             </div>
           </div>
         </div>
diff --git a/src/app/page.tsx b/src/app/page.tsx
index b87f9e645..2176a99f9 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -19,7 +19,7 @@ export default function Home() {
         <div className="col-start-1 row-span-full row-start-1 hidden border-x border-x-(--pattern-fg) bg-[image:repeating-linear-gradient(315deg,_var(--pattern-fg)_0,_var(--pattern-fg)_1px,_transparent_0,_transparent_50%)] bg-[size:10px_10px] bg-fixed [--pattern-fg:var(--color-black)]/5 md:block dark:[--pattern-fg:var(--color-white)]/10"></div>
 
         {/* Main content area */}
-        <div className="grid gap-24 pb-24 text-gray-950 sm:gap-40 md:pb-40 dark:text-white">
+        <div className="grid gap-24 pb-24 text-neutral-950 sm:gap-40 md:pb-40 dark:text-white">
           <Hero />
           <PartnersSection />
           <WhyTailwindCssSection />
diff --git a/src/app/search.css b/src/app/search.css
index 6ca311998..64d433304 100644
--- a/src/app/search.css
+++ b/src/app/search.css
@@ -32,12 +32,12 @@
   }
 
   .dark & {
-    background-color: color-mix(in oklab, var(--color-gray-900) 80%, transparent);
+    background-color: color-mix(in oklab, var(--color-neutral-900) 80%, transparent);
   }
 
   @media (prefers-color-scheme: dark) {
     .system & {
-      background-color: color-mix(in oklab, var(--color-gray-900) 80%, transparent);
+      background-color: color-mix(in oklab, var(--color-neutral-900) 80%, transparent);
     }
   }
 }
@@ -82,13 +82,13 @@
   background: white;
 
   .dark & {
-    background: var(--color-gray-800);
+    background: var(--color-neutral-800);
     box-shadow: inset 0 1px 0 0 rgb(255 255 255 / 0.05);
   }
 
   @media (prefers-color-scheme: dark) {
     .system & {
-      background: var(--color-gray-800);
+      background: var(--color-neutral-800);
       box-shadow: inset 0 1px 0 0 rgb(255 255 255 / 0.05);
     }
   }
@@ -103,13 +103,13 @@
   align-items: center;
   border-bottom-style: var(--tw-border-style);
   border-bottom-width: 1px;
-  border-color: var(--color-gray-100);
+  border-color: var(--color-neutral-100);
   .dark & {
-    border-color: color-mix(in oklab, var(--color-gray-200) 5%, transparent);
+    border-color: color-mix(in oklab, var(--color-neutral-200) 5%, transparent);
   }
   @media (prefers-color-scheme: dark) {
     .system & {
-      border-color: color-mix(in oklab, var(--color-gray-200) 5%, transparent);
+      border-color: color-mix(in oklab, var(--color-neutral-200) 5%, transparent);
     }
   }
 }
@@ -142,15 +142,15 @@
     bottom: -0.25rem;
     left: -1rem;
     width: 1px;
-    background: var(--color-gray-200);
+    background: var(--color-neutral-200);
   }
 
   .dark &::before {
-    background: color-mix(in oklab, var(--color-gray-200) 20%, transparent);
+    background: color-mix(in oklab, var(--color-neutral-200) 20%, transparent);
   }
   @media (prefers-color-scheme: dark) {
     .system &::before {
-      background: color-mix(in oklab, var(--color-gray-200) 20%, transparent);
+      background: color-mix(in oklab, var(--color-neutral-200) 20%, transparent);
     }
   }
 }
@@ -158,9 +158,9 @@
 .DocSearch-Hit > a {
   position: relative;
   font-size: 0.875rem;
-  border-bottom: 1px solid var(--color-gray-100);
+  border-bottom: 1px solid var(--color-neutral-100);
 
-  @apply dark:border-gray-200/5;
+  @apply dark:border-neutral-200/5;
 }
 
 .DocSearch-Hit--Result {
@@ -197,13 +197,13 @@
   background: transparent;
   height: 3.5rem;
   font-size: 1rem;
-  color: var(--color-gray-900);
+  color: var(--color-neutral-900);
   margin-left: 0.75rem;
   margin-right: 1rem;
   flex: auto;
   min-width: 0;
 
-  @apply dark:text-gray-200;
+  @apply dark:text-neutral-200;
 }
 
 .DocSearch-Input {
@@ -232,7 +232,7 @@
   flex: none;
   font-size: 0;
   border-radius: 0.375rem;
-  border: 1px solid var(--color-gray-200);
+  border: 1px solid var(--color-neutral-200);
   width: 2rem;
   height: 1.5rem;
   /* esc */
@@ -241,12 +241,12 @@
   background-repeat: no-repeat;
 
   .dark & {
-    border: 1px solid var(--color-gray-700);
+    border: 1px solid var(--color-neutral-700);
     background-image: url("data:image/svg+xml,%3Csvg width='32' height='24' viewBox='0 0 32 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9.66477 16.1364C9.03409 16.1364 8.49006 15.9972 8.03267 15.7188C7.57812 15.4375 7.22727 15.0455 6.98011 14.5426C6.7358 14.0369 6.61364 13.4489 6.61364 12.7784C6.61364 12.108 6.7358 11.517 6.98011 11.0057C7.22727 10.4915 7.57102 10.0909 8.01136 9.80398C8.45455 9.5142 8.97159 9.36932 9.5625 9.36932C9.90341 9.36932 10.2401 9.42614 10.5724 9.53977C10.9048 9.65341 11.2074 9.83807 11.4801 10.0938C11.7528 10.3466 11.9702 10.6818 12.1321 11.0994C12.294 11.517 12.375 12.0312 12.375 12.642V13.0682H7.32955V12.1989H11.3523C11.3523 11.8295 11.2784 11.5 11.1307 11.2102C10.9858 10.9205 10.7784 10.6918 10.5085 10.5241C10.2415 10.3565 9.92614 10.2727 9.5625 10.2727C9.16193 10.2727 8.81534 10.3722 8.52273 10.571C8.23295 10.767 8.00994 11.0227 7.85369 11.3381C7.69744 11.6534 7.61932 11.9915 7.61932 12.3523V12.9318C7.61932 13.4261 7.70455 13.8452 7.875 14.1889C8.0483 14.5298 8.28835 14.7898 8.59517 14.9688C8.90199 15.1449 9.25852 15.233 9.66477 15.233C9.92898 15.233 10.1676 15.196 10.3807 15.1222C10.5966 15.0455 10.7827 14.9318 10.9389 14.7812C11.0952 14.6278 11.2159 14.4375 11.3011 14.2102L12.2727 14.483C12.1705 14.8125 11.9986 15.1023 11.7571 15.3523C11.5156 15.5994 11.2173 15.7926 10.8622 15.9318C10.5071 16.0682 10.108 16.1364 9.66477 16.1364ZM18.5412 10.9205L17.6378 11.1761C17.581 11.0256 17.4972 10.8793 17.3864 10.7372C17.2784 10.5923 17.1307 10.473 16.9432 10.3793C16.7557 10.2855 16.5156 10.2386 16.223 10.2386C15.8224 10.2386 15.4886 10.331 15.2216 10.5156C14.9574 10.6974 14.8253 10.929 14.8253 11.2102C14.8253 11.4602 14.9162 11.6577 15.098 11.8026C15.2798 11.9474 15.5639 12.0682 15.9503 12.1648L16.9219 12.4034C17.5071 12.5455 17.9432 12.7628 18.2301 13.0554C18.517 13.3452 18.6605 13.7187 18.6605 14.1761C18.6605 14.5511 18.5526 14.8864 18.3366 15.1818C18.1236 15.4773 17.8253 15.7102 17.4418 15.8807C17.0582 16.0511 16.6122 16.1364 16.1037 16.1364C15.4361 16.1364 14.8835 15.9915 14.446 15.7017C14.0085 15.4119 13.7315 14.9886 13.6151 14.4318L14.5696 14.1932C14.6605 14.5455 14.8324 14.8097 15.0852 14.9858C15.3409 15.1619 15.6747 15.25 16.0866 15.25C16.5554 15.25 16.9276 15.1506 17.2031 14.9517C17.4815 14.75 17.6207 14.5085 17.6207 14.2273C17.6207 14 17.5412 13.8097 17.3821 13.6562C17.223 13.5 16.9787 13.3835 16.6491 13.3068L15.5582 13.0511C14.9588 12.9091 14.5185 12.6889 14.2372 12.3906C13.9588 12.0895 13.8196 11.7131 13.8196 11.2614C13.8196 10.892 13.9233 10.5653 14.1307 10.2812C14.3409 9.99716 14.6264 9.77415 14.9872 9.61222C15.3509 9.45028 15.7628 9.36932 16.223 9.36932C16.8707 9.36932 17.3793 9.51136 17.7486 9.79545C18.1207 10.0795 18.3849 10.4545 18.5412 10.9205ZM22.8335 16.1364C22.2198 16.1364 21.6914 15.9915 21.2482 15.7017C20.805 15.4119 20.4641 15.0128 20.2255 14.5043C19.9869 13.9957 19.8675 13.4148 19.8675 12.7614C19.8675 12.0966 19.9897 11.5099 20.234 11.0014C20.4812 10.4901 20.8249 10.0909 21.2653 9.80398C21.7085 9.5142 22.2255 9.36932 22.8164 9.36932C23.2766 9.36932 23.6914 9.45455 24.0607 9.625C24.43 9.79545 24.7326 10.0341 24.9684 10.3409C25.2042 10.6477 25.3505 11.0057 25.4073 11.4148H24.4016C24.3249 11.1165 24.1545 10.8523 23.8903 10.6222C23.6289 10.3892 23.2766 10.2727 22.8335 10.2727C22.4414 10.2727 22.0977 10.375 21.8022 10.5795C21.5096 10.7812 21.2809 11.0668 21.1161 11.4361C20.9542 11.8026 20.8732 12.233 20.8732 12.7273C20.8732 13.233 20.9528 13.6733 21.1119 14.0483C21.2738 14.4233 21.5011 14.7145 21.7937 14.9219C22.0891 15.1293 22.4357 15.233 22.8335 15.233C23.0948 15.233 23.332 15.1875 23.5451 15.0966C23.7582 15.0057 23.9386 14.875 24.0863 14.7045C24.234 14.5341 24.3391 14.3295 24.4016 14.0909H25.4073C25.3505 14.4773 25.2099 14.8253 24.9854 15.1349C24.7638 15.4418 24.4698 15.6861 24.1033 15.8679C23.7397 16.0469 23.3164 16.1364 22.8335 16.1364Z' fill='white' fill-opacity='0.75' /%3E%3C/svg%3E ");
   }
   @media (prefers-color-scheme: dark) {
     .system & {
-      border: 1px solid var(--color-gray-700);
+      border: 1px solid var(--color-neutral-700);
       background-image: url("data:image/svg+xml,%3Csvg width='32' height='24' viewBox='0 0 32 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9.66477 16.1364C9.03409 16.1364 8.49006 15.9972 8.03267 15.7188C7.57812 15.4375 7.22727 15.0455 6.98011 14.5426C6.7358 14.0369 6.61364 13.4489 6.61364 12.7784C6.61364 12.108 6.7358 11.517 6.98011 11.0057C7.22727 10.4915 7.57102 10.0909 8.01136 9.80398C8.45455 9.5142 8.97159 9.36932 9.5625 9.36932C9.90341 9.36932 10.2401 9.42614 10.5724 9.53977C10.9048 9.65341 11.2074 9.83807 11.4801 10.0938C11.7528 10.3466 11.9702 10.6818 12.1321 11.0994C12.294 11.517 12.375 12.0312 12.375 12.642V13.0682H7.32955V12.1989H11.3523C11.3523 11.8295 11.2784 11.5 11.1307 11.2102C10.9858 10.9205 10.7784 10.6918 10.5085 10.5241C10.2415 10.3565 9.92614 10.2727 9.5625 10.2727C9.16193 10.2727 8.81534 10.3722 8.52273 10.571C8.23295 10.767 8.00994 11.0227 7.85369 11.3381C7.69744 11.6534 7.61932 11.9915 7.61932 12.3523V12.9318C7.61932 13.4261 7.70455 13.8452 7.875 14.1889C8.0483 14.5298 8.28835 14.7898 8.59517 14.9688C8.90199 15.1449 9.25852 15.233 9.66477 15.233C9.92898 15.233 10.1676 15.196 10.3807 15.1222C10.5966 15.0455 10.7827 14.9318 10.9389 14.7812C11.0952 14.6278 11.2159 14.4375 11.3011 14.2102L12.2727 14.483C12.1705 14.8125 11.9986 15.1023 11.7571 15.3523C11.5156 15.5994 11.2173 15.7926 10.8622 15.9318C10.5071 16.0682 10.108 16.1364 9.66477 16.1364ZM18.5412 10.9205L17.6378 11.1761C17.581 11.0256 17.4972 10.8793 17.3864 10.7372C17.2784 10.5923 17.1307 10.473 16.9432 10.3793C16.7557 10.2855 16.5156 10.2386 16.223 10.2386C15.8224 10.2386 15.4886 10.331 15.2216 10.5156C14.9574 10.6974 14.8253 10.929 14.8253 11.2102C14.8253 11.4602 14.9162 11.6577 15.098 11.8026C15.2798 11.9474 15.5639 12.0682 15.9503 12.1648L16.9219 12.4034C17.5071 12.5455 17.9432 12.7628 18.2301 13.0554C18.517 13.3452 18.6605 13.7187 18.6605 14.1761C18.6605 14.5511 18.5526 14.8864 18.3366 15.1818C18.1236 15.4773 17.8253 15.7102 17.4418 15.8807C17.0582 16.0511 16.6122 16.1364 16.1037 16.1364C15.4361 16.1364 14.8835 15.9915 14.446 15.7017C14.0085 15.4119 13.7315 14.9886 13.6151 14.4318L14.5696 14.1932C14.6605 14.5455 14.8324 14.8097 15.0852 14.9858C15.3409 15.1619 15.6747 15.25 16.0866 15.25C16.5554 15.25 16.9276 15.1506 17.2031 14.9517C17.4815 14.75 17.6207 14.5085 17.6207 14.2273C17.6207 14 17.5412 13.8097 17.3821 13.6562C17.223 13.5 16.9787 13.3835 16.6491 13.3068L15.5582 13.0511C14.9588 12.9091 14.5185 12.6889 14.2372 12.3906C13.9588 12.0895 13.8196 11.7131 13.8196 11.2614C13.8196 10.892 13.9233 10.5653 14.1307 10.2812C14.3409 9.99716 14.6264 9.77415 14.9872 9.61222C15.3509 9.45028 15.7628 9.36932 16.223 9.36932C16.8707 9.36932 17.3793 9.51136 17.7486 9.79545C18.1207 10.0795 18.3849 10.4545 18.5412 10.9205ZM22.8335 16.1364C22.2198 16.1364 21.6914 15.9915 21.2482 15.7017C20.805 15.4119 20.4641 15.0128 20.2255 14.5043C19.9869 13.9957 19.8675 13.4148 19.8675 12.7614C19.8675 12.0966 19.9897 11.5099 20.234 11.0014C20.4812 10.4901 20.8249 10.0909 21.2653 9.80398C21.7085 9.5142 22.2255 9.36932 22.8164 9.36932C23.2766 9.36932 23.6914 9.45455 24.0607 9.625C24.43 9.79545 24.7326 10.0341 24.9684 10.3409C25.2042 10.6477 25.3505 11.0057 25.4073 11.4148H24.4016C24.3249 11.1165 24.1545 10.8523 23.8903 10.6222C23.6289 10.3892 23.2766 10.2727 22.8335 10.2727C22.4414 10.2727 22.0977 10.375 21.8022 10.5795C21.5096 10.7812 21.2809 11.0668 21.1161 11.4361C20.9542 11.8026 20.8732 12.233 20.8732 12.7273C20.8732 13.233 20.9528 13.6733 21.1119 14.0483C21.2738 14.4233 21.5011 14.7145 21.7937 14.9219C22.0891 15.1293 22.4357 15.233 22.8335 15.233C23.0948 15.233 23.332 15.1875 23.5451 15.0966C23.7582 15.0057 23.9386 14.875 24.0863 14.7045C24.234 14.5341 24.3391 14.3295 24.4016 14.0909H25.4073C25.3505 14.4773 25.2099 14.8253 24.9854 15.1349C24.7638 15.4418 24.4698 15.6861 24.1033 15.8679C23.7397 16.0469 23.3164 16.1364 22.8335 16.1364Z' fill='white' fill-opacity='0.75' /%3E%3C/svg%3E ");
     }
   }
@@ -259,16 +259,16 @@
 .DocSearch-Hit-source {
   line-height: 1.5rem;
   font-weight: 600;
-  color: var(--color-gray-900);
+  color: var(--color-neutral-900);
   padding-top: 2.5rem;
   margin: 0 1.5rem 1rem;
 
   .dark & {
-    color: var(--color-gray-200);
+    color: var(--color-neutral-200);
   }
   @media (prefers-color-scheme: dark) {
     .system & {
-      color: var(--color-gray-200);
+      color: var(--color-neutral-200);
     }
   }
 }
@@ -296,7 +296,7 @@
   margin-right: 1rem;
   width: 1.75rem;
   height: 1.75rem;
-  border: 1px solid var(--color-gray-200);
+  border: 1px solid var(--color-neutral-200);
   border-radius: var(--radius-md);
   /* hash icon */
   background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.75 1v10M8.25 1v10M1 3.75h10M1 8.25h10' stroke='black' stroke-opacity='0.4' stroke-width='1' stroke-linecap='round'/%3E%3C/svg%3E");
@@ -304,12 +304,12 @@
   background-position: 50% 55%;
   background-size: 0.85rem;
   .dark & {
-    border: 1px solid var(--color-gray-700);
+    border: 1px solid var(--color-neutral-700);
     background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.75 1v10M8.25 1v10M1 3.75h10M1 8.25h10' stroke='white' stroke-opacity='0.75' stroke-width='1' stroke-linecap='round'/%3E%3C/svg%3E");
   }
   @media (prefers-color-scheme: dark) {
     .system & {
-      border: 1px solid var(--color-gray-700);
+      border: 1px solid var(--color-neutral-700);
       background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.75 1v10M8.25 1v10M1 3.75h10M1 8.25h10' stroke='white' stroke-opacity='0.75' stroke-width='1' stroke-linecap='round'/%3E%3C/svg%3E");
     }
   }
@@ -346,14 +346,14 @@
   font-size: 0.75rem;
   line-height: 1.5rem;
   font-weight: 600;
-  color: var(--color-gray-700);
+  color: var(--color-neutral-700);
 
   .dark & {
-    color: var(--color-gray-400);
+    color: var(--color-neutral-400);
   }
   @media (prefers-color-scheme: dark) {
     .system & {
-      color: var(--color-gray-400);
+      color: var(--color-neutral-400);
     }
   }
 }
@@ -372,7 +372,7 @@
 }
 
 .DocSearch-Hit-title {
-  @apply truncate leading-6 text-gray-700 dark:text-gray-400;
+  @apply truncate leading-6 text-neutral-700 dark:text-neutral-400;
 }
 
 .DocSearch-Hit-title + .DocSearch-Hit-path {
@@ -452,13 +452,13 @@
 .DocSearch-Hit:first-child > a {
   border-top-style: var(--tw-border-style);
   border-top-width: 1px;
-  border-color: var(--color-gray-100);
+  border-color: var(--color-neutral-100);
   .dark & {
-    border-color: color-mix(in oklab, var(--color-gray-200) 5%, transparent);
+    border-color: color-mix(in oklab, var(--color-neutral-200) 5%, transparent);
   }
   @media (prefers-color-scheme: dark) {
     .system & {
-      border-color: color-mix(in oklab, var(--color-gray-200) 5%, transparent);
+      border-color: color-mix(in oklab, var(--color-neutral-200) 5%, transparent);
     }
   }
 }
@@ -473,19 +473,19 @@
 
 .DocSearch-Hit--Result {
   border-radius: var(--radius-lg);
-  background-color: var(--color-gray-50);
+  background-color: var(--color-neutral-50);
   @media (prefers-color-scheme: dark) {
     .system & {
-      background-color: color-mix(in oklab, var(--color-gray-700) 30%, transparent);
+      background-color: color-mix(in oklab, var(--color-neutral-700) 30%, transparent);
     }
   }
   .dark & {
-    background-color: color-mix(in oklab, var(--color-gray-700) 30%, transparent);
+    background-color: color-mix(in oklab, var(--color-neutral-700) 30%, transparent);
   }
 }
 
 .DocSearch-Hit[aria-selected="true"] > a {
-  @apply bg-gray-50 dark:bg-gray-700/[0.16];
+  @apply bg-neutral-50 dark:bg-neutral-700/[0.16];
 }
 
 .DocSearch-Hit[aria-selected="true"] .DocSearch-Hit--Result {
@@ -515,7 +515,7 @@
 }
 
 .DocSearch-Footer {
-  @apply flex flex-none justify-end border-t border-gray-100 px-6 py-4 dark:border-gray-200/5;
+  @apply flex flex-none justify-end border-t border-neutral-100 px-6 py-4 dark:border-neutral-200/5;
 }
 
 .DocSearch-Commands {
@@ -523,18 +523,18 @@
 }
 
 .DocSearch-Logo a {
-  @apply flex items-center text-xs font-medium text-gray-400 dark:text-gray-600;
+  @apply flex items-center text-xs font-medium text-neutral-400 dark:text-neutral-600;
 }
 
 .DocSearch-Label {
-  @apply text-gray-400 dark:text-gray-400;
+  @apply text-neutral-400 dark:text-neutral-400;
 }
 
 .DocSearch-Logo svg {
   @apply ml-2;
 }
 .DocSearch-Logo svg * {
-  @apply ml-3 fill-gray-400 dark:fill-gray-400;
+  @apply ml-3 fill-neutral-400 dark:fill-neutral-400;
 }
 
 .DocSearch-Hit--deleting,
@@ -556,14 +556,14 @@
 }
 
 .DocSearch-Title strong {
-  @apply font-normal text-gray-900 dark:text-gray-200;
+  @apply font-normal text-neutral-900 dark:text-neutral-200;
 }
 
 .DocSearch-StartScreen .DocSearch-Help {
   padding-inline: calc(var(--spacing) * 6);
   padding-block: calc(var(--spacing) * 16);
   text-align: center;
-  color: var(--color-gray-400);
+  color: var(--color-neutral-400);
 }
 
 .DocSearch-NoResults {
@@ -574,15 +574,15 @@
 
 .DocSearch-NoResults .DocSearch-Title {
   text-align: center;
-  color: var(--color-gray-400);
+  color: var(--color-neutral-400);
 }
 
 .DocSearch-NoResults-Prefill-List .DocSearch-Help {
-  @apply mb-3 text-sm leading-6 font-semibold text-gray-900 dark:text-gray-200;
+  @apply mb-3 text-sm leading-6 font-semibold text-neutral-900 dark:text-neutral-200;
 }
 
 .DocSearch-NoResults-Prefill-List ul {
-  @apply overflow-hidden rounded-lg border border-gray-200 bg-gray-50 dark:border-gray-700 dark:bg-gray-700/30;
+  @apply overflow-hidden rounded-lg border border-neutral-200 bg-neutral-50 dark:border-neutral-700 dark:bg-neutral-700/30;
 }
 
 .DocSearch-NoResults-Prefill-List button {
@@ -596,11 +596,11 @@
   background-repeat: no-repeat;
   background-position: right 0.75rem center;
 
-  @apply text-gray-700 dark:text-gray-400 dark:hover:bg-white/[0.02] dark:hover:text-gray-200;
+  @apply text-neutral-700 dark:text-neutral-400 dark:hover:bg-white/[0.02] dark:hover:text-neutral-200;
 }
 
 .DocSearch-NoResults-Prefill-List li + li button {
-  @apply border-t border-gray-200 dark:border-gray-200/5;
+  @apply border-t border-neutral-200 dark:border-neutral-200/5;
 }
 
 .DocSearch-NoResults-Prefill-List + .DocSearch-Help {
@@ -683,17 +683,17 @@
     content: "";
   }
   .dark &::before {
-    background-color: color-mix(in oklab, var(--color-gray-700) 30%, transparent);
+    background-color: color-mix(in oklab, var(--color-neutral-700) 30%, transparent);
   }
   @media (prefers-color-scheme: dark) {
     .system &::before {
-      background-color: color-mix(in oklab, var(--color-gray-700) 30%, transparent);
+      background-color: color-mix(in oklab, var(--color-neutral-700) 30%, transparent);
     }
   }
 }
 
 .DocSearch-Hit[aria-selected="true"] [title="Remove this search from favorites"]::before {
-  @apply bg-sky-100 dark:bg-gray-700/40;
+  @apply bg-sky-100 dark:bg-neutral-700/40;
 }
 
 .DocSearch-Hit-action [title="Remove this search from favorites"] {
@@ -750,7 +750,7 @@
   margin-left: calc(var(--spacing) * 3);
   border-left-style: var(--tw-border-style);
   border-left-width: 1px;
-  border-color: var(--color-gray-200);
+  border-color: var(--color-neutral-200);
   padding-left: calc(var(--spacing) * 3);
   @media (prefers-color-scheme: dark) {
     .system & {
diff --git a/src/app/showcase/layout.tsx b/src/app/showcase/layout.tsx
index 62c90ce32..0db1960fe 100644
--- a/src/app/showcase/layout.tsx
+++ b/src/app/showcase/layout.tsx
@@ -12,7 +12,7 @@ export default async function Layout({ children }: React.PropsWithChildren) {
         <div className="col-start-1 row-span-full row-start-1 hidden border-x border-x-(--pattern-fg) bg-[image:repeating-linear-gradient(315deg,_var(--pattern-fg)_0,_var(--pattern-fg)_1px,_transparent_0,_transparent_50%)] bg-[size:10px_10px] bg-fixed [--pattern-fg:var(--color-black)]/5 lg:block dark:[--pattern-fg:var(--color-white)]/10"></div>
 
         {/* Main content area */}
-        <div className="text-gray-950 dark:text-white">{children}</div>
+        <div className="text-neutral-950 dark:text-white">{children}</div>
 
         {/* Candy cane */}
         <div className="row-span-full row-start-1 hidden border-x border-x-(--pattern-fg) bg-[image:repeating-linear-gradient(315deg,_var(--pattern-fg)_0,_var(--pattern-fg)_1px,_transparent_0,_transparent_50%)] bg-[size:10px_10px] bg-fixed [--pattern-fg:var(--color-black)]/5 lg:col-start-3 lg:block dark:[--pattern-fg:var(--color-white)]/10"></div>
diff --git a/src/app/showcase/page.tsx b/src/app/showcase/page.tsx
index ec2d6314b..08b86912f 100644
--- a/src/app/showcase/page.tsx
+++ b/src/app/showcase/page.tsx
@@ -19,7 +19,7 @@ export const metadata: Metadata = {
 export default async function Showcase() {
   return (
     <div className="mt-24">
-      <div className="mx-2 font-mono text-sm/7 font-medium tracking-widest text-gray-500 uppercase">Showcase</div>
+      <div className="mx-2 font-mono text-sm/7 font-medium tracking-widest text-neutral-500 uppercase">Showcase</div>
       <GridContainer>
         <h1 className="mx-2 text-4xl tracking-tighter text-balance sm:text-5xl lg:text-6xl xl:text-8xl">
           You can build anything with Tailwind CSS.
@@ -27,7 +27,7 @@ export default async function Showcase() {
       </GridContainer>
 
       <GridContainer className="mt-10">
-        <p className="prose mx-2 max-w-(--breakpoint-md) text-lg leading-8 text-gray-600 dark:text-gray-400">
+        <p className="prose mx-2 max-w-(--breakpoint-md) text-lg leading-8 text-neutral-600 dark:text-neutral-400">
           Well not quite <em>anything</em>, like you can't build a spaceship with it. But you can definitely build the
           website for the spaceship —{" "}
           <a href="https://www.jpl.nasa.gov/" target="_blank" rel="noopener noreferrer">
diff --git a/src/app/sponsor/layout.tsx b/src/app/sponsor/layout.tsx
index 3e8e08fc2..cb733b22b 100644
--- a/src/app/sponsor/layout.tsx
+++ b/src/app/sponsor/layout.tsx
@@ -9,15 +9,15 @@ export default async function Layout({ children }: React.PropsWithChildren) {
       </div>
       <div className="grid flex-1 grid-cols-[1fr_var(--gutter-width)_minmax(0,var(--breakpoint-2xl))_var(--gutter-width)_1fr] grid-rows-[1fr_auto] overflow-clip [--gutter-width:--spacing(6)] [--pattern-fg:var(--color-black)]/5 lg:[--gutter-width:--spacing(10)] dark:[--pattern-fg:var(--color-white)]/10">
         {/* Candy cane */}
-        <div className="col-start-2 row-span-full row-start-1 border-x border-x-(--pattern-fg) bg-[repeating-linear-gradient(315deg,var(--pattern-fg)_0,var(--pattern-fg)_1px,transparent_0,transparent_50%)] bg-size-[10px_10px] bg-fixed text-gray-950/5 max-sm:hidden"></div>
+        <div className="col-start-2 row-span-full row-start-1 border-x border-x-(--pattern-fg) bg-[repeating-linear-gradient(315deg,var(--pattern-fg)_0,var(--pattern-fg)_1px,transparent_0,transparent_50%)] bg-size-[10px_10px] bg-fixed text-neutral-950/5 max-sm:hidden"></div>
 
         {/* Main content area */}
-        <div className="col-start-3 row-start-1 text-gray-950 max-sm:col-span-full max-sm:col-start-1 dark:text-white">
+        <div className="col-start-3 row-start-1 text-neutral-950 max-sm:col-span-full max-sm:col-start-1 dark:text-white">
           {children}
         </div>
 
         {/* Candy cane */}
-        <div className="col-start-4 row-span-full row-start-1 border-x border-x-(--pattern-fg) bg-[repeating-linear-gradient(315deg,var(--pattern-fg)_0,var(--pattern-fg)_1px,transparent_0,transparent_50%)] bg-size-[10px_10px] bg-fixed text-gray-950/5 max-sm:hidden"></div>
+        <div className="col-start-4 row-span-full row-start-1 border-x border-x-(--pattern-fg) bg-[repeating-linear-gradient(315deg,var(--pattern-fg)_0,var(--pattern-fg)_1px,transparent_0,transparent_50%)] bg-size-[10px_10px] bg-fixed text-neutral-950/5 max-sm:hidden"></div>
       </div>
     </div>
   );
diff --git a/src/app/sponsor/page.tsx b/src/app/sponsor/page.tsx
index 392ecb539..687832da0 100644
--- a/src/app/sponsor/page.tsx
+++ b/src/app/sponsor/page.tsx
@@ -26,7 +26,7 @@ function DarkButtonLink({ className, ...props }: React.ComponentProps<"a">) {
     <a
       className={clsx(
         className,
-        "rounded-4xl bg-black px-4 py-2 text-center text-sm/6 font-semibold text-white hover:bg-gray-800 dark:bg-white dark:text-gray-950 dark:hover:bg-white/90",
+        "rounded-4xl bg-black px-4 py-2 text-center text-sm/6 font-semibold text-white hover:bg-neutral-800 dark:bg-white dark:text-neutral-950 dark:hover:bg-white/90",
       )}
       {...props}
     />
@@ -38,7 +38,7 @@ function LightButtonLink({ className, ...props }: React.ComponentProps<"a">) {
     <a
       className={clsx(
         className,
-        "rounded-full px-4 py-2 text-center text-sm/6 font-semibold text-gray-950 ring-1 ring-gray-950/10 hover:ring-gray-950/20 dark:bg-white/5 dark:text-gray-100 dark:ring-white/15 dark:hover:ring-white/20",
+        "rounded-full px-4 py-2 text-center text-sm/6 font-semibold text-neutral-950 ring-1 ring-neutral-950/10 hover:ring-neutral-950/20 dark:bg-white/5 dark:text-neutral-100 dark:ring-white/15 dark:hover:ring-white/20",
       )}
       {...props}
     />
@@ -63,7 +63,7 @@ function Eyebrow({
       className={clsx(
         className,
         "font-mono text-[0.8125rem]/6 font-medium tracking-widest text-pretty uppercase",
-        color === "gray" && "text-gray-600 dark:text-gray-500",
+        color === "gray" && "text-neutral-600 dark:text-neutral-500",
         color === "sky" && "text-sky-500",
         color === "pink" && "text-pink-500",
         color === "fuchsia" && "text-fuchsia-500 dark:text-fuchsia-400",
@@ -76,17 +76,17 @@ function Eyebrow({
 function Header() {
   return (
     <div className="line-y mt-12 grid gap-x-10 sm:mt-20 lg:mt-24 lg:grid-cols-[3fr_2fr]">
-      <div className="px-4 py-2 max-lg:line-b sm:px-2 lg:border-r lg:border-gray-950/5 dark:lg:border-white/10">
+      <div className="px-4 py-2 max-lg:line-b sm:px-2 lg:border-r lg:border-neutral-950/5 dark:lg:border-white/10">
         <Eyebrow>Sponsor</Eyebrow>
         <h1 className="mt-2 text-6xl tracking-tighter text-pretty sm:text-8xl">Support the future of Tailwind CSS</h1>
       </div>
-      <div className="@container grid grid-cols-1 grid-rows-[1fr_auto] lg:border-l lg:border-gray-950/5 dark:lg:border-white/10">
+      <div className="@container grid grid-cols-1 grid-rows-[1fr_auto] lg:border-l lg:border-neutral-950/5 dark:lg:border-white/10">
         <div className="flex items-center px-4 py-2 max-lg:line-y max-lg:mt-6 sm:px-2">
-          <p className="max-w-2xl text-lg/7 font-medium text-pretty text-gray-600 dark:text-gray-400">
+          <p className="max-w-2xl text-lg/7 font-medium text-pretty text-neutral-600 dark:text-neutral-400">
             Help keep Tailwind CSS sustainable long term by supporting the project individually or as a company.
           </p>
         </div>
-        <div className="flex gap-4 px-4 py-2 whitespace-nowrap max-lg:line-t max-lg:mt-6 sm:px-2 lg:border-t lg:border-gray-950/5 @max-md:flex-col dark:lg:border-white/10">
+        <div className="flex gap-4 px-4 py-2 whitespace-nowrap max-lg:line-t max-lg:mt-6 sm:px-2 lg:border-t lg:border-neutral-950/5 @max-md:flex-col dark:lg:border-white/10">
           <DarkButtonLink href="#insiders" className="inline-flex items-center justify-center gap-2">
             Support as an individual
             <svg fill="currentColor" aria-hidden="true" viewBox="0 0 10 10" className="-mr-0.5 w-2.5">
@@ -99,7 +99,7 @@ function Header() {
               fill="currentColor"
               aria-hidden="true"
               viewBox="0 0 10 10"
-              className="-mr-0.5 w-2.5 fill-gray-600 dark:fill-gray-400"
+              className="-mr-0.5 w-2.5 fill-neutral-600 dark:fill-neutral-400"
             >
               <path d="M4.85355 0.146423L9.70711 4.99998L4.85355 9.85353L4.14645 9.14642L7.79289 5.49998H0V4.49998H7.79289L4.14645 0.85353L4.85355 0.146423Z"></path>
             </svg>
@@ -112,10 +112,10 @@ function Header() {
 
 function MessageFromAdam() {
   return (
-    <div className="line-y mt-24 bg-gray-950/5 p-2 sm:-mx-px sm:p-[calc(--spacing(2)+1px)] dark:bg-white/10">
+    <div className="line-y mt-24 bg-neutral-950/5 p-2 sm:-mx-px sm:p-[calc(--spacing(2)+1px)] dark:bg-white/10">
       <div className="relative">
         <div className="absolute inset-0 z-10 rounded-4xl dark:inset-ring dark:inset-ring-white/20"></div>
-        <section className="relative isolate overflow-hidden rounded-4xl bg-gray-950 p-10 md:p-20 lg:p-16 xl:p-32">
+        <section className="relative isolate overflow-hidden rounded-4xl bg-neutral-950 p-10 md:p-20 lg:p-16 xl:p-32">
           <Image
             src={AdamTeachingImage}
             alt="Adam Wathan"
@@ -130,7 +130,7 @@ function MessageFromAdam() {
               tools you love, with no strings attached.
             </p>
             <p className="mt-8 text-base/8 font-medium">Adam Wathan</p>
-            <p className="text-gray-400">Creator of Tailwind CSS</p>
+            <p className="text-neutral-400">Creator of Tailwind CSS</p>
           </div>
         </section>
       </div>
@@ -143,10 +143,10 @@ function FeaturedPartners() {
     <section>
       <div className="relative mt-4">
         <div className="pointer-events-none absolute inset-0 z-10 grid grid-cols-2 gap-10 max-md:gap-5 lg:grid-cols-3 xl:grid-cols-4">
-          <div className="border-r border-gray-950/5 dark:border-white/10"></div>
-          <div className="border-l border-gray-950/5 lg:border-x dark:border-white/10"></div>
-          <div className="border-l border-gray-950/5 max-lg:hidden xl:border-x dark:border-white/10"></div>
-          <div className="border-l border-gray-950/5 max-xl:hidden dark:border-white/10"></div>
+          <div className="border-r border-neutral-950/5 dark:border-white/10"></div>
+          <div className="border-l border-neutral-950/5 lg:border-x dark:border-white/10"></div>
+          <div className="border-l border-neutral-950/5 max-lg:hidden xl:border-x dark:border-white/10"></div>
+          <div className="border-l border-neutral-950/5 max-xl:hidden dark:border-white/10"></div>
         </div>
         <ul className="grid grid-cols-2 gap-5 md:gap-10 lg:grid-cols-3 xl:grid-cols-4">
           {partners.map((partner, index) => (
@@ -155,7 +155,7 @@ function FeaturedPartners() {
               href={partner.url}
               target="_blank"
               rel="noopener sponsored"
-              className="grid place-content-center transition-colors hover:bg-gray-950/2.5 max-lg:nth-[2n+1]:line-y sm:px-2 sm:py-4 lg:max-xl:nth-[3n+1]:line-y xl:nth-[4n+1]:line-y dark:hover:bg-white/2.5"
+              className="grid place-content-center transition-colors hover:bg-neutral-950/2.5 max-lg:nth-[2n+1]:line-y sm:px-2 sm:py-4 lg:max-xl:nth-[3n+1]:line-y xl:nth-[4n+1]:line-y dark:hover:bg-white/2.5"
             >
               <partner.logo className="w-full max-w-80" aria-label={`${partner.name} logo`} />
             </a>
@@ -169,21 +169,21 @@ function FeaturedPartners() {
 function Insiders() {
   return (
     <div id="insiders" className="line-y mt-40 grid scroll-mt-24 grid-cols-1 gap-10 lg:grid-cols-3 xl:grid-cols-5">
-      <div className="border-r border-gray-950/5 px-4 py-2 sm:px-2 lg:col-span-2 xl:col-span-3 dark:border-white/10">
+      <div className="border-r border-neutral-950/5 px-4 py-2 sm:px-2 lg:col-span-2 xl:col-span-3 dark:border-white/10">
         <Eyebrow as="h2" color="sky">
           <a href="#insiders">Insiders</a>
         </Eyebrow>
         <p className="max-w-3xl text-3xl font-medium tracking-tight text-pretty md:text-[2.5rem]/14">
           Support as an individual
         </p>
-        <p className="mt-4 max-w-2xl text-base/7 text-gray-600 dark:text-gray-400">
+        <p className="mt-4 max-w-2xl text-base/7 text-neutral-600 dark:text-neutral-400">
           Join a community of enthusiasts who get early access to new features, internal tooling we've built for
           Tailwind, and direct connection with the team — all while supporting the project you love.
         </p>
       </div>
-      <div className="grid grid-cols-1 gap-2 bg-gray-950/5 py-[calc(--spacing(2)+1px)] max-xl:-mx-px max-xl:px-[calc(--spacing(2)+1px)] xl:col-span-2 xl:-mr-px xl:border-l xl:border-gray-950/5 xl:pr-[calc(--spacing(2)+1px)] xl:pl-2 dark:bg-white/10 dark:xl:border-white/10">
-        <div className="@container rounded-2xl bg-white p-6 sm:rounded-4xl sm:p-10 dark:bg-gray-950/80 dark:outline dark:outline-white/10">
-          <p className="font-mono text-[0.8125rem]/6 font-medium tracking-widest text-pretty text-gray-600 uppercase dark:text-gray-400">
+      <div className="grid grid-cols-1 gap-2 bg-neutral-950/5 py-[calc(--spacing(2)+1px)] max-xl:-mx-px max-xl:px-[calc(--spacing(2)+1px)] xl:col-span-2 xl:-mr-px xl:border-l xl:border-neutral-950/5 xl:pr-[calc(--spacing(2)+1px)] xl:pl-2 dark:bg-white/10 dark:xl:border-white/10">
+        <div className="@container rounded-2xl bg-white p-6 sm:rounded-4xl sm:p-10 dark:bg-neutral-950/80 dark:outline dark:outline-white/10">
+          <p className="font-mono text-[0.8125rem]/6 font-medium tracking-widest text-pretty text-neutral-600 uppercase dark:text-neutral-400">
             Sponsor
           </p>
           <div className="mt-6">
@@ -192,7 +192,7 @@ function Insiders() {
                 <p className="text-5xl/12 font-medium first-letter:font-light">$120</p>
                 <div>
                   <p className="text-sm/6 font-semibold">per year</p>
-                  <p className="text-sm/6 text-gray-600 dark:text-gray-400">plus tax</p>
+                  <p className="text-sm/6 text-neutral-600 dark:text-neutral-400">plus tax</p>
                 </div>
               </div>
               <DarkButtonLink href="https://buy.polar.sh/polar_cl_sdvKSPOnjtdElmQ57la4wv3C91Io5vGZpJmC71jdFXv">
@@ -212,14 +212,14 @@ function InsiderPerks() {
       <h2 className="px-4 text-2xl/10 font-medium tracking-tight sm:px-2">Insider perks</h2>
       <div className="relative mt-4">
         <div className="pointer-events-none absolute inset-0 z-10 grid grid-cols-1 gap-2 max-sm:hidden sm:grid-cols-2 sm:gap-x-5 sm:gap-y-10 md:gap-10 lg:grid-cols-3">
-          <div className="border-r border-gray-950/5 dark:border-white/10"></div>
-          <div className="border-l border-gray-950/5 lg:border-x dark:border-white/10"></div>
-          <div className="border-l border-gray-950/5 max-lg:hidden dark:border-white/10"></div>
+          <div className="border-r border-neutral-950/5 dark:border-white/10"></div>
+          <div className="border-l border-neutral-950/5 lg:border-x dark:border-white/10"></div>
+          <div className="border-l border-neutral-950/5 max-lg:hidden dark:border-white/10"></div>
         </div>
         <ul className="grid-cols-1 gap-2 max-sm:line-y max-sm:overflow-x-auto max-sm:px-2 sm:grid sm:grid-cols-2 sm:gap-x-5 sm:gap-y-10 md:gap-10 lg:grid-cols-3">
           <li className="p-2 sm:max-lg:nth-[2n+1]:line-y lg:nth-[3n+1]:line-y">
-            <p className="text-sm/7 text-gray-600 dark:text-gray-400">
-              <strong className="font-semibold text-gray-950 dark:text-white">
+            <p className="text-sm/7 text-neutral-600 dark:text-neutral-400">
+              <strong className="font-semibold text-neutral-950 dark:text-white">
                 Access to private insiders area in Discord
               </strong>{" "}
               — where Tailwind insiders share tips, play with upcoming features, and connect directly with the core
@@ -227,15 +227,15 @@ function InsiderPerks() {
             </p>
           </li>
           <li className="p-2 sm:max-lg:nth-[2n+1]:line-y lg:nth-[3n+1]:line-y">
-            <p className="text-sm/7 text-gray-600 dark:text-gray-400">
-              <strong className="font-semibold text-gray-950 dark:text-white">Cursor/Claude/AGENTS.md rules</strong> —
+            <p className="text-sm/7 text-neutral-600 dark:text-neutral-400">
+              <strong className="font-semibold text-neutral-950 dark:text-white">Cursor/Claude/AGENTS.md rules</strong> —
               Adam's personal ruleset for working with AI coding assistants, straight from the Tailwind founder's own
               development setup.
             </p>
           </li>
           <li className="p-2 sm:max-lg:nth-[2n+1]:line-y lg:nth-[3n+1]:line-y">
-            <p className="text-sm/7 text-gray-600 dark:text-gray-400">
-              <strong className="font-semibold text-gray-950 dark:text-white">
+            <p className="text-sm/7 text-neutral-600 dark:text-neutral-400">
+              <strong className="font-semibold text-neutral-950 dark:text-white">
                 Early documentation for pre-release builds
               </strong>{" "}
               — preview documentation for unreleased Tailwind features and start experimenting with tomorrow's CSS
@@ -243,21 +243,21 @@ function InsiderPerks() {
             </p>
           </li>
           <li className="p-2 sm:max-lg:nth-[2n+1]:line-y lg:nth-[3n+1]:line-y">
-            <p className="text-sm/7 text-gray-600 dark:text-gray-400">
-              <strong className="font-semibold text-gray-950 dark:text-white">VS Code themes</strong> — get the VS Code
+            <p className="text-sm/7 text-neutral-600 dark:text-neutral-400">
+              <strong className="font-semibold text-neutral-950 dark:text-white">VS Code themes</strong> — get the VS Code
               themes built and battle-tested by the Tailwind team, crafted with the same attention to detail we put into
               Tailwind CSS itself
             </p>
           </li>
           <li className="p-2 sm:max-lg:nth-[2n+1]:line-y lg:nth-[3n+1]:line-y">
-            <p className="text-sm/7 text-gray-600 dark:text-gray-400">
-              <strong className="font-semibold text-gray-950 dark:text-white">Raycast extension</strong> — instantly
+            <p className="text-sm/7 text-neutral-600 dark:text-neutral-400">
+              <strong className="font-semibold text-neutral-950 dark:text-white">Raycast extension</strong> — instantly
               find the nearest Tailwind theme value for any color or size, or see the generated CSS output of any class.
             </p>
           </li>
           <li className="p-2 sm:max-lg:nth-[2n+1]:line-y lg:nth-[3n+1]:line-y">
-            <p className="text-sm/7 text-gray-600 dark:text-gray-400">
-              <strong className="font-semibold text-gray-950 dark:text-white">Source code + Figma files</strong> —
+            <p className="text-sm/7 text-neutral-600 dark:text-neutral-400">
+              <strong className="font-semibold text-neutral-950 dark:text-white">Source code + Figma files</strong> —
               download the source code from our feature demos, that usually never see the light of day, to learn exactly
               how we prototype ideas with Tailwind.
             </p>
@@ -271,7 +271,7 @@ function InsiderPerks() {
 function InsiderPerkScreenshots() {
   return (
     <div className="line-y mt-10 grid grid-rows-1 gap-2 p-2 md:h-130 md:grid-rows-2 lg:grid-cols-3">
-      <div className="relative overflow-hidden rounded-xl bg-gray-200 pt-9 pl-9 outline -outline-offset-1 outline-gray-950/5 max-md:aspect-[4/3] md:col-start-1 md:row-start-1 md:max-lg:col-span-2 md:max-lg:pt-5 md:max-lg:pl-5 lg:row-span-2 dark:bg-gray-900 dark:outline-white/5">
+      <div className="relative overflow-hidden rounded-xl bg-neutral-200 pt-9 pl-9 outline -outline-offset-1 outline-neutral-950/5 max-md:aspect-[4/3] md:col-start-1 md:row-start-1 md:max-lg:col-span-2 md:max-lg:pt-5 md:max-lg:pl-5 lg:row-span-2 dark:bg-neutral-900 dark:outline-white/5">
         <p className="absolute right-4 bottom-4 flex items-center gap-2 rounded-full border border-white/20 bg-black/80 pr-4 pl-2 font-mono text-xs/7 font-medium text-white outline outline-black backdrop-blur-sm lg:right-6 lg:bottom-6">
           <svg fill="#D97757" viewBox="0 0 16 16" className="size-4">
             <path d="m3.137 10.637 3.145-1.765.052-.154-.052-.085h-.154l-.526-.032-1.797-.048-1.559-.065-1.51-.081-.38-.081L0 7.856l.036-.234.32-.215.458.04 1.011.07 1.518.105 1.101.064 1.631.17h.26l.036-.105-.09-.065-.068-.064-1.57-1.065-1.7-1.125-.89-.648-.483-.328-.242-.307-.106-.672.438-.482.586.04.15.041.595.458 1.271.983 1.66 1.222.242.203.098-.07.012-.048-.11-.182-.902-1.63-.964-1.66-.429-.689-.113-.412a1.982 1.982 0 0 1-.069-.486l.498-.676L4.46 0l.664.09.28.242.412.943.668 1.485L7.52 4.78l.304.6.162.554.06.17h.106v-.097l.085-1.138.158-1.396.153-1.797.053-.506.251-.607.498-.328.388.186.32.457-.044.296-.19 1.234-.373 1.935-.243 1.295h.142l.162-.162.655-.87 1.101-1.376.486-.546.567-.604.364-.287h.688l.506.753-.226.777-.709.899-.587.76-.842 1.134-.526.907.049.072.125-.012 1.902-.405 1.029-.186 1.226-.21.555.259.06.263-.218.538-1.312.324-1.538.308-2.29.542-.03.02.033.04 1.033.098.44.024h1.081l2.012.15.526.348.316.425-.053.324-.81.413-1.092-.26-2.55-.606-.874-.219h-.122v.073l.729.712 1.336 1.206 1.671 1.555.085.384-.214.304-.227-.033-1.47-1.105-.566-.498-1.283-1.08h-.085v.113l.295.433 1.563 2.348.08.72-.113.235-.404.142-.446-.081-.914-1.283-.943-1.445-.761-1.296-.093.053-.45 4.837-.21.247L7.58 16l-.405-.308-.214-.498.214-.983.26-1.283.21-1.02.19-1.267.113-.42-.008-.03-.093.013-.955 1.311-1.453 1.963-1.15 1.23-.275.11-.477-.247.044-.441.267-.393 1.59-2.023.96-1.255.62-.725-.005-.105h-.036l-4.226 2.744-.753.098-.323-.304.04-.498.154-.162 1.27-.874-.003.004Z" />
@@ -287,15 +287,15 @@ function InsiderPerkScreenshots() {
         <Image
           src={InsidersGitHubRepositoryImage}
           alt="Insiders GitHub repository"
-          className="w-212 max-w-none rounded-tl-xl bg-white outline outline-gray-950/10 dark:hidden"
+          className="w-212 max-w-none rounded-tl-xl bg-white outline outline-neutral-950/10 dark:hidden"
         />
         <Image
           src={InsidersGitHubRepositoryDarkImage}
           alt="Insiders GitHub repository"
-          className="hidden w-212 max-w-none rounded-tl-xl bg-[#0F1116] outline outline-gray-950/10 dark:block dark:outline dark:outline-white/10"
+          className="hidden w-212 max-w-none rounded-tl-xl bg-[#0F1116] outline outline-neutral-950/10 dark:block dark:outline dark:outline-white/10"
         />
       </div>
-      <div className="relative overflow-hidden rounded-xl bg-[#F66969] pt-9 pl-9 inset-ring inset-ring-gray-950/10 max-md:aspect-[4/3] md:row-start-1 md:max-lg:col-start-3 md:max-lg:pt-5 md:max-lg:pl-5 lg:col-start-2">
+      <div className="relative overflow-hidden rounded-xl bg-[#F66969] pt-9 pl-9 inset-ring inset-ring-neutral-950/10 max-md:aspect-[4/3] md:row-start-1 md:max-lg:col-start-3 md:max-lg:pt-5 md:max-lg:pl-5 lg:col-start-2">
         <p className="absolute right-4 bottom-4 flex items-center gap-2 rounded-full border border-white/20 bg-black/80 pr-4 pl-2 font-mono text-xs/7 font-medium text-white outline outline-black backdrop-blur-sm lg:right-6 lg:bottom-6">
           <svg fill="#FF6363" viewBox="0 0 16 16" className="size-4">
             <path
@@ -312,7 +312,7 @@ function InsiderPerkScreenshots() {
           className="w-180 max-w-none rounded-tl-xl border border-black bg-[#1B1B1C] outline -outline-offset-2 outline-white/30 sm:w-200 md:w-150"
         />
       </div>
-      <div className="relative flex items-center justify-center rounded-xl bg-[#5865F2] inset-ring inset-ring-gray-950/10 max-md:aspect-[4/3] md:row-start-2 md:max-lg:col-start-1 lg:col-start-2">
+      <div className="relative flex items-center justify-center rounded-xl bg-[#5865F2] inset-ring inset-ring-neutral-950/10 max-md:aspect-[4/3] md:row-start-2 md:max-lg:col-start-1 lg:col-start-2">
         <p className="absolute right-4 bottom-4 flex items-center gap-2 rounded-full border border-white/20 bg-black/80 pr-4 pl-2 font-mono text-xs/7 font-medium text-white outline outline-black backdrop-blur-sm lg:right-6 lg:bottom-6">
           <LockClosedIcon className="size-4 fill-white/75" />
           Private community
@@ -321,7 +321,7 @@ function InsiderPerkScreenshots() {
           <path d="M81.15 0a73.745 73.745 0 0 0-3.36 6.794 97.867 97.867 0 0 0-28.994 0A67.876 67.876 0 0 0 45.437 0a105.544 105.544 0 0 0-26.14 8.057C2.779 32.53-1.691 56.373.53 79.887a105.038 105.038 0 0 0 32.05 16.088 76.912 76.912 0 0 0 6.87-11.063c-3.737-1.389-7.35-3.131-10.81-5.152.91-.657 1.794-1.339 2.653-1.995a75.255 75.255 0 0 0 64.075 0c.86.707 1.743 1.389 2.652 1.995a68.772 68.772 0 0 1-10.835 5.178A76.903 76.903 0 0 0 94.056 96a104.99 104.99 0 0 0 32.051-16.063c2.626-27.277-4.496-50.917-18.817-71.855A103.922 103.922 0 0 0 81.175.051L81.15 0ZM42.28 65.414c-6.238 0-11.416-5.657-11.416-12.653s4.976-12.679 11.391-12.679 11.517 5.708 11.416 12.679c-.101 6.97-5.026 12.653-11.39 12.653Zm42.078 0c-6.264 0-11.391-5.657-11.391-12.653s4.975-12.679 11.39-12.679c6.416 0 11.492 5.708 11.391 12.679-.1 6.97-5.026 12.653-11.39 12.653Z" />
         </svg>
       </div>
-      <div className="relative overflow-hidden rounded-xl bg-gray-200 pt-9 pl-9 outline -outline-offset-1 outline-gray-950/5 max-md:aspect-[4/3] md:max-lg:col-span-2 md:max-lg:col-start-2 md:max-lg:row-start-2 md:max-lg:pt-5 md:max-lg:pl-5 lg:col-start-3 lg:row-span-2 lg:row-start-1 dark:bg-gray-900 dark:outline-white/5">
+      <div className="relative overflow-hidden rounded-xl bg-neutral-200 pt-9 pl-9 outline -outline-offset-1 outline-neutral-950/5 max-md:aspect-[4/3] md:max-lg:col-span-2 md:max-lg:col-start-2 md:max-lg:row-start-2 md:max-lg:pt-5 md:max-lg:pl-5 lg:col-start-3 lg:row-span-2 lg:row-start-1 dark:bg-neutral-900 dark:outline-white/5">
         <p className="absolute right-4 bottom-4 flex items-center gap-2 rounded-full border border-white/20 bg-black/80 pr-4 pl-2 font-mono text-xs/7 font-medium text-white outline outline-black backdrop-blur-sm lg:right-6 lg:bottom-6">
           <svg fill="none" viewBox="0 0 16 16" className="size-4">
             <path
@@ -371,7 +371,7 @@ function Partners() {
         <p className="max-w-3xl text-3xl font-medium tracking-tight text-pretty md:text-[2.5rem]/14">
           Support as a company
         </p>
-        <p className="mt-4 max-w-2xl text-base/7 text-gray-600 dark:text-gray-400">
+        <p className="mt-4 max-w-2xl text-base/7 text-neutral-600 dark:text-neutral-400">
           Become a Tailwind CSS partner to put your brand in front of 10 million developers a month, give your team
           early access to new features and our roadmap, and get direct access to the Tailwind CSS core team — all while
           helping ensure Tailwind stays around for the long haul.
@@ -387,35 +387,35 @@ function PartnerPerks() {
       <h2 className="px-4 text-2xl/10 font-medium tracking-tight sm:px-2">Why become a partner?</h2>
       <div className="relative mt-4">
         <div className="pointer-events-none absolute inset-0 z-10 grid grid-cols-1 gap-2 max-sm:hidden sm:grid-cols-2 sm:gap-x-5 sm:gap-y-10 md:gap-10 lg:grid-cols-3">
-          <div className="border-r border-gray-950/5 dark:border-white/10"></div>
-          <div className="border-l border-gray-950/5 lg:border-x dark:border-white/10"></div>
-          <div className="border-l border-gray-950/5 max-lg:hidden dark:border-white/10"></div>
+          <div className="border-r border-neutral-950/5 dark:border-white/10"></div>
+          <div className="border-l border-neutral-950/5 lg:border-x dark:border-white/10"></div>
+          <div className="border-l border-neutral-950/5 max-lg:hidden dark:border-white/10"></div>
         </div>
-        <ul className="grid-cols-1 gap-2 text-sm/7 text-gray-600 max-sm:line-y max-sm:overflow-x-auto max-sm:px-2 sm:grid sm:grid-cols-2 sm:gap-x-5 sm:gap-y-10 md:gap-10 lg:grid-cols-3">
+        <ul className="grid-cols-1 gap-2 text-sm/7 text-neutral-600 max-sm:line-y max-sm:overflow-x-auto max-sm:px-2 sm:grid sm:grid-cols-2 sm:gap-x-5 sm:gap-y-10 md:gap-10 lg:grid-cols-3">
           <li className="p-2 sm:max-lg:nth-[2n+1]:line-y lg:nth-[3n+1]:line-y">
-            <p className="text-sm/7 text-gray-600 dark:text-gray-400">
-              <strong className="font-semibold text-gray-950 dark:text-white">Your logo in front of millions</strong> —
+            <p className="text-sm/7 text-neutral-600 dark:text-neutral-400">
+              <strong className="font-semibold text-neutral-950 dark:text-white">Your logo in front of millions</strong> —
               the Tailwind CSS website gets over 10 million visitors per month, and your brand will be featured on the
               homepage as a partner.
             </p>
           </li>
           <li className="p-2 sm:max-lg:nth-[2n+1]:line-y lg:nth-[3n+1]:line-y">
-            <p className="text-sm/7 text-gray-600 dark:text-gray-400">
-              <strong className="font-semibold text-gray-950 dark:text-white">Insiders team access</strong> — get all
+            <p className="text-sm/7 text-neutral-600 dark:text-neutral-400">
+              <strong className="font-semibold text-neutral-950 dark:text-white">Insiders team access</strong> — get all
               the perks of the Insiders tier for everyone in your team, including early access to new features,
               specialized tooling, and more.
             </p>
           </li>
           <li className="p-2 sm:max-lg:nth-[2n+1]:line-y lg:nth-[3n+1]:line-y">
-            <p className="text-sm/7 text-gray-600 dark:text-gray-400">
-              <strong className="font-semibold text-gray-950 dark:text-white">Tailwind Plus team access</strong> —
+            <p className="text-sm/7 text-neutral-600 dark:text-neutral-400">
+              <strong className="font-semibold text-neutral-950 dark:text-white">Tailwind Plus team access</strong> —
               access to Tailwind Plus for your whole team, including the React UI Kit, expertly crafted templates, and
               500+ thoughtfully designed components.
             </p>
           </li>
           <li className="p-2 sm:max-lg:nth-[2n+1]:line-y lg:nth-[3n+1]:line-y">
-            <p className="text-sm/7 text-gray-600 dark:text-gray-400">
-              <strong className="font-semibold text-gray-950 dark:text-white">
+            <p className="text-sm/7 text-neutral-600 dark:text-neutral-400">
+              <strong className="font-semibold text-neutral-950 dark:text-white">
                 Expedited bug fixes and issue resolution
               </strong>{" "}
               — we’ll work to address issues you run into on an expedited schedule, even if normally they would be lower
@@ -423,15 +423,15 @@ function PartnerPerks() {
             </p>
           </li>
           <li className="p-2 sm:max-lg:nth-[2n+1]:line-y lg:nth-[3n+1]:line-y">
-            <p className="text-sm/7 text-gray-600 dark:text-gray-400">
-              <strong className="font-semibold text-gray-950 dark:text-white">Website in the showcase</strong> — your
+            <p className="text-sm/7 text-neutral-600 dark:text-neutral-400">
+              <strong className="font-semibold text-neutral-950 dark:text-white">Website in the showcase</strong> — your
               website will feature prominently in our showcase, bringing more attention to your brand when new Tailwind
               users go to see what is possible with the framework.
             </p>
           </li>
           <li className="p-2 sm:max-lg:nth-[2n+1]:line-y lg:nth-[3n+1]:line-y">
-            <p className="text-sm/7 text-gray-600 dark:text-gray-400">
-              <strong className="font-semibold text-gray-950 dark:text-white">Support Tailwind CSS</strong> — you’ll be
+            <p className="text-sm/7 text-neutral-600 dark:text-neutral-400">
+              <strong className="font-semibold text-neutral-950 dark:text-white">Support Tailwind CSS</strong> — you’ll be
               helping contribute to the sustainability of the framework, giving you peace of mind that a core technology
               in your stack will continue to function smoothly.
             </p>
@@ -551,9 +551,9 @@ function PartnerPlans() {
       {plans.map((plan) => (
         <div
           key={plan.name}
-          className="bg-gray-950/5 py-[calc(--spacing(2)+1px)] max-lg:-mx-px max-lg:px-[calc(--spacing(2)+1px)] not-first:max-lg:pt-0 lg:-mx-px lg:border-gray-950/5 lg:pr-2 lg:pl-[calc(--spacing(2)+1px)] lg:not-first:border-l lg:not-last:border-r dark:bg-white/10 dark:lg:border-white/10"
+          className="bg-neutral-950/5 py-[calc(--spacing(2)+1px)] max-lg:-mx-px max-lg:px-[calc(--spacing(2)+1px)] not-first:max-lg:pt-0 lg:-mx-px lg:border-neutral-950/5 lg:pr-2 lg:pl-[calc(--spacing(2)+1px)] lg:not-first:border-l lg:not-last:border-r dark:bg-white/10 dark:lg:border-white/10"
         >
-          <div className="flex h-full flex-col gap-y-6 rounded-2xl bg-white p-6 sm:rounded-4xl sm:p-10 xl:p-8 2xl:p-10 dark:bg-gray-950/80 dark:outline dark:outline-white/10">
+          <div className="flex h-full flex-col gap-y-6 rounded-2xl bg-white p-6 sm:rounded-4xl sm:p-10 xl:p-8 2xl:p-10 dark:bg-neutral-950/80 dark:outline dark:outline-white/10">
             <div className="flex items-center justify-between gap-4">
               <Eyebrow as="h3">{plan.name}</Eyebrow>
               {plan.remaining !== null && (
@@ -574,7 +574,7 @@ function PartnerPlans() {
                 <p className="text-5xl font-medium first-letter:font-light">{plan.price}</p>
                 <div>
                   <p className="text-sm/6 font-semibold">per month</p>
-                  <p className="text-sm/6 text-gray-600 dark:text-gray-400">plus tax</p>
+                  <p className="text-sm/6 text-neutral-600 dark:text-neutral-400">plus tax</p>
                 </div>
               </div>
 
@@ -582,18 +582,18 @@ function PartnerPlans() {
                 {`Become ${plan.name.toLowerCase().match(/^[aeiou]/i) ? "an" : "a"} ${plan.name.toLowerCase()}`}
               </DarkButtonLink>
             </div>
-            <p className="max-w-2xl text-sm/7 text-gray-600 dark:text-gray-400">{plan.description}</p>
-            <hr className="border-gray-950/5 dark:border-white/10" />
+            <p className="max-w-2xl text-sm/7 text-neutral-600 dark:text-neutral-400">{plan.description}</p>
+            <hr className="border-neutral-950/5 dark:border-white/10" />
             <div className="@container">
               <ul
-                className="group grid grid-cols-1 gap-x-10 gap-y-6 text-sm/7 text-gray-600 @3xl:grid-cols-2 dark:text-gray-300"
+                className="group grid grid-cols-1 gap-x-10 gap-y-6 text-sm/7 text-neutral-600 @3xl:grid-cols-2 dark:text-neutral-300"
                 role="list"
               >
                 {plan.features.map((feature) => (
                   <li key={feature.name} className="grid max-w-2xl grid-cols-[auto_1fr] gap-6">
                     <CheckmarkIcon />
                     <p className="text-pretty">
-                      <strong className="font-semibold text-gray-950 dark:text-white">{feature.name}</strong> —{" "}
+                      <strong className="font-semibold text-neutral-950 dark:text-white">{feature.name}</strong> —{" "}
                       {feature.description}
                     </p>
                   </li>
@@ -631,7 +631,7 @@ function Faq({ question, children }: { question: string; children: React.ReactNo
       .replace(/\s+/g, "-");
 
   return (
-    <details className="group border-t border-gray-950/5 px-4 py-3 sm:px-2 dark:border-white/5">
+    <details className="group border-t border-neutral-950/5 px-4 py-3 sm:px-2 dark:border-white/5">
       <summary
         id={id}
         className="flex w-full cursor-pointer justify-between gap-4 select-none group-open:text-sky-500 [&::-webkit-details-marker]:hidden"
@@ -648,7 +648,7 @@ function Faq({ question, children }: { question: string; children: React.ReactNo
 function Faqs() {
   return (
     <section className="line-y mt-30 grid grid-cols-1 gap-10 lg:grid-cols-2" id="faqs">
-      <div className="lg:border-r lg:border-gray-950/5 dark:lg:border-white/5">
+      <div className="lg:border-r lg:border-neutral-950/5 dark:lg:border-white/5">
         <div className="grid grid-cols-1 gap-y-2 px-4 py-2 max-lg:line-b sm:px-2 lg:line-b/half">
           <Eyebrow as="h2" color="fuchsia">
             Frequently asked questions
@@ -656,7 +656,7 @@ function Faqs() {
           <p className="text-[2.5rem]/none font-medium tracking-tight text-pretty">Everything you need to know.</p>
         </div>
       </div>
-      <div className="lg:border-l lg:border-gray-950/5 dark:lg:border-white/5">
+      <div className="lg:border-l lg:border-neutral-950/5 dark:lg:border-white/5">
         <div className="grid grid-cols-1 gap-10">
           <FaqGroup title="General">
             <Faq question="Who can I contact about a sponsorship?">
@@ -753,7 +753,7 @@ function Sponsors() {
           <p className="max-w-3xl text-3xl font-medium tracking-tight text-pretty md:text-[2.5rem]/14">
             Thank you to our sponsors.
           </p>
-          <p className="mt-4 max-w-2xl text-base/7 text-gray-600 dark:text-gray-400">
+          <p className="mt-4 max-w-2xl text-base/7 text-neutral-600 dark:text-neutral-400">
             We are super grateful to all the following sponsors for supporting the ongoing development and maintenance
             of Tailwind CSS.
           </p>
@@ -762,10 +762,10 @@ function Sponsors() {
       <h2 className="mt-16 px-4 text-2xl/10 font-medium tracking-tight sm:px-2">Partners</h2>
       <div className="relative mt-4">
         <div className="pointer-events-none absolute inset-0 z-10 grid grid-cols-2 gap-10 max-md:gap-5 lg:grid-cols-3 xl:grid-cols-4">
-          <div className="border-r border-gray-950/5 dark:border-white/10"></div>
-          <div className="border-l border-gray-950/5 lg:border-x dark:border-white/10"></div>
-          <div className="border-l border-gray-950/5 max-lg:hidden xl:border-x dark:border-white/10"></div>
-          <div className="border-l border-gray-950/5 max-xl:hidden dark:border-white/10"></div>
+          <div className="border-r border-neutral-950/5 dark:border-white/10"></div>
+          <div className="border-l border-neutral-950/5 lg:border-x dark:border-white/10"></div>
+          <div className="border-l border-neutral-950/5 max-lg:hidden xl:border-x dark:border-white/10"></div>
+          <div className="border-l border-neutral-950/5 max-xl:hidden dark:border-white/10"></div>
         </div>
         <ul className="grid grid-cols-2 gap-5 md:gap-10 lg:grid-cols-3 xl:grid-cols-4">
           {partners.map((company, index) => (
@@ -774,7 +774,7 @@ function Sponsors() {
               href={company.url}
               target="_blank"
               rel="noopener sponsored"
-              className="grid place-content-center transition-colors hover:bg-gray-950/2.5 max-lg:nth-[2n+1]:line-y sm:px-2 sm:py-4 lg:max-xl:nth-[3n+1]:line-y xl:nth-[4n+1]:line-y dark:hover:bg-white/2.5"
+              className="grid place-content-center transition-colors hover:bg-neutral-950/2.5 max-lg:nth-[2n+1]:line-y sm:px-2 sm:py-4 lg:max-xl:nth-[3n+1]:line-y xl:nth-[4n+1]:line-y dark:hover:bg-white/2.5"
             >
               <company.logo className="w-full max-w-80" aria-label={`${company.name} logo`} />
             </a>
@@ -784,12 +784,12 @@ function Sponsors() {
       <h2 className="mt-16 px-4 text-2xl/10 font-medium tracking-tight sm:px-2">Ambassadors</h2>
       <div className="relative mt-4">
         <div className="pointer-events-none absolute inset-0 z-10 grid grid-cols-2 gap-10 max-md:gap-5 lg:grid-cols-4 xl:grid-cols-6">
-          <div className="border-r border-gray-950/5 dark:border-white/10"></div>
-          <div className="border-l border-gray-950/5 lg:border-x dark:border-white/10"></div>
-          <div className="border-l border-gray-950/5 max-lg:hidden lg:border-x dark:border-white/10"></div>
-          <div className="border-l border-gray-950/5 max-xl:hidden xl:border-x dark:border-white/10"></div>
-          <div className="border-l border-gray-950/5 max-xl:hidden xl:border-x dark:border-white/10"></div>
-          <div className="border-l border-gray-950/5 max-lg:hidden dark:border-white/10"></div>
+          <div className="border-r border-neutral-950/5 dark:border-white/10"></div>
+          <div className="border-l border-neutral-950/5 lg:border-x dark:border-white/10"></div>
+          <div className="border-l border-neutral-950/5 max-lg:hidden lg:border-x dark:border-white/10"></div>
+          <div className="border-l border-neutral-950/5 max-xl:hidden xl:border-x dark:border-white/10"></div>
+          <div className="border-l border-neutral-950/5 max-xl:hidden xl:border-x dark:border-white/10"></div>
+          <div className="border-l border-neutral-950/5 max-lg:hidden dark:border-white/10"></div>
         </div>
         <ul className="grid grid-cols-2 gap-5 md:gap-10 lg:grid-cols-4 xl:grid-cols-6">
           {ambassadors.map((company, index) => (
@@ -798,7 +798,7 @@ function Sponsors() {
               href={company.url}
               target="_blank"
               rel="noopener sponsored"
-              className="grid place-content-center transition-colors hover:bg-gray-950/2.5 max-lg:nth-[2n+1]:line-y sm:px-2 sm:py-4 lg:max-xl:nth-[4n+1]:line-y xl:nth-[6n+1]:line-y dark:hover:bg-white/2.5"
+              className="grid place-content-center transition-colors hover:bg-neutral-950/2.5 max-lg:nth-[2n+1]:line-y sm:px-2 sm:py-4 lg:max-xl:nth-[4n+1]:line-y xl:nth-[6n+1]:line-y dark:hover:bg-white/2.5"
             >
               <company.logo className="w-full max-w-80" aria-label={`${company.name} logo`} />
             </a>
@@ -808,14 +808,14 @@ function Sponsors() {
       <h2 className="mt-16 px-4 text-2xl/10 font-medium tracking-tight sm:px-2">Supporters</h2>
       <div className="relative mt-4">
         <div className="pointer-events-none absolute inset-0 z-10 grid grid-cols-2 gap-10 max-md:gap-5 lg:grid-cols-6 xl:grid-cols-8">
-          <div className="border-r border-gray-950/5 dark:border-white/10"></div>
-          <div className="border-l border-gray-950/5 lg:border-x dark:border-white/10"></div>
-          <div className="border-l border-gray-950/5 max-lg:hidden lg:border-x dark:border-white/10"></div>
-          <div className="border-l border-gray-950/5 max-lg:hidden lg:border-x dark:border-white/10"></div>
-          <div className="border-l border-gray-950/5 max-lg:hidden lg:border-x dark:border-white/10"></div>
-          <div className="border-l border-gray-950/5 max-xl:hidden xl:border-x dark:border-white/10"></div>
-          <div className="border-l border-gray-950/5 max-xl:hidden xl:border-x dark:border-white/10"></div>
-          <div className="border-l border-gray-950/5 max-lg:hidden dark:border-white/10"></div>
+          <div className="border-r border-neutral-950/5 dark:border-white/10"></div>
+          <div className="border-l border-neutral-950/5 lg:border-x dark:border-white/10"></div>
+          <div className="border-l border-neutral-950/5 max-lg:hidden lg:border-x dark:border-white/10"></div>
+          <div className="border-l border-neutral-950/5 max-lg:hidden lg:border-x dark:border-white/10"></div>
+          <div className="border-l border-neutral-950/5 max-lg:hidden lg:border-x dark:border-white/10"></div>
+          <div className="border-l border-neutral-950/5 max-xl:hidden xl:border-x dark:border-white/10"></div>
+          <div className="border-l border-neutral-950/5 max-xl:hidden xl:border-x dark:border-white/10"></div>
+          <div className="border-l border-neutral-950/5 max-lg:hidden dark:border-white/10"></div>
         </div>
         <ul className="grid grid-cols-2 gap-5 md:gap-10 lg:grid-cols-6 xl:grid-cols-8">
           {supporters.map((company, index) => (
@@ -824,7 +824,7 @@ function Sponsors() {
               href={company.url}
               target="_blank"
               rel="noopener sponsored"
-              className="grid place-content-center transition-colors hover:bg-gray-950/2.5 max-lg:nth-[2n+1]:line-y sm:px-2 sm:py-4 lg:max-xl:nth-[6n+1]:line-y xl:nth-[8n+1]:line-y dark:hover:bg-white/2.5"
+              className="grid place-content-center transition-colors hover:bg-neutral-950/2.5 max-lg:nth-[2n+1]:line-y sm:px-2 sm:py-4 lg:max-xl:nth-[6n+1]:line-y xl:nth-[8n+1]:line-y dark:hover:bg-white/2.5"
             >
               <company.logo className="w-full max-w-80" aria-label={`${company.name} logo`} />
             </a>
diff --git a/src/app/typography.css b/src/app/typography.css
index 7952b0b03..6bae51a60 100644
--- a/src/app/typography.css
+++ b/src/app/typography.css
@@ -1,42 +1,42 @@
 .prose {
-  --prose-color: var(--color-gray-700);
-  --prose-heading-color: var(--color-gray-950);
-  --prose-strong-color: var(--color-gray-950);
-  --prose-link-color: var(--color-gray-950);
-  --prose-code-color: var(--color-gray-950);
-  --prose-marker-color: color-mix(in oklab, var(--color-gray-700) 25%, transparent);
+  --prose-color: var(--color-neutral-700);
+  --prose-heading-color: var(--color-neutral-950);
+  --prose-strong-color: var(--color-neutral-950);
+  --prose-link-color: var(--color-neutral-950);
+  --prose-code-color: var(--color-neutral-950);
+  --prose-marker-color: color-mix(in oklab, var(--color-neutral-700) 25%, transparent);
   --prose-link-underline-color: var(--color-sky-400);
-  --prose-th-borders: var(--color-gray-300);
-  --prose-td-borders: var(--color-gray-200);
-  --prose-hr-color: color-mix(in oklab, var(--color-gray-950) 5%, transparent);
-  --prose-blockquote-border-color: var(--color-gray-300);
+  --prose-th-borders: var(--color-neutral-300);
+  --prose-td-borders: var(--color-neutral-200);
+  --prose-hr-color: color-mix(in oklab, var(--color-neutral-950) 5%, transparent);
+  --prose-blockquote-border-color: var(--color-neutral-300);
 
   &:where(.dark, .dark *) {
-    --prose-color: var(--color-gray-300);
+    --prose-color: var(--color-neutral-300);
     --prose-heading-color: var(--color-white);
     --prose-strong-color: var(--color-white);
     --prose-link-color: var(--color-white);
     --prose-code-color: var(--color-white);
-    --prose-marker-color: color-mix(in oklab, var(--color-gray-300) 35%, transparent);
+    --prose-marker-color: color-mix(in oklab, var(--color-neutral-300) 35%, transparent);
     --prose-link-underline-color: var(--color-sky-400);
-    --prose-th-borders: var(--color-gray-600);
-    --prose-td-borders: var(--color-gray-700);
+    --prose-th-borders: var(--color-neutral-600);
+    --prose-td-borders: var(--color-neutral-700);
     --prose-hr-color: color-mix(in oklab, var(--color-white) 10%, transparent);
-    --prose-blockquote-border-color: var(--color-gray-600);
+    --prose-blockquote-border-color: var(--color-neutral-600);
   }
   @media (prefers-color-scheme: dark) {
     &:where(.system, .system *) {
-      --prose-color: var(--color-gray-300);
+      --prose-color: var(--color-neutral-300);
       --prose-heading-color: var(--color-white);
       --prose-strong-color: var(--color-white);
       --prose-link-color: var(--color-white);
       --prose-code-color: var(--color-white);
-      --prose-marker-color: color-mix(in oklab, var(--color-gray-300) 35%, transparent);
+      --prose-marker-color: color-mix(in oklab, var(--color-neutral-300) 35%, transparent);
       --prose-link-underline-color: var(--color-sky-400);
-      --prose-th-borders: var(--color-gray-600);
-      --prose-td-borders: var(--color-gray-700);
+      --prose-th-borders: var(--color-neutral-600);
+      --prose-td-borders: var(--color-neutral-700);
       --prose-hr-color: color-mix(in oklab, var(--color-white) 10%, transparent);
-      --prose-blockquote-border-color: var(--color-gray-600);
+      --prose-blockquote-border-color: var(--color-neutral-600);
     }
   }
 
diff --git a/src/components/api-table.tsx b/src/components/api-table.tsx
index 220f63bad..13e116725 100644
--- a/src/components/api-table.tsx
+++ b/src/components/api-table.tsx
@@ -17,7 +17,7 @@ function highlight(input: string) {
         } else if (part?.startsWith("/*") && part.endsWith("*/")) {
           // Comments
           return (
-            <span key={i} className="text-gray-400 italic">
+            <span key={i} className="text-neutral-400 italic">
               {part}
             </span>
           );
@@ -70,14 +70,14 @@ export function ApiTable({ rows }: { rows: [string, string][] }) {
   return (
     <div id="quick-reference" className="not-prose relative isolate scroll-mt-16">
       <div className="w-full overflow-x-auto whitespace-nowrap">
-        <table className="grid w-full grid-cols-[auto_auto] border-b border-gray-900/10 dark:border-white/10">
+        <table className="grid w-full grid-cols-[auto_auto] border-b border-neutral-900/10 dark:border-white/10">
           <thead className="col-span-2 grid grid-cols-subgrid">
             <tr className="col-span-2 grid grid-cols-subgrid">
-              <th className="px-2 py-2.5 text-left text-sm/7 font-semibold text-gray-950 dark:text-white">Class</th>
-              <th className="px-2 py-2.5 text-left text-sm/7 font-semibold text-gray-950 dark:text-white">Styles</th>
+              <th className="px-2 py-2.5 text-left text-sm/7 font-semibold text-neutral-950 dark:text-white">Class</th>
+              <th className="px-2 py-2.5 text-left text-sm/7 font-semibold text-neutral-950 dark:text-white">Styles</th>
             </tr>
           </thead>
-          <tbody className="col-span-2 grid grid-cols-subgrid border-t border-gray-900/10 dark:border-white/10">
+          <tbody className="col-span-2 grid grid-cols-subgrid border-t border-neutral-900/10 dark:border-white/10">
             {aboveTheFold.map(([utility, styles], i) => (
               <ApiTableRow key={i} utility={utility} styles={styles} />
             ))}
@@ -94,12 +94,12 @@ export function ApiTable({ rows }: { rows: [string, string][] }) {
       {isExpandable && (
         <div
           className={clsx(
-            "z-10 flex justify-center bg-linear-to-t from-white to-white/40 text-gray-950 hover:text-gray-950/70 dark:from-gray-950 dark:to-gray-950/40 dark:text-white dark:hover:text-white/70",
+            "z-10 flex justify-center bg-linear-to-t from-white to-white/40 text-neutral-950 hover:text-neutral-950/70 dark:from-neutral-950 dark:to-neutral-950/40 dark:text-white dark:hover:text-white/70",
             isExpanded ? "sticky bottom-0 h-12 to-white/80 py-1" : "absolute bottom-0 h-26 w-full translate-y-1/2 py-8",
           )}
         >
           <button
-            className="rounded-full border border-gray-950 bg-gray-950 px-3 py-1 font-mono text-xs/7 font-medium tracking-widest text-white uppercase dark:border-gray-700 dark:bg-gray-700"
+            className="rounded-full border border-neutral-950 bg-neutral-950 px-3 py-1 font-mono text-xs/7 font-medium tracking-widest text-white uppercase dark:border-neutral-700 dark:bg-neutral-700"
             onClick={() => setIsExpanded(!isExpanded)}
           >
             {isExpanded ? "Show less" : "Show more"}
@@ -122,7 +122,7 @@ function ApiTableRow({
   return (
     <tr
       className={clsx(
-        "col-span-2 grid grid-cols-subgrid not-last:border-b not-last:border-gray-950/5 dark:not-last:border-white/5",
+        "col-span-2 grid grid-cols-subgrid not-last:border-b not-last:border-neutral-950/5 dark:not-last:border-white/5",
         className,
       )}
     >
diff --git a/src/components/breadcrumb.tsx b/src/components/breadcrumb.tsx
index 6aaf210dd..ee5e7d5db 100644
--- a/src/components/breadcrumb.tsx
+++ b/src/components/breadcrumb.tsx
@@ -22,16 +22,16 @@ export function Breadcrumb({ section, title }: BreadcrumbProps) {
     // See: https://github.com/vercel/next.js/discussions/45996
     <ol className="sticky ml-4 flex min-w-0 items-center gap-2 text-sm/6 whitespace-nowrap">
       <li className="flex items-center gap-2">
-        <span className="text-gray-500 dark:text-gray-400">{section}</span>
+        <span className="text-neutral-500 dark:text-neutral-400">{section}</span>
         {CaretRight}
       </li>
-      <li className="truncate text-gray-950 dark:text-white">{title}</li>
+      <li className="truncate text-neutral-950 dark:text-white">{title}</li>
     </ol>
   );
 }
 
 let CaretRight = (
-  <svg viewBox="0 0 16 16" className="size-4 fill-gray-950 dark:fill-gray-500">
+  <svg viewBox="0 0 16 16" className="size-4 fill-neutral-950 dark:fill-neutral-500">
     <path
       fillRule="evenodd"
       d="M6.22 4.22a.75.75 0 0 1 1.06 0l3.25 3.25a.75.75 0 0 1 0 1.06l-3.25 3.25a.75.75 0 0 1-1.06-1.06L8.94 8 6.22 5.28a.75.75 0 0 1 0-1.06Z"
diff --git a/src/components/code-example.tsx b/src/components/code-example.tsx
index 3070065a6..7c2e62806 100644
--- a/src/components/code-example.tsx
+++ b/src/components/code-example.tsx
@@ -74,7 +74,7 @@ export async function CodeExample({
 
 export function CodeExampleWrapper({ className, children }: { className?: string; children: React.ReactNode }) {
   return (
-    <div className="rounded-xl bg-gray-950 in-data-stack:mt-0 in-data-stack:rounded-none in-[figure]:-mx-1 in-[figure]:-mb-1 in-data-stack:[:first-child>&]:rounded-t-xl in-data-stack:[:first-child>&]:*:rounded-t-xl in-data-stack:[:last-child>&]:rounded-b-xl in-data-stack:[:last-child>&]:*:rounded-b-xl">
+    <div className="rounded-xl bg-neutral-950 in-data-stack:mt-0 in-data-stack:rounded-none in-[figure]:-mx-1 in-[figure]:-mb-1 in-data-stack:[:first-child>&]:rounded-t-xl in-data-stack:[:first-child>&]:*:rounded-t-xl in-data-stack:[:last-child>&]:rounded-b-xl in-data-stack:[:last-child>&]:*:rounded-b-xl">
       <div
         className={clsx(
           "rounded-xl p-1 text-sm scheme-dark in-data-stack:rounded-none dark:bg-white/5 dark:inset-ring dark:inset-ring-white/10 in-data-stack:dark:inset-ring-0",
@@ -109,7 +109,7 @@ export function CodeExampleGroup({
   return (
     <div>
       <TabGroup className="not-prose">
-        <div className="rounded-xl bg-gray-950 in-[figure]:-mx-1 in-[figure]:-mb-1">
+        <div className="rounded-xl bg-neutral-950 in-[figure]:-mx-1 in-[figure]:-mb-1">
           <div
             className={clsx(
               "rounded-xl p-1 text-sm scheme-dark dark:bg-white/5 dark:inset-ring dark:inset-ring-white/10",
@@ -206,7 +206,7 @@ export function RawHighlightedCode({
 }
 
 function CodeExampleFilename({ filename }: { filename: string }) {
-  return <div className="px-3 pt-0.5 pb-1.5 text-xs/5 text-gray-400 dark:text-white/50">{filename}</div>;
+  return <div className="px-3 pt-0.5 pb-1.5 text-xs/5 text-neutral-400 dark:text-white/50">{filename}</div>;
 }
 
 const highlighter = await createHighlighter({
diff --git a/src/components/color-palette.tsx b/src/components/color-palette.tsx
index 72606b1e1..785aab90d 100644
--- a/src/components/color-palette.tsx
+++ b/src/components/color-palette.tsx
@@ -37,12 +37,12 @@ export function ColorPalette() {
         marginTop={56}
         offsetY={-4}
         padding={8}
-        className="pointer-events-none absolute top-0 left-0 z-10 rounded-full border border-gray-950 bg-gray-950/90 py-0.5 pr-2 pb-1 pl-3 text-center font-mono text-xs/6 font-medium whitespace-nowrap text-white opacity-0 inset-ring inset-ring-white/10 will-change-[transform,opacity] data-show:opacity-100 data-show:transition-opacity data-show:delay-100 data-show:duration-200"
+        className="pointer-events-none absolute top-0 left-0 z-10 rounded-full border border-neutral-950 bg-neutral-950/90 py-0.5 pr-2 pb-1 pl-3 text-center font-mono text-xs/6 font-medium whitespace-nowrap text-white opacity-0 inset-ring inset-ring-white/10 will-change-[transform,opacity] data-show:opacity-100 data-show:transition-opacity data-show:delay-100 data-show:duration-200"
       />
 
       <div className="not-prose grid grid-cols-[auto_minmax(0,_1fr)] items-center gap-4">
-        <div className="sticky top-28 z-9 bg-white lg:top-14 dark:bg-gray-950">&nbsp;</div>
-        <div className="sticky top-28 z-9 col-start-2 grid grid-cols-11 justify-items-center gap-1.5 bg-white font-medium text-gray-950 *:rotate-180 *:[writing-mode:vertical-lr] max-sm:py-1 sm:gap-4 sm:*:rotate-0 sm:*:[writing-mode:horizontal-tb] lg:top-14 dark:bg-gray-950 dark:text-white">
+        <div className="sticky top-28 z-9 bg-white lg:top-14 dark:bg-neutral-950">&nbsp;</div>
+        <div className="sticky top-28 z-9 col-start-2 grid grid-cols-11 justify-items-center gap-1.5 bg-white font-medium text-neutral-950 *:rotate-180 *:[writing-mode:vertical-lr] max-sm:py-1 sm:gap-4 sm:*:rotate-0 sm:*:[writing-mode:horizontal-tb] lg:top-14 dark:bg-neutral-950 dark:text-white">
           <div>50</div>
           <div>100</div>
           <div>200</div>
@@ -57,7 +57,7 @@ export function ColorPalette() {
         </div>
         {Object.entries(colors).map(([key, shades]) => (
           <React.Fragment key={key}>
-            <p className="font-medium text-gray-950 capitalize sm:pr-12 dark:text-white">{key}</p>
+            <p className="font-medium text-neutral-950 capitalize sm:pr-12 dark:text-white">{key}</p>
             <div className="grid grid-cols-11 gap-1.5 sm:gap-4">
               {Object.keys(shades).map((shade, i) => (
                 <Color key={i} name={key} shade={shade} value={shades[shade]} />
@@ -66,7 +66,7 @@ export function ColorPalette() {
           </React.Fragment>
         ))}
 
-        <div className="pt-2 text-center text-gray-500 italic max-sm:hidden sm:col-span-2 md:col-span-1 md:col-start-2 dark:text-gray-400">
+        <div className="pt-2 text-center text-neutral-500 italic max-sm:hidden sm:col-span-2 md:col-span-1 md:col-start-2 dark:text-neutral-400">
           Click to copy the OKLCH value or shift+click to copy the nearest hex value.
         </div>
       </div>
diff --git a/src/components/cta.tsx b/src/components/cta.tsx
index 6db8932c3..88360fad9 100644
--- a/src/components/cta.tsx
+++ b/src/components/cta.tsx
@@ -2,17 +2,17 @@ import Link from "next/link";
 
 export function Cta({ children, href, label }: { children: React.ReactNode; href?: string; label?: string }) {
   return (
-    <div className="grid grid-cols-[auto_1fr_auto] gap-3 gap-y-6 rounded-xl p-6 ring-1 ring-gray-950/10 dark:ring-white/10">
+    <div className="grid grid-cols-[auto_1fr_auto] gap-3 gap-y-6 rounded-xl p-6 ring-1 ring-neutral-950/10 dark:ring-white/10">
       <div>
         <svg width={22} height={28} fill="none" xmlns="http://www.w3.org/2000/svg">
-          <circle className="fill-gray-950/5 dark:fill-white/5" cx={11} cy={14} r={11} />
-          <circle className="stroke-gray-950/25 dark:stroke-white/25" cx={11} cy={14} r="10.5" />
+          <circle className="fill-neutral-950/5 dark:fill-white/5" cx={11} cy={14} r={11} />
+          <circle className="stroke-neutral-950/25 dark:stroke-white/25" cx={11} cy={14} r="10.5" />
           <path
-            className="stroke-gray-950 dark:stroke-white"
+            className="stroke-neutral-950 dark:stroke-white"
             d="m12.5 19-1.011.337a1 1 0 0 1-1.253-1.3l1.528-4.074a1 1 0 0 0-1.253-1.3L9.5 13"
             strokeLinecap="round"
           />
-          <path className="stroke-gray-950 dark:stroke-white" d="M12 9a.5.5 0 1 1-1 0 .5.5 0 0 1 1 0Z" />
+          <path className="stroke-neutral-950 dark:stroke-white" d="M12 9a.5.5 0 1 1-1 0 .5.5 0 0 1 1 0Z" />
         </svg>
       </div>
       <div className="col-span-2 xl:col-span-1">
@@ -22,7 +22,7 @@ export function Cta({ children, href, label }: { children: React.ReactNode; href
         <div className="col-span-full place-self-center xl:col-span-1">
           <Link
             href={href}
-            className="rounded-full bg-gray-950/5 px-4 py-2 text-sm/7 font-semibold text-gray-700 dark:bg-white/10 dark:text-white/75"
+            className="rounded-full bg-neutral-950/5 px-4 py-2 text-sm/7 font-semibold text-neutral-700 dark:bg-white/10 dark:text-white/75"
           >
             {label}
           </Link>
diff --git a/src/components/docs-sidebar.tsx b/src/components/docs-sidebar.tsx
index 70859c618..ceb7d3176 100644
--- a/src/components/docs-sidebar.tsx
+++ b/src/components/docs-sidebar.tsx
@@ -11,12 +11,12 @@ export function TopNavLink(props: { href: string } & React.ComponentPropsWithout
     <Component
       className={clsx(
         "group",
-        "inline-flex items-center gap-3 text-base/8 text-gray-600 sm:text-sm/7 dark:text-gray-300",
-        "**:data-outline:stroke-gray-400 dark:**:data-outline:stroke-gray-500 **:[svg]:first:size-5 **:[svg]:first:sm:size-4",
-        "hover:text-gray-950 hover:**:data-highlight:fill-gray-300 hover:**:data-outline:stroke-gray-950",
-        "dark:hover:text-white dark:hover:**:data-highlight:fill-gray-600 dark:hover:**:data-outline:stroke-white",
-        "aria-[current]:font-semibold aria-[current]:text-gray-950 aria-[current]:**:data-highlight:fill-gray-300 aria-[current]:**:data-outline:stroke-gray-950",
-        "dark:aria-[current]:text-white dark:aria-[current]:**:data-highlight:fill-gray-600 dark:aria-[current]:**:data-outline:stroke-white",
+        "inline-flex items-center gap-3 text-base/8 text-neutral-600 sm:text-sm/7 dark:text-neutral-300",
+        "**:data-outline:stroke-neutral-400 dark:**:data-outline:stroke-neutral-500 **:[svg]:first:size-5 **:[svg]:first:sm:size-4",
+        "hover:text-neutral-950 hover:**:data-highlight:fill-neutral-300 hover:**:data-outline:stroke-neutral-950",
+        "dark:hover:text-white dark:hover:**:data-highlight:fill-neutral-600 dark:hover:**:data-outline:stroke-white",
+        "aria-[current]:font-semibold aria-[current]:text-neutral-950 aria-[current]:**:data-highlight:fill-neutral-300 aria-[current]:**:data-outline:stroke-neutral-950",
+        "dark:aria-[current]:text-white dark:aria-[current]:**:data-highlight:fill-neutral-600 dark:aria-[current]:**:data-outline:stroke-white",
       )}
       {...props}
     />
diff --git a/src/components/example.tsx b/src/components/example.tsx
index 9d3e541f6..6d05dc975 100644
--- a/src/components/example.tsx
+++ b/src/components/example.tsx
@@ -33,7 +33,7 @@ export function Example({
       <div
         className={clsx(
           className,
-          "not-prose overflow-auto rounded-lg bg-white outline outline-white/5 dark:bg-gray-950/50",
+          "not-prose overflow-auto rounded-lg bg-white outline outline-white/5 dark:bg-neutral-950/50",
           padding && "p-8",
         )}
       >
@@ -52,7 +52,7 @@ export function Example({
         style={{ marginRight: useTransform(x, (x) => -x) }}
         className={clsx(
           padding && "p-8",
-          "@container relative overflow-auto rounded-lg bg-white outline outline-white/5 dark:bg-gray-950/50 dark:inset-ring dark:inset-ring-white/5",
+          "@container relative overflow-auto rounded-lg bg-white outline outline-white/5 dark:bg-neutral-950/50 dark:inset-ring dark:inset-ring-white/5",
           // Add layer on top of example while dragging to prevent issues with iframes
           "group-data-dragging:before:absolute group-data-dragging:before:inset-0",
         )}
diff --git a/src/components/figure.tsx b/src/components/figure.tsx
index 60cdad938..2a4117236 100644
--- a/src/components/figure.tsx
+++ b/src/components/figure.tsx
@@ -48,7 +48,7 @@ export function Figure({
         <figure
           className={clsx(
             className,
-            "flex flex-col gap-1 rounded-xl bg-gray-950/5 p-1 inset-ring inset-ring-gray-950/5 dark:bg-white/10 dark:inset-ring-white/10",
+            "flex flex-col gap-1 rounded-xl bg-neutral-950/5 p-1 inset-ring inset-ring-neutral-950/5 dark:bg-white/10 dark:inset-ring-white/10",
           )}
         >
           {children}
diff --git a/src/components/footer.tsx b/src/components/footer.tsx
index 30fb91c28..c4b3ffd2a 100644
--- a/src/components/footer.tsx
+++ b/src/components/footer.tsx
@@ -4,7 +4,7 @@ import ThemeToggle from "./theme-toggle";
 
 export function FooterSitemap({ className }: { className?: string }) {
   return (
-    <footer className="bg-white text-sm/loose text-gray-950 dark:bg-gray-950 dark:text-white">
+    <footer className="bg-white text-sm/loose text-neutral-950 dark:bg-neutral-950 dark:text-white">
       <div className={clsx("flex gap-4 p-4 md:hidden", className)}>
         <div className="flex flex-1 flex-col gap-10">
           <div>
@@ -29,16 +29,16 @@ export function FooterSitemap({ className }: { className?: string }) {
           className,
         )}
       >
-        <div className="border-x border-b border-gray-950/5 py-10 pl-2 not-md:border-0 md:border-b-0 dark:border-white/10">
+        <div className="border-x border-b border-neutral-950/5 py-10 pl-2 not-md:border-0 md:border-b-0 dark:border-white/10">
           <TailwindCSS />
         </div>
-        <div className="border-x border-b border-gray-950/5 py-10 pl-2 not-md:border-0 md:border-b-0 dark:border-white/10">
+        <div className="border-x border-b border-neutral-950/5 py-10 pl-2 not-md:border-0 md:border-b-0 dark:border-white/10">
           <TailwindPlus />
         </div>
-        <div className="border-x border-b border-gray-950/5 py-10 pl-2 not-md:border-0 sm:border-b-0 dark:border-white/10">
+        <div className="border-x border-b border-neutral-950/5 py-10 pl-2 not-md:border-0 sm:border-b-0 dark:border-white/10">
           <Resources />
         </div>
-        <div className="border-x border-gray-950/5 py-10 pl-2 not-md:border-0 dark:border-white/10">
+        <div className="border-x border-neutral-950/5 py-10 pl-2 not-md:border-0 dark:border-white/10">
           <Community />
         </div>
       </div>
@@ -56,7 +56,7 @@ export function FooterMeta({ className }: { className?: string }) {
         )}
       >
         <ThemeToggle />
-        <div className="flex flex-col gap-4 text-sm/6 text-gray-700 sm:flex-row sm:gap-2 sm:pr-4 dark:text-gray-400">
+        <div className="flex flex-col gap-4 text-sm/6 text-neutral-700 sm:flex-row sm:gap-2 sm:pr-4 dark:text-neutral-400">
           <span>Copyright ©&nbsp;2025&nbsp;Tailwind Labs Inc.</span>
           <span className="max-sm:hidden">&middot;</span>
           <Link href="/brand" className="hover:underline">
diff --git a/src/components/grid-container.tsx b/src/components/grid-container.tsx
index fd338d049..70b002dd2 100644
--- a/src/components/grid-container.tsx
+++ b/src/components/grid-container.tsx
@@ -31,9 +31,9 @@ export default function GridContainer({
       className={clsx(
         className,
         "relative",
-        "before:absolute before:top-0 before:h-px before:w-[200vw] before:bg-gray-950/5 dark:before:bg-white/10",
+        "before:absolute before:top-0 before:h-px before:w-[200vw] before:bg-neutral-950/5 dark:before:bg-white/10",
         topDirection,
-        "after:absolute after:bottom-0 after:h-px after:w-[200vw] after:bg-gray-950/5 dark:after:bg-white/10",
+        "after:absolute after:bottom-0 after:h-px after:w-[200vw] after:bg-neutral-950/5 dark:after:bg-white/10",
         bottomDirection,
       )}
     >
diff --git a/src/components/header.tsx b/src/components/header.tsx
index 52126d2bb..f5404f261 100644
--- a/src/components/header.tsx
+++ b/src/components/header.tsx
@@ -51,18 +51,18 @@ function VersionPicker() {
   return (
     <Menu>
       <MenuButton
-        className="flex items-center gap-0.5 rounded-2xl bg-gray-950/5 py-0.5 pr-1.5 pl-2.5 text-xs/5 font-medium text-gray-950 tabular-nums hover:bg-gray-950/7.5 data-active:bg-gray-950/7.5 dark:bg-white/10 dark:text-white dark:hover:bg-white/12.5 dark:data-active:bg-white/12.5"
+        className="flex items-center gap-0.5 rounded-2xl bg-neutral-950/5 py-0.5 pr-1.5 pl-2.5 text-xs/5 font-medium text-neutral-950 tabular-nums hover:bg-neutral-950/7.5 data-active:bg-neutral-950/7.5 dark:bg-white/10 dark:text-white dark:hover:bg-white/12.5 dark:data-active:bg-white/12.5"
         aria-label="Select version of library"
       >
         v4.1
-        <ChevronDownIcon className="size-4 fill-gray-400" />
+        <ChevronDownIcon className="size-4 fill-neutral-400" />
       </MenuButton>
       <MenuItems
         anchor="bottom start"
-        className="mt-2 w-28 rounded-xl bg-white p-1 py-1 text-xs/7 font-medium text-gray-950 tabular-nums shadow-sm ring ring-gray-950/5 [--anchor-offset:calc(var(--spacing)*-1)] dark:bg-gray-950 dark:text-white dark:ring-white/10"
+        className="mt-2 w-28 rounded-xl bg-white p-1 py-1 text-xs/7 font-medium text-neutral-950 tabular-nums shadow-sm ring ring-neutral-950/5 [--anchor-offset:calc(var(--spacing)*-1)] dark:bg-neutral-950 dark:text-white dark:ring-white/10"
       >
         <MenuItem disabled>
-          <div className="flex items-center justify-between gap-2 rounded-lg px-2.5 data-active:bg-gray-950/5 dark:data-active:bg-white/10">
+          <div className="flex items-center justify-between gap-2 rounded-lg px-2.5 data-active:bg-neutral-950/5 dark:data-active:bg-white/10">
             v4.1
             <CheckIcon className="size-4" />
           </div>
@@ -70,7 +70,7 @@ function VersionPicker() {
         <MenuItem>
           <a
             href="https://v3.tailwindcss.com"
-            className="flex items-center justify-between gap-2 rounded-lg px-2.5 data-active:bg-gray-950/5 dark:data-active:bg-white/10"
+            className="flex items-center justify-between gap-2 rounded-lg px-2.5 data-active:bg-neutral-950/5 dark:data-active:bg-white/10"
           >
             v3.4.17
           </a>
@@ -78,7 +78,7 @@ function VersionPicker() {
         <MenuItem>
           <a
             href="https://v2.tailwindcss.com"
-            className="flex items-center justify-between gap-2 rounded-lg px-2.5 data-active:bg-gray-950/5 dark:data-active:bg-white/10"
+            className="flex items-center justify-between gap-2 rounded-lg px-2.5 data-active:bg-neutral-950/5 dark:data-active:bg-white/10"
           >
             v2.2.19
           </a>
@@ -86,7 +86,7 @@ function VersionPicker() {
         <MenuItem>
           <a
             href="https://v1.tailwindcss.com"
-            className="flex items-center justify-between gap-2 rounded-lg px-2.5 data-active:bg-gray-950/5 dark:data-active:bg-white/10"
+            className="flex items-center justify-between gap-2 rounded-lg px-2.5 data-active:bg-neutral-950/5 dark:data-active:bg-white/10"
           >
             v1.9.6
           </a>
@@ -94,7 +94,7 @@ function VersionPicker() {
         <MenuItem>
           <a
             href="https://tailwindcss-v0.netlify.app"
-            className="flex items-center justify-between gap-2 rounded-lg px-2.5 data-active:bg-gray-950/5 dark:data-active:bg-white/10"
+            className="flex items-center justify-between gap-2 rounded-lg px-2.5 data-active:bg-neutral-950/5 dark:data-active:bg-white/10"
           >
             v0.7.4
           </a>
@@ -109,7 +109,7 @@ export function Header(props: React.PropsWithChildren) {
   let router = useRouter();
 
   return (
-    <div className="bg-white dark:bg-gray-950">
+    <div className="bg-white dark:bg-neutral-950">
       <div className="flex h-14 items-center justify-between gap-8 px-4 sm:px-6">
         <div className="flex items-center gap-4">
           <Link
@@ -126,11 +126,11 @@ export function Header(props: React.PropsWithChildren) {
           <VersionPicker />
         </div>
         <div className="flex items-center gap-6 max-md:hidden">
-          <SearchButton className="inline-flex items-center gap-1 rounded-full bg-gray-950/2 px-2 py-1 inset-ring inset-ring-gray-950/8 dark:bg-white/5 dark:inset-ring-white/2">
+          <SearchButton className="inline-flex items-center gap-1 rounded-full bg-neutral-950/2 px-2 py-1 inset-ring inset-ring-neutral-950/8 dark:bg-white/5 dark:inset-ring-white/2">
             <svg
               xmlns="http://www.w3.org/2000/svg"
               viewBox="0 0 16 16"
-              className="-ml-0.5 size-4 fill-gray-600 dark:fill-gray-500"
+              className="-ml-0.5 size-4 fill-neutral-600 dark:fill-neutral-500"
             >
               <path
                 fillRule="evenodd"
@@ -139,21 +139,21 @@ export function Header(props: React.PropsWithChildren) {
               />
             </svg>
 
-            <kbd className="hidden font-sans text-xs/4 text-gray-500 dark:text-gray-400 [.os-macos_&]:block">⌘K</kbd>
-            <kbd className="hidden font-sans text-xs/4 text-gray-500 not-[.os-macos_&]:block dark:text-gray-400">
+            <kbd className="hidden font-sans text-xs/4 text-neutral-500 dark:text-neutral-400 [.os-macos_&]:block">⌘K</kbd>
+            <kbd className="hidden font-sans text-xs/4 text-neutral-500 not-[.os-macos_&]:block dark:text-neutral-400">
               Ctrl&nbsp;K
             </kbd>
           </SearchButton>
-          <Link href="/docs" className="text-sm/6 text-gray-950 dark:text-white">
+          <Link href="/docs" className="text-sm/6 text-neutral-950 dark:text-white">
             Docs
           </Link>
-          <Link href="/blog" className="text-sm/6 text-gray-950 dark:text-white">
+          <Link href="/blog" className="text-sm/6 text-neutral-950 dark:text-white">
             Blog
           </Link>
-          <Link href="/showcase" className="text-sm/6 text-gray-950 dark:text-white">
+          <Link href="/showcase" className="text-sm/6 text-neutral-950 dark:text-white">
             Showcase
           </Link>
-          <Link href="/sponsor" className="text-sm/6 text-gray-950 dark:text-white">
+          <Link href="/sponsor" className="text-sm/6 text-neutral-950 dark:text-white">
             Sponsor
           </Link>
           <a href="/plus?ref=top" className="group relative px-1.5 text-sm/6 text-sky-800 dark:text-sky-300">
@@ -194,7 +194,7 @@ export function Header(props: React.PropsWithChildren) {
           </a>
 
           <Link href="https://github.com/tailwindlabs/tailwindcss" aria-label="GitHub repository">
-            <GitHubLogo className="size-5 fill-black/40 dark:fill-gray-400" />
+            <GitHubLogo className="size-5 fill-black/40 dark:fill-neutral-400" />
           </Link>
         </div>
         <div className="flex items-center gap-2.5 md:hidden">
@@ -217,7 +217,7 @@ export function Header(props: React.PropsWithChildren) {
           <Dialog
             open={navIsOpen}
             onClose={() => setNavIsOpen(false)}
-            className="fixed inset-0 bg-white focus:outline-none md:hidden dark:bg-gray-950"
+            className="fixed inset-0 bg-white focus:outline-none md:hidden dark:bg-neutral-950"
           >
             <DialogPanel className="size-full overflow-y-auto">
               <div className="flex h-14 items-center justify-between px-4 py-4 sm:px-6">
@@ -231,37 +231,37 @@ export function Header(props: React.PropsWithChildren) {
               <div className="grid grid-cols-1 gap-1 px-1 pb-1 sm:px-3 sm:pb-3">
                 <Link
                   href="/docs"
-                  className="rounded-lg px-3 py-2 text-xl/9 font-medium text-gray-950 data-active:bg-gray-950/5 dark:text-white dark:hover:bg-white/10"
+                  className="rounded-lg px-3 py-2 text-xl/9 font-medium text-neutral-950 data-active:bg-neutral-950/5 dark:text-white dark:hover:bg-white/10"
                 >
                   Docs
                 </Link>
                 <a
                   href="/plus/?ref=top"
-                  className="rounded-lg px-3 py-2 text-xl/9 font-medium text-gray-950 data-active:bg-gray-950/5 dark:text-white dark:hover:bg-white/10"
+                  className="rounded-lg px-3 py-2 text-xl/9 font-medium text-neutral-950 data-active:bg-neutral-950/5 dark:text-white dark:hover:bg-white/10"
                 >
                   Plus
                 </a>
                 <Link
                   href="/blog"
-                  className="rounded-lg px-3 py-2 text-xl/9 font-medium text-gray-950 data-active:bg-gray-950/5 dark:text-white dark:hover:bg-white/10"
+                  className="rounded-lg px-3 py-2 text-xl/9 font-medium text-neutral-950 data-active:bg-neutral-950/5 dark:text-white dark:hover:bg-white/10"
                 >
                   Blog
                 </Link>
                 <Link
                   href="/showcase"
-                  className="rounded-lg px-3 py-2 text-xl/9 font-medium text-gray-950 data-active:bg-gray-950/5 dark:text-white dark:hover:bg-white/10"
+                  className="rounded-lg px-3 py-2 text-xl/9 font-medium text-neutral-950 data-active:bg-neutral-950/5 dark:text-white dark:hover:bg-white/10"
                 >
                   Showcase
                 </Link>
                 <Link
                   href="/sponsor"
-                  className="rounded-lg px-3 py-2 text-xl/9 font-medium text-gray-950 data-active:bg-gray-950/5 dark:text-white dark:hover:bg-white/10"
+                  className="rounded-lg px-3 py-2 text-xl/9 font-medium text-neutral-950 data-active:bg-neutral-950/5 dark:text-white dark:hover:bg-white/10"
                 >
                   Sponsor
                 </Link>
                 <Link
                   href="https://github.com/tailwindlabs/tailwindcss"
-                  className="rounded-lg px-3 py-2 text-xl/9 font-medium text-gray-950 data-active:bg-gray-950/5 dark:text-white dark:hover:bg-white/10"
+                  className="rounded-lg px-3 py-2 text-xl/9 font-medium text-neutral-950 data-active:bg-neutral-950/5 dark:text-white dark:hover:bg-white/10"
                 >
                   GitHub
                 </Link>
diff --git a/src/components/home/bento.tsx b/src/components/home/bento.tsx
index 237cbcc88..8c255c555 100644
--- a/src/components/home/bento.tsx
+++ b/src/components/home/bento.tsx
@@ -5,7 +5,7 @@ export function BentoItem({ children, className }: { children: ReactNode; classN
   return (
     <div
       className={clsx(
-        "@container isolate flex flex-col gap-2 overflow-hidden rounded-2xl bg-white p-2 outline outline-gray-950/5 dark:bg-gray-950 dark:outline-white/10",
+        "@container isolate flex flex-col gap-2 overflow-hidden rounded-2xl bg-white p-2 outline outline-neutral-950/5 dark:bg-neutral-950 dark:outline-white/10",
         className,
       )}
     >
@@ -31,12 +31,12 @@ export function BentoIcon({ children }: { children?: ReactNode }) {
 }
 
 export function BentoTitle({ children }: { children: ReactNode }) {
-  return <span className="text-xl/10 font-medium text-gray-950 @md:text-2xl/10 dark:text-white">{children}</span>;
+  return <span className="text-xl/10 font-medium text-neutral-950 @md:text-2xl/10 dark:text-white">{children}</span>;
 }
 
 export function BentoDescription({ children }: { children: ReactNode }) {
   // TODO: Maybe not hardcode the max-width here
-  return <p className="max-w-xl text-sm/7 text-gray-600 dark:text-gray-400">{children}</p>;
+  return <p className="max-w-xl text-sm/7 text-neutral-600 dark:text-neutral-400">{children}</p>;
 }
 
 export function BentoBody({
@@ -54,9 +54,9 @@ export function BentoBody({
         className,
         padding && "p-4 sm:p-8",
         "relative overflow-hidden",
-        "rounded-lg bg-gray-950/[2.5%]",
-        "after:pointer-events-none after:absolute after:inset-0 after:rounded-lg after:inset-ring after:inset-ring-gray-950/5 dark:after:inset-ring-white/10",
-        "bg-[image:radial-gradient(var(--pattern-fg)_1px,_transparent_0)] bg-[size:10px_10px] bg-fixed [--pattern-fg:var(--color-gray-950)]/5 dark:[--pattern-fg:var(--color-white)]/10",
+        "rounded-lg bg-neutral-950/[2.5%]",
+        "after:pointer-events-none after:absolute after:inset-0 after:rounded-lg after:inset-ring after:inset-ring-neutral-950/5 dark:after:inset-ring-white/10",
+        "bg-[image:radial-gradient(var(--pattern-fg)_1px,_transparent_0)] bg-[size:10px_10px] bg-fixed [--pattern-fg:var(--color-neutral-950)]/5 dark:[--pattern-fg:var(--color-white)]/10",
       )}
     >
       {children}
diff --git a/src/components/home/build-anything-section.tsx b/src/components/home/build-anything-section.tsx
index cfce20000..2c44c45d7 100644
--- a/src/components/home/build-anything-section.tsx
+++ b/src/components/home/build-anything-section.tsx
@@ -26,7 +26,7 @@ export default function BuildAnythingSection() {
         aria-hidden="true"
         className="h-6 max-w-screen items-end px-2 font-mono text-xs/6 whitespace-pre text-black/20 max-sm:px-4 2xl:flex dark:text-white/25"
       >
-        text-4xl <span className="inline dark:hidden">text-gray-950</span>
+        text-4xl <span className="inline dark:hidden">text-neutral-950</span>
         <span className="hidden dark:inline">text-white</span> tracking-tighter
       </div>
 
@@ -41,19 +41,19 @@ export default function BuildAnythingSection() {
       </GridContainer>
 
       <div className="flex h-6 items-end px-2 font-mono text-xs/6 whitespace-pre text-black/20 max-sm:px-4 sm:h-10 dark:text-white/25">
-        text-base <span className="inline dark:hidden">text-gray-950</span>
+        text-base <span className="inline dark:hidden">text-neutral-950</span>
         <span className="hidden dark:inline">text-white</span>
       </div>
 
       <GridContainer>
-        <p className="max-w-(--breakpoint-md) px-2 text-base/7 text-gray-600 max-sm:px-4 dark:text-gray-400">
+        <p className="max-w-(--breakpoint-md) px-2 text-base/7 text-neutral-600 max-sm:px-4 dark:text-neutral-400">
           Because Tailwind is so low-level, it never encourages you to design the same site twice. Some of your favorite
           sites are built with Tailwind, and you probably had no idea.
         </p>
       </GridContainer>
 
       <GridContainer className="mt-18">
-        <div className="h-auto bg-gray-950/5 p-2 dark:bg-white/10">
+        <div className="h-auto bg-neutral-950/5 p-2 dark:bg-white/10">
           <BentoItem className="flex h-full flex-row overflow-hidden p-0!">
             <div className="hidden flex-col gap-2 lg:flex">
               <a
@@ -209,7 +209,7 @@ export default function BuildAnythingSection() {
 
 function ExternalLinkLabel({ children }: { children: React.ReactNode }) {
   return (
-    <div className="absolute top-1/2 left-1/2 z-10 hidden -translate-x-1/2 -translate-y-1/2 transform flex-row items-center gap-[calc(1rem/16*7)] rounded-full border border-gray-950 bg-gray-950/90 py-0.5 pr-2 pb-1 pl-3 text-center font-mono text-sm/6 font-medium text-white opacity-0 inset-ring inset-ring-white/10 transition-opacity group-hover:flex group-hover:opacity-100">
+    <div className="absolute top-1/2 left-1/2 z-10 hidden -translate-x-1/2 -translate-y-1/2 transform flex-row items-center gap-[calc(1rem/16*7)] rounded-full border border-neutral-950 bg-neutral-950/90 py-0.5 pr-2 pb-1 pl-3 text-center font-mono text-sm/6 font-medium text-white opacity-0 inset-ring inset-ring-white/10 transition-opacity group-hover:flex group-hover:opacity-100">
       {children}
       <svg viewBox="0 0 16 16" fill="currentColor" className="size-4">
         <path
diff --git a/src/components/home/editor.tsx b/src/components/home/editor.tsx
index 049a05b3c..605d1c388 100644
--- a/src/components/home/editor.tsx
+++ b/src/components/home/editor.tsx
@@ -2,7 +2,7 @@ import { ReactNode } from "react";
 
 export function Editor({ children }: { children: ReactNode }) {
   return (
-    <div className="rounded-xl bg-gray-950">
+    <div className="rounded-xl bg-neutral-950">
       <div className="rounded-xl p-1 text-sm scheme-dark dark:inset-ring dark:inset-ring-white/10">
         <div className="flex gap-2 p-2">
           <span className="size-3 rounded-full bg-white/20"></span>
diff --git a/src/components/home/explainer-section.tsx b/src/components/home/explainer-section.tsx
index a9944a838..ccce79302 100644
--- a/src/components/home/explainer-section.tsx
+++ b/src/components/home/explainer-section.tsx
@@ -106,7 +106,7 @@ export default function ExplainerSection() {
         aria-hidden="true"
         className="hidden h-4 items-end px-2 font-mono text-xs/6 whitespace-pre text-black/20 max-sm:px-4 2xl:visible 2xl:flex dark:text-white/25"
       >
-        text-4xl <span className="inline dark:hidden">text-gray-950</span>
+        text-4xl <span className="inline dark:hidden">text-neutral-950</span>
         <span className="hidden dark:inline">text-white</span> tracking-tighter text-balance
       </div>
 
@@ -121,12 +121,12 @@ export default function ExplainerSection() {
       </GridContainer>
 
       <div className="flex h-6 items-end px-2 font-mono text-xs/6 whitespace-pre text-black/20 max-sm:px-4 sm:h-10 dark:text-white/25">
-        text-base <span className="inline dark:hidden">text-gray-950</span>
+        text-base <span className="inline dark:hidden">text-neutral-950</span>
         <span className="hidden dark:inline">text-white</span>
       </div>
 
       <GridContainer>
-        <p className="max-w-(--breakpoint-md) px-2 text-base/7 text-gray-600 max-sm:px-4 dark:text-gray-400">
+        <p className="max-w-(--breakpoint-md) px-2 text-base/7 text-neutral-600 max-sm:px-4 dark:text-neutral-400">
           Tailwind automatically removes all unused CSS when building for production, which means your final CSS bundle
           is the smallest it could possibly be. In fact, most Tailwind projects ship less than 10kB of CSS to the
           client.
@@ -134,9 +134,9 @@ export default function ExplainerSection() {
       </GridContainer>
 
       <GridContainer className="mt-16">
-        <div className="w-full bg-gray-950/5 p-2 dark:bg-white/10">
+        <div className="w-full bg-neutral-950/5 p-2 dark:bg-white/10">
           <div className="not-prose">
-            <div className="@container rounded-xl bg-gray-950 in-[figure]:-mx-1 in-[figure]:-mb-1">
+            <div className="@container rounded-xl bg-neutral-950 in-[figure]:-mx-1 in-[figure]:-mb-1">
               <div
                 className={clsx(
                   "rounded-xl p-1 text-sm scheme-dark dark:bg-white/5 dark:inset-ring dark:inset-ring-white/10",
diff --git a/src/components/home/hero.tsx b/src/components/home/hero.tsx
index adbf65ad2..2b7dbe0f0 100644
--- a/src/components/home/hero.tsx
+++ b/src/components/home/hero.tsx
@@ -57,7 +57,7 @@ const Hero: React.FC = () => {
         <span className="hidden sm:max-md:inline">text-5xl </span>
         <span className="hidden lg:max-xl:inline">text-6xl </span>
         <span className="hidden xl:inline">text-8xl </span>
-        <span className="inline dark:hidden">text-gray-950 </span>
+        <span className="inline dark:hidden">text-neutral-950 </span>
         <span className="hidden dark:inline">text-white </span>tracking-tighter{" "}
         <span className="max-sm:hidden">text-balance</span>
       </div>
@@ -70,11 +70,11 @@ const Hero: React.FC = () => {
         aria-hidden="true"
         className="flex h-6 items-end px-2 font-mono text-xs/6 whitespace-pre text-black/20 max-sm:px-4 sm:h-10 dark:text-white/25"
       >
-        text-lg <span className="inline dark:hidden">text-gray-950</span>
+        text-lg <span className="inline dark:hidden">text-neutral-950</span>
         <span className="hidden dark:inline">text-white</span> font-medium
       </div>
       <GridContainer>
-        <p className="max-w-(--breakpoint-md) px-2 text-lg/7 font-medium text-gray-600 max-sm:px-4 dark:text-gray-400">
+        <p className="max-w-(--breakpoint-md) px-2 text-lg/7 font-medium text-neutral-600 max-sm:px-4 dark:text-neutral-400">
           A utility-first CSS framework packed with classes like{" "}
           <span className="font-mono text-[1.0625rem] text-sky-500 dark:text-sky-400">flex</span>,{" "}
           <span className="font-mono text-[1.0625rem] text-sky-500 dark:text-sky-400">pt-4</span>,{" "}
@@ -93,11 +93,11 @@ const Hero: React.FC = () => {
           <LinkButton href="docs/installation" className="z-1 max-sm:hidden">
             Get started
           </LinkButton>
-          <SearchButton className="grid w-full grid-cols-[auto_1fr_auto] items-center gap-1 rounded-full px-4 py-2 text-left text-sm/6 text-gray-950/50 inset-ring inset-ring-gray-950/8 sm:w-80 dark:bg-white/5 dark:text-white/50 dark:inset-ring-white/15">
+          <SearchButton className="grid w-full grid-cols-[auto_1fr_auto] items-center gap-1 rounded-full px-4 py-2 text-left text-sm/6 text-neutral-950/50 inset-ring inset-ring-neutral-950/8 sm:w-80 dark:bg-white/5 dark:text-white/50 dark:inset-ring-white/15">
             <svg
               xmlns="http://www.w3.org/2000/svg"
               viewBox="0 0 16 16"
-              className="-ml-0.5 size-4 fill-gray-600 dark:fill-gray-500"
+              className="-ml-0.5 size-4 fill-neutral-600 dark:fill-neutral-500"
             >
               <path
                 fillRule="evenodd"
@@ -106,10 +106,10 @@ const Hero: React.FC = () => {
               />
             </svg>
             Quick search
-            <kbd className="hidden font-sans text-xs/4 text-gray-500 dark:text-gray-400 [.os-macos_&]:block">
+            <kbd className="hidden font-sans text-xs/4 text-neutral-500 dark:text-neutral-400 [.os-macos_&]:block">
               <span className="opacity-60">⌘</span>K
             </kbd>
-            <kbd className="hidden font-sans text-xs/4 text-gray-500 not-[.os-macos_&]:block dark:text-gray-400">
+            <kbd className="hidden font-sans text-xs/4 text-neutral-500 not-[.os-macos_&]:block dark:text-neutral-400">
               <span className="opacity-60">Ctrl</span>&nbsp;K
             </kbd>
           </SearchButton>
@@ -117,7 +117,7 @@ const Hero: React.FC = () => {
       </GridContainer>
       <GridContainer className="mt-24">
         <div className="grid grid-cols-1 lg:grid-cols-3">
-          <div className="bg-gray-950/5 p-2 lg:col-span-2 lg:-mx-px dark:bg-white/10">
+          <div className="bg-neutral-950/5 p-2 lg:col-span-2 lg:-mx-px dark:bg-white/10">
             <Editor>
               <div
                 className={clsx(
@@ -290,7 +290,7 @@ const Hero: React.FC = () => {
                           "flex
                           <TypeWord
                             isTyping={isTyping}
-                            word=" gap-2 font-medium text-gray-600 dark:text-gray-400"
+                            word=" gap-2 font-medium text-neutral-600 dark:text-neutral-400"
                             step={4}
                             currentStep={step}
                             onNextStep={nextStep}
@@ -380,7 +380,7 @@ function Example({ step }: { step: number }) {
     >
       <motion.div
         className={clsx(
-          "relative flex w-full flex-col rounded-2xl bg-white outline outline-black/5 dark:bg-gray-950",
+          "relative flex w-full flex-col rounded-2xl bg-white outline outline-black/5 dark:bg-neutral-950",
           step > 0 ? "p-7" : null,
           step > 6 ? "gap-6" : null,
           step > 5 ? "items-center" : null,
@@ -435,7 +435,7 @@ function Example({ step }: { step: number }) {
             layout="position"
             transition={TRANSITION}
             className={clsx(
-              "text-gray-950 transition-[font-size] duration-350 dark:text-white",
+              "text-neutral-950 transition-[font-size] duration-350 dark:text-white",
               step > 2 ? "text-2xl font-medium" : null,
             )}
           >
@@ -445,7 +445,7 @@ function Example({ step }: { step: number }) {
             transition={TRANSITION}
             layout="position"
             className={clsx(
-              "text-gray-950 transition-colors duration-350 dark:text-white",
+              "text-neutral-950 transition-colors duration-350 dark:text-white",
               step > 3 ? "font-medium text-sky-500!" : null,
             )}
           >
@@ -455,8 +455,8 @@ function Example({ step }: { step: number }) {
             layout="position"
             transition={TRANSITION}
             className={clsx(
-              "flex text-gray-950 transition-colors duration-350 dark:text-white",
-              step > 4 ? "gap-2 font-medium text-gray-600! dark:text-gray-400!" : null,
+              "flex text-neutral-950 transition-colors duration-350 dark:text-white",
+              step > 4 ? "gap-2 font-medium text-neutral-600! dark:text-neutral-400!" : null,
             )}
           >
             <motion.span layout="position" transition={TRANSITION}>
diff --git a/src/components/home/icons/3d-transforms-icon.tsx b/src/components/home/icons/3d-transforms-icon.tsx
index 091c2dde2..d37c97e43 100644
--- a/src/components/home/icons/3d-transforms-icon.tsx
+++ b/src/components/home/icons/3d-transforms-icon.tsx
@@ -1,7 +1,7 @@
 export function _3DTransformsIcon() {
   return (
     <svg
-      className="text-gray-950 [--site-background:var(--color-white)] dark:text-white dark:[--site-background:var(--color-gray-950)]"
+      className="text-neutral-950 [--site-background:var(--color-white)] dark:text-white dark:[--site-background:var(--color-neutral-950)]"
       width={112}
       height={72}
       viewBox="0 0 112 72"
diff --git a/src/components/home/icons/cascade-layers-icon.tsx b/src/components/home/icons/cascade-layers-icon.tsx
index c2b63d83b..5242904a2 100644
--- a/src/components/home/icons/cascade-layers-icon.tsx
+++ b/src/components/home/icons/cascade-layers-icon.tsx
@@ -2,7 +2,7 @@ export function CascadeLayersIcon() {
   return (
     <>
       <svg
-        className="text-gray-950 [--site-background:var(--color-white)] dark:text-white dark:[--site-background:var(--color-gray-950)]"
+        className="text-neutral-950 [--site-background:var(--color-white)] dark:text-white dark:[--site-background:var(--color-neutral-950)]"
         width={112}
         height={72}
         viewBox="0 0 112 72"
diff --git a/src/components/home/icons/container-queries-icon.tsx b/src/components/home/icons/container-queries-icon.tsx
index 2772da72f..77263aa51 100644
--- a/src/components/home/icons/container-queries-icon.tsx
+++ b/src/components/home/icons/container-queries-icon.tsx
@@ -1,7 +1,7 @@
 export function ContainerQueriesIcon() {
   return (
     <svg
-      className="text-gray-950 [--site-background:var(--color-white)] dark:text-white dark:[--site-background:var(--color-gray-950)]"
+      className="text-neutral-950 [--site-background:var(--color-white)] dark:text-white dark:[--site-background:var(--color-neutral-950)]"
       width={112}
       height={72}
       viewBox="0 0 112 72"
diff --git a/src/components/home/icons/css-grid-icon.tsx b/src/components/home/icons/css-grid-icon.tsx
index fe815da35..42a686361 100644
--- a/src/components/home/icons/css-grid-icon.tsx
+++ b/src/components/home/icons/css-grid-icon.tsx
@@ -2,7 +2,7 @@ export function CssGridIcon() {
   return (
     <>
       <svg
-        className="text-gray-950 [--site-background:var(--color-white)] dark:text-white dark:[--site-background:var(--color-gray-950)]"
+        className="text-neutral-950 [--site-background:var(--color-white)] dark:text-white dark:[--site-background:var(--color-neutral-950)]"
         width={112}
         height={72}
         viewBox="0 0 112 72"
diff --git a/src/components/home/icons/css-variables-icon.tsx b/src/components/home/icons/css-variables-icon.tsx
index db08cf4dc..716d984e5 100644
--- a/src/components/home/icons/css-variables-icon.tsx
+++ b/src/components/home/icons/css-variables-icon.tsx
@@ -2,7 +2,7 @@ export function CssVariablesIcon() {
   return (
     <>
       <svg
-        className="text-gray-950 [--site-background:var(--color-white)] dark:text-white dark:[--site-background:var(--color-gray-950)]"
+        className="text-neutral-950 [--site-background:var(--color-white)] dark:text-white dark:[--site-background:var(--color-neutral-950)]"
         width={112}
         height={72}
         viewBox="0 0 112 72"
diff --git a/src/components/home/icons/dark-mode-icon.tsx b/src/components/home/icons/dark-mode-icon.tsx
index 58f1c74cd..de95d6620 100644
--- a/src/components/home/icons/dark-mode-icon.tsx
+++ b/src/components/home/icons/dark-mode-icon.tsx
@@ -1,7 +1,7 @@
 export function DarkModeIcon() {
   return (
     <svg
-      className="text-gray-950 [--site-background:var(--color-white)] dark:text-white dark:[--site-background:var(--color-gray-950)]"
+      className="text-neutral-950 [--site-background:var(--color-white)] dark:text-white dark:[--site-background:var(--color-neutral-950)]"
       width={112}
       height={72}
       viewBox="0 0 112 72"
diff --git a/src/components/home/icons/filters-icon.tsx b/src/components/home/icons/filters-icon.tsx
index fb0ca050c..12a6021eb 100644
--- a/src/components/home/icons/filters-icon.tsx
+++ b/src/components/home/icons/filters-icon.tsx
@@ -2,7 +2,7 @@ export function FiltersIcon() {
   return (
     <>
       <svg
-        className="text-gray-950 [--site-background:var(--color-white)] dark:text-white dark:[--site-background:var(--color-gray-950)]"
+        className="text-neutral-950 [--site-background:var(--color-white)] dark:text-white dark:[--site-background:var(--color-neutral-950)]"
         width={112}
         height={72}
         viewBox="0 0 112 72"
diff --git a/src/components/home/icons/gradients-icon.tsx b/src/components/home/icons/gradients-icon.tsx
index 3d85cba51..3dd416623 100644
--- a/src/components/home/icons/gradients-icon.tsx
+++ b/src/components/home/icons/gradients-icon.tsx
@@ -1,7 +1,7 @@
 export function GradientsIcon() {
   return (
     <svg
-      className="text-gray-950 [--site-background:var(--color-white)] dark:text-white dark:[--site-background:var(--color-gray-950)]"
+      className="text-neutral-950 [--site-background:var(--color-white)] dark:text-white dark:[--site-background:var(--color-neutral-950)]"
       width={112}
       height={72}
       viewBox="0 0 112 72"
diff --git a/src/components/home/icons/logical-properties-icon.tsx b/src/components/home/icons/logical-properties-icon.tsx
index 83c92a69b..0ec7a166e 100644
--- a/src/components/home/icons/logical-properties-icon.tsx
+++ b/src/components/home/icons/logical-properties-icon.tsx
@@ -1,7 +1,7 @@
 export function LogicalPropertiesIcon() {
   return (
     <svg
-      className="text-gray-950 [--site-background:var(--color-white)] dark:text-white dark:[--site-background:var(--color-gray-950)]"
+      className="text-neutral-950 [--site-background:var(--color-white)] dark:text-white dark:[--site-background:var(--color-neutral-950)]"
       width={112}
       height={72}
       viewBox="0 0 112 72"
diff --git a/src/components/home/icons/p3-colors-icon.tsx b/src/components/home/icons/p3-colors-icon.tsx
index 415b30284..13d046e51 100644
--- a/src/components/home/icons/p3-colors-icon.tsx
+++ b/src/components/home/icons/p3-colors-icon.tsx
@@ -1,7 +1,7 @@
 export function P3ColorsIcon() {
   return (
     <svg
-      className="text-gray-950 [--site-background:var(--color-white)] dark:text-white dark:[--site-background:var(--color-gray-950)]"
+      className="text-neutral-950 [--site-background:var(--color-white)] dark:text-white dark:[--site-background:var(--color-neutral-950)]"
       width={112}
       height={72}
       viewBox="0 0 112 72"
diff --git a/src/components/home/icons/responsive-design-icon.tsx b/src/components/home/icons/responsive-design-icon.tsx
index 1bf078e77..0acbd7ab4 100644
--- a/src/components/home/icons/responsive-design-icon.tsx
+++ b/src/components/home/icons/responsive-design-icon.tsx
@@ -1,7 +1,7 @@
 export function ResponsiveDesignIcon() {
   return (
     <svg
-      className="text-gray-950 [--site-background:var(--color-white)] dark:text-white dark:[--site-background:var(--color-gray-950)]"
+      className="text-neutral-950 [--site-background:var(--color-white)] dark:text-white dark:[--site-background:var(--color-neutral-950)]"
       width={112}
       height={72}
       viewBox="0 0 112 72"
diff --git a/src/components/home/icons/transitions-and-animations-icon.tsx b/src/components/home/icons/transitions-and-animations-icon.tsx
index af80e0201..45c776b6b 100644
--- a/src/components/home/icons/transitions-and-animations-icon.tsx
+++ b/src/components/home/icons/transitions-and-animations-icon.tsx
@@ -1,7 +1,7 @@
 export function TransitionsAndAnimationsIcon() {
   return (
     <svg
-      className="text-gray-950 [--site-background:var(--color-white)] dark:text-white dark:[--site-background:var(--color-gray-950)]"
+      className="text-neutral-950 [--site-background:var(--color-white)] dark:text-white dark:[--site-background:var(--color-neutral-950)]"
       width={112}
       height={72}
       viewBox="0 0 112 72"
diff --git a/src/components/home/link-button.tsx b/src/components/home/link-button.tsx
index a7bcf7ffb..99a761a58 100644
--- a/src/components/home/link-button.tsx
+++ b/src/components/home/link-button.tsx
@@ -16,7 +16,7 @@ export default function LinkButton({
       href={href}
       className={clsx(
         className,
-        "inline-block rounded-4xl bg-black px-4 py-2 text-sm/6 font-semibold text-white hover:bg-gray-800 dark:bg-gray-700 dark:hover:bg-gray-600",
+        "inline-block rounded-4xl bg-black px-4 py-2 text-sm/6 font-semibold text-white hover:bg-neutral-800 dark:bg-neutral-700 dark:hover:bg-neutral-600",
       )}
     >
       {children}
diff --git a/src/components/home/partners-section.tsx b/src/components/home/partners-section.tsx
index ba1054ba6..fc7fe0f2c 100644
--- a/src/components/home/partners-section.tsx
+++ b/src/components/home/partners-section.tsx
@@ -30,7 +30,7 @@ export default function WhyTailwindCssSection() {
         aria-hidden="true"
         className="hidden h-4 items-end px-2 font-mono text-xs/6 whitespace-pre text-black/20 max-sm:px-4 2xl:visible 2xl:flex dark:text-white/25"
       >
-        text-4xl <span className="inline dark:hidden">text-gray-950</span>
+        text-4xl <span className="inline dark:hidden">text-neutral-950</span>
         <span className="hidden dark:inline">text-white</span> tracking-tighter text-balance
       </div>
 
@@ -48,12 +48,12 @@ export default function WhyTailwindCssSection() {
         aria-hidden="true"
         className="flex h-6 items-end px-2 font-mono text-xs/6 whitespace-pre text-black/20 max-sm:px-4 sm:h-10 dark:text-white/25"
       >
-        text-base <span className="inline dark:hidden">text-gray-950</span>
+        text-base <span className="inline dark:hidden">text-neutral-950</span>
         <span className="hidden dark:inline">text-white</span>
       </div>
 
       <GridContainer>
-        <p className="max-w-(--breakpoint-md) px-2 text-base/7 text-gray-600 max-sm:px-4 dark:text-gray-400">
+        <p className="max-w-(--breakpoint-md) px-2 text-base/7 text-neutral-600 max-sm:px-4 dark:text-neutral-400">
           Tailwind is supported by incredible partners and sponsors who make it possible for a team of talented
           designers and engineers to maintain the framework full-time.
         </p>
@@ -63,7 +63,7 @@ export default function WhyTailwindCssSection() {
         <div className="px-2 max-sm:px-4">
           <Link
             href="/sponsors"
-            className="inline-flex items-center justify-center gap-2 rounded-4xl bg-black px-4 py-2 text-sm/6 font-semibold text-white hover:bg-gray-800 dark:bg-gray-700 dark:hover:bg-gray-600"
+            className="inline-flex items-center justify-center gap-2 rounded-4xl bg-black px-4 py-2 text-sm/6 font-semibold text-white hover:bg-neutral-800 dark:bg-neutral-700 dark:hover:bg-neutral-600"
           >
             Become a sponsor
             <svg fill="currentColor" aria-hidden="true" viewBox="0 0 10 10" className="-mr-0.5 w-2.5">
@@ -76,10 +76,10 @@ export default function WhyTailwindCssSection() {
       <section>
         <div className="relative isolate mt-16">
           <div className="pointer-events-none absolute inset-0 z-10 grid grid-cols-2 gap-10 max-md:gap-5 lg:grid-cols-3 xl:grid-cols-4">
-            <div className="border-r border-gray-950/5 dark:border-white/10"></div>
-            <div className="border-l border-gray-950/5 lg:border-x dark:border-white/10"></div>
-            <div className="border-l border-gray-950/5 max-lg:hidden xl:border-x dark:border-white/10"></div>
-            <div className="border-l border-gray-950/5 max-xl:hidden dark:border-white/10"></div>
+            <div className="border-r border-neutral-950/5 dark:border-white/10"></div>
+            <div className="border-l border-neutral-950/5 lg:border-x dark:border-white/10"></div>
+            <div className="border-l border-neutral-950/5 max-lg:hidden xl:border-x dark:border-white/10"></div>
+            <div className="border-l border-neutral-950/5 max-xl:hidden dark:border-white/10"></div>
           </div>
           <ul className="grid grid-cols-2 gap-5 md:gap-10 lg:grid-cols-3 xl:grid-cols-4">
             {displayedSponsors.map((company, index) => (
@@ -88,7 +88,7 @@ export default function WhyTailwindCssSection() {
                 href={company.url}
                 target="_blank"
                 rel="noopener sponsored"
-                className="grid place-content-center transition-colors hover:bg-gray-950/2.5 max-lg:nth-[2n+1]:line-y sm:px-2 sm:py-4 lg:max-xl:nth-[3n+1]:line-y xl:nth-[4n+1]:line-y dark:hover:bg-white/2.5"
+                className="grid place-content-center transition-colors hover:bg-neutral-950/2.5 max-lg:nth-[2n+1]:line-y sm:px-2 sm:py-4 lg:max-xl:nth-[3n+1]:line-y xl:nth-[4n+1]:line-y dark:hover:bg-white/2.5"
               >
                 <company.logo className="w-full max-w-80" aria-label={`${company.name} logo`} />
               </a>
diff --git a/src/components/home/tabs.tsx b/src/components/home/tabs.tsx
index 61c72ca27..1e6d324c1 100644
--- a/src/components/home/tabs.tsx
+++ b/src/components/home/tabs.tsx
@@ -3,7 +3,7 @@ import clsx from "clsx";
 
 export function TabButtonContainer({ children }: { children: React.ReactNode }) {
   return (
-    <TabList className="grid grid-cols-[repeat(auto-fit,calc(var(--spacing)*42))] overflow-x-auto text-gray-950 dark:text-white">
+    <TabList className="grid grid-cols-[repeat(auto-fit,calc(var(--spacing)*42))] overflow-x-auto text-neutral-950 dark:text-white">
       {children}
     </TabList>
   );
@@ -46,7 +46,7 @@ export function TabButton(
   return (
     <Tab
       className={clsx(
-        "group grid place-items-center gap-4 border-r border-r-gray-950/10 p-6 font-mono text-sm/7 focus:outline-none dark:border-r-white/10",
+        "group grid place-items-center gap-4 border-r border-r-neutral-950/10 p-6 font-mono text-sm/7 focus:outline-none dark:border-r-white/10",
         activeStyles,
       )}
       {...props}
@@ -62,5 +62,5 @@ export function TabButton(
 }
 
 export function TabPanelContent({ children }: { children: React.ReactNode }) {
-  return <TabPanel className="h-213 w-full bg-gray-950/5 dark:bg-white/10">{children}</TabPanel>;
+  return <TabPanel className="h-213 w-full bg-neutral-950/5 dark:bg-white/10">{children}</TabPanel>;
 }
diff --git a/src/components/home/tailwind-ui-section.tsx b/src/components/home/tailwind-ui-section.tsx
index 853a5e6b1..05e2de0a2 100644
--- a/src/components/home/tailwind-ui-section.tsx
+++ b/src/components/home/tailwind-ui-section.tsx
@@ -64,7 +64,7 @@ export default function TailwindUiSection() {
         aria-hidden="true"
         className="hidden h-4 items-end px-2 font-mono text-xs/6 whitespace-pre text-black/20 max-sm:px-4 2xl:visible 2xl:flex dark:text-white/25"
       >
-        text-4xl <span className="inline dark:hidden">text-gray-950</span>
+        text-4xl <span className="inline dark:hidden">text-neutral-950</span>
         <span className="hidden dark:inline">text-white</span> tracking-tighter text-balance
       </div>
 
@@ -82,12 +82,12 @@ export default function TailwindUiSection() {
         aria-hidden="true"
         className="flex h-6 items-end px-2 font-mono text-xs/6 whitespace-pre text-black/20 max-sm:px-4 sm:h-10 dark:text-white/25"
       >
-        text-base <span className="inline dark:hidden">text-gray-950</span>
+        text-base <span className="inline dark:hidden">text-neutral-950</span>
         <span className="hidden dark:inline">text-white</span>
       </div>
 
       <GridContainer>
-        <p className="max-w-(--breakpoint-md) px-2 text-base/7 text-gray-600 max-sm:px-4 dark:text-gray-400">
+        <p className="max-w-(--breakpoint-md) px-2 text-base/7 text-neutral-600 max-sm:px-4 dark:text-neutral-400">
           Tailwind Plus is a collection of beautiful, fully responsive UI components, designed and developed by us, the
           creators of Tailwind CSS. It's got hundreds of ready-to-use examples to choose from, and is guaranteed to help
           you find the perfect starting point for what you want to build.
@@ -98,7 +98,7 @@ export default function TailwindUiSection() {
         <div className="px-2 max-sm:px-4">
           <a
             href="https://tailwindcss.com/plus?ref=home"
-            className="inline-block rounded-4xl bg-black px-4 py-2 text-sm/6 font-semibold text-white hover:bg-gray-800 dark:bg-gray-700 dark:hover:bg-gray-600"
+            className="inline-block rounded-4xl bg-black px-4 py-2 text-sm/6 font-semibold text-white hover:bg-neutral-800 dark:bg-neutral-700 dark:hover:bg-neutral-600"
           >
             Explore Tailwind Plus
           </a>
@@ -107,7 +107,7 @@ export default function TailwindUiSection() {
       <TabGroup>
         <GridContainer className="mt-16">
           <div className="mt-16 grid w-full overflow-x-hidden">
-            <TabList className="grid grid-cols-[repeat(3,_minmax(125px,_1fr))] divide-x divide-gray-950/10 overflow-x-auto text-gray-950 dark:divide-white/10 dark:text-white">
+            <TabList className="grid grid-cols-[repeat(3,_minmax(125px,_1fr))] divide-x divide-neutral-950/10 overflow-x-auto text-neutral-950 dark:divide-white/10 dark:text-white">
               <TabButton className="data-selected:bg-pink-500/5 data-selected:text-pink-600 dark:data-selected:text-pink-500">
                 <svg
                   xmlns="http://www.w3.org/2000/svg"
@@ -119,7 +119,7 @@ export default function TailwindUiSection() {
                 >
                   <path
                     shapeRendering="geometricPrecision"
-                    className="fill-white dark:fill-gray-950"
+                    className="fill-white dark:fill-neutral-950"
                     d="M56.066 6 8.435 33.5C7.478 34.053 7 34.776 7 35.5v3c0 .724.478 1.448 1.435 2L56.066 68c1.913 1.105 5.015 1.105 6.929 0l47.631-27.5c.957-.552 1.435-1.276 1.435-2v-3c0-.724-.479-1.447-1.435-2L62.995 6c-1.914-1.104-5.015-1.104-6.929 0"
                   />
                   <path
@@ -202,7 +202,7 @@ export default function TailwindUiSection() {
                 </svg>
                 <div className="text-center xl:text-left">
                   <p className="font-mono text-sm font-semibold tracking-widest uppercase">Templates</p>
-                  <p className="mt-2 hidden text-sm text-gray-600 lg:block dark:text-gray-400">
+                  <p className="mt-2 hidden text-sm text-neutral-600 lg:block dark:text-neutral-400">
                     Visually-stunning, easy to customize site templates built with React and Next.js.
                   </p>
                 </div>
@@ -210,7 +210,7 @@ export default function TailwindUiSection() {
               <TabButton className="data-selected:bg-indigo-500/5 data-selected:text-indigo-600 dark:data-selected:text-indigo-500">
                 <svg xmlns="http://www.w3.org/2000/svg" width="120" height="74" fill="none" viewBox="0 0 120 72">
                   <path
-                    className="fill-white dark:fill-gray-950"
+                    className="fill-white dark:fill-neutral-950"
                     d="M56.095 7 8.464 34.5c-.957.553-1.435 1.276-1.435 2v3c0 .724.478 1.448 1.435 2L56.095 69c1.913 1.105 5.015 1.105 6.928 0l47.632-27.5c.956-.552 1.435-1.276 1.435-2v-3c-.001-.724-.479-1.447-1.435-2L63.023 7c-1.913-1.104-5.015-1.104-6.928 0"
                   />
                   <path
@@ -237,12 +237,12 @@ export default function TailwindUiSection() {
                   />
                   <g className="transition-transform duration-300 group-hover:-translate-y-0.5 group-data-selected:translate-y-0">
                     <path
-                      className="fill-white dark:fill-gray-950"
+                      className="fill-white dark:fill-neutral-950"
                       stroke="currentColor"
                       d="M11.062 32c-.478-.276-.478-.724 0-1L58.694 3.5c.478-.276 1.253-.276 1.732 0L63.024 5c.478.276.478.724 0 1L15.392 33.5c-.478.276-1.253.276-1.732 0z"
                     />
                     <path
-                      className="fill-white dark:fill-gray-950"
+                      className="fill-white dark:fill-neutral-950"
                       stroke="currentColor"
                       d="M19.723 37c-.479-.276-.479-.724 0-1l47.63-27.5c.48-.276 1.255-.276 1.733 0L89.004 20c.479.276.479.724 0 1l-47.63 27.5c-.48.276-1.255.276-1.733 0z"
                     />
@@ -252,7 +252,7 @@ export default function TailwindUiSection() {
                       d="M37.909 44.5c-.478-.276-.478-.724 0-1l9.526-5.5c.479-.276 1.254-.276 1.732 0l1.732 1c.479.276.479.724 0 1l-9.526 5.5c-.478.276-1.254.276-1.732 0z"
                     />
                     <path
-                      className="fill-white dark:fill-gray-950"
+                      className="fill-white dark:fill-neutral-950"
                       stroke="currentColor"
                       d="M34.445 26.5c-.479-.276-.479-.724 0-1L49.167 17c.478-.276 1.254-.276 1.732 0l23.383 13.5c.478.276.478.724 0 1L59.559 40c-.478.276-1.253.276-1.732 0z"
                     />
@@ -262,7 +262,7 @@ export default function TailwindUiSection() {
                       d="M56.096 36c-.479-.276-.479-.724 0-1l9.526-5.5c.478-.276 1.254-.276 1.732 0l1.732 1c.478.276.478.724 0 1L59.56 37c-.479.276-1.254.276-1.732 0zM70.818 25.5c-.478-.276-.478-.724 0-1l9.526-5.5c.479-.276 1.254-.276 1.733 0l1.732 1c.478.276.478.724 0 1l-9.527 5.5c-.478.276-1.254.276-1.732 0z"
                     />
                     <path
-                      className="fill-white dark:fill-gray-950"
+                      className="fill-white dark:fill-neutral-950"
                       stroke="currentColor"
                       d="M45.703 52c-.478-.276-.478-.724 0-1l47.632-27.5c.478-.276 1.254-.276 1.732 0l12.99 7.5c.479.276.479.724 0 1L60.426 59.5c-.478.276-1.254.276-1.732 0z"
                     />
@@ -275,7 +275,7 @@ export default function TailwindUiSection() {
                 </svg>
                 <div className="text-center xl:text-left">
                   <p className="font-mono text-sm font-semibold tracking-widest uppercase">UI Blocks</p>
-                  <p className="mt-2 hidden text-sm text-gray-600 lg:block dark:text-gray-400">
+                  <p className="mt-2 hidden text-sm text-neutral-600 lg:block dark:text-neutral-400">
                     Over 500+ professionally designed, fully responsive, expertly crafted components.
                   </p>
                 </div>
@@ -283,7 +283,7 @@ export default function TailwindUiSection() {
               <TabButton className="data-selected:bg-sky-500/5 data-selected:text-sky-600 dark:data-selected:text-sky-500">
                 <svg xmlns="http://www.w3.org/2000/svg" width="120" height="74" fill="none" viewBox="0 0 120 72">
                   <path
-                    className="fill-white dark:fill-gray-950"
+                    className="fill-white dark:fill-neutral-950"
                     d="M56.095 6 8.464 33.5c-.957.553-1.435 1.276-1.435 2v3c0 .724.478 1.448 1.435 2L56.095 68c1.913 1.105 5.015 1.105 6.928 0l47.632-27.5c.956-.552 1.435-1.276 1.435-2v-3c-.001-.724-.479-1.447-1.435-2L63.023 6c-1.913-1.104-5.015-1.104-6.928 0"
                   />
                   <g stroke="currentColor" opacity="0.1">
@@ -330,25 +330,25 @@ export default function TailwindUiSection() {
                       cx="2"
                       cy="2"
                       r="2"
-                      className="fill-white dark:fill-gray-950"
+                      className="fill-white dark:fill-neutral-950"
                       stroke="currentColor"
                       transform="matrix(.86603 -.5 .86603 .5 56.095 41)"
                     />
                     <path stroke="currentColor" strokeLinecap="round" d="m63.89 38.5 12.124-7" />
                     <path
-                      className="fill-white dark:fill-gray-950"
+                      className="fill-white dark:fill-neutral-950"
                       stroke="currentColor"
                       d="M46.57 39.5c-.48-.276-.48-.724 0-1L73.415 23c.478-.276 1.254-.276 1.732 0l1.732 1c.478.276.478.724 0 1L50.033 40.5c-.478.276-1.254.276-1.732 0z"
                     />
                     <path stroke="currentColor" strokeLinecap="round" d="m43.105 37.5 10.392-6" />
                     <path
-                      className="fill-white dark:fill-gray-950"
+                      className="fill-white dark:fill-neutral-950"
                       stroke="currentColor"
                       d="M37.043 34c-.478-.276-.478-.724 0-1L63.89 17.5c.478-.276 1.253-.276 1.732 0l1.732 1c.478.276.478.724 0 1L40.507 35c-.478.276-1.254.276-1.732 0z"
                     />
                     <path stroke="currentColor" strokeLinecap="round" d="m33.579 32 10.392-6" />
                     <path
-                      className="fill-white dark:fill-gray-950"
+                      className="fill-white dark:fill-neutral-950"
                       stroke="currentColor"
                       d="M11.062 31c-.478-.276-.478-.724 0-1L58.694 2.5c.478-.276 1.253-.276 1.732 0L63.024 4c.478.276.478.724 0 1L15.392 32.5c-.478.276-1.253.276-1.732 0z"
                     />
@@ -356,7 +356,7 @@ export default function TailwindUiSection() {
                 </svg>
                 <div className="text-center xl:text-left">
                   <p className="font-mono text-sm font-semibold tracking-widest uppercase">UI Kit</p>
-                  <p className="mt-2 hidden text-sm text-gray-600 lg:block dark:text-gray-400">
+                  <p className="mt-2 hidden text-sm text-neutral-600 lg:block dark:text-neutral-400">
                     A starter kit for building your own component systems with React and Tailwind CSS.
                   </p>
                 </div>
@@ -367,8 +367,8 @@ export default function TailwindUiSection() {
 
         <GridContainer className="mt-4">
           <TabPanels>
-            <TabPanel className="bg-gray-950/5 p-2 dark:bg-white/10 dark:opacity-40">
-              <BentoItem className="relative isolate h-148 w-full overflow-hidden bg-white/75! p-0! dark:bg-gray-950! dark:ring dark:ring-white/10">
+            <TabPanel className="bg-neutral-950/5 p-2 dark:bg-white/10 dark:opacity-40">
+              <BentoItem className="relative isolate h-148 w-full overflow-hidden bg-white/75! p-0! dark:bg-neutral-950! dark:ring dark:ring-white/10">
                 <div className="absolute -left-[300%] h-150 w-380 min-[500px]:-left-[250%] sm:-left-[200%] md:-left-[150%] lg:-left-[100%] xl:-left-[80%] 2xl:-left-[65%]">
                   <div className="grid origin-top-left scale-120 rotate-x-55 rotate-y-0 -rotate-z-45 grid-cols-3 transform-3d">
                     <motion.img
@@ -403,8 +403,8 @@ export default function TailwindUiSection() {
               </BentoItem>
             </TabPanel>
 
-            <TabPanel className="bg-gray-950/5 p-2 dark:bg-white/5">
-              <BentoItem className="relative isolate h-148 w-full overflow-hidden bg-white/75! p-0! dark:bg-gray-950!">
+            <TabPanel className="bg-neutral-950/5 p-2 dark:bg-white/5">
+              <BentoItem className="relative isolate h-148 w-full overflow-hidden bg-white/75! p-0! dark:bg-neutral-950!">
                 <div className="size-430 shrink-0 scale-50 sm:scale-75 lg:scale-100 dark:bg-white/5">
                   <div className="relative top-(--top,0) right-(--right,54%) grid size-full origin-top-left rotate-x-55 rotate-y-0 -rotate-z-45 grid-cols-4 gap-8 transform-3d">
                     <motion.div
@@ -415,56 +415,56 @@ export default function TailwindUiSection() {
                     >
                       <img
                         src={uiBlocksCol1Row1.src}
-                        className="aspect-970/580 ring ring-gray-950/5 dark:hidden"
+                        className="aspect-970/580 ring ring-neutral-950/5 dark:hidden"
                         width={970}
                         height={580}
                         alt=""
                       />
                       <img
                         src={uiBlocksCol1Row1Dark.src}
-                        className="aspect-970/580 ring ring-gray-950/5 dark:ring-white/10 not-dark:hidden"
+                        className="aspect-970/580 ring ring-neutral-950/5 dark:ring-white/10 not-dark:hidden"
                         width={970}
                         height={580}
                         alt=""
                       />
                       <img
                         src={uiBlocksCol1Row2.src}
-                        className="aspect-971/582 ring ring-gray-950/5 dark:hidden"
+                        className="aspect-971/582 ring ring-neutral-950/5 dark:hidden"
                         width={971}
                         height={582}
                         alt=""
                       />
                       <img
                         src={uiBlocksCol1Row2Dark.src}
-                        className="aspect-971/582 ring ring-gray-950/5 dark:ring-white/10 not-dark:hidden"
+                        className="aspect-971/582 ring ring-neutral-950/5 dark:ring-white/10 not-dark:hidden"
                         width={971}
                         height={582}
                         alt=""
                       />
                       <img
                         src={uiBlocksCol1Row3.src}
-                        className="aspect-971/820 ring ring-gray-950/5 dark:hidden"
+                        className="aspect-971/820 ring ring-neutral-950/5 dark:hidden"
                         width={971}
                         height={820}
                         alt=""
                       />
                       <img
                         src={uiBlocksCol1Row3Dark.src}
-                        className="aspect-971/820 ring ring-gray-950/5 dark:ring-white/10 not-dark:hidden"
+                        className="aspect-971/820 ring ring-neutral-950/5 dark:ring-white/10 not-dark:hidden"
                         width={971}
                         height={820}
                         alt=""
                       />
                       <img
                         src={uiBlocksCol1Row4.src}
-                        className="aspect-970/508 ring ring-gray-950/5 dark:hidden"
+                        className="aspect-970/508 ring ring-neutral-950/5 dark:hidden"
                         width={970}
                         height={508}
                         alt=""
                       />
                       <img
                         src={uiBlocksCol1Row4Dark.src}
-                        className="aspect-970/508 ring ring-gray-950/5 dark:ring-white/10 not-dark:hidden"
+                        className="aspect-970/508 ring ring-neutral-950/5 dark:ring-white/10 not-dark:hidden"
                         width={970}
                         height={508}
                         alt=""
@@ -478,84 +478,84 @@ export default function TailwindUiSection() {
                     >
                       <img
                         src={uiBlocksCol2Row1.src}
-                        className="aspect-970/436 ring ring-gray-950/5 dark:hidden"
+                        className="aspect-970/436 ring ring-neutral-950/5 dark:hidden"
                         width={970}
                         height={436}
                         alt=""
                       />
                       <img
                         src={uiBlocksCol2Row1Dark.src}
-                        className="aspect-970/436 ring ring-gray-950/5 dark:ring-white/10 not-dark:hidden"
+                        className="aspect-970/436 ring ring-neutral-950/5 dark:ring-white/10 not-dark:hidden"
                         width={970}
                         height={436}
                         alt=""
                       />
                       <img
                         src={uiBlocksCol2Row2.src}
-                        className="aspect-970/700 ring ring-gray-950/5 dark:hidden"
+                        className="aspect-970/700 ring ring-neutral-950/5 dark:hidden"
                         width={970}
                         height={700}
                         alt=""
                       />
                       <img
                         src={uiBlocksCol2Row2Dark.src}
-                        className="aspect-970/700 ring ring-gray-950/5 dark:ring-white/10 not-dark:hidden"
+                        className="aspect-970/700 ring ring-neutral-950/5 dark:ring-white/10 not-dark:hidden"
                         width={970}
                         height={700}
                         alt=""
                       />
                       <img
                         src={uiBlocksCol2Row3.src}
-                        className="aspect-971/879 ring ring-gray-950/5 dark:hidden"
+                        className="aspect-971/879 ring ring-neutral-950/5 dark:hidden"
                         width={971}
                         height={879}
                         alt=""
                       />
                       <img
                         src={uiBlocksCol2Row3Dark.src}
-                        className="aspect-971/879 ring ring-gray-950/5 dark:ring-white/10 not-dark:hidden"
+                        className="aspect-971/879 ring ring-neutral-950/5 dark:ring-white/10 not-dark:hidden"
                         width={971}
                         height={879}
                         alt=""
                       />
                       <img
                         src={uiBlocksCol2Row4.src}
-                        className="aspect-970/557 ring ring-gray-950/5 dark:hidden"
+                        className="aspect-970/557 ring ring-neutral-950/5 dark:hidden"
                         width={970}
                         height={557}
                         alt=""
                       />
                       <img
                         src={uiBlocksCol2Row4Dark.src}
-                        className="aspect-970/557 ring ring-gray-950/5 dark:ring-white/10 not-dark:hidden"
+                        className="aspect-970/557 ring ring-neutral-950/5 dark:ring-white/10 not-dark:hidden"
                         width={970}
                         height={557}
                         alt=""
                       />
                       <img
                         src={uiBlocksCol2Row5.src}
-                        className="aspect-970/763 ring ring-gray-950/5 dark:hidden"
+                        className="aspect-970/763 ring ring-neutral-950/5 dark:hidden"
                         width={970}
                         height={763}
                         alt=""
                       />
                       <img
                         src={uiBlocksCol2Row5Dark.src}
-                        className="aspect-970/763 ring ring-gray-950/5 dark:ring-white/10 not-dark:hidden"
+                        className="aspect-970/763 ring ring-neutral-950/5 dark:ring-white/10 not-dark:hidden"
                         width={970}
                         height={763}
                         alt=""
                       />
                       <img
                         src={uiBlocksCol2Row6.src}
-                        className="aspect-970/922 ring ring-gray-950/5 dark:hidden"
+                        className="aspect-970/922 ring ring-neutral-950/5 dark:hidden"
                         width={970}
                         height={922}
                         alt=""
                       />
                       <img
                         src={uiBlocksCol2Row6Dark.src}
-                        className="aspect-970/922 ring ring-gray-950/5 dark:ring-white/10 not-dark:hidden"
+                        className="aspect-970/922 ring ring-neutral-950/5 dark:ring-white/10 not-dark:hidden"
                         width={970}
                         height={922}
                         alt=""
@@ -569,98 +569,98 @@ export default function TailwindUiSection() {
                     >
                       <img
                         src={uiBlocksCol3Row1.src}
-                        className="aspect-970/580 ring ring-gray-950/5 dark:hidden"
+                        className="aspect-970/580 ring ring-neutral-950/5 dark:hidden"
                         width={970}
                         height={580}
                         alt=""
                       />
                       <img
                         src={uiBlocksCol3Row1Dark.src}
-                        className="aspect-970/580 ring ring-gray-950/5 dark:ring-white/10 not-dark:hidden"
+                        className="aspect-970/580 ring ring-neutral-950/5 dark:ring-white/10 not-dark:hidden"
                         width={970}
                         height={580}
                         alt=""
                       />
                       <img
                         src={uiBlocksCol3Row2.src}
-                        className="aspect-971/395 ring ring-gray-950/5 dark:hidden"
+                        className="aspect-971/395 ring ring-neutral-950/5 dark:hidden"
                         width={971}
                         height={395}
                         alt=""
                       />
                       <img
                         src={uiBlocksCol3Row2Dark.src}
-                        className="aspect-971/395 ring ring-gray-950/5 dark:ring-white/10 not-dark:hidden"
+                        className="aspect-971/395 ring ring-neutral-950/5 dark:ring-white/10 not-dark:hidden"
                         width={971}
                         height={395}
                         alt=""
                       />
                       <img
                         src={uiBlocksCol3Row3.src}
-                        className="aspect-971/349 ring ring-gray-950/5 dark:hidden"
+                        className="aspect-971/349 ring ring-neutral-950/5 dark:hidden"
                         width={971}
                         height={349}
                         alt=""
                       />
                       <img
                         src={uiBlocksCol3Row3Dark.src}
-                        className="aspect-971/349 ring ring-gray-950/5 dark:ring-white/10 not-dark:hidden"
+                        className="aspect-971/349 ring ring-neutral-950/5 dark:ring-white/10 not-dark:hidden"
                         width={971}
                         height={349}
                         alt=""
                       />
                       <img
                         src={uiBlocksCol3Row4.src}
-                        className="aspect-970/975 ring ring-gray-950/5 dark:hidden"
+                        className="aspect-970/975 ring ring-neutral-950/5 dark:hidden"
                         width={970}
                         height={975}
                         alt=""
                       />
                       <img
                         src={uiBlocksCol3Row4Dark.src}
-                        className="aspect-970/975 ring ring-gray-950/5 dark:ring-white/10 not-dark:hidden"
+                        className="aspect-970/975 ring ring-neutral-950/5 dark:ring-white/10 not-dark:hidden"
                         width={970}
                         height={975}
                         alt=""
                       />
                       <img
                         src={uiBlocksCol3Row5.src}
-                        className="aspect-970/381 ring ring-gray-950/5 dark:hidden"
+                        className="aspect-970/381 ring ring-neutral-950/5 dark:hidden"
                         width={970}
                         height={381}
                         alt=""
                       />
                       <img
                         src={uiBlocksCol3Row5Dark.src}
-                        className="aspect-970/381 ring ring-gray-950/5 dark:ring-white/10 not-dark:hidden"
+                        className="aspect-970/381 ring ring-neutral-950/5 dark:ring-white/10 not-dark:hidden"
                         width={970}
                         height={381}
                         alt=""
                       />
                       <img
                         src={uiBlocksCol3Row6.src}
-                        className="aspect-970/782 ring ring-gray-950/5 dark:hidden"
+                        className="aspect-970/782 ring ring-neutral-950/5 dark:hidden"
                         width={970}
                         height={782}
                         alt=""
                       />
                       <img
                         src={uiBlocksCol3Row6Dark.src}
-                        className="aspect-970/782 ring ring-gray-950/5 dark:ring-white/10 not-dark:hidden"
+                        className="aspect-970/782 ring ring-neutral-950/5 dark:ring-white/10 not-dark:hidden"
                         width={970}
                         height={782}
                         alt=""
                       />
                       <img
                         src={uiBlocksCol3Row7.src}
-                        className="aspect-970/426 ring ring-gray-950/5 dark:hidden"
+                        className="aspect-970/426 ring ring-neutral-950/5 dark:hidden"
                         width={970}
                         height={426}
                         alt=""
                       />
                       <img
                         src={uiBlocksCol3Row7Dark.src}
-                        className="aspect-970/426 ring ring-gray-950/5 dark:ring-white/10 not-dark:hidden"
+                        className="aspect-970/426 ring ring-neutral-950/5 dark:ring-white/10 not-dark:hidden"
                         width={970}
                         height={426}
                         alt=""
@@ -674,42 +674,42 @@ export default function TailwindUiSection() {
                     >
                       <img
                         src={uiBlocksCol4Row1.src}
-                        className="aspect-970/600 ring ring-gray-950/5 dark:hidden"
+                        className="aspect-970/600 ring ring-neutral-950/5 dark:hidden"
                         width={970}
                         height={600}
                         alt=""
                       />
                       <img
                         src={uiBlocksCol4Row1Dark.src}
-                        className="aspect-970/600 ring ring-gray-950/5 dark:ring-white/10 not-dark:hidden"
+                        className="aspect-970/600 ring ring-neutral-950/5 dark:ring-white/10 not-dark:hidden"
                         width={970}
                         height={600}
                         alt=""
                       />
                       <img
                         src={uiBlocksCol4Row2.src}
-                        className="aspect-972/854 ring ring-gray-950/5 dark:hidden"
+                        className="aspect-972/854 ring ring-neutral-950/5 dark:hidden"
                         width={972}
                         height={854}
                         alt=""
                       />
                       <img
                         src={uiBlocksCol4Row2Dark.src}
-                        className="aspect-972/854 ring ring-gray-950/5 dark:ring-white/10 not-dark:hidden"
+                        className="aspect-972/854 ring ring-neutral-950/5 dark:ring-white/10 not-dark:hidden"
                         width={972}
                         height={854}
                         alt=""
                       />
                       <img
                         src={uiBlocksCol4Row3.src}
-                        className="aspect-971/725 ring ring-gray-950/5 dark:hidden"
+                        className="aspect-971/725 ring ring-neutral-950/5 dark:hidden"
                         width={971}
                         height={725}
                         alt=""
                       />
                       <img
                         src={uiBlocksCol4Row3Dark.src}
-                        className="aspect-971/725 ring ring-gray-950/5 dark:ring-white/10 not-dark:hidden"
+                        className="aspect-971/725 ring ring-neutral-950/5 dark:ring-white/10 not-dark:hidden"
                         width={971}
                         height={725}
                         alt=""
@@ -720,8 +720,8 @@ export default function TailwindUiSection() {
               </BentoItem>
             </TabPanel>
 
-            <TabPanel className="bg-gray-950/5 p-2 dark:bg-white/5">
-              <BentoItem className="relative isolate h-148 w-full overflow-hidden bg-white/75! p-0! dark:bg-gray-950!">
+            <TabPanel className="bg-neutral-950/5 p-2 dark:bg-white/5">
+              <BentoItem className="relative isolate h-148 w-full overflow-hidden bg-white/75! p-0! dark:bg-neutral-950!">
                 <div className="absolute -left-[300%] h-150 w-380 min-[500px]:-left-[250%] sm:-left-[200%] md:-left-[150%] lg:-left-[100%] xl:-left-[80%] 2xl:-left-[65%]">
                   <div className="flex origin-top-left scale-100 rotate-x-55 rotate-y-0 -rotate-z-45 grid-cols-3 flex-row gap-4 transform-3d dark:bg-white/5">
                     <motion.img
@@ -729,7 +729,7 @@ export default function TailwindUiSection() {
                       viewport={{ once: true }}
                       whileInView={{ y: 350, transition: { duration: 120 } }}
                       src={uiKitCol1.src}
-                      className="ring ring-gray-950/5 dark:hidden"
+                      className="ring ring-neutral-950/5 dark:hidden"
                       width={399}
                       height={2019.5}
                       alt=""
@@ -749,7 +749,7 @@ export default function TailwindUiSection() {
                       viewport={{ once: true }}
                       whileInView={{ y: 850, transition: { duration: 120 } }}
                       src={uiKitCol2.src}
-                      className="ring ring-gray-950/5 dark:hidden"
+                      className="ring ring-neutral-950/5 dark:hidden"
                       width={822}
                       height={2019.5}
                       alt=""
@@ -769,7 +769,7 @@ export default function TailwindUiSection() {
                       viewport={{ once: true }}
                       whileInView={{ y: 450, transition: { duration: 120 } }}
                       src={uiKitCol3.src}
-                      className="ring ring-gray-950/5 dark:hidden"
+                      className="ring ring-neutral-950/5 dark:hidden"
                       width={504}
                       height={1378.5}
                       alt=""
diff --git a/src/components/home/transforms-3d.tsx b/src/components/home/transforms-3d.tsx
index 1db974e0d..84dbbd7b4 100644
--- a/src/components/home/transforms-3d.tsx
+++ b/src/components/home/transforms-3d.tsx
@@ -27,10 +27,10 @@ export function Transforms3d() {
           }}
           alt=""
           src={_3dTransformsImg.src}
-          className="absolute inset-0 size-82 rounded-2xl shadow-2xl outline outline-gray-950/5 transition duration-300 transform-3d"
+          className="absolute inset-0 size-82 rounded-2xl shadow-2xl outline outline-neutral-950/5 transition duration-300 transform-3d"
         />
-        <div className="col-start-1 row-start-1 size-82 rounded-2xl bg-gray-950/5 p-2 shadow-inner inset-ring inset-ring-gray-950/5 dark:bg-white/10 dark:inset-ring-white/10">
-          <div className="size-full rounded-lg outline outline-gray-950/10 outline-dashed"></div>
+        <div className="col-start-1 row-start-1 size-82 rounded-2xl bg-neutral-950/5 p-2 shadow-inner inset-ring inset-ring-neutral-950/5 dark:bg-white/10 dark:inset-ring-white/10">
+          <div className="size-full rounded-lg outline outline-neutral-950/10 outline-dashed"></div>
         </div>
       </div>
     </div>
diff --git a/src/components/home/transitions-section.tsx b/src/components/home/transitions-section.tsx
index 5e553e123..77aa6f92c 100644
--- a/src/components/home/transitions-section.tsx
+++ b/src/components/home/transitions-section.tsx
@@ -14,7 +14,7 @@ export function TransitionsSection() {
     <div className="flex h-full flex-col justify-between px-6 py-10 sm:p-10">
       <div className="grid grid-cols-[auto_1fr] gap-8 sm:gap-11">
         <svg
-          className="size-16 rounded-lg bg-white text-gray-800 shadow-sm sm:size-18 dark:bg-gray-900 dark:text-white dark:inset-ring dark:inset-ring-white/5"
+          className="size-16 rounded-lg bg-white text-neutral-800 shadow-sm sm:size-18 dark:bg-neutral-900 dark:text-white dark:inset-ring dark:inset-ring-white/5"
           viewBox="0 0 65 65"
           fill="none"
           xmlns="http://www.w3.org/2000/svg"
@@ -34,9 +34,9 @@ export function TransitionsSection() {
           />
         </svg>
         <div className="flex w-full min-w-0 flex-col justify-between pt-1 pb-4">
-          <p className="flex font-mono text-xs text-nowrap text-clip text-gray-700 dark:text-gray-200">
+          <p className="flex font-mono text-xs text-nowrap text-clip text-neutral-700 dark:text-neutral-200">
             <span className="hidden sm:visible">transition duration-750</span>
-            <span className="font-medium text-gray-950 dark:text-white">linear</span>
+            <span className="font-medium text-neutral-950 dark:text-white">linear</span>
           </p>
           <div className="@container relative grid grid-cols-[auto_1fr_auto] items-center px-4 sm:px-5">
             <motion.div
@@ -45,16 +45,16 @@ export function TransitionsSection() {
               animate="end"
               transition={{ ease: "linear", repeat: Infinity, duration: 0.75, repeatDelay: 1.5, repeatType: "mirror" }}
             />
-            <div className="size-2 rounded-full border border-gray-950/20 dark:border-gray-700" />
-            <div className="h-px w-full bg-gray-950/20 dark:bg-gray-700" />
-            <div className="size-2 rounded-full border border-gray-950/20 dark:border-gray-700" />
+            <div className="size-2 rounded-full border border-neutral-950/20 dark:border-neutral-700" />
+            <div className="h-px w-full bg-neutral-950/20 dark:bg-neutral-700" />
+            <div className="size-2 rounded-full border border-neutral-950/20 dark:border-neutral-700" />
           </div>
         </div>
       </div>
 
       <div className="grid grid-cols-[auto_1fr] gap-8 sm:gap-11">
         <svg
-          className="size-16 rounded-lg bg-white text-gray-800 shadow-sm sm:size-18 dark:bg-gray-900 dark:text-white dark:inset-ring dark:inset-ring-white/5"
+          className="size-16 rounded-lg bg-white text-neutral-800 shadow-sm sm:size-18 dark:bg-neutral-900 dark:text-white dark:inset-ring dark:inset-ring-white/5"
           viewBox="0 0 65 65"
           fill="none"
           xmlns="http://www.w3.org/2000/svg"
@@ -74,9 +74,9 @@ export function TransitionsSection() {
           />
         </svg>
         <div className="flex w-full min-w-0 flex-col justify-between pt-1 pb-4">
-          <p className="flex font-mono text-xs text-nowrap text-clip text-gray-700 dark:text-gray-200">
+          <p className="flex font-mono text-xs text-nowrap text-clip text-neutral-700 dark:text-neutral-200">
             <span className="hidden sm:visible">transition duration-750</span>
-            <span className="font-medium text-gray-950 dark:text-white">ease-out</span>
+            <span className="font-medium text-neutral-950 dark:text-white">ease-out</span>
           </p>
           <div className="@container relative grid max-w-full grid-cols-[auto_1fr_auto] items-center px-4 sm:px-5">
             <motion.div
@@ -91,15 +91,15 @@ export function TransitionsSection() {
                 repeatType: "mirror",
               }}
             />
-            <div className="size-2 rounded-full border border-gray-950/20 dark:border-gray-700" />
-            <div className="h-px w-full bg-gray-950/20 dark:bg-gray-700" />
-            <div className="size-2 rounded-full border border-gray-950/20 dark:border-gray-700" />
+            <div className="size-2 rounded-full border border-neutral-950/20 dark:border-neutral-700" />
+            <div className="h-px w-full bg-neutral-950/20 dark:bg-neutral-700" />
+            <div className="size-2 rounded-full border border-neutral-950/20 dark:border-neutral-700" />
           </div>
         </div>
       </div>
       <div className="grid grid-cols-[auto_1fr] gap-8 sm:gap-11">
         <svg
-          className="size-16 rounded-lg bg-white text-gray-800 shadow-sm sm:size-18 dark:bg-gray-900 dark:text-white dark:inset-ring dark:inset-ring-white/5"
+          className="size-16 rounded-lg bg-white text-neutral-800 shadow-sm sm:size-18 dark:bg-neutral-900 dark:text-white dark:inset-ring dark:inset-ring-white/5"
           viewBox="0 0 65 65"
           fill="none"
           xmlns="http://www.w3.org/2000/svg"
@@ -119,9 +119,9 @@ export function TransitionsSection() {
           />
         </svg>
         <div className="flex w-full min-w-0 flex-col justify-between pt-1 pb-4">
-          <p className="flex-1 font-mono text-xs text-nowrap text-clip text-gray-700 dark:text-gray-200">
+          <p className="flex-1 font-mono text-xs text-nowrap text-clip text-neutral-700 dark:text-neutral-200">
             <span className="hidden sm:visible">transition duration-750</span>
-            <span className="font-medium text-gray-950 dark:text-white">ease-in-out</span>
+            <span className="font-medium text-neutral-950 dark:text-white">ease-in-out</span>
           </p>
           <div className="@container relative grid grid-cols-[auto_1fr_auto] items-center px-4 sm:px-5">
             <motion.div
@@ -136,15 +136,15 @@ export function TransitionsSection() {
                 repeatType: "mirror",
               }}
             />
-            <div className="size-2 rounded-full border border-gray-950/20 dark:border-gray-700" />
-            <div className="h-px w-full bg-gray-950/20 dark:bg-gray-700" />
-            <div className="size-2 rounded-full border border-gray-950/20 dark:border-gray-700" />
+            <div className="size-2 rounded-full border border-neutral-950/20 dark:border-neutral-700" />
+            <div className="h-px w-full bg-neutral-950/20 dark:bg-neutral-700" />
+            <div className="size-2 rounded-full border border-neutral-950/20 dark:border-neutral-700" />
           </div>
         </div>
       </div>
       <div className="grid grid-cols-[auto_1fr] gap-8 sm:gap-11">
         <svg
-          className="size-16 rounded-lg bg-white text-gray-800 shadow-sm sm:size-18 dark:bg-gray-900 dark:text-white dark:inset-ring dark:inset-ring-white/5"
+          className="size-16 rounded-lg bg-white text-neutral-800 shadow-sm sm:size-18 dark:bg-neutral-900 dark:text-white dark:inset-ring dark:inset-ring-white/5"
           viewBox="0 0 65 65"
           fill="none"
           xmlns="http://www.w3.org/2000/svg"
@@ -164,9 +164,9 @@ export function TransitionsSection() {
           />
         </svg>
         <div className="flex w-full min-w-0 flex-col justify-between pt-1 pb-4">
-          <p className="flex font-mono text-xs text-nowrap text-clip text-gray-700 dark:text-gray-200">
+          <p className="flex font-mono text-xs text-nowrap text-clip text-neutral-700 dark:text-neutral-200">
             <span className="hidden sm:visible">transition duration-750</span>
-            <span className="font-medium text-gray-950 dark:text-white">ease-in</span>
+            <span className="font-medium text-neutral-950 dark:text-white">ease-in</span>
           </p>
           <div className="@container relative grid grid-cols-[auto_1fr_auto] items-center px-4 sm:px-5">
             <motion.div
@@ -182,9 +182,9 @@ export function TransitionsSection() {
               }}
             />
 
-            <div className="size-2 rounded-full border border-gray-950/20 dark:border-gray-700" />
-            <div className="h-px w-full bg-gray-950/20 dark:bg-gray-700" />
-            <div className="size-2 rounded-full border border-gray-950/20 dark:border-gray-700" />
+            <div className="size-2 rounded-full border border-neutral-950/20 dark:border-neutral-700" />
+            <div className="h-px w-full bg-neutral-950/20 dark:bg-neutral-700" />
+            <div className="size-2 rounded-full border border-neutral-950/20 dark:border-neutral-700" />
           </div>
         </div>
       </div>
diff --git a/src/components/home/why-tailwind-css-section.tsx b/src/components/home/why-tailwind-css-section.tsx
index 52b5a5531..d05282d05 100644
--- a/src/components/home/why-tailwind-css-section.tsx
+++ b/src/components/home/why-tailwind-css-section.tsx
@@ -51,7 +51,7 @@ export default function WhyTailwindCssSection() {
         aria-hidden="true"
         className="hidden h-4 items-end px-2 font-mono text-xs/6 whitespace-pre text-black/20 max-sm:px-4 2xl:visible 2xl:flex dark:text-white/25"
       >
-        text-4xl <span className="inline dark:hidden">text-gray-950</span>
+        text-4xl <span className="inline dark:hidden">text-neutral-950</span>
         <span className="hidden dark:inline">text-white</span> tracking-tighter text-balance
       </div>
 
@@ -69,19 +69,19 @@ export default function WhyTailwindCssSection() {
         aria-hidden="true"
         className="flex h-6 items-end px-2 font-mono text-xs/6 whitespace-pre text-black/20 max-sm:px-4 sm:h-10 dark:text-white/25"
       >
-        text-base <span className="inline dark:hidden">text-gray-950</span>
+        text-base <span className="inline dark:hidden">text-neutral-950</span>
         <span className="hidden dark:inline">text-white</span>
       </div>
 
       <GridContainer>
-        <p className="max-w-(--breakpoint-md) px-2 text-base/7 text-gray-600 max-sm:px-4 dark:text-gray-400">
+        <p className="max-w-(--breakpoint-md) px-2 text-base/7 text-neutral-600 max-sm:px-4 dark:text-neutral-400">
           Tailwind is unapologetically modern, and takes advantage of all the latest and greatest CSS features to make
           the developer experience as enjoyable as possible.
         </p>
       </GridContainer>
 
       <GridContainer className="mt-16">
-        <div className="grid w-full grid-flow-dense grid-cols-30 gap-2 bg-gray-950/5 p-2 dark:bg-white/10">
+        <div className="grid w-full grid-flow-dense grid-cols-30 gap-2 bg-neutral-950/5 p-2 dark:bg-white/10">
           <BentoItem className="col-span-full">
             <BentoHeader>
               <BentoIcon>
@@ -99,31 +99,31 @@ export default function WhyTailwindCssSection() {
               <div className="group flex flex-col gap-2">
                 <div className="flex justify-start not-sm:hidden">
                   <div className="flex w-10 shrink-0 grow-0 gap-2">
-                    <div className="h-8 w-px shrink-0 bg-gray-950/20 dark:bg-white/30"></div>
-                    <span className="text-gray-950 dark:text-white">
+                    <div className="h-8 w-px shrink-0 bg-neutral-950/20 dark:bg-white/30"></div>
+                    <span className="text-neutral-950 dark:text-white">
                       <Code>Mobile</Code>
                     </span>
                   </div>
                   <div className="ml-150 flex w-32 shrink-0 grow-0 gap-2">
-                    <div className="h-8 w-px shrink-0 bg-gray-950/20 not-group-has-data-sm:bg-gray-950/5 dark:bg-white/30 dark:not-group-has-data-sm:bg-white/10"></div>
+                    <div className="h-8 w-px shrink-0 bg-neutral-950/20 not-group-has-data-sm:bg-neutral-950/5 dark:bg-white/30 dark:not-group-has-data-sm:bg-white/10"></div>
                     <span className="not-group-has-data-sm:opacity-40">
                       <Code>sm</Code>
                     </span>
                   </div>
                   <div className="flex w-64 shrink-0 grow-0 gap-2">
-                    <div className="h-8 w-px shrink-0 bg-gray-950/20 not-group-has-data-md:bg-gray-950/5 dark:bg-white/30 dark:not-group-has-data-md:bg-white/10"></div>
+                    <div className="h-8 w-px shrink-0 bg-neutral-950/20 not-group-has-data-md:bg-neutral-950/5 dark:bg-white/30 dark:not-group-has-data-md:bg-white/10"></div>
                     <span className="not-group-has-data-md:opacity-40">
                       <Code>md</Code>
                     </span>
                   </div>
                   <div className="flex w-64 shrink-0 grow-0 gap-2">
-                    <div className="h-8 w-px shrink-0 bg-gray-950/20 not-group-has-data-lg:bg-gray-950/5 dark:bg-white/30 dark:not-group-has-data-lg:bg-white/10"></div>
+                    <div className="h-8 w-px shrink-0 bg-neutral-950/20 not-group-has-data-lg:bg-neutral-950/5 dark:bg-white/30 dark:not-group-has-data-lg:bg-white/10"></div>
                     <span className="not-group-has-data-lg:opacity-40">
                       <Code>lg</Code>
                     </span>
                   </div>
                   <div className="flex w-64 shrink-0 grow-0 gap-2">
-                    <div className="h-8 w-px shrink-0 bg-gray-950/20 not-group-has-data-xl:bg-gray-950/5 dark:bg-white/30 dark:not-group-has-data-xl:bg-white/10"></div>
+                    <div className="h-8 w-px shrink-0 bg-neutral-950/20 not-group-has-data-xl:bg-neutral-950/5 dark:bg-white/30 dark:not-group-has-data-xl:bg-white/10"></div>
                     <span className="not-group-has-data-xl:opacity-40">
                       <Code>xl</Code>
                     </span>
@@ -131,42 +131,42 @@ export default function WhyTailwindCssSection() {
                 </div>
                 <Resizable>
                   <ResizablePanel className="@container max-sm:mr-0!">
-                    <div className="relative grid gap-10 rounded-t-2xl bg-white p-6 pb-10 ring ring-gray-950/5 @min-[theme(--breakpoint-lg)]:grid-cols-2 @min-[theme(--breakpoint-lg)]:px-20 @min-[theme(--breakpoint-lg)]:py-8 @min-[theme(--breakpoint-lg)]:pb-10 dark:bg-gray-950 dark:ring-white/10">
+                    <div className="relative grid gap-10 rounded-t-2xl bg-white p-6 pb-10 ring ring-neutral-950/5 @min-[theme(--breakpoint-lg)]:grid-cols-2 @min-[theme(--breakpoint-lg)]:px-20 @min-[theme(--breakpoint-lg)]:py-8 @min-[theme(--breakpoint-lg)]:pb-10 dark:bg-neutral-950 dark:ring-white/10">
                       <div className="flex flex-1 flex-col">
                         <div className="relative mb-4 overflow-hidden rounded-lg @max-[theme(--breakpoint-xl)]:-mx-4 @max-[theme(--breakpoint-xl)]:-mt-4 @min-[theme(--breakpoint-lg)]:hidden">
                           <div className="grid grid-cols-1 gap-2 @min-[theme(--breakpoint-sm)]:grid-cols-4">
                             <img
                               alt=""
                               src={responsive1.src}
-                              className="h-48 w-full rounded-lg bg-gray-950/5 object-cover @min-[theme(--breakpoint-sm)]:col-span-2 @min-[theme(--breakpoint-sm)]:h-40"
+                              className="h-48 w-full rounded-lg bg-neutral-950/5 object-cover @min-[theme(--breakpoint-sm)]:col-span-2 @min-[theme(--breakpoint-sm)]:h-40"
                             />
 
                             <img
                               alt=""
                               src={responsive2.src}
-                              className="col-span-2 h-48 w-full rounded-lg bg-gray-950/5 object-cover @max-[theme(--breakpoint-sm)]:hidden @min-[theme(--breakpoint-md)]:col-span-1 @min-[theme(--breakpoint-sm)]:h-40"
+                              className="col-span-2 h-48 w-full rounded-lg bg-neutral-950/5 object-cover @max-[theme(--breakpoint-sm)]:hidden @min-[theme(--breakpoint-md)]:col-span-1 @min-[theme(--breakpoint-sm)]:h-40"
                             />
 
                             <img
                               alt=""
                               src={responsive3.src}
-                              className="h-48 w-full rounded-lg bg-gray-950/5 object-cover @max-[theme(--breakpoint-md)]:hidden @min-[theme(--breakpoint-sm)]:h-40"
+                              className="h-48 w-full rounded-lg bg-neutral-950/5 object-cover @max-[theme(--breakpoint-md)]:hidden @min-[theme(--breakpoint-sm)]:h-40"
                             />
                           </div>
 
-                          <div className="absolute inset-0 flex flex-col justify-end gap-2 bg-linear-to-b from-transparent via-transparent to-gray-950 p-6 @min-[theme(--breakpoint-sm)]:hidden">
+                          <div className="absolute inset-0 flex flex-col justify-end gap-2 bg-linear-to-b from-transparent via-transparent to-neutral-950 p-6 @min-[theme(--breakpoint-sm)]:hidden">
                             <span className="text-sm/6 font-semibold text-white/80">Entire house</span>
                             <span className="text-xl/6 font-semibold text-white">Beach House on Lake Huron</span>
                           </div>
                         </div>
 
-                        <span className="font-medium text-gray-500 @max-[theme(--breakpoint-sm)]:hidden dark:text-gray-500">
+                        <span className="font-medium text-neutral-500 @max-[theme(--breakpoint-sm)]:hidden dark:text-neutral-500">
                           Entire house
                         </span>
 
                         <div className="grid grid-cols-1 gap-4 @min-[theme(--breakpoint-sm)]:grid-cols-[1fr_auto] @min-[theme(--breakpoint-xl)]:grid-cols-1">
                           <div>
-                            <span className="mt-2 text-3xl font-semibold text-gray-950 @max-[theme(--breakpoint-sm)]:hidden dark:text-white">
+                            <span className="mt-2 text-3xl font-semibold text-neutral-950 @max-[theme(--breakpoint-sm)]:hidden dark:text-white">
                               Beach House on Lake Huron
                             </span>
 
@@ -175,8 +175,8 @@ export default function WhyTailwindCssSection() {
                                 <StarIcon className="size-4" />
                                 <span className="text-sm/6 font-medium">2.66</span>
                               </span>
-                              <span className="text-sm/6 text-gray-500">(128 reviews)</span>
-                              <span className="text-pink-300 dark:text-gray-600">&middot;</span>
+                              <span className="text-sm/6 text-neutral-500">(128 reviews)</span>
+                              <span className="text-pink-300 dark:text-neutral-600">&middot;</span>
                               <span className="text-sm/6 font-medium text-pink-600 dark:text-pink-500">
                                 Bayfield, ON
                               </span>
@@ -194,7 +194,7 @@ export default function WhyTailwindCssSection() {
                         </div>
 
                         <div>
-                          <p className="mt-4 line-clamp-2 text-sm/6 text-gray-600 @min-[theme(--breakpoint-xl)]:max-w-md dark:text-gray-400">
+                          <p className="mt-4 line-clamp-2 text-sm/6 text-neutral-600 @min-[theme(--breakpoint-xl)]:max-w-md dark:text-neutral-400">
                             This sunny and spacious room is for those traveling light and looking for a comfy and cozy
                             place to lay their head for a night...{" "}
                             <span className="hidden font-bold text-pink-600 before:text-white sm:@max-[theme(--breakpoint-sm)]:inline-block dark:text-pink-500">
@@ -220,28 +220,28 @@ export default function WhyTailwindCssSection() {
                         <img
                           alt=""
                           src={responsive1.src}
-                          className="col-span-4 h-[150px] w-full rounded-lg bg-gray-950/5 object-cover @min-[theme(--breakpoint-xl)]:col-span-2 @min-[theme(--breakpoint-xl)]:row-span-2 @min-[theme(--breakpoint-xl)]:aspect-square @min-[theme(--breakpoint-xl)]:h-[308px]"
+                          className="col-span-4 h-[150px] w-full rounded-lg bg-neutral-950/5 object-cover @min-[theme(--breakpoint-xl)]:col-span-2 @min-[theme(--breakpoint-xl)]:row-span-2 @min-[theme(--breakpoint-xl)]:aspect-square @min-[theme(--breakpoint-xl)]:h-[308px]"
                         />
                         <img
                           alt=""
                           src={responsive2.src}
-                          className="col-span-2 h-[150px] w-full rounded-lg bg-gray-950/5 @max-[theme(--breakpoint-xl)]:aspect-square @min-[theme(--breakpoint-xl)]:col-span-1"
+                          className="col-span-2 h-[150px] w-full rounded-lg bg-neutral-950/5 @max-[theme(--breakpoint-xl)]:aspect-square @min-[theme(--breakpoint-xl)]:col-span-1"
                         />
                         <img
                           alt=""
                           src={responsive3.src}
-                          className="col-span-2 h-[150px] w-full rounded-lg bg-gray-950/5 @max-[theme(--breakpoint-xl)]:aspect-square @min-[theme(--breakpoint-xl)]:col-span-1"
+                          className="col-span-2 h-[150px] w-full rounded-lg bg-neutral-950/5 @max-[theme(--breakpoint-xl)]:aspect-square @min-[theme(--breakpoint-xl)]:col-span-1"
                         />
                         <div className="contents @max-[theme(--breakpoint-xl)]:hidden">
                           <img
                             alt=""
                             src={responsive4.src}
-                            className="aspect-square size-[150px] rounded-lg bg-gray-950/5"
+                            className="aspect-square size-[150px] rounded-lg bg-neutral-950/5"
                           />
                           <img
                             alt=""
                             src={responsive5.src}
-                            className="aspect-square size-[150px] rounded-lg bg-gray-950/5"
+                            className="aspect-square size-[150px] rounded-lg bg-neutral-950/5"
                           />
                         </div>
                       </div>
@@ -290,7 +290,7 @@ export default function WhyTailwindCssSection() {
                     return (
                       <div key={name} data-target className="flex snap-center snap-always flex-col items-center gap-2">
                         <Code>{name}</Code>
-                        <div className="shadow ring inset-ring ring-gray-950/10 inset-ring-white/20">
+                        <div className="shadow ring inset-ring ring-neutral-950/10 inset-ring-white/20">
                           <div className={clsx("size-(--size) bg-white/15", className)} />
                         </div>
                       </div>
@@ -303,7 +303,7 @@ export default function WhyTailwindCssSection() {
                 </Autoscroll>
 
                 <div className="absolute inset-0 mt-8 flex items-center justify-center">
-                  <img alt="" src={filtersImg.src} className="size-64 inset-ring inset-ring-gray-950/10" />
+                  <img alt="" src={filtersImg.src} className="size-64 inset-ring inset-ring-neutral-950/10" />
                 </div>
               </div>
             </BentoBody>
@@ -318,7 +318,7 @@ export default function WhyTailwindCssSection() {
                 <BentoTitle>Dark mode</BentoTitle>
                 <BentoDescription>
                   If you’re not a fan of burning your retinas, just stick{" "}
-                  <code className="font-medium text-gray-950 dark:text-white">dark:</code> in front of any color to
+                  <code className="font-medium text-neutral-950 dark:text-white">dark:</code> in front of any color to
                   apply it in dark mode.
                 </BentoDescription>
               </div>
@@ -375,7 +375,7 @@ export default function WhyTailwindCssSection() {
             marginTop={56}
             offsetY={-4}
             padding={8}
-            className="pointer-events-none absolute top-0 left-0 z-10 rounded-full border border-gray-950 bg-gray-950/90 py-0.5 pr-2 pb-1 pl-3 text-center font-mono text-xs/6 font-medium whitespace-nowrap text-white opacity-0 inset-ring inset-ring-white/10 will-change-[transform,opacity] data-show:opacity-100 data-show:transition-opacity data-show:delay-100 data-show:duration-200"
+            className="pointer-events-none absolute top-0 left-0 z-10 rounded-full border border-neutral-950 bg-neutral-950/90 py-0.5 pr-2 pb-1 pl-3 text-center font-mono text-xs/6 font-medium whitespace-nowrap text-white opacity-0 inset-ring inset-ring-white/10 will-change-[transform,opacity] data-show:opacity-100 data-show:transition-opacity data-show:delay-100 data-show:duration-200"
           />
 
           <BentoItem className="col-span-full xl:col-span-18">
@@ -454,7 +454,7 @@ export default function WhyTailwindCssSection() {
                         return (
                           <Fragment key={shade}>
                             <div className="relative">
-                              <div className="absolute -mt-1 w-screen border-t border-gray-950/5 dark:border-white/10"></div>
+                              <div className="absolute -mt-1 w-screen border-t border-neutral-950/5 dark:border-white/10"></div>
                               <div className="flex h-(--height) w-(--width) items-center">
                                 <Code>{shade}</Code>
                               </div>
@@ -465,14 +465,14 @@ export default function WhyTailwindCssSection() {
                                 <TooltipTrigger key={value} content={value} className="group relative">
                                   {shadeIdx === 0 && (
                                     <>
-                                      <div className="pointer-events-none absolute -top-1 -left-1 h-screen border-l border-gray-950/5 dark:border-white/10"></div>
-                                      <div className="pointer-events-none absolute -top-1 -left-1 h-16 origin-top-left translate-px rotate-225 border-l border-gray-950/5 sm:h-24 dark:border-white/10"></div>
+                                      <div className="pointer-events-none absolute -top-1 -left-1 h-screen border-l border-neutral-950/5 dark:border-white/10"></div>
+                                      <div className="pointer-events-none absolute -top-1 -left-1 h-16 origin-top-left translate-px rotate-225 border-l border-neutral-950/5 sm:h-24 dark:border-white/10"></div>
                                     </>
                                   )}
 
                                   <div
                                     style={{ "--color": `var(--color-${color}-${shade})` } as CSSProperties}
-                                    className="h-(--height) w-(--width) bg-(--color) inset-ring inset-ring-gray-950/10 transition-opacity group-hover:opacity-75 group-data-[tooltip-hover=true]:opacity-100 dark:inset-ring-white/10"
+                                    className="h-(--height) w-(--width) bg-(--color) inset-ring inset-ring-neutral-950/10 transition-opacity group-hover:opacity-75 group-data-[tooltip-hover=true]:opacity-100 dark:inset-ring-white/10"
                                   />
                                 </TooltipTrigger>
                               );
@@ -502,31 +502,31 @@ export default function WhyTailwindCssSection() {
             <BentoBody className="h-112">
               <div className="-mr-16 -mb-8 [--size:--spacing(48)] lg:flex lg:justify-center xl:block">
                 <div className="-mt-18 sm:-mt-26">
-                  <div className="bg-white p-6 ring ring-gray-950/5 sm:p-16 dark:bg-gray-950 dark:ring-white/10">
-                    <h3 className="text-base/6 font-semibold text-gray-950 dark:text-white">Browse properties</h3>
+                  <div className="bg-white p-6 ring ring-neutral-950/5 sm:p-16 dark:bg-neutral-950 dark:ring-white/10">
+                    <h3 className="text-base/6 font-semibold text-neutral-950 dark:text-white">Browse properties</h3>
                     <div className="mt-6 grid grid-cols-[repeat(2,var(--size))] grid-rows-[repeat(3,var(--size))] gap-2 sm:grid-cols-[repeat(3,var(--size))] sm:grid-rows-[repeat(2,var(--size))]">
                       <div className="relative col-span-2 row-span-1 overflow-hidden rounded-t-2xl sm:col-span-1 sm:row-span-2 sm:rounded-none sm:rounded-l-2xl dark:outline dark:outline-white/10">
                         <img alt="" className="not-sm:hidden" src={cssGrid1.src} />
                         <img alt="" className="sm:hidden" src={cssGrid1Mobile.src} />
-                        <div className="absolute inset-0 flex items-end bg-linear-to-b from-transparent via-transparent to-gray-950">
+                        <div className="absolute inset-0 flex items-end bg-linear-to-b from-transparent via-transparent to-neutral-950">
                           <span className="p-4 text-sm/5 font-semibold text-white">Treehouses</span>
                         </div>
                       </div>
                       <div className="relative dark:outline dark:outline-white/10">
                         <img alt="" src={cssGrid2.src} />
-                        <div className="absolute inset-0 flex items-end bg-linear-to-b from-transparent via-transparent to-gray-950">
+                        <div className="absolute inset-0 flex items-end bg-linear-to-b from-transparent via-transparent to-neutral-950">
                           <span className="p-4 text-sm/5 font-semibold text-white">Mansions</span>
                         </div>
                       </div>
                       <div className="relative overflow-hidden sm:rounded-tr-2xl dark:outline dark:outline-white/10">
                         <img alt="" src={cssGrid3.src} />
-                        <div className="absolute inset-0 flex items-end bg-linear-to-b from-transparent via-transparent to-gray-950">
+                        <div className="absolute inset-0 flex items-end bg-linear-to-b from-transparent via-transparent to-neutral-950">
                           <span className="p-4 text-sm/5 font-semibold text-white">Lakefront cottages</span>
                         </div>
                       </div>
                       <div className="relative col-span-2 overflow-hidden rounded-b-2xl sm:rounded-bl-none dark:outline dark:outline-white/10">
                         <img alt="" className="aspect-2/1" src={cssGrid4.src} />
-                        <div className="absolute inset-0 flex items-end bg-linear-to-b from-transparent via-transparent to-gray-950">
+                        <div className="absolute inset-0 flex items-end bg-linear-to-b from-transparent via-transparent to-neutral-950">
                           <span className="p-4 text-sm/5 font-semibold text-white">Designer homes</span>
                         </div>
                       </div>
@@ -622,7 +622,7 @@ export default function WhyTailwindCssSection() {
                 </div>
               </div>
               <div className="@container relative isolate flex h-full items-center justify-center">
-                <div className="absolute bottom-12 -left-2 z-1 w-[60cqw] shrink-0 divide-y divide-gray-950/5 rounded-xl bg-white shadow-2xl inset-ring inset-ring-gray-950/5 dark:divide-white/5 dark:bg-gray-800 dark:inset-ring-white/5">
+                <div className="absolute bottom-12 -left-2 z-1 w-[60cqw] shrink-0 divide-y divide-neutral-950/5 rounded-xl bg-white shadow-2xl inset-ring inset-ring-neutral-950/5 dark:divide-white/5 dark:bg-neutral-800 dark:inset-ring-white/5">
                   {[
                     { src: avatar4.src, name: "Will Winton", role: "Director of Operations" },
                     { src: avatar5.src, name: "Kristin Yardly", role: "Marketing Coordinator" },
@@ -635,18 +635,18 @@ export default function WhyTailwindCssSection() {
                           <img
                             alt=""
                             src={user.src}
-                            className="size-12 shrink-0 rounded-full bg-gray-950/5 outline -outline-offset-1 outline-gray-950/10 dark:outline-white/10"
+                            className="size-12 shrink-0 rounded-full bg-neutral-950/5 outline -outline-offset-1 outline-neutral-950/10 dark:outline-white/10"
                           />
                         </div>
                         <div className="flex flex-col truncate">
-                          <span className="text-sm/6 font-medium text-gray-950 dark:text-white">{user.name}</span>
-                          <span className="truncate text-sm/6 text-gray-500 dark:text-gray-400">{user.role}</span>
+                          <span className="text-sm/6 font-medium text-neutral-950 dark:text-white">{user.name}</span>
+                          <span className="truncate text-sm/6 text-neutral-500 dark:text-neutral-400">{user.role}</span>
                         </div>
                       </div>
                     );
                   })}
                 </div>
-                <div className="absolute -right-3 bottom-12 w-[50cqw] shrink-0 divide-y divide-gray-950/5 rounded-xl bg-white shadow-2xl inset-ring inset-ring-gray-950/5 dark:divide-white/5 dark:bg-gray-800 dark:inset-ring-white/5">
+                <div className="absolute -right-3 bottom-12 w-[50cqw] shrink-0 divide-y divide-neutral-950/5 rounded-xl bg-white shadow-2xl inset-ring inset-ring-neutral-950/5 dark:divide-white/5 dark:bg-neutral-800 dark:inset-ring-white/5">
                   {[
                     { src: avatar1.src, name: "سارة أحمد", role: "مديرة مشاريع" },
                     { src: avatar2.src, name: "علي محمد", role: "مطور برمجيات" },
@@ -658,12 +658,12 @@ export default function WhyTailwindCssSection() {
                           <img
                             alt=""
                             src={user.src}
-                            className="size-12 shrink-0 rounded-full bg-gray-950/5 outline -outline-offset-1 outline-gray-950/10 dark:outline-white/10"
+                            className="size-12 shrink-0 rounded-full bg-neutral-950/5 outline -outline-offset-1 outline-neutral-950/10 dark:outline-white/10"
                           />
                         </div>
                         <div className="flex flex-col truncate">
-                          <span className="text-sm/6 font-medium text-gray-950 dark:text-white">{user.name}</span>
-                          <span className="truncate text-sm/6 text-gray-500 dark:text-gray-400">{user.role}</span>
+                          <span className="text-sm/6 font-medium text-neutral-950 dark:text-white">{user.name}</span>
+                          <span className="truncate text-sm/6 text-neutral-500 dark:text-neutral-400">{user.role}</span>
                         </div>
                       </div>
                     );
@@ -735,15 +735,15 @@ export default function WhyTailwindCssSection() {
               </div>
             </BentoHeader>
             <BentoBody className="h-112">
-              <div className="-mt-27 -mr-124 -mb-8 bg-white px-6 py-16 ring ring-gray-950/5 md:px-16 xl:-mr-26 dark:bg-gray-950 dark:ring-white/10">
+              <div className="-mt-27 -mr-124 -mb-8 bg-white px-6 py-16 ring ring-neutral-950/5 md:px-16 xl:-mr-26 dark:bg-neutral-950 dark:ring-white/10">
                 <div className="flex flex-col gap-2">
-                  <span className="text-sm/7 font-medium text-gray-950/75 dark:text-white/75">
+                  <span className="text-sm/7 font-medium text-neutral-950/75 dark:text-white/75">
                     Power Meets Precision
                   </span>
-                  <h3 className="text-4xl/12 font-semibold text-gray-950 dark:text-white">
+                  <h3 className="text-4xl/12 font-semibold text-neutral-950 dark:text-white">
                     Redefining real-time performance
                   </h3>
-                  <p className="text-lg/7 font-medium text-gray-950/75 dark:text-white/75">
+                  <p className="text-lg/7 font-medium text-neutral-950/75 dark:text-white/75">
                     Our next-generation rendering engine delivers unmatched speed and efficiency, empowering creators to
                     push boundaries like never before.
                   </p>
@@ -751,30 +751,30 @@ export default function WhyTailwindCssSection() {
                 <div className="mt-10 flex flex-col gap-10">
                   <div className="flex gap-6">
                     <div className="flex flex-1 flex-col gap-2.5">
-                      <span className="text-base/7 font-medium text-gray-950 dark:text-white">
+                      <span className="text-base/7 font-medium text-neutral-950 dark:text-white">
                         Render time performance
                       </span>
-                      <div className="h-2.5 w-full rounded-full bg-linear-to-r from-emerald-500 to-sky-400 ring-1 ring-gray-950/10 ring-inset dark:from-emerald-400 dark:ring-white/10"></div>
+                      <div className="h-2.5 w-full rounded-full bg-linear-to-r from-emerald-500 to-sky-400 ring-1 ring-neutral-950/10 ring-inset dark:from-emerald-400 dark:ring-white/10"></div>
                     </div>
-                    <span className="text-3xl/12 font-semibold text-gray-950 dark:text-white">6.4x</span>
+                    <span className="text-3xl/12 font-semibold text-neutral-950 dark:text-white">6.4x</span>
                   </div>
                   <div className="flex gap-6">
                     <div className="flex flex-1 flex-col gap-2.5">
-                      <span className="text-base/7 font-medium text-gray-950 dark:text-white">
+                      <span className="text-base/7 font-medium text-neutral-950 dark:text-white">
                         Real-time frame rate
                       </span>
-                      <div className="h-2.5 w-3/4 rounded-full bg-linear-to-r from-pink-600 to-amber-300 ring-1 ring-gray-950/10 ring-inset dark:from-pink-500 dark:to-amber-200 dark:ring-white/10"></div>
+                      <div className="h-2.5 w-3/4 rounded-full bg-linear-to-r from-pink-600 to-amber-300 ring-1 ring-neutral-950/10 ring-inset dark:from-pink-500 dark:to-amber-200 dark:ring-white/10"></div>
                     </div>
-                    <span className="text-3xl/12 font-semibold text-gray-950 dark:text-white">4.2x</span>
+                    <span className="text-3xl/12 font-semibold text-neutral-950 dark:text-white">4.2x</span>
                   </div>
                   <div className="flex gap-6">
                     <div className="flex flex-1 flex-col gap-2.5">
-                      <span className="text-base/7 font-medium text-gray-950 dark:text-white">
+                      <span className="text-base/7 font-medium text-neutral-950 dark:text-white">
                         Multi-platform build time
                       </span>
-                      <div className="h-2.5 w-1/2 rounded-full bg-linear-to-r from-purple-600 to-cyan-400 ring-1 ring-gray-950/10 ring-inset dark:from-purple-500 dark:ring-white/10"></div>
+                      <div className="h-2.5 w-1/2 rounded-full bg-linear-to-r from-purple-600 to-cyan-400 ring-1 ring-neutral-950/10 ring-inset dark:from-purple-500 dark:ring-white/10"></div>
                     </div>
-                    <span className="text-3xl/12 font-semibold text-gray-950 dark:text-white">2.7x</span>
+                    <span className="text-3xl/12 font-semibold text-neutral-950 dark:text-white">2.7x</span>
                   </div>
                 </div>
               </div>
@@ -805,5 +805,5 @@ export default function WhyTailwindCssSection() {
 }
 
 function Code({ children }: { children: ReactNode }) {
-  return <div className="font-mono text-[13px]/7 text-gray-950 dark:text-white">{children}</div>;
+  return <div className="font-mono text-[13px]/7 text-neutral-950 dark:text-white">{children}</div>;
 }
diff --git a/src/components/home/why-tailwind-css-section/dark-mode.tsx b/src/components/home/why-tailwind-css-section/dark-mode.tsx
index 01c033f1e..a6f1d16b3 100644
--- a/src/components/home/why-tailwind-css-section/dark-mode.tsx
+++ b/src/components/home/why-tailwind-css-section/dark-mode.tsx
@@ -54,7 +54,7 @@ export function DarkMode() {
         </div>
 
         <div className="isolate flex h-full w-full items-center justify-center">
-          <div className="relative grid h-112 w-[375px] grid-cols-1 grid-rows-1 overflow-hidden rounded-t-4xl bg-gray-950/10 outline outline-gray-950/10 dark:outline-white/10">
+          <div className="relative grid h-112 w-[375px] grid-cols-1 grid-rows-1 overflow-hidden rounded-t-4xl bg-neutral-950/10 outline outline-neutral-950/10 dark:outline-white/10">
             <div className="col-start-1 row-start-1">
               <motion.img
                 ref={(el) => {
diff --git a/src/components/icon-button.tsx b/src/components/icon-button.tsx
index 0536b7867..4ad84a211 100644
--- a/src/components/icon-button.tsx
+++ b/src/components/icon-button.tsx
@@ -2,7 +2,7 @@ export function IconButton({ className, children, ...props }: React.ComponentPro
   return (
     <button
       type="button"
-      className={`relative inline-grid size-7 place-items-center rounded-md text-gray-950 hover:bg-gray-950/5 dark:text-white dark:hover:bg-white/10 ${className}`}
+      className={`relative inline-grid size-7 place-items-center rounded-md text-neutral-950 hover:bg-neutral-950/5 dark:text-white dark:hover:bg-white/10 ${className}`}
       {...props}
     >
       <span className="absolute top-1/2 left-1/2 size-11 -translate-1/2 pointer-fine:hidden" />
diff --git a/src/components/installation-steps.tsx b/src/components/installation-steps.tsx
index a3dd96259..1ffd2c148 100644
--- a/src/components/installation-steps.tsx
+++ b/src/components/installation-steps.tsx
@@ -18,9 +18,9 @@ export function Steps({ steps }: { steps: Step[] }) {
       {steps.map((step, stepIdx) => (
         <Fragment key={stepIdx}>
           <div data-tabs={step.tabs?.join(" ") ?? null}>
-            <div className="grid size-7 grid-cols-1 grid-rows-1 place-content-center border-1 border-gray-700/50 font-mono text-[10px]/7 font-medium text-gray-950 dark:border-white/50 dark:text-white">
+            <div className="grid size-7 grid-cols-1 grid-rows-1 place-content-center border-1 border-neutral-700/50 font-mono text-[10px]/7 font-medium text-neutral-950 dark:border-white/50 dark:text-white">
               <div className="col-start-1 row-start-1 grid place-content-center">
-                <div className="h-7 w-5 bg-white dark:bg-gray-950" />
+                <div className="h-7 w-5 bg-white dark:bg-neutral-950" />
               </div>
               <div className="col-start-1 row-start-1 grid place-content-center tracking-widest">
                 {(stepIdx + 1).toString().padStart(2, "0")}
diff --git a/src/components/installation-tabs.tsx b/src/components/installation-tabs.tsx
index ec15187ea..2b4e29006 100644
--- a/src/components/installation-tabs.tsx
+++ b/src/components/installation-tabs.tsx
@@ -15,7 +15,7 @@ export function TabBar({ tabs }: { tabs: Tab[] }) {
   return (
     <div className="-mx-4 mb-6 flex overflow-auto sm:-mx-6">
       <div className="min-w-full flex-none px-4 sm:px-6">
-        <ul className="mb-px flex gap-x-6 border-b border-gray-950/5 whitespace-nowrap dark:border-white/10">
+        <ul className="mb-px flex gap-x-6 border-b border-neutral-950/5 whitespace-nowrap dark:border-white/10">
           {tabs.map((tab) => (
             <li key={tab.title}>
               <h2>
@@ -25,8 +25,8 @@ export function TabBar({ tabs }: { tabs: Tab[] }) {
                   className={clsx(
                     "-mb-px flex border-b pb-2 text-sm/7 font-medium",
                     pathname === tab.url
-                      ? "border-current text-gray-950 dark:text-white"
-                      : "border-transparent text-gray-700 hover:border-gray-950/25 dark:text-gray-200 dark:hover:border-white/25",
+                      ? "border-current text-neutral-950 dark:text-white"
+                      : "border-transparent text-neutral-700 hover:border-neutral-950/25 dark:text-neutral-200 dark:hover:border-white/25",
                   )}
                 >
                   {tab.title}
diff --git a/src/components/mobile-docs-nav.tsx b/src/components/mobile-docs-nav.tsx
index 5c84ca41e..cabf4a71a 100644
--- a/src/components/mobile-docs-nav.tsx
+++ b/src/components/mobile-docs-nav.tsx
@@ -22,7 +22,7 @@ export function MobileNav({
   }, [isOpen]);
 
   return (
-    <div className="flex h-14 items-center border-t border-gray-950/5 bg-white px-4 sm:px-6 lg:hidden dark:border-white/10 dark:bg-gray-950">
+    <div className="flex h-14 items-center border-t border-neutral-950/5 bg-white px-4 sm:px-6 lg:hidden dark:border-white/10 dark:bg-neutral-950">
       <IconButton onClick={() => setIsOpen(true)} aria-label="Open navigation menu" className="-ml-1.5">
         <svg viewBox="0 0 16 16" fill="currentColor" className="size-4">
           <path
@@ -36,11 +36,11 @@ export function MobileNav({
       {breadcrumb}
 
       <Dialog open={isOpen} onClose={() => setIsOpen(false)} className="fixed inset-0 lg:hidden">
-        <div className="fixed inset-x-0 top-28 bottom-0 bg-white/90 dark:bg-gray-950/80" />
+        <div className="fixed inset-x-0 top-28 bottom-0 bg-white/90 dark:bg-neutral-950/80" />
         <DialogPanel className="fixed inset-y-0 left-0 flex w-full flex-col sm:max-w-xs">
-          <div className="w-screen shrink-0 border-b border-gray-950/5 pr-(--scrollbar-padding) dark:border-white/10">
+          <div className="w-screen shrink-0 border-b border-neutral-950/5 pr-(--scrollbar-padding) dark:border-white/10">
             {header}
-            <div className="flex h-14 items-center border-t border-gray-950/5 bg-white px-4 sm:px-6 lg:hidden dark:border-white/10 dark:bg-gray-950">
+            <div className="flex h-14 items-center border-t border-neutral-950/5 bg-white px-4 sm:px-6 lg:hidden dark:border-white/10 dark:bg-neutral-950">
               <IconButton
                 onClick={() => setIsOpen(false)}
                 aria-label="Close navigation menu"
@@ -59,11 +59,11 @@ export function MobileNav({
               {breadcrumb}
             </div>
           </div>
-          <div className="min-h-0 shrink overflow-y-auto border-r border-gray-950/5 dark:border-white/10">
-            <div className="relative bg-white p-6 dark:bg-gray-950">
+          <div className="min-h-0 shrink overflow-y-auto border-r border-neutral-950/5 dark:border-white/10">
+            <div className="relative bg-white p-6 dark:bg-neutral-950">
               {children}
               <div className="absolute top-6 right-6 flex">
-                <CloseButton className="inline-flex rounded-md bg-gray-950/2 px-2 py-0.5 font-sans text-xs/5 text-gray-500 inset-ring inset-ring-gray-950/8 dark:bg-white/4 dark:inset-ring-white/16">
+                <CloseButton className="inline-flex rounded-md bg-neutral-950/2 px-2 py-0.5 font-sans text-xs/5 text-neutral-500 inset-ring inset-ring-neutral-950/8 dark:bg-white/4 dark:inset-ring-white/16">
                   esc
                 </CloseButton>
               </div>
diff --git a/src/components/multi-cursor/animation.tsx b/src/components/multi-cursor/animation.tsx
index f63b498f5..8cf3621a4 100644
--- a/src/components/multi-cursor/animation.tsx
+++ b/src/components/multi-cursor/animation.tsx
@@ -176,12 +176,12 @@ export function MultiCursorPreview() {
   let { className } = useContext(AnimationContext);
 
   return (
-    <div className="not-prose rounded border border-gray-950/10 px-4 py-2 dark:border-white/5">
+    <div className="not-prose rounded border border-neutral-950/10 px-4 py-2 dark:border-white/5">
       <nav className="flex justify-center space-x-4">
         <a
           href="#/dashboard"
           className={clsx(
-            "rounded-lg px-3 py-2 text-gray-700 hover:bg-gray-100 hover:text-gray-900 dark:text-gray-300 dark:hover:bg-gray-950/50 dark:hover:text-white",
+            "rounded-lg px-3 py-2 text-neutral-700 hover:bg-neutral-100 hover:text-neutral-900 dark:text-neutral-300 dark:hover:bg-neutral-950/50 dark:hover:text-white",
             className,
           )}
         >
@@ -190,7 +190,7 @@ export function MultiCursorPreview() {
         <a
           href="#/team"
           className={clsx(
-            "rounded-lg px-3 py-2 text-gray-700 hover:bg-gray-100 hover:text-gray-900 dark:text-gray-300 dark:hover:bg-gray-950/50 dark:hover:text-white",
+            "rounded-lg px-3 py-2 text-neutral-700 hover:bg-neutral-100 hover:text-neutral-900 dark:text-neutral-300 dark:hover:bg-neutral-950/50 dark:hover:text-white",
             className,
           )}
         >
@@ -199,7 +199,7 @@ export function MultiCursorPreview() {
         <a
           href="#/projects"
           className={clsx(
-            "rounded-lg px-3 py-2 text-gray-700 hover:bg-gray-100 hover:text-gray-900 dark:text-gray-300 dark:hover:bg-gray-950/50 dark:hover:text-white",
+            "rounded-lg px-3 py-2 text-neutral-700 hover:bg-neutral-100 hover:text-neutral-900 dark:text-neutral-300 dark:hover:bg-neutral-950/50 dark:hover:text-white",
             className,
           )}
         >
@@ -208,7 +208,7 @@ export function MultiCursorPreview() {
         <a
           href="#/reports"
           className={clsx(
-            "rounded-lg px-3 py-2 text-gray-700 hover:bg-gray-100 hover:text-gray-900 dark:text-gray-300 dark:hover:bg-gray-950/50 dark:hover:text-white",
+            "rounded-lg px-3 py-2 text-neutral-700 hover:bg-neutral-100 hover:text-neutral-900 dark:text-neutral-300 dark:hover:bg-neutral-950/50 dark:hover:text-white",
             className,
           )}
         >
diff --git a/src/components/multi-cursor/example.tsx b/src/components/multi-cursor/example.tsx
index fb8f09f73..2a17a327d 100644
--- a/src/components/multi-cursor/example.tsx
+++ b/src/components/multi-cursor/example.tsx
@@ -8,16 +8,16 @@ export function MultiCursorCode() {
   let code = html`
     <nav class="flex justify-center space-x-4">
       <!-- prettier-ignore -->
-      <a href="/dashboard" class="__CLASS__ rounded-lg px-3 py-2 text-gray-700 hover:bg-gray-100 hover:text-gray-900">
+      <a href="/dashboard" class="__CLASS__ rounded-lg px-3 py-2 text-neutral-700 hover:bg-neutral-100 hover:text-neutral-900">
         Home
       </a>
-      <a href="/team" class="__CLASS__ rounded-lg px-3 py-2 text-gray-700 hover:bg-gray-100 hover:text-gray-900">
+      <a href="/team" class="__CLASS__ rounded-lg px-3 py-2 text-neutral-700 hover:bg-neutral-100 hover:text-neutral-900">
         Team
       </a>
-      <a href="/projects" class="__CLASS__ rounded-lg px-3 py-2 text-gray-700 hover:bg-gray-100 hover:text-gray-900">
+      <a href="/projects" class="__CLASS__ rounded-lg px-3 py-2 text-neutral-700 hover:bg-neutral-100 hover:text-neutral-900">
         Projects
       </a>
-      <a href="/reports" class="__CLASS__ rounded-lg px-3 py-2 text-gray-700 hover:bg-gray-100 hover:text-gray-900">
+      <a href="/reports" class="__CLASS__ rounded-lg px-3 py-2 text-neutral-700 hover:bg-neutral-100 hover:text-neutral-900">
         Reports
       </a>
     </nav>
diff --git a/src/components/nav-list.tsx b/src/components/nav-list.tsx
index 3d8a72ee4..418567087 100644
--- a/src/components/nav-list.tsx
+++ b/src/components/nav-list.tsx
@@ -14,7 +14,7 @@ type HeadingLevel = 1 | 2 | 3 | 4 | 5 | 6;
 export function NavListHeading({ children, level = 3 }: React.PropsWithChildren<{ level?: HeadingLevel }>) {
   let Element: `h${HeadingLevel}` = `h${level}`;
   return (
-    <Element className="font-mono text-sm/6 font-medium tracking-widest text-gray-500 uppercase sm:text-xs/6 dark:text-gray-400">
+    <Element className="font-mono text-sm/6 font-medium tracking-widest text-neutral-500 uppercase sm:text-xs/6 dark:text-neutral-400">
       {children}
     </Element>
   );
@@ -24,8 +24,8 @@ export function NavListItems({ children, nested = false }: React.PropsWithChildr
   return (
     <ul
       className={clsx(
-        "flex flex-col gap-2 border-l dark:border-[color-mix(in_oklab,_var(--color-gray-950),white_20%)]",
-        nested ? "border-transparent" : "border-[color-mix(in_oklab,_var(--color-gray-950),white_90%)]",
+        "flex flex-col gap-2 border-l dark:border-[color-mix(in_oklab,_var(--color-neutral-950),white_20%)]",
+        nested ? "border-transparent" : "border-[color-mix(in_oklab,_var(--color-neutral-950),white_90%)]",
       )}
     >
       {children}
@@ -47,8 +47,8 @@ export function NavListLink({
     <CloseButton
       as={Link}
       className={clsx(
-        "inline-block border-l border-transparent text-base/8 text-gray-600 hover:border-gray-950/25 hover:text-gray-950 sm:text-sm/6 dark:text-gray-300 dark:hover:border-white/25 dark:hover:text-white",
-        "aria-[current]:border-gray-950 aria-[current]:font-semibold aria-[current]:text-gray-950 dark:aria-[current]:border-white dark:aria-[current]:text-white",
+        "inline-block border-l border-transparent text-base/8 text-neutral-600 hover:border-neutral-950/25 hover:text-neutral-950 sm:text-sm/6 dark:text-neutral-300 dark:hover:border-white/25 dark:hover:text-white",
+        "aria-[current]:border-neutral-950 aria-[current]:font-semibold aria-[current]:text-neutral-950 dark:aria-[current]:border-white dark:aria-[current]:text-white",
         nested ? "pl-8 sm:pl-7.5" : "pl-5 sm:pl-4",
       )}
       href={href}
diff --git a/src/components/newsletter-form.tsx b/src/components/newsletter-form.tsx
index dac6054b7..d7a691fb7 100644
--- a/src/components/newsletter-form.tsx
+++ b/src/components/newsletter-form.tsx
@@ -7,7 +7,7 @@ export function NewsletterForm({ action }: { action: string }) {
             <svg
               viewBox="0 0 20 20"
               fill="currentColor"
-              className="size-4 text-gray-950/50 group-focus-within:text-gray-950 dark:text-white/50 dark:group-focus-within:text-white"
+              className="size-4 text-neutral-950/50 group-focus-within:text-neutral-950 dark:text-white/50 dark:group-focus-within:text-white"
             >
               <path d="M3 4a2 2 0 0 0-2 2v1.161l8.441 4.221a1.25 1.25 0 0 0 1.118 0L19 7.162V6a2 2 0 0 0-2-2H3Z" />
               <path d="m19 8.839-7.77 3.885a2.75 2.75 0 0 1-2.46 0L1 8.839V14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V8.839Z" />
@@ -20,7 +20,7 @@ export function NewsletterForm({ action }: { action: string }) {
             required
             autoComplete="email"
             aria-label="Email address"
-            className="block w-full appearance-none rounded-4xl bg-white py-2 pr-3 pl-10 text-sm/6 text-gray-950 outline -outline-offset-1 outline-gray-950/8 placeholder:text-sm/6 placeholder:text-gray-950/50 focus:outline-gray-950 dark:bg-white/10 dark:text-white/50 dark:outline-white/15 dark:placeholder:text-white/50 dark:focus:outline-white"
+            className="block w-full appearance-none rounded-4xl bg-white py-2 pr-3 pl-10 text-sm/6 text-neutral-950 outline -outline-offset-1 outline-neutral-950/8 placeholder:text-sm/6 placeholder:text-neutral-950/50 focus:outline-neutral-950 dark:bg-white/10 dark:text-white/50 dark:outline-white/15 dark:placeholder:text-white/50 dark:focus:outline-white"
             placeholder="Subscribe via email"
           />
         </div>
@@ -28,7 +28,7 @@ export function NewsletterForm({ action }: { action: string }) {
       <div>
         <button
           type="submit"
-          className="rounded-4xl bg-black px-4 py-2 text-sm/6 font-semibold text-white hover:bg-gray-800 dark:bg-gray-700 dark:hover:bg-gray-600"
+          className="rounded-4xl bg-black px-4 py-2 text-sm/6 font-semibold text-white hover:bg-neutral-800 dark:bg-neutral-700 dark:hover:bg-neutral-600"
         >
           Subscribe
         </button>
diff --git a/src/components/pagination.tsx b/src/components/pagination.tsx
index 8ea8cada9..298cbd9a6 100644
--- a/src/components/pagination.tsx
+++ b/src/components/pagination.tsx
@@ -12,9 +12,9 @@ export default function Pagination({ slug }: { slug: string }) {
 
   return (
     <footer className="mt-16 text-sm leading-6">
-      <div className="flex items-center justify-between gap-2 text-gray-700 dark:text-gray-200">
+      <div className="flex items-center justify-between gap-2 text-neutral-700 dark:text-neutral-200">
         {prev ? (
-          <Link className="group flex items-center gap-2 hover:text-gray-900 dark:hover:text-white" href={prev[1]}>
+          <Link className="group flex items-center gap-2 hover:text-neutral-900 dark:hover:text-white" href={prev[1]}>
             <svg viewBox="0 0 16 16" fill="currentColor" className="size-4">
               <path
                 fillRule="evenodd"
@@ -28,7 +28,7 @@ export default function Pagination({ slug }: { slug: string }) {
         ) : null}
 
         {next ? (
-          <Link className="group flex items-center gap-2 hover:text-gray-900 dark:hover:text-white" href={next[1]}>
+          <Link className="group flex items-center gap-2 hover:text-neutral-900 dark:hover:text-white" href={next[1]}>
             <span>{next[0]}</span>
             <svg viewBox="0 0 16 16" fill="currentColor" className="size-4">
               <path
diff --git a/src/components/promos.tsx b/src/components/promos.tsx
index 8cf68315c..9494aff0f 100644
--- a/src/components/promos.tsx
+++ b/src/components/promos.tsx
@@ -31,10 +31,10 @@ export function BookPromo() {
       <p className="text-[0.815rem]/6 font-semibold text-sky-500 dark:text-sky-400">
         From the creators of Tailwind CSS
       </p>
-      <p className="mt-1.5 text-[0.9375rem]/5 font-semibold text-gray-950 dark:text-white">
+      <p className="mt-1.5 text-[0.9375rem]/5 font-semibold text-neutral-950 dark:text-white">
         Make your ideas look awesome, without relying on a designer.
       </p>
-      <blockquote className="mt-6 border-l border-black/5 pl-4 text-gray-600 dark:border-white/10 dark:text-gray-400">
+      <blockquote className="mt-6 border-l border-black/5 pl-4 text-neutral-600 dark:border-white/10 dark:text-neutral-400">
         <p className="text-[0.8125rem]/5 [hanging-punctuation:first_last]">
           “This is the survival kit I wish I had when I started building apps.”
         </p>
@@ -73,8 +73,8 @@ export function CoursePromo() {
         </div>
       </div>
       <p className="text-[0.8125rem]/6 font-semibold text-sky-500 dark:text-sky-400">5-day mini-course</p>
-      <p className="mt-1.5 text-base/5 font-semibold text-gray-950 dark:text-white">Build UIs that don’t suck.</p>
-      <p className="mt-3 text-[0.8125rem]/5 text-gray-600 dark:text-gray-400">
+      <p className="mt-1.5 text-base/5 font-semibold text-neutral-950 dark:text-white">Build UIs that don’t suck.</p>
+      <p className="mt-3 text-[0.8125rem]/5 text-neutral-600 dark:text-neutral-400">
         Short, tactical video lessons from the creator of Tailwind CSS, delivered directly to your inbox every day for a
         week.
       </p>
@@ -102,7 +102,7 @@ export default function LinkButton({
       href={href}
       className={clsx(
         className,
-        "inline-block rounded-4xl bg-black px-3.5 py-1.25 text-[0.8125rem]/6 font-semibold text-white hover:bg-gray-800 dark:bg-gray-700 dark:hover:bg-gray-600",
+        "inline-block rounded-4xl bg-black px-3.5 py-1.25 text-[0.8125rem]/6 font-semibold text-white hover:bg-neutral-800 dark:bg-neutral-700 dark:hover:bg-neutral-600",
       )}
     >
       {children}
diff --git a/src/components/showcase-thumbnail.tsx b/src/components/showcase-thumbnail.tsx
index 1900ca294..2c2668c9d 100644
--- a/src/components/showcase-thumbnail.tsx
+++ b/src/components/showcase-thumbnail.tsx
@@ -67,7 +67,7 @@ export default function ShowcaseThumbnail({ showcase, priority = false }: { show
 
   return (
     <div
-      className="group dark:border-bg-white/10 relative isolate border-x border-gray-950/5 transition-colors hover:bg-gray-950/5 max-sm:border-0 sm:max-lg:nth-[2n]:border-r-transparent sm:max-lg:nth-[2n+1]:border-l-transparent lg:max-xl:nth-[3n]:border-r-transparent lg:max-xl:nth-[3n+1]:border-l-transparent xl:nth-[4n]:border-r-transparent xl:nth-[4n+1]:border-l-transparent dark:border-white/10 dark:hover:bg-white/2.5"
+      className="group dark:border-bg-white/10 relative isolate border-x border-neutral-950/5 transition-colors hover:bg-neutral-950/5 max-sm:border-0 sm:max-lg:nth-[2n]:border-r-transparent sm:max-lg:nth-[2n+1]:border-l-transparent lg:max-xl:nth-[3n]:border-r-transparent lg:max-xl:nth-[3n+1]:border-l-transparent xl:nth-[4n]:border-r-transparent xl:nth-[4n+1]:border-l-transparent dark:border-white/10 dark:hover:bg-white/2.5"
       onMouseEnter={() => {
         if (state.current === "idle") {
           state.current = "playing";
@@ -84,7 +84,7 @@ export default function ShowcaseThumbnail({ showcase, priority = false }: { show
     >
       <a href={showcase.url} target="_blank" rel="noopener noreferrer" className="absolute inset-0 z-10"></a>
       <GridContainer className={clsx("p-2", BEFORE_AND_AFTER_ONLY_IN_FIRST_COLUMN_OF_CURRENT_GRID)}>
-        <div className="relative aspect-[672/494] overflow-hidden rounded-xl outline outline-gray-950/5">
+        <div className="relative aspect-[672/494] overflow-hidden rounded-xl outline outline-neutral-950/5">
           <Image
             src={showcase.thumbnail}
             alt=""
@@ -150,7 +150,7 @@ export default function ShowcaseThumbnail({ showcase, priority = false }: { show
           {showcase.isTemplate && (
             <p
               aria-label="This site is a Tailwind Plus template"
-              className="ml-2 rounded-full border border-transparent bg-sky-100 px-1.5 text-[0.6875rem] leading-5 font-semibold text-sky-500 dark:bg-gray-600/50 dark:text-gray-200 dark:group-hover:bg-sky-500 dark:group-hover:text-white"
+              className="ml-2 rounded-full border border-transparent bg-sky-100 px-1.5 text-[0.6875rem] leading-5 font-semibold text-sky-500 dark:bg-neutral-600/50 dark:text-neutral-200 dark:group-hover:bg-sky-500 dark:group-hover:text-white"
             >
               Template
             </p>
diff --git a/src/components/theme-toggle.tsx b/src/components/theme-toggle.tsx
index 812098f22..41ed84765 100644
--- a/src/components/theme-toggle.tsx
+++ b/src/components/theme-toggle.tsx
@@ -38,7 +38,7 @@ function onChange(theme: Theme, setTheme: (theme: Theme) => void) {
 function ThemeToggleButton(props: React.ComponentProps<typeof Radio>) {
   return (
     <Radio
-      className="rounded-full p-1.5 *:size-7 data-checked:bg-white data-checked:ring data-checked:inset-ring data-checked:ring-gray-950/10 data-checked:inset-ring-white/10 sm:p-0 dark:data-checked:bg-gray-700 dark:data-checked:text-white dark:data-checked:ring-transparent"
+      className="rounded-full p-1.5 *:size-7 data-checked:bg-white data-checked:ring data-checked:inset-ring data-checked:ring-neutral-950/10 data-checked:inset-ring-white/10 sm:p-0 dark:data-checked:bg-neutral-700 dark:data-checked:text-white dark:data-checked:ring-transparent"
       {...props}
     />
   );
@@ -50,7 +50,7 @@ export default function ThemeToggle() {
     <RadioGroup
       value={theme}
       onChange={(value) => onChange(value, setTheme)}
-      className="relative z-0 inline-grid grid-cols-3 gap-0.5 rounded-full bg-gray-950/5 p-0.75 text-gray-950 dark:bg-white/10 dark:text-white"
+      className="relative z-0 inline-grid grid-cols-3 gap-0.5 rounded-full bg-neutral-950/5 p-0.75 text-neutral-950 dark:bg-white/10 dark:text-white"
     >
       <ThemeToggleButton aria-label="System theme" value="system">
         <svg viewBox="0 0 28 28" fill="none">
diff --git a/src/components/tips.tsx b/src/components/tips.tsx
index 0f429014a..649d1fcd7 100644
--- a/src/components/tips.tsx
+++ b/src/components/tips.tsx
@@ -15,7 +15,7 @@ export function TipGood({ children }: React.PropsWithChildren<{}>) {
           />
         </svg>
       </div>
-      <p className="m-0 flex-1 text-sm font-semibold text-gray-950 dark:text-white">{children}</p>
+      <p className="m-0 flex-1 text-sm font-semibold text-neutral-950 dark:text-white">{children}</p>
     </div>
   );
 }
@@ -35,7 +35,7 @@ export function TipBad({ children }: React.PropsWithChildren<{}>) {
           />
         </svg>
       </div>
-      <p className="m-0 flex-1 text-sm font-semibold text-gray-950 dark:text-white">{children}</p>
+      <p className="m-0 flex-1 text-sm font-semibold text-neutral-950 dark:text-white">{children}</p>
     </div>
   );
 }
@@ -57,7 +57,7 @@ export function TipCompat({ children }: React.PropsWithChildren<{}>) {
 
 export function TipInfo({ children }: React.PropsWithChildren<{}>) {
   return (
-    <div className="-mb-1 flex items-center space-x-2 text-gray-700 dark:text-gray-200">
+    <div className="-mb-1 flex items-center space-x-2 text-neutral-700 dark:text-neutral-200">
       <svg fill="none" viewBox="0 0 24 24" strokeWidth={1} stroke="currentColor" className="size-6">
         <path
           strokeLinecap="round"
@@ -66,7 +66,7 @@ export function TipInfo({ children }: React.PropsWithChildren<{}>) {
         />
       </svg>
 
-      <p className="m-0 flex-1 text-sm font-semibold text-gray-950 dark:text-white">{children}</p>
+      <p className="m-0 flex-1 text-sm font-semibold text-neutral-950 dark:text-white">{children}</p>
     </div>
   );
 }