From 7698bbbd5aa17a7bda66dc9a1d84c1f3f4f509be Mon Sep 17 00:00:00 2001
From: michael <michael@modernfreedom.com>
Date: Tue, 27 Jan 2026 14:19:15 -0600
Subject: [PATCH] Apply Barclays brand colors to Projects.tsx and fix Sidebar
 corner radius

Updates Projects.tsx to use Barclays design system colors throughout:
- StatusBadge: bg-warning/bg-success/bg-warning-light/bg-grey-100
- OverallStatusBadge: bg-success/bg-error/bg-grey-300
- Tables: bg-lime headers, bg-grey-300 borders, even:bg-grey-100 rows
- Buttons: rounded-full pill shape, border-2 outlines
- Forms: rounded-[10px], text-black-title labels
- Hover states: hover:bg-info-light for row selection
- Delete modal: rounded-[10px], bg-error delete button

Updates Sidebar.tsx nav buttons from rounded-xl to rounded-[10px] per spec.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 frontend/components/Projects.tsx | 206 +++++++++++++++----------------
 frontend/components/Sidebar.tsx  |   2 +-
 2 files changed, 104 insertions(+), 104 deletions(-)

diff --git a/frontend/components/Projects.tsx b/frontend/components/Projects.tsx
index e6794c3..8595324 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-blue-100 text-blue-800';
+            colorClasses = 'bg-warning text-black-title';
             break;
         case 'Completed':
-            colorClasses = 'bg-green-100 text-green-800';
+            colorClasses = 'bg-success text-white';
             break;
         case 'Needs Review':
-            colorClasses = 'bg-yellow-100 text-yellow-800';
+            colorClasses = 'bg-warning-light text-black-title';
             break;
         default:
