diff --git a/EXHAUSTIVE_TODO_LIST.md b/EXHAUSTIVE_TODO_LIST.md
index 0fafb5912..d61325c04 100644
--- a/EXHAUSTIVE_TODO_LIST.md
+++ b/EXHAUSTIVE_TODO_LIST.md
@@ -3122,7 +3122,9 @@ Critical path dependencies:
     - ✅ Batch 16 complete: EducationView.tsx (6 instances)
     - ✅ Batch 17 complete: CartView.tsx (8 instances)
     - ✅ Batch 18 complete: SearchPageView.tsx (11 instances)
-    - ✅ Total: 254 instances migrated (1,492 → 1,238 remaining, ~17.0% complete)
+    - ✅ Batch 19 complete: CheckoutView.tsx (20 instances)
+    - ✅ Batch 20 complete: FileManagerView.tsx (20 instances)
+    - ✅ Total: 294 instances migrated (1,492 → 1,198 remaining, ~19.7% complete)
     - ⏳ Continuing with remaining files incrementally
   - **Validation**: No Tailwind default colors used (in progress)
   - **Rollback**: Restore Tailwind colors
diff --git a/apps/web/src/components/views/CheckoutView.tsx b/apps/web/src/components/views/CheckoutView.tsx
index 18a9c26ae..d2a6d0951 100644
--- a/apps/web/src/components/views/CheckoutView.tsx
+++ b/apps/web/src/components/views/CheckoutView.tsx
@@ -70,7 +70,7 @@ export const CheckoutView: React.FC<CheckoutViewProps> = ({
       <Button
         variant="ghost"
         onClick={onBack}
-        className="mb-6 pl-0 text-gray-400 hover:text-white"
+        className="mb-6 pl-0 text-kodo-content-dim hover:text-white"
       >
         <ArrowLeft className="w-4 h-4 mr-2" /> Back to Cart
       </Button>
@@ -80,7 +80,7 @@ export const CheckoutView: React.FC<CheckoutViewProps> = ({
         <div className="lg:col-span-2 space-y-8">
           {/* Billing Info */}
           <Card variant="default">
-            <h3 className="font-bold text-white mb-6 border-b border-gray-700 pb-2">
+            <h3 className="font-bold text-white mb-6 border-b border-kodo-steel pb-2">
               Billing Information
             </h3>
             <div className="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
@@ -119,7 +119,7 @@ export const CheckoutView: React.FC<CheckoutViewProps> = ({
                 onChange={(e) => setForm({ ...form, zip: e.target.value })}
               />
               <div>
-                <label className="block text-sm font-medium text-gray-400 mb-2">
+                <label className="block text-sm font-medium text-kodo-content-dim mb-2">
                   Country
                 </label>
                 <select
@@ -141,7 +141,7 @@ export const CheckoutView: React.FC<CheckoutViewProps> = ({
 
           {/* Payment Method (Visual Mock) */}
           <Card variant="default">
-            <h3 className="font-bold text-white mb-6 border-b border-gray-700 pb-2 flex items-center gap-2">
+            <h3 className="font-bold text-white mb-6 border-b border-kodo-steel pb-2 flex items-center gap-2">
               <Lock className="w-4 h-4 text-kodo-lime" /> Payment Method
             </h3>
 
@@ -150,23 +150,23 @@ export const CheckoutView: React.FC<CheckoutViewProps> = ({
                 <CreditCard className="w-5 h-5 text-kodo-cyan" />
                 <span className="font-bold text-white">Credit Card</span>
                 <div className="flex gap-1 ml-auto">
-                  <div className="w-8 h-5 bg-gray-700 rounded"></div>
-                  <div className="w-8 h-5 bg-gray-700 rounded"></div>
-                  <div className="w-8 h-5 bg-gray-700 rounded"></div>
+                  <div className="w-8 h-5 bg-kodo-steel rounded"></div>
+                  <div className="w-8 h-5 bg-kodo-steel rounded"></div>
+                  <div className="w-8 h-5 bg-kodo-steel rounded"></div>
                 </div>
               </div>
 
               {/* Stripe Element Simulation */}
               <div className="space-y-3">
-                <div className="bg-kodo-graphite border border-kodo-steel rounded px-3 py-3 text-sm text-gray-400 flex items-center justify-between">
+                <div className="bg-kodo-graphite border border-kodo-steel rounded px-3 py-3 text-sm text-kodo-content-dim flex items-center justify-between">
                   <span>4242 4242 4242 4242</span>
                   <CreditCard className="w-4 h-4" />
                 </div>
                 <div className="grid grid-cols-2 gap-3">
-                  <div className="bg-kodo-graphite border border-kodo-steel rounded px-3 py-3 text-sm text-gray-400">
+                  <div className="bg-kodo-graphite border border-kodo-steel rounded px-3 py-3 text-sm text-kodo-content-dim">
                     MM / YY
                   </div>
-                  <div className="bg-kodo-graphite border border-kodo-steel rounded px-3 py-3 text-sm text-gray-400">
+                  <div className="bg-kodo-graphite border border-kodo-steel rounded px-3 py-3 text-sm text-kodo-content-dim">
                     CVC
                   </div>
                 </div>
@@ -177,26 +177,26 @@ export const CheckoutView: React.FC<CheckoutViewProps> = ({
               <label className="flex items-center gap-2 cursor-pointer">
                 <input
                   type="checkbox"
-                  className="rounded border-gray-600 bg-transparent text-kodo-cyan focus:ring-0"
+                  className="rounded border-kodo-steel bg-transparent text-kodo-cyan focus:ring-0"
                   checked={form.saveInfo}
                   onChange={(e) =>
                     setForm({ ...form, saveInfo: e.target.checked })
                   }
                 />
-                <span className="text-sm text-gray-400">
+                <span className="text-sm text-kodo-content-dim">
                   Save payment information for future purchases
                 </span>
               </label>
               <label className="flex items-center gap-2 cursor-pointer">
                 <input
                   type="checkbox"
-                  className="rounded border-gray-600 bg-transparent text-kodo-cyan focus:ring-0"
+                  className="rounded border-kodo-steel bg-transparent text-kodo-cyan focus:ring-0"
                   checked={form.acceptTerms}
                   onChange={(e) =>
                     setForm({ ...form, acceptTerms: e.target.checked })
                   }
                 />
-                <span className="text-sm text-gray-400">
+                <span className="text-sm text-kodo-content-dim">
                   I accept the{' '}
                   <span className="text-white hover:underline">
                     Terms of Service
@@ -225,10 +225,10 @@ export const CheckoutView: React.FC<CheckoutViewProps> = ({
                   className="flex justify-between items-start text-sm"
                 >
                   <div className="flex-1 pr-4">
-                    <div className="text-gray-300 font-medium truncate">
+                    <div className="text-kodo-text-main font-medium truncate">
                       {item.title}
                     </div>
-                    <div className="text-xs text-gray-500">
+                    <div className="text-xs text-kodo-content-dim">
                       {item.selectedLicense?.name || 'Standard'} License
                     </div>
                   </div>
@@ -239,12 +239,12 @@ export const CheckoutView: React.FC<CheckoutViewProps> = ({
               ))}
             </div>
 
-            <div className="border-t border-gray-700 pt-4 space-y-2 mb-6">
-              <div className="flex justify-between text-sm text-gray-400">
+            <div className="border-t border-kodo-steel pt-4 space-y-2 mb-6">
+              <div className="flex justify-between text-sm text-kodo-content-dim">
                 <span>Subtotal</span>
                 <span>${cartTotal.toFixed(2)}</span>
               </div>
-              <div className="flex justify-between text-sm text-gray-400">
+              <div className="flex justify-between text-sm text-kodo-content-dim">
                 <span>Taxes</span>
                 <span>${tax.toFixed(2)}</span>
               </div>
@@ -271,7 +271,7 @@ export const CheckoutView: React.FC<CheckoutViewProps> = ({
               )}
             </Button>
 
-            <div className="text-center mt-4 flex items-center justify-center gap-2 text-xs text-gray-500">
+            <div className="text-center mt-4 flex items-center justify-center gap-2 text-xs text-kodo-content-dim">
               <Lock className="w-3 h-3" /> 256-bit SSL Encrypted
             </div>
           </div>
diff --git a/apps/web/src/components/views/FileManagerView.tsx b/apps/web/src/components/views/FileManagerView.tsx
index 1c6cbafb6..33710259a 100644
--- a/apps/web/src/components/views/FileManagerView.tsx
+++ b/apps/web/src/components/views/FileManagerView.tsx
@@ -151,7 +151,7 @@ export const FileManagerView: React.FC = () => {
           <h2 className="text-2xl font-display font-bold text-white mb-1">
             FILE MANAGER
           </h2>
-          <div className="flex items-center gap-2 text-sm text-gray-400">
+          <div className="flex items-center gap-2 text-sm text-kodo-content-dim">
             <span
               className="hover:text-white cursor-pointer"
               onClick={() => setCurrentFolder('Root')}
@@ -187,7 +187,7 @@ export const FileManagerView: React.FC = () => {
           <div className="bg-kodo-ink p-1 rounded-lg border border-kodo-steel flex">
             <button
               onClick={() => setViewMode('list')}
-              className={`p-2 rounded ${viewMode === 'list' ? 'bg-kodo-slate text-white' : 'text-gray-400 hover:text-white'}`}
+              className={`p-2 rounded ${viewMode === 'list' ? 'bg-kodo-slate text-white' : 'text-kodo-content-dim hover:text-white'}`}
               aria-label="Vue liste"
               aria-pressed={viewMode === 'list'}
             >
@@ -195,7 +195,7 @@ export const FileManagerView: React.FC = () => {
             </button>
             <button
               onClick={() => setViewMode('grid')}
-              className={`p-2 rounded ${viewMode === 'grid' ? 'bg-kodo-slate text-white' : 'text-gray-400 hover:text-white'}`}
+              className={`p-2 rounded ${viewMode === 'grid' ? 'bg-kodo-slate text-white' : 'text-kodo-content-dim hover:text-white'}`}
               aria-label="Vue grille"
               aria-pressed={viewMode === 'grid'}
             >
@@ -223,21 +223,21 @@ export const FileManagerView: React.FC = () => {
             <div className="h-4 w-px bg-kodo-cyan/30 mx-2"></div>
             <button
               onClick={() => handleBulkAction('Downloaded')}
-              className="text-gray-300 hover:text-white"
+              className="text-kodo-text-main hover:text-white"
               title="Download"
             >
               <Download className="w-4 h-4" />
             </button>
             <button
               onClick={() => handleBulkAction('Moved')}
-              className="text-gray-300 hover:text-white"
+              className="text-kodo-text-main hover:text-white"
               title="Move"
             >
               <Move className="w-4 h-4" />
             </button>
             <button
               onClick={() => handleBulkAction('Deleted')}
-              className="text-red-400 hover:text-red-300"
+              className="text-kodo-red hover:text-kodo-red/80"
               title="Delete"
             >
               <Trash2 className="w-4 h-4" />
@@ -270,7 +270,7 @@ export const FileManagerView: React.FC = () => {
             <div className="overflow-x-auto">
               <table className="w-full text-left border-collapse">
                 <thead>
-                  <tr className="border-b border-kodo-steel bg-kodo-ink/50 text-xs font-mono text-gray-500 uppercase tracking-wider">
+                  <tr className="border-b border-kodo-steel bg-kodo-ink/50 text-xs font-mono text-kodo-content-dim uppercase tracking-wider">
                     <th className="p-4 w-10">
                       <div
                         onClick={selectAll}
@@ -300,7 +300,7 @@ export const FileManagerView: React.FC = () => {
                       <td className="p-4">
                         <div
                           onClick={() => toggleSelection(file.id)}
-                          className="cursor-pointer text-gray-500 hover:text-white"
+                          className="cursor-pointer text-kodo-content-dim hover:text-white"
                         >
                           {selectedFiles.includes(file.id) ? (
                             <CheckSquare className="w-4 h-4 text-kodo-cyan" />
@@ -325,42 +325,42 @@ export const FileManagerView: React.FC = () => {
                           )}
                           {['document', 'archive', 'project'].includes(
                             file.type,
-                          ) && <File className="w-5 h-5 text-gray-400" />}
-                          <span className="font-medium text-gray-200 group-hover:text-white transition-colors">
+                          ) && <File className="w-5 h-5 text-kodo-content-dim" />}
+                          <span className="font-medium text-kodo-text-main group-hover:text-white transition-colors">
                             {file.name}
                           </span>
                         </div>
                       </td>
                       <td className="p-4">
-                        <span className="px-2 py-1 bg-kodo-ink rounded text-[10px] uppercase font-bold text-gray-400">
+                        <span className="px-2 py-1 bg-kodo-ink rounded text-[10px] uppercase font-bold text-kodo-content-dim">
                           {file.type}
                         </span>
                       </td>
-                      <td className="p-4 text-sm text-gray-400 font-mono">
+                      <td className="p-4 text-sm text-kodo-content-dim font-mono">
                         {file.size}
                       </td>
-                      <td className="p-4 text-sm text-gray-400">
+                      <td className="p-4 text-sm text-kodo-content-dim">
                         {file.modified}
                       </td>
                       <td className="p-4">
                         <span
-                          className={`flex items-center gap-1.5 text-xs font-bold capitalize ${file.status === 'ready' ? 'text-kodo-lime' : file.status === 'processing' ? 'text-kodo-gold' : 'text-gray-500'}`}
+                          className={`flex items-center gap-1.5 text-xs font-bold capitalize ${file.status === 'ready' ? 'text-kodo-lime' : file.status === 'processing' ? 'text-kodo-gold' : 'text-kodo-content-dim'}`}
                         >
                           <div
-                            className={`w-1.5 h-1.5 rounded-full ${file.status === 'ready' ? 'bg-kodo-lime' : file.status === 'processing' ? 'bg-kodo-gold animate-pulse' : 'bg-gray-500'}`}
+                            className={`w-1.5 h-1.5 rounded-full ${file.status === 'ready' ? 'bg-kodo-lime' : file.status === 'processing' ? 'bg-kodo-gold animate-pulse' : 'bg-kodo-steel'}`}
                           ></div>
                           {file.status}
                         </span>
                       </td>
                       <td className="p-4 text-right">
                         <div className="flex justify-end gap-2 opacity-0 group-hover:opacity-100 transition-opacity">
-                          <button className="p-1.5 hover:bg-white/10 rounded text-gray-400 hover:text-white">
+                          <button className="p-1.5 hover:bg-white/10 rounded text-kodo-content-dim hover:text-white">
                             <Eye
                               className="w-4 h-4"
                               onClick={() => handleFileClick(file)}
                             />
                           </button>
-                          <button className="p-1.5 hover:bg-white/10 rounded text-gray-400 hover:text-white">
+                          <button className="p-1.5 hover:bg-white/10 rounded text-kodo-content-dim hover:text-white">
                             <MoreVertical className="w-4 h-4" />
                           </button>
                         </div>
@@ -390,7 +390,7 @@ export const FileManagerView: React.FC = () => {
                   {selectedFiles.includes(file.id) ? (
                     <CheckSquare className="w-4 h-4 text-kodo-cyan" />
                   ) : (
-                    <Square className="w-4 h-4 text-gray-400 hover:text-white" />
+                    <Square className="w-4 h-4 text-kodo-content-dim hover:text-white" />
                   )}
                 </div>
 
@@ -405,14 +405,14 @@ export const FileManagerView: React.FC = () => {
                     <ImageIcon className="w-8 h-8 text-kodo-magenta" />
                   )}
                   {['document', 'archive', 'project'].includes(file.type) && (
-                    <File className="w-8 h-8 text-gray-400" />
+                    <File className="w-8 h-8 text-kodo-content-dim" />
                   )}
                 </div>
                 <div className="w-full">
                   <h4 className="font-bold text-white text-sm truncate w-full">
                     {file.name}
                   </h4>
-                  <p className="text-xs text-gray-500 mt-1">{file.size}</p>
+                  <p className="text-xs text-kodo-content-dim mt-1">{file.size}</p>
                 </div>
               </Card>
             ))}