chore: text color config

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-text-default text-2xl font-semibold">App Builder</h1>
     </div>
   )
 }

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-text-default text-2xl font-semibold">Cycles</h1>
     </div>
   )
 }

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-text-default text-2xl font-semibold">Roles</h1>
     </div>
   )
 }

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-gray-900">My Applications</h1>
+      <h1 className="text-text-default text-2xl font-semibold">
+        My Applications
+      </h1>
     </div>
   )
 }

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-gray-600">{label}</span>
-        <span className="border-l border-gray-100 px-2 py-1.5 text-gray-400">
+        <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-gray-700 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-gray-400 hover:bg-gray-50 hover:text-gray-600"
+          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-gray-700 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"

frontend/src/app/(portal)/reviewer/applicants/components/AddFilterButton.tsx

@@ -24,15 +24,15 @@ 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="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
       </button>
 
       {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="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-gray-700 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-gray-400" />
+                <Icon className="text-text-subtle h-4 w-4" />
                 {label}
               </button>
             ))}

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="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-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="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-gray-500">
+      <td className="text-text-muted px-4 py-3 text-sm">
         {formatDate(applicant.submittedAt)}
       </td>
     </tr>

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-text-default text-sm font-medium">
         {applicant.firstName} {applicant.lastName}
       </p>
-      <p className="mt-0.5 text-xs text-gray-400">{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-gray-600">
+        <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-gray-600">
+        <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) && (

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-text-default text-sm font-semibold">
           {stageLabel[stage]}
         </span>
-        <span className="text-sm text-gray-400">{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-gray-300">No applicants</p>
+          <p className="text-text-faint px-1 text-xs">No applicants</p>
         )}
       </div>
     </div>

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-text-faint text-sm">—</span>
   }
   return (
     <span

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:text-text-secondary hover:bg-gray-100'
             }`}
           >
             {label}
-            <span className="ml-1.5 text-xs text-gray-400">
+            <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-gray-400 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-gray-400"
+                className="text-text-subtle px-4 py-10 text-center text-sm"
               >
                 No applicants found.
               </td>

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-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-gray-400" />
+            <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-gray-900 placeholder-gray-400 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,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'
+                  ? 'text-text-default bg-gray-100'
+                  : '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'
+                  ? 'text-text-default bg-gray-100'
+                  : 'text-text-subtle hover:text-text-secondary'
               }`}
               aria-label="Kanban view"
             >

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-text-default text-2xl font-semibold">Dashboard</h1>
     </div>
   )
 }

frontend/src/app/globals.css

@@ -4,14 +4,22 @@
   --background: #ffffff;
   --foreground: #171717;
   --text-default: #111111;
+  --text-secondary: #374151;
+  --text-muted: #6b7280;
+  --text-subtle: #9ca3af;
+  --text-faint: #d1d5db;
 }
 
 @theme inline {
   --color-background: var(--background);
   --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);
 }

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:text-text-default hover:bg-gray-100'
       }`}
     >
       <Icon
         size={16}
-        className={isActive ? 'text-brand-blue' : 'text-gray-400'}
+        className={isActive ? 'text-brand-blue' : 'text-text-subtle'}
       />
       {label}
     </Link>

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-text-secondary text-sm font-medium">
           {firstName} {lastName}
         </span>
       </div>
@@ -103,7 +103,7 @@ 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="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">