From 33327348161cca46f4abf0f8a7cddc7cdd2c1c5c Mon Sep 17 00:00:00 2001
From: Dao Ho <84757503+Dao-Ho@users.noreply.github.com>
Date: Fri, 19 Jun 2026 12:08:21 -0700
Subject: [PATCH 1/2] chore: config for text colors

---
 frontend/src/app/(portal)/admin/builder/page.tsx   |  2 +-
 frontend/src/app/(portal)/admin/cycles/page.tsx    |  2 +-
 frontend/src/app/(portal)/admin/roles/page.tsx     |  2 +-
 .../app/(portal)/applicant/applications/page.tsx   |  2 +-
 .../applicants/components/ActiveFilterPill.tsx     | 10 +++++-----
 .../applicants/components/AddFilterButton.tsx      |  8 ++++----
 .../applicants/components/ApplicantRow.tsx         | 12 ++++++------
 .../reviewer/applicants/components/KanbanCard.tsx  |  8 ++++----
 .../applicants/components/KanbanColumn.tsx         |  6 +++---
 .../reviewer/applicants/components/RatingBadge.tsx |  2 +-
 .../reviewer/applicants/components/TableView.tsx   |  8 ++++----
 .../src/app/(portal)/reviewer/applicants/page.tsx  | 14 +++++++-------
 .../src/app/(portal)/reviewer/dashboard/page.tsx   |  2 +-
 frontend/src/app/globals.css                       | 10 +++++++++-
 frontend/src/components/nav/NavItem.tsx            |  4 ++--
 frontend/src/components/nav/Sidebar.tsx            |  6 +++---
 16 files changed, 53 insertions(+), 45 deletions(-)

diff --git a/frontend/src/app/(portal)/admin/builder/page.tsx b/frontend/src/app/(portal)/admin/builder/page.tsx
index a537585..0e6c0eb 100644
--- a/frontend/src/app/(portal)/admin/builder/page.tsx
+++ b/frontend/src/app/(portal)/admin/builder/page.tsx
@@ -1,7 +1,7 @@
 export default function BuilderPage() {
   return (
     <div className="p-8">
-      <h1 className="text-2xl font-semibold text-gray-900">App Builder</h1>
+      <h1 className="text-2xl font-semibold text-text-default">App Builder</h1>
     </div>
   )
 }
diff --git a/frontend/src/app/(portal)/admin/cycles/page.tsx b/frontend/src/app/(portal)/admin/cycles/page.tsx
index 702bf28..a6f88af 100644
--- a/frontend/src/app/(portal)/admin/cycles/page.tsx
+++ b/frontend/src/app/(portal)/admin/cycles/page.tsx
@@ -1,7 +1,7 @@
 export default function CyclesPage() {
   return (
     <div className="p-8">
-      <h1 className="text-2xl font-semibold text-gray-900">Cycles</h1>
+      <h1 className="text-2xl font-semibold text-text-default">Cycles</h1>
     </div>
   )
 }
diff --git a/frontend/src/app/(portal)/admin/roles/page.tsx b/frontend/src/app/(portal)/admin/roles/page.tsx
index 1c4a3e1..0a20b6f 100644
--- a/frontend/src/app/(portal)/admin/roles/page.tsx
+++ b/frontend/src/app/(portal)/admin/roles/page.tsx
@@ -1,7 +1,7 @@
 export default function RolesPage() {
   return (
     <div className="p-8">
-      <h1 className="text-2xl font-semibold text-gray-900">Roles</h1>
+      <h1 className="text-2xl font-semibold text-text-default">Roles</h1>
     </div>
   )
 }
diff --git a/frontend/src/app/(portal)/applicant/applications/page.tsx b/frontend/src/app/(portal)/applicant/applications/page.tsx
index 143adc7..b452849 100644
--- a/frontend/src/app/(portal)/applicant/applications/page.tsx
+++ b/frontend/src/app/(portal)/applicant/applications/page.tsx
@@ -1,7 +1,7 @@
 export default function ApplicationsPage() {
   return (
     <div className="p-8">
-      <h1 className="text-2xl font-semibold text-gray-900">My Applications</h1>
+      <h1 className="text-2xl font-semibold text-text-default">My Applications</h1>
     </div>
   )
 }
