From ea7fc864b4d90bdcf6ae0669ffd81ea1a47c3dfd Mon Sep 17 00:00:00 2001
From: Akash Pramanik <akashpramanik422@gmail.com>
Date: Mon, 31 Aug 2026 15:23:54 +0530
Subject: [PATCH 01/20] Add frosted glass effect to header

Implements a semi-transparent background with backdrop blur for a modern glassmorphism look, improving visual hierarchy and readability while maintaining clear separation from underlying content.
---
 src/components/layout/Header.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

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

From 80f9e202ec4da10d0c269bf480053fa05a2c332f Mon Sep 17 00:00:00 2001
From: Akash Pramanik <akashpramanik422@gmail.com>
Date: Mon, 31 Aug 2026 15:24:22 +0530
Subject: [PATCH 02/20] Refines sidebar styling with modern gradients

Improves the sidebar's visual design by introducing warm orange and amber gradients in light mode and blue-to-indigo gradients in dark mode. Active navigation items now stand out more clearly with gradient backgrounds and subtle shadows, while hover states and borders are softened to match the new palette. Also adds a gradient treatment to the logo and refines the theme label for a more polished, cohesive interface.
---
 src/components/layout/Sidebar.tsx | 36 ++++++++++++++++++++-----------
 1 file changed, 23 insertions(+), 13 deletions(-)

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>

From adae9a3d8ddc13da2d2cee8181b5c3720da2485c Mon Sep 17 00:00:00 2001
From: Akash Pramanik <akashpramanik422@gmail.com>
Date: Mon, 31 Aug 2026 15:25:04 +0530
Subject: [PATCH 03/20] Adds frosted glass effect to preview panel

Updates the preview panel styling to use a semi-transparent background with a backdrop blur, giving it a modern frosted glass appearance.
---
 src/components/tools/AdjustPreview.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

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">

From 0c39d0f464945d1f4b40b1905efe6abd87b2ba77 Mon Sep 17 00:00:00 2001
From: Akash Pramanik <akashpramanik422@gmail.com>
Date: Mon, 31 Aug 2026 15:25:59 +0530
Subject: [PATCH 04/20] Adds frosted glass effect to live preview panel

Improves visual aesthetics by making the preview container semi-transparent with a backdrop blur, allowing the page background to subtly show through while maintaining readability.
---
 src/components/tools/AlbumEditor.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

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">

From 6a4ef90dc940a7cccd1dd60701008f6b85960bfc Mon Sep 17 00:00:00 2001
From: Akash Pramanik <akashpramanik422@gmail.com>
Date: Mon, 31 Aug 2026 15:27:05 +0530
Subject: [PATCH 05/20] Update ImageEditor styling with blur and orange accents

Enhances the editor's visual integration by adding a backdrop blur effect to the container, creating a frosted glass appearance that blends better with the background.

Additionally, changes the crop box and resize handles to use an orange accent color in light mode for improved visibility and thematic consistency, while preserving the primary color in dark mode.
---
 src/components/tools/ImageEditor.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

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">

From d0fc64b9c7872a2740ff936b207cfb2ad00c3a5b Mon Sep 17 00:00:00 2001
From: Akash Pramanik <akashpramanik422@gmail.com>
Date: Mon, 31 Aug 2026 15:28:15 +0530
Subject: [PATCH 06/20] Improves output preview with frosted glass effect

Adds translucent backgrounds and a subtle backdrop blur to output cards, giving the interface a more modern, layered look while preserving readability in both light and dark mode.
---
 src/components/tools/OutputPreview.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

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)}

From 19493fb9227019c2a1def3a56ffec9ff6e9f22da Mon Sep 17 00:00:00 2001
From: Akash Pramanik <akashpramanik422@gmail.com>
Date: Mon, 31 Aug 2026 15:29:29 +0530
Subject: [PATCH 07/20] Update light theme to use orange accents