-            colorClasses = 'bg-gray-100 text-gray-800';
+            colorClasses = 'bg-grey-100 text-black-title';
     }
     return (
         <span className={`px-2.5 py-0.5 text-xs font-semibold rounded-full ${colorClasses}`}>
@@ -179,16 +179,16 @@ const OverallStatusBadge: React.FC<{ status: 'Passed' | 'Failed' | 'Analysis Err
     let colorClasses = '';
     switch (status) {
         case 'Passed':
-            colorClasses = 'bg-green-100 text-green-800';
+            colorClasses = 'bg-success text-white';
             break;
         case 'Failed':
-            colorClasses = 'bg-red-100 text-red-800';
+            colorClasses = 'bg-error text-white';
             break;
         case 'Analysis Error':
-            colorClasses = 'bg-gray-200 text-gray-800';
+            colorClasses = 'bg-grey-300 text-black-title';
             break;
     }
-    
+
     return (
         <span className={`inline-flex items-center px-3 py-1 text-sm font-bold rounded-full ${colorClasses}`}>
             {status}
@@ -213,13 +213,13 @@ const ProjectList: React.FC<{
         let colorClasses = '';
         switch (status) {
             case 'In Progress':
-                colorClasses = 'bg-blue-100 text-blue-800';
+                colorClasses = 'bg-warning text-black-title';
                 break;
             case 'Completed':
-                colorClasses = 'bg-green-100 text-green-800';
+                colorClasses = 'bg-success text-white';
                 break;
             default:
-                colorClasses = 'bg-gray-100 text-gray-800';
+                colorClasses = 'bg-grey-100 text-black-title';
         }
         return `${baseClasses} ${colorClasses}`;
     };
@@ -230,16 +230,16 @@ const ProjectList: React.FC<{
                 <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-gray-600 mt-1">Manage your campaigns and asset collections.</p>
+                        <p className="text-base lg:text-lg text-primary-blue mt-1">Manage your campaigns and asset 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-gray-700 whitespace-nowrap">Show Completed</label>
+                            <label htmlFor="show-completed" className="text-sm font-medium text-black-title 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-lg hover:bg-primary-blue transition-colors duration-300"
+                            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"
                         >
                             <PlusIcon className="h-5 w-5" />
                             Create New Project
@@ -249,25 +249,25 @@ const ProjectList: React.FC<{
             </header>
 
             <section>
-                <div className="bg-white rounded-lg shadow-md overflow-hidden border border-gray-200">
+                <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-gray-200">
-                            <thead className="bg-gray-50">
+                        <table className="min-w-full divide-y divide-grey-300">
+                            <thead className="bg-lime">
                                 <tr>
-                                    <th scope="col" className="px-6 py-3 text-left text-xs font-bold text-gray-500 uppercase tracking-wider">Project Name</th>
-                                    <th scope="col" className="px-6 py-3 text-left text-xs font-bold text-gray-500 uppercase tracking-wider">Assets</th>
-                                    <th scope="col" className="px-6 py-3 text-left text-xs font-bold text-gray-500 uppercase tracking-wider">Status</th>
-                                    <th scope="col" className="px-6 py-3 text-left text-xs font-bold text-gray-500 uppercase tracking-wider">Created By</th>
-                                    <th scope="col" className="px-6 py-3 text-left text-xs font-bold text-gray-500 uppercase tracking-wider">Owning Agency</th>
-                                    <th scope="col" className="px-6 py-3 text-left text-xs font-bold text-gray-500 uppercase tracking-wider">Last Modified</th>
+                                    <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">Assets</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>
                                 </tr>
                             </thead>
-                            <tbody className="bg-white divide-y divide-gray-200">
+                            <tbody className="bg-white divide-y divide-grey-300">
                                 {filteredProjects.map((project) => {
                                     return (
-                                        <tr key={project.name} className="hover:bg-gray-100 cursor-pointer" onClick={() => onSelectProject(project.name)}>
+                                        <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-gray-700">{project.assets}</td>
+                                            <td className="px-6 py-4 whitespace-nowrap text-sm text-black-title">{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-gray-500" />
+                                                    <ChevronDownIcon className="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2 h-full w-4 text-black-title" />
                                                 </div>
                                             </td>
-                                            <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-700">{project.agencyLead}</td>
-                                            <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-700">{project.agency}</td>
-                                            <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-700">{project.lastModified}</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>
                                         </tr>
                                     );
                                 })}
@@ -344,11 +344,11 @@ const ProjectAssetUpload: React.FC<{
     const isNewVersion = existingAssetNames.includes(assetName.trim()) && assetName.trim() !== '';
 
     return (
-        <section className="bg-white rounded-lg shadow-md p-6 border border-gray-200 mb-8">
+        <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 Asset</h2>
             <form onSubmit={handleSubmit} className="space-y-4">
                 <div>
-                    <label htmlFor="asset-name" className="flex items-center text-sm font-medium text-gray-700 mb-1">
+                    <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" />
                         Asset Name
                     </label>
@@ -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-gray-300 rounded-md py-2 px-3 text-gray-900 focus:outline-none focus:ring-2 focus:ring-active-blue disabled:bg-gray-100"
+                        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"
                         required
                     />
                      {isNewVersion && (
-                        <p className="text-xs text-blue-600 mt-2 p-2 bg-blue-50 rounded-md">
+                        <p className="text-xs text-active-blue mt-2 p-2 bg-info-light rounded-[10px]">
                             An asset with this name already exists. This will be uploaded as a new version.
                         </p>
                     )}
@@ -371,7 +371,7 @@ 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-gray-700 mb-1">
+                        <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" />
                             Channel
                         </label>
@@ -381,20 +381,20 @@ const ProjectAssetUpload: React.FC<{
                                 value={channel}
                                 onChange={(e) => setChannel(e.target.value)}
                                 disabled={isLoading}
-                                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-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"
                                 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-gray-400">
+                            <div className="pointer-events-none absolute inset-y-0 right-0 flex items-center px-3 text-grey-700">
                                 <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-gray-700 mb-1">
+                        <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" />
                             Sub-Channel
                         </label>
@@ -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-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 disabled:text-gray-400"
+                                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"
                                 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-gray-400">
+                            <div className="pointer-events-none absolute inset-y-0 right-0 flex items-center px-3 text-grey-700">
                                 <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-gray-700 mb-1">Asset File</label>
-                    <div className="mt-1 flex justify-center px-6 pt-5 pb-6 border-2 border-gray-300 border-dashed rounded-md">
+                    <label className="block text-sm font-medium text-black-title mb-1">Asset 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-gray-400" />
-                            <div className="flex text-sm text-gray-600">
-                                <label htmlFor="file-upload" className="relative cursor-pointer bg-white rounded-md 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-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">
                                     <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-gray-500">PNG, JPG, GIF, WEBP, MP4, PDF</p>}
+                            {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>}
                         </div>
                     </div>
                 </div>
 
                 <div className="flex justify-end pt-2 gap-3">
-                     <button type="button" onClick={onCancel} disabled={isLoading} className="bg-gray-200 text-gray-800 font-semibold py-2.5 px-5 rounded-lg hover:bg-gray-300 transition-colors duration-300 disabled:opacity-50">
+                     <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">
                         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-lg hover:bg-primary-blue transition-all duration-300 disabled:bg-gray-400 disabled:cursor-not-allowed">
+                    <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">
                         {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">
@@ -470,13 +470,13 @@ const LoadingCell: React.FC<{ progress: { completed: number; total: number } }>
 
     return (
         <div className="flex flex-col items-center justify-center h-full px-2 text-center w-full">
-            <div className="w-full bg-gray-200 rounded-full h-1.5 mb-1.5">
-                <div 
-                    className="bg-active-blue h-1.5 rounded-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"
                     style={{ width: `${percent}%`, transition: 'width 0.3s ease-in-out' }}
                 ></div>
             </div>
-            <span className="text-xs text-gray-600 truncate w-full">{statusText} ({percent}%)</span>
+            <span className="text-xs text-black-title truncate w-full">{statusText} ({percent}%)</span>
         </div>
     );
 };
@@ -497,25 +497,25 @@ const DeleteConfirmationModal: React.FC<{
             role="dialog"
         >
             <div
-                className="bg-white rounded-lg shadow-xl p-6 sm:p-8 w-full max-w-md transform transition-all"
+                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-gray-600 my-4">
+                <p className="text-black-title my-4">
                     Are you sure you want to permanently delete the asset "{assetName}"? This action cannot be undone.
                 </p>
                 <div className="mt-6 flex justify-end gap-3">
                     <button
                         type="button"
                         onClick={onClose}
-                        className="bg-gray-200 text-gray-800 font-semibold py-2 px-4 rounded-md hover:bg-gray-300 transition-colors"
+                        className="bg-grey-300 text-black-title font-semibold py-2 px-4 rounded-full hover:bg-grey-700 hover:text-white transition-colors"
                     >
                         Cancel
                     </button>
                     <button
                         type="button"
                         onClick={onConfirm}
-                        className="bg-red-600 text-white font-semibold py-2 px-4 rounded-md hover:bg-red-700 transition-colors"
+                        className="bg-error text-white font-semibold py-2 px-4 rounded-full hover:bg-error/80 transition-colors"
                     >
                         Delete Asset
                     </button>
@@ -598,7 +598,7 @@ const ProjectDetail: React.FC<{
                 <div className="flex items-center gap-4">
                     <button
                         onClick={onBack}
-                        className="p-2 text-gray-500 rounded-full hover:bg-gray-200 hover:text-primary-blue transition-colors duration-200"
+                        className="p-2 text-grey-700 rounded-full hover:bg-grey-300 hover:text-primary-blue transition-colors duration-200"
                         title="Back to projects"
                         aria-label="Back to projects list"
                     >
@@ -606,7 +606,7 @@ const ProjectDetail: React.FC<{
                     </button>
                     <div>
                         <h1 className="text-3xl lg:text-4xl font-bold text-primary-blue">{projectName}</h1>
-                        <p className="text-base lg:text-lg text-gray-600 mt-1">Asset overview and compliance status.</p>
+                        <p className="text-base lg:text-lg text-primary-blue mt-1">Asset overview and compliance status.</p>
                     </div>
                 </div>
             </header>
@@ -629,48 +629,48 @@ const ProjectDetail: React.FC<{
                     <div className="mb-6 flex justify-end gap-3">
                         <button
                             onClick={() => console.log('Download all assets clicked')}
-                            className="flex items-center gap-2 bg-white text-active-blue font-semibold py-2 px-4 rounded-lg border border-active-blue hover:bg-active-blue/10 transition-colors duration-300"
+                            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"
                         >
                             <DownloadIcon className="h-5 w-5" />
                             Download All Assets
                         </button>
                         <button
                             onClick={() => setIsUploadFormVisible(true)}
-                            className="flex items-center gap-2 bg-active-blue text-white font-semibold py-2 px-4 rounded-lg hover:bg-primary-blue transition-colors duration-300"
+                            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"
                         >
                             <PlusIcon className="h-5 w-5" />
                             Upload New Asset
                         </button>
                     </div>
                 )}
-                <div className="bg-white rounded-lg shadow-md overflow-hidden border border-gray-200">
+                <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-gray-200">
-                            <thead className="bg-gray-50">
+                        <table className="min-w-full divide-y divide-grey-300">
+                            <thead className="bg-lime">
                                 <tr>
-                                    <th scope="col" className="px-6 py-3 text-left text-xs font-bold text-gray-500 uppercase tracking-wider">Asset Name</th>
-                                    <th scope="col" className="px-6 py-3 text-left text-xs font-bold text-gray-500 uppercase tracking-wider">Workfront #</th>
-                                    <th scope="col" className="px-6 py-3 text-left text-xs font-bold text-gray-500 uppercase tracking-wider">Channel</th>
-                                    <th scope="col" className="px-6 py-3 text-left text-xs font-bold text-gray-500 uppercase tracking-wider">Sub-Channel</th>
-                                    <th scope="col" className="px-6 py-3 text-left text-xs font-bold text-gray-500 uppercase tracking-wider">Overall Status</th>
+                                    <th scope="col" className="px-6 py-3 text-left text-xs font-bold text-black-title uppercase tracking-wider">Asset 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="relative px-6 py-3"><span className="sr-only">Actions</span></th>
                                 </tr>
                             </thead>
-                            <tbody className="bg-white divide-y divide-gray-200">
+                            <tbody className="bg-white divide-y divide-grey-300">
                                 {assets.map((asset, index) => {
                                     if (asset.status === 'analyzing') {
                                         return (
-                                            <tr key={asset.tempId} className="bg-gray-50 opacity-80">
+                                            <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-gray-500 italic">Pending</td>
-                                                <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-700">{asset.channel}</td>
-                                                <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-700">{asset.subChannel}</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>
                                                 <td className="px-6 py-4" colSpan={2}>
-                                                    {asset.analysisProgress ? 
-                                                        <LoadingCell progress={asset.analysisProgress} /> : 
+                                                    {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-gray-600">Preparing...</span>
+                                                            <span className="ml-2 text-sm text-black-title">Preparing...</span>
                                                         </div>
                                                     }
                                                 </td>
@@ -680,15 +680,15 @@ const ProjectDetail: React.FC<{
             
                                     if (asset.status === 'error') {
                                         return (
-                                            <tr key={asset.tempId} className="bg-red-50">
+                                            <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-gray-500 italic">Failed</td>
-                                                <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-700">{asset.channel}</td>
-                                                <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-700">{asset.subChannel}</td>
-                                                <td className="px-6 py-4 whitespace-nowrap text-sm text-red-700 font-semibold" colSpan={2}>
+                                                <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 text-error font-semibold" colSpan={2}>
                                                     <div className="flex items-center justify-between">
                                                         <span>Analysis failed.</span>
-                                                        <button 
+                                                        <button
                                                             onClick={() => onRetryAnalysis(projectName, asset.tempId)}
                                                             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"
                                                         >
@@ -708,22 +708,22 @@ const ProjectDetail: React.FC<{
                                     if (!latestVersion) return null; // Should not happen for completed assets
 
                                     return (
-                                        <tr 
+                                        <tr
                                             key={latestVersion.workfrontId || index}
-                                            className={isClickable ? "hover:bg-gray-100 cursor-pointer" : ""}
+                                            className={isClickable ? "hover:bg-info-light cursor-pointer even:bg-grey-100" : "even:bg-grey-100"}
                                             onClick={() => isClickable && onSelectAsset(asset)}
                                         >
                                             <td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-primary-blue">
                                                 {asset.assetName}
                                                 {isVersioned && (
-                                                    <span className="ml-2 bg-gray-200 text-gray-700 text-xs font-bold px-2 py-0.5 rounded-full">
+                                                    <span className="ml-2 bg-grey-300 text-black-title 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-gray-700">{latestVersion.workfrontId}</td>
-                                            <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-700">{asset.channel}</td>
-                                            <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-700">{asset.subChannel}</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">
                                                 <OverallStatusBadge status={latestVersion.overallStatus} />
                                             </td>
@@ -731,7 +731,7 @@ const ProjectDetail: React.FC<{
                                                 <div className="flex items-center justify-end gap-1">
                                                      <button
                                                         onClick={(e) => handleNewVersionClick(e, asset)}
-                                                        className="p-2 text-gray-400 rounded-full hover:bg-blue-100 hover:text-blue-600 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+                                                        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"
                                                         title={`Upload new version for ${asset.assetName}`}
                                                         disabled={isUploading}
                                                     >
@@ -739,7 +739,7 @@ const ProjectDetail: React.FC<{
                                                     </button>
                                                     <button
                                                         onClick={(e) => { e.stopPropagation(); console.log('Download asset clicked'); }}
-                                                        className="p-2 text-gray-400 rounded-full hover:bg-green-100 hover:text-green-600 transition-colors"
+                                                        className="p-2 text-grey-700 rounded-full hover:bg-success-light hover:text-success transition-colors"
                                                         title={`Download ${asset.assetName}`}
                                                     >
                                                         <DownloadIcon className="h-5 w-5" />
@@ -749,7 +749,7 @@ const ProjectDetail: React.FC<{
                                                             e.stopPropagation();
                                                             setAssetToDelete(asset);
                                                         }}
-                                                        className="p-2 text-gray-400 rounded-full hover:bg-red-100 hover:text-red-600 transition-colors"
+                                                        className="p-2 text-grey-700 rounded-full hover:bg-error-light hover:text-error transition-colors"
                                                         title={`Delete ${asset.assetName}`}
                                                     >
                                                         <TrashIcon className="h-5 w-5" />
@@ -844,7 +844,7 @@ const AssetDetailView: React.FC<{
                 <div className="flex items-center gap-4">
                     <button
                         onClick={onBack}
-                        className="p-2 text-gray-500 rounded-full hover:bg-gray-200 hover:text-primary-blue transition-colors duration-200"
+                        className="p-2 text-grey-700 rounded-full hover:bg-grey-300 hover:text-primary-blue transition-colors duration-200"
                         title="Back to project details"
                         aria-label="Back to project details"
                     >
@@ -852,7 +852,7 @@ const AssetDetailView: React.FC<{
                     </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-gray-600 mt-1">Detailed AI feedback report.</p>
+                        <p className="text-base lg:text-lg text-primary-blue mt-1">Detailed AI feedback report.</p>
                     </div>
                 </div>
             </header>
@@ -879,7 +879,7 @@ const AssetDetailView: React.FC<{
                                 <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-lg border border-transparent hover:bg-primary-blue transition-colors duration-200"
+                                        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"
                                         title={`Download Version ${selectedVersion.version}`}
                                     >
                                         <DownloadIcon className="h-4 w-4" />
@@ -888,7 +888,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-lg border border-active-blue hover:bg-active-blue/10 transition-colors duration-200 disabled:bg-gray-200 disabled:text-gray-500 disabled:cursor-wait"
+                                        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"
                                         title="Upload a new version of this asset"
                                     >
                                         {isUploadingNewVersion ? (
@@ -917,20 +917,20 @@ const AssetDetailView: React.FC<{
                                 {versions.map((version: any, index: number) => {
                                     const isActive = index === selectedVersionIndex;
                                     return (
-                                        <button 
+                                        <button
                                             key={version.version}
                                             onClick={() => setSelectedVersionIndex(index)}
-                                            className={`w-full text-left p-3 rounded-lg border-2 transition-all ${
-                                                isActive 
-                                                ? 'bg-active-blue/10 border-active-blue shadow-sm'
-                                                : 'bg-white border-gray-200 hover:border-active-blue/50 hover:bg-gray-50'
+                                            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'
                                             }`}
                                         >
                                             <div className="flex justify-between items-center">
-                                                <p className={`font-bold ${isActive ? 'text-primary-blue' : 'text-gray-800'}`}>Version {version.version}</p>
-                                                <p className="text-xs text-gray-500">{version.timestamp}</p>
+                                                <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>
                                             </div>
-                                            <p className="text-sm text-gray-600 mt-1">Workfront ID: {version.workfrontId}</p>
+                                            <p className="text-sm text-black-title mt-1">Workfront ID: {version.workfrontId}</p>
                                         </button>
                                     );
                                 })}
diff --git a/frontend/components/Sidebar.tsx b/frontend/components/Sidebar.tsx
index e92c7ab..a5a9578 100755
--- a/frontend/components/Sidebar.tsx
+++ b/frontend/components/Sidebar.tsx
@@ -52,7 +52,7 @@ export const Sidebar: React.FC<SidebarProps> = ({ activeItem, onNavigate, userNa
                         <button
                             key={item.name}
                             onClick={() => !isComingSoon && onNavigate(item.name)}
-                            className={`group w-full flex items-center px-4 py-3.5 text-left text-sm font-medium rounded-xl transition-all duration-300 ease-in-out ${
+                            className={`group w-full flex items-center px-4 py-3.5 text-left text-sm font-medium rounded-[10px] transition-all duration-300 ease-in-out ${
                                 isActive
                                 ? 'bg-white text-primary-blue shadow-lg'
                                 : isComingSoon