diff --git a/src/components/layout/Header.tsx b/src/components/layout/Header.tsx
index 5ce1c8e..f8825a6 100644
--- a/src/components/layout/Header.tsx
+++ b/src/components/layout/Header.tsx
@@ -10,7 +10,7 @@ export const Header: React.FC<HeaderProps> = ({ title, actions }) => {
   const { toggleSidebar } = useUIStore()
 
   return (
-    <header className="sticky top-0 z-20 bg-white dark:bg-slate-900 border-b border-slate-200 dark:border-slate-800">
+    <header className="sticky top-0 z-20 border-b border-orange-300/60 dark:border-slate-800/60 bg-white/80 dark:bg-slate-950/80 backdrop-blur-md">
       <div className="flex items-center justify-between px-6 py-4">
         <div className="flex items-center gap-4">
           <button
diff --git a/src/components/layout/Sidebar.tsx b/src/components/layout/Sidebar.tsx
index 72f6b94..d9e8e75 100644
--- a/src/components/layout/Sidebar.tsx
+++ b/src/components/layout/Sidebar.tsx
@@ -31,17 +31,24 @@ export const Sidebar: React.FC<SidebarProps> = ({ items, isOpen, onClose }) => {
       {/* Sidebar */}
       <aside
         className={cn(
-          'fixed left-0 top-0 z-40 flex h-screen w-sidebar flex-col border-r border-slate-200 bg-white transition-transform dark:border-slate-800 dark:bg-slate-900 lg:translate-x-0',
+          // Light mode: warm orange/amber gradient
+          'fixed left-0 top-0 z-40 flex h-screen w-sidebar flex-col border-r border-orange-300/60',
+          'bg-gradient-to-b from-orange-100 via-amber-100 to-yellow-100',
+          // Dark mode: modern deep gradient (slate-950 -> indigo-950 -> slate-900)
+          'dark:from-slate-950 dark:via-indigo-950 dark:to-slate-900 dark:border-slate-800/60',
+          'transition-transform lg:translate-x-0',
           !isOpen && '-translate-x-full lg:translate-x-0',
         )}
         aria-label="Primary navigation"
       >
         {/* Header */}
-        <div className="flex items-center justify-between p-6 border-b border-slate-200 dark:border-slate-800">
-          <h1 className="text-xl font-bold text-primary-600">OpenDocs</h1>
+        <div className="flex items-center justify-between p-6 border-b border-orange-300/60 dark:border-slate-800/60">
+          <h1 className="text-xl font-bold bg-gradient-to-r from-orange-500 via-amber-500 to-yellow-500 dark:from-sky-500 dark:via-blue-500 dark:to-indigo-500 bg-clip-text text-transparent">
+            OpenDocs
+          </h1>
           <button
             onClick={onClose}
-            className="lg:hidden p-2 hover:bg-slate-100 dark:hover:bg-slate-800 rounded-lg"
+            className="lg:hidden p-2 hover:bg-orange-300/60 dark:hover:bg-slate-800/60 rounded-lg text-slate-700 dark:text-slate-200"
             aria-label="Close navigation"
           >
             <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -60,20 +67,21 @@ export const Sidebar: React.FC<SidebarProps> = ({ items, isOpen, onClose }) => {
                   onClick={onClose}
                   className={({ isActive }) =>
                     cn(
-                      'flex items-center justify-between rounded-lg px-4 py-3 transition-colors',
-                      'hover:bg-slate-100 dark:hover:bg-slate-800',
-                      isActive
-                        ? 'bg-primary-50 text-primary-700 dark:bg-primary-950 dark:text-primary-200'
-                        : 'text-slate-700 dark:text-slate-300',
+                      'flex items-center justify-between rounded-lg px-4 py-3 transition-all duration-200',
+                      // Inactive: subtle text + hover
+                      !isActive && 'text-slate-700 dark:text-slate-300 hover:bg-orange-300/60 dark:hover:bg-slate-800/60',
+                      // Active: light mode = warm orange/amber gradient, dark mode = blue/indigo gradient
+                      isActive &&
+                        'bg-gradient-to-r from-orange-500 via-amber-500 to-yellow-500 text-white shadow-lg shadow-orange-500/30 dark:from-sky-500 dark:via-blue-500 dark:to-indigo-500 dark:shadow-blue-500/30',
                     )
                   }
                 >
                   <div className="flex items-center gap-3">
                     <span className="w-5 h-5">{item.icon}</span>
-                    <span>{item.label}</span>
+                    <span className="font-medium">{item.label}</span>
                   </div>
                   {item.badge && (
-                    <span className="px-2 py-1 text-xs font-semibold text-white bg-primary-600 rounded-full">
+                    <span className="px-2 py-1 text-xs font-semibold text-white bg-white/20 rounded-full backdrop-blur">
                       {item.badge}
                     </span>
                   )}
@@ -84,9 +92,11 @@ export const Sidebar: React.FC<SidebarProps> = ({ items, isOpen, onClose }) => {
         </nav>
 
         {/* Footer */}
-        <div className="border-t border-slate-200 dark:border-slate-800 p-4 space-y-3">
+        <div className="border-t border-orange-300/60 dark:border-slate-800/60 p-4 space-y-3">
           <div className="flex items-center justify-between">
-            <span className="text-xs font-semibold text-slate-500 dark:text-slate-400 uppercase">Theme</span>
+            <span className="text-xs font-semibold text-slate-500 dark:text-slate-400 uppercase tracking-wider">
+              Theme
+            </span>
             <ThemeSwitcher />
           </div>
         </div>
diff --git a/src/components/tools/AdjustPreview.tsx b/src/components/tools/AdjustPreview.tsx
index d5e44e5..ba09e53 100644
--- a/src/components/tools/AdjustPreview.tsx
+++ b/src/components/tools/AdjustPreview.tsx
@@ -65,7 +65,7 @@ export const AdjustPreview: React.FC<AdjustPreviewProps> = ({ file, values }) =>
   }, [ready, showOriginal, values])
 
   return (
-    <div className="rounded-lg border border-slate-200 bg-white p-3 dark:border-slate-700 dark:bg-slate-900">
+    <div className="rounded-lg border border-slate-200 bg-white/70 dark:bg-slate-900/70 backdrop-blur-sm p-3 dark:border-slate-700">
       <div className="mb-2 flex items-center justify-between gap-2">
         <p className="text-sm font-semibold">Live preview</p>
         <div className="flex items-center gap-3">
diff --git a/src/components/tools/AlbumEditor.tsx b/src/components/tools/AlbumEditor.tsx
index e94dac1..994ebea 100644
--- a/src/components/tools/AlbumEditor.tsx
+++ b/src/components/tools/AlbumEditor.tsx
@@ -339,7 +339,7 @@ export const AlbumEditor = forwardRef<AlbumEditorHandle, AlbumEditorProps>(({ fi
         </p>
       </aside>
 
-      <div className="rounded-xl border border-slate-200 bg-white p-4 dark:border-slate-700 dark:bg-slate-800/40">
+      <div className="rounded-xl border border-slate-200 bg-white/70 dark:bg-slate-800/40 backdrop-blur-sm p-4 dark:border-slate-700">
         <div className="mb-3 flex items-center justify-between">
           <h3 className="text-sm font-semibold text-slate-700 dark:text-slate-200">Live preview</h3>
           <span className="text-xs text-slate-500 dark:text-slate-400">
diff --git a/src/components/tools/ImageEditor.tsx b/src/components/tools/ImageEditor.tsx
index c0a79d4..8150172 100644
--- a/src/components/tools/ImageEditor.tsx
+++ b/src/components/tools/ImageEditor.tsx
@@ -255,7 +255,7 @@ export const ImageEditor = forwardRef<ImageEditorHandle, ImageEditorProps>(({ fi
   const outHeight = rotCanvas ? Math.round((crop.height / 100) * rotCanvas.height) : 0
 
   return (
-    <div className="rounded-lg border border-slate-200 bg-white p-4 dark:border-slate-700 dark:bg-slate-800/50">
+    <div className="rounded-lg border border-slate-200 bg-white/70 dark:bg-slate-800/50 backdrop-blur-sm p-4 dark:border-slate-700">
       <div className="mb-3 flex flex-wrap items-center justify-between gap-2">
         <p className="text-sm font-semibold text-slate-700 dark:text-slate-200">Crop &amp; rotate editor</p>
         <div className="flex flex-wrap items-center gap-2">
@@ -299,7 +299,7 @@ export const ImageEditor = forwardRef<ImageEditorHandle, ImageEditorProps>(({ fi
               </div>
               {/* Movable / resizable crop box */}
               <div
-                className="absolute cursor-move border-2 border-primary-500"
+                className="absolute cursor-move border-2 border-orange-500 dark:border-primary-500"
                 style={{ left: `${crop.x}%`, top: `${crop.y}%`, width: `${crop.width}%`, height: `${crop.height}%` }}
                 onPointerDown={startDrag('move')}
               >
@@ -313,7 +313,7 @@ export const ImageEditor = forwardRef<ImageEditorHandle, ImageEditorProps>(({ fi
                   <div
                     key={handle}
                     onPointerDown={startDrag(handle)}
-                    className={`absolute h-4 w-4 rounded-full border-2 border-white bg-primary-600 shadow ${HANDLE_STYLES[handle]}`}
+                    className={`absolute h-4 w-4 rounded-full border-2 border-white bg-orange-600 dark:bg-primary-600 shadow ${HANDLE_STYLES[handle]}`}
                   />
                 ))}
                 <div className="pointer-events-none absolute -top-7 left-0 whitespace-nowrap rounded bg-slate-900/85 px-2 py-0.5 text-xs text-white">
diff --git a/src/components/tools/OutputPreview.tsx b/src/components/tools/OutputPreview.tsx
index e701121..a5763dc 100644
--- a/src/components/tools/OutputPreview.tsx
+++ b/src/components/tools/OutputPreview.tsx
@@ -114,7 +114,7 @@ export const OutputPreview: React.FC<OutputPreviewProps> = ({ outputs, onClear }
         {outputs.map((output, index) => (
           <div
             key={`${output.name}-${index}`}
-            className="rounded-lg border border-slate-200 bg-slate-50 p-4 dark:border-slate-700 dark:bg-slate-800"
+            className="rounded-lg border border-slate-200 bg-white/60 dark:bg-slate-800/60 backdrop-blur-sm p-4 dark:border-slate-700"
           >
             <div className="mb-3 flex justify-center overflow-hidden">
               {renderPreview(output)}
diff --git a/src/components/tools/ToolRunner.tsx b/src/components/tools/ToolRunner.tsx
index 974d3e4..1b2fd89 100644
--- a/src/components/tools/ToolRunner.tsx
+++ b/src/components/tools/ToolRunner.tsx
@@ -24,7 +24,7 @@ const isVisible = (gate: { field: string; equals: string } | undefined, values:
 
 const ToolFieldInput: React.FC<{ field: ToolField; value: string; onChange: (value: string) => void }> = ({ field, value, onChange }) => {
   const sharedClass =
-    'flex h-10 w-full rounded-md border border-slate-300 dark:border-slate-600 bg-white dark:bg-slate-800 px-3 py-2 text-base focus:outline-none focus:ring-2 focus:ring-primary-500'
+    'flex h-10 w-full rounded-md border border-slate-300 dark:border-slate-600 bg-white dark:bg-slate-800 px-3 py-2 text-base focus:outline-none focus:ring-2 focus:ring-orange-500 dark:focus:ring-primary-500'
   if (field.type === 'select') {
     return (
       <select name={field.name} value={value} onChange={(event) => onChange(event.target.value)} className={sharedClass}>
@@ -84,7 +84,7 @@ const ToolFieldInput: React.FC<{ field: ToolField; value: string; onChange: (val
           max={field.max}
           step={field.step}
           onChange={(event) => onChange(event.target.value)}
-          className="min-w-0 flex-1 cursor-pointer accent-primary-600"
+          className="min-w-0 flex-1 cursor-pointer accent-orange-600 dark:accent-primary-600"
         />
         <span className="w-14 shrink-0 rounded-md bg-slate-100 py-0.5 text-center text-xs font-semibold tabular-nums text-slate-700 dark:bg-slate-800 dark:text-slate-300">
           {value}
@@ -296,7 +296,7 @@ export const ToolRunner: React.FC<ToolRunnerProps> = ({ tool, onBack }) => {
             {outputs ? (
               <OutputPreview outputs={outputs} onClear={handleClear} />
             ) : (
-              <div className="rounded-lg border-2 border-dashed border-slate-200 bg-slate-50 p-8 text-center dark:border-slate-700 dark:bg-slate-900">
+              <div className="rounded-lg border-2 border-dashed border-orange-200 bg-white/50 dark:border-slate-700 dark:bg-slate-900/50 p-8 text-center backdrop-blur-sm">
                 <p className="font-semibold">Output appears here</p>
                 <p className="mt-1 text-sm text-slate-500 dark:text-slate-400">
                   Your files are processed entirely in this browser — nothing is uploaded anywhere.
@@ -308,7 +308,7 @@ export const ToolRunner: React.FC<ToolRunnerProps> = ({ tool, onBack }) => {
               <div className="mt-4">
                 <div className="h-2 w-full overflow-hidden rounded-full bg-slate-200 dark:bg-slate-700">
                   <div
-                    className="h-full rounded-full bg-primary-600 transition-all duration-300"
+                    className="h-full rounded-full bg-orange-600 dark:bg-primary-600 transition-all duration-300"
                     style={{ width: `${progress}%` }}
                   />
                 </div>
diff --git a/src/components/ui/Badge.tsx b/src/components/ui/Badge.tsx
index 263f903..e32095e 100644
--- a/src/components/ui/Badge.tsx
+++ b/src/components/ui/Badge.tsx
@@ -10,7 +10,7 @@ export const Badge: React.FC<BadgeProps> = ({ className, variant = 'neutral', ..
     neutral: 'bg-slate-100 text-slate-700 dark:bg-slate-800 dark:text-slate-200',
     success: 'bg-emerald-100 text-emerald-800 dark:bg-emerald-950 dark:text-emerald-200',
     warning: 'bg-amber-100 text-amber-800 dark:bg-amber-950 dark:text-amber-200',
-    primary: 'bg-primary-100 text-primary-800 dark:bg-primary-950 dark:text-primary-200',
+    primary: 'bg-orange-100 text-orange-800 dark:bg-primary-950 dark:text-primary-200',
   }
 
   return (
diff --git a/src/components/ui/Button.tsx b/src/components/ui/Button.tsx
index cf78c2d..0850302 100644
--- a/src/components/ui/Button.tsx
+++ b/src/components/ui/Button.tsx
@@ -13,7 +13,8 @@ export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
       'inline-flex items-center justify-center font-medium rounded-lg focus:outline-none focus:ring-2 focus:ring-offset-2 dark:focus:ring-offset-slate-950 disabled:opacity-50 disabled:cursor-not-allowed'
 
     const variants = {
-      primary: 'bg-primary-600 text-white hover:bg-primary-700 focus:ring-primary-500',
+      primary:
+        'bg-orange-600 text-white hover:bg-orange-700 focus:ring-orange-500 dark:bg-primary-600 dark:text-white dark:hover:bg-primary-700 dark:focus:ring-primary-500',
       secondary: 'bg-slate-200 dark:bg-slate-700 text-slate-900 dark:text-slate-100 hover:bg-slate-300 dark:hover:bg-slate-600 focus:ring-slate-500',
       danger: 'bg-red-600 text-white hover:bg-red-700 focus:ring-red-500',
       ghost: 'text-slate-700 dark:text-slate-300 hover:bg-slate-100 dark:hover:bg-slate-800 focus:ring-slate-500',
diff --git a/src/components/ui/Card.tsx b/src/components/ui/Card.tsx
index 185559c..060fc11 100644
--- a/src/components/ui/Card.tsx
+++ b/src/components/ui/Card.tsx
@@ -7,7 +7,7 @@ export const Card = React.forwardRef<HTMLDivElement, CardProps>(({ className, ..
   <div
     ref={ref}
     className={cn(
-      'rounded-lg border border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-900 shadow-sm',
+      'rounded-lg border border-orange-200 dark:border-slate-700 bg-white/70 dark:bg-slate-900/70 backdrop-blur-sm shadow-sm',
       className,
     )}
     {...props}
@@ -18,7 +18,7 @@ Card.displayName = 'Card'
 
 export const CardHeader = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
   ({ className, ...props }, ref) => (
-    <div ref={ref} className={cn('flex flex-col space-y-1.5 p-6 border-b border-slate-200 dark:border-slate-700', className)} {...props} />
+    <div ref={ref} className={cn('flex flex-col space-y-1.5 p-6 border-b border-orange-200 dark:border-slate-700', className)} {...props} />
   ),
 )
 
diff --git a/src/components/ui/EditorToolbar.tsx b/src/components/ui/EditorToolbar.tsx
index f134691..bab2e0c 100644
--- a/src/components/ui/EditorToolbar.tsx
+++ b/src/components/ui/EditorToolbar.tsx
@@ -19,7 +19,7 @@ export const EditorToolbar: React.FC<EditorToolbarProps> = ({
   onSave
 }) => {
   return (
-    <div className="flex flex-wrap gap-1 border-b border-slate-200 bg-slate-50 p-3 dark:border-slate-700 dark:bg-slate-900">
+    <div className="flex flex-wrap gap-1 border-b border-orange-200 bg-white/70 dark:border-slate-700 dark:bg-slate-900/70 backdrop-blur-sm p-3">
       <div className="flex gap-1 border-r border-slate-200 pr-2 dark:border-slate-700">
         <button
           type="button"
diff --git a/src/components/ui/FileUpload.tsx b/src/components/ui/FileUpload.tsx
index 3a1f7b5..8021c88 100644
--- a/src/components/ui/FileUpload.tsx
+++ b/src/components/ui/FileUpload.tsx
@@ -102,8 +102,8 @@ export const FileUpload: React.FC<FileUploadProps> = ({
         className={cn(
           'relative flex min-h-[120px] cursor-pointer flex-col items-center justify-center rounded-lg border-2 border-dashed p-6 text-center transition-all duration-200',
           isDragging
-            ? 'border-primary-500 bg-primary-50 dark:bg-primary-900/20'
-            : 'border-slate-300 bg-slate-50 hover:border-slate-400 dark:border-slate-600 dark:bg-slate-800 dark:hover:border-slate-500',
+            ? 'border-orange-500 bg-orange-50 dark:border-primary-500 dark:bg-primary-900/20'
+            : 'border-slate-300 bg-slate-50 hover:border-orange-400 dark:border-slate-600 dark:bg-slate-800 dark:hover:border-slate-500',
         )}
         onDragOver={handleDragOver}
         onDragLeave={handleDragLeave}
diff --git a/src/components/ui/Input.tsx b/src/components/ui/Input.tsx
index 3b78807..f4e8e35 100644
--- a/src/components/ui/Input.tsx
+++ b/src/components/ui/Input.tsx
@@ -20,7 +20,7 @@ export const Input = React.forwardRef<HTMLInputElement, InputProps>(
           type={type}
           ref={ref}
           className={cn(
-            'flex h-10 w-full rounded-md border border-slate-300 dark:border-slate-600 bg-white dark:bg-slate-800 px-3 py-2 text-base placeholder-slate-400 dark:placeholder-slate-500 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent disabled:cursor-not-allowed disabled:opacity-50',
+            'flex h-10 w-full rounded-md border border-slate-300 dark:border-slate-600 bg-white/80 dark:bg-slate-800 px-3 py-2 text-base placeholder-slate-400 dark:placeholder-slate-500 focus:outline-none focus:ring-2 focus:ring-orange-500 focus:border-transparent dark:focus:ring-primary-500 disabled:cursor-not-allowed disabled:opacity-50',
             error && 'border-red-500 focus:ring-red-500',
             className,
           )}
diff --git a/src/components/ui/ThemeSwitcher.tsx b/src/components/ui/ThemeSwitcher.tsx
index 771e0b1..c9d91b9 100644
--- a/src/components/ui/ThemeSwitcher.tsx
+++ b/src/components/ui/ThemeSwitcher.tsx
@@ -11,7 +11,7 @@ export const ThemeSwitcher: React.FC = () => {
       className={cn(
         'relative inline-flex h-8 w-14 items-center rounded-full',
         'bg-slate-300 dark:bg-slate-600',
-        'focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 dark:focus:ring-offset-slate-950',
+        'focus:outline-none focus:ring-2 focus:ring-orange-500 focus:ring-offset-2 dark:focus:ring-primary-500 dark:focus:ring-offset-slate-950',
       )}
       aria-label="Toggle theme"
     >
diff --git a/src/layouts/AppLayout.tsx b/src/layouts/AppLayout.tsx
index 960182e..afbf7b0 100644
--- a/src/layouts/AppLayout.tsx
+++ b/src/layouts/AppLayout.tsx
@@ -54,7 +54,7 @@ export const Layout: React.FC<LayoutProps> = ({
   ]
 
   return (
-    <div className="flex h-screen bg-slate-50 dark:bg-slate-950">
+    <div className="flex h-screen bg-gradient-to-br from-orange-100 via-amber-100 to-yellow-100 dark:from-slate-950 dark:via-slate-900 dark:to-indigo-950">
       <Sidebar
         items={sidebarItems.length > 0 ? sidebarItems : defaultSidebarItems}
         isOpen={sidebarOpen}
diff --git a/src/pages/DashboardPage.tsx b/src/pages/DashboardPage.tsx
index e3c0eef..a812e1e 100644
--- a/src/pages/DashboardPage.tsx
+++ b/src/pages/DashboardPage.tsx
@@ -83,7 +83,7 @@ export const DashboardPage: React.FC = () => {
               <button
                 type="button"
                 onClick={handleCreateDocument}
-                className="rounded-lg border border-slate-200 p-4 text-left transition-colors hover:border-primary-400 dark:border-slate-700 dark:hover:border-primary-500"
+                className="rounded-lg border border-slate-200 p-4 text-left transition-colors hover:border-orange-400 dark:border-slate-700 dark:hover:border-primary-500"
               >
                 <span className="text-sm font-semibold text-slate-900 dark:text-white">New document</span>
                 <span className="mt-2 block text-sm text-slate-600 dark:text-slate-400">
@@ -93,7 +93,7 @@ export const DashboardPage: React.FC = () => {
 
               <Link
                 to="/files"
-                className="rounded-lg border border-slate-200 p-4 transition-colors hover:border-primary-400 dark:border-slate-700 dark:hover:border-primary-500"
+                className="rounded-lg border border-slate-200 p-4 transition-colors hover:border-orange-400 dark:border-slate-700 dark:hover:border-primary-500"
               >
                 <span className="text-sm font-semibold text-slate-900 dark:text-white">Open files</span>
                 <span className="mt-2 block text-sm text-slate-600 dark:text-slate-400">
@@ -103,7 +103,7 @@ export const DashboardPage: React.FC = () => {
 
               <Link
                 to="/tools"
-                className="rounded-lg border border-slate-200 p-4 transition-colors hover:border-primary-400 dark:border-slate-700 dark:hover:border-primary-500"
+                className="rounded-lg border border-slate-200 p-4 transition-colors hover:border-orange-400 dark:border-slate-700 dark:hover:border-primary-500"
               >
                 <span className="text-sm font-semibold text-slate-900 dark:text-white">View tools</span>
                 <span className="mt-2 block text-sm text-slate-600 dark:text-slate-400">
@@ -124,7 +124,7 @@ export const DashboardPage: React.FC = () => {
               <div className="space-y-3">
                 {recentDocuments.map((document) => (
                   <Link key={document.id} to={getEditorRoute(document.type, document.id)}>
-                    <div className="rounded-lg border border-slate-200 p-3 transition-colors hover:border-primary-400 dark:border-slate-700 dark:hover:border-primary-500">
+                    <div className="rounded-lg border border-slate-200 p-3 transition-colors hover:border-orange-400 dark:border-slate-700 dark:hover:border-primary-500">
                       <p className="truncate text-sm font-semibold">{document.name}</p>
                       <p className="mt-1 text-xs text-slate-500 dark:text-slate-400">{formatFileSize(document.size)}</p>
                     </div>
diff --git a/src/pages/DocumentEditorPage.tsx b/src/pages/DocumentEditorPage.tsx
index 4cf79ff..63dacee 100644
--- a/src/pages/DocumentEditorPage.tsx
+++ b/src/pages/DocumentEditorPage.tsx
@@ -309,7 +309,7 @@ ${content.replace(/\n/g, '<br>\n')}
             ) : (
               <>
                 <h1
-                  className="text-2xl font-bold cursor-pointer hover:text-primary-600 transition-colors"
+                  className="text-2xl font-bold cursor-pointer hover:text-orange-600 transition-colors dark:hover:text-primary-600"
                   onClick={() => setIsRenaming(true)}
                   title="Click to rename"
                 >
@@ -317,7 +317,7 @@ ${content.replace(/\n/g, '<br>\n')}
                 </h1>
                 <button
                   onClick={() => setIsRenaming(true)}
-                  className="text-slate-400 hover:text-primary-600 transition-colors"
+                  className="text-slate-400 hover:text-orange-600 transition-colors dark:hover:text-primary-600"
                   title="Rename document"
                 >
                   <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -336,7 +336,7 @@ ${content.replace(/\n/g, '<br>\n')}
                 Export ▾
               </Button>
               {showExportMenu && (
-                <div className="absolute right-0 mt-1 w-48 rounded-lg border border-slate-200 bg-white shadow-lg dark:border-slate-700 dark:bg-slate-900 z-10">
+                <div className="absolute right-0 mt-1 w-48 rounded-lg border border-slate-200 bg-white shadow-lg dark:border-slate-700 dark:bg-slate-900 z-10 backdrop-blur-sm">
                   <button onClick={handleExportTXT} className="w-full px-4 py-2 text-left text-sm hover:bg-slate-100 dark:hover:bg-slate-800 rounded-t-lg">
                     📄 Export as TXT
                   </button>
diff --git a/src/pages/DocumentViewerPage.tsx b/src/pages/DocumentViewerPage.tsx
index b09c0d0..7745cb0 100644
--- a/src/pages/DocumentViewerPage.tsx
+++ b/src/pages/DocumentViewerPage.tsx
@@ -40,7 +40,7 @@ export const DocumentViewerPage: React.FC = () => {
       )
     } else if (document.type === 'pdf') {
       setPreview(
-        <div className="flex items-center justify-center rounded-lg border-2 border-dashed border-slate-300 bg-slate-50 p-12 dark:border-slate-600 dark:bg-slate-900">
+        <div className="flex items-center justify-center rounded-lg border-2 border-dashed border-orange-200 bg-white/50 dark:border-slate-600 dark:bg-slate-900/50 backdrop-blur-sm p-12">
           <div className="text-center">
             <p className="text-lg font-semibold">PDF Preview</p>
             <p className="mt-2 text-sm text-slate-600 dark:text-slate-400">{document.name}</p>
diff --git a/src/pages/ImageEditorPage.tsx b/src/pages/ImageEditorPage.tsx
index 4650df2..b366269 100644
--- a/src/pages/ImageEditorPage.tsx
+++ b/src/pages/ImageEditorPage.tsx
@@ -133,7 +133,7 @@ export const ImageEditorPage: React.FC = () => {
         </div>
 
         <div className="grid grid-cols-1 gap-4 lg:grid-cols-[200px_1fr]">
-          <div className="rounded-lg border border-slate-200 bg-white p-4 dark:border-slate-700 dark:bg-slate-950">
+          <div className="rounded-lg border border-slate-200 bg-white/70 dark:bg-slate-950/70 backdrop-blur-sm p-4 dark:border-slate-700">
             <p className="text-sm font-semibold mb-3">Tools</p>
 
             <div className="space-y-4">
@@ -166,7 +166,7 @@ export const ImageEditorPage: React.FC = () => {
             </div>
           </div>
 
-          <div className="rounded-lg border border-slate-200 bg-white dark:border-slate-700 dark:bg-slate-950 p-4 flex justify-center">
+          <div className="rounded-lg border border-slate-200 bg-white/70 dark:bg-slate-950/70 backdrop-blur-sm dark:border-slate-700 p-4 flex justify-center">
             <canvas
               ref={canvasRef}
               onMouseDown={startDrawing}
diff --git a/src/pages/PDFEditorPage.tsx b/src/pages/PDFEditorPage.tsx
index 45cfb6b..d1ae610 100644
--- a/src/pages/PDFEditorPage.tsx
+++ b/src/pages/PDFEditorPage.tsx
@@ -384,10 +384,10 @@ export const PDFEditorPage: React.FC = () => {
               </div>
             ) : (
               <>
-                <h1 className="text-2xl font-bold cursor-pointer hover:text-primary-600 transition-colors" onClick={() => setIsRenaming(true)} title="Click to rename">
+                <h1 className="text-2xl font-bold cursor-pointer hover:text-orange-600 transition-colors dark:hover:text-primary-600" onClick={() => setIsRenaming(true)} title="Click to rename">
                   {document.name}
                 </h1>
-                <button onClick={() => setIsRenaming(true)} className="text-slate-400 hover:text-primary-600" title="Rename">
+                <button onClick={() => setIsRenaming(true)} className="text-slate-400 hover:text-orange-600 dark:hover:text-primary-600" title="Rename">
                   <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                     <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z" />
                   </svg>
@@ -406,7 +406,7 @@ export const PDFEditorPage: React.FC = () => {
         </div>
 
         <div className="grid grid-cols-1 gap-4 lg:grid-cols-[240px_1fr]">
-          <div className="rounded-lg border border-slate-200 bg-white p-4 dark:border-slate-700 dark:bg-slate-950 space-y-4 max-h-[70vh] overflow-y-auto">
+          <div className="rounded-lg border border-slate-200 bg-white/70 dark:bg-slate-950/70 backdrop-blur-sm p-4 dark:border-slate-700 space-y-4 max-h-[70vh] overflow-y-auto">
             <div>
               <p className="text-sm font-semibold mb-2">Drawing Tools</p>
               <div className="grid grid-cols-3 gap-1">
@@ -421,7 +421,7 @@ export const PDFEditorPage: React.FC = () => {
                   <button
                     key={t.id}
                     onClick={() => { setTool(t.id as typeof tool) }}
-                    className={`flex flex-col items-center gap-1 rounded p-2 text-xs transition-colors ${tool === t.id ? 'bg-primary-100 dark:bg-primary-900 text-primary-700 dark:text-primary-300' : 'hover:bg-slate-100 dark:hover:bg-slate-800'}`}
+                    className={`flex flex-col items-center gap-1 rounded p-2 text-xs transition-colors ${tool === t.id ? 'bg-orange-100 text-orange-700 dark:bg-primary-900 dark:text-primary-300' : 'hover:bg-slate-100 dark:hover:bg-slate-800'}`}
                     title={t.label}
                   >
                     <span className="text-lg">{t.icon}</span>
@@ -439,7 +439,7 @@ export const PDFEditorPage: React.FC = () => {
                     <button
                       key={s}
                       onClick={() => setShapeType(s)}
-                      className={`flex-1 rounded px-2 py-1 text-xs ${shapeType === s ? 'bg-primary-600 text-white' : 'bg-slate-100 dark:bg-slate-800'}`}
+                      className={`flex-1 rounded px-2 py-1 text-xs ${shapeType === s ? 'bg-orange-600 text-white dark:bg-primary-600' : 'bg-slate-100 dark:bg-slate-800'}`}
                     >
                       {s}
                     </button>
@@ -501,7 +501,7 @@ export const PDFEditorPage: React.FC = () => {
             </div>
           </div>
 
-          <div className="rounded-lg border border-slate-200 bg-white dark:border-slate-700 dark:bg-slate-950 p-4 flex justify-center overflow-auto">
+          <div className="rounded-lg border border-slate-200 bg-white/70 dark:bg-slate-950/70 backdrop-blur-sm dark:border-slate-700 p-4 flex justify-center overflow-auto">
             <canvas
               ref={canvasRef}
               onMouseDown={startDrawing}
diff --git a/src/pages/PresentationEditorPage.tsx b/src/pages/PresentationEditorPage.tsx
index 197e9ac..f23de57 100644
--- a/src/pages/PresentationEditorPage.tsx
+++ b/src/pages/PresentationEditorPage.tsx
@@ -110,7 +110,7 @@ export const PresentationEditorPage: React.FC = () => {
         </div>
 
         <div className="grid grid-cols-1 gap-4 lg:grid-cols-[200px_1fr_200px]">
-          <div className="rounded-lg border border-slate-200 bg-white p-4 dark:border-slate-700 dark:bg-slate-950">
+          <div className="rounded-lg border border-slate-200 bg-white/70 dark:bg-slate-950/70 backdrop-blur-sm p-4 dark:border-slate-700">
             <p className="text-sm font-semibold mb-3">Slides ({slides.length})</p>
             <div className="space-y-2 max-h-96 overflow-y-auto">
               {slides.map((slide, index) => (
@@ -119,7 +119,7 @@ export const PresentationEditorPage: React.FC = () => {
                   onClick={() => setCurrentSlideIndex(index)}
                   className={`w-full rounded p-2 text-left text-xs transition-colors ${
                     index === currentSlideIndex
-                      ? 'bg-primary-500 text-white'
+                      ? 'bg-orange-500 text-white dark:bg-primary-500'
                       : 'hover:bg-slate-100 dark:hover:bg-slate-800'
                   }`}
                 >
@@ -150,7 +150,7 @@ export const PresentationEditorPage: React.FC = () => {
             </div>
           </div>
 
-          <div className="rounded-lg border border-slate-200 bg-white p-4 dark:border-slate-700 dark:bg-slate-950">
+          <div className="rounded-lg border border-slate-200 bg-white/70 dark:bg-slate-950/70 backdrop-blur-sm p-4 dark:border-slate-700">
             <p className="text-sm font-semibold mb-3">Actions</p>
             <div className="space-y-2">
               <Button
diff --git a/src/pages/SpreadsheetEditorPage.tsx b/src/pages/SpreadsheetEditorPage.tsx
index fdcef2f..b2aaebc 100644
--- a/src/pages/SpreadsheetEditorPage.tsx
+++ b/src/pages/SpreadsheetEditorPage.tsx
@@ -139,7 +139,7 @@ export const SpreadsheetEditorPage: React.FC = () => {
                           type="text"
                           value={row[colIndex]?.value || ''}
                           onChange={(e) => handleCellChange(rowIndex, colIndex, e.target.value)}
-                          className="w-full h-10 px-2 bg-transparent border-0 focus:outline-none focus:ring-2 focus:ring-primary-500"
+                          className="w-full h-10 px-2 bg-transparent border-0 focus:outline-none focus:ring-2 focus:ring-orange-500 dark:focus:ring-primary-500"
                           placeholder="-"
                         />
                       </td>
diff --git a/src/pages/ToolsPage.tsx b/src/pages/ToolsPage.tsx
index aa82900..5010be9 100644
--- a/src/pages/ToolsPage.tsx
+++ b/src/pages/ToolsPage.tsx
@@ -16,14 +16,14 @@ const groupDescriptions: Partial<Record<ToolGroup, string>> = {
 const ToolCard: React.FC<{ tool: ToolDefinition }> = ({ tool }) => (
   <Link
     to={`/tools/${tool.id}`}
-    className="group rounded-lg border border-slate-200 bg-white p-5 transition-colors hover:border-primary-400 dark:border-slate-700 dark:bg-slate-900 dark:hover:border-primary-500"
+    className="group rounded-lg border-2 border-slate-200 bg-white/70 dark:border-slate-700 dark:bg-slate-900/70 backdrop-blur-sm p-5 transition-colors hover:border-goldenrod-400 dark:hover:border-primary-500"
   >
     <div className="flex items-start gap-4">
       <img src={tool.icon} alt="" className="h-11 w-11 shrink-0 rounded-lg" />
       <div className="min-w-0">
         <p className="truncate font-semibold text-slate-900 dark:text-white">{tool.name}</p>
         <p className="mt-1 text-sm leading-6 text-slate-600 dark:text-slate-400">{tool.description}</p>
-        <span className="mt-3 inline-block text-sm font-medium text-primary-600 group-hover:underline dark:text-primary-400">
+        <span className="mt-3 inline-block text-sm font-medium text-orange-600 group-hover:underline dark:text-primary-400">
           Open tool →
         </span>
       </div>
@@ -35,7 +35,7 @@ export const ToolsPage: React.FC = () => {
   return (
     <Layout title="Tools">
       <div className="space-y-8">
-        <section className="rounded-lg border border-slate-200 bg-white p-6 dark:border-slate-800 dark:bg-slate-900">
+        <section className="rounded-lg border border-orange-200 bg-white/70 backdrop-blur-sm p-6 dark:border-slate-800 dark:bg-slate-900/70">
           <Badge variant="success">100% client-side</Badge>
           <h2 className="mt-3 text-2xl font-bold text-slate-950 dark:text-white">Image &amp; PDF tools</h2>
           <p className="mt-2 max-w-3xl text-sm leading-6 text-slate-600 dark:text-slate-300">
diff --git a/src/pages/WorkspacePage.tsx b/src/pages/WorkspacePage.tsx
index 5adaaaf..8c29655 100644
--- a/src/pages/WorkspacePage.tsx
+++ b/src/pages/WorkspacePage.tsx
@@ -8,7 +8,7 @@ export const WorkspacePage: React.FC = () => {
   return (
     <Layout title="Workspace">
       <div className="space-y-6">
-        <section className="rounded-lg border border-slate-200 bg-white p-6 dark:border-slate-800 dark:bg-slate-900">
+        <section className="rounded-lg border border-orange-200 bg-white/70 backdrop-blur-sm p-6 dark:border-slate-800 dark:bg-slate-900/70">
           <div className="flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between">
             <div>
               <Badge variant="success">All features unlocked and free</Badge>
diff --git a/tailwind.config.js b/tailwind.config.js
index 1b07e83..205cb7c 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -20,6 +20,19 @@ export default {
           800: '#075985',
           900: '#0c3d66',
         },
+        goldenrod: {
+          DEFAULT: '#daa520',
+          50: '#fdf9ec',
+          100: '#fbf0c8',
+          200: '#f6e29a',
+          300: '#f0d066',
+          400: '#ebbe3d',
+          500: '#daa520',
+          600: '#b8860b',
+          700: '#8b6508',
+          800: '#5e4506',
+          900: '#3a2a03',
+        },
       },
       spacing: {
         'sidebar': '280px',