From a4e63b8a41ec063e784c3abd952597694fb73b54 Mon Sep 17 00:00:00 2001
From: Yangshun Tay <tay.yang.shun@gmail.com>
Date: Mon, 24 Oct 2022 10:15:03 +0800
Subject: [PATCH] [portal] standardize colors

---
 .../portal/src/components/global/AppShell.tsx |  8 ++--
 .../components/global/MobileNavigation.tsx    |  2 +-
 .../src/components/offers/Breadcrumb.tsx      |  6 +--
 .../src/components/offers/OffersTitle.tsx     |  4 +-
 .../offersSubmission/OffersProfileSave.tsx    |  8 ++--
 .../submissionForm/BackgroundForm.tsx         | 16 +++----
 .../submissionForm/OfferDetailsForm.tsx       |  6 +--
 .../offers/profile/EducationCard.tsx          |  2 +-
 .../components/offers/profile/OfferCard.tsx   |  6 +--
 .../offers/profile/ProfilePhotoHolder.tsx     |  4 +-
 .../offers/profile/comments/CommentCard.tsx   |  4 +-
 .../src/components/offers/table/OffersRow.tsx |  6 +--
 .../components/offers/table/OffersTable.tsx   |  4 +-
 .../offers/table/OffersTablePagination.tsx    |  6 +--
 .../questions/ContributeQuestionCard.tsx      |  2 +-
 .../questions/ContributeQuestionDialog.tsx    |  4 +-
 .../card/question/BaseQuestionCard.tsx        |  2 +-
 .../forms/ContributeQuestionForm.tsx          |  4 +-
 .../resumes/browse/ResumeFilterPill.tsx       |  4 +-
 .../resumes/browse/ResumeListItem.tsx         |  2 +-
 .../comments/ResumeCommentListItem.tsx        | 14 +++---
 .../resumes/comments/ResumeCommentsForm.tsx   |  6 +--
 .../resumes/comments/ResumeCommentsList.tsx   |  2 +-
 .../comments/ResumeCommentsSection.tsx        |  4 +-
 .../comment/ResumeCommentVoteButtons.tsx      | 12 ++---
 .../resumes/landing/CallToAction.tsx          |  6 +--
 .../src/components/resumes/landing/Hero.tsx   |  8 ++--
 .../resumes/landing/PrimaryFeatures.tsx       |  2 +-
 .../resumes/landing/Testimonials.tsx          |  2 +-
 .../resumes/shared/ResumeExpandableText.tsx   |  2 +-
 apps/portal/src/pages/_document.tsx           |  2 +-
 apps/portal/src/pages/offers/index.tsx        |  2 +-
 apps/portal/src/pages/questions/lists.tsx     |  4 +-
 apps/portal/src/pages/resumes/[resumeId].tsx  | 30 ++++++------
 apps/portal/src/pages/resumes/browse.tsx      | 36 +++++++--------
 apps/portal/src/pages/resumes/submit.tsx      | 14 +++---
 apps/portal/src/pages/todos/index.tsx         | 46 +++++++++----------
 apps/portal/src/pages/todos/new.tsx           | 10 ++--
 38 files changed, 151 insertions(+), 151 deletions(-)

