Standardize on neutral grays across app and www chrome

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

Author: bchapuis

apps/app/src/components/app-header.tsx

@@ -26,7 +26,7 @@ export function AppHeader() {
     "bg-neutral-300/50 hover:bg-neutral-300/50 dark:bg-neutral-600/50 dark:hover:bg-neutral-600/50";
 
   return (
-    <header className="flex h-12 shrink-0 items-center justify-between gap-2 ps-5 pe-3 border-b">
+    <header className="flex h-12 shrink-0 items-center justify-between gap-2 ps-5 pe-3 border-b border-neutral-200 dark:border-neutral-800 bg-neutral-100 dark:bg-neutral-900">
       <div className="flex items-center gap-2">
         <Link to="/" className="flex items-center gap-2">
           <Bot className="h-6 w-6" />

apps/app/src/components/docs/code-block.tsx

@@ -74,12 +74,12 @@ export function CodeBlock({ children, className, language }: CodeBlockProps) {
       <div className="relative group">
         <pre
           className={cn(
-            "mb-4 mt-6 overflow-x-auto rounded-lg border bg-zinc-950 text-white p-4",
+            "mb-4 mt-6 overflow-x-auto rounded-lg border bg-neutral-950 text-white p-4",
             className
           )}
         >
           <div className="flex items-center justify-center h-20">
-            <div className="text-zinc-400 text-sm">
+            <div className="text-neutral-400 text-sm">
               Loading syntax highlighting...
             </div>
           </div>
@@ -93,7 +93,7 @@ export function CodeBlock({ children, className, language }: CodeBlockProps) {
       <Button
         size="icon"
         variant="ghost"
-        className="absolute right-0 top-0 h-8 w-8 text-zinc-400 z-10"
+        className="absolute right-0 top-0 h-8 w-8 text-neutral-400 z-10"
         onClick={handleCopy}
       >
         {copied ? <Check className="h-4 w-4" /> : <Copy className="h-4 w-4" />}

apps/app/src/components/layouts/inset-layout.tsx

@@ -24,7 +24,7 @@ export function InsetLayout({
         {title && (
           <div
             className={cn(
-              "flex justify-between items-center mb-2 border-b px-6 py-2 sticky top-0 bg-background z-10",
+              "flex justify-between items-center mb-2 border-b border-neutral-200 dark:border-neutral-800 px-6 py-2 sticky top-0 bg-background z-10",
               titleClassName
             )}
           >

apps/app/src/components/login-form.tsx

@@ -71,14 +71,14 @@ export function LoginForm({ className, returnTo, ...props }: LoginFormProps) {
         By signing up, you agree to our{" "}
         <a
           href={`${import.meta.env.VITE_WEBSITE_URL}/terms`}
-          className="underline hover:text-gray-700"
+          className="underline hover:text-neutral-700"
         >
           Terms of Service
         </a>{" "}
         and{" "}
         <a
           href={`${import.meta.env.VITE_WEBSITE_URL}/privacy`}
-          className="underline hover:text-gray-700"
+          className="underline hover:text-neutral-700"
         >
           Privacy Policy
         </a>

apps/app/src/components/sidebar/app-sidebar.tsx

@@ -14,7 +14,7 @@ export function AppSidebar({
   return (
     <Sidebar
       collapsible="icon"
-      className="flex-1 border-none sticky overflow-x-hidden"
+      className="flex-1 border-none sticky overflow-x-hidden bg-neutral-50 dark:bg-neutral-800"
       {...props}
     >
       <SidebarContent className="h-full">

apps/app/src/components/ui/tag-filter-buttons.tsx

@@ -133,7 +133,7 @@ export function TagFilterButtons({
                 "inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors",
                 "focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
                 "border-transparent bg-secondary text-secondary-foreground",
-                "cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-800",
+                "cursor-pointer hover:bg-neutral-200 dark:hover:bg-neutral-800",
                 activeElement === "categories" &&
                   focusedIndex === currentButtonIndex &&
                   "ring-2 ring-ring",

apps/app/src/components/workflow/fields/geojson-field.tsx

@@ -55,7 +55,7 @@ export function GeoJSONField({
         strokeColor: "#3b82f6",
         strokeWidth: 2,
         fillColor: "rgba(59, 130, 246, 0.2)",
-        backgroundColor: "#f8fafc",
+        backgroundColor: "#fafafa",
       };
 
       const result = geojsonToSvg(

apps/app/src/components/workflow/workflow-canvas.tsx

@@ -89,8 +89,8 @@ function StatusBar({ workflowStatus, errorMessage }: StatusBarProps) {
       label: "Error",
     },
     cancelled: {
-      color: "text-gray-600 dark:text-gray-400",
-      bg: "bg-gray-200 dark:bg-gray-700",
+      color: "text-neutral-600 dark:text-neutral-400",
+      bg: "bg-neutral-200 dark:bg-neutral-700",
       label: "Cancelled",
     },
     paused: {

apps/app/src/components/workflow/workflow-edge.tsx

@@ -99,7 +99,7 @@ export const WorkflowEdge = memo(
     const getColor = () => {
       if (!isValid) return "#f87171"; // red-400
       if (selected) return "#3b82f6"; // blue-500
-      return "#d1d5db"; // gray-300
+      return "#d4d4d4"; // neutral-300
     };
 
     return renderPath(edgePath, getColor(), isActive, zIndex);
@@ -131,7 +131,7 @@ export const WorkflowConnectionLine = memo(
     const getColor = () => {
       if (connectionStatus === "invalid") return "#f87171"; // red-400
       if (connectionStatus === "valid") return "#16a34a"; // green-600
-      return "#d1d5db"; // gray-300
+      return "#d4d4d4"; // neutral-300
     };
 
     return renderPath(edgePath, getColor(), false, undefined);

apps/www/src/components/site-header.tsx

@@ -26,7 +26,7 @@ export function SiteHeader() {
   const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
 
   return (
-    <header className="sticky top-0 z-50 w-full px-6 py-4 bg-neutral-100 border-b border-gray-200">
+    <header className="sticky top-0 z-50 w-full px-6 py-4 bg-neutral-100 border-b border-neutral-200">
       <div className="flex items-center justify-between">
         <a href="/" className="flex items-center gap-3">
           <img src="/icon.svg" alt="Dafthunk" className="h-8 w-8" />