@toolr/ui-design 0.1.0 → 0.1.2

package/components/sections/golden-snapshots/status-overview.tsx

@@ -81,30 +81,30 @@ export function StatusOverview({
   return (
     <div className="space-y-4">
       {/* Bundled Seed Info */}
-      <div className="bg-[#181825] rounded-lg p-4 border border-amber-500/30">
+      <div className="bg-neutral-900 rounded-lg p-4 border border-amber-500/30">
         <div className="flex items-center gap-3 mb-3">
           <Archive className="w-5 h-5 text-amber-400" />
-          <h3 className="text-[#cdd6f4] font-medium">Bundled Seed (App Distribution)</h3>
+          <h3 className="text-neutral-300 font-medium">Bundled Seed (App Distribution)</h3>
           {status?.seed.meta && renderVersionBadge(status.seed.meta, 'bg-amber-500/20 text-amber-400')}
         </div>
         <div className="grid grid-cols-2 gap-4 text-sm">
           <div>
-            <p className="text-[#6c7086]">Status</p>
+            <p className="text-neutral-500">Status</p>
             <p className={status?.seed.exists ? 'text-green-400' : 'text-red-400'}>
               {status?.seed.exists ? 'Found' : 'Missing'}
             </p>
           </div>
           <div>
-            <p className="text-[#6c7086]">Size (compressed)</p>
-            <p className="text-[#cdd6f4]">{formatBytes(status?.seed.sizeBytes ?? 0)}</p>
+            <p className="text-neutral-500">Size (compressed)</p>
+            <p className="text-neutral-300">{formatBytes(status?.seed.sizeBytes ?? 0)}</p>
           </div>
           <div>
-            <p className="text-[#6c7086]">Modified</p>
-            <p className="text-[#cdd6f4]">{status?.seed.modifiedAt ? formatDate(status.seed.modifiedAt) : 'N/A'}</p>
+            <p className="text-neutral-500">Modified</p>
+            <p className="text-neutral-300">{status?.seed.modifiedAt ? formatDate(status.seed.modifiedAt) : 'N/A'}</p>
           </div>
         </div>
         {!devtools && (
-          <p className="text-xs text-[#585b70] mt-3">
+          <p className="text-xs text-neutral-600 mt-3">
             A compressed archive shipped with every release containing default configuration and templates. On first launch, the seed is extracted to initialize your local files.
           </p>
         )}
@@ -118,10 +118,10 @@ export function StatusOverview({
       {/* Local Directories */}
       <div className="grid grid-cols-2 gap-4">
         {/* Golden */}
-        <div className="bg-[#181825] rounded-lg p-4 border border-blue-500/30">
+        <div className="bg-neutral-900 rounded-lg p-4 border border-blue-500/30">
           <div className="flex items-center gap-2 mb-3">
             <div className="w-3 h-3 rounded-full bg-blue-400" />
-            <h4 className="text-[#cdd6f4] font-medium">Golden (Reference)</h4>
+            <h4 className="text-neutral-300 font-medium">Golden (Reference)</h4>
             {renderVersionBadge(status?.goldenMeta, 'bg-blue-500/20 text-blue-400')}
           </div>
           <div className="space-y-2 text-sm">
@@ -131,7 +131,7 @@ export function StatusOverview({
               const dirExists = status?.directories[dirKey]?.exists ?? false
               return (
                 <div key={comp} className="flex justify-between items-center">
-                  <span className="text-[#6c7086]">{getLabel(comp)}</span>
+                  <span className="text-neutral-500">{getLabel(comp)}</span>
                   <VersionStatus
                     exists={dirExists || !!version}
                     version={version}
@@ -143,17 +143,17 @@ export function StatusOverview({
             })}
           </div>
           {!devtools && (
-            <p className="text-xs text-[#585b70] mt-3">
+            <p className="text-xs text-neutral-600 mt-3">
               Reference copy extracted from the bundled seed. Always overwritten during app updates to match the latest release. Do not edit directly.
             </p>
           )}
         </div>
 
         {/* Live */}
-        <div className="bg-[#181825] rounded-lg p-4 border border-green-500/30">
+        <div className="bg-neutral-900 rounded-lg p-4 border border-green-500/30">
           <div className="flex items-center gap-2 mb-3">
             <div className="w-3 h-3 rounded-full bg-green-400" />
-            <h4 className="text-[#cdd6f4] font-medium">Live (Working Copy)</h4>
+            <h4 className="text-neutral-300 font-medium">Live (Working Copy)</h4>
             {renderVersionBadge(status?.liveMeta, 'bg-green-500/20 text-green-400')}
             <div className="ml-auto relative" ref={resetMenuRef}>
               <IconButton
@@ -165,19 +165,19 @@ export function StatusOverview({
                 tooltip={{ title: 'Reset options', description: 'Reset live files to golden' }}
               />
               {showResetMenu && (
-                <div ref={resetMenuDropdownRef} className="absolute right-0 top-full mt-1 w-56 bg-[#1e1e2e] border border-[#313244] rounded-lg shadow-xl z-50 py-1 overflow-hidden">
+                <div ref={resetMenuDropdownRef} className="absolute right-0 top-full mt-1 w-56 bg-neutral-850 border border-neutral-700 rounded-lg shadow-xl z-50 py-1 overflow-hidden">
                   <button
                     onClick={() => { onResetAll(); setShowResetMenu(false) }}
-                    className="w-full text-left px-3 py-2 text-sm text-[#cdd6f4] hover:bg-[#313244] transition-colors"
+                    className="w-full text-left px-3 py-2 text-sm text-neutral-300 hover:bg-neutral-700 transition-colors"
                   >
                     Reset All to Golden
                   </button>
-                  <div className="border-t border-[#313244] my-1" />
+                  <div className="border-t border-neutral-700 my-1" />
                   {components.map((comp) => (
                     <button
                       key={comp}
                       onClick={() => { onResetComponent(comp); setShowResetMenu(false) }}
-                      className="w-full text-left px-3 py-2 text-sm text-[#a6adc8] hover:bg-[#313244] transition-colors"
+                      className="w-full text-left px-3 py-2 text-sm text-neutral-400 hover:bg-neutral-700 transition-colors"
                     >
                       Reset {getLabel(comp)}
                     </button>
@@ -195,7 +195,7 @@ export function StatusOverview({
               const mismatch = !!(goldenV && liveV && goldenV !== liveV)
               return (
                 <div key={comp} className="flex justify-between items-center">
-                  <span className="text-[#6c7086]">{getLabel(comp)}</span>
+                  <span className="text-neutral-500">{getLabel(comp)}</span>
                   <span className="flex items-center gap-2">
                     <VersionStatus exists={dirExists || !!liveV} version={liveV} mismatch={mismatch} />
                     <IconButton
@@ -212,7 +212,7 @@ export function StatusOverview({
             })}
           </div>
           {!devtools && (
-            <p className="text-xs text-[#585b70] mt-3">
+            <p className="text-xs text-neutral-600 mt-3">
               Your active working copy — what the app uses at runtime. Customizations are made here and preserved across app updates.
             </p>
           )}
@@ -221,21 +221,21 @@ export function StatusOverview({
 
       {/* Update Flow — settings only */}
       {!devtools && (
-        <div className="bg-[#181825]/50 border border-[#313244] rounded-lg p-4">
-          <p className="text-xs font-medium text-[#a6adc8] mb-4">
-            How updates work <span className="font-normal text-[#585b70]">— checked per component ({components.map(getLabel).join(', ')})</span>
+        <div className="bg-neutral-900/50 border border-neutral-700 rounded-lg p-4">
+          <p className="text-xs font-medium text-neutral-400 mb-4">
+            How updates work <span className="font-normal text-neutral-600">— checked per component ({components.map(getLabel).join(', ')})</span>
           </p>
           <div className="grid grid-cols-[auto_auto_auto_auto_auto_auto_auto] items-center gap-x-2 text-xs">
             {/* Row 1: top branch outcome */}
             <span /><span /><span /><span /><span />
-            <span className="text-[#585b70] text-base justify-self-center self-end mb-[-4px]">↗</span>
+            <span className="text-neutral-600 text-base justify-self-center self-end mb-[-4px]">↗</span>
             <div className="flex flex-col items-center">
               <Tooltip content={{ title: 'Live updated', description: 'No local customizations were found for this component, so it was automatically updated to match the new golden version.' }} multiline maxWidth={260}>
                 <div className="rounded bg-green-500/10 border border-green-500/20 px-3 py-1.5 whitespace-nowrap w-full text-center cursor-help">
                   <span className="text-green-400 font-medium">Live updated</span>
                 </div>
               </Tooltip>
-              <span className="text-[#585b70] mt-0.5">no changes</span>
+              <span className="text-neutral-600 mt-0.5">no changes</span>
             </div>
 
             {/* Row 2: linear flow */}
@@ -245,41 +245,41 @@ export function StatusOverview({
                   <span className="text-amber-400 font-medium">App Update</span>
                 </div>
               </Tooltip>
-              <span className="text-[#585b70] mt-0.5">ships new seed</span>
+              <span className="text-neutral-600 mt-0.5">ships new seed</span>
             </div>
-            <span className="text-[#585b70] text-lg self-start justify-self-center px-2">→</span>
+            <span className="text-neutral-600 text-lg self-start justify-self-center px-2">→</span>
             <div className="flex flex-col items-center">
               <Tooltip content={{ title: 'Golden overwritten', description: 'The golden reference directory is always overwritten with the latest seed. This ensures golden always reflects the newest release.' }} multiline maxWidth={260}>
                 <div className="rounded bg-blue-500/10 border border-blue-500/20 px-3 py-1.5 text-center w-full cursor-help">
                   <span className="text-blue-400 font-medium">Golden</span>
                 </div>
               </Tooltip>
-              <span className="text-[#585b70] mt-0.5">overwritten</span>
+              <span className="text-neutral-600 mt-0.5">overwritten</span>
             </div>
-            <span className="text-[#585b70] text-lg self-start justify-self-center px-2">→</span>
+            <span className="text-neutral-600 text-lg self-start justify-self-center px-2">→</span>
             <div className="flex flex-col items-center">
               <Tooltip content={{ title: 'Compare per component', description: 'Each component is compared individually. If the live version has local changes, it is left untouched.' }} multiline maxWidth={260}>
-                <div className="rounded bg-[#313244]/50 border border-[#313244] px-3 py-1.5 text-center w-full cursor-help">
-                  <span className="text-[#a6adc8] font-medium">Compare</span>
+                <div className="rounded bg-neutral-700/50 border border-neutral-700 px-3 py-1.5 text-center w-full cursor-help">
+                  <span className="text-neutral-400 font-medium">Compare</span>
                 </div>
               </Tooltip>
-              <span className="text-[#585b70] mt-0.5">per component</span>
+              <span className="text-neutral-600 mt-0.5">per component</span>
             </div>
             <span /><span />
 
             {/* Row 3: bottom branch outcome */}
             <span /><span /><span /><span /><span />
-            <span className="text-[#585b70] text-base justify-self-center self-start mt-[-20px]">↘</span>
+            <span className="text-neutral-600 text-base justify-self-center self-start mt-[-20px]">↘</span>
             <div className="flex flex-col items-center">
               <Tooltip content={{ title: 'Live unchanged', description: 'Local customizations were detected for this component, so it was left untouched. Use the File Diff tab to review differences, or reset it manually.' }} multiline maxWidth={260}>
                 <div className="rounded bg-yellow-500/10 border border-yellow-500/20 px-3 py-1.5 whitespace-nowrap w-full text-center cursor-help">
                   <span className="text-yellow-400 font-medium">Live unchanged</span>
                 </div>
               </Tooltip>
-              <span className="text-[#585b70] mt-0.5">has changes</span>
+              <span className="text-neutral-600 mt-0.5">has changes</span>
             </div>
           </div>
-          <p className="text-xs text-[#585b70] mt-3">
+          <p className="text-xs text-neutral-600 mt-3">
             When a component has no local changes, it is automatically updated to match the new golden version. Components with customizations are left untouched to preserve your edits — use the File Diff tab to review differences and selectively apply changes. You can reset any component to its golden version at any time using the reset buttons above.
           </p>
         </div>
@@ -287,15 +287,15 @@ export function StatusOverview({
 
       {/* Local Snapshots - devtools only */}
       {devtools && manifest && (
-        <div className="bg-[#181825] rounded-lg p-4 border border-[#313244]">
+        <div className="bg-neutral-900 rounded-lg p-4 border border-neutral-700">
           <div className="flex items-center gap-2 mb-3">
-            <Archive className="w-4 h-4 text-[#6c7086]" />
-            <h4 className="text-[#cdd6f4] font-medium">Local Snapshots</h4>
+            <Archive className="w-4 h-4 text-neutral-500" />
+            <h4 className="text-neutral-300 font-medium">Local Snapshots</h4>
           </div>
           <div className="flex gap-6 text-sm">
             <div>
-              <span className="text-[#6c7086]">Count: </span>
-              <span className="text-[#cdd6f4]">{manifest.snapshots.length}</span>
+              <span className="text-neutral-500">Count: </span>
+              <span className="text-neutral-300">{manifest.snapshots.length}</span>
             </div>
           </div>
         </div>

package/components/sections/golden-snapshots/version-manager.tsx

@@ -53,17 +53,17 @@ export function VersionManager({ sync, components, componentLabels }: VersionMan
   return (
     <div className="space-y-4">
       {/* Global Version Bump */}
-      <div className="bg-[#181825] rounded-lg p-4 border border-teal-500/30">
+      <div className="bg-neutral-900 rounded-lg p-4 border border-teal-500/30">
         <div className="flex items-center gap-3 mb-3">
           <Tag className="w-5 h-5 text-teal-400" />
-          <h4 className="text-[#cdd6f4] font-medium">Golden Version</h4>
+          <h4 className="text-neutral-300 font-medium">Golden Version</h4>
           {status?.goldenMeta && (
             <span className="px-2 py-0.5 bg-teal-500/20 text-teal-400 text-xs rounded font-mono">
               {status.goldenMeta.version}
             </span>
           )}
         </div>
-        <p className="text-xs text-[#585b70] mb-3">
+        <p className="text-xs text-neutral-600 mb-3">
           Bump the overall golden version number. This updates the top-level version in meta.json.
         </p>
         <div className="flex gap-2">
@@ -98,15 +98,15 @@ export function VersionManager({ sync, components, componentLabels }: VersionMan
       </div>
 
       {/* Component Versions */}
-      <div className="bg-[#181825] rounded-lg border border-[#313244] overflow-hidden">
-        <div className="px-4 py-3 border-b border-[#313244]">
-          <h4 className="text-[#cdd6f4] font-medium">Component Versions</h4>
-          <p className="text-xs text-[#585b70] mt-1">
+      <div className="bg-neutral-900 rounded-lg border border-neutral-700 overflow-hidden">
+        <div className="px-4 py-3 border-b border-neutral-700">
+          <h4 className="text-neutral-300 font-medium">Component Versions</h4>
+          <p className="text-xs text-neutral-600 mt-1">
             Update individual component versions. Click a component to edit.
           </p>
         </div>
 
-        <div className="divide-y divide-[#313244]">
+        <div className="divide-y divide-neutral-700">
           {components.map((comp) => {
             const currentVersion = status?.goldenMeta?.components[comp]?.version
             const liveVersion = status?.liveMeta?.components[comp]?.version
@@ -117,9 +117,9 @@ export function VersionManager({ sync, components, componentLabels }: VersionMan
               <div key={comp} className="px-4 py-3">
                 <div className="flex items-center justify-between">
                   <div className="flex items-center gap-2">
-                    <span className="text-sm text-[#cdd6f4]">{getLabel(comp)}</span>
+                    <span className="text-sm text-neutral-300">{getLabel(comp)}</span>
                     {currentVersion && (
-                      <span className="text-xs font-mono text-[#6c7086]">v{currentVersion}</span>
+                      <span className="text-xs font-mono text-neutral-500">v{currentVersion}</span>
                     )}
                     {mismatch && (
                       <span className="text-[10px] text-yellow-400">

package/components/sections/prompt-editor/file-type-tabbed-prompt-editor.tsx

@@ -134,14 +134,14 @@ export function FileTypeTabbedPromptEditor({
   }, [sidebarWidth])
 
   return (
-    <div className={`flex w-full max-w-full bg-[#181825] border border-[#313244] rounded-lg overflow-hidden ${className}`}>
+    <div className={`flex w-full max-w-full bg-neutral-900 border border-neutral-700 rounded-lg overflow-hidden ${className}`}>
       {/* Left Sidebar — File Type Selector */}
       <div
-        className="relative shrink-0 bg-[#11111b] overflow-hidden flex flex-col"
+        className="relative shrink-0 bg-neutral-950 overflow-hidden flex flex-col"
         style={{ width: sidebarWidth, minWidth: MIN_SIDEBAR_WIDTH, maxWidth: MAX_SIDEBAR_WIDTH }}
       >
         {/* Header */}
-        <div className="h-[52px] px-3 flex items-center border-b border-[#313244] shrink-0">
+        <div className="h-[52px] px-3 flex items-center border-b border-neutral-700 shrink-0">
           <div className="flex items-center gap-2">
             <Crosshair className="w-4 h-4 text-neutral-500 shrink-0" />
             <div className="min-w-0">
@@ -161,19 +161,19 @@ export function FileTypeTabbedPromptEditor({
                 onClick={() => setSelectedFileType(ft.id)}
                 className={`w-full min-h-[44px] py-2 flex items-center gap-2.5 px-3 text-left transition-colors ${
                   isSelected
-                    ? 'bg-[#313244]/50 border-l-2 border-[#89b4fa]'
-                    : 'hover:bg-[#1e1e2e] border-l-2 border-transparent'
+                    ? 'bg-neutral-700/50 border-l-2 border-blue-400'
+                    : 'hover:bg-neutral-850 border-l-2 border-transparent'
                 }`}
               >
-                <div className={`flex-shrink-0 ${isSelected ? 'text-[#89b4fa]' : 'text-[#6c7086]'}`}>
+                <div className={`flex-shrink-0 ${isSelected ? 'text-blue-400' : 'text-neutral-500'}`}>
                   {ft.icon ?? <FileCode className="w-4 h-4" />}
                 </div>
                 <div className="min-w-0 flex-1">
-                  <div className={`text-sm font-medium truncate ${isSelected ? 'text-[#cdd6f4]' : 'text-[#a6adc8]'}`}>
+                  <div className={`text-sm font-medium truncate ${isSelected ? 'text-neutral-300' : 'text-neutral-400'}`}>
                     {ft.name}
                   </div>
                   {ft.description && (
-                    <div className="text-xs text-[#6c7086] mt-0.5 leading-relaxed">
+                    <div className="text-xs text-neutral-500 mt-0.5 leading-relaxed">
                       {ft.description}
                     </div>
                   )}
@@ -186,14 +186,14 @@ export function FileTypeTabbedPromptEditor({
         {/* Resize handle on right edge */}
         <div
           onPointerDown={handleSidebarPointerDown}
-          className="absolute right-0 top-0 bottom-0 w-1.5 cursor-col-resize hover:bg-[#89b4fa]/30 transition-colors z-10 flex items-center justify-center group"
+          className="absolute right-0 top-0 bottom-0 w-1.5 cursor-col-resize hover:bg-blue-400/30 transition-colors z-10 flex items-center justify-center group"
         >
-          <GripVertical className="w-3 h-3 text-[#45475a] group-hover:text-[#6c7086] opacity-0 group-hover:opacity-100 transition-opacity" />
+          <GripVertical className="w-3 h-3 text-neutral-600 group-hover:text-neutral-500 opacity-0 group-hover:opacity-100 transition-opacity" />
         </div>
       </div>
 
       {/* Main Content — TabbedPromptEditor */}
-      <div className="flex-1 min-w-0 w-0 overflow-hidden border-l border-[#313244]">
+      <div className="flex-1 min-w-0 w-0 overflow-hidden border-l border-neutral-700">
         <TabbedPromptEditor
           prompts={currentPrompts}
           onPromptChange={handlePromptChange}

package/components/sections/prompt-editor/simulator-prompt-editor.tsx

@@ -167,14 +167,14 @@ export function SimulatorPromptEditor({
   }, [sidebarWidth])
 
   return (
-    <div className={`flex w-full max-w-full bg-[#181825] border border-[#313244] rounded-lg overflow-hidden ${className}`}>
+    <div className={`flex w-full max-w-full bg-neutral-900 border border-neutral-700 rounded-lg overflow-hidden ${className}`}>
       {/* Left Sidebar — Tree Selector */}
       <div
-        className="relative shrink-0 bg-[#11111b] overflow-hidden flex flex-col"
+        className="relative shrink-0 bg-neutral-950 overflow-hidden flex flex-col"
         style={{ width: sidebarWidth, minWidth: MIN_SIDEBAR_WIDTH, maxWidth: MAX_SIDEBAR_WIDTH }}
       >
         {/* Header */}
-        <div className="h-[52px] px-3 flex items-center border-b border-[#313244] shrink-0">
+        <div className="h-[52px] px-3 flex items-center border-b border-neutral-700 shrink-0">
           <div className="flex items-center gap-2">
             <Crosshair className="w-4 h-4 text-neutral-500 shrink-0" />
             <div className="min-w-0">
@@ -195,11 +195,11 @@ export function SimulatorPromptEditor({
                 {/* Scenario Header */}
                 <button
                   onClick={() => toggleScenario(scenario.id)}
-                  className={`w-full min-h-[44px] py-2 flex items-start gap-2 px-3 text-left transition-colors hover:bg-[#1e1e2e] ${
-                    isScenarioActive ? 'bg-[#1e1e2e]/50' : ''
+                  className={`w-full min-h-[44px] py-2 flex items-start gap-2 px-3 text-left transition-colors hover:bg-neutral-850 ${
+                    isScenarioActive ? 'bg-neutral-850/50' : ''
                   }`}
                 >
-                  <div className="flex-shrink-0 mt-0.5 text-[#6c7086]">
+                  <div className="flex-shrink-0 mt-0.5 text-neutral-500">
                     {isExpanded ? (
                       <ChevronDown className="w-4 h-4" />
                     ) : (
@@ -207,11 +207,11 @@ export function SimulatorPromptEditor({
                     )}
                   </div>
                   <div className="min-w-0 flex-1">
-                    <div className={`text-sm font-medium ${isScenarioActive ? 'text-[#cdd6f4]' : 'text-[#a6adc8]'}`}>
+                    <div className={`text-sm font-medium ${isScenarioActive ? 'text-neutral-300' : 'text-neutral-400'}`}>
                       {scenario.name}
                     </div>
                     {scenario.description && (
-                      <div className="text-xs text-[#6c7086] mt-0.5 leading-relaxed">
+                      <div className="text-xs text-neutral-500 mt-0.5 leading-relaxed">
                         {scenario.description}
                       </div>
                     )}
@@ -229,14 +229,14 @@ export function SimulatorPromptEditor({
                           onClick={() => selectStep(scenario.id, step.id)}
                           className={`w-full h-[32px] flex items-center gap-2 pl-9 pr-3 text-left transition-colors ${
                             isStepSelected
-                              ? 'bg-[#313244]/50 border-l-2 border-[#89b4fa]'
-                              : 'hover:bg-[#1e1e2e] border-l-2 border-transparent'
+                              ? 'bg-neutral-700/50 border-l-2 border-blue-400'
+                              : 'hover:bg-neutral-850 border-l-2 border-transparent'
                           }`}
                         >
                           <div className={`w-1.5 h-1.5 rounded-full flex-shrink-0 ${
-                            isStepSelected ? 'bg-[#89b4fa]' : 'bg-[#45475a]'
+                            isStepSelected ? 'bg-blue-400' : 'bg-neutral-600'
                           }`} />
-                          <span className={`text-xs ${isStepSelected ? 'text-[#cdd6f4]' : 'text-[#a6adc8]'}`}>
+                          <span className={`text-xs ${isStepSelected ? 'text-neutral-300' : 'text-neutral-400'}`}>
                             {step.name}
                           </span>
                         </button>
@@ -252,14 +252,14 @@ export function SimulatorPromptEditor({
         {/* Resize handle on right edge */}
         <div
           onPointerDown={handleSidebarPointerDown}
-          className="absolute right-0 top-0 bottom-0 w-1.5 cursor-col-resize hover:bg-[#89b4fa]/30 transition-colors z-10 flex items-center justify-center group"
+          className="absolute right-0 top-0 bottom-0 w-1.5 cursor-col-resize hover:bg-blue-400/30 transition-colors z-10 flex items-center justify-center group"
         >
-          <GripVertical className="w-3 h-3 text-[#45475a] group-hover:text-[#6c7086] opacity-0 group-hover:opacity-100 transition-opacity" />
+          <GripVertical className="w-3 h-3 text-neutral-600 group-hover:text-neutral-500 opacity-0 group-hover:opacity-100 transition-opacity" />
         </div>
       </div>
 
       {/* Main Content — TabbedPromptEditor */}
-      <div className="flex-1 min-w-0 w-0 overflow-hidden border-l border-[#313244]">
+      <div className="flex-1 min-w-0 w-0 overflow-hidden border-l border-neutral-700">
         <TabbedPromptEditor
           prompts={currentPrompts}
           onPromptChange={handlePromptChange}

package/components/sections/prompt-editor/tabbed-prompt-editor.tsx

@@ -337,14 +337,14 @@ export function TabbedPromptEditor({
   }, [variables, variableSearch])
 
   return (
-    <div className={`flex w-full h-full bg-[#181825] overflow-hidden ${standalone ? 'border border-[#313244] rounded-lg' : ''} ${className}`}>
+    <div className={`flex w-full h-full bg-neutral-900 overflow-hidden ${standalone ? 'border border-neutral-700 rounded-lg' : ''} ${className}`}>
       {/* Main content area */}
       <div className="flex-1 min-w-0 w-0 flex flex-col overflow-hidden">
         {/* Tool Tabs */}
-        <div className="relative flex h-[26px] bg-[#11111b] shrink-0">
+        <div className="relative flex h-[26px] bg-neutral-950 shrink-0">
           {tools.map((tool) => {
             const isActive = activeTab === tool.id
-            const activeColor = tool.activeColor ?? 'text-[#89b4fa]'
+            const activeColor = tool.activeColor ?? 'text-blue-400'
 
             return (
               <button
@@ -352,8 +352,8 @@ export function TabbedPromptEditor({
                 onClick={() => setActiveTab(tool.id)}
                 className={`flex-1 flex items-center justify-center gap-1.5 px-2 text-xs font-medium border-b-2 transition-colors ${
                   isActive
-                    ? `border-current ${activeColor} bg-[#1e1e2e]`
-                    : 'border-[#313244] text-[#6c7086] hover:text-[#a6adc8] hover:bg-[#1e1e2e]/50'
+                    ? `border-current ${activeColor} bg-neutral-850`
+                    : 'border-neutral-700 text-neutral-500 hover:text-neutral-400 hover:bg-neutral-850/50'
                 }`}
                 title={tool.name}
               >
@@ -366,9 +366,9 @@ export function TabbedPromptEditor({
 
         {/* Checklist validation warning */}
         {checklistMissing && (
-          <div className="flex items-start gap-2 px-3 py-2 bg-[#f38ba8]/10 border-b border-[#f38ba8]/30 shrink-0">
-            <AlertTriangle className="w-4 h-4 text-[#f38ba8] shrink-0 mt-0.5" />
-            <div className="text-xs text-[#f38ba8]">
+          <div className="flex items-start gap-2 px-3 py-2 bg-red-400/10 border-b border-red-400/30 shrink-0">
+            <AlertTriangle className="w-4 h-4 text-red-400 shrink-0 mt-0.5" />
+            <div className="text-xs text-red-400">
               <span className="font-medium">Missing "# Verification Checklist" section.</span>
               {' '}When verification is enabled, only content under this heading will be sent to the AI for output validation.
             </div>
@@ -430,17 +430,17 @@ export function TabbedPromptEditor({
       {/* Variables Sidebar */}
       {hasVariables && (
         <div
-          className="relative shrink-0 bg-[#11111b] overflow-hidden flex flex-col border-l border-[#313244]"
+          className="relative shrink-0 bg-neutral-950 overflow-hidden flex flex-col border-l border-neutral-700"
           style={{ width: sidebarWidth, minWidth: MIN_SIDEBAR_WIDTH, maxWidth: MAX_SIDEBAR_WIDTH }}
         >
           {/* Resize handle on left edge */}
           <div
             onPointerDown={handleSidebarMouseDown}
-            className="absolute left-0 top-0 bottom-0 w-1 cursor-col-resize hover:bg-[#b4befe]/30 transition-colors z-10"
+            className="absolute left-0 top-0 bottom-0 w-1 cursor-col-resize hover:bg-violet-400/30 transition-colors z-10"
           />
 
           {/* Header */}
-          <div className="h-[52px] px-3 flex items-center justify-between border-b border-[#313244] shrink-0">
+          <div className="h-[52px] px-3 flex items-center justify-between border-b border-neutral-700 shrink-0">
             <div className="flex items-center gap-2">
               <Variable className="w-4 h-4 text-neutral-500 shrink-0" />
               <div className="min-w-0">
@@ -448,15 +448,15 @@ export function TabbedPromptEditor({
                 <div className="text-xs text-neutral-600 truncate">Available placeholders</div>
               </div>
             </div>
-            <span className="px-1.5 py-0.5 bg-[#b4befe]/20 text-[#b4befe] rounded text-xs">
+            <span className="px-1.5 py-0.5 bg-violet-400/20 text-violet-400 rounded text-xs">
               {variableSearch.trim() ? `${filteredVariables.length}/${variables!.length}` : variables!.length}
             </span>
           </div>
 
           {/* Search */}
-          <div className="px-2.5 py-2 border-b border-[#313244] shrink-0">
+          <div className="px-2.5 py-2 border-b border-neutral-700 shrink-0">
             <div className="relative">
-              <Search className="absolute left-2 top-1/2 -translate-y-1/2 w-3 h-3 text-[#6c7086]" />
+              <Search className="absolute left-2 top-1/2 -translate-y-1/2 w-3 h-3 text-neutral-500" />
               <Input
                 value={variableSearch}
                 onChange={setVariableSearch}
@@ -478,10 +478,10 @@ export function TabbedPromptEditor({
           </div>
 
           {/* Autocomplete tip */}
-          <div className="px-3 py-2 border-b border-[#313244] shrink-0">
-            <div className="flex items-center gap-1.5 text-xs text-[#6c7086]">
+          <div className="px-3 py-2 border-b border-neutral-700 shrink-0">
+            <div className="flex items-center gap-1.5 text-xs text-neutral-500">
               <Info className="w-3 h-3 flex-shrink-0" />
-              <span>Type <code className="text-[#b4befe]">{'{{'}</code> in editor for autocomplete</span>
+              <span>Type <code className="text-violet-400">{'{{'}</code> in editor for autocomplete</span>
             </div>
           </div>
 
@@ -489,7 +489,7 @@ export function TabbedPromptEditor({
           <div className="flex-1 overflow-y-auto p-2.5 space-y-2">
             {filteredVariables.length > 0 ? (
               filteredVariables.map((variable: PromptPlaceholder) => (
-                <div key={variable.name} className="bg-[#1e1e2e] border border-[#313244] rounded-lg">
+                <div key={variable.name} className="bg-neutral-850 border border-neutral-700 rounded-lg">
                   <EditorPlaceholderCard
                     name={variable.name}
                     description={variable.description}
@@ -502,7 +502,7 @@ export function TabbedPromptEditor({
                 </div>
               ))
             ) : variableSearch.trim() ? (
-              <div className="text-center py-4 text-xs text-[#6c7086]">
+              <div className="text-center py-4 text-xs text-neutral-500">
                 No placeholders match "{variableSearch}"
               </div>
             ) : null}

package/components/sections/snapshot-browser/snapshot-browser-panel.tsx

@@ -71,11 +71,11 @@ export function SnapshotBrowserPanel({
   return (
     <div className={cn('space-y-6', className)}>
       {/* Snapshot Limit */}
-      <div className="bg-[#181825] border border-[#313244] rounded-lg p-4">
+      <div className="bg-neutral-900 border border-neutral-700 rounded-lg p-4">
         <div className="flex items-center justify-between">
           <div>
-            <label className="text-[#cdd6f4]">Snapshot Limit</label>
-            <p className="text-sm text-[#6c7086]">
+            <label className="text-neutral-300">Snapshot Limit</label>
+            <p className="text-sm text-neutral-500">
               Maximum number of snapshots to keep per item (1-50)
             </p>
           </div>
@@ -88,11 +88,11 @@ export function SnapshotBrowserPanel({
       </div>
 
       {/* Snapshot Browser */}
-      <div className="bg-[#181825] border border-[#313244] rounded-lg p-4">
+      <div className="bg-neutral-900 border border-neutral-700 rounded-lg p-4">
         <div className="flex items-center justify-between mb-3">
           <div>
-            <label className="text-[#cdd6f4]">Browse Snapshots</label>
-            <p className="text-sm text-[#6c7086]">
+            <label className="text-neutral-300">Browse Snapshots</label>
+            <p className="text-sm text-neutral-500">
               {totalSnapshotCount === 0
                 ? 'No snapshots saved yet'
                 : `${totalSnapshotCount} snapshot${totalSnapshotCount === 1 ? '' : 's'} stored`}
@@ -126,12 +126,12 @@ export function SnapshotBrowserPanel({
       </div>
 
       {/* Help */}
-      <div className="bg-[#181825]/50 border border-[#313244] rounded-lg p-4">
+      <div className="bg-neutral-900/50 border border-neutral-700 rounded-lg p-4">
         <div className="flex items-start gap-3">
-          <HelpCircle className="w-4 h-4 text-[#6c7086] mt-0.5 shrink-0" />
-          <div className="text-sm text-[#6c7086] space-y-2">
+          <HelpCircle className="w-4 h-4 text-neutral-500 mt-0.5 shrink-0" />
+          <div className="text-sm text-neutral-500 space-y-2">
             <p>
-              <strong className="text-[#a6adc8]">How snapshots work:</strong>
+              <strong className="text-neutral-400">How snapshots work:</strong>
             </p>
             <ul className="list-disc list-inside space-y-1 ml-1">
               <li>Click &ldquo;Save Snapshot&rdquo; in any editor to save the current version</li>