From 4302b9391a765305d655bcd2b82e32c5bea71467 Mon Sep 17 00:00:00 2001
From: Vadym Samoilenko <vadymsamoilenko@oliver.agency>
Date: Tue, 3 Mar 2026 10:16:26 +0000
Subject: [PATCH] Restyle full application from Barclays to Oliver Agency brand

Replace entire Barclays colour palette (navy #1A2142, lime #C3FB5A, violet
#7A0FF9) with Oliver brand tokens: black #1A1A1A, gold #FFCB05, orange
#FF5C00, azure #0487B6, sky #5DF5EA, grey #EFEFEF, green #09821F.

- Switch font from Inter/Barclays Effra to Arial (system font)
- Add new Oliver logo asset (BAR-ModComms-logo-v4.png)
- Sidebar: black background, new logo, azure active state
- Hero: orange "Intelligent Review" text, hide AI-Powered tagline
- Hide ChecksOverview on Home page per Oliver design
- Toast notification: orange background with black text
- All tables: sky headers, alternating white/grey rows
- Campaign badges: gold "In Progress", green "Completed"
- Analytics: grey KPI cards, sky accent on Key Insight, oliver trend colours
- All buttons: azure fill, pill-shaped (rounded-full)
- All tabs/toggles/dropdowns: azure accent colour
- Update HTML title to "Mod Comms - Intelligent Review"
- Default border radius set to 10px

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 frontend/App.tsx                            |  23 +-
 frontend/components/AgencyFilterBar.tsx     |   6 +-
 frontend/components/Analytics.tsx           |  80 +++---
 frontend/components/AssetPreview.tsx        |   2 +-
 frontend/components/Auditing.tsx            | 120 ++++-----
 frontend/components/Campaigns.tsx           | 258 ++++++++++----------
 frontend/components/ChecksOverview.tsx      |  34 +--
 frontend/components/CopyGenAI.tsx           |  12 +-
 frontend/components/CreateCampaignModal.tsx |  32 +--
 frontend/components/CreateProjectModal.tsx  |  28 +--
 frontend/components/FeedbackReport.tsx      |  42 ++--
 frontend/components/Header.tsx              |   4 +-
 frontend/components/Hero.tsx                |  12 +-
 frontend/components/KnowledgeBase.tsx       | 110 ++++-----
 frontend/components/LoadingVisual.tsx       |   8 +-
 frontend/components/Login.tsx               |  18 +-
 frontend/components/Profile.tsx             |  20 +-
 frontend/components/Projects.tsx            | 210 ++++++++--------
 frontend/components/ProofPreview.tsx        |   2 +-
 frontend/components/ProofTypeManager.tsx    |   8 +-
 frontend/components/ProofUpload.tsx         |   2 +-
 frontend/components/Settings.tsx            |  86 +++----
 frontend/components/Sidebar.tsx             |  20 +-
 frontend/components/StatusDashboard.tsx     |  12 +-
 frontend/components/ToggleSwitch.tsx        |   4 +-
 frontend/components/UserManagement.tsx      | 104 ++++----
 frontend/components/WIPReviewer.tsx         |  24 +-
 frontend/index.html                         |  42 ++--
 frontend/public/BAR-ModComms-logo-v4.png    | Bin 0 -> 32152 bytes
 29 files changed, 652 insertions(+), 671 deletions(-)
 create mode 100644 frontend/public/BAR-ModComms-logo-v4.png

diff --git a/frontend/App.tsx b/frontend/App.tsx
index 0edf473..eb70143 100755
--- a/frontend/App.tsx
+++ b/frontend/App.tsx
@@ -49,9 +49,9 @@ const App: React.FC = () => {
   // Show loading spinner during MSAL authentication interactions
   if (inProgress !== InteractionStatus.None) {
     return (
-      <div className="fixed inset-0 bg-primary-blue flex items-center justify-center">
+      <div className="fixed inset-0 bg-oliver-black flex items-center justify-center">
         <div className="flex flex-col items-center gap-4">
-          <svg className="animate-spin h-12 w-12 text-active-blue" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+          <svg className="animate-spin h-12 w-12 text-oliver-azure" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
             <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
             <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
           </svg>
@@ -932,7 +932,8 @@ const AppContent: React.FC<{ msalInstance: any }> = ({ msalInstance }) => {
         return (
           <>
             <Hero onGetStarted={() => handleNavigate('Campaigns')} />
-            <ChecksOverview />
+            {/* Hidden per Oliver design — client may want it back */}
+            {/* <ChecksOverview /> */}
           </>
         );
     }
@@ -941,9 +942,9 @@ const AppContent: React.FC<{ msalInstance: any }> = ({ msalInstance }) => {
   // Show loading spinner while user profile is loading
   if (isUserLoading) {
     return (
-      <div className="fixed inset-0 bg-primary-blue flex items-center justify-center">
+      <div className="fixed inset-0 bg-oliver-black flex items-center justify-center">
         <div className="flex flex-col items-center gap-4">
-          <svg className="animate-spin h-12 w-12 text-active-blue" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+          <svg className="animate-spin h-12 w-12 text-oliver-azure" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
             <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
             <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
           </svg>
@@ -954,7 +955,7 @@ const AppContent: React.FC<{ msalInstance: any }> = ({ msalInstance }) => {
   }
 
   // Determine background color based on view to avoid grey bar on Home view
-  const mainBgColor = currentView === 'Home' ? 'bg-white' : 'bg-grey-100';
+  const mainBgColor = currentView === 'Home' ? 'bg-white' : 'bg-oliver-grey';
 
   // Get user info from MSAL for sidebar display
   const userInfo = getUserInfo(msalInstance);
@@ -982,15 +983,15 @@ const AppContent: React.FC<{ msalInstance: any }> = ({ msalInstance }) => {
 
       {/* Model fallback notification toast */}
       {notification && (
-        <div className="fixed bottom-6 left-1/2 -translate-x-1/2 z-50 flex items-start gap-3 bg-gray-800 text-white text-sm px-5 py-3.5 rounded-xl shadow-2xl max-w-md w-full mx-4 animate-fade-in">
-          <svg className="w-5 h-5 text-yellow-400 shrink-0 mt-0.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+        <div className="fixed bottom-6 left-1/2 -translate-x-1/2 z-50 flex items-start gap-3 bg-oliver-orange text-oliver-black text-sm px-5 py-3.5 rounded-xl shadow-2xl max-w-md w-full mx-4 animate-fade-in">
+          <svg className="w-5 h-5 text-oliver-black shrink-0 mt-0.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
             <path strokeLinecap="round" strokeLinejoin="round" d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z" />
           </svg>
           <div className="flex-1">
-            <p className="font-semibold text-yellow-300 mb-0.5">AI Model Notice</p>
-            <p className="text-gray-200 leading-snug">{notification}</p>
+            <p className="font-semibold text-oliver-black mb-0.5">AI Model Notice</p>
+            <p className="text-oliver-black leading-snug">{notification}</p>
           </div>
-          <button onClick={() => setNotification(null)} className="text-gray-400 hover:text-white shrink-0">
+          <button onClick={() => setNotification(null)} className="text-oliver-black/60 hover:text-oliver-black shrink-0">
             <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
               <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
             </svg>
diff --git a/frontend/components/AgencyFilterBar.tsx b/frontend/components/AgencyFilterBar.tsx
index bbc01d3..799a9b7 100644
--- a/frontend/components/AgencyFilterBar.tsx
+++ b/frontend/components/AgencyFilterBar.tsx
@@ -25,21 +25,21 @@ export const AgencyFilterBar: React.FC<AgencyFilterBarProps> = ({ selectedAgency
 
     return (
         <div className="bg-white border-b border-grey-300 px-6 py-3 flex items-center gap-3 flex-shrink-0">
-            <label className="text-sm font-medium text-primary-blue whitespace-nowrap">
+            <label className="text-sm font-medium text-oliver-black whitespace-nowrap">
                 Filter by Agency:
             </label>
             <div className="relative max-w-xs">
                 <select
                     value={selectedAgencyId || ''}
                     onChange={(e) => onAgencyChange(e.target.value || null)}
-                    className="bg-white border-2 border-active-blue text-black-title py-1.5 pl-3 pr-8 rounded-[10px] text-sm focus:outline-none focus:ring-2 focus:ring-active-blue appearance-none min-w-[200px]"
+                    className="bg-white border-2 border-oliver-azure text-oliver-black py-1.5 pl-3 pr-8 rounded-[10px] text-sm focus:outline-none focus:ring-2 focus:ring-oliver-azure appearance-none min-w-[200px]"
                 >
                     <option value="">All Agencies</option>
                     {agencies.map(a => (
                         <option key={a.id} value={a.id}>{a.name}</option>
                     ))}
                 </select>
-                <ChevronDownIcon className="absolute right-2 top-1/2 -translate-y-1/2 h-3 w-3 text-active-blue pointer-events-none" />
+                <ChevronDownIcon className="absolute right-2 top-1/2 -translate-y-1/2 h-3 w-3 text-oliver-azure pointer-events-none" />
             </div>
         </div>
     );
diff --git a/frontend/components/Analytics.tsx b/frontend/components/Analytics.tsx
index b1b1267..64fe201 100755
--- a/frontend/components/Analytics.tsx
+++ b/frontend/components/Analytics.tsx
@@ -24,9 +24,9 @@ const TrendIndicator: React.FC<{ trend: 'up' | 'down' | 'stable' }> = ({ trend }
         return <div className="flex items-center gap-1.5 text-success"><UpArrow/> Improving</div>;
     }
     if (trend === 'down') {
-        return <div className="flex items-center gap-1.5 text-error"><DownArrow/> Declining</div>;
+        return <div className="flex items-center gap-1.5 text-oliver-orange"><DownArrow/> Declining</div>;
     }
-    return <div className="flex items-center gap-1.5 text-grey-700"><StableLine/> Stable</div>;
+    return <div className="flex items-center gap-1.5 text-oliver-black"><StableLine/> Stable</div>;
 };
 
 export const Analytics: React.FC<{ agencyId?: string; isAdmin?: boolean }> = ({ agencyId, isAdmin }) => {
@@ -82,8 +82,8 @@ export const Analytics: React.FC<{ agencyId?: string; isAdmin?: boolean }> = ({
     return (
         <div className="p-4 sm:p-6 lg:p-8 h-full bg-white">
             <header className="mb-8">
-                <h1 className="text-3xl lg:text-4xl font-semibold text-primary-blue">Performance analytics</h1>
-                <p className="text-base lg:text-lg text-primary-blue mt-1">Overall usage and performance statistics for the tool.</p>
+                <h1 className="text-3xl lg:text-4xl font-semibold text-oliver-black">Performance analytics</h1>
+                <p className="text-base lg:text-lg text-oliver-black mt-1">Overall usage and performance statistics for the tool.</p>
             </header>
 
             {/* Stats Cards */}
@@ -92,13 +92,13 @@ export const Analytics: React.FC<{ agencyId?: string; isAdmin?: boolean }> = ({
                     {stats.map((stat) => {
                         const Icon = stat.icon;
                         return (
-                            <div key={stat.name} className="bg-white rounded-[10px] p-6 flex items-start shadow-sm transition-all hover:shadow-lg">
-                                <div className="p-3 rounded-full bg-white text-black-title mr-4 flex-shrink-0">
+                            <div key={stat.name} className="bg-oliver-grey rounded-[10px] p-6 flex items-start border-2 border-grey-300 transition-all hover:shadow-lg">
+                                <div className="p-3 rounded-full bg-white text-oliver-black mr-4 flex-shrink-0">
                                     <Icon className="h-9 w-9" />
                                 </div>
                                 <div>
-                                    <p className="text-sm font-medium text-grey-900">{stat.name}</p>
-                                    <p className="text-3xl font-bold text-black-title mt-1">{stat.value}</p>
+                                    <p className="text-sm font-medium text-oliver-black">{stat.name}</p>
+                                    <p className="text-3xl font-bold text-oliver-black mt-1">{stat.value}</p>
                                 </div>
                             </div>
                         );
@@ -109,18 +109,18 @@ export const Analytics: React.FC<{ agencyId?: string; isAdmin?: boolean }> = ({
             {/* Per-Agency Breakdown (admin only) */}
             {isAdmin && agencyAnalytics.length > 0 && (
                 <section className="mt-10">
-                    <h2 className="text-2xl font-semibold text-primary-blue mb-4">Agency performance</h2>
+                    <h2 className="text-2xl font-semibold text-oliver-black mb-4">Agency performance</h2>
                     <div className="bg-white rounded-[10px] shadow-md overflow-hidden border border-grey-300">
                         <div className="overflow-x-auto">
                             <table className="min-w-full">
-                                <thead className="bg-lime">
+                                <thead className="bg-oliver-sky">
                                     <tr>
-                                        <th scope="col" className="px-6 py-3 text-left text-xs font-bold text-black-title uppercase tracking-wider">Agency</th>
-                                        <th scope="col" className="px-6 py-3 text-left text-xs font-bold text-black-title uppercase tracking-wider">Proofs Reviewed</th>
-                                        <th scope="col" className="px-6 py-3 text-left text-xs font-bold text-black-title uppercase tracking-wider">Pass Rate</th>
-                                        <th scope="col" className="px-6 py-3 text-left text-xs font-bold text-black-title uppercase tracking-wider">Failed</th>
-                                        <th scope="col" className="px-6 py-3 text-left text-xs font-bold text-black-title uppercase tracking-wider">Errors</th>
-                                        <th scope="col" className="px-6 py-3 text-left text-xs font-bold text-black-title uppercase tracking-wider">Legal Review</th>
+                                        <th scope="col" className="px-6 py-3 text-left text-xs font-bold text-oliver-black uppercase tracking-wider">Agency</th>
+                                        <th scope="col" className="px-6 py-3 text-left text-xs font-bold text-oliver-black uppercase tracking-wider">Proofs Reviewed</th>
+                                        <th scope="col" className="px-6 py-3 text-left text-xs font-bold text-oliver-black uppercase tracking-wider">Pass Rate</th>
+                                        <th scope="col" className="px-6 py-3 text-left text-xs font-bold text-oliver-black uppercase tracking-wider">Failed</th>
+                                        <th scope="col" className="px-6 py-3 text-left text-xs font-bold text-oliver-black uppercase tracking-wider">Errors</th>
+                                        <th scope="col" className="px-6 py-3 text-left text-xs font-bold text-oliver-black uppercase tracking-wider">Legal Review</th>
                                     </tr>
                                 </thead>
                                 <tbody className="divide-y divide-grey-300">
@@ -136,23 +136,23 @@ export const Analytics: React.FC<{ agencyId?: string; isAdmin?: boolean }> = ({
                                                         ? 'bg-blue-50'
                                                         : index % 2 === 0
                                                             ? 'bg-white'
-                                                            : 'bg-grey-100'
+                                                            : 'bg-oliver-grey'
                                                 }
                                             >
-                                                <td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-black-title">
+                                                <td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-oliver-black">
                                                     {agency.agency_name}
-                                                    {isSelected && <span className="ml-2 text-xs text-primary-blue font-normal">(selected)</span>}
+                                                    {isSelected && <span className="ml-2 text-xs text-oliver-black font-normal">(selected)</span>}
                                                 </td>
-                                                <td className="px-6 py-4 whitespace-nowrap text-sm text-black-title">{agency.total_reviews}</td>
-                                                <td className="px-6 py-4 whitespace-nowrap text-sm font-semibold text-black-title">
+                                                <td className="px-6 py-4 whitespace-nowrap text-sm text-oliver-black">{agency.total_reviews}</td>
+                                                <td className="px-6 py-4 whitespace-nowrap text-sm font-semibold text-oliver-black">
                                                     <div className="flex items-center">
                                                         <span className={`h-2.5 w-2.5 rounded-full mr-3 ${rate >= 80 ? 'bg-success' : rate < 70 ? 'bg-error' : 'bg-warning'}`}></span>
                                                         {rate}%
                                                     </div>
                                                 </td>
-                                                <td className="px-6 py-4 whitespace-nowrap text-sm text-black-title">{agency.failed}</td>
-                                                <td className="px-6 py-4 whitespace-nowrap text-sm text-black-title">{agency.errors}</td>
-                                                <td className="px-6 py-4 whitespace-nowrap text-sm text-black-title">{agency.legal_review}</td>
+                                                <td className="px-6 py-4 whitespace-nowrap text-sm text-oliver-black">{agency.failed}</td>
+                                                <td className="px-6 py-4 whitespace-nowrap text-sm text-oliver-black">{agency.errors}</td>
+                                                <td className="px-6 py-4 whitespace-nowrap text-sm text-oliver-black">{agency.legal_review}</td>
                                             </tr>
                                         );
                                     })}
@@ -165,14 +165,14 @@ export const Analytics: React.FC<{ agencyId?: string; isAdmin?: boolean }> = ({
 
             {/* AI Performance Summary */}
             <section className="mt-10">
-                <h2 className="text-2xl font-semibold text-primary-blue mb-4">AI performance summary</h2>
-                <div className="bg-white border-2 border-electric-violet text-black-title p-6 rounded-[10px] shadow-md flex items-start gap-4">
+                <h2 className="text-2xl font-semibold text-oliver-black mb-4">AI performance summary</h2>
+                <div className="bg-white border-2 border-oliver-sky border-l-4 text-oliver-black p-6 rounded-[10px] shadow-md flex items-start gap-4" style={{ borderLeftColor: '#5DF5EA' }}>
                     <div className="flex-shrink-0">
-                        <LightbulbIcon className="h-7 w-7 text-electric-violet" />
+                        <LightbulbIcon className="h-7 w-7 text-oliver-orange" />
                     </div>
                     <div>
-                        <p className="font-semibold text-primary-blue">Key Insight (Last 7 Days):</p>
-                        <p className="mt-1 text-black-title">
+                        <p className="font-semibold text-oliver-black">Key Insight (Last 7 Days):</p>
+                        <p className="mt-1 text-oliver-black">
                             A sharp decline in Best Practice adherence has been noted, primarily driven by proofs from the <strong>Barclays Q4 Social</strong> campaign. The Brand Guardian agent also shows a declining performance trend, suggesting a potential need for updated brand guideline training or proof review.
                         </p>
                     </div>
@@ -181,29 +181,29 @@ export const Analytics: React.FC<{ agencyId?: string; isAdmin?: boolean }> = ({
 
             {/* Agent Performance Table */}
             <section className="mt-10">
-                <h2 className="text-2xl font-semibold text-primary-blue mb-4">Agent performance (last 7 days)</h2>
+                <h2 className="text-2xl font-semibold text-oliver-black mb-4">Agent performance (last 7 days)</h2>
                 <div className="bg-white rounded-[10px] shadow-md overflow-hidden border border-grey-300">
                     <div className="overflow-x-auto">
                         <table className="min-w-full">
-                            <thead className="bg-lime">
+                            <thead className="bg-oliver-sky">
                                 <tr>
-                                    <th scope="col" className="px-6 py-3 text-left text-xs font-bold text-black-title uppercase tracking-wider">Agent Name</th>
-                                    <th scope="col" className="px-6 py-3 text-left text-xs font-bold text-black-title uppercase tracking-wider">Pass Rate</th>
-                                    <th scope="col" className="px-6 py-3 text-left text-xs font-bold text-black-title uppercase tracking-wider">Avg. Issues per Proof</th>
-                                    <th scope="col" className="px-6 py-3 text-left text-xs font-bold text-black-title uppercase tracking-wider">Performance Trend</th>
+                                    <th scope="col" className="px-6 py-3 text-left text-xs font-bold text-oliver-black uppercase tracking-wider">Agent Name</th>
+                                    <th scope="col" className="px-6 py-3 text-left text-xs font-bold text-oliver-black uppercase tracking-wider">Pass Rate</th>
+                                    <th scope="col" className="px-6 py-3 text-left text-xs font-bold text-oliver-black uppercase tracking-wider">Avg. Issues per Proof</th>
+                                    <th scope="col" className="px-6 py-3 text-left text-xs font-bold text-oliver-black uppercase tracking-wider">Performance Trend</th>
                                 </tr>
                             </thead>
                             <tbody className="divide-y divide-grey-300">
                                 {agentPerformance.map((agent, index) => (
-                                    <tr key={agent.name} className={index % 2 === 0 ? 'bg-white' : 'bg-grey-100'}>
-                                        <td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-black-title">{agent.name}</td>
-                                        <td className={`px-6 py-4 whitespace-nowrap text-sm font-semibold text-black-title`}>
+                                    <tr key={agent.name} className={index % 2 === 0 ? 'bg-white' : 'bg-oliver-grey'}>
+                                        <td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-oliver-black">{agent.name}</td>
+                                        <td className={`px-6 py-4 whitespace-nowrap text-sm font-semibold text-oliver-black`}>
                                             <div className="flex items-center">
-                                                <span className={`h-2.5 w-2.5 rounded-full mr-3 ${agent.passRate >= 80 ? 'bg-success' : agent.passRate < 70 ? 'bg-error' : 'bg-warning'}`}></span>
+                                                <span className={`h-2.5 w-2.5 rounded-full mr-3 ${agent.passRate >= 80 ? 'bg-oliver-green' : agent.passRate < 70 ? 'bg-oliver-gold' : 'bg-oliver-orange'}`}></span>
                                                 {agent.passRate}%
                                             </div>
                                         </td>
-                                        <td className="px-6 py-4 whitespace-nowrap text-sm text-black-title">{agent.avgIssues}</td>
+                                        <td className="px-6 py-4 whitespace-nowrap text-sm text-oliver-black">{agent.avgIssues}</td>
                                         <td className="px-6 py-4 whitespace-nowrap text-sm font-medium">
                                             <TrendIndicator trend={agent.trend as 'up' | 'down' | 'stable'} />
                                         </td>
diff --git a/frontend/components/AssetPreview.tsx b/frontend/components/AssetPreview.tsx
index 1829007..ef801e4 100755
--- a/frontend/components/AssetPreview.tsx
+++ b/frontend/components/AssetPreview.tsx
@@ -128,7 +128,7 @@ export const AssetPreview: React.FC<AssetPreviewProps> = ({ file, previewUrl, fi
                 style={{ minHeight: '300px', maxHeight: 'calc(100vh - 9rem)' }}
             >
                 <DocumentIcon className="h-20 w-20 text-gray-400 mb-4" />
-                <p className="text-lg font-semibold text-primary-blue break-all">{displayName}</p>
+                <p className="text-lg font-semibold text-oliver-black break-all">{displayName}</p>
                 <p className="text-sm text-gray-500">{fileType}</p>
                 <p className="text-sm text-gray-500 mt-2">No preview available for this file type.</p>
             </div>
diff --git a/frontend/components/Auditing.tsx b/frontend/components/Auditing.tsx
index 62ea321..b44bf43 100755
--- a/frontend/components/Auditing.tsx
+++ b/frontend/components/Auditing.tsx
@@ -23,40 +23,40 @@ const formatDate = (isoString: string) => {
 const FlagsTable: React.FC<{ items: FlaggedItem[], onNavigate: AuditingProps['onNavigate'] }> = ({ items, onNavigate }) => (
     <div className="overflow-x-auto">
         <table className="min-w-full">
-            <thead className="bg-lime">
+            <thead className="bg-oliver-sky">
                 <tr>
-                    <th scope="col" className="px-6 py-3 text-left text-xs font-bold text-black-title uppercase tracking-wider">Proof Name</th>
-                    <th scope="col" className="px-6 py-3 text-left text-xs font-bold text-black-title uppercase tracking-wider">Proof Version</th>
-                    <th scope="col" className="px-6 py-3 text-left text-xs font-bold text-black-title uppercase tracking-wider">Submitter</th>
-                    <th scope="col" className="px-6 py-3 text-left text-xs font-bold text-black-title uppercase tracking-wider">Submit Agency</th>
-                    <th scope="col" className="px-6 py-3 text-left text-xs font-bold text-black-title uppercase tracking-wider">Agent Flagged</th>
-                    <th scope="col" className="px-6 py-3 text-left text-xs font-bold text-black-title uppercase tracking-wider">User Comments</th>
-                    <th scope="col" className="px-6 py-3 text-left text-xs font-bold text-black-title uppercase tracking-wider">Date</th>
+                    <th scope="col" className="px-6 py-3 text-left text-xs font-bold text-oliver-black uppercase tracking-wider">Proof Name</th>
+                    <th scope="col" className="px-6 py-3 text-left text-xs font-bold text-oliver-black uppercase tracking-wider">Proof Version</th>
+                    <th scope="col" className="px-6 py-3 text-left text-xs font-bold text-oliver-black uppercase tracking-wider">Submitter</th>
+                    <th scope="col" className="px-6 py-3 text-left text-xs font-bold text-oliver-black uppercase tracking-wider">Submit Agency</th>
+                    <th scope="col" className="px-6 py-3 text-left text-xs font-bold text-oliver-black uppercase tracking-wider">Agent Flagged</th>
+                    <th scope="col" className="px-6 py-3 text-left text-xs font-bold text-oliver-black uppercase tracking-wider">User Comments</th>
+                    <th scope="col" className="px-6 py-3 text-left text-xs font-bold text-oliver-black uppercase tracking-wider">Date</th>
                 </tr>
             </thead>
             <tbody className="divide-y divide-grey-300">
                 {items.length > 0 ? items.map((item, index) => (
                     <tr
                         key={item.id}
-                        className={`hover:bg-info-light cursor-pointer ${index % 2 === 0 ? 'bg-white' : 'bg-grey-100'}`}
+                        className={`hover:bg-oliver-grey cursor-pointer ${index % 2 === 0 ? 'bg-white' : 'bg-oliver-grey'}`}
                         onClick={() => onNavigate(item)}
                         title={`Click to view Version ${item.version} of ${item.proofName}`}
                     >
-                        <td className="px-6 py-4 whitespace-nowrap text-sm font-semibold text-active-blue">{item.proofName}</td>
-                        <td className="px-6 py-4 whitespace-nowrap text-sm text-black-title">Version {item.version}</td>
-                        <td className="px-6 py-4 whitespace-nowrap text-sm text-black-title">{item.submitter}</td>
-                        <td className="px-6 py-4 whitespace-nowrap text-sm text-black-title">{item.submitAgency}</td>
-                        <td className="px-6 py-4 whitespace-nowrap text-sm text-black-title">{item.agentFlagged}</td>
-                        <td className="px-6 py-4 text-sm text-black-title">
+                        <td className="px-6 py-4 whitespace-nowrap text-sm font-semibold text-oliver-azure">{item.proofName}</td>
+                        <td className="px-6 py-4 whitespace-nowrap text-sm text-oliver-black">Version {item.version}</td>
+                        <td className="px-6 py-4 whitespace-nowrap text-sm text-oliver-black">{item.submitter}</td>
+                        <td className="px-6 py-4 whitespace-nowrap text-sm text-oliver-black">{item.submitAgency}</td>
+                        <td className="px-6 py-4 whitespace-nowrap text-sm text-oliver-black">{item.agentFlagged}</td>
+                        <td className="px-6 py-4 text-sm text-oliver-black">
                             <div className="max-w-xs break-words" title={item.comments}>
-                                {item.comments || <span className="italic text-grey-700">No comment</span>}
+                                {item.comments || <span className="italic text-oliver-black/60">No comment</span>}
                             </div>
                         </td>
-                        <td className="px-6 py-4 whitespace-nowrap text-sm text-black-title">{formatDate(item.timestamp)}</td>
+                        <td className="px-6 py-4 whitespace-nowrap text-sm text-oliver-black">{formatDate(item.timestamp)}</td>
                     </tr>
                 )) : (
                     <tr>
-                        <td colSpan={7} className="text-center py-10 text-grey-700">
+                        <td colSpan={7} className="text-center py-10 text-oliver-black/60">
                             There are currently no flagged items to audit.
                         </td>
                     </tr>
@@ -69,42 +69,42 @@ const FlagsTable: React.FC<{ items: FlaggedItem[], onNavigate: AuditingProps['on
 const ResolutionsTable: React.FC<{ items: ResolvedItem[], onNavigate: AuditingProps['onNavigate'] }> = ({ items, onNavigate }) => (
     <div className="overflow-x-auto">
         <table className="min-w-full">
-            <thead className="bg-lime">
+            <thead className="bg-oliver-sky">
                 <tr>
-                    <th scope="col" className="px-6 py-3 text-left text-xs font-bold text-black-title uppercase tracking-wider">Proof Name</th>
-                    <th scope="col" className="px-6 py-3 text-left text-xs font-bold text-black-title uppercase tracking-wider">Proof Version</th>
-                    <th scope="col" className="px-6 py-3 text-left text-xs font-bold text-black-title uppercase tracking-wider">Submitter</th>
-                    <th scope="col" className="px-6 py-3 text-left text-xs font-bold text-black-title uppercase tracking-wider">Submit Agency</th>
-                    <th scope="col" className="px-6 py-3 text-left text-xs font-bold text-black-title uppercase tracking-wider">Agent</th>
-                    <th scope="col" className="px-6 py-3 text-left text-xs font-bold text-black-title uppercase tracking-wider">Agent Issue</th>
-                    <th scope="col" className="px-6 py-3 text-left text-xs font-bold text-black-title uppercase tracking-wider">User Comments</th>
-                    <th scope="col" className="px-6 py-3 text-left text-xs font-bold text-black-title uppercase tracking-wider">Date</th>
+                    <th scope="col" className="px-6 py-3 text-left text-xs font-bold text-oliver-black uppercase tracking-wider">Proof Name</th>
+                    <th scope="col" className="px-6 py-3 text-left text-xs font-bold text-oliver-black uppercase tracking-wider">Proof Version</th>
+                    <th scope="col" className="px-6 py-3 text-left text-xs font-bold text-oliver-black uppercase tracking-wider">Submitter</th>
+                    <th scope="col" className="px-6 py-3 text-left text-xs font-bold text-oliver-black uppercase tracking-wider">Submit Agency</th>
+                    <th scope="col" className="px-6 py-3 text-left text-xs font-bold text-oliver-black uppercase tracking-wider">Agent</th>
+                    <th scope="col" className="px-6 py-3 text-left text-xs font-bold text-oliver-black uppercase tracking-wider">Agent Issue</th>
+                    <th scope="col" className="px-6 py-3 text-left text-xs font-bold text-oliver-black uppercase tracking-wider">User Comments</th>
+                    <th scope="col" className="px-6 py-3 text-left text-xs font-bold text-oliver-black uppercase tracking-wider">Date</th>
                 </tr>
             </thead>
             <tbody className="divide-y divide-grey-300">
                 {items.length > 0 ? items.map((item, index) => (
                     <tr
                         key={item.id}
-                        className={`hover:bg-info-light cursor-pointer ${index % 2 === 0 ? 'bg-white' : 'bg-grey-100'}`}
+                        className={`hover:bg-oliver-grey cursor-pointer ${index % 2 === 0 ? 'bg-white' : 'bg-oliver-grey'}`}
                         onClick={() => onNavigate(item)}
                         title={`Click to view Version ${item.version} of ${item.proofName}`}
                     >
-                        <td className="px-6 py-4 whitespace-nowrap text-sm font-semibold text-active-blue">{item.proofName}</td>
-                        <td className="px-6 py-4 whitespace-nowrap text-sm text-black-title">Version {item.version}</td>
-                        <td className="px-6 py-4 whitespace-nowrap text-sm text-black-title">{item.submitter}</td>
-                        <td className="px-6 py-4 whitespace-nowrap text-sm text-black-title">{item.submitAgency}</td>
-                        <td className="px-6 py-4 whitespace-nowrap text-sm text-black-title">{item.agent}</td>
-                        <td className="px-6 py-4 text-sm text-black-title">
+                        <td className="px-6 py-4 whitespace-nowrap text-sm font-semibold text-oliver-azure">{item.proofName}</td>
+                        <td className="px-6 py-4 whitespace-nowrap text-sm text-oliver-black">Version {item.version}</td>
+                        <td className="px-6 py-4 whitespace-nowrap text-sm text-oliver-black">{item.submitter}</td>
+                        <td className="px-6 py-4 whitespace-nowrap text-sm text-oliver-black">{item.submitAgency}</td>
+                        <td className="px-6 py-4 whitespace-nowrap text-sm text-oliver-black">{item.agent}</td>
+                        <td className="px-6 py-4 text-sm text-oliver-black">
                              <div className="max-w-xs break-words" title={item.issue}>{item.issue}</div>
                         </td>
-                        <td className="px-6 py-4 text-sm text-black-title">
+                        <td className="px-6 py-4 text-sm text-oliver-black">
                              <div className="max-w-xs break-words" title={item.resolution}>{item.resolution}</div>
                         </td>
-                         <td className="px-6 py-4 whitespace-nowrap text-sm text-black-title">{formatDate(item.timestamp)}</td>
+                         <td className="px-6 py-4 whitespace-nowrap text-sm text-oliver-black">{formatDate(item.timestamp)}</td>
                     </tr>
                 )) : (
                     <tr>
-                        <td colSpan={8} className="text-center py-10 text-grey-700">
+                        <td colSpan={8} className="text-center py-10 text-oliver-black/60">
                             There are currently no resolved items to audit.
                         </td>
                     </tr>
@@ -117,38 +117,38 @@ const ResolutionsTable: React.FC<{ items: ResolvedItem[], onNavigate: AuditingPr
 const ErrorsTable: React.FC<{ items: ErrorItem[], onNavigate: AuditingProps['onNavigate'] }> = ({ items, onNavigate }) => (
     <div className="overflow-x-auto">
         <table className="min-w-full">
-            <thead className="bg-lime">
+            <thead className="bg-oliver-sky">
                 <tr>
-                    <th scope="col" className="px-6 py-3 text-left text-xs font-bold text-black-title uppercase tracking-wider">Proof Name</th>
-                    <th scope="col" className="px-6 py-3 text-left text-xs font-bold text-black-title uppercase tracking-wider">Proof Version</th>
-                    <th scope="col" className="px-6 py-3 text-left text-xs font-bold text-black-title uppercase tracking-wider">Submitter</th>
-                    <th scope="col" className="px-6 py-3 text-left text-xs font-bold text-black-title uppercase tracking-wider">Submit Agency</th>
-                    <th scope="col" className="px-6 py-3 text-left text-xs font-bold text-black-title uppercase tracking-wider">Error Summary</th>
-                    <th scope="col" className="px-6 py-3 text-left text-xs font-bold text-black-title uppercase tracking-wider">Date</th>
+                    <th scope="col" className="px-6 py-3 text-left text-xs font-bold text-oliver-black uppercase tracking-wider">Proof Name</th>
+                    <th scope="col" className="px-6 py-3 text-left text-xs font-bold text-oliver-black uppercase tracking-wider">Proof Version</th>
+                    <th scope="col" className="px-6 py-3 text-left text-xs font-bold text-oliver-black uppercase tracking-wider">Submitter</th>
+                    <th scope="col" className="px-6 py-3 text-left text-xs font-bold text-oliver-black uppercase tracking-wider">Submit Agency</th>
+                    <th scope="col" className="px-6 py-3 text-left text-xs font-bold text-oliver-black uppercase tracking-wider">Error Summary</th>
+                    <th scope="col" className="px-6 py-3 text-left text-xs font-bold text-oliver-black uppercase tracking-wider">Date</th>
                 </tr>
             </thead>
             <tbody className="divide-y divide-grey-300">
                 {items.length > 0 ? items.map((item, index) => (
                     <tr
                         key={item.id}
-                        className={`hover:bg-info-light cursor-pointer ${index % 2 === 0 ? 'bg-white' : 'bg-grey-100'}`}
+                        className={`hover:bg-oliver-grey cursor-pointer ${index % 2 === 0 ? 'bg-white' : 'bg-oliver-grey'}`}
                         onClick={() => onNavigate(item)}
                         title={`Click to view Version ${item.version} of ${item.proofName}`}
                     >
-                        <td className="px-6 py-4 whitespace-nowrap text-sm font-semibold text-active-blue">{item.proofName}</td>
-                        <td className="px-6 py-4 whitespace-nowrap text-sm text-black-title">Version {item.version}</td>
-                        <td className="px-6 py-4 whitespace-nowrap text-sm text-black-title">{item.submitter}</td>
-                        <td className="px-6 py-4 whitespace-nowrap text-sm text-black-title">{item.submitAgency}</td>
-                        <td className="px-6 py-4 text-sm text-black-title">
+                        <td className="px-6 py-4 whitespace-nowrap text-sm font-semibold text-oliver-azure">{item.proofName}</td>
+                        <td className="px-6 py-4 whitespace-nowrap text-sm text-oliver-black">Version {item.version}</td>
+                        <td className="px-6 py-4 whitespace-nowrap text-sm text-oliver-black">{item.submitter}</td>
+                        <td className="px-6 py-4 whitespace-nowrap text-sm text-oliver-black">{item.submitAgency}</td>
+                        <td className="px-6 py-4 text-sm text-oliver-black">
                             <div className="max-w-md break-words" title={item.errorSummary}>
                                 {item.errorSummary}
                             </div>
                         </td>
-                        <td className="px-6 py-4 whitespace-nowrap text-sm text-black-title">{formatDate(item.timestamp)}</td>
+                        <td className="px-6 py-4 whitespace-nowrap text-sm text-oliver-black">{formatDate(item.timestamp)}</td>
                     </tr>
                 )) : (
                     <tr>
-                        <td colSpan={6} className="text-center py-10 text-grey-700">
+                        <td colSpan={6} className="text-center py-10 text-oliver-black/60">
                             There are currently no analysis errors to audit.
                         </td>
                     </tr>
@@ -165,8 +165,8 @@ export const Auditing: React.FC<AuditingProps> = ({ flaggedItems, resolvedItems,
     return (
         <div className="p-4 sm:p-6 lg:p-8 h-full bg-white">
             <header className="mb-8">
-                <h1 className="text-3xl lg:text-4xl font-semibold text-primary-blue">Auditing</h1>
-                <p className="text-base lg:text-lg text-primary-blue mt-1">Review and investigate all user-flagged feedback.</p>
+                <h1 className="text-3xl lg:text-4xl font-semibold text-oliver-black">Auditing</h1>
+                <p className="text-base lg:text-lg text-oliver-black mt-1">Review and investigate all user-flagged feedback.</p>
             </header>
 
             <div className="mb-6 border-b border-grey-300">
@@ -175,8 +175,8 @@ export const Auditing: React.FC<AuditingProps> = ({ flaggedItems, resolvedItems,
                         onClick={() => setActiveTab('Flags')}
                         className={`whitespace-nowrap py-3 px-1 border-b-2 font-semibold text-sm transition-colors ${
                             activeTab === 'Flags'
-                                ? 'border-active-blue text-active-blue'
-                                : 'border-transparent text-black-title hover:text-active-blue hover:border-grey-300'
+                                ? 'border-oliver-azure text-oliver-azure'
+                                : 'border-transparent text-oliver-black hover:text-oliver-azure hover:border-grey-300'
                         }`}
                         aria-current={activeTab === 'Flags' ? 'page' : undefined}
                     >
@@ -186,8 +186,8 @@ export const Auditing: React.FC<AuditingProps> = ({ flaggedItems, resolvedItems,
                         onClick={() => setActiveTab('Resolutions')}
                         className={`whitespace-nowrap py-3 px-1 border-b-2 font-semibold text-sm transition-colors ${
                             activeTab === 'Resolutions'
-                                ? 'border-active-blue text-active-blue'
-                                : 'border-transparent text-black-title hover:text-active-blue hover:border-grey-300'
+                                ? 'border-oliver-azure text-oliver-azure'
+                                : 'border-transparent text-oliver-black hover:text-oliver-azure hover:border-grey-300'
                         }`}
                          aria-current={activeTab === 'Resolutions' ? 'page' : undefined}
                     >
@@ -197,8 +197,8 @@ export const Auditing: React.FC<AuditingProps> = ({ flaggedItems, resolvedItems,
                         onClick={() => setActiveTab('Errors')}
                         className={`whitespace-nowrap py-3 px-1 border-b-2 font-semibold text-sm transition-colors ${
                             activeTab === 'Errors'
-                                ? 'border-active-blue text-active-blue'
-                                : 'border-transparent text-black-title hover:text-active-blue hover:border-grey-300'
+                                ? 'border-oliver-azure text-oliver-azure'
+                                : 'border-transparent text-oliver-black hover:text-oliver-azure hover:border-grey-300'
                         }`}
                          aria-current={activeTab === 'Errors' ? 'page' : undefined}
                     >
diff --git a/frontend/components/Campaigns.tsx b/frontend/components/Campaigns.tsx
index dd835e5..6f14026 100755
--- a/frontend/components/Campaigns.tsx
+++ b/frontend/components/Campaigns.tsx
@@ -232,16 +232,16 @@ const StatusBadge: React.FC<{ status: string }> = ({ status }) => {
     let colorClasses = '';
     switch (status) {
         case 'In Progress':
-            colorClasses = 'bg-warning text-black-title';
+            colorClasses = 'bg-oliver-gold text-oliver-black';
             break;
         case 'Completed':
-            colorClasses = 'bg-success text-white';
+            colorClasses = 'bg-oliver-green text-white';
             break;
         case 'Needs Review':
-            colorClasses = 'bg-warning-light text-black-title';
+            colorClasses = 'bg-warning-light text-oliver-black';
             break;
         default:
-            colorClasses = 'bg-grey-100 text-black-title';
+            colorClasses = 'bg-oliver-grey text-oliver-black';
     }
     return (
         <span className={`px-2.5 py-0.5 text-xs font-semibold rounded-full ${colorClasses}`}>
@@ -260,10 +260,10 @@ const OverallStatusBadge: React.FC<{ status: OverallStatus }> = ({ status }) =>
             colorClasses = 'bg-error text-white';
             break;
         case 'Requires Manual Legal Review':
-            colorClasses = 'bg-warning text-black-title';
+            colorClasses = 'bg-warning text-oliver-black';
             break;
         case 'Analysis Error':
-            colorClasses = 'bg-grey-300 text-black-title';
+            colorClasses = 'bg-grey-300 text-oliver-black';
             break;
     }
 
@@ -379,17 +379,17 @@ const CampaignList: React.FC<{
     }, [filteredAndSortedCampaigns]);
 
     const getStatusSelectClasses = (status: string) => {
-        let baseClasses = 'w-full text-center px-2.5 py-0.5 text-xs font-semibold rounded-full border border-transparent focus:outline-none focus:ring-2 focus:ring-active-blue appearance-none cursor-pointer';
+        let baseClasses = 'w-full text-center px-2.5 py-0.5 text-xs font-semibold rounded-full border border-transparent focus:outline-none focus:ring-2 focus:ring-oliver-azure appearance-none cursor-pointer';
         let colorClasses = '';
         switch (status) {
             case 'In Progress':
-                colorClasses = 'bg-warning text-black-title';
+                colorClasses = 'bg-oliver-gold text-oliver-black';
                 break;
             case 'Completed':
-                colorClasses = 'bg-success text-white';
+                colorClasses = 'bg-oliver-green text-white';
                 break;
             default:
-                colorClasses = 'bg-grey-100 text-black-title';
+                colorClasses = 'bg-oliver-grey text-oliver-black';
         }
         return `${baseClasses} ${colorClasses}`;
     };
@@ -468,22 +468,22 @@ const CampaignList: React.FC<{
             <header className="mb-8">
                 <div className="flex flex-col md:flex-row justify-between items-start md:items-center gap-4">
                     <div>
-                        <h1 className="text-3xl lg:text-4xl font-semibold text-primary-blue">Campaigns</h1>
-                        <p className="text-base lg:text-lg text-primary-blue mt-1">Manage your campaigns and proof collections.</p>
+                        <h1 className="text-3xl lg:text-4xl font-semibold text-oliver-black">Campaigns</h1>
+                        <p className="text-base lg:text-lg text-oliver-black mt-1">Manage your campaigns and proof collections.</p>
                     </div>
                      <div className="flex items-center gap-4">
                         <div className="flex items-center gap-2">
-                            <label htmlFor="show-completed" className="text-sm font-medium text-black-title whitespace-nowrap">Show Completed</label>
+                            <label htmlFor="show-completed" className="text-sm font-medium text-oliver-black whitespace-nowrap">Show Completed</label>
                             <ToggleSwitch enabled={showCompleted} onChange={setShowCompleted} />
                         </div>
                         <div className="flex items-center gap-2">
-                            <label htmlFor="my-campaigns" className="text-sm font-medium text-black-title whitespace-nowrap">My Campaigns Only</label>
+                            <label htmlFor="my-campaigns" className="text-sm font-medium text-oliver-black whitespace-nowrap">My Campaigns Only</label>
                             <ToggleSwitch enabled={showMyCampaignsOnly} onChange={setShowMyCampaignsOnly} />
                         </div>
                         {!readOnly && (
                             <button
                                 onClick={onOpenModal}
-                                className="flex items-center gap-2 bg-active-blue text-white font-semibold py-2.5 px-6 rounded-full hover:bg-active-blue/90 transition-colors duration-300"
+                                className="flex items-center gap-2 bg-oliver-azure text-white font-semibold py-2.5 px-6 rounded-full hover:bg-oliver-azure/90 transition-colors duration-300"
                             >
                                 <PlusIcon className="h-5 w-5" />
                                 Create New Campaign
@@ -496,14 +496,14 @@ const CampaignList: React.FC<{
             <section>
                 {/* Bulk Actions Bar */}
                 {!readOnly && selectedCampaigns.size > 0 && (
-                    <div className="mb-4 bg-info-light border border-active-blue rounded-[10px] p-3 flex items-center justify-between">
+                    <div className="mb-4 bg-oliver-grey border border-oliver-azure rounded-[10px] p-3 flex items-center justify-between">
                         <div className="flex items-center gap-4">
-                            <span className="text-sm font-medium text-active-blue">
+                            <span className="text-sm font-medium text-oliver-azure">
                                 {selectedCampaigns.size} campaign{selectedCampaigns.size !== 1 ? 's' : ''} selected
                             </span>
                             <button
                                 onClick={() => setSelectedCampaigns(new Set())}
-                                className="text-sm text-active-blue hover:text-primary-blue underline"
+                                className="text-sm text-oliver-azure hover:text-oliver-black underline"
                             >
                                 Clear selection
                             </button>
@@ -522,7 +522,7 @@ const CampaignList: React.FC<{
                 <div className="bg-white rounded-[10px] shadow-md overflow-hidden border border-grey-300">
                     <div className="overflow-x-auto">
                         <table className="min-w-full">
-                            <thead className="bg-lime">
+                            <thead className="bg-oliver-sky">
                                 <tr>
                                     {!readOnly && (
                                     <th scope="col" className="px-4 py-3 text-left">
@@ -533,7 +533,7 @@ const CampaignList: React.FC<{
                                                 if (el) el.indeterminate = isIndeterminate;
                                             }}
                                             onChange={handleSelectAll}
-                                            className="h-4 w-4 text-active-blue border-grey-300 rounded focus:ring-active-blue cursor-pointer"
+                                            className="h-4 w-4 text-oliver-azure border-grey-300 rounded focus:ring-oliver-azure cursor-pointer"
                                             aria-label="Select all campaigns"
                                         />
                                     </th>
@@ -550,12 +550,12 @@ const CampaignList: React.FC<{
                                         <th
                                             key={key}
                                             scope="col"
-                                            className="px-6 py-3 text-left text-xs font-bold text-black-title uppercase tracking-wider cursor-pointer select-none hover:text-active-blue"
+                                            className="px-6 py-3 text-left text-xs font-bold text-oliver-black uppercase tracking-wider cursor-pointer select-none hover:text-oliver-azure"
                                             onClick={() => handleSort(key)}
                                         >
                                             <span className="inline-flex items-center gap-1">
                                                 {label}
-                                                <span className={`text-[10px] leading-none ${sortKey === key ? 'text-active-blue' : 'text-grey-700'}`}>
+                                                <span className={`text-[10px] leading-none ${sortKey === key ? 'text-oliver-azure' : 'text-oliver-black/60'}`}>
                                                     {sortKey === key ? (sortDirection === 'asc' ? '\u25B2' : '\u25BC') : '\u25B4\u25BE'}
                                                 </span>
                                             </span>
@@ -563,7 +563,7 @@ const CampaignList: React.FC<{
                                     ))}
                                     {!readOnly && <th scope="col" className="relative px-4 py-3"><span className="sr-only">Actions</span></th>}
                                 </tr>
-                                <tr className="bg-grey-100">
+                                <tr className="bg-oliver-grey">
                                     {!readOnly && <td className="px-4 py-1"></td>}
                                     {(['name', 'proofs', 'status', 'agencyLead', 'agency', 'brandGuidelines', 'lastModified'] as SortKey[]).map((key) => (
                                         <td key={key} className="px-6 py-1">
@@ -573,7 +573,7 @@ const CampaignList: React.FC<{
                                                 onChange={(e) => handleColumnFilterChange(key, e.target.value)}
                                                 onClick={(e) => e.stopPropagation()}
                                                 placeholder="Filter..."
-                                                className="w-full text-xs py-1 px-2 border border-grey-300 rounded bg-white focus:outline-none focus:border-active-blue focus:ring-1 focus:ring-active-blue"
+                                                className="w-full text-xs py-1 px-2 border border-grey-300 rounded bg-white focus:outline-none focus:border-oliver-azure focus:ring-1 focus:ring-oliver-azure"
                                             />
                                         </td>
                                     ))}
@@ -586,7 +586,7 @@ const CampaignList: React.FC<{
                                     return (
                                         <tr
                                             key={campaign.name}
-                                            className={`hover:bg-info-light cursor-pointer ${isSelected ? 'bg-info-light' : index % 2 === 0 ? 'bg-white' : 'bg-grey-100'}`}
+                                            className={`hover:bg-oliver-grey cursor-pointer ${isSelected ? 'bg-oliver-grey' : index % 2 === 0 ? 'bg-white' : 'bg-oliver-grey'}`}
                                             onClick={() => onSelectCampaign(campaign.name)}
                                         >
                                             {!readOnly && (
@@ -596,13 +596,13 @@ const CampaignList: React.FC<{
                                                     checked={isSelected}
                                                     onChange={() => {}} // Handled by onClick
                                                     onClick={(e) => handleSelectCampaign(campaign.name, e)}
-                                                    className="h-4 w-4 text-active-blue border-grey-300 rounded focus:ring-active-blue cursor-pointer"
+                                                    className="h-4 w-4 text-oliver-azure border-grey-300 rounded focus:ring-oliver-azure cursor-pointer"
                                                     aria-label={`Select ${campaign.name}`}
                                                 />
                                             </td>
                                             )}
-                                            <td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-primary-blue">{campaign.name}</td>
-                                            <td className="px-6 py-4 whitespace-nowrap text-sm text-primary-blue">{campaign.proofs}</td>
+                                            <td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-oliver-black">{campaign.name}</td>
+                                            <td className="px-6 py-4 whitespace-nowrap text-sm text-oliver-black">{campaign.proofs}</td>
                                             <td className="px-6 py-4 whitespace-nowrap text-sm w-40">
                                                 <div className="relative">
                                                     <select
@@ -616,19 +616,19 @@ const CampaignList: React.FC<{
                                                         <option value="In Progress">In Progress</option>
                                                         <option value="Completed">Completed</option>
                                                     </select>
-                                                    <ChevronDownIcon className="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2 h-full w-4 text-black-title" />
+                                                    <ChevronDownIcon className="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2 h-full w-4 text-oliver-black" />
                                                 </div>
                                             </td>
-                                            <td className="px-6 py-4 whitespace-nowrap text-sm text-primary-blue">{campaign.agencyLead}</td>
-                                            <td className="px-6 py-4 whitespace-nowrap text-sm text-primary-blue">{campaign.agency}</td>
-                                            <td className="px-6 py-4 whitespace-nowrap text-sm text-primary-blue">{campaign.brandGuidelines}</td>
-                                            <td className="px-6 py-4 whitespace-nowrap text-sm text-primary-blue">{formatDate(campaign.lastModified)}</td>
+                                            <td className="px-6 py-4 whitespace-nowrap text-sm text-oliver-black">{campaign.agencyLead}</td>
+                                            <td className="px-6 py-4 whitespace-nowrap text-sm text-oliver-black">{campaign.agency}</td>
+                                            <td className="px-6 py-4 whitespace-nowrap text-sm text-oliver-black">{campaign.brandGuidelines}</td>
+                                            <td className="px-6 py-4 whitespace-nowrap text-sm text-oliver-black">{formatDate(campaign.lastModified)}</td>
                                             {!readOnly && (
                                             <td className="px-4 py-4 whitespace-nowrap text-sm text-right">
                                                 <button
                                                     onClick={(e) => handleSingleDelete(campaign, e)}
                                                     disabled={isDeleting}
-                                                    className="p-2 text-grey-700 rounded-full hover:bg-error-light hover:text-error transition-colors disabled:opacity-50"
+                                                    className="p-2 text-oliver-black/60 rounded-full hover:bg-error-light hover:text-error transition-colors disabled:opacity-50"
                                                     title={`Delete ${campaign.name}`}
                                                     aria-label={`Delete ${campaign.name}`}
                                                 >
@@ -754,12 +754,12 @@ const UploadProofModal: React.FC<{
                     {/* Header */}
                     <div className="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4 border-b border-grey-300 flex justify-between items-start">
                         <div>
-                             <h3 className="text-2xl font-bold text-primary-blue" id="modal-title">Upload New Proof</h3>
-                             <p className="text-sm text-grey-900 mt-1">Drag and drop your proof below to start AI analysis.</p>
+                             <h3 className="text-2xl font-bold text-oliver-black" id="modal-title">Upload New Proof</h3>
+                             <p className="text-sm text-oliver-black mt-1">Drag and drop your proof below to start AI analysis.</p>
                         </div>
                         <button
                             onClick={onClose}
-                            className="rounded-full p-2 text-grey-700 hover:bg-grey-100 hover:text-black-title transition-colors"
+                            className="rounded-full p-2 text-oliver-black/60 hover:bg-oliver-grey hover:text-oliver-black transition-colors"
                         >
                             <XIcon className="h-6 w-6" />
                         </button>
@@ -771,10 +771,10 @@ const UploadProofModal: React.FC<{
                             <div className="space-y-6">
                                 {/* Proof Name */}
                                 <div>
-                                    <label htmlFor="proof-name" className="block text-sm font-bold text-primary-blue mb-2">Proof Name</label>
+                                    <label htmlFor="proof-name" className="block text-sm font-bold text-oliver-black mb-2">Proof Name</label>
                                     <div className="relative">
                                         <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
-                                            <DocumentIcon className="h-5 w-5 text-grey-700" />
+                                            <DocumentIcon className="h-5 w-5 text-oliver-black/60" />
                                         </div>
                                         <input
                                             id="proof-name"
@@ -783,13 +783,13 @@ const UploadProofModal: React.FC<{
                                             onChange={(e) => setProofName(e.target.value)}
                                             placeholder="e.g., Q4 Hero Instagram Post"
                                             disabled={isLoading}
-                                            className="w-full rounded-[10px] border-2 border-grey-700 shadow-sm focus:border-active-blue focus:ring-active-blue p-3 pl-10 bg-white transition-all text-black-title"
+                                            className="w-full rounded-[10px] border-2 border-oliver-azure shadow-sm focus:border-oliver-azure focus:ring-oliver-azure p-3 pl-10 bg-white transition-all text-oliver-black"
                                             required
                                         />
                                     </div>
                                      {isNewVersion && (
-                                        <p className="text-xs text-active-blue mt-2 p-2 bg-info-light rounded-[10px] flex items-center gap-2">
-                                            <span className="w-1.5 h-1.5 rounded-full bg-active-blue"></span>
+                                        <p className="text-xs text-oliver-azure mt-2 p-2 bg-oliver-grey rounded-[10px] flex items-center gap-2">
+                                            <span className="w-1.5 h-1.5 rounded-full bg-oliver-azure"></span>
                                             A proof with this name already exists. This will be uploaded as a new version.
                                         </p>
                                     )}
@@ -798,60 +798,60 @@ const UploadProofModal: React.FC<{
                                 {/* Dropdowns Grid */}
                                 <div className="grid grid-cols-1 gap-x-6 gap-y-6 sm:grid-cols-2">
                                     <div>
-                                        <label htmlFor="proof-channel" className="block text-sm font-bold text-primary-blue mb-2">Channel</label>
+                                        <label htmlFor="proof-channel" className="block text-sm font-bold text-oliver-black mb-2">Channel</label>
                                         <div className="relative">
                                             <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
-                                                <ChannelIcon className="h-5 w-5 text-grey-700" />
+                                                <ChannelIcon className="h-5 w-5 text-oliver-black/60" />
                                             </div>
                                             <select
                                                 id="proof-channel"
                                                 value={channel}
                                                 onChange={(e) => setChannel(e.target.value)}
                                                 disabled={isLoading}
-                                                className="w-full rounded-[10px] border-2 border-grey-700 shadow-sm focus:border-active-blue focus:ring-active-blue p-3 pl-10 bg-white transition-all text-black-title appearance-none"
+                                                className="w-full rounded-[10px] border-2 border-oliver-azure shadow-sm focus:border-oliver-azure focus:ring-oliver-azure p-3 pl-10 bg-white transition-all text-oliver-black appearance-none"
                                                 required
                                             >
                                                 <option value="" disabled>Select Channel</option>
                                                 {availableChannels.map(opt => <option key={opt} value={opt}>{opt}</option>)}
                                             </select>
-                                            <div className="pointer-events-none absolute inset-y-0 right-0 flex items-center px-3 text-grey-700">
+                                            <div className="pointer-events-none absolute inset-y-0 right-0 flex items-center px-3 text-oliver-black/60">
                                                 <ChevronDownIcon className="h-4 w-4" />
                                             </div>
                                         </div>
                                     </div>
 
                                     <div>
-                                        <label htmlFor="proof-sub-channel" className="block text-sm font-bold text-primary-blue mb-2">Sub-Channel</label>
+                                        <label htmlFor="proof-sub-channel" className="block text-sm font-bold text-oliver-black mb-2">Sub-Channel</label>
                                         <div className="relative">
                                             <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
-                                                <TagIcon className="h-5 w-5 text-grey-700" />
+                                                <TagIcon className="h-5 w-5 text-oliver-black/60" />
                                             </div>
                                             <select
                                                 id="proof-sub-channel"
                                                 value={subChannel}
                                                 onChange={(e) => setSubChannel(e.target.value)}
                                                 disabled={isLoading || !channel}
-                                                className="w-full rounded-[10px] border-2 border-grey-700 shadow-sm focus:border-active-blue focus:ring-active-blue p-3 pl-10 bg-white transition-all text-black-title appearance-none disabled:bg-grey-100 disabled:text-grey-700"
+                                                className="w-full rounded-[10px] border-2 border-oliver-azure shadow-sm focus:border-oliver-azure focus:ring-oliver-azure p-3 pl-10 bg-white transition-all text-oliver-black appearance-none disabled:bg-oliver-grey disabled:text-oliver-black/60"
                                                 required
                                             >
                                                 <option value="" disabled>Select Sub-Channel</option>
                                                 {availableSubChannels.map(opt => <option key={opt} value={opt}>{opt}</option>)}
                                             </select>
-                                            <div className="pointer-events-none absolute inset-y-0 right-0 flex items-center px-3 text-grey-700">
+                                            <div className="pointer-events-none absolute inset-y-0 right-0 flex items-center px-3 text-oliver-black/60">
                                                 <ChevronDownIcon className="h-4 w-4" />
                                             </div>
                                         </div>
                                     </div>
 
                                     <div className="sm:col-span-2">
-                                        <label htmlFor="proof-type" className="block text-sm font-bold text-primary-blue mb-2">Proof Type</label>
+                                        <label htmlFor="proof-type" className="block text-sm font-bold text-oliver-black mb-2">Proof Type</label>
                                         <div className="relative">
                                             <select
                                                 id="proof-type"
                                                 value={proofType}
                                                 onChange={(e) => setProofType(e.target.value)}
                                                 disabled={isLoading || !subChannel || availableProofTypes.length === 0}
-                                                className="w-full rounded-[10px] border-2 border-grey-700 shadow-sm focus:border-active-blue focus:ring-active-blue p-3 bg-white transition-all text-black-title appearance-none disabled:bg-grey-100 disabled:text-grey-700"
+                                                className="w-full rounded-[10px] border-2 border-oliver-azure shadow-sm focus:border-oliver-azure focus:ring-oliver-azure p-3 bg-white transition-all text-oliver-black appearance-none disabled:bg-oliver-grey disabled:text-oliver-black/60"
                                                 required={showProofType}
                                             >
                                                 <option value="" disabled>
@@ -864,7 +864,7 @@ const UploadProofModal: React.FC<{
                                                 </option>
                                                 {availableProofTypes.map(opt => <option key={opt} value={opt}>{opt}</option>)}
                                             </select>
-                                            <div className="pointer-events-none absolute inset-y-0 right-0 flex items-center px-3 text-grey-700">
+                                            <div className="pointer-events-none absolute inset-y-0 right-0 flex items-center px-3 text-oliver-black/60">
                                                 <ChevronDownIcon className="h-4 w-4" />
                                             </div>
                                         </div>
@@ -873,7 +873,7 @@ const UploadProofModal: React.FC<{
 
                                 {/* Drag & Drop Zone */}
                                 <div>
-                                    <label className="block text-sm font-bold text-primary-blue mb-2">Proof File</label>
+                                    <label className="block text-sm font-bold text-oliver-black mb-2">Proof File</label>
                                     <div
                                         onDragOver={handleDragOver}
                                         onDrop={handleDrop}
@@ -895,23 +895,23 @@ const UploadProofModal: React.FC<{
                                         <div className="text-center space-y-2 pointer-events-none">
                                             {!file ? (
                                                 <>
-                                                    <div className="mx-auto h-16 w-16 bg-grey-100 text-grey-700 rounded-full flex items-center justify-center group-hover:scale-110 group-hover:text-success group-hover:bg-success-light transition-all duration-300">
+                                                    <div className="mx-auto h-16 w-16 bg-oliver-grey text-oliver-black/60 rounded-full flex items-center justify-center group-hover:scale-110 group-hover:text-success group-hover:bg-success-light transition-all duration-300">
                                                         <UploadIcon className="h-8 w-8" />
                                                     </div>
-                                                    <div className="text-sm text-black-title">
+                                                    <div className="text-sm text-oliver-black">
                                                         <span className="font-bold text-success">Click to upload</span> or drag and drop
                                                     </div>
-                                                    <p className="text-xs text-grey-700">SVG, PNG, JPG or GIF (max. 800x400px)</p>
+                                                    <p className="text-xs text-oliver-black/60">SVG, PNG, JPG or GIF (max. 800x400px)</p>
                                                 </>
                                             ) : (
                                                 <>
                                                     <div className="mx-auto h-16 w-16 bg-success-light text-success rounded-full flex items-center justify-center scale-110 shadow-sm">
                                                         <CheckCircleIcon className="h-8 w-8" />
                                                     </div>
-                                                    <div className="text-sm font-bold text-black-title truncate max-w-xs mx-auto">
+                                                    <div className="text-sm font-bold text-oliver-black truncate max-w-xs mx-auto">
                                                         {file.name}
                                                     </div>
-                                                    <p className="text-xs text-grey-900">Ready for analysis</p>
+                                                    <p className="text-xs text-oliver-black">Ready for analysis</p>
                                                 </>
                                             )}
                                         </div>
@@ -921,19 +921,19 @@ const UploadProofModal: React.FC<{
                         </div>
 
                         {/* Footer */}
-                        <div className="bg-grey-100 px-4 py-4 sm:px-6 border-t border-grey-300 flex flex-col-reverse sm:flex-row sm:justify-end gap-3">
+                        <div className="bg-oliver-grey px-4 py-4 sm:px-6 border-t border-grey-300 flex flex-col-reverse sm:flex-row sm:justify-end gap-3">
                              <button
                                 type="button"
                                 onClick={onClose}
                                 disabled={isLoading}
-                                className="w-full sm:w-auto border-2 border-active-blue text-active-blue font-semibold py-2.5 px-6 rounded-full hover:bg-active-blue hover:text-white transition-colors duration-300 disabled:opacity-50"
+                                className="w-full sm:w-auto border-2 border-oliver-azure text-oliver-azure font-semibold py-2.5 px-6 rounded-full hover:bg-oliver-azure hover:text-white transition-colors duration-300 disabled:opacity-50"
                             >
                                 Cancel
                             </button>
                             <button
                                 type="submit"
                                 disabled={isSubmitDisabled}
-                                className="w-full sm:w-auto flex items-center justify-center bg-active-blue text-white font-bold py-2.5 px-6 rounded-full hover:bg-active-blue/90 shadow-lg shadow-active-blue/20 transition-all duration-300 disabled:bg-grey-300 disabled:text-grey-700 disabled:shadow-none disabled:cursor-not-allowed"
+                                className="w-full sm:w-auto flex items-center justify-center bg-oliver-azure text-white font-bold py-2.5 px-6 rounded-full hover:bg-oliver-azure/90 shadow-lg shadow-oliver-azure/20 transition-all duration-300 disabled:bg-gray-300 disabled:text-oliver-black/60 disabled:shadow-none disabled:cursor-not-allowed"
                             >
                                 {isLoading ? (
                                     <>
@@ -967,11 +967,11 @@ const LoadingCell: React.FC<{ progress: { completed: number; total: number } }>
         <div className="flex flex-col items-center justify-center h-full px-2 text-center w-full">
             <div className="w-full bg-grey-300 rounded-full h-1.5 mb-1.5">
                 <div
-                    className="bg-active-blue h-1.5 rounded-full"
+                    className="bg-oliver-azure h-1.5 rounded-full"
                     style={{ width: `${percent}%`, transition: 'width 0.3s ease-in-out' }}
                 ></div>
             </div>
-            <span className="text-xs text-black-title truncate w-full">{statusText} ({percent}%)</span>
+            <span className="text-xs text-oliver-black truncate w-full">{statusText} ({percent}%)</span>
         </div>
     );
 };
@@ -995,15 +995,15 @@ const DeleteConfirmationModal: React.FC<{
                 className="bg-white rounded-[10px] shadow-xl p-6 sm:p-8 w-full max-w-md transform transition-all"
                 onClick={e => e.stopPropagation()}
             >
-                <h3 className="text-xl font-bold text-primary-blue">Confirm Deletion</h3>
-                <p className="text-black-title my-4">
+                <h3 className="text-xl font-bold text-oliver-black">Confirm Deletion</h3>
+                <p className="text-oliver-black my-4">
                     Are you sure you want to permanently delete the proof "{proofName}"? This action cannot be undone.
                 </p>
                 <div className="mt-6 flex justify-end gap-3">
                     <button
                         type="button"
                         onClick={onClose}
-                        className="border-2 border-active-blue text-active-blue font-semibold py-2 px-6 rounded-full hover:bg-active-blue hover:text-white transition-colors"
+                        className="border-2 border-oliver-azure text-oliver-azure font-semibold py-2 px-6 rounded-full hover:bg-oliver-azure hover:text-white transition-colors"
                     >
                         Cancel
                     </button>
@@ -1053,8 +1053,8 @@ const AnalysisErrorModal: React.FC<{
                         <ExclamationTriangleIcon className="h-6 w-6 text-red-600" />
                     </div>
                     <div>
-                        <h3 className="text-xl font-bold text-primary-blue">Analysis Error</h3>
-                        <p className="text-sm text-grey-700 mt-0.5">{proofName}</p>
+                        <h3 className="text-xl font-bold text-oliver-black">Analysis Error</h3>
+                        <p className="text-sm text-oliver-black/60 mt-0.5">{proofName}</p>
                     </div>
                 </div>
 
@@ -1067,11 +1067,11 @@ const AnalysisErrorModal: React.FC<{
 
                 {failedAgents.length > 0 && (
                     <div className="space-y-3">
-                        <h4 className="text-sm font-semibold text-grey-700">Agent Details</h4>
+                        <h4 className="text-sm font-semibold text-oliver-black/60">Agent Details</h4>
                         {failedAgents.map(agent => (
-                            <div key={agent.label} className="bg-grey-100 rounded-lg p-3">
-                                <p className="text-sm font-medium text-primary-blue">{agent.label}</p>
-                                <p className="text-sm text-grey-700 mt-1">{agent.review.feedback}</p>
+                            <div key={agent.label} className="bg-oliver-grey rounded-lg p-3">
+                                <p className="text-sm font-medium text-oliver-black">{agent.label}</p>
+                                <p className="text-sm text-oliver-black/60 mt-1">{agent.review.feedback}</p>
                             </div>
                         ))}
                     </div>
@@ -1081,7 +1081,7 @@ const AnalysisErrorModal: React.FC<{
                     <button
                         type="button"
                         onClick={onClose}
-                        className="border-2 border-active-blue text-active-blue font-semibold py-2 px-6 rounded-full hover:bg-active-blue hover:text-white transition-colors"
+                        className="border-2 border-oliver-azure text-oliver-azure font-semibold py-2 px-6 rounded-full hover:bg-oliver-azure hover:text-white transition-colors"
                     >
                         Close
                     </button>
@@ -1113,8 +1113,8 @@ const CampaignDeleteConfirmationModal: React.FC<{
                 className="bg-white rounded-[10px] shadow-xl p-6 sm:p-8 w-full max-w-md transform transition-all"
                 onClick={e => e.stopPropagation()}
             >
-                <h3 className="text-xl font-bold text-primary-blue">Confirm Deletion</h3>
-                <p className="text-black-title my-4">
+                <h3 className="text-xl font-bold text-oliver-black">Confirm Deletion</h3>
+                <p className="text-oliver-black my-4">
                     {isBulk ? (
                         <>Are you sure you want to permanently delete <strong>{selectedCount} selected campaign{selectedCount !== 1 ? 's' : ''}</strong>? All associated proofs will also be deleted. This action cannot be undone.</>
                     ) : (
@@ -1125,7 +1125,7 @@ const CampaignDeleteConfirmationModal: React.FC<{
                     <button
                         type="button"
                         onClick={onClose}
-                        className="border-2 border-active-blue text-active-blue font-semibold py-2 px-6 rounded-full hover:bg-active-blue hover:text-white transition-colors"
+                        className="border-2 border-oliver-azure text-oliver-azure font-semibold py-2 px-6 rounded-full hover:bg-oliver-azure hover:text-white transition-colors"
                     >
                         Cancel
                     </button>
@@ -1282,15 +1282,15 @@ const CampaignDetail: React.FC<{
                 <div className="flex items-center gap-4">
                     <button
                         onClick={onBack}
-                        className="p-2 text-grey-700 rounded-full hover:bg-grey-300 hover:text-primary-blue transition-colors duration-200"
+                        className="p-2 text-oliver-black/60 rounded-full hover:bg-grey-300 hover:text-oliver-black transition-colors duration-200"
                         title="Back to campaigns"
                         aria-label="Back to campaigns list"
                     >
                         <ArrowLeftIcon className="h-6 w-6" />
                     </button>
                     <div>
-                        <h1 className="text-3xl lg:text-4xl font-semibold text-primary-blue">{campaignName}</h1>
-                        <p className="text-base lg:text-lg text-grey-900 mt-1">Proof overview and compliance status.</p>
+                        <h1 className="text-3xl lg:text-4xl font-semibold text-oliver-black">{campaignName}</h1>
+                        <p className="text-base lg:text-lg text-oliver-black mt-1">Proof overview and compliance status.</p>
                     </div>
                 </div>
             </header>
@@ -1319,7 +1319,7 @@ const CampaignDetail: React.FC<{
                     <button
                         onClick={() => handleExportPDF(proofs.filter(p => p.status === 'completed'), `${campaignName} - Campaign Report`)}
                         disabled={isExporting || proofs.filter(p => p.status === 'completed').length === 0}
-                        className="flex items-center gap-2 bg-white text-active-blue font-semibold py-2 px-4 rounded-full border-2 border-active-blue hover:bg-active-blue hover:text-white transition-colors duration-300 disabled:bg-grey-300 disabled:text-grey-700 disabled:border-grey-300 disabled:cursor-wait"
+                        className="flex items-center gap-2 bg-white text-oliver-azure font-semibold py-2 px-4 rounded-full border-2 border-oliver-azure hover:bg-oliver-azure hover:text-white transition-colors duration-300 disabled:bg-gray-300 disabled:text-oliver-black/60 disabled:border-grey-300 disabled:cursor-wait"
                     >
                         {isExporting ? <SpinnerIcon className="h-5 w-5 custom-spinner" /> : <ExportIcon className="h-5 w-5" />}
                         {isExporting ? 'Exporting...' : 'Export Campaign Report'}
@@ -1327,7 +1327,7 @@ const CampaignDetail: React.FC<{
                     {!readOnly && (
                         <button
                             onClick={() => setIsUploadFormVisible(true)}
-                            className="flex items-center gap-2 bg-active-blue text-white font-semibold py-2 px-4 rounded-full hover:bg-active-blue/90 transition-colors duration-300"
+                            className="flex items-center gap-2 bg-oliver-azure text-white font-semibold py-2 px-4 rounded-full hover:bg-oliver-azure/90 transition-colors duration-300"
                         >
                             <PlusIcon className="h-5 w-5" />
                             Upload New Proof
@@ -1338,14 +1338,14 @@ const CampaignDetail: React.FC<{
                 <div className="bg-white rounded-[10px] shadow-md overflow-hidden border border-grey-300">
                     <div className="overflow-x-auto">
                         <table className="min-w-full divide-y divide-grey-300">
-                            <thead className="bg-lime">
+                            <thead className="bg-oliver-sky">
                                 <tr>
-                                    <th scope="col" className="px-6 py-3 text-left text-xs font-bold text-black-title uppercase tracking-wider">Proof Name</th>
-                                    <th scope="col" className="px-6 py-3 text-left text-xs font-bold text-black-title uppercase tracking-wider">Workfront #</th>
-                                    <th scope="col" className="px-6 py-3 text-left text-xs font-bold text-black-title uppercase tracking-wider">Channel</th>
-                                    <th scope="col" className="px-6 py-3 text-left text-xs font-bold text-black-title uppercase tracking-wider">Sub-Channel</th>
-                                    <th scope="col" className="px-6 py-3 text-left text-xs font-bold text-black-title uppercase tracking-wider">Proof Type</th>
-                                    <th scope="col" className="px-6 py-3 text-left text-xs font-bold text-black-title uppercase tracking-wider">Overall Status</th>
+                                    <th scope="col" className="px-6 py-3 text-left text-xs font-bold text-oliver-black uppercase tracking-wider">Proof Name</th>
+                                    <th scope="col" className="px-6 py-3 text-left text-xs font-bold text-oliver-black uppercase tracking-wider">Workfront #</th>
+                                    <th scope="col" className="px-6 py-3 text-left text-xs font-bold text-oliver-black uppercase tracking-wider">Channel</th>
+                                    <th scope="col" className="px-6 py-3 text-left text-xs font-bold text-oliver-black uppercase tracking-wider">Sub-Channel</th>
+                                    <th scope="col" className="px-6 py-3 text-left text-xs font-bold text-oliver-black uppercase tracking-wider">Proof Type</th>
+                                    <th scope="col" className="px-6 py-3 text-left text-xs font-bold text-oliver-black uppercase tracking-wider">Overall Status</th>
                                     <th scope="col" className="relative px-6 py-3"><span className="sr-only">Actions</span></th>
                                 </tr>
                             </thead>
@@ -1353,18 +1353,18 @@ const CampaignDetail: React.FC<{
                                 {proofs.map((proof, index) => {
                                     if (proof.status === 'analyzing') {
                                         return (
-                                            <tr key={proof.tempId} className="bg-grey-100 opacity-80">
-                                                <td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-primary-blue">{proof.proofName}</td>
-                                                <td className="px-6 py-4 whitespace-nowrap text-sm text-grey-700 italic">Pending</td>
-                                                <td className="px-6 py-4 whitespace-nowrap text-sm text-primary-blue">{proof.channel}</td>
-                                                <td className="px-6 py-4 whitespace-nowrap text-sm text-primary-blue">{proof.subChannel}</td>
-                                                <td className="px-6 py-4 whitespace-nowrap text-sm text-primary-blue">{proof.proofType || 'N/A'}</td>
+                                            <tr key={proof.tempId} className="bg-oliver-grey opacity-80">
+                                                <td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-oliver-black">{proof.proofName}</td>
+                                                <td className="px-6 py-4 whitespace-nowrap text-sm text-oliver-black/60 italic">Pending</td>
+                                                <td className="px-6 py-4 whitespace-nowrap text-sm text-oliver-black">{proof.channel}</td>
+                                                <td className="px-6 py-4 whitespace-nowrap text-sm text-oliver-black">{proof.subChannel}</td>
+                                                <td className="px-6 py-4 whitespace-nowrap text-sm text-oliver-black">{proof.proofType || 'N/A'}</td>
                                                 <td className="px-6 py-4" colSpan={2}>
                                                     {proof.analysisProgress ?
                                                         <LoadingCell progress={proof.analysisProgress} /> :
                                                         <div className="flex justify-center items-center h-full">
-                                                            <SpinnerIcon className="h-5 w-5 text-active-blue custom-spinner" />
-                                                            <span className="ml-2 text-sm text-grey-900">Preparing...</span>
+                                                            <SpinnerIcon className="h-5 w-5 text-oliver-azure custom-spinner" />
+                                                            <span className="ml-2 text-sm text-oliver-black">Preparing...</span>
                                                         </div>
                                                     }
                                                 </td>
@@ -1375,11 +1375,11 @@ const CampaignDetail: React.FC<{
                                     if (proof.status === 'error') {
                                         return (
                                             <tr key={proof.tempId} className="bg-error-light">
-                                                <td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-primary-blue">{proof.proofName}</td>
-                                                <td className="px-6 py-4 whitespace-nowrap text-sm text-grey-700 italic">Failed</td>
-                                                <td className="px-6 py-4 whitespace-nowrap text-sm text-primary-blue">{proof.channel}</td>
-                                                <td className="px-6 py-4 whitespace-nowrap text-sm text-primary-blue">{proof.subChannel}</td>
-                                                <td className="px-6 py-4 whitespace-nowrap text-sm text-primary-blue">{proof.proofType || 'N/A'}</td>
+                                                <td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-oliver-black">{proof.proofName}</td>
+                                                <td className="px-6 py-4 whitespace-nowrap text-sm text-oliver-black/60 italic">Failed</td>
+                                                <td className="px-6 py-4 whitespace-nowrap text-sm text-oliver-black">{proof.channel}</td>
+                                                <td className="px-6 py-4 whitespace-nowrap text-sm text-oliver-black">{proof.subChannel}</td>
+                                                <td className="px-6 py-4 whitespace-nowrap text-sm text-oliver-black">{proof.proofType || 'N/A'}</td>
                                                 <td className="px-6 py-4 whitespace-nowrap text-sm text-error font-semibold" colSpan={2}>
                                                     <div className="flex items-center justify-between">
                                                         <button
@@ -1390,7 +1390,7 @@ const CampaignDetail: React.FC<{
                                                         </button>
                                                         <button
                                                             onClick={() => onRetryAnalysis(campaignName, proof.tempId || proof._id)}
-                                                            className="flex items-center gap-1.5 text-xs font-semibold text-active-blue hover:text-primary-blue whitespace-nowrap px-3 py-1.5 rounded-full bg-active-blue/10 hover:bg-active-blue/20 transition-colors"
+                                                            className="flex items-center gap-1.5 text-xs font-semibold text-oliver-azure hover:text-oliver-black whitespace-nowrap px-3 py-1.5 rounded-full bg-oliver-azure/10 hover:bg-oliver-azure/20 transition-colors"
                                                         >
                                                             <ArrowPathIcon className="h-4 w-4" />
                                                             Retry
@@ -1410,21 +1410,21 @@ const CampaignDetail: React.FC<{
                                     return (
                                         <tr
                                             key={latestVersion.workfrontId || index}
-                                            className={`${index % 2 === 0 ? 'bg-white' : 'bg-grey-100'} ${isClickable ? "hover:bg-info-light cursor-pointer" : ""}`}
+                                            className={`${index % 2 === 0 ? 'bg-white' : 'bg-oliver-grey'} ${isClickable ? "hover:bg-oliver-grey cursor-pointer" : ""}`}
                                             onClick={() => isClickable && onSelectProof(proof)}
                                         >
-                                            <td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-primary-blue">
+                                            <td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-oliver-black">
                                                 {proof.proofName}
                                                 {isVersioned && (
-                                                    <span className="ml-2 bg-grey-300 text-black-title text-xs font-bold px-2 py-0.5 rounded-full">
+                                                    <span className="ml-2 bg-grey-300 text-oliver-black text-xs font-bold px-2 py-0.5 rounded-full">
                                                         V{latestVersion.version}
                                                     </span>
                                                 )}
                                             </td>
-                                            <td className="px-6 py-4 whitespace-nowrap text-sm text-primary-blue">{latestVersion.workfrontId}</td>
-                                            <td className="px-6 py-4 whitespace-nowrap text-sm text-primary-blue">{proof.channel}</td>
-                                            <td className="px-6 py-4 whitespace-nowrap text-sm text-primary-blue">{proof.subChannel}</td>
-                                            <td className="px-6 py-4 whitespace-nowrap text-sm text-primary-blue">{proof.proofType || 'N/A'}</td>
+                                            <td className="px-6 py-4 whitespace-nowrap text-sm text-oliver-black">{latestVersion.workfrontId}</td>
+                                            <td className="px-6 py-4 whitespace-nowrap text-sm text-oliver-black">{proof.channel}</td>
+                                            <td className="px-6 py-4 whitespace-nowrap text-sm text-oliver-black">{proof.subChannel}</td>
+                                            <td className="px-6 py-4 whitespace-nowrap text-sm text-oliver-black">{proof.proofType || 'N/A'}</td>
                                             <td className="px-6 py-4 whitespace-nowrap text-sm">
                                                 <OverallStatusBadge status={latestVersion.overallStatus} />
                                             </td>
@@ -1433,7 +1433,7 @@ const CampaignDetail: React.FC<{
                                                     {!readOnly && (
                                                         <button
                                                             onClick={(e) => handleNewVersionClick(e, proof)}
-                                                            className="p-2 text-grey-700 rounded-full hover:bg-info-light hover:text-active-blue transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+                                                            className="p-2 text-oliver-black/60 rounded-full hover:bg-oliver-grey hover:text-oliver-azure transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
                                                             title={`Upload new version for ${proof.proofName}`}
                                                             disabled={isUploading || isExporting}
                                                         >
@@ -1446,7 +1446,7 @@ const CampaignDetail: React.FC<{
                                                             handleExportPDF([proof], `${campaignName} - ${proof.proofName} Report`);
                                                         }}
                                                         disabled={isExporting}
-                                                        className="p-2 text-grey-700 rounded-full hover:bg-success-light hover:text-success transition-colors disabled:opacity-50 disabled:cursor-wait"
+                                                        className="p-2 text-oliver-black/60 rounded-full hover:bg-success-light hover:text-success transition-colors disabled:opacity-50 disabled:cursor-wait"
                                                         title={`Export PDF for ${proof.proofName}`}
                                                     >
                                                         <PDFIcon className="h-5 w-5" />
@@ -1458,7 +1458,7 @@ const CampaignDetail: React.FC<{
                                                                 setProofToDelete(proof);
                                                             }}
                                                             disabled={isExporting}
-                                                            className="p-2 text-grey-700 rounded-full hover:bg-error-light hover:text-error transition-colors disabled:opacity-50"
+                                                            className="p-2 text-oliver-black/60 rounded-full hover:bg-error-light hover:text-error transition-colors disabled:opacity-50"
                                                             title={`Delete ${proof.proofName}`}
                                                         >
                                                             <TrashIcon className="h-5 w-5" />
@@ -1676,15 +1676,15 @@ const ProofDetailView: React.FC<{
                 <div className="flex items-center gap-4">
                     <button
                         onClick={onBack}
-                        className="p-2 text-grey-700 rounded-full hover:bg-grey-300 hover:text-primary-blue transition-colors duration-200"
+                        className="p-2 text-oliver-black/60 rounded-full hover:bg-grey-300 hover:text-oliver-black transition-colors duration-200"
                         title="Back to campaign details"
                         aria-label="Back to campaign details"
                     >
                         <ArrowLeftIcon className="h-6 w-6" />
                     </button>
                     <div>
-                        <h1 className="text-3xl lg:text-4xl font-semibold text-primary-blue">{proof.proofName}</h1>
-                        <div className="flex items-center gap-2 mt-2 text-sm text-grey-700 font-medium">
+                        <h1 className="text-3xl lg:text-4xl font-semibold text-oliver-black">{proof.proofName}</h1>
+                        <div className="flex items-center gap-2 mt-2 text-sm text-oliver-black/60 font-medium">
                             <span>{proof.channel}</span>
                             <span className="text-grey-300">&bull;</span>
                             <span>{proof.subChannel}</span>
@@ -1703,7 +1703,7 @@ const ProofDetailView: React.FC<{
                 <div className="lg:col-span-1">
                     <div className="sticky top-8 flex flex-col gap-y-6">
                         <div>
-                             <h2 className="text-2xl font-semibold text-primary-blue mb-4">
+                             <h2 className="text-2xl font-semibold text-oliver-black mb-4">
                                 Proof Preview
                             </h2>
                             <ProofPreview
@@ -1715,14 +1715,14 @@ const ProofDetailView: React.FC<{
 
                         <div>
                             <div className="flex items-center justify-between mb-3 gap-2">
-                                <h3 className="text-xl font-semibold text-primary-blue flex items-center gap-2">
-                                    <HistoryIcon className="h-6 w-6 text-active-blue"/>
+                                <h3 className="text-xl font-semibold text-oliver-black flex items-center gap-2">
+                                    <HistoryIcon className="h-6 w-6 text-oliver-azure"/>
                                     Version History
                                 </h3>
                                 <div className="flex items-center gap-2">
                                     <button
                                         onClick={handleDownload}
-                                        className="flex items-center gap-2 text-sm bg-active-blue text-white font-semibold py-1.5 px-3 rounded-full border border-transparent hover:bg-active-blue/90 transition-colors duration-200"
+                                        className="flex items-center gap-2 text-sm bg-oliver-azure text-white font-semibold py-1.5 px-3 rounded-full border border-transparent hover:bg-oliver-azure/90 transition-colors duration-200"
                                         title={`Download Version ${selectedVersion.version}`}
                                     >
                                         <DownloadIcon className="h-4 w-4" />
@@ -1731,7 +1731,7 @@ const ProofDetailView: React.FC<{
                                     <button
                                         onClick={handleDownloadReport}
                                         disabled={isExporting}
-                                        className="flex items-center gap-2 text-sm bg-white text-active-blue font-semibold py-1.5 px-3 rounded-full border-2 border-active-blue hover:bg-active-blue hover:text-white transition-colors duration-200 disabled:bg-grey-300 disabled:text-grey-700 disabled:border-grey-300 disabled:cursor-wait"
+                                        className="flex items-center gap-2 text-sm bg-white text-oliver-azure font-semibold py-1.5 px-3 rounded-full border-2 border-oliver-azure hover:bg-oliver-azure hover:text-white transition-colors duration-200 disabled:bg-gray-300 disabled:text-oliver-black/60 disabled:border-grey-300 disabled:cursor-wait"
                                         title={`Download Report for Version ${selectedVersion.version}`}
                                     >
                                         {isExporting ? (
@@ -1750,7 +1750,7 @@ const ProofDetailView: React.FC<{
                                         <button
                                             onClick={handleUploadClick}
                                             disabled={isUploadingNewVersion}
-                                            className="flex items-center gap-2 text-sm bg-white text-active-blue font-semibold py-1.5 px-3 rounded-full border-2 border-active-blue hover:bg-active-blue hover:text-white transition-colors duration-200 disabled:bg-grey-300 disabled:text-grey-700 disabled:border-grey-300 disabled:cursor-wait"
+                                            className="flex items-center gap-2 text-sm bg-white text-oliver-azure font-semibold py-1.5 px-3 rounded-full border-2 border-oliver-azure hover:bg-oliver-azure hover:text-white transition-colors duration-200 disabled:bg-gray-300 disabled:text-oliver-black/60 disabled:border-grey-300 disabled:cursor-wait"
                                             title="Upload a new version of this proof"
                                         >
                                             {isUploadingNewVersion ? (
@@ -1785,15 +1785,15 @@ const ProofDetailView: React.FC<{
                                             onClick={() => setSelectedVersionIndex(index)}
                                             className={`w-full text-left p-3 rounded-[10px] border-2 transition-all ${
                                                 isActive
-                                                ? 'bg-info-light border-active-blue shadow-sm'
-                                                : 'bg-white border-grey-300 hover:border-active-blue/50 hover:bg-grey-100'
+                                                ? 'bg-oliver-grey border-oliver-azure shadow-sm'
+                                                : 'bg-white border-grey-300 hover:border-oliver-azure/50 hover:bg-oliver-grey'
                                             }`}
                                         >
                                             <div className="flex justify-between items-center">
-                                                <p className={`font-bold ${isActive ? 'text-primary-blue' : 'text-black-title'}`}>Version {version.version}</p>
-                                                <p className="text-xs text-grey-700">{version.timestamp}</p>
+                                                <p className={`font-bold ${isActive ? 'text-oliver-black' : 'text-oliver-black'}`}>Version {version.version}</p>
+                                                <p className="text-xs text-oliver-black/60">{version.timestamp}</p>
                                             </div>
-                                            <p className="text-sm text-grey-900 mt-1">Workfront ID: {version.workfrontId}</p>
+                                            <p className="text-sm text-oliver-black mt-1">Workfront ID: {version.workfrontId}</p>
                                         </button>
                                     );
                                 })}
@@ -1806,8 +1806,8 @@ const ProofDetailView: React.FC<{
                         <div className="mb-6 bg-warning-light border border-warning rounded-[10px] p-4 flex items-start gap-3">
                             <ExclamationTriangleIcon className="w-5 h-5 text-warning flex-shrink-0 mt-0.5" />
                             <div>
-                                <p className="font-semibold text-black-title">Identical File Detected</p>
-                                <p className="text-sm text-grey-900 mt-1">
+                                <p className="font-semibold text-oliver-black">Identical File Detected</p>
+                                <p className="text-sm text-oliver-black mt-1">
                                     This file is exactly the same as the previous version.
                                     The analysis results shown are from the new analysis,
                                     but no changes were made to the creative.
diff --git a/frontend/components/ChecksOverview.tsx b/frontend/components/ChecksOverview.tsx
index 7c4ee17..e02fe4e 100755
--- a/frontend/components/ChecksOverview.tsx
+++ b/frontend/components/ChecksOverview.tsx
@@ -46,14 +46,14 @@ export const ChecksOverview: React.FC = () => {
             <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
                 {/* Header */}
                 <div className="max-w-3xl mx-auto text-center mb-12">
-                    <div className="inline-flex items-center px-4 py-1.5 rounded-full bg-white border border-lime text-primary-blue text-xs font-bold uppercase tracking-widest mb-4 shadow-sm">
+                    <div className="inline-flex items-center px-4 py-1.5 rounded-full bg-white border border-oliver-sky text-oliver-black text-xs font-bold uppercase tracking-widest mb-4 shadow-sm">
                         <span className="w-2 h-2 rounded-full bg-success mr-2 animate-pulse"></span>
                         Intelligent Workflow
                     </div>
-                    <h2 className="text-3xl md:text-4xl font-semibold text-primary-blue tracking-tight mb-4">
+                    <h2 className="text-3xl md:text-4xl font-semibold text-oliver-black tracking-tight mb-4">
                         Orchestrated by AI
                     </h2>
-                    <p className="text-lg text-black-title leading-relaxed">
+                    <p className="text-lg text-oliver-black leading-relaxed">
                         A central Lead Agent coordinates specialized experts to review every aspect of your content in parallel.
                     </p>
                 </div>
@@ -62,17 +62,17 @@ export const ChecksOverview: React.FC = () => {
 
                     {/* 1. LEAD AGENT CARD (Left) */}
                     <div className="w-full max-w-md lg:w-[380px] relative z-20 group/lead flex flex-col">
-                        <div className="flex-1 relative bg-primary-blue rounded-[20px] p-6 shadow-2xl shadow-primary-blue/20 border border-white/10 text-center transition-all duration-500 hover:-translate-y-2 hover:shadow-primary-blue/40 overflow-hidden flex flex-col items-center justify-center">
+                        <div className="flex-1 relative bg-oliver-black rounded-[20px] p-6 shadow-2xl shadow-oliver-black/20 border border-white/10 text-center transition-all duration-500 hover:-translate-y-2 hover:shadow-oliver-black/40 overflow-hidden flex flex-col items-center justify-center">
                             {/* Animated Gradient bg */}
                             <div className="absolute top-[-50%] left-[-50%] w-[200%] h-[200%] bg-gradient-to-b from-transparent via-white/5 to-transparent rotate-45 transition-transform duration-[3s] group-hover/lead:translate-y-10"></div>
 
                             <div className="relative z-10">
-                                <div className="h-20 w-20 mx-auto rounded-2xl bg-white/10 border border-white/20 backdrop-blur-md flex items-center justify-center mb-4 shadow-lg shadow-primary-blue/30 group-hover/lead:scale-110 transition-all duration-500">
+                                <div className="h-20 w-20 mx-auto rounded-2xl bg-white/10 border border-white/20 backdrop-blur-md flex items-center justify-center mb-4 shadow-lg shadow-oliver-black/30 group-hover/lead:scale-110 transition-all duration-500">
                                     <LeadAgentIcon className="h-10 w-10 text-white" />
                                 </div>
 
                                 <h3 className="text-2xl font-bold text-white mb-2">Lead Agent</h3>
-                                <p className="text-cyan-brand font-bold text-xs uppercase tracking-widest mb-4">Orchestrator</p>
+                                <p className="text-oliver-azure font-bold text-xs uppercase tracking-widest mb-4">Orchestrator</p>
                                 <p className="text-slate-300 text-sm leading-relaxed">
                                     Synthesises feedback & coordinates analysis across all specialist agents.
                                 </p>
@@ -80,11 +80,11 @@ export const ChecksOverview: React.FC = () => {
                         </div>
 
                         {/* Connection Node (Desktop) */}
-                         <div className="hidden lg:flex absolute top-1/2 -right-4 w-8 h-8 bg-primary-blue rounded-full border-4 border-lime/50 items-center justify-center z-30 -translate-y-1/2 shadow-sm translate-x-1/2">
+                         <div className="hidden lg:flex absolute top-1/2 -right-4 w-8 h-8 bg-oliver-black rounded-full border-4 border-oliver-sky/50 items-center justify-center z-30 -translate-y-1/2 shadow-sm translate-x-1/2">
                              <div className="w-2.5 h-2.5 bg-success rounded-full animate-pulse"></div>
                         </div>
                          {/* Connection Node (Mobile) */}
-                        <div className="lg:hidden absolute -bottom-4 left-1/2 w-8 h-8 bg-primary-blue rounded-full border-4 border-lime/50 items-center justify-center z-30 -translate-x-1/2 shadow-sm">
+                        <div className="lg:hidden absolute -bottom-4 left-1/2 w-8 h-8 bg-oliver-black rounded-full border-4 border-oliver-sky/50 items-center justify-center z-30 -translate-x-1/2 shadow-sm">
                              <div className="w-2.5 h-2.5 bg-success rounded-full animate-pulse"></div>
                         </div>
                     </div>
@@ -93,8 +93,8 @@ export const ChecksOverview: React.FC = () => {
                     <div className="hidden lg:block w-24 relative z-10 self-center h-48">
                          <svg className="absolute inset-0 w-full h-full overflow-visible" viewBox="0 0 100 200" preserveAspectRatio="none">
                             {/* Connecting paths */}
-                            <path d="M0,100 C50,100 50,30 100,30" fill="none" stroke="#C3FB5A" strokeWidth="2" strokeDasharray="6 6" />
-                            <path d="M0,100 C50,100 50,170 100,170" fill="none" stroke="#C3FB5A" strokeWidth="2" strokeDasharray="6 6" />
+                            <path d="M0,100 C50,100 50,30 100,30" fill="none" stroke="#5DF5EA" strokeWidth="2" strokeDasharray="6 6" />
+                            <path d="M0,100 C50,100 50,170 100,170" fill="none" stroke="#5DF5EA" strokeWidth="2" strokeDasharray="6 6" />
 
                             {/* Animated pulses on paths */}
                             <circle r="3" fill="#09821F">
@@ -107,7 +107,7 @@ export const ChecksOverview: React.FC = () => {
                     </div>
 
                     {/* Mobile Connector Spacer */}
-                    <div className="lg:hidden h-8 w-0.5 bg-lime my-3"></div>
+                    <div className="lg:hidden h-8 w-0.5 bg-oliver-sky my-3"></div>
 
                     {/* 3. SPECIALIST AGENTS (Right) */}
                     <div className="flex-1 grid grid-cols-1 md:grid-cols-2 gap-4 w-full max-w-4xl pl-0 lg:pl-4">
@@ -117,16 +117,16 @@ export const ChecksOverview: React.FC = () => {
                                 className="group relative rounded-[10px] p-5 border border-grey-300 shadow-sm transition-all duration-500 hover:shadow-xl hover:shadow-success/10 hover:-translate-y-2 hover:border-success overflow-hidden bg-white"
                             >
                                 {/* Base Gradient */}
-                                <div className="absolute inset-0 bg-gradient-to-br from-white via-white to-lime/10 opacity-100 transition-opacity duration-500 group-hover:opacity-0"></div>
+                                <div className="absolute inset-0 bg-gradient-to-br from-white via-white to-oliver-sky/10 opacity-100 transition-opacity duration-500 group-hover:opacity-0"></div>
 
                                 {/* Hover Gradient - Interactive Green */}
-                                <div className="absolute inset-0 bg-gradient-to-br from-white via-success-light to-lime/20 opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
+                                <div className="absolute inset-0 bg-gradient-to-br from-white via-success-light to-oliver-sky/20 opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
 
                                 {/* Animated Shine/Sweep Effect */}
                                 <div className="absolute top-[-50%] left-[-50%] w-[200%] h-[200%] bg-gradient-to-b from-transparent via-success/5 to-transparent rotate-45 translate-y-12 transition-transform duration-1000 group-hover:translate-y-[-10%] pointer-events-none"></div>
 
                                 {/* Glassy Highlight */}
-                                <div className="absolute -top-24 -right-24 w-48 h-48 bg-gradient-to-br from-lime/30 to-transparent rounded-full blur-2xl opacity-0 group-hover:opacity-100 transition-opacity duration-500 pointer-events-none"></div>
+                                <div className="absolute -top-24 -right-24 w-48 h-48 bg-gradient-to-br from-oliver-sky/30 to-transparent rounded-full blur-2xl opacity-0 group-hover:opacity-100 transition-opacity duration-500 pointer-events-none"></div>
 
                                 <div className="relative z-10 flex items-start gap-4">
                                     <div className={`flex-shrink-0 w-12 h-12 rounded-[10px] flex items-center justify-center transition-all duration-300 group-hover:scale-110 group-hover:shadow-md bg-success-light text-success group-hover:bg-success group-hover:text-white`}>
@@ -134,13 +134,13 @@ export const ChecksOverview: React.FC = () => {
                                     </div>
 
                                     <div className="flex-1">
-                                        <h4 className="text-base font-bold text-black-title group-hover:text-primary-blue transition-colors duration-300 mb-0.5">
+                                        <h4 className="text-base font-bold text-oliver-black group-hover:text-oliver-black transition-colors duration-300 mb-0.5">
                                             {agent.name}
                                         </h4>
-                                        <p className="text-[10px] font-extrabold text-grey-700 uppercase tracking-wider mb-1 group-hover:text-success transition-colors duration-300">
+                                        <p className="text-[10px] font-extrabold text-oliver-black/60 uppercase tracking-wider mb-1 group-hover:text-success transition-colors duration-300">
                                             {agent.role}
                                         </p>
-                                        <p className="text-xs text-black-title leading-relaxed group-hover:text-black-title">
+                                        <p className="text-xs text-oliver-black leading-relaxed group-hover:text-oliver-black">
                                             {agent.description}
                                         </p>
                                     </div>
diff --git a/frontend/components/CopyGenAI.tsx b/frontend/components/CopyGenAI.tsx
index a456293..058d6fd 100755
--- a/frontend/components/CopyGenAI.tsx
+++ b/frontend/components/CopyGenAI.tsx
@@ -24,11 +24,11 @@ export const CopyGenAI: React.FC = () => {
     };
 
     return (
-        <div className="flex h-full bg-grey-100">
+        <div className="flex h-full bg-oliver-grey">
             {/* Conversation History Sidebar */}
             <aside className="w-80 flex-shrink-0 bg-gray-100 border-r border-gray-200 flex flex-col">
                 <div className="p-4 border-b border-gray-200">
-                    <button className="w-full flex items-center justify-center gap-2 bg-active-blue text-white font-semibold py-2.5 px-4 rounded-lg hover:bg-primary-blue transition-colors duration-300">
+                    <button className="w-full flex items-center justify-center gap-2 bg-oliver-azure text-white font-semibold py-2.5 px-4 rounded-lg hover:bg-oliver-azure transition-colors duration-300">
                         <PlusIcon className="h-5 w-5" />
                         Start new conversation
                     </button>
@@ -41,7 +41,7 @@ export const CopyGenAI: React.FC = () => {
                                 onClick={() => setActiveConversationId(convo.id)}
                                 className={`w-full flex items-center gap-3 px-3 py-2.5 text-left text-sm font-medium rounded-md transition-colors duration-200 ${
                                     activeConversationId === convo.id
-                                        ? 'bg-active-blue/10 text-active-blue'
+                                        ? 'bg-oliver-azure/10 text-oliver-azure'
                                         : 'text-gray-700 hover:bg-gray-200'
                                 }`}
                             >
@@ -71,7 +71,7 @@ export const CopyGenAI: React.FC = () => {
                 {/* Message Display */}
                 <div className="flex-1 flex flex-col items-center justify-center p-8">
                     <div className="text-center">
-                         <h1 className="text-3xl font-bold text-primary-blue">CopyGenAI</h1>
+                         <h1 className="text-3xl font-bold text-oliver-black">CopyGenAI</h1>
                          <p className="mt-2 text-gray-600">How can I help you today?</p>
                     </div>
                 </div>
@@ -89,13 +89,13 @@ export const CopyGenAI: React.FC = () => {
                                         handleSendMessage(e);
                                     }
                                 }}
-                                className="w-full p-3 pr-14 border border-gray-300 rounded-lg resize-none focus:ring-2 focus:ring-active-blue focus:border-active-blue transition"
+                                className="w-full p-3 pr-14 border border-gray-300 rounded-lg resize-none focus:ring-2 focus:ring-oliver-azure focus:border-oliver-azure transition"
                                 placeholder="Type your message here..."
                                 rows={1}
                             />
                             <button
                                 type="submit"
-                                className="absolute right-3 top-1/2 -translate-y-1/2 p-2 rounded-full text-white bg-active-blue hover:bg-primary-blue disabled:bg-gray-400 transition-colors"
+                                className="absolute right-3 top-1/2 -translate-y-1/2 p-2 rounded-full text-white bg-oliver-azure hover:bg-oliver-azure disabled:bg-gray-400 transition-colors"
                                 disabled={!message.trim()}
                                 aria-label="Send message"
                             >
diff --git a/frontend/components/CreateCampaignModal.tsx b/frontend/components/CreateCampaignModal.tsx
index d089651..c77481f 100755
--- a/frontend/components/CreateCampaignModal.tsx
+++ b/frontend/components/CreateCampaignModal.tsx
@@ -93,31 +93,31 @@ export const CreateCampaignModal: React.FC<CreateCampaignModalProps> = ({ isOpen
                 onClick={(e) => e.stopPropagation()}
             >
                 <div className="flex justify-between items-center mb-6">
-                    <h2 className="text-2xl font-bold text-primary-blue">Create New Campaign</h2>
-                    <button onClick={onClose} className="p-1 rounded-full text-grey-700 hover:bg-grey-100 hover:text-black-title transition-colors">
+                    <h2 className="text-2xl font-bold text-oliver-black">Create New Campaign</h2>
+                    <button onClick={onClose} className="p-1 rounded-full text-oliver-black/60 hover:bg-oliver-grey hover:text-oliver-black transition-colors">
                         <XIcon className="h-6 w-6" />
                     </button>
                 </div>
                 <form onSubmit={handleSubmit} noValidate>
                     <div className="space-y-4">
                         <div>
-                            <label htmlFor="campaign-name" className="block text-sm font-medium text-black-title">Campaign Name</label>
+                            <label htmlFor="campaign-name" className="block text-sm font-medium text-oliver-black">Campaign Name</label>
                             <input
                                 type="text"
                                 id="campaign-name"
                                 value={name}
                                 onChange={(e) => setName(e.target.value)}
-                                className="mt-1 block w-full p-2 border-2 border-grey-700 rounded-[10px] shadow-sm focus:ring-active-blue focus:border-active-blue transition bg-white text-black-title"
+                                className="mt-1 block w-full p-2 border-2 border-oliver-azure rounded-[10px] shadow-sm focus:ring-oliver-azure focus:border-oliver-azure transition bg-white text-oliver-black"
                                 required
                             />
                         </div>
                         <div>
-                            <label htmlFor="brand-guidelines" className="block text-sm font-medium text-black-title">Brand Guidelines</label>
+                            <label htmlFor="brand-guidelines" className="block text-sm font-medium text-oliver-black">Brand Guidelines</label>
                             <select
                                 id="brand-guidelines"
                                 value={selectedBrandGuideline}
                                 onChange={(e) => setSelectedBrandGuideline(e.target.value)}
-                                className="mt-1 block w-full p-2 border-2 border-grey-700 rounded-[10px] shadow-sm focus:ring-active-blue focus:border-active-blue transition bg-white text-black-title"
+                                className="mt-1 block w-full p-2 border-2 border-oliver-azure rounded-[10px] shadow-sm focus:ring-oliver-azure focus:border-oliver-azure transition bg-white text-oliver-black"
                                 required
                             >
                                 <option value="" disabled>Select brand guidelines</option>
@@ -127,13 +127,13 @@ export const CreateCampaignModal: React.FC<CreateCampaignModalProps> = ({ isOpen
                             </select>
                         </div>
                         <div>
-                            <label htmlFor="workfront-id" className="block text-sm font-medium text-black-title">Workfront Campaign ID <span className="text-grey-700 font-normal">(Optional)</span></label>
+                            <label htmlFor="workfront-id" className="block text-sm font-medium text-oliver-black">Workfront Campaign ID <span className="text-oliver-black/60 font-normal">(Optional)</span></label>
                             <input
                                 type="text"
                                 id="workfront-id"
                                 value={workfrontId}
                                 onChange={handleWorkfrontIdChange}
-                                className={`mt-1 block w-full p-2 border-2 rounded-[10px] shadow-sm focus:ring-active-blue focus:border-active-blue transition bg-white text-black-title placeholder:text-grey-700 ${error ? 'border-error focus:border-error focus:ring-error' : 'border-grey-700'}`}
+                                className={`mt-1 block w-full p-2 border-2 rounded-[10px] shadow-sm focus:ring-oliver-azure focus:border-oliver-azure transition bg-white text-oliver-black placeholder:text-oliver-black/60 ${error ? 'border-error focus:border-error focus:ring-error' : 'border-oliver-azure'}`}
                                 placeholder="#WF_12345"
                                 aria-invalid={!!error}
                                 aria-describedby="workfront-id-error"
@@ -141,33 +141,33 @@ export const CreateCampaignModal: React.FC<CreateCampaignModalProps> = ({ isOpen
                             {error && <p id="workfront-id-error" className="mt-1 text-sm text-error">{error}</p>}
                         </div>
                         <div>
-                            <label htmlFor="client-lead" className="block text-sm font-medium text-black-title">Client Lead</label>
+                            <label htmlFor="client-lead" className="block text-sm font-medium text-oliver-black">Client Lead</label>
                             <input
                                 type="text"
                                 id="client-lead"
                                 value={clientLead}
                                 onChange={(e) => setClientLead(e.target.value)}
-                                className="mt-1 block w-full p-2 border-2 border-grey-700 rounded-[10px] shadow-sm focus:ring-active-blue focus:border-active-blue transition bg-white text-black-title"
+                                className="mt-1 block w-full p-2 border-2 border-oliver-azure rounded-[10px] shadow-sm focus:ring-oliver-azure focus:border-oliver-azure transition bg-white text-oliver-black"
                                 required
                             />
                         </div>
                         <div>
-                            <label className="block text-sm font-medium text-black-title">Agency</label>
+                            <label className="block text-sm font-medium text-oliver-black">Agency</label>
                             <input
                                 type="text"
                                 value={user?.agencyName ?? ''}
-                                className="mt-1 block w-full p-2 border-2 border-grey-300 rounded-[10px] shadow-sm bg-grey-100 text-grey-900 cursor-not-allowed"
+                                className="mt-1 block w-full p-2 border-2 border-grey-300 rounded-[10px] shadow-sm bg-oliver-grey text-oliver-black cursor-not-allowed"
                                 disabled
                             />
                         </div>
                         <div>
-                            <label htmlFor="agency-lead" className="block text-sm font-medium text-black-title">Agency Lead</label>
+                            <label htmlFor="agency-lead" className="block text-sm font-medium text-oliver-black">Agency Lead</label>
                             <input
                                 type="text"
                                 id="agency-lead"
                                 value={agencyLead}
                                 onChange={(e) => setAgencyLead(e.target.value)}
-                                className="mt-1 block w-full p-2 border-2 border-grey-700 rounded-[10px] shadow-sm focus:ring-active-blue focus:border-active-blue transition bg-white text-black-title"
+                                className="mt-1 block w-full p-2 border-2 border-oliver-azure rounded-[10px] shadow-sm focus:ring-oliver-azure focus:border-oliver-azure transition bg-white text-oliver-black"
                                 required
                             />
                         </div>
@@ -176,13 +176,13 @@ export const CreateCampaignModal: React.FC<CreateCampaignModalProps> = ({ isOpen
                         <button
                             type="button"
                             onClick={onClose}
-                            className="border-2 border-active-blue text-active-blue font-semibold py-2 px-6 rounded-full hover:bg-active-blue hover:text-white transition-colors duration-300"
+                            className="border-2 border-oliver-azure text-oliver-azure font-semibold py-2 px-6 rounded-full hover:bg-oliver-azure hover:text-white transition-colors duration-300"
                         >
                             Cancel
                         </button>
                         <button
                             type="submit"
-                            className="bg-active-blue text-white font-semibold py-2 px-6 rounded-full hover:bg-active-blue/90 transition-colors duration-300 disabled:bg-grey-700 disabled:cursor-not-allowed"
+                            className="bg-oliver-azure text-white font-semibold py-2 px-6 rounded-full hover:bg-oliver-azure/90 transition-colors duration-300 disabled:bg-gray-400 disabled:cursor-not-allowed"
                             disabled={isFormInvalid || !!error}
                         >
                             Create Campaign
diff --git a/frontend/components/CreateProjectModal.tsx b/frontend/components/CreateProjectModal.tsx
index 471bfe0..6bcb896 100755
--- a/frontend/components/CreateProjectModal.tsx
+++ b/frontend/components/CreateProjectModal.tsx
@@ -79,32 +79,32 @@ export const CreateProjectModal: React.FC<CreateProjectModalProps> = ({ isOpen,
                 onClick={(e) => e.stopPropagation()}
             >
                 <div className="flex justify-between items-center mb-6">
-                    <h2 className="text-2xl font-bold text-primary-blue">Create New Project</h2>
-                    <button onClick={onClose} className="p-1 rounded-full text-grey-700 hover:bg-grey-100 hover:text-black-title transition-colors">
+                    <h2 className="text-2xl font-bold text-oliver-black">Create New Project</h2>
+                    <button onClick={onClose} className="p-1 rounded-full text-oliver-black/60 hover:bg-oliver-grey hover:text-oliver-black transition-colors">
                         <XIcon className="h-6 w-6" />
                     </button>
                 </div>
                 <form onSubmit={handleSubmit} noValidate>
                     <div className="space-y-4">
                         <div>
-                            <label htmlFor="project-name" className="block text-sm font-medium text-black-title">Project Name</label>
+                            <label htmlFor="project-name" className="block text-sm font-medium text-oliver-black">Project Name</label>
                             <input
                                 type="text"
                                 id="project-name"
                                 value={name}
                                 onChange={(e) => setName(e.target.value)}
-                                className="mt-1 block w-full p-2 border-2 border-grey-700 rounded-[10px] shadow-sm focus:ring-active-blue focus:border-active-blue transition bg-white text-black-title"
+                                className="mt-1 block w-full p-2 border-2 border-oliver-azure rounded-[10px] shadow-sm focus:ring-oliver-azure focus:border-oliver-azure transition bg-white text-oliver-black"
                                 required
                             />
                         </div>
                         <div>
-                            <label htmlFor="workfront-id" className="block text-sm font-medium text-black-title">Workfront Project ID</label>
+                            <label htmlFor="workfront-id" className="block text-sm font-medium text-oliver-black">Workfront Project ID</label>
                             <input
                                 type="text"
                                 id="workfront-id"
                                 value={workfrontId}
                                 onChange={handleWorkfrontIdChange}
-                                className={`mt-1 block w-full p-2 border-2 rounded-[10px] shadow-sm focus:ring-active-blue focus:border-active-blue transition bg-white text-black-title placeholder:text-grey-700 ${error ? 'border-error focus:border-error focus:ring-error' : 'border-grey-700'}`}
+                                className={`mt-1 block w-full p-2 border-2 rounded-[10px] shadow-sm focus:ring-oliver-azure focus:border-oliver-azure transition bg-white text-oliver-black placeholder:text-oliver-black/60 ${error ? 'border-error focus:border-error focus:ring-error' : 'border-oliver-azure'}`}
                                 placeholder="#WF_12345"
                                 required
                                 aria-invalid={!!error}
@@ -113,31 +113,31 @@ export const CreateProjectModal: React.FC<CreateProjectModalProps> = ({ isOpen,
                             {error && <p id="workfront-id-error" className="mt-1 text-sm text-error">{error}</p>}
                         </div>
                         <div>
-                            <label htmlFor="client-lead" className="block text-sm font-medium text-black-title">Client Lead</label>
+                            <label htmlFor="client-lead" className="block text-sm font-medium text-oliver-black">Client Lead</label>
                             <input
                                 type="text"
                                 id="client-lead"
                                 value={clientLead}
                                 onChange={(e) => setClientLead(e.target.value)}
-                                className="mt-1 block w-full p-2 border-2 border-grey-700 rounded-[10px] shadow-sm focus:ring-active-blue focus:border-active-blue transition bg-white text-black-title"
+                                className="mt-1 block w-full p-2 border-2 border-oliver-azure rounded-[10px] shadow-sm focus:ring-oliver-azure focus:border-oliver-azure transition bg-white text-oliver-black"
                                 required
                             />
                         </div>
                         <div>
-                            <label className="block text-sm font-medium text-black-title">Agency</label>
+                            <label className="block text-sm font-medium text-oliver-black">Agency</label>
                             <input
                                 type="text"
                                 value={user?.agencyName ?? ''}
-                                className="mt-1 block w-full p-2 border-2 border-grey-300 rounded-[10px] shadow-sm bg-grey-100 text-grey-900 cursor-not-allowed"
+                                className="mt-1 block w-full p-2 border-2 border-grey-300 rounded-[10px] shadow-sm bg-oliver-grey text-oliver-black cursor-not-allowed"
                                 disabled
                             />
                         </div>
                         <div>
-                            <label className="block text-sm font-medium text-black-title">Agency Lead</label>
+                            <label className="block text-sm font-medium text-oliver-black">Agency Lead</label>
                             <input
                                 type="text"
                                 value={user?.name ?? ''}
-                                className="mt-1 block w-full p-2 border-2 border-grey-300 rounded-[10px] shadow-sm bg-grey-100 text-grey-900 cursor-not-allowed"
+                                className="mt-1 block w-full p-2 border-2 border-grey-300 rounded-[10px] shadow-sm bg-oliver-grey text-oliver-black cursor-not-allowed"
                                 disabled
                             />
                         </div>
@@ -146,13 +146,13 @@ export const CreateProjectModal: React.FC<CreateProjectModalProps> = ({ isOpen,
                         <button
                             type="button"
                             onClick={onClose}
-                            className="border-2 border-active-blue text-active-blue font-semibold py-2 px-6 rounded-full hover:bg-active-blue hover:text-white transition-colors duration-300"
+                            className="border-2 border-oliver-azure text-oliver-azure font-semibold py-2 px-6 rounded-full hover:bg-oliver-azure hover:text-white transition-colors duration-300"
                         >
                             Cancel
                         </button>
                         <button
                             type="submit"
-                            className="bg-active-blue text-white font-semibold py-2 px-6 rounded-full hover:bg-active-blue/90 transition-colors duration-300 disabled:bg-grey-700 disabled:cursor-not-allowed"
+                            className="bg-oliver-azure text-white font-semibold py-2 px-6 rounded-full hover:bg-oliver-azure/90 transition-colors duration-300 disabled:bg-gray-400 disabled:cursor-not-allowed"
                             disabled={isFormInvalid || !!error}
                         >
                             Create Project
diff --git a/frontend/components/FeedbackReport.tsx b/frontend/components/FeedbackReport.tsx
index b1c7a16..b5bf583 100755
--- a/frontend/components/FeedbackReport.tsx
+++ b/frontend/components/FeedbackReport.tsx
@@ -113,7 +113,7 @@ const RagStatusBadge: React.FC<{ status: RagStatus; isLarge?: boolean }> = ({ st
             iconColor = 'text-error';
             break;
         case 'Amber':
-            colorClasses = 'bg-warning-light border-warning text-black-title';
+            colorClasses = 'bg-warning-light border-warning text-oliver-black';
             iconColor = 'text-warning';
             break;
         case 'Green':
@@ -121,8 +121,8 @@ const RagStatusBadge: React.FC<{ status: RagStatus; isLarge?: boolean }> = ({ st
             iconColor = 'text-success';
             break;
         case 'Error':
-            colorClasses = 'bg-grey-100 border-grey-300 text-grey-900';
-            iconColor = 'text-grey-700';
+            colorClasses = 'bg-oliver-grey border-grey-300 text-oliver-black';
+            iconColor = 'text-oliver-black/60';
             break;
     }
 
@@ -165,20 +165,20 @@ const ResolveIssueModal: React.FC<{
                 className="bg-white rounded-[10px] shadow-2xl p-8 w-full max-w-lg transform transition-all border border-grey-300"
                 onClick={(e) => e.stopPropagation()}
             >
-                <h3 className="text-2xl font-bold text-primary-blue mb-2">Resolve Issue</h3>
-                <p className="text-black-title mb-6">Please provide a reason for manually resolving this issue.</p>
+                <h3 className="text-2xl font-bold text-oliver-black mb-2">Resolve Issue</h3>
+                <p className="text-oliver-black mb-6">Please provide a reason for manually resolving this issue.</p>
 
-                <div className="my-6 p-4 bg-grey-100 border border-grey-300 rounded-[10px] text-black-title italic text-sm">
+                <div className="my-6 p-4 bg-oliver-grey border border-grey-300 rounded-[10px] text-oliver-black italic text-sm">
                     "{issueText}"
                 </div>
 
                 <form onSubmit={handleSubmit}>
-                    <label htmlFor="resolution-reason" className="block text-sm font-bold text-black-title mb-2">Reason for resolution</label>
+                    <label htmlFor="resolution-reason" className="block text-sm font-bold text-oliver-black mb-2">Reason for resolution</label>
                     <textarea
                         id="resolution-reason"
                         value={reason}
                         onChange={(e) => setReason(e.target.value)}
-                        className="w-full p-4 border-2 border-grey-700 rounded-[10px] focus:ring-2 focus:ring-active-blue/50 focus:border-active-blue transition-all bg-grey-100 focus:bg-white resize-none text-black-title"
+                        className="w-full p-4 border-2 border-oliver-azure rounded-[10px] focus:ring-2 focus:ring-oliver-azure/50 focus:border-oliver-azure transition-all bg-oliver-grey focus:bg-white resize-none text-oliver-black"
                         rows={4}
                         placeholder="e.g. 'Legal team has approved this exception via email...'"
                         required
@@ -187,13 +187,13 @@ const ResolveIssueModal: React.FC<{
                         <button
                             type="button"
                             onClick={onClose}
-                            className="px-6 py-2.5 rounded-full border-2 border-active-blue text-active-blue font-semibold hover:bg-active-blue hover:text-white transition-colors"
+                            className="px-6 py-2.5 rounded-full border-2 border-oliver-azure text-oliver-azure font-semibold hover:bg-oliver-azure hover:text-white transition-colors"
                         >
                             Cancel
                         </button>
                         <button
                             type="submit"
-                            className="px-6 py-2.5 rounded-full bg-active-blue text-white font-bold shadow-lg shadow-active-blue/30 hover:bg-active-blue/90 transition-all disabled:opacity-50 disabled:cursor-not-allowed"
+                            className="px-6 py-2.5 rounded-full bg-oliver-azure text-white font-bold shadow-lg shadow-oliver-azure/30 hover:bg-oliver-azure/90 transition-all disabled:opacity-50 disabled:cursor-not-allowed"
                             disabled={!reason.trim()}
                         >
                             Submit Resolution
@@ -239,15 +239,15 @@ const FlagIssueModal: React.FC<{
                 {showSuccess ? (
                     <div className="text-center py-8">
                         <CheckCircleIcon className="h-12 w-12 text-success mx-auto mb-4" />
-                        <h3 className="text-xl font-bold text-primary-blue mb-2">Flag Submitted</h3>
+                        <h3 className="text-xl font-bold text-oliver-black mb-2">Flag Submitted</h3>
                         <p className="text-slate-500">Thank you for your feedback on the {agentName}'s review. This has been logged for auditing.</p>
                     </div>
                 ) : (
                     <>
                         <div className="flex justify-between items-start mb-6">
                             <div>
-                                <h3 className="text-2xl font-bold text-primary-blue">Flag Feedback</h3>
-                                <p className="text-slate-500 text-sm mt-1">Reporting incorrect feedback from <span className="font-semibold text-active-blue">{agentName}</span></p>
+                                <h3 className="text-2xl font-bold text-oliver-black">Flag Feedback</h3>
+                                <p className="text-slate-500 text-sm mt-1">Reporting incorrect feedback from <span className="font-semibold text-oliver-azure">{agentName}</span></p>
                             </div>
                             <button onClick={onClose} className="p-2 rounded-full hover:bg-slate-100 text-slate-400 hover:text-slate-600 transition-colors">
                                 <XIcon className="h-6 w-6" />
@@ -555,7 +555,7 @@ const SubReviewCard: React.FC<{
                                                                 {issue.status === 'actionable' ? (
                                                                     <button
                                                                         onClick={() => handleOpenModal(actualIndex)}
-                                                                        className="flex-shrink-0 opacity-0 group-hover/issue:opacity-100 focus:opacity-100 text-xs font-semibold text-active-blue hover:text-primary-blue bg-cyan-brand/10 hover:bg-cyan-brand/20 px-2.5 py-1 rounded-lg transition-all"
+                                                                        className="flex-shrink-0 opacity-0 group-hover/issue:opacity-100 focus:opacity-100 text-xs font-semibold text-oliver-azure hover:text-oliver-black bg-oliver-azure/10 hover:bg-oliver-azure/20 px-2.5 py-1 rounded-lg transition-all"
                                                                     >
                                                                         Mark Resolved
                                                                     </button>
@@ -570,7 +570,7 @@ const SubReviewCard: React.FC<{
                                                                         </span>
                                                                         <button
                                                                             onClick={() => handleReopen(actualIndex)}
-                                                                            className="text-xs font-semibold text-slate-400 hover:text-primary-blue bg-slate-100 hover:bg-slate-200 px-2.5 py-1 rounded-lg transition-all"
+                                                                            className="text-xs font-semibold text-slate-400 hover:text-oliver-black bg-slate-100 hover:bg-slate-200 px-2.5 py-1 rounded-lg transition-all"
                                                                         >
                                                                             Re-open
                                                                         </button>
@@ -630,7 +630,7 @@ const SubReviewCard: React.FC<{
                                                                 {issue.status === 'actionable' ? (
                                                                     <button
                                                                         onClick={() => handleOpenModal(actualIndex)}
-                                                                        className="flex-shrink-0 opacity-0 group-hover/issue:opacity-100 focus:opacity-100 text-xs font-semibold text-active-blue hover:text-primary-blue bg-cyan-brand/10 hover:bg-cyan-brand/20 px-2.5 py-1 rounded-lg transition-all"
+                                                                        className="flex-shrink-0 opacity-0 group-hover/issue:opacity-100 focus:opacity-100 text-xs font-semibold text-oliver-azure hover:text-oliver-black bg-oliver-azure/10 hover:bg-oliver-azure/20 px-2.5 py-1 rounded-lg transition-all"
                                                                     >
                                                                         Mark Resolved
                                                                     </button>
@@ -645,7 +645,7 @@ const SubReviewCard: React.FC<{
                                                                         </span>
                                                                         <button
                                                                             onClick={() => handleReopen(actualIndex)}
-                                                                            className="text-xs font-semibold text-slate-400 hover:text-primary-blue bg-slate-100 hover:bg-slate-200 px-2.5 py-1 rounded-lg transition-all"
+                                                                            className="text-xs font-semibold text-slate-400 hover:text-oliver-black bg-slate-100 hover:bg-slate-200 px-2.5 py-1 rounded-lg transition-all"
                                                                         >
                                                                             Re-open
                                                                         </button>
@@ -691,7 +691,7 @@ const SubReviewCard: React.FC<{
                                                 {issue.status === 'actionable' ? (
                                                     <button
                                                         onClick={() => handleOpenModal(index)}
-                                                        className="flex-shrink-0 opacity-0 group-hover/issue:opacity-100 focus:opacity-100 text-xs font-semibold text-active-blue hover:text-primary-blue bg-cyan-brand/10 hover:bg-cyan-brand/20 px-2.5 py-1 rounded-lg transition-all"
+                                                        className="flex-shrink-0 opacity-0 group-hover/issue:opacity-100 focus:opacity-100 text-xs font-semibold text-oliver-azure hover:text-oliver-black bg-oliver-azure/10 hover:bg-oliver-azure/20 px-2.5 py-1 rounded-lg transition-all"
                                                     >
                                                         Mark Resolved
                                                     </button>
@@ -706,7 +706,7 @@ const SubReviewCard: React.FC<{
                                                         </span>
                                                         <button
                                                             onClick={() => handleReopen(index)}
-                                                            className="text-xs font-semibold text-slate-400 hover:text-primary-blue bg-slate-100 hover:bg-slate-200 px-2.5 py-1 rounded-lg transition-all"
+                                                            className="text-xs font-semibold text-slate-400 hover:text-oliver-black bg-slate-100 hover:bg-slate-200 px-2.5 py-1 rounded-lg transition-all"
                                                         >
                                                             Re-open
                                                         </button>
@@ -734,8 +734,8 @@ const SubReviewCard: React.FC<{
 const LeadAgentSummary: React.FC<{ status: OverallStatus, summary: string, onFlag: () => void; isFlagged?: boolean; }> = ({ status, summary, onFlag, isFlagged }) => {
     const isPassed = status === 'Passed';
     
-    let themeStyles = 'from-sky-50 to-white border-sky-100 text-primary-blue';
-    let iconBg = 'bg-sky-100 text-active-blue';
+    let themeStyles = 'from-sky-50 to-white border-sky-100 text-oliver-black';
+    let iconBg = 'bg-sky-100 text-oliver-azure';
     let icon = <InformationCircleIcon className="h-8 w-8" />;
     let blobColor = 'bg-sky-400';
 
diff --git a/frontend/components/Header.tsx b/frontend/components/Header.tsx
index 8ce7a21..7de9a46 100755
--- a/frontend/components/Header.tsx
+++ b/frontend/components/Header.tsx
@@ -3,9 +3,9 @@ import { EagleIcon } from './icons/EagleIcon';
 
 export const Header: React.FC = () => {
   return (
-    <header className="bg-primary-blue p-4 shadow-md">
+    <header className="bg-oliver-black p-4 shadow-md">
       <div className="max-w-7xl mx-auto flex items-center">
-        <EagleIcon className="h-10 w-10 text-cyan-brand" />
+        <EagleIcon className="h-10 w-10 text-oliver-azure" />
         <h1 className="text-xl sm:text-2xl font-bold text-white ml-3">
           AI Proof Reviewer
         </h1>
diff --git a/frontend/components/Hero.tsx b/frontend/components/Hero.tsx
index 742b141..9ceaa08 100755
--- a/frontend/components/Hero.tsx
+++ b/frontend/components/Hero.tsx
@@ -17,25 +17,21 @@ export const Hero: React.FC<HeroProps> = ({ onGetStarted }) => {
     <div className="relative overflow-hidden bg-white min-h-[350px] sm:min-h-[400px] md:min-h-[500px] flex items-center">
         <div className="max-w-screen-2xl mx-auto px-4 sm:px-6 lg:px-8 py-16 md:py-24 relative z-10 w-full">
             <div className="max-w-3xl">
-                <div className="text-teal-brand text-xs font-bold uppercase tracking-widest mb-6">
-                    AI-Powered Compliance
-                </div>
-
-                <h1 className="text-5xl md:text-7xl font-semibold text-teal-brand leading-tight mb-6">
+                <h1 className="text-5xl md:text-7xl font-semibold text-oliver-black leading-tight mb-6">
                     Mod Comms <br/>
-                    <span className="text-electric-violet">
+                    <span className="text-oliver-orange">
                         Intelligent Review
                     </span>
                 </h1>
 
-                <p className="text-lg md:text-xl text-teal-brand mb-10 leading-relaxed max-w-2xl">
+                <p className="text-lg md:text-xl text-oliver-black mb-10 leading-relaxed max-w-2xl">
                     Streamline your creative approval process. Mod Comms analyses your proofs against guidelines and best practice in seconds, not days.
                 </p>
 
                 <div className="flex flex-col sm:flex-row gap-4">
                     <button
                         onClick={onGetStarted}
-                        className="group inline-flex items-center justify-center px-8 py-4 text-base font-bold text-white bg-active-blue rounded-full hover:bg-active-blue/90 transition-all duration-300"
+                        className="group inline-flex items-center justify-center px-8 py-4 text-base font-bold text-white bg-oliver-azure rounded-full hover:bg-oliver-azure/90 transition-all duration-300"
                     >
                         Start Analysis
                         <ArrowRightIcon className="ml-2 h-5 w-5 transform group-hover:translate-x-1 transition-transform" />
diff --git a/frontend/components/KnowledgeBase.tsx b/frontend/components/KnowledgeBase.tsx
index 347453a..402148a 100644
--- a/frontend/components/KnowledgeBase.tsx
+++ b/frontend/components/KnowledgeBase.tsx
@@ -27,7 +27,7 @@ const StatusBadge: React.FC<{ status: string }> = ({ status }) => {
         partial: 'partial parse',
     };
     return (
-        <span className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${colors[status] || 'bg-grey-100 text-grey-700'}`}>
+        <span className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${colors[status] || 'bg-oliver-grey text-oliver-black/60'}`}>
             {labels[status] || status}
         </span>
     );
@@ -275,13 +275,13 @@ export const KnowledgeBase: React.FC = () => {
     if (diffResult && selectedKb) {
         return (
             <div className="p-8 max-w-6xl mx-auto w-full">
-                <button onClick={handleBackFromDiff} className="flex items-center gap-2 text-active-blue hover:underline mb-6 text-sm font-medium">
+                <button onClick={handleBackFromDiff} className="flex items-center gap-2 text-oliver-azure hover:underline mb-6 text-sm font-medium">
                     <ArrowLeftIcon className="h-4 w-4" /> Back to Version History
                 </button>
 
                 <div className="mb-6">
-                    <h1 className="text-2xl font-bold text-primary-blue">{selectedKb.display_name} - Diff</h1>
-                    <p className="text-grey-700 mt-1">
+                    <h1 className="text-2xl font-bold text-oliver-black">{selectedKb.display_name} - Diff</h1>
+                    <p className="text-oliver-black/60 mt-1">
                         Version {diffResult.version_a} vs Version {diffResult.version_b}
                         <span className="ml-4 text-green-600 font-medium">+{diffResult.additions}</span>
                         <span className="ml-2 text-red-600 font-medium">-{diffResult.deletions}</span>
@@ -299,10 +299,10 @@ export const KnowledgeBase: React.FC = () => {
                                     ''
                                 }`}
                             >
-                                <span className="w-12 text-right pr-2 text-grey-700 select-none border-r border-grey-200 flex-shrink-0 py-0.5">
+                                <span className="w-12 text-right pr-2 text-oliver-black/60 select-none border-r border-grey-200 flex-shrink-0 py-0.5">
                                     {line.line_number_old || ''}
                                 </span>
-                                <span className="w-12 text-right pr-2 text-grey-700 select-none border-r border-grey-200 flex-shrink-0 py-0.5">
+                                <span className="w-12 text-right pr-2 text-oliver-black/60 select-none border-r border-grey-200 flex-shrink-0 py-0.5">
                                     {line.line_number_new || ''}
                                 </span>
                                 <span className={`w-6 text-center flex-shrink-0 py-0.5 ${
@@ -325,15 +325,15 @@ export const KnowledgeBase: React.FC = () => {
     if (viewingSpec) {
         return (
             <div className="p-8 max-w-6xl mx-auto w-full">
-                <button onClick={() => setViewingSpec(null)} className="flex items-center gap-2 text-active-blue hover:underline mb-6 text-sm font-medium">
+                <button onClick={() => setViewingSpec(null)} className="flex items-center gap-2 text-oliver-azure hover:underline mb-6 text-sm font-medium">
                     <ArrowLeftIcon className="h-4 w-4" /> Back to Version History
                 </button>
 
                 <div className="mb-6">
-                    <h1 className="text-2xl font-bold text-primary-blue">
+                    <h1 className="text-2xl font-bold text-oliver-black">
                         {selectedKb?.display_name} - Version {viewingSpec.version_number}
                     </h1>
-                    <p className="text-grey-700 mt-1">
+                    <p className="text-oliver-black/60 mt-1">
                         {formatDate(viewingSpec.created_at)} | {viewingSpec.char_count.toLocaleString()} chars
                         {viewingSpec.generated_by_name && <span> | Generated by {viewingSpec.generated_by_name}</span>}
                         {viewingSpec.is_active && <span className="ml-2 inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">Active</span>}
@@ -341,7 +341,7 @@ export const KnowledgeBase: React.FC = () => {
                 </div>
 
                 <div className="bg-white rounded-xl border border-grey-300 p-6 overflow-x-auto max-h-[70vh] overflow-y-auto">
-                    <pre className="whitespace-pre-wrap text-sm text-black-title font-mono leading-relaxed">{viewingSpec.content}</pre>
+                    <pre className="whitespace-pre-wrap text-sm text-oliver-black font-mono leading-relaxed">{viewingSpec.content}</pre>
                 </div>
             </div>
         );
@@ -353,25 +353,25 @@ export const KnowledgeBase: React.FC = () => {
 
         return (
             <div className="p-8 max-w-6xl mx-auto w-full">
-                <button onClick={handleBack} className="flex items-center gap-2 text-active-blue hover:underline mb-6 text-sm font-medium">
+                <button onClick={handleBack} className="flex items-center gap-2 text-oliver-azure hover:underline mb-6 text-sm font-medium">
                     <ArrowLeftIcon className="h-4 w-4" /> Back to Knowledge Bases
                 </button>
 
                 <div className="mb-6">
-                    <h1 className="text-2xl font-bold text-primary-blue">{selectedKb.display_name}</h1>
-                    {selectedKb.description && <p className="text-grey-700 mt-1">{selectedKb.description}</p>}
+                    <h1 className="text-2xl font-bold text-oliver-black">{selectedKb.display_name}</h1>
+                    {selectedKb.description && <p className="text-oliver-black/60 mt-1">{selectedKb.description}</p>}
                 </div>
 
                 {/* Tabs */}
-                <div className="flex gap-1 mb-6 bg-grey-100 p-1 rounded-xl w-fit">
+                <div className="flex gap-1 mb-6 bg-oliver-grey p-1 rounded-xl w-fit">
                     {(['documents', 'versions'] as const).map(tab => (
                         <button
                             key={tab}
                             onClick={() => setActiveTab(tab)}
                             className={`px-5 py-2 rounded-lg text-sm font-medium transition-all duration-200 ${
                                 activeTab === tab
-                                    ? 'bg-white text-primary-blue shadow-sm'
-                                    : 'text-grey-700 hover:text-primary-blue'
+                                    ? 'bg-white text-oliver-black shadow-sm'
+                                    : 'text-oliver-black/60 hover:text-oliver-black'
                             }`}
                         >
                             {tab === 'documents' ? 'Source Documents' : 'Version History'}
@@ -387,12 +387,12 @@ export const KnowledgeBase: React.FC = () => {
                             onDragLeave={handleDragLeave}
                             onDrop={handleDrop}
                             className={`border-2 border-dashed rounded-xl p-8 mb-6 text-center transition-colors ${
-                                isDragging ? 'border-active-blue bg-active-blue/5' : 'border-grey-300 hover:border-active-blue/50'
+                                isDragging ? 'border-oliver-azure bg-oliver-azure/5' : 'border-grey-300 hover:border-oliver-azure/50'
                             }`}
                         >
-                            <UploadIcon className="h-10 w-10 mx-auto text-grey-700 mb-3" />
-                            <p className="text-grey-700 mb-2">Drag & drop files here, or</p>
-                            <label className="inline-flex items-center gap-2 bg-active-blue text-white font-semibold py-2 px-6 rounded-full hover:bg-active-blue/90 transition-colors cursor-pointer">
+                            <UploadIcon className="h-10 w-10 mx-auto text-oliver-black/60 mb-3" />
+                            <p className="text-oliver-black/60 mb-2">Drag & drop files here, or</p>
+                            <label className="inline-flex items-center gap-2 bg-oliver-azure text-white font-semibold py-2 px-6 rounded-full hover:bg-oliver-azure/90 transition-colors cursor-pointer">
                                 {uploading ? <SpinnerIcon className="h-4 w-4 animate-spin" /> : null}
                                 {uploading ? 'Uploading...' : 'Browse Files'}
                                 <input
@@ -404,7 +404,7 @@ export const KnowledgeBase: React.FC = () => {
                                     disabled={uploading}
                                 />
                             </label>
-                            <p className="text-xs text-grey-700 mt-2">PDF, DOCX, PPTX, XLSX, HTML, TXT, MD, PNG, JPG, WebP</p>
+                            <p className="text-xs text-oliver-black/60 mt-2">PDF, DOCX, PPTX, XLSX, HTML, TXT, MD, PNG, JPG, WebP</p>
                         </div>
 
                         {/* Process button + job status */}
@@ -412,12 +412,12 @@ export const KnowledgeBase: React.FC = () => {
                             <button
                                 onClick={handleProcess}
                                 disabled={!!isJobRunning || selectedKb.source_documents.length === 0}
-                                className="bg-active-blue text-white font-semibold py-2.5 px-8 rounded-full hover:bg-active-blue/90 transition-colors disabled:bg-grey-700 disabled:cursor-not-allowed"
+                                className="bg-oliver-azure text-white font-semibold py-2.5 px-8 rounded-full hover:bg-oliver-azure/90 transition-colors disabled:bg-gray-400 disabled:cursor-not-allowed"
                             >
                                 {isJobRunning ? 'Processing...' : 'Process Documents'}
                             </button>
                             {selectedKb.active_spec_version && (
-                                <span className="text-sm text-grey-700">
+                                <span className="text-sm text-oliver-black/60">
                                     Active spec: v{selectedKb.active_spec_version} ({selectedKb.active_spec_char_count?.toLocaleString()} chars)
                                 </span>
                             )}
@@ -427,8 +427,8 @@ export const KnowledgeBase: React.FC = () => {
                         {isJobRunning && activeJob && (
                             <div className="bg-blue-50 border border-blue-200 rounded-xl p-4 mb-6">
                                 <div className="flex items-center gap-3 mb-2">
-                                    <SpinnerIcon className="h-5 w-5 text-active-blue animate-spin" />
-                                    <span className="font-medium text-primary-blue">
+                                    <SpinnerIcon className="h-5 w-5 text-oliver-azure animate-spin" />
+                                    <span className="font-medium text-oliver-black">
                                         {activeJob.status === 'parsing_documents' ? 'Parsing documents...' :
                                          activeJob.status === 'distilling' ? 'Distilling spec with AI...' :
                                          'Starting...'}
@@ -437,12 +437,12 @@ export const KnowledgeBase: React.FC = () => {
                                 {activeJob.status === 'parsing_documents' && (
                                     <div className="w-full bg-blue-100 rounded-full h-2">
                                         <div
-                                            className="bg-active-blue h-2 rounded-full transition-all duration-500"
+                                            className="bg-oliver-azure h-2 rounded-full transition-all duration-500"
                                             style={{ width: `${activeJob.total_documents > 0 ? (activeJob.parsed_documents / activeJob.total_documents) * 100 : 0}%` }}
                                         />
                                     </div>
                                 )}
-                                <p className="text-sm text-grey-700 mt-1">
+                                <p className="text-sm text-oliver-black/60 mt-1">
                                     {activeJob.parsed_documents} / {activeJob.total_documents} documents parsed
                                 </p>
                             </div>
@@ -455,7 +455,7 @@ export const KnowledgeBase: React.FC = () => {
                                     ? 'bg-green-50 border-green-200 text-green-800'
                                     : selectedKb.latest_job.status === 'failed'
                                     ? 'bg-red-50 border-red-200 text-red-800'
-                                    : 'bg-grey-100 border-grey-300 text-grey-700'
+                                    : 'bg-oliver-grey border-grey-300 text-oliver-black/60'
                             }`}>
                                 Last processing: <StatusBadge status={selectedKb.latest_job.status} />
                                 {selectedKb.latest_job.completed_at && <span className="ml-2">{formatDate(selectedKb.latest_job.completed_at)}</span>}
@@ -468,7 +468,7 @@ export const KnowledgeBase: React.FC = () => {
                             <div className="bg-white rounded-xl border border-grey-300 overflow-hidden">
                                 <table className="w-full text-sm">
                                     <thead>
-                                        <tr className="bg-grey-100 text-left text-grey-700">
+                                        <tr className="bg-oliver-grey text-left text-oliver-black/60">
                                             <th className="px-4 py-3 font-medium">Filename</th>
                                             <th className="px-4 py-3 font-medium">Size</th>
                                             <th className="px-4 py-3 font-medium">Uploaded</th>
@@ -481,15 +481,15 @@ export const KnowledgeBase: React.FC = () => {
                                         {selectedKb.source_documents.map(doc => (
                                             <React.Fragment key={doc.id}>
                                                 <tr className="hover:bg-grey-50 transition-colors">
-                                                    <td className="px-4 py-3 font-medium text-primary-blue">{doc.filename}</td>
-                                                    <td className="px-4 py-3 text-grey-700">{formatBytes(doc.file_size_bytes)}</td>
-                                                    <td className="px-4 py-3 text-grey-700">{formatDate(doc.created_at)}</td>
-                                                    <td className="px-4 py-3 text-grey-700">{doc.uploaded_by_name || '-'}</td>
+                                                    <td className="px-4 py-3 font-medium text-oliver-black">{doc.filename}</td>
+                                                    <td className="px-4 py-3 text-oliver-black/60">{formatBytes(doc.file_size_bytes)}</td>
+                                                    <td className="px-4 py-3 text-oliver-black/60">{formatDate(doc.created_at)}</td>
+                                                    <td className="px-4 py-3 text-oliver-black/60">{doc.uploaded_by_name || '-'}</td>
                                                     <td className="px-4 py-3"><StatusBadge status={doc.parse_status} /></td>
                                                     <td className="px-4 py-3">
                                                         <button
                                                             onClick={() => handleRemoveDoc(doc.id)}
-                                                            className="text-grey-700 hover:text-error transition-colors"
+                                                            className="text-oliver-black/60 hover:text-error transition-colors"
                                                             title="Remove document"
                                                         >
                                                             <TrashIcon className="h-4 w-4" />
@@ -511,7 +511,7 @@ export const KnowledgeBase: React.FC = () => {
                                 </table>
                             </div>
                         ) : (
-                            <div className="text-center py-12 text-grey-700 bg-grey-100 rounded-xl">
+                            <div className="text-center py-12 text-oliver-black/60 bg-oliver-grey rounded-xl">
                                 No source documents uploaded yet.
                             </div>
                         )}
@@ -524,7 +524,7 @@ export const KnowledgeBase: React.FC = () => {
                             <div className="mb-4">
                                 <button
                                     onClick={handleCompare}
-                                    className="bg-active-blue text-white font-semibold py-2 px-6 rounded-full hover:bg-active-blue/90 transition-colors"
+                                    className="bg-oliver-azure text-white font-semibold py-2 px-6 rounded-full hover:bg-oliver-azure/90 transition-colors"
                                 >
                                     Compare Selected Versions
                                 </button>
@@ -535,7 +535,7 @@ export const KnowledgeBase: React.FC = () => {
                             <div className="bg-white rounded-xl border border-grey-300 overflow-hidden">
                                 <table className="w-full text-sm">
                                     <thead>
-                                        <tr className="bg-grey-100 text-left text-grey-700">
+                                        <tr className="bg-oliver-grey text-left text-oliver-black/60">
                                             <th className="px-4 py-3 font-medium w-10">
                                                 <span className="sr-only">Compare</span>
                                             </th>
@@ -555,27 +555,27 @@ export const KnowledgeBase: React.FC = () => {
                                                         type="checkbox"
                                                         checked={selectedForDiff.includes(v.id)}
                                                         onChange={() => handleDiffToggle(v.id)}
-                                                        className="h-4 w-4 rounded border-grey-300 text-active-blue focus:ring-active-blue"
+                                                        className="h-4 w-4 rounded border-grey-300 text-oliver-azure focus:ring-oliver-azure"
                                                     />
                                                 </td>
-                                                <td className="px-4 py-3 font-medium text-primary-blue">v{v.version_number}</td>
-                                                <td className="px-4 py-3 text-grey-700">{formatDate(v.created_at)}</td>
-                                                <td className="px-4 py-3 text-grey-700">{v.generated_by_name || '-'}</td>
-                                                <td className="px-4 py-3 text-grey-700">{v.char_count.toLocaleString()}</td>
+                                                <td className="px-4 py-3 font-medium text-oliver-black">v{v.version_number}</td>
+                                                <td className="px-4 py-3 text-oliver-black/60">{formatDate(v.created_at)}</td>
+                                                <td className="px-4 py-3 text-oliver-black/60">{v.generated_by_name || '-'}</td>
+                                                <td className="px-4 py-3 text-oliver-black/60">{v.char_count.toLocaleString()}</td>
                                                 <td className="px-4 py-3">
                                                     {v.is_active ? (
                                                         <span className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">
                                                             Active
                                                         </span>
                                                     ) : (
-                                                        <span className="text-grey-700 text-xs">Inactive</span>
+                                                        <span className="text-oliver-black/60 text-xs">Inactive</span>
                                                     )}
                                                 </td>
                                                 <td className="px-4 py-3">
                                                     <div className="flex items-center gap-2">
                                                         <button
                                                             onClick={() => handleViewSpec(v.id)}
-                                                            className="text-active-blue hover:underline text-xs font-medium"
+                                                            className="text-oliver-azure hover:underline text-xs font-medium"
                                                         >
                                                             View
                                                         </button>
@@ -595,7 +595,7 @@ export const KnowledgeBase: React.FC = () => {
                                 </table>
                             </div>
                         ) : (
-                            <div className="text-center py-12 text-grey-700 bg-grey-100 rounded-xl">
+                            <div className="text-center py-12 text-oliver-black/60 bg-oliver-grey rounded-xl">
                                 No spec versions generated yet.
                             </div>
                         )}
@@ -609,7 +609,7 @@ export const KnowledgeBase: React.FC = () => {
     if (loading) {
         return (
             <div className="p-8 flex items-center justify-center min-h-[400px]">
-                <SpinnerIcon className="h-8 w-8 text-active-blue animate-spin" />
+                <SpinnerIcon className="h-8 w-8 text-oliver-azure animate-spin" />
             </div>
         );
     }
@@ -617,8 +617,8 @@ export const KnowledgeBase: React.FC = () => {
     return (
         <div className="p-8 max-w-6xl mx-auto w-full">
             <div className="mb-8">
-                <h1 className="text-2xl font-bold text-primary-blue">Knowledge Base</h1>
-                <p className="text-grey-700 mt-1">Manage the AI agent knowledge bases. Upload source documents, process them, and version the resulting specs.</p>
+                <h1 className="text-2xl font-bold text-oliver-black">Knowledge Base</h1>
+                <p className="text-oliver-black/60 mt-1">Manage the AI agent knowledge bases. Upload source documents, process them, and version the resulting specs.</p>
             </div>
 
             <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
@@ -632,22 +632,22 @@ export const KnowledgeBase: React.FC = () => {
                         <button
                             key={kb.id}
                             onClick={() => handleSelectKb(kb)}
-                            className={`text-left p-6 rounded-xl border-2 ${statusColor} hover:border-active-blue hover:shadow-md transition-all duration-200 group`}
+                            className={`text-left p-6 rounded-xl border-2 ${statusColor} hover:border-oliver-azure hover:shadow-md transition-all duration-200 group`}
                         >
-                            <h3 className="text-lg font-semibold text-primary-blue group-hover:text-active-blue transition-colors">
+                            <h3 className="text-lg font-semibold text-oliver-black group-hover:text-oliver-azure transition-colors">
                                 {kb.display_name}
                             </h3>
                             {kb.description && (
-                                <p className="text-sm text-grey-700 mt-1 line-clamp-2">{kb.description}</p>
+                                <p className="text-sm text-oliver-black/60 mt-1 line-clamp-2">{kb.description}</p>
                             )}
-                            <div className="mt-4 space-y-1 text-sm text-grey-700">
+                            <div className="mt-4 space-y-1 text-sm text-oliver-black/60">
                                 <div className="flex justify-between">
                                     <span>Source Documents</span>
-                                    <span className="font-medium text-primary-blue">{kb.source_document_count}</span>
+                                    <span className="font-medium text-oliver-black">{kb.source_document_count}</span>
                                 </div>
                                 <div className="flex justify-between">
                                     <span>Active Spec</span>
-                                    <span className="font-medium text-primary-blue">
+                                    <span className="font-medium text-oliver-black">
                                         {kb.active_spec_version ? `v${kb.active_spec_version}` : 'None'}
                                     </span>
                                 </div>
@@ -658,7 +658,7 @@ export const KnowledgeBase: React.FC = () => {
                                     </div>
                                 )}
                                 {kb.latest_job_completed_at && (
-                                    <div className="text-xs text-grey-700 text-right">
+                                    <div className="text-xs text-oliver-black/60 text-right">
                                         {formatDate(kb.latest_job_completed_at)}
                                     </div>
                                 )}
diff --git a/frontend/components/LoadingVisual.tsx b/frontend/components/LoadingVisual.tsx
index 66f15de..fb3e812 100755
--- a/frontend/components/LoadingVisual.tsx
+++ b/frontend/components/LoadingVisual.tsx
@@ -6,15 +6,15 @@ export const LoadingVisual: React.FC = () => {
         <div className="flex flex-col items-center justify-center text-center py-20 px-6 min-h-[600px]">
             <div className="relative flex items-center justify-center w-48 h-48">
                 {/* Pulsing circles */}
-                <div className="absolute w-full h-full rounded-full bg-active-blue/20 animate-slow-ping"></div>
-                <div className="absolute w-3/4 h-3/4 rounded-full bg-active-blue/30 animate-slow-ping [animation-delay:-1s]"></div>
+                <div className="absolute w-full h-full rounded-full bg-oliver-azure/20 animate-slow-ping"></div>
+                <div className="absolute w-3/4 h-3/4 rounded-full bg-oliver-azure/30 animate-slow-ping [animation-delay:-1s]"></div>
                 
                 {/* Central Icon */}
                 <div className="relative bg-white backdrop-blur-sm rounded-full p-6 border border-gray-200 shadow-lg flex items-center justify-center w-28 h-28">
-                    <BarclaysLogo className="h-16 w-16 text-active-blue" />
+                    <BarclaysLogo className="h-16 w-16 text-oliver-azure" />
                 </div>
             </div>
-            <h2 className="text-2xl font-bold text-primary-blue mt-12">
+            <h2 className="text-2xl font-bold text-oliver-black mt-12">
                 Finalizing your report...
             </h2>
             <p className="text-gray-500 mt-2 max-w-md">
diff --git a/frontend/components/Login.tsx b/frontend/components/Login.tsx
index cdb13af..480f949 100755
--- a/frontend/components/Login.tsx
+++ b/frontend/components/Login.tsx
@@ -62,7 +62,7 @@ const SupportModal: React.FC<{
                 onClick={(e) => e.stopPropagation()}
             >
                 <div className="flex justify-between items-start mb-4">
-                    <h3 className="text-xl font-bold text-primary-blue">Contact Support</h3>
+                    <h3 className="text-xl font-bold text-oliver-black">Contact Support</h3>
                     <button onClick={onClose} className="-mt-2 -mr-2 p-2 rounded-full hover:bg-gray-200 transition-colors">
                         <XIcon className="h-6 w-6 text-gray-600" />
                     </button>
@@ -78,7 +78,7 @@ const SupportModal: React.FC<{
                     <textarea
                         value={query}
                         onChange={(e) => setQuery(e.target.value)}
-                        className="w-full p-3 border border-gray-300 rounded-md focus:ring-2 focus:ring-active-blue focus:border-active-blue transition"
+                        className="w-full p-3 border border-gray-300 rounded-md focus:ring-2 focus:ring-oliver-azure focus:border-oliver-azure transition"
                         rows={5}
                         placeholder="Type your message here..."
                         required
@@ -95,7 +95,7 @@ const SupportModal: React.FC<{
                         </button>
                         <button
                             type="submit"
-                            className="bg-active-blue text-white font-semibold py-2 px-4 rounded-md hover:bg-primary-blue transition-colors duration-300 disabled:bg-gray-400 disabled:cursor-not-allowed flex items-center gap-2"
+                            className="bg-oliver-azure text-white font-semibold py-2 px-4 rounded-md hover:bg-oliver-azure transition-colors duration-300 disabled:bg-gray-400 disabled:cursor-not-allowed flex items-center gap-2"
                             disabled={!query.trim() || isSubmitting}
                         >
                             {isSubmitting ? (
@@ -163,10 +163,10 @@ export const Login: React.FC = () => {
                 {/* Modern Glassy Background */}
                 <div className="absolute inset-0 overflow-hidden pointer-events-none">
                     {/* Top Left Blob */}
-                    <div className="absolute -top-[20%] -left-[10%] w-[70%] h-[70%] rounded-full bg-gradient-to-br from-active-blue/30 to-purple-600/30 blur-[120px] animate-pulse" style={{ animationDuration: '8s' }}></div>
+                    <div className="absolute -top-[20%] -left-[10%] w-[70%] h-[70%] rounded-full bg-gradient-to-br from-oliver-azure/30 to-purple-600/30 blur-[120px] animate-pulse" style={{ animationDuration: '8s' }}></div>
                     
                     {/* Bottom Right Blob */}
-                    <div className="absolute -bottom-[20%] -right-[10%] w-[70%] h-[70%] rounded-full bg-gradient-to-tl from-cyan-brand/30 to-emerald-500/30 blur-[120px] animate-pulse" style={{ animationDuration: '10s', animationDelay: '1s' }}></div>
+                    <div className="absolute -bottom-[20%] -right-[10%] w-[70%] h-[70%] rounded-full bg-gradient-to-tl from-oliver-azure/30 to-emerald-500/30 blur-[120px] animate-pulse" style={{ animationDuration: '10s', animationDelay: '1s' }}></div>
                     
                     {/* Noise Texture */}
                     <div className="absolute inset-0 bg-[url('https://grainy-gradients.vercel.app/noise.svg')] opacity-20 mix-blend-soft-light"></div>
@@ -175,10 +175,10 @@ export const Login: React.FC = () => {
                 {/* Login Card */}
                 <div className="relative z-10 bg-white/90 backdrop-blur-xl p-8 sm:p-12 shadow-2xl rounded-3xl w-full max-w-md flex flex-col items-center text-center border border-white/50 ring-1 ring-white/50">
                     <div className="mb-8 transform transition-transform hover:scale-105 duration-300">
-                        <BarclaysLogo className="h-12 w-auto text-primary-blue" />
+                        <BarclaysLogo className="h-12 w-auto text-oliver-black" />
                     </div>
 
-                    <h1 className="text-3xl font-extrabold text-primary-blue mb-2 tracking-tight">Mod Comms</h1>
+                    <h1 className="text-3xl font-extrabold text-oliver-black mb-2 tracking-tight">Mod Comms</h1>
                     <p className="text-slate-500 mb-8 font-medium">Proof Review &amp; Compliance Platform</p>
 
                     <div className="w-full space-y-6">
@@ -204,7 +204,7 @@ export const Login: React.FC = () => {
                             className="w-full flex items-center justify-center gap-3 bg-white hover:bg-gray-50 text-slate-700 font-bold py-4 px-6 rounded-xl border border-gray-200 shadow-lg shadow-gray-200/50 hover:shadow-xl hover:border-gray-300 transition-all duration-300 group disabled:opacity-70 disabled:cursor-wait transform hover:-translate-y-0.5"
                         >
                             {isLoggingIn ? (
-                                <svg className="animate-spin h-5 w-5 text-active-blue" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+                                <svg className="animate-spin h-5 w-5 text-oliver-azure" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                                     <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
                                     <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                                 </svg>
@@ -221,7 +221,7 @@ export const Login: React.FC = () => {
                         <button 
                             type="button" 
                             onClick={() => setIsSupportModalOpen(true)} 
-                            className="text-sm text-slate-500 hover:text-active-blue transition-colors font-medium"
+                            className="text-sm text-slate-500 hover:text-oliver-azure transition-colors font-medium"
                         >
                             Having trouble signing in? Contact Support
                         </button>
diff --git a/frontend/components/Profile.tsx b/frontend/components/Profile.tsx
index 0ffd6c8..2290dce 100755
--- a/frontend/components/Profile.tsx
+++ b/frontend/components/Profile.tsx
@@ -92,18 +92,18 @@ export const Profile: React.FC<ProfileProps> = ({ onLogout, msalInstance }) => {
     return (
         <div className="p-4 sm:p-6 lg:p-8 h-full bg-white">
             <header className="mb-8">
-                <h1 className="text-3xl lg:text-4xl font-semibold text-primary-blue">Your Profile</h1>
-                <p className="text-base lg:text-lg text-grey-700 mt-1">View your account details and manage settings.</p>
+                <h1 className="text-3xl lg:text-4xl font-semibold text-oliver-black">Your Profile</h1>
+                <p className="text-base lg:text-lg text-oliver-black/60 mt-1">View your account details and manage settings.</p>
             </header>
 
             <div className="max-w-3xl">
                 <section className="p-6 sm:p-8">
-                    <h2 className="text-2xl font-semibold text-primary-blue mb-6">Account Information</h2>
+                    <h2 className="text-2xl font-semibold text-oliver-black mb-6">Account Information</h2>
                     <div className="grid grid-cols-1 sm:grid-cols-2 gap-x-8 gap-y-5">
                         {Object.entries(userDetails).map(([key, value]) => (
                             <div key={key}>
-                                <p className="text-sm font-semibold text-grey-700 tracking-wide uppercase">{key}</p>
-                                <p className="text-lg text-black-title mt-1">{value}</p>
+                                <p className="text-sm font-semibold text-oliver-black/60 tracking-wide uppercase">{key}</p>
+                                <p className="text-lg text-oliver-black mt-1">{value}</p>
                             </div>
                         ))}
                     </div>
@@ -118,7 +118,7 @@ export const Profile: React.FC<ProfileProps> = ({ onLogout, msalInstance }) => {
                         </button>
                         <button
                             onClick={handleToggleQuestionForm}
-                            className="flex items-center justify-center gap-2 text-active-blue hover:text-active-blue/80 bg-transparent font-semibold py-2 px-4 rounded-md transition-colors duration-300"
+                            className="flex items-center justify-center gap-2 text-oliver-azure hover:text-oliver-azure/80 bg-transparent font-semibold py-2 px-4 rounded-md transition-colors duration-300"
                         >
                             <QuestionMarkIcon className="h-5 w-5" />
                             Got a question?
@@ -128,9 +128,9 @@ export const Profile: React.FC<ProfileProps> = ({ onLogout, msalInstance }) => {
 
                 {isQuestionFormVisible && (
                     <section className="mt-8 p-6 sm:p-8">
-                        <h2 className="text-2xl font-semibold text-primary-blue mb-4">Ask a Question</h2>
+                        <h2 className="text-2xl font-semibold text-oliver-black mb-4">Ask a Question</h2>
                         <form onSubmit={handleSubmitQuestion}>
-                            <p className="text-grey-700 mb-4">Your question will be sent to the OLIVER Agency support team.</p>
+                            <p className="text-oliver-black/60 mb-4">Your question will be sent to the OLIVER Agency support team.</p>
                             {submitStatus && (
                                 <div className={`mb-4 p-3 rounded-md ${submitStatus.type === 'success' ? 'bg-green-50 text-green-700 border border-green-200' : 'bg-red-50 text-red-700 border border-red-200'}`}>
                                     {submitStatus.message}
@@ -139,7 +139,7 @@ export const Profile: React.FC<ProfileProps> = ({ onLogout, msalInstance }) => {
                             <textarea
                                 value={question}
                                 onChange={(e) => setQuestion(e.target.value)}
-                                className="w-full p-3 border border-grey-300 rounded-md focus:ring-2 focus:ring-active-blue focus:border-active-blue transition text-black-title"
+                                className="w-full p-3 border border-grey-300 rounded-md focus:ring-2 focus:ring-oliver-azure focus:border-oliver-azure transition text-oliver-black"
                                 placeholder="Type your question here..."
                                 rows={5}
                                 required
@@ -148,7 +148,7 @@ export const Profile: React.FC<ProfileProps> = ({ onLogout, msalInstance }) => {
                             <div className="mt-4 flex justify-end">
                                 <button
                                     type="submit"
-                                    className="bg-active-blue text-white font-semibold py-2 px-5 rounded-md hover:bg-primary-blue transition-colors duration-300 disabled:bg-grey-300 disabled:cursor-not-allowed flex items-center gap-2"
+                                    className="bg-oliver-azure text-white font-semibold py-2 px-5 rounded-md hover:bg-oliver-azure transition-colors duration-300 disabled:bg-gray-300 disabled:cursor-not-allowed flex items-center gap-2"
                                     disabled={!question.trim() || isSubmitting}
                                 >
                                     {isSubmitting ? (
diff --git a/frontend/components/Projects.tsx b/frontend/components/Projects.tsx
index 0b0bca7..913f569 100755
--- a/frontend/components/Projects.tsx
+++ b/frontend/components/Projects.tsx
@@ -157,16 +157,16 @@ const StatusBadge: React.FC<{ status: string }> = ({ status }) => {
     let colorClasses = '';
     switch (status) {
         case 'In Progress':
-            colorClasses = 'bg-warning text-black-title';
+            colorClasses = 'bg-warning text-oliver-black';
             break;
         case 'Completed':
             colorClasses = 'bg-success text-white';
             break;
         case 'Needs Review':
-            colorClasses = 'bg-warning-light text-black-title';
+            colorClasses = 'bg-warning-light text-oliver-black';
             break;
         default:
-            colorClasses = 'bg-grey-100 text-black-title';
+            colorClasses = 'bg-oliver-grey text-oliver-black';
     }
     return (
         <span className={`px-2.5 py-0.5 text-xs font-semibold rounded-full ${colorClasses}`}>
@@ -185,7 +185,7 @@ const OverallStatusBadge: React.FC<{ status: 'Passed' | 'Failed' | 'Analysis Err
             colorClasses = 'bg-error text-white';
             break;
         case 'Analysis Error':
-            colorClasses = 'bg-grey-300 text-black-title';
+            colorClasses = 'bg-grey-300 text-oliver-black';
             break;
     }
 
@@ -209,37 +209,37 @@ const ProjectList: React.FC<{
     const filteredProjects = showCompleted ? projects : projects.filter(p => p.status !== 'Completed');
 
     const getStatusSelectClasses = (status: string) => {
-        let baseClasses = 'w-full text-center px-2.5 py-0.5 text-xs font-semibold rounded-full border border-transparent focus:outline-none focus:ring-2 focus:ring-active-blue appearance-none cursor-pointer';
+        let baseClasses = 'w-full text-center px-2.5 py-0.5 text-xs font-semibold rounded-full border border-transparent focus:outline-none focus:ring-2 focus:ring-oliver-azure appearance-none cursor-pointer';
         let colorClasses = '';
         switch (status) {
             case 'In Progress':
-                colorClasses = 'bg-warning text-black-title';
+                colorClasses = 'bg-warning text-oliver-black';
                 break;
             case 'Completed':
                 colorClasses = 'bg-success text-white';
                 break;
             default:
-                colorClasses = 'bg-grey-100 text-black-title';
+                colorClasses = 'bg-oliver-grey text-oliver-black';
         }
         return `${baseClasses} ${colorClasses}`;
     };
 
     return (
-        <div className="p-4 sm:p-6 lg:p-8 h-full bg-grey-100">
+        <div className="p-4 sm:p-6 lg:p-8 h-full bg-oliver-grey">
             <header className="mb-8">
                 <div className="flex flex-col md:flex-row justify-between items-start md:items-center gap-4">
                     <div>
-                        <h1 className="text-3xl lg:text-4xl font-bold text-primary-blue">Projects</h1>
-                        <p className="text-base lg:text-lg text-primary-blue mt-1">Manage your campaigns and proof collections.</p>
+                        <h1 className="text-3xl lg:text-4xl font-bold text-oliver-black">Projects</h1>
+                        <p className="text-base lg:text-lg text-oliver-black mt-1">Manage your campaigns and proof collections.</p>
                     </div>
                      <div className="flex items-center gap-4">
                         <div className="flex items-center gap-2">
-                            <label htmlFor="show-completed" className="text-sm font-medium text-black-title whitespace-nowrap">Show Completed</label>
+                            <label htmlFor="show-completed" className="text-sm font-medium text-oliver-black whitespace-nowrap">Show Completed</label>
                             <ToggleSwitch enabled={showCompleted} onChange={setShowCompleted} />
                         </div>
                         <button
                             onClick={onOpenModal}
-                            className="flex items-center gap-2 bg-active-blue text-white font-semibold py-2 px-4 rounded-full hover:bg-primary-blue transition-colors duration-300"
+                            className="flex items-center gap-2 bg-oliver-azure text-white font-semibold py-2 px-4 rounded-full hover:bg-oliver-azure transition-colors duration-300"
                         >
                             <PlusIcon className="h-5 w-5" />
                             Create New Project
@@ -252,22 +252,22 @@ const ProjectList: React.FC<{
                 <div className="bg-white rounded-[10px] shadow-md overflow-hidden border border-grey-300">
                     <div className="overflow-x-auto">
                         <table className="min-w-full divide-y divide-grey-300">
-                            <thead className="bg-lime">
+                            <thead className="bg-oliver-sky">
                                 <tr>
-                                    <th scope="col" className="px-6 py-3 text-left text-xs font-bold text-black-title uppercase tracking-wider">Project Name</th>
-                                    <th scope="col" className="px-6 py-3 text-left text-xs font-bold text-black-title uppercase tracking-wider">Proofs</th>
-                                    <th scope="col" className="px-6 py-3 text-left text-xs font-bold text-black-title uppercase tracking-wider">Status</th>
-                                    <th scope="col" className="px-6 py-3 text-left text-xs font-bold text-black-title uppercase tracking-wider">Created By</th>
-                                    <th scope="col" className="px-6 py-3 text-left text-xs font-bold text-black-title uppercase tracking-wider">Owning Agency</th>
-                                    <th scope="col" className="px-6 py-3 text-left text-xs font-bold text-black-title uppercase tracking-wider">Last Modified</th>
+                                    <th scope="col" className="px-6 py-3 text-left text-xs font-bold text-oliver-black uppercase tracking-wider">Project Name</th>
+                                    <th scope="col" className="px-6 py-3 text-left text-xs font-bold text-oliver-black uppercase tracking-wider">Proofs</th>
+                                    <th scope="col" className="px-6 py-3 text-left text-xs font-bold text-oliver-black uppercase tracking-wider">Status</th>
+                                    <th scope="col" className="px-6 py-3 text-left text-xs font-bold text-oliver-black uppercase tracking-wider">Created By</th>
+                                    <th scope="col" className="px-6 py-3 text-left text-xs font-bold text-oliver-black uppercase tracking-wider">Owning Agency</th>
+                                    <th scope="col" className="px-6 py-3 text-left text-xs font-bold text-oliver-black uppercase tracking-wider">Last Modified</th>
                                 </tr>
                             </thead>
                             <tbody className="bg-white divide-y divide-grey-300">
                                 {filteredProjects.map((project) => {
                                     return (
-                                        <tr key={project.name} className="hover:bg-info-light cursor-pointer even:bg-grey-100" onClick={() => onSelectProject(project.name)}>
-                                            <td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-primary-blue">{project.name}</td>
-                                            <td className="px-6 py-4 whitespace-nowrap text-sm text-black-title">{project.assets}</td>
+                                        <tr key={project.name} className="hover:bg-oliver-grey cursor-pointer even:bg-oliver-grey" onClick={() => onSelectProject(project.name)}>
+                                            <td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-oliver-black">{project.name}</td>
+                                            <td className="px-6 py-4 whitespace-nowrap text-sm text-oliver-black">{project.assets}</td>
                                             <td className="px-6 py-4 whitespace-nowrap text-sm w-40">
                                                 <div className="relative">
                                                     <select
@@ -280,12 +280,12 @@ const ProjectList: React.FC<{
                                                         <option value="In Progress">In Progress</option>
                                                         <option value="Completed">Completed</option>
                                                     </select>
-                                                    <ChevronDownIcon className="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2 h-full w-4 text-black-title" />
+                                                    <ChevronDownIcon className="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2 h-full w-4 text-oliver-black" />
                                                 </div>
                                             </td>
-                                            <td className="px-6 py-4 whitespace-nowrap text-sm text-black-title">{project.agencyLead}</td>
-                                            <td className="px-6 py-4 whitespace-nowrap text-sm text-black-title">{project.agency}</td>
-                                            <td className="px-6 py-4 whitespace-nowrap text-sm text-black-title">{project.lastModified}</td>
+                                            <td className="px-6 py-4 whitespace-nowrap text-sm text-oliver-black">{project.agencyLead}</td>
+                                            <td className="px-6 py-4 whitespace-nowrap text-sm text-oliver-black">{project.agency}</td>
+                                            <td className="px-6 py-4 whitespace-nowrap text-sm text-oliver-black">{project.lastModified}</td>
                                         </tr>
                                     );
                                 })}
@@ -345,11 +345,11 @@ const ProjectAssetUpload: React.FC<{
 
     return (
         <section className="bg-white rounded-[10px] shadow-md p-6 border border-grey-300 mb-8">
-            <h2 className="text-xl font-bold text-primary-blue mb-4">Upload New Proof</h2>
+            <h2 className="text-xl font-bold text-oliver-black mb-4">Upload New Proof</h2>
             <form onSubmit={handleSubmit} className="space-y-4">
                 <div>
-                    <label htmlFor="asset-name" className="flex items-center text-sm font-medium text-black-title mb-1">
-                        <DocumentIcon className="h-5 w-5 mr-2 text-active-blue shrink-0" />
+                    <label htmlFor="asset-name" className="flex items-center text-sm font-medium text-oliver-black mb-1">
+                        <DocumentIcon className="h-5 w-5 mr-2 text-oliver-azure shrink-0" />
                         Proof Name
                     </label>
                     <input
@@ -359,11 +359,11 @@ const ProjectAssetUpload: React.FC<{
                         onChange={(e) => setAssetName(e.target.value)}
                         placeholder="e.g., Q4 Hero Instagram Post"
                         disabled={isLoading}
-                        className="w-full bg-white border border-grey-300 rounded-[10px] py-2 px-3 text-black-title focus:outline-none focus:ring-2 focus:ring-active-blue disabled:bg-grey-100"
+                        className="w-full bg-white border border-grey-300 rounded-[10px] py-2 px-3 text-oliver-black focus:outline-none focus:ring-2 focus:ring-oliver-azure disabled:bg-oliver-grey"
                         required
                     />
                      {isNewVersion && (
-                        <p className="text-xs text-active-blue mt-2 p-2 bg-info-light rounded-[10px]">
+                        <p className="text-xs text-oliver-azure mt-2 p-2 bg-oliver-grey rounded-[10px]">
                             A proof with this name already exists. This will be uploaded as a new version.
                         </p>
                     )}
@@ -371,8 +371,8 @@ const ProjectAssetUpload: React.FC<{
                 <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                     {/* Channel Dropdown */}
                     <div>
-                        <label htmlFor="asset-channel" className="flex items-center text-sm font-medium text-black-title mb-1">
-                            <ChannelIcon className="h-5 w-5 mr-2 text-active-blue shrink-0" />
+                        <label htmlFor="asset-channel" className="flex items-center text-sm font-medium text-oliver-black mb-1">
+                            <ChannelIcon className="h-5 w-5 mr-2 text-oliver-azure shrink-0" />
                             Channel
                         </label>
                         <div className="relative">
@@ -381,21 +381,21 @@ const ProjectAssetUpload: React.FC<{
                                 value={channel}
                                 onChange={(e) => setChannel(e.target.value)}
                                 disabled={isLoading}
-                                className="w-full bg-white border border-grey-300 rounded-[10px] py-2 pl-3 pr-10 text-black-title focus:outline-none focus:ring-2 focus:ring-active-blue appearance-none disabled:bg-grey-100"
+                                className="w-full bg-white border border-grey-300 rounded-[10px] py-2 pl-3 pr-10 text-oliver-black focus:outline-none focus:ring-2 focus:ring-oliver-azure appearance-none disabled:bg-oliver-grey"
                                 required
                             >
                                 <option value="" disabled>Select Channel</option>
                                 {availableChannels.map(opt => <option key={opt} value={opt}>{opt}</option>)}
                             </select>
-                            <div className="pointer-events-none absolute inset-y-0 right-0 flex items-center px-3 text-grey-700">
+                            <div className="pointer-events-none absolute inset-y-0 right-0 flex items-center px-3 text-oliver-black/60">
                                 <ChevronDownIcon className="h-4 w-4" />
                             </div>
                         </div>
                     </div>
                     {/* Sub-Channel Dropdown */}
                     <div>
-                        <label htmlFor="asset-sub-channel" className="flex items-center text-sm font-medium text-black-title mb-1">
-                            <TagIcon className="h-5 w-5 mr-2 text-active-blue shrink-0" />
+                        <label htmlFor="asset-sub-channel" className="flex items-center text-sm font-medium text-oliver-black mb-1">
+                            <TagIcon className="h-5 w-5 mr-2 text-oliver-azure shrink-0" />
                             Sub-Channel
                         </label>
                         <div className="relative">
@@ -404,13 +404,13 @@ const ProjectAssetUpload: React.FC<{
                                 value={subChannel}
                                 onChange={(e) => setSubChannel(e.target.value)}
                                 disabled={isLoading || !channel}
-                                className="w-full bg-white border border-grey-300 rounded-[10px] py-2 pl-3 pr-10 text-black-title focus:outline-none focus:ring-2 focus:ring-active-blue appearance-none disabled:bg-grey-100 disabled:text-grey-700"
+                                className="w-full bg-white border border-grey-300 rounded-[10px] py-2 pl-3 pr-10 text-oliver-black focus:outline-none focus:ring-2 focus:ring-oliver-azure appearance-none disabled:bg-oliver-grey disabled:text-oliver-black/60"
                                 required
                             >
                                 <option value="" disabled>Select Sub-Channel</option>
                                 {availableSubChannels.map(opt => <option key={opt} value={opt}>{opt}</option>)}
                             </select>
-                            <div className="pointer-events-none absolute inset-y-0 right-0 flex items-center px-3 text-grey-700">
+                            <div className="pointer-events-none absolute inset-y-0 right-0 flex items-center px-3 text-oliver-black/60">
                                 <ChevronDownIcon className="h-4 w-4" />
                             </div>
                         </div>
@@ -418,27 +418,27 @@ const ProjectAssetUpload: React.FC<{
                 </div>
 
                 <div>
-                    <label className="block text-sm font-medium text-black-title mb-1">Proof File</label>
+                    <label className="block text-sm font-medium text-oliver-black mb-1">Proof File</label>
                     <div className="mt-1 flex justify-center px-6 pt-5 pb-6 border-2 border-grey-300 border-dashed rounded-[10px]">
                         <div className="space-y-1 text-center">
-                            <UploadIcon className="mx-auto h-12 w-12 text-grey-700" />
-                            <div className="flex text-sm text-black-title">
-                                <label htmlFor="file-upload" className="relative cursor-pointer bg-white rounded-[10px] font-medium text-active-blue hover:text-primary-blue focus-within:outline-none focus-within:ring-2 focus-within:ring-offset-2 focus-within:ring-active-blue">
+                            <UploadIcon className="mx-auto h-12 w-12 text-oliver-black/60" />
+                            <div className="flex text-sm text-oliver-black">
+                                <label htmlFor="file-upload" className="relative cursor-pointer bg-white rounded-[10px] font-medium text-oliver-azure hover:text-oliver-black focus-within:outline-none focus-within:ring-2 focus-within:ring-offset-2 focus-within:ring-oliver-azure">
                                     <span>Upload a file</span>
                                     <input id="file-upload" name="file-upload" type="file" className="sr-only" ref={fileInputRef} onChange={handleFileChange} disabled={isLoading} accept="image/png, image/jpeg, image/webp, image/gif, video/mp4, application/pdf" />
                                 </label>
                                 <p className="pl-1">or drag and drop</p>
                             </div>
-                            {file ? <p className="text-sm font-semibold text-primary-blue mt-2">{file.name}</p> : <p className="text-xs text-grey-900">PNG, JPG, GIF, WEBP, MP4, PDF</p>}
+                            {file ? <p className="text-sm font-semibold text-oliver-black mt-2">{file.name}</p> : <p className="text-xs text-oliver-black">PNG, JPG, GIF, WEBP, MP4, PDF</p>}
                         </div>
                     </div>
                 </div>
 
                 <div className="flex justify-end pt-2 gap-3">
-                     <button type="button" onClick={onCancel} disabled={isLoading} className="bg-grey-300 text-black-title font-semibold py-2.5 px-5 rounded-full hover:bg-grey-700 hover:text-white transition-colors duration-300 disabled:opacity-50">
+                     <button type="button" onClick={onCancel} disabled={isLoading} className="bg-grey-300 text-oliver-black font-semibold py-2.5 px-5 rounded-full hover:bg-gray-500 hover:text-white transition-colors duration-300 disabled:opacity-50">
                         Cancel
                     </button>
-                    <button type="submit" disabled={isSubmitDisabled} className="flex items-center justify-center bg-active-blue text-white font-bold py-2.5 px-5 rounded-full hover:bg-primary-blue transition-all duration-300 disabled:bg-grey-700 disabled:cursor-not-allowed">
+                    <button type="submit" disabled={isSubmitDisabled} className="flex items-center justify-center bg-oliver-azure text-white font-bold py-2.5 px-5 rounded-full hover:bg-oliver-azure transition-all duration-300 disabled:bg-gray-400 disabled:cursor-not-allowed">
                         {isLoading ? (
                             <>
                                 <svg className="animate-spin -ml-1 mr-3 h-5 w-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
@@ -472,11 +472,11 @@ const LoadingCell: React.FC<{ progress: { completed: number; total: number } }>
         <div className="flex flex-col items-center justify-center h-full px-2 text-center w-full">
             <div className="w-full bg-grey-300 rounded-full h-1.5 mb-1.5">
                 <div
-                    className="bg-active-blue h-1.5 rounded-full"
+                    className="bg-oliver-azure h-1.5 rounded-full"
                     style={{ width: `${percent}%`, transition: 'width 0.3s ease-in-out' }}
                 ></div>
             </div>
-            <span className="text-xs text-black-title truncate w-full">{statusText} ({percent}%)</span>
+            <span className="text-xs text-oliver-black truncate w-full">{statusText} ({percent}%)</span>
         </div>
     );
 };
@@ -514,8 +514,8 @@ const AnalysisErrorModal: React.FC<{
                         <ExclamationTriangleIcon className="h-6 w-6 text-red-600" />
                     </div>
                     <div>
-                        <h3 className="text-xl font-bold text-primary-blue">Analysis Error</h3>
-                        <p className="text-sm text-grey-700 mt-0.5">{assetName}</p>
+                        <h3 className="text-xl font-bold text-oliver-black">Analysis Error</h3>
+                        <p className="text-sm text-oliver-black/60 mt-0.5">{assetName}</p>
                     </div>
                 </div>
 
@@ -528,11 +528,11 @@ const AnalysisErrorModal: React.FC<{
 
                 {failedAgents.length > 0 && (
                     <div className="space-y-3">
-                        <h4 className="text-sm font-semibold text-grey-700">Agent Details</h4>
+                        <h4 className="text-sm font-semibold text-oliver-black/60">Agent Details</h4>
                         {failedAgents.map(agent => (
-                            <div key={agent.label} className="bg-grey-100 rounded-lg p-3">
-                                <p className="text-sm font-medium text-primary-blue">{agent.label}</p>
-                                <p className="text-sm text-grey-700 mt-1">{agent.review.feedback}</p>
+                            <div key={agent.label} className="bg-oliver-grey rounded-lg p-3">
+                                <p className="text-sm font-medium text-oliver-black">{agent.label}</p>
+                                <p className="text-sm text-oliver-black/60 mt-1">{agent.review.feedback}</p>
                             </div>
                         ))}
                     </div>
@@ -542,7 +542,7 @@ const AnalysisErrorModal: React.FC<{
                     <button
                         type="button"
                         onClick={onClose}
-                        className="border-2 border-active-blue text-active-blue font-semibold py-2 px-6 rounded-full hover:bg-active-blue hover:text-white transition-colors"
+                        className="border-2 border-oliver-azure text-oliver-azure font-semibold py-2 px-6 rounded-full hover:bg-oliver-azure hover:text-white transition-colors"
                     >
                         Close
                     </button>
@@ -571,15 +571,15 @@ const DeleteConfirmationModal: React.FC<{
                 className="bg-white rounded-[10px] shadow-xl p-6 sm:p-8 w-full max-w-md transform transition-all"
                 onClick={e => e.stopPropagation()}
             >
-                <h3 className="text-xl font-bold text-primary-blue">Confirm Deletion</h3>
-                <p className="text-black-title my-4">
+                <h3 className="text-xl font-bold text-oliver-black">Confirm Deletion</h3>
+                <p className="text-oliver-black my-4">
                     Are you sure you want to permanently delete the proof "{assetName}"? This action cannot be undone.
                 </p>
                 <div className="mt-6 flex justify-end gap-3">
                     <button
                         type="button"
                         onClick={onClose}
-                        className="bg-grey-300 text-black-title font-semibold py-2 px-4 rounded-full hover:bg-grey-700 hover:text-white transition-colors"
+                        className="bg-grey-300 text-oliver-black font-semibold py-2 px-4 rounded-full hover:bg-gray-500 hover:text-white transition-colors"
                     >
                         Cancel
                     </button>
@@ -649,7 +649,7 @@ const ProjectDetail: React.FC<{
 
 
     return (
-        <div className="p-4 sm:p-6 lg:p-8 h-full bg-grey-100">
+        <div className="p-4 sm:p-6 lg:p-8 h-full bg-oliver-grey">
             <DeleteConfirmationModal
                 isOpen={!!assetToDelete}
                 onClose={() => setAssetToDelete(null)}
@@ -677,15 +677,15 @@ const ProjectDetail: React.FC<{
                 <div className="flex items-center gap-4">
                     <button
                         onClick={onBack}
-                        className="p-2 text-grey-700 rounded-full hover:bg-grey-300 hover:text-primary-blue transition-colors duration-200"
+                        className="p-2 text-oliver-black/60 rounded-full hover:bg-grey-300 hover:text-oliver-black transition-colors duration-200"
                         title="Back to projects"
                         aria-label="Back to projects list"
                     >
                         <ArrowLeftIcon className="h-6 w-6" />
                     </button>
                     <div>
-                        <h1 className="text-3xl lg:text-4xl font-bold text-primary-blue">{projectName}</h1>
-                        <p className="text-base lg:text-lg text-primary-blue mt-1">Proof overview and compliance status.</p>
+                        <h1 className="text-3xl lg:text-4xl font-bold text-oliver-black">{projectName}</h1>
+                        <p className="text-base lg:text-lg text-oliver-black mt-1">Proof overview and compliance status.</p>
                     </div>
                 </div>
             </header>
@@ -708,14 +708,14 @@ const ProjectDetail: React.FC<{
                     <div className="mb-6 flex justify-end gap-3">
                         <button
                             onClick={() => console.log('Download all proofs clicked')}
-                            className="flex items-center gap-2 bg-white text-active-blue font-semibold py-2 px-4 rounded-full border-2 border-active-blue hover:bg-active-blue/10 transition-colors duration-300"
+                            className="flex items-center gap-2 bg-white text-oliver-azure font-semibold py-2 px-4 rounded-full border-2 border-oliver-azure hover:bg-oliver-azure/10 transition-colors duration-300"
                         >
                             <DownloadIcon className="h-5 w-5" />
                             Download All Proofs
                         </button>
                         <button
                             onClick={() => setIsUploadFormVisible(true)}
-                            className="flex items-center gap-2 bg-active-blue text-white font-semibold py-2 px-4 rounded-full hover:bg-primary-blue transition-colors duration-300"
+                            className="flex items-center gap-2 bg-oliver-azure text-white font-semibold py-2 px-4 rounded-full hover:bg-oliver-azure transition-colors duration-300"
                         >
                             <PlusIcon className="h-5 w-5" />
                             Upload New Proof
@@ -725,13 +725,13 @@ const ProjectDetail: React.FC<{
                 <div className="bg-white rounded-[10px] shadow-md overflow-hidden border border-grey-300">
                     <div className="overflow-x-auto">
                         <table className="min-w-full divide-y divide-grey-300">
-                            <thead className="bg-lime">
+                            <thead className="bg-oliver-sky">
                                 <tr>
-                                    <th scope="col" className="px-6 py-3 text-left text-xs font-bold text-black-title uppercase tracking-wider">Proof Name</th>
-                                    <th scope="col" className="px-6 py-3 text-left text-xs font-bold text-black-title uppercase tracking-wider">Workfront #</th>
-                                    <th scope="col" className="px-6 py-3 text-left text-xs font-bold text-black-title uppercase tracking-wider">Channel</th>
-                                    <th scope="col" className="px-6 py-3 text-left text-xs font-bold text-black-title uppercase tracking-wider">Sub-Channel</th>
-                                    <th scope="col" className="px-6 py-3 text-left text-xs font-bold text-black-title uppercase tracking-wider">Overall Status</th>
+                                    <th scope="col" className="px-6 py-3 text-left text-xs font-bold text-oliver-black uppercase tracking-wider">Proof Name</th>
+                                    <th scope="col" className="px-6 py-3 text-left text-xs font-bold text-oliver-black uppercase tracking-wider">Workfront #</th>
+                                    <th scope="col" className="px-6 py-3 text-left text-xs font-bold text-oliver-black uppercase tracking-wider">Channel</th>
+                                    <th scope="col" className="px-6 py-3 text-left text-xs font-bold text-oliver-black uppercase tracking-wider">Sub-Channel</th>
+                                    <th scope="col" className="px-6 py-3 text-left text-xs font-bold text-oliver-black uppercase tracking-wider">Overall Status</th>
                                     <th scope="col" className="relative px-6 py-3"><span className="sr-only">Actions</span></th>
                                 </tr>
                             </thead>
@@ -739,17 +739,17 @@ const ProjectDetail: React.FC<{
                                 {assets.map((asset, index) => {
                                     if (asset.status === 'analyzing') {
                                         return (
-                                            <tr key={asset.tempId} className="bg-grey-100 opacity-80">
-                                                <td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-primary-blue">{asset.assetName}</td>
-                                                <td className="px-6 py-4 whitespace-nowrap text-sm text-grey-700 italic">Pending</td>
-                                                <td className="px-6 py-4 whitespace-nowrap text-sm text-black-title">{asset.channel}</td>
-                                                <td className="px-6 py-4 whitespace-nowrap text-sm text-black-title">{asset.subChannel}</td>
+                                            <tr key={asset.tempId} className="bg-oliver-grey opacity-80">
+                                                <td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-oliver-black">{asset.assetName}</td>
+                                                <td className="px-6 py-4 whitespace-nowrap text-sm text-oliver-black/60 italic">Pending</td>
+                                                <td className="px-6 py-4 whitespace-nowrap text-sm text-oliver-black">{asset.channel}</td>
+                                                <td className="px-6 py-4 whitespace-nowrap text-sm text-oliver-black">{asset.subChannel}</td>
                                                 <td className="px-6 py-4" colSpan={2}>
                                                     {asset.analysisProgress ?
                                                         <LoadingCell progress={asset.analysisProgress} /> :
                                                         <div className="flex justify-center items-center h-full">
-                                                            <SpinnerIcon className="h-5 w-5 text-active-blue custom-spinner" />
-                                                            <span className="ml-2 text-sm text-black-title">Preparing...</span>
+                                                            <SpinnerIcon className="h-5 w-5 text-oliver-azure custom-spinner" />
+                                                            <span className="ml-2 text-sm text-oliver-black">Preparing...</span>
                                                         </div>
                                                     }
                                                 </td>
@@ -760,10 +760,10 @@ const ProjectDetail: React.FC<{
                                     if (asset.status === 'error') {
                                         return (
                                             <tr key={asset.tempId} className="bg-error-light">
-                                                <td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-primary-blue">{asset.assetName}</td>
-                                                <td className="px-6 py-4 whitespace-nowrap text-sm text-grey-700 italic">Failed</td>
-                                                <td className="px-6 py-4 whitespace-nowrap text-sm text-black-title">{asset.channel}</td>
-                                                <td className="px-6 py-4 whitespace-nowrap text-sm text-black-title">{asset.subChannel}</td>
+                                                <td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-oliver-black">{asset.assetName}</td>
+                                                <td className="px-6 py-4 whitespace-nowrap text-sm text-oliver-black/60 italic">Failed</td>
+                                                <td className="px-6 py-4 whitespace-nowrap text-sm text-oliver-black">{asset.channel}</td>
+                                                <td className="px-6 py-4 whitespace-nowrap text-sm text-oliver-black">{asset.subChannel}</td>
                                                 <td className="px-6 py-4 whitespace-nowrap text-sm text-error font-semibold" colSpan={2}>
                                                     <div className="flex items-center justify-between">
                                                         <button
@@ -774,7 +774,7 @@ const ProjectDetail: React.FC<{
                                                         </button>
                                                         <button
                                                             onClick={() => onRetryAnalysis(projectName, asset.tempId || asset._id)}
-                                                            className="flex items-center gap-1.5 text-xs font-semibold text-active-blue hover:text-primary-blue whitespace-nowrap px-3 py-1.5 rounded-full bg-active-blue/10 hover:bg-active-blue/20 transition-colors"
+                                                            className="flex items-center gap-1.5 text-xs font-semibold text-oliver-azure hover:text-oliver-black whitespace-nowrap px-3 py-1.5 rounded-full bg-oliver-azure/10 hover:bg-oliver-azure/20 transition-colors"
                                                         >
                                                             <ArrowPathIcon className="h-4 w-4" />
                                                             Retry
@@ -794,20 +794,20 @@ const ProjectDetail: React.FC<{
                                     return (
                                         <tr
                                             key={latestVersion.workfrontId || index}
-                                            className={isClickable ? "hover:bg-info-light cursor-pointer even:bg-grey-100" : "even:bg-grey-100"}
+                                            className={isClickable ? "hover:bg-oliver-grey cursor-pointer even:bg-oliver-grey" : "even:bg-oliver-grey"}
                                             onClick={() => isClickable && onSelectAsset(asset)}
                                         >
-                                            <td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-primary-blue">
+                                            <td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-oliver-black">
                                                 {asset.assetName}
                                                 {isVersioned && (
-                                                    <span className="ml-2 bg-grey-300 text-black-title text-xs font-bold px-2 py-0.5 rounded-full">
+                                                    <span className="ml-2 bg-grey-300 text-oliver-black text-xs font-bold px-2 py-0.5 rounded-full">
                                                         V{latestVersion.version}
                                                     </span>
                                                 )}
                                             </td>
-                                            <td className="px-6 py-4 whitespace-nowrap text-sm text-black-title">{latestVersion.workfrontId}</td>
-                                            <td className="px-6 py-4 whitespace-nowrap text-sm text-black-title">{asset.channel}</td>
-                                            <td className="px-6 py-4 whitespace-nowrap text-sm text-black-title">{asset.subChannel}</td>
+                                            <td className="px-6 py-4 whitespace-nowrap text-sm text-oliver-black">{latestVersion.workfrontId}</td>
+                                            <td className="px-6 py-4 whitespace-nowrap text-sm text-oliver-black">{asset.channel}</td>
+                                            <td className="px-6 py-4 whitespace-nowrap text-sm text-oliver-black">{asset.subChannel}</td>
                                             <td className="px-6 py-4 whitespace-nowrap text-sm">
                                                 <OverallStatusBadge status={latestVersion.overallStatus} />
                                             </td>
@@ -815,7 +815,7 @@ const ProjectDetail: React.FC<{
                                                 <div className="flex items-center justify-end gap-1">
                                                      <button
                                                         onClick={(e) => handleNewVersionClick(e, asset)}
-                                                        className="p-2 text-grey-700 rounded-full hover:bg-info-light hover:text-active-blue transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+                                                        className="p-2 text-oliver-black/60 rounded-full hover:bg-oliver-grey hover:text-oliver-azure transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
                                                         title={`Upload new version of ${asset.assetName}`}
                                                         disabled={isUploading}
                                                     >
@@ -823,7 +823,7 @@ const ProjectDetail: React.FC<{
                                                     </button>
                                                     <button
                                                         onClick={(e) => { e.stopPropagation(); console.log('Download proof clicked'); }}
-                                                        className="p-2 text-grey-700 rounded-full hover:bg-success-light hover:text-success transition-colors"
+                                                        className="p-2 text-oliver-black/60 rounded-full hover:bg-success-light hover:text-success transition-colors"
                                                         title={`Download ${asset.assetName}`}
                                                     >
                                                         <DownloadIcon className="h-5 w-5" />
@@ -833,7 +833,7 @@ const ProjectDetail: React.FC<{
                                                             e.stopPropagation();
                                                             setAssetToDelete(asset);
                                                         }}
-                                                        className="p-2 text-grey-700 rounded-full hover:bg-error-light hover:text-error transition-colors"
+                                                        className="p-2 text-oliver-black/60 rounded-full hover:bg-error-light hover:text-error transition-colors"
                                                         title={`Delete ${asset.assetName}`}
                                                     >
                                                         <TrashIcon className="h-5 w-5" />
@@ -923,20 +923,20 @@ const AssetDetailView: React.FC<{
     }
 
     return (
-        <div className="p-4 sm:p-6 lg:p-8 h-full bg-grey-100">
+        <div className="p-4 sm:p-6 lg:p-8 h-full bg-oliver-grey">
             <header className="mb-8">
                 <div className="flex items-center gap-4">
                     <button
                         onClick={onBack}
-                        className="p-2 text-grey-700 rounded-full hover:bg-grey-300 hover:text-primary-blue transition-colors duration-200"
+                        className="p-2 text-oliver-black/60 rounded-full hover:bg-grey-300 hover:text-oliver-black transition-colors duration-200"
                         title="Back to project details"
                         aria-label="Back to project details"
                     >
                         <ArrowLeftIcon className="h-6 w-6" />
                     </button>
                     <div>
-                        <h1 className="text-3xl lg:text-4xl font-bold text-primary-blue">{asset.assetName}</h1>
-                        <p className="text-base lg:text-lg text-primary-blue mt-1">Detailed AI feedback report.</p>
+                        <h1 className="text-3xl lg:text-4xl font-bold text-oliver-black">{asset.assetName}</h1>
+                        <p className="text-base lg:text-lg text-oliver-black mt-1">Detailed AI feedback report.</p>
                     </div>
                 </div>
             </header>
@@ -945,7 +945,7 @@ const AssetDetailView: React.FC<{
                 <div className="lg:col-span-1">
                     <div className="sticky top-8 flex flex-col gap-y-6">
                         <div>
-                             <h2 className="text-2xl font-bold text-primary-blue mb-4">
+                             <h2 className="text-2xl font-bold text-oliver-black mb-4">
                                 Proof Preview
                             </h2>
                             <AssetPreview 
@@ -956,14 +956,14 @@ const AssetDetailView: React.FC<{
 
                         <div>
                             <div className="flex items-center justify-between mb-3 gap-2">
-                                <h3 className="text-xl font-bold text-primary-blue flex items-center gap-2">
-                                    <HistoryIcon className="h-6 w-6 text-active-blue"/>
+                                <h3 className="text-xl font-bold text-oliver-black flex items-center gap-2">
+                                    <HistoryIcon className="h-6 w-6 text-oliver-azure"/>
                                     Version History
                                 </h3>
                                 <div className="flex items-center gap-2">
                                     <button
                                         onClick={() => console.log('Download version clicked')}
-                                        className="flex items-center gap-2 text-sm bg-active-blue text-white font-semibold py-1.5 px-3 rounded-full border border-transparent hover:bg-primary-blue transition-colors duration-200"
+                                        className="flex items-center gap-2 text-sm bg-oliver-azure text-white font-semibold py-1.5 px-3 rounded-full border border-transparent hover:bg-oliver-azure transition-colors duration-200"
                                         title={`Download Version ${selectedVersion.version}`}
                                     >
                                         <DownloadIcon className="h-4 w-4" />
@@ -972,7 +972,7 @@ const AssetDetailView: React.FC<{
                                     <button
                                         onClick={handleUploadClick}
                                         disabled={isUploadingNewVersion}
-                                        className="flex items-center gap-2 text-sm bg-white text-active-blue font-semibold py-1.5 px-3 rounded-full border-2 border-active-blue hover:bg-active-blue/10 transition-colors duration-200 disabled:bg-grey-300 disabled:text-grey-700 disabled:cursor-wait"
+                                        className="flex items-center gap-2 text-sm bg-white text-oliver-azure font-semibold py-1.5 px-3 rounded-full border-2 border-oliver-azure hover:bg-oliver-azure/10 transition-colors duration-200 disabled:bg-gray-300 disabled:text-oliver-black/60 disabled:cursor-wait"
                                         title="Upload a new version of this proof"
                                     >
                                         {isUploadingNewVersion ? (
@@ -1006,15 +1006,15 @@ const AssetDetailView: React.FC<{
                                             onClick={() => setSelectedVersionIndex(index)}
                                             className={`w-full text-left p-3 rounded-[10px] border-2 transition-all ${
                                                 isActive
-                                                ? 'bg-info-light border-active-blue shadow-sm'
-                                                : 'bg-white border-grey-300 hover:border-active-blue/50 hover:bg-grey-100'
+                                                ? 'bg-oliver-grey border-oliver-azure shadow-sm'
+                                                : 'bg-white border-grey-300 hover:border-oliver-azure/50 hover:bg-oliver-grey'
                                             }`}
                                         >
                                             <div className="flex justify-between items-center">
-                                                <p className={`font-bold ${isActive ? 'text-primary-blue' : 'text-black-title'}`}>Version {version.version}</p>
-                                                <p className="text-xs text-grey-700">{version.timestamp}</p>
+                                                <p className={`font-bold ${isActive ? 'text-oliver-black' : 'text-oliver-black'}`}>Version {version.version}</p>
+                                                <p className="text-xs text-oliver-black/60">{version.timestamp}</p>
                                             </div>
-                                            <p className="text-sm text-black-title mt-1">Workfront ID: {version.workfrontId}</p>
+                                            <p className="text-sm text-oliver-black mt-1">Workfront ID: {version.workfrontId}</p>
                                         </button>
                                     );
                                 })}
diff --git a/frontend/components/ProofPreview.tsx b/frontend/components/ProofPreview.tsx
index c929570..a86f04e 100755
--- a/frontend/components/ProofPreview.tsx
+++ b/frontend/components/ProofPreview.tsx
@@ -128,7 +128,7 @@ export const ProofPreview: React.FC<ProofPreviewProps> = ({ file, previewUrl, fi
                 style={{ minHeight: '300px', maxHeight: 'calc(100vh - 9rem)' }}
             >
                 <DocumentIcon className="h-20 w-20 text-gray-400 mb-4" />
-                <p className="text-lg font-semibold text-primary-blue break-all">{displayName}</p>
+                <p className="text-lg font-semibold text-oliver-black break-all">{displayName}</p>
                 <p className="text-sm text-gray-500">{fileType}</p>
                 <p className="text-sm text-gray-500 mt-2">No preview available for this file type.</p>
             </div>
diff --git a/frontend/components/ProofTypeManager.tsx b/frontend/components/ProofTypeManager.tsx
index afafcfe..da78c20 100755
--- a/frontend/components/ProofTypeManager.tsx
+++ b/frontend/components/ProofTypeManager.tsx
@@ -39,7 +39,7 @@ export const ProofTypeManager: React.FC<ProofTypeManagerProps> = ({
 
     return (
         <div className="bg-white rounded-lg shadow-md p-6 border border-gray-200 flex flex-col h-full">
-            <h2 className="text-xl font-bold text-primary-blue mb-2">Proof Type Manager</h2>
+            <h2 className="text-xl font-bold text-oliver-black mb-2">Proof Type Manager</h2>
             <p className="text-sm text-gray-500 mb-4">Assign and manage specific proof types for each sub-channel.</p>
             
             <div className="mb-4">
@@ -51,7 +51,7 @@ export const ProofTypeManager: React.FC<ProofTypeManagerProps> = ({
                         id="subchannel-select"
                         value={selectedSubChannel}
                         onChange={(e) => setSelectedSubChannel(e.target.value)}
-                        className="w-full bg-white border border-gray-300 rounded-md py-2 pl-3 pr-10 text-gray-900 focus:outline-none focus:ring-2 focus:ring-active-blue appearance-none disabled:bg-gray-100"
+                        className="w-full bg-white border border-gray-300 rounded-md py-2 pl-3 pr-10 text-gray-900 focus:outline-none focus:ring-2 focus:ring-oliver-azure appearance-none disabled:bg-gray-100"
                         disabled={disabled}
                     >
                         {subChannels.map(sc => (
@@ -70,12 +70,12 @@ export const ProofTypeManager: React.FC<ProofTypeManagerProps> = ({
                     value={newItem}
                     onChange={(e) => setNewItem(e.target.value)}
                     placeholder="New Proof Type..."
-                    className="flex-grow p-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-active-blue focus:border-active-blue transition disabled:bg-gray-100 disabled:cursor-not-allowed"
+                    className="flex-grow p-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-oliver-azure focus:border-oliver-azure transition disabled:bg-gray-100 disabled:cursor-not-allowed"
                     disabled={disabled || !selectedSubChannel}
                 />
                 <button
                     type="submit"
-                    className="bg-active-blue text-white font-semibold py-2 px-4 rounded-md hover:bg-primary-blue transition-colors duration-300 disabled:bg-gray-400 disabled:cursor-not-allowed"
+                    className="bg-oliver-azure text-white font-semibold py-2 px-4 rounded-md hover:bg-oliver-azure transition-colors duration-300 disabled:bg-gray-400 disabled:cursor-not-allowed"
                     disabled={!newItem.trim() || disabled || !selectedSubChannel}
                 >
                     Add
diff --git a/frontend/components/ProofUpload.tsx b/frontend/components/ProofUpload.tsx
index 7bafaae..cc45adf 100755
--- a/frontend/components/ProofUpload.tsx
+++ b/frontend/components/ProofUpload.tsx
@@ -36,7 +36,7 @@ export const AssetUpload: React.FC<AssetUploadProps> = ({ onFileUpload, isLoadin
                 onClick={handleClick}
                 disabled={isDisabled}
                 title={isUploadDisabled ? "Please complete all selections above" : "Upload a proof for review"}
-                className="w-full bg-cyan-brand text-primary-blue font-bold py-3 px-6 rounded-full hover:bg-white transition-all duration-300 disabled:bg-gray-500 disabled:opacity-60 disabled:cursor-not-allowed flex items-center justify-center"
+                className="w-full bg-oliver-azure text-oliver-black font-bold py-3 px-6 rounded-full hover:bg-white transition-all duration-300 disabled:bg-gray-500 disabled:opacity-60 disabled:cursor-not-allowed flex items-center justify-center"
             >
                 {isLoading ? (
                     <>
diff --git a/frontend/components/Settings.tsx b/frontend/components/Settings.tsx
index 99c8acc..7f9814b 100755
--- a/frontend/components/Settings.tsx
+++ b/frontend/components/Settings.tsx
@@ -29,7 +29,7 @@ const ManagementCard: React.FC<ManagementCardProps> = ({ title, items, onAdd, on
 
     return (
         <div className="p-6 flex flex-col h-full">
-            <h2 className="text-xl font-semibold text-primary-blue mb-4">{title}</h2>
+            <h2 className="text-xl font-semibold text-oliver-black mb-4">{title}</h2>
 
             <form onSubmit={handleSubmit} className="flex gap-2 mb-4">
                 <input
@@ -37,12 +37,12 @@ const ManagementCard: React.FC<ManagementCardProps> = ({ title, items, onAdd, on
                     value={newItem}
                     onChange={(e) => setNewItem(e.target.value)}
                     placeholder={placeholder || `New ${title.slice(0, -1)}...`}
-                    className="flex-grow p-2 border-2 border-grey-700 rounded-[10px] focus:ring-2 focus:ring-active-blue focus:border-active-blue transition disabled:bg-grey-100 disabled:cursor-not-allowed text-black-title"
+                    className="flex-grow p-2 border-2 border-oliver-azure rounded-[10px] focus:ring-2 focus:ring-oliver-azure focus:border-oliver-azure transition disabled:bg-oliver-grey disabled:cursor-not-allowed text-oliver-black"
                     disabled={disabled}
                 />
                 <button
                     type="submit"
-                    className="bg-active-blue text-white font-semibold py-2 px-6 rounded-full hover:bg-active-blue/90 transition-colors duration-300 disabled:bg-grey-700 disabled:cursor-not-allowed"
+                    className="bg-oliver-azure text-white font-semibold py-2 px-6 rounded-full hover:bg-oliver-azure/90 transition-colors duration-300 disabled:bg-gray-400 disabled:cursor-not-allowed"
                     disabled={!newItem.trim() || disabled}
                 >
                     Add
@@ -55,12 +55,12 @@ const ManagementCard: React.FC<ManagementCardProps> = ({ title, items, onAdd, on
                         {items.map((item) => (
                             <li
                                 key={item}
-                                className="flex items-center justify-between bg-grey-100 p-2.5 rounded-[10px] border border-grey-300 group hover:border-active-blue/30 transition-colors"
+                                className="flex items-center justify-between bg-oliver-grey p-2.5 rounded-[10px] border border-grey-300 group hover:border-oliver-azure/30 transition-colors"
                             >
-                                <span className="text-black-title">{item}</span>
+                                <span className="text-oliver-black">{item}</span>
                                 <button
                                     onClick={() => onRemove(item)}
-                                    className={`text-grey-700 hover:text-error transition-opacity ${disabled ? 'opacity-0 cursor-not-allowed' : 'opacity-0 group-hover:opacity-100'}`}
+                                    className={`text-oliver-black/60 hover:text-error transition-opacity ${disabled ? 'opacity-0 cursor-not-allowed' : 'opacity-0 group-hover:opacity-100'}`}
                                     title={`Remove ${item}`}
                                     disabled={disabled}
                                 >
@@ -70,7 +70,7 @@ const ManagementCard: React.FC<ManagementCardProps> = ({ title, items, onAdd, on
                         ))}
                     </ul>
                 ) : (
-                    <div className="text-center py-8 text-grey-700 bg-grey-100 rounded-[10px]">
+                    <div className="text-center py-8 text-oliver-black/60 bg-oliver-grey rounded-[10px]">
                         No items found.
                     </div>
                 )}
@@ -158,49 +158,49 @@ const UsersTab: React.FC = () => {
         <div className="space-y-8">
             {/* Add User Section */}
             <div className="p-6">
-                <h3 className="text-lg font-semibold text-primary-blue mb-4 flex items-center gap-2">
-                    <PlusIcon className="h-5 w-5 text-active-blue" />
+                <h3 className="text-lg font-semibold text-oliver-black mb-4 flex items-center gap-2">
+                    <PlusIcon className="h-5 w-5 text-oliver-azure" />
                     Add New User
                 </h3>
                 <form onSubmit={handleAddUser} className="grid grid-cols-1 md:grid-cols-4 gap-4 items-end">
                     <div>
-                        <label className="block text-xs font-medium text-black-title mb-1">Name</label>
+                        <label className="block text-xs font-medium text-oliver-black mb-1">Name</label>
                         <input
                             type="text"
                             value={newName}
                             onChange={(e) => setNewName(e.target.value)}
-                            className="w-full p-2 border-2 border-grey-700 rounded-[10px] focus:ring-2 focus:ring-active-blue focus:border-active-blue text-black-title"
+                            className="w-full p-2 border-2 border-oliver-azure rounded-[10px] focus:ring-2 focus:ring-oliver-azure focus:border-oliver-azure text-oliver-black"
                             placeholder="e.g. John Smith"
                             required
                         />
                     </div>
                     <div>
-                        <label className="block text-xs font-medium text-black-title mb-1">Email</label>
+                        <label className="block text-xs font-medium text-oliver-black mb-1">Email</label>
                         <input
                             type="email"
                             value={newEmail}
                             onChange={(e) => setNewEmail(e.target.value)}
-                            className="w-full p-2 border-2 border-grey-700 rounded-[10px] focus:ring-2 focus:ring-active-blue focus:border-active-blue text-black-title"
+                            className="w-full p-2 border-2 border-oliver-azure rounded-[10px] focus:ring-2 focus:ring-oliver-azure focus:border-oliver-azure text-oliver-black"
                             placeholder="user@example.com"
                             required
                         />
                     </div>
                     <div>
-                        <label className="block text-xs font-medium text-black-title mb-1">Agency</label>
+                        <label className="block text-xs font-medium text-oliver-black mb-1">Agency</label>
                         <div className="relative">
                             <select
                                 value={newAgency}
                                 onChange={(e) => setNewAgency(e.target.value)}
-                                className="w-full p-2 border-2 border-grey-700 rounded-[10px] focus:ring-2 focus:ring-active-blue focus:border-active-blue appearance-none text-black-title"
+                                className="w-full p-2 border-2 border-oliver-azure rounded-[10px] focus:ring-2 focus:ring-oliver-azure focus:border-oliver-azure appearance-none text-oliver-black"
                             >
                                 {agencies.map(a => <option key={a} value={a}>{a}</option>)}
                             </select>
-                            <ChevronDownIcon className="absolute right-3 top-1/2 -translate-y-1/2 h-4 w-4 text-grey-700 pointer-events-none" />
+                            <ChevronDownIcon className="absolute right-3 top-1/2 -translate-y-1/2 h-4 w-4 text-oliver-black/60 pointer-events-none" />
                         </div>
                     </div>
                     <button
                         type="submit"
-                        className="bg-active-blue text-white font-semibold py-2 px-6 rounded-full hover:bg-active-blue/90 transition-colors"
+                        className="bg-oliver-azure text-white font-semibold py-2 px-6 rounded-full hover:bg-oliver-azure/90 transition-colors"
                     >
                         Add User
                     </button>
@@ -211,46 +211,46 @@ const UsersTab: React.FC = () => {
             <div className="overflow-hidden">
                 <div className="overflow-x-auto">
                     <table className="min-w-full">
-                        <thead className="bg-lime">
+                        <thead className="bg-oliver-sky">
                             <tr>
-                                <th scope="col" className="px-6 py-3 text-left text-xs font-bold text-black-title uppercase tracking-wider">Name</th>
-                                <th scope="col" className="px-6 py-3 text-left text-xs font-bold text-black-title uppercase tracking-wider">Email</th>
-                                <th scope="col" className="px-6 py-3 text-left text-xs font-bold text-black-title uppercase tracking-wider">Assigned Agency</th>
+                                <th scope="col" className="px-6 py-3 text-left text-xs font-bold text-oliver-black uppercase tracking-wider">Name</th>
+                                <th scope="col" className="px-6 py-3 text-left text-xs font-bold text-oliver-black uppercase tracking-wider">Email</th>
+                                <th scope="col" className="px-6 py-3 text-left text-xs font-bold text-oliver-black uppercase tracking-wider">Assigned Agency</th>
                                 <th scope="col" className="relative px-6 py-3"><span className="sr-only">Actions</span></th>
                             </tr>
                         </thead>
                         <tbody className="divide-y divide-grey-300">
                             {users.map((user, index) => (
-                                <tr key={user.id} className={index % 2 === 0 ? 'bg-white' : 'bg-grey-100'}>
+                                <tr key={user.id} className={index % 2 === 0 ? 'bg-white' : 'bg-oliver-grey'}>
                                     <td className="px-6 py-4 whitespace-nowrap">
                                         <div className="flex items-center">
-                                            <div className="flex-shrink-0 h-8 w-8 rounded-full bg-info-light flex items-center justify-center text-active-blue">
+                                            <div className="flex-shrink-0 h-8 w-8 rounded-full bg-oliver-grey flex items-center justify-center text-oliver-azure">
                                                 <UserIcon className="h-4 w-4" />
                                             </div>
                                             <div className="ml-4">
-                                                <div className="text-sm font-medium text-black-title">{user.name}</div>
+                                                <div className="text-sm font-medium text-oliver-black">{user.name}</div>
                                             </div>
                                         </div>
                                     </td>
-                                    <td className="px-6 py-4 whitespace-nowrap text-sm text-black-title">
+                                    <td className="px-6 py-4 whitespace-nowrap text-sm text-oliver-black">
                                         {user.email}
                                     </td>
-                                    <td className="px-6 py-4 whitespace-nowrap text-sm text-black-title">
+                                    <td className="px-6 py-4 whitespace-nowrap text-sm text-oliver-black">
                                         <div className="relative max-w-xs">
                                             <select
                                                 value={user.agency}
                                                 onChange={(e) => handleAgencyChange(user.id, e.target.value)}
-                                                className="w-full bg-white border-2 border-active-blue text-black-title py-1.5 pl-3 pr-8 rounded-[10px] text-sm focus:outline-none focus:ring-2 focus:ring-active-blue appearance-none"
+                                                className="w-full bg-white border-2 border-oliver-azure text-oliver-black py-1.5 pl-3 pr-8 rounded-[10px] text-sm focus:outline-none focus:ring-2 focus:ring-oliver-azure appearance-none"
                                             >
                                                 {agencies.map(a => <option key={a} value={a}>{a}</option>)}
                                             </select>
-                                            <ChevronDownIcon className="absolute right-2 top-1/2 -translate-y-1/2 h-3 w-3 text-active-blue pointer-events-none" />
+                                            <ChevronDownIcon className="absolute right-2 top-1/2 -translate-y-1/2 h-3 w-3 text-oliver-azure pointer-events-none" />
                                         </div>
                                     </td>
                                     <td className="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
                                         <button
                                             onClick={() => handleDeleteUser(user.id)}
-                                            className="text-grey-700 hover:text-error transition-colors"
+                                            className="text-oliver-black/60 hover:text-error transition-colors"
                                             title="Remove User"
                                         >
                                             <TrashIcon className="h-5 w-5" />
@@ -321,12 +321,12 @@ export const Settings: React.FC<SettingsProps> = ({
     return (
         <div className="p-4 sm:p-6 lg:p-8 h-full bg-white flex flex-col">
             <header className="mb-6 flex-shrink-0">
-                <h1 className="text-3xl lg:text-4xl font-semibold text-primary-blue">Settings</h1>
-                <p className="text-base lg:text-lg text-primary-blue mt-1">
+                <h1 className="text-3xl lg:text-4xl font-semibold text-oliver-black">Settings</h1>
+                <p className="text-base lg:text-lg text-oliver-black mt-1">
                     Configure application defaults and user access.
                 </p>
                 {readOnly && (
-                    <div className="mt-3 inline-flex items-center gap-2 bg-info-light border border-active-blue text-active-blue text-sm font-medium px-4 py-2 rounded-[10px]">
+                    <div className="mt-3 inline-flex items-center gap-2 bg-oliver-grey border border-oliver-azure text-oliver-azure text-sm font-medium px-4 py-2 rounded-[10px]">
                         <svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" strokeWidth={2} stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" d="M2.036 12.322a1.012 1.012 0 010-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178z" /><path strokeLinecap="round" strokeLinejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" /></svg>
                         View-only mode
                     </div>
@@ -350,8 +350,8 @@ export const Settings: React.FC<SettingsProps> = ({
                                 className={`
                                     whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm transition-colors
                                     ${activeTab === tab.id
-                                        ? 'border-active-blue text-active-blue'
-                                        : 'border-transparent text-black-title hover:text-active-blue hover:border-grey-300'
+                                        ? 'border-oliver-azure text-oliver-azure'
+                                        : 'border-transparent text-oliver-black hover:text-oliver-azure hover:border-grey-300'
                                     }
                                 `}
                                 aria-current={activeTab === tab.id ? 'page' : undefined}
@@ -393,17 +393,17 @@ export const Settings: React.FC<SettingsProps> = ({
                     {activeTab === 'SubChannels' && (
                         <div className="max-w-3xl space-y-4">
                             <div className="bg-white p-4 rounded-[10px] border border-grey-300 shadow-sm">
-                                <label className="block text-sm font-medium text-black-title mb-2">Select Parent Channel</label>
+                                <label className="block text-sm font-medium text-oliver-black mb-2">Select Parent Channel</label>
                                 <div className="relative">
                                     <select
                                         value={selectedChannel}
                                         onChange={(e) => setSelectedChannel(e.target.value)}
-                                        className={`w-full p-2 border-2 rounded-[10px] focus:ring-2 focus:ring-active-blue appearance-none text-black-title ${selectedChannel ? 'bg-info-light border-active-blue' : 'border-active-blue'}`}
+                                        className={`w-full p-2 border-2 rounded-[10px] focus:ring-2 focus:ring-oliver-azure appearance-none text-oliver-black ${selectedChannel ? 'bg-oliver-grey border-oliver-azure' : 'border-oliver-azure'}`}
                                     >
                                         <option value="" disabled>Select Channel</option>
                                         {Object.keys(options.channels).map(c => <option key={c} value={c}>{c}</option>)}
                                     </select>
-                                    <ChevronDownIcon className="absolute right-3 top-1/2 -translate-y-1/2 h-4 w-4 text-active-blue pointer-events-none"/>
+                                    <ChevronDownIcon className="absolute right-3 top-1/2 -translate-y-1/2 h-4 w-4 text-oliver-azure pointer-events-none"/>
                                 </div>
                             </div>
 
@@ -422,7 +422,7 @@ export const Settings: React.FC<SettingsProps> = ({
                         <div className="max-w-3xl space-y-4">
                             <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                                 <div className="bg-white p-4 rounded-[10px] border border-grey-300 shadow-sm">
-                                    <label className="block text-sm font-medium text-black-title mb-2">Select Channel</label>
+                                    <label className="block text-sm font-medium text-oliver-black mb-2">Select Channel</label>
                                     <div className="relative">
                                         <select
                                             value={selectedChannel}
@@ -430,22 +430,22 @@ export const Settings: React.FC<SettingsProps> = ({
                                                 setSelectedChannel(e.target.value);
                                                 setSelectedSubChannel('');
                                             }}
-                                            className={`w-full p-2 border-2 rounded-[10px] focus:ring-2 focus:ring-active-blue appearance-none text-black-title ${selectedChannel ? 'bg-info-light border-active-blue' : 'border-active-blue'}`}
+                                            className={`w-full p-2 border-2 rounded-[10px] focus:ring-2 focus:ring-oliver-azure appearance-none text-oliver-black ${selectedChannel ? 'bg-oliver-grey border-oliver-azure' : 'border-oliver-azure'}`}
                                         >
                                             <option value="" disabled>Select Channel</option>
                                             {Object.keys(options.channels).map(c => <option key={c} value={c}>{c}</option>)}
                                         </select>
-                                        <ChevronDownIcon className="absolute right-3 top-1/2 -translate-y-1/2 h-4 w-4 text-active-blue pointer-events-none"/>
+                                        <ChevronDownIcon className="absolute right-3 top-1/2 -translate-y-1/2 h-4 w-4 text-oliver-azure pointer-events-none"/>
                                     </div>
                                 </div>
 
                                 <div className="bg-white p-4 rounded-[10px] border border-grey-300 shadow-sm">
-                                    <label className="block text-sm font-medium text-black-title mb-2">Select Sub-Channel</label>
+                                    <label className="block text-sm font-medium text-oliver-black mb-2">Select Sub-Channel</label>
                                     <div className="relative">
                                         <select
                                             value={selectedSubChannel}
                                             onChange={(e) => setSelectedSubChannel(e.target.value)}
-                                            className={`w-full p-2 border-2 rounded-[10px] focus:ring-2 focus:ring-active-blue appearance-none text-black-title disabled:bg-grey-100 disabled:border-grey-300 ${selectedSubChannel ? 'bg-info-light border-active-blue' : 'border-active-blue'}`}
+                                            className={`w-full p-2 border-2 rounded-[10px] focus:ring-2 focus:ring-oliver-azure appearance-none text-oliver-black disabled:bg-oliver-grey disabled:border-grey-300 ${selectedSubChannel ? 'bg-oliver-grey border-oliver-azure' : 'border-oliver-azure'}`}
                                             disabled={!selectedChannel}
                                         >
                                             <option value="" disabled>Select Sub-Channel</option>
@@ -453,7 +453,7 @@ export const Settings: React.FC<SettingsProps> = ({
                                                 <option key={sc} value={sc}>{sc}</option>
                                             ))}
                                         </select>
-                                        <ChevronDownIcon className="absolute right-3 top-1/2 -translate-y-1/2 h-4 w-4 text-active-blue pointer-events-none"/>
+                                        <ChevronDownIcon className="absolute right-3 top-1/2 -translate-y-1/2 h-4 w-4 text-oliver-azure pointer-events-none"/>
                                     </div>
                                 </div>
                             </div>
diff --git a/frontend/components/Sidebar.tsx b/frontend/components/Sidebar.tsx
index e96b880..25c1ef9 100755
--- a/frontend/components/Sidebar.tsx
+++ b/frontend/components/Sidebar.tsx
@@ -1,6 +1,5 @@
 
 import React from 'react';
-import { BarclaysLogo } from './icons/BarclaysLogo';
 import { DashboardIcon } from './icons/DashboardIcon';
 import { AnalyticsIcon } from './icons/AnalyticsIcon';
 import { SettingsIcon } from './icons/SettingsIcon';
@@ -36,19 +35,10 @@ interface SidebarProps {
 
 export const Sidebar: React.FC<SidebarProps> = ({ activeItem, onNavigate, userName, userEmail, userRole }) => {
     return (
-        <aside className="w-72 flex-shrink-0 bg-primary-blue text-slate-200 flex flex-col border-r border-white/10 font-sans">
+        <aside className="w-72 flex-shrink-0 bg-oliver-black text-slate-200 flex flex-col font-sans">
             {/* Brand Header */}
             <div className="py-6 px-8 border-b border-white/10 flex flex-col items-center text-center">
-                <BarclaysLogo className="h-10 w-auto text-cyan-brand mb-2" />
-                <span className="text-lg font-bold tracking-tight text-white leading-tight">
-                    Mod Comms
-                </span>
-                <span className="text-xs text-lime uppercase tracking-widest font-semibold">
-                    Compliance AI
-                </span>
-                <span className="text-xs text-grey-700 tracking-wider mt-0.5">
-                    powered by <span className="font-bold">OLIVER</span>
-                </span>
+                <img src="/BAR-ModComms-logo-v4.png" alt="Mod Comms AI" className="h-12 w-auto" />
             </div>
 
             {/* Navigation */}
@@ -63,7 +53,7 @@ export const Sidebar: React.FC<SidebarProps> = ({ activeItem, onNavigate, userNa
                             onClick={() => onNavigate(item.name)}
                             className={`group w-full flex items-center pl-8 pr-4 py-3.5 text-left text-sm font-medium transition-all duration-300 ease-in-out ${
                                 isActive
-                                ? 'bg-white text-primary-blue shadow-lg rounded-r-[10px] rounded-l-none'
+                                ? 'bg-oliver-azure text-white shadow-lg rounded-r-[10px] rounded-l-none'
                                 : 'text-slate-300 hover:bg-white/10 hover:text-white rounded-[10px]'
                             }`}
                             aria-current={isActive ? 'page' : undefined}
@@ -76,7 +66,7 @@ export const Sidebar: React.FC<SidebarProps> = ({ activeItem, onNavigate, userNa
             </nav>
 
             {/* User Profile Snippet */}
-            <div className="p-4 border-t border-white/10 bg-primary-blue/80">
+            <div className="p-4 border-t border-white/10 bg-oliver-black/80">
                  <button
                     onClick={() => onNavigate('Profile')}
                     className={`group w-full flex items-center gap-3 p-3 rounded-[10px] text-left transition-all duration-200 ${
@@ -85,7 +75,7 @@ export const Sidebar: React.FC<SidebarProps> = ({ activeItem, onNavigate, userNa
                         : 'hover:bg-white/10'
                     }`}
                 >
-                    <div className="w-10 h-10 rounded-full bg-active-blue flex items-center justify-center ring-2 ring-white/20 group-hover:ring-active-blue/50 transition-all">
+                    <div className="w-10 h-10 rounded-full bg-oliver-azure flex items-center justify-center ring-2 ring-white/20 group-hover:ring-oliver-azure/50 transition-all">
                         <UserIcon className="h-5 w-5 text-white" />
                     </div>
                     <div className="overflow-hidden">
diff --git a/frontend/components/StatusDashboard.tsx b/frontend/components/StatusDashboard.tsx
index 2ebd819..4917750 100755
--- a/frontend/components/StatusDashboard.tsx
+++ b/frontend/components/StatusDashboard.tsx
@@ -35,7 +35,7 @@ const StatusInfo: React.FC<StatusInfoProps> = ({ status, isHeroVariant = false }
         complete: 'text-success',
         issues: 'text-warning',
         error: 'text-error',
-        pending: 'text-grey-700'
+        pending: 'text-oliver-black/60'
     };
 
     switch (status) {
@@ -80,18 +80,18 @@ export const StatusDashboard: React.FC<StatusDashboardProps> = ({ status, varian
                 case 'error':
                     return `${defaultBase} bg-error-light border-error`;
                 default: // 'pending' or 'in-progress'
-                    return `${defaultBase} bg-grey-100 border-grey-300`;
+                    return `${defaultBase} bg-oliver-grey border-grey-300`;
             }
         }
     };
 
     return (
         <div className={isHeroVariant ? '' : "mb-12"}>
-            <h3 className={`text-2xl font-bold text-center mb-8 ${isHeroVariant ? 'text-white' : 'text-primary-blue'}`}>Review Progress</h3>
+            <h3 className={`text-2xl font-bold text-center mb-8 ${isHeroVariant ? 'text-white' : 'text-oliver-black'}`}>Review Progress</h3>
             <div className={`grid grid-cols-2 sm:grid-cols-3 md:grid-cols-5 ${isHeroVariant ? 'gap-4' : 'gap-6'}`}>
                 {AGENT_NAMES.map((agentName) => {
                     const agentStatus = status[agentName] || 'pending';
-                    const iconColor = isHeroVariant ? 'text-cyan-brand' : 'text-active-blue';
+                    const iconColor = isHeroVariant ? 'text-oliver-azure' : 'text-oliver-azure';
                     const Icon = agentIcons[agentName];
 
                     return (
@@ -100,11 +100,11 @@ export const StatusDashboard: React.FC<StatusDashboardProps> = ({ status, varian
                                 <div className="mb-3 h-8 w-8 flex items-center justify-center">
                                     <Icon className={`h-8 w-8 ${iconColor}`} />
                                 </div>
-                                <h4 className={`text-base font-bold ${isHeroVariant ? 'text-white' : 'text-primary-blue'}`}>{agentName}</h4>
+                                <h4 className={`text-base font-bold ${isHeroVariant ? 'text-white' : 'text-oliver-black'}`}>{agentName}</h4>
                             </div>
                             <div className="font-semibold text-xs mt-2 h-6 flex items-center justify-center">
                                 {agentStatus === 'in-progress' ? (
-                                    <div className={`flex items-center ${isHeroVariant ? 'text-white/80' : 'text-grey-700'}`}>
+                                    <div className={`flex items-center ${isHeroVariant ? 'text-white/80' : 'text-oliver-black/60'}`}>
                                         <SpinnerIcon className="h-4 w-4 mr-2 custom-spinner" />
                                         <span>Analysing...</span>
                                     </div>
diff --git a/frontend/components/ToggleSwitch.tsx b/frontend/components/ToggleSwitch.tsx
index cb6f22a..c3aab8c 100755
--- a/frontend/components/ToggleSwitch.tsx
+++ b/frontend/components/ToggleSwitch.tsx
@@ -9,8 +9,8 @@ export const ToggleSwitch: React.FC<ToggleSwitchProps> = ({ enabled, onChange })
   return (
     <button
       type="button"
-      className={`relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-active-blue focus:ring-offset-2 ${
-        enabled ? 'bg-active-blue' : 'bg-gray-300'
+      className={`relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-oliver-azure focus:ring-offset-2 ${
+        enabled ? 'bg-oliver-azure' : 'bg-gray-300'
       }`}
       role="switch"
       aria-checked={enabled}
diff --git a/frontend/components/UserManagement.tsx b/frontend/components/UserManagement.tsx
index 54e816e..fb10255 100644
--- a/frontend/components/UserManagement.tsx
+++ b/frontend/components/UserManagement.tsx
@@ -195,11 +195,11 @@ export const UserManagement: React.FC = () => {
         return (
             <div className="p-8 flex items-center justify-center h-full">
                 <div className="flex flex-col items-center gap-3">
-                    <svg className="animate-spin h-8 w-8 text-active-blue" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+                    <svg className="animate-spin h-8 w-8 text-oliver-azure" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                         <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
                         <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" />
                     </svg>
-                    <p className="text-grey-700 text-sm">Loading user management...</p>
+                    <p className="text-oliver-black/60 text-sm">Loading user management...</p>
                 </div>
             </div>
         );
@@ -208,8 +208,8 @@ export const UserManagement: React.FC = () => {
     return (
         <div className="p-4 sm:p-6 lg:p-8 h-full bg-white overflow-y-auto">
             <header className="mb-6">
-                <h1 className="text-3xl lg:text-4xl font-semibold text-primary-blue">User Management</h1>
-                <p className="text-base lg:text-lg text-primary-blue mt-1">
+                <h1 className="text-3xl lg:text-4xl font-semibold text-oliver-black">User Management</h1>
+                <p className="text-base lg:text-lg text-oliver-black mt-1">
                     {isSuperAdmin
                         ? 'Manage user roles and agency assignments. Users are provisioned automatically via Azure AD.'
                         : 'View user roles and agency assignments.'}
@@ -232,34 +232,34 @@ export const UserManagement: React.FC = () => {
 
             {/* Users Table */}
             <section className="mb-10">
-                <h2 className="text-xl font-semibold text-primary-blue mb-4">Users ({users.length})</h2>
+                <h2 className="text-xl font-semibold text-oliver-black mb-4">Users ({users.length})</h2>
                 <div className="bg-white rounded-[10px] shadow-md overflow-hidden border border-grey-300">
                     <div className="overflow-x-auto">
                         <table className="min-w-full">
-                            <thead className="bg-lime">
+                            <thead className="bg-oliver-sky">
                                 <tr>
-                                    <th className="px-6 py-3 text-left text-xs font-bold text-black-title uppercase tracking-wider">Name</th>
-                                    <th className="px-6 py-3 text-left text-xs font-bold text-black-title uppercase tracking-wider">Email</th>
-                                    <th className="px-6 py-3 text-left text-xs font-bold text-black-title uppercase tracking-wider">Role</th>
-                                    <th className="px-6 py-3 text-left text-xs font-bold text-black-title uppercase tracking-wider">Agency</th>
-                                    <th className="px-6 py-3 text-left text-xs font-bold text-black-title uppercase tracking-wider">Created</th>
-                                    <th className="px-6 py-3 text-left text-xs font-bold text-black-title uppercase tracking-wider w-20"></th>
+                                    <th className="px-6 py-3 text-left text-xs font-bold text-oliver-black uppercase tracking-wider">Name</th>
+                                    <th className="px-6 py-3 text-left text-xs font-bold text-oliver-black uppercase tracking-wider">Email</th>
+                                    <th className="px-6 py-3 text-left text-xs font-bold text-oliver-black uppercase tracking-wider">Role</th>
+                                    <th className="px-6 py-3 text-left text-xs font-bold text-oliver-black uppercase tracking-wider">Agency</th>
+                                    <th className="px-6 py-3 text-left text-xs font-bold text-oliver-black uppercase tracking-wider">Created</th>
+                                    <th className="px-6 py-3 text-left text-xs font-bold text-oliver-black uppercase tracking-wider w-20"></th>
                                 </tr>
                             </thead>
                             <tbody className="divide-y divide-grey-300">
                                 {users.map((user, index) => (
-                                    <tr key={user.id} className={index % 2 === 0 ? 'bg-white' : 'bg-grey-100'}>
+                                    <tr key={user.id} className={index % 2 === 0 ? 'bg-white' : 'bg-oliver-grey'}>
                                         <td className="px-6 py-4 whitespace-nowrap">
                                             <div className="flex items-center">
-                                                <div className="flex-shrink-0 h-8 w-8 rounded-full bg-info-light flex items-center justify-center text-active-blue">
+                                                <div className="flex-shrink-0 h-8 w-8 rounded-full bg-oliver-grey flex items-center justify-center text-oliver-azure">
                                                     <UserIcon className="h-4 w-4" />
                                                 </div>
                                                 <div className="ml-3">
-                                                    <div className="text-sm font-medium text-black-title">{user.name}</div>
+                                                    <div className="text-sm font-medium text-oliver-black">{user.name}</div>
                                                 </div>
                                             </div>
                                         </td>
-                                        <td className="px-6 py-4 whitespace-nowrap text-sm text-black-title">
+                                        <td className="px-6 py-4 whitespace-nowrap text-sm text-oliver-black">
                                             {user.email}
                                         </td>
                                         <td className="px-6 py-4 whitespace-nowrap">
@@ -268,16 +268,16 @@ export const UserManagement: React.FC = () => {
                                                     <select
                                                         value={user.role}
                                                         onChange={(e) => handleRoleChange(user.id, e.target.value)}
-                                                        className="w-full bg-white border-2 border-active-blue text-black-title py-1.5 pl-3 pr-8 rounded-[10px] text-sm focus:outline-none focus:ring-2 focus:ring-active-blue appearance-none"
+                                                        className="w-full bg-white border-2 border-oliver-azure text-oliver-black py-1.5 pl-3 pr-8 rounded-[10px] text-sm focus:outline-none focus:ring-2 focus:ring-oliver-azure appearance-none"
                                                     >
                                                         {ROLE_OPTIONS.map(r => (
                                                             <option key={r.value} value={r.value}>{r.label}</option>
                                                         ))}
                                                     </select>
-                                                    <ChevronDownIcon className="absolute right-2 top-1/2 -translate-y-1/2 h-3 w-3 text-active-blue pointer-events-none" />
+                                                    <ChevronDownIcon className="absolute right-2 top-1/2 -translate-y-1/2 h-3 w-3 text-oliver-azure pointer-events-none" />
                                                 </div>
                                             ) : (
-                                                <span className="text-sm text-black-title">{formatRoleLabel(user.role)}</span>
+                                                <span className="text-sm text-oliver-black">{formatRoleLabel(user.role)}</span>
                                             )}
                                         </td>
                                         <td className="px-6 py-4 whitespace-nowrap">
@@ -286,22 +286,22 @@ export const UserManagement: React.FC = () => {
                                                     <select
                                                         value={user.agency_id || ''}
                                                         onChange={(e) => handleAgencyChange(user.id, e.target.value || null)}
-                                                        className="w-full bg-white border-2 border-active-blue text-black-title py-1.5 pl-3 pr-8 rounded-[10px] text-sm focus:outline-none focus:ring-2 focus:ring-active-blue appearance-none"
+                                                        className="w-full bg-white border-2 border-oliver-azure text-oliver-black py-1.5 pl-3 pr-8 rounded-[10px] text-sm focus:outline-none focus:ring-2 focus:ring-oliver-azure appearance-none"
                                                     >
                                                         <option value="">None (Unassigned)</option>
                                                         {agencies.map(a => (
                                                             <option key={a.id} value={a.id}>{a.name}</option>
                                                         ))}
                                                     </select>
-                                                    <ChevronDownIcon className="absolute right-2 top-1/2 -translate-y-1/2 h-3 w-3 text-active-blue pointer-events-none" />
+                                                    <ChevronDownIcon className="absolute right-2 top-1/2 -translate-y-1/2 h-3 w-3 text-oliver-azure pointer-events-none" />
                                                 </div>
                                             ) : (
-                                                <span className="text-sm text-black-title">
+                                                <span className="text-sm text-oliver-black">
                                                     {user.agency || 'Unassigned'}
                                                 </span>
                                             )}
                                         </td>
-                                        <td className="px-6 py-4 whitespace-nowrap text-sm text-grey-700">
+                                        <td className="px-6 py-4 whitespace-nowrap text-sm text-oliver-black/60">
                                             {formatDate(user.created_at)}
                                         </td>
                                         <td className="px-6 py-4 whitespace-nowrap text-sm">
@@ -309,7 +309,7 @@ export const UserManagement: React.FC = () => {
                                                 <button
                                                     onClick={() => handleOpenHistory(user)}
                                                     title="View change history"
-                                                    className="p-1 text-grey-700 hover:text-active-blue transition-colors rounded-full hover:bg-info-light"
+                                                    className="p-1 text-oliver-black/60 hover:text-oliver-azure transition-colors rounded-full hover:bg-oliver-grey"
                                                 >
                                                     <ClockIcon className="h-4 w-4" />
                                                 </button>
@@ -327,7 +327,7 @@ export const UserManagement: React.FC = () => {
                                 ))}
                                 {users.length === 0 && (
                                     <tr>
-                                        <td colSpan={6} className="px-6 py-8 text-center text-grey-700">
+                                        <td colSpan={6} className="px-6 py-8 text-center text-oliver-black/60">
                                             No users found.
                                         </td>
                                     </tr>
@@ -354,13 +354,13 @@ export const UserManagement: React.FC = () => {
                                     <path strokeLinecap="round" strokeLinejoin="round" d="M12 9v2m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                                 </svg>
                             </div>
-                            <h3 className="text-lg font-semibold text-black-title">Confirm Super Admin Assignment</h3>
+                            <h3 className="text-lg font-semibold text-oliver-black">Confirm Super Admin Assignment</h3>
                         </div>
-                        <p className="text-sm text-grey-700 mb-4">
-                            You are about to grant Super Admin privileges to <strong className="text-black-title">{pendingSuperAdminUser.userName}</strong>. This gives full system access including user management. This action should only be performed intentionally.
+                        <p className="text-sm text-oliver-black/60 mb-4">
+                            You are about to grant Super Admin privileges to <strong className="text-oliver-black">{pendingSuperAdminUser.userName}</strong>. This gives full system access including user management. This action should only be performed intentionally.
                         </p>
-                        <p className="text-sm text-grey-700 mb-2">
-                            To confirm, type <strong className="text-black-title">make this user super admin</strong> below:
+                        <p className="text-sm text-oliver-black/60 mb-2">
+                            To confirm, type <strong className="text-oliver-black">make this user super admin</strong> below:
                         </p>
                         <input
                             type="text"
@@ -373,10 +373,10 @@ export const UserManagement: React.FC = () => {
                             onDrop={(e) => e.preventDefault()}
                             onDragOver={(e) => e.preventDefault()}
                             placeholder="Type the phrase above..."
-                            className={`w-full p-2 border-2 rounded-[10px] text-sm text-black-title focus:outline-none focus:ring-2 transition ${
+                            className={`w-full p-2 border-2 rounded-[10px] text-sm text-oliver-black focus:outline-none focus:ring-2 transition ${
                                 confirmationError
                                     ? 'border-error focus:ring-error'
-                                    : 'border-grey-700 focus:ring-active-blue focus:border-active-blue'
+                                    : 'border-oliver-azure focus:ring-oliver-azure focus:border-oliver-azure'
                             }`}
                             autoFocus
                         />
@@ -386,14 +386,14 @@ export const UserManagement: React.FC = () => {
                         <div className="flex justify-end gap-3 mt-5">
                             <button
                                 onClick={handleCancelSuperAdmin}
-                                className="px-4 py-2 text-sm font-medium text-grey-700 hover:text-black-title border border-grey-300 rounded-full hover:bg-grey-100 transition-colors"
+                                className="px-4 py-2 text-sm font-medium text-oliver-black/60 hover:text-oliver-black border border-grey-300 rounded-full hover:bg-oliver-grey transition-colors"
                             >
                                 Cancel
                             </button>
                             <button
                                 onClick={handleConfirmSuperAdmin}
                                 disabled={confirmationText !== 'make this user super admin'}
-                                className="px-4 py-2 text-sm font-medium text-white bg-active-blue rounded-full hover:bg-active-blue/90 transition-colors disabled:bg-grey-700 disabled:cursor-not-allowed"
+                                className="px-4 py-2 text-sm font-medium text-white bg-oliver-azure rounded-full hover:bg-oliver-azure/90 transition-colors disabled:bg-gray-400 disabled:cursor-not-allowed"
                             >
                                 Confirm
                             </button>
@@ -413,12 +413,12 @@ export const UserManagement: React.FC = () => {
                         onClick={(e) => e.stopPropagation()}
                     >
                         <div className="flex items-center justify-between mb-4">
-                            <h3 className="text-lg font-semibold text-black-title">
+                            <h3 className="text-lg font-semibold text-oliver-black">
                                 Change History &mdash; {historyUser.name}
                             </h3>
                             <button
                                 onClick={handleCloseHistory}
-                                className="p-1 text-grey-700 hover:text-black-title transition-colors"
+                                className="p-1 text-oliver-black/60 hover:text-oliver-black transition-colors"
                             >
                                 <svg className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
                                     <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
@@ -428,32 +428,32 @@ export const UserManagement: React.FC = () => {
                         <div className="overflow-y-auto flex-1">
                             {historyLoading ? (
                                 <div className="flex items-center justify-center py-8">
-                                    <svg className="animate-spin h-6 w-6 text-active-blue" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+                                    <svg className="animate-spin h-6 w-6 text-oliver-azure" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                                         <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
                                         <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" />
                                     </svg>
                                 </div>
                             ) : historyEntries.length === 0 ? (
-                                <p className="text-center py-8 text-grey-700">No change history recorded.</p>
+                                <p className="text-center py-8 text-oliver-black/60">No change history recorded.</p>
                             ) : (
                                 <table className="min-w-full">
-                                    <thead className="bg-grey-100 sticky top-0">
+                                    <thead className="bg-oliver-grey sticky top-0">
                                         <tr>
-                                            <th className="px-4 py-2 text-left text-xs font-bold text-black-title uppercase tracking-wider">Date</th>
-                                            <th className="px-4 py-2 text-left text-xs font-bold text-black-title uppercase tracking-wider">Change</th>
-                                            <th className="px-4 py-2 text-left text-xs font-bold text-black-title uppercase tracking-wider">Changed by</th>
+                                            <th className="px-4 py-2 text-left text-xs font-bold text-oliver-black uppercase tracking-wider">Date</th>
+                                            <th className="px-4 py-2 text-left text-xs font-bold text-oliver-black uppercase tracking-wider">Change</th>
+                                            <th className="px-4 py-2 text-left text-xs font-bold text-oliver-black uppercase tracking-wider">Changed by</th>
                                         </tr>
                                     </thead>
                                     <tbody className="divide-y divide-grey-300">
                                         {historyEntries.map((entry) => (
                                             <tr key={entry.id}>
-                                                <td className="px-4 py-3 whitespace-nowrap text-sm text-grey-700">
+                                                <td className="px-4 py-3 whitespace-nowrap text-sm text-oliver-black/60">
                                                     {formatHistoryDate(entry.created_at)}
                                                 </td>
-                                                <td className="px-4 py-3 text-sm text-black-title">
+                                                <td className="px-4 py-3 text-sm text-oliver-black">
                                                     {formatChangeDescription(entry)}
                                                 </td>
-                                                <td className="px-4 py-3 whitespace-nowrap text-sm text-grey-700">
+                                                <td className="px-4 py-3 whitespace-nowrap text-sm text-oliver-black/60">
                                                     {entry.changed_by_name || 'System'}
                                                 </td>
                                             </tr>
@@ -468,7 +468,7 @@ export const UserManagement: React.FC = () => {
 
             {/* Agency Management */}
             <section>
-                <h2 className="text-xl font-semibold text-primary-blue mb-4">Agencies ({agencies.length})</h2>
+                <h2 className="text-xl font-semibold text-oliver-black mb-4">Agencies ({agencies.length})</h2>
                 <div className="max-w-xl">
                     {isSuperAdmin && (
                         <form onSubmit={handleCreateAgency} className="flex gap-2 mb-4">
@@ -477,12 +477,12 @@ export const UserManagement: React.FC = () => {
                                 value={newAgencyName}
                                 onChange={(e) => setNewAgencyName(e.target.value)}
                                 placeholder="New agency name..."
-                                className="flex-grow p-2 border-2 border-grey-700 rounded-[10px] focus:ring-2 focus:ring-active-blue focus:border-active-blue transition text-black-title"
+                                className="flex-grow p-2 border-2 border-oliver-azure rounded-[10px] focus:ring-2 focus:ring-oliver-azure focus:border-oliver-azure transition text-oliver-black"
                             />
                             <button
                                 type="submit"
                                 disabled={!newAgencyName.trim() || isCreatingAgency}
-                                className="bg-active-blue text-white font-semibold py-2 px-6 rounded-full hover:bg-active-blue/90 transition-colors disabled:bg-grey-700 disabled:cursor-not-allowed flex items-center gap-2"
+                                className="bg-oliver-azure text-white font-semibold py-2 px-6 rounded-full hover:bg-oliver-azure/90 transition-colors disabled:bg-gray-400 disabled:cursor-not-allowed flex items-center gap-2"
                             >
                                 <PlusIcon className="h-4 w-4" />
                                 Add
@@ -494,16 +494,16 @@ export const UserManagement: React.FC = () => {
                         {agencies.map(agency => (
                             <div
                                 key={agency.id}
-                                className="flex items-center justify-between bg-grey-100 p-3 rounded-[10px] border border-grey-300"
+                                className="flex items-center justify-between bg-oliver-grey p-3 rounded-[10px] border border-grey-300"
                             >
-                                <span className="text-black-title font-medium">{agency.name}</span>
-                                <span className="text-xs text-grey-700">
+                                <span className="text-oliver-black font-medium">{agency.name}</span>
+                                <span className="text-xs text-oliver-black/60">
                                     {users.filter(u => u.agency_id === agency.id).length} user(s)
                                 </span>
                             </div>
                         ))}
                         {agencies.length === 0 && (
-                            <div className="text-center py-6 text-grey-700 bg-grey-100 rounded-[10px]">
+                            <div className="text-center py-6 text-oliver-black/60 bg-oliver-grey rounded-[10px]">
                                 No agencies created yet.
                             </div>
                         )}
diff --git a/frontend/components/WIPReviewer.tsx b/frontend/components/WIPReviewer.tsx
index 82b4002..749e876 100755
--- a/frontend/components/WIPReviewer.tsx
+++ b/frontend/components/WIPReviewer.tsx
@@ -78,7 +78,7 @@ const ConfirmationComponent: React.FC<{
                     <select 
                         value={channel} 
                         onChange={e => setChannel(e.target.value)} 
-                        className="w-full bg-white border border-gray-300 rounded-md py-2 px-3 text-gray-900 focus:outline-none focus:ring-2 focus:ring-active-blue appearance-none"
+                        className="w-full bg-white border border-gray-300 rounded-md py-2 px-3 text-gray-900 focus:outline-none focus:ring-2 focus:ring-oliver-azure appearance-none"
                     >
                         <option value="" disabled>Select Channel</option>
                         {availableChannels.map(opt => <option key={opt} value={opt}>{opt}</option>)}
@@ -91,7 +91,7 @@ const ConfirmationComponent: React.FC<{
                         value={subChannel} 
                         onChange={e => setSubChannel(e.target.value)} 
                         disabled={!channel}
-                        className="w-full bg-white border border-gray-300 rounded-md py-2 px-3 text-gray-900 focus:outline-none focus:ring-2 focus:ring-active-blue appearance-none disabled:bg-gray-100"
+                        className="w-full bg-white border border-gray-300 rounded-md py-2 px-3 text-gray-900 focus:outline-none focus:ring-2 focus:ring-oliver-azure appearance-none disabled:bg-gray-100"
                     >
                         <option value="" disabled>Select Sub-Channel</option>
                         {availableSubChannels.map(opt => <option key={opt} value={opt}>{opt}</option>)}
@@ -104,7 +104,7 @@ const ConfirmationComponent: React.FC<{
                      <select 
                         value={proofType} 
                         onChange={e => setProofType(e.target.value)} 
-                        className="w-full bg-white border border-gray-300 rounded-md py-2 px-3 text-gray-900 focus:outline-none focus:ring-2 focus:ring-active-blue appearance-none"
+                        className="w-full bg-white border border-gray-300 rounded-md py-2 px-3 text-gray-900 focus:outline-none focus:ring-2 focus:ring-oliver-azure appearance-none"
                     >
                         <option value="" disabled>Select Proof Type</option>
                         {availableProofTypes.map(opt => <option key={opt} value={opt}>{opt}</option>)}
@@ -115,7 +115,7 @@ const ConfirmationComponent: React.FC<{
             <button
                 onClick={handleSubmit}
                 disabled={isSubmitDisabled}
-                className="w-full bg-active-blue text-white font-bold py-2 px-4 rounded-md hover:bg-primary-blue transition-colors disabled:bg-gray-400 disabled:cursor-not-allowed"
+                className="w-full bg-oliver-azure text-white font-bold py-2 px-4 rounded-md hover:bg-oliver-azure transition-colors disabled:bg-gray-400 disabled:cursor-not-allowed"
             >
                 Confirm &amp; Analyse
             </button>
@@ -127,12 +127,12 @@ const ConfirmationComponent: React.FC<{
 const MessageBubble: React.FC<{ sender: 'user' | 'agent'; children: React.ReactNode }> = ({ sender, children }) => {
     const isUser = sender === 'user';
     const bubbleClasses = isUser
-        ? 'bg-active-blue text-white'
+        ? 'bg-oliver-azure text-white'
         : 'bg-white text-gray-800 border border-gray-200';
     const alignmentClasses = isUser ? 'items-end' : 'items-start';
     const avatar = isUser
-        ? <div className="w-8 h-8 rounded-full bg-primary-blue flex items-center justify-center ring-2 ring-white"><UserIcon className="h-5 w-5 text-white"/></div>
-        : <div className="w-8 h-8 rounded-full bg-cyan-brand flex items-center justify-center ring-2 ring-white"><LeadAgentIcon className="h-5 w-5 text-primary-blue"/></div>;
+        ? <div className="w-8 h-8 rounded-full bg-oliver-black flex items-center justify-center ring-2 ring-white"><UserIcon className="h-5 w-5 text-white"/></div>
+        : <div className="w-8 h-8 rounded-full bg-oliver-azure flex items-center justify-center ring-2 ring-white"><LeadAgentIcon className="h-5 w-5 text-oliver-black"/></div>;
     
     const isConfirmation = React.isValidElement(children) && children.type === ConfirmationComponent;
 
@@ -247,9 +247,9 @@ export const WIPReviewer: React.FC<WIPReviewerProps> = ({ dropdownOptions, msalI
     };
     
     return (
-        <div className="flex flex-col h-full bg-grey-100">
+        <div className="flex flex-col h-full bg-oliver-grey">
             <header className="p-4 border-b border-gray-200 bg-white/80 backdrop-blur-sm flex-shrink-0">
-                <h1 className="text-xl font-bold text-primary-blue text-center">WIP Reviewer</h1>
+                <h1 className="text-xl font-bold text-oliver-black text-center">WIP Reviewer</h1>
             </header>
 
             {/* Message Display Area */}
@@ -303,7 +303,7 @@ export const WIPReviewer: React.FC<WIPReviewerProps> = ({ dropdownOptions, msalI
                             type="button"
                             onClick={() => fileInputRef.current?.click()}
                             disabled={isLoading}
-                            className="p-2 text-gray-500 hover:text-active-blue rounded-full transition-colors disabled:opacity-50"
+                            className="p-2 text-gray-500 hover:text-oliver-azure rounded-full transition-colors disabled:opacity-50"
                             aria-label="Attach file"
                         >
                             <PaperClipIcon className="h-6 w-6"/>
@@ -317,14 +317,14 @@ export const WIPReviewer: React.FC<WIPReviewerProps> = ({ dropdownOptions, msalI
                                     handleSendMessage(e);
                                 }
                             }}
-                            className="w-full p-2.5 mx-2 border border-gray-300 rounded-lg resize-none focus:ring-2 focus:ring-active-blue focus:border-active-blue transition"
+                            className="w-full p-2.5 mx-2 border border-gray-300 rounded-lg resize-none focus:ring-2 focus:ring-oliver-azure focus:border-oliver-azure transition"
                             placeholder="Type your message..."
                             rows={1}
                             disabled={isLoading}
                         />
                         <button
                             type="submit"
-                            className="p-2.5 rounded-full text-white bg-active-blue hover:bg-primary-blue disabled:bg-gray-400 transition-colors"
+                            className="p-2.5 rounded-full text-white bg-oliver-azure hover:bg-oliver-azure disabled:bg-gray-400 transition-colors"
                             disabled={!userInput.trim() || isLoading}
                             aria-label="Send message"
                         >
diff --git a/frontend/index.html b/frontend/index.html
index bfbbee0..112851c 100755
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -4,44 +4,38 @@
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Barclays Mod Comms</title>
-    <!-- Google Fonts - Inter as fallback for Barclays Effra (proprietary font not available as web font) -->
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
+    <title>Mod Comms - Intelligent Review</title>
     <script src="https://cdn.tailwindcss.com"></script>
     <script>
       tailwind.config = {
         theme: {
           extend: {
             fontFamily: {
-              // Barclays Effra is the brand font but is proprietary; Inter is the web fallback
-              'sans': ['Barclays Effra', 'Inter', 'Arial', 'sans-serif'],
+              'sans': ['Arial', 'sans-serif'],
+            },
+            borderRadius: {
+              DEFAULT: '10px',
             },
             colors: {
-              // Primary Brand Colors
-              'primary-blue': '#1A2142',
-              'active-blue': '#006DE3',
-              'electric-violet': '#7A0FF9',
-              'lime': '#C3FB5A',
-              'cyan-brand': '#00AEEF',
-              'teal-brand': '#01A1A2',
+              // Oliver Brand Colors
+              'oliver-black': '#1A1A1A',
+              'oliver-gold': '#FFCB05',
+              'oliver-orange': '#FF5C00',
+              'oliver-azure': '#0487B6',
+              'oliver-sky': '#5DF5EA',
+              'oliver-grey': '#EFEFEF',
+              'oliver-green': '#09821F',
 
-              // Functional Colors
-              'grey-100': '#F6F6F6',
-              'grey-300': '#E2E2E2',
-              'grey-700': '#8E8E8E',
-              'grey-900': '#515151',
-              'black-title': '#272727',
-
-              // Status Colors
-              'info-light': '#E7F0FB',
+              // Keep functional status colours for RAG system
               'success': '#09821F',
               'success-light': '#E9F4EA',
-              'warning': '#FFBA00',
+              'warning': '#FFCB05',
               'warning-light': '#FFF8E7',
               'error': '#E3000F',
               'error-light': '#FDE7E9',
+
+              // Keep grey scale for borders
+              'grey-300': '#E2E2E2',
             },
             animation: {
               'slow-ping': 'ping 2s cubic-bezier(0, 0, 0.2, 1) infinite',
diff --git a/frontend/public/BAR-ModComms-logo-v4.png b/frontend/public/BAR-ModComms-logo-v4.png
new file mode 100644
index 0000000000000000000000000000000000000000..9fbd57fd17cbad7132e3f5fb4725df5a57b45385
GIT binary patch
literal 32152
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

literal 0
HcmV?d00001