diff --git a/README.md b/README.md
index 2a3f961..52c4b0e 100644
--- a/README.md
+++ b/README.md
@@ -19,23 +19,52 @@ yarn add @mintlify/components
 
 - Node.js >= 20.0.0
 - React ^18.0.0 or ^19.0.0
+- Tailwind CSS v3 or v4
+
+## Setup
+
+### Tailwind v4
+
+Import the styles at the **top** of your main CSS file, **before** `@import "tailwindcss"`:
+
+```css
+@import "@mintlify/components/styles.css";
+@import "tailwindcss";
+
+@theme {
+  --color-primary: #your-color;
+}
+```
+
+### Tailwind v3
+
+Import the styles at the **top** of your main CSS file:
+
+```css
+@import "@mintlify/components/styles.css";
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+```
+
+Override theme values in `tailwind.config.js`.
+
+> **Note:** Importing styles before Tailwind ensures your custom theme values take precedence over the component defaults.
 
 ## Usage
 
-Import components and styles in your project:
+Import components in your React files:
 
 ```tsx
 import { Accordion, Callout, CodeBlock, Tabs } from '@mintlify/components';
-import '@mintlify/components/styles.css';
 ```
 
 ### Example
 
 ```tsx
 import { Callout } from '@mintlify/components';
-import '@mintlify/components/styles.css';
 
-function App() {
+const App = () => {
   return (
     <Callout type="info" title="Note">
       This is an informational callout.
diff --git a/packages/components/.storybook/preview.tsx b/packages/components/.storybook/preview.tsx
index 4953e7a..7f82586 100644
--- a/packages/components/.storybook/preview.tsx
+++ b/packages/components/.storybook/preview.tsx
@@ -65,7 +65,7 @@ const preview: Preview = {
                 `}
               </style>
               <div
-                className={`relative p-8 text-gray-500 antialiased dark:bg-zinc-950 dark:text-gray-400 ${inter.variable} ${jetbrainsMono.variable}`}
+                className={`relative p-8 text-stone-500 antialiased dark:bg-stone-950 dark:text-stone-400 ${inter.variable} ${jetbrainsMono.variable}`}
               >
                 <Story />
               </div>
diff --git a/packages/components/src/code.css b/packages/components/src/code.css
index 5e2b1e4..1aa54c3 100644
--- a/packages/components/src/code.css
+++ b/packages/components/src/code.css
@@ -164,8 +164,9 @@ html:not(.dark) .codeblock-light {
 }
 
 /* Lines of code outside code blocks. Generated when you use single ticks: `example` */
+/* biome-ignore lint/style/noDescendingSpecificity: TODO */
 :not(pre) > code {
-  @apply break-words rounded-md px-2 py-0.5 text-gray-600 dark:text-gray-200 dark:border-gray-800 bg-gray-100/50 dark:bg-white/5;
+  @apply wrap-break-word rounded-md px-2 py-0.5 text-stone-600 dark:text-stone-200 dark:border-stone-800 bg-stone-100/50 dark:bg-white/5;
 }
 
 :not(pre) > code:before,