diff --git a/frontend/src/app/(portal)/reviewer/applicants/components/ActiveFilterPill.tsx b/frontend/src/app/(portal)/reviewer/applicants/components/ActiveFilterPill.tsx
index 7423a2e..b516345 100644
--- a/frontend/src/app/(portal)/reviewer/applicants/components/ActiveFilterPill.tsx
+++ b/frontend/src/app/(portal)/reviewer/applicants/components/ActiveFilterPill.tsx
@@ -34,19 +34,19 @@ export function ActiveFilterPill<T extends string | number>({
   return (
     <div ref={ref} className="relative flex items-center">
       <div className="flex items-center rounded-md border border-gray-200 bg-white text-xs shadow-sm">
-        <span className="px-2.5 py-1.5 font-medium text-gray-600">{label}</span>
-        <span className="border-l border-gray-100 px-2 py-1.5 text-gray-400">
+        <span className="px-2.5 py-1.5 font-medium text-text-secondary">{label}</span>
+        <span className="border-l border-gray-100 px-2 py-1.5 text-text-subtle">
           is
         </span>
         <button
           onClick={() => setOpen((o) => !o)}
-          className="border-l border-gray-100 px-2.5 py-1.5 font-medium text-gray-700 hover:bg-gray-50"
+          className="border-l border-gray-100 px-2.5 py-1.5 font-medium text-text-secondary hover:bg-gray-50"
         >
           {valueLabel}
         </button>
         <button
           onClick={onClear}
-          className="rounded-r-md border-l border-gray-100 px-2 py-1.5 text-gray-400 hover:bg-gray-50 hover:text-gray-600"
+          className="rounded-r-md border-l border-gray-100 px-2 py-1.5 text-text-subtle hover:bg-gray-50 hover:text-text-secondary"
         >
           <X className="h-3 w-3" />
         </button>
@@ -57,7 +57,7 @@ export function ActiveFilterPill<T extends string | number>({
           {options.map((opt) => (
             <label
               key={String(opt)}
-              className="flex cursor-pointer items-center gap-2.5 px-3 py-1.5 text-sm text-gray-700 hover:bg-gray-50"
+              className="flex cursor-pointer items-center gap-2.5 px-3 py-1.5 text-sm text-text-secondary hover:bg-gray-50"
             >
               <input
                 type="checkbox"
diff --git a/frontend/src/app/(portal)/reviewer/applicants/components/AddFilterButton.tsx b/frontend/src/app/(portal)/reviewer/applicants/components/AddFilterButton.tsx
index a358a4d..4ca5f6c 100644
--- a/frontend/src/app/(portal)/reviewer/applicants/components/AddFilterButton.tsx
+++ b/frontend/src/app/(portal)/reviewer/applicants/components/AddFilterButton.tsx
@@ -24,7 +24,7 @@ export function AddFilterButton({
     <div ref={ref} className="relative">
       <button
         onClick={() => setPanel(panel ? null : 'fields')}
-        className="flex items-center gap-1 rounded-md border border-dashed border-gray-300 px-2.5 py-1.5 text-xs text-gray-400 transition-colors hover:border-gray-400 hover:text-gray-600"
+        className="flex items-center gap-1 rounded-md border border-dashed border-gray-300 px-2.5 py-1.5 text-xs text-text-subtle transition-colors hover:border-gray-400 hover:text-text-secondary"
       >
         <Plus className="h-3 w-3" />
         Filter
@@ -32,7 +32,7 @@ export function AddFilterButton({
 
       {panel === 'fields' && (
         <div className="absolute top-full left-0 z-20 mt-1 w-52 rounded-lg border border-gray-200 bg-white shadow-lg">
-          <div className="border-b border-gray-100 px-3 py-2 text-xs font-medium tracking-wider text-gray-400 uppercase">
+          <div className="border-b border-gray-100 px-3 py-2 text-xs font-medium tracking-wider text-text-subtle uppercase">
             Filter by
           </div>
           <div className="py-1">
@@ -43,9 +43,9 @@ export function AddFilterButton({
                   onAdd(key)
                   setPanel(null)
                 }}
-                className="flex w-full items-center gap-2.5 px-3 py-2 text-sm text-gray-700 hover:bg-gray-50"
+                className="flex w-full items-center gap-2.5 px-3 py-2 text-sm text-text-secondary hover:bg-gray-50"
               >
-                <Icon className="h-4 w-4 text-gray-400" />
+                <Icon className="h-4 w-4 text-text-subtle" />
                 {label}
               </button>
             ))}
diff --git a/frontend/src/app/(portal)/reviewer/applicants/components/ApplicantRow.tsx b/frontend/src/app/(portal)/reviewer/applicants/components/ApplicantRow.tsx
index 39d44d8..b9779b9 100644
--- a/frontend/src/app/(portal)/reviewer/applicants/components/ApplicantRow.tsx
+++ b/frontend/src/app/(portal)/reviewer/applicants/components/ApplicantRow.tsx
@@ -6,13 +6,13 @@ import { RatingBadge } from './RatingBadge'
 export function ApplicantRow({ applicant }: { applicant: Applicant }) {
   return (
     <tr className="cursor-pointer border-b border-gray-100 hover:bg-gray-50">
-      <td className="px-4 py-3 text-sm font-medium text-gray-900">
+      <td className="px-4 py-3 text-sm font-medium text-text-default">
         {applicant.firstName} {applicant.lastName}
       </td>
-      <td className="px-4 py-3 text-sm text-gray-500">{applicant.nuid}</td>
-      <td className="px-4 py-3 text-sm text-gray-500">{applicant.email}</td>
-      <td className="px-4 py-3 text-sm text-gray-500">{applicant.major}</td>
-      <td className="px-4 py-3 text-sm text-gray-500">{applicant.year}</td>
+      <td className="px-4 py-3 text-sm text-text-muted">{applicant.nuid}</td>
+      <td className="px-4 py-3 text-sm text-text-muted">{applicant.email}</td>
+      <td className="px-4 py-3 text-sm text-text-muted">{applicant.major}</td>
+      <td className="px-4 py-3 text-sm text-text-muted">{applicant.year}</td>
       <td className="px-4 py-3">
         <span
           className={`inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium ${stageBadge[applicant.stage]}`}
@@ -23,7 +23,7 @@ export function ApplicantRow({ applicant }: { applicant: Applicant }) {
       <td className="px-4 py-3">
         <RatingBadge applicant={applicant} />
       </td>
-      <td className="px-4 py-3 text-sm text-gray-500">
+      <td className="px-4 py-3 text-sm text-text-muted">
         {formatDate(applicant.submittedAt)}
       </td>
     </tr>
diff --git a/frontend/src/app/(portal)/reviewer/applicants/components/KanbanCard.tsx b/frontend/src/app/(portal)/reviewer/applicants/components/KanbanCard.tsx
index 4d04caa..fcef9b0 100644
--- a/frontend/src/app/(portal)/reviewer/applicants/components/KanbanCard.tsx
+++ b/frontend/src/app/(portal)/reviewer/applicants/components/KanbanCard.tsx
@@ -4,15 +4,15 @@ import { ratedStages, ratingBadge, ratingLabel } from './constants'
 export function KanbanCard({ applicant }: { applicant: Applicant }) {
   return (
     <div className="cursor-pointer rounded-lg border border-gray-200 bg-white p-3 shadow-sm transition-shadow hover:shadow-md">
-      <p className="text-sm font-medium text-gray-900">
+      <p className="text-sm font-medium text-text-default">
         {applicant.firstName} {applicant.lastName}
       </p>
-      <p className="mt-0.5 text-xs text-gray-400">{applicant.email}</p>
+      <p className="mt-0.5 text-xs text-text-subtle">{applicant.email}</p>
       <div className="mt-2.5 flex flex-wrap gap-1">
-        <span className="max-w-[130px] truncate rounded bg-gray-100 px-1.5 py-0.5 text-xs text-gray-600">
+        <span className="max-w-[130px] truncate rounded bg-gray-100 px-1.5 py-0.5 text-xs text-text-secondary">
           {applicant.major}
         </span>
-        <span className="rounded bg-gray-100 px-1.5 py-0.5 text-xs text-gray-600">
+        <span className="rounded bg-gray-100 px-1.5 py-0.5 text-xs text-text-secondary">
           Year {applicant.year}
         </span>
         {applicant.rating && ratedStages.includes(applicant.stage) && (
diff --git a/frontend/src/app/(portal)/reviewer/applicants/components/KanbanColumn.tsx b/frontend/src/app/(portal)/reviewer/applicants/components/KanbanColumn.tsx
index e738d31..8b5a403 100644
--- a/frontend/src/app/(portal)/reviewer/applicants/components/KanbanColumn.tsx
+++ b/frontend/src/app/(portal)/reviewer/applicants/components/KanbanColumn.tsx
@@ -13,17 +13,17 @@ export function KanbanColumn({
     <div className="flex w-72 shrink-0 flex-col">
       <div className="mb-3 flex items-center gap-2 px-1">
         <div className={`h-2.5 w-2.5 rounded-full ${stageDot[stage]}`} />
-        <span className="text-sm font-semibold text-gray-800">
+        <span className="text-sm font-semibold text-text-default">
           {stageLabel[stage]}
         </span>
-        <span className="text-sm text-gray-400">{applicants.length}</span>
+        <span className="text-sm text-text-subtle">{applicants.length}</span>
       </div>
       <div className="flex flex-col gap-2">
         {applicants.map((a) => (
           <KanbanCard key={a.id} applicant={a} />
         ))}
         {applicants.length === 0 && (
-          <p className="px-1 text-xs text-gray-300">No applicants</p>
+          <p className="px-1 text-xs text-text-faint">No applicants</p>
         )}
       </div>
     </div>
diff --git a/frontend/src/app/(portal)/reviewer/applicants/components/RatingBadge.tsx b/frontend/src/app/(portal)/reviewer/applicants/components/RatingBadge.tsx
index 8a2b997..d0bfe03 100644
--- a/frontend/src/app/(portal)/reviewer/applicants/components/RatingBadge.tsx
+++ b/frontend/src/app/(portal)/reviewer/applicants/components/RatingBadge.tsx
@@ -3,7 +3,7 @@ import { ratedStages, ratingBadge, ratingLabel } from './constants'
 
 export function RatingBadge({ applicant }: { applicant: Applicant }) {
   if (!ratedStages.includes(applicant.stage) || !applicant.rating) {
-    return <span className="text-sm text-gray-300">—</span>
+    return <span className="text-sm text-text-faint">—</span>
   }
   return (
     <span
diff --git a/frontend/src/app/(portal)/reviewer/applicants/components/TableView.tsx b/frontend/src/app/(portal)/reviewer/applicants/components/TableView.tsx
index 9b87795..6f962b8 100644
--- a/frontend/src/app/(portal)/reviewer/applicants/components/TableView.tsx
+++ b/frontend/src/app/(portal)/reviewer/applicants/components/TableView.tsx
@@ -40,11 +40,11 @@ export function TableView({
             className={`rounded-md px-3 py-1.5 text-sm font-medium transition-colors ${
               activeStage === value
                 ? 'text-brand-blue bg-blue-50'
-                : 'text-gray-500 hover:bg-gray-100 hover:text-gray-700'
+                : 'text-text-muted hover:bg-gray-100 hover:text-text-secondary'
             }`}
           >
             {label}
-            <span className="ml-1.5 text-xs text-gray-400">
+            <span className="ml-1.5 text-xs text-text-subtle">
               {countByStage(value)}
             </span>
           </button>
@@ -75,7 +75,7 @@ export function TableView({
             ].map((col) => (
               <th
                 key={col}
-                className="px-4 py-2.5 text-left text-xs font-medium tracking-wider text-gray-400 uppercase"
+                className="px-4 py-2.5 text-left text-xs font-medium tracking-wider text-text-subtle uppercase"
               >
                 {col}
               </th>
@@ -89,7 +89,7 @@ export function TableView({
             <tr>
               <td
                 colSpan={8}
-                className="px-4 py-10 text-center text-sm text-gray-400"
+                className="px-4 py-10 text-center text-sm text-text-subtle"
               >
                 No applicants found.
               </td>
diff --git a/frontend/src/app/(portal)/reviewer/applicants/page.tsx b/frontend/src/app/(portal)/reviewer/applicants/page.tsx
index 652662a..431c328 100644
--- a/frontend/src/app/(portal)/reviewer/applicants/page.tsx
+++ b/frontend/src/app/(portal)/reviewer/applicants/page.tsx
@@ -47,17 +47,17 @@ export default function ApplicantsPage() {
   return (
     <div className="flex flex-col gap-6 p-8">
       <div className="flex items-center justify-between">
-        <h1 className="text-2xl font-semibold text-gray-900">Applicants</h1>
+        <h1 className="text-2xl font-semibold text-text-default">Applicants</h1>
 
         <div className="flex items-center gap-3">
           <div className="relative w-60">
-            <Search className="absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2 text-gray-400" />
+            <Search className="absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2 text-text-subtle" />
             <input
               type="text"
               placeholder="Search name, NUID, email..."
               value={search}
               onChange={(e) => setSearch(e.target.value)}
-              className="focus:border-brand-blue w-full rounded-md border border-gray-200 py-1.5 pr-3 pl-9 text-sm text-gray-900 placeholder-gray-400 focus:outline-none"
+              className="focus:border-brand-blue w-full rounded-md border border-gray-200 py-1.5 pr-3 pl-9 text-sm text-text-default placeholder:text-text-subtle focus:outline-none"
             />
           </div>
 
@@ -66,8 +66,8 @@ export default function ApplicantsPage() {
               onClick={() => setView('table')}
               className={`rounded-l-md p-1.5 transition-colors ${
                 view === 'table'
-                  ? 'bg-gray-100 text-gray-900'
-                  : 'text-gray-400 hover:text-gray-600'
+                  ? 'bg-gray-100 text-text-default'
+                  : 'text-text-subtle hover:text-text-secondary'
               }`}
               aria-label="Table view"
             >
@@ -77,8 +77,8 @@ export default function ApplicantsPage() {
               onClick={() => setView('kanban')}
               className={`rounded-r-md p-1.5 transition-colors ${
                 view === 'kanban'
-                  ? 'bg-gray-100 text-gray-900'
-                  : 'text-gray-400 hover:text-gray-600'
+                  ? 'bg-gray-100 text-text-default'
+                  : 'text-text-subtle hover:text-text-secondary'
               }`}
               aria-label="Kanban view"
             >
diff --git a/frontend/src/app/(portal)/reviewer/dashboard/page.tsx b/frontend/src/app/(portal)/reviewer/dashboard/page.tsx
index 7a594d1..2326ec8 100644
--- a/frontend/src/app/(portal)/reviewer/dashboard/page.tsx
+++ b/frontend/src/app/(portal)/reviewer/dashboard/page.tsx
@@ -1,7 +1,7 @@
 export default function DashboardPage() {
   return (
     <div className="p-8">
-      <h1 className="text-2xl font-semibold text-gray-900">Dashboard</h1>
+      <h1 className="text-2xl font-semibold text-text-default">Dashboard</h1>
     </div>
   )
 }
diff --git a/frontend/src/app/globals.css b/frontend/src/app/globals.css
index e55f58e..36e4808 100644
--- a/frontend/src/app/globals.css
+++ b/frontend/src/app/globals.css
@@ -4,6 +4,10 @@
   --background: #ffffff;
   --foreground: #171717;
   --text-default: #111111;
+  --text-secondary: #374151;
+  --text-muted: #6b7280;
+  --text-subtle: #9ca3af;
+  --text-faint: #d1d5db;
 }
 
 @theme inline {
@@ -11,7 +15,11 @@
   --color-foreground: var(--foreground);
   --color-brand-blue: #1477f8;
   --color-brand-white: #ffffff;
-  --color-text-default: var(--text-default);
+  --color-text-default: #111111;
+  --color-text-secondary: #374151;
+  --color-text-muted: #6b7280;
+  --color-text-subtle: #9ca3af;
+  --color-text-faint: #d1d5db;
   --font-sans: var(--font-geist-sans);
   --font-mono: var(--font-geist-mono);
 }
diff --git a/frontend/src/components/nav/NavItem.tsx b/frontend/src/components/nav/NavItem.tsx
index 0b6652c..7de4053 100644
--- a/frontend/src/components/nav/NavItem.tsx
+++ b/frontend/src/components/nav/NavItem.tsx
@@ -20,12 +20,12 @@ export default function NavItem({ href, label, icon: Icon }: NavItemProps) {
       className={`flex items-center gap-2.5 rounded-md px-3 py-1.5 text-sm font-medium transition-colors ${
         isActive
           ? 'text-brand-blue bg-blue-50'
-          : 'text-gray-600 hover:bg-gray-100 hover:text-gray-900'
+          : 'text-text-secondary hover:bg-gray-100 hover:text-text-default'
       }`}
     >
       <Icon
         size={16}
-        className={isActive ? 'text-brand-blue' : 'text-gray-400'}
+        className={isActive ? 'text-brand-blue' : 'text-text-subtle'}
       />
       {label}
     </Link>
diff --git a/frontend/src/components/nav/Sidebar.tsx b/frontend/src/components/nav/Sidebar.tsx
index 103d803..15633c6 100644
--- a/frontend/src/components/nav/Sidebar.tsx
+++ b/frontend/src/components/nav/Sidebar.tsx
@@ -72,7 +72,7 @@ function SidebarUser({
           {firstName[0]}
           {lastName[0]}
         </div>
-        <span className="text-sm font-medium text-gray-700">
+        <span className="text-sm font-medium text-text-secondary">
           {firstName} {lastName}
         </span>
       </div>
@@ -103,13 +103,13 @@ export default function Sidebar({ roles, firstName, lastName }: SidebarProps) {
       <nav className="flex flex-1 flex-col gap-4 overflow-y-auto px-3 py-4">
         {sections.map((section) => (
           <div key={section.label}>
-            <p className="mb-1 px-3 text-xs font-medium tracking-wider text-gray-400 uppercase">
+            <p className="mb-1 px-3 text-xs font-medium tracking-wider text-text-subtle uppercase">
               {section.label}
             </p>
             <div className="flex flex-col gap-0.5">
               {section.items.map((item) => (
                 <NavItem key={item.href} {...item} />
-              ))}
+              ))} 
             </div>
           </div>
         ))}

From d33b5c40227ee57a208a24bc2f7f89548cb90481 Mon Sep 17 00:00:00 2001
From: Dao Ho <84757503+Dao-Ho@users.noreply.github.com>
Date: Fri, 19 Jun 2026 12:08:28 -0700
Subject: [PATCH 2/2] format

---
 frontend/src/app/(portal)/admin/builder/page.tsx     |  2 +-
 frontend/src/app/(portal)/admin/cycles/page.tsx      |  2 +-
 frontend/src/app/(portal)/admin/roles/page.tsx       |  2 +-
 .../src/app/(portal)/applicant/applications/page.tsx |  4 +++-
 .../applicants/components/ActiveFilterPill.tsx       | 12 +++++++-----
 .../applicants/components/AddFilterButton.tsx        |  8 ++++----
 .../reviewer/applicants/components/ApplicantRow.tsx  | 12 ++++++------
 .../reviewer/applicants/components/KanbanCard.tsx    |  8 ++++----
 .../reviewer/applicants/components/KanbanColumn.tsx  |  6 +++---
 .../reviewer/applicants/components/RatingBadge.tsx   |  2 +-
 .../reviewer/applicants/components/TableView.tsx     |  8 ++++----
 .../src/app/(portal)/reviewer/applicants/page.tsx    | 10 +++++-----
 .../src/app/(portal)/reviewer/dashboard/page.tsx     |  2 +-
 frontend/src/components/nav/NavItem.tsx              |  2 +-
 frontend/src/components/nav/Sidebar.tsx              |  6 +++---
 15 files changed, 45 insertions(+), 41 deletions(-)

diff --git a/frontend/src/app/(portal)/admin/builder/page.tsx b/frontend/src/app/(portal)/admin/builder/page.tsx
index 0e6c0eb..2625181 100644
--- a/frontend/src/app/(portal)/admin/builder/page.tsx
+++ b/frontend/src/app/(portal)/admin/builder/page.tsx
@@ -1,7 +1,7 @@
 export default function BuilderPage() {
   return (
     <div className="p-8">
-      <h1 className="text-2xl font-semibold text-text-default">App Builder</h1>
+      <h1 className="text-text-default text-2xl font-semibold">App Builder</h1>
     </div>
   )
 }
diff --git a/frontend/src/app/(portal)/admin/cycles/page.tsx b/frontend/src/app/(portal)/admin/cycles/page.tsx
index a6f88af..67319cc 100644
--- a/frontend/src/app/(portal)/admin/cycles/page.tsx
+++ b/frontend/src/app/(portal)/admin/cycles/page.tsx
@@ -1,7 +1,7 @@
 export default function CyclesPage() {
   return (
     <div className="p-8">
-      <h1 className="text-2xl font-semibold text-text-default">Cycles</h1>
+      <h1 className="text-text-default text-2xl font-semibold">Cycles</h1>
     </div>
   )
 }
diff --git a/frontend/src/app/(portal)/admin/roles/page.tsx b/frontend/src/app/(portal)/admin/roles/page.tsx
index 0a20b6f..096a52d 100644
--- a/frontend/src/app/(portal)/admin/roles/page.tsx
+++ b/frontend/src/app/(portal)/admin/roles/page.tsx
@@ -1,7 +1,7 @@
 export default function RolesPage() {
   return (
     <div className="p-8">
-      <h1 className="text-2xl font-semibold text-text-default">Roles</h1>
+      <h1 className="text-text-default text-2xl font-semibold">Roles</h1>
     </div>
   )
 }
diff --git a/frontend/src/app/(portal)/applicant/applications/page.tsx b/frontend/src/app/(portal)/applicant/applications/page.tsx
index b452849..0596e75 100644
--- a/frontend/src/app/(portal)/applicant/applications/page.tsx
+++ b/frontend/src/app/(portal)/applicant/applications/page.tsx
@@ -1,7 +1,9 @@
 export default function ApplicationsPage() {
   return (
     <div className="p-8">
-      <h1 className="text-2xl font-semibold text-text-default">My Applications</h1>
+      <h1 className="text-text-default text-2xl font-semibold">
+        My Applications
+      </h1>
     </div>
   )
 }
diff --git a/frontend/src/app/(portal)/reviewer/applicants/components/ActiveFilterPill.tsx b/frontend/src/app/(portal)/reviewer/applicants/components/ActiveFilterPill.tsx
index b516345..d7e182b 100644
--- a/frontend/src/app/(portal)/reviewer/applicants/components/ActiveFilterPill.tsx
+++ b/frontend/src/app/(portal)/reviewer/applicants/components/ActiveFilterPill.tsx
@@ -34,19 +34,21 @@ export function ActiveFilterPill<T extends string | number>({
   return (
     <div ref={ref} className="relative flex items-center">
       <div className="flex items-center rounded-md border border-gray-200 bg-white text-xs shadow-sm">
-        <span className="px-2.5 py-1.5 font-medium text-text-secondary">{label}</span>
-        <span className="border-l border-gray-100 px-2 py-1.5 text-text-subtle">
+        <span className="text-text-secondary px-2.5 py-1.5 font-medium">
+          {label}
+        </span>
+        <span className="text-text-subtle border-l border-gray-100 px-2 py-1.5">
           is
         </span>
         <button
           onClick={() => setOpen((o) => !o)}
-          className="border-l border-gray-100 px-2.5 py-1.5 font-medium text-text-secondary hover:bg-gray-50"
+          className="text-text-secondary border-l border-gray-100 px-2.5 py-1.5 font-medium hover:bg-gray-50"
         >
           {valueLabel}
         </button>
         <button
           onClick={onClear}
-          className="rounded-r-md border-l border-gray-100 px-2 py-1.5 text-text-subtle hover:bg-gray-50 hover:text-text-secondary"
+          className="text-text-subtle hover:text-text-secondary rounded-r-md border-l border-gray-100 px-2 py-1.5 hover:bg-gray-50"
         >
           <X className="h-3 w-3" />
         </button>
@@ -57,7 +59,7 @@ export function ActiveFilterPill<T extends string | number>({
           {options.map((opt) => (
             <label
               key={String(opt)}
-              className="flex cursor-pointer items-center gap-2.5 px-3 py-1.5 text-sm text-text-secondary hover:bg-gray-50"
+              className="text-text-secondary flex cursor-pointer items-center gap-2.5 px-3 py-1.5 text-sm hover:bg-gray-50"
             >
               <input
                 type="checkbox"
diff --git a/frontend/src/app/(portal)/reviewer/applicants/components/AddFilterButton.tsx b/frontend/src/app/(portal)/reviewer/applicants/components/AddFilterButton.tsx
index 4ca5f6c..00cc481 100644
--- a/frontend/src/app/(portal)/reviewer/applicants/components/AddFilterButton.tsx
+++ b/frontend/src/app/(portal)/reviewer/applicants/components/AddFilterButton.tsx
@@ -24,7 +24,7 @@ export function AddFilterButton({
     <div ref={ref} className="relative">
       <button
         onClick={() => setPanel(panel ? null : 'fields')}
-        className="flex items-center gap-1 rounded-md border border-dashed border-gray-300 px-2.5 py-1.5 text-xs text-text-subtle transition-colors hover:border-gray-400 hover:text-text-secondary"
+        className="text-text-subtle hover:text-text-secondary flex items-center gap-1 rounded-md border border-dashed border-gray-300 px-2.5 py-1.5 text-xs transition-colors hover:border-gray-400"
       >
         <Plus className="h-3 w-3" />
         Filter
@@ -32,7 +32,7 @@ export function AddFilterButton({
 
       {panel === 'fields' && (
         <div className="absolute top-full left-0 z-20 mt-1 w-52 rounded-lg border border-gray-200 bg-white shadow-lg">
-          <div className="border-b border-gray-100 px-3 py-2 text-xs font-medium tracking-wider text-text-subtle uppercase">
+          <div className="text-text-subtle border-b border-gray-100 px-3 py-2 text-xs font-medium tracking-wider uppercase">
             Filter by
           </div>
           <div className="py-1">
@@ -43,9 +43,9 @@ export function AddFilterButton({
                   onAdd(key)
                   setPanel(null)
                 }}
-                className="flex w-full items-center gap-2.5 px-3 py-2 text-sm text-text-secondary hover:bg-gray-50"
+                className="text-text-secondary flex w-full items-center gap-2.5 px-3 py-2 text-sm hover:bg-gray-50"
               >
-                <Icon className="h-4 w-4 text-text-subtle" />
+                <Icon className="text-text-subtle h-4 w-4" />
                 {label}
               </button>
             ))}
diff --git a/frontend/src/app/(portal)/reviewer/applicants/components/ApplicantRow.tsx b/frontend/src/app/(portal)/reviewer/applicants/components/ApplicantRow.tsx
index b9779b9..a9c2c4a 100644
--- a/frontend/src/app/(portal)/reviewer/applicants/components/ApplicantRow.tsx
+++ b/frontend/src/app/(portal)/reviewer/applicants/components/ApplicantRow.tsx
@@ -6,13 +6,13 @@ import { RatingBadge } from './RatingBadge'
 export function ApplicantRow({ applicant }: { applicant: Applicant }) {
   return (
     <tr className="cursor-pointer border-b border-gray-100 hover:bg-gray-50">
-      <td className="px-4 py-3 text-sm font-medium text-text-default">
+      <td className="text-text-default px-4 py-3 text-sm font-medium">
         {applicant.firstName} {applicant.lastName}
       </td>
-      <td className="px-4 py-3 text-sm text-text-muted">{applicant.nuid}</td>
-      <td className="px-4 py-3 text-sm text-text-muted">{applicant.email}</td>
-      <td className="px-4 py-3 text-sm text-text-muted">{applicant.major}</td>
-      <td className="px-4 py-3 text-sm text-text-muted">{applicant.year}</td>
+      <td className="text-text-muted px-4 py-3 text-sm">{applicant.nuid}</td>
+      <td className="text-text-muted px-4 py-3 text-sm">{applicant.email}</td>
+      <td className="text-text-muted px-4 py-3 text-sm">{applicant.major}</td>
+      <td className="text-text-muted px-4 py-3 text-sm">{applicant.year}</td>
       <td className="px-4 py-3">
         <span
           className={`inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium ${stageBadge[applicant.stage]}`}
@@ -23,7 +23,7 @@ export function ApplicantRow({ applicant }: { applicant: Applicant }) {
       <td className="px-4 py-3">
         <RatingBadge applicant={applicant} />
       </td>
-      <td className="px-4 py-3 text-sm text-text-muted">
+      <td className="text-text-muted px-4 py-3 text-sm">
         {formatDate(applicant.submittedAt)}
       </td>
     </tr>
diff --git a/frontend/src/app/(portal)/reviewer/applicants/components/KanbanCard.tsx b/frontend/src/app/(portal)/reviewer/applicants/components/KanbanCard.tsx
index fcef9b0..853a687 100644
--- a/frontend/src/app/(portal)/reviewer/applicants/components/KanbanCard.tsx
+++ b/frontend/src/app/(portal)/reviewer/applicants/components/KanbanCard.tsx
@@ -4,15 +4,15 @@ import { ratedStages, ratingBadge, ratingLabel } from './constants'
 export function KanbanCard({ applicant }: { applicant: Applicant }) {
   return (
     <div className="cursor-pointer rounded-lg border border-gray-200 bg-white p-3 shadow-sm transition-shadow hover:shadow-md">
-      <p className="text-sm font-medium text-text-default">
+      <p className="text-text-default text-sm font-medium">
         {applicant.firstName} {applicant.lastName}
       </p>
-      <p className="mt-0.5 text-xs text-text-subtle">{applicant.email}</p>
+      <p className="text-text-subtle mt-0.5 text-xs">{applicant.email}</p>
       <div className="mt-2.5 flex flex-wrap gap-1">
-        <span className="max-w-[130px] truncate rounded bg-gray-100 px-1.5 py-0.5 text-xs text-text-secondary">
+        <span className="text-text-secondary max-w-[130px] truncate rounded bg-gray-100 px-1.5 py-0.5 text-xs">
           {applicant.major}
         </span>
-        <span className="rounded bg-gray-100 px-1.5 py-0.5 text-xs text-text-secondary">
+        <span className="text-text-secondary rounded bg-gray-100 px-1.5 py-0.5 text-xs">
           Year {applicant.year}
         </span>
         {applicant.rating && ratedStages.includes(applicant.stage) && (
diff --git a/frontend/src/app/(portal)/reviewer/applicants/components/KanbanColumn.tsx b/frontend/src/app/(portal)/reviewer/applicants/components/KanbanColumn.tsx
index 8b5a403..5f15737 100644
--- a/frontend/src/app/(portal)/reviewer/applicants/components/KanbanColumn.tsx
+++ b/frontend/src/app/(portal)/reviewer/applicants/components/KanbanColumn.tsx
@@ -13,17 +13,17 @@ export function KanbanColumn({
     <div className="flex w-72 shrink-0 flex-col">
       <div className="mb-3 flex items-center gap-2 px-1">
         <div className={`h-2.5 w-2.5 rounded-full ${stageDot[stage]}`} />
-        <span className="text-sm font-semibold text-text-default">
+        <span className="text-text-default text-sm font-semibold">
           {stageLabel[stage]}
         </span>
-        <span className="text-sm text-text-subtle">{applicants.length}</span>
+        <span className="text-text-subtle text-sm">{applicants.length}</span>
       </div>
       <div className="flex flex-col gap-2">
         {applicants.map((a) => (
           <KanbanCard key={a.id} applicant={a} />
         ))}
         {applicants.length === 0 && (
-          <p className="px-1 text-xs text-text-faint">No applicants</p>
+          <p className="text-text-faint px-1 text-xs">No applicants</p>
         )}
       </div>
     </div>
diff --git a/frontend/src/app/(portal)/reviewer/applicants/components/RatingBadge.tsx b/frontend/src/app/(portal)/reviewer/applicants/components/RatingBadge.tsx
index d0bfe03..c3461ea 100644
--- a/frontend/src/app/(portal)/reviewer/applicants/components/RatingBadge.tsx
+++ b/frontend/src/app/(portal)/reviewer/applicants/components/RatingBadge.tsx
@@ -3,7 +3,7 @@ import { ratedStages, ratingBadge, ratingLabel } from './constants'
 
 export function RatingBadge({ applicant }: { applicant: Applicant }) {
   if (!ratedStages.includes(applicant.stage) || !applicant.rating) {
-    return <span className="text-sm text-text-faint">—</span>
+    return <span className="text-text-faint text-sm">—</span>
   }
   return (
     <span
diff --git a/frontend/src/app/(portal)/reviewer/applicants/components/TableView.tsx b/frontend/src/app/(portal)/reviewer/applicants/components/TableView.tsx
index 6f962b8..bfd40ff 100644
--- a/frontend/src/app/(portal)/reviewer/applicants/components/TableView.tsx
+++ b/frontend/src/app/(portal)/reviewer/applicants/components/TableView.tsx
@@ -40,11 +40,11 @@ export function TableView({
             className={`rounded-md px-3 py-1.5 text-sm font-medium transition-colors ${
               activeStage === value
                 ? 'text-brand-blue bg-blue-50'
-                : 'text-text-muted hover:bg-gray-100 hover:text-text-secondary'
+                : 'text-text-muted hover:text-text-secondary hover:bg-gray-100'
             }`}
           >
             {label}
-            <span className="ml-1.5 text-xs text-text-subtle">
+            <span className="text-text-subtle ml-1.5 text-xs">
               {countByStage(value)}
             </span>
           </button>
@@ -75,7 +75,7 @@ export function TableView({
             ].map((col) => (
               <th
                 key={col}
-                className="px-4 py-2.5 text-left text-xs font-medium tracking-wider text-text-subtle uppercase"
+                className="text-text-subtle px-4 py-2.5 text-left text-xs font-medium tracking-wider uppercase"
               >
                 {col}
               </th>
@@ -89,7 +89,7 @@ export function TableView({
             <tr>
               <td
                 colSpan={8}
-                className="px-4 py-10 text-center text-sm text-text-subtle"
+                className="text-text-subtle px-4 py-10 text-center text-sm"
               >
                 No applicants found.
               </td>
diff --git a/frontend/src/app/(portal)/reviewer/applicants/page.tsx b/frontend/src/app/(portal)/reviewer/applicants/page.tsx
index 431c328..e5f3f47 100644
--- a/frontend/src/app/(portal)/reviewer/applicants/page.tsx
+++ b/frontend/src/app/(portal)/reviewer/applicants/page.tsx
@@ -47,17 +47,17 @@ export default function ApplicantsPage() {
   return (
     <div className="flex flex-col gap-6 p-8">
       <div className="flex items-center justify-between">
-        <h1 className="text-2xl font-semibold text-text-default">Applicants</h1>
+        <h1 className="text-text-default text-2xl font-semibold">Applicants</h1>
 
         <div className="flex items-center gap-3">
           <div className="relative w-60">
-            <Search className="absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2 text-text-subtle" />
+            <Search className="text-text-subtle absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2" />
             <input
               type="text"
               placeholder="Search name, NUID, email..."
               value={search}
               onChange={(e) => setSearch(e.target.value)}
-              className="focus:border-brand-blue w-full rounded-md border border-gray-200 py-1.5 pr-3 pl-9 text-sm text-text-default placeholder:text-text-subtle focus:outline-none"
+              className="focus:border-brand-blue text-text-default placeholder:text-text-subtle w-full rounded-md border border-gray-200 py-1.5 pr-3 pl-9 text-sm focus:outline-none"
             />
           </div>
 
@@ -66,7 +66,7 @@ export default function ApplicantsPage() {
               onClick={() => setView('table')}
               className={`rounded-l-md p-1.5 transition-colors ${
                 view === 'table'
-                  ? 'bg-gray-100 text-text-default'
+                  ? 'text-text-default bg-gray-100'
                   : 'text-text-subtle hover:text-text-secondary'
               }`}
               aria-label="Table view"
@@ -77,7 +77,7 @@ export default function ApplicantsPage() {
               onClick={() => setView('kanban')}
               className={`rounded-r-md p-1.5 transition-colors ${
                 view === 'kanban'
-                  ? 'bg-gray-100 text-text-default'
+                  ? 'text-text-default bg-gray-100'
                   : 'text-text-subtle hover:text-text-secondary'
               }`}
               aria-label="Kanban view"
diff --git a/frontend/src/app/(portal)/reviewer/dashboard/page.tsx b/frontend/src/app/(portal)/reviewer/dashboard/page.tsx
index 2326ec8..8b22f81 100644
--- a/frontend/src/app/(portal)/reviewer/dashboard/page.tsx
+++ b/frontend/src/app/(portal)/reviewer/dashboard/page.tsx
@@ -1,7 +1,7 @@
 export default function DashboardPage() {
   return (
     <div className="p-8">
-      <h1 className="text-2xl font-semibold text-text-default">Dashboard</h1>
+      <h1 className="text-text-default text-2xl font-semibold">Dashboard</h1>
     </div>
   )
 }
diff --git a/frontend/src/components/nav/NavItem.tsx b/frontend/src/components/nav/NavItem.tsx
index 7de4053..140926e 100644
--- a/frontend/src/components/nav/NavItem.tsx
+++ b/frontend/src/components/nav/NavItem.tsx
@@ -20,7 +20,7 @@ export default function NavItem({ href, label, icon: Icon }: NavItemProps) {
       className={`flex items-center gap-2.5 rounded-md px-3 py-1.5 text-sm font-medium transition-colors ${
         isActive
           ? 'text-brand-blue bg-blue-50'
-          : 'text-text-secondary hover:bg-gray-100 hover:text-text-default'
+          : 'text-text-secondary hover:text-text-default hover:bg-gray-100'
       }`}
     >
       <Icon
diff --git a/frontend/src/components/nav/Sidebar.tsx b/frontend/src/components/nav/Sidebar.tsx
index 15633c6..f9ae5b5 100644
--- a/frontend/src/components/nav/Sidebar.tsx
+++ b/frontend/src/components/nav/Sidebar.tsx
@@ -72,7 +72,7 @@ function SidebarUser({
           {firstName[0]}
           {lastName[0]}
         </div>
-        <span className="text-sm font-medium text-text-secondary">
+        <span className="text-text-secondary text-sm font-medium">
           {firstName} {lastName}
         </span>
       </div>
@@ -103,13 +103,13 @@ export default function Sidebar({ roles, firstName, lastName }: SidebarProps) {
       <nav className="flex flex-1 flex-col gap-4 overflow-y-auto px-3 py-4">
         {sections.map((section) => (
           <div key={section.label}>
-            <p className="mb-1 px-3 text-xs font-medium tracking-wider text-text-subtle uppercase">
+            <p className="text-text-subtle mb-1 px-3 text-xs font-medium tracking-wider uppercase">
               {section.label}
             </p>
             <div className="flex flex-col gap-0.5">
               {section.items.map((item) => (
                 <NavItem key={item.href} {...item} />
-              ))} 
+              ))}
             </div>
           </div>
         ))}