diff --git a/app/installation/page.tsx b/app/installation/page.tsx
index 27ff4d4..a4c1d3c 100644
--- a/app/installation/page.tsx
+++ b/app/installation/page.tsx
@@ -33,8 +33,8 @@ export default function InstallationPage() {
           <h2 className="text-2xl font-bold mb-8 text-neutral-900 dark:text-white">Add the snippet</h2>
           <p className="text-neutral-500 mb-8">Just add this snippet to your &lt;head&gt; tag in your layout or index file.</p>
           
-          <div className="max-w-2xl mx-auto bg-[#1e1e1e] rounded-xl overflow-hidden shadow-2xl text-left border border-neutral-800">
-            <div className="flex items-center px-4 py-3 bg-[#252526] border-b border-neutral-800">
+          <div className="max-w-2xl mx-auto bg-neutral-900 rounded-xl overflow-hidden shadow-2xl text-left border border-neutral-800">
+            <div className="flex items-center px-4 py-3 bg-neutral-800 border-b border-neutral-800">
               <div className="flex gap-2">
                 <div className="w-3 h-3 rounded-full bg-red-500/20" />
                 <div className="w-3 h-3 rounded-full bg-yellow-500/20" />
@@ -63,8 +63,8 @@ export default function InstallationPage() {
           <p className="text-neutral-500 mb-6 max-w-xl mx-auto">
             Track custom events (e.g. signup, purchase) with <code className="px-1.5 py-0.5 rounded bg-neutral-200 dark:bg-neutral-700 text-sm font-mono">pulse.track(&apos;event_name&apos;)</code>. Use letters, numbers, and underscores only. Define goals in your site Settings → Goals & Events to see counts in the dashboard.
           </p>
-          <div className="max-w-2xl mx-auto bg-[#1e1e1e] rounded-xl overflow-hidden shadow-2xl text-left border border-neutral-800">
-            <div className="flex items-center px-4 py-3 bg-[#252526] border-b border-neutral-800">
+          <div className="max-w-2xl mx-auto bg-neutral-900 rounded-xl overflow-hidden shadow-2xl text-left border border-neutral-800">
+            <div className="flex items-center px-4 py-3 bg-neutral-800 border-b border-neutral-800">
               <div className="flex gap-2">
                 <div className="w-3 h-3 rounded-full bg-red-500/20" />
                 <div className="w-3 h-3 rounded-full bg-yellow-500/20" />
diff --git a/app/integrations/nextjs/page.tsx b/app/integrations/nextjs/page.tsx
index 90100fc..2a26425 100644
--- a/app/integrations/nextjs/page.tsx
+++ b/app/integrations/nextjs/page.tsx
@@ -48,8 +48,8 @@ export default function NextJsIntegrationPage() {
             Add the script to your root layout file (usually <code>app/layout.tsx</code> or <code>app/layout.js</code>).
           </p>
 
-          <div className="bg-[#1e1e1e] rounded-xl overflow-hidden border border-neutral-800 my-6">
-            <div className="flex items-center px-4 py-2 bg-[#252526] border-b border-neutral-800">
+          <div className="bg-neutral-900 rounded-xl overflow-hidden border border-neutral-800 my-6">
+            <div className="flex items-center px-4 py-2 bg-neutral-800 border-b border-neutral-800">
               <span className="text-xs text-neutral-400 font-mono">app/layout.tsx</span>
             </div>
             <div className="p-4 overflow-x-auto">
@@ -84,8 +84,8 @@ export default function RootLayout({
             If you are using the older Pages Router, add the script to your custom <code>_app.tsx</code> or <code>_document.tsx</code>.
           </p>
 
-          <div className="bg-[#1e1e1e] rounded-xl overflow-hidden border border-neutral-800 my-6">
-            <div className="flex items-center px-4 py-2 bg-[#252526] border-b border-neutral-800">
+          <div className="bg-neutral-900 rounded-xl overflow-hidden border border-neutral-800 my-6">
+            <div className="flex items-center px-4 py-2 bg-neutral-800 border-b border-neutral-800">
               <span className="text-xs text-neutral-400 font-mono">pages/_app.tsx</span>
             </div>
             <div className="p-4 overflow-x-auto">
diff --git a/app/integrations/react/page.tsx b/app/integrations/react/page.tsx
index cecbe77..9c29053 100644
--- a/app/integrations/react/page.tsx
+++ b/app/integrations/react/page.tsx
@@ -49,8 +49,8 @@ export default function ReactIntegrationPage() {
             The simplest way is to add the script tag directly to the <code>&lt;head&gt;</code> of your <code>index.html</code> file.
           </p>
 
-          <div className="bg-[#1e1e1e] rounded-xl overflow-hidden border border-neutral-800 my-6">
-            <div className="flex items-center px-4 py-2 bg-[#252526] border-b border-neutral-800">
+          <div className="bg-neutral-900 rounded-xl overflow-hidden border border-neutral-800 my-6">
+            <div className="flex items-center px-4 py-2 bg-neutral-800 border-b border-neutral-800">
               <span className="text-xs text-neutral-400 font-mono">public/index.html</span>
             </div>
             <div className="p-4 overflow-x-auto">
@@ -83,8 +83,8 @@ export default function ReactIntegrationPage() {
             If you need to load the script dynamically (e.g., only in production), you can use a <code>useEffect</code> hook in your main App component.
           </p>
 
-          <div className="bg-[#1e1e1e] rounded-xl overflow-hidden border border-neutral-800 my-6">
-            <div className="flex items-center px-4 py-2 bg-[#252526] border-b border-neutral-800">
+          <div className="bg-neutral-900 rounded-xl overflow-hidden border border-neutral-800 my-6">
+            <div className="flex items-center px-4 py-2 bg-neutral-800 border-b border-neutral-800">
               <span className="text-xs text-neutral-400 font-mono">src/App.tsx</span>
             </div>
             <div className="p-4 overflow-x-auto">
diff --git a/app/integrations/vue/page.tsx b/app/integrations/vue/page.tsx
index 28af5e0..81434c5 100644
--- a/app/integrations/vue/page.tsx
+++ b/app/integrations/vue/page.tsx
@@ -49,8 +49,8 @@ export default function VueIntegrationPage() {
             Add the script tag to the <code>&lt;head&gt;</code> section of your <code>index.html</code> file. This works for both Vue 2 and Vue 3 projects created with Vue CLI or Vite.
           </p>
 
-          <div className="bg-[#1e1e1e] rounded-xl overflow-hidden border border-neutral-800 my-6">
-            <div className="flex items-center px-4 py-2 bg-[#252526] border-b border-neutral-800">
+          <div className="bg-neutral-900 rounded-xl overflow-hidden border border-neutral-800 my-6">
+            <div className="flex items-center px-4 py-2 bg-neutral-800 border-b border-neutral-800">
               <span className="text-xs text-neutral-400 font-mono">index.html</span>
             </div>
             <div className="p-4 overflow-x-auto">
@@ -84,8 +84,8 @@ export default function VueIntegrationPage() {
             For Nuxt.js applications, you should add the script to your <code>nuxt.config.js</code> or <code>nuxt.config.ts</code> file.
           </p>
 
-          <div className="bg-[#1e1e1e] rounded-xl overflow-hidden border border-neutral-800 my-6">
-            <div className="flex items-center px-4 py-2 bg-[#252526] border-b border-neutral-800">
+          <div className="bg-neutral-900 rounded-xl overflow-hidden border border-neutral-800 my-6">
+            <div className="flex items-center px-4 py-2 bg-neutral-800 border-b border-neutral-800">
               <span className="text-xs text-neutral-400 font-mono">nuxt.config.ts</span>
             </div>
             <div className="p-4 overflow-x-auto">
diff --git a/app/integrations/wordpress/page.tsx b/app/integrations/wordpress/page.tsx
index 93da9df..bd80d9f 100644
--- a/app/integrations/wordpress/page.tsx
+++ b/app/integrations/wordpress/page.tsx
@@ -50,8 +50,8 @@ export default function WordPressIntegrationPage() {
             <li>Paste the following code snippet:</li>
           </ol>
 
-          <div className="bg-[#1e1e1e] rounded-xl overflow-hidden border border-neutral-800 my-6">
-            <div className="flex items-center px-4 py-2 bg-[#252526] border-b border-neutral-800">
+          <div className="bg-neutral-900 rounded-xl overflow-hidden border border-neutral-800 my-6">
+            <div className="flex items-center px-4 py-2 bg-neutral-800 border-b border-neutral-800">
               <span className="text-xs text-neutral-400 font-mono">Header Script</span>
             </div>
             <div className="p-4 overflow-x-auto">
diff --git a/docs/DESIGN_SYSTEM.md b/docs/DESIGN_SYSTEM.md
index 321547b..b6cfa30 100644
--- a/docs/DESIGN_SYSTEM.md
+++ b/docs/DESIGN_SYSTEM.md
@@ -817,9 +817,9 @@ Always test both light and dark modes:
 ### VS Code-Style Syntax Highlighting
 
 ```tsx
-<div className="bg-[#1e1e1e] rounded-xl overflow-hidden shadow-2xl border border-neutral-800">
+<div className="bg-neutral-900 rounded-xl overflow-hidden shadow-2xl border border-neutral-800">
   {/* Header bar */}
-  <div className="flex items-center px-4 py-3 bg-[#252526] border-b border-neutral-800">
+  <div className="flex items-center px-4 py-3 bg-neutral-800 border-b border-neutral-800">
     <div className="flex gap-2">
       <div className="w-3 h-3 rounded-full bg-red-500/20" />
       <div className="w-3 h-3 rounded-full bg-yellow-500/20" />