@@ -208,6 +209,7 @@ html:not(.dark) .codeblock-light {
 
 /* line highlighting (without line numbers) */
 [data-component-part="code-block-root"]:not(.has-line-numbers) {
+  /* biome-ignore lint/style/noDescendingSpecificity: TODO */
   .line-highlight {
     background: color-mix(
       in srgb,
@@ -325,15 +327,18 @@ html:not(.dark) .codeblock-light {
 }
 
 /* line numbers + highlighting */
+/* biome-ignore lint/style/noDescendingSpecificity: TODO */
 .has-line-numbers .line-highlight {
   width: 100%;
   display: inline-block;
   position: relative;
 
+  /* biome-ignore lint/style/noDescendingSpecificity: TODO */
   &::before {
     display: none;
   }
 
+  /* biome-ignore lint/style/noDescendingSpecificity: TODO */
   &::after {
     content: "";
     position: absolute;
@@ -351,6 +356,7 @@ html:not(.dark) .codeblock-light {
   }
 }
 
+/* biome-ignore lint/style/noDescendingSpecificity: TODO */
 .has-line-numbers .line-diff {
   width: 100%;
   display: inline-block;
diff --git a/packages/components/src/components/accordion/accordion-cover.tsx b/packages/components/src/components/accordion/accordion-cover.tsx
index 10782e1..90c070d 100644
--- a/packages/components/src/components/accordion/accordion-cover.tsx
+++ b/packages/components/src/components/accordion/accordion-cover.tsx
@@ -25,7 +25,7 @@ const AccordionCover = ({
     <summary
       aria-controls={`${id}-accordion-children`}
       aria-expanded={open}
-      className="not-prose relative flex w-full cursor-pointer list-none flex-row content-center items-center space-x-2 rounded-t-xl px-5 py-4 hover:bg-gray-100 hover:dark:bg-gray-800 [&::-webkit-details-marker]:hidden"
+      className="not-prose relative flex w-full cursor-pointer list-none flex-row content-center items-center space-x-2 rounded-t-xl px-5 py-4 hover:bg-stone-100 hover:dark:bg-stone-800 [&::-webkit-details-marker]:hidden"
       data-component-part="accordion-button"
       id={`${id}-label`}
     >
@@ -33,7 +33,7 @@ const AccordionCover = ({
       <div className="mr-2" data-component-part="accordion-caret-right">
         <Icon
           className={cn(
-            "bg-gray-700 transition dark:bg-gray-400",
+            "bg-stone-700 transition dark:bg-stone-400",
             open && "-mt-1 rotate-90 duration-200",
             !open && "duration-75"
           )}
@@ -44,7 +44,7 @@ const AccordionCover = ({
       </div>
       {!!icon && (
         <div
-          className="flex size-4 items-center justify-center fill-gray-800 text-gray-800 dark:fill-gray-100 dark:text-gray-100"
+          className="flex size-4 items-center justify-center fill-stone-800 text-stone-800 dark:fill-stone-100 dark:text-stone-100"
           data-component-part="accordion-icon"
         >
           {icon}
@@ -56,14 +56,14 @@ const AccordionCover = ({
         data-component-part="accordion-title-container"
       >
         <p
-          className="m-0 font-medium text-gray-900 dark:text-gray-200"
+          className="m-0 font-medium text-stone-900 dark:text-stone-200"
           data-component-part="accordion-title"
         >
           {title}
         </p>
         {!!description && (
           <p
-            className="m-0 text-gray-900 dark:text-gray-200"
+            className="m-0 text-stone-900 dark:text-stone-200"
             data-component-part="accordion-description"
           >
             {description}
diff --git a/packages/components/src/components/accordion/accordion-group.tsx b/packages/components/src/components/accordion/accordion-group.tsx
index 8c1ee9a..ed02eff 100644
--- a/packages/components/src/components/accordion/accordion-group.tsx
+++ b/packages/components/src/components/accordion/accordion-group.tsx
@@ -13,7 +13,7 @@ const AccordionGroup = ({ children, className }: AccordionGroupProps) => {
     <div
       className={cn(
         Classes.AccordionGroup,
-        "prose prose-gray dark:prose-invert mt-0 mb-3 overflow-hidden rounded-xl border border-gray-200/70 dark:border-white/10 [&>details+details]:border-t [&>details+details]:border-t-gray-200/70 dark:[&>details+details]:border-t-white/10 [&>details>summary]:rounded-none [&>details]:mb-0 [&>details]:rounded-none [&>details]:border-0",
+        "prose prose-stone dark:prose-invert mt-0 mb-3 overflow-hidden rounded-xl border border-stone-200/70 dark:border-white/10 [&>details+details]:border-t [&>details+details]:border-t-stone-200/70 dark:[&>details+details]:border-t-white/10 [&>details>summary]:rounded-none [&>details]:mb-0 [&>details]:rounded-none [&>details]:border-0",
         className
       )}
       data-component-part="accordion-group"
diff --git a/packages/components/src/components/accordion/accordion.stories.tsx b/packages/components/src/components/accordion/accordion.stories.tsx
index 0bcf1ac..21a43d3 100644
--- a/packages/components/src/components/accordion/accordion.stories.tsx
+++ b/packages/components/src/components/accordion/accordion.stories.tsx
@@ -60,7 +60,7 @@ export const WithDescription: Story = {
         title="Installation"
       >
         <p>Run the following command to install Mintlify:</p>
-        <pre className="rounded bg-gray-800 p-3">npm install -g mintlify</pre>
+        <pre className="rounded bg-stone-800 p-3">npm install -g mintlify</pre>
       </Accordion>
       <Accordion
         defaultOpen={false}
@@ -71,7 +71,7 @@ export const WithDescription: Story = {
           Create a mint.json file in your project root with the following
           structure:
         </p>
-        <pre className="rounded bg-gray-800 p-3">
+        <pre className="rounded bg-stone-800 p-3">
           {`{
   "name": "My Documentation",
   "navigation": []
@@ -259,20 +259,20 @@ export const WithURLManagement: Story = {
 
     return (
       <div className="max-w-2xl space-y-3">
-        <div className="mb-4 rounded-lg bg-gray-100 p-3 dark:bg-gray-800">
-          <p className="mb-2 text-gray-500 text-xs dark:text-gray-400">
+        <div className="mb-4 rounded-lg bg-stone-100 p-3 dark:bg-stone-800">
+          <p className="mb-2 text-stone-500 text-xs dark:text-stone-400">
             Current URL (Storybook iframe):
           </p>
-          <code className="break-all text-gray-700 text-xs dark:text-gray-300">
+          <code className="break-all text-stone-700 text-xs dark:text-stone-300">
             {currentUrl}
           </code>
         </div>
-        <p className="mb-4 text-gray-600 text-sm dark:text-gray-400">
+        <p className="mb-4 text-sm text-stone-600 dark:text-stone-400">
           These accordions sync with the URL hash. Open an accordion and watch
           the URL update above. The URL is also copied to your clipboard
           automatically!
         </p>
-        <p className="mb-4 text-gray-500 text-xs dark:text-gray-400">
+        <p className="mb-4 text-stone-500 text-xs dark:text-stone-400">
           <strong>Note:</strong> In Storybook's iframe environment, URL changes
           aren't visible in the browser's address bar, but the feature works in
           production. The simulated URL display above shows what's happening.
@@ -320,7 +320,7 @@ export const WithURLManagement: Story = {
 export const WithCallbacks: Story = {
   render: () => (
     <div className="max-w-2xl space-y-3">
-      <p className="mb-4 text-gray-600 text-sm dark:text-gray-400">
+      <p className="mb-4 text-sm text-stone-600 dark:text-stone-400">
         Open the browser console to see the callback logs.
       </p>
       <Accordion
@@ -370,7 +370,7 @@ export const AllFeaturesCombined: Story = {
               <li>Open/close tracking callbacks</li>
               <li>Mount lifecycle callback</li>
             </ul>
-            <p className="mt-3 text-gray-600 text-sm dark:text-gray-400">
+            <p className="mt-3 text-sm text-stone-600 dark:text-stone-400">
               Check the browser console to see callback logs, and notice how the
               URL updates when you toggle this accordion!
             </p>
@@ -392,7 +392,7 @@ export const RichContent: Story = {
       >
         <div>
           <p className="mb-3">Here's how to use the Accordion component:</p>
-          <pre className="overflow-x-auto rounded bg-gray-800 p-4 text-sm">
+          <pre className="overflow-x-auto rounded bg-stone-800 p-4 text-sm">
             {`<Accordion
   title="My Accordion"
   defaultOpen={false}
@@ -412,24 +412,24 @@ export const RichContent: Story = {
           <h4 className="mb-2 font-semibold">Available Props:</h4>
           <table className="min-w-full text-sm">
             <thead>
-              <tr className="border-b dark:border-gray-700">
+              <tr className="border-b dark:border-stone-700">
                 <th className="py-2 pr-4 text-left">Prop</th>
                 <th className="py-2 pr-4 text-left">Type</th>
                 <th className="py-2 text-left">Required</th>
               </tr>
             </thead>
             <tbody>
-              <tr className="border-b dark:border-gray-700">
+              <tr className="border-b dark:border-stone-700">
                 <td className="py-2 pr-4">title</td>
                 <td className="py-2 pr-4">string</td>
                 <td className="py-2">Yes</td>
               </tr>
-              <tr className="border-b dark:border-gray-700">
+              <tr className="border-b dark:border-stone-700">
                 <td className="py-2 pr-4">defaultOpen</td>
                 <td className="py-2 pr-4">boolean</td>
                 <td className="py-2">Yes</td>
               </tr>
-              <tr className="border-b dark:border-gray-700">
+              <tr className="border-b dark:border-stone-700">
                 <td className="py-2 pr-4">description</td>
                 <td className="py-2 pr-4">string</td>
                 <td className="py-2">No</td>
@@ -448,8 +448,8 @@ export const RichContent: Story = {
           <p className="mb-3">
             Accordions can contain any type of content, including images:
           </p>
-          <div className="flex h-32 items-center justify-center rounded bg-gray-200 dark:bg-gray-700">
-            <span className="text-gray-500 dark:text-gray-400">
+          <div className="flex h-32 items-center justify-center rounded bg-stone-200 dark:bg-stone-700">
+            <span className="text-stone-500 dark:text-stone-400">
               Image placeholder
             </span>
           </div>
@@ -574,7 +574,7 @@ export const AccordionGroupWithRichContent: Story = {
           <p className="mb-3">
             Install the package using your preferred package manager:
           </p>
-          <pre className="overflow-x-auto rounded bg-gray-800 p-3 text-sm">
+          <pre className="overflow-x-auto rounded bg-stone-800 p-3 text-sm">
             npm install @mintlify/components
           </pre>
         </Accordion>
@@ -585,7 +585,7 @@ export const AccordionGroupWithRichContent: Story = {
           title="Configuration"
         >
           <p className="mb-3">Create a configuration file:</p>
-          <pre className="overflow-x-auto rounded bg-gray-800 p-3 text-sm">
+          <pre className="overflow-x-auto rounded bg-stone-800 p-3 text-sm">
             {`{
   "theme": "light",
   "components": ["accordion", "badge"]
@@ -599,7 +599,7 @@ export const AccordionGroupWithRichContent: Story = {
           title="Usage"
         >
           <p className="mb-3">Import and use the components:</p>
-          <pre className="overflow-x-auto rounded bg-gray-800 p-3 text-sm">
+          <pre className="overflow-x-auto rounded bg-stone-800 p-3 text-sm">
             {`import { Accordion } from '@mintlify/components';
 
 <Accordion title="Hello">
@@ -634,7 +634,7 @@ export const MultipleAccordionGroups: Story = {
   render: () => (
     <div className="max-w-2xl space-y-4">
       <div>
-        <h3 className="mb-2 font-semibold text-gray-900 text-lg dark:text-gray-100">
+        <h3 className="mb-2 font-semibold text-lg text-stone-900 dark:text-stone-100">
           Documentation
         </h3>
         <Accordion.Group>
@@ -666,7 +666,7 @@ export const MultipleAccordionGroups: Story = {
       </div>
 
       <div>
-        <h3 className="mb-2 font-semibold text-gray-900 text-lg dark:text-gray-100">
+        <h3 className="mb-2 font-semibold text-lg text-stone-900 dark:text-stone-100">
           Support
         </h3>
         <Accordion.Group>
diff --git a/packages/components/src/components/accordion/accordion.tsx b/packages/components/src/components/accordion/accordion.tsx
index dd011ef..0a9ff20 100644
--- a/packages/components/src/components/accordion/accordion.tsx
+++ b/packages/components/src/components/accordion/accordion.tsx
@@ -187,7 +187,7 @@ const GenericAccordion = ({
       <details
         className={cn(
           Classes.Accordion,
-          "mb-3 cursor-default overflow-hidden rounded-2xl border border-gray-200/70 bg-white dark:border-white/10 dark:bg-[#0b0c0e]",
+          "mb-3 cursor-default overflow-hidden rounded-2xl border border-stone-200/70 bg-white dark:border-white/10 dark:bg-[#0b0c0e]",
           className
         )}
         data-component-part="accordion"
@@ -211,7 +211,7 @@ const GenericAccordion = ({
         {/** biome-ignore lint/a11y/useSemanticElements: TODO */}
         <div
           aria-labelledby={`${id}-label`}
-          className="prose prose-gray dark:prose-invert mx-6 mt-2 mb-4 cursor-default overflow-x-auto"
+          className="prose prose-stone dark:prose-invert mx-6 mt-2 mb-4 cursor-default overflow-x-auto"
           data-component-part="accordion-content"
           id={`${id}-accordion-children`}
           role="region"
diff --git a/packages/components/src/components/badge/badge.stories.tsx b/packages/components/src/components/badge/badge.stories.tsx
index 0d8bcf5..f8afb73 100644
--- a/packages/components/src/components/badge/badge.stories.tsx
+++ b/packages/components/src/components/badge/badge.stories.tsx
@@ -94,7 +94,7 @@ export const Variants: Story = {
   render: () => (
     <div className="flex flex-col gap-4">
       <div className="flex gap-2">
-        <h3 className="w-full font-medium text-gray-700 text-sm dark:text-gray-300">
+        <h3 className="w-full font-medium text-sm text-stone-700 dark:text-stone-300">
           Solid (Default)
         </h3>
       </div>
@@ -105,7 +105,7 @@ export const Variants: Story = {
       </div>
 
       <div className="flex gap-2">
-        <h3 className="w-full font-medium text-gray-700 text-sm dark:text-gray-300">
+        <h3 className="w-full font-medium text-sm text-stone-700 dark:text-stone-300">
           Outline
         </h3>
       </div>
@@ -137,7 +137,7 @@ export const WithIcon: Story = {
   render: () => (
     <div className="flex flex-col gap-4">
       <div className="flex gap-2">
-        <h3 className="w-full font-medium text-gray-700 text-sm dark:text-gray-300">
+        <h3 className="w-full font-medium text-sm text-stone-700 dark:text-stone-300">
           Lead Icons
         </h3>
       </div>
@@ -152,7 +152,7 @@ export const WithIcon: Story = {
       </div>
 
       <div className="flex gap-2">
-        <h3 className="w-full font-medium text-gray-700 text-sm dark:text-gray-300">
+        <h3 className="w-full font-medium text-sm text-stone-700 dark:text-stone-300">
           Tail Icons
         </h3>
       </div>
@@ -167,7 +167,7 @@ export const WithIcon: Story = {
       </div>
 
       <div className="flex gap-2">
-        <h3 className="w-full font-medium text-gray-700 text-sm dark:text-gray-300">
+        <h3 className="w-full font-medium text-sm text-stone-700 dark:text-stone-300">
           Both Lead and Tail Icons
         </h3>
       </div>
@@ -181,7 +181,7 @@ export const WithIcon: Story = {
       </div>
 
       <div className="flex gap-2">
-        <h3 className="w-full font-medium text-gray-700 text-sm dark:text-gray-300">
+        <h3 className="w-full font-medium text-sm text-stone-700 dark:text-stone-300">
           Inline SVG Icons
         </h3>
       </div>
@@ -226,7 +226,7 @@ export const WithIcon: Story = {
       </div>
 
       <div className="flex gap-2">
-        <h3 className="w-full font-medium text-gray-700 text-sm dark:text-gray-300">
+        <h3 className="w-full font-medium text-sm text-stone-700 dark:text-stone-300">
           Icon Types (Font Awesome Styles)
         </h3>
       </div>
@@ -246,7 +246,7 @@ export const WithIcon: Story = {
       </div>
 
       <div className="flex gap-2">
-        <h3 className="w-full font-medium text-gray-700 text-sm dark:text-gray-300">
+        <h3 className="w-full font-medium text-sm text-stone-700 dark:text-stone-300">
           Lucide Icon Library
         </h3>
       </div>
@@ -266,7 +266,7 @@ export const WithIcon: Story = {
       </div>
 
       <div className="flex gap-2">
-        <h3 className="w-full font-medium text-gray-700 text-sm dark:text-gray-300">
+        <h3 className="w-full font-medium text-sm text-stone-700 dark:text-stone-300">
           Icons with Different Sizes
         </h3>
       </div>
@@ -290,7 +290,7 @@ export const WithIcon: Story = {
 
 export const SurfaceVariants: Story = {
   render: () => (
-    <div className="flex gap-2 rounded-lg bg-gray-100 p-4 dark:bg-gray-800">
+    <div className="flex gap-2 rounded-lg bg-stone-100 p-4 dark:bg-stone-800">
       <Badge color="white">White</Badge>
       <Badge color="surface">Surface</Badge>
       <Badge color="white-destructive">White Destructive</Badge>
@@ -303,7 +303,7 @@ export const IconCombinations: Story = {
   render: () => (
     <div className="flex flex-col gap-4">
       <div className="flex gap-2">
-        <h3 className="w-full font-medium text-gray-700 text-sm dark:text-gray-300">
+        <h3 className="w-full font-medium text-sm text-stone-700 dark:text-stone-300">
           Icons with Outline Variant
         </h3>
       </div>
@@ -320,7 +320,7 @@ export const IconCombinations: Story = {
       </div>
 
       <div className="flex gap-2">
-        <h3 className="w-full font-medium text-gray-700 text-sm dark:text-gray-300">
+        <h3 className="w-full font-medium text-sm text-stone-700 dark:text-stone-300">
           Icons with Disabled State
         </h3>
       </div>
@@ -337,7 +337,7 @@ export const IconCombinations: Story = {
       </div>
 
       <div className="flex gap-2">
-        <h3 className="w-full font-medium text-gray-700 text-sm dark:text-gray-300">
+        <h3 className="w-full font-medium text-sm text-stone-700 dark:text-stone-300">
           Icons with Pill Shape
         </h3>
       </div>
@@ -354,7 +354,7 @@ export const IconCombinations: Story = {
       </div>
 
       <div className="flex gap-2">
-        <h3 className="w-full font-medium text-gray-700 text-sm dark:text-gray-300">
+        <h3 className="w-full font-medium text-sm text-stone-700 dark:text-stone-300">
           Inline SVG Icons with States
         </h3>
       </div>
@@ -422,7 +422,7 @@ export const IconCombinations: Story = {
       </div>
 
       <div className="flex gap-2">
-        <h3 className="w-full font-medium text-gray-700 text-sm dark:text-gray-300">
+        <h3 className="w-full font-medium text-sm text-stone-700 dark:text-stone-300">
           All States Combined
         </h3>
       </div>
@@ -454,7 +454,7 @@ export const CustomStyling: Story = {
   render: () => (
     <div className="flex flex-col gap-4">
       <div className="flex gap-2">
-        <h3 className="w-full font-medium text-gray-700 text-sm dark:text-gray-300">
+        <h3 className="w-full font-medium text-sm text-stone-700 dark:text-stone-300">
           Using className prop for custom styling
         </h3>
       </div>
@@ -496,7 +496,7 @@ export const Interactive: Story = {
   render: () => (
     <div className="flex flex-col gap-4">
       <div className="flex gap-2">
-        <h3 className="w-full font-medium text-gray-700 text-sm dark:text-gray-300">
+        <h3 className="w-full font-medium text-sm text-stone-700 dark:text-stone-300">
           Clickable Badges (onClick)
         </h3>
       </div>
@@ -519,7 +519,7 @@ export const Interactive: Story = {
       </div>
 
       <div className="flex gap-2">
-        <h3 className="w-full font-medium text-gray-700 text-sm dark:text-gray-300">
+        <h3 className="w-full font-medium text-sm text-stone-700 dark:text-stone-300">
           Link Badges (href)
         </h3>
       </div>
@@ -541,7 +541,7 @@ export const Interactive: Story = {
       </div>
 
       <div className="flex gap-2">
-        <h3 className="w-full font-medium text-gray-700 text-sm dark:text-gray-300">
+        <h3 className="w-full font-medium text-sm text-stone-700 dark:text-stone-300">
           Disabled Interactive Badges
         </h3>
       </div>
diff --git a/packages/components/src/components/callout/callout.tsx b/packages/components/src/components/callout/callout.tsx
index 00bd86c..ca2935a 100644
--- a/packages/components/src/components/callout/callout.tsx
+++ b/packages/components/src/components/callout/callout.tsx
@@ -38,8 +38,8 @@ const variantConfig = {
     icon: InfoIcon,
     defaultAriaLabel: "Info",
     className:
-      "border border-neutral-200 bg-neutral-50 dark:border-neutral-700 dark:bg-white/10",
-    childrenClassName: "text-neutral-800 dark:text-neutral-300",
+      "border border-stone-200 bg-stone-50 dark:border-stone-700 dark:bg-white/10",
+    childrenClassName: "text-stone-800 dark:text-stone-300",
   },
   warning: {
     icon: WarningIcon,
@@ -126,13 +126,13 @@ const Callout = ({
       } catch {
         finalColor = undefined;
         variantClassName =
-          "border border-zinc-500/20 bg-zinc-50/50 dark:border-zinc-500/30 dark:bg-zinc-500/10";
-        childrenClassName = "text-zinc-900 dark:text-zinc-200";
+          "border border-stone-500/20 bg-stone-50/50 dark:border-stone-500/30 dark:bg-stone-500/10";
+        childrenClassName = "text-stone-900 dark:text-stone-200";
       }
     } else {
       variantClassName =
-        "border border-zinc-500/20 bg-zinc-50/50 dark:border-zinc-500/30 dark:bg-zinc-500/10";
-      childrenClassName = "text-zinc-900 dark:text-zinc-200";
+        "border border-stone-500/20 bg-stone-50/50 dark:border-stone-500/30 dark:bg-stone-500/10";
+      childrenClassName = "text-stone-900 dark:text-stone-200";
     }
   } else {
     const config = variantConfig[variant];
@@ -180,7 +180,7 @@ const Callout = ({
       )}
       <div
         className={cn(
-          "prose dark:prose-invert w-full min-w-0 text-sm [&_a]:border-current [&_a]:text-current! [&_code]:text-current! [&_kbd]:bg-zinc-100 [&_kbd]:text-current! dark:[&_kbd]:bg-zinc-800",
+          "prose dark:prose-invert w-full min-w-0 text-sm [&_a]:border-current [&_a]:text-current! [&_code]:text-current! [&_kbd]:bg-stone-100 [&_kbd]:text-current! dark:[&_kbd]:bg-stone-800",
           childrenClassName
         )}
         data-component-part="callout-content"
diff --git a/packages/components/src/components/card/card.tsx b/packages/components/src/components/card/card.tsx
index c6976a6..7916d2a 100644
--- a/packages/components/src/components/card/card.tsx
+++ b/packages/components/src/components/card/card.tsx
@@ -144,7 +144,7 @@ const GenericCard = <T extends ElementType = "div">({
           />
         ) : (
           <div
-            className="size-6 fill-gray-800 text-gray-800 dark:fill-gray-100 dark:text-gray-100"
+            className="size-6 fill-stone-800 text-stone-800 dark:fill-stone-100 dark:text-stone-100"
             data-component-part="card-icon"
           >
             {icon}
@@ -158,7 +158,7 @@ const GenericCard = <T extends ElementType = "div">({
     <Component
       className={cn(
         Classes.Card,
-        "group relative my-2 block w-full overflow-hidden rounded-2xl border border-gray-950/10 bg-white font-normal ring-2 ring-transparent dark:border-white/10 dark:bg-background-dark",
+        "group relative my-2 block w-full overflow-hidden rounded-2xl border border-stone-950/10 bg-white font-normal ring-2 ring-transparent dark:border-white/10 dark:bg-background-dark",
         props.href && "cursor-pointer",
         props.href &&
           "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary dark:focus-visible:ring-primary-light",
@@ -188,7 +188,7 @@ const GenericCard = <T extends ElementType = "div">({
           <div
             aria-hidden="true"
             className={cn(
-              "absolute top-5 right-5 text-gray-400 group-hover:text-primary dark:text-gray-500 dark:group-hover:text-primary-light",
+              "absolute top-5 right-5 text-stone-400 group-hover:text-primary dark:text-stone-500 dark:group-hover:text-primary-light",
               !shouldShowArrowIcon && "hidden"
             )}
             data-component-part="card-arrow"
@@ -201,7 +201,7 @@ const GenericCard = <T extends ElementType = "div">({
           {title && (
             <h2
               className={cn(
-                "not-prose wrap-break-word font-semibold text-base text-gray-800 dark:text-white",
+                "not-prose wrap-break-word font-semibold text-base text-stone-800 dark:text-white",
                 icon !== null && icon !== undefined && !horizontal && "mt-4"
               )}
               contentEditable={false}
@@ -214,8 +214,8 @@ const GenericCard = <T extends ElementType = "div">({
             className={cn(
               "prose wrap-break-word mt-1 font-normal text-base leading-6",
               title
-                ? "text-gray-600 dark:text-gray-400"
-                : "text-gray-700 dark:text-gray-300",
+                ? "text-stone-600 dark:text-stone-400"
+                : "text-stone-700 dark:text-stone-300",
               horizontal && "mt-0 leading-6"
             )}
             data-component-part="card-content"
@@ -226,7 +226,7 @@ const GenericCard = <T extends ElementType = "div">({
             <div className="mt-8" data-component-part="card-cta">
               <span
                 className={cn(
-                  "flex flex-row items-center gap-2 text-left font-medium text-gray-600 text-sm dark:text-gray-400",
+                  "flex flex-row items-center gap-2 text-left font-medium text-sm text-stone-600 dark:text-stone-400",
                   !disabled &&
                     "group-hover:text-primary group-hover:dark:text-primary-light",
                   disabled && "opacity-50"
diff --git a/packages/components/src/components/code-block/code-block.tsx b/packages/components/src/components/code-block/code-block.tsx
index e0d63e8..61ac677 100644
--- a/packages/components/src/components/code-block/code-block.tsx
+++ b/packages/components/src/components/code-block/code-block.tsx
@@ -107,9 +107,9 @@ const CodeBlock = function CodeBlock(params: CodeBlockProps) {
         Classes.CodeBlock,
         "not-prose group relative mt-5 mb-8 rounded-2xl",
         codeBlockTheme === "system" &&
-          "codeblock-light dark:twoslash-dark border border-gray-950/10 bg-gray-50 text-gray-950 dark:border-white/10 dark:bg-white/5 dark:text-gray-50",
+          "codeblock-light dark:twoslash-dark border border-stone-950/10 bg-stone-50 text-stone-950 dark:border-white/10 dark:bg-white/5 dark:text-stone-50",
         codeBlockTheme === "dark" &&
-          "codeblock-dark twoslash-dark dark:twoslash-dark bg-codeblock text-gray-50 ring-1 ring-transparent dark:bg-white/5 dark:ring-white/[0.14]",
+          "codeblock-dark twoslash-dark dark:twoslash-dark bg-codeblock text-stone-50 ring-1 ring-transparent dark:bg-white/5 dark:ring-white/[0.14]",
         hasGrayBackgroundContainer
           ? "p-0.5"
           : "bg-transparent dark:bg-transparent",
diff --git a/packages/components/src/components/code-block/code-footer.tsx b/packages/components/src/components/code-block/code-footer.tsx
index 04a00c0..956865b 100644
--- a/packages/components/src/components/code-block/code-footer.tsx
+++ b/packages/components/src/components/code-block/code-footer.tsx
@@ -17,7 +17,7 @@ const CodeFooter = ({
 
   return (
     <div
-      className="flex items-center px-3 py-1 font-medium text-gray-500 text-xs hover:text-gray-600 dark:text-gray-400 dark:hover:text-gray-300"
+      className="flex items-center px-3 py-1 font-medium text-stone-500 text-xs hover:text-stone-600 dark:text-stone-400 dark:hover:text-stone-300"
       data-component-part="code-block-footer"
     >
       <button
@@ -26,7 +26,7 @@ const CodeFooter = ({
         onClick={toggleExpanded}
         type="button"
       >
-        <EllipsisIcon className="size-3.5 shrink-0 text-gray-500 dark:text-gray-400" />
+        <EllipsisIcon className="size-3.5 shrink-0 text-stone-500 dark:text-stone-400" />
         {isExpanded
           ? "Collapse"
           : `See all ${numberOfLines} line${numberOfLines === 1 ? "" : "s"}`}
diff --git a/packages/components/src/components/code-block/code-header.tsx b/packages/components/src/components/code-block/code-header.tsx
index 5af2c79..f38f058 100644
--- a/packages/components/src/components/code-block/code-header.tsx
+++ b/packages/components/src/components/code-block/code-header.tsx
@@ -20,20 +20,20 @@ const CodeHeader = ({
 }: CodeHeaderProps) => {
   return (
     <div
-      className="flex rounded-t-[14px] py-1 pr-2.5 pl-4 font-medium text-gray-400 text-xs leading-6"
+      className="flex rounded-t-[14px] py-1 pr-2.5 pl-4 font-medium text-stone-400 text-xs leading-6"
       data-component-part="code-block-header"
     >
       <div
         className={cn(
-          "flex min-w-0 grow-0 items-center gap-1.5 text-gray-700 dark:text-gray-300",
-          codeBlockTheme === "dark" && "text-gray-300"
+          "flex min-w-0 grow-0 items-center gap-1.5 text-stone-700 dark:text-stone-300",
+          codeBlockTheme === "dark" && "text-stone-300"
         )}
         data-component-part="code-block-header-filename"
       >
         {icon && (
           <ComponentIcon
             className={cn(
-              "size-3.5 shrink-0 bg-gray-500 dark:bg-gray-400",
+              "size-3.5 shrink-0 bg-stone-500 dark:bg-stone-400",
               Classes.CodeBlockIcon
             )}
             icon={icon}
diff --git a/packages/components/src/components/code-group/code-group.tsx b/packages/components/src/components/code-group/code-group.tsx
index 9eebc48..6f285cc 100644
--- a/packages/components/src/components/code-group/code-group.tsx
+++ b/packages/components/src/components/code-group/code-group.tsx
@@ -117,12 +117,12 @@ const CodeGroup = ({
     <Tabs.Root
       className={cn(
         Classes.CodeGroup,
-        "not-prose relative mt-5 mb-8 flex flex-col overflow-hidden rounded-2xl border border-gray-950/10 p-0.5 dark:border-white/10",
+        "not-prose relative mt-5 mb-8 flex flex-col overflow-hidden rounded-2xl border border-stone-950/10 p-0.5 dark:border-white/10",
         noMargins && "my-0",
         codeBlockTheme === "system" &&
-          "dark:codeblock-dark codeblock-light bg-gray-50 text-gray-950 dark:bg-white/5 dark:text-gray-50",
+          "dark:codeblock-dark codeblock-light bg-stone-50 text-stone-950 dark:bg-white/5 dark:text-stone-50",
         codeBlockTheme === "dark" &&
-          "codeblock-dark border-transparent bg-codeblock text-gray-50 dark:bg-white/5",
+          "codeblock-dark border-transparent bg-codeblock text-stone-50 dark:bg-white/5",
         feedbackModalOpen && "border border-primary dark:border-primary-light",
         className
       )}
@@ -143,7 +143,7 @@ const CodeGroup = ({
               typeof childArr[selectedIndex]?.props.icon === "string" && (
                 <ComponentIcon
                   className={cn(
-                    "size-3.5 bg-gray-500 dark:bg-gray-400",
+                    "size-3.5 bg-stone-500 dark:bg-stone-400",
                     Classes.CodeBlockIcon
                   )}
                   icon={childArr[selectedIndex]?.props.icon}
@@ -155,8 +155,8 @@ const CodeGroup = ({
               className={cn(
                 "truncate",
                 codeBlockTheme === "system" &&
-                  "text-gray-950 dark:text-gray-50",
-                codeBlockTheme === "dark" && "text-gray-50"
+                  "text-stone-950 dark:text-stone-50",
+                codeBlockTheme === "dark" && "text-stone-50"
               )}
             >
               {childArr[selectedIndex]?.props.filename}
@@ -189,10 +189,10 @@ const CodeGroup = ({
                 {child.props.icon && typeof child.props.icon === "string" && (
                   <ComponentIcon
                     className={cn(
-                      "h-3.5 w-3.5 bg-gray-500 dark:bg-gray-400",
+                      "h-3.5 w-3.5 bg-stone-500 dark:bg-stone-400",
                       codeBlockTheme === "system"
                         ? "group-hover:bg-primary dark:group-hover:bg-primary-light"
-                        : "group-hover:bg-gray-700/70 group-hover:text-primary-light",
+                        : "group-hover:bg-stone-700/70 group-hover:text-primary-light",
                       Classes.CodeBlockIcon
                     )}
                     color={selectedIndex === index ? "currentColor" : undefined}
@@ -276,8 +276,8 @@ const TabItem = forwardRef<React.ComponentRef<typeof Tabs.Tab>, TabItemProps>(
           isSelected && codeBlockTheme === "dark" && "text-primary-light",
           !isSelected &&
             codeBlockTheme === "system" &&
-            "text-gray-500 dark:text-gray-400",
-          !isSelected && codeBlockTheme === "dark" && "text-gray-400"
+            "text-stone-500 dark:text-stone-400",
+          !isSelected && codeBlockTheme === "dark" && "text-stone-400"
         )}
         ref={ref}
         value={value}
@@ -287,10 +287,10 @@ const TabItem = forwardRef<React.ComponentRef<typeof Tabs.Tab>, TabItemProps>(
             "z-10 flex items-center gap-1.5 rounded-lg px-1.5 focus:outline-none",
             tabsLength > 1 &&
               codeBlockTheme === "system" &&
-              "group-hover:bg-gray-200/50 group-hover:text-primary dark:group-hover:bg-gray-700/70 dark:group-hover:text-primary-light",
+              "group-hover:bg-stone-200/50 group-hover:text-primary dark:group-hover:bg-stone-700/70 dark:group-hover:text-primary-light",
             tabsLength > 1 &&
               codeBlockTheme === "dark" &&
-              "group-hover:bg-gray-700/70 group-hover:text-primary-light"
+              "group-hover:bg-stone-700/70 group-hover:text-primary-light"
           )}
         >
           {children}
diff --git a/packages/components/src/components/code-group/code-select-dropdown.tsx b/packages/components/src/components/code-group/code-select-dropdown.tsx
index 8c7cd08..5f28429 100644
--- a/packages/components/src/components/code-group/code-select-dropdown.tsx
+++ b/packages/components/src/components/code-group/code-select-dropdown.tsx
@@ -44,7 +44,7 @@ const CodeSelectDropdown = ({
         className={cn(
           "overflow-y-auto",
           codeBlockTheme === "system" &&
-            "border border-gray-200/70 bg-gray-50 dark:border-gray-800/50 dark:bg-[#0F1117]",
+            "border border-stone-200/70 bg-stone-50 dark:border-stone-800/50 dark:bg-[#0F1117]",
           codeBlockTheme === "dark" && "border-none bg-[#0F1117]"
         )}
       >
@@ -64,7 +64,7 @@ const CodeSelectDropdown = ({
                 "font-medium text-primary-light dark:text-primary-light",
               option !== selectedOption &&
                 codeBlockTheme === "system" &&
-                "text-gray-500 dark:text-white/50",
+                "text-stone-500 dark:text-white/50",
               option !== selectedOption &&
                 codeBlockTheme === "dark" &&
                 "text-white/50"
diff --git a/packages/components/src/components/code-group/dropdown.tsx b/packages/components/src/components/code-group/dropdown.tsx
index 94f1f2e..ad49584 100644
--- a/packages/components/src/components/code-group/dropdown.tsx
+++ b/packages/components/src/components/code-group/dropdown.tsx
@@ -26,7 +26,7 @@ const DropdownMenuTrigger = ({
   <Menu.Trigger
     className={cn(
       "group group overflow-hidden rounded-lg disabled:pointer-events-none [&>span]:line-clamp-1",
-      "flex items-center gap-1 py-0.5 text-gray-950/50 text-sm group-hover:text-gray-950/70 dark:text-white/50 dark:group-hover:text-white/70",
+      "flex items-center gap-1 py-0.5 text-sm text-stone-950/50 group-hover:text-stone-950/70 dark:text-white/50 dark:group-hover:text-white/70",
       className
     )}
     {...props}
@@ -56,7 +56,7 @@ const DropdownMenuContent = ({
     >
       <Menu.Popup
         className={cn(
-          "relative max-h-96 min-w-[var(--anchor-width)] overflow-y-auto rounded-2xl border-standard bg-white p-1 text-gray-950/70 shadow-gray-500/5 shadow-xl dark:bg-gray-950 dark:text-white/70 dark:shadow-gray-500/5 dark:shadow-none",
+          "relative max-h-96 min-w-[var(--anchor-width)] overflow-y-auto rounded-2xl border-standard bg-white p-1 text-stone-950/70 shadow-stone-500/5 shadow-xl dark:bg-stone-950 dark:text-white/70 dark:shadow-none dark:shadow-stone-500/5",
           "data-[ending-style]:fade-out-0 data-[starting-style]:fade-in-0 data-[ending-style]:zoom-out-95 data-[starting-style]:zoom-in-95",
           className
         )}
@@ -83,10 +83,10 @@ const DropdownMenuItem = ({
 }: DropdownMenuItemProps) => (
   <Menu.Item
     className={cn(
-      "group relative flex w-full cursor-pointer select-none items-center justify-between gap-2 rounded-md px-2 py-1 text-sm outline-0 hover:bg-gray-950/[0.03] focus:bg-gray-950/5 data-[disabled]:pointer-events-none data-[disabled]:cursor-default data-[disabled]:opacity-50 dark:focus:bg-white/5 dark:hover:bg-white/[0.03]",
+      "group relative flex w-full cursor-pointer select-none items-center justify-between gap-2 rounded-md px-2 py-1 text-sm outline-0 hover:bg-stone-950/[0.03] focus:bg-stone-950/5 data-[disabled]:pointer-events-none data-[disabled]:cursor-default data-[disabled]:opacity-50 dark:focus:bg-white/5 dark:hover:bg-white/[0.03]",
       isSelected
         ? "font-medium text-primary dark:text-primary-light"
-        : "text-gray-950/50 hover:text-gray-950/75 focus:text-gray-950/75 dark:text-white/50 dark:focus:text-white/75 dark:hover:text-white/75",
+        : "text-stone-950/50 hover:text-stone-950/75 focus:text-stone-950/75 dark:text-white/50 dark:focus:text-white/75 dark:hover:text-white/75",
       className
     )}
     onClick={(e) => {
diff --git a/packages/components/src/components/code-group/language-dropdown.tsx b/packages/components/src/components/code-group/language-dropdown.tsx
index 51fa701..129fdff 100644
--- a/packages/components/src/components/code-group/language-dropdown.tsx
+++ b/packages/components/src/components/code-group/language-dropdown.tsx
@@ -37,18 +37,18 @@ const LanguageDropdown = ({
       >
         <div
           className={cn(
-            "flex items-center gap-1 rounded-[10px] border py-[5px] pr-1.5 pl-2.5 text-gray-500 dark:text-gray-400",
+            "flex items-center gap-1 rounded-[10px] border py-[5px] pr-1.5 pl-2.5 text-stone-500 dark:text-stone-400",
             hasOptions ? "cursor-pointer" : "cursor-default",
             hasOptions &&
               codeBlockTheme === "system" &&
-              "hover:bg-gray-200/50 hover:text-primary dark:hover:bg-gray-700/70 dark:hover:text-primary-light",
+              "hover:bg-stone-200/50 hover:text-primary dark:hover:bg-stone-700/70 dark:hover:text-primary-light",
             hasOptions &&
               codeBlockTheme === "dark" &&
-              "hover:bg-gray-700/70 hover:text-primary-light",
+              "hover:bg-stone-700/70 hover:text-primary-light",
             isOpen &&
-              "border-gray-600/50 ring-1 dark:border-gray-400/50 dark:ring-gray-800/50",
-            isOpen && codeBlockTheme === "system" && "ring-gray-200/70",
-            isOpen && codeBlockTheme === "dark" && "ring-gray-800/50",
+              "border-stone-600/50 ring-1 dark:border-stone-400/50 dark:ring-stone-800/50",
+            isOpen && codeBlockTheme === "system" && "ring-stone-200/70",
+            isOpen && codeBlockTheme === "dark" && "ring-stone-800/50",
             !isOpen && "border-transparent"
           )}
         >
@@ -64,7 +64,7 @@ const LanguageDropdown = ({
         className={cn(
           "min-w-[170px] overflow-y-auto border p-1",
           codeBlockTheme === "system" &&
-            "border-gray-200/70 bg-white dark:border-white/10 dark:bg-[#0F1117]",
+            "border-stone-200/70 bg-white dark:border-white/10 dark:bg-[#0F1117]",
           codeBlockTheme === "dark" && "border-white/10 bg-[#0F1117]"
         )}
         sideOffset={0}
@@ -87,7 +87,7 @@ const LanguageDropdown = ({
                   "font-medium text-primary-light dark:text-primary-light",
                 language !== selectedLanguage &&
                   codeBlockTheme === "system" &&
-                  "text-gray-500 dark:text-white/50",
+                  "text-stone-500 dark:text-white/50",
                 language !== selectedLanguage &&
                   codeBlockTheme === "dark" &&
                   "text-white/50"
diff --git a/packages/components/src/components/color/color.tsx b/packages/components/src/components/color/color.tsx
index c19b51c..c3d4e9a 100644
--- a/packages/components/src/components/color/color.tsx
+++ b/packages/components/src/components/color/color.tsx
@@ -54,7 +54,7 @@ const ColorRow = ({ children, title }: ColorRowProps) => {
           data-component-part="color-row-title-container"
         >
           <p
-            className="m-0 truncate font-medium text-gray-900 text-sm tracking-[-0.1px] dark:text-gray-200"
+            className="m-0 truncate font-medium text-sm text-stone-900 tracking-[-0.1px] dark:text-stone-200"
             data-component-part="color-row-title"
             title={title}
           >
@@ -128,7 +128,7 @@ const ColorItem = ({ name, value }: ColorItemProps) => {
       aria-pressed={state === "copied"}
       aria-roledescription={state === "copied" ? "Copied" : "Copy"}
       className={cn(
-        "relative flex cursor-copy items-center justify-center rounded-lg border border-neutral-200 dark:border-neutral-800",
+        "relative flex cursor-copy items-center justify-center rounded-lg border border-stone-200 dark:border-stone-800",
         variant === "compact" && "aspect-square max-h-[104px]",
         variant === "table" && "aspect-square w-full md:h-10"
       )}
@@ -165,7 +165,7 @@ const ColorItem = ({ name, value }: ColorItemProps) => {
         <div className="flex w-[104px] min-w-0 flex-col gap-0.5">
           {name && (
             <p
-              className="m-0 truncate text-center font-medium text-gray-900 text-sm dark:text-gray-200"
+              className="m-0 truncate text-center font-medium text-sm text-stone-900 dark:text-stone-200"
               data-component-part="color-item-name"
               title={name}
             >
@@ -173,7 +173,7 @@ const ColorItem = ({ name, value }: ColorItemProps) => {
             </p>
           )}
           <p
-            className="m-0 truncate text-center font-mono text-gray-600 text-xs dark:text-gray-400"
+            className="m-0 truncate text-center font-mono text-stone-600 text-xs dark:text-stone-400"
             data-component-part="color-item-value"
             title={currentColor}
           >
diff --git a/packages/components/src/components/columns/columns.stories.tsx b/packages/components/src/components/columns/columns.stories.tsx
index 45e4785..81bd251 100644
--- a/packages/components/src/components/columns/columns.stories.tsx
+++ b/packages/components/src/components/columns/columns.stories.tsx
@@ -4,7 +4,7 @@ import { Columns } from "./columns";
 import { COL_OPTIONS } from "./constants";
 
 const Box = ({ children }: { children?: React.ReactNode }) => (
-  <div className="flex h-24 items-center justify-center rounded-lg bg-zinc-200 text-sm text-zinc-500 dark:bg-zinc-800">
+  <div className="flex h-24 items-center justify-center rounded-lg bg-stone-200 text-sm text-stone-500 dark:bg-stone-800">
     {children}
   </div>
 );
diff --git a/packages/components/src/components/expandable/expandable.stories.tsx b/packages/components/src/components/expandable/expandable.stories.tsx
index 83c9d25..21f2dcc 100644
--- a/packages/components/src/components/expandable/expandable.stories.tsx
+++ b/packages/components/src/components/expandable/expandable.stories.tsx
@@ -115,8 +115,8 @@ export const WithRichContent: Story = {
           <code className="font-mono text-pink-600 text-sm dark:text-pink-400">
             id
           </code>
-          <span className="ml-2 text-gray-500 text-sm">string</span>
-          <p className="mt-1 text-gray-600 text-sm dark:text-gray-400">
+          <span className="ml-2 text-sm text-stone-500">string</span>
+          <p className="mt-1 text-sm text-stone-600 dark:text-stone-400">
             Unique identifier for the resource.
           </p>
         </div>
@@ -124,8 +124,8 @@ export const WithRichContent: Story = {
           <code className="font-mono text-pink-600 text-sm dark:text-pink-400">
             name
           </code>
-          <span className="ml-2 text-gray-500 text-sm">string</span>
-          <p className="mt-1 text-gray-600 text-sm dark:text-gray-400">
+          <span className="ml-2 text-sm text-stone-500">string</span>
+          <p className="mt-1 text-sm text-stone-600 dark:text-stone-400">
             Display name of the resource.
           </p>
         </div>
@@ -133,8 +133,8 @@ export const WithRichContent: Story = {
           <code className="font-mono text-pink-600 text-sm dark:text-pink-400">
             createdAt
           </code>
-          <span className="ml-2 text-gray-500 text-sm">datetime</span>
-          <p className="mt-1 text-gray-600 text-sm dark:text-gray-400">
+          <span className="ml-2 text-sm text-stone-500">datetime</span>
+          <p className="mt-1 text-sm text-stone-600 dark:text-stone-400">
             Timestamp when the resource was created.
           </p>
         </div>
diff --git a/packages/components/src/components/expandable/expandable.tsx b/packages/components/src/components/expandable/expandable.tsx
index 51b474c..52ff576 100644
--- a/packages/components/src/components/expandable/expandable.tsx
+++ b/packages/components/src/components/expandable/expandable.tsx
@@ -142,7 +142,7 @@ const Expandable = ({
         aria-expanded={open}
         className={cn(
           "not-prose flex w-full cursor-pointer flex-row content-center items-center text-sm",
-          "rounded-t-xl px-3.5 py-3 text-gray-600 hover:bg-gray-50/50 hover:text-gray-900 dark:text-gray-300 dark:hover:bg-white/5 dark:hover:text-gray-200",
+          "rounded-t-xl px-3.5 py-3 text-stone-600 hover:bg-stone-50/50 hover:text-stone-900 dark:text-stone-300 dark:hover:bg-white/5 dark:hover:text-stone-200",
           "list-none [&::-webkit-details-marker]:hidden",
           !open && "rounded-b-xl"
         )}
@@ -150,7 +150,7 @@ const Expandable = ({
       >
         <Icon
           className={cn(
-            "size-2.5 bg-zinc-400 transition-transform",
+            "size-2.5 bg-stone-400 transition-transform",
             open && "rotate-90"
           )}
           data-component-part="expandable-icon"
@@ -165,7 +165,7 @@ const Expandable = ({
       <div
         className={cn(
           EXPANDABLE_CONTENT_CLASS,
-          "mx-3 border-gray-100 border-t px-2 dark:border-white/10"
+          "mx-3 border-stone-100 border-t px-2 dark:border-white/10"
         )}
         data-component-part={EXPANDABLE_CONTENT_CLASS}
         id={contentId}
diff --git a/packages/components/src/components/frame/frame.stories.tsx b/packages/components/src/components/frame/frame.stories.tsx
index a6c0121..4a65bed 100644
--- a/packages/components/src/components/frame/frame.stories.tsx
+++ b/packages/components/src/components/frame/frame.stories.tsx
@@ -60,7 +60,7 @@ export const WithContent: Story = {
     children: (
       <div className="p-4">
         <h3 className="mb-2 font-semibold text-lg">Frame Content</h3>
-        <p className="text-gray-600 dark:text-gray-300">
+        <p className="text-stone-600 dark:text-stone-300">
           This frame contains structured content with a heading and paragraph.
         </p>
       </div>
@@ -77,7 +77,7 @@ export const WithAllFeatures: Story = {
     children: (
       <div className="p-4">
         <h3 className="mb-2 font-semibold text-lg">Complete Example</h3>
-        <p className="text-gray-600 dark:text-gray-300">
+        <p className="text-stone-600 dark:text-stone-300">
           This frame demonstrates all available features including caption,
           hint, and custom styling.
         </p>
diff --git a/packages/components/src/components/frame/frame.tsx b/packages/components/src/components/frame/frame.tsx
index f06952a..fb4c470 100644
--- a/packages/components/src/components/frame/frame.tsx
+++ b/packages/components/src/components/frame/frame.tsx
@@ -31,13 +31,13 @@ const Frame = ({
         <div className="not-prose mb-4 flex items-center space-x-2">
           <svg
             aria-hidden="true"
-            className="size-4 flex-none fill-gray-400 dark:fill-gray-300"
+            className="size-4 flex-none fill-stone-400 dark:fill-stone-300"
             viewBox="0 0 512 512"
             xmlns="http://www.w3.org/2000/svg"
           >
             <path d="M224 320c0 17.69 14.33 32 32 32h64c17.67 0 32-14.31 32-32s-14.33-32-32-32h-64C238.3 288 224 302.3 224 320zM267.6 256H352c17.67 0 32-14.31 32-32s-14.33-32-32-32h-80v40C272 240.5 270.3 248.5 267.6 256zM272 160H480c17.67 0 32-14.31 32-32s-14.33-32-32-32h-208.8C271.5 98.66 272 101.3 272 104V160zM320 416c0-17.69-14.33-32-32-32H224c-17.67 0-32 14.31-32 32s14.33 32 32 32h64C305.7 448 320 433.7 320 416zM202.1 355.8C196 345.6 192 333.3 192 320c0-5.766 1.08-11.24 2.51-16.55C157.4 300.6 128 269.9 128 232V159.1C128 151.2 135.2 144 143.1 144S160 151.2 159.1 159.1l0 69.72C159.1 245.2 171.3 271.1 200 271.1C222.1 271.1 240 254.1 240 232v-128C240 81.91 222.1 64 200 64H136.6C103.5 64 72.03 80 52.47 106.8L26.02 143.2C9.107 166.5 0 194.5 0 223.3V312C0 387.1 60.89 448 136 448h32.88C163.4 438.6 160 427.7 160 416C160 388.1 178 364.6 202.1 355.8z" />
           </svg>
-          <p className="font-medium text-gray-700 text-sm dark:text-gray-200">
+          <p className="font-medium text-sm text-stone-700 dark:text-stone-200">
             {title}
           </p>
         </div>
@@ -45,7 +45,7 @@ const Frame = ({
       <Component
         className={cn(
           Classes.Frame,
-          "not-prose relative overflow-hidden rounded-2xl bg-gray-50/50 p-2 dark:bg-gray-800/25"
+          "not-prose relative overflow-hidden rounded-2xl bg-stone-50/50 p-2 dark:bg-stone-800/25"
         )}
         data-component-part="frame"
         data-name="frame"
@@ -53,12 +53,12 @@ const Frame = ({
       >
         <div
           aria-hidden="true"
-          className="mask-[linear-gradient(0deg,#fff,rgba(255,255,255,0.6))] dark:mask-[linear-gradient(0deg,rgba(255,255,255,0.1),rgba(255,255,255,0.5))] absolute inset-0 bg-grid-neutral-200/20 dark:bg-grid-white/5"
+          className="mask-[linear-gradient(0deg,#fff,rgba(255,255,255,0.6))] dark:mask-[linear-gradient(0deg,rgba(255,255,255,0.1),rgba(255,255,255,0.5))] absolute inset-0 bg-grid-stone-200/20 dark:bg-grid-white/5"
           data-component-part="frame-background-pattern"
           style={{ backgroundPosition: "10px 10px" }}
         />
         <div
-          className="relative flex w-full justify-center overflow-hidden rounded-xl bg-white dark:bg-gray-800"
+          className="relative flex w-full justify-center overflow-hidden rounded-xl bg-white dark:bg-stone-800"
           data-component-part="frame-content"
         >
           {enhancedChildren}
@@ -66,7 +66,7 @@ const Frame = ({
 
         {description && (
           <div
-            className="relative mt-3 flex w-full justify-center rounded-2xl bg-white px-8 pt-0 pb-2 text-gray-700 text-sm dark:bg-gray-800 dark:text-gray-400"
+            className="relative mt-3 flex w-full justify-center rounded-2xl bg-white px-8 pt-0 pb-2 text-sm text-stone-700 dark:bg-stone-800 dark:text-stone-400"
             contentEditable={false}
             data-component-part="frame-description"
           >
diff --git a/packages/components/src/components/icon/icon.tsx b/packages/components/src/components/icon/icon.tsx
index 17f7957..d689bf8 100644
--- a/packages/components/src/components/icon/icon.tsx
+++ b/packages/components/src/components/icon/icon.tsx
@@ -128,7 +128,7 @@ const Icon = ({
         className={cn(
           classNames,
           !(color || overrideColor || hasLightDarkColors) &&
-            "bg-gray-800 dark:bg-gray-100"
+            "bg-stone-800 dark:bg-stone-100"
         )}
         data-component-part="icon-image"
         src={url}
@@ -145,7 +145,7 @@ const Icon = ({
       className={cn(
         classNames,
         !(color || overrideColor || hasLightDarkColors) &&
-          "bg-gray-800 dark:bg-gray-100"
+          "bg-stone-800 dark:bg-stone-100"
       )}
       data-component-part="icon-svg"
       style={{
diff --git a/packages/components/src/components/mermaid/mermaid.stories.tsx b/packages/components/src/components/mermaid/mermaid.stories.tsx
index e804e7a..62a309c 100644
--- a/packages/components/src/components/mermaid/mermaid.stories.tsx
+++ b/packages/components/src/components/mermaid/mermaid.stories.tsx
@@ -207,7 +207,7 @@ export const ComplexFlowchart: Story = {
 export const WithCustomClassName: Story = {
   args: {
     chart: flowchartExample,
-    className: "border rounded-lg p-4 bg-gray-50 dark:bg-gray-800",
+    className: "border rounded-lg p-4 bg-stone-50 dark:bg-stone-800",
   },
 };
 
diff --git a/packages/components/src/components/mermaid/zoom-controls.tsx b/packages/components/src/components/mermaid/zoom-controls.tsx
index ead8d82..ce73cd6 100644
--- a/packages/components/src/components/mermaid/zoom-controls.tsx
+++ b/packages/components/src/components/mermaid/zoom-controls.tsx
@@ -20,7 +20,7 @@ const Button = ({
   return (
     <button
       className={cn(
-        "flex size-7 cursor-pointer touch-manipulation items-center justify-center rounded-md border border-gray-200 bg-white text-gray-900 transition-[transform] duration-100 hover:bg-gray-50 motion-safe:active:scale-95 dark:border-white/10 dark:bg-gray-900 dark:text-white dark:hover:bg-gray-800 [&_svg]:size-4",
+        "flex size-7 cursor-pointer touch-manipulation items-center justify-center rounded-md border border-stone-200 bg-white text-stone-900 transition-[transform] duration-100 hover:bg-stone-50 motion-safe:active:scale-95 dark:border-white/10 dark:bg-stone-900 dark:text-white dark:hover:bg-stone-800 [&_svg]:size-4",
         className
       )}
       type="button"
diff --git a/packages/components/src/components/property/param-head.tsx b/packages/components/src/components/property/param-head.tsx
index cf9abe0..a2162de 100644
--- a/packages/components/src/components/property/param-head.tsx
+++ b/packages/components/src/components/property/param-head.tsx
@@ -84,7 +84,7 @@ const ParamHead = ({
                 onClick={copyAnchorLink}
               >
                 &#8203;
-                <div className="flex size-6 items-center justify-center rounded-md bg-white text-gray-400 shadow-sm ring-1 ring-gray-400/30 hover:ring-gray-400/60 group-focus/link:border-2 group-focus/link:border-primary dark:bg-background-dark dark:text-white/50 dark:ring-1 dark:ring-gray-700/25 dark:brightness-[1.35] dark:group-focus/link:border-primary-light dark:hover:ring-white/20 dark:hover:brightness-150">
+                <div className="flex size-6 items-center justify-center rounded-md bg-white text-stone-400 shadow-sm ring-1 ring-stone-400/30 hover:ring-stone-400/60 group-focus/link:border-2 group-focus/link:border-primary dark:bg-background-dark dark:text-white/50 dark:ring-1 dark:ring-stone-700/25 dark:brightness-[1.35] dark:group-focus/link:border-primary-light dark:hover:ring-white/20 dark:hover:brightness-150">
                   <LinkIcon />
                 </div>
               </a>
@@ -92,7 +92,7 @@ const ParamHead = ({
           )}
           {pre?.map((item, i) => (
             <div
-              className="rounded-md bg-gray-100/50 px-2 py-0.5 text-gray-600 dark:bg-white/5 dark:text-gray-200"
+              className="rounded-md bg-stone-100/50 px-2 py-0.5 text-stone-600 dark:bg-white/5 dark:text-stone-200"
               data-component-part="field-meta-pre"
               // biome-ignore lint/suspicious/noArrayIndexKey: TODO
               key={i}
@@ -134,7 +134,7 @@ const ParamHead = ({
             {deprecated && <DeprecatedPill label={deprecatedLabel} />}
             {post?.map((item, i) => (
               <div
-                className="rounded-md bg-gray-100/50 px-2 py-0.5 text-gray-600 dark:bg-white/5 dark:text-gray-200"
+                className="rounded-md bg-stone-100/50 px-2 py-0.5 text-stone-600 dark:bg-white/5 dark:text-stone-200"
                 data-component-part="field-meta-post"
                 // biome-ignore lint/suspicious/noArrayIndexKey: TODO
                 key={i}
diff --git a/packages/components/src/components/property/pills.tsx b/packages/components/src/components/property/pills.tsx
index 02b349f..bbfc710 100644
--- a/packages/components/src/components/property/pills.tsx
+++ b/packages/components/src/components/property/pills.tsx
@@ -11,13 +11,13 @@ const InfoPill = ({ children, prefix, className }: InfoPillProps) => {
   return (
     <div
       className={cn(
-        "flex items-center gap-1 break-all rounded-md bg-gray-100/50 px-2 py-0.5 font-medium text-gray-600 dark:bg-white/5 dark:text-gray-200",
+        "flex items-center gap-1 break-all rounded-md bg-stone-100/50 px-2 py-0.5 font-medium text-stone-600 dark:bg-white/5 dark:text-stone-200",
         className
       )}
       data-component-part="field-info-pill"
     >
       {prefix && (
-        <span className="text-gray-400 dark:text-gray-500">{prefix}</span>
+        <span className="text-stone-400 dark:text-stone-500">{prefix}</span>
       )}
       <span>{children}</span>
     </div>
diff --git a/packages/components/src/components/property/property.tsx b/packages/components/src/components/property/property.tsx
index 3aed0c3..e6f8ca5 100644
--- a/packages/components/src/components/property/property.tsx
+++ b/packages/components/src/components/property/property.tsx
@@ -84,7 +84,7 @@ const Property = ({
     <div
       className={cn(
         Classes.Field,
-        "my-2.5 border-gray-50 border-b pt-2.5 pb-5 dark:border-gray-800/50",
+        "my-2.5 border-stone-50 border-b pt-2.5 pb-5 dark:border-stone-800/50",
         className
       )}
     >
@@ -106,7 +106,7 @@ const Property = ({
       />
       {children && (
         <div
-          className="prose-sm prose-gray dark:prose-invert mt-4 [&_.prose>p:first-child]:mt-0 [&_.prose>p:last-child]:mb-0"
+          className="prose-sm prose-stone dark:prose-invert mt-4 [&_.prose>p:first-child]:mt-0 [&_.prose>p:last-child]:mb-0"
           data-component-part="field-content"
         >
           {children}
diff --git a/packages/components/src/components/steps/steps.stories.tsx b/packages/components/src/components/steps/steps.stories.tsx
index 7d78f2c..bd35387 100644
--- a/packages/components/src/components/steps/steps.stories.tsx
+++ b/packages/components/src/components/steps/steps.stories.tsx
@@ -168,7 +168,7 @@ export const StepsWithMixedContent: Story = {
       <Steps.Item title="Installation">
         <div className="space-y-2">
           <p>Install the required dependencies:</p>
-          <code className="block rounded bg-gray-100 p-2 dark:bg-gray-800">
+          <code className="block rounded bg-stone-100 p-2 dark:bg-stone-800">
             npm install
           </code>
         </div>
@@ -186,7 +186,7 @@ export const StepsWithMixedContent: Story = {
       <Steps.Item title="Deployment">
         <div className="space-y-2">
           <p>Deploy your application:</p>
-          <code className="block rounded bg-gray-100 p-2 dark:bg-gray-800">
+          <code className="block rounded bg-stone-100 p-2 dark:bg-stone-800">
             npm run deploy
           </code>
         </div>
@@ -213,7 +213,7 @@ export const StepsWithLargeTitles: Story = {
 
 export const StepsWithCustomClassName: Story = {
   render: () => (
-    <Steps className="rounded-md border-2 border-gray-200 p-4">
+    <Steps className="rounded-md border-2 border-stone-200 p-4">
       <Steps.Item className="bg-blue-500" title="Important First Step">
         This step should have a custom class name.
       </Steps.Item>
diff --git a/packages/components/src/components/steps/steps.tsx b/packages/components/src/components/steps/steps.tsx
index b2819b1..25451bc 100644
--- a/packages/components/src/components/steps/steps.tsx
+++ b/packages/components/src/components/steps/steps.tsx
@@ -36,7 +36,7 @@ const StepsItem = ({
   const transformedIconOrNumber =
     typeof icon === "string" ? (
       <Icon
-        className="size-3 bg-gray-900 dark:bg-gray-50"
+        className="size-3 bg-stone-900 dark:bg-stone-50"
         icon={icon}
         iconLibrary={iconLibrary}
         iconType={iconType}
@@ -65,8 +65,8 @@ const StepsItem = ({
         className={cn(
           "absolute top-11 h-[calc(100%-2.75rem)] w-px",
           isLast
-            ? 'bg-linear-to-b from-gray-200 via-80% via-gray-200 to-transparent group-has-[[data-component-part="step-content"]:empty]/step:hidden dark:from-white/10 dark:via-white/10'
-            : "bg-gray-200/70 dark:bg-white/10"
+            ? 'bg-linear-to-b from-stone-200 via-80% via-stone-200 to-transparent group-has-[[data-component-part="step-content"]:empty]/step:hidden dark:from-white/10 dark:via-white/10'
+            : "bg-stone-200/70 dark:bg-white/10"
         )}
         contentEditable={false}
         data-component-part="step-line"
@@ -76,14 +76,14 @@ const StepsItem = ({
         contentEditable={false}
         data-component-part="step-number"
       >
-        <div className="flex size-7 shrink-0 items-center justify-center rounded-full bg-gray-50 font-semibold text-gray-900 text-xs dark:bg-white/10 dark:text-gray-50">
+        <div className="flex size-7 shrink-0 items-center justify-center rounded-full bg-stone-50 font-semibold text-stone-900 text-xs dark:bg-white/10 dark:text-stone-50">
           {transformedIconOrNumber}
         </div>
       </div>
       <div className="w-full overflow-hidden pr-px pl-8">
         {!!title &&
           (() => {
-            const titleClasses = "mt-2 text-gray-900 dark:text-gray-200";
+            const titleClasses = "mt-2 text-stone-900 dark:text-stone-200";
             const titleProps = {
               contentEditable: false,
               "data-component-part": "step-title",
diff --git a/packages/components/src/components/tabs/tabs.tsx b/packages/components/src/components/tabs/tabs.tsx
index a8a50d5..591bd7e 100644
--- a/packages/components/src/components/tabs/tabs.tsx
+++ b/packages/components/src/components/tabs/tabs.tsx
@@ -149,13 +149,13 @@ const TabsRoot = ({
       className={cn(
         Classes.Tabs,
         "tabs tab-container",
-        borderBottom && "border-gray-200 border-b pb-6 dark:border-gray-700",
+        borderBottom && "border-stone-200 border-b pb-6 dark:border-stone-700",
         className
       )}
     >
       <ul
         aria-label={ariaLabel ?? "Tabs"}
-        className="not-prose mb-6 flex min-w-full flex-none gap-x-6 overflow-auto border-gray-200 border-b pb-px dark:border-gray-700"
+        className="not-prose mb-6 flex min-w-full flex-none gap-x-6 overflow-auto border-stone-200 border-b pb-px dark:border-stone-700"
         data-component-part="tabs-list"
         // biome-ignore lint/a11y/noNoninteractiveElementToInteractiveRole: TODO
         role="tablist"
@@ -194,7 +194,7 @@ const TabsRoot = ({
                   "-mb-px flex max-w-max items-center gap-1.5 whitespace-nowrap border-b pt-3 pb-2.5 font-semibold text-sm leading-6",
                   isActive
                     ? "border-current text-primary dark:text-primary-light"
-                    : "border-transparent text-gray-900 hover:border-gray-300 dark:text-gray-200 dark:hover:border-gray-700"
+                    : "border-transparent text-stone-900 hover:border-stone-300 dark:text-stone-200 dark:hover:border-stone-700"
                 )}
                 data-active={isActive}
                 data-component-part="tab-button"
@@ -206,7 +206,7 @@ const TabsRoot = ({
                       "size-4 shrink-0",
                       isActive
                         ? "bg-primary dark:bg-primary-light"
-                        : "bg-gray-900 dark:bg-gray-200",
+                        : "bg-stone-900 dark:bg-stone-200",
                       Classes.TabIcon
                     )}
                     icon={icon}
diff --git a/packages/components/src/components/tile/tile.tsx b/packages/components/src/components/tile/tile.tsx
index 541f021..9203400 100644
--- a/packages/components/src/components/tile/tile.tsx
+++ b/packages/components/src/components/tile/tile.tsx
@@ -41,8 +41,8 @@ type TileProps = {
 const Tile = ({ href, children, title, description, className }: TileProps) => {
   const DEFAULT_BG_PATTERN_CLASSES = cn(
     "pointer-events-none size-full select-none bg-center bg-repeat-round [grid-area:1/1]",
-    "after:absolute after:left-0 after:h-full after:w-[7px] after:bg-neutral-50 after:content-[''] dark:after:bg-neutral-900",
-    "before:absolute before:right-0 before:h-full before:w-[7px] before:bg-neutral-50 before:content-[''] dark:before:bg-neutral-900"
+    "after:absolute after:left-0 after:h-full after:w-[7px] after:bg-stone-50 after:content-[''] dark:after:bg-stone-900",
+    "before:absolute before:right-0 before:h-full before:w-[7px] before:bg-stone-50 before:content-[''] dark:before:bg-stone-900"
   );
 
   return (
@@ -56,7 +56,7 @@ const Tile = ({ href, children, title, description, className }: TileProps) => {
       )}
     >
       <div
-        className="relative grid h-[170px] w-full place-items-center overflow-hidden rounded-2xl bg-neutral-50 py-1 dark:bg-neutral-900"
+        className="relative grid h-[170px] w-full place-items-center overflow-hidden rounded-2xl bg-stone-50 py-1 dark:bg-stone-900"
         data-component-part="tile-children-container"
       >
         <div
@@ -91,7 +91,7 @@ const Tile = ({ href, children, title, description, className }: TileProps) => {
         >
           {!!title && (
             <p
-              className="m-0 max-w-full truncate font-medium text-base text-neutral-900 tracking-[-0.2px] dark:text-neutral-200"
+              className="m-0 max-w-full truncate font-medium text-base text-stone-900 tracking-[-0.2px] dark:text-stone-200"
               data-component-part="tile-title"
               title={title}
             >
@@ -100,7 +100,7 @@ const Tile = ({ href, children, title, description, className }: TileProps) => {
           )}
           {!!description && (
             <p
-              className="m-0 max-w-full truncate font-normal text-neutral-600 text-sm tracking-[-0.1px] dark:text-neutral-400"
+              className="m-0 max-w-full truncate font-normal text-sm text-stone-600 tracking-[-0.1px] dark:text-stone-400"
               data-component-part="tile-description"
               title={description}
             >
diff --git a/packages/components/src/components/tooltip/tooltip.tsx b/packages/components/src/components/tooltip/tooltip.tsx
index 5bc6772..9c6a284 100644
--- a/packages/components/src/components/tooltip/tooltip.tsx
+++ b/packages/components/src/components/tooltip/tooltip.tsx
@@ -87,12 +87,12 @@ const Tooltip = ({
         <TooltipBaseUI.Portal>
           <TooltipBaseUI.Positioner collisionPadding={8} sideOffset={4}>
             <TooltipBaseUI.Popup
-              className="z-50 flex max-w-[16rem] flex-col gap-1 rounded-xl border border-gray-200 bg-white px-4 py-3 shadow-[0_10px_16px_-3px_rgb(10_10_10/0.05),0_3px_10px_-2px_rgb(10_10_10/0.02)] dark:border-gray-900 dark:bg-gray-950"
+              className="z-50 flex max-w-[16rem] flex-col gap-1 rounded-xl border border-stone-200 bg-white px-4 py-3 shadow-[0_10px_16px_-3px_rgb(10_10_10/0.05),0_3px_10px_-2px_rgb(10_10_10/0.02)] dark:border-stone-900 dark:bg-stone-950"
               data-component-part="tooltip-content"
             >
               {!!title && (
                 <p
-                  className="font-medium text-gray-900 text-xs leading-4 dark:text-gray-200"
+                  className="font-medium text-stone-900 text-xs leading-4 dark:text-stone-200"
                   data-component-part="tooltip-title"
                 >
                   {title}
@@ -100,7 +100,7 @@ const Tooltip = ({
               )}
               {!!description && (
                 <p
-                  className="text-gray-600 text-xs leading-4 dark:text-gray-400"
+                  className="text-stone-600 text-xs leading-4 dark:text-stone-400"
                   data-component-part="tooltip-description"
                 >
                   {description}
@@ -112,7 +112,7 @@ const Tooltip = ({
                   {...(isRemoteUrl(href)
                     ? { target: "_blank", rel: "noreferrer" }
                     : {})}
-                  className="mt-2! flex items-center gap-0.5 rounded-sm font-medium text-gray-600 text-xs leading-4 hover:text-primary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 dark:text-gray-400 dark:hover:text-primary-light"
+                  className="mt-2! flex items-center gap-0.5 rounded-sm font-medium text-stone-600 text-xs leading-4 hover:text-primary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 dark:text-stone-400 dark:hover:text-primary-light"
                   data-component-part="tooltip-cta"
                 >
                   {cta}
@@ -162,7 +162,7 @@ const underlineWhenTextOnly = (children: ReactNode) => {
     <span
       className={cn(
         Classes.Tooltip,
-        "underline decoration-2 decoration-gray-400 decoration-dotted underline-offset-4 dark:decoration-gray-500"
+        "underline decoration-2 decoration-stone-400 decoration-dotted underline-offset-4 dark:decoration-stone-500"
       )}
     >
       {children}
diff --git a/packages/components/src/components/tree/file.tsx b/packages/components/src/components/tree/file.tsx
index f93e22a..6c31002 100644
--- a/packages/components/src/components/tree/file.tsx
+++ b/packages/components/src/components/tree/file.tsx
@@ -18,7 +18,7 @@ const TreeFile = ({ name }: TreeFileProps) => {
       aria-level={level}
       aria-selected={false}
       className={cn(
-        "flex cursor-default items-center gap-1.5 rounded-lg py-1 pr-1.5 pl-[calc(var(--padding-left)*1px)] text-gray-700 -outline-offset-1 hover:bg-neutral-100 dark:text-gray-400 dark:hover:bg-neutral-900",
+        "flex cursor-default items-center gap-1.5 rounded-lg py-1 pr-1.5 pl-[calc(var(--padding-left)*1px)] text-stone-700 -outline-offset-1 hover:bg-stone-100 dark:text-stone-400 dark:hover:bg-stone-900",
         Classes.TreeFile
       )}
       data-component-part="tree-file"
diff --git a/packages/components/src/components/tree/folder.tsx b/packages/components/src/components/tree/folder.tsx
index 33e4049..6061cc7 100644
--- a/packages/components/src/components/tree/folder.tsx
+++ b/packages/components/src/components/tree/folder.tsx
@@ -44,7 +44,7 @@ const TreeFolder = ({
         aria-owns={openable && open ? groupId : undefined}
         aria-selected={false}
         className={cn(
-          "flex items-center gap-1.5 rounded-lg py-1 pr-1.5 pl-[calc(var(--padding-left)*1px)] text-gray-700 -outline-offset-1 hover:bg-neutral-100 dark:text-gray-400 dark:hover:bg-neutral-900",
+          "flex items-center gap-1.5 rounded-lg py-1 pr-1.5 pl-[calc(var(--padding-left)*1px)] text-stone-700 -outline-offset-1 hover:bg-stone-100 dark:text-stone-400 dark:hover:bg-stone-900",
           openable ? "cursor-pointer" : "cursor-default",
           Classes.TreeFolder
         )}
@@ -80,7 +80,7 @@ const TreeFolder = ({
         >
           <div
             aria-hidden="true"
-            className="absolute left-[calc((var(--padding-left)+8)*1px)] z-10 h-full w-px select-none bg-neutral-200 dark:bg-neutral-800"
+            className="absolute left-[calc((var(--padding-left)+8)*1px)] z-10 h-full w-px select-none bg-stone-200 dark:bg-stone-800"
             data-component-part="tree-folder-children-line"
           />
           <TreeLevelProvider level={level + 1} parentId={nodeId}>
diff --git a/packages/components/src/components/tree/tree.stories.tsx b/packages/components/src/components/tree/tree.stories.tsx
index f05de3e..683d54e 100644
--- a/packages/components/src/components/tree/tree.stories.tsx
+++ b/packages/components/src/components/tree/tree.stories.tsx
@@ -148,7 +148,10 @@ export const ProjectStructure: Story = {
 
 export const WithCustomClassName: Story = {
   render: (args) => (
-    <Tree {...args} className="w-64 rounded-lg bg-gray-50 p-4 dark:bg-gray-900">
+    <Tree
+      {...args}
+      className="w-64 rounded-lg bg-stone-50 p-4 dark:bg-stone-900"
+    >
       <Tree.Folder defaultOpen name="src">
         <Tree.File name="index.ts" />
         <Tree.File name="app.tsx" />
diff --git a/packages/components/src/components/update/update.tsx b/packages/components/src/components/update/update.tsx
index f30218d..a29744e 100644
--- a/packages/components/src/components/update/update.tsx
+++ b/packages/components/src/components/update/update.tsx
@@ -114,7 +114,7 @@ const Update = forwardRef<HTMLDivElement, UpdateProps>(
               href={`#${encodeURIComponent(id)}`}
             >
               &#8203;
-              <div className="flex size-6 items-center justify-center rounded-md bg-white text-gray-400 shadow-sm ring-1 ring-gray-400/30 hover:ring-gray-400/60 group-focus/link:border-2 group-focus/link:border-primary dark:bg-background-dark dark:text-white/50 dark:ring-1 dark:ring-gray-700/25 dark:brightness-[1.35] dark:group-focus/link:border-primary-light dark:hover:ring-white/20 dark:hover:brightness-150">
+              <div className="flex size-6 items-center justify-center rounded-md bg-white text-stone-400 shadow-sm ring-1 ring-stone-400/30 hover:ring-stone-400/60 group-focus/link:border-2 group-focus/link:border-primary dark:bg-background-dark dark:text-white/50 dark:ring-1 dark:ring-stone-700/25 dark:brightness-[1.35] dark:group-focus/link:border-primary-light dark:hover:ring-white/20 dark:hover:brightness-150">
                 <LinkIcon />
               </div>
             </a>
diff --git a/packages/components/src/icons/index.tsx b/packages/components/src/icons/index.tsx
index c16ec03..1ac9db0 100644
--- a/packages/components/src/icons/index.tsx
+++ b/packages/components/src/icons/index.tsx
@@ -12,7 +12,7 @@ const InfoIcon = ({
     <svg
       aria-label={ariaLabel}
       className={cn(
-        "size-5 flex-none text-neutral-800 dark:text-neutral-300",
+        "size-5 flex-none text-stone-800 dark:text-stone-300",
         className
       )}
       fill="currentColor"
@@ -304,7 +304,7 @@ const CopyButtonIcon = ({
       className={cn(
         "size-4",
         codeBlockTheme === "system" &&
-          "text-gray-400 group-hover/copy-button:text-gray-500 dark:text-white/40 dark:group-hover/copy-button:text-white/60",
+          "text-stone-400 group-hover/copy-button:text-stone-500 dark:text-white/40 dark:group-hover/copy-button:text-white/60",
         codeBlockTheme === "dark" &&
           "text-white/40 group-hover/copy-button:text-white/60"
       )}
diff --git a/packages/components/src/styles.css b/packages/components/src/styles.css
index 807f201..11465c3 100644
--- a/packages/components/src/styles.css
+++ b/packages/components/src/styles.css
@@ -15,137 +15,6 @@
   --color-primary-dark: rgb(45, 90, 61);
   --color-tooltip-foreground: rgb(255, 255, 255);
   --color-background-dark: rgb(14, 14, 15);
-  --color-red-50: oklch(97.1% 0.013 17.38);
-  --color-red-100: oklch(93.6% 0.032 17.72);
-  --color-red-200: oklch(88.5% 0.062 18.33);
-  --color-red-300: oklch(80.8% 0.114 19.57);
-  --color-red-400: oklch(70.4% 0.191 22.22);
-  --color-red-500: oklch(63.7% 0.237 25.33);
-  --color-red-600: oklch(57.7% 0.245 27.33);
-  --color-red-700: oklch(50.5% 0.213 27.52);
-  --color-red-800: oklch(44.4% 0.177 26.9);
-  --color-red-900: oklch(39.6% 0.141 25.72);
-  --color-red-950: oklch(25.8% 0.092 26.04);
-
-  --color-orange-50: oklch(98% 0.016 73.68);
-  --color-orange-100: oklch(95.4% 0.038 75.16);
-  --color-orange-200: oklch(90.1% 0.076 70.7);
-  --color-orange-300: oklch(83.7% 0.128 66.29);
-  --color-orange-400: oklch(75% 0.183 55.93);
-  --color-orange-500: oklch(70.5% 0.213 47.6);
-  --color-orange-600: oklch(64.6% 0.222 41.12);
-  --color-orange-700: oklch(55.3% 0.195 38.4);
-  --color-orange-800: oklch(47% 0.157 37.3);
-  --color-orange-900: oklch(40.8% 0.123 38.17);
-  --color-orange-950: oklch(26.6% 0.079 36.26);
-
-  --color-green-50: oklch(98.2% 0.018 155.83);
-  --color-green-100: oklch(96.2% 0.044 156.74);
-  --color-green-200: oklch(92.5% 0.084 155.99);
-  --color-green-300: oklch(87.1% 0.15 154.45);
-  --color-green-400: oklch(79.2% 0.209 151.71);
-  --color-green-500: oklch(72.3% 0.219 149.58);
-  --color-green-600: oklch(62.7% 0.194 149.21);
-  --color-green-700: oklch(52.7% 0.154 150.07);
-  --color-green-800: oklch(44.8% 0.119 151.33);
-  --color-green-900: oklch(39.3% 0.095 152.54);
-  --color-green-950: oklch(26.6% 0.065 152.93);
-
-  --color-blue-50: oklch(97% 0.014 254.6);
-  --color-blue-100: oklch(93.2% 0.032 255.59);
-  --color-blue-200: oklch(88.2% 0.059 254.13);
-  --color-blue-300: oklch(80.9% 0.105 251.81);
-  --color-blue-400: oklch(70.7% 0.165 254.62);
-  --color-blue-500: oklch(62.3% 0.214 259.12);
-  --color-blue-600: oklch(54.6% 0.245 262.88);
-  --color-blue-700: oklch(48.8% 0.243 264.38);
-  --color-blue-800: oklch(42.4% 0.199 265.64);
-  --color-blue-900: oklch(37.9% 0.146 265.52);
-  --color-blue-950: oklch(28.2% 0.091 267.94);
-
-  --color-stone-50: oklch(98.3% 0.002 106);
-  --color-stone-100: oklch(97% 0.002 106);
-  --color-stone-200: oklch(92.1% 0.003 63);
-  --color-stone-300: oklch(86.7% 0.005 56);
-  --color-stone-400: oklch(70.6% 0.01 56);
-  --color-stone-500: oklch(54.2% 0.012 58);
-  --color-stone-600: oklch(43% 0.012 68);
-  --color-stone-700: oklch(36% 0.011 67);
-  --color-stone-800: oklch(25.4% 0.01 49);
-  --color-stone-900: oklch(20.1% 0.01 49);
-  --color-stone-950: oklch(13.1% 0.007 49);
-
-  --color-neutral-50: var(--color-stone-50);
-  --color-neutral-100: var(--color-stone-100);
-  --color-neutral-200: var(--color-stone-200);
-  --color-neutral-300: var(--color-stone-300);
-  --color-neutral-400: var(--color-stone-400);
-  --color-neutral-500: var(--color-stone-500);
-  --color-neutral-600: var(--color-stone-600);
-  --color-neutral-700: var(--color-stone-700);
-  --color-neutral-800: var(--color-stone-800);
-  --color-neutral-900: var(--color-stone-900);
-  --color-neutral-950: var(--color-stone-950);
-
-  --color-slate-50: var(--color-stone-50);
-  --color-slate-100: var(--color-stone-100);
-  --color-slate-200: var(--color-stone-200);
-  --color-slate-300: var(--color-stone-300);
-  --color-slate-400: var(--color-stone-400);
-  --color-slate-500: var(--color-stone-500);
-  --color-slate-600: var(--color-stone-600);
-  --color-slate-700: var(--color-stone-700);
-  --color-slate-800: var(--color-stone-800);
-  --color-slate-900: var(--color-stone-900);
-  --color-slate-950: var(--color-stone-950);
-
-  --color-gray-50: var(--color-stone-50);
-  --color-gray-100: var(--color-stone-100);
-  --color-gray-200: var(--color-stone-200);
-  --color-gray-300: var(--color-stone-300);
-  --color-gray-400: var(--color-stone-400);
-  --color-gray-500: var(--color-stone-500);
-  --color-gray-600: var(--color-stone-600);
-  --color-gray-700: var(--color-stone-700);
-  --color-gray-800: var(--color-stone-800);
-  --color-gray-900: var(--color-stone-900);
-  --color-gray-950: var(--color-stone-950);
-
-  --color-zinc-50: var(--color-stone-50);
-  --color-zinc-100: var(--color-stone-100);
-  --color-zinc-200: var(--color-stone-200);
-  --color-zinc-300: var(--color-stone-300);
-  --color-zinc-400: var(--color-stone-400);
-  --color-zinc-500: var(--color-stone-500);
-  --color-zinc-600: var(--color-stone-600);
-  --color-zinc-700: var(--color-stone-700);
-  --color-zinc-800: var(--color-stone-800);
-  --color-zinc-900: var(--color-stone-900);
-  --color-zinc-950: var(--color-stone-950);
-
-  --color-yellow-50: oklch(98.7% 0.026 102.21);
-  --color-yellow-100: oklch(97.3% 0.071 103.19);
-  --color-yellow-200: oklch(94.5% 0.129 101.54);
-  --color-yellow-300: oklch(90.5% 0.182 98.11);
-  --color-yellow-400: oklch(85.2% 0.199 91.94);
-  --color-yellow-500: oklch(79.5% 0.184 86.05);
-  --color-yellow-600: oklch(68.1% 0.162 75.83);
-  --color-yellow-700: oklch(55.4% 0.135 66.44);
-  --color-yellow-800: oklch(47.6% 0.114 61.91);
-  --color-yellow-900: oklch(42.1% 0.095 57.71);
-  --color-yellow-950: oklch(28.6% 0.066 53.81);
-
-  --color-purple-50: oklch(97.7% 0.014 308.3);
-  --color-purple-100: oklch(94.6% 0.033 307.17);
-  --color-purple-200: oklch(90.2% 0.063 306.7);
-  --color-purple-300: oklch(82.7% 0.119 306.38);
-  --color-purple-400: oklch(71.4% 0.203 305.5);
-  --color-purple-500: oklch(62.7% 0.265 303.9);
-  --color-purple-600: oklch(55.8% 0.288 302.32);
-  --color-purple-700: oklch(49.6% 0.265 301.92);
-  --color-purple-800: oklch(43.8% 0.218 303.72);
-  --color-purple-900: oklch(38.1% 0.176 304.99);
-  --color-purple-950: oklch(29.1% 0.149 302.72);
 }
 
 @layer base {