- Replace primary color with orange for focus rings, accent elements, and progress bar in light mode.
- Keep primary color for dark mode to preserve existing contrast.
- Make placeholder area semi-transparent and add backdrop blur for a subtle glass effect.
- Adjust progress bar background to orange in light mode.
---
 src/components/tools/ToolRunner.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

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>

From 6e4b39323fc8aa7109ba302d3bf9722d40159907 Mon Sep 17 00:00:00 2001
From: Akash Pramanik <akashpramanik422@gmail.com>
Date: Mon, 31 Aug 2026 15:30:50 +0530
Subject: [PATCH 08/20] Fixes primary badge light-mode colors

Updates the light-mode styling of the primary badge to use the orange palette instead of the previous primary color tokens, while preserving the existing dark-mode appearance.
---
 src/components/ui/Badge.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

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 (

From 8cde2ddeed70d07529534fb9b0662c4c901008d6 Mon Sep 17 00:00:00 2001
From: Akash Pramanik <akashpramanik422@gmail.com>
Date: Mon, 31 Aug 2026 15:31:26 +0530
Subject: [PATCH 09/20] Updates primary button color scheme

Primary buttons now use orange styling in light mode while retaining the existing primary color in dark mode, improving visual consistency and contrast across themes.
---
 src/components/ui/Button.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

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',

From a7c5427c575b6f5d6a43c821386f66eb7db285f6 Mon Sep 17 00:00:00 2001
From: Akash Pramanik <akashpramanik422@gmail.com>
Date: Mon, 31 Aug 2026 15:32:35 +0530
Subject: [PATCH 10/20] Adds frosted glass and orange borders to cards

Gives cards a soft frosted-glass background and warm orange border accents in light mode, enhancing visual depth while keeping the existing dark mode appearance intact.
---
 src/components/ui/Card.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

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} />
   ),
 )
 

From 39751e7f58e710d14bcf4ba9f076be720afe4945 Mon Sep 17 00:00:00 2001
From: Akash Pramanik <akashpramanik422@gmail.com>
Date: Mon, 31 Aug 2026 15:33:47 +0530
Subject: [PATCH 11/20] Add frosted glass styling to toolbar

Updates the toolbar's appearance with a semi-transparent background and backdrop blur, giving it a modern frosted glass effect. Also changes the border color to an accent orange for visual distinction. This improves the overall UI aesthetics and helps the toolbar stand out without obstructing page content.
---
 src/components/ui/EditorToolbar.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

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"

From f70e0c73d5212f5b198e8f4ef63bc53d5249b98a Mon Sep 17 00:00:00 2001
From: Akash Pramanik <akashpramanik422@gmail.com>
Date: Mon, 31 Aug 2026 15:34:56 +0530
Subject: [PATCH 12/20] Switches light mode UI accents to orange

Unifies focus rings, drag-and-drop active states, and input borders around an orange accent in light mode while retaining the existing primary color for dark mode. Also softens the default input background for a lighter visual feel.
---
 src/components/ui/FileUpload.tsx    | 4 ++--
 src/components/ui/Input.tsx         | 2 +-
 src/components/ui/ThemeSwitcher.tsx | 2 +-
 3 files changed, 4 insertions(+), 4 deletions(-)

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"
     >

From e0bff2abce2fd77d6acef795ecf4f28ee945a497 Mon Sep 17 00:00:00 2001
From: Akash Pramanik <akashpramanik422@gmail.com>
Date: Mon, 31 Aug 2026 15:42:40 +0530
Subject: [PATCH 13/20] Adds warm gradient background to app layout

Switches the app's main background from a flat slate color to a subtle gradient with warm tones (orange, amber, yellow) in light mode, and a complementary dark gradient in dark mode. Enhances visual depth and makes the interface more inviting without affecting layout or functionality.
---
 src/layouts/AppLayout.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

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}

From a0c875cc88afdf06da118f43724be5fe596f1c8e Mon Sep 17 00:00:00 2001
From: Akash Pramanik <akashpramanik422@gmail.com>
Date: Mon, 31 Aug 2026 15:43:38 +0530
Subject: [PATCH 14/20] Updates dashboard hover borders to orange in light mode

