From f21c4eb11ea7bc08c4422abbc180574eff49fced Mon Sep 17 00:00:00 2001
From: sean-brydon <55134778+sean-brydon@users.noreply.github.com>
Date: Thu, 12 Jan 2023 16:57:43 +0000
Subject: [PATCH] Fixing colors (#6429)

---
 apps/web/components/Embed.tsx                  | 14 +++++++-------
 apps/web/components/NavTabs.tsx                |  4 ++--
 .../components/apps/CalendarListContainer.tsx  |  4 +---
 apps/web/components/booking/AvailableTimes.tsx |  2 +-
 .../web/components/booking/BookingListItem.tsx |  2 +-
 .../components/eventtype/AvailabilityTab.tsx   |  2 +-
 .../eventtype/RecurringEventController.tsx     |  6 +++---
 .../CreateEventsOnCalendarSelect.tsx           |  2 +-
 apps/web/components/team/screens/Team.tsx      |  4 ++--
 apps/web/components/ui/AuthContainer.tsx       |  4 ++--
 apps/web/components/ui/LinkIconButton.tsx      |  2 +-
 .../components/ui/SettingInputContainer.tsx    |  4 ++--
 apps/web/components/ui/form/CheckboxField.tsx  |  4 ++--
 apps/web/components/ui/form/CheckedSelect.tsx  |  2 +-
 apps/web/components/ui/form/MinutesField.tsx   |  2 +-
 apps/web/pages/[user].tsx                      |  6 +++---
 apps/web/pages/auth/forgot-password/index.tsx  |  2 +-
 apps/web/pages/availability/[schedule].tsx     |  2 +-
 apps/web/pages/availability/troubleshoot.tsx   |  8 +++-----
 apps/web/pages/booking/[uid].tsx               |  4 ++--
 apps/web/pages/event-types/index.tsx           |  4 ++--
 .../pages/settings/my-account/calendars.tsx    |  4 +---
 .../pages/settings/my-account/conferencing.tsx |  2 +-
 apps/web/styles/globals.css                    |  6 +++---
 .../components/FormInputFields.tsx             |  2 +-
 .../react-awesome-query-builder/widgets.tsx    |  2 +-
 .../pages/routing-link/[...appPages].tsx       |  2 +-
 .../giphy/components/SearchDialog.tsx          |  4 ++--
 .../rainbow/components/RainbowInstallForm.tsx  |  4 ++--
 .../rainbow/components/RainbowKit.tsx          |  4 ++--
 .../pages/how-to-use/[...appPages].tsx         |  6 +++---
 .../zapier/components/TemplateCard.tsx         |  2 +-
 .../app-store/zapier/pages/setup/index.tsx     |  2 +-
 packages/config/tailwind-preset.js             | 13 +------------
 packages/features/apps/AdminAppsList.tsx       |  2 +-
 .../calendars/DestinationCalendarSelector.tsx  |  2 +-
 .../api-keys/components/ApiKeyDialogForm.tsx   |  2 +-
 .../ee/payments/components/PaymentPage.tsx     |  4 ++--
 .../ee/sso/components/SAMLConfiguration.tsx    |  4 ++--
 .../ee/support/components/HelpMenuItem.tsx     | 14 +++++++-------
 .../teams/components/TeamAvailabilityModal.tsx |  2 +-
 .../components/TeamAvailabilityScreen.tsx      |  8 ++++----
 .../teams/components/TeamAvailabilityTimes.tsx |  2 +-
 .../ee/teams/components/TeamListItem.tsx       |  2 +-
 .../components/v2/TeamAvailabilityScreen.tsx   |  8 ++++----
 .../components/v2/TeamAvailabilityTimes.tsx    |  2 +-
 .../workflows/components/EventWorkflowsTab.tsx |  2 +-
 .../workflows/components/WorkflowListPage.tsx  |  2 +-
 .../components/EventTypeDescription.tsx        |  2 +-
 packages/features/kbar/Kbar.tsx                |  2 +-
 .../components/DateOverrideInputDialog.tsx     |  4 +---
 .../schedules/components/DateOverrideList.tsx  |  4 ++--
 .../features/schedules/components/Schedule.tsx |  6 +++---
 .../schedules/components/ScheduleListItem.tsx  |  4 ++--
 packages/features/shell/Shell.tsx              | 18 +++++++++---------
 .../webhooks/components/WebhookForm.tsx        |  2 +-
 .../ui/components/button/LinkIconButton.tsx    |  2 +-
 .../dialog/ConfirmationDialogContent.tsx       |  2 +-
 .../ui/components/form/checkbox/Checkbox.tsx   |  2 +-
 .../ui/components/form/dropdown/Dropdown.tsx   |  2 +-
 .../form/toggleGroup/ToggleGroup.tsx           |  4 ++--
 .../ui/components/layout/ShellSubHeading.tsx   |  2 +-
 packages/ui/components/list/List.tsx           |  2 +-
 .../navigation/tabs/HorizontalTabItem.tsx      |  2 +-
 packages/ui/form/radio-area/RadioAreaGroup.tsx |  2 +-
 packages/ui/form/radio-area/Select.tsx         |  2 +-
 66 files changed, 119 insertions(+), 138 deletions(-)

diff --git a/apps/web/components/Embed.tsx b/apps/web/components/Embed.tsx
index 1561c2ffa4..38bec35fe0 100644
--- a/apps/web/components/Embed.tsx
+++ b/apps/web/components/Embed.tsx
@@ -504,7 +504,7 @@ const tabs = [
       return (
         <>
           <div>
-            <small className="flex py-4 text-neutral-500">
+            <small className="flex py-4 text-gray-500">
               {t("place_where_cal_widget_appear", { appName: APP_NAME })}
             </small>
           </div>
@@ -556,7 +556,7 @@ ${getEmbedTypeSpecificString({ embedFramework: "HTML", embedType, calLink, previ
       }
       return (
         <>
-          <small className="flex py-4 text-neutral-500">{t("create_update_react_component")}</small>
+          <small className="flex py-4 text-gray-500">{t("create_update_react_component")}</small>
           <TextArea
             data-testid="embed-react"
             ref={ref as typeof ref & MutableRefObject<HTMLTextAreaElement>}
@@ -650,7 +650,7 @@ const ChooseEmbedTypesDialogContent = () => {
             <div className="order-none box-border flex-none rounded-sm border border-solid bg-white">
               {embed.illustration}
             </div>
-            <div className="mt-2 font-medium text-neutral-900">{embed.title}</div>
+            <div className="mt-2 font-medium text-gray-900">{embed.title}</div>
             <p className="text-sm text-gray-500">{embed.subtitle}</p>
           </button>
         ))}
@@ -827,7 +827,7 @@ const EmbedTypeCodeAndPreviewDialogContent = ({
                 onOpenChange={() => setIsEmbedCustomizationOpen((val) => !val)}>
                 <CollapsibleTrigger
                   type="button"
-                  className="flex w-full items-center text-base font-medium text-neutral-900">
+                  className="flex w-full items-center text-base font-medium text-gray-900">
                   <div>
                     {embedType === "inline"
                       ? "Inline Embed Customization"
@@ -838,7 +838,7 @@ const EmbedTypeCodeAndPreviewDialogContent = ({
                   <Icon.FiChevronRight
                     className={`${
                       isEmbedCustomizationOpen ? "rotate-90 transform" : ""
-                    } ml-auto h-5 w-5 text-neutral-500`}
+                    } ml-auto h-5 w-5 text-gray-500`}
                   />
                 </CollapsibleTrigger>
                 <CollapsibleContent className="text-sm">
@@ -1001,11 +1001,11 @@ const EmbedTypeCodeAndPreviewDialogContent = ({
                 open={isBookingCustomizationOpen}
                 onOpenChange={() => setIsBookingCustomizationOpen((val) => !val)}>
                 <CollapsibleTrigger className="flex w-full" type="button">
-                  <div className="text-base  font-medium text-neutral-900">Cal Booking Customization</div>
+                  <div className="text-base  font-medium text-gray-900">Cal Booking Customization</div>
                   <Icon.FiChevronRight
                     className={`${
                       isBookingCustomizationOpen ? "rotate-90 transform" : ""
-                    } ml-auto h-5 w-5 text-neutral-500`}
+                    } ml-auto h-5 w-5 text-gray-500`}
                   />
                 </CollapsibleTrigger>
                 <CollapsibleContent>
diff --git a/apps/web/components/NavTabs.tsx b/apps/web/components/NavTabs.tsx
index df04e07773..ca8d017869 100644
--- a/apps/web/components/NavTabs.tsx
+++ b/apps/web/components/NavTabs.tsx
@@ -67,7 +67,7 @@ const NavTabs: FC<NavTabProps> = ({ tabs, linkProps, ...props }) => {
                   onClick={onClick}
                   className={classNames(
                     isCurrent
-                      ? "border-neutral-900 text-neutral-900"
+                      ? "border-neutral-900 text-gray-900"
                       : "border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700",
                     "group inline-flex items-center border-b-2 py-4 px-1 text-sm font-medium",
                     className
@@ -76,7 +76,7 @@ const NavTabs: FC<NavTabProps> = ({ tabs, linkProps, ...props }) => {
                   {tab.icon && (
                     <tab.icon
                       className={classNames(
-                        isCurrent ? "text-neutral-900" : "text-gray-400 group-hover:text-gray-500",
+                        isCurrent ? "text-gray-900" : "text-gray-400 group-hover:text-gray-500",
                         "-ml-0.5 hidden h-4 w-4 ltr:mr-2 rtl:ml-2 sm:inline-block"
                       )}
                       aria-hidden="true"
diff --git a/apps/web/components/apps/CalendarListContainer.tsx b/apps/web/components/apps/CalendarListContainer.tsx
index c2ba087658..e9f3ad30eb 100644
--- a/apps/web/components/apps/CalendarListContainer.tsx
+++ b/apps/web/components/apps/CalendarListContainer.tsx
@@ -184,9 +184,7 @@ function ConnectedCalendarsList(props: Props) {
                     <div className="border-t border-gray-200">
                       {!fromOnboarding && (
                         <>
-                          <p className="px-4 pt-4 text-sm text-neutral-500">
-                            {t("toggle_calendars_conflict")}
-                          </p>
+                          <p className="px-4 pt-4 text-sm text-gray-500">{t("toggle_calendars_conflict")}</p>
                           <ul className="space-y-2 p-4">
                             {item.calendars.map((cal) => (
                               <CalendarSwitch
diff --git a/apps/web/components/booking/AvailableTimes.tsx b/apps/web/components/booking/AvailableTimes.tsx
index fa6a0eb943..83fa573140 100644
--- a/apps/web/components/booking/AvailableTimes.tsx
+++ b/apps/web/components/booking/AvailableTimes.tsx
@@ -119,7 +119,7 @@ const AvailableTimes: FC<AvailableTimesProps> = ({
                     prefetch={false}
                     className={classNames(
                       "text-primary-500 hover:border-gray-900 hover:bg-gray-50",
-                      "dark:bg-darkgray-200 dark:hover:bg-darkgray-300 dark:hover:border-darkmodebrand mb-2 block rounded-md border bg-white py-2 text-sm font-medium dark:border-transparent dark:text-neutral-200",
+                      "dark:bg-darkgray-200 dark:hover:bg-darkgray-300 dark:hover:border-darkmodebrand dark:text-darkgray-800 mb-2 block rounded-md border bg-white py-2 text-sm font-medium dark:border-transparent",
                       brand === "#fff" || brand === "#ffffff" ? "" : ""
                     )}
                     data-testid="time">
diff --git a/apps/web/components/booking/BookingListItem.tsx b/apps/web/components/booking/BookingListItem.tsx
index 76f24c169b..679b87b086 100644
--- a/apps/web/components/booking/BookingListItem.tsx
+++ b/apps/web/components/booking/BookingListItem.tsx
@@ -356,7 +356,7 @@ function BookingListItem(booking: BookingItemProps) {
             <div
               title={booking.title}
               className={classNames(
-                "max-w-10/12 sm:max-w-56 text-sm font-medium leading-6 text-neutral-900 md:max-w-full",
+                "max-w-10/12 sm:max-w-56 text-sm font-medium leading-6 text-gray-900 md:max-w-full",
                 isCancelled ? "line-through" : ""
               )}>
               {booking.title}
diff --git a/apps/web/components/eventtype/AvailabilityTab.tsx b/apps/web/components/eventtype/AvailabilityTab.tsx
index 9bb2fbaffe..bcacbbaa96 100644
--- a/apps/web/components/eventtype/AvailabilityTab.tsx
+++ b/apps/web/components/eventtype/AvailabilityTab.tsx
@@ -109,7 +109,7 @@ export const AvailabilityTab = ({ isTeamEvent }: { isTeamEvent: boolean }) => {
       <div className="space-y-4">
         <div>
           <div className="min-w-4 mb-2">
-            <label htmlFor="availability" className="mt-0 flex text-sm font-medium text-neutral-700">
+            <label htmlFor="availability" className="mt-0 flex text-sm font-medium text-gray-700">
               {t("availability")}
             </label>
           </div>
diff --git a/apps/web/components/eventtype/RecurringEventController.tsx b/apps/web/components/eventtype/RecurringEventController.tsx
index 8041b0397f..aa590ae88e 100644
--- a/apps/web/components/eventtype/RecurringEventController.tsx
+++ b/apps/web/components/eventtype/RecurringEventController.tsx
@@ -57,7 +57,7 @@ export default function RecurringEventController({
               {recurringEventState && (
                 <div data-testid="recurring-event-collapsible" className="text-sm">
                   <div className="flex items-center">
-                    <p className="text-neutral-900 ltr:mr-2 rtl:ml-2">{t("repeats_every")}</p>
+                    <p className="text-gray-900 ltr:mr-2 rtl:ml-2">{t("repeats_every")}</p>
                     <input
                       type="number"
                       min="1"
@@ -89,7 +89,7 @@ export default function RecurringEventController({
                     />
                   </div>
                   <div className="mt-4 flex items-center">
-                    <p className="text-neutral-900 ltr:mr-2 rtl:ml-2">{t("for_a_maximum_of")}</p>
+                    <p className="text-gray-900 ltr:mr-2 rtl:ml-2">{t("for_a_maximum_of")}</p>
                     <input
                       type="number"
                       min="1"
@@ -105,7 +105,7 @@ export default function RecurringEventController({
                         setRecurringEventState(newVal);
                       }}
                     />
-                    <p className="text-neutral-900 ltr:mr-2 rtl:ml-2">
+                    <p className="text-gray-900 ltr:mr-2 rtl:ml-2">
                       {t("events", {
                         count: recurringEventState.count,
                       })}
diff --git a/apps/web/components/getting-started/components/CreateEventsOnCalendarSelect.tsx b/apps/web/components/getting-started/components/CreateEventsOnCalendarSelect.tsx
index d0b2b58e35..e170a7763e 100644
--- a/apps/web/components/getting-started/components/CreateEventsOnCalendarSelect.tsx
+++ b/apps/web/components/getting-started/components/CreateEventsOnCalendarSelect.tsx
@@ -16,7 +16,7 @@ const CreateEventsOnCalendarSelect = (props: ICreateEventsOnCalendarSelectProps)
     <>
       <div className="mt-6 flex flex-row">
         <div className="w-full">
-          <label htmlFor="createEventsOn" className="flex text-sm font-medium text-neutral-700">
+          <label htmlFor="createEventsOn" className="flex text-sm font-medium text-gray-700">
             {t("create_events_on")}
           </label>
           <div className="mt-2">
diff --git a/apps/web/components/team/screens/Team.tsx b/apps/web/components/team/screens/Team.tsx
index c03d6a50aa..f0315ff652 100644
--- a/apps/web/components/team/screens/Team.tsx
+++ b/apps/web/components/team/screens/Team.tsx
@@ -22,8 +22,8 @@ const Member = ({ member, teamName }: { member: MemberType; teamName: string | n
           imageSrc={WEBAPP_URL + "/" + member.username + "/avatar.png"}
         />
         <section className="line-clamp-4 mt-2 w-full space-y-1">
-          <p className="font-medium text-neutral-900 dark:text-white">{member.name}</p>
-          <p className="line-clamp-3 overflow-ellipsis text-sm font-normal text-neutral-500 dark:text-white">
+          <p className="font-medium text-gray-900 dark:text-white">{member.name}</p>
+          <p className="line-clamp-3 overflow-ellipsis text-sm font-normal text-gray-500 dark:text-white">
             {member.bio || t("user_from_team", { user: member.name, team: teamName })}
           </p>
         </section>
diff --git a/apps/web/components/ui/AuthContainer.tsx b/apps/web/components/ui/AuthContainer.tsx
index 15c39cf2e3..eab0748583 100644
--- a/apps/web/components/ui/AuthContainer.tsx
+++ b/apps/web/components/ui/AuthContainer.tsx
@@ -24,7 +24,7 @@ export default function AuthContainer(props: React.PropsWithChildren<Props>) {
       )}
 
       <div className={classNames(props.showLogo ? "text-center" : "", "sm:mx-auto sm:w-full sm:max-w-md")}>
-        {props.heading && <h2 className="font-cal text-center text-3xl text-neutral-900">{props.heading}</h2>}
+        {props.heading && <h2 className="font-cal text-center text-3xl text-gray-900">{props.heading}</h2>}
       </div>
       {props.loading && (
         <div className="absolute z-50 flex h-screen w-full items-center bg-gray-50">
@@ -35,7 +35,7 @@ export default function AuthContainer(props: React.PropsWithChildren<Props>) {
         <div className="border-1 mx-2 rounded-md border-gray-200 bg-white px-4 py-10 sm:px-10">
           {props.children}
         </div>
-        <div className="mt-8 text-center text-sm text-neutral-600">
+        <div className="mt-8 text-center text-sm text-gray-600">
           {props.footerText}
           <Credits />
         </div>
diff --git a/apps/web/components/ui/LinkIconButton.tsx b/apps/web/components/ui/LinkIconButton.tsx
index 142f2e35d9..7835330edb 100644
--- a/apps/web/components/ui/LinkIconButton.tsx
+++ b/apps/web/components/ui/LinkIconButton.tsx
@@ -13,7 +13,7 @@ export default function LinkIconButton(props: LinkIconButtonProps) {
         type="button"
         {...props}
         className="text-md flex items-center rounded-sm px-2 py-1 text-sm font-medium text-gray-700 hover:bg-gray-200 hover:text-gray-900">
-        <props.Icon className="h-4 w-4 text-neutral-500 ltr:mr-2 rtl:ml-2" />
+        <props.Icon className="h-4 w-4 text-gray-500 ltr:mr-2 rtl:ml-2" />
         {props.children}
       </button>
     </div>
diff --git a/apps/web/components/ui/SettingInputContainer.tsx b/apps/web/components/ui/SettingInputContainer.tsx
index 5969177a8c..062a1bda76 100644
--- a/apps/web/components/ui/SettingInputContainer.tsx
+++ b/apps/web/components/ui/SettingInputContainer.tsx
@@ -13,8 +13,8 @@ export default function SettingInputContainer({
     <div className="space-y-3">
       <div className="block sm:flex">
         <div className="min-w-48 mb-4 sm:mb-0">
-          <label htmlFor={htmlFor} className="mt-1 flex text-sm font-medium text-neutral-700">
-            <Icon className="mt-0.5 h-4 w-4 text-neutral-500 ltr:mr-2 rtl:ml-2" />
+          <label htmlFor={htmlFor} className="mt-1 flex text-sm font-medium text-gray-700">
+            <Icon className="mt-0.5 h-4 w-4 text-gray-500 ltr:mr-2 rtl:ml-2" />
             {label}
           </label>
         </div>
diff --git a/apps/web/components/ui/form/CheckboxField.tsx b/apps/web/components/ui/form/CheckboxField.tsx
index f205cea300..edb92232f2 100644
--- a/apps/web/components/ui/form/CheckboxField.tsx
+++ b/apps/web/components/ui/form/CheckboxField.tsx
@@ -21,7 +21,7 @@ const CheckboxField = forwardRef<HTMLInputElement, Props>(
             {React.createElement(
               descriptionAsLabel ? "div" : "label",
               {
-                className: "flex text-sm font-medium text-neutral-700",
+                className: "flex text-sm font-medium text-gray-700",
                 ...(!descriptionAsLabel
                   ? {
                       htmlFor: rest.id,
@@ -39,7 +39,7 @@ const CheckboxField = forwardRef<HTMLInputElement, Props>(
               {
                 className: classNames(
                   "relative flex items-start",
-                  descriptionAsLabel ? "text-neutral-700" : "text-neutral-900"
+                  descriptionAsLabel ? "text-gray-700" : "text-gray-900"
                 ),
               },
               <>
diff --git a/apps/web/components/ui/form/CheckedSelect.tsx b/apps/web/components/ui/form/CheckedSelect.tsx
index 793dac55a8..3489bc50b1 100644
--- a/apps/web/components/ui/form/CheckedSelect.tsx
+++ b/apps/web/components/ui/form/CheckedSelect.tsx
@@ -50,7 +50,7 @@ export const CheckedSelect = ({
           {option.label}
           <Icon.FiX
             onClick={() => props.onChange(value.filter((item) => item.value !== option.value))}
-            className="float-right mt-0.5 h-5 w-5 cursor-pointer text-neutral-500"
+            className="float-right mt-0.5 h-5 w-5 cursor-pointer text-gray-500"
           />
         </div>
       ))}
diff --git a/apps/web/components/ui/form/MinutesField.tsx b/apps/web/components/ui/form/MinutesField.tsx
index 251ca6c812..16b5786f55 100644
--- a/apps/web/components/ui/form/MinutesField.tsx
+++ b/apps/web/components/ui/form/MinutesField.tsx
@@ -10,7 +10,7 @@ const MinutesField = forwardRef<HTMLInputElement, Props>(({ label, ...rest }, re
     <div className="block sm:flex">
       {!!label && (
         <div className="min-w-48 mb-4 sm:mb-0">
-          <label htmlFor={rest.id} className="flex h-full items-center text-sm font-medium text-neutral-700">
+          <label htmlFor={rest.id} className="flex h-full items-center text-sm font-medium text-gray-700">
             {label}
           </label>
         </div>
diff --git a/apps/web/pages/[user].tsx b/apps/web/pages/[user].tsx
index f3594a82e1..45cbfb1192 100644
--- a/apps/web/pages/[user].tsx
+++ b/apps/web/pages/[user].tsx
@@ -63,7 +63,7 @@ export default function User(props: inferSSRProps<typeof getServerSideProps> & E
             className="flex justify-between px-6 py-4"
             data-testid="event-type-link">
             <div className="flex-shrink">
-              <p className="dark:text-darkgray-700 text-sm font-semibold text-neutral-900">{type.title}</p>
+              <p className="dark:text-darkgray-700 text-sm font-semibold text-gray-900">{type.title}</p>
               <EventTypeDescription className="text-sm" eventType={type} />
             </div>
             <div className="mt-1 self-center">
@@ -133,13 +133,13 @@ export default function User(props: inferSSRProps<typeof getServerSideProps> & E
           {isSingleUser && ( // When we deal with a single user, not dynamic group
             <div className="mb-8 text-center">
               <AvatarSSR user={user} className="mx-auto mb-4 h-24 w-24" alt={nameOrUsername} />
-              <h1 className="font-cal mb-1 text-3xl text-neutral-900 dark:text-white">
+              <h1 className="font-cal mb-1 text-3xl text-gray-900 dark:text-white">
                 {nameOrUsername}
                 {user.verified && (
                   <Icon.BadgeCheckIcon className="mx-1 -mt-1 inline h-6 w-6 text-blue-500 dark:text-white" />
                 )}
               </h1>
-              <p className="dark:text-darkgray-600 text-s text-neutral-500">{user.bio}</p>
+              <p className="dark:text-darkgray-600 text-s text-gray-500">{user.bio}</p>
             </div>
           )}
           <div
diff --git a/apps/web/pages/auth/forgot-password/index.tsx b/apps/web/pages/auth/forgot-password/index.tsx
index 5a72195059..cc389a382b 100644
--- a/apps/web/pages/auth/forgot-password/index.tsx
+++ b/apps/web/pages/auth/forgot-password/index.tsx
@@ -94,7 +94,7 @@ export default function ForgotPassword({ csrfToken }: { csrfToken: string }) {
       footerText={
         !success && (
           <>
-            <Link href="/auth/login" className="font-medium text-neutral-900">
+            <Link href="/auth/login" className="font-medium text-gray-900">
               {t("back_to_signin")}
             </Link>
           </>
diff --git a/apps/web/pages/availability/[schedule].tsx b/apps/web/pages/availability/[schedule].tsx
index 5fb871b000..7e4061487d 100644
--- a/apps/web/pages/availability/[schedule].tsx
+++ b/apps/web/pages/availability/[schedule].tsx
@@ -60,7 +60,7 @@ const DateOverride = ({ workingHours }: { workingHours: WorkingHours[] }) => {
           </span>
         </Tooltip>
       </h3>
-      <p className="mb-4 text-sm text-neutral-500 ltr:mr-4 rtl:ml-4">{t("date_overrides_subtitle")}</p>
+      <p className="mb-4 text-sm text-gray-500 ltr:mr-4 rtl:ml-4">{t("date_overrides_subtitle")}</p>
       <div className="mt-1 space-y-2">
         <DateOverrideList
           excludedDates={fields.map((field) => yyyymmdd(field.ranges[0].start))}
diff --git a/apps/web/pages/availability/troubleshoot.tsx b/apps/web/pages/availability/troubleshoot.tsx
index ed599bcf4d..67415dab3e 100644
--- a/apps/web/pages/availability/troubleshoot.tsx
+++ b/apps/web/pages/availability/troubleshoot.tsx
@@ -56,7 +56,7 @@ const AvailabilityView = ({ user }: { user: User }) => {
             if (e.target.value) setSelectedDate(e.target.value);
           }}
         />
-        <small className="block text-neutral-400">{t("hover_over_bold_times_tip")}</small>
+        <small className="block text-gray-400">{t("hover_over_bold_times_tip")}</small>
         <div className="mt-4 space-y-4">
           <div className="bg-brand dark:bg-darkmodebrand overflow-hidden rounded-md">
             <div className="text-brandcontrast dark:text-darkmodebrandcontrast px-4 py-2 sm:px-6">
@@ -82,13 +82,11 @@ const AvailabilityView = ({ user }: { user: User }) => {
                     data-testid="troubleshooter-busy-time">
                     <div className="px-4 py-5 text-black sm:p-6">
                       {t("calendar_shows_busy_between")}{" "}
-                      <span
-                        className="font-medium text-neutral-800"
-                        title={dayjs(slot.start).format("HH:mm")}>
+                      <span className="font-medium text-gray-800" title={dayjs(slot.start).format("HH:mm")}>
                         {dayjs(slot.start).format("HH:mm")}
                       </span>{" "}
                       {t("and")}{" "}
-                      <span className="font-medium text-neutral-800" title={dayjs(slot.end).format("HH:mm")}>
+                      <span className="font-medium text-gray-800" title={dayjs(slot.end).format("HH:mm")}>
                         {dayjs(slot.end).format("HH:mm")}
                       </span>{" "}
                       {t("on")} {dayjs(slot.start).format("D")}{" "}
diff --git a/apps/web/pages/booking/[uid].tsx b/apps/web/pages/booking/[uid].tsx
index dd27aef5ef..41a5687cbc 100644
--- a/apps/web/pages/booking/[uid].tsx
+++ b/apps/web/pages/booking/[uid].tsx
@@ -408,7 +408,7 @@ export default function Success(props: SuccessProps) {
                 </div>
                 <div className="mt-6 mb-8 text-center last:mb-0">
                   <h3
-                    className="text-2xl font-semibold leading-6 text-neutral-900 dark:text-white"
+                    className="text-2xl font-semibold leading-6 text-gray-900 dark:text-white"
                     data-testid={isCancelled ? "cancelled-headline" : ""}
                     id="modal-headline">
                     {needsConfirmation && !isCancelled
@@ -422,7 +422,7 @@ export default function Success(props: SuccessProps) {
                       : t("meeting_is_scheduled")}
                   </h3>
                   <div className="mt-3">
-                    <p className="text-neutral-600 dark:text-gray-300">{getTitle()}</p>
+                    <p className="text-gray-600 dark:text-gray-300">{getTitle()}</p>
                   </div>
                   <div className="border-bookinglightest text-bookingdark dark:border-darkgray-300 mt-8 grid grid-cols-3 border-t pt-8 text-left dark:text-gray-300">
                     {(isCancelled || reschedule) && cancellationReason && (
diff --git a/apps/web/pages/event-types/index.tsx b/apps/web/pages/event-types/index.tsx
index b5c5f9bb85..46168176ee 100644
--- a/apps/web/pages/event-types/index.tsx
+++ b/apps/web/pages/event-types/index.tsx
@@ -527,7 +527,7 @@ const EventTypeListHeading = ({
           {profile?.name || ""}
         </Link>
         {membershipCount && teamId && (
-          <span className="relative -top-px text-xs text-neutral-500 ltr:ml-2 ltr:mr-2 rtl:ml-2">
+          <span className="relative -top-px text-xs text-gray-500 ltr:ml-2 ltr:mr-2 rtl:ml-2">
             <Link href={`/settings/teams/${teamId}/members`}>
               <Badge variant="gray">
                 <Icon.FiUsers className="mr-1 -mt-px inline h-3 w-3" />
@@ -537,7 +537,7 @@ const EventTypeListHeading = ({
           </span>
         )}
         {profile?.slug && (
-          <Link href={`${CAL_URL}/${profile.slug}`} className="block text-xs text-neutral-500">
+          <Link href={`${CAL_URL}/${profile.slug}`} className="block text-xs text-gray-500">
             {`${CAL_URL?.replace("https://", "")}/${profile.slug}`}
           </Link>
         )}
diff --git a/apps/web/pages/settings/my-account/calendars.tsx b/apps/web/pages/settings/my-account/calendars.tsx
index e1088c8250..56bfb74054 100644
--- a/apps/web/pages/settings/my-account/calendars.tsx
+++ b/apps/web/pages/settings/my-account/calendars.tsx
@@ -175,9 +175,7 @@ const CalendarsView = () => {
                           </div>
                         </div>
                         <div className="w-full border-t border-gray-200">
-                          <p className="px-2 pt-4 text-sm text-neutral-500">
-                            {t("toggle_calendars_conflict")}
-                          </p>
+                          <p className="px-2 pt-4 text-sm text-gray-500">{t("toggle_calendars_conflict")}</p>
                           <ul className="space-y-2 p-4">
                             {item.calendars.map((cal) => (
                               <CalendarSwitch
diff --git a/apps/web/pages/settings/my-account/conferencing.tsx b/apps/web/pages/settings/my-account/conferencing.tsx
index cd0ef80ef2..d124ea2b0f 100644
--- a/apps/web/pages/settings/my-account/conferencing.tsx
+++ b/apps/web/pages/settings/my-account/conferencing.tsx
@@ -83,7 +83,7 @@ const ConferencingLayout = () => {
                   }
                   <div className="flex-grow truncate pl-2">
                     <ListItemTitle component="h3" className="mb-1 space-x-2 rtl:space-x-reverse">
-                      <h3 className="truncate text-sm font-medium text-neutral-900">{app.title}</h3>
+                      <h3 className="truncate text-sm font-medium text-gray-900">{app.title}</h3>
                     </ListItemTitle>
                     <ListItemText component="p">{app.description}</ListItemText>
                   </div>
diff --git a/apps/web/styles/globals.css b/apps/web/styles/globals.css
index 726c8a8b92..2ecf6effe6 100644
--- a/apps/web/styles/globals.css
+++ b/apps/web/styles/globals.css
@@ -383,11 +383,11 @@ nav#nav--settings > a svg {
 }
 
 nav#nav--settings > a.active {
-  @apply border-neutral-500 bg-neutral-50 text-neutral-700 hover:bg-neutral-50 hover:text-neutral-700;
+  @apply border-neutral-500 bg-neutral-50 text-gray-700 hover:bg-neutral-50 hover:text-gray-700;
 }
 
 nav#nav--settings > a.active svg {
-  @apply text-neutral-500;
+  @apply text-gray-500;
 }
 
 hr {
@@ -490,4 +490,4 @@ hr {
 
 ::-webkit-search-cancel-button {
   -webkit-appearance: none;
-}
\ No newline at end of file
+}
diff --git a/packages/app-store/ee/routing-forms/components/FormInputFields.tsx b/packages/app-store/ee/routing-forms/components/FormInputFields.tsx
index a533c2064c..5daa15d543 100644
--- a/packages/app-store/ee/routing-forms/components/FormInputFields.tsx
+++ b/packages/app-store/ee/routing-forms/components/FormInputFields.tsx
@@ -42,7 +42,7 @@ export default function FormInputFields(props: Props) {
               <label
                 id="slug-label"
                 htmlFor="slug"
-                className="flex text-sm font-medium text-neutral-700 dark:text-white">
+                className="flex text-sm font-medium text-gray-700 dark:text-white">
                 {field.label}
               </label>
             </div>
diff --git a/packages/app-store/ee/routing-forms/components/react-awesome-query-builder/widgets.tsx b/packages/app-store/ee/routing-forms/components/react-awesome-query-builder/widgets.tsx
index e5292f4425..f120b9d505 100644
--- a/packages/app-store/ee/routing-forms/components/react-awesome-query-builder/widgets.tsx
+++ b/packages/app-store/ee/routing-forms/components/react-awesome-query-builder/widgets.tsx
@@ -152,7 +152,7 @@ function Button({ config, type, label, onClick, readonly }: ButtonProps) {
   if (type === "delRule" || type == "delGroup") {
     return (
       <button className="ml-5">
-        <Icon.FiTrash className="m-0 h-4 w-4 text-neutral-500" onClick={onClick} />
+        <Icon.FiTrash className="m-0 h-4 w-4 text-gray-500" onClick={onClick} />
       </button>
     );
   }
diff --git a/packages/app-store/ee/routing-forms/pages/routing-link/[...appPages].tsx b/packages/app-store/ee/routing-forms/pages/routing-link/[...appPages].tsx
index 978b772b51..63e02bc2c2 100644
--- a/packages/app-store/ee/routing-forms/pages/routing-link/[...appPages].tsx
+++ b/packages/app-store/ee/routing-forms/pages/routing-link/[...appPages].tsx
@@ -112,7 +112,7 @@ function RoutingForm({ form, profile, ...restProps }: inferSSRProps<typeof getSe
                         {form.name}
                       </h1>
                       {form.description ? (
-                        <p className="min-h-10 text-sm text-neutral-500 ltr:mr-4 rtl:ml-4 dark:text-white">
+                        <p className="min-h-10 text-sm text-gray-500 ltr:mr-4 rtl:ml-4 dark:text-white">
                           {form.description}
                         </p>
                       ) : null}
diff --git a/packages/app-store/giphy/components/SearchDialog.tsx b/packages/app-store/giphy/components/SearchDialog.tsx
index b087b7687b..2228938f60 100644
--- a/packages/app-store/giphy/components/SearchDialog.tsx
+++ b/packages/app-store/giphy/components/SearchDialog.tsx
@@ -115,7 +115,7 @@ export const SearchDialog = (props: ISearchDialog) => {
         <h3 className="leading-16 font-cal text-xl text-gray-900" id="modal-title">
           {t("add_gif_to_confirmation")}
         </h3>
-        <p className="mb-3 text-sm font-light text-neutral-500">{t("find_gif_spice_confirmation")}</p>
+        <p className="mb-3 text-sm font-light text-gray-500">{t("find_gif_spice_confirmation")}</p>
         <div className="flex items-center border-b border-solid">
           {renderTab(SearchIcon, t("search_giphy"), MODE_SEARCH)}
           {renderTab(LinkIcon, t("add_link_from_giphy"), MODE_URL)}
@@ -176,7 +176,7 @@ export const SearchDialog = (props: ISearchDialog) => {
         {errorMessage && <Alert severity="error" title={errorMessage} className="my-4" />}
         {gifImage && selectedMode === MODE_SEARCH && (
           <div className="mt-4 flex items-center justify-between space-x-2 rtl:space-x-reverse">
-            <div className="text-sm font-light text-neutral-500">Not the perfect GIF?</div>
+            <div className="text-sm font-light text-gray-500">Not the perfect GIF?</div>
             <Button
               size="sm"
               color="secondary"
diff --git a/packages/app-store/rainbow/components/RainbowInstallForm.tsx b/packages/app-store/rainbow/components/RainbowInstallForm.tsx
index 5ef2dc0c8c..2f05d7f7f0 100644
--- a/packages/app-store/rainbow/components/RainbowInstallForm.tsx
+++ b/packages/app-store/rainbow/components/RainbowInstallForm.tsx
@@ -22,7 +22,7 @@ const RainbowInstallForm: React.FC<RainbowInstallFormProps> = ({
     <>
       <div className="mt-4 block items-center sm:flex">
         <div className="min-w-48 mb-4 sm:mb-0">
-          <label htmlFor="blockchainId" className="flex text-sm font-medium text-neutral-700">
+          <label htmlFor="blockchainId" className="flex text-sm font-medium text-gray-700">
             {t("Blockchain")}
           </label>
         </div>
@@ -38,7 +38,7 @@ const RainbowInstallForm: React.FC<RainbowInstallFormProps> = ({
       </div>
       <div className="block items-center sm:flex">
         <div className="min-w-48 mb-4 sm:mb-0">
-          <label htmlFor="smartContractAddress" className="flex text-sm font-medium text-neutral-700">
+          <label htmlFor="smartContractAddress" className="flex text-sm font-medium text-gray-700">
             {t("token_address")}
           </label>
         </div>
diff --git a/packages/app-store/rainbow/components/RainbowKit.tsx b/packages/app-store/rainbow/components/RainbowKit.tsx
index 9f417936b9..1cc638c0e8 100644
--- a/packages/app-store/rainbow/components/RainbowKit.tsx
+++ b/packages/app-store/rainbow/components/RainbowKit.tsx
@@ -112,7 +112,7 @@ const BalanceCheck: React.FC<RainbowGateProps> = ({ chainId, setToken, tokenAddr
       <div className="rounded-md border border-neutral-200 dark:border-neutral-700 dark:hover:border-neutral-600">
         <div className="hover:border-brand dark:bg-darkgray-100 flex min-h-[120px] grow flex-col border-b border-neutral-200 bg-white p-6 text-center first:rounded-t-md last:rounded-b-md last:border-b-0 hover:bg-white dark:border-neutral-700 dark:hover:border-neutral-600 md:flex-row md:text-left">
           <span className="mb-4 grow md:mb-0">
-            <h2 className="mb-2 grow font-semibold text-neutral-900 dark:text-white">Token Gate</h2>
+            <h2 className="mb-2 grow font-semibold text-gray-900 dark:text-white">Token Gate</h2>
             {isLoading && (
               <>
                 <SkeletonText className="mb-3 h-1 w-full" />
@@ -121,7 +121,7 @@ const BalanceCheck: React.FC<RainbowGateProps> = ({ chainId, setToken, tokenAddr
             )}
             {!isLoading && contractData && contractData.data && (
               <>
-                <p className="text-neutral-300 dark:text-white">
+                <p className="text-gray-300 dark:text-white">
                   <Trans i18nKey="rainbow_connect_wallet_gate" t={t}>
                     Connect your wallet if you own {contractData.data.name} ({contractData.data.symbol}) .
                   </Trans>
diff --git a/packages/app-store/typeform/pages/how-to-use/[...appPages].tsx b/packages/app-store/typeform/pages/how-to-use/[...appPages].tsx
index 01b23ee7e7..2123907a7c 100644
--- a/packages/app-store/typeform/pages/how-to-use/[...appPages].tsx
+++ b/packages/app-store/typeform/pages/how-to-use/[...appPages].tsx
@@ -31,7 +31,7 @@ export default function HowToUse() {
                   target="_blank"
                   className="inline-flex items-baseline text-base text-gray-500">
                   <Icon.FiExternalLink
-                    className="h-4 w-4 text-neutral-500 ltr:mr-2 rtl:ml-2"
+                    className="h-4 w-4 text-gray-500 ltr:mr-2 rtl:ml-2"
                     aria-hidden="true"
                   />
                   Click &quot;Copy Typeform Redirect URL&quot;
@@ -45,7 +45,7 @@ export default function HowToUse() {
                   target="_blank"
                   className="inline-flex items-baseline text-base text-gray-500">
                   <Icon.FiExternalLink
-                    className="h-4 w-4 text-neutral-500 ltr:mr-2 rtl:ml-2"
+                    className="h-4 w-4 text-gray-500 ltr:mr-2 rtl:ml-2"
                     aria-hidden="true"
                   />
                   Redirect to your typeform
@@ -58,7 +58,7 @@ export default function HowToUse() {
                   target="_blank"
                   className="inline-flex items-baseline text-base text-gray-500">
                   <Icon.FiExternalLink
-                    className="h-4 w-4 text-neutral-500 ltr:mr-2 rtl:ml-2"
+                    className="h-4 w-4 text-gray-500 ltr:mr-2 rtl:ml-2"
                     aria-hidden="true"
                   />
                   Recall Information in Typeform
diff --git a/packages/app-store/zapier/components/TemplateCard.tsx b/packages/app-store/zapier/components/TemplateCard.tsx
index d1892a479a..dd6d546938 100644
--- a/packages/app-store/zapier/components/TemplateCard.tsx
+++ b/packages/app-store/zapier/components/TemplateCard.tsx
@@ -13,7 +13,7 @@ export default function TemplateCard({ template }: { template: Template }) {
         </div>
         <div className="mr-4">
           <div>
-            <p className="truncate text-sm font-medium leading-4 text-neutral-900">{template.app}</p>
+            <p className="truncate text-sm font-medium leading-4 text-gray-900">{template.app}</p>
             <p className="mt-[2px] text-sm text-gray-500">{template.text}</p>
           </div>
         </div>
diff --git a/packages/app-store/zapier/pages/setup/index.tsx b/packages/app-store/zapier/pages/setup/index.tsx
index f1945c815b..5637836af7 100644
--- a/packages/app-store/zapier/pages/setup/index.tsx
+++ b/packages/app-store/zapier/pages/setup/index.tsx
@@ -75,7 +75,7 @@ export default function ZapierSetup(props: IZapierSetupProps) {
                         }}
                         type="button"
                         className="mt-4 text-base sm:mt-0 sm:rounded-l-none">
-                        <Icon.ClipboardCopyIcon className="h-5 w-5 text-neutral-100 ltr:mr-2 rtl:ml-2" />
+                        <Icon.ClipboardCopyIcon className="h-5 w-5 text-gray-100 ltr:mr-2 rtl:ml-2" />
                         {t("copy")}
                       </Button>
                     </Tooltip>
diff --git a/packages/config/tailwind-preset.js b/packages/config/tailwind-preset.js
index ec4b8c20d2..851aa8bab9 100644
--- a/packages/config/tailwind-preset.js
+++ b/packages/config/tailwind-preset.js
@@ -57,18 +57,7 @@ module.exports = {
           800: "#1F2937",
           900: "#111827",
         },
-        neutral: {
-          50: "#F8F8F8",
-          100: "#F5F5F5",
-          200: "#E1E1E1",
-          300: "#CFCFCF",
-          400: "#ACACAC",
-          500: "#888888",
-          600: "#494949",
-          700: "#3E3E3E",
-          800: "#313131",
-          900: "#292929",
-        },
+
         primary: {
           50: "#F4F4F4",
           100: "#E8E8E8",
diff --git a/packages/features/apps/AdminAppsList.tsx b/packages/features/apps/AdminAppsList.tsx
index 41bd721b2a..cda2986067 100644
--- a/packages/features/apps/AdminAppsList.tsx
+++ b/packages/features/apps/AdminAppsList.tsx
@@ -76,7 +76,7 @@ const IntegrationContainer = ({
           <div className="flex w-full flex-1 items-center justify-between space-x-3 p-4 rtl:space-x-reverse md:max-w-3xl">
             {app.logo && <img className="h-10 w-10" src={app.logo} alt={app.title} />}
             <div className="flex-grow truncate pl-2">
-              <h3 className="truncate text-sm font-medium text-neutral-900">
+              <h3 className="truncate text-sm font-medium text-gray-900">
                 <p>{app.name || app.title}</p>
               </h3>
               <p className="truncate text-sm text-gray-500">{app.description}</p>
diff --git a/packages/features/calendars/DestinationCalendarSelector.tsx b/packages/features/calendars/DestinationCalendarSelector.tsx
index 3efe0f4d28..db63778a01 100644
--- a/packages/features/calendars/DestinationCalendarSelector.tsx
+++ b/packages/features/calendars/DestinationCalendarSelector.tsx
@@ -27,7 +27,7 @@ const SingleValueComponent = ({ ...props }: SingleValueProps<Option>) => {
   const { label, subtitle } = props.data;
   return (
     <components.SingleValue {...props} className="flex space-x-1">
-      <p>{label}</p> <p className=" text-neutral-500">{subtitle}</p>
+      <p>{label}</p> <p className=" text-gray-500">{subtitle}</p>
     </components.SingleValue>
   );
 };
diff --git a/packages/features/ee/api-keys/components/ApiKeyDialogForm.tsx b/packages/features/ee/api-keys/components/ApiKeyDialogForm.tsx
index 83ed875664..6c3c95365f 100644
--- a/packages/features/ee/api-keys/components/ApiKeyDialogForm.tsx
+++ b/packages/features/ee/api-keys/components/ApiKeyDialogForm.tsx
@@ -83,7 +83,7 @@ export default function ApiKeyDialogForm({
                   }}
                   type="button"
                   className="rounded-l-none py-[19px] text-base ">
-                  <Icon.ClipboardCopyIcon className="h-5 w-5 text-neutral-100 ltr:mr-2 rtl:ml-2" />
+                  <Icon.ClipboardCopyIcon className="h-5 w-5 text-gray-100 ltr:mr-2 rtl:ml-2" />
                   {t("copy")}
                 </Button>
               </Tooltip>
diff --git a/packages/features/ee/payments/components/PaymentPage.tsx b/packages/features/ee/payments/components/PaymentPage.tsx
index 3ae6424fc5..fd4988693d 100644
--- a/packages/features/ee/payments/components/PaymentPage.tsx
+++ b/packages/features/ee/payments/components/PaymentPage.tsx
@@ -84,12 +84,12 @@ const PaymentPage: FC<PaymentPageProps> = (props) => {
 
                   <div className="mt-3 text-center sm:mt-5">
                     <h3
-                      className="text-2xl font-semibold leading-6 text-neutral-900 dark:text-white"
+                      className="text-2xl font-semibold leading-6 text-gray-900 dark:text-white"
                       id="modal-headline">
                       {t("payment")}
                     </h3>
                     <div className="mt-3">
-                      <p className="text-sm text-neutral-600 dark:text-gray-300">
+                      <p className="text-sm text-gray-600 dark:text-gray-300">
                         {t("pay_later_instructions")}
                       </p>
                     </div>
diff --git a/packages/features/ee/sso/components/SAMLConfiguration.tsx b/packages/features/ee/sso/components/SAMLConfiguration.tsx
index c060166001..46779e822b 100644
--- a/packages/features/ee/sso/components/SAMLConfiguration.tsx
+++ b/packages/features/ee/sso/components/SAMLConfiguration.tsx
@@ -122,7 +122,7 @@ export default function SAMLConfiguration({ teamId }: { teamId: number | null })
                   }}
                   type="button"
                   className="px-4 text-base">
-                  <Icon.ClipboardCopyIcon className="h-5 w-5 text-neutral-100" />
+                  <Icon.ClipboardCopyIcon className="h-5 w-5 text-gray-100" />
                   {t("copy")}
                 </Button>
               </div>
@@ -142,7 +142,7 @@ export default function SAMLConfiguration({ teamId }: { teamId: number | null })
                   }}
                   type="button"
                   className="px-4 text-base">
-                  <Icon.ClipboardCopyIcon className="h-5 w-5 text-neutral-100" />
+                  <Icon.ClipboardCopyIcon className="h-5 w-5 text-gray-100" />
                   {t("copy")}
                 </Button>
               </div>
diff --git a/packages/features/ee/support/components/HelpMenuItem.tsx b/packages/features/ee/support/components/HelpMenuItem.tsx
index 3004ba59f5..f33550a141 100644
--- a/packages/features/ee/support/components/HelpMenuItem.tsx
+++ b/packages/features/ee/support/components/HelpMenuItem.tsx
@@ -40,7 +40,7 @@ export default function HelpMenuItem({ onHelpItemSelect }: HelpMenuItemProps) {
   return (
     <div className="w-full rounded-md border-gray-300 bg-white">
       <div className="w-full py-5">
-        <p className="mb-1 px-5 text-neutral-500">{t("resources").toUpperCase()}</p>
+        <p className="mb-1 px-5 text-gray-500">{t("resources").toUpperCase()}</p>
         <a
           onClick={() => onHelpItemSelect()}
           href="https://docs.cal.com/"
@@ -50,7 +50,7 @@ export default function HelpMenuItem({ onHelpItemSelect }: HelpMenuItemProps) {
           {t("support_documentation")}
           <Icon.FiExternalLink
             className={classNames(
-              "text-neutral-400 group-hover:text-neutral-500",
+              "text-gray-400 group-hover:text-gray-500",
               "ml-1 mt-px h-4 w-4 flex-shrink-0 ltr:mr-3"
             )}
           />
@@ -64,7 +64,7 @@ export default function HelpMenuItem({ onHelpItemSelect }: HelpMenuItemProps) {
           {t("developer_documentation")}
           <Icon.FiExternalLink
             className={classNames(
-              "text-neutral-400 group-hover:text-neutral-500",
+              "text-gray-400 group-hover:text-gray-500",
               "ml-1 mt-px h-4 w-4 flex-shrink-0 ltr:mr-3"
             )}
           />
@@ -76,7 +76,7 @@ export default function HelpMenuItem({ onHelpItemSelect }: HelpMenuItemProps) {
 
       <hr className=" bg-gray-200" />
       <div className="w-full p-5">
-        <p className="mb-1 text-neutral-500">{t("feedback").toUpperCase()}</p>
+        <p className="mb-1 text-gray-500">{t("feedback").toUpperCase()}</p>
         <p className="flex w-full py-2 text-sm font-medium text-gray-700">{t("comments")}</p>
         <textarea
           id="comment"
@@ -195,10 +195,10 @@ export default function HelpMenuItem({ onHelpItemSelect }: HelpMenuItemProps) {
           </div>
         )}
       </div>
-      <div className="w-full bg-neutral-50 p-5 text-neutral-500">
+      <div className="w-full bg-neutral-50 p-5 text-gray-500">
         <p className="">{t("specific_issue")}</p>
         <button
-          className="font-medium  underline hover:text-neutral-700"
+          className="font-medium  underline hover:text-gray-700"
           onClick={() => {
             setActive(true);
             loadChat({ open: true });
@@ -209,7 +209,7 @@ export default function HelpMenuItem({ onHelpItemSelect }: HelpMenuItemProps) {
         <span> {t("or").toLowerCase()} </span>
         <a
           onClick={() => onHelpItemSelect()}
-          className="font-medium  underline hover:text-neutral-700"
+          className="font-medium  underline hover:text-gray-700"
           href="https://docs.cal.com/"
           target="_blank"
           rel="noreferrer">
diff --git a/packages/features/ee/teams/components/TeamAvailabilityModal.tsx b/packages/features/ee/teams/components/TeamAvailabilityModal.tsx
index 5415dbfca4..281d2d109b 100644
--- a/packages/features/ee/teams/components/TeamAvailabilityModal.tsx
+++ b/packages/features/ee/teams/components/TeamAvailabilityModal.tsx
@@ -38,7 +38,7 @@ export default function TeamAvailabilityModal(props: Props) {
               className="h-14 w-14 rounded-full"
             />
             <div className="inline-block pt-1 ltr:ml-3 rtl:mr-3">
-              <span className="text-lg font-bold text-neutral-700">{props.member?.name}</span>
+              <span className="text-lg font-bold text-gray-700">{props.member?.name}</span>
               <span className="-mt-1 block text-sm text-gray-400">{props.member?.email}</span>
             </div>
           </div>
diff --git a/packages/features/ee/teams/components/TeamAvailabilityScreen.tsx b/packages/features/ee/teams/components/TeamAvailabilityScreen.tsx
index c793bc900b..bfa0df17f8 100644
--- a/packages/features/ee/teams/components/TeamAvailabilityScreen.tsx
+++ b/packages/features/ee/teams/components/TeamAvailabilityScreen.tsx
@@ -48,7 +48,7 @@ export default function TeamAvailabilityScreen(props: Props) {
                 className="min-w-10 min-h-10 mt-1 h-10 w-10 rounded-full"
               />
               <div className="inline-block overflow-hidden pt-1 ltr:ml-3 rtl:mr-3">
-                <span className="truncate text-lg font-bold text-neutral-700">{member?.name}</span>
+                <span className="truncate text-lg font-bold text-gray-700">{member?.name}</span>
                 <span className="-mt-1 block truncate text-sm text-gray-400">{member?.email}</span>
               </div>
             </div>
@@ -62,7 +62,7 @@ export default function TeamAvailabilityScreen(props: Props) {
     <div className="flex flex-1 flex-col rounded-sm border border-neutral-200 bg-white">
       <div className="flex w-full space-x-5 border-b border-gray-200 p-4 rtl:space-x-reverse">
         <div className="flex flex-col">
-          <span className="text-sm font-medium text-neutral-700">Date</span>
+          <span className="text-sm font-medium text-gray-700">Date</span>
           <DatePicker
             date={selectedDate.toDate()}
             className="p-1.5"
@@ -72,7 +72,7 @@ export default function TeamAvailabilityScreen(props: Props) {
           />
         </div>
         <div className="flex flex-col">
-          <span className="text-sm font-medium text-neutral-700">Timezone</span>
+          <span className="text-sm font-medium text-gray-700">Timezone</span>
           <TimezoneSelect
             id="timeZone"
             value={selectedTimeZone}
@@ -82,7 +82,7 @@ export default function TeamAvailabilityScreen(props: Props) {
           />
         </div>
         <div className="hidden sm:block">
-          <span className="text-sm font-medium text-neutral-700">Slot Length</span>
+          <span className="text-sm font-medium text-gray-700">Slot Length</span>
           <Select
             options={[
               { value: 15, label: "15 minutes" },
diff --git a/packages/features/ee/teams/components/TeamAvailabilityTimes.tsx b/packages/features/ee/teams/components/TeamAvailabilityTimes.tsx
index 37619ea374..bfa1aef760 100644
--- a/packages/features/ee/teams/components/TeamAvailabilityTimes.tsx
+++ b/packages/features/ee/teams/components/TeamAvailabilityTimes.tsx
@@ -53,7 +53,7 @@ export default function TeamAvailabilityTimes(props: Props) {
       {slots.map((slot) => (
         <div key={slot.time.format()} className="flex flex-row items-center">
           <a
-            className="min-w-48 border-brand text-bookingdarker hover:bg-brand hover:text-brandcontrast dark:hover:bg-darkmodebrand dark:hover:text-darkmodebrandcontrast mb-2 mr-3 block flex-grow rounded-sm border bg-white py-2 text-center font-medium dark:border-transparent dark:bg-gray-600 dark:text-neutral-200 dark:hover:border-black dark:hover:bg-black dark:hover:text-white"
+            className="min-w-48 border-brand text-bookingdarker hover:bg-brand hover:text-brandcontrast dark:hover:bg-darkmodebrand dark:hover:text-darkmodebrandcontrast dark:text-darkgray-800 mb-2 mr-3 block flex-grow rounded-sm border bg-white py-2 text-center font-medium dark:border-transparent dark:bg-gray-600 dark:hover:border-black dark:hover:bg-black dark:hover:text-white"
             data-testid="time">
             {slot.time.format("HH:mm")}
           </a>
diff --git a/packages/features/ee/teams/components/TeamListItem.tsx b/packages/features/ee/teams/components/TeamListItem.tsx
index b58a4dbb06..3f5f5070a4 100644
--- a/packages/features/ee/teams/components/TeamListItem.tsx
+++ b/packages/features/ee/teams/components/TeamListItem.tsx
@@ -72,7 +72,7 @@ export default function TeamListItem(props: Props) {
         className="min-h-9 min-w-9 h-9 w-9 rounded-full"
       />
       <div className="inline-block ltr:ml-3 rtl:mr-3">
-        <span className="text-sm font-bold text-neutral-700">{team.name}</span>
+        <span className="text-sm font-bold text-gray-700">{team.name}</span>
         <span className="block text-xs text-gray-400">
           {team.slug ? `${process.env.NEXT_PUBLIC_WEBSITE_URL}/team/${team.slug}` : "Unpublished team"}
         </span>
diff --git a/packages/features/ee/teams/components/v2/TeamAvailabilityScreen.tsx b/packages/features/ee/teams/components/v2/TeamAvailabilityScreen.tsx
index c793bc900b..bfa0df17f8 100644
--- a/packages/features/ee/teams/components/v2/TeamAvailabilityScreen.tsx
+++ b/packages/features/ee/teams/components/v2/TeamAvailabilityScreen.tsx
@@ -48,7 +48,7 @@ export default function TeamAvailabilityScreen(props: Props) {
                 className="min-w-10 min-h-10 mt-1 h-10 w-10 rounded-full"
               />
               <div className="inline-block overflow-hidden pt-1 ltr:ml-3 rtl:mr-3">
-                <span className="truncate text-lg font-bold text-neutral-700">{member?.name}</span>
+                <span className="truncate text-lg font-bold text-gray-700">{member?.name}</span>
                 <span className="-mt-1 block truncate text-sm text-gray-400">{member?.email}</span>
               </div>
             </div>
@@ -62,7 +62,7 @@ export default function TeamAvailabilityScreen(props: Props) {
     <div className="flex flex-1 flex-col rounded-sm border border-neutral-200 bg-white">
       <div className="flex w-full space-x-5 border-b border-gray-200 p-4 rtl:space-x-reverse">
         <div className="flex flex-col">
-          <span className="text-sm font-medium text-neutral-700">Date</span>
+          <span className="text-sm font-medium text-gray-700">Date</span>
           <DatePicker
             date={selectedDate.toDate()}
             className="p-1.5"
@@ -72,7 +72,7 @@ export default function TeamAvailabilityScreen(props: Props) {
           />
         </div>
         <div className="flex flex-col">
-          <span className="text-sm font-medium text-neutral-700">Timezone</span>
+          <span className="text-sm font-medium text-gray-700">Timezone</span>
           <TimezoneSelect
             id="timeZone"
             value={selectedTimeZone}
@@ -82,7 +82,7 @@ export default function TeamAvailabilityScreen(props: Props) {
           />
         </div>
         <div className="hidden sm:block">
-          <span className="text-sm font-medium text-neutral-700">Slot Length</span>
+          <span className="text-sm font-medium text-gray-700">Slot Length</span>
           <Select
             options={[
               { value: 15, label: "15 minutes" },
diff --git a/packages/features/ee/teams/components/v2/TeamAvailabilityTimes.tsx b/packages/features/ee/teams/components/v2/TeamAvailabilityTimes.tsx
index e7e7ae3d9f..43e4a4df7b 100644
--- a/packages/features/ee/teams/components/v2/TeamAvailabilityTimes.tsx
+++ b/packages/features/ee/teams/components/v2/TeamAvailabilityTimes.tsx
@@ -60,7 +60,7 @@ export default function TeamAvailabilityTimes(props: Props) {
         {slots.map((slot) => (
           <div key={slot.time.format()} className="flex flex-row items-center ">
             <a
-              className="min-w-48 border-brand text-bookingdarker mb-2 mr-3 block flex-grow rounded-md border bg-white py-2 text-center font-medium dark:border-transparent dark:bg-gray-600 dark:text-neutral-200 "
+              className="min-w-48 border-brand text-bookingdarker dark:text-darkgray-800 mb-2 mr-3 block flex-grow rounded-md border bg-white py-2 text-center font-medium dark:border-transparent dark:bg-gray-600 "
               data-testid="time">
               {slot.time.tz(props.selectedTimeZone.toString()).format("HH:mm")}
             </a>
diff --git a/packages/features/ee/workflows/components/EventWorkflowsTab.tsx b/packages/features/ee/workflows/components/EventWorkflowsTab.tsx
index 03e22d9c64..1c2e1c300a 100644
--- a/packages/features/ee/workflows/components/EventWorkflowsTab.tsx
+++ b/packages/features/ee/workflows/components/EventWorkflowsTab.tsx
@@ -101,7 +101,7 @@ const WorkflowListItem = (props: ItemProps) => {
         <div
           className={classNames(
             "mb-1 w-full truncate text-base font-medium leading-4 text-gray-900 md:max-w-max",
-            workflow.name && isActive ? "text-gray-900" : "text-neutral-500"
+            workflow.name && isActive ? "text-gray-900" : "text-gray-500"
           )}>
           {workflow.name
             ? workflow.name
diff --git a/packages/features/ee/workflows/components/WorkflowListPage.tsx b/packages/features/ee/workflows/components/WorkflowListPage.tsx
index 80e726ec85..f826a88278 100644
--- a/packages/features/ee/workflows/components/WorkflowListPage.tsx
+++ b/packages/features/ee/workflows/components/WorkflowListPage.tsx
@@ -89,7 +89,7 @@ export default function WorkflowListPage({ workflows }: Props) {
                       <div
                         className={classNames(
                           "max-w-56 truncate text-sm font-medium leading-6 text-gray-900 md:max-w-max",
-                          workflow.name ? "text-gray-900" : "text-neutral-500"
+                          workflow.name ? "text-gray-900" : "text-gray-500"
                         )}>
                         {workflow.name
                           ? workflow.name
diff --git a/packages/features/eventtypes/components/EventTypeDescription.tsx b/packages/features/eventtypes/components/EventTypeDescription.tsx
index 2d51a99dbb..51a767363b 100644
--- a/packages/features/eventtypes/components/EventTypeDescription.tsx
+++ b/packages/features/eventtypes/components/EventTypeDescription.tsx
@@ -32,7 +32,7 @@ export const EventTypeDescription = ({ eventType, className }: EventTypeDescript
 
   return (
     <>
-      <div className={classNames("dark:text-darkgray-800 text-neutral-500", className)}>
+      <div className={classNames("dark:text-darkgray-800 text-gray-500", className)}>
         {eventType.description && (
           <p className="dark:text-darkgray-800 max-w-[280px] break-words py-1 text-sm text-gray-500 sm:max-w-[500px]">
             {eventType.description.substring(0, 300)}
diff --git a/packages/features/kbar/Kbar.tsx b/packages/features/kbar/Kbar.tsx
index 7eb0427bde..e4e1b2350c 100644
--- a/packages/features/kbar/Kbar.tsx
+++ b/packages/features/kbar/Kbar.tsx
@@ -278,7 +278,7 @@ export const KBarTrigger = () => {
         <button
           color="minimal"
           onClick={query.toggle}
-          className="group flex rounded-md py-2 px-3 text-sm font-medium hover:bg-gray-100 lg:p-1 lg:hover:bg-gray-200 lg:hover:text-neutral-900">
+          className="group flex rounded-md py-2 px-3 text-sm font-medium hover:bg-gray-100 lg:p-1 lg:hover:bg-gray-200 lg:hover:text-gray-900">
           <Icon.FiSearch className="h-4 w-4 flex-shrink-0 text-inherit" />
         </button>
       </Tooltip>
diff --git a/packages/features/schedules/components/DateOverrideInputDialog.tsx b/packages/features/schedules/components/DateOverrideInputDialog.tsx
index 9a16346a16..5755258199 100644
--- a/packages/features/schedules/components/DateOverrideInputDialog.tsx
+++ b/packages/features/schedules/components/DateOverrideInputDialog.tsx
@@ -136,9 +136,7 @@ const DateOverrideForm = ({
             <p className="text-medium text-sm">{t("date_overrides_dialog_which_hours")}</p>
             <div>
               {datesUnavailable ? (
-                <p className="rounded border p-2 text-sm text-neutral-500">
-                  {t("date_overrides_unavailable")}
-                </p>
+                <p className="rounded border p-2 text-sm text-gray-500">{t("date_overrides_unavailable")}</p>
               ) : (
                 <DayRanges name="range" />
               )}
diff --git a/packages/features/schedules/components/DateOverrideList.tsx b/packages/features/schedules/components/DateOverrideList.tsx
index 290bf518b6..2885cebbf1 100644
--- a/packages/features/schedules/components/DateOverrideList.tsx
+++ b/packages/features/schedules/components/DateOverrideList.tsx
@@ -50,10 +50,10 @@ const DateOverrideList = ({
               }).format(item.ranges[0].start)}
             </h3>
             {item.ranges[0].end.getUTCHours() === 0 && item.ranges[0].end.getUTCMinutes() === 0 ? (
-              <p className="text-xs text-neutral-500">{t("unavailable")}</p>
+              <p className="text-xs text-gray-500">{t("unavailable")}</p>
             ) : (
               item.ranges.map((range, i) => (
-                <p key={i} className="text-xs text-neutral-500">
+                <p key={i} className="text-xs text-gray-500">
                   {timeSpan(range)}
                 </p>
               ))
diff --git a/packages/features/schedules/components/Schedule.tsx b/packages/features/schedules/components/Schedule.tsx
index 47e393f71a..1cd9b6ab76 100644
--- a/packages/features/schedules/components/Schedule.tsx
+++ b/packages/features/schedules/components/Schedule.tsx
@@ -181,7 +181,7 @@ export const DayRanges = <TFieldValues extends FieldValues>({
             {index === 0 && (
               <Button
                 tooltip={t("add_time_availability")}
-                className=" text-neutral-400"
+                className=" text-gray-400"
                 type="button"
                 color="minimal"
                 size="icon"
@@ -371,7 +371,7 @@ const CopyTimes = ({
   return (
     <div className="space-y-2 py-2">
       <div className="p-2">
-        <p className="h6 pb-3 pl-1 text-xs font-medium uppercase text-neutral-400">{t("copy_times_to")}</p>
+        <p className="h6 pb-3 pl-1 text-xs font-medium uppercase text-gray-400">{t("copy_times_to")}</p>
         <ol className="space-y-2">
           {weekdayNames(i18n.language, weekStart).map((weekday, num) => {
             const weekdayIndex = (num + weekStart) % 7;
@@ -391,7 +391,7 @@ const CopyTimes = ({
                       }
                     }}
                     type="checkbox"
-                    className="inline-block rounded-[4px] border-gray-300 text-neutral-900 focus:ring-neutral-500 disabled:text-neutral-400"
+                    className="inline-block rounded-[4px] border-gray-300 text-gray-900 focus:ring-neutral-500 disabled:text-gray-400"
                   />
                 </label>
               </li>
diff --git a/packages/features/schedules/components/ScheduleListItem.tsx b/packages/features/schedules/components/ScheduleListItem.tsx
index 6874ec6981..6efe0c0659 100644
--- a/packages/features/schedules/components/ScheduleListItem.tsx
+++ b/packages/features/schedules/components/ScheduleListItem.tsx
@@ -45,14 +45,14 @@ export function ScheduleListItem({
             className="flex-grow truncate text-sm"
             title={schedule.name}>
             <div className="space-x-2 rtl:space-x-reverse">
-              <span className="truncate font-medium text-neutral-900">{schedule.name}</span>
+              <span className="truncate font-medium text-gray-900">{schedule.name}</span>
               {schedule.isDefault && (
                 <Badge variant="success" className="text-xs">
                   {t("default")}
                 </Badge>
               )}
             </div>
-            <p className="mt-1 text-xs text-neutral-500">
+            <p className="mt-1 text-xs text-gray-500">
               {schedule.availability
                 .filter((availability) => !!availability.days.length)
                 .map((availability) => (
diff --git a/packages/features/shell/Shell.tsx b/packages/features/shell/Shell.tsx
index df10be26db..16d03950d5 100644
--- a/packages/features/shell/Shell.tsx
+++ b/packages/features/shell/Shell.tsx
@@ -362,7 +362,7 @@ function UserDropdown({ small }: { small?: boolean }) {
                   className="flex w-full items-center px-4 py-2 text-sm text-gray-700 ltr:flex-row rtl:flex-row-reverse">
                   <Icon.FiHelpCircle
                     className={classNames(
-                      "text-gray-500 group-hover:text-neutral-500",
+                      "text-gray-500 group-hover:text-gray-500",
                       "h-4 w-4 flex-shrink-0 ltr:mr-2 rtl:ml-2"
                     )}
                     aria-hidden="true"
@@ -581,7 +581,7 @@ const NavigationItem: React.FC<{
         href={item.href}
         aria-label={t(item.name)}
         className={classNames(
-          "group flex items-center rounded-md py-2 px-3 text-sm font-medium text-gray-600 hover:bg-gray-100 [&[aria-current='page']]:bg-gray-200 [&[aria-current='page']]:hover:text-neutral-900",
+          "group flex items-center rounded-md py-2 px-3 text-sm font-medium text-gray-600 hover:bg-gray-100 [&[aria-current='page']]:bg-gray-200 [&[aria-current='page']]:hover:text-gray-900",
           isChild
             ? `[&[aria-current='page']]:text-brand-900 hidden h-8 pl-16 lg:flex lg:pl-11 [&[aria-current='page']]:bg-transparent ${
                 props.index === 0 ? "mt-0" : "mt-px"
@@ -654,7 +654,7 @@ const MobileNavigationItem: React.FC<{
     <Link
       key={item.name}
       href={item.href}
-      className="relative my-2 min-w-0 flex-1 overflow-hidden rounded-md py-2 px-1 text-center text-xs font-medium text-neutral-400 hover:bg-gray-200 hover:text-gray-700 focus:z-10 sm:text-sm [&[aria-current='page']]:text-gray-900"
+      className="relative my-2 min-w-0 flex-1 overflow-hidden rounded-md py-2 px-1 text-center text-xs font-medium text-gray-400 hover:bg-gray-200 hover:text-gray-700 focus:z-10 sm:text-sm [&[aria-current='page']]:text-gray-900"
       aria-current={current ? "page" : undefined}>
       {item.badge && <div className="absolute right-1 top-1">{item.badge}</div>}
       {item.icon && (
@@ -717,14 +717,14 @@ function SideBar() {
               <button
                 color="minimal"
                 onClick={() => window.history.back()}
-                className="desktop-only group flex text-sm font-medium text-neutral-500 hover:text-neutral-900">
-                <Icon.FiArrowLeft className="h-4 w-4 flex-shrink-0 text-neutral-500 group-hover:text-neutral-900" />
+                className="desktop-only group flex text-sm font-medium text-gray-500 hover:text-gray-900">
+                <Icon.FiArrowLeft className="h-4 w-4 flex-shrink-0 text-gray-500 group-hover:text-gray-900" />
               </button>
               <button
                 color="minimal"
                 onClick={() => window.history.forward()}
-                className="desktop-only group flex text-sm font-medium text-neutral-500 hover:text-neutral-900">
-                <Icon.FiArrowRight className="h-4 w-4 flex-shrink-0 text-neutral-500 group-hover:text-neutral-900" />
+                className="desktop-only group flex text-sm font-medium text-gray-500 hover:text-gray-900">
+                <Icon.FiArrowRight className="h-4 w-4 flex-shrink-0 text-gray-500 group-hover:text-gray-900" />
               </button>
               <KBarTrigger />
             </div>
@@ -791,7 +791,7 @@ export function ShellMain(props: LayoutProps) {
                 </h1>
               )}
               {props.subtitle && (
-                <p className="hidden text-sm text-neutral-500 sm:block">
+                <p className="hidden text-sm text-gray-500 sm:block">
                   {!isLocaleReady ? <SkeletonText invisible /> : props.subtitle}
                 </p>
               )}
@@ -854,7 +854,7 @@ function TopNav() {
           <Logo />
         </Link>
         <div className="flex items-center gap-2 self-center">
-          <span className="group flex items-center rounded-full text-sm font-medium text-gray-700 hover:bg-gray-50 hover:text-neutral-900 lg:hidden">
+          <span className="group flex items-center rounded-full text-sm font-medium text-gray-700 hover:bg-gray-50 hover:text-gray-900 lg:hidden">
             <KBarTrigger />
           </span>
           <button className="rounded-full p-1 text-gray-400 hover:bg-gray-50 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-black focus:ring-offset-2">
diff --git a/packages/features/webhooks/components/WebhookForm.tsx b/packages/features/webhooks/components/WebhookForm.tsx
index 48a5a2dc60..5bcda67e8e 100644
--- a/packages/features/webhooks/components/WebhookForm.tsx
+++ b/packages/features/webhooks/components/WebhookForm.tsx
@@ -154,7 +154,7 @@ const WebhookForm = (props: {
                 <>
                   <Label className="font-sm font-medium text-gray-900">Secret</Label>
                   <div className="space-y-0 rounded-md border-0 border-neutral-200 bg-white sm:mx-0 md:border">
-                    <div className="rounded-sm border-b p-2 text-sm text-neutral-900">
+                    <div className="rounded-sm border-b p-2 text-sm text-gray-900">
                       {t("forgotten_secret_description")}
                     </div>
                     <div className="p-2">
diff --git a/packages/ui/components/button/LinkIconButton.tsx b/packages/ui/components/button/LinkIconButton.tsx
index 3b4bcadec7..e57846a6b1 100644
--- a/packages/ui/components/button/LinkIconButton.tsx
+++ b/packages/ui/components/button/LinkIconButton.tsx
@@ -13,7 +13,7 @@ export default function LinkIconButton(props: LinkIconButtonProps) {
         type="button"
         {...props}
         className="text-md flex items-center rounded-md px-2 py-1 text-sm font-medium text-gray-700 hover:bg-gray-200 hover:text-gray-900">
-        <props.Icon className="h-4 w-4 text-neutral-500 ltr:mr-2 rtl:ml-2" />
+        <props.Icon className="h-4 w-4 text-gray-500 ltr:mr-2 rtl:ml-2" />
         {props.children}
       </button>
     </div>
diff --git a/packages/ui/components/dialog/ConfirmationDialogContent.tsx b/packages/ui/components/dialog/ConfirmationDialogContent.tsx
index 68fbe634c5..e98e6dec04 100644
--- a/packages/ui/components/dialog/ConfirmationDialogContent.tsx
+++ b/packages/ui/components/dialog/ConfirmationDialogContent.tsx
@@ -55,7 +55,7 @@ export function ConfirmationDialogContent(props: PropsWithChildren<ConfirmationD
         )}
         <div>
           <DialogPrimitive.Title className="font-cal text-xl text-gray-900">{title}</DialogPrimitive.Title>
-          <DialogPrimitive.Description className="text-sm text-neutral-500">
+          <DialogPrimitive.Description className="text-sm text-gray-500">
             {children}
           </DialogPrimitive.Description>
         </div>
diff --git a/packages/ui/components/form/checkbox/Checkbox.tsx b/packages/ui/components/form/checkbox/Checkbox.tsx
index 02dff74313..6324be7041 100644
--- a/packages/ui/components/form/checkbox/Checkbox.tsx
+++ b/packages/ui/components/form/checkbox/Checkbox.tsx
@@ -39,7 +39,7 @@ const CheckboxField = forwardRef<HTMLInputElement, Props>(
               {
                 className: classNames(
                   "relative flex items-start",
-                  !error && descriptionAsLabel ? "text-gray-900" : "text-neutral-900",
+                  !error && descriptionAsLabel ? "text-gray-900" : "text-gray-900",
                   error && "text-red-800"
                 ),
               },
diff --git a/packages/ui/components/form/dropdown/Dropdown.tsx b/packages/ui/components/form/dropdown/Dropdown.tsx
index 8b86bb5277..df22a301e9 100644
--- a/packages/ui/components/form/dropdown/Dropdown.tsx
+++ b/packages/ui/components/form/dropdown/Dropdown.tsx
@@ -47,7 +47,7 @@ DropdownMenuContent.displayName = "DropdownMenuContent";
 
 type DropdownMenuLabelProps = ComponentProps<typeof DropdownMenuPrimitive["Label"]>;
 export const DropdownMenuLabel = (props: DropdownMenuLabelProps) => (
-  <DropdownMenuPrimitive.Label {...props} className="px-3 py-2 text-neutral-500" />
+  <DropdownMenuPrimitive.Label {...props} className="px-3 py-2 text-gray-500" />
 );
 
 type DropdownMenuItemProps = ComponentProps<typeof DropdownMenuPrimitive["CheckboxItem"]>;
diff --git a/packages/ui/components/form/toggleGroup/ToggleGroup.tsx b/packages/ui/components/form/toggleGroup/ToggleGroup.tsx
index 3801301430..f7ef07737c 100644
--- a/packages/ui/components/form/toggleGroup/ToggleGroup.tsx
+++ b/packages/ui/components/form/toggleGroup/ToggleGroup.tsx
@@ -43,8 +43,8 @@ export const ToggleGroup = ({ options, onValueChange, isFullWidth, ...props }: T
             className={classNames(
               "relative rounded-[4px] px-3 py-1 text-sm",
               option.disabled
-                ? "text-gray-400 hover:cursor-not-allowed dark:text-neutral-100"
-                : "dark:text-neutral-200 [&[aria-checked='false']]:hover:font-medium",
+                ? "dark:text-darkgray-900 text-gray-400 hover:cursor-not-allowed"
+                : "dark:text-darkgray-800 [&[aria-checked='false']]:hover:font-medium",
               isFullWidth && "w-full"
             )}
             ref={(node) => {
diff --git a/packages/ui/components/layout/ShellSubHeading.tsx b/packages/ui/components/layout/ShellSubHeading.tsx
index 7b04298730..6752aac2ef 100644
--- a/packages/ui/components/layout/ShellSubHeading.tsx
+++ b/packages/ui/components/layout/ShellSubHeading.tsx
@@ -14,7 +14,7 @@ export function ShellSubHeading(props: {
         <h2 className="flex content-center items-center space-x-2 text-base font-bold leading-6 text-gray-900 rtl:space-x-reverse">
           {props.title}
         </h2>
-        {props.subtitle && <p className="text-sm text-neutral-500 ltr:mr-4">{props.subtitle}</p>}
+        {props.subtitle && <p className="text-sm text-gray-500 ltr:mr-4">{props.subtitle}</p>}
       </div>
       {props.actions && <div className="mt-2 flex-shrink-0 sm:mt-0">{props.actions}</div>}
     </header>
diff --git a/packages/ui/components/list/List.tsx b/packages/ui/components/list/List.tsx
index 207168d6f5..cab007727a 100644
--- a/packages/ui/components/list/List.tsx
+++ b/packages/ui/components/list/List.tsx
@@ -107,7 +107,7 @@ export function ListItemTitle<TComponent extends keyof JSX.IntrinsicElements = "
     component,
     {
       ...passThroughProps,
-      className: classNames("text-sm font-medium text-neutral-900 truncate", props.className),
+      className: classNames("text-sm font-medium text-gray-900 truncate", props.className),
     },
     props.children
   );
diff --git a/packages/ui/components/navigation/tabs/HorizontalTabItem.tsx b/packages/ui/components/navigation/tabs/HorizontalTabItem.tsx
index 48c69967fb..84a77c010c 100644
--- a/packages/ui/components/navigation/tabs/HorizontalTabItem.tsx
+++ b/packages/ui/components/navigation/tabs/HorizontalTabItem.tsx
@@ -39,7 +39,7 @@ const HorizontalTabItem = function ({ name, href, linkProps, ...props }: Horizon
         //@ts-ignore
         <props.icon
           className={classNames(
-            isCurrent ? "text-neutral-900" : "text-gray-400 group-hover:text-gray-500",
+            isCurrent ? "text-gray-900" : "text-gray-400 group-hover:text-gray-500",
             "-ml-0.5 hidden h-4 w-4 ltr:mr-2 rtl:ml-2 sm:inline-block"
           )}
           aria-hidden="true"
diff --git a/packages/ui/form/radio-area/RadioAreaGroup.tsx b/packages/ui/form/radio-area/RadioAreaGroup.tsx
index 9f241a646b..1eb24d531d 100644
--- a/packages/ui/form/radio-area/RadioAreaGroup.tsx
+++ b/packages/ui/form/radio-area/RadioAreaGroup.tsx
@@ -10,7 +10,7 @@ const RadioArea = React.forwardRef<HTMLInputElement, RadioAreaProps>(
       <label className={classNames("relative flex", className)}>
         <input
           ref={ref}
-          className="peer absolute top-[0.9rem] left-3 align-baseline text-neutral-900 focus:ring-neutral-500"
+          className="peer absolute top-[0.9rem] left-3 align-baseline text-gray-900 focus:ring-neutral-500"
           type="radio"
           {...props}
         />
diff --git a/packages/ui/form/radio-area/Select.tsx b/packages/ui/form/radio-area/Select.tsx
index 06a2547d60..3d29172933 100644
--- a/packages/ui/form/radio-area/Select.tsx
+++ b/packages/ui/form/radio-area/Select.tsx
@@ -46,7 +46,7 @@ export const Select = function RadioAreaSelect<TFieldValues extends FieldValues>
           disabled && "cursor-default bg-gray-200 focus:ring-0 "
         )}>
         {getLabel(props.value) ?? placeholder}
-        <ChevronDownIcon className="float-right h-5 w-5 text-neutral-500" />
+        <ChevronDownIcon className="float-right h-5 w-5 text-gray-500" />
       </CollapsibleTrigger>
       <CollapsibleContent>
         <RadioAreaGroup className="space-y-2 text-sm" onChange={props.onChange}>