diff --git a/apps/portal/src/components/global/AppShell.tsx b/apps/portal/src/components/global/AppShell.tsx
index bcb9af67..a458a433 100644
--- a/apps/portal/src/components/global/AppShell.tsx
+++ b/apps/portal/src/components/global/AppShell.tsx
@@ -85,8 +85,8 @@ function ProfileJewel() {
               {({ active }) => (
                 <Link
                   className={clsx(
-                    active ? 'bg-gray-100' : '',
-                    'block px-4 py-2 text-sm text-gray-700',
+                    active ? 'bg-slate-100' : '',
+                    'block px-4 py-2 text-sm text-slate-700',
                   )}
                   href={item.href}
                   onClick={item.onClick}>
@@ -178,9 +178,9 @@ export default function AppShell({ children }: Props) {
       {/* Content area */}
       <div className="flex h-screen flex-1 flex-col overflow-hidden">
         <header className="w-full">
-          <div className="relative z-10 flex h-16 flex-shrink-0 border-b border-gray-200 bg-white shadow-sm">
+          <div className="relative z-10 flex h-16 flex-shrink-0 border-b border-slate-200 bg-white shadow-sm">
             <button
-              className="focus:ring-primary-500 border-r border-gray-200 px-4 text-gray-500 focus:outline-none focus:ring-2 focus:ring-inset md:hidden"
+              className="focus:ring-primary-500 border-r border-slate-200 px-4 text-slate-500 focus:outline-none focus:ring-2 focus:ring-inset md:hidden"
               type="button"
               onClick={() => setMobileMenuOpen(true)}>
               <span className="sr-only">Open sidebar</span>
diff --git a/apps/portal/src/components/global/MobileNavigation.tsx b/apps/portal/src/components/global/MobileNavigation.tsx
index 8ce0591f..0bda8bfd 100644
--- a/apps/portal/src/components/global/MobileNavigation.tsx
+++ b/apps/portal/src/components/global/MobileNavigation.tsx
@@ -34,7 +34,7 @@ export default function MobileNavigation({
           leave="transition-opacity ease-linear duration-300"
           leaveFrom="opacity-100"
           leaveTo="opacity-0">
-          <div className="fixed inset-0 bg-gray-600 bg-opacity-75" />
+          <div className="fixed inset-0 bg-slate-600 bg-opacity-75" />
         </Transition.Child>
         <div className="fixed inset-0 z-40 flex">
           <Transition.Child
diff --git a/apps/portal/src/components/offers/Breadcrumb.tsx b/apps/portal/src/components/offers/Breadcrumb.tsx
index ab046997..6a802522 100644
--- a/apps/portal/src/components/offers/Breadcrumb.tsx
+++ b/apps/portal/src/components/offers/Breadcrumb.tsx
@@ -9,12 +9,12 @@ export function Breadcrumbs({ stepLabels, currentStep }: BreadcrumbsProps) {
       {stepLabels.map((label, index) => (
         <div key={label} className="flex space-x-1">
           {index === currentStep ? (
-            <p className="text-sm text-purple-700">{label}</p>
+            <p className="text-primary-700 text-sm">{label}</p>
           ) : (
-            <p className="text-sm text-gray-400">{label}</p>
+            <p className="text-sm text-slate-400">{label}</p>
           )}
           {index !== stepLabels.length - 1 && (
-            <p className="text-sm text-gray-400">{'>'}</p>
+            <p className="text-sm text-slate-400">{'>'}</p>
           )}
         </div>
       ))}
diff --git a/apps/portal/src/components/offers/OffersTitle.tsx b/apps/portal/src/components/offers/OffersTitle.tsx
index 6056f2a6..2668ac4e 100644
--- a/apps/portal/src/components/offers/OffersTitle.tsx
+++ b/apps/portal/src/components/offers/OffersTitle.tsx
@@ -2,11 +2,11 @@ export default function OffersTitle() {
   return (
     <>
       <div className="flex items-end justify-center">
-        <h1 className="mt-16 text-center text-4xl font-bold text-indigo-600">
+        <h1 className="text-primary-600 mt-16 text-center text-4xl font-bold">
           Tech Handbook Offers Repo
         </h1>
       </div>
-      <div className="mt-2 text-center text-2xl font-normal text-indigo-500">
+      <div className="text-primary-500 mt-2 text-center text-2xl font-normal">
         Reveal profile stories behind offers
       </div>
       <div className="items-top flex justify-center text-xl font-normal">
diff --git a/apps/portal/src/components/offers/offersSubmission/OffersProfileSave.tsx b/apps/portal/src/components/offers/offersSubmission/OffersProfileSave.tsx
index fbf357dc..03c77dc9 100644
--- a/apps/portal/src/components/offers/offersSubmission/OffersProfileSave.tsx
+++ b/apps/portal/src/components/offers/offersSubmission/OffersProfileSave.tsx
@@ -36,11 +36,11 @@ export default function OffersProfileSave({
   return (
     <div className="flex w-full justify-center">
       <div className="max-w-2xl text-center">
-        <h5 className="mb-6 text-4xl font-bold text-gray-900">
+        <h5 className="mb-6 text-4xl font-bold text-slate-900">
           Save for future edits
         </h5>
-        <p className="mb-2 text-gray-900">We value your privacy.</p>
-        <p className="mb-5 text-gray-900">
+        <p className="mb-2 text-slate-900">We value your privacy.</p>
+        <p className="mb-5 text-slate-900">
           To keep you offer profile strictly anonymous, only people who have the
           link below can edit it.
         </p>
@@ -67,7 +67,7 @@ export default function OffersProfileSave({
             }}
           />
         </div>
-        {/* <p className="mb-5 text-gray-900">
+        {/* <p className="mb-5 text-slate-900">
           If you do not want to keep the edit link, you can opt to save this
           profile under your user account. It will still only be editable by
           you.
diff --git a/apps/portal/src/components/offers/offersSubmission/submissionForm/BackgroundForm.tsx b/apps/portal/src/components/offers/offersSubmission/submissionForm/BackgroundForm.tsx
index aaa25e54..6c89684a 100644
--- a/apps/portal/src/components/offers/offersSubmission/submissionForm/BackgroundForm.tsx
+++ b/apps/portal/src/components/offers/offersSubmission/submissionForm/BackgroundForm.tsx
@@ -26,11 +26,11 @@ function YoeSection() {
   const backgroundFields = formState.errors.background;
   return (
     <>
-      <h6 className="mb-2 text-left text-xl font-medium text-gray-400">
+      <h6 className="mb-2 text-left text-xl font-medium text-slate-400">
         Years of Experience (YOE)
       </h6>
 
-      <div className="mb-5 rounded-lg border border-gray-200 px-10 py-5">
+      <div className="mb-5 rounded-lg border border-slate-200 px-10 py-5">
         <div className="mb-2 grid grid-cols-3 space-x-3">
           <FormTextInput
             errorMessage={backgroundFields?.totalYoe?.message}
@@ -245,10 +245,10 @@ function CurrentJobSection() {
 
   return (
     <>
-      <h6 className="mb-2 text-left text-xl font-medium text-gray-400">
+      <h6 className="mb-2 text-left text-xl font-medium text-slate-400">
         Current / Previous Job
       </h6>
-      <div className="mb-5 rounded-lg border border-gray-200 px-10 py-5">
+      <div className="mb-5 rounded-lg border border-slate-200 px-10 py-5">
         <div className="mb-5">
           <FormRadioList
             defaultValue={JobType.FULLTIME}
@@ -282,10 +282,10 @@ function EducationSection() {
   const { register } = useFormContext();
   return (
     <>
-      <h6 className="mb-2 text-left text-xl font-medium text-gray-400">
+      <h6 className="mb-2 text-left text-xl font-medium text-slate-400">
         Education
       </h6>
-      <div className="mb-5 rounded-lg border border-gray-200 px-10 py-5">
+      <div className="mb-5 rounded-lg border border-slate-200 px-10 py-5">
         <div className="mb-5 grid grid-cols-2 space-x-3">
           <FormSelect
             display="block"
@@ -319,10 +319,10 @@ function EducationSection() {
 export default function BackgroundForm() {
   return (
     <div>
-      <h5 className="mb-2 text-center text-4xl font-bold text-gray-900">
+      <h5 className="mb-2 text-center text-4xl font-bold text-slate-900">
         Help us better gauge your offers
       </h5>
-      <h6 className="text-md mx-10 mb-8 text-center font-light text-gray-600">
+      <h6 className="text-md mx-10 mb-8 text-center font-light text-slate-600">
         This section is mostly optional, but your background information helps
         us benchmark your offers.
       </h6>
diff --git a/apps/portal/src/components/offers/offersSubmission/submissionForm/OfferDetailsForm.tsx b/apps/portal/src/components/offers/offersSubmission/submissionForm/OfferDetailsForm.tsx
index e7529c42..eb9fcc3f 100644
--- a/apps/portal/src/components/offers/offersSubmission/submissionForm/OfferDetailsForm.tsx
+++ b/apps/portal/src/components/offers/offersSubmission/submissionForm/OfferDetailsForm.tsx
@@ -62,7 +62,7 @@ function FullTimeOfferDetailsForm({
   }, [watchCurrency, index, setValue]);
 
   return (
-    <div className="my-5 rounded-lg border border-gray-200 px-10 py-5">
+    <div className="my-5 rounded-lg border border-slate-200 px-10 py-5">
       <div className="mb-5 grid grid-cols-2 space-x-3">
         <FormSelect
           display="block"
@@ -289,7 +289,7 @@ function InternshipOfferDetailsForm({
   const offerFields = formState.errors.offers?.[index];
 
   return (
-    <div className="my-5 rounded-lg border border-gray-200 px-10 py-5">
+    <div className="my-5 rounded-lg border border-slate-200 px-10 py-5">
       <div className="mb-5 grid grid-cols-2 space-x-3">
         <FormSelect
           display="block"
@@ -503,7 +503,7 @@ export default function OfferDetailsForm({
 
   return (
     <div className="mb-5">
-      <h5 className="mb-8 text-center text-4xl font-bold text-gray-900">
+      <h5 className="mb-8 text-center text-4xl font-bold text-slate-900">
         Fill in your offer details
       </h5>
       <div className="flex w-full justify-center">
diff --git a/apps/portal/src/components/offers/profile/EducationCard.tsx b/apps/portal/src/components/offers/profile/EducationCard.tsx
index 8c3fea98..c885ef5a 100644
--- a/apps/portal/src/components/offers/profile/EducationCard.tsx
+++ b/apps/portal/src/components/offers/profile/EducationCard.tsx
@@ -30,7 +30,7 @@ export default function EducationCard({
           )}
         </div>
         {(startDate || endDate) && (
-          <div className="font-light text-gray-400">
+          <div className="font-light text-slate-400">
             <p>{`${startDate || 'N/A'} - ${endDate || 'N/A'}`}</p>
           </div>
         )}
diff --git a/apps/portal/src/components/offers/profile/OfferCard.tsx b/apps/portal/src/components/offers/profile/OfferCard.tsx
index e9d2d7f2..9f08e8b5 100644
--- a/apps/portal/src/components/offers/profile/OfferCard.tsx
+++ b/apps/portal/src/components/offers/profile/OfferCard.tsx
@@ -44,12 +44,12 @@ export default function OfferCard({
           </div>
         </div>
         {!duration && receivedMonth && (
-          <div className="font-light text-gray-400">
+          <div className="font-light text-slate-400">
             <p>{receivedMonth}</p>
           </div>
         )}
         {duration && (
-          <div className="font-light text-gray-400">
+          <div className="font-light text-slate-400">
             <p>{`${duration} months`}</p>
           </div>
         )}
@@ -83,7 +83,7 @@ export default function OfferCard({
                 </div>
               ))}
             {totalCompensation && (
-              <div className="ml-6 flex flex-row font-light text-gray-400">
+              <div className="ml-6 flex flex-row font-light text-slate-400">
                 <p>
                   Base / year: {base} ⋅ Stocks / year: {stocks} ⋅ Bonus / year:{' '}
                   {bonus}
diff --git a/apps/portal/src/components/offers/profile/ProfilePhotoHolder.tsx b/apps/portal/src/components/offers/profile/ProfilePhotoHolder.tsx
index 8fdb126b..f12f8de6 100644
--- a/apps/portal/src/components/offers/profile/ProfilePhotoHolder.tsx
+++ b/apps/portal/src/components/offers/profile/ProfilePhotoHolder.tsx
@@ -8,9 +8,9 @@ export default function ProfilePhotoHolder({
   const sizeMap = { lg: '16', sm: '12' };
   return (
     <span
-      className={`inline-block h-${sizeMap[size]} w-${sizeMap[size]} overflow-hidden rounded-full bg-gray-100`}>
+      className={`inline-block h-${sizeMap[size]} w-${sizeMap[size]} overflow-hidden rounded-full bg-slate-100`}>
       <svg
-        className="h-full w-full text-gray-300"
+        className="h-full w-full text-slate-300"
         fill="currentColor"
         viewBox="0 0 24 24">
         <path d="M24 20.993V24H0v-2.996A14.977 14.977 0 0112.004 15c4.904 0 9.26 2.354 11.996 5.993zM16.002 8.999a4 4 0 11-8 0 4 4 0 018 0z" />
diff --git a/apps/portal/src/components/offers/profile/comments/CommentCard.tsx b/apps/portal/src/components/offers/profile/comments/CommentCard.tsx
index e249170e..c5face80 100644
--- a/apps/portal/src/components/offers/profile/comments/CommentCard.tsx
+++ b/apps/portal/src/components/offers/profile/comments/CommentCard.tsx
@@ -100,12 +100,12 @@ export default function CommentCard({
           </div>
           <div className="mt-2 mb-2 flex flex-row ">{message}</div>
           <div className="flex flex-row items-center justify-start space-x-4 ">
-            <div className="flex flex-col text-sm font-light text-gray-400">{`${timeSinceNow(
+            <div className="flex flex-col text-sm font-light text-slate-400">{`${timeSinceNow(
               createdAt,
             )} ago`}</div>
             {replyLength > 0 && (
               <div
-                className="flex cursor-pointer flex-col text-sm text-purple-600 hover:underline"
+                className="text-primary-600 flex cursor-pointer flex-col text-sm hover:underline"
                 onClick={handleExpanded}>
                 {isExpanded ? `Hide replies` : `View replies (${replyLength})`}
               </div>
diff --git a/apps/portal/src/components/offers/table/OffersRow.tsx b/apps/portal/src/components/offers/table/OffersRow.tsx
index 9e131a7e..065e705b 100644
--- a/apps/portal/src/components/offers/table/OffersRow.tsx
+++ b/apps/portal/src/components/offers/table/OffersRow.tsx
@@ -13,9 +13,9 @@ export default function OfferTableRow({
   return (
     <tr
       key={id}
-      className="border-b bg-white hover:bg-gray-50 dark:border-gray-700 dark:bg-gray-800 dark:hover:bg-gray-600">
+      className="border-b bg-white hover:bg-slate-50 dark:border-slate-700 dark:bg-slate-800 dark:hover:bg-slate-600">
       <th
-        className="whitespace-nowrap py-4 px-6 font-medium text-gray-900 dark:text-white"
+        className="whitespace-nowrap py-4 px-6 font-medium text-slate-900 dark:text-white"
         scope="row">
         {company.name}
       </th>
@@ -25,7 +25,7 @@ export default function OfferTableRow({
       <td className="py-4 px-6">{formatDate(monthYearReceived)}</td>
       <td className="space-x-4 py-4 px-6">
         <Link
-          className="font-medium text-indigo-600 hover:underline dark:text-indigo-500"
+          className="text-primary-600 dark:text-primary-500 font-medium hover:underline"
           href={`/offers/profile/${profileId}`}>
           View Profile
         </Link>
diff --git a/apps/portal/src/components/offers/table/OffersTable.tsx b/apps/portal/src/components/offers/table/OffersTable.tsx
index 423c0324..3801d7b0 100644
--- a/apps/portal/src/components/offers/table/OffersTable.tsx
+++ b/apps/portal/src/components/offers/table/OffersTable.tsx
@@ -109,7 +109,7 @@ export default function OffersTable({
 
   function renderHeader() {
     return (
-      <thead className="bg-gray-50 text-xs uppercase text-gray-700">
+      <thead className="bg-slate-50 text-xs uppercase text-slate-700">
         <tr>
           {[
             'Company',
@@ -145,7 +145,7 @@ export default function OffersTable({
             <Spinner display="block" size="lg" />
           </div>
         ) : (
-          <table className="w-full text-left text-sm text-gray-500">
+          <table className="w-full text-left text-sm text-slate-500">
             {renderHeader()}
             <tbody>
               {offers.map((offer) => (
diff --git a/apps/portal/src/components/offers/table/OffersTablePagination.tsx b/apps/portal/src/components/offers/table/OffersTablePagination.tsx
index 1be80ff0..1a24a045 100644
--- a/apps/portal/src/components/offers/table/OffersTablePagination.tsx
+++ b/apps/portal/src/components/offers/table/OffersTablePagination.tsx
@@ -19,13 +19,13 @@ export default function OffersTablePagination({
     <nav
       aria-label="Table navigation"
       className="flex items-center justify-between p-4">
-      <span className="text-sm font-normal text-gray-500">
+      <span className="text-sm font-normal text-slate-500">
         Showing
-        <span className="font-semibold text-gray-900">
+        <span className="font-semibold text-slate-900">
           {` ${startNumber} - ${endNumber} `}
         </span>
         {`of `}
-        <span className="font-semibold text-gray-900">
+        <span className="font-semibold text-slate-900">
           {pagination.totalItems}
         </span>
       </span>
diff --git a/apps/portal/src/components/questions/ContributeQuestionCard.tsx b/apps/portal/src/components/questions/ContributeQuestionCard.tsx
index dc7d2836..fa25d9f1 100644
--- a/apps/portal/src/components/questions/ContributeQuestionCard.tsx
+++ b/apps/portal/src/components/questions/ContributeQuestionCard.tsx
@@ -30,7 +30,7 @@ export default function ContributeQuestionCard({
   return (
     <div>
       <button
-        className="flex flex-col items-stretch justify-center gap-2 rounded-md border border-slate-300 bg-white p-4 text-left hover:bg-gray-100"
+        className="flex flex-col items-stretch justify-center gap-2 rounded-md border border-slate-300 bg-white p-4 text-left hover:bg-slate-100"
         type="button"
         onClick={handleOpenContribute}>
         <TextInput
diff --git a/apps/portal/src/components/questions/ContributeQuestionDialog.tsx b/apps/portal/src/components/questions/ContributeQuestionDialog.tsx
index dd548d37..9a2d971f 100644
--- a/apps/portal/src/components/questions/ContributeQuestionDialog.tsx
+++ b/apps/portal/src/components/questions/ContributeQuestionDialog.tsx
@@ -48,7 +48,7 @@ export default function ContributeQuestionDialog({
             leave="ease-in duration-200"
             leaveFrom="opacity-100"
             leaveTo="opacity-0">
-            <div className="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" />
+            <div className="fixed inset-0 bg-slate-500 bg-opacity-75 transition-opacity" />
           </Transition.Child>
           <div className="fixed inset-0 z-10 overflow-y-auto">
             <div className="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
@@ -66,7 +66,7 @@ export default function ContributeQuestionDialog({
                       <div className="mt-3 w-full sm:mt-0 sm:text-left">
                         <Dialog.Title
                           as="h3"
-                          className="text-lg font-medium leading-6 text-gray-900">
+                          className="text-lg font-medium leading-6 text-slate-900">
                           Contribute question
                         </Dialog.Title>
                         <div className="w-full">
diff --git a/apps/portal/src/components/questions/card/question/BaseQuestionCard.tsx b/apps/portal/src/components/questions/card/question/BaseQuestionCard.tsx
index 3c54d58b..ca9f676e 100644
--- a/apps/portal/src/components/questions/card/question/BaseQuestionCard.tsx
+++ b/apps/portal/src/components/questions/card/question/BaseQuestionCard.tsx
@@ -212,7 +212,7 @@ export default function BaseQuestionCard({
       className={`group flex gap-4 rounded-md border border-slate-300 bg-white p-4 ${hoverClass}`}>
       {cardContent}
       {showDeleteButton && (
-        <div className="invisible self-center	fill-red-700 group-hover:visible">
+        <div className="fill-danger-700 invisible	self-center group-hover:visible">
           <Button
             icon={TrashIcon}
             isLabelHidden={true}
diff --git a/apps/portal/src/components/questions/forms/ContributeQuestionForm.tsx b/apps/portal/src/components/questions/forms/ContributeQuestionForm.tsx
index a4daa3c6..546d7a0e 100644
--- a/apps/portal/src/components/questions/forms/ContributeQuestionForm.tsx
+++ b/apps/portal/src/components/questions/forms/ContributeQuestionForm.tsx
@@ -186,13 +186,13 @@ export default function ContributeQuestionForm({
         </div>
         <div className="flex gap-x-2">
           <button
-            className="inline-flex w-full justify-center rounded-md border border-gray-300 bg-white px-4 py-2 text-base font-medium text-gray-700 shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm"
+            className="focus:ring-primary-500 inline-flex w-full justify-center rounded-md border border-slate-300 bg-white px-4 py-2 text-base font-medium text-slate-700 shadow-sm hover:bg-slate-50 focus:outline-none focus:ring-2 focus:ring-offset-2 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm"
             type="button"
             onClick={onDiscard}>
             Discard
           </button>
           <Button
-            className="bg-primary-600 hover:bg-primary-700 focus:ring-primary-500 inline-flex w-full justify-center rounded-md border border-transparent px-4 py-2 text-base font-medium text-white shadow-sm focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:bg-gray-400 sm:ml-3 sm:w-auto sm:text-sm"
+            className="bg-primary-600 hover:bg-primary-700 focus:ring-primary-500 inline-flex w-full justify-center rounded-md border border-transparent px-4 py-2 text-base font-medium text-white shadow-sm focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:bg-slate-400 sm:ml-3 sm:w-auto sm:text-sm"
             disabled={!canSubmit}
             label="Contribute"
             type="submit"
diff --git a/apps/portal/src/components/resumes/browse/ResumeFilterPill.tsx b/apps/portal/src/components/resumes/browse/ResumeFilterPill.tsx
index a8aa10d7..aca89b17 100644
--- a/apps/portal/src/components/resumes/browse/ResumeFilterPill.tsx
+++ b/apps/portal/src/components/resumes/browse/ResumeFilterPill.tsx
@@ -14,8 +14,8 @@ export default function ResumeFilterPill({
   return (
     <button
       className={clsx(
-        'rounded-xl border border-indigo-500 border-transparent px-2 py-1 text-xs font-medium focus:bg-indigo-500 focus:text-white',
-        isSelected ? 'bg-indigo-500 text-white' : 'bg-white text-indigo-500',
+        'border-primary-500 focus:bg-primary-500 rounded-xl border border-transparent px-2 py-1 text-xs font-medium focus:text-white',
+        isSelected ? 'bg-primary-500 text-white' : 'text-primary-500 bg-white',
       )}
       type="button"
       onClick={onClick}>
diff --git a/apps/portal/src/components/resumes/browse/ResumeListItem.tsx b/apps/portal/src/components/resumes/browse/ResumeListItem.tsx
index 2190dfd8..eeeab21a 100644
--- a/apps/portal/src/components/resumes/browse/ResumeListItem.tsx
+++ b/apps/portal/src/components/resumes/browse/ResumeListItem.tsx
@@ -22,7 +22,7 @@ export default function ResumeListItem({ href, resumeInfo }: Props) {
       <div className="grid grid-cols-8 gap-4 border-b border-slate-200 p-4 hover:bg-slate-100">
         <div className="col-span-4">
           {resumeInfo.title}
-          <div className="mt-2 flex items-center justify-start text-xs text-indigo-500">
+          <div className="text-primary-500 mt-2 flex items-center justify-start text-xs">
             <div className="flex">
               <BriefcaseIcon
                 aria-hidden="true"
diff --git a/apps/portal/src/components/resumes/comments/ResumeCommentListItem.tsx b/apps/portal/src/components/resumes/comments/ResumeCommentListItem.tsx
index 07d951bb..dd44d4b4 100644
--- a/apps/portal/src/components/resumes/comments/ResumeCommentListItem.tsx
+++ b/apps/portal/src/components/resumes/comments/ResumeCommentListItem.tsx
@@ -30,7 +30,7 @@ export default function ResumeCommentListItem({
       className={clsx(
         'min-w-fit rounded-md bg-white ',
         !comment.parentId &&
-          'w-11/12 border-2 border-indigo-300 p-2 drop-shadow-md',
+          'border-primary-300 w-11/12 border-2 p-2 drop-shadow-md',
       )}>
       <div className="flex flex-row space-x-2 p-1 align-top">
         {/* Image Icon */}
@@ -64,14 +64,14 @@ export default function ResumeCommentListItem({
                 {comment.user.name ?? 'Reviewer ABC'}
               </p>
 
-              <p className="text-xs font-medium text-indigo-800">
+              <p className="text-primary-800 text-xs font-medium">
                 {isCommentOwner ? '(Me)' : ''}
               </p>
 
               <ResumeUserBadges userId={comment.user.userId} />
             </div>
 
-            <div className="px-2 text-xs text-gray-600">
+            <div className="px-2 text-xs text-slate-600">
               {comment.createdAt.toLocaleString('en-US', {
                 dateStyle: 'medium',
                 timeStyle: 'short',
@@ -101,7 +101,7 @@ export default function ResumeCommentListItem({
               <>
                 {isCommentOwner && (
                   <button
-                    className="px-1 text-xs text-indigo-800 hover:text-indigo-400"
+                    className="text-primary-800 hover:text-primary-400 px-1 text-xs"
                     type="button"
                     onClick={() => setIsEditingComment(true)}>
                     Edit
@@ -110,7 +110,7 @@ export default function ResumeCommentListItem({
 
                 {!comment.parentId && (
                   <button
-                    className="px-1 text-xs text-indigo-800 hover:text-indigo-400"
+                    className="text-primary-800 hover:text-primary-400 px-1 text-xs"
                     type="button"
                     onClick={() => setIsReplyingComment(true)}>
                     Reply
@@ -134,7 +134,7 @@ export default function ResumeCommentListItem({
           {comment.children.length > 0 && (
             <div className="min-w-fit space-y-1 pt-2">
               <button
-                className="flex items-center space-x-1 rounded-md text-xs font-medium text-indigo-800 hover:text-indigo-300"
+                className="text-primary-800 hover:text-primary-300 flex items-center space-x-1 rounded-md text-xs font-medium"
                 type="button"
                 onClick={() => setShowReplies(!showReplies)}>
                 <ChevronUpIcon
@@ -149,7 +149,7 @@ export default function ResumeCommentListItem({
               {showReplies && (
                 <div className="flex flex-row">
                   <div className="relative flex flex-col px-2 py-2">
-                    <div className="flex-grow border-r border-gray-300" />
+                    <div className="flex-grow border-r border-slate-300" />
                   </div>
 
                   <div className="flex flex-col space-y-1">
diff --git a/apps/portal/src/components/resumes/comments/ResumeCommentsForm.tsx b/apps/portal/src/components/resumes/comments/ResumeCommentsForm.tsx
index 584f88d0..d27c4c91 100644
--- a/apps/portal/src/components/resumes/comments/ResumeCommentsForm.tsx
+++ b/apps/portal/src/components/resumes/comments/ResumeCommentsForm.tsx
@@ -84,13 +84,13 @@ export default function ResumeCommentsForm({
 
   return (
     <div className="h-[calc(100vh-13rem)] overflow-y-auto">
-      <h2 className="text-xl font-semibold text-gray-800">Add your review</h2>
-      <p className="text-gray-800">
+      <h2 className="text-xl font-semibold text-slate-800">Add your review</h2>
+      <p className="text-slate-800">
         Please fill in at least one section to submit your review
       </p>
 
       <form
-        className="w-full space-y-8 divide-y divide-gray-200"
+        className="w-full space-y-8 divide-y divide-slate-200"
         onSubmit={handleSubmit(onSubmit)}>
         <div className="mt-4 space-y-4">
           <TextArea
diff --git a/apps/portal/src/components/resumes/comments/ResumeCommentsList.tsx b/apps/portal/src/components/resumes/comments/ResumeCommentsList.tsx
index 1559a188..b0435cda 100644
--- a/apps/portal/src/components/resumes/comments/ResumeCommentsList.tsx
+++ b/apps/portal/src/components/resumes/comments/ResumeCommentsList.tsx
@@ -85,7 +85,7 @@ export default function ResumeCommentsList({
 
             return (
               <div key={value} className="mb-4 space-y-4">
-                <div className="flex flex-row items-center space-x-2 text-indigo-800">
+                <div className="text-primary-800 flex flex-row items-center space-x-2">
                   {renderIcon(value)}
 
                   <div className="w-fit text-lg font-medium">{label}</div>
diff --git a/apps/portal/src/components/resumes/comments/ResumeCommentsSection.tsx b/apps/portal/src/components/resumes/comments/ResumeCommentsSection.tsx
index 38671be6..2c75bd5b 100644
--- a/apps/portal/src/components/resumes/comments/ResumeCommentsSection.tsx
+++ b/apps/portal/src/components/resumes/comments/ResumeCommentsSection.tsx
@@ -16,10 +16,10 @@ export default function ResumeCommentsSection({
     <>
       <div className="relative p-2 lg:hidden">
         <div aria-hidden="true" className="absolute inset-0 flex items-center">
-          <div className="w-full border-t border-gray-300" />
+          <div className="w-full border-t border-slate-300" />
         </div>
         <div className="relative flex justify-center">
-          <span className="bg-gray-50 px-3 text-lg font-medium text-gray-900">
+          <span className="bg-slate-50 px-3 text-lg font-medium text-slate-900">
             Reviews
           </span>
         </div>
diff --git a/apps/portal/src/components/resumes/comments/comment/ResumeCommentVoteButtons.tsx b/apps/portal/src/components/resumes/comments/comment/ResumeCommentVoteButtons.tsx
index e17e2546..d29ebd18 100644
--- a/apps/portal/src/components/resumes/comments/comment/ResumeCommentVoteButtons.tsx
+++ b/apps/portal/src/components/resumes/comments/comment/ResumeCommentVoteButtons.tsx
@@ -86,12 +86,12 @@ export default function ResumeCommentVoteButtons({
             'h-4 w-4',
             commentVotesQuery.data?.userVote?.value === Vote.UPVOTE ||
               upvoteAnimation
-              ? 'fill-indigo-500'
-              : 'fill-gray-400',
+              ? 'fill-primary-500'
+              : 'fill-slate-400',
             userId &&
               !downvoteAnimation &&
               !upvoteAnimation &&
-              'hover:fill-indigo-500',
+              'hover:fill-primary-500',
             upvoteAnimation && 'animate-[bounce_0.5s_infinite] cursor-default',
           )}
         />
@@ -115,12 +115,12 @@ export default function ResumeCommentVoteButtons({
             'h-4 w-4',
             commentVotesQuery.data?.userVote?.value === Vote.DOWNVOTE ||
               downvoteAnimation
-              ? 'fill-red-500'
-              : 'fill-gray-400',
+              ? 'fill-danger-500'
+              : 'fill-slate-400',
             userId &&
               !downvoteAnimation &&
               !upvoteAnimation &&
-              'hover:fill-red-500',
+              'hover:fill-danger-500',
             downvoteAnimation &&
               'animate-[bounce_0.5s_infinite] cursor-default',
           )}
diff --git a/apps/portal/src/components/resumes/landing/CallToAction.tsx b/apps/portal/src/components/resumes/landing/CallToAction.tsx
index 623509b3..f14e6c1f 100644
--- a/apps/portal/src/components/resumes/landing/CallToAction.tsx
+++ b/apps/portal/src/components/resumes/landing/CallToAction.tsx
@@ -7,16 +7,16 @@ export function CallToAction() {
     <section className="relative overflow-hidden py-32" id="get-started-today">
       <Container className="relative">
         <div className="mx-auto max-w-lg text-center">
-          <h2 className="font-display text-3xl tracking-tight text-gray-900 sm:text-4xl">
+          <h2 className="font-display text-3xl tracking-tight text-slate-900 sm:text-4xl">
             Resume review can start right now.
           </h2>
-          <p className="mt-4 text-lg tracking-tight text-gray-600">
+          <p className="mt-4 text-lg tracking-tight text-slate-600">
             It's free! Take charge of your resume game by learning from the top
             engineers in the field.
           </p>
           <Link href="/resumes/browse">
             <button
-              className="mt-4 rounded-md bg-indigo-500 py-2 px-3 text-sm font-medium text-white"
+              className="bg-primary-500 mt-4 rounded-md py-2 px-3 text-sm font-medium text-white"
               type="button">
               Start browsing now
             </button>
diff --git a/apps/portal/src/components/resumes/landing/Hero.tsx b/apps/portal/src/components/resumes/landing/Hero.tsx
index ab44b764..2e14e199 100644
--- a/apps/portal/src/components/resumes/landing/Hero.tsx
+++ b/apps/portal/src/components/resumes/landing/Hero.tsx
@@ -7,7 +7,7 @@ export function Hero() {
     <Container className="pb-36 pt-20 text-center lg:pt-32">
       <h1 className="font-display mx-auto max-w-4xl text-5xl font-medium tracking-tight text-slate-900 sm:text-7xl">
         Resume review{' '}
-        <span className="relative whitespace-nowrap text-indigo-500">
+        <span className="text-primary-500 relative whitespace-nowrap">
           <svg
             aria-hidden="true"
             className="absolute top-2/3 left-0 h-[0.58em] w-full fill-blue-300/70"
@@ -26,18 +26,18 @@ export function Hero() {
       <div className="mt-10 flex justify-center gap-x-4">
         <Link href="/resumes/browse">
           <button
-            className="rounded-md bg-indigo-500 py-2 px-3 text-sm font-medium text-white"
+            className="bg-primary-500 rounded-md py-2 px-3 text-sm font-medium text-white"
             type="button">
             Start browsing now
           </button>
         </Link>
         <Link href="https://www.youtube.com/watch?v=dQw4w9WgXcQ">
           <button
-            className="group inline-flex items-center justify-center rounded-md py-2 px-4 text-sm ring-1 ring-slate-200 hover:text-slate-900 hover:ring-slate-300 focus:outline-none focus-visible:outline-indigo-600 focus-visible:ring-slate-300 active:bg-slate-100 active:text-slate-600"
+            className="focus-visible:outline-primary-600 group inline-flex items-center justify-center rounded-md py-2 px-4 text-sm ring-1 ring-slate-200 hover:text-slate-900 hover:ring-slate-300 focus:outline-none focus-visible:ring-slate-300 active:bg-slate-100 active:text-slate-600"
             type="button">
             <svg
               aria-hidden="true"
-              className="h-3 w-3 flex-none fill-indigo-600 group-active:fill-current">
+              className="fill-primary-600 h-3 w-3 flex-none group-active:fill-current">
               <path d="m9.997 6.91-7.583 3.447A1 1 0 0 1 1 9.447V2.553a1 1 0 0 1 1.414-.91L9.997 5.09c.782.355.782 1.465 0 1.82Z" />
             </svg>
             <span className="ml-3">Watch video</span>
diff --git a/apps/portal/src/components/resumes/landing/PrimaryFeatures.tsx b/apps/portal/src/components/resumes/landing/PrimaryFeatures.tsx
index b2fedb17..8ce354b1 100644
--- a/apps/portal/src/components/resumes/landing/PrimaryFeatures.tsx
+++ b/apps/portal/src/components/resumes/landing/PrimaryFeatures.tsx
@@ -49,7 +49,7 @@ export function PrimaryFeatures() {
 
   return (
     <section
-      className="relative overflow-hidden bg-gradient-to-r from-indigo-400 to-indigo-700 pt-20 pb-28 sm:py-32"
+      className="from-primary-400 to-primary-700 relative overflow-hidden bg-gradient-to-r pt-20 pb-28 sm:py-32"
       id="features">
       <Container className="relative">
         <div className="max-w-2xl md:mx-auto md:text-center xl:max-w-none">
diff --git a/apps/portal/src/components/resumes/landing/Testimonials.tsx b/apps/portal/src/components/resumes/landing/Testimonials.tsx
index ad43f019..23762ab7 100644
--- a/apps/portal/src/components/resumes/landing/Testimonials.tsx
+++ b/apps/portal/src/components/resumes/landing/Testimonials.tsx
@@ -94,7 +94,7 @@ function QuoteIcon(props: QuoteProps) {
 export function Testimonials() {
   return (
     <section
-      className="bg-gradient-to-r from-indigo-700 to-indigo-400 py-20 sm:py-32"
+      className="from-primary-700 to-primary-400 bg-gradient-to-r py-20 sm:py-32"
       id="testimonials">
       <Container>
         <div className="mx-auto max-w-2xl md:text-center">
diff --git a/apps/portal/src/components/resumes/shared/ResumeExpandableText.tsx b/apps/portal/src/components/resumes/shared/ResumeExpandableText.tsx
index fcb26ca3..bc9f9c0a 100644
--- a/apps/portal/src/components/resumes/shared/ResumeExpandableText.tsx
+++ b/apps/portal/src/components/resumes/shared/ResumeExpandableText.tsx
@@ -36,7 +36,7 @@ export default function ResumeExpandableText({
       </span>
       {descriptionOverflow && (
         <p
-          className="mt-1 cursor-pointer text-xs text-indigo-500 hover:text-indigo-300"
+          className="text-primary-500 hover:text-primary-300 mt-1 cursor-pointer text-xs"
           onClick={onSeeActionClicked}>
           {isExpanded ? 'See Less' : 'See More'}
         </p>
diff --git a/apps/portal/src/pages/_document.tsx b/apps/portal/src/pages/_document.tsx
index 2054857e..69112ab2 100644
--- a/apps/portal/src/pages/_document.tsx
+++ b/apps/portal/src/pages/_document.tsx
@@ -2,7 +2,7 @@ import { Head, Html, Main, NextScript } from 'next/document';
 
 export default function Document() {
   return (
-    <Html className="h-full bg-gray-50">
+    <Html className="h-full bg-slate-50">
       <Head />
       <body className="h-full overflow-hidden">
         <Main />
diff --git a/apps/portal/src/pages/offers/index.tsx b/apps/portal/src/pages/offers/index.tsx
index 8095aa0c..c25dc7f7 100644
--- a/apps/portal/src/pages/offers/index.tsx
+++ b/apps/portal/src/pages/offers/index.tsx
@@ -12,7 +12,7 @@ export default function OffersHomePage() {
 
   return (
     <main className="flex-1 overflow-y-auto">
-      <div className="grid-rows grid h-1/2 bg-gray-100">
+      <div className="grid-rows grid h-1/2 bg-slate-100">
         <OffersTitle />
         <div className="flex items-start justify-center">
           <div className="mt-4 flex items-center">
diff --git a/apps/portal/src/pages/questions/lists.tsx b/apps/portal/src/pages/questions/lists.tsx
index 756bc326..168ada99 100644
--- a/apps/portal/src/pages/questions/lists.tsx
+++ b/apps/portal/src/pages/questions/lists.tsx
@@ -50,7 +50,7 @@ export default function ListPage() {
         {lists.map((list) => (
           <li
             key={list.id}
-            className={`flex items-center hover:bg-gray-50 ${
+            className={`flex items-center hover:bg-slate-50 ${
               selectedList === list.id ? 'bg-primary-100' : ''
             }`}>
             <button
@@ -83,7 +83,7 @@ export default function ListPage() {
                           className={`${
                             active
                               ? 'bg-violet-500 text-white'
-                              : 'text-gray-900'
+                              : 'text-slate-900'
                           } group flex w-full items-center rounded-md px-2 py-2 text-sm`}
                           type="button">
                           Delete
diff --git a/apps/portal/src/pages/resumes/[resumeId].tsx b/apps/portal/src/pages/resumes/[resumeId].tsx
index 0127fcd9..9a909150 100644
--- a/apps/portal/src/pages/resumes/[resumeId].tsx
+++ b/apps/portal/src/pages/resumes/[resumeId].tsx
@@ -120,12 +120,12 @@ export default function ResumeReviewPage() {
           </Head>
           <main className="h-[calc(100vh-2rem)] flex-1 space-y-2 overflow-y-auto py-4 px-8 xl:px-12 2xl:pr-16">
             <div className="flex justify-between">
-              <h1 className="text-2xl font-semibold leading-7 text-gray-900 sm:truncate sm:text-3xl sm:tracking-tight">
+              <h1 className="text-2xl font-semibold leading-7 text-slate-900 sm:truncate sm:text-3xl sm:tracking-tight">
                 {detailsQuery.data.title}
               </h1>
               <div className="flex gap-4">
                 <button
-                  className="isolate inline-flex h-10 items-center space-x-4 rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 shadow-sm hover:bg-gray-50  disabled:hover:bg-white"
+                  className="isolate inline-flex h-10 items-center space-x-4 rounded-md border border-slate-300 bg-white px-4 py-2 text-sm font-medium text-slate-700 shadow-sm hover:bg-slate-50  disabled:hover:bg-white"
                   disabled={starMutation.isLoading || unstarMutation.isLoading}
                   type="button"
                   onClick={onStarButtonClick}>
@@ -141,7 +141,7 @@ export default function ResumeReviewPage() {
                           className={clsx(
                             detailsQuery.data?.stars.length
                               ? 'text-orange-400'
-                              : 'text-gray-400',
+                              : 'text-slate-400',
                           )}
                         />
                       )}
@@ -154,40 +154,40 @@ export default function ResumeReviewPage() {
                 </button>
                 {userIsOwner && (
                   <button
-                    className="p h-10 rounded-md border border-gray-300 bg-white py-1 px-2 text-center"
+                    className="p h-10 rounded-md border border-slate-300 bg-white py-1 px-2 text-center"
                     type="button"
                     onClick={onEditButtonClick}>
-                    <PencilSquareIcon className="h-6 w-6 text-indigo-600 hover:text-indigo-300" />
+                    <PencilSquareIcon className="text-primary-600 hover:text-primary-300 h-6 w-6" />
                   </button>
                 )}
               </div>
             </div>
             <div className="flex flex-col lg:mt-0 lg:flex-row lg:flex-wrap lg:space-x-8">
-              <div className="mt-2 flex items-center text-sm text-gray-500">
+              <div className="mt-2 flex items-center text-sm text-slate-500">
                 <BriefcaseIcon
                   aria-hidden="true"
-                  className="mr-1.5 h-5 w-5 flex-shrink-0 text-gray-400"
+                  className="mr-1.5 h-5 w-5 flex-shrink-0 text-slate-400"
                 />
                 {detailsQuery.data.role}
               </div>
-              <div className="flex items-center pt-2 text-sm text-gray-500">
+              <div className="flex items-center pt-2 text-sm text-slate-500">
                 <MapPinIcon
                   aria-hidden="true"
-                  className="mr-1.5 h-5 w-5 flex-shrink-0 text-gray-400"
+                  className="mr-1.5 h-5 w-5 flex-shrink-0 text-slate-400"
                 />
                 {detailsQuery.data.location}
               </div>
-              <div className="flex items-center pt-2 text-sm text-gray-500">
+              <div className="flex items-center pt-2 text-sm text-slate-500">
                 <AcademicCapIcon
                   aria-hidden="true"
-                  className="mr-1.5 h-5 w-5 flex-shrink-0 text-gray-400"
+                  className="mr-1.5 h-5 w-5 flex-shrink-0 text-slate-400"
                 />
                 {detailsQuery.data.experience}
               </div>
-              <div className="flex items-center pt-2 text-sm text-gray-500">
+              <div className="flex items-center pt-2 text-sm text-slate-500">
                 <CalendarIcon
                   aria-hidden="true"
-                  className="mr-1.5 h-5 w-5 flex-shrink-0 text-gray-400"
+                  className="mr-1.5 h-5 w-5 flex-shrink-0 text-slate-400"
                 />
                 {`Uploaded ${formatDistanceToNow(detailsQuery.data.createdAt, {
                   addSuffix: true,
@@ -195,10 +195,10 @@ export default function ResumeReviewPage() {
               </div>
             </div>
             {detailsQuery.data.additionalInfo && (
-              <div className="flex items-start whitespace-pre-wrap pt-2 text-sm text-gray-500">
+              <div className="flex items-start whitespace-pre-wrap pt-2 text-sm text-slate-500">
                 <InformationCircleIcon
                   aria-hidden="true"
-                  className="mr-1.5 h-5 w-5 flex-shrink-0 text-gray-400"
+                  className="mr-1.5 h-5 w-5 flex-shrink-0 text-slate-400"
                 />
                 <ResumeExpandableText
                   key={detailsQuery.data.additionalInfo}
diff --git a/apps/portal/src/pages/resumes/browse.tsx b/apps/portal/src/pages/resumes/browse.tsx
index dd4a5335..3310a9a7 100644
--- a/apps/portal/src/pages/resumes/browse.tsx
+++ b/apps/portal/src/pages/resumes/browse.tsx
@@ -282,11 +282,11 @@ export default function ResumeHomePage() {
                 leaveTo="translate-x-full">
                 <Dialog.Panel className="relative ml-auto flex h-full w-full max-w-xs flex-col overflow-y-scroll bg-white py-4 pb-12 shadow-xl">
                   <div className="flex items-center justify-between px-4">
-                    <h2 className="text-lg font-medium text-gray-900">
+                    <h2 className="text-lg font-medium text-slate-900">
                       Shortcuts
                     </h2>
                     <button
-                      className="-mr-2 flex h-10 w-10 items-center justify-center rounded-md bg-white p-2 text-gray-400"
+                      className="-mr-2 flex h-10 w-10 items-center justify-center rounded-md bg-white p-2 text-slate-400"
                       type="button"
                       onClick={() => setMobileFiltersOpen(false)}>
                       <span className="sr-only">Close menu</span>
@@ -294,9 +294,9 @@ export default function ResumeHomePage() {
                     </button>
                   </div>
 
-                  <form className="mt-4 border-t border-gray-200">
+                  <form className="mt-4 border-t border-slate-200">
                     <ul
-                      className="flex flex-wrap justify-start gap-4 px-4 py-3 font-medium text-gray-900"
+                      className="flex flex-wrap justify-start gap-4 px-4 py-3 font-medium text-slate-900"
                       role="list">
                       {SHORTCUTS.map((shortcut) => (
                         <li key={shortcut.name}>
@@ -313,12 +313,12 @@ export default function ResumeHomePage() {
                       <Disclosure
                         key={filter.id}
                         as="div"
-                        className="border-t border-gray-200 px-4 py-6">
+                        className="border-t border-slate-200 px-4 py-6">
                         {({ open }) => (
                           <>
                             <h3 className="-mx-2 -my-3 flow-root">
-                              <Disclosure.Button className="flex w-full items-center justify-between bg-white px-2 py-3 text-gray-400 hover:text-gray-500">
-                                <span className="font-medium text-gray-900">
+                              <Disclosure.Button className="flex w-full items-center justify-between bg-white px-2 py-3 text-slate-400 hover:text-slate-500">
+                                <span className="font-medium text-slate-900">
                                   {filter.label}
                                 </span>
                                 <span className="ml-6 flex items-center">
@@ -341,7 +341,7 @@ export default function ResumeHomePage() {
                                 {filter.options.map((option) => (
                                   <div
                                     key={option.value}
-                                    className="[&>div>div:nth-child(2)>label]:font-normal [&>div>div:nth-child(1)>input]:text-indigo-600 [&>div>div:nth-child(1)>input]:ring-indigo-500">
+                                    className="[&>div>div:nth-child(1)>input]:text-primary-600 [&>div>div:nth-child(1)>input]:ring-primary-500 [&>div>div:nth-child(2)>label]:font-normal">
                                     <CheckboxInput
                                       label={option.label}
                                       value={userFilters[filter.id].includes(
@@ -374,13 +374,13 @@ export default function ResumeHomePage() {
       <main className="h-[calc(100vh-4rem)] flex-auto overflow-y-scroll px-8 pt-6 pb-4">
         <div className="flex justify-start">
           <div className="hidden w-1/6 pt-2 lg:block">
-            <h3 className="text-md font-medium tracking-tight text-gray-900">
+            <h3 className="text-md font-medium tracking-tight text-slate-900">
               Shortcuts
             </h3>
             <div className="w-100 pt-4 sm:pr-0 md:pr-4">
               <form>
                 <ul
-                  className="flex w-11/12 flex-wrap justify-start gap-2 pb-6 text-sm font-medium text-gray-900"
+                  className="flex w-11/12 flex-wrap justify-start gap-2 pb-6 text-sm font-medium text-slate-900"
                   role="list">
                   {SHORTCUTS.map((shortcut) => (
                     <li key={shortcut.name}>
@@ -392,19 +392,19 @@ export default function ResumeHomePage() {
                     </li>
                   ))}
                 </ul>
-                <h3 className="text-md font-medium tracking-tight text-gray-900">
+                <h3 className="text-md font-medium tracking-tight text-slate-900">
                   Explore these filters
                 </h3>
                 {filters.map((filter) => (
                   <Disclosure
                     key={filter.id}
                     as="div"
-                    className="border-b border-gray-200 py-6">
+                    className="border-b border-slate-200 py-6">
                     {({ open }) => (
                       <>
                         <h3 className="-my-3 flow-root">
-                          <Disclosure.Button className="flex w-full items-center justify-between py-3 text-sm text-gray-400 hover:text-gray-500">
-                            <span className="font-medium text-gray-900">
+                          <Disclosure.Button className="flex w-full items-center justify-between py-3 text-sm text-slate-400 hover:text-slate-500">
+                            <span className="font-medium text-slate-900">
                               {filter.label}
                             </span>
                             <span className="ml-6 flex items-center">
@@ -431,7 +431,7 @@ export default function ResumeHomePage() {
                             {filter.options.map((option) => (
                               <div
                                 key={option.value}
-                                className="[&>div>div:nth-child(2)>label]:font-normal [&>div>div:nth-child(1)>input]:text-indigo-600 [&>div>div:nth-child(1)>input]:ring-indigo-500">
+                                className="[&>div>div:nth-child(1)>input]:text-primary-600 [&>div>div:nth-child(1)>input]:ring-primary-500 [&>div>div:nth-child(2)>label]:font-normal">
                                 <CheckboxInput
                                   label={option.label}
                                   value={userFilters[filter.id].includes(
@@ -483,7 +483,7 @@ export default function ResumeHomePage() {
 
                 <div>
                   <button
-                    className="ml-4 rounded-md bg-indigo-500 py-2 px-3 text-sm font-medium text-white lg:hidden"
+                    className="bg-primary-500 ml-4 rounded-md py-2 px-3 text-sm font-medium text-white lg:hidden"
                     type="button"
                     onClick={onSubmitResume}>
                     Submit Resume
@@ -515,7 +515,7 @@ export default function ResumeHomePage() {
                   </DropdownMenu>
                 </div>
                 <button
-                  className="-m-2 text-gray-400 hover:text-gray-500 lg:hidden"
+                  className="-m-2 text-slate-400 hover:text-slate-500 lg:hidden"
                   type="button"
                   onClick={() => setMobileFiltersOpen(true)}>
                   <span className="sr-only">Filters</span>
@@ -524,7 +524,7 @@ export default function ResumeHomePage() {
 
                 <div>
                   <button
-                    className="hidden w-36 rounded-md bg-indigo-500 py-2 px-3 text-sm font-medium text-white lg:block"
+                    className="bg-primary-500 hidden w-36 rounded-md py-2 px-3 text-sm font-medium text-white lg:block"
                     type="button"
                     onClick={onSubmitResume}>
                     Submit Resume
diff --git a/apps/portal/src/pages/resumes/submit.tsx b/apps/portal/src/pages/resumes/submit.tsx
index 06915a00..6286f173 100644
--- a/apps/portal/src/pages/resumes/submit.tsx
+++ b/apps/portal/src/pages/resumes/submit.tsx
@@ -318,26 +318,26 @@ export default function SubmitResumeForm({
                 <div
                   {...getRootProps()}
                   className={clsx(
-                    fileUploadError ? 'border-danger-600' : 'border-gray-300',
-                    'flex cursor-pointer justify-center rounded-md border-2 border-dashed bg-gray-100 py-4',
+                    fileUploadError ? 'border-danger-600' : 'border-slate-300',
+                    'flex cursor-pointer justify-center rounded-md border-2 border-dashed bg-slate-100 py-4',
                   )}>
                   <div className="space-y-1 text-center">
                     {resumeFile == null ? (
-                      <ArrowUpCircleIcon className="m-auto h-10 w-10 text-indigo-500" />
+                      <ArrowUpCircleIcon className="text-primary-500 m-auto h-10 w-10" />
                     ) : (
                       <p
-                        className="cursor-pointer underline underline-offset-1 hover:text-indigo-600"
+                        className="hover:text-primary-600 cursor-pointer underline underline-offset-1"
                         onClick={onClickDownload}>
                         {resumeFile.name}
                       </p>
                     )}
                     <div className="flex items-center text-sm">
                       <label
-                        className="rounded-md focus-within:outline-none focus-within:ring-2 focus-within:ring-indigo-500 focus-within:ring-offset-2"
+                        className="focus-within:ring-primary-500 rounded-md focus-within:outline-none focus-within:ring-2 focus-within:ring-offset-2"
                         htmlFor="file-upload">
                         <span className="font-medium">Drop file here</span>
                         <span className="mr-1 ml-1 font-light">or</span>
-                        <span className="cursor-pointer font-medium text-indigo-600 hover:text-indigo-400">
+                        <span className="text-primary-600 hover:text-primary-400 cursor-pointer font-medium">
                           {resumeFile == null ? 'Select file' : 'Replace file'}
                         </span>
                         <input
@@ -352,7 +352,7 @@ export default function SubmitResumeForm({
                         />
                       </label>
                     </div>
-                    <p className="text-xs text-gray-500">
+                    <p className="text-xs text-slate-500">
                       PDF up to {FILE_SIZE_LIMIT_MB}MB
                     </p>
                   </div>
diff --git a/apps/portal/src/pages/todos/index.tsx b/apps/portal/src/pages/todos/index.tsx
index 7f69d5b7..7a9e1ca7 100644
--- a/apps/portal/src/pages/todos/index.tsx
+++ b/apps/portal/src/pages/todos/index.tsx
@@ -34,14 +34,14 @@ export default function TodoList() {
       <div className="mx-auto px-4 py-8 sm:px-6 lg:px-8">
         <div className="sm:flex sm:items-center">
           <div className="sm:flex-auto">
-            <h1 className="text-xl font-semibold text-gray-900">Todos</h1>
-            <p className="mt-2 text-sm text-gray-700">
+            <h1 className="text-xl font-semibold text-slate-900">Todos</h1>
+            <p className="mt-2 text-sm text-slate-700">
               A list of all Todos added by everyone.
             </p>
           </div>
           <div className="mt-4 sm:mt-0 sm:ml-16 sm:flex-none">
             <Link
-              className="inline-flex items-center justify-center rounded-md border border-transparent bg-indigo-600 px-4 py-2 text-sm font-medium text-white shadow-sm hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 sm:w-auto"
+              className="bg-primary-600 hover:bg-primary-700 focus:ring-primary-500 inline-flex items-center justify-center rounded-md border border-transparent px-4 py-2 text-sm font-medium text-white shadow-sm focus:outline-none focus:ring-2 focus:ring-offset-2 sm:w-auto"
               href="/todos/new">
               Add Todo
             </Link>
@@ -54,40 +54,40 @@ export default function TodoList() {
             <div className="-my-2 -mx-4 overflow-x-auto sm:-mx-6 lg:-mx-8">
               <div className="inline-block min-w-full py-2 align-middle md:px-6 lg:px-8">
                 <div className="overflow-hidden shadow ring-1 ring-black ring-opacity-5 md:rounded-lg">
-                  <table className="min-w-full divide-y divide-gray-300">
-                    <thead className="bg-gray-50">
-                      <tr className="divide-x divide-gray-200">
+                  <table className="min-w-full divide-y divide-slate-300">
+                    <thead className="bg-slate-50">
+                      <tr className="divide-x divide-slate-200">
                         <th
-                          className="py-3.5 pl-4 pr-4 text-left text-sm font-semibold text-gray-900 sm:pl-6"
+                          className="py-3.5 pl-4 pr-4 text-left text-sm font-semibold text-slate-900 sm:pl-6"
                           scope="col">
                           Description
                         </th>
                         <th
-                          className="px-4 py-3.5 text-left text-sm font-semibold text-gray-900"
+                          className="px-4 py-3.5 text-left text-sm font-semibold text-slate-900"
                           scope="col">
                           Creator
                         </th>
                         <th
-                          className="px-4 py-3.5 text-left text-sm font-semibold text-gray-900"
+                          className="px-4 py-3.5 text-left text-sm font-semibold text-slate-900"
                           scope="col">
                           Last Updated
                         </th>
                         <th
-                          className="py-3.5 pl-4 pr-4 text-left text-sm font-semibold text-gray-900 sm:pr-6"
+                          className="py-3.5 pl-4 pr-4 text-left text-sm font-semibold text-slate-900 sm:pr-6"
                           scope="col">
                           Status
                         </th>
                         <th
-                          className="py-3.5 pl-4 pr-4 text-left text-sm font-semibold text-gray-900 sm:pr-6"
+                          className="py-3.5 pl-4 pr-4 text-left text-sm font-semibold text-slate-900 sm:pr-6"
                           scope="col">
                           Actions
                         </th>
                       </tr>
                     </thead>
-                    <tbody className="divide-y divide-gray-200 bg-white">
+                    <tbody className="divide-y divide-slate-200 bg-white">
                       {todosQuery.data?.map((todo) => (
-                        <tr key={todo.id} className="divide-x divide-gray-200">
-                          <td className="whitespace-nowrap py-4 pl-4 pr-4 text-sm text-gray-500 sm:pl-6">
+                        <tr key={todo.id} className="divide-x divide-slate-200">
+                          <td className="whitespace-nowrap py-4 pl-4 pr-4 text-sm text-slate-500 sm:pl-6">
                             {todo.id === currentlyEditingTodo ? (
                               <form
                                 ref={formRef}
@@ -120,7 +120,7 @@ export default function TodoList() {
                                 }}>
                                 <input
                                   autoFocus={true}
-                                  className="block w-full min-w-0 flex-1 rounded-md border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm"
+                                  className="focus:border-primary-500 focus:ring-primary-500 block w-full min-w-0 flex-1 rounded-md border-slate-300 sm:text-sm"
                                   defaultValue={todo.text}
                                   name="text"
                                   type="text"
@@ -130,19 +130,19 @@ export default function TodoList() {
                               todo.text
                             )}
                           </td>
-                          <td className="whitespace-nowrap p-4 text-sm text-gray-500">
+                          <td className="whitespace-nowrap p-4 text-sm text-slate-500">
                             {todo.user.name}
                           </td>
-                          <td className="whitespace-nowrap p-4 text-sm text-gray-500">
+                          <td className="whitespace-nowrap p-4 text-sm text-slate-500">
                             {todo.updatedAt.toLocaleString('en-US', {
                               dateStyle: 'long',
                               timeStyle: 'medium',
                             })}
                           </td>
-                          <td className="whitespace-nowrap py-4 pl-4 pr-4 text-sm text-gray-500 sm:pr-6">
+                          <td className="whitespace-nowrap py-4 pl-4 pr-4 text-sm text-slate-500 sm:pr-6">
                             <input
                               checked={todo.status === 'COMPLETE'}
-                              className="h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500"
+                              className="text-primary-600 focus:ring-primary-500 h-4 w-4 rounded border-slate-300"
                               type="checkbox"
                               onChange={() => {
                                 todoUpdateMutation.mutate({
@@ -155,12 +155,12 @@ export default function TodoList() {
                               }}
                             />
                           </td>
-                          <td className="space-x-4 whitespace-nowrap py-4 pl-4 pr-4 text-sm text-gray-500 sm:pr-6">
+                          <td className="space-x-4 whitespace-nowrap py-4 pl-4 pr-4 text-sm text-slate-500 sm:pr-6">
                             {data?.user?.id === todo.userId && (
                               <>
                                 {currentlyEditingTodo === todo.id ? (
                                   <a
-                                    className="text-indigo-600 hover:text-indigo-900"
+                                    className="text-primary-600 hover:text-primary-900"
                                     href="#"
                                     onClick={() => {
                                       setCurrentlyEditingTodo(null);
@@ -169,7 +169,7 @@ export default function TodoList() {
                                   </a>
                                 ) : (
                                   <a
-                                    className="text-indigo-600 hover:text-indigo-900"
+                                    className="text-primary-600 hover:text-primary-900"
                                     href="#"
                                     onClick={async () => {
                                       setCurrentlyEditingTodo(todo.id);
@@ -178,7 +178,7 @@ export default function TodoList() {
                                   </a>
                                 )}
                                 <a
-                                  className="text-indigo-600 hover:text-indigo-900"
+                                  className="text-primary-600 hover:text-primary-900"
                                   href="#"
                                   onClick={async () => {
                                     const confirmDelete = window.confirm(
diff --git a/apps/portal/src/pages/todos/new.tsx b/apps/portal/src/pages/todos/new.tsx
index 6e3d566b..03c36756 100644
--- a/apps/portal/src/pages/todos/new.tsx
+++ b/apps/portal/src/pages/todos/new.tsx
@@ -27,7 +27,7 @@ export default function TodosCreate() {
             </h1>
             <form
               ref={formRef}
-              className="w-full space-y-8 divide-y divide-gray-200"
+              className="w-full space-y-8 divide-y divide-slate-200"
               onSubmit={async (event) => {
                 event.preventDefault();
                 if (!formRef.current) {
@@ -52,14 +52,14 @@ export default function TodosCreate() {
               }}>
               <div className="mt-6">
                 <label
-                  className="block text-sm font-medium text-gray-700"
+                  className="block text-sm font-medium text-slate-700"
                   htmlFor="text">
                   Text
                 </label>
                 <div className="mt-1 flex rounded-md shadow-sm">
                   <input
                     autoFocus={true}
-                    className="block w-full min-w-0 flex-1 rounded-md border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm"
+                    className="focus:border-primary-500 focus:ring-primary-500 block w-full min-w-0 flex-1 rounded-md border-slate-300 sm:text-sm"
                     id="text"
                     name="text"
                     type="text"
@@ -71,12 +71,12 @@ export default function TodosCreate() {
               <div className="pt-5">
                 <div className="flex justify-end">
                   <Link
-                    className="rounded-md border border-gray-300 bg-white py-2 px-4 text-sm font-medium text-gray-700 shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
+                    className="focus:ring-primary-500 rounded-md border border-slate-300 bg-white py-2 px-4 text-sm font-medium text-slate-700 shadow-sm hover:bg-slate-50 focus:outline-none focus:ring-2 focus:ring-offset-2"
                     href="/todos">
                     Cancel
                   </Link>
                   <button
-                    className="ml-3 inline-flex justify-center rounded-md border border-transparent bg-indigo-600 py-2 px-4 text-sm font-medium text-white shadow-sm hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
+                    className="bg-primary-600 hover:bg-primary-700 focus:ring-primary-500 ml-3 inline-flex justify-center rounded-md border border-transparent py-2 px-4 text-sm font-medium text-white shadow-sm focus:outline-none focus:ring-2 focus:ring-offset-2"
                     type="submit">
                     Save
                   </button>