Changes the light-mode hover border color for dashboard action cards and recent documents from primary to orange, while preserving the dark-mode primary color styling.
---
 src/pages/DashboardPage.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

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>

From abb6b9885f58116a72b5f1ba570790203d41d783 Mon Sep 17 00:00:00 2001
From: Akash Pramanik <akashpramanik422@gmail.com>
Date: Mon, 31 Aug 2026 15:45:04 +0530
Subject: [PATCH 15/20] Updates editor backdrop and active slide styling

Applies a frosted glass effect to the slide list and actions panels using translucent backgrounds with a backdrop blur. Adjusts the active slide indicator to orange in light mode while keeping the primary color in dark mode for better visual distinction.
---
 src/pages/PresentationEditorPage.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

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

From 257fd76f238256d4206d5d394c6c8c37ee5ebea8 Mon Sep 17 00:00:00 2001
From: Akash Pramanik <akashpramanik422@gmail.com>
Date: Mon, 31 Aug 2026 15:47:43 +0530
Subject: [PATCH 16/20] Improves focus ring styling for spreadsheet inputs

Sets the focus ring color to orange in light mode for better visibility, while retaining the primary color in dark mode to maintain consistent appearance.
---
 src/pages/SpreadsheetEditorPage.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

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>

From e70ea41cc4fb603cc1ba4cd9109bfbb604e0a342 Mon Sep 17 00:00:00 2001
From: Akash Pramanik <akashpramanik422@gmail.com>
Date: Mon, 31 Aug 2026 15:48:14 +0530
Subject: [PATCH 17/20] Refines rename hover colors and export menu blur

Uses orange hover for rename actions in light mode while keeping the primary color in dark mode for better visibility. Adds a subtle backdrop blur to the export dropdown for a more polished look.
---
 src/pages/DocumentEditorPage.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

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>

From fc1aa5f924ceedb7f0c9897ce4935d2d45343137 Mon Sep 17 00:00:00 2001
From: Akash Pramanik <akashpramanik422@gmail.com>
Date: Mon, 31 Aug 2026 15:50:15 +0530
Subject: [PATCH 18/20] Adds frosted-glass panels and orange accents

Applies a translucent backdrop-blur treatment to viewer and editor surfaces for a more modern, glass-like appearance. Adds orange as the light-mode accent color for rename controls, active tools, and shape selections while keeping the existing dark-mode primary color scheme.
---
 src/pages/DocumentViewerPage.tsx |  2 +-
 src/pages/ImageEditorPage.tsx    |  4 ++--
 src/pages/PDFEditorPage.tsx      | 12 ++++++------
 3 files changed, 9 insertions(+), 9 deletions(-)

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}

From 8a9a6a858a56ae957f7213d6899a36ebd170d9b9 Mon Sep 17 00:00:00 2001
From: Akash Pramanik <akashpramanik422@gmail.com>
Date: Mon, 31 Aug 2026 15:50:34 +0530
Subject: [PATCH 19/20] Add goldenrod color to Tailwind config

Introduces a goldenrod color palette with shades from 50 to 900, expanding the available color options for consistent theming.
---
 tailwind.config.js | 13 +++++++++++++
 1 file changed, 13 insertions(+)

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',

From 982f5851f2cc89cba0977e7e82b05d08e0084abb Mon Sep 17 00:00:00 2001
From: Akash Pramanik <akashpramanik422@gmail.com>
Date: Mon, 31 Aug 2026 15:51:01 +0530
Subject: [PATCH 20/20] Updates UI styling with orange accents and blurred
 backgrounds

- Changes card and section borders from slate to orange.
- Applies translucent white backgrounds with backdrop blur for a frosted glass effect.
- Adjusts accent text color to orange for consistency.
---
 src/pages/ToolsPage.tsx     | 6 +++---
 src/pages/WorkspacePage.tsx | 2 +-
 2 files changed, 4 insertions(+), 4 deletions(-